:root {
    /* 3 MÀU CHỦ ĐẠO CHÍNH CỦA WEBSITE */
    --primary: #ec3237;      /* Đỏ chính */
    --blue: #08408d;         /* Xanh đậm */
    --bg-white: #FFFFFF;     /* Trắng */

    /* Hệ màu bổ trợ */
    --blue-light: #1A76D2;
    --blue-pale: #E8F1FB;
    --text-dark: #111111;
    --text-mid: #444444;
    --text-muted: #7A7A9A;
    --bg-light: #F7F8FC;
    --border: #e2e8f0;
    --radius: 12px;
    --radius-sm: 8px;
    --shadow: 0 4px 24px rgba(8, 64, 141, 0.08);
    --shadow-lg: 0 8px 40px rgba(8, 64, 141, 0.12);
}

html {
    scroll-behavior: smooth;
}

body {
    color: var(--text-dark);
    background: var(--bg-white);
    line-height: 1.6;
    font-family: K2D;
    position: relative;
    min-height: 100vh;
}


.c_error{
    color: red;
}

img {
    max-width: 100%;
    display: block;
}

a {
    text-decoration: none;
    color: inherit;
}

/* ============ HEADER & STICKY BOTTOM CONTROL ============ */
.header-spacer {
    position: relative;
    width: 100%;
}

#header {
    position: relative;
    background: var(--bg-white);
    border-bottom: 1.5px solid var(--border);
    box-shadow: 0 2px 12px rgba(8, 64, 141, 0.06);
    width: 100%;
    z-index: 999;
}

/* Trạng thái 1: Đang lơ lửng cuộn trang -> Găm chặt dưới đáy màn hình */
#header.is-sticky {
    position: fixed;
    left: 0;
    bottom: 0;
    top: auto;
    border-top: 1.5px solid var(--border);
    border-bottom: none;
    box-shadow: 0 -2px 12px rgba(8, 64, 141, 0.08);
    animation: slideUp 0.25s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Trạng thái 2: Đã cuộn xuống cuối cùng -> Nhả fixed, đứng yên trên Footer không che chữ */
#header.is-bottom {
    position: absolute;
    left: 0;
    bottom: 0;
    top: auto;
    border-top: 1.5px solid var(--border);
    border-bottom: none;
    box-shadow: none;
    animation: none;
}

@keyframes slideUp {
    from { transform: translateY(100%); }
    to { transform: translateY(0); }
}

.header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100px;
}

.logo-wrap img {
    height: 100px;
    width: auto;
}

nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

nav a {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-dark);
    transition: color .2s;
}

nav a:hover {
    color: var(--blue);
}

/* Nút Nhận Tư Vấn (Màu Đỏ chủ đạo, hover ra Xanh) */
/* ==================== HIỆU ỨNG CO GIÃN TỰ ĐỘNG (PULSE CALL EFFECT) ==================== */
.btn-nav {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    /* Màu nền đỏ Gradient rực rỡ */
    background: linear-gradient(135deg, var(--primary) 0%, #e53e3e 100%);
    color: #ffffff !important;

    font-weight: 800;
    font-size: 13.5px;
    padding: 10px 24px;
    border-radius: 50px; /* Bo tròn viên thuốc */
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    position: relative;

    /* KÍCH HOẠT HIỆU ỨNG: Chạy liên tục vòng lặp không ngừng (infinite) trong 2 giây */
    animation: pulseNavCall 2s infinite ease-in-out;
    transition: all 0.3s ease;
}

/* HIỆU ỨNG KHI RÊ CHUỘT VÀO: Tạm dừng co giãn để người dùng dễ bấm và sáng rực lên */
.btn-nav:hover {
    animation-play-state: paused; /* Đứng yên khi hover */
    filter: brightness(1.1);
    box-shadow: 0 0 20px rgba(229, 62, 62, 0.6);
    transform: scale(1.05); /* Phóng to nhẹ một chút ổn định */
}

/* ĐỊNH NGHĨA CHUYỂN ĐỘNG CO GIÃN VÀ LAN TỎA BÓNG ĐỔ */
@keyframes pulseNavCall {
    0% {
        transform: scale(1); /* Kích thước gốc */
        box-shadow: 0 0 0 0 rgba(229, 62, 62, 0.4); /* Bóng bó sát nút */
    }

    70% {
        transform: scale(1.06); /* Nút tự co dãn to ra 6% */
        box-shadow: 0 0 0 12px rgba(229, 62, 62, 0); /* Vòng tròn phát sáng tỏa rộng ra rồi mờ dần */
    }

    100% {
        transform: scale(1); /* Thu nhỏ về lại kích thước ban đầu */
        box-shadow: 0 0 0 0 rgba(229, 62, 62, 0); /* Biến mất hẳn để chuẩn bị nhịp sau */
    }
}

/* Menu di động Mobile Toggle */
.menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    gap: 5px;
    z-index: 1000;
}

.menu-toggle span {
    width: 24px;
    height: 2px;
    background: var(--text-dark);
    transition: all 0.3s;
    display: block;
}

.menu-toggle.active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.menu-toggle.active span:nth-child(2) { opacity: 0; }
.menu-toggle.active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* Responsive Mobile Menu (max-width: 768px) */
@media (max-width: 768px) {
    .menu-toggle { display: flex; }

    nav, .nav-menu {
        position: absolute;
        left: 0; right: 0;
        background: var(--bg-white);
        flex-direction: column;
        gap: 0; display: none;
        box-shadow: 0 4px 12px rgba(8, 64, 141, 0.1);
        top: 100px; bottom: auto;
        border-top: 1px solid var(--border);
    }

    /* Đảo hướng menu đổ ngược lên trên khi header đang bám dưới đáy màn hình */
    #header.is-sticky nav,
    #header.is-sticky .nav-menu {
        top: auto;
        bottom: 100px;
        border-top: none;
        border-bottom: 1px solid var(--border);
        box-shadow: 0 -4px 12px rgba(8, 64, 141, 0.1);
    }

    nav.active, .nav-menu.active { display: flex; }
    nav a, .nav-menu a { width: 100%; padding: 16px 24px; border-bottom: 1px solid var(--border); }
    nav a:last-child, .nav-menu a:last-child { border-bottom: none; }
    .btn-nav { width: calc(100% - 48px); text-align: center; margin: 16px 24px; }
}

/* ============ SECTION 13 – FOOTER (TỐI GIẢN) ============ */
/* ==========================================================================
   FOOTER HIAST CLEAN - BẢN CẬP NHẬT MÀU SẮC TƯƠNG PHẢN CAO CẤP
   ========================================================================== */

.footer-hiast-clean {
    /* ĐÃ SỬA: Giữ nền xanh đêm sâu thẳm rất sang của bạn */
    background-color: var(--blue);
    color: #cbd5e1; /* ĐỔI: Chuyển màu chữ mặc định sang xám trắng dịu */
    padding: 60px 0 40px 0; /* Nới rộng padding cho khoảng không thoáng đãng */
    border-top: 3px solid var(--primary); /* Thêm viền đỏ thương hiệu mảnh ở đỉnh làm điểm nhấn */
}

.footer-hiast-clean .brand-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-hiast-clean .logo-wrapper {
    margin-bottom: 14px;
}

.footer-hiast-clean .footer-logo {
    height: 100px;
    width: auto;
}

/* Tên doanh nghiệp màu đỏ chủ đạo dưới logo */
.footer-hiast-clean .brand-title {
    font-size: 15px;
    font-weight: 800;
    text-transform: uppercase;
    color: var(--primary); /* Giữ màu đỏ thương hiệu (Rất nổi trên nền tối) */
    line-height: 1.4;
    margin: 0;
    max-width: 340px;
}

.footer-hiast-clean .branch-item {
    margin-bottom: 18px;
}

.footer-hiast-clean .branch-item:last-child {
    margin-bottom: 0;
}

/* ĐÃ SỬA LỖI: Tên chi nhánh chuyển sang màu Vàng Kim (hoặc màu Trắng) để cực kỳ nổi bật */
.footer-hiast-clean .branch-name {
    font-size: 14px; /* Tăng nhẹ 1px cho rõ ràng */
    font-weight: 700;
    color: #fcd34d !important; /* ĐỔI: Màu vàng kim giúp tách lớp thông tin xuất sắc */
    display: block;
    margin-bottom: 5px;
}

/* Nếu bạn không thích màu vàng kim, có thể thay bằng màu trắng tinh: color: #ffffff !important; */

/* ĐÃ SỬA LỖI: Địa chỉ chi tiết chuyển sang màu xám sáng để đọc cực rõ */
.footer-hiast-clean .branch-address {
    font-size: 13px;
    color: #94a3b8 !important; /* ĐỔI: Màu xám Slate sáng dịu mắt, tra cứu địa chỉ rất dễ */
    line-height: 1.6;
    margin: 0;
}

/* ĐÃ SỬA LỖI: Vách ngăn dọc trên Desktop chuyển sang màu mảnh mờ trong suốt */
@media (min-width: 768px) {
    .footer-hiast-clean .border-start-md {
        border-left: 1.5px solid rgba(255, 255, 255, 0.12) !important; /* ĐỔI: Đường kẻ mờ tinh tế */
        padding-left: 45px;
    }
}
/* ============ SECTION 2 – HERO (ĐÃ SỬA LỖI BỂ VĂNG FORM) ============ */


#sec-hero {
    background: linear-gradient(135deg, #051e42 0%, var(--blue) 60%, var(--blue-light) 100%);
    position: relative;
    overflow: hidden;
    padding: 100px 0 80px;
}

#sec-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background: center/cover no-repeat;
    opacity: 0.08;
    z-index: 1;
    /* Hiệu ứng zoom nhẹ hình nền khi vào trang tạo độ sâu */
    animation: heroZoomBg 20s infinite alternate ease-in-out;
}

/* Cấu trúc Grid bảo vệ Form không bị văng */
.hero-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: stretch;
    position: relative;
    z-index: 2;
    width: 100%;
}

/* KHỐI NỘI DUNG CHỮ (BÊN TRÁI) - Tích hợp hiệu ứng trượt mượt mà từ dưới lên */
.hero-content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    animation: heroSlideUp 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.hero-badge {
    display: inline-block;
    align-self: flex-start;
    background: rgba(236, 50, 55, 0.15);
    border: 1px solid var(--primary);
    color: var(--primary);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.5px;
    padding: 6px 16px;
    border-radius: 20px;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.hero-title {
    font-size: 42px;
    color: #ffffff !important;
    line-height: 1.3;
    margin-bottom: 18px;
    font-weight: 800;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.hero-title span {
    color: #ffffff !important;
}

.hero-sub {
    font-size: 18px;
    color: #ffffff !important;
    margin-bottom: 12px;
    font-weight: 700;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
}

.hero-desc {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.85) !important;
    margin-bottom: 32px;
    line-height: 1.7;
}

/* CỤM NÚT CTA - Tối ưu khoảng cách và chuyển động phản hồi */
.hero-ctas {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-bottom: 32px;
}

.btn-primary {
    background: var(--primary);
    color: #fff !important;
    font-weight: 800;
    font-size: 14px;
    padding: 14px 32px;
    border-radius: 12px; /* Tăng lên 12px đồng bộ với bo góc form */
    border: none;
    cursor: pointer;
    letter-spacing: 0.5px;
    display: inline-block;
    text-transform: uppercase;
    box-shadow: 0 5px 15px rgba(236, 50, 55, 0.2);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-primary:hover {
    background: #d3252a;
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(236, 50, 55, 0.45);
}

.btn-outline-white {
    background: transparent;
    color: #fff !important;
    font-weight: 700;
    font-size: 14px;
    padding: 13px 30px;
    border-radius: 12px; /* Đồng bộ bo góc viền */
    border: 1.5px solid #ffffff;
    cursor: pointer;
    display: inline-block;
    letter-spacing: 0.3px;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-outline-white:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.8);
    transform: translateY(-3px);
}

/* KHỐI CAM KẾT ĐÁY HERO - Chuyển động nhấp nhô nhẹ tự nhiên */
.hero-trust {
    display: flex;
    gap: 24px;
    margin-top: auto;
}

.trust-item {
    display: flex;
    align-items: center;
    gap: 8px;
    transition: transform 0.3s ease;
}

.trust-item:hover {
    transform: scale(1.05); /* Phóng to nhẹ khi di chuột qua chữ cam kết */
}

.trust-item i {
    color: var(--primary);
    font-size: 16px;
}

.trust-item span {
    color: #ffffff !important;
    font-size: 13.5px;
    font-weight: 600;
}


/* KHỐI FORM ĐĂNG KÝ (BÊN PHẢI) - Hiện hình từ từ và sắc nét dần sau 0.2s */
.form-card {
    background: linear-gradient(135deg, #0f1e36 0%, var(--blue) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(15, 30, 54, 0.3);
    border-radius: 24px;
    padding: 45px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;

    opacity: 0;
    animation: heroFadeIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

.form-card h3 {
    font-size: 25px;
    font-weight: 800;
    color: #ffffff !important;
    margin-bottom: 8px;
    text-align: center;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.form-card p {
    font-size: 14px;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 32px;
    font-weight: 500;
}

.form-group {
    margin-bottom: 20px;
}

.form-group label {
    font-size: 12.5px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-group input, .form-group select, .form-group textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14.5px;
    font-family: inherit;
    color: #ffffff !important;
    background: rgba(255, 255, 255, 0.08) !important;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    appearance: none;
}

.form-group input::placeholder, .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

.form-group input:focus, .form-group select:focus, .form-group textarea:focus {
    outline: none;
    border-color: #63b3ed !important;
    background-color: rgba(255, 255, 255, 0.12) !important;
    box-shadow: 0 0 15px rgba(99, 179, 237, 0.35);
}

.form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}

.btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, #e53e3e 100%);
    color: #fff !important;
    font-weight: 800;
    font-size: 16px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 12px;
    box-shadow: 0 8px 25px rgba(229, 62, 62, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.btn-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(229, 62, 62, 0.45);
}

.btn-submit:active {
    transform: translateY(0);
}


/* ==========================================================================
   HỆ THỐNG ĐỊNH NGHĨA ANIMATION KEYFRAMES
   ========================================================================== */

/* Hiệu ứng trượt chữ mượt lên từ chân trang */
@keyframes heroSlideUp {
    0% {
        opacity: 0;
        transform: translateY(40px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Hiệu ứng hiện hình mượt mà của khối Form */
@keyframes heroFadeIn {
    0% {
        opacity: 0;
        transform: scale(0.96);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

/* Hiệu ứng chuyển động ngầm siêu chậm của ảnh nền */
@keyframes heroZoomBg {
    0% {
        transform: scale(1);
    }
    100% {
        transform: scale(1.08);
    }
}


/* ============ SECTION COMMON ============ */
.sec { padding: 80px 0; }
.sec-bg { background: var(--bg-light); }
.sec-title { text-align: center; margin-bottom: 48px; }
.sec-label {
    display: inline-block;
    background: var(--blue-pale);
    color: var(--blue);
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 1.8px;
    text-transform: uppercase;
    padding: 5px 14px;
    border-radius: 20px;
    margin-bottom: 12px;
}
.sec-title h2 { font-size: 32px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.sec-title p { font-size: 16px; color: var(--text-mid); max-width: 580px; margin: 0 auto; }

/* Tối ưu responsive cho máy tính bảng và mobile */
@media (max-width: 992px) {
    .hero-grid {
        grid-template-columns: 1fr; /* Co về 1 cột tránh nén vỡ form */
        gap: 40px;
    }
    .hero-content {
        text-align: center;
        align-items: center;
    }
    .hero-badge {
        align-self: center;
    }
    .hero-ctas {
        justify-content: center;
    }
    .hero-trust {
        justify-content: center;
        margin-top: 24px;
    }
    .hero-title {
        font-size: 34px;
    }
}
/* ============ SECTION 3 – PAIN POINTS ============ */

#sec-pain {
    background-color:white;
    padding: 60px 0;
    width: 100%;
    overflow: hidden;
    display: block;
}

/* Khung giới hạn vệ tinh đối xứng */
.pain-satellite-layout {
    position: relative;
    width: 100%;
    max-width: 1140px;
    min-height: 565px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* KHỐI TRUNG TÂM: ĐỒNG TÂM TUYỆT ĐỐI */
.pain-center-zone {
    position: absolute;
    top: 48%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    max-width: 242px;
    text-align: center;
    z-index: 5;
}

/* Vòng sóng Radar lan tỏa từ tâm nhân vật */
.pain-center-zone::before {
    content: '';
    position: absolute;
    top: 40%;
    left: 50%;
    width: 320px;
    height: 320px;
    transform: translate(-50%, -50%) scale(0.8);
    border: 2px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
    animation: painRadarPing 3s infinite linear;
}

.pain-center-img {
    width: 100%;
    max-width: 310px;
    margin: 0 auto;
    animation: painFloatGentle 4s infinite ease-in-out;
}

.pain-center-img img {
    width: 100%;
    height: auto;
    display: block;
}

/* Khung hộp tiêu đề trung tâm */
.pain-center-title-box {
    background: rgba(255, 255, 255, 0.95);
    border: 2px solid #0f1e36;
    border-radius: 16px;
    padding: 12px 18px;
    box-shadow: 4px 4px 0px #0f1e36;
    margin-top: -20px;
    position: relative;
    z-index: 6;
}

.pain-center-title-box h2 {
    color: #08408d;
    font-size: 14px;
    font-weight: 800;
    line-height: 1.5;
    margin: 0;
    font-family: 'K2D', sans-serif;
    letter-spacing: -0.2px;
}

/* --------------------------------------------------------------------------
   CẤU TRÚC CHUNG CỦA CÁC THẺ VỆ TINH
   -------------------------------------------------------------------------- */
.pain-satellite-card {
    position: absolute;
    background-color: #ffffff;
    /* Trạng thái tĩnh: Viền mảnh cùng màu nền mờ mịn, không cắt ngang icon */
    border: 2px solid rgba(255, 255, 255, 0.5);
    border-radius: 20px;
    padding: 22px 24px;
    width: 100%;
    max-width: 310px;
    box-shadow: 0 10px 30px rgba(15, 30, 54, 0.1);
    box-sizing: border-box;
    z-index: 10;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* HIỆU ỨNG HOVER CHUNG (Dành cho 4 card bên hông): Nhảy lên trên, bóng đổ khối xuống dưới */
.pain-satellite-card:not(.card-footer-center):hover {
    transform: translateY(-8px) !important;
    border: 2px solid #0f1e36;
    box-shadow: 5px 5px 0px #0f1e36;
    z-index: 20;
}

.pain-satellite-body {
    text-align: left;
}

.pain-satellite-body h4 {
    font-size: 14px;
    font-weight: 800;
    color: #0f1e36;
    margin: 0 0 8px 0;
    font-family: 'K2D', sans-serif;
}

.pain-satellite-body p {
    font-size: 12.5px;
    color: #475569;
    line-height: 1.55;
    margin: 0;
    font-family: 'K2D', sans-serif;
}

/* ĐÃ SỬA LỖI LỆCH TÂM: Khóa chặt icon nằm chuẩn giữa biên dọc của card */
.pain-badge-tab-side {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    z-index: 99 !important; /* Ép nổi lên trên viền */
}

/* Định vị tai bọc hướng vào tâm cho các card vế trái / vế phải */
.card-top-left .pain-badge-tab-side,
.card-bottom-left .pain-badge-tab-side { right: -20px; }
.card-top-right .pain-badge-tab-side,
.card-bottom-right .pain-badge-tab-side { left: -20px; }

/* Phần ruột hình tròn của tai bọc icon */
.badge-side-inner {
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border: 2px solid rgba(15, 30, 54, 0.15);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    color: #08408d;
    box-sizing: border-box;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Hiệu ứng xoay icon và lên viền đen khi hover 4 card bên hông */
.pain-satellite-card:not(.card-footer-center):hover .badge-side-inner {
    border-color: #0f1e36;
    box-shadow: 2px 2px 0px #0f1e36;
    transform: scale(1.1) rotate(15deg);
}

.badge-side-inner i {
    display: block;
    line-height: 1;
}

/* --------------------------------------------------------------------------
   HỆ TỌA ĐỘ VÀNG + KÍCH HOẠT ANIMATION BẬP BỀNH TỰ ĐỘNG
   -------------------------------------------------------------------------- */
.card-top-left {
    top: 150px;
    left: 140px;
    animation: painFloatSideA 5s infinite ease-in-out;
}
.card-top-right {
    top: 150px;
    right: 140px;
    animation: painFloatSideB 5.5s infinite ease-in-out 0.5s;
}
.card-bottom-left {
    bottom: 105px;
    left: 30px;
    animation: painFloatSideB 6s infinite ease-in-out 0.2s;
}
.card-bottom-right {
    bottom: 105px;
    right: 30px;
    animation: painFloatSideA 5.2s infinite ease-in-out 0.7s;
}

/* --------------------------------------------------------------------------
   ĐẶC CÁCH ĐÃ SỬA: CARD ĐÁY CHỨA ICON GIỎ XÁCH (ĐỔI HƯỚNG NHẢY XUỐNG)
   -------------------------------------------------------------------------- */
.card-footer-center {
    bottom: -15px;
    left: 50%;
    max-width: 420px;
    animation: painFloatCenter 5.8s infinite ease-in-out 0.3s;
}

/* Căn tâm icon giỏ xách khớp 100% lọt lòng viền ngang phía trên */
.card-footer-center .pain-badge-tab-side {
    top: 0 !important;
    left: 50% !important;
    right: auto !important;
    transform: translate(-50%, -50%) !important;
}

/* KHI RE CHUỘT VÀO CARD ĐÁY: Nhảy sụt xuống, bóng trồi ngược lên góc trên bên trái */
.card-footer-center:hover {
    transform: translateX(-50%) translateY(8px) !important;
    border: 2px solid #0f1e36;
    box-shadow: -5px -5px 0px #0f1e36;
    z-index: 20;
}

/* Hiệu ứng của riêng icon giỏ xách khi card đáy bị lún xuống */
.card-footer-center:hover .badge-side-inner {
    border-color: #0f1e36;
    box-shadow: -2px -2px 0px #0f1e36; /* Bóng icon cũng nhảy ngược lên trên */
    transform: scale(1.1) rotate(-15deg);
}

/* Chữ ghi chú chân trang */
.pain-footer-note {
    text-align: center;
    color: var(--blue) !important;
    font-size: 14px;
    margin-top: 45px;
    font-weight: 500;
    font-family: 'K2D', sans-serif;
    clear: both;
}

/* --------------------------------------------------------------------------
   HỆ THỐNG ĐỊNH NGHĨA KEYFRAMES ANIMATION
   -------------------------------------------------------------------------- */
@keyframes painFloatGentle {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}
@keyframes painFloatSideA {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}
@keyframes painFloatSideB {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-12px); }
}
@keyframes painFloatCenter {
    0%, 100% { transform: translateX(-50%) translateY(0); }
    50% { transform: translateX(-50%) translateY(-8px); }
}
@keyframes painRadarPing {
    0% { transform: translate(-50%, -50%) scale(0.6); opacity: 0.8; }
    100% { transform: translate(-50%, -50%) scale(1.4); opacity: 0; }
}

/* ============ RESPONSIVE ĐA MÀN HÌNH MƯỢT MÀ ============ */
@media (max-width: 992px) {
    #sec-pain { padding: 50px 0; }
    .pain-satellite-layout {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 35px;
        min-height: auto;
        padding: 0 15px;
    }
    .pain-center-zone, .pain-center-img, .pain-satellite-card, .card-footer-center {
        position: relative;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        transform: none !important;
        margin: 0 auto;
        max-width: 100%;
        animation: none !important;
    }
    .pain-center-zone::before { display: none; }
    .pain-center-zone { margin-bottom: 20px; }
    .pain-center-img { max-width: 260px; }

    .pain-badge-tab-side {
        top: -18px !important;
        left: 20px !important;
        right: auto !important;
        transform: none !important;
    }
}
/* ============ SECTION 4 – GIẢI PHÁP ============ */


#sec-solution {
    background-color: var(--blue);
    padding: 40px 0 70px 0;
    position: relative;
    width: 100%;
    display: block;
    clear: both;
}

/* Khớp dải sóng lượn sóng đè lên nền xanh mới không bị lệch màu */
.solution-wave-top {
    width: 100%;
    height: 30px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 320'%3E%3Cpath fill='%23ffffff' fill-opacity='1' d='M0,96L120,112C240,128,480,160,720,160C960,160,1200,128,1320,112L1440,96L1440,0L1320,0C1200,0,960,0,720,0C480,0,240,0,120,0L0,0Z'%3E%3C/path%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    margin-bottom: 40px;
}

.solution-title-main {
    text-align: center;
    margin-bottom: 55px;
    padding: 0 15px;
}

.solution-title-main h2 {
    color: var(--bg-white) !important;
    font-size: 28px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 10px 0;
    letter-spacing: -0.3px;
}

.solution-title-main p {
    color: rgba(255, 255, 255, 0.85) !important;
    font-size: 15px;
    font-weight: 500;
}

/* ĐÃ NÂNG CẤP: Chuyển cấu trúc bảng cũ sang CSS Grid hiện đại 2 cột 55/45 mượt mà */
.solution-grid-split {
    display: grid;
    grid-template-columns: 55% 45%;
    gap: 40px;
    align-items: start;
    margin-bottom: 50px;
    width: 100%;
}

/* BÊN TRÁI: KHU VỰC CHỨA CÁC Ô vuông ICON (PC) */
.solution-icons-zone {
    display: grid;
    /* Chia tự động 3 cột đều chằn chặn thay vì dùng float/inline-block */
    grid-template-columns: repeat(3, 1fr);
    gap: 30px 24px;
    width: 100%;
}

/* Từng khối ô vuông icon */
.sol-icon-box {
    text-align: center;
    box-sizing: border-box;
    display: block;
}

/* Ô vuông kính mờ trong suốt đè trên nền xanh */
.sol-icon-bg {
    width: 76px;
    height: 76px;
    background-color: rgba(255, 255, 255, 0.16); /* Giảm độ đục tăng hiệu ứng trong suốt */
    border-radius: 16px; /* Bo góc 16px đồng bộ với các section trên */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 14px auto;
    font-size: 28px;
    color: var(--bg-white);
    border: 1px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);

    /* Thiết lập cho vệt phản quang ánh sáng chạy qua */
    position: relative;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.sol-icon-bg i {
    display: block;
    transition: transform 0.3s ease;
}

/* TẠO VỆT SÁNG NGHỆ THUẬT (SHINE EFFECT) ẨN BÊN TRONG */
.sol-icon-bg::before {
    content: '';
    position: absolute;
    top: 0; left: -150%;
    width: 50%; height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.4) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-20deg);
}

/* HIỆU ỨNG TƯƠNG TÁC HOVER CỰC MẠNH CHO Ô ICON */
.sol-icon-box:hover .sol-icon-bg {
    transform: translateY(-6px) scale(1.05); /* Ô vuông nhấc nhẹ lên và nở to ra */
    background-color: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    box-shadow: 0 15px 30px rgba(15, 30, 54, 0.15);
}

/* Kích hoạt vệt sáng quét ngang qua và xoay nhẹ icon bên trong khi hover */
.sol-icon-box:hover .sol-icon-bg::before {
    left: 150%;
    transition: left 0.5s ease-in-out;
}
.sol-icon-box:hover .sol-icon-bg i {
    transform: scale(1.12) rotate(8deg);
}

.sol-icon-box span {
    display: block;
    color: var(--bg-white);
    font-size: 14px;
    font-weight: 700;
    line-height: 1.4;
    padding: 0 5px;
    font-family: 'K2D', sans-serif;
    letter-spacing: -0.1px;
}

/* BÊN PHẢI: KHỐI CHỮ MÔ TẢ VÀ CAM KẾT (PC) */
.solution-text-zone {
    color: var(--bg-white);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.sol-sub-label {
    color: #fcd34d;
    font-size: 18px;
    font-weight: 800;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
}

.solution-text-zone h3 {
    color: var(--bg-white) !important;
    font-size: 24px;
    font-weight: 800;
    line-height: 1.4;
    margin: 0 0 18px 0;
    font-family: 'K2D', sans-serif;
}

.sol-paragraph-wrap {
    display: block;
    margin-bottom: 30px;
}

.sol-paragraph-wrap p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 14px;
    line-height: 1.6;
    margin: 0 0 14px 0;
    font-weight: 500;
    font-family: 'K2D', sans-serif;
}

.sol-commitment-highlight {
    color: #fcd34d;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.5;
    text-transform: uppercase;
    font-family: 'K2D', sans-serif;
}

.sol-commitment-highlight span {
    color: var(--bg-white);
    font-weight: 800;
}

.solution-action-bottom {
    text-align: center;
    width: 100%;
    margin-top: 20px;
    clear: both;
}

/* NÚT CTA: Nâng cấp bo góc 12px đồng bộ ngôn ngữ thiết kế */
.btn-yola-primary-pill {
    display: inline-block;
    background: var(--primary);
    color: var(--bg-white) !important;
    font-weight: 800;
    font-size: 14px;
    padding: 15px 45px;
    border-radius: 12px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(236, 50, 55, 0.3);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    font-family: 'K2D', sans-serif;
}

.btn-yola-primary-pill:hover {
    filter: brightness(1.15);
    transform: translateY(-2px);
    box-shadow: 0 10px 25px rgba(236, 50, 55, 0.45);
}


/* ======================================================================= */
/* MEDIA QUERIES RESPONSIVE TABLET CHUẨN (GRID 1 CỘT) */
/* ======================================================================= */
@media (max-width: 992px) {
    .solution-grid-split {
        grid-template-columns: 1fr; /* Trở về 1 cột dọc thông thoáng */
        gap: 40px;
    }
    .solution-icons-zone {
        order: 2; /* Đẩy khối icon xuống dưới khối chữ cho hợp lý logic đọc */
    }
    .solution-text-zone {
        order: 1;
        text-align: center;
    }
}

/* ======================================================================= */
/* ĐÃ SỬA & TỐI ƯU: HIỂN THỊ 2 CỘT HOÀN HẢO TRÊN MOBILE QUA GRID KHÔNG VỠ HÀNG */
/* ======================================================================= */
@media (max-width: 576px) {
    .solution-icons-zone {
        grid-template-columns: repeat(2, 1fr) !important; /* Khóa cứng chuẩn 2 cột lướt êm ái */
        gap: 24px 16px !important;
        padding: 0 10px;
    }

    .sol-icon-box {
        width: 100% !important; /* Thả lỏng theo kích thước grid cha */
        margin: 0 !important;
    }

    .solution-title-main h2 {
        font-size: 21px;
    }

    .btn-yola-primary-pill {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 15px;
        font-size: 12.5px;
    }
}

/* ============ SECTION 5 – LỘ TRÌNH ============ */
/* ==========================================================================
   SECTION 5: TIMELINE QUY TRÌNH (TỐI ƯU GIAO DIỆN & TRỤC LIÊN KẾT)
   ========================================================================== */
.timeline {
    position: relative;
    width: 100%;
}

/* Thanh trục nối - Đã khóa chặt khoảng cách đầu cuối theo nửa chiều cao node (72px / 2 = 36px) */
.timeline-line {
    position: absolute;
    left: 36px;
    top: 36px;
    bottom: 36px;
    width: 2px;
    background: linear-gradient(to bottom, var(--blue), #BDD4F5);
    z-index: 1;
}

.tl-item {
    display: flex;
    gap: 28px;
    margin-bottom: 36px;
    position: relative;
    width: 100%;
}

.tl-item:last-child {
    margin-bottom: 0;
}

/* Vòng tròn số bước Node */
.tl-step {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: var(--blue);
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    z-index: 2; /* Đảm bảo luôn đè lên thanh line trục */
    box-shadow: 0 6px 20px rgba(8, 64, 141, 0.2);
    transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tl-step span:first-child {
    font-size: 10px;
    font-weight: 700;
    opacity: .85;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

.tl-step span:last-child {
    font-size: 22px;
    font-weight: 900;
}

/* Thẻ chứa nội dung chữ của bước timeline */
.tl-body {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 16px; /* Bo góc 16px hệ hiện đại */
    padding: 24px 28px;
    flex: 1;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.tl-body h3 {
    font-size: 17px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 8px;
    font-family: 'K2D', sans-serif;
}

.tl-body p {
    font-size: 14px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
}

/* HIỆU ỨNG TUƠNG TÁC HOVER CỦA BƯỚC TIMELINE */
.tl-item:hover .tl-step {
    transform: scale(1.08); /* Node tròn nở nhẹ */
}

.tl-item:hover .tl-body {
    border-color: var(--blue);
    background-color: #f8fafc; /* Đổi màu nền cực nhẹ */
    box-shadow: 0 10px 25px rgba(8, 64, 141, 0.05);
    transform: translateX(4px); /* Nhích nhẹ sang phải tạo cảm giác đẩy chuyển động */
}


/* ==========================================================================
   SECTION 6: SLIDER KHÓA HỌC (TỐI ƯU MODERN & HIỆU ỨNG GRADIENT SHINE)
   ========================================================================== */
#sec-courses {
    background-color: #F0F6FB;
    padding: 80px 0;
    width: 100%;
}

.courses-slider-container {
    width: 100%;
    margin-top: 40px;
    position: relative;
}

.courses-slick-slider {
    display: block !important;
    width: 100%;
}

.courses-slick-slider .slick-track {
    display: flex !important;
    align-items: stretch !important;
}

.course-item-slick {
    padding: 0 12px; /* Tối ưu lề giãn cách giữa các card */
    display: flex !important;
    height: auto !important;
}

/* THIẾT KẾ CARD NÂNG CẤP HIỆU ỨNG TƯƠNG TÁC CAO CẤP */
.course-card-yola {
    background-color: #ffffff;
    border-radius: 24px; /* Hạ từ 40px xuống 24px để card vuông vắn, cứng cáp và chuẩn UI hơn */
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(15, 30, 54, 0.04);
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100% !important;
    border: 1px solid #e2e8f0;
    background-clip: padding-box;

    /* Thiết lập nền móng chuẩn bị cho dải sáng phản quang quét qua */
    position: relative;
    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Nửa trên: Thumbnail ảnh */
.course-thumb-yola {
    width: 100%;
    position: relative;
    overflow: hidden;
}

.course-thumb-yola img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.5s ease;
}

/* Nửa dưới: Nội dung chữ */
.course-body-yola {
    padding: 35px 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    text-align: left;
}

.course-body-yola h4 {
    font-size: 21px;
    font-weight: 800;
    color: #0f1e36;
    margin-bottom: 12px;
    font-family: 'K2D', sans-serif;
    letter-spacing: -0.3px;
    line-height: 1.4;
}

.course-body-yola p {
    font-size: 14.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
    font-family: 'K2D', sans-serif;
    font-weight: 400;
}

/* Cụm chứa nút bấm ghim sát đáy hộp chữ */
.course-cta-wrap {
    margin-top: auto;
    text-align: center;
    width: 100%;
    padding-top: 10px;
}

/* THIẾT KẾ NÚT GRADIENT BLUE 3D VIÊN THUỐC */
.btn-course-blue {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    background: linear-gradient(135deg, var(--blue) 0%, #1a4da2 100%);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 14px;
    padding: 14px 40px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 18px rgba(8, 64, 141, 0.2);
    transition: all 0.3s ease;
    font-family: 'K2D', sans-serif;
}

/* VỆT SÁNG QUÉT CHÉO NGHỆ THUẬT (SHINE EFFECT) ẨN TRONG CARD */
.course-card-yola::before {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 40%;
    height: 100%;
    background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0.3) 50%, rgba(255,255,255,0) 100%);
    transform: skewX(-25deg);
    z-index: 3;
    pointer-events: none;
}

/* KHI RE CHUỘT VÀO CARD KHÓA HỌC: Nhấc khối bừng sáng + Quét vệt chớp + Phóng to ảnh */
.course-card-yola:hover {
    transform: translateY(-8px);
    border-color: var(--blue);
    box-shadow: 0 20px 45px rgba(8, 64, 141, 0.12);
}

.course-card-yola:hover::before {
    left: 150%;
    transition: left 0.6s ease-in-out; /* Tạo luồng sáng lướt chéo từ trái sang phải */
}

.course-card-yola:hover .course-thumb-yola img {
    transform: scale(1.06); /* Ảnh thunnail zoom nhẹ */
}

.course-card-yola:hover .btn-course-blue {
    filter: brightness(1.08);
    box-shadow: 0 8px 22px rgba(8, 64, 141, 0.35);
}

/* CẤU TRÚC DOTS PHẲNG DƯỚI ĐÁY */
#sec-courses .slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none;
    margin-top: 40px;
    padding: 0;
    gap: 10px;
}

#sec-courses .slick-dots li button {
    font-size: 0;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background-color: #cbd5e1;
    border: none;
    cursor: pointer;
    padding: 0;
    transition: all 0.25s ease;
}

#sec-courses .slick-dots li.slick-active button {
    background-color: var(--blue);
    transform: scale(1.2);
}

.courses-slick-slider .slick-list {
    margin: 0 -12px;
}

/* ==========================================================================
   MÀN HÌNH DI ĐỘNG RESPONSIVE
   ========================================================================== */
@media (max-width: 768px) {
    .timeline-line {
        left: 28px; /* Dịch trục line tương thích node nhỏ trên máy tính bảng */
    }
    .tl-step {
        width: 56px;
        height: 56px;
    }
    .tl-step span:last-child {
        font-size: 18px;
    }
}

@media (max-width: 576px) {
    #sec-courses {
        padding: 60px 0;
    }
    .course-body-yola {
        padding: 28px 20px;
    }
    .course-body-yola h4 {
        font-size: 19px;
    }
    .btn-course-blue {
        width: 100%;
    }
    .timeline-line {
        left: 20px; /* Ép sát trục dọc lề trên Mobile màn hình nhỏ */
        top: 20px;
        bottom: 20px;
    }
    .tl-item {
        gap: 16px;
    }
    .tl-step {
        width: 40px;
        height: 40px;
    }
    .tl-step span:first-child {
        display: none; /* Ẩn chữ STEP trên điện thoại để tránh đè chữ số */
    }
    .tl-step span:last-child {
        font-size: 16px;
    }
    .tl-body {
        padding: 16px 20px;
    }
    /* Tắt vệt sáng quét trên mobile để tiết kiệm bộ nhớ GPU giúp lướt mượt */
    .course-card-yola::before {
        display: none;
    }
}

/* ============ SECTION 7 – ƯU ĐÃI ============ */
/* ==========================================================================
   SECTION PROMO: KHỐI ƯU ĐÃI & COUNTDOWN (TỐI ƯU GIAO DIỆN HIỆN ĐẠI)
   ========================================================================== */

/* Đã sửa: Thêm dấu # để định danh đúng ID section */
#sec-promo {
    background: linear-gradient(135deg, #051e42 0%, var(--blue) 100%);
    position: relative;
    overflow: hidden;
    padding: 80px 0; /* Bổ sung padding dọc cho khung thoáng đãng */
}

/* Biểu tượng quốc kỳ Hàn Quốc ẩn nền */
#sec-promo::after {
    content: '🇰🇷';
    position: absolute;
    right: 80px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 160px;
    opacity: 0.05;
    pointer-events: none;
}

.promo-inner {
    text-align: center;
    position: relative;
    z-index: 1;
}

.promo-inner .sec-label {
    background: rgba(236, 50, 55, 0.15);
    color: #ffffff;
    border: 1px solid rgba(236, 50, 55, 0.4);
}

.promo-inner h2 {
    font-size: 34px;
    font-weight: 800;
    color: #ffffff;
    margin-bottom: 12px;
    letter-spacing: -0.3px;
}

.promo-inner > p {
    font-size: 16px;
    color: rgba(255, 255, 255, 0.85);
    margin-bottom: 32px;
}

/* ĐÃ NÂNG CẤP: KHỐI ĐẾM NGƯỢC THỜI GIAN (COUNTDOWN)
   Tích hợp hiệu ứng animation nhấp nháy phát sáng nhẹ để kích thích tâm lý khẩn cấp
*/
.promo-countdown {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 40px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px; /* Đồng bộ hệ bo góc 12px */
    padding: 14px 28px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);

    /* Kích hoạt vòng lặp animation nhấp nháy */
    animation: promoCountdownPulse 2s infinite ease-in-out;
}

.promo-countdown i {
    color: var(--primary);
    font-size: 18px;
}

.promo-countdown span {
    color: #ffffff;
    font-size: 15px;
    font-weight: 600;
}

.promo-countdown strong {
    color: #fcd34d; /* Đổi sang màu vàng ánh kim để cực kỳ nổi bật */
    text-decoration: underline;
    font-weight: 800;
}

/* KHỐI CÁC Ô QUÀ TẶNG (GIFT CARDS) */
.promo-gifts {
    display: flex;
    justify-content: center;
    gap: 20px;
    flex-wrap: wrap;
    margin-bottom: 32px;
    width: 100%;
}

/* ĐÃ NÂNG CẤP: Từng ô quà chuyển sang phong cách Kính Mờ (Glassmorphism) sang xịn mịn */
.promo-gift {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px; /* Bo góc 16px mềm mại */
    padding: 20px 24px;
    text-align: center;
    min-width: 160px; /* Tăng nhẹ độ rộng để chữ hiển thị thoải mái */
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    backdrop-filter: blur(8px); /* Tạo mờ hậu cảnh dạng kính */

    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.promo-gift i {
    font-size: 32px; /* Tăng kích thước icon quà tặng */
    color: #fcd34d; /* Đổi icon sang màu vàng kim loại tạo cảm giác quà giá trị cao */
    margin-bottom: 12px;
    display: block;
    transition: transform 0.3s ease;
}

.promo-gift span {
    font-size: 14px;
    color: #ffffff;
    font-weight: 700;
    line-height: 1.4;
    display: block;
}

/* HIỆU ỨNG TƯƠNG TÁC KHI DI CHUỘT VÀO Ô QUÀ (HOVER) */
.promo-gift:hover {
    transform: translateY(-6px); /* Ô quà nhấc nhẹ lên */
    background: rgba(255, 255, 255, 0.12); /* Sáng nền kính */
    border-color: rgba(255, 255, 255, 0.3);
    box-shadow: 0 15px 30px rgba(0, 0, 0, 0.15);
}

/* Biểu tượng hộp quà hoặc ưu đãi tự động rung nhẹ khi hover */
.promo-gift:hover i {
    transform: scale(1.15) rotate(8deg);
}


/* ==========================================================================
   HỆ THỐNG ĐỊNH NGHĨA ANIMATION KEYFRAMES
   ========================================================================== */
@keyframes promoCountdownPulse {
    0%, 100% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 0 0 rgba(236, 50, 55, 0.2);
        border-color: rgba(255, 255, 255, 0.2);
    }
    50% {
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1), 0 0 12px 4px rgba(236, 50, 55, 0.4);
        border-color: rgba(236, 50, 55, 0.4); /* Viền chớp nhẹ sắc đỏ mờ hối thúc */
    }
}


/* ==========================================================================
    TỐI ƯU RESPONSIVE TRÊN THIẾT BỊ DI ĐỘNG
   ========================================================================== */
@media (max-width: 576px) {
    #sec-promo {
        padding: 60px 0;
    }
    #sec-promo::after {
        font-size: 100px; /* Thu nhỏ cờ Hàn Quốc trên mobile tránh chèn chữ */
        right: 20px;
        top: 20%;
    }
    .promo-inner h2 {
        font-size: 24px;
        padding: 0 15px;
    }
    .promo-countdown {
        padding: 12px 16px;
        font-size: 13px;
        width: 90%; /* Ép vừa vặn khung màn hình dọc điện thoại */
        box-sizing: border-box;
    }
    .promo-countdown span {
        font-size: 13.5px;
    }
    .promo-gifts {
        gap: 12px;
        padding: 0 15px;
        box-sizing: border-box;
    }
    .promo-gift {
        /* Trên điện thoại chia đều 2 ô quà trên một hàng rất cân đối */
        width: 47%;
        min-width: auto;
        padding: 16px 12px;
    }
    .promo-gift span {
        font-size: 13px;
    }
}

/* ============ SECTION 8 – DU HỌC HÀN QUỐC ============ */
/* ==========================================================================
   SECTION DESTINATION: ULTRA-OPTIMIZED LAYOUT & SCROLL-DRIVEN ANIMATIONS
   ========================================================================== */

#sec-destination {
    background-color: var(--blue);
    padding: 80px 0;
    width: 100%;
    overflow: hidden; /* Chặn hoàn toàn lỗi tràn khung lề (layout shift) khi chạy hiệu ứng trượt */
}

#sec-destination .sec-title {
    text-align: center;
    margin-bottom: 50px;
}

#sec-destination .sec-title h2 {
    color: #ffffff !important;
    font-size: 32px;
    font-weight: 800;
}

#sec-destination .sec-title p {
    color: rgba(255, 255, 255, 0.9) !important;
    font-size: 16px;
    margin-top: 8px;
}

#sec-destination .sec-label {
    background-color: rgba(255, 255, 255, 0.2);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.4);
}

/* ==========================================================================
   CSS PHẦN 1: 3 THẺ LỢI ÍCH XẾP SO LE (IMAGE_A3CFAB.PNG)
   ========================================================================== */
.benefits-staggered-container {
    display: flex;
    flex-direction: column;
    gap: 55px;
    width: 100%;
    margin-bottom: 70px;
}

.benefit-staggered-row {
    display: flex;
    justify-content: center;
    gap: 40px;
    width: 100%;
}

/* Thân card lợi ích */
.benefit-staggered-card {
    background-color: #ffffff;
    border: 2px solid #0f1e36;
    border-radius: 20px;
    position: relative;
    padding: 46px 28px 28px 28px;
    width: 100%;
    max-width: 460px;
    box-shadow: 4px 4px 0px #0f1e36;
    box-sizing: border-box;

    /* TỐI ƯU PHẦN CỨNG GPU: Giúp render mượt, chống giật khựng */
    will-change: transform, opacity;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

/* Hiệu ứng tương tác nhấc khối khi di chuột vào */
.benefit-staggered-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 6px 6px 0px #0f1e36;
}

/* KHỐI ĐỊNH VỊ TAI BỌC PHÓNG TO */
.benefit-badge-tab-yola {
    position: absolute;
    top: -22px;
    left: -14px;
    width: 95px;
    height: 60px;
}

.yola-tab-svg {
    width: 100%;
    height: 100%;
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

.badge-tab-icon-png {
    position: absolute;
    top: 0;
    left: 0;
    width: 76px;
    height: 36px;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
}

.badge-tab-icon-png img {
    max-width: 26px;
    max-height: 26px;
    object-fit: contain;
}

.benefit-staggered-body {
    text-align: left;
}

.benefit-staggered-body h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 10px;
    letter-spacing: -0.2px;
    font-family: 'K2D', sans-serif;
}

.benefit-staggered-body p {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin: 0;
    font-weight: 500;
    font-family: 'K2D', sans-serif;
}

/* ==========================================================================
   CSS PHẦN 2: 3 CARD ĐIỂM ĐẾN PHÍA DƯỚI
   ========================================================================== */
.destination-cards-yola {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    width: 100%;
}

.dest-card-yola {
    background-color: #ffffff;
    border-radius: 32px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.06);
    display: flex;
    flex-direction: column;
    overflow: hidden;

    will-change: transform, opacity;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Nhấc khối và phóng to nhẹ ảnh nền khi hover */
.dest-card-yola:hover {
    transform: translateY(-8px) !important;
    box-shadow: 0 20px 40px rgba(15, 30, 54, 0.15);
}

.dest-thumb-yola {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}

.dest-thumb-yola img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-top-left-radius: 32px;
    border-top-right-radius: 32px;
    transition: transform 0.5s ease;
}

.dest-card-yola:hover .dest-thumb-yola img {
    transform: scale(1.06);
}

.dest-thumb-tag {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: rgba(255, 255, 255, 0.9);
    color: var(--blue);
    font-size: 12px;
    font-weight: 800;
    padding: 6px 14px;
    border-radius: 20px;
    z-index: 2;
}

.dest-body-yola {
    padding: 32px 28px;
    background-color: #ffffff;
    text-align: left;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    border-bottom-left-radius: 32px;
    border-bottom-right-radius: 32px;
}

.dest-body-yola h3 {
    font-size: 18px;
    font-weight: 800;
    color: var(--blue);
    margin-bottom: 12px;
}

.dest-main-desc {
    font-size: 13.5px;
    color: #475569;
    line-height: 1.6;
    margin-bottom: 24px;
}

.dest-details-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 24px;
}

.dest-details-list p {
    font-size: 13px;
    color: #334155;
    font-weight: 600;
    margin: 0;
}

.dest-click-notice {
    font-size: 12.5px;
    color: #e28743;
    font-weight: 700;
    margin-bottom: 24px;
    margin-top: auto;
}

.btn-yola-gradient {
    width: 100%;
    background: linear-gradient(90deg, #e62e2e 0%, var(--primary) 100%);
    color: #ffffff !important;
    font-weight: 800;
    font-size: 14px;
    padding: 14px;
    border: none;
    border-radius: 12px; /* Bo góc 12px hiện đại đồng bộ */
    cursor: pointer;
    text-transform: uppercase;
    box-shadow: 0 6px 18px rgba(236, 50, 55, 0.25);
    transition: all 0.25s ease;
}

.btn-yola-gradient:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 8px 22px rgba(236, 50, 55, 0.4);
}


/* ==========================================================================
   HỆ THỐNG HIỆU ỨNG CUỘN CHUỘT ĐẾN ĐÂU TỰ ĐỘNG CHẠY ĐẾN ĐÓ (CSS SCROLL-DRIVEN)
   Trình duyệt tự kích hoạt mượt mà, không phụ thuộc vào JS, tối ưu RAM tuyệt đối.
   ========================================================================== */
@supports (animation-timeline: view()) {

    /* Hiệu ứng 3 card lợi ích so le trượt từ hai bên hông vào giữa */
    .benefit-staggered-row:nth-child(odd) .benefit-staggered-card {
        animation: destSlideFromLeft both;
        animation-timeline: view();
        animation-range: entry 5% cover 35%; /* Chạy khi card ló đầu 5% đến khi cuộn được 35% */
    }
    .benefit-staggered-row:nth-child(even) .benefit-staggered-card {
        animation: destSlideFromRight both;
        animation-timeline: view();
        animation-range: entry 5% cover 35%;
    }

    /* Hiệu ứng 3 card điểm đến phía dưới trượt từ dưới lên */
    .dest-card-yola {
        animation: destSlideUp both;
        animation-timeline: view();
        animation-range: entry 5% cover 30%;
    }

    /* Định nghĩa các chuyển động keyframes */
    @keyframes destSlideFromLeft {
        from { opacity: 0; transform: translateX(-60px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes destSlideFromRight {
        from { opacity: 0; transform: translateX(60px); }
        to { opacity: 1; transform: translateX(0); }
    }
    @keyframes destSlideUp {
        from { opacity: 0; transform: translateY(60px); }
        to { opacity: 1; transform: translateY(0); }
    }
}


/* ==========================================================================
   HỆ THỐNG MEDIA QUERIES RESPONSIVE
   ========================================================================== */
@media (max-width: 992px) {
    .row-2-cols, .destination-cards-yola {
        grid-template-columns: 1fr 1fr;
    }
    .row-1-col-center {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .benefits-staggered-container {
        gap: 70px !important;
        margin-top: 20px;
    }

    .benefit-staggered-row {
        flex-direction: column;
        align-items: center;
        gap: 70px !important;
        width: 100%;
    }

    .benefit-staggered-card {
        max-width: 100%;
        padding: 42px 20px 24px 20px;
    }

    .benefit-badge-tab-yola {
        left: 16px;
    }

    /* Trên mobile hủy bỏ trượt ngang để chống giật/lỗi tràn lề màn hình dọc */
    @supports (animation-timeline: view()) {
        .benefit-staggered-row:nth-child(odd) .benefit-staggered-card,
        .benefit-staggered-row:nth-child(even) .benefit-staggered-card {
            animation-name: destSlideUp;
        }
    }
}

@media (max-width: 576px) {
    .row-2-cols, .destination-cards-yola {
        grid-template-columns: 1fr !important;
    }
    .benefits-staggered-container {
        gap: 40px;
    }
}

/* ============ SECTION 9 – LÝ DO ============ */
#sec-reasons {
    padding: 80px 0;
    background-color: #ffffff;
}

.sec-title-reasons {
    text-align: center;
    max-width: 900px;
    margin: 0 auto 50px auto;
}

.sec-title-reasons h2 {
    font-size: 26px;
    font-weight: 800;
    color: #2b56ce;
    line-height: 1.4;
    margin-bottom: 10px;
}

.sec-title-reasons p {
    font-size: 15px;
    color: #475569;
    font-weight: 500;
}

/* Thùng bọc lưới hàng bento */
.reasons-bento-container {
    display: flex;
    flex-direction: column;
    gap: 32px;
    width: 100%;
}

.bento-row {
    display: grid;
    gap: 32px;
    width: 100%;
}

/* Hàng trên: 3 cột */
.row-top {
    grid-template-columns: repeat(3, 1fr);
}

/* Hàng dưới: 2 cột tự thu hẹp căn giữa */
.row-bottom {
    grid-template-columns: repeat(2, 1fr);
    max-width: 76%;
    margin: 0 auto;
}

/* THIẾT KẾ CARD CƠ BẢN VỚI VIỀN VÀ BÓNG KHỐI ĐẬM CẠNH DƯỚI + CẠNH PHẢI */
.reason-bento-card {
    background-color: #ffffff;
    border: 2px solid #0f1e36; /* Đường viền mảnh màu xanh Navy bao quanh 4 cạnh */
    border-radius: 20px;       /* Độ bo góc chuẩn mẫu */
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;

    /* KỸ THUẬT UX ĐỘC QUYỀN: Đổ bóng sắc nét (0px blur) dạt sang Phải 4px và Dưới 4px tạo khối dày */
    box-shadow: 4px 4px 0px #0f1e36;

    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* Hiệu ứng nhún nhẹ khi hover chuột */
.reason-bento-card:hover {
    background-color: #ffffff;

    /* 1. Đường viền mỏng 2px bao quanh card */
    border: 2px solid var(--primary);

    /* 2. Tạo góc bo tròn mềm mại cho card */
    border-radius: 24px;

    /* 3. ĐÂY LÀ CSS TẠO BÓNG KHỐI TRONG HÌNH:
       - 6px đầu tiên: Đẩy bóng dịch sang PHẢI 6px
       - 6px thứ hai: Đẩy bóng dịch xuống DƯỚI 6px
       - 0px thứ ba: Độ nhòe (blur) bằng 0 để bóng sắc nét, không bị mờ mịn
       - #e27d3c: Mã màu cam/nâu trùng với màu viền */
    box-shadow: 6px 6px 0px var(--primary);
}

/* Khối Header (Icon + Chữ nằm ngang hàng) */
.card-bento-header {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 24px;
}

/* Vòng bọc icon lớn phía trước tiêu đề */
.bento-icon-wrap {
    font-size: 48px;
    color: #3b82f6; /* Tông màu xanh sáng của icon lớn mục chính */
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

/* Tiêu đề card chữ đen viết hoa đậm nét */
.card-bento-header h3 {
    font-size: 15px;
    font-weight: 800;
    color: #0f172a;
    margin: 0;
    line-height: 1.3;
    letter-spacing: -0.2px;
}

/* Thân card */
.card-bento-body {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Các dòng chữ mô tả */
.card-bento-body p {
    font-size: 13.5px;
    color: #334155;
    line-height: 1.5;
    margin: 0;
    position: relative;
    padding-left: 28px; /* Nhường chỗ cho ô vuông mũi tên */
    font-weight: 500;
    text-align: left;
}

/* Ô VUÔNG CHỨA MŨI TÊN CHUẨN ĐẸP (arrow-box) */
.card-bento-body p .arrow-box {
    position: absolute;
    left: 0;
    top: 2px;
    width: 16px;
    height: 16px;
    background-color: #60a5fa; /* Màu nền xanh nhạt của ô vuông */
    color: #ffffff;            /* Mũi tên màu trắng */
    font-size: 10px;
    font-weight: 900;
    border-radius: 3px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
}

/* ============ RESPONSIVE CHUẨN DI ĐỘNG ============ */
@media (max-width: 992px) {
    .bento-row {
        grid-template-columns: 1fr 1fr;
        max-width: 100%;
    }
}

@media (min-width: 375px) and (max-width: 425px) {
    .reasons-bento-container {
        gap: 20px;
    }
    .bento-row {
        grid-template-columns: 1fr !important; /* Mobile ép trọn vẹn về hàng dọc đơn */
    }
    .sec-title-reasons h2 {
        font-size: 20px;
    }
    .reason-bento-card {
        padding: 24px 20px;
    }
}

/* ============ SECTION 10 – STATS ============ */
#sec-stats {
    padding: 80px 0;
    background: linear-gradient(180deg, #e3f2fd 0%, #90caf9 100%);
    color: var(--text-dark);
}

/* Khối tiêu đề căn giữa */
.stats-title-center {
    text-align: center;
    margin-bottom: 50px;
}

.stats-title-center h2 {
    font-size: 36px;
    font-weight: 800;
    color: #1a365d;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.stats-title-center h2 span {
    color: #3182ce;
}

.stats-title-center p {
    font-size: 16px;
    color: #4a5568;
    font-weight: 500;
}

/*
   GIẢI PHÁP ĐỒNG BỘ TUYỆT ĐỐI:
   Sử dụng grid-template-rows phối hợp với subgrid (hoặc ép cứng hàng)
   để định hình 3 tầng cố định cho CẢ 5 CARD.
*/
.stats-bento-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
}

/* Định dạng thẻ bento chung vững chắc */
.stats-bento-grid .stat-card {
    border-radius: 24px;
    padding: 35px 24px;
    color: #ffffff !important;
    border: none;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.04);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.4s ease;

    /* Ép layout bên trong card thành Grid 3 tầng độc lập nối tiếp nhau */
    display: grid;
    grid-template-rows: 45px 50px auto; /* Tầng 1: Icon (45px) | Tầng 2: Số (50px) | Tầng 3: Chữ mô tả (auto) */
    row-gap: 20px; /* Khoảng cách cố định giữa Icon -> Số -> Chữ mô tả của tất cả các ô */
    align-items: start;
}

.stats-bento-grid .stat-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* Khung chứa ảnh PNG icon - Ở TẦNG 1 */
.stats-bento-grid .bento-icon-png {
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 0; /* Bỏ margin dư thừa */
}

.stats-bento-grid .bento-icon-png img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    filter: brightness(0) invert(1);
}

/* Thẻ bọc ngoài số và chữ - Giải phóng flexbox cũ */
.stats-bento-grid .bento-body {
    display: contents; /* Hủy bỏ thẻ wrapper để số và chữ nhận diện trực tiếp lưới của thẻ .stat-card */
}

/* ĐỊNH DẠNG SỐ - Ở TẦNG 2 CHẮN CHẮN THẲNG HÀNG */
.stats-bento-grid .stat-num {
    font-size: 34px;
    font-weight: 900; /* Ép font in đậm kịch kim siêu nét */
    line-height: 50px; /* Ép line-height bằng đúng chiều cao tầng 2 (50px) để chân số nằm trên 1 đường thẳng */
    text-transform: uppercase;
    letter-spacing: -0.5px;
    font-family: 'K2D', sans-serif;
    margin-bottom: 0;

    display: flex;
    align-items: baseline; /* Giúp số và chữ đi kèm như NĂM, +, % luôn khớp nhau */
    height: 50px;
}

/* Tinh chỉnh chữ số chạy và chữ TEAM đi kèm */
.stats-bento-grid .stat-num span.counter {
    font-weight: 900;
}

.stats-bento-grid .stat-num .suffix-team {
    font-size: 18px;
    font-weight: 700;
    margin-left: 6px;
}

/* ĐỊNH DẠNG TEXT MÔ TẢ - Ở TẦNG 3 BẮT ĐẦU TỪ CÙNG MỘT CAO ĐỘ */
.stats-bento-grid .stat-label {
    font-size: 13.5px;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.4;
    font-weight: 500;
    margin-top: 0; /* Đã có row-gap quản lý */
}

/* ============ PHỐI ĐÚNG MÀU TỪNG CỤC GIỐNG MẪU ============ */
.bento-lightblue { background-color: #5aa2d9 !important; }
.bento-purple { background-color: #6e478b !important; }
.bento-red { background-color: #d9534f !important; }
.bento-navy { background-color: #335290 !important; }
.bento-orange { background-color: #da743b !important; }


/* ============ RESPONSIVE TRÊN CÁC THIẾT BỊ DI ĐỘNG ============ */
@media (max-width: 992px) {
    .stats-bento-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .bento-orange {
        grid-column: span 2;
    }
}

@media (min-width: 375px) and (max-width: 425px) {
    .stats-bento-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
    .bento-orange {
        grid-column: span 1 !important;
    }
    .stats-title-center h2 {
        font-size: 26px;
    }
    .stats-bento-grid .stat-card {
        padding: 24px 20px;
        /* Trên điện thoại, hủy bỏ ép cứng chiều cao tầng để chữ hiển thị tự nhiên */
        grid-template-rows: auto auto auto;
        row-gap: 12px;
    }
    .stats-bento-grid .bento-icon-png {
        width: 40px;
        height: 40px;
    }
    .stats-bento-grid .stat-num {
        height: auto;
        line-height: 1.2;
    }
}

/* ============ SECTION 11 – TESTIMONIALS ============ */
#sec-testimonials {
    padding: 0 0 80px 0; /* Tăng padding-bottom cho thông thoáng nút bấm */
    background-color: #F7F8FC;
    position: relative;
    width: 100%;
}

.testimonials-top-bg {
    background-position: center center;
    background-size: cover;
    background-repeat: no-repeat;
    padding: 60px 0 140px 0;
    width: 100%;
    position: relative;
}

/* Lớp phủ màu xanh Royal Blue đè mờ ảnh nền */
.testimonials-top-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(43, 86, 206, 0.88);
    z-index: 1;
}

/* Khối đề mục bọc ngoài căn giữa trọn vẹn */
.testi-header-center {
    position: relative;
    z-index: 2;
    text-align: center;
    width: 100%;
}

.unique-testi-title h2 {
    color: #ffffff !important;
    font-size: 28px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: 0.3px;
}

.unique-testi-title p {
    color: rgba(255, 255, 255, 0.75) !important;
    font-size: 14px;
    margin: 0;
}

/* Khối Slider bọc ngoài giữ nguyên tỷ lệ đè nền vắt ngang */
.testimonials-slider-container {
    margin-top: -90px;
    position: relative;
    z-index: 5;
    padding-left: 40px;
    padding-right: 40px;
}

.testimonials-slider-v2 {
    display: block !important;
    width: 100%;
}

.testi-item-v2 {
    padding: 0 15px;
}

.card-v2-inner {
    background-color: #ffffff;
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    border: 1px solid #e2e8f0;
}

.card-v2-thumb {
    width: 100%;
    height: 320px;
    overflow: hidden;
}

.card-v2-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.card-v2-body {
    padding: 24px 24px 30px 24px;
    text-align: left; /* Phần thông tin text bên trong card vẫn giữ căn lề trái chuẩn UX */
}

.card-v2-body h4 {
    font-size: 22px;
    font-weight: 700;
    color: #1e293b;
    margin-bottom: 4px;
}

.card-v2-body h5 {
    font-size: 13px;
    font-weight: 600;
    color: #3b82f6;
    margin-bottom: 20px;
}

.list-schools h6 {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    margin-bottom: 10px;
}

.list-schools ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.list-schools ul li {
    font-size: 13px;
    color: #334155;
    line-height: 1.6;
    margin-bottom: 6px;
    font-weight: 400;
}

.list-schools ul li:last-child {
    margin-bottom: 0;
}

/* Bộ dấu chấm điều hướng Slick Dots */
#sec-testimonials .slick-dots {
    display: flex !important;
    justify-content: center;
    list-style: none;
    margin-top: 30px;
    padding: 0;
    gap: 8px;
}

#sec-testimonials .slick-dots li button {
    font-size: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: #cbd5e1;
    border: none;
    cursor: pointer;
}

#sec-testimonials .slick-dots li.slick-active button {
    background-color: #2b56ce;
    width: 20px;
    border-radius: 4px;
}

.testimonials-slider-v2 .slick-list {
    margin: 0 -15px;
}

/* Khối chứa nút tư vấn ở DƯỚI CÙNG căn giữa */
.testi-bottom-cta {
    text-align: center;
    margin-top: 40px;
    width: 100%;
}

/* Tùy biến nút bấm chính màu đỏ chủ đạo nổi bật bắt mắt trên nền sáng */
.btn-testi-primary {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background-color: var(--primary); /* Sử dụng đỏ thương hiệu */
    color: #ffffff !important;
    padding: 14px 40px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 6px 20px rgba(236, 50, 55, 0.3);
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.btn-testi-primary:hover {
    background-color: #d3252a;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(236, 50, 55, 0.45);
}

/* ============ RESPONSIVE KHI XUỐNG SMARTPHONE (MOBILE) ============ */
@media (max-width: 768px) {
    .unique-testi-title h2 {
        font-size: 22px;
    }
    .testimonials-slider-container {
        padding-left: 15px !important;
        padding-right: 15px !important;
        margin-top: -70px;
    }
    .btn-testi-primary {
        width: 100%; /* Giãn nút tràn dòng trên mobile cho dễ bấm click tap */
        justify-content: center;
        padding: 14px;
    }
}

/* ============ THIẾT KẾ BANNER NỀN CHO KHỐI ĐÁNH GIÁ ============ */
.testimonials-top-bg {
    /* Thiết lập các thuộc tính canh chỉnh ảnh nền phẳng */
    background-position: center 30%; /* Đẩy tâm ảnh lên một chút để thấy rõ các bóng mũ tốt nghiệp */
    background-size: cover;
    background-repeat: no-repeat;

    padding: 60px 0 140px 0;
    width: 100%;
    position: relative;
}

/* Lớp phủ màu xanh Royal Blue đè lên ảnh gốc để đồng bộ màu sắc giống hình mẫu */
.testimonials-top-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: rgba(43, 86, 206, 0.88); /* Độ mờ 88% giúp hiện rõ chi tiết mũ nhưng chữ vẫn cực nét */
    z-index: 1;
}

/* Ép khung Flex nổi lên trên bề mặt lớp phủ */
.testi-header-flex {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
    width: 100%;
}

/* ============ SECTION 12 – FORM CTA ============ */
#sec-form-cta { background: var(--bg-light); }
.form-cta-grid { display: grid; grid-template-columns: 1fr 460px; gap: 60px; align-items: center; }
.form-cta-img img { width: 100%; border-radius: 16px; height: 500px; object-fit: cover; }
.form-cta-img h2 { font-size: 30px; font-weight: 800; color: var(--text-dark); margin-bottom: 10px; }
.form-cta-img p { font-size: 15px; color: var(--text-mid); margin-bottom: 20px; }
.trust-list { list-style: none; }
.trust-list li { display: flex; align-items: center; gap: 10px; font-size: 14px; color: var(--text-mid); margin-bottom: 10px; }
.trust-list li i { color: var(--blue); font-size: 16px; }
.form-cta-box { background: #fff; border-radius: 16px; padding: 36px 32px; box-shadow: var(--shadow-lg); }
.form-cta-box h3 { font-size: 21px; font-weight: 800; color: var(--blue); text-align: center; margin-bottom: 4px; }
.form-cta-box p { font-size: 13px; color: var(--text-muted); text-align: center; margin-bottom: 22px; }

/* Responsive Grid Control */
@media (max-width: 900px) {
    .hero-grid, .pain-grid, .solution-top, .form-cta-grid { grid-template-columns: 1fr; }
    .courses-grid, .destination-cards, .benefits-grid { grid-template-columns: 1fr 1fr; }
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .reasons-grid { grid-template-columns: 1fr 1fr; }
    .testimonials-grid { grid-template-columns: 1fr; }
    .hero-title { font-size: 32px; }
}

/* ============ SECTION 12 – FORM CTA CUỐI TRANG ============ */
/* ==========================================================================
   FORM 1: KHỐI HỘP ĐĂNG KÝ CHÍNH (#sec-form-cta) - PHONG CÁCH GRADIENT PREMIUM
   ========================================================================== */

#sec-form-cta {
    background-color: var(--bg-light);
    padding: 80px 0;
}

/* Cấu trúc Grid chia đôi tỉ lệ 50/50 đều nhau */
.form-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: stretch;
    width: 100%;
}

/* Khối nội dung chữ bên trái */
.form-cta-grid > div:first-child {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.form-cta-grid img {
    width: 100%;
    height: 340px;
    border-radius: 20px; /* Tăng bo góc ảnh cho mềm mại đồng bộ */
    object-fit: cover;
    margin-bottom: 28px;
    box-shadow: 0 15px 35px rgba(8, 64, 141, 0.08);
}

.form-cta-img {
    font-size: 32px;
    font-weight: 800;
    color: var(--blue);
    line-height: 1.3;
    margin-bottom: 12px;
}

/* Khối danh sách cam kết */
.trust-list {
    list-style: none;
    margin-top: 10px;
}

.trust-list li {
    display: flex;
    align-items: center;
    gap: 12px;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--text-mid);
    margin-bottom: 12px;
}

.trust-list li:last-child {
    margin-bottom: 0;
}

.trust-list li i.fa {
    display: none !important;
}

.trust-list li::before {
    content: '✓';
    font-size: 16px;
    font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
    line-height: 1;
    flex-shrink: 0;
}

/* NÂNG CẤP MÀU FORM 1: Nền chuyển màu xanh ngọc dịu nhẹ sâu lắng, không còn trắng trơn */
.form-cta-box {
    /* Đi từ xanh navy đậm sang xanh chủ đạo của bạn */
    background: linear-gradient(135deg, #0f1e36 0%, var(--blue) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 40px rgba(15, 30, 54, 0.3);
    border-radius: 24px;
    padding: 45px 40px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
    z-index: 1; /* Đảm bảo không bị lớp ::before che khuất các ô nhập liệu */
}

/* Đường viền Neon mờ chạy ẩn bao quanh Form tăng nét tinh tế */
.form-cta-box::before {
    content: '';
    position: absolute;
    top: -2px; bottom: -2px; left: -2px; right: -2px;
    background: linear-gradient(135deg, var(--blue) 0%, #63b3ed 100%);
    border-radius: 26px;
    z-index: -1;
    opacity: 0.2;
}

/* ĐÃ CẬP NHẬT: Tiêu đề chuyển hẳn sang màu TRẮNG tinh khôi để cực kỳ nổi bật trên nền tối */
.form-cta-box h3 {
    font-size: 25px;
    font-weight: 800;
    color: #ffffff !important;
    text-align: center;
    margin-bottom: 8px;
    letter-spacing: 0.5px;
    text-transform: uppercase;
}

/* ĐÃ CẬP NHẬT: Dòng mô tả nhỏ chuyển sang màu xám sáng dịu mắt, dễ đọc */
.form-cta-box p {
    font-size: 14px;
    color: #94a3b8;
    text-align: center;
    margin-bottom: 32px;
    font-weight: 500;
}

/* Khu vực ô nhập liệu form 1 */
.form-cta-box .form-group {
    margin-bottom: 20px;
}

/* Đheader ĐÃ CẬP NHẬT: Nhãn chữ tên ô chuyển sang màu xám trắng mượt sang trọng */
.form-cta-box .form-group label {
    font-size: 12.5px;
    font-weight: 700;
    color: #cbd5e1;
    margin-bottom: 8px;
    display: block;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ĐÃ CẬP NHẬT TOÀN DIỆN: Ô nhập liệu phong cách Kính Mờ (Glassmorphism), không còn trắng đơn điệu */
.form-cta-box .form-group input,
.form-cta-box .form-group select,
.form-cta-box .form-group textarea {
    width: 100%;
    border: 1px solid rgba(255, 255, 255, 0.15); /* Viền mờ mỏng */
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 14.5px;
    color: #ffffff !important; /* Chữ gõ vào sẽ có màu trắng */
    background-color: rgba(255, 255, 255, 0.08) !important; /* Nền trong suốt nhẹ hòa vào khối xanh */
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(10px); /* Làm mờ hậu cảnh */
    transition: all 0.25s ease;
    appearance: none;
}

/* ĐÃ CẬP NHẬT: Đổi màu chữ gợi ý mặc định (placeholder) thành màu trắng mờ tinh tế */
.form-cta-box .form-group input::placeholder,
.form-cta-box .form-group textarea::placeholder {
    color: rgba(255, 255, 255, 0.4) !important;
}

/* ĐÃ CẬP NHẬT: Khi click chuột gõ chữ, ô input bừng sáng xanh neon cực chất */
.form-cta-box .form-group input:focus,
.form-cta-box .form-group select:focus,
.form-cta-box .form-group textarea:focus {
    outline: none;
    border-color: #63b3ed !important;
    background-color: rgba(255, 255, 255, 0.12) !important; /* Sáng nền lên một chút */
    box-shadow: 0 0 15px rgba(99, 179, 237, 0.35); /* Đổ bóng phát sáng viền */
}

/* ĐÃ CẬP NHẬT: Thay đổi màu mũi tên ô select thành màu trắng để dễ nhìn trên nền tối */
.form-cta-box .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 42px;
}

/* NÚT SUBMIT FORM 1: Màu đỏ rực rỡ dạng 3D, kích thích hành động bấm cực cao */
.form-cta-box .btn-submit {
    width: 100%;
    background: linear-gradient(135deg, var(--primary) 0%, #e53e3e 100%);
    color: var(--bg-white) !important;
    font-weight: 800;
    font-size: 16px;
    padding: 16px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    letter-spacing: 1px;
    text-transform: uppercase;
    margin-top: 12px;
    box-shadow: 0 8px 25px rgba(229, 62, 62, 0.35);
    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.form-cta-box .btn-submit:hover {
    filter: brightness(1.1);
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(229, 62, 62, 0.45);
}


/* ==========================================================================
   FORM 2: NẾU BẠN CÓ FORM POPUP HOẶC FORM TẠI TRANG CHỦ (Tối ưu phối màu đồng bộ)
   ========================================================================== */

/* Mẹo thiết kế: Đổi màu nền của khối form phụ sang tông màu xanh mờ sâu (Deep Blue Canvas)
   Giúp tạo điểm nhấn khác biệt hoàn toàn với màu trắng đơn điệu cũ.
*/
.form-cta-box-secondary {
    background: linear-gradient(135deg, #0f1e36 0%, #1a365d 100%) !important; /* Màu xanh Navy sâu quý phái */
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    box-shadow: 0 30px 70px rgba(0, 0, 0, 0.2) !important;
}

.form-cta-box-secondary::before {
    background: linear-gradient(135deg, #3182ce 0%, #90caf9 100%) !important;
    opacity: 0.3 !important;
}

/* Đổi chữ sang màu trắng tương phản trên nền tối */
.form-cta-box-secondary h3 {
    background: linear-gradient(135deg, #ffffff 0%, #cbd5e1 100%) !important;
    -webkit-background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

.form-cta-box-secondary p {
    color: #94a3b8 !important;
}

.form-cta-box-secondary .form-group label {
    color: #cbd5e1 !important;
}

/* Ô input trên nền form tối: Trong suốt nhẹ (Glassmorphism) cực kỳ thời thượng */
.form-cta-box-secondary .form-group input,
.form-cta-box-secondary .form-group select,
.form-cta-box-secondary .form-group textarea {
    background-color: rgba(255, 255, 255, 0.05) !important;
    border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
    color: #ffffff !important;
}

.form-cta-box-secondary .form-group input:focus,
.form-cta-box-secondary .form-group select:focus,
.form-cta-box-secondary .form-group textarea:focus {
    background-color: rgba(255, 255, 255, 0.09) !important;
    border-color: #63b3ed !important;
    box-shadow: 0 0 0 4px rgba(99, 179, 237, 0.25) !important;
}

.form-cta-box-secondary .form-group select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") !important;
}


/* ==========================================================================
   CẤU TRÚC RESPONSIVE TOÀN DIỆN CHO DI ĐỘNG
   ========================================================================== */
@media (max-width: 992px) {
    .form-cta-grid {
        grid-template-columns: 1fr; /* Đẩy về 1 cột dọc trên máy tính bảng/mobile */
        gap: 40px;
    }
}

@media (max-width: 576px) {
    #sec-form-cta {
        padding: 60px 0;
    }
    .form-cta-box {
        padding: 35px 20px; /* Thu nhỏ khoảng cách ruột trên điện thoại để không bị tràn màn hình */
        border-radius: 20px;
    }
    .form-cta-img {
        font-size: 26px;
    }
}

/* ============ RESPONSIVE CHO KHỐI FORM CTA CUỐI TRANG ============ */

/* 1. Breakpoint cho Máy tính bảng & Màn hình Laptop nhỏ (Dưới 900px) */
@media (max-width: 900px) {
    .hero-grid,
    .pain-grid,
    .solution-top,
    .form-cta-grid {
        grid-template-columns: 1fr;
    }
    .courses-grid,
    .destination-cards,
    .benefits-grid {
        grid-template-columns: 1fr 1fr; /* Giữ 2 cột trên tablet */
        gap: 16px;
    }
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .reasons-grid {
        grid-template-columns: 1fr 1fr;
        gap: 16px;
    }
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
    .hero-title {
        font-size: 32px;
    }
    .form-cta-img {
        font-size: 26px;
    }
    .form-cta-box {
        padding: 32px 24px;
    }
}

/* 2. Breakpoint biến tấu chuyên biệt cho Smartphone (Từ 375px đến 425px) */
@media (min-width: 375px) and (max-width: 425px) {
    /* Ép toàn bộ các hệ thống lưới card về cấu trúc 1 card / 1 hàng */
    .courses-grid,
    .destination-cards,
    .benefits-grid,
    .stats-grid,
    .reasons-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important; /* Tạo khoảng cách dọc rộng rãi dễ nhìn */
    }

    /* Tối ưu khoảng đệm trong các phần tử nhỏ để không bị tràn màn hình */
    .sec {
        padding: 50px 0; /* Thu nhỏ khoảng cách padding của section cho vừa màn hình mobile */
    }

    .sec-title h2 {
        font-size: 24px; /* Hạ size tiêu đề chính để không bị gãy dòng đột ngột */
    }

    .hero-title {
        font-size: 28px;
    }

    .form-card,
    .form-cta-box {
        padding: 24px 20px; /* Thu hẹp lề trong của các hộp form */
    }

    .commitment-bar {
        padding: 20px;
    }

    .commitment-bar p {
        font-size: 15px;
    }

    /* Căn đều chỉnh lại hàng icon bám đáy / emoji cho ngay ngắn */
    .hero-trust,
    .hero-trust-modern,
    .hero-trust-emoji {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }
}