:root{--dgreen:#00522D;--dgreen2:#003D21;--lime:#7DC52B;--lime2:#A3D94A;--orange:#F5751A;--orange2:#FF9A4A;--paper:#FFFFFF;--mist:#F5FAF7;--mist2:#EAF3EE;--ink:#18332A;--ink-2:#5B6F67;--line:#DCEAE1}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:'Roboto',sans-serif;color:var(--ink);background:var(--paper);-webkit-font-smoothing:antialiased}
a{color:var(--dgreen);text-decoration:none}a:hover{color:var(--orange)}
img{display:block;max-width:100%}
.wrap{max-width:1240px;margin:0 auto;padding:0 32px}
header nav{margin-left:auto}
.mono{font-family:'Roboto Mono',monospace;letter-spacing:.16em;text-transform:uppercase}
.btn{display:inline-flex;align-items:center;gap:10px;padding:16px 30px;border-radius:14px;font-size:16px;font-weight:700;border:2px solid transparent;transition:.18s;cursor:pointer}
.btn-o{background:var(--orange);color:#fff;box-shadow:0 10px 26px rgba(245,117,26,.28)}.btn-o:hover{background:var(--dgreen);color:#fff;transform:translateY(-2px)}
.btn-g{border-color:var(--dgreen);color:var(--dgreen);background:#fff}.btn-g:hover{background:var(--dgreen);color:#fff}
.btn-w{border-color:rgba(255,255,255,.5);color:#fff;background:transparent}.btn-w:hover{background:#fff;color:var(--dgreen)}
.eyebrow{display:inline-flex;align-items:center;gap:10px;padding:8px 16px;border-radius:8px;background:#fff;border:1px solid var(--line);color:var(--dgreen);font-family:'Roboto Mono',monospace;font-size:11.5px;font-weight:500;letter-spacing:.18em;text-transform:uppercase}
.eyebrow .dot{width:8px;height:8px;border-radius:50%;background:var(--orange)}
.sec{position:relative;padding:110px 0}
.sec>.wrap{position:relative}
.sec-mist{background:var(--mist)}
.sec-mist::before{content:"";position:absolute;inset:0;background-image:linear-gradient(var(--mist2) 1px,transparent 1px),linear-gradient(90deg,var(--mist2) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 72%);mask-image:radial-gradient(120% 80% at 50% 0,#000,transparent 72%);pointer-events:none}
.hrs{font-family:'Roboto Mono',monospace;letter-spacing:.06em}
h2.sh{margin:14px 0 0;font-size:44px;line-height:1.15;font-weight:900;letter-spacing:-.02em;text-wrap:pretty}
p.sd{margin:16px 0 0;font-size:18px;line-height:1.6;color:var(--ink-2);max-width:680px}
.center{text-align:center}.center p.sd{margin-left:auto;margin-right:auto}
/* header */
header{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
header .wrap{display:flex;align-items:center;gap:28px;height:76px}
header img{height:32px;width:auto}
header nav{display:flex;gap:26px;font-size:15px;font-weight:500}
header nav a{color:var(--ink-2)}header nav a:hover{color:var(--dgreen)}
header .btn{margin-left:auto;padding:11px 20px;font-size:14.5px}
/* hero */
.hero{position:relative;overflow:hidden;background:linear-gradient(165deg,#fff 0%,var(--mist) 54%,#E4F0E8 100%);border-bottom:1px solid var(--line)}
.hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(0,82,45,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(0,82,45,.05) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(100% 70% at 50% 12%,#000,transparent 78%);mask-image:radial-gradient(100% 70% at 50% 12%,#000,transparent 78%);pointer-events:none}
.hero .wrap{position:relative;padding-top:86px;padding-bottom:80px}
.herotop{text-align:center;max-width:1000px;margin:0 auto}
.herologo{height:52px;width:auto;margin:0 auto 26px}
.hex{position:absolute;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);pointer-events:none}
.hero .h1{top:-90px;right:-110px;width:420px;height:472px;background:rgba(125,197,43,.12)}
.hero .h2{bottom:-140px;left:-120px;width:340px;height:382px;background:rgba(0,82,45,.06)}
h1{margin:20px 0 0;font-size:clamp(21px,4.7vw,56px);line-height:1.1;font-weight:900;letter-spacing:-.03em;white-space:nowrap}
h1 em{font-style:normal;color:var(--orange)}
.hero p.lead{margin:22px auto 0;font-size:19px;line-height:1.62;color:var(--ink-2);max-width:660px}
.hero .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:32px}
.hero .facts{display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:26px}
.fact{display:flex;align-items:center;gap:9px;padding:11px 18px;border-radius:12px;background:#fff;border:1.5px solid var(--line);font-size:14.5px;font-weight:500;color:var(--ink-2)}
.fact b{color:var(--dgreen);font-weight:700}
.heroart{position:relative;margin-top:52px;width:100%;max-width:1540px;margin-left:auto;margin-right:auto}
.heroart .shot{position:relative;aspect-ratio:1540/370;background:#fff;border-radius:20px;overflow:hidden;border:1px solid var(--line);box-shadow:0 30px 70px rgba(0,82,45,.14)}

.btrack{display:flex;width:300%;height:100%;animation:bslide 14s cubic-bezier(.65,0,.35,1) infinite}
.btrack>.bslide{flex:0 0 auto;height:100%;display:block}
.btrack img{width:100%;height:100%;object-fit:cover;display:block}
.heroart .shot:hover .btrack{animation-play-state:paused}
@keyframes bslide{0%,42%{transform:translateX(0)}50%,92%{transform:translateX(-33.3333%)}100%{transform:translateX(-66.6666%)}}
@media(prefers-reduced-motion:reduce){.btrack{animation:none}}
/* courses */
.courses{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.ccard{position:relative;display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,82,45,.05);transition:.2s}
.ccard:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(0,82,45,.13);border-color:var(--lime)}
.ccard .top{position:relative;height:172px;display:grid;place-items:center;overflow:hidden}
.ccard .top .hxb{position:absolute;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:rgba(255,255,255,.12)}
.ccard .top .b1{width:150px;height:169px;right:-40px;top:-46px}
.ccard .top .b2{width:96px;height:108px;left:-30px;bottom:-34px}
.ccard .top .lbl{position:relative;font-family:'Roboto Mono',monospace;font-size:12.5px;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.9)}
.ccard .top svg{position:relative;color:#fff}
.ccard .top .cimg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ccard .top:has(.cimg)::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,40,22,.10),rgba(0,40,22,.34))}
.ccard .top .badge{z-index:2}
.ccard .t1{background:linear-gradient(150deg,#00522D,#0E6B3B)}
.ccard .t2{background:linear-gradient(150deg,#0E6B3B,#7DC52B)}
.ccard .t3{background:linear-gradient(150deg,#D9600F,#FF9A4A)}
.ccard .badge{position:absolute;top:14px;left:14px;padding:6px 13px;border-radius:999px;background:var(--orange);color:#fff;font-size:11.5px;font-weight:700}
.ccard .body{display:flex;flex-direction:column;flex:1;padding:26px}
.ccard .who{font-size:13.5px;color:var(--ink-2);font-weight:500}
.ccard h3{margin:8px 0 0;font-size:24px;font-weight:900;letter-spacing:-.02em;line-height:1.2}
.ccard p{margin:12px 0 0;font-size:15.5px;line-height:1.55;color:var(--ink-2)}
.ccard .meta{display:flex;align-items:center;gap:14px;margin-top:22px;padding-top:20px;border-top:1px dashed var(--line)}
.ccard .hrs{font-size:14px;font-weight:500;color:var(--ink-2)}
.ccard .price{margin-left:auto;display:flex;align-items:baseline;gap:9px}
.ccard .price .old{font-size:15px;font-weight:500;color:#8C9B92;text-decoration:line-through}
.ccard .price .now{font-size:26px;font-weight:900;color:var(--orange);letter-spacing:-.02em}
.ccard /* Lịch khai giảng lấy từ DB nên dài ngắn tùy khóa; flex khiến chuỗi dài tràn
   ra ngoài card, nên để inline cho chữ tự xuống dòng. */
.start{display:block;text-align:left;margin-top:14px;font-size:14px;font-weight:700;color:var(--dgreen);line-height:1.45}
.start svg{display:inline-block;vertical-align:-3px;margin-right:8px}
.ccard .start svg{flex:none}
.ccard .acts{display:flex;gap:10px;margin-top:20px}
.ccard .acts .btn{flex:1;justify-content:center;padding:13px 14px;font-size:14.5px}
.ccard .mentor{display:flex;align-items:center;gap:10px;margin-top:18px;font-size:13.5px;color:var(--ink-2)}
.ccard .mentor img{width:32px;height:32px;border-radius:50%;object-fit:cover;object-position:50% 6%;background:#fff;border:2px solid var(--lime)}
/* coach */
.coach{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px}
.chcard{display:grid;grid-template-columns:150px 1fr;gap:24px;align-items:center;padding:28px;border-radius:18px;background:#fff;border:1px solid var(--line);box-shadow:0 4px 14px rgba(0,82,45,.05);transition:.2s}
.chcard:hover{transform:translateY(-5px);box-shadow:0 20px 44px rgba(0,82,45,.12)}
.chph{position:relative;width:150px;height:170px;flex:none}
.chph .r{position:absolute;inset:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--orange)}
.chph .w{position:absolute;inset:4px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#fff}
.chph .i{position:absolute;inset:8px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);overflow:hidden;background:#fff}
.chph .i img{width:100%;height:100%;object-fit:cover;object-position:50% 6%}
.chph .i img.zoom{transform:scale(1.75);transform-origin:50% 11%}
.tphoto .i img.zoom{transform:scale(1.75);transform-origin:50% 11%}
.chcard h3{margin:0;font-size:23px;font-weight:900;letter-spacing:-.02em}
.chcard .role{margin:5px 0 0;font-size:14.5px;font-weight:700;color:var(--orange)}
.chcard p{margin:12px 0 0;font-size:15px;line-height:1.58;color:var(--ink-2)}
.chcard .foot{display:flex;align-items:center;gap:14px;margin-top:18px;padding-top:16px;border-top:1px dashed var(--line)}
.chcard .pr{font-size:22px;font-weight:900;color:var(--orange);letter-spacing:-.02em}
.chcard .pr span{font-size:14px;font-weight:500;color:var(--ink-2);margin-left:4px}
.chcard .foot .btn{margin-left:auto;padding:12px 20px;font-size:14.5px}
/* why */
.why{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:52px}
.wcard{padding:34px 30px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:.2s}
.wcard:hover{border-color:var(--lime);transform:translateY(-4px)}
.wcard .ic{width:56px;height:63px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--dgreen);display:grid;place-items:center;color:#fff}
.wcard h3{margin:20px 0 0;font-size:20px;font-weight:900;letter-spacing:-.01em}
.wcard p{margin:10px 0 0;font-size:15.5px;line-height:1.6;color:var(--ink-2)}
.wcard:nth-child(2) .ic{background:var(--lime)}
.wcard:nth-child(3) .ic{background:var(--orange)}
/* roadmap */
.road{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:52px}
.step{position:relative;padding:30px 28px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:.2s}
.step:hover{border-color:var(--lime)}
.step .n{position:absolute;top:-18px;left:26px;width:44px;height:50px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--dgreen);color:#fff;display:grid;place-items:center;font-size:16px;font-weight:900}
.step h3{margin:18px 0 0;font-size:18.5px;font-weight:900}
.step p{margin:9px 0 0;font-size:15px;line-height:1.58;color:var(--ink-2)}
.step:nth-child(4) .n,.step:nth-child(5) .n{background:var(--lime)}
.step:nth-child(6) .n{background:var(--orange)}
/* team */
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:26px;margin-top:52px}
.tcard{display:grid;grid-template-columns:186px 1fr;gap:26px;align-items:center;padding:28px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.tphoto{position:relative;width:186px;height:210px;flex:none}
.tphoto .r{position:absolute;inset:0;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--orange)}
.tphoto .w{position:absolute;inset:4px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:#fff}
.tphoto .i{position:absolute;inset:9px;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);overflow:hidden;background:var(--mist2);display:grid;place-items:center}
.tphoto .i img{width:100%;height:100%;object-fit:cover;object-position:50% 6%;background:#fff}
.tphoto .ph{font-size:13px;color:var(--ink-2);text-align:center;padding:0 14px;line-height:1.4}
.tcard .yrs{display:inline-block;padding:5px 12px;border-radius:6px;background:var(--mist2);color:var(--dgreen);font-family:'Roboto Mono',monospace;font-size:11px;letter-spacing:.14em}
.tcard h3{margin:12px 0 0;font-size:25px;font-weight:900;letter-spacing:-.02em}
.tcard .role{margin:5px 0 0;font-size:15px;font-weight:700;color:var(--orange)}
.tcard p{margin:12px 0 0;font-size:15px;line-height:1.58;color:var(--ink-2)}
/* team slider */
.tslider{position:relative;margin-top:52px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.ttrack{display:flex;width:max-content;animation:tmarquee 38s linear infinite}
.tslider:hover .ttrack{animation-play-state:paused}
.ttrack .tcard{width:560px;margin:0 26px 0 0}
@keyframes tmarquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.ttrack{animation:none}.tslider{overflow-x:auto}}
/* faq */
.faq{max-width:900px;margin:48px auto 0}
details{border:1px solid var(--line);border-radius:16px;background:#fff;margin-bottom:14px;overflow:hidden}
details[open]{border-color:var(--lime)}
summary{display:flex;align-items:center;gap:16px;padding:22px 26px;cursor:pointer;font-size:17.5px;font-weight:700;color:var(--dgreen);list-style:none}
summary::-webkit-details-marker{display:none}
summary .hx{width:26px;height:29px;flex:none;clip-path:polygon(50% 0%,100% 25%,100% 75%,50% 100%,0% 75%,0% 25%);background:var(--mist2);color:var(--dgreen);display:grid;place-items:center;font-size:15px;font-weight:900;margin-left:auto;transition:.18s}
details[open] summary .hx{background:var(--orange);color:#fff}
details .ans{padding:0 26px 24px;font-size:16px;line-height:1.68;color:var(--ink-2)}
/* contact */
.contact{background:var(--dgreen);color:#fff;position:relative;overflow:hidden}
.contact .hx1{top:-120px;left:-90px;width:360px;height:404px;background:rgba(125,197,43,.14)}
.contact .hx2{bottom:-150px;right:-80px;width:300px;height:337px;background:rgba(255,255,255,.06)}
.contact .wrap{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:70px;align-items:start}
.contact .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.contact h2.sh{color:#fff}
.contact p.sd{color:rgba(255,255,255,.82)}
.contact .pill{display:flex;align-items:center;gap:12px;margin-top:26px;padding:16px 22px;border-radius:14px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);font-size:15.5px;color:rgba(255,255,255,.92)}
form{background:#fff;border-radius:22px;padding:32px}
form label{display:block;font-size:13.5px;font-weight:700;color:var(--dgreen);margin-bottom:7px}
form .f{margin-bottom:18px}
input,textarea{width:100%;padding:14px 16px;border:1.5px solid var(--line);border-radius:12px;font-family:inherit;font-size:15.5px;color:var(--ink);background:var(--mist);transition:.15s}
input:focus,textarea:focus{outline:none;border-color:var(--lime);background:#fff}
textarea{min-height:112px;resize:vertical}
form .btn{width:100%;justify-content:center}
form .ok{display:none;margin-top:14px;font-size:14.5px;font-weight:700;color:var(--dgreen)}
/* news */
.news{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:48px}
.ncard{padding:26px;border-radius:18px;background:#fff;border:1px solid var(--line);transition:.2s}
.ncard:hover{transform:translateY(-4px);box-shadow:0 18px 40px rgba(0,82,45,.1)}
.ncard .d{font-family:'Roboto Mono',monospace;font-size:11.5px;letter-spacing:.1em;color:var(--ink-2)}
.ncard h3{margin:10px 0 0;font-size:18.5px;font-weight:900;line-height:1.3;letter-spacing:-.01em}
.ncard p{margin:10px 0 0;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
/* final cta */
.fin{background:linear-gradient(140deg,var(--dgreen) 0%,#0A6B3A 60%,#128046 100%);color:#fff;position:relative;overflow:hidden;text-align:center}
.fin .hx1{top:-100px;left:12%;width:300px;height:337px;background:rgba(255,255,255,.05)}
.fin .hx2{bottom:-130px;right:10%;width:340px;height:382px;background:rgba(125,197,43,.12)}
.fin .wrap{position:relative}
.fin h2{margin:18px auto 0;font-size:46px;line-height:1.14;font-weight:900;letter-spacing:-.025em;max-width:880px}
.fin p{margin:18px auto 0;font-size:18px;line-height:1.6;color:rgba(255,255,255,.85);max-width:660px}
.fin .eyebrow{background:rgba(255,255,255,.14);color:#fff}
.fin .cta{display:flex;justify-content:center;flex-wrap:wrap;gap:14px;margin-top:34px}
/* footer */
footer{background:#0B2A1C;color:rgba(255,255,255,.7);padding:64px 0 32px;font-size:14.5px}
footer .cols{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr 1fr;gap:34px}
footer .orgs li{display:grid;gap:6px}
footer .orgs .lg{display:inline-grid;place-items:center;padding:9px 14px;border-radius:10px;background:#fff}
footer .orgs .lg img{height:20px;width:auto;object-fit:contain}
footer .orgs .lg img.th{height:16px}
footer .orgs span{font-family:'Roboto Mono',monospace;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5)}
footer .orgs .v{display:flex;align-items:center;gap:10px;font-family:'Roboto',sans-serif;font-size:15px;letter-spacing:0;text-transform:none;font-weight:700;color:#fff}
footer img{height:36px;width:auto}
footer .logobox{display:inline-flex;padding:12px 18px;border-radius:12px;background:#fff}
footer h4{margin:0 0 14px;font-size:13px;font-weight:700;color:#fff;letter-spacing:.1em;text-transform:uppercase}
footer ul{margin:0;padding:0;list-style:none;display:grid;gap:10px}
footer a{color:rgba(255,255,255,.7)}footer a:hover{color:var(--lime2)}
footer .tag{margin:16px 0 0;line-height:1.6;max-width:280px}
footer .bot{margin-top:48px;padding-top:24px;border-top:1px solid rgba(255,255,255,.12);display:flex;flex-wrap:wrap;gap:16px;font-size:13.5px}
footer .bot span:last-child{margin-left:auto}
@media(max-width:1080px){
h2.sh{font-size:34px}.fin h2{font-size:34px}
.courses,.why,.road,.news{grid-template-columns:1fr 1fr}
.team,.coach{grid-template-columns:1fr}
.contact .wrap{grid-template-columns:1fr;gap:40px}
footer .cols{grid-template-columns:1fr 1fr}
header nav{display:none}
}
@media(max-width:720px){
.wrap{padding:0 20px}.sec{padding:72px 0}
h2.sh{font-size:28px}.fin h2{font-size:28px}
.courses,.why,.road,.news,.team,.coach{grid-template-columns:1fr}
.tcard,.chcard{grid-template-columns:1fr;justify-items:center;text-align:center}
.chcard .foot{justify-content:center}.chcard .foot .btn{margin-left:0}
.tcard{grid-template-columns:1fr;justify-items:center;text-align:center}
.heroart{margin-top:38px}
footer .cols{grid-template-columns:1fr}
}


/* ─────────────────────────────────────────────────────────────
   Tối ưu mobile (bổ sung ngoài design gốc)
   Design ẩn nav từ 1080px nhưng không có menu thay thế, và giữ
   nguyên nhịp khoảng cách của desktop nên trang mobile dài 14.5k px.
   ───────────────────────────────────────────────────────────── */

/* Nút hamburger — chỉ xuất hiện đúng lúc nav desktop bị ẩn */
.navtoggle{display:none;margin-left:auto;width:44px;height:44px;flex:none;align-items:center;justify-content:center;
  gap:5px;flex-direction:column;background:transparent;border:1px solid var(--line);border-radius:10px;cursor:pointer;padding:0}
.navtoggle span{display:block;width:20px;height:2px;border-radius:2px;background:var(--dgreen);transition:transform .2s,opacity .2s}
.navtoggle.on span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.navtoggle.on span:nth-child(2){opacity:0}
.navtoggle.on span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

.mnav{display:none;flex-direction:column;gap:2px;padding:10px 20px 18px;border-top:1px solid var(--line);background:var(--paper)}
/* Loại .btn ra khỏi style link thường, nếu không padding/border của link
   sẽ đè lên nút và chữ bị dồn về trái trong nút full-width. */
.mnav a:not(.btn){padding:13px 4px;font-weight:700;font-size:15px;border-bottom:1px solid var(--line)}
.mnav a:not(.btn):last-of-type{border-bottom:0}
.mnav .btn{width:100%;margin-top:14px;justify-content:center;text-align:center}

@media(max-width:1080px){
  /* Đệm 110px của desktop quá rộng khi chỉ còn 2 cột */
  .sec{padding:72px 0}
  .navtoggle{display:flex}
  /* CTA trên header nhường chỗ cho hamburger, đã có sẵn trong menu */
  header .hdr-cta{display:none}
  .mnav:not([hidden]){display:flex}
  header{position:sticky;top:0;z-index:50}
}

@media(max-width:720px){
  /* 11 section x 144px đệm = gần 1.600px cuộn thừa trên mobile */
  .sec{padding:48px 0}
  .wrap{padding:0 18px}
  h2.sh{font-size:26px}
  .sd{font-size:14.5px}

  /* Hero: bớt khoảng chết giữa tiêu đề và ảnh */
  .heroart{margin-top:22px}
  .hero{padding-bottom:8px}

  /* Thẻ mentor trong slider rộng 560px trên màn 390 → cắt mất nội dung */
  .tcard{width:86vw;max-width:340px}
  .tslider{overflow-x:auto;-webkit-overflow-scrolling:touch;scroll-snap-type:x mandatory}
  .tcard{scroll-snap-align:center}

  /* Card khóa học: giá là thứ phải đọc được ngay */
  .meta .now{font-size:24px}
  .ccard .body{padding:18px}

  /* Form liên hệ + FAQ: vùng chạm đủ lớn */
  .faq summary{padding:15px 14px}
  input,select,textarea{font-size:16px} /* iOS không auto-zoom khi >=16px */
}

@media(max-width:420px){
  h2.sh{font-size:23px}
  .hero h1{font-size:20px}
  .sec{padding:40px 0}
}

/* ── Sửa xung đột với CSS theme (app.css nạp trước) ────────────
   app.css có svg{width:100%} toàn cục → mọi icon inline (đều có
   width/height gốc) bị kéo full width, đẩy chữ xuống dòng.       */
header svg, footer svg, .sec svg, .hero svg, .mnav svg{width:auto;height:auto;max-width:100%}

/* Logo design đặt 32px (header) / 52px (hero) — nhỏ so với thực tế
   dùng, nhất là logo có phần chữ "DigiTrain" cần đọc được.       */
/* Header cao 76px mà logo chỉ 40px → thừa 36px khoảng trống dọc.
   Siết đệm để logo (có phần chữ "DigiTrain") to và đọc được hơn. */
header .wrap{height:70px;gap:22px}
header img{height:52px}
.herologo{height:68px;margin-bottom:22px}

@media(max-width:720px){
  header .wrap{height:62px;gap:12px}
  header img{height:46px}
  .herologo{height:56px;margin-bottom:18px}
}

/* ── Footer trên mobile ────────────────────────────────────────
   Design đổ 5 cột về 1 cột: rất dài và thừa khoảng trắng hai bên.
   Khối brand giữ full width, 4 cột link xếp 2×2 cho đỡ hụt.     */
@media(max-width:720px){
  footer .cols{grid-template-columns:1fr 1fr;gap:28px 20px}
  footer .cols>div:first-child{grid-column:1/-1}
  footer .cols h4{margin-bottom:10px}
  footer .cols li{margin-bottom:8px}
  /* Logo đối tác co theo cột, không tràn */
  footer .orgs img{max-width:100%}
  footer .bot{flex-direction:column;gap:6px;text-align:center}
}

/* Màn rất hẹp: 2 cột làm chữ vỡ chữ, trả về 1 cột */
@media(max-width:360px){
  footer .cols{grid-template-columns:1fr}
  footer .cols>div:first-child{grid-column:auto}
}

/* app.css có `body,h1..h6{color:#374151}` — selector nhắm thẳng h1..h6 nên
   thắng cả kế thừa, làm mọi tiêu đề ra xám xanh #374151 thay vì #18332A.
   Design KHÔNG đặt màu cho heading mà để kế thừa container (body → --ink,
   .fin → #fff), nên trả về đúng cơ chế đó thay vì hardcode từng màu.
   `footer h4{color:#fff}` (0,0,2) và `.hero h1 em` vẫn thắng bình thường. */
h1, h2, h3, h4, h5, h6 { color: inherit; }