/* ===== Siêu Chiến Binh — design system v2 (mint enhanced) ===== */
:root{
  --mint-50:#F0FBF7; --mint-100:#DDF6EE; --mint-200:#B7EEDC;
  --mint-300:#84E1C5; --mint-400:#43D0A8; --mint-500:#16B98F;
  --mint-600:#0E9A78; --mint-700:#0B7860;
  --ink:#0E2724; --ink-soft:#3A524D; --muted:#6E8983;
  --gold:#F3A93B; --gold-soft:#FCEED4; --gold-ink:#8A5A12;
  --coral:#FF7A6B; --blue:#4F7BE8; --violet:#8B6FE0;
  --bg:#F0FAF6; --surface:#FFFFFF; --line:#E0EDE8;
  --shadow-sm:0 2px 8px rgba(14,39,36,.06), 0 1px 2px rgba(14,39,36,.04);
  --shadow-md:0 10px 32px rgba(14,39,36,.10), 0 2px 8px rgba(14,39,36,.05);
  --shadow-lg:0 24px 64px rgba(11,120,96,.14), 0 6px 20px rgba(14,39,36,.07);
  --shadow-glow:0 0 0 4px rgba(22,185,143,.18), 0 8px 28px rgba(22,185,143,.22);
  --shadow-gold:0 8px 24px rgba(243,169,59,.36);
  --r-sm:12px; --r-md:16px; --r-lg:22px; --r-xl:30px;
  --wrap:1240px;
  --transition:all .2s cubic-bezier(.4,0,.2,1);
}

/* ===== BASE ===== */
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--bg); color:var(--ink);
  font-family:"Be Vietnam Pro",system-ui,sans-serif; font-size:16px; line-height:1.5;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;}
h1,h2,h3,h4{font-family:"Baloo 2","Be Vietnam Pro",sans-serif; line-height:1.12; margin:0;}
a{color:inherit; text-decoration:none;}
img{display:block; max-width:100%;}
.wrap{max-width:var(--wrap); margin:0 auto; padding:0 24px;}
.mint-word{color:var(--mint-600);}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex; align-items:center; gap:7px;
  font-family:inherit; font-weight:700; font-size:14px;
  border:0; cursor:pointer; border-radius:999px; padding:11px 20px;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1),
             box-shadow .2s ease,
             background .2s ease,
             border-color .2s ease,
             filter .2s ease;
  position:relative; overflow:hidden; user-select:none;
}
.btn::after{
  content:''; position:absolute; inset:0; border-radius:inherit;
  background:linear-gradient(120deg,rgba(255,255,255,.18) 0%,rgba(255,255,255,0) 60%);
  pointer-events:none;
}
.btn:hover{transform:translateY(-2px) scale(1.02);}
.btn:active{transform:translateY(1px) scale(.98);}

.btn-primary{
  background:linear-gradient(135deg, var(--mint-400) 0%, var(--mint-600) 100%);
  color:#fff;
  box-shadow:0 6px 20px rgba(22,185,143,.38), 0 2px 6px rgba(22,185,143,.2);
}
.btn-primary:hover{
  background:linear-gradient(135deg, var(--mint-500) 0%, var(--mint-700) 100%);
  box-shadow:0 10px 28px rgba(22,185,143,.48), 0 4px 10px rgba(22,185,143,.28);
}

.btn-ghost{background:#fff; color:var(--ink); border:1.5px solid var(--line); box-shadow:var(--shadow-sm);}
.btn-ghost:hover{border-color:var(--mint-400); color:var(--mint-700); box-shadow:0 4px 16px rgba(22,185,143,.14);}

.btn-gold{
  background:linear-gradient(135deg,#FFD166 0%,var(--gold) 55%,#E8920A 100%);
  color:#fff;
  box-shadow:var(--shadow-gold);
  text-shadow:0 1px 2px rgba(0,0,0,.12);
}
.btn-gold:hover{
  box-shadow:0 12px 32px rgba(243,169,59,.48), 0 4px 10px rgba(243,169,59,.28);
  filter:brightness(1.06);
}

.btn-sm{padding:8px 15px; font-size:12.5px;}
.btn-lg{padding:14px 28px; font-size:15.5px;}

/* ===== NAV ===== */
header.nav{
  position:sticky; top:0; z-index:60;
  background:rgba(240,250,246,.88);
  backdrop-filter:saturate(160%) blur(18px);
  border-bottom:1px solid rgba(230,240,236,.7);
  box-shadow:0 1px 0 rgba(22,185,143,.06), 0 4px 20px rgba(14,39,36,.05);
}
.nav-inner{display:flex; align-items:center; gap:16px; height:68px;}
.brand{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.logo{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(150deg,var(--mint-400),var(--mint-600));
  color:#fff; font-family:"Baloo 2"; font-weight:800; font-size:22px;
  box-shadow:0 6px 18px rgba(22,185,143,.45), 0 2px 6px rgba(22,185,143,.22);
  flex-shrink:0; transition:var(--transition);
}
.logo:hover{transform:rotate(-5deg) scale(1.08); box-shadow:0 10px 24px rgba(22,185,143,.55);}
.brand-name{font-family:"Baloo 2"; font-weight:800; font-size:15px; line-height:1.05;}
.brand-name small{display:block; font-family:"Be Vietnam Pro"; font-weight:600; font-size:9.5px; letter-spacing:2.2px; color:var(--mint-600);}

nav.links{display:flex; gap:2px; flex:1;}
nav.links a{
  padding:8px 13px; border-radius:9px; font-size:14px; font-weight:600;
  color:var(--ink-soft); white-space:nowrap;
  transition:background .18s ease, color .18s ease, transform .18s ease;
}
nav.links a:hover{background:var(--mint-100); color:var(--mint-700); transform:translateY(-1px);}
nav.links a.active{
  background:linear-gradient(135deg,var(--mint-500),var(--mint-600));
  color:#fff;
  box-shadow:0 4px 12px rgba(22,185,143,.3);
}

.nav-right{display:flex; align-items:center; gap:11px; flex-shrink:0;}
.xp-pill{
  display:flex; align-items:center; gap:6px;
  background:linear-gradient(135deg,#FFF3D6,var(--gold-soft));
  color:var(--gold-ink); font-weight:800; font-size:13.5px;
  padding:7px 14px; border-radius:999px;
  border:1.5px solid rgba(243,169,59,.22);
  box-shadow:0 3px 10px rgba(243,169,59,.18);
  transition:var(--transition);
}
.xp-pill:hover{transform:scale(1.04); box-shadow:0 5px 16px rgba(243,169,59,.28);}
.avatar{
  width:40px; height:40px; border-radius:12px; display:grid; place-items:center;
  background:linear-gradient(135deg,var(--mint-200),var(--mint-400));
  color:var(--mint-700); font-weight:800; font-family:"Baloo 2"; font-size:17px;
  border:2.5px solid #fff; box-shadow:0 4px 14px rgba(22,185,143,.25); cursor:pointer;
  transition:var(--transition);
}
.avatar:hover{transform:scale(1.08); box-shadow:0 6px 20px rgba(22,185,143,.38);}
.hamburger{display:none; width:40px; height:40px; border-radius:11px; border:1.5px solid var(--line); background:#fff; cursor:pointer; flex-direction:column; align-items:center; justify-content:center; gap:4px; transition:var(--transition);}
.hamburger:hover{border-color:var(--mint-400); background:var(--mint-50);}
.hamburger span{width:17px; height:2px; background:var(--ink); border-radius:2px; transition:var(--transition);}

/* ===== PAGE HEADING ===== */
.page-head{padding:30px 0 6px;}
.page-head .kick{color:var(--mint-600); font-weight:800; font-size:13px; letter-spacing:1.4px; text-transform:uppercase;}
.page-head h1{font-size:clamp(26px,3.4vw,38px); font-weight:800; letter-spacing:-.4px; margin-top:6px;}
.page-head p{color:var(--muted); margin:8px 0 0; font-size:15.5px; max-width:46em;}

/* ===== SECTION HEAD ===== */
.sec-head{display:flex; align-items:flex-end; justify-content:space-between; gap:20px; margin-bottom:20px;}
.sec-head h2{font-size:clamp(20px,2.6vw,26px); font-weight:800; letter-spacing:-.2px;}
.sec-head .sub{color:var(--muted); font-size:14px; margin-top:3px;}
.view-all{color:var(--mint-700); font-weight:700; font-size:14.5px; display:inline-flex; gap:6px; align-items:center; white-space:nowrap; transition:gap .2s ease;}
.view-all:hover{gap:10px;}

/* ===== SEARCH ===== */
.search{
  display:flex; align-items:center; gap:11px;
  background:#fff; border:1.5px solid var(--line);
  border-radius:999px; padding:12px 20px;
  box-shadow:var(--shadow-sm);
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.search:focus-within{
  border-color:var(--mint-400);
  box-shadow:0 0 0 4px rgba(22,185,143,.12), 0 4px 16px rgba(22,185,143,.1);
  transform:translateY(-1px);
}
.search input{border:0; outline:0; font-family:inherit; font-size:15px; flex:1; background:transparent; color:var(--ink);}
.search input::placeholder{color:var(--muted);}
.search .si{font-size:18px; color:var(--muted);}

/* ===== PILLS / CHIPS ===== */
.pills{display:flex; gap:9px; flex-wrap:wrap;}
.pill{
  display:inline-flex; align-items:center; gap:7px;
  background:#fff; border:1.5px solid var(--line);
  color:var(--ink-soft); font-weight:600; font-size:13.5px;
  padding:8px 16px; border-radius:999px; cursor:pointer;
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
  box-shadow:var(--shadow-sm);
  white-space:nowrap;
}
.pill:hover{border-color:var(--mint-300); color:var(--mint-700); transform:translateY(-2px); box-shadow:0 6px 16px rgba(22,185,143,.14);}
.pill.active{
  background:linear-gradient(135deg,var(--mint-400),var(--mint-600));
  color:#fff; border-color:transparent;
  box-shadow:0 6px 18px rgba(22,185,143,.38);
  transform:translateY(-1px);
}
.pill .dot{width:8px; height:8px; border-radius:50%;}

/* ===== COURSE CARD ===== */
.course{
  background:var(--surface); border-radius:var(--r-lg);
  border:1px solid var(--line);
  box-shadow:var(--shadow-sm);
  overflow:hidden; display:flex; flex-direction:column;
  transition:transform .22s cubic-bezier(.34,1.3,.64,1), box-shadow .25s ease;
}
.course:hover{
  transform:translateY(-7px) scale(1.012);
  box-shadow:0 20px 50px rgba(14,39,36,.12), 0 6px 16px rgba(22,185,143,.1);
}
.course .ph{
  height:155px; position:relative; display:grid; place-items:center;
  background:repeating-linear-gradient(135deg,var(--mint-100),var(--mint-100) 12px,var(--mint-50) 12px,var(--mint-50) 24px);
  overflow:hidden;
}
.course .ph::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg,rgba(255,255,255,0) 50%,rgba(240,250,246,.35) 100%);
  pointer-events:none;
}
.course .ph code{font-family:ui-monospace,Menlo,monospace; font-size:11px; color:var(--mint-700); opacity:.7;
  background:rgba(255,255,255,.75); padding:4px 9px; border-radius:7px; backdrop-filter:blur(4px);}
.flag{position:absolute; top:12px; right:12px; color:#fff; font-size:11px; font-weight:800; padding:5px 11px; border-radius:999px; box-shadow:0 3px 8px rgba(0,0,0,.15);}
.flag.hot{background:linear-gradient(135deg,#FF9A8B,var(--coral));}
.flag.new{background:linear-gradient(135deg,var(--mint-400),var(--mint-600));}
.flag.free{background:linear-gradient(135deg,#FFD166,var(--gold));}
.course .body{padding:16px 18px 18px; display:flex; flex-direction:column; flex:1;}
.course h3{font-size:16.5px; font-weight:700; letter-spacing:-.2px; line-height:1.35;}
.course .meta{display:flex; gap:13px; color:var(--muted); font-size:13px; font-weight:600; margin:8px 0 13px; flex-wrap:wrap;}
.course .meta .star{color:var(--gold-ink);}
.course .foot{display:flex; align-items:center; justify-content:space-between; margin-top:auto;}
.price{font-family:"Baloo 2"; font-weight:800; font-size:19px; color:var(--ink);}
.price s{font-family:"Be Vietnam Pro"; font-weight:600; font-size:12.5px; color:var(--muted); margin-right:6px;}
.price .free{color:var(--mint-600);}

/* Progress bar */
.cbar{height:7px; border-radius:999px; background:var(--mint-100); overflow:hidden; margin:4px 0 9px;}
.cbar i{display:block; height:100%; border-radius:999px;
  background:linear-gradient(90deg,var(--mint-400),var(--mint-600));
  box-shadow:0 0 8px rgba(22,185,143,.4);
  transition:width .6s cubic-bezier(.4,0,.2,1);}

/* ===== RAIL ===== */
.rail-wrap{position:relative;}
.rail{
  display:grid; grid-auto-flow:column; grid-auto-columns:minmax(280px,1fr);
  gap:20px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:6px 4px 16px; scrollbar-width:none;
}
.rail::-webkit-scrollbar{display:none;}
.rail > *{scroll-snap-align:start;}
.arrows{display:flex; gap:9px;}
.arrow{
  width:42px; height:42px; border-radius:50%;
  border:1.5px solid var(--line); background:#fff;
  cursor:pointer; display:grid; place-items:center;
  font-size:18px; color:var(--ink); box-shadow:var(--shadow-sm);
  transition:transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s ease, background .2s ease, color .2s ease;
}
.arrow:hover{
  background:linear-gradient(135deg,var(--mint-400),var(--mint-600));
  color:#fff; border-color:transparent;
  transform:scale(1.12);
  box-shadow:0 6px 18px rgba(22,185,143,.38);
}

/* ===== CARD ===== */
.card{
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm);
  transition:transform .2s ease, box-shadow .25s ease;
}
.card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}

/* ===== FOOTER ===== */
footer{
  padding:52px 0 28px; border-top:1px solid var(--line);
  margin-top:40px;
  background:linear-gradient(180deg,#fff 0%,var(--mint-50) 100%);
}
.foot-grid{display:grid; grid-template-columns:1.4fr 1fr 1fr 1fr; gap:30px;}
footer h4{font-size:12.5px; letter-spacing:1px; text-transform:uppercase; color:var(--muted); margin:0 0 13px; font-family:"Be Vietnam Pro"; font-weight:700;}
footer a{display:block; color:var(--ink-soft); font-size:14px; padding:5px 0; font-weight:500; transition:color .15s ease, padding-left .15s ease;}
footer a:hover{color:var(--mint-700); padding-left:4px;}
.foot-brand p{color:var(--muted); font-size:14px; margin:13px 0 0; max-width:24em;}
.copy{text-align:center; color:var(--muted); font-size:13px; margin-top:34px; padding-top:22px; border-top:1px solid var(--line);}

/* ===== ANIMATIONS ===== */
@keyframes fadeUp{
  from{opacity:0; transform:translateY(18px);}
  to{opacity:1; transform:none;}
}
@keyframes scaleIn{
  from{opacity:0; transform:scale(.94);}
  to{opacity:1; transform:none;}
}
@keyframes shimmer{
  from{background-position:-200% center;}
  to{background-position:200% center;}
}
@keyframes pulse-glow{
  0%,100%{box-shadow:0 0 0 0 rgba(22,185,143,.3);}
  50%{box-shadow:0 0 0 8px rgba(22,185,143,.0);}
}

@media(prefers-reduced-motion:no-preference){
  .reveal{animation:fadeUp .5s cubic-bezier(.4,0,.2,1) both;}
  .reveal-scale{animation:scaleIn .4s cubic-bezier(.34,1.3,.64,1) both;}
  .btn-primary.pulse{animation:pulse-glow 2s ease infinite;}
}

/* ===== RESPONSIVE ===== */
@media(max-width:980px){
  nav.links{display:none;}
  .hamburger{display:flex;}
  .xp-pill{display:none;}
  .foot-grid{grid-template-columns:1fr 1fr;}
}
@media(max-width:560px){
  .foot-grid{grid-template-columns:1fr;}
}

/* ===== SCROLLBAR ===== */
::-webkit-scrollbar{width:6px; height:6px;}
::-webkit-scrollbar-track{background:var(--mint-50);}
::-webkit-scrollbar-thumb{background:var(--mint-300); border-radius:999px;}
::-webkit-scrollbar-thumb:hover{background:var(--mint-500);}

/* ===== SELECTION ===== */
::selection{background:var(--mint-200); color:var(--ink);}