:root {
    --tis-navy: #00008A;
    --tis-orange: #ee5421;
    --tis-bg-light: #f8f9fa;
    --tis-transition: all 0.5s cubic-bezier(0.2, 1, 0.3, 1);
    
    --tis-radius-sm: 8px;
    --tis-radius-md: 20px;
    --tis-radius-lg: 35px;
}

.bg-tis-navy { background-color: var(--tis-navy) !important; }
.bg-tis-orange { background-color: var(--tis-orange) !important; }
.text-tis-navy { color: var(--tis-navy) !important; }
.text-tis-orange { color: var(--tis-orange) !important; }
.border-tis-navy { border-color: var(--tis-navy) !important; }
.border-tis-orange { border-color: var(--tis-orange) !important; }

body, .font-montserrat {
    font-family: 'Montserrat', sans-serif !important;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, .font-black {
    font-weight: 900 !important;
    letter-spacing: -0.02em;
}

.rounded-none { border-radius: 0px !important; }
.rounded-sm, button, input, select { border-radius: var(--tis-radius-sm) !important; }
.rounded, .rounded-lg, .step-item > div { border-radius: var(--tis-radius-md) !important; }
.rounded-xl, .shadow-2xl img { border-radius: var(--tis-radius-lg) !important; }

.tis-story-v3 section { overflow: hidden; }

.shadow-2xl {
    box-shadow: 30px 30px 80px rgba(0,0,138,0.15) !important; 
}

.step-item {
    opacity: 0;
    transform: translateY(50px);
    transition: var(--tis-transition);
}

.step-item.active {
    opacity: 1;
    transform: translateY(0);
}

.size-14, .size-16 {
    transition: var(--tis-transition);
    z-index: 30;
    border-radius: 50% !important; 
}

.step-item:hover .size-14, 
.step-item:hover .size-16 {
    transform: translate(-50%, -50%) scale(1.2) rotate(10deg);
    background-color: #111 !important;
}

.group:hover img {
    transform: scale(1.15); 
}

.group p {
    transition: var(--tis-transition);
}

input, select {
    background: transparent !important;
    font-weight: 700;
    border: 1px solid #ddd;
    padding: 12px 15px;
}

input:focus {
    padding-left: 20px;
    background: #fdfdfd !important;
    border-color: var(--tis-navy);
}

button[type="submit"] {
    position: relative;
    overflow: hidden;
    z-index: 1;
    border: none;
}

button[type="submit"]::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; width: 100%; height: 0;
    background: #111;
    z-index: -1;
    transition: var(--tis-transition);
}

button[type="submit"]:hover::after {
    height: 100%;
}

@media (max-width: 768px) {
    .absolute.left-1/2 { display: none !important; } 
    .step-item { transform: none !important; opacity: 1 !important; margin-bottom: 60px; }
    h1 { font-size: 32px !important; }
}

.decoration-4 {
    text-decoration-thickness: 6px !important;
}
/* --- 3. TIÊU ĐỀ & TAGS (Sửa lỗi tại đây) --- */
.tag-sub { 
    color: var(--orange); 
    font-weight: 700; 
    text-transform: uppercase; 
    letter-spacing: 1px; 
    display: block; 
    margin-bottom: 10px; 
}

.text-navy { 
    color: var(--navy); 
    font-weight: 900; 
    font-size: 36px; 
    text-transform: uppercase; 
}

.section-title { 
    font-size: 16px; 
    font-weight: 800; 
    color: #94a3b8; 
    text-transform: uppercase; 
    text-align: center; 
    letter-spacing: 2px; 
    margin-bottom: 40px; 
}

/* --- 4. BENTO HEADER (Kế thừa từ text-navy) --- */
.bento-header h2.text-navy {
    font-size: 32px;
    font-weight: 800;
    position: relative;
    padding-bottom: 25px;
    margin-bottom: 40px;
    display: inline-block; /* Để thanh after không bị dài quá khổ */
}

.bento-header h2.text-navy::after {
    content: '';
    display: block;
    width: 70px;
    height: 4px;
    background: var(--orange);
    margin: 20px auto 0;
    border-radius: 2px;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
}