/* Theme Name: Học Lái Xe Đồng Nai Theme URI: https://hoclaixedongnai.vn/ Author: Trung tâm Đào tạo Lái xe Đồng Nai Author URI: https://hoclaixedongnai.vn/ Description: Theme chuyên nghiệp cho Trung tâm Đào tạo Lái xe Đồng Nai. Giao diện hiện đại, tối ưu SEO, tỷ lệ đậu 95,3%. Version: 1.6.1 Requires at least: 6.0 Tested up to: 6.7 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: http://www.gnu.org/licenses/gpl-2.0.html Text Domain: laixedongnai Tags: education, training, driving-school, vietnamese */ /* ============================================================ RESET & TOKENS */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} :root{ --navy:#0B2B5C;--navy-mid:#1A4A8A;--navy-light:#EBF2FF;--navy-dark:#071C3E; --orange:#E85D24;--orange-mid:#FF6B35;--orange-light:#FFF0EB;--orange-dark:#B84418; --gold:#F0A500;--gold-light:#FFF8E7; --bg:#F7F9FC;--surface:#FFFFFF;--border:#E2E8F2;--border-mid:#C8D5E8; --text-1:#0F1F3D;--text-2:#4A5568;--text-3:#8496B0; --green:#1A9B6C;--green-light:#E6F7F1; --purple:#5B4ECC;--purple-light:#EEEAFF; --amber:#D08000;--amber-light:#FEF3D0; --sp:20px;--r-sm:6px;--r-md:10px;--r-lg:14px;--r-xl:20px; --sh-sm:0 1px 4px rgba(11,43,92,.06),0 1px 2px rgba(11,43,92,.04); --sh-md:0 4px 16px rgba(11,43,92,.10),0 1px 4px rgba(11,43,92,.06); --sh-lg:0 8px 32px rgba(11,43,92,.14),0 2px 8px rgba(11,43,92,.07); } html{scroll-behavior:smooth;-webkit-text-size-adjust:100%} /* Global button/input reset */ button,input,select,textarea{font-family:inherit} button{-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer} input,select,textarea{-webkit-tap-highlight-color:transparent} *{-webkit-box-sizing:border-box;box-sizing:border-box} body{overflow-x:hidden;font-family:'Be Vietnam Pro',-apple-system,sans-serif;background:var(--bg);color:var(--text-1);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;line-height:1.5} /* ============================================================ SKIP LINK */ .skip-link{position:absolute;left:-9999px;top:8px;background:var(--orange);color:#fff;padding:8px 16px;border-radius:var(--r-md);font-weight:700;font-size:13px;z-index:9999;text-decoration:none} .skip-link:focus{left:8px} /* ============================================================ PAGE SYSTEM */ /* Chỉ nhắm vào khối nội dung SPA cũ bên trong #main-content — không được để trần ".page" vì WordPress tự gắn class "page" lên của mọi Trang (Page), nếu khớp trúng body sẽ ẩn luôn toàn bộ site (đã từng gây "trắng trang"). */ #main-content > .page{display:none;min-height:calc(100vh - 108px);animation:fadeIn .18s ease-out} #main-content > .page.active{display:block} body.lxd-standalone-demo #main-content > .page.active{display:block!important;opacity:1!important;visibility:visible!important} @keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}} /* ============================================================ BREADCRUMB */ .breadcrumb{padding:10px var(--sp);background:var(--bg);border-bottom:1px solid var(--border);font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .bc-item{color:var(--text-3);cursor:pointer;transition:color .15s}.bc-item:hover{color:var(--orange)} .bc-item.cur{color:var(--text-1);font-weight:600;cursor:default} .bc-sep{color:var(--border-mid)} /* ============================================================ FLOATING CTA */ .float-cta{display:none;position:fixed;bottom:16px;right:16px;z-index:200;flex-direction:column;gap:8px;align-items:flex-end} .float-btn{border:none;border-radius:50px;padding:12px 18px;font-size:13px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:7px;box-shadow:var(--sh-lg);font-family:inherit;transition:transform .15s;text-decoration:none} .float-btn:hover{transform:scale(1.04)} .fb-call{background:var(--green);color:#fff} .fb-reg{background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff} /* ============================================================ TRUST BADGES */ .trust-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px} .trust-badge{display:flex;align-items:center;gap:7px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.15);border-radius:30px;padding:6px 12px;font-size:11.5px;font-weight:600;color:#B5D4F4} .trust-badge i{font-size:14px} /* ============================================================ SOCIAL BUTTONS */ .foot-social{display:flex;gap:8px;margin-top:14px} .soc-btn{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:16px;cursor:pointer;transition:opacity .15s;border:none} .soc-btn:hover{opacity:.8} .sc-fb{background:#1877F2;color:#fff} .sc-yt{background:#FF0000;color:#fff} .sc-zl{background:#0068FF;color:#fff} .sc-tl{background:#26A5E4;color:#fff} /* ============================================================ TOPBAR */ .topbar{background:var(--navy-dark);display:flex;justify-content:space-between;align-items:center;padding:8px var(--sp);gap:8px;flex-wrap:wrap} .tb-info{display:flex;gap:18px;flex-wrap:wrap} .tb-item{font-size:11.5px;color:#93B6E8;display:flex;align-items:center;gap:5px;font-weight:500} .tb-item i{font-size:13px} .tb-item a{text-decoration:none} .tb-acts{display:flex;gap:7px} .tb-btn{font-size:11px;font-weight:600;padding:5px 12px;border:none;border-radius:var(--r-sm);cursor:pointer;transition:opacity .15s;text-decoration:none;display:inline-flex;align-items:center;gap:4px} .tb-btn:hover{opacity:.85} .tbb-ghost{background:rgba(255,255,255,.08);color:#B0CCEE;border:1px solid rgba(255,255,255,.12)} .tbb-gold{background:var(--gold);color:#3A2200} .tb-search{display:flex;align-items:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:var(--r-sm);overflow:hidden} .tb-search-input{background:transparent;border:none;outline:none;color:#fff;font-size:11.5px;padding:5px 8px;width:120px;font-family:inherit} .tb-search-input::placeholder{color:#93B6E8} .tb-search-btn{background:transparent;border:none;color:#93B6E8;padding:5px 8px;cursor:pointer;display:flex;align-items:center} .tb-search-btn:hover{color:#fff} @media (max-width:640px){.tb-search-input{width:80px}} /* ============================================================ NAV */ .nav-wrap{background:var(--surface);border-bottom:3px solid var(--orange);position:sticky;top:0;z-index:100;box-shadow:var(--sh-sm)} .nav-inner{display:flex;align-items:center;justify-content:space-between;padding:0 var(--sp);gap:10px} .logo-row{display:flex;align-items:center;gap:10px;padding:11px 0;cursor:pointer;text-decoration:none} .lbadge{width:44px;height:44px;background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-dark) 100%);border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;flex-direction:column;flex-shrink:0;box-shadow:0 2px 8px rgba(232,93,36,.35)} .lbadge i{font-size:20px;color:#fff} .lbadge span{font-size:7px;color:#FFCFB8;letter-spacing:.4px;margin-top:1px;font-weight:600} .ltext-a{font-size:14px;font-weight:700;color:var(--navy);line-height:1.2} .ltext-b{font-size:11px;color:var(--orange);font-weight:500} .nav-links{display:flex} .nl{padding:16px 11px;font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;border-bottom:3px solid transparent;margin-bottom:-3px;white-space:nowrap;transition:color .15s;user-select:none;text-decoration:none;display:block} .nl:hover,.nl.on{color:var(--orange);border-bottom-color:var(--orange)} .nav-cta-btn{background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-dark) 100%);color:#fff;border:none;border-radius:var(--r-md);padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;flex-shrink:0;box-shadow:0 2px 10px rgba(232,93,36,.35);transition:transform .15s,box-shadow .15s;font-family:inherit} .nav-cta-btn:hover{transform:translateY(-1px);box-shadow:0 4px 16px rgba(232,93,36,.45)} .ham-btn{display:none;align-items:center;background:none;border:1.5px solid var(--border);border-radius:var(--r-sm);padding:7px 9px;cursor:pointer;color:var(--text-1)} .mob-drawer{display:none;flex-direction:column;background:var(--surface);border-top:1px solid var(--border)} .mob-nl{padding:14px var(--sp);font-size:14px;font-weight:500;color:var(--text-2);border-bottom:1px solid var(--border);cursor:pointer;transition:background .1s;user-select:none;text-decoration:none} .mob-nl:hover{color:var(--orange);background:var(--orange-light)} .mob-nl.on{color:var(--orange)} .mob-cta{margin:12px var(--sp) 16px;background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;border:none;border-radius:var(--r-md);padding:14px;font-size:14px;font-weight:700;cursor:pointer;width:calc(100% - 2*var(--sp));font-family:inherit} /* ============================================================ SHARED */ .sec{padding:32px var(--sp);background:var(--surface)} .sec-alt{padding:32px var(--sp);background:var(--bg)} .sec-dk{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%);padding:36px var(--sp)} .slbl{font-size:11px;font-weight:700;color:var(--orange);letter-spacing:.1em;text-transform:uppercase;margin-bottom:6px;display:flex;align-items:center;gap:6px} .slbl::before{content:'';width:18px;height:2px;background:var(--orange);border-radius:2px;display:inline-block} .slbl-lt{color:var(--gold)}.slbl-lt::before{background:var(--gold)} .slbl-center{justify-content:center} .sh{font-size:20px;font-weight:800;color:var(--text-1);margin-bottom:5px;letter-spacing:-.01em;word-break:break-word} .sh-lt{color:#fff}.sh-center{text-align:center} .ss{font-size:13.5px;color:var(--text-2);margin-bottom:20px;line-height:1.65;word-break:break-word} .ss-lt{color:#7AACDE}.ss-center{text-align:center} .btn-primary{background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-dark) 100%);color:#fff;border:none;border-radius:var(--r-md);padding:12px 20px;font-size:13.5px;font-weight:700;cursor:pointer;display:inline-flex;align-items:center;gap:7px;box-shadow:0 3px 14px rgba(232,93,36,.4);transition:transform .15s,box-shadow .15s;font-family:inherit} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 6px 20px rgba(232,93,36,.5)} .btn-secondary{background:rgba(255,255,255,.08);color:#C0D8F5;border:1.5px solid rgba(255,255,255,.2);border-radius:var(--r-md);padding:12px 16px;font-size:13px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:7px;transition:background .15s;font-family:inherit} .btn-secondary:hover{background:rgba(255,255,255,.14)} .btn-outline{background:transparent;color:var(--navy);border:1.5px solid var(--border-mid);border-radius:var(--r-md);padding:10px 18px;font-size:13px;font-weight:600;cursor:pointer;display:inline-flex;align-items:center;gap:6px;transition:border-color .15s,color .15s;font-family:inherit} .btn-outline:hover{border-color:var(--orange);color:var(--orange)} .card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .15s;will-change:transform} .card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} .pill{font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px;display:inline-flex;align-items:center;gap:4px} .pill-or{background:var(--orange-light);color:var(--orange-dark)} .pill-bl{background:var(--navy-light);color:var(--navy)} .pill-gn{background:var(--green-light);color:var(--green)} .pill-pu{background:var(--purple-light);color:var(--purple)} .pill-am{background:var(--amber-light);color:var(--amber)} .pill-gd{background:var(--gold-light);color:#7A4A00} .tag-row{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:10px} /* ============================================================ HERO (HOME) */ .hero{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 55%,#1E3D7A 100%);padding:44px var(--sp) 36px;position:relative;overflow:hidden} .hero::before{content:'';position:absolute;top:-60px;right:-80px;width:400px;height:400px;background:radial-gradient(circle,rgba(232,93,36,.18) 0%,transparent 70%);pointer-events:none} .hero::after{content:'';position:absolute;bottom:-40px;left:20%;width:300px;height:300px;background:radial-gradient(circle,rgba(26,74,138,.5) 0%,transparent 70%);pointer-events:none} .hero-badge{display:inline-flex;align-items:center;gap:6px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);color:#B5D4F4;border-radius:30px;padding:6px 14px;font-size:11.5px;font-weight:600;margin-bottom:16px;backdrop-filter:blur(4px)} .hero-badge i{font-size:13px;color:var(--gold)} .hero h1{font-size:26px;font-weight:800;color:#fff;line-height:1.35;margin-bottom:12px;letter-spacing:-.01em} .hero h1 em{color:var(--orange-mid);font-style:normal} .hero-desc{font-size:13.5px;color:#8BB5E0;line-height:1.75;margin-bottom:22px} .hero-btns{display:flex;gap:10px;flex-wrap:wrap} /* RIBBON */ .ribbon{background:linear-gradient(90deg,var(--orange-dark) 0%,var(--orange) 50%,var(--orange-mid) 100%);display:grid;grid-template-columns:repeat(4,1fr)} .rib{display:flex;align-items:center;gap:10px;padding:14px 16px;border-right:1px solid rgba(255,255,255,.2)} .rib:last-child{border-right:none} .rib i{font-size:22px;color:rgba(255,255,255,.9);flex-shrink:0} .rib-t{font-size:12.5px;font-weight:700;color:#fff} .rib-s{font-size:10.5px;color:rgba(255,255,255,.7);margin-top:1px} /* STATS */ .stats-bar{display:grid;grid-template-columns:repeat(4,1fr);background:var(--surface);border-bottom:1px solid var(--border);box-shadow:var(--sh-sm)} .st{padding:18px 12px;text-align:center;border-right:1px solid var(--border)} .st:last-child{border-right:none} .st-n{font-size:22px;font-weight:800;color:var(--orange);letter-spacing:-.02em} .st-l{font-size:11.5px;color:var(--text-3);margin-top:3px;font-weight:500} /* BRANCHES */ .branch-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px} .bc{padding:15px;cursor:pointer} .bc.hq{border-top:4px solid var(--orange)!important} .bc.br{border-top:4px solid var(--navy-mid)!important} .bc-n{font-size:13.5px;font-weight:700;color:var(--text-1);margin-bottom:5px} .bc-a{font-size:11.5px;color:var(--text-2);line-height:1.5;margin-bottom:8px} .bc-m{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:6px;font-weight:500} .bc-more{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:7px;color:var(--text-3);border-style:dashed!important;border-color:var(--border-mid)!important;min-height:110px} .bc-more:hover{color:var(--orange)!important;border-color:var(--orange)!important;background:var(--orange-light)!important} /* COURSES */ .cg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .cc-h{padding:15px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:13px} .cc-ico{width:44px;height:44px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .i-b2{background:var(--navy-light);color:var(--navy-mid)} .i-a2{background:var(--green-light);color:var(--green)} .i-c{background:var(--purple-light);color:var(--purple)} .i-d{background:var(--amber-light);color:var(--amber)} .cc-n{font-size:14px;font-weight:700;color:var(--text-1)} .cc-b{padding:13px 15px} .cc-sp{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-bottom:12px} .csp{font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:6px;font-weight:500} .cc-f{display:flex;align-items:center;justify-content:space-between;padding-top:11px;border-top:1px solid var(--border)} .cc-price{font-size:16px;font-weight:800;color:var(--orange);letter-spacing:-.01em} .cc-reg{font-size:12.5px;color:var(--navy-mid);cursor:pointer;display:flex;align-items:center;gap:4px;font-weight:600;transition:color .15s} .cc-reg:hover{color:var(--orange)} /* PROCESS */ .proc{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;position:relative} .proc::before{content:'';position:absolute;top:19px;left:calc(10% + 19px);right:calc(10% + 19px);height:2px;background:linear-gradient(90deg,rgba(232,93,36,.3) 0%,var(--orange) 50%,rgba(232,93,36,.3) 100%);z-index:0} .pg{text-align:center;padding:6px 4px;position:relative;z-index:1} .pg-n{width:40px;height:40px;border-radius:50%;background:linear-gradient(135deg,var(--orange-mid) 0%,var(--orange-dark) 100%);color:#fff;font-size:15px;font-weight:800;display:flex;align-items:center;justify-content:center;margin:0 auto 12px;box-shadow:0 3px 12px rgba(232,93,36,.4)} .pg-t{font-size:13.5px;font-weight:700;color:#fff;margin-bottom:6px} .pg-d{font-size:11.5px;color:#7AACDE;line-height:1.6} #quy-trinh-dich-vu{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%)!important;padding:56px var(--sp)!important;overflow:hidden} #quy-trinh-dich-vu .proc{display:grid!important;margin-top:34px} #quy-trinh-dich-vu .pg{min-height:132px;padding:8px 8px 0} #quy-trinh-dich-vu .pg-t,#quy-trinh-dich-vu .sh-lt{color:#fff!important} #quy-trinh-dich-vu .pg-d{color:#8BB5E0!important} .lxd-process-section{display:block!important;background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%)!important;padding:56px var(--sp)!important} .lxd-process-section .slbl,.lxd-process-section .sh{color:#fff!important} .lxd-process-list{display:grid!important;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px;max-width:1120px;margin:34px auto 0;position:relative;visibility:visible!important;opacity:1!important} .lxd-process-list::before{content:'';position:absolute;left:10%;right:10%;top:24px;height:2px;background:linear-gradient(90deg,rgba(255,255,255,.12),var(--orange),rgba(255,255,255,.12));z-index:0} .lxd-process-card{display:block!important;visibility:visible!important;opacity:1!important;position:relative;z-index:1;min-height:150px;padding:0 10px 14px;text-align:center;color:#fff} .lxd-process-num{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 14px;background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;font-size:17px;font-weight:900;box-shadow:0 8px 20px rgba(232,93,36,.36)} .lxd-process-title{display:block!important;margin:0 0 7px;color:#fff!important;font-size:14px;font-weight:800;line-height:1.35} .lxd-process-desc{display:block!important;color:#9ec5ec!important;font-size:12px;font-weight:500;line-height:1.55} /* REVIEWS */ .rg{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .rc{padding:15px} .rc-h{display:flex;align-items:center;gap:11px;margin-bottom:10px} .av{width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0} .av1{background:#BFDBFE;color:#1E40AF} .av2{background:#A7F3D0;color:#065F46} .av3{background:#DDD6FE;color:#4C1D95} .av4{background:#FDE68A;color:#92400E} .rc-n{font-size:13.5px;font-weight:700;color:var(--text-1)} .rc-s{font-size:11px;color:var(--text-3);font-weight:500;margin-top:1px} .stars{color:var(--gold);font-size:13px;margin-bottom:7px;letter-spacing:1px} .rc-t{font-size:12.5px;color:var(--text-2);line-height:1.65} /* NEWS GRID */ .ng{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px} .nc{padding:15px;cursor:pointer} .nc-t{font-size:13.5px;font-weight:600;color:var(--text-1);line-height:1.45;margin-bottom:8px} .nc-m{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:8px;font-weight:500} /* SEO / KEYWORDS */ .kw-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px;margin-bottom:16px} .kw{background:var(--surface);border:1.5px solid var(--border);border-radius:30px;padding:8px 14px;font-size:11.5px;color:var(--text-2);display:flex;align-items:center;gap:7px;cursor:pointer;font-weight:500;transition:border-color .15s,color .15s;box-shadow:var(--sh-sm)} .kw:hover{border-color:var(--orange);color:var(--orange-dark)} .kw-v{font-size:10px;font-weight:700;background:var(--green-light);color:var(--green);padding:2px 7px;border-radius:10px;margin-left:auto;white-space:nowrap} .seo-box{background:var(--navy-light);border:1.5px solid #C8D8F5;border-radius:var(--r-lg);padding:15px;display:flex;gap:12px;align-items:flex-start} /* CTA BLOCK */ .cta-block{background:linear-gradient(135deg,var(--orange-dark) 0%,var(--orange) 40%,var(--orange-mid) 100%);padding:40px var(--sp);text-align:center;position:relative;overflow:hidden} .cta-block::before{content:'';position:absolute;top:-50px;left:50%;transform:translateX(-50%);width:500px;height:300px;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 70%);pointer-events:none} .cta-block h2{font-size:22px;font-weight:800;color:#fff;margin-bottom:8px;letter-spacing:-.01em} .cta-block p{font-size:13.5px;color:rgba(255,255,255,.8);margin-bottom:22px;line-height:1.6} .cta-row{display:flex;gap:9px;max-width:420px;margin:0 auto 13px;flex-wrap:wrap} .cta-in{flex:1;min-width:170px;padding:12px 16px;border-radius:var(--r-md);border:2px solid transparent;font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s} .cta-in:focus{border-color:var(--navy)} .cta-btn{background:var(--navy-dark);color:#fff;border:none;border-radius:var(--r-md);padding:12px 18px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit;transition:background .15s} .cta-btn:hover{background:#040e1c} .cta-note{font-size:11px;color:rgba(255,255,255,.7);display:flex;align-items:center;justify-content:center;gap:6px;font-weight:500} /* FOOTER */ .foot-main{background:var(--navy);padding:32px var(--sp);display:grid;grid-template-columns:1.6fr 1fr 1fr 1fr;gap:24px} .fb-t{font-size:15px;font-weight:700;color:#fff;margin-bottom:4px} .fb-s{font-size:11.5px;color:var(--gold);margin-bottom:11px;font-weight:600} .fb-d{font-size:12.5px;color:#7AACDE;line-height:1.7;margin-bottom:14px} .certs{display:flex;gap:8px;flex-wrap:wrap} .cert{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-sm);padding:5px 10px;font-size:10.5px;color:#B5D4F4;display:flex;align-items:center;gap:5px;font-weight:600} .fc h4{font-size:11px;font-weight:700;color:rgba(255,255,255,.5);margin-bottom:12px;text-transform:uppercase;letter-spacing:.07em} .fc a{display:block;font-size:12.5px;color:#7AACDE;line-height:2;text-decoration:none;font-weight:500;cursor:pointer;transition:color .15s} .fc a:hover{color:#C8DEFF} .foot-bot{background:#040E1F;padding:12px var(--sp);display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px} .f-copy{font-size:11px;color:#4A6FA5} .f-schema{display:flex;align-items:center;gap:6px;font-size:10px;color:#2D5080} .schm{background:var(--navy-mid);color:#B5D4F4;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:600} /* ============================================================ PAGE: KHOA HOC */ .course-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%);padding:36px var(--sp) 28px;position:relative;overflow:hidden} .course-hero::before{content:'';position:absolute;right:-60px;top:-60px;width:300px;height:300px;background:radial-gradient(circle,rgba(232,93,36,.15) 0%,transparent 70%)} .course-hero-inner{position:relative;z-index:1} /* .cg-full moved to course cards section */ .course-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .cf-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:30px;padding:7px 16px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s;font-family:inherit} .cf-btn.on,.cf-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff} .course-detail{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)} .cd-header{background:linear-gradient(135deg,var(--navy) 0%,var(--navy-mid) 100%);padding:20px;display:flex;align-items:flex-start;gap:14px} .cd-ico{width:52px;height:52px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:26px;flex-shrink:0;background:rgba(255,255,255,.15)} .cd-ico i{color:#fff} .cd-title{font-size:18px;font-weight:800;color:#fff;margin-bottom:4px} .cd-sub{font-size:12px;color:#93B6E8} .cd-body{padding:20px} .cd-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:16px} .cd-item{background:var(--bg);border-radius:var(--r-md);padding:12px;display:flex;align-items:flex-start;gap:10px} .cd-item i{font-size:18px;color:var(--orange);margin-top:1px;flex-shrink:0} .cd-item-t{font-size:12px;font-weight:700;color:var(--text-1);margin-bottom:2px} .cd-item-s{font-size:11.5px;color:var(--text-2)} .cd-price-row{display:flex;align-items:center;justify-content:space-between;padding:14px;background:var(--orange-light);border-radius:var(--r-md)} .cd-price-big{font-size:24px;font-weight:800;color:var(--orange);letter-spacing:-.02em} .cd-price-note{font-size:11px;color:var(--orange-dark);font-weight:500} .cd-reqs{margin-top:16px} .cd-req-t{font-size:12px;font-weight:700;color:var(--text-2);text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px} .cd-req-list{display:flex;flex-direction:column;gap:5px} .cd-req{font-size:12.5px;color:var(--text-2);display:flex;align-items:center;gap:7px} .cd-req i{font-size:14px;color:var(--green);flex-shrink:0} /* ============================================================ PAGE: CO SO */ .branch-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,#0D3470 100%);padding:36px var(--sp) 28px;position:relative;overflow:hidden} .branch-hero::before{content:'';position:absolute;left:-40px;bottom:-60px;width:280px;height:280px;background:radial-gradient(circle,rgba(26,74,138,.6) 0%,transparent 70%)} .bmap{background:var(--navy-light);border:2px solid #C8D8F5;border-radius:var(--r-lg);height:160px;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:8px;color:var(--navy-mid);margin-bottom:20px;font-weight:600;font-size:13px} .branch-list{display:flex;flex-direction:column;gap:10px} .bl-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:start;box-shadow:var(--sh-sm);cursor:pointer;transition:border-color .2s,box-shadow .2s} .bl-item:hover{border-color:var(--orange);box-shadow:var(--sh-md)} .bl-item.hq-item{border-top:4px solid var(--orange)} .bl-num{width:36px;height:36px;background:var(--orange-light);color:var(--orange-dark);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:800;flex-shrink:0;margin-top:2px} .bl-num.hq-num{background:var(--orange);color:#fff} .bl-name{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:4px} .bl-addr{font-size:12px;color:var(--text-2);margin-bottom:6px;display:flex;align-items:flex-start;gap:5px;line-height:1.5} .bl-meta{display:flex;gap:12px;flex-wrap:wrap} .bl-m{font-size:11.5px;color:var(--text-3);display:flex;align-items:center;gap:5px;font-weight:500} .bl-action{display:flex;flex-direction:column;gap:6px;flex-shrink:0} .bl-btn{font-size:11px;font-weight:600;padding:6px 12px;border-radius:var(--r-sm);cursor:pointer;border:none;white-space:nowrap;font-family:inherit;transition:opacity .15s} .bl-btn:hover{opacity:.85} .bl-btn-map{background:var(--navy-light);color:var(--navy-mid)} .bl-btn-call{background:var(--orange);color:#fff} /* ============================================================ PAGE: LICH THI */ .schedule-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%);padding:36px var(--sp) 28px} .schedule-tabs{display:flex;gap:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;margin-bottom:20px;box-shadow:var(--sh-sm)} .s-tab{flex:1;padding:12px 10px;text-align:center;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;border-right:1px solid var(--border);transition:background .15s,color .15s;user-select:none} .s-tab:last-child{border-right:none} .s-tab.on{background:var(--orange);color:#fff} .s-tab:hover:not(.on){background:var(--orange-light);color:var(--orange)} .cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-bottom:16px} .cal-head{text-align:center;font-size:11px;font-weight:700;color:var(--text-3);padding:8px 4px;text-transform:uppercase;letter-spacing:.05em} .cal-day{text-align:center;padding:10px 4px;border-radius:var(--r-sm);font-size:13px;font-weight:500;color:var(--text-2);cursor:pointer;transition:background .15s;position:relative} .cal-day:hover{background:var(--orange-light);color:var(--orange)} .cal-day.has-exam{font-weight:700;color:var(--navy)} .cal-day.has-exam::after{content:'';width:5px;height:5px;background:var(--orange);border-radius:50%;position:absolute;bottom:3px;left:50%;transform:translateX(-50%)} .cal-day.today{background:var(--navy);color:#fff;border-radius:var(--r-sm)} .cal-day.empty{color:var(--border-mid);cursor:default} .cal-day.past{color:var(--border-mid)} .exam-list{display:flex;flex-direction:column;gap:8px} .exam-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px;display:grid;grid-template-columns:auto 1fr auto;gap:12px;align-items:center;box-shadow:var(--sh-sm)} .exam-date{text-align:center;background:var(--orange-light);border-radius:var(--r-md);padding:8px 12px;flex-shrink:0} .exam-d{font-size:20px;font-weight:800;color:var(--orange);line-height:1} .exam-m{font-size:11px;color:var(--orange-dark);font-weight:600;margin-top:2px} .exam-title{font-size:13.5px;font-weight:700;color:var(--text-1);margin-bottom:3px} .exam-meta{font-size:11.5px;color:var(--text-3);display:flex;gap:10px;flex-wrap:wrap;font-weight:500} .exam-status{padding:4px 10px;border-radius:20px;font-size:11px;font-weight:700;white-space:nowrap;flex-shrink:0} .es-open{background:var(--green-light);color:var(--green)} .es-soon{background:var(--gold-light);color:var(--amber)} .es-full{background:var(--border);color:var(--text-3)} .lookup-box{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm)} .lookup-title{font-size:15px;font-weight:700;color:var(--text-1);margin-bottom:4px} .lookup-sub{font-size:12.5px;color:var(--text-2);margin-bottom:16px} .inp-row{display:flex;gap:8px;flex-wrap:wrap} .inp{flex:1;min-width:160px;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s;color:var(--text-1);-webkit-appearance:none;appearance:none;background:var(--surface)} .inp:focus{border-color:var(--orange)} .search-btn{background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;border:none;border-radius:var(--r-md);padding:11px 20px;font-size:13.5px;font-weight:700;cursor:pointer;white-space:nowrap;font-family:inherit} /* ============================================================ PAGE: ON TAP */ .quiz-hero{background:linear-gradient(155deg,#1A0050 0%,#3B1F90 60%,#5B4ECC 100%);padding:36px var(--sp) 28px;position:relative;overflow:hidden} .quiz-hero::before{content:'';position:absolute;right:-40px;top:-40px;width:250px;height:250px;background:radial-gradient(circle,rgba(255,255,255,.08) 0%,transparent 70%)} .quiz-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:20px} .qs-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px;text-align:center;box-shadow:var(--sh-sm)} .qs-n{font-size:24px;font-weight:800;color:var(--purple);letter-spacing:-.02em} .qs-l{font-size:11.5px;color:var(--text-3);margin-top:3px;font-weight:500} .topic-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:20px} .topic-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:15px;cursor:pointer;box-shadow:var(--sh-sm);transition:border-color .2s,box-shadow .2s,transform .15s;display:flex;align-items:center;gap:12px} .topic-card:hover{border-color:var(--purple);box-shadow:var(--sh-md);transform:translateY(-2px)} .topic-ico{width:44px;height:44px;border-radius:var(--r-md);background:var(--purple-light);color:var(--purple);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .topic-n{font-size:13.5px;font-weight:700;color:var(--text-1);margin-bottom:3px} .topic-c{font-size:11.5px;color:var(--text-3);font-weight:500} .topic-prog{height:4px;background:var(--border);border-radius:2px;margin-top:6px;overflow:hidden} .topic-prog-bar{height:100%;background:linear-gradient(90deg,var(--purple),#8B7EE0);border-radius:2px;transition:width .3s} .quiz-box{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md)} .qb-header{background:linear-gradient(135deg,var(--purple),#3B2FA0);padding:16px 20px;display:flex;justify-content:space-between;align-items:center} .qb-hd-t{font-size:14px;font-weight:700;color:#fff} .qb-hd-s{font-size:11.5px;color:rgba(255,255,255,.7)} .qb-progress{height:4px;background:rgba(255,255,255,.2)} .qb-prog-bar{height:100%;background:var(--gold);transition:width .3s} .qb-body{padding:20px} .qb-q{font-size:14px;font-weight:600;color:var(--text-1);line-height:1.55;margin-bottom:16px} .qb-options{display:flex;flex-direction:column;gap:8px;margin-bottom:16px} .qb-opt{padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13px;cursor:pointer;transition:all .15s;font-weight:500;color:var(--text-1)} .qb-opt:hover{border-color:var(--purple);background:var(--purple-light);color:var(--purple)} .qb-opt.correct{border-color:var(--green);background:var(--green-light);color:var(--green)} .qb-opt.wrong{border-color:#E53E3E;background:#FEE2E2;color:#C53030} .qb-foot{display:flex;justify-content:space-between;align-items:center;padding-top:14px;border-top:1px solid var(--border)} .qb-skip{font-size:12.5px;color:var(--text-3);cursor:pointer;font-weight:500} .qb-skip:hover{color:var(--orange)} .btn-purple{background:linear-gradient(135deg,var(--purple),#3B2FA0);color:#fff;border:none;border-radius:var(--r-md);padding:10px 20px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s} .btn-purple:hover{opacity:.85} /* ============================================================ PAGE: LIEN HE */ .contact-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,#0D3470 100%);padding:36px var(--sp) 28px} .contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-bottom:20px} .contact-form{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:20px;box-shadow:var(--sh-sm)} .cf-title{font-size:16px;font-weight:800;color:var(--text-1);margin-bottom:4px} .cf-sub{font-size:12.5px;color:var(--text-2);margin-bottom:18px} .form-group{margin-bottom:14px} .form-label{font-size:12px;font-weight:700;color:var(--text-1);margin-bottom:5px;display:block} .form-select{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s;color:var(--text-1);background:var(--surface);appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238496B0' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center} .form-select:focus,.inp:focus{border-color:var(--orange)} .form-textarea{width:100%;padding:11px 14px;border:1.5px solid var(--border);border-radius:var(--r-md);font-size:13.5px;font-family:inherit;outline:none;transition:border-color .15s;color:var(--text-1);resize:vertical;min-height:90px} .form-textarea:focus{border-color:var(--orange)} .form-submit{width:100%;background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;border:none;border-radius:var(--r-md);padding:13px;font-size:14px;font-weight:700;cursor:pointer;font-family:inherit;transition:opacity .15s;margin-top:4px} .form-submit:hover{opacity:.9} .contact-info{display:flex;flex-direction:column;gap:10px} .ci-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:15px;box-shadow:var(--sh-sm)} .ci-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .ci-ico{width:38px;height:38px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0} .ci-ico-or{background:var(--orange-light);color:var(--orange)} .ci-ico-bl{background:var(--navy-light);color:var(--navy-mid)} .ci-ico-gn{background:var(--green-light);color:var(--green)} .ci-t{font-size:13.5px;font-weight:700;color:var(--text-1)} .ci-s{font-size:11.5px;color:var(--text-3);font-weight:500} .ci-val{font-size:14px;font-weight:800;color:var(--navy);margin-bottom:2px} .ci-note{font-size:11.5px;color:var(--text-2)} .faq-list{display:flex;flex-direction:column;gap:8px} .faq-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)} .faq-q{padding:15px 16px;font-size:13.5px;font-weight:600;color:var(--text-1);cursor:pointer;display:flex;justify-content:space-between;align-items:center;user-select:none;transition:background .15s;border:none;background:none;width:100%;text-align:left;font-family:inherit} .faq-q:hover{background:var(--bg)} .faq-q i{color:var(--text-3);transition:transform .2s;flex-shrink:0} .faq-item.open .faq-q i{transform:rotate(180deg)} .faq-a{font-size:13px;color:var(--text-2);line-height:1.7;padding:0 16px 14px;display:none} .faq-item.open .faq-a{display:block} /* ============================================================ GALLERY — gọn */ .gal-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:8px} .gal-item{border-radius:var(--r-md);overflow:hidden;position:relative;cursor:pointer;background:var(--navy-light)} .gal-item img,.gal-item svg{width:100%;height:100%;display:block;object-fit:cover} .gal-aspect-main{aspect-ratio:16/9;grid-column:1/3} .gal-aspect{aspect-ratio:4/3} .gal-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(7,28,62,.85));padding:10px 11px 8px} .gal-cap-t{font-size:11px;font-weight:700;color:#fff;line-height:1.35} .gal-overlay{position:absolute;inset:0;background:rgba(11,43,92,.5);display:flex;align-items:center;justify-content:center;opacity:0;transition:opacity .2s} .gal-overlay i{font-size:24px;color:#fff} .gal-item:hover .gal-overlay{opacity:1} /* LIGHTBOX */ .lightbox{display:none;position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:500;align-items:center;justify-content:center;padding:16px} .lightbox.open{display:flex} .lb-inner{position:relative;max-width:540px;width:100%;background:var(--surface);border-radius:var(--r-lg);overflow:hidden} .lb-close{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.55);border:none;color:#fff;width:30px;height:30px;border-radius:50%;cursor:pointer;font-size:14px;display:flex;align-items:center;justify-content:center;z-index:1} .lb-info{padding:14px 16px} .lb-title{font-size:14px;font-weight:700;color:var(--text-1);margin-bottom:3px} .lb-desc{font-size:12px;color:var(--text-2);line-height:1.6} /* ============================================================ VIDEO — gọn */ .vid-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px} .vid-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;transition:box-shadow .2s,transform .15s} .vid-card:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} .vid-thumb{position:relative;aspect-ratio:16/9;background:var(--navy-dark);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:6px} .vid-play-btn{width:44px;height:44px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 2px 12px rgba(0,0,0,.3);transition:transform .15s} .vid-play-btn i{font-size:18px;color:var(--orange);margin-left:2px} .vid-card:hover .vid-play-btn{transform:scale(1.08)} .vid-thumb-label{font-size:10px;color:rgba(255,255,255,.55);text-align:center;padding:0 12px} .vid-info{padding:11px 13px;border-top:1px solid var(--border)} .vid-title{font-size:12.5px;font-weight:700;color:var(--text-1);line-height:1.4;margin-bottom:5px} .vid-meta{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:10px} /* ============================================================ CERT — gọn */ .cert-strip{display:flex;flex-direction:column;gap:8px} .cert-row{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:14px;cursor:pointer;transition:border-color .2s,box-shadow .2s} .cert-row:hover{border-color:var(--navy-mid);box-shadow:var(--sh-sm)} .cert-ico{width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .cert-body{flex:1;min-width:0} .cert-name{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:2px} .cert-meta{font-size:11px;color:var(--text-3);display:flex;align-items:center;gap:6px;flex-wrap:wrap} .cert-badge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;white-space:nowrap} .cert-arrow{color:var(--text-3);flex-shrink:0;transition:transform .2s} .cert-row:hover .cert-arrow{transform:translateX(3px);color:var(--navy-mid)} /* ============================================================ PROMO — gọn */ .promo-compact{background:linear-gradient(135deg,var(--navy-dark) 0%,var(--navy) 100%);border-radius:var(--r-xl);padding:18px 20px;position:relative;overflow:hidden} .promo-compact::after{content:'';position:absolute;top:-40px;right:-40px;width:160px;height:160px;background:radial-gradient(circle,rgba(240,165,0,.12) 0%,transparent 70%);pointer-events:none} .promo-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:14px;flex-wrap:wrap} .promo-badge{background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:4px 10px;border-radius:20px;white-space:nowrap;letter-spacing:.02em} .promo-title2{font-size:16px;font-weight:800;color:#fff;margin-bottom:3px;letter-spacing:-.01em} .promo-sub2{font-size:12px;color:rgba(255,255,255,.65);line-height:1.55} .promo-items{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px} .promo-item2{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:10px 10px 8px;text-align:center} .promo-val2{font-size:18px;font-weight:800;color:var(--gold);line-height:1.1;margin-bottom:3px} .promo-lbl2{font-size:10px;color:rgba(255,255,255,.55);font-weight:500;line-height:1.3} .promo-foot{display:flex;align-items:center;justify-content:space-between;gap:10px;padding-top:12px;border-top:1px solid rgba(255,255,255,.1);flex-wrap:wrap} .countdown2{display:flex;gap:5px;align-items:center} .cd2-unit{text-align:center;min-width:40px} .cd2-num{font-size:18px;font-weight:800;color:#fff;line-height:1;font-variant-numeric:tabular-nums;background:rgba(255,255,255,.1);border-radius:5px;padding:4px 6px;display:block} .cd2-lbl{font-size:10px;color:rgba(255,255,255,.4);text-transform:uppercase;margin-top:2px} .cd2-sep{font-size:14px;font-weight:700;color:rgba(255,255,255,.3);margin-bottom:10px} .promo-social{font-size:11.5px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:6px} /* ============================================================ FEATURED COURSES */ .fk-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .fk-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .15s} .fk-card:hover{box-shadow:var(--sh-lg);transform:translateY(-3px)} .fk-special{border-color:var(--orange);border-width:2px} .fk-img{position:relative;aspect-ratio:4/3;display:flex;align-items:flex-end;justify-content:flex-start;padding:10px;background-size:cover;background-position:center} .fk-img-army{background:linear-gradient(160deg,#1A3A1A 0%,#2D5A2D 40%,#4A7A4A 100%)} .fk-img-b1{background:linear-gradient(160deg,#1A2A4A 0%,#1A4A8A 50%,#2563EB 100%)} .fk-img-b2{background:linear-gradient(160deg,#0B2B5C 0%,#1A4A8A 50%,#3B82F6 100%)} .fk-img-c{background:linear-gradient(160deg,#2D1A00 0%,#7A4000 50%,#D08000 100%)} /* SVG car icons inside each img block */ .fk-img::after{content:'';position:absolute;inset:0;background:linear-gradient(to bottom,transparent 30%,rgba(0,0,0,.45) 100%)} .fk-img-icon{position:absolute;right:10px;top:10px;font-size:40px;opacity:.18;z-index:0;color:#fff} .fk-tag{position:relative;z-index:1;display:inline-flex;align-items:center;font-size:10px;font-weight:800;padding:4px 10px;border-radius:20px;letter-spacing:.04em} .fk-tag-hot{background:var(--orange);color:#fff} .fk-tag-new{background:var(--gold);color:#3A2200} .fk-body{padding:16px;display:flex;flex-direction:column;flex:1} .fk-name{font-size:12px;font-weight:700;color:var(--text-3);letter-spacing:.08em;text-transform:uppercase;margin-bottom:6px} .fk-price-row{margin-bottom:3px} .fk-price{font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em;line-height:1.1} .fk-price small{font-size:13px;font-weight:600;color:var(--text-3)} .fk-sub{font-size:11px;color:var(--text-3);font-weight:500;margin-bottom:14px;display:flex;align-items:center;gap:5px} .fk-sub::before{content:'';display:inline-block;width:20px;height:2px;background:var(--orange);border-radius:2px} .fk-list{list-style:none;display:flex;flex-direction:column;gap:7px;margin-bottom:16px;flex:1} .fk-list li{font-size:12.5px;color:var(--text-2);display:flex;align-items:flex-start;gap:7px;line-height:1.45} .fk-list li i{font-size:14px;color:var(--orange);flex-shrink:0;margin-top:1px} .fk-list li b{color:var(--text-1)} .fk-btn-primary{width:100%;background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;border:none;border-radius:var(--r-md);padding:12px;font-size:13.5px;font-weight:700;cursor:pointer;font-family:inherit;margin-bottom:8px;transition:opacity .15s,transform .1s} .fk-btn-primary:hover{opacity:.9;transform:translateY(-1px)} .fk-btn-secondary{width:100%;background:transparent;color:var(--navy);border:2px solid var(--navy);border-radius:var(--r-md);padding:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .15s,color .15s} .fk-btn-secondary:hover{background:var(--navy);color:#fff} /* ============================================================ HỒ SƠ HOME */ .hoso-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px} .hoso-item{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px;display:flex;align-items:center;gap:12px;box-shadow:var(--sh-sm)} .hoso-ico{width:42px;height:42px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0} .hoso-title{font-size:13.5px;font-weight:700;color:var(--text-1);margin-bottom:2px} .hoso-desc{font-size:11.5px;color:var(--text-2)} .hoso-badge{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;white-space:nowrap;margin-left:auto;flex-shrink:0} .hoso-note{background:var(--gold-light);border:1.5px solid #F0C84A;border-radius:var(--r-lg);padding:16px;display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap} /* ============================================================ COURSE DETAIL PAGE */ .cd-page-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%);padding:32px var(--sp) 24px;position:relative;overflow:hidden} .cd-page-hero::before{content:'';position:absolute;right:-60px;top:-60px;width:250px;height:250px;background:radial-gradient(circle,rgba(232,93,36,.15) 0%,transparent 70%);pointer-events:none} .cd-page-inner{position:relative;z-index:1} .cd-page-tag{display:inline-flex;align-items:center;gap:6px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:4px 12px;border-radius:20px;letter-spacing:.04em;margin-bottom:10px} .cd-page-title{font-size:26px;font-weight:800;color:#fff;margin-bottom:6px;letter-spacing:-.01em} .cd-page-price{font-size:32px;font-weight:800;color:var(--gold);letter-spacing:-.02em;margin-bottom:4px} .cd-page-sub{font-size:13px;color:rgba(255,255,255,.55);margin-bottom:16px} .cd-page-kpi{display:flex;gap:10px;flex-wrap:wrap;margin-top:16px} .cd-kpi-item{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-md);padding:10px 14px;display:flex;align-items:center;gap:8px} .cd-kpi-item i{font-size:16px;color:var(--gold)} .cd-kpi-v{font-size:13.5px;font-weight:700;color:#fff} .cd-kpi-l{font-size:10.5px;color:rgba(255,255,255,.5);margin-top:1px} .cd-page-body{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;padding:22px var(--sp);align-items:start} .cd-main{display:flex;flex-direction:column;gap:14px;min-width:0} .cd-video-preview{background:var(--bg);padding:18px var(--sp) 12px;border-bottom:1px solid var(--border)} @media(max-width:620px){.cd-video-preview{padding:14px var(--sp) 0}} .cd-block{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-sm)} .cd-block-head{padding:12px 14px;border-bottom:1px solid var(--border);font-size:14px;font-weight:700;color:var(--text-1);display:flex;align-items:center;gap:8px} .cd-block-head i{font-size:16px;color:var(--orange)} .cd-block-body{padding:14px} .cd-curriculum{display:flex;flex-direction:column;gap:0} .cd-cur-item{display:flex;align-items:flex-start;gap:12px;padding:11px 0;border-bottom:1px solid var(--border)} .cd-cur-item:last-child{border-bottom:none} .cd-cur-num{width:28px;height:28px;background:var(--navy-light);color:var(--navy-mid);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:800;flex-shrink:0} .cd-cur-t{font-size:13px;font-weight:600;color:var(--text-1);margin-bottom:2px} .cd-cur-s{font-size:11.5px;color:var(--text-2)} .cd-checklist{display:flex;flex-direction:column;gap:8px} .cd-check{display:flex;align-items:flex-start;gap:8px;font-size:13px;color:var(--text-2);line-height:1.5} .cd-check i{font-size:15px;color:var(--green);flex-shrink:0;margin-top:1px} .cd-sidebar{display:flex;flex-direction:column;gap:12px} .cd-sticky-card{background:var(--surface);border:2px solid var(--orange);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--sh-md);position:sticky;top:80px} .cd-sticky-head{background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));padding:16px;text-align:center} .cd-sticky-price{font-size:28px;font-weight:800;color:#fff;letter-spacing:-.02em} .cd-sticky-sub{font-size:11px;color:rgba(255,255,255,.7);margin-top:3px} .cd-sticky-body{padding:16px} .cd-sidebar-info{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-sm)} .cd-video-preview .vslide-main{max-width:860px;margin:0 auto;border-radius:var(--r-lg);overflow:hidden} .cd-video-tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;max-width:860px;margin:12px auto 0} .cd-video-tab{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-md);padding:10px;display:flex;align-items:center;gap:10px;box-shadow:var(--sh-sm)} .cd-video-tab.active{border-color:var(--orange)} .cd-video-tab-ico{width:36px;height:36px;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;color:#fff;flex-shrink:0} .cd-video-tab strong{display:block;font-size:12.5px;color:var(--text-1);margin-bottom:2px} .cd-video-tab em{display:block;font-size:11px;color:var(--text-3);font-style:normal} .cd-schedule-list{display:flex;flex-direction:column;gap:10px} .cd-schedule-row{display:flex;justify-content:space-between;gap:12px;align-items:center;background:#E8F7EF;border-radius:var(--r-md);padding:13px 14px} .cd-schedule-row.alt{background:#EAF1FF}.cd-schedule-row.warn{background:#FFF0EA} .cd-schedule-row strong{display:block;font-size:13.5px;color:var(--text-1);margin-bottom:3px} .cd-schedule-row span{display:block;font-size:12px;color:var(--text-2)} .cd-schedule-row>div:last-child{text-align:right;white-space:nowrap} .cd-review-list{display:flex;flex-direction:column;gap:0} .cd-review{display:grid;grid-template-columns:40px 1fr auto;gap:12px;padding:14px 0;border-bottom:1px solid var(--border);align-items:start} .cd-review:last-child{border-bottom:none} .cd-avatar{width:40px;height:40px;border-radius:50%;background:#CFE0FF;color:var(--navy);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:12px} .cd-review strong{display:block;font-size:13.5px;color:var(--text-1)} .cd-review span{display:block;font-size:12px;color:var(--text-3);margin-top:2px} .cd-review p{font-size:13px;color:var(--text-2);line-height:1.6;margin-top:8px} .cd-stars{color:var(--gold);font-size:12px;white-space:nowrap} .cd-final-cta{background:linear-gradient(135deg,var(--orange-dark),var(--orange-mid));border-radius:var(--r-lg);padding:24px;color:#fff} .cd-final-cta h2{font-size:18px;margin-bottom:6px} .cd-final-cta p{font-size:13px;margin-bottom:14px;color:rgba(255,255,255,.82)} .cd-final-cta a{display:flex;justify-content:center;align-items:center;gap:6px;background:var(--navy-dark);color:#fff;text-decoration:none;border-radius:var(--r-md);padding:13px 16px;font-weight:800;font-size:13.5px} .cd-price-lines{display:flex;flex-direction:column;gap:9px;margin-bottom:14px} .cd-price-lines div{display:flex;justify-content:space-between;gap:12px;font-size:13px;color:var(--text-2)} .cd-price-lines strong{color:var(--text-1)} .cd-side-btn{width:100%;justify-content:center;text-decoration:none;margin-top:8px} .cd-hotline{text-align:center;font-size:12px;color:var(--text-3);margin-top:14px}.cd-hotline strong{color:var(--navy)} .cd-other-link{display:block;padding:9px 0;border-bottom:1px solid var(--border);color:var(--text-1);font-size:13px;font-weight:700;text-decoration:none} .cd-other-link:hover{color:var(--orange)} /* ============================================================ BLOG LIST PAGE */ .blog-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%);padding:36px var(--sp) 28px} .blog-filter{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:20px} .bfil-btn{background:var(--surface);border:1.5px solid var(--border);border-radius:30px;padding:7px 16px;font-size:12px;font-weight:600;color:var(--text-2);cursor:pointer;transition:all .15s;font-family:inherit} .bfil-btn.on,.bfil-btn:hover{background:var(--orange);border-color:var(--orange);color:#fff} .blog-list-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:24px} .bl-post{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);overflow:hidden;cursor:pointer;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .15s;display:flex;flex-direction:column} .bl-post:hover{box-shadow:var(--sh-md);transform:translateY(-3px)} .bl-post-img{aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;position:relative} .bl-post-img i{font-size:44px;color:rgba(255,255,255,.2)} .bl-post-body{padding:14px;flex:1;display:flex;flex-direction:column} .bl-post-cat{font-size:10px;font-weight:700;padding:3px 9px;border-radius:10px;display:inline-flex;margin-bottom:8px} .bl-post-title{font-size:14px;font-weight:700;color:var(--text-1);line-height:1.45;margin-bottom:8px;flex:1} .bl-post-excerpt{font-size:12px;color:var(--text-2);line-height:1.65;margin-bottom:10px} .bl-post-foot{display:flex;align-items:center;justify-content:space-between;font-size:11px;color:var(--text-3);border-top:1px solid var(--border);padding-top:10px;margin-top:auto} .bl-post-foot-meta{display:flex;gap:10px;align-items:center} .bl-post-readmore{color:var(--orange);font-weight:600;font-size:12px} /* ============================================================ BLOG DETAIL PAGE */ .bpost-hero{background:linear-gradient(155deg,var(--navy-dark) 0%,var(--navy) 100%);padding:32px var(--sp) 24px} .bpost-cat{display:inline-flex;align-items:center;gap:5px;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:4px 11px;border-radius:20px;margin-bottom:10px} .bpost-title{font-size:24px;font-weight:800;color:#fff;line-height:1.35;margin-bottom:12px;letter-spacing:-.01em} .bpost-meta{display:flex;align-items:center;gap:14px;flex-wrap:wrap} .bpost-meta-item{font-size:12px;color:rgba(255,255,255,.55);display:flex;align-items:center;gap:5px} .bpost-layout{display:grid;grid-template-columns:1fr 260px;gap:20px;padding:24px var(--sp)} .bpost-content{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:24px;box-shadow:var(--sh-sm)} .bpost-content h2{font-size:18px;font-weight:700;color:var(--text-1);margin:20px 0 10px;padding-bottom:8px;border-bottom:2px solid var(--border)} .bpost-content h3{font-size:15px;font-weight:700;color:var(--navy);margin:16px 0 8px} .bpost-content p{font-size:13.5px;color:var(--text-2);line-height:1.8;margin-bottom:14px} .bpost-content ul,.bpost-content ol{padding-left:20px;margin-bottom:14px} .bpost-content li{font-size:13.5px;color:var(--text-2);line-height:1.8;margin-bottom:4px} .bpost-content .callout{background:var(--navy-light);border-left:4px solid var(--navy-mid);border-radius:0 var(--r-md) var(--r-md) 0;padding:14px 16px;margin:16px 0} .bpost-content .callout-warn{background:var(--orange-light);border-left-color:var(--orange)} .bpost-content .callout-tip{background:var(--green-light);border-left-color:var(--green)} .bpost-content .callout p{margin-bottom:0;font-weight:500} .bpost-sidebar{display:flex;flex-direction:column;gap:12px} .bpost-toc{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;box-shadow:var(--sh-sm);position:sticky;top:80px} .bpost-toc-title{font-size:13px;font-weight:700;color:var(--text-1);margin-bottom:10px;display:flex;align-items:center;gap:6px} .bpost-toc a{display:block;font-size:12.5px;color:var(--text-2);padding:5px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:color .15s;text-decoration:none} .bpost-toc a:last-child{border-bottom:none} .bpost-toc a:hover{color:var(--orange)} .bpost-related{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:14px;box-shadow:var(--sh-sm)} .bpost-rel-title{font-size:12px;font-weight:700;color:var(--text-1);margin-bottom:10px;text-transform:uppercase;letter-spacing:.06em} .bpost-rel-item{display:flex;gap:10px;padding:8px 0;border-bottom:1px solid var(--border);cursor:pointer} .bpost-rel-item:last-child{border-bottom:none} .bpost-rel-img{width:52px;height:38px;border-radius:6px;flex-shrink:0;display:flex;align-items:center;justify-content:center} .bpost-rel-t{font-size:12px;font-weight:600;color:var(--text-1);line-height:1.4} .bpost-rel-d{font-size:10.5px;color:var(--text-3);margin-top:2px} .bpost-tags{display:flex;gap:6px;flex-wrap:wrap;margin-top:20px;padding-top:16px;border-top:1px solid var(--border)} .bpost-tag{font-size:11.5px;background:var(--bg);border:1.5px solid var(--border);border-radius:20px;padding:4px 12px;color:var(--text-2);cursor:pointer} .bpost-tag:hover{border-color:var(--orange);color:var(--orange)} /* ============================================================ HERO VIDEO */ .hero-left{display:flex;flex-direction:column} .vsstrip-info{flex:1;min-width:0} .hero-grid{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start;position:relative;z-index:1} .hero-video-col{display:flex;flex-direction:column;gap:10px} .hero-vid-wrap{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--r-lg);overflow:hidden;backdrop-filter:blur(6px)} .hero-vid-thumb{position:relative;aspect-ratio:16/9;cursor:pointer;overflow:hidden} .hero-vid-bg{position:absolute;inset:0;background:linear-gradient(135deg,#0B2B5C 0%,#1A4A8A 60%,#2563EB 100%);transition:all .4s} .hero-vid-overlay{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;background:rgba(0,0,0,.25);transition:background .2s} .hero-vid-thumb:hover .hero-vid-overlay{background:rgba(0,0,0,.35)} .hero-vid-play{width:52px;height:52px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 20px rgba(0,0,0,.35);transition:transform .2s} .hero-vid-thumb:hover .hero-vid-play{transform:scale(1.1)} .hero-vid-play i{font-size:20px;color:var(--orange);margin-left:3px} .hero-vid-label{font-size:11px;color:rgba(255,255,255,.8);font-weight:600;letter-spacing:.04em;text-transform:uppercase} .hero-vid-badge{position:absolute;bottom:8px;right:8px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;font-weight:600;padding:3px 8px;border-radius:4px;display:flex;align-items:center;gap:4px;backdrop-filter:blur(4px)} .hero-vid-info{padding:10px 12px} .hero-vid-title{font-size:12px;font-weight:700;color:#fff;margin-bottom:3px;line-height:1.4} .hero-vid-meta{font-size:10.5px;color:rgba(255,255,255,.5)} .hero-vid-nav{display:flex;gap:7px} .hvn-item{flex:1;display:flex;flex-direction:column;gap:5px;cursor:pointer;opacity:.6;transition:opacity .2s} .hvn-item:hover,.hvn-item.active{opacity:1} .hvn-thumb{aspect-ratio:16/9;border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;border:2px solid transparent;transition:border-color .2s} .hvn-item.active .hvn-thumb,.hvn-item:hover .hvn-thumb{border-color:var(--orange)} .hvn-thumb i{font-size:16px;color:rgba(255,255,255,.5)} .hvn-label{font-size:10.5px;color:rgba(255,255,255,.5);text-align:center;font-weight:600} .hvn-item.active .hvn-label{color:var(--gold)} /* ============================================================ VIDEO SLIDE */ .vslide-wrap{display:grid;grid-template-columns:1fr 220px;gap:12px;align-items:start} .vslide-main{position:relative;border-radius:var(--r-lg);overflow:hidden} .vslide-player{position:relative;aspect-ratio:16/9;overflow:hidden} .vslide-thumb{position:absolute;inset:0;opacity:0;transition:opacity .4s;pointer-events:none} .vslide-thumb.active{opacity:1;pointer-events:auto} .vslide-bg{position:absolute;inset:0} .vslide-play-area{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,.2);transition:background .2s} .vslide-play-area:hover{background:rgba(0,0,0,.35)} .vslide-play-btn{width:64px;height:64px;background:rgba(255,255,255,.92);border-radius:50%;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 24px rgba(0,0,0,.4);transition:transform .15s} .vslide-play-area:hover .vslide-play-btn{transform:scale(1.08)} .vslide-play-btn i{font-size:26px;color:var(--orange);margin-left:4px} .vslide-badge{position:absolute;top:10px;right:10px;background:rgba(0,0,0,.65);color:#fff;font-size:10px;font-weight:600;padding:4px 9px;border-radius:5px;display:flex;align-items:center;gap:4px;backdrop-filter:blur(4px)} .vslide-caption{position:absolute;bottom:0;left:0;right:0;background:linear-gradient(transparent,rgba(7,28,62,.9));padding:28px 16px 14px} .vsc-category{font-size:10px;font-weight:700;color:var(--gold);text-transform:uppercase;letter-spacing:.06em;margin-bottom:4px;display:flex;align-items:center;gap:5px} .vsc-title{font-size:14px;font-weight:700;color:#fff;line-height:1.4;margin-bottom:3px} .vsc-meta{font-size:11px;color:rgba(255,255,255,.6)} .vslide-arrow{position:absolute;top:50%;transform:translateY(-50%);width:36px;height:36px;background:rgba(255,255,255,.85);border:none;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:var(--sh-md);z-index:2;transition:background .15s,transform .15s} .vslide-arrow:hover{background:#fff;transform:translateY(-50%) scale(1.08)} .vslide-arrow i{font-size:18px;color:var(--navy)} .vslide-prev{left:10px} .vslide-next{right:10px} /* Dot indicators */ .vslide-dots{display:flex;gap:5px;justify-content:center;margin-top:8px} .vslide-dot{width:6px;height:6px;border-radius:50%;background:var(--border);cursor:pointer;transition:all .2s} .vslide-dot.active{width:20px;border-radius:3px;background:var(--orange)} /* Strip */ .vslide-strip{display:flex;flex-direction:column;gap:9px} .vsstrip-item{display:flex;gap:10px;align-items:center;padding:9px 10px;border-radius:var(--r-md);cursor:pointer;border:1.5px solid var(--border);background:var(--surface);transition:border-color .3s cubic-bezier(.22,1,.36,1),box-shadow .3s cubic-bezier(.22,1,.36,1),transform .25s cubic-bezier(.22,1,.36,1)} .vsstrip-item:hover{border-color:var(--border-mid);box-shadow:var(--sh-md);transform:translateX(-2px)} .vsstrip-item.active{border-color:var(--orange);box-shadow:0 0 0 3px rgba(232,93,36,.1),var(--sh-sm);background:var(--orange-light)} .vsstrip-thumb{width:52px;height:36px;border-radius:var(--r-sm);flex-shrink:0;display:flex;align-items:center;justify-content:center;transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .vsstrip-item:hover .vsstrip-thumb{transform:scale(1.06)} .vsstrip-thumb i{font-size:16px;color:rgba(255,255,255,.8);transition:color .2s} .vsstrip-t{font-size:12px;font-weight:600;color:var(--text-1);line-height:1.35;margin-bottom:2px;transition:color .2s} .vsstrip-item.active .vsstrip-t{color:var(--orange-dark)} .vsstrip-d{font-size:10.5px;color:var(--text-3);display:flex;align-items:center;gap:4px} /* VIDEO MODAL */ .vid-modal{display:none;position:fixed;inset:0;background:rgba(0,0,0,.9);z-index:600;align-items:center;justify-content:center;padding:16px} .vid-modal.open{display:flex} .vid-modal-inner{background:var(--surface);border-radius:var(--r-xl);overflow:hidden;max-width:540px;width:100%} .vid-modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border)} .vid-modal-title{font-size:14px;font-weight:700;color:var(--text-1)} .vid-modal-close{background:none;border:none;cursor:pointer;font-size:18px;color:var(--text-3);line-height:1} .vid-modal-player{aspect-ratio:16/9;background:var(--navy-dark);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px} .vid-modal-player i{font-size:42px;color:rgba(255,255,255,.2)} .vid-modal-hint{font-size:12px;color:rgba(255,255,255,.35);text-align:center;padding:0 20px} .vid-modal-foot{padding:14px 16px} /* ============================================================ DESKTOP LAYOUT */ /* Limit content width on very wide screens */ .sec,.sec-alt,.sec-dk, .hero,.ribbon,.stats-bar, .cta-block,.foot-main,.foot-bot, .topbar,.nav-inner, .breadcrumb,.contact-hero, .course-hero,.branch-hero, .schedule-hero,.quiz-hero, .float-cta-wrap{ /* contained naturally by padding */ } /* --- 1200px+ max-width center --- */ @media(min-width:1200px){ .sec,.sec-alt,.sec-dk,.hero,.course-hero,.branch-hero,.schedule-hero,.blog-hero,.quiz-hero,.contact-hero,.cd-page-hero,.cd-video-preview,.cd-page-body,.cta-block,.foot-main,.foot-bot,.topbar,.breadcrumb{ padding-left:calc((100% - 1100px)/2 + var(--sp)); padding-right:calc((100% - 1100px)/2 + var(--sp)) } .ribbon,.stats-bar{padding:0 calc((100% - 1100px)/2)} .rib{padding:14px 24px} .nav-inner{max-width:1140px;margin:0 auto} .hero-grid{grid-template-columns:1fr 340px;gap:32px} .kpi-n{font-size:24px} .branch-grid{grid-template-columns:repeat(3,1fr)} .rg,.ng{grid-template-columns:repeat(2,1fr)} } /* --- 961px+ shared desktop --- */ @media(min-width:961px){ .sec,.sec-alt{padding-top:40px;padding-bottom:40px} .sec-dk{padding-top:48px;padding-bottom:48px} .hero{padding-top:52px;padding-bottom:40px} .sh{font-size:22px} .branch-grid{grid-template-columns:repeat(3,1fr)} .fk-grid{grid-template-columns:repeat(4,1fr)} .hoso-grid{grid-template-columns:repeat(2,1fr)} .blog-list-grid{grid-template-columns:repeat(3,1fr)} .cd-page-body{grid-template-columns:1fr 300px} .cd-sticky-card{position:sticky;top:80px} .bpost-layout{grid-template-columns:1fr 260px} .vslide-wrap{grid-template-columns:1fr 220px} .vslide-dots{display:none} } /* --- Tablet 621–960px --- */ @media(min-width:621px) and (max-width:960px){ :root{--sp:16px} .hero h1{font-size:21px} .hero-grid{grid-template-columns:1fr 220px;gap:16px} .hvn-label{display:none} .ribbon{grid-template-columns:repeat(2,1fr)} .branch-grid{grid-template-columns:repeat(2,1fr)} .cg,.cg-full,.fk-grid{grid-template-columns:repeat(2,1fr)} .proc{grid-template-columns:repeat(2,1fr)}.proc::before{display:none} .lxd-process-list{grid-template-columns:repeat(2,minmax(0,1fr))} .lxd-process-list::before{display:none} .rg,.ng{grid-template-columns:1fr} .hoso-grid{grid-template-columns:1fr} .foot-main{grid-template-columns:1fr 1fr;gap:16px} .contact-grid{grid-template-columns:1fr} .quiz-stats{grid-template-columns:repeat(3,1fr)} .topic-grid{grid-template-columns:repeat(2,1fr)} .kw-grid{grid-template-columns:repeat(2,1fr)} .blog-list-grid{grid-template-columns:repeat(2,1fr)} .cd-page-body,.bpost-layout{grid-template-columns:1fr} .cd-sticky-card,.bpost-toc{position:static} .vslide-wrap{grid-template-columns:1fr} .vslide-strip{display:none} .vslide-dots{display:flex} } /* --- Mobile ≤620px --- */ @media(max-width:620px){ :root{--sp:14px} .tb-info{display:none} .tb-acts .tbb-ghost{display:none} .nav-links{display:none} .ham-btn{display:flex} .nav-cta-btn{display:none} .mob-drawer.open{display:flex} .hero{padding:22px var(--sp) 18px} .hero-grid{grid-template-columns:1fr} .hero h1{font-size:20px} .hero-desc{font-size:13px} .hero-video-col{margin-bottom:6px} .hero-vid-nav{gap:6px} .trust-row{gap:6px} .trust-badge{font-size:11px;padding:5px 10px} .ribbon{grid-template-columns:1fr 1fr} .rib{padding:10px 12px;gap:7px} .rib-s{display:none} .stats-bar{grid-template-columns:repeat(2,1fr)} .st:nth-child(2){border-right:none} .st{padding:12px 8px} .st-n{font-size:19px} .branch-grid{grid-template-columns:1fr} .cg,.cg-full{grid-template-columns:1fr} .fk-grid{grid-template-columns:1fr} .fk-img{aspect-ratio:16/5} .bc-more{min-height:70px} .proc{grid-template-columns:1fr 1fr}.proc::before{display:none} .lxd-process-list{grid-template-columns:1fr 1fr} .lxd-process-list::before{display:none} .pg-n{width:34px;height:34px;font-size:13px} .pg-t{font-size:12px}.pg-d{font-size:11px} .rg,.ng{grid-template-columns:1fr} .hoso-grid{grid-template-columns:1fr} .hoso-note{flex-direction:column} .hoso-note .fk-btn-primary{width:100%} .kw-grid{grid-template-columns:1fr 1fr} .grating-strip{flex-direction:column;gap:8px} table{font-size:11px;min-width:480px} .vslide-wrap{grid-template-columns:1fr} .vslide-strip{display:none} .vslide-dots{display:flex} .vslide-play-btn{width:52px;height:52px} .vsc-title{font-size:13px} .blog-list-grid{grid-template-columns:1fr} .bfil-btn{padding:6px 12px;font-size:11.5px} .cd-page-body{grid-template-columns:1fr;padding:14px var(--sp)} .cd-sticky-card{position:static} .cd-sidebar{order:999} .cd-page-title{font-size:18px} .cd-page-price{font-size:22px} .cd-page-kpi{gap:6px;flex-wrap:wrap} .cd-kpi-item{flex:1;min-width:80px;padding:7px 10px} .cd-kpi-v{font-size:12px} .cd-kpi-l{font-size:10px} .cd-two-col{grid-template-columns:1fr} .bpost-layout{grid-template-columns:1fr;padding:14px var(--sp)} .bpost-title{font-size:17px} .bpost-toc{position:static} .bpost-content h2{font-size:15px} .bpost-content p,.bpost-content li{font-size:13px} .s-tab{font-size:11px;padding:10px 5px} .exam-item{grid-template-columns:auto 1fr;gap:8px} .bl-item{grid-template-columns:auto 1fr;gap:8px} .bl-action{grid-column:1/-1;flex-direction:row} .bl-btn{flex:1;text-align:center} .quiz-stats{grid-template-columns:repeat(3,1fr)} .topic-grid{grid-template-columns:1fr} .contact-grid{grid-template-columns:1fr} .cta-row{flex-direction:column} .cta-in{width:100%} .foot-main{grid-template-columns:1fr 1fr;gap:12px} .fb-d{display:none} .foot-bot{flex-direction:column;text-align:center;gap:6px} .float-cta{display:none!important} #stickyBar{display:flex} } /* --- ≤380px --- */ @media(max-width:380px){ .proc,.foot-main{grid-template-columns:1fr} .lxd-process-list{grid-template-columns:1fr} .kw-grid,.ribbon{grid-template-columns:1fr} .hero h1{font-size:18px} } .cd-two-col{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media(max-width:620px){.cd-two-col{grid-template-columns:1fr}} @media(max-width:620px){ .cd-video-tabs{grid-template-columns:1fr} .cd-schedule-row{align-items:flex-start;flex-direction:column} .cd-schedule-row>div:last-child{text-align:left} .cd-review{grid-template-columns:36px 1fr} .cd-stars{grid-column:2} } /* ============================================================ NOTIFICATION BAR */ .notif-bar{background:var(--navy-dark);border-bottom:2px solid var(--orange);padding:0;overflow:hidden} .notif-inner{display:flex;align-items:center;height:38px} .notif-label{background:var(--orange);color:#fff;font-size:11px;font-weight:700;padding:0 12px;height:100%;display:flex;align-items:center;gap:5px;white-space:nowrap;flex-shrink:0;letter-spacing:.03em} .notif-ticker{flex:1;overflow:hidden;position:relative;height:100%;display:flex;align-items:center} .notif-track{display:flex;align-items:center;gap:16px;white-space:nowrap;animation:ticker 35s linear infinite;will-change:transform} .notif-track:hover{animation-play-state:paused} @keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}} .notif-item{font-size:12px;color:#B5D4F4;cursor:pointer;transition:color .15s;flex-shrink:0;padding:0 4px} .notif-item:hover{color:#fff} .notif-item strong{color:var(--gold)} .notif-sep{color:var(--orange);font-size:14px;opacity:.6;flex-shrink:0} .notif-close{background:none;border:none;color:rgba(255,255,255,.4);cursor:pointer;padding:0 12px;height:100%;font-size:14px;flex-shrink:0;transition:color .15s;font-family:inherit} .notif-close:hover{color:rgba(255,255,255,.8)} /* ============================================================ ABOUT SECTION */ .about-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:center} @media(max-width:620px){ .about-grid{grid-template-columns:1fr;gap:20px} .about-grid > div:first-child > div[style*="grid-template-columns:1fr 1fr"]{display:grid;grid-template-columns:1fr 1fr} } /* ============================================================ FLOATING ACTIONS */ .float-actions{position:fixed;right:16px;bottom:80px;z-index:200;display:flex;flex-direction:column;gap:10px;align-items:flex-end;transition:opacity .45s cubic-bezier(.22,1,.36,1)} .fab-btn{width:52px;height:52px;border-radius:50%;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;box-shadow:0 6px 20px rgba(11,43,92,.18),0 2px 6px rgba(11,43,92,.10);transition:transform .35s cubic-bezier(.34,1.56,.64,1),box-shadow .35s ease;text-decoration:none;position:relative;overflow:hidden;animation:fabIn .5s cubic-bezier(.22,1,.36,1) backwards} .fab-zalo{animation-delay:.05s} .fab-call{animation-delay:.12s} .fab-reg{animation-delay:.19s} .fab-btn:hover{transform:scale(1.1) translateY(-3px);box-shadow:0 14px 32px rgba(11,43,92,.28),0 4px 10px rgba(11,43,92,.14)} .fab-btn:active{transform:scale(.94) translateY(0);transition-duration:.12s} .fab-btn:focus-visible{outline:2px solid #fff;outline-offset:3px} .fab-zalo{background:#0068FF;color:#fff} .fab-call{background:var(--green);color:#fff} .fab-reg{background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;overflow:visible} .fab-label{font-size:9px;font-weight:700;color:#fff;letter-spacing:.02em;line-height:1;transition:transform .3s ease} .fab-btn:hover .fab-label{transform:scale(1.06)} /* Vòng sóng lan tỏa nhẹ quanh nút CTA chính để thu hút chú ý mà không gây chói mắt. overflow:visible riêng cho .fab-reg vì vòng sóng cần tràn ra ngoài viền tròn của nút. */ .fab-reg::after{content:'';position:absolute;inset:0;border-radius:50%;background:var(--orange-mid);opacity:.55;animation:fabPulse 2.6s cubic-bezier(.22,1,.36,1) infinite;z-index:-1;pointer-events:none} @media (prefers-reduced-motion:reduce){ .fab-btn{animation:none} .fab-reg::after{animation:none;display:none} } /* Tooltip on hover (desktop) */ .fab-btn::before{content:attr(aria-label);position:absolute;right:calc(100% + 10px);top:50%;transform:translateY(-50%) translateX(4px);background:var(--navy-dark);color:#fff;font-size:11px;font-weight:600;padding:6px 11px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;font-family:inherit;box-shadow:0 4px 14px rgba(0,0,0,.18)} .fab-btn:hover::before{opacity:1;transform:translateY(-50%) translateX(0)} @keyframes fabIn{from{opacity:0;transform:scale(.4) translateY(14px)}to{opacity:1;transform:scale(1) translateY(0)}} @keyframes fabPulse{0%{transform:scale(1);opacity:.45}70%{transform:scale(1.55);opacity:0}100%{transform:scale(1.55);opacity:0}} @media(max-width:620px){ .float-actions{bottom:70px;right:12px} .fab-btn{width:48px;height:48px} .fab-btn::before{display:none} #stickyBar{display:flex} } /* ============================================================ NOTIFICATION BAR DUPLICATE */ /* Make ticker content double for seamless loop */ /* ============================================================ KIẾN THỨC / MẸO THI */ .kt-tabs{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap} .kt-tab{background:var(--surface);border:1.5px solid var(--border);border-radius:30px;padding:9px 18px;font-size:13px;font-weight:600;color:var(--text-2);cursor:pointer;font-family:inherit;transition:all .2s;white-space:nowrap} .kt-tab:hover{border-color:var(--orange);color:var(--orange)} .kt-tab.on{background:var(--navy);border-color:var(--navy);color:#fff} .kt-panel{display:none} .kt-panel.active{display:block;animation:fadeIn .2s ease} .kt-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:14px} .kt-tip{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:16px;display:flex;gap:12px;align-items:flex-start;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .15s} .kt-tip:hover{box-shadow:var(--sh-md);transform:translateY(-2px)} .kt-tip-ico{width:40px;height:40px;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;font-size:20px;flex-shrink:0} .kt-tip-t{font-size:13.5px;font-weight:700;color:var(--text-1);margin-bottom:5px} .kt-tip-d{font-size:12.5px;color:var(--text-2);line-height:1.65} .kt-callout{background:var(--navy-light);border:1.5px solid #C8D8F5;border-radius:var(--r-lg);padding:14px 16px;display:flex;align-items:center;gap:12px;flex-wrap:wrap} .kt-callout div{flex:1;font-size:13px;color:var(--text-2);line-height:1.6;min-width:200px} .kt-stats{display:flex;align-items:center;justify-content:center;gap:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);margin-top:16px;overflow:hidden} .kt-stat{flex:1;text-align:center;padding:14px 8px} .kt-stat-n{display:block;font-size:22px;font-weight:800;color:var(--navy);letter-spacing:-.02em} .kt-stat-l{display:block;font-size:11px;color:var(--text-3);font-weight:500;margin-top:3px} .kt-stat-div{width:1px;background:var(--border);align-self:stretch;flex-shrink:0} @media(max-width:620px){ .kt-grid{grid-template-columns:1fr} .kt-tab{padding:8px 14px;font-size:12px} .kt-stat-n{font-size:18px} .kt-callout{flex-direction:column;align-items:flex-start} .kt-callout .btn-outline{width:100%;text-align:center;justify-content:center} } @media(min-width:961px){ .kt-grid{grid-template-columns:repeat(2,1fr)} } /* ============================================================ COURSE CARDS (khoahoc page) */ .cg-full{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .course-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-sm);transition:box-shadow .2s,transform .15s;display:flex;flex-direction:column} .course-card:hover{box-shadow:var(--sh-lg);transform:translateY(-3px)} .cc-featured{border-color:var(--orange);border-width:2px} .cc-hero{padding:20px;display:flex;align-items:center;gap:16px;min-height:90px} .cc-title{font-size:18px;font-weight:800;color:#fff;letter-spacing:-.01em;margin-bottom:3px} .cc-sub{font-size:11.5px;color:rgba(255,255,255,.6);font-weight:500} .pill-sm{font-size:10px;font-weight:700;padding:3px 9px;border-radius:12px;display:inline-flex} .pill-sm.pill-gn{background:rgba(255,255,255,.2);color:#fff} .pill-sm.pill-bl{background:rgba(255,255,255,.15);color:rgba(255,255,255,.9)} .pill-sm.pill-or{background:var(--orange);color:#fff} .pill-sm.pill-pu{background:rgba(255,255,255,.2);color:#fff} .pill-sm.pill-am{background:rgba(255,255,255,.2);color:#fff} .cc-body{padding:16px;display:flex;flex-direction:column;gap:14px;flex:1} .cc-specs{display:grid;grid-template-columns:1fr 1fr;gap:10px} .cc-spec{display:flex;align-items:flex-start;gap:8px;padding:10px;background:var(--bg);border-radius:var(--r-md)} .cc-spec>i{font-size:16px;color:var(--orange);flex-shrink:0;margin-top:1px} .cc-sk{font-size:11px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.04em;margin-bottom:2px} .cc-sv{font-size:12.5px;font-weight:600;color:var(--text-1)} .cc-price-row{border-radius:var(--r-md);padding:12px 14px;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap} .cc-price{font-size:20px;font-weight:800;color:var(--orange);letter-spacing:-.02em;line-height:1.1} .cc-price-note{font-size:11px;color:var(--text-3);margin-top:2px} .cc-btn-reg{background:linear-gradient(135deg,var(--orange-mid),var(--orange-dark));color:#fff;border:none;border-radius:var(--r-md);padding:9px 14px;font-size:12.5px;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:5px;white-space:nowrap;transition:opacity .15s} .cc-btn-reg:hover{opacity:.9} .cc-btn-det{background:transparent;border:1.5px solid var(--border);border-radius:var(--r-md);padding:9px 14px;font-size:12.5px;font-weight:700;color:var(--text-2);cursor:pointer;white-space:nowrap;transition:border-color .15s,color .15s} .cc-btn-det:hover{border-color:var(--navy);color:var(--navy)} .cc-conditions{border-top:1px solid var(--border);padding-top:12px} .cc-cond-title{font-size:10px;font-weight:700;color:var(--text-3);text-transform:uppercase;letter-spacing:.08em;margin-bottom:8px} .cc-cond{display:flex;align-items:center;gap:7px;font-size:12.5px;color:var(--text-2);margin-bottom:5px} .cc-cond i{font-size:13px;color:var(--green);flex-shrink:0} @media(max-width:620px){ .cg-full{grid-template-columns:1fr} .cc-specs{grid-template-columns:1fr 1fr} .cc-title{font-size:16px} .cc-price{font-size:18px} .cc-price-row{flex-direction:column;align-items:flex-start} .cc-price-row > div:last-child{width:100%;display:flex;gap:8px} .cc-btn-reg,.cc-btn-det{flex:1;justify-content:center} } /* ============================================================ IMG READY (thay gradient bằng img thật) */ .fk-img img,.gal-item img,.bl-post-img img{ width:100%;height:100%;object-fit:cover;display:block; transition:transform .35s ease } .fk-card:hover .fk-img img,.bl-post:hover .bl-post-img img{transform:scale(1.04)} .fk-img,.gal-item,.bl-post-img,.vslide-bg{background-attachment:local} /* ============================================================ REDUCED MOTION */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important } #main-content > .page{animation:none} .fk-card:hover,.card:hover,.bl-post:hover,.cert-row:hover{transform:none} } /* ============================================================ PRINT */ @media print{ .nav-wrap,.topbar,.float-cta,#stickyBar,.ribbon,.cta-block{display:none!important} body{font-size:12pt;color:#000} #main-content > .page{display:block!important} a[href]::after{content:" (" attr(href) ")"} } /* ============================================================ ACTIVE STATES (mobile tap) */ .btn-primary:active{transform:scale(.97);opacity:.92} .btn-secondary:active{background:rgba(255,255,255,.2)} .fk-btn-primary:active{transform:scale(.97);opacity:.9} .fk-btn-secondary:active{background:var(--navy);color:#fff} .btn-outline:active{background:var(--orange-light)} .nav-cta-btn:active{transform:scale(.97)} .card:active{transform:translateY(0);box-shadow:var(--sh-sm)} .bl-post:active,.fk-card:active{transform:translateY(0)} .mob-nl:active{background:var(--orange-light);color:var(--orange)} .vsstrip-item:active{border-color:var(--orange)} .hvn-item:active{opacity:1} /* ============================================================ FOCUS VISIBLE */ :focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:3px} /* Minimum touch target size */ .tb-btn,.bl-btn,.bl-btn-map,.bl-btn-call{min-height:36px} .soc-btn{min-width:36px;min-height:36px} .fak-item,.hvn-item{min-height:44px} button:focus-visible,a:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:2px}