/* ============================================================
   lamketoan.vn — Demo "Học Viện Cao Cấp" (v2)
   Arial · fully responsive · navy + coral + gold · 0% green
   Shared stylesheet for trang-chu.html & danh-muc.html
   ============================================================ */

:root{
  /* Navy identity */
  --primary:#16224C; --primary-dark:#0E1836; --primary-soft:#EAECF5;
  --navy-g1:#1B2A5C; --navy-g2:#0F1A3C;

  /* Coral — split by role to satisfy contrast (AA) */
  --accent:#FF6A3D;          /* decorative only: gradients, hover bars, rings */
  --accent-cta:#CB4A24;      /* button fill (white text 4.6:1) */
  --accent-cta-dark:#A83C15; /* CTA hover/active */
  --accent-ink:#B0401A;      /* coral TEXT on light (4.9:1 on white) */
  --accent-soft:#FFE9E1;     /* soft coral background */

  /* Gold — decorative + on-navy only */
  --gold:#F5B301;

  /* Neutrals */
  --bg:#FBF8F3; --surface:#fff; --surface-alt:#F4EFE7;
  --ink:#141B2E; --ink-soft:#3A4356; --muted:#5C647A;
  --border:rgba(22,34,76,.12); --hairline:rgba(22,34,76,.06);

  /* Trust mark */
  --verify-blue:#1A73E8; --verify-bg:#E8F0FE;

  /* Type */
  --sans:Arial,"Helvetica Neue",Helvetica,sans-serif;

  /* Space */
  --gutter:clamp(16px,4vw,28px);
  --sec-y:clamp(52px,5.5vw,74px);

  /* Radius */
  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:20px; --r-pill:999px;

  /* Shadow — layered navy-tint */
  --shadow-xs:0 1px 2px rgba(22,34,76,.05);
  --shadow-sm:0 1px 2px rgba(22,34,76,.05),0 4px 10px -3px rgba(22,34,76,.07);
  --shadow-md:0 2px 4px rgba(22,34,76,.04),0 12px 26px -8px rgba(22,34,76,.10);
  --shadow-lg:0 6px 14px rgba(22,34,76,.06),0 24px 44px -14px rgba(22,34,76,.15);
  --shadow-hover:0 10px 20px -6px rgba(22,34,76,.10),0 28px 52px -18px rgba(22,34,76,.19);
  --glow-coral:0 8px 20px -4px rgba(203,74,36,.42);

  --container:1240px;
  --ease:cubic-bezier(.2,.6,.2,1);
}

/* GLOBAL-SAFE (không đụng nội dung Flatsome) */
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
img,svg{max-width:100%}
/* Chrome mới (header/footer/mobar) hiển thị trên MỌI trang → reset + font riêng, không cần .lkt */
.lkt-header,.lkt-header *,.lkt-footer,.lkt-footer *,.mobar,.mobar *{box-sizing:border-box;margin:0;padding:0}
.lkt-header,.lkt-footer,.mobar{font-family:var(--sans)}
/* Body design system: CHỈ trang redesign (body.lkt) — trang Flatsome KHÔNG bị ảnh hưởng */
.lkt *{box-sizing:border-box;margin:0;padding:0}
.lkt{overflow-x:hidden;font-family:var(--sans);color:var(--ink);background:var(--bg);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.lkt a{color:inherit;text-decoration:none}
.lkt h1,.lkt h2,.lkt h3,.lkt h4{font-weight:700}

.wrap{max-width:var(--container);width:100%;margin:0 auto;padding:0 var(--gutter)}
.tnum{font-variant-numeric:tabular-nums;letter-spacing:0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

.icn{width:20px;height:20px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---- eyebrow / section heads ---- */
.eyebrow{font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-ink);display:inline-block}
.sec{padding:var(--sec-y) 0;border-top:1px solid var(--hairline)}
.sec-hd{margin-bottom:clamp(28px,3vw,38px)}
.sec-hd.center{text-align:center;max-width:680px;margin-left:auto;margin-right:auto}
.sec-hd h2{font-size:clamp(24px,3.4vw,34px);letter-spacing:-.02em;line-height:1.18;margin-top:8px;color:var(--ink)}
.sec-hd p{color:var(--muted);margin-top:10px;font-size:16px;line-height:1.55}
.sec-hd.row{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap}
.more{font-weight:700;font-size:14px;color:var(--accent-ink);display:inline-flex;align-items:center;gap:6px}
.more:hover{text-decoration:underline;text-underline-offset:2px}

/* ---- buttons ---- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:700 14px/1 var(--sans);border-radius:var(--r-sm);padding:13px 22px;min-height:46px;border:1.5px solid transparent;cursor:pointer;text-align:center;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background-color .18s,border-color .18s}
.btn-cta{background:var(--accent-cta);color:#fff}
.btn-cta:hover{background:var(--accent-cta-dark);transform:translateY(-2px);box-shadow:var(--glow-coral)}
.btn-ghost{background:transparent;border-color:var(--primary);color:var(--primary)}
.btn-ghost:hover{background:var(--primary-soft)}
.btn-ghost-light{background:transparent;border-color:rgba(255,255,255,.5);color:#fff}
.btn-ghost-light:hover{background:rgba(255,255,255,.12)}
.btn-gold{background:var(--gold);color:var(--primary-dark)}
.btn-gold:hover{background:#ffc21f;transform:translateY(-2px)}
.textlink{color:var(--primary);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.textlink:hover{text-decoration:underline;text-underline-offset:3px;color:var(--accent-ink)}

/* ---- focus system ---- */
.lkt a:focus-visible,.lkt button:focus-visible,.lkt label:focus-visible,.lkt input:focus-visible,.lkt select:focus-visible,.lkt [tabindex]:focus-visible,.lkt-header a:focus-visible,.lkt-header button:focus-visible,.lkt-header label:focus-visible,.lkt-footer a:focus-visible{outline:3px solid var(--primary);outline-offset:2px;border-radius:4px}
.utility a:focus-visible,.lkt-footer a:focus-visible,.lkt .curri a:focus-visible,.lkt .lead :focus-visible,.lkt .cat-header a:focus-visible,.lkt .stats :focus-visible{outline-color:var(--gold)}
.lkt input:focus-visible,.lkt select:focus-visible{outline:none;border-color:var(--accent-cta);box-shadow:0 0 0 3px var(--accent-soft)}

/* ---- demo pill ---- */
.demo-pill{position:fixed;right:14px;bottom:14px;z-index:80;background:var(--primary);color:#fff;font-size:12px;font-weight:700;letter-spacing:.04em;padding:8px 14px;border-radius:var(--r-pill);box-shadow:var(--shadow-lg);display:inline-flex;align-items:center;gap:7px}
.demo-pill .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);flex:none}

/* ===================== UTILITY BAR ===================== */
.utility{background:var(--primary);color:#cfd6ef;font-size:13.5px}
.utility .wrap{display:flex;justify-content:space-between;align-items:center;min-height:40px;gap:16px}
.utility .l,.utility .r{display:flex;align-items:center;gap:20px}
.utility a{opacity:.92;display:flex;align-items:center;gap:6px}
.utility a:hover{opacity:1;color:#fff}
.utility .hot{color:#fff;font-weight:700}
.utility .icn{width:15px;height:15px;stroke-width:2.2}
.utility .star{color:var(--gold);font-weight:700}

/* ===================== HEADER ===================== */
.lkt-header{background:#fff;border-bottom:1px solid var(--border);box-shadow:0 2px 12px rgba(22,34,76,.06);position:sticky;top:0;z-index:50}
.hd{display:flex;align-items:center;gap:22px;height:74px}
.logo{display:flex;align-items:center;gap:11px;flex:none}
.logo .mk{width:44px;height:44px;border-radius:11px;background:var(--primary);display:flex;align-items:center;justify-content:center;flex:none}
.logo .mk b{color:var(--gold);font-size:22px}
.logo .tt{line-height:1.15}
.logo .tt .a{font-weight:700;font-size:19px;color:var(--primary);letter-spacing:-.01em;display:block}
.logo .tt .b{font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
nav.main{display:flex;margin-left:6px}
.nav-list{display:flex;gap:22px;list-style:none;align-items:stretch}
.ni{position:relative;display:flex;align-items:center;flex-wrap:wrap}
.nl{font-weight:400;font-size:15px;color:var(--ink);display:flex;align-items:center;gap:5px;white-space:nowrap;padding:26px 0}
.nl .nlchev{width:12px;height:12px;stroke-width:2.6;color:var(--muted);transition:transform .2s}
.nl:hover{color:var(--accent-ink);font-weight:700}
.ni:hover .nl .nlchev,.ni:focus-within .nl .nlchev{transform:rotate(180deg);color:var(--accent-ink)}
.navtog,.mtog{display:none!important}
.mchev{display:none}
/* mega dropdown */
.mega{position:absolute;top:100%;left:0;z-index:60;background:#fff;border:1px solid var(--border);border-top:3px solid var(--accent);border-radius:14px;box-shadow:var(--shadow-lg);padding:22px 24px;min-width:620px;opacity:0;visibility:hidden;transform:translateY(6px);transition:opacity .16s var(--ease),transform .16s var(--ease)}
.mega.wide{min-width:800px}
.ni:hover .mega,.ni:focus-within .mega{opacity:1;visibility:visible;transform:translateY(0)}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:0}
.mega-col{padding:0 22px;border-left:1px solid var(--hairline)}
.mega-col:first-child{border-left:0;padding-left:0}
.mega-col h4{font-size:11px;letter-spacing:.09em;text-transform:uppercase;color:var(--primary);margin:0 0 9px;padding-bottom:8px;border-bottom:2px solid var(--accent-soft)}
.mega-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
.mega-col li{margin:0}
.mega-col li a{display:block;font-size:13.5px;color:var(--ink-soft);padding:7px 10px;margin:0 -10px;border-radius:8px;line-height:1.3;transition:background-color .14s,color .14s,padding-left .14s}
.mega-col li a:hover{background:var(--surface-alt);color:var(--accent-ink);padding-left:15px}
.mega-more{color:var(--accent-ink);font-weight:700;font-size:12px;letter-spacing:.02em;margin-top:11px;display:inline-block}
.mega-more:hover{text-decoration:underline;text-underline-offset:2px}
.mega-promo{background:linear-gradient(150deg,var(--navy-g1),var(--primary-dark));color:#fff;border-radius:12px;padding:20px;display:flex;flex-direction:column;justify-content:center;gap:8px;margin-left:10px}
.mega-promo b{font-size:15px}.mega-promo span{color:#c3cbe6;font-size:12.5px;line-height:1.45}
.mega-promo .btn{margin-top:6px}
.hd-right{margin-left:auto;display:flex;align-items:center;gap:12px;flex:none}
.searchpill{display:flex;align-items:center;gap:8px;border:1.5px solid var(--border);border-radius:var(--r-pill);padding:9px 16px;color:var(--muted);font-size:14px;background:var(--surface-alt);cursor:pointer;font-family:inherit}
.searchpill:hover{border-color:var(--primary)}
.searchpill .icn{width:17px;height:17px}
.burger{display:none;width:46px;height:46px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:#fff;align-items:center;justify-content:center;cursor:pointer;color:var(--primary);flex:none}
.burger .icn{width:24px;height:24px;stroke-width:2.2}
.navtog:checked ~ header .burger{background:var(--primary);color:#fff;border-color:var(--primary)}

/* ===================== HERO ===================== */
.hero{background:var(--bg);overflow:visible;position:relative;border-top:0}
.hero .wrap{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center;padding:clamp(40px,5vw,62px) var(--gutter)}
.hero h1{font-size:clamp(30px,6vw,52px);letter-spacing:-.025em;line-height:1.08;color:var(--ink);margin:16px 0 18px}
.hero h1 .u{color:var(--accent-ink)}
.hero .sub{font-size:clamp(16px,2.2vw,18px);color:var(--ink-soft);max-width:60ch;line-height:1.55;margin-bottom:24px}
.hero-search{display:flex;background:#fff;border:2px solid var(--primary);border-radius:var(--r-md);overflow:hidden;max-width:520px;box-shadow:var(--shadow-md);margin-bottom:22px}
.hero-search input{flex:1;border:0;padding:15px 18px;font-family:inherit;font-size:16px;outline:none;min-width:0;color:var(--ink)}
.hero-search button{border:0;background:var(--accent-cta);color:#fff;padding:0 22px;font:700 14px var(--sans);display:flex;align-items:center;gap:8px;cursor:pointer;transition:background-color .18s}
.hero-search button:hover{background:var(--accent-cta-dark)}
.hero-search:focus-within{box-shadow:var(--shadow-lg),0 0 0 3px var(--accent-soft)}
.hero-cta{display:flex;gap:16px;align-items:center;margin-bottom:24px;flex-wrap:wrap}
.hero-trust{display:flex;align-items:center;gap:16px;flex-wrap:wrap;color:var(--muted);font-size:14px;font-weight:400}
.hero-trust b{color:var(--ink);font-weight:700}
.hero-trust .g{display:flex;align-items:center;gap:7px}
.hero-trust .star{color:var(--gold)}
.gicon{width:16px;height:16px;vertical-align:-3px}
.verify{background:var(--verify-bg);color:var(--verify-blue);font-weight:700;padding:4px 11px;border-radius:var(--r-pill);font-size:12.5px;display:inline-flex;align-items:center;gap:5px}

/* hero media (photo + floating cards) */
.hero-media{position:relative;align-self:center}
.hero-media > img{width:100%;aspect-ratio:5/4;object-fit:cover;border-radius:var(--r-lg);display:block;box-shadow:var(--shadow-lg)}
.hero-media:after{content:"";position:absolute;inset:0;border-radius:var(--r-lg);box-shadow:inset 0 0 0 1px rgba(22,34,76,.07);pointer-events:none}
.hfloat{position:absolute;background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);padding:13px 16px;z-index:2}
.hfloat.rate{top:18px;left:-16px;display:flex;align-items:center;gap:11px}
.hfloat.rate .n{font-weight:700;font-size:24px;color:var(--primary);line-height:1;font-variant-numeric:tabular-nums}
.hfloat.rate .st{color:var(--gold);font-size:13px;line-height:1.2}
.hfloat.rate .lb{font-size:12px;color:var(--muted);line-height:1.3}
.hfloat.course{bottom:16px;right:-14px;max-width:252px;padding:14px 16px}
.hfloat.course .k{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.hfloat.course .k .ind{background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:10px;letter-spacing:.05em;text-transform:uppercase;padding:3px 8px;border-radius:var(--r-pill)}
.hfloat.course .k .slot{color:var(--accent-ink);font-weight:700;font-size:11.5px}
.hfloat.course .t{font-weight:700;font-size:14px;color:var(--ink);line-height:1.3;margin-bottom:9px}
.hfloat.course .r{display:flex;align-items:center;justify-content:space-between}
.hfloat.course .p{font-weight:700;color:var(--primary);font-size:16px;font-variant-numeric:tabular-nums}
.hfloat.course .p .cur{font-size:.7em}
.hfloat.course .go{width:36px;height:36px;border-radius:50%;background:var(--accent-cta);color:#fff;display:flex;align-items:center;justify-content:center;flex:none}

/* ===================== COURSE CARD ===================== */
.ccard{background:#fff;border:1px solid rgba(22,34,76,.08);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-md);position:relative;transition:transform .22s var(--ease),box-shadow .22s var(--ease);display:flex;flex-direction:column}
.ccard:hover{transform:translateY(-4px);box-shadow:var(--shadow-hover)}
.ccard::after{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--accent),var(--gold));transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease);z-index:3}
.ccard:hover::after{transform:scaleX(1)}
.ccard .thumb{aspect-ratio:16/9;position:relative;display:block;overflow:hidden;background:var(--primary)}
.ccard .thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.ccard:hover .thumb img{transform:scale(1.06)}
.ccard .thumb::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(to top,rgba(14,24,54,.66),rgba(14,24,54,.10) 42%,rgba(14,24,54,0))}
.ccard .lvl{position:absolute;left:12px;bottom:12px;z-index:2;background:rgba(255,255,255,.95);color:var(--primary);font-weight:700;font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-xs)}
.cbadge{position:absolute;top:12px;left:12px;font-weight:700;font-size:11px;letter-spacing:.04em;padding:5px 11px;border-radius:var(--r-pill);z-index:2}
.cbadge.sell{background:var(--accent-cta);color:#fff}
.cbadge.soon{background:var(--gold);color:var(--primary-dark)}
.cbadge.few{background:var(--accent-soft);color:var(--accent-ink)}
.ccard .b{padding:18px 20px;display:flex;flex-direction:column;gap:10px;flex:1}
.ctag{display:flex;gap:8px;align-items:center;justify-content:space-between}
.ctag .ind{background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;padding:4px 10px;border-radius:var(--r-pill)}
.crate{display:flex;align-items:center;gap:4px;font-size:13px;white-space:nowrap}
.crate b{color:var(--ink);font-weight:700}
.crate .star{color:var(--gold)}
.crate span{color:var(--muted)}
.ccard h3{font-size:16px;font-weight:700;letter-spacing:-.005em;line-height:1.35;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ccard h3 a:hover{color:var(--accent-ink)}
.cmeta{color:var(--muted);font-size:13px;display:flex;gap:7px;flex-wrap:wrap;align-items:center}
.cmeta i{width:3px;height:3px;border-radius:50%;background:var(--muted);display:inline-block}
.cprice-row{display:flex;align-items:baseline;gap:9px;flex-wrap:wrap}
.cprice{font-weight:700;font-size:22px;letter-spacing:-.01em;color:var(--primary);font-variant-numeric:tabular-nums}
.cprice .cur{font-size:.62em;font-weight:700;vertical-align:.06em;margin-left:1px}
.cprice-row s{color:var(--muted);font-weight:400;font-size:14px;font-variant-numeric:tabular-nums}
.save{background:var(--accent-soft);color:var(--accent-ink);font-weight:700;font-size:12px;padding:3px 9px;border-radius:var(--r-pill)}
.cfoot{margin-top:auto;padding-top:14px;border-top:1px solid var(--border);display:flex;gap:10px}
.cfoot .btn{padding:11px 12px;font-size:13px;min-height:44px}
.cfoot .btn-ghost{flex:1}
.cfoot .btn-cta{flex:1.5}

/* thumb gradients per industry */
.t-media{background:linear-gradient(135deg,#3a2c6b,#16224C)}
.t-ins{background:linear-gradient(135deg,#1b3a6b,#16224C)}
.t-fire{background:linear-gradient(135deg,#8a2c1e,#c2411f)}
.t-ship{background:linear-gradient(135deg,#1b5a6b,#16224C)}
.t-home{background:linear-gradient(135deg,#2c6b4a,#16224C)}
.t-student{background:linear-gradient(135deg,#c2411f,#8a2c1e)}
.t-farm{background:linear-gradient(135deg,#4a6b2c,#16224C)}

/* ===================== STAT STRIP ===================== */
.stats{background:linear-gradient(160deg,var(--navy-g1),var(--primary) 55%,var(--navy-g2));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),inset 0 -1px 0 rgba(0,0,0,.18)}
.stats .wrap{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;padding:clamp(32px,4vw,42px) var(--gutter)}
.stat{text-align:center;position:relative;padding:4px 8px}
.stat:not(:last-child){border-right:1px solid rgba(255,255,255,.09)}
.stat b{font-weight:700;font-size:clamp(30px,4.4vw,44px);letter-spacing:-.025em;color:#fff;display:block;font-variant-numeric:tabular-nums;line-height:1}
.stat .u{display:inline-block;width:34px;height:4px;background:var(--gold);border-radius:2px;margin:12px 0 9px}
.stat span{color:#aeb8da;font-size:14px;font-weight:400}

/* ===================== CATALOG ===================== */
.catalog{background:var(--bg)}
.chips{display:flex;gap:10px;overflow-x:auto;padding-bottom:6px;margin-bottom:6px;scrollbar-width:none}
.chips::-webkit-scrollbar{display:none}
.chip{font-weight:700;font-size:13px;color:var(--ink);background:#fff;border:1.5px solid var(--border);padding:9px 16px;border-radius:var(--r-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:8px;cursor:pointer;font-family:inherit;min-height:40px;scroll-snap-align:start}
.chip:hover{border-color:var(--primary)}
.chip.on{background:var(--primary);border-color:var(--primary);color:#fff}
.chip .n{font-size:11px;font-weight:400;opacity:.75}
.chip.on .n{opacity:.9}
.sorttabs{display:flex;gap:22px;margin:18px 0 26px;border-bottom:1px solid var(--border);overflow-x:auto;scrollbar-width:none}
.sorttabs::-webkit-scrollbar{display:none}
.sorttabs a{font-weight:700;font-size:14px;color:var(--muted);padding:0 0 12px;position:relative;white-space:nowrap;cursor:pointer}
.sorttabs a.on{color:var(--primary)}
.sorttabs a.on:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--accent);border-radius:3px}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* ===================== AUDIENCE LANES ===================== */
.lanes{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.lane{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:28px 24px;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s;border-top:3px solid transparent;box-shadow:var(--shadow-xs)}
.lane:hover{transform:translateY(-4px);box-shadow:var(--shadow-md);border-top-color:var(--accent)}
.lane .ic{width:56px;height:56px;border-radius:14px;background:var(--primary-soft);color:var(--primary);display:flex;align-items:center;justify-content:center;margin-bottom:16px}
.lane .ic .icn{width:28px;height:28px}
.lane h3{font-size:18px;letter-spacing:-.01em;margin-bottom:8px}
.lane p{color:var(--muted);font-size:14.5px;margin-bottom:16px;line-height:1.5}
.lane .go{color:var(--accent-ink);font-weight:700;font-size:14px;display:inline-flex;align-items:center;gap:6px}
.lane:hover .go{text-decoration:underline;text-underline-offset:2px}

/* ===================== PRICING ===================== */
.pricing{background:var(--surface-alt)}
.ptiers{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;align-items:stretch}
.ptier{background:#fff;border:1px solid var(--border);border-radius:var(--r-lg);padding:32px 28px;display:flex;flex-direction:column;position:relative;box-shadow:var(--shadow-sm)}
.ptier.pop{border-top:3px solid var(--gold);box-shadow:var(--shadow-lg);transform:scale(1.03)}
.ptier .ribbon{position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--accent-cta);color:#fff;font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 16px;border-radius:var(--r-pill);white-space:nowrap;display:inline-flex;align-items:center;gap:6px}
.ptier .name{font-weight:700;font-size:12.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.ptier .price{font-weight:700;font-size:clamp(30px,3.4vw,38px);letter-spacing:-.02em;color:var(--primary);font-variant-numeric:tabular-nums;margin:8px 0 2px}
.ptier .price .cur{font-size:.5em;font-weight:700;vertical-align:.1em}
.ptier.pop .price{font-size:clamp(34px,3.8vw,42px)}
.ptier .per{color:var(--muted);font-size:13px;margin-bottom:18px}
.ptier ul{list-style:none;display:flex;flex-direction:column;gap:11px;margin-bottom:22px;flex:1}
.ptier li{display:flex;align-items:flex-start;gap:10px;font-size:14.5px;color:var(--ink-soft);line-height:1.4}
.ptier li .icn{width:18px;height:18px;color:var(--primary);stroke-width:2.6;margin-top:1px}
.ptier .btn{width:100%}

/* ===================== TEACHERS ===================== */
.trail{display:flex;gap:20px;overflow-x:auto;padding-bottom:8px;scrollbar-width:none;scroll-snap-type:x proximity}
.trail::-webkit-scrollbar{display:none}
.tcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px;min-width:260px;flex:none;box-shadow:var(--shadow-xs);scroll-snap-align:start}
.tcard .ph{width:76px;height:76px;border-radius:50%;border:3px solid var(--primary);margin:0 auto 14px;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:24px;letter-spacing:.02em;color:#fff;background:linear-gradient(135deg,#2c3a70,#16224C)}
.tcard h4{text-align:center;font-size:17px}
.tcard .role{text-align:center;color:var(--muted);font-size:13.5px;margin-top:3px}
.tcard .taught{text-align:center;color:var(--accent-ink);font-weight:700;font-size:13.5px;margin:10px 0}
.tcard .sp{display:flex;gap:6px;flex-wrap:wrap;justify-content:center}
.tcard .sp span{background:var(--primary-soft);color:var(--primary);font-size:11px;font-weight:700;padding:3px 9px;border-radius:var(--r-pill)}
.tcard .mr{text-align:center;color:var(--ink);font-size:13px;font-weight:700;margin-top:10px}
.tcard .mr .star{color:var(--gold)}
.tcard .mr span{color:var(--muted);font-weight:400}

/* ===================== TESTIMONIAL WALL ===================== */
.tst{background:var(--bg)}
.tcount{display:inline-flex;align-items:center;gap:9px;background:var(--accent-soft);color:var(--primary);font-weight:700;font-size:14px;padding:8px 16px;border-radius:var(--r-pill);margin-bottom:22px}
.tcount .star{color:var(--gold)}
.twall{columns:3;column-gap:20px}
.tcell{break-inside:avoid;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:22px;margin-bottom:20px;box-shadow:var(--shadow-xs)}
.tcell .top{display:flex;align-items:center;gap:12px;margin-bottom:11px}
.tcell .av{width:44px;height:44px;border-radius:50%;background:var(--primary);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:16px;flex:none;border:2px solid var(--primary-soft)}
.tcell .nm{font-weight:700;font-size:15px}
.tcell .ct{color:var(--muted);font-size:12.5px}
.tcell .stars{color:var(--gold);font-size:14px;margin-bottom:9px;letter-spacing:1px}
.tcell .course{display:inline-block;background:var(--primary-soft);color:var(--primary);font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:var(--r-pill);margin-bottom:10px}
.tcell q{quotes:none;color:var(--ink-soft);font-size:14.5px;line-height:1.55;display:block}

/* ===================== SCHEDULE ===================== */
.sched{background:var(--surface-alt)}
.stable{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-sm)}
.srow{display:grid;grid-template-columns:130px 1fr 170px 130px 140px;gap:16px;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}
.srow:last-child{border-bottom:0}
.srow.head{background:var(--primary);color:#fff;font-weight:700;font-size:12px;letter-spacing:.05em;text-transform:uppercase;padding:14px 24px}
.srow .date{font-weight:700;font-size:17px;color:var(--primary);font-variant-numeric:tabular-nums}
.srow .date .kg{display:block;font-size:11px;font-weight:400;color:var(--muted);letter-spacing:.03em;text-transform:uppercase}
.srow .cn{font-weight:700;font-size:15px}
.srow .form{color:var(--muted);font-size:14px}
.slots{font-weight:700;font-size:13px;padding:5px 12px;border-radius:var(--r-pill);text-align:center;display:inline-block}
.slots.few{background:var(--accent-soft);color:var(--accent-ink)}
.slots.full{background:#FFDFD6;color:#A83214}
.srow .btn{padding:10px 16px;font-size:13px;min-height:44px}

/* ===================== CURRICULUM ===================== */
.curri{background:linear-gradient(150deg,#182858,var(--primary-dark));color:#fff}
.curri .wrap{display:grid;grid-template-columns:1fr 1.05fr;gap:44px;align-items:center;padding:clamp(48px,6vw,64px) var(--gutter)}
.curri h2{color:#fff;font-size:clamp(24px,4vw,32px);letter-spacing:-.02em;line-height:1.2}
.curri .cnt{display:inline-flex;align-items:center;gap:9px;background:rgba(245,179,1,.16);color:var(--gold);font-weight:700;font-size:14px;padding:7px 15px;border-radius:var(--r-pill);margin-bottom:14px}
.curri p{color:#c3cbe6;margin-bottom:22px;margin-top:12px;line-height:1.55}
.lkt .files{display:grid;grid-template-columns:1fr 1fr;gap:13px}
.lkt .file{background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:15px;display:flex;align-items:center;gap:13px}
.lkt .file .ft{width:42px;height:50px;border-radius:var(--r-xs);display:flex;align-items:flex-end;justify-content:center;padding-bottom:5px;font-weight:700;font-size:9px;letter-spacing:.04em;color:#fff;flex:none}
.ft-pdf{background:#C0392B}.ft-xls{background:#0E7C55}
.lkt .file b{font-size:13.5px;display:block}.lkt .file span{font-size:12px;color:#aeb8da}

/* ===================== WHY + STEPPER ===================== */
.why{background:var(--bg)}
.wgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-bottom:44px}
.wtile{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:24px;box-shadow:var(--shadow-xs)}
.wtile .ic{width:50px;height:50px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.wtile .ic .icn{width:25px;height:25px}
.wtile h4{font-size:16px;margin-bottom:6px}
.wtile p{color:var(--muted);font-size:14px;line-height:1.5}
.stepper{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;background:var(--surface-alt);border-radius:var(--r-lg);padding:28px}
.step{text-align:center;position:relative}
.step .n{width:44px;height:44px;border-radius:50%;background:var(--primary);color:var(--gold);font-weight:700;font-size:19px;display:flex;align-items:center;justify-content:center;margin:0 auto 12px}
.step h4{font-size:15px}

/* ===================== BLOG ===================== */
.blog{background:var(--surface-alt)}
.bgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.bcard{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.bcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.bcard .im{aspect-ratio:16/10;position:relative;overflow:hidden;background:var(--primary-soft)}
.bcard .im img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.bcard:hover .im img{transform:scale(1.05)}
.bcard .b{padding:16px}
.bcard .cc{font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.bcard h4{font-size:15px;line-height:1.35;margin:7px 0}
.bcard .mt{color:var(--muted);font-size:12.5px}

/* ===================== IMAGE CTA BAND ===================== */
.ctaband{position:relative;overflow:hidden;color:#fff;background:var(--primary-dark)}
.ctaband > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.30}
.ctaband:before{content:"";position:absolute;inset:0;background:linear-gradient(115deg,rgba(14,24,54,.94),rgba(14,24,54,.62) 60%,rgba(203,74,36,.30))}
.ctaband .wrap{position:relative;z-index:1;padding:clamp(44px,5vw,62px) var(--gutter);display:flex;align-items:center;justify-content:space-between;gap:30px;flex-wrap:wrap}
.ctaband .eyebrow{color:var(--gold)}
.ctaband h2{color:#fff;font-size:clamp(23px,3.4vw,32px);letter-spacing:-.02em;line-height:1.2;margin-top:8px}
.ctaband p{color:#c8d0ea;margin-top:10px;max-width:540px}
.ctaband .act{display:flex;gap:12px;flex-wrap:wrap;flex:none}

/* ===================== LEAD CAPTURE ===================== */
.lead{background:linear-gradient(150deg,var(--navy-g1),var(--primary-dark));color:#fff;position:relative;overflow:hidden}
.lead:before{content:"";position:absolute;width:260px;height:260px;background:var(--gold);opacity:.12;border-radius:50%;top:-80px;right:6%}
.lead .wrap{position:relative;z-index:1;text-align:center;padding:clamp(48px,6vw,60px) var(--gutter)}
.lead h2{color:#fff;font-size:clamp(24px,4vw,32px);letter-spacing:-.02em;margin-bottom:10px}
.lead p{color:#c3cbe6;margin-bottom:26px}
.lform{display:flex;gap:12px;justify-content:center;max-width:820px;margin:0 auto;flex-wrap:wrap}
.lform input,.lform select{border:0;border-radius:var(--r-sm);padding:15px 18px;font-family:inherit;font-size:16px;min-width:210px;color:var(--ink);flex:1}
.lform .btn{padding:15px 28px;min-height:52px}
.lnote{color:#aeb8da;font-size:13px;margin-top:16px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap}

/* ===================== FOOTER ===================== */
.lkt-footer{background:var(--primary-dark);color:#aab3d4}
.ftop{border-bottom:1px solid rgba(255,255,255,.1)}
.ftop .wrap{display:flex;justify-content:center;gap:36px;padding:22px var(--gutter);flex-wrap:wrap;font-weight:700;font-size:13.5px;color:#c3cbe6}
.ftop .star{color:var(--gold)}
.fmain{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:40px;padding:52px 0 34px}
.fmain h4{color:var(--gold);font-size:13px;letter-spacing:.05em;text-transform:uppercase;margin-bottom:16px}
.fmain ul{list-style:none;display:flex;flex-direction:column;gap:4px}
.fmain li a{font-size:14.5px;color:#aab3d4;display:inline-flex;align-items:center;gap:8px;min-height:36px}
.fmain a:hover{color:#fff}
.fmain .about{font-size:14px;line-height:1.6;margin:14px 0}
.flogo{display:flex;align-items:center;gap:11px;margin-bottom:4px}
.flogo .mk{width:42px;height:42px;border-radius:11px;background:rgba(255,255,255,.1);display:flex;align-items:center;justify-content:center}
.flogo .mk b{color:var(--gold);font-size:21px}
.flogo .a{font-weight:700;font-size:18px;color:#fff;letter-spacing:-.01em}
.fverify{display:inline-flex;align-items:center;gap:8px;background:rgba(245,179,1,.14);color:var(--gold);font-weight:700;font-size:13px;padding:7px 13px;border-radius:var(--r-pill);margin-top:10px}
.fbot{border-top:1px solid rgba(255,255,255,.1);padding:18px 0;text-align:center;font-size:13px;color:#7c85a8}

/* ---- mega-footer (content taxonomy) ---- */
.fcats{background:var(--primary)}
.fcats .fcgrid{display:grid;grid-template-columns:repeat(4,1fr);gap:28px 30px;padding:46px 0 42px}
.fcol h4{color:#fff;font-size:13px;letter-spacing:.04em;text-transform:uppercase;margin-bottom:14px;font-weight:700}
.fcol ul{list-style:none;display:flex;flex-direction:column;gap:1px}
.fcol li a{color:#b7c0de;font-size:13.5px;display:block;padding:5px 0;line-height:1.4}
.fcol li a:hover{color:#fff;text-decoration:underline;text-underline-offset:2px}
.fmain2{background:var(--primary-dark)}
.fmain2 .wrap{padding:44px 0 36px}
.fbrand{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;flex-wrap:wrap;padding-bottom:32px;margin-bottom:34px;border-bottom:1px solid rgba(255,255,255,.1)}
.fbrand .bx{max-width:600px}
.fbrand .about{font-size:13.5px;line-height:1.65;color:#aab3d4;margin:12px 0}
.fsocial{display:flex;gap:12px;align-items:center;flex:none}
.fsocial a{width:44px;height:44px;border-radius:11px;background:rgba(255,255,255,.08);display:flex;align-items:center;justify-content:center;color:#fff}
.fsocial a:hover{background:var(--accent-cta)}
.fsocial svg{width:22px;height:22px;fill:currentColor;stroke:none}
.fmgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(168px,1fr));gap:28px 26px}
.fmgrid .fcol li a .icn{width:14px;height:14px;display:inline;vertical-align:-2px;margin-right:4px}

/* ---- FAQ (GEO) ---- */
.faq{background:var(--surface-alt)}
.faq .faq-wrap{max-width:840px;margin:0 auto}
.faq .fq{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);margin-bottom:12px;box-shadow:var(--shadow-xs);overflow:hidden}
.faq .fq summary{list-style:none;cursor:pointer;padding:18px 22px;font-weight:700;font-size:16px;color:var(--ink);display:flex;justify-content:space-between;align-items:center;gap:16px}
.faq .fq summary::-webkit-details-marker{display:none}
.faq .fq summary:after{content:"+";font-size:24px;line-height:1;color:var(--accent-ink);font-weight:700;flex:none}
.faq .fq[open] summary:after{content:"\2013"}
.faq .fq > div{padding:0 22px 20px}
.faq .fq p{color:var(--ink-soft);font-size:15px;line-height:1.65}

/* ===================== MOBILE BOTTOM ACTION BAR ===================== */
.mobar{display:none}

/* ============================================================
   CATEGORY PAGE
   ============================================================ */
.cat-header{background:linear-gradient(150deg,var(--navy-g1),var(--primary-dark));color:#fff;position:relative;overflow:hidden}
.cat-header:before{content:"";position:absolute;width:240px;height:240px;background:var(--gold);opacity:.12;border-radius:50%;top:-90px;right:5%;z-index:1}
.cat-header .cphoto{position:absolute;top:0;right:0;width:40%;height:100%;object-fit:cover;opacity:.20;z-index:0;-webkit-mask-image:linear-gradient(to left,#000 30%,transparent);mask-image:linear-gradient(to left,#000 30%,transparent)}
.cat-header .wrap{position:relative;z-index:1;padding:clamp(28px,4vw,36px) var(--gutter) 30px}
.cbread{display:flex;align-items:center;gap:9px;color:#aeb8da;font-size:13.5px;font-weight:400;margin-bottom:16px;flex-wrap:wrap}
.cbread ol{list-style:none;display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.cbread li{display:flex;align-items:center;gap:9px}
.cbread a:hover{color:#fff}
.cbread .icn{width:13px;height:13px;stroke-width:2.4}
.cbread [aria-current]{color:#fff;font-weight:700}
.cat-header h1{font-size:clamp(26px,4.5vw,40px);letter-spacing:-.02em;line-height:1.12;color:#fff;margin:8px 0}
.cat-header .vp{color:#c3cbe6;font-size:16px;max-width:640px;margin-bottom:18px;line-height:1.55}
.cminis{display:flex;gap:30px;flex-wrap:wrap;margin-bottom:22px}
.cmini b{font-weight:700;font-size:24px;letter-spacing:-.02em;color:var(--gold);display:block;font-variant-numeric:tabular-nums}
.cmini span{color:#aeb8da;font-size:13px}
.cresult{display:flex;justify-content:space-between;align-items:center;gap:14px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.14);border-radius:12px;padding:12px 18px;flex-wrap:wrap}
.cresult .rc{font-weight:700;font-size:15px}
.csort{display:flex;align-items:center;gap:10px;font-size:14px;color:#c3cbe6}
.csort select{background:#fff;color:var(--ink);border:0;border-radius:var(--r-sm);padding:9px 14px;font-family:inherit;font-weight:700;font-size:14px}

.cat-layout{display:grid;grid-template-columns:270px 1fr;gap:32px;padding:36px 0 56px}
.filters{align-self:start;position:sticky;top:90px;display:flex;flex-direction:column;gap:20px}
.fgroup{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-xs)}
.fgroup h4{font-size:13px;letter-spacing:.03em;text-transform:uppercase;margin-bottom:13px;color:var(--ink)}
.fopt{display:flex;align-items:center;gap:10px;padding:6px 0;min-height:44px;font-size:14.5px;color:var(--ink-soft);cursor:pointer}
.fopt input{width:20px;height:20px;accent-color:var(--accent-cta);flex:none}
.fopt .cnt{margin-left:auto;color:var(--muted);font-size:12.5px}
.fclear{color:var(--accent-ink);font-weight:700;font-size:12.5px;display:inline-block;margin-top:8px;cursor:pointer}
.fclear:hover{text-decoration:underline}
.fcta{background:linear-gradient(150deg,var(--navy-g1),var(--primary-dark));color:#fff;border-radius:var(--r-md);padding:22px;text-align:center}
.fcta h4{color:#fff;font-size:16px;margin-bottom:6px}
.fcta p{color:#c3cbe6;font-size:13px;margin-bottom:14px}
.fcta .btn{width:100%}
.fcta .ph{margin-top:10px;color:var(--gold);font-weight:700;font-size:14px}

.filterbtn{display:none}
.cmain-top{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:20px;align-items:center}
.achip{background:var(--primary-soft);color:var(--primary);font-weight:700;font-size:12.5px;padding:6px 12px;border-radius:var(--r-pill);display:inline-flex;align-items:center;gap:7px}
.achip button{background:none;border:0;color:var(--primary);font-weight:700;cursor:pointer;font-size:15px;line-height:1;padding:0;min-width:20px;min-height:20px}

.cpager{display:flex;gap:8px;justify-content:center;margin-top:36px}
.cpager a{min-width:44px;height:44px;padding:0 10px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:var(--muted)}
.cpager a:hover{border-color:var(--primary);color:var(--primary)}
.cpager a.on{background:var(--primary);border-color:var(--primary);color:#fff}

.tstrip .row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.lkt .related{background:var(--surface-alt)}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1024px){
  .burger{display:flex}
  nav.main{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;gap:0;margin:0;padding:6px var(--gutter) 14px;box-shadow:var(--shadow-md);border-top:1px solid var(--border)}
  .navtog:checked ~ header nav.main{display:flex}
  .nav-list{flex-direction:column;width:100%;gap:0}
  .ni{flex-wrap:wrap;width:100%;border-bottom:1px solid var(--hairline);align-items:center}
  .nl{flex:1;padding:14px 2px;font-size:15px}
  .nl .nlchev{display:none}
  .mchev{display:flex;align-items:center;justify-content:center;width:48px;height:48px;color:var(--muted);cursor:pointer}
  .mchev .icn{transition:transform .2s}
  .mtog:checked ~ .mchev .icn{transform:rotate(180deg)}
  .mega{position:static;opacity:1;visibility:visible;transform:none;box-shadow:none;border:0;border-radius:0;padding:0;min-width:0;width:100%;display:none}
  .mtog:checked ~ .mega{display:block;padding:2px 0 14px}
  .mega-cols{grid-template-columns:1fr;gap:8px}
  .mega-col{border-left:0;padding:0}
  .mega-col h4{margin:10px 0 2px;border-bottom:0;padding-bottom:0}
  .mega-col li a{padding:9px 10px;margin:0;min-height:42px}
  .mega-col li a:hover{padding-left:10px}
  .mega-promo{display:none}
  .fcats .fcgrid{grid-template-columns:repeat(2,1fr)}
  .hd-right .searchpill,.hd-right .btn-ghost{display:none}
  .hero .wrap{grid-template-columns:1fr;gap:32px}
  .hpanel{max-width:520px}
  .grid3{grid-template-columns:repeat(2,1fr)}
  .lanes{grid-template-columns:1fr}
  .wgrid,.bgrid,.fmain{grid-template-columns:repeat(2,1fr)}
  .fmain > div:first-child{grid-column:1/-1}
  .stepper{grid-template-columns:repeat(2,1fr);gap:20px}
  .twall{columns:2}
  .curri .wrap{grid-template-columns:1fr;gap:28px}
  .cat-layout{grid-template-columns:1fr;gap:24px}
  .filters{position:static;display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
  .filters .fcta{grid-column:1/-1}
}
@media(max-width:768px){
  .utility .r{display:none}
  .stats .wrap{grid-template-columns:repeat(2,1fr);gap:8px 20px}
  .stat:nth-child(2){border-right:0}
  .grid3,.grid2{grid-template-columns:1fr}
  .ptiers{grid-template-columns:1fr;gap:28px}
  .ptier.pop{transform:none;order:-1;margin-top:14px}
  .twall{columns:1}
  .tstrip .row{grid-template-columns:1fr}
  .wgrid,.bgrid{grid-template-columns:repeat(2,1fr)}
  .filters{grid-template-columns:1fr}
  /* schedule -> stacked cards */
  .stable{background:transparent;border:0;box-shadow:none;display:flex;flex-direction:column;gap:14px}
  .srow.head{display:none}
  .srow{grid-template-columns:1fr;gap:8px;background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:16px 18px;box-shadow:var(--shadow-sm)}
  .srow .btn{width:100%;min-height:50px}
  /* mobile bottom bar */
  .mobar{display:flex;position:fixed;bottom:0;left:0;right:0;height:60px;z-index:60;box-shadow:0 -4px 16px rgba(22,34,76,.16)}
  .mobar a{flex:1;display:flex;align-items:center;justify-content:center;gap:7px;font:700 14.5px var(--sans);min-height:60px}
  .mobar .mo-call{background:#fff;color:var(--primary);border-right:1px solid var(--border)}
  .mobar .mo-zalo{background:var(--gold);color:var(--primary-dark)}
  .mobar .mo-reg{background:var(--accent-cta);color:#fff}
  body{padding-bottom:60px}
  .demo-pill{bottom:72px}
  .chips,.trail{margin-inline:calc(-1*var(--gutter));padding-inline:var(--gutter);scroll-snap-type:x proximity}
  .cresult{flex-direction:column;align-items:flex-start}
  .hero-media > img{aspect-ratio:4/3}
  .hfloat.rate{left:10px;top:10px;padding:10px 13px}
  .hfloat.rate .n{font-size:20px}
  .hfloat.course{right:10px;bottom:10px;max-width:66%}
  .cat-header .cphoto{width:60%;opacity:.14}
  .ctaband .wrap{flex-direction:column;align-items:flex-start}
}
@media(max-width:480px){
  .utility .l{gap:14px;font-size:12.5px}
  .stepper{grid-template-columns:repeat(2,1fr)}
  .wgrid,.bgrid,.fmain{grid-template-columns:1fr}
  .fmain > div:first-child{grid-column:auto}
  .files{grid-template-columns:1fr}
  .hero-cta{gap:12px}
  .hero-cta .btn{width:100%}
  .lform input,.lform select,.lform .btn{width:100%;flex:auto}
  .cminis{gap:22px}
  .fcats .fcgrid{grid-template-columns:1fr;gap:22px}
  .fbrand{flex-direction:column;gap:18px}
}
@media(min-width:1025px) and (max-width:1200px){
  .hd-right .searchpill{display:none}
  .nav-list{gap:16px}
}
@media(prefers-reduced-motion:reduce){
  *{transition:none!important;scroll-behavior:auto!important}
  .ccard:hover,.lane:hover,.bcard:hover,.btn-cta:hover{transform:none}
}

/* ============================================================
   ARCHIVE (danh mục) + SINGLE (bài viết) — redesign
   ============================================================ */
.cat-header--post .wrap{padding-bottom:26px}
.post-meta{display:flex;gap:10px;flex-wrap:wrap;color:#aeb8da;font-size:14px;margin-top:12px}
.arch-layout,.art-layout{display:grid;grid-template-columns:1fr 320px;gap:36px;padding:36px 0 56px}
.arch-main,.art-main{min-width:0}
.agrid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.acard{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;box-shadow:var(--shadow-xs);transition:transform .2s var(--ease),box-shadow .2s var(--ease);display:flex;flex-direction:column}
.acard:hover{transform:translateY(-3px);box-shadow:var(--shadow-md)}
.athumb{display:block;aspect-ratio:16/10;overflow:hidden;background:var(--primary-soft);position:relative}
.athumb img{width:100%;height:100%;object-fit:cover;transition:transform .45s var(--ease)}
.acard:hover .athumb img{transform:scale(1.05)}
.athumb-ph{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;letter-spacing:.12em;background:linear-gradient(135deg,var(--navy-g1),var(--primary))}
.acard .ab{padding:16px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.acard .cc{font-weight:700;font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--accent-ink)}
.acard h3{font-size:16px;font-weight:700;line-height:1.35;letter-spacing:-.005em}
.acard h3 a:hover{color:var(--accent-ink)}
.acard .aex{color:var(--muted);font-size:13.5px;line-height:1.5;flex:1}
.acard .amt{color:var(--muted);font-size:12.5px;border-top:1px solid var(--border);padding-top:10px}
.apager{margin-top:30px}
.apager .nav-links{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.apager .page-numbers{min-width:44px;height:44px;padding:0 12px;border-radius:var(--r-sm);border:1.5px solid var(--border);background:#fff;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:var(--muted)}
.apager .page-numbers.current{background:var(--primary);border-color:var(--primary);color:#fff}
.apager a.page-numbers:hover{border-color:var(--primary);color:var(--primary)}

.art-hero{border-radius:var(--r-md);overflow:hidden;margin-bottom:24px}
.art-hero img{width:100%;height:auto;display:block}
.art-body{font-size:17px;line-height:1.75;color:var(--ink-soft)}
.art-body h2{font-size:clamp(22px,3vw,28px);font-weight:700;letter-spacing:-.02em;color:var(--ink);margin:28px 0 12px}
.art-body h3{font-size:20px;font-weight:700;color:var(--ink);margin:22px 0 10px}
.art-body p{margin:0 0 16px}
.art-body a{color:var(--accent-ink);text-decoration:underline;text-underline-offset:2px}
.art-body ul,.art-body ol{margin:0 0 16px 22px}
.art-body li{margin-bottom:8px}
.art-body img{max-width:100%;height:auto;border-radius:10px}
.art-body table{width:100%;border-collapse:collapse;margin:0 0 18px;font-size:15px;display:block;overflow-x:auto}
.art-body th,.art-body td{border:1px solid var(--border);padding:10px 12px;text-align:left}
.art-body th{background:var(--primary-soft);color:var(--primary);font-weight:700}
.art-body blockquote{border-left:4px solid var(--accent);background:var(--surface-alt);padding:14px 18px;border-radius:0 10px 10px 0;margin:0 0 18px;color:var(--ink)}
.art-tags{margin-top:24px;display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.art-tags>span{color:var(--muted);font-size:13px}
.art-tags a{background:var(--primary-soft);color:var(--primary);font-size:12.5px;font-weight:700;padding:5px 12px;border-radius:var(--r-pill)}
.art-cta{margin:28px 0;background:linear-gradient(150deg,var(--navy-g1),var(--primary-dark));border-radius:var(--r-lg);padding:24px;color:#fff}
.art-cta b{font-size:17px;display:block}
.art-cta span{color:#c3cbe6;font-size:14px}
.art-cta-in{display:flex;flex-direction:column;gap:16px}

.arch-side,.art-side{display:flex;flex-direction:column;gap:20px;align-self:start;position:sticky;top:90px}
.side-card{background:#fff;border:1px solid var(--border);border-radius:var(--r-md);padding:20px;box-shadow:var(--shadow-xs)}
.side-card h4{font-size:13px;letter-spacing:.03em;text-transform:uppercase;color:var(--ink);margin-bottom:12px}
.side-cats,.side-rel{list-style:none;display:flex;flex-direction:column;gap:0;margin:0;padding:0}
.side-cats a,.side-rel a{display:block;padding:9px 0;font-size:14.5px;color:var(--ink-soft);border-bottom:1px solid var(--hairline);line-height:1.4}
.side-cats a:hover,.side-rel a:hover{color:var(--accent-ink)}
.side-cta{background:linear-gradient(150deg,var(--navy-g1),var(--primary-dark));color:#fff;border-radius:var(--r-md);padding:22px}
.side-cta h4{color:#fff;font-size:16px;text-transform:none;letter-spacing:0;margin-bottom:6px}
.side-cta p{color:#c3cbe6;font-size:13.5px;margin-bottom:14px}
.side-cta .ktvhsub-lb,.art-cta .ktvhsub-lb{color:#fff;opacity:.85}
.side-cta .ktvhsub-note,.art-cta .ktvhsub-note{color:#fff}
.side-cta .ktvhsub-row,.art-cta .ktvhsub-row{flex-direction:column}
.side-cta .ktvhsub-field,.art-cta .ktvhsub-field{min-width:0}

@media(max-width:1024px){
  .arch-layout,.art-layout{grid-template-columns:1fr;gap:28px}
  .arch-side,.art-side{position:static}
}
@media(max-width:768px){
  .agrid{grid-template-columns:1fr}
  .art-body{font-size:16px}
}

/* ============================================================
   HERO SLIDER (3 slide, tự chuyển)
   ============================================================ */
.hero-slider{position:relative;aspect-ratio:5/4}
.hslide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .55s var(--ease)}
.hslide.is-active{opacity:1;visibility:visible}
.hslide>img{width:100%;height:100%;object-fit:cover;border-radius:var(--r-lg);box-shadow:var(--shadow-lg);display:block}
.hdots{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;display:flex;gap:7px}
.hdot{width:9px;height:9px;border-radius:50%;border:0;background:rgba(255,255,255,.55);cursor:pointer;padding:0;transition:width .25s var(--ease),background-color .25s;box-shadow:0 1px 3px rgba(0,0,0,.35)}
.hdot:hover{background:rgba(255,255,255,.85)}
.hdot.is-active{background:#fff;width:22px;border-radius:5px}
@media(max-width:768px){.hero-slider{aspect-ratio:4/3}}