/* ===== RESET & BASE ===== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Montserrat', sans-serif;
            background: #f5f7fb;
            background-image: radial-gradient(#d1d9e6 1px, transparent 1px);
            background-size: 30px 30px;
            overflow-x: hidden;
        }

        :root {
            --navy: #014285;
            --navy2: #0a2c6c;
            --orange: #ff713b;
            --white: #ffffff;
            /* Tối ưu màu Glassmorphism: trong suốt hơn để thấy nền */
            --glass: rgba(10, 44, 108, 0.65); 
            --glass-border: rgba(255, 255, 255, 0.15);
            --transition: all 0.5s cubic-bezier(0.77, 0.2, 0.05, 1);
        }

        /* ================= NAVBAR ================= */
        .navbar {
            background: linear-gradient(90deg, var(--navy), var(--navy2));
            padding: 0 35px;
            height: 80px;
            display: grid;
            grid-template-columns: 180px 1fr;
            align-items: center;
            position: sticky;
            top: 0;
            z-index: 999;
            box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
        }

        .logo img {
            height: 50px;
            display: block;
        }

        /* ================= MENU DESKTOP ================= */
        .menu {
            list-style: none;
            display: flex;
            justify-content: flex-end;
            align-items: center;
            gap: 2px;
            height: 100%;
        }

        .menu > li {
            position: relative;
            height: 100%;
            display: flex;
            align-items: center;
        }

        .menu > li > a {
            display: block;
            padding: 0 14px;
            color: #fff;
            text-decoration: none;
            font-size: 13px;
            font-weight: 700;
            letter-spacing: .5px;
            transition: var(--transition);
            line-height: 80px;
            text-transform: uppercase;
        }

        .menu > li > a:hover {
            color: var(--orange);
        }

        /* ================= MEGA MENU DESKTOP (DEEP GLASS STYLE) ================= */
        .mega {
            position: absolute;
            top: 100%;
            left: 0;
            width: max-content;
            min-width: 340px;
            max-width: 950px;
            padding: 30px;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px);
            transition: var(--transition);
            
            /* HIỆU ỨNG KÍNH SIÊU MỜ */
            background: var(--glass);
            backdrop-filter: blur(30px) saturate(160%);
            -webkit-backdrop-filter: blur(30px) saturate(160%);
            
            /* Viền kép tạo cảm giác kính dày */
            border: 1px solid var(--glass-border);
            border-top: 1px solid rgba(255, 255, 255, 0.3); 
            
            box-shadow: 0 20px 40px rgba(0, 0, 0, 0.4);
            border-radius: 0 0 16px 16px;
        }

        .menu > li:hover .mega {
            opacity: 1;
            visibility: visible;
            transform: translateY(0);
        }

        .drop-left .mega {
            left: auto;
            right: 0;
        }

        .mega-wrap {
            display: grid;
            grid-template-columns: 260px 0px 320px;
            gap: 0px;
            transition: var(--transition);
        }

        .mega:has(.has-sub:hover) .mega-wrap,
        .mega:has(.mega-mid:hover) .mega-wrap {
            grid-template-columns: 260px 240px 320px;
            gap: 40px;
        }

        .mega-left a, .mega-mid a {
            display: block;
            padding: 12px 0;
            color: #fff;
            text-decoration: none;
            font-size: 14px;
            font-weight: 500;
            transition: 0.3s;
            border-bottom: 1px solid rgba(255,255,255,0.05);
        }

        .has-sub > a::after {
            content: '\f105';
            font-family: 'Font Awesome 6 Free';
            font-weight: 900;
            float: right;
            opacity: 0.5;
        }

        .mega-left a:hover, .mega-mid a:hover {
            color: var(--orange);
            padding-left: 10px;
            background: rgba(255,255,255,0.08);
        }

        .mega-mid {
            opacity: 0;
            visibility: hidden;
            transform: translateX(-15px);
            transition: var(--transition);
            border-left: 1px solid rgba(255,255,255,0.1);
            padding-left: 30px;
            overflow: hidden;
        }

        .mega:has(.has-sub:hover) .mega-mid,
        .mega:has(.mega-mid:hover) .mega-mid {
            opacity: 1;
            visibility: visible;
            transform: translateX(0);
        }

        .mega-right img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 12px;
            box-shadow: 0 10px 20px rgba(0,0,0,0.3);
            border: 1px solid rgba(255,255,255,0.1);
        }

        .caption {
            margin-top: 15px;
            color: #fff;
            font-size: 14px;
            line-height: 1.6;
            opacity: 0.85;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }

        /* Ẩn mobile footer trên Desktop */
        .mobile-footer {
            display: none;
        }

        /* ================= MOBILE HAMBURGER ================= */
        .mobile-btn {
            display: none;
            width: 30px;
            height: 20px;
            position: relative;
            cursor: pointer;
            justify-self: end;
            z-index: 1001;
        }

        .mobile-btn span {
            display: block;
            width: 100%;
            height: 2.5px;
            background: #fff;
            position: absolute;
            transition: 0.3s cubic-bezier(0.68, -0.6, 0.32, 1.6);
            border-radius: 2px;
        }

        .mobile-btn span:nth-child(1) { top: 0; }
        .mobile-btn span:nth-child(2) { top: 9px; width: 80%; right: 0; }
        .mobile-btn span:nth-child(3) { top: 18px; }

        .mobile-btn.active span:nth-child(1) { transform: translateY(9px) rotate(45deg); }
        .mobile-btn.active span:nth-child(2) { opacity: 0; transform: translateX(20px); }
        .mobile-btn.active span:nth-child(3) { transform: translateY(-9px) rotate(-45deg); }

        /* ================= MOBILE MENU IMPROVEMENTS ================= */
        @media (max-width: 991px) {
            .navbar {
                grid-template-columns: 140px 1fr;
                height: 75px;
                padding: 0 25px;
            }

            .mobile-btn { display: block; }

            .menu {
                position: fixed;
                top: 0;
                right: -100%;
                width: 80%;
                max-width: 360px;
                height: 100vh;
                background: linear-gradient(165deg, rgba(10, 44, 108, 0.98), rgba(1, 66, 133, 0.98));
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                flex-direction: column;
                justify-content: flex-start;
                align-items: stretch;
                padding: 90px 30px 40px;
                transition: var(--transition);
                overflow-y: auto;
                z-index: 1000;
                box-shadow: -15px 0 35px rgba(0,0,0,0.5);
            }

            .menu.active { right: 0; }

            .menu > li {
                height: auto;
                display: block;
                border-bottom: 1px solid rgba(255,255,255,0.08);
            }

            .menu > li > a {
                line-height: 60px;
                padding: 0;
                font-size: 15px;
                font-weight: 600;
                text-transform: none;
                display: flex;
                justify-content: space-between;
                align-items: center;
                color: rgba(255,255,255,0.9);
            }

            .menu > li > a::after {
                content: '\f107';
                font-family: 'Font Awesome 6 Free';
                font-weight: 900;
                font-size: 14px;
                transition: transform 0.4s;
                color: var(--orange);
            }

            .menu > li.active > a { color: var(--orange); }
            .menu > li.active > a::after { transform: rotate(-180deg); }

            .mega {
                position: static;
                width: 100%;
                display: none;
                padding: 0 0 20px 15px;
                background: transparent;
                border: none;
                box-shadow: none;
                transform: none;
                opacity: 1;
                visibility: visible;
                backdrop-filter: none;
            }

            .mega.open { 
                display: block; 
                animation: fadeInMenu 0.4s ease forwards;
            }

            .mega-wrap { display: block; }

            .mega-left a {
                font-size: 14px;
                padding: 12px 0;
                color: rgba(255,255,255,0.7);
                border-bottom: none;
            }

            .mega-mid {
                display: none !important;
                opacity: 0;
                visibility: hidden;
                border-left: 2px solid var(--orange);
                margin: 5px 0 10px 10px;
                padding-left: 20px;
                background: rgba(255,255,255,0.03);
                border-radius: 0 8px 8px 0;
            }

            .mega:has(.mega-mid a) .mega-mid {
                display: block !important;
                opacity: 1;
                visibility: visible;
            }

            .mega-mid a {
                padding: 10px 15px;
                border: none;
                font-size: 13px;
                color: rgba(255,255,255,0.8);
            }

            .mega-right { display: none; }

            .mobile-footer {
                display: block;
                margin-top: auto;
                padding-top: 30px;
                opacity: 0;
                transform: translateY(20px);
                transition: 0.5s 0.3s;
            }

            .menu.active .mobile-footer {
                opacity: 1;
                transform: translateY(0);
            }

            .mobile-footer p {
                color: rgba(255,255,255,0.5);
                font-size: 12px;
                margin-bottom: 12px;
                display: flex;
                align-items: center;
                gap: 10px;
            }

            .mobile-footer i { color: var(--orange); width: 16px; }

            .social-icons {
                display: flex;
                gap: 12px;
                margin-top: 20px;
            }

            .social-icons a {
                width: 38px;
                height: 38px;
                background: rgba(255,255,255,0.08);
                display: flex;
                align-items: center;
                justify-content: center;
                border-radius: 10px;
                color: #fff;
                font-size: 16px;
            }
        }

        @keyframes fadeInMenu {
            from { opacity: 0; transform: translateX(-10px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.4);
            backdrop-filter: blur(8px);
            z-index: 998;
            display: none;
            opacity: 0;
            transition: opacity 0.4s;
        }

        .overlay.active { 
            display: block; 
            opacity: 1; 
        }

        /* ================= SECTION ================= */
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700;900&display=swap');
        
        body { 
            font-family: 'Montserrat', sans-serif; 
            margin: 0; padding: 0; 
            box-sizing: border-box;
            background: #ffffff;
            color: #1a1a1a;
            line-height: 1.6;
            overflow-x: hidden;
        }

        :root {
            --blue: #00008A;
            --orange: #ee5421; /* Màu đỏ đô/đỏ đậm như trong ảnh anh gửi */
            --gray-bg: #f9f9f9;
            --text-dark: #1a1a1a;
        }

        .container { max-width: 1200px; margin: 0 auto; padding: 0 20px; }
        .section-padding { padding: 100px 0; }
        .text-center { text-align: center; }
        .uppercase { text-transform: uppercase; }

        /* ===== IMPORT FONT ===== */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;500;600;700;800&display=swap');

/* ===== RESET ===== */
*{
    margin:0;
    padding:0;
    box-sizing:border-box;
}

body{
    font-family:'Montserrat',sans-serif;
}



     /* 1. Hero Section */
.hero{
    padding:180px 0 100px;

    /* Ảnh hero làm backdrop toàn section */
    background-image:
        url('https://tis.edu.vn/wp-content/uploads/2026/04/ChatGPT-Image-Apr-25-2026-08_12_40-PM.png');

    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
}

.hero-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:50px;
    align-items:center;
}

/* chữ màu trắng để nổi trên ảnh */
.hero h1{
    font-size:55px;
    font-weight:900;
    color:#00008A;
    line-height:1.1;
    margin:20px 0;
}

.hero h1 span{ color:var(--orange); }

.hero p{
    font-size:18px;
    color: rgba(40,40,40,.9);
    margin-bottom:40px;
}

/* bỏ cột ảnh cũ */
.hero-empty{
    min-height:500px;
}

/* 2. USP Points */
.usp-section{ padding:80px 0; background:#fff; }
.usp-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:30px; }

.usp-card{
    padding:40px;
    border:1px solid #eee;
    position:relative;
}

.usp-card h3{
    font-weight:900;
    color:var(--blue);
    font-size:20px;
    text-transform:uppercase;
    margin-bottom:15px;
    border-bottom:4px solid var(--orange);
    display:inline-block;
}

.usp-card p{
    font-size:14px;
    color:#666;
}


        /* 2. USP Points */
        .usp-section { padding: 80px 0; background: #fff; }
        .usp-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .usp-card { padding: 40px; border: 1px solid #eee; position: relative; }
        .usp-card h3 { 
            font-weight: 900; color: var(--blue); font-size: 20px; 
            text-transform: uppercase; margin-bottom: 15px;
            border-bottom: 4px solid var(--orange); display: inline-block;
        }
        .usp-card p { font-size: 14px; color: #666; }

       /* 3. CHƯƠNG TRÌNH ĐÀO TẠO */
.curriculum{
    background:linear-gradient(135deg,var(--blue) 0%, #003b82 60%, #0056b3 100%);
    color:#fff;
    padding:110px 0;
    position:relative;
    overflow:hidden;
}

.curriculum::before{
    content:"";
    position:absolute;
    top:-120px;
    right:-100px;
    width:320px;
    height:320px;
    background:rgba(255,255,255,0.05);
    border-radius:50%;
}

.curriculum::after{
    content:"";
    position:absolute;
    bottom:-140px;
    left:-80px;
    width:260px;
    height:260px;
    background:rgba(255,255,255,0.04);
    border-radius:50%;
}

.curr-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:80px;
    align-items:center;
    position:relative;
    z-index:2;
}

/* TAG */
.tag{
    color:var(--orange);
    font-weight:800;
    font-size:12px;
    letter-spacing:2.5px;
    margin-bottom:18px;
    display:inline-block;
    text-transform:uppercase;
}

/* IMAGE */
.curr-grid > div:first-child{
    position:relative;
}

.curr-grid > div:first-child div,
.curr-image-box{
    height:430px !important;
    border-radius:24px !important;
    background:url('https://tis.edu.vn/wp-content/uploads/2023/08/chuong-trinh-hoc-tis.jpg') center/cover no-repeat !important;
    box-shadow:0 25px 50px rgba(0,0,0,0.22);
    position:relative;
}

.curr-grid > div:first-child div::after,
.curr-image-box::after{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(to top,rgba(0,0,0,.18),transparent);
    border-radius:24px;
}

/* CONTENT */
.curr-grid h2{
    font-size:52px !important;
    line-height:1.12;
    font-weight:900 !important;
    margin-bottom:28px !important;
    text-transform:uppercase;
    letter-spacing:-1px;
}

.curr-grid h2 span{
    color:var(--orange);
}

.curr-grid p{
    font-size:17px;
    line-height:1.9;
    opacity:.9;
    margin-bottom:35px !important;
    max-width:560px;
}

/* BUTTON */
.btn-cta{
    display:inline-block;
    padding:16px 34px;
    background:#fff !important;
    color:var(--blue) !important;
    font-weight:800 !important;
    border-radius:60px;
    text-decoration:none;
    font-size:14px;
    letter-spacing:.5px;
    transition:.3s ease;
    box-shadow:0 10px 25px rgba(0,0,0,.12);
}

.btn-cta:hover{
    transform:translateY(-4px);
    background:var(--orange) !important;
    color:#fff !important;
}

/* RESPONSIVE */
@media(max-width:991px){
    .curr-grid{
        grid-template-columns:1fr;
        gap:45px;
    }

    .curr-grid h2{
        font-size:38px !important;
    }

    .curr-grid > div:first-child div,
    .curr-image-box{
        height:340px !important;
    }
}

        /* 4. Lộ trình */
       .levels{
    background:#fff;
    padding:110px 0 0;
}

/* HEAD */
.levels-head{
    max-width:1400px;
    margin:auto;
    padding:0 40px;
    text-align:center;
    margin-bottom:55px;
}

.levels-head .tag{
    display:block;
    color:var(--orange);
    font-size:12px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    margin-bottom:18px;
}

.levels-head h2{
    font-size:58px;
    line-height:1.1;
    font-weight:900;
    color:var(--blue);
    margin-bottom:20px;
    text-transform:uppercase;
    letter-spacing:-1px;
}

.levels-head h2 span{
    color:var(--orange);
}

.levels-head p{
    max-width:850px;
    margin:auto;
    font-size:17px;
    color:#666;
    line-height:1.9;
}

/* GRID */
.levels-grid{
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:0;
}

/* ITEM */
.level-item{
    position:relative;
    height:640px;
    overflow:hidden;
    text-decoration:none;
    color:#fff;
    border-right:1px solid rgba(255,255,255,.12);
    transition:all .55s ease;
}

.level-item:last-child{
    border-right:none;
}

.level-item img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:transform 1.3s ease;
}

/* overlay */
.level-item::before{
    content:"";
    position:absolute;
    inset:0;
    background:linear-gradient(
        to top,
        rgba(0,32,74,.95) 0%,
        rgba(0,32,74,.50) 38%,
        rgba(0,0,0,.05) 100%
    );
    z-index:1;
}

/* number */
.level-no{
    position:absolute;
    top:28px;
    left:28px;
    z-index:5;
    font-size:15px;
    letter-spacing:2px;
    font-weight:700;
    opacity:.75;
}

/* content */
.level-overlay{
    position:absolute;
    left:34px;
    right:34px;
    bottom:34px;
    z-index:5;
    transition:.45s;
}

.level-overlay small{
    display:block;
    font-size:11px;
    font-weight:800;
    letter-spacing:3px;
    color:var(--orange);
    margin-bottom:12px;
    text-transform:uppercase;
}

.level-overlay h3{
    font-size:42px;
    line-height:1.05;
    font-weight:900;
    margin-bottom:14px;
    text-transform:uppercase;
}

.level-overlay p{
    font-size:15px;
    line-height:1.8;
    opacity:0;
    max-height:0;
    overflow:hidden;
    transition:.45s;
    margin-bottom:0;
}

.level-btn{
    width:56px;
    height:56px;
    border-radius:50%;
    background:var(--orange);
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:24px;
    font-weight:700;
    opacity:0;
    transform:translateY(15px);
    transition:.45s;
}

/* HOVER EXPAND */
@media(min-width:1200px){

.levels-grid{
    grid-template-columns:1fr 1fr 1fr 1fr;
}

.levels-grid:has(.level-item:nth-child(1):hover){
    grid-template-columns:1.45fr .85fr .85fr .85fr;
}
.levels-grid:has(.level-item:nth-child(2):hover){
    grid-template-columns:.85fr 1.45fr .85fr .85fr;
}
.levels-grid:has(.level-item:nth-child(3):hover){
    grid-template-columns:.85fr .85fr 1.45fr .85fr;
}
.levels-grid:has(.level-item:nth-child(4):hover){
    grid-template-columns:.85fr .85fr .85fr 1.45fr;
}

}

/* hover card */
.level-item:hover img{
    transform:scale(1.08);
}

.level-item:hover .level-overlay{
    bottom:46px;
}

.level-item:hover .level-overlay p{
    opacity:1;
    max-height:140px;
    margin-bottom:18px;
}

.level-item:hover .level-btn{
    opacity:1;
    transform:translateY(0);
}

/* responsive */
@media(max-width:1199px){

.levels-grid{
    grid-template-columns:repeat(2,1fr);
}

.level-item{
    height:460px;
}

.level-overlay p,
.level-btn{
    opacity:1;
    max-height:120px;
    transform:none;
}

.level-overlay h3{
    font-size:32px;
}

}

@media(max-width:768px){

.levels{
    padding:80px 0 0;
}

.levels-head h2{
    font-size:36px;
}

.levels-grid{
    grid-template-columns:1fr;
}

.level-item{
    height:360px;
}

.level-overlay h3{
    font-size:28px;
}

}

       /* ===============================
BOARDING SECTION
=============================== */

.boarding-section{
    padding:90px 0;
    background:#fff;
}

.boarding-grid{
    display:grid;
    grid-template-columns:1.05fr 1fr;
    gap:60px;
    align-items:center;
}

/* ===============================
SLIDER
=============================== */

.boarding-slider{
    position:relative;
    overflow:hidden;
    height:560px;
    background:#eee;
}

.slides{
    width:100%;
    height:100%;
    position:relative;
}

.slide{
    position:absolute;
    inset:0;
    width:100%;
    height:100%;
    object-fit:cover;
    opacity:0;
    transition:opacity .6s ease;
}

.slide.active{
    opacity:1;
}

/* NAV */
.nav{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    width:48px;
    height:48px;
    border:none;
    background:rgba(0,0,0,.45);
    color:#fff;
    font-size:22px;
    cursor:pointer;
    z-index:5;
}

.prev{ left:12px; }
.next{ right:12px; }

.nav:hover{
    background:#00008A;
}

/* DOTS */
.dots{
    position:absolute;
    bottom:18px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:10px;
    z-index:5;
}

.dot{
    width:11px;
    height:11px;
    background:rgba(255,255,255,.55);
    cursor:pointer;
}

.dot.active{
    background:#fff;
}

/* ===============================
CONTENT
=============================== */

.boarding-content h4{
    color:#f05a22;
    font-size:14px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:14px;
}

.boarding-content h2{
    font-size:44px;
    line-height:1.18;
    color:#00008A;
    font-weight:900;
    margin-bottom:22px;
}

.boarding-desc{
    color:#666;
    font-size:16px;
    line-height:1.9;
    margin-bottom:32px;
}

/* FEATURES */
.boarding-features{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
}

.feat-item{
    background:#f8fafc;
    border:1px solid #edf1f5;
    padding:24px;
    transition:.25s;
}

.feat-item:hover{
    transform:translateY(-4px);
    box-shadow:0 15px 28px rgba(0,0,0,.06);
}

.feat-item h5{
    color:#00008A;
    font-size:18px;
    margin-bottom:10px;
    font-weight:800;
}

.feat-item p{
    font-size:14px;
    color:#666;
    line-height:1.75;
    margin:0;
}

/* ===============================
RESPONSIVE
=============================== */

@media(max-width:992px){

.boarding-grid{
    grid-template-columns:1fr;
}

.boarding-slider{
    height:430px;
}

.boarding-content h2{
    font-size:34px;
}

}

@media(max-width:768px){

.boarding-slider{
    height:320px;
}

.boarding-features{
    grid-template-columns:1fr;
}

.boarding-content h2{
    font-size:28px;
}

}

/* ===============================
END
=============================== */

  /* ======================================
   ACHIEVEMENT PREMIUM FIX GRID
====================================== */

.achievement-grid-section{
    padding:110px 0;
    background:#fff;
}

.ach-head{
    text-align:center;
    margin-bottom:55px;
}

.ach-head .tag{
    display:block;
    color:var(--orange);
    font-size:12px;
    font-weight:800;
    letter-spacing:3px;
    margin-bottom:18px;
}

.ach-head h2{
    font-size:56px;
    line-height:1.08;
    font-weight:900;
    color:var(--blue);
    text-transform:uppercase;
}

.ach-head h2 span{
    color:var(--orange);
}

/* GRID FIX */
.ach-grid{
    display:grid;
    grid-template-columns:1fr 2fr 1fr;
    grid-template-rows:260px 260px 260px;
    gap:18px;

    grid-template-areas:
    "a b c"
    "d e c"
    "f e g";
}

/* AREAS */
.box1{grid-area:a;}
.box2{grid-area:b;}
.box3{grid-area:c;}
.box4{grid-area:d;}
.box5{grid-area:e;}
.box6{grid-area:f;}
.box7{grid-area:g;}

/* BOX */
.box{
    padding:34px 28px;
    position:relative;
    overflow:hidden;
    transition:.35s ease;
}

.box:hover{
    transform:translateY(-6px);
}

.orange{
    background:var(--orange);
    color:#fff;
}

.white{
    background:#f4f4f4;
    color:#111;
}

.orange-text{
    color:var(--orange);
}

/* IMAGE */
.image{
    padding:0;
}

.image img{
    width:100%;
    height:100%;
    object-fit:cover;
    transition:1s ease;
}

.image:hover img{
    transform:scale(1.08);
}

.ach-overlay{
    position:absolute;
    inset:0;
    padding:34px 28px;
    background:linear-gradient(to top, rgba(0,0,0,.72), rgba(0,0,0,.15));
    color:#fff;
    display:flex;
    flex-direction:column;
    justify-content:flex-end;
}

/* TEXT */
.big{
    font-size:70px;
    line-height:1;
    font-weight:900;
    margin-bottom:10px;
    letter-spacing:-2px;
}

.box h3{
    font-size:28px;
    line-height:1.1;
    font-weight:800;
    margin-bottom:10px;
}

.box p{
    font-size:15px;
    line-height:1.7;
}

/* RESPONSIVE */
@media(max-width:1100px){

.ach-grid{
    grid-template-columns:1fr 1fr;
    grid-template-rows:auto;
    grid-template-areas:
    "a b"
    "c d"
    "e e"
    "f g";
}

.box{
    min-height:240px;
}

}

@media(max-width:768px){

.achievement-grid-section{
    padding:80px 0;
}

.ach-head h2{
    font-size:36px;
}

.ach-grid{
    grid-template-columns:1fr;
    grid-template-areas:
    "a"
    "b"
    "c"
    "d"
    "e"
    "f"
    "g";
}

.box{
    min-height:230px;
}

.big{
    font-size:52px;
}

.box h3{
    font-size:24px;
}

}
/* =========================
TIS PREMIUM FORM SECTION
========================= */

.tis-form-section{
    padding:120px 0;
    background:linear-gradient(135deg,#f8faff 0%, #ffffff 100%);
}

.tis-form-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:70px;
    align-items:center;
}

/* LEFT */
.tis-form-content .tag{
    color:#ee5421;
    font-size:12px;
    font-weight:800;
    letter-spacing:3px;
    text-transform:uppercase;
    display:block;
    margin-bottom:18px;
}

.tis-form-content h2{
    font-size:54px;
    line-height:1.08;
    font-weight:900;
    color:#00008A;
    margin-bottom:25px;
    text-transform:uppercase;
}

.tis-form-content h2 span{
    color:#ee5421;
}

.tis-form-content p{
    font-size:17px;
    color:#666;
    line-height:1.9;
    margin-bottom:35px;
}

.tis-points{
    display:grid;
    gap:18px;
}

.point{
    display:flex;
    align-items:center;
    gap:14px;
    font-weight:600;
    color:#222;
}

.icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#ee5421;
    color:#fff;
    display:flex;
    align-items:center;
    justify-content:center;
    font-size:15px;
    font-weight:700;
}

/* CARD */
.tis-form-card{
    background:#fff;
    padding:42px;
    border-radius:28px;
    box-shadow:0 25px 60px rgba(0,0,0,.08);
    border:1px solid #edf1f5;
}

/* FORM */
.row{
    margin-bottom:18px;
}

.row.two{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:16px;
}

.field label{
    display:block;
    font-size:13px;
    font-weight:700;
    color:#00008A;
    margin-bottom:8px;
}

.field input,
.field select,
.field textarea{
    width:100%;
    padding:16px 18px;
    border:1px solid #dde4ec;
    border-radius:14px;
    font-family:'Montserrat',sans-serif;
    font-size:14px;
    transition:.25s;
    outline:none;
    background:#fff;
}

.field input:focus,
.field select:focus,
.field textarea:focus{
    border-color:#00008A;
    box-shadow:0 0 0 4px rgba(0,0,138,.06);
}

/* BUTTON */
.tis-submit{
    width:100%;
    border:none;
    padding:18px 20px;
    border-radius:60px;
    background:#ee5421;
    color:#fff;
    font-size:14px;
    font-weight:800;
    letter-spacing:.5px;
    cursor:pointer;
    transition:.3s ease;
    margin-top:10px;
}

.tis-submit:hover{
    transform:translateY(-3px);
    background:#00008A;
}

.form-note{
    text-align:center;
    margin-top:16px;
    font-size:13px;
    color:#777;
}

/* RESPONSIVE */
@media(max-width:991px){

.tis-form-grid{
    grid-template-columns:1fr;
    gap:45px;
}

.tis-form-content h2{
    font-size:38px;
}

}

@media(max-width:768px){

.tis-form-section{
    padding:80px 0;
}

.row.two{
    grid-template-columns:1fr;
}

.tis-form-card{
    padding:28px;
}

.tis-form-content h2{
    font-size:32px;
}

}
.tis-form-section *{
 font-family:'Montserrat',sans-serif !important;
}
.consent-box{
    margin-top:18px;
    font-size:13px;
    color:#666;
    line-height:1.7;
}

.consent-box label{
    display:flex;
    gap:10px;
    align-items:flex-start;
    cursor:pointer;
}

.consent-box input{
    margin-top:3px;
    accent-color:#00008A;
    width:16px;
    height:16px;
}
        /* 7. Tin tức */
        .news { padding: 100px 0; }
        .news-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 30px; }
        .news-card { border: 1px solid #eee; }
        .news-card img { width: 100%; height: 220px; object-fit: cover; }
        .news-content { padding: 25px; }
/* ==========================
TIS GLOBAL PARTNER SLIDER
========================== */

.tis-accreditation{
    padding:75px 0;
    background:#fff;
    border-top:1px solid #edf1f5;
    overflow:hidden;
}

.acc-head{
    text-align:center;
    max-width:820px;
    margin:auto;
    margin-bottom:48px;
}

.acc-head span{
    display:block;
    color:#f05a22;
    font-size:13px;
    font-weight:800;
    letter-spacing:2px;
    margin-bottom:12px;
}

.acc-head h2{
    font-size:34px;
    color:#00008A;
    font-weight:900;
    margin-bottom:14px;
}

.acc-head p{
    font-size:16px;
    color:#666;
    line-height:1.8;
}

/* SLIDER */
.logo-slider{
    width:100%;
    overflow:hidden;
}

.logo-track{
    display:flex;
    gap:24px;
    width:max-content;
    animation:partnerMove 45s linear infinite;
}

.logo-slider:hover .logo-track{
    animation-play-state:paused;
}

/* BOX */
.logo-box{
    min-width:220px;
    height:120px;
    background:#fff;
    border:1px solid #edf1f5;
    border-radius:18px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:22px;
    transition:.3s;
}

.logo-box img{
    max-width:100%;
    max-height:58px;
    object-fit:contain;
    opacity:.72;
    filter:grayscale(1);
    transition:.3s;
}

.logo-box:hover{
    transform:translateY(-6px);
    box-shadow:0 18px 35px rgba(0,0,0,.08);
}

.logo-box:hover img{
    opacity:1;
    filter:none;
}

/* AUTO MOVE */
@keyframes partnerMove{
    0%{transform:translateX(0);}
    100%{transform:translateX(-50%);}
}

/* MOBILE */
@media(max-width:768px){

.acc-head h2{
    font-size:26px;
}

.acc-head p{
    font-size:14px;
}

.logo-box{
    min-width:180px;
    height:100px;
}

}

/* ===========================
RESET FOOTER MỚI
=========================== */

.tis-footer-v2{
    background:#ffffff;
    border-top:1px solid #edf1f5;
    padding:70px 0 35px;
    width:100%;
    font-family:inherit;
}

.tis-wrap{
    width:100%;
    max-width:1320px;
    margin:auto;
    padding:0 35px;
    box-sizing:border-box;
}

/* TOP */
.tis-top{
    display:grid;
    grid-template-columns:1.2fr 1fr;
    gap:70px;
    align-items:start;
    padding-bottom:55px;
}

/* LEFT */
.tis-left{
    padding-right:25px;
}

/* BRAND */
.tis-brand-row{
    display:flex;
    align-items:center;
    gap:20px;
    margin-bottom:22px;
}

.tis-logo{
    width:82px;
    height:auto;
    flex-shrink:0;
}

.tis-brand-text{
    display:flex;
    flex-direction:column;
    justify-content:center;
}

.mini-title{
    font-size:12px;
    text-transform:uppercase;
    letter-spacing:1.8px;
    color:#888;
    margin-bottom:8px;
    font-weight:600;
}

.tis-left h2{
    font-size:46px;
    line-height:1.05;
    margin:0;
    font-weight:900;
    color:#00008A;
}

.tis-left h2 span{
    color:#f05a22;
}

.tis-left p{
    font-size:16px;
    line-height:1.9;
    color:#666;
    max-width:560px;
    margin-bottom:28px;
}

/* MOBILE */
@media(max-width:768px){

.tis-brand-row{
    flex-direction:column;
    align-items:flex-start;
    gap:14px;
}

.tis-logo{
    width:70px;
}

.tis-left h2{
    font-size:30px;
}

.mini-title{
    font-size:11px;
}

}

/* RIGHT */
.tis-right{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:40px;
}

.tis-col h4{
    color:#00008A;
    font-size:17px;
    margin-bottom:18px;
    font-weight:800;
}

.tis-col a{
    display:block;
    text-decoration:none;
    color:#555;
    margin-bottom:14px;
    font-size:14px;
}

.tis-col a:hover{
    color:#f05a22;
}

/* CONTACT */
.tis-contact{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:25px;
    padding:28px 0;
    border-top:1px solid #edf1f5;
    border-bottom:1px solid #edf1f5;
}

.tis-contact .item strong{
    display:block;
    color:#00008A;
    font-size:14px;
    margin-bottom:8px;
}

.tis-contact .item span{
    color:#555;
    font-size:14px;
    line-height:1.7;
}

/* PARTNER */
.tis-partner{
    display:flex;
    gap:38px;
    align-items:center;
    flex-wrap:wrap;
    padding:28px 0;
    border-bottom:1px solid #edf1f5;
}

.tis-partner img{
    height:32px;
    opacity:.75;
}

/* BOTTOM */
.tis-bottom{
    display:grid;
    grid-template-columns:1fr auto auto;
    gap:30px;
    align-items:center;
    padding-top:28px;
}

.copy{
    font-size:13px;
    color:#777;
}

.social,
.policy{
    display:flex;
    gap:18px;
    flex-wrap:wrap;
}

.social a,
.policy a{
    text-decoration:none;
    color:#777;
    font-size:13px;
}

.social a:hover,
.policy a:hover{
    color:#f05a22;
}

/* RESPONSIVE */
@media(max-width:1100px){

.tis-top{
    grid-template-columns:1fr;
}

.tis-contact{
    grid-template-columns:1fr;
}

.tis-bottom{
    grid-template-columns:1fr;
}

}

@media(max-width:768px){

.tis-left h2{
    font-size:28px;
}

.tis-right{
    grid-template-columns:1fr;
    gap:25px;
}

.tis-wrap{
    padding:0 22px;
}
/* =====================================
   HERO + USP RESPONSIVE FIX
   Chèn cuối CSS
===================================== */

/* TABLET + MOBILE */
@media screen and (max-width: 991px){

    /* HERO */
    .hero{
        padding:110px 0 60px !important;
        background-size:cover !important;
        background-position:center center !important;
    }

    .hero-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:30px !important;
        text-align:center !important;
    }

    .hero-grid > div:first-child{
        order:1;
    }

    .hero-empty{
        order:2;
        min-height:220px !important;
        width:100%;
    }

    .hero h1{
        font-size:36px !important;
        line-height:1.2 !important;
        margin:15px 0 !important;
    }

    .hero p{
        font-size:16px !important;
        line-height:1.7 !important;
        margin-bottom:24px !important;
    }

    .hero .tag{
        display:inline-block;
        font-size:12px !important;
        margin-bottom:8px;
    }

    .hero .btn-cta{
        display:inline-block !important;
        width:100% !important;
        max-width:320px !important;
        padding:16px 20px !important;
        text-align:center !important;
    }

    /* USP */
    .usp-section{
        padding:55px 0 !important;
    }

    .usp-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:18px !important;
    }

    .usp-card{
        padding:26px !important;
        text-align:center;
    }

    .usp-card h3{
        font-size:18px !important;
    }

    .usp-card p{
        font-size:15px !important;
        line-height:1.6 !important;
    }

}


/* MOBILE NHỎ */
@media screen and (max-width: 576px){

    .hero{
        padding:95px 0 45px !important;
    }

    .hero h1{
        font-size:30px !important;
    }

    .hero p{
        font-size:15px !important;
    }

    .hero-empty{
        min-height:170px !important;
    }

    .usp-card{
        padding:22px !important;
    }

}
/* =====================================
   HERO BACKDROP KHÁC CHO MOBILE
   Chèn cuối CSS
===================================== */

/* DESKTOP giữ ảnh cũ */
.hero{
    background-image:
    url("https://tis.edu.vn/wp-content/uploads/2026/04/ChatGPT-Image-Apr-25-2026-08_12_40-PM.png");
}


/* MOBILE dùng ảnh khác */
@media screen and (max-width: 991px){

    .hero{
        background-image:
        url("https://tis.edu.vn/wp-content/uploads/2026/04/da58bb4a-9771-4b96-b4f5-98dbafeba1a7.png") !important;

        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
    }

}
/* =====================================
   NEWS MOBILE RESPONSIVE FIX
   Chèn cuối CSS
===================================== */

/* TABLET + MOBILE */
@media screen and (max-width: 991px){

    .news{
        padding:55px 0 !important;
    }

    .news h2{
        font-size:32px !important;
        margin-bottom:30px !important;
        line-height:1.2 !important;
    }

    .news-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        gap:22px !important;
    }

    .news-card{
        overflow:hidden;
        box-shadow:0 10px 25px rgba(0,0,0,.08);
        background:#fff;
    }

    .news-card img{
        width:100% !important;
        height:220px !important;
        object-fit:cover !important;
        display:block;
    }

    .news-content{
        padding:22px !important;
    }

    .news-content h4{
        font-size:20px !important;
        line-height:1.35 !important;
        margin:10px 0 12px !important;
    }

    .news-content p{
        font-size:14px !important;
        line-height:1.6 !important;
    }

}


/* MOBILE NHỎ */
@media screen and (max-width: 576px){

    .news{
        padding:45px 0 !important;
    }

    .news h2{
        font-size:26px !important;
        margin-bottom:24px !important;
    }

    .news-card img{
        height:190px !important;
    }

    .news-content{
        padding:18px !important;
    }

    .news-content h4{
        font-size:18px !important;
    }

}