:root{
  --bg:#fdf9f1; --bg2:#f8f0e2; --card:#ffffff;
  --ink:#2b1418; --ink2:#5f4a44; --muted:#94817a; --line:rgba(123,30,43,.12);
  --maroon:#7b1e2b; --maroon-d:#5a141d; --maroon-l:#a6384a; --maroon-soft:#f6e4e2;
  --gold:#f0a91c; --gold-d:#cf8a09; --gold-l:#ffd977; --cream:#fbf3e1;
  --c-junior:#e8574c; --c-agent:#0fa697; --c-architect:#6d4bd8; --c-fasttrack:#2f74d0; --c-luyenthi:#e0912a;
  --glass:rgba(255,255,255,.74); --gline:rgba(255,255,255,.9);
  --sh:0 18px 44px rgba(90,20,29,.10); --sh-sm:0 8px 22px rgba(90,20,29,.08); --sh-lg:0 32px 74px rgba(90,20,29,.16);
  --r:26px; --maxw:1200px; --ac:var(--maroon);
  --fd:'Baloo 2','Be Vietnam Pro',sans-serif; --fb:'Be Vietnam Pro',system-ui,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--fb);color:var(--ink);line-height:1.62;-webkit-font-smoothing:antialiased;overflow-x:hidden;background:var(--bg)}
/* Hai quầng sáng nền: tách sang lớp position:fixed riêng + translateZ(0) để trình duyệt tách layer GPU.
   Trước đây dùng background-attachment:fixed trên body — mỗi khung cuộn phải vẽ lại toàn màn hình (đo được ~66ms/khung trên CPU yếu). */
body::before{content:'';position:absolute;top:0;left:0;right:0;height:1500px;z-index:-10;pointer-events:none;
  background:
   radial-gradient(1200px 620px at 8% -6%, #fff2d9 0%, transparent 58%),
   radial-gradient(1000px 560px at 104% 3%, #f9e2dc 0%, transparent 52%)}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
h1,h2,h3,h4{font-family:var(--fd);font-weight:700;line-height:1.1;letter-spacing:-.01em}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 22px}
.sec{padding:74px 0;position:relative}
.sec.tight{padding:52px 0}
.center{text-align:center}
.ey{display:inline-block;font-family:var(--fb);font-weight:800;font-size:12.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--maroon);background:#fff;border:1px solid var(--line);padding:8px 16px;border-radius:100px;box-shadow:var(--sh-sm)}
.h2{font-size:clamp(30px,4.4vw,46px);color:var(--ink)}
.lead{color:var(--ink2);font-size:clamp(16px,1.7vw,19px);max-width:720px;margin:14px auto 0}
.btn{display:inline-flex;align-items:center;gap:9px;font-family:var(--fb);font-weight:700;font-size:15.5px;border:none;cursor:pointer;
  padding:14px 26px;border-radius:100px;transition:.2s;white-space:nowrap}
.btn.p{background:linear-gradient(180deg,var(--maroon-l),var(--maroon));color:#fff;box-shadow:0 12px 28px rgba(123,30,43,.32)}
.btn.p:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(123,30,43,.4)}
.btn.g{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:#5a2a06;box-shadow:0 12px 26px rgba(240,169,28,.36)}
.btn.g:hover{transform:translateY(-2px)}
.btn.o{background:#fff;color:var(--maroon);border:1.6px solid var(--line);box-shadow:var(--sh-sm)}
.btn.o:hover{border-color:var(--maroon);transform:translateY(-2px)}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--sh)}
.glass{background:var(--glass);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border:1px solid var(--gline);border-radius:var(--r);box-shadow:var(--sh)}
.rv{opacity:0;transform:translateY(26px);transition:.7s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}

/* ---------- header (2-tier) ---------- */
.topbar{background:linear-gradient(90deg,var(--maroon-d),var(--maroon))}
.tb{max-width:1380px;margin:0 auto;padding:0 20px;height:44px;display:flex;align-items:center;gap:16px}
.tbrand{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:.05em;color:#fff;cursor:pointer;white-space:nowrap}
.tbrand span{color:var(--gold-l)}
.tnav{display:flex;gap:2px}
.tnav a{color:rgba(255,255,255,.9);font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;padding:6px 11px;border-radius:8px;cursor:pointer;transition:.15s;white-space:nowrap}
.tnav a:hover{color:var(--gold-l);background:rgba(255,255,255,.1)}
.tright{margin-left:auto;display:flex;align-items:center;gap:14px}
.tphone{font-weight:800;font-size:13.5px;color:#fff;white-space:nowrap}
.tsoc{display:flex;align-items:center;gap:7px}
.tsoc a{width:29px;height:29px;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;cursor:pointer;transition:.15s}
.tsoc a:hover{background:var(--gold);color:var(--maroon-d)}
.tsoc a.zalo{width:auto;padding:0 9px;border-radius:100px;font-size:10.5px;font-weight:800;letter-spacing:.02em}
header{position:sticky;top:0;z-index:60;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 3px 16px rgba(90,20,29,.06)}
.nav{max-width:1380px;margin:0 auto;padding:10px 20px;display:flex;align-items:center;gap:10px}
.brand{cursor:pointer;flex:none}
.brand img{height:44px;display:block}
.pillnav{display:flex;align-items:center;gap:6px;margin:0 auto}
.pill{position:relative}
.pill>.pl{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:100px;cursor:pointer;transition:.16s;white-space:nowrap;background:#fff;background:color-mix(in srgb,var(--pc,var(--maroon)) 11%,#fff);border:1.6px solid #fff;border:1.6px solid color-mix(in srgb,var(--pc,var(--maroon)) 36%,#fff);box-shadow:var(--sh-sm)}
.pl .pe{font-size:21px;line-height:1;flex:none}
.pl .pt{display:flex;flex-direction:column;line-height:1.14;text-align:left}
.pl .pt b{font-family:var(--fd);font-weight:700;font-size:14px;color:var(--ink)}
.pl .pt i{font-style:normal;font-size:10px;font-weight:700;color:var(--pc,var(--maroon));color:color-mix(in srgb,var(--pc,var(--maroon)) 66%,#4a3a36)}
.pl .cr{font-size:10px;color:var(--pc,var(--maroon));opacity:.85;transition:.16s;align-self:center;margin-left:1px}
.pill:hover>.pl{background:linear-gradient(180deg,var(--pc,var(--maroon)),var(--pc,var(--maroon)));background:linear-gradient(180deg,var(--pc,var(--maroon)),color-mix(in srgb,var(--pc,var(--maroon)) 74%,#000));border-color:transparent;box-shadow:0 10px 22px transparent;box-shadow:0 10px 22px color-mix(in srgb,var(--pc,var(--maroon)) 42%,transparent)}
.pill.active>.pl{background:linear-gradient(180deg,var(--pc,var(--maroon)),var(--pc,var(--maroon)));background:linear-gradient(180deg,var(--pc,var(--maroon)),color-mix(in srgb,var(--pc,var(--maroon)) 74%,#000));border-color:transparent;box-shadow:0 8px 18px transparent;box-shadow:0 8px 18px color-mix(in srgb,var(--pc,var(--maroon)) 40%,transparent)}
.pill.active>.pl .pt b,.pill.active>.pl .pt i,.pill.active>.pl .cr,.pill.active>.pl .pe{color:#fff}
.pill:hover>.pl .pt b,.pill:hover>.pl .pt i,.pill:hover>.pl .cr{color:#fff}
.pill:hover>.pl .cr{transform:rotate(180deg);opacity:1}
.pdrop{position:absolute;top:calc(100% + 12px);left:50%;transform:translateX(-50%) translateY(8px);width:min(470px,92vw);background:#fff;border:1px solid var(--line);border-radius:20px;box-shadow:var(--sh-lg);padding:14px;opacity:0;visibility:hidden;transition:.18s;z-index:70}
.pdrop::before{content:"";position:absolute;top:-14px;left:0;right:0;height:16px}
.pill:hover .pdrop{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.pdh{display:flex;gap:12px;align-items:center;padding:10px 12px;border-radius:14px;cursor:pointer;transition:.15s}
.pdh:hover{background:var(--bg2)}
.pdh .di{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;font-size:24px;color:#fff;flex:none;box-shadow:var(--sh-sm)}
.pdh b{display:block;font-family:var(--fd);font-size:16px}
.pdh small{color:var(--muted);font-size:12.5px}
.pdh .goa{margin-left:auto;font-weight:800;font-size:12px;color:var(--pc,var(--maroon));white-space:nowrap;align-self:center}
.pdc{display:flex;flex-direction:column;gap:3px;margin-top:10px;padding-top:12px;border-top:1px solid var(--line);max-height:min(64vh,440px);overflow-y:auto}
.pdc a{display:flex;gap:10px;align-items:flex-start;font-size:13px;font-weight:600;padding:9px 11px;border-radius:11px;color:var(--ink2);cursor:pointer;transition:.14s}
.pdc a .cc{font-family:var(--fd);font-weight:800;font-size:11px;color:#fff;background:var(--pc,var(--maroon));padding:4px 8px;border-radius:7px;flex:none;min-width:34px;text-align:center;margin-top:1px}
.pdc a .ci{display:flex;flex-direction:column;gap:2px;min-width:0}
.pdc a .ci b{font-family:var(--fb);font-weight:700;font-size:13px;line-height:1.25;color:var(--ink);letter-spacing:.1px;white-space:normal}
.pdc a .ci small{font-size:11.5px;font-weight:500;line-height:1.35;color:var(--muted)}
.pdc a:hover{align-items:flex-start}
.pdc a:hover .ci small{color:var(--ink2)}
/* selected course in dropdown */
.pdc a.active{background:#fff;background:color-mix(in srgb,var(--pc,var(--maroon)) 12%,#fff);box-shadow:inset 3px 0 0 var(--pc,var(--maroon))}
.pdc a.active .ci b{color:var(--pc,var(--maroon))}
.pdc a.active .ci small{color:var(--ink2)}
.pdc a:hover{background:var(--bg2);color:var(--ink)}
.cta{display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:800;font-size:14.5px;color:#fff;background:linear-gradient(180deg,var(--maroon-l),var(--maroon));border:none;padding:12px 18px;border-radius:100px;cursor:pointer;box-shadow:0 10px 24px rgba(123,30,43,.3);transition:.18s;white-space:nowrap;flex:none}
.cta:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(123,30,43,.42)}
.burger{display:none;background:var(--maroon);color:#fff;border:none;width:46px;height:46px;border-radius:13px;font-size:21px;cursor:pointer;margin-left:auto;flex:none}
#mob{display:none;position:fixed;inset:0;z-index:100;background:rgba(43,20,24,.5)}
#mob .in{position:absolute;top:0;right:0;width:min(360px,90vw);height:100%;background:var(--bg);padding:20px;overflow:auto;box-shadow:var(--sh-lg)}
#mob a{display:block;padding:12px 10px;border-bottom:1px solid var(--line);font-weight:600;cursor:pointer}
#mob a.active{color:var(--maroon);font-weight:800;background:#fff;background:color-mix(in srgb,var(--maroon) 8%,#fff);border-radius:8px}
/* ---------- hero ---------- */
.hero{position:relative;padding:56px 0 40px;overflow:hidden}
.hero .grid{display:grid;grid-template-columns:1.04fr .96fr;gap:40px;align-items:center}
.h1{font-size:clamp(38px,6vw,68px);line-height:1.02;color:var(--ink);letter-spacing:-.02em}
.h1 .mk{background:linear-gradient(120deg,var(--maroon),var(--c-junior) 55%,var(--gold));-webkit-background-clip:text;background-clip:text;color:transparent}
.hsub{color:var(--ink2);font-size:clamp(16px,1.9vw,20px);margin:20px 0 26px;max-width:540px}
.hsub b{color:var(--maroon)}
.collage{position:relative;height:520px}
.collage .g{position:absolute;border-radius:20px;overflow:hidden;box-shadow:var(--sh-lg);border:4px solid #fff}
.collage .g img{width:100%;height:100%;object-fit:cover}
.c1{width:60%;height:44%;top:0;right:0;z-index:3}
.c2{width:54%;height:40%;bottom:8%;left:0;z-index:4}
.c3{width:42%;height:34%;bottom:0;right:6%;z-index:5}
.badgef{position:absolute;background:#fff;border-radius:100px;padding:9px 15px;font-size:13px;font-weight:700;box-shadow:var(--sh);z-index:9;display:flex;align-items:center;gap:7px}
.g .gtag{position:absolute;top:8px;left:8px;background:rgba(20,8,10,.62);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:4px 10px;border-radius:100px;backdrop-filter:blur(5px);-webkit-backdrop-filter:blur(5px);z-index:6;white-space:nowrap}
.blob{position:absolute;border-radius:50%;filter:blur(60px);opacity:.5;z-index:0}

/* ---------- shared bits ---------- */
.itile{width:64px;height:64px;border-radius:19px;display:grid;place-items:center;font-size:31px;color:#fff;box-shadow:var(--sh-sm);flex:none}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.g5{display:grid;grid-template-columns:repeat(5,1fr);gap:16px}
@media(max-width:900px){.g5{grid-template-columns:repeat(3,1fr)}}
@media(max-width:560px){.g5{grid-template-columns:repeat(2,1fr)}}
.usp{padding:26px}
.usp h3{font-size:19px;margin:16px 0 8px}
.usp p{color:var(--ink2);font-size:14.5px}

/* program cards */
.pc{border-radius:26px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:var(--sh);display:flex;flex-direction:column;transition:.22s;cursor:pointer}
.pc:hover{transform:translateY(-6px);box-shadow:var(--sh-lg)}
.pc .top{padding:22px 22px 18px;color:#fff;position:relative;overflow:hidden}
.pc .top .em{font-size:40px;filter:drop-shadow(0 4px 8px rgba(0,0,0,.2))}
.pc .top .tg{font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.92;margin-top:12px}
.pc .top h3{font-size:24px;margin:3px 0 2px}
.pc .top .lv{font-size:13px;opacity:.92;font-weight:600}
.pc .top .orb{position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.16);top:-40px;right:-30px}
.pc .bd{padding:20px 22px;flex:1;display:flex;flex-direction:column}
.pc .bd p{color:var(--ink2);font-size:14px;margin-bottom:12px}
.pc ul{list-style:none;display:flex;flex-direction:column;gap:8px;margin-bottom:14px}
.pc li{font-size:13.5px;color:var(--ink);display:flex;gap:8px;align-items:flex-start}
.pc li::before{content:"▸";color:var(--ac);font-weight:800;flex:none}
.pc .pfoot{margin-top:auto;display:flex;align-items:center;justify-content:space-between;padding-top:4px}
.kchip{font-size:12px;font-weight:800;padding:6px 12px;border-radius:100px;background:var(--bg2);color:var(--ac)}
.pc .go{font-weight:800;font-size:14px;color:var(--ac)}

/* roadmap horizontal */
.road{display:flex;align-items:flex-start;justify-content:space-between;gap:6px;position:relative;flex-wrap:nowrap;overflow-x:auto;padding:20px 4px 8px}
.rstep{display:flex;flex-direction:column;align-items:center;text-align:center;min-width:130px;flex:1;position:relative}
.rstep .rt{width:74px;height:74px;border-radius:22px;display:grid;place-items:center;font-size:34px;color:#fff;box-shadow:var(--sh);transform:perspective(500px) rotateX(12deg);transition:.2s;cursor:pointer}
.rstep:hover .rt{transform:perspective(500px) rotateX(0) translateY(-4px)}
.rstep b{font-family:var(--fd);font-size:15px;margin-top:14px}
.rstep small{font-size:12px;color:var(--muted)}
.rline{position:absolute;top:37px;left:60%;width:80%;height:3px;background:linear-gradient(90deg,var(--line),var(--line));z-index:-1;border-radius:2px}

/* dark showcase band */
.dark{background:linear-gradient(155deg,#7b1e2b 0%,#591420 48%,#3d0e18 100%);color:#fff;border-radius:34px;padding:52px 40px;position:relative;overflow:hidden;box-shadow:var(--sh-lg)}
.dark .ey{background:rgba(255,255,255,.1);color:#ffe0c2;border-color:rgba(255,255,255,.18)}
.dark h2{color:#fff}
/* .nxq von danh cho nen sang (chu mau maroon) - dat trong khoi .dark thi chu
   trung mau nen, tuong phan 1.00. Ep mau sang khi nam trong .dark. */
.dark .nxq{color:var(--cream)}
.dark .nxq span{color:#ffe0c2;opacity:.96}
.dark .glow{position:absolute;border-radius:50%;filter:blur(80px);opacity:.42}
.prodcard{border-radius:18px;overflow:hidden;background:#120a0d;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 44px rgba(0,0,0,.4)}
.prodcard img{width:100%;aspect-ratio:11/8;object-fit:cover}
.prodcard .cap{padding:12px 14px}
.prodcard .cap b{font-size:14px;display:block}
.prodcard .cap small{color:#c9a9a0;font-size:12px}
.rt-tag{display:inline-flex;align-items:center;gap:5px;font-size:11px;font-weight:800;color:#7fe6b0;background:rgba(20,60,40,.6);border:1px solid rgba(80,220,150,.3);padding:4px 9px;border-radius:100px;margin-bottom:8px}
.big{border-radius:22px;overflow:hidden;border:1px solid rgba(255,255,255,.12);box-shadow:0 26px 60px rgba(0,0,0,.5)}
.big img{width:100%;display:block}
.marq{display:flex;gap:16px;overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.marq .t{display:flex;gap:16px;animation:sc 34s linear infinite}
@keyframes sc{to{transform:translateX(-50%)}}

/* founder + coverflow */
.fdr{background:radial-gradient(130% 105% at 50% -12%,#8f2636 0%,#5e1826 46%,#3f1019 100%);color:#fff;overflow:hidden}
.fdr .ey{background:rgba(255,255,255,.1);color:#ffe0c2;border-color:rgba(255,255,255,.18)}
.fdr h2,.fdr h3{color:#fff}
.fdr .glow{position:absolute;border-radius:50%;filter:blur(90px);opacity:.4;pointer-events:none}
.fdrhead{display:grid;grid-template-columns:.92fr 1.12fr;gap:38px;align-items:center;position:relative}
.fdrsig{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.03));border:1px solid rgba(255,255,255,.15);border-radius:26px;padding:32px 28px;text-align:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}
.fdrav{width:112px;height:112px;border-radius:28px;margin:0 auto 16px;background:linear-gradient(150deg,var(--gold),#e0912a);display:grid;place-items:center;font-size:56px;box-shadow:0 18px 40px rgba(240,169,28,.35)}
.fdrsig b{font-family:var(--fd);font-size:19px;display:block;line-height:1.25}
.fdrsig .rl{color:var(--gold-l);font-size:12.5px;font-weight:700;margin-top:6px;letter-spacing:.02em}
.fdrsig .qt{color:rgba(255,255,255,.84);font-size:13.5px;font-style:italic;margin-top:16px;line-height:1.55;border-top:1px solid rgba(255,255,255,.12);padding-top:14px}
.fdrpts{display:grid;gap:13px;margin-top:22px}
.fdrpt{display:flex;gap:13px;align-items:flex-start}
.fdrpt .ic{flex:none;width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);display:grid;place-items:center;font-size:21px}
.fdrpt b{font-size:14.5px;display:block}
.fdrpt p{font-size:13px;color:rgba(255,255,255,.72);margin-top:3px;line-height:1.5}
.cflow{margin-top:52px;position:relative}
.cflab{text-align:center;margin-bottom:10px}
.cfstage{position:relative;height:376px;perspective:1500px;transform-style:preserve-3d}
.cfc{position:absolute;top:20px;left:50%;width:300px;height:300px;margin-left:-150px;border-radius:22px;overflow:hidden;cursor:pointer;background:#120a0d;border:1px solid rgba(255,255,255,.1);box-shadow:0 30px 70px rgba(0,0,0,.55);transition:transform .6s cubic-bezier(.22,.61,.36,1),opacity .6s,filter .6s;will-change:transform;transform-origin:center}
.cfc img{width:100%;height:100%;object-fit:cover;display:block}
.cfc .lay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.3) 0%,transparent 26%,transparent 52%,rgba(10,4,6,.94) 100%);opacity:0;transition:.4s}
.cfc.act .lay{opacity:1}
.cfc .top{position:absolute;top:12px;left:12px;font-size:11px;font-weight:800;color:#fff;background:rgba(0,0,0,.42);padding:4px 11px;border-radius:100px;backdrop-filter:blur(4px);opacity:0;transition:.45s}
.cfc.act .top{opacity:1}
.cfc .tt{position:absolute;left:18px;right:18px;bottom:16px;opacity:0;transform:translateY(10px);transition:.5s}
.cfc.act .tt{opacity:1;transform:none}
.cfc .tt .tg{display:inline-block;font-size:10.5px;font-weight:800;letter-spacing:.02em;padding:3px 10px;border-radius:100px;margin-bottom:8px}
.cfc .tt b{font-family:var(--fd);font-size:19px;display:block;color:#fff;line-height:1.15}
.cfc .tt small{font-size:12.5px;color:rgba(255,255,255,.82)}
.cfnav{width:48px;height:48px;border-radius:50%;border:1px solid rgba(255,255,255,.26);background:rgba(255,255,255,.08);color:#fff;font-size:24px;line-height:1;cursor:pointer;display:grid;place-items:center;position:absolute;top:calc(50% + 7px);transform:translateY(-50%);z-index:30;transition:.15s;backdrop-filter:blur(6px)}
.cfnav:hover{background:var(--gold);color:var(--maroon-d);border-color:var(--gold)}
.cfnav.pv{left:0}.cfnav.nx{right:0}
.cfdots{display:flex;gap:7px;justify-content:center;margin-top:26px;flex-wrap:wrap}
.cfdot{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.26);cursor:pointer;transition:.25s}
.cfdot.on{background:var(--gold);width:26px;border-radius:100px}
@media(max-width:820px){.fdrhead{grid-template-columns:1fr;gap:26px}.cfstage{height:288px}.cfc{width:234px;height:234px;margin-left:-117px}.cfnav{width:40px;height:40px;font-size:20px}}
/* blurred-image band */
.imgband{position:relative;overflow:hidden;color:#fff;background:#3d0f18}
.imgband .bg{position:absolute;inset:-20px;background-size:cover;background-position:center;filter:blur(8px) saturate(1.06);transform:scale(1.12);z-index:0}
.imgband .ov{position:absolute;inset:0;background:linear-gradient(115deg,rgba(90,20,29,.95) 0%,rgba(61,15,24,.86) 52%,rgba(43,20,24,.72) 100%);z-index:1}
.imgband>.wrap{position:relative;z-index:2}
.imgband .ey{background:rgba(255,255,255,.13);color:#ffe6cc;border-color:rgba(255,255,255,.22)}
.imgband h2{color:#fff}
.wc{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.wcfeat{display:grid;gap:15px;margin-top:24px}
.wcrow{display:flex;gap:14px;align-items:flex-start}
.wcrow .ic{flex:none;width:48px;height:48px;border-radius:14px;background:linear-gradient(150deg,var(--gold),#e0912a);display:grid;place-items:center;font-size:23px;box-shadow:0 10px 24px rgba(240,169,28,.3)}
.wcrow b{font-size:16px;display:block}
.wcrow p{font-size:13.5px;color:rgba(255,255,255,.8);margin-top:2px;line-height:1.5}
.wcbadge{background:linear-gradient(155deg,var(--gold-l),var(--gold) 55%,#e0912a);color:#5a2a06;border-radius:28px;padding:34px 30px;text-align:center;box-shadow:0 26px 64px rgba(0,0,0,.42)}
.wcbadge b{font-family:var(--fd);font-size:clamp(40px,6vw,56px);display:block;line-height:1}
.wcbadge span{font-weight:800;font-size:14.5px;display:block;margin-top:2px}
.wcbadge .div{margin-top:16px;border-top:1.5px solid rgba(90,42,6,.22);padding-top:16px}
@media(max-width:820px){.wc{grid-template-columns:1fr;gap:28px}.wcbadge{max-width:340px;margin:0 auto}}

/* comparison */
.cmp{width:100%;border-collapse:separate;border-spacing:0;border-radius:20px;overflow:hidden;box-shadow:var(--sh);background:#fff;border:1px solid var(--line)}
.cmp th,.cmp td{padding:16px 18px;text-align:left;font-size:14.5px;border-bottom:1px solid var(--line)}
.cmp thead th{background:var(--maroon);color:#fff;font-family:var(--fd);font-size:15px}
.cmp thead th:last-child{background:var(--maroon-d)}
.cmp td:first-child{font-weight:700;color:var(--ink)}
.cmp .yes{color:#0c8f5f;font-weight:700}
.cmp .no{color:#b64a3a}
.cmp tr:last-child td{border-bottom:none}
.cmp.map td{vertical-align:top}
.cmp.map thead th:last-child{background:var(--maroon)}
.cmp td.us{background:#fbf6ec}

/* method */
.mstep{padding:24px;text-align:center}
.mstep .n{font-family:var(--fd);font-size:15px;font-weight:800;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;color:#fff;margin:0 auto 14px}
.mstep h4{font-size:17px;margin-bottom:6px}
.mstep p{font-size:13.5px;color:var(--ink2)}

/* faq */
.faq{border:1px solid var(--line);border-radius:16px;background:#fff;overflow:hidden;box-shadow:var(--sh-sm)}
.faq+.faq{margin-top:12px}
.faq q{display:flex;justify-content:space-between;gap:14px;padding:18px 22px;font-weight:700;font-style:normal;cursor:pointer;font-size:15.5px;align-items:center}
.faq q .ic{color:var(--maroon);font-size:22px;flex:none;transition:.2s}
.faq.op q .ic{transform:rotate(45deg)}
.faq .a{max-height:0;overflow:hidden;transition:.3s;color:var(--ink2);font-size:14.5px}
.faq.op .a{max-height:340px}
.faq .a p{padding:0 22px 20px}

/* form */
.form{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.form label{grid-column:span 1;display:flex;flex-direction:column;gap:6px;font-size:13px;font-weight:700;color:var(--ink2)}
.form label.full{grid-column:1/-1}
.form input,.form select,.form textarea{border:1.5px solid var(--line);border-radius:13px;padding:12px 14px;font-family:var(--fb);font-size:14.5px;background:#fff;color:var(--ink)}
.form input:focus,.form select:focus,.form textarea:focus{outline:none;border-color:var(--maroon)}
.hp{position:absolute;left:-9999px}
.captcha{display:flex;align-items:center;gap:10px;background:var(--bg2);border-radius:13px;padding:8px 12px;border:1px solid var(--line)}
.captcha b{font-family:var(--fd);font-size:18px;color:var(--maroon)}
.captcha input{width:74px}

/* program/course detail hero */
.phero{color:#fff;border-radius:0 0 40px 40px;padding:44px 0 56px;position:relative;overflow:hidden}
.phero .orb{position:absolute;border-radius:50%;background:rgba(255,255,255,.12);filter:blur(10px)}
.crumb{font-size:13px;opacity:.9;font-weight:600;margin-bottom:14px}
.crumb a{cursor:pointer}.crumb a:hover{text-decoration:underline}
.ptitle{font-size:clamp(32px,5vw,52px);line-height:1.04;margin:6px 0 10px}
.metaline{font-size:12.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.92}
.sblock{padding:28px}
.sblock h3{font-size:20px;margin-bottom:16px;display:flex;align-items:center;gap:10px}
.sylo{counter-reset:s;list-style:none;display:flex;flex-direction:column;gap:14px}
.sylo li{display:grid;grid-template-columns:40px 1fr;gap:14px;align-items:start}
.sylo .num{counter-increment:s;width:40px;height:40px;border-radius:12px;background:var(--ac);color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:800;font-size:16px}
.sylo .num::before{content:counter(s)}
.sylo b{font-size:15.5px}
.sylo .pts{list-style:none;margin-top:6px;display:flex;flex-direction:column;gap:5px}
.sylo .pts li{display:block;font-size:13.5px;color:var(--ink2);padding-left:16px;position:relative}
.sylo .pts li::before{content:"—";position:absolute;left:0;color:var(--ac)}
.chk{list-style:none;display:flex;flex-direction:column;gap:10px}
.chk li{display:flex;gap:10px;font-size:14.5px;align-items:flex-start}
.chk li::before{content:"✓";color:#0c8f5f;font-weight:800;flex:none}
.tagrow{display:flex;flex-wrap:wrap;gap:8px}
.tag{font-size:12.5px;font-weight:700;padding:7px 13px;border-radius:100px;background:var(--bg2);border:1px solid var(--line);color:var(--ink)}
.tag.ac{background:#fff;background:color-mix(in srgb,var(--ac) 12%,#fff);color:var(--ac);border-color:#fff;border-color:color-mix(in srgb,var(--ac) 24%,#fff)}
.clist{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.crow{display:flex;gap:13px;align-items:center;padding:15px 17px;border:1px solid var(--line);border-radius:16px;background:#fff;cursor:pointer;transition:.16s;box-shadow:var(--sh-sm)}
.crow:hover{transform:translateY(-3px);box-shadow:var(--sh);border-color:#fff;border-color:color-mix(in srgb,var(--ac) 40%,#fff)}
.crow .cc{font-family:var(--fd);font-weight:800;font-size:13px;color:#fff;background:var(--ac);padding:7px 10px;border-radius:10px;flex:none}
.crow b{font-size:15px;display:block}
.crow small{color:var(--muted);font-size:12.5px}
.crow .ar{margin-left:auto;color:var(--ac);font-weight:800;font-size:18px}
.wg{display:flex;flex-wrap:wrap;gap:10px}
.wtile{display:flex;gap:9px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:11px 15px;box-shadow:var(--sh-sm);font-size:13.5px;font-weight:600}
.wtile .e{font-size:22px}
.hlrow{display:flex;gap:14px;align-items:flex-start}
.hlrow .e{width:46px;height:46px;border-radius:13px;background:#fff;background:color-mix(in srgb,var(--ac) 14%,#fff);display:grid;place-items:center;font-size:22px;flex:none}
.hlrow b{font-size:15.5px;display:block;margin-bottom:2px}
.hlrow p{font-size:13.5px;color:var(--ink2)}
.band{border-radius:30px}
.band.cream{background:var(--bg2)}
.concept{border-radius:18px;padding:20px;color:#fff;min-height:150px;display:flex;flex-direction:column;justify-content:flex-end;box-shadow:var(--sh);position:relative;overflow:hidden}
.concept .e{font-size:38px;position:absolute;top:14px;right:16px;opacity:.9}
.concept b{font-size:16px;font-family:var(--fd)}
.concept small{font-size:12px;opacity:.9}
.foot{background:linear-gradient(160deg,var(--maroon),var(--maroon-d));color:#fff;padding:52px 0 26px;margin-top:20px}
.foot a{color:rgba(255,255,255,.85);font-size:14px;display:block;padding:4px 0;cursor:pointer}
.foot a:hover{color:var(--gold-l)}
.foot h4{font-size:15px;margin-bottom:12px;color:var(--gold-l)}
.foot .cols{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:30px}
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%);background:#0c8f5f;color:#fff;padding:14px 24px;border-radius:14px;font-weight:700;box-shadow:var(--sh-lg);z-index:200;display:none}

@media(max-width:1200px){.tnav,.pillnav,.cta,.tphone{display:none}.burger{display:block}}
@media(max-width:960px){
  .hero .grid,.grid3,.grid2,.grid4,.clist,.form,.foot .cols{grid-template-columns:1fr}
  .grid4{grid-template-columns:1fr 1fr}
  .collage{height:400px}
  .tnav,.pillnav,.cta,.tphone{display:none}
  .burger{display:block}
  .dark{padding:36px 22px;border-radius:26px}
}
@media(max-width:560px){.grid4{grid-template-columns:1fr}}
.wtabs{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.wtab{font-family:var(--fb);font-weight:700;font-size:13.5px;color:#fff;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2);padding:9px 16px;border-radius:100px;cursor:pointer;transition:.15s}
.wtab:hover{background:rgba(255,255,255,.2)}
.wtab.on{background:var(--gold);color:var(--maroon-d);border-color:transparent}
.wcard{height:100%}
.ptab{font-family:var(--fb);font-weight:700;font-size:13.5px;padding:9px 16px;border-radius:100px;cursor:pointer;background:var(--bg2);color:var(--ink);border:1px solid var(--line);transition:.15s}
.ptab:hover{border-color:var(--maroon)}
.ptab.on{background:var(--maroon);color:#fff;border-color:transparent}.wcard .prodcard{height:100%}
.seal{width:150px;height:150px;border-radius:50%;background:radial-gradient(circle at 40% 35%,#9a2c3d,#5a141d);border:5px solid var(--gold);display:grid;place-items:center;box-shadow:0 14px 34px rgba(90,20,29,.35);position:relative;flex:none}
.seal .paw{font-size:52px}.seal .rim{position:absolute;inset:10px;border:1.5px dashed rgba(255,215,120,.6);border-radius:50%}
.seal b{position:absolute;bottom:16px;font-family:var(--fd);font-size:10px;letter-spacing:.14em;color:var(--gold-l)}
.evid{display:flex;gap:13px;align-items:flex-start;padding:18px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:var(--sh-sm)}
.evid .n{width:40px;height:40px;border-radius:12px;background:linear-gradient(150deg,var(--maroon-l),var(--maroon));color:#fff;display:grid;place-items:center;font-family:var(--fd);font-weight:800;flex:none}
.evid b{display:block;font-size:15px;margin-bottom:3px}.evid p{font-size:13px;color:var(--ink2)}
.jrny{display:flex;align-items:stretch;overflow-x:auto;padding:10px 4px 18px}
.jcard{flex:1;min-width:212px;position:relative;padding:0 9px}
.jcard .in{background:#fff;border:1px solid var(--line);border-top:4px solid var(--ac);border-radius:18px;padding:20px;box-shadow:var(--sh);height:100%;cursor:pointer;transition:.18s}
.jcard .in:hover{transform:translateY(-4px);box-shadow:var(--sh-lg)}
.jcard .em{font-size:34px;line-height:1}.jcard h4{font-family:var(--fd);font-size:19px;margin:8px 0 1px}
.jcard .lv{font-size:12px;color:var(--muted);font-weight:600;margin-bottom:9px}
.jcard .out{font-size:12.5px;color:var(--ink2);line-height:1.5}.jcard .kc{margin-top:10px;font-size:12.5px;font-weight:800;color:var(--ac)}
.jcard .arrow{position:absolute;right:-9px;top:66px;z-index:2;color:#c9a99f;font-size:24px;font-weight:800}
.ai{display:inline-block;font-size:11px;font-weight:800;padding:4px 11px;border-radius:100px;background:#fff;background:color-mix(in srgb,var(--ac) 14%,#fff);color:var(--ac);margin-bottom:9px;white-space:nowrap}
.flow{display:flex;gap:8px;align-items:center;overflow-x:auto;padding:6px 2px 14px}
.fnode{flex:none;background:#fff;border:1px solid var(--line);border-radius:13px;padding:10px 14px;box-shadow:var(--sh-sm);cursor:pointer;transition:.15s;min-width:154px}
.fnode:hover{border-color:var(--ac);transform:translateY(-2px);box-shadow:var(--sh)}
.fnode .fc{font-family:var(--fd);font-weight:800;font-size:11px;color:#fff;background:var(--ac);padding:3px 8px;border-radius:7px;display:inline-block;margin-bottom:5px}
.fnode b{display:block;font-size:13px;line-height:1.2}.fnode small{font-size:11.5px;color:var(--muted)}
.farr{flex:none;color:var(--ac);font-weight:800;font-size:17px;opacity:.7}

/* ===== Ten tieng Viet cua khoa (them 2026-09-10) =====
   .cvn  : ten Viet trong menu tha xuong, nam NGAY SAU ten tieng Anh, cach nhau dau "-"
           (nam trong chinh the <b> nen cung mot dong; .cvsep la dau gach)
   .ptitle-vn : dong ten Viet duoi tieu de trang chi tiet khoa
   Chi 18 khoa K1-K18 co ten tieng Viet (bang VINAME trong site.js). */
.ci b .cvn{font-family:var(--fb);font-weight:600;color:var(--maroon);opacity:.95}
.ci b .cvsep{font-style:normal;font-weight:500;opacity:.45}
.ptitle-vn{font-family:var(--fb);font-weight:600;font-size:clamp(17px,2.4vw,23px);
  line-height:1.2;margin:-4px 0 12px;opacity:.9}

/* ---------- QUEST STAT BOARD (game style) ---------- */
.qsec{position:relative}
.qhead{font-size:clamp(26px,3.8vw,42px);color:var(--maroon);letter-spacing:.01em}
.qey{font-family:var(--fd);font-weight:700;line-height:1.4}
.qbadge{display:inline-block;position:relative;background:linear-gradient(180deg,var(--maroon-l),var(--maroon));color:#fff;
  padding:2px 20px 6px;border-radius:16px;transform:rotate(-1.6deg);
  box-shadow:0 6px 0 var(--maroon-d),0 16px 28px rgba(123,30,43,.3)}
.qbadge i{position:absolute;right:-15px;top:-14px;font-style:normal;font-size:22px;color:var(--gold);
  text-shadow:0 2px 6px rgba(240,169,28,.5);animation:qtw 1.7s ease-in-out infinite}
@keyframes qtw{0%,100%{transform:scale(1) rotate(0)}50%{transform:scale(1.3) rotate(20deg)}}
.qsub{font-size:14.5px;color:var(--ink2);font-weight:600;margin:14px auto 0;max-width:720px}
.qboard{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:30px}
.qcard{position:relative;display:flex;flex-direction:column;align-items:flex-start;border-radius:26px;padding:20px 20px 18px;color:#fff;overflow:hidden;isolation:isolate;
  background:linear-gradient(165deg,var(--qc),var(--qc2));
  border:2px solid rgba(255,255,255,.26);
  box-shadow:0 9px 0 var(--qc2),0 22px 42px rgba(43,20,24,.22);
  transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s}
.qcard::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(130px 90px at 84% 4%,rgba(255,255,255,.28),transparent 70%),
  radial-gradient(100px 80px at 4% 100%,rgba(0,0,0,.2),transparent 72%)}
.qcard::after{content:'';position:absolute;top:0;left:-70%;width:42%;height:100%;z-index:-1;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.34),transparent);transform:skewX(-18deg);transition:left .65s ease}
.qcard:hover{transform:translateY(6px);box-shadow:0 3px 0 var(--qc2),0 12px 24px rgba(43,20,24,.2)}
.qcard:hover::after{left:130%}
.qunlock{display:inline-flex;align-items:center;gap:5px;font-size:9.5px;font-weight:800;letter-spacing:.11em;
  background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.3);padding:4px 11px;border-radius:100px;color:var(--gold-l)}
.qicon{align-self:center;position:relative;display:grid;place-items:center;width:150px;height:150px;margin:22px 0 14px;font-size:96px;line-height:1}
.qicon::before{content:'';position:absolute;inset:6px;border-radius:50%;z-index:-1;
  background:radial-gradient(circle,rgba(255,255,255,.34) 0%,rgba(255,255,255,.1) 48%,transparent 70%)}
.qicon::after{content:'';position:absolute;left:50%;bottom:4px;width:78px;height:14px;margin-left:-39px;border-radius:50%;z-index:-1;
  background:radial-gradient(ellipse,rgba(0,0,0,.34),transparent 70%);animation:qshadow 3.2s ease-in-out infinite;animation-delay:calc(var(--qd,0s)*4)}
.qicon span{display:inline-block;transform-origin:50% 90%;filter:drop-shadow(0 10px 12px rgba(0,0,0,.3));
  animation:qbob 3.2s ease-in-out infinite;animation-delay:calc(var(--qd,0s)*4);transition:scale .25s cubic-bezier(.2,.7,.2,1),rotate .25s cubic-bezier(.2,.7,.2,1)}
.qcard:hover .qicon span{scale:1.14;rotate:8deg}
@keyframes qbob{0%,100%{transform:translateY(0) rotate(-5deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes qshadow{0%,100%{transform:scaleX(1);opacity:1}50%{transform:scaleX(.7);opacity:.55}}
.qkick{font-size:11.5px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:rgba(255,255,255,.72)}
.qnum{font-family:var(--fd);font-size:clamp(32px,3.8vw,44px);line-height:1.06;color:#fff;text-shadow:0 3px 0 rgba(0,0,0,.22)}
.qnum em{font-style:normal;color:var(--gold-l)}
.qlab{display:block;font-size:13.5px;font-weight:800;color:var(--gold-l);margin-top:3px;text-wrap:balance}
.qdesc{font-size:12.5px;line-height:1.52;color:rgba(255,255,255,.85);margin:9px 0 14px;text-wrap:pretty}
.qbar{align-self:stretch;height:9px;border-radius:100px;background:rgba(0,0,0,.28);margin-top:auto;overflow:hidden;border:1px solid rgba(255,255,255,.16)}
.qbar i{display:block;height:100%;width:0;border-radius:100px;background:linear-gradient(90deg,var(--gold-l),var(--gold));
  box-shadow:0 0 12px rgba(255,217,119,.75);transition:width 1.1s cubic-bezier(.2,.7,.2,1) calc(.3s + var(--qd,0s))}
.qboard.in .qbar i{width:100%}
@media(max-width:900px){.qboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.qboard{grid-template-columns:1fr;gap:14px}.qbadge{padding:2px 14px 5px}.qicon{width:128px;height:128px;font-size:80px;margin-top:14px}}
@media(prefers-reduced-motion:reduce){.qbadge i,.qicon span,.qicon::after{animation:none}.qcard,.qcard .qicon span,.qbar i{transition:none}}

/* ---------- HERO — game-world backdrop (all tiers) ---------- */
.hero{isolation:isolate}
.hero::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(/assets/img/hero_world.webp) 72% 58%/cover no-repeat}
.hero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  linear-gradient(90deg,var(--bg) 0%,rgba(253,249,241,.96) 26%,rgba(253,249,241,.72) 46%,rgba(253,249,241,.2) 68%,rgba(253,249,241,.08) 100%),
  linear-gradient(180deg,rgba(253,249,241,.55) 0%,transparent 18%,transparent 78%,var(--bg) 100%)}
.hero .blob{z-index:-1}
@media(max-width:960px){
  .hero::before{background-position:78% 50%}
  .hero::after{background:linear-gradient(180deg,rgba(253,249,241,.97) 0%,rgba(253,249,241,.9) 45%,rgba(253,249,241,.45) 70%,var(--bg) 100%)}
}

/* ---------- PROGRAM SECTION — level-select world: islands top-left · goal island in the empty grid slot · cloud sea at the bottom ---------- */
.pgsec,.band.cream.pgsec{isolation:isolate;overflow:hidden;background:url(/assets/img/prog/clouds.webp) center bottom -34px/max(100%,1500px) auto no-repeat,var(--bg2)}
.pgsec::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(/assets/img/programs_map.webp) -1% 30px/clamp(720px,58%,1250px) auto no-repeat;
  -webkit-mask:linear-gradient(180deg,#000 0,#000 calc(30px + clamp(720px,58%,1250px)*.5),transparent calc(30px + clamp(720px,58%,1250px)*.66)),linear-gradient(90deg,#000 34%,transparent 60%);
  -webkit-mask-composite:source-in;mask-composite:intersect}
.pgsec::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 40% 15% at 50% 12%,rgba(248,240,226,.96) 50%,rgba(248,240,226,0) 100%),
  linear-gradient(180deg,var(--bg2) 0%,transparent 5%)}
.pgoal{background:url(/assets/img/prog/goal.webp) center 42%/min(118%,520px) auto no-repeat;min-height:320px;animation:pgfloat 5s ease-in-out infinite;filter:drop-shadow(0 18px 24px rgba(90,20,29,.12))}
@keyframes pgfloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@media(prefers-reduced-motion:reduce){.pgoal{animation:none}}
@media(max-width:960px){
  .pgoal{display:none}
  .pgsec::before{background-size:min(150%,1100px) auto;background-position:0 10px}
  .pgsec::after{background:linear-gradient(180deg,rgba(248,240,226,.8) 0%,rgba(248,240,226,.84) 30%,rgba(248,240,226,0) 60%)}
}

/* ---------- PROGRAM CARDS v2 — kids hero + faded 3D product world (VUS-style) ---------- */
.pc .top{height:250px;padding:0;isolation:isolate}
.pc .top .scn{position:absolute;inset:0;z-index:-1;background:center/cover no-repeat;opacity:.34;mix-blend-mode:luminosity;transition:transform .5s ease,opacity .3s}
.pc .top::after{content:'';position:absolute;inset:auto 0 0 0;height:46%;z-index:-1;background:radial-gradient(ellipse 55% 70% at 50% 100%,rgba(255,255,255,.28),transparent 70%)}
.pc .top .orb{top:-50px;right:-40px;z-index:-1}
.pc .top .em{position:absolute;top:14px;left:16px;font-size:30px;opacity:.9}
.pc .top .kids{position:absolute;left:50%;bottom:0;height:100%;width:auto;max-width:none;transform:translateX(-50%);filter:drop-shadow(0 10px 18px rgba(0,0,0,.18));transition:transform .35s cubic-bezier(.2,.7,.2,1)}
.pc:hover .top .kids{transform:translateX(-50%) scale(1.05)}
.pc:hover .top .scn{transform:scale(1.06);opacity:.44}
.pc .top .age{position:absolute;left:16px;bottom:14px;z-index:2;background:#ffd35c;color:#3a2206;font-size:13px;font-weight:800;padding:6px 14px;border-radius:100px;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.pc .bd{padding:20px 22px 22px}
.pc .bd .tg{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);opacity:.85}
.pc .bd h3{font-family:var(--fd);font-size:27px;line-height:1.1;color:var(--ac);text-transform:uppercase;letter-spacing:.01em;margin:2px 0 10px}
.pc .go{display:inline-flex;align-items:center;gap:8px;background:var(--ac);color:#fff;font-size:13.5px;padding:8px 8px 8px 16px;border-radius:100px;box-shadow:0 6px 16px rgba(0,0,0,.14)}
.pc .go i{font-style:normal;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:#fff;color:var(--ac);font-weight:900;transition:transform .2s}
.pc:hover .go i{transform:translateX(3px)}
@media(max-width:560px){.pc .top{height:230px}}

/* ---------- COURSE HERO — 3D theme world per course + glassmorphism project GIF ---------- */
.chero{background:var(--acd);isolation:isolate;padding:44px 0 60px}
.chero .chbg{position:absolute;inset:0;z-index:-2;background:center 60%/cover no-repeat;filter:saturate(1.1)}
.chero::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(90deg,var(--ac) 0%,var(--ac) 32%,transparent 52%,transparent 76%,transparent 100%),
  linear-gradient(180deg,rgba(0,0,0,0) 55%,var(--acd) 100%);background:
  linear-gradient(90deg,var(--ac) 0%,color-mix(in srgb,var(--ac) 90%,transparent) 32%,color-mix(in srgb,var(--ac) 45%,transparent) 52%,color-mix(in srgb,var(--ac) 12%,transparent) 76%,transparent 100%),
  linear-gradient(180deg,rgba(0,0,0,0) 55%,color-mix(in srgb,var(--acd) 55%,transparent) 100%)}
.chero .orb{z-index:-1}
.chgrid{display:grid;grid-template-columns:1.12fr .88fr;gap:44px;align-items:center}
.cglass{position:relative;padding:14px;border-radius:26px;background:linear-gradient(160deg,rgba(255,255,255,.26),transparent);background:linear-gradient(160deg,rgba(255,255,255,.26),color-mix(in srgb,var(--acd) 42%,transparent));border:1px solid rgba(255,255,255,.42);
  backdrop-filter:blur(18px) saturate(1.3);-webkit-backdrop-filter:blur(18px) saturate(1.3);
  box-shadow:0 30px 60px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.5);transform:rotate(1.2deg);animation:cgfloat 6s ease-in-out infinite}
.cglass::before{content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,.55),rgba(255,255,255,0) 40%);mask:linear-gradient(#000,#000) content-box,linear-gradient(#000,#000);-webkit-mask-composite:xor;mask-composite:exclude;padding:1px}
.cgimg{border-radius:16px;overflow:hidden;background:#0d1424;aspect-ratio:16/10;box-shadow:0 10px 26px rgba(0,0,0,.3)}
.cgimg img{width:100%;height:100%;object-fit:cover;display:block}
.cgcap{display:flex;flex-direction:column;gap:3px;margin-top:12px;padding:12px 14px;border-radius:14px;background:var(--acd);background:color-mix(in srgb,var(--acd) 72%,transparent);text-shadow:0 1px 2px rgba(0,0,0,.25)}
.cgcap .rt-tag{align-self:flex-start}
.cgcap b{font-family:var(--fd);font-size:19px;line-height:1.15}
.cgcap small{font-size:13px;opacity:.88}
@keyframes cgfloat{0%,100%{transform:rotate(1.2deg) translateY(0)}50%{transform:rotate(1.2deg) translateY(-10px)}}
@media(prefers-reduced-motion:reduce){.cglass{animation:none}}
@media(max-width:960px){.chgrid{grid-template-columns:1fr;gap:28px}.cglass{max-width:520px;transform:none;animation:none}
  .chero::after{background:linear-gradient(180deg,var(--ac) 0%,var(--ac) 55%,var(--acd) 100%);background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 94%,transparent) 0%,color-mix(in srgb,var(--ac) 80%,transparent) 55%,color-mix(in srgb,var(--acd) 55%,transparent) 100%)}}

/* ---------- Trang Lien he: form + nut lien he nhanh tren nen 3D "tram van hanh AI" ----------
   .ctsec   : nen anh contact_ops.webp (ban ngay) + lop phu kem nhe toan section, truot len duoi .phero 40px
   .ctpanel : 2 khung kinh mo (form trai, nut lien he phai), hoa van to ong mo
   .ctbtn   : nut vien thuoc; .hot = hotline mau vang */
.ctsec{position:relative;isolation:isolate;overflow:hidden;padding:76px 0 84px;background:#dcefff}
/* chi trang Lien he: truot len nam duoi .phero 40px va dinh vao footer */
.phero+.ctsec{margin:-40px 0 -20px;padding-top:112px}
.ctintro{max-width:880px;margin:0 auto 36px;color:var(--ink);text-shadow:0 2px 16px rgba(255,255,255,.9)}
.ctintro h2{margin:14px 0 10px}
.ctintro .lead{margin:0 auto;color:var(--ink2)}
.ctsec::before{content:'';position:absolute;inset:0;z-index:-2;background:url(/assets/img/contact_ops.webp) center 35%/cover no-repeat}
.ctsec::after{content:'';position:absolute;inset:0;z-index:-1;background:
  linear-gradient(180deg,rgba(255,250,240,.28) 0%,rgba(255,250,240,.06) 45%,rgba(251,243,225,.4) 100%)}
.ctgrid{display:grid;grid-template-columns:minmax(0,1.8fr) minmax(0,1fr);gap:28px;align-items:stretch}
.ctpanel{position:relative;border-radius:32px;padding:38px;color:#fff;
  background:linear-gradient(160deg,rgba(170,58,78,.93),rgba(123,30,43,.95));
  border:1px solid rgba(255,255,255,.35);box-shadow:0 26px 60px rgba(90,20,35,.3),0 4px 0 rgba(90,20,35,.15),inset 0 1px 0 rgba(255,255,255,.3);
  -webkit-backdrop-filter:blur(10px) saturate(1.2);backdrop-filter:blur(10px) saturate(1.2)}
.ctpanel::before{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='98' viewBox='0 0 56 98'%3E%3Cpath d='M28 66 0 50V17L28 1l28 16v33L28 66zm0 32V66' fill='none' stroke='%23fff' stroke-opacity='.08' stroke-width='1.5'/%3E%3C/svg%3E");
  -webkit-mask-image:linear-gradient(135deg,#000,transparent 65%);mask-image:linear-gradient(135deg,#000,transparent 65%)}
.ctpanel>*{position:relative}
.ctsec .sr{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* truong nhap dang vien thuoc nhu mau */
.ctsec .form{gap:16px}
.ctsec .form label{color:#fff;position:relative;min-width:0}
.ctsec .form input,.ctsec .form select,.ctsec .form textarea{border:2px solid transparent;border-radius:100px;padding:16px 24px;font-size:16px;font-weight:500;
  background:#fff;color:var(--ink);box-shadow:0 6px 16px rgba(0,0,0,.2);transition:border-color .15s,box-shadow .15s;width:100%;min-width:0;text-overflow:ellipsis}
.ctsec .form textarea{border-radius:26px;resize:vertical;min-height:100px;line-height:1.5}
.ctsec .form input::placeholder,.ctsec .form textarea::placeholder{color:#7a6762;opacity:1}
.ctsec .form input:focus,.ctsec .form select:focus,.ctsec .form textarea:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 4px rgba(240,169,28,.38)}
.ctsec .form select{-webkit-appearance:none;appearance:none;padding-right:66px;cursor:pointer}
.ctsec .form select:has(option[value=""]:checked){color:#7a6762}
.ctsec .form select option{color:var(--ink)}
.ctsec .sel::after{content:'';position:absolute;right:7px;top:50%;width:46px;height:46px;margin-top:-23px;border-radius:50%;pointer-events:none;
  background:var(--maroon) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5l5 5 5-5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/14px no-repeat}
.ctsec .captcha{background:rgba(255,255,255,.1);border:1.5px dashed rgba(255,255,255,.32);border-radius:100px;padding:8px 10px 8px 24px;gap:12px;flex-wrap:wrap}
.ctsec .captcha .capl{font-size:13.5px;font-weight:700;color:rgba(255,255,255,.88)}
.ctsec .captcha b{color:var(--gold-l);font-size:21px}
.ctsec .captcha input{width:88px;padding:10px 14px;text-align:center;font-weight:700}
.ctsec .captcha .capn{font-size:12px;font-weight:600;color:rgba(255,255,255,.7);margin-left:auto;padding-right:12px}

/* nut gui: vang, nhan xuong nhu nut game */
.ctsubmit{position:relative;display:flex;align-items:center;justify-content:center;width:100%;margin-top:22px;padding:17px 76px;border:none;border-radius:100px;cursor:pointer;
  font-family:var(--fd);font-weight:800;font-size:21px;letter-spacing:.05em;text-transform:uppercase;color:var(--maroon-d);
  background:linear-gradient(180deg,var(--gold-l),var(--gold) 55%,var(--gold-d));box-shadow:0 6px 0 #a4670a,0 18px 30px rgba(0,0,0,.35);transition:transform .15s,box-shadow .15s}
.ctsubmit:hover{transform:translateY(2px);box-shadow:0 4px 0 #a4670a,0 12px 22px rgba(0,0,0,.3)}
.ctsubmit:active{transform:translateY(6px);box-shadow:0 0 0 #a4670a,0 8px 16px rgba(0,0,0,.3)}
.ctsubmit:focus-visible{outline:3px solid #fff;outline-offset:3px}
.ctsubmit i{position:absolute;right:8px;top:50%;transform:translateY(-50%);width:48px;height:48px;border-radius:50%;background:#fff;color:var(--maroon);display:grid;place-items:center;transition:transform .2s}
.ctsubmit:hover i{transform:translateY(-50%) rotate(45deg)}
.ctnote{font-size:12.5px;color:rgba(255,255,255,.76);margin-top:16px;text-align:center;line-height:1.55}

/* khung phai: lien he nhanh */
.ctside{display:flex;flex-direction:column;justify-content:center;gap:18px}
.ctside h3{font-family:var(--fd);font-size:clamp(21px,1.85vw,27px);line-height:1.1;text-align:center;text-transform:uppercase;letter-spacing:.02em;text-shadow:0 2px 10px rgba(0,0,0,.3)}
.ctside p{text-align:center;font-size:14.5px;color:rgba(255,255,255,.82);margin:-6px 0 6px}
.ctbtn{display:flex;align-items:center;gap:12px;min-height:70px;padding:8px 9px 8px 26px;border-radius:100px;background:#fff;color:var(--maroon);
  font-family:var(--fd);font-weight:800;font-size:19.5px;line-height:1.1;box-shadow:0 5px 0 rgba(0,0,0,.2),0 14px 26px rgba(0,0,0,.28);transition:transform .15s,box-shadow .15s}
.ctbtn span{flex:1;text-align:center}
.ctbtn:hover{transform:translateY(-3px);box-shadow:0 8px 0 rgba(0,0,0,.2),0 20px 30px rgba(0,0,0,.3)}
.ctbtn:active{transform:translateY(3px);box-shadow:0 2px 0 rgba(0,0,0,.2),0 8px 16px rgba(0,0,0,.25)}
.ctbtn:focus-visible{outline:3px solid var(--gold-l);outline-offset:3px}
.ctbtn .ic{flex:none;width:52px;height:52px;border-radius:50%;display:grid;place-items:center;color:#fff;font-style:normal;transition:transform .2s}
.ctbtn:hover .ic{transform:scale(1.08) rotate(-8deg)}
.ctbtn .ic.ms{background:linear-gradient(135deg,#00b2ff,#006aff 45%,#a033ff 80%,#ff5c87)}
.ctbtn .ic.zl{background:#0068ff;font-family:var(--fb);font-weight:800;font-size:13.5px;letter-spacing:-.01em}
.ctbtn.hot{background:linear-gradient(180deg,var(--gold-l),var(--gold) 55%,var(--gold-d));color:var(--maroon-d);font-size:23px;letter-spacing:.02em}
.ctbtn.hot small{display:block;font-family:var(--fb);font-size:11px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;opacity:.75;margin-bottom:2px}
.ctbtn.hot .ic{background:#fff;color:var(--maroon)}
@media(max-width:960px){.ctgrid{grid-template-columns:minmax(0,1fr)}.ctsec .form{grid-template-columns:minmax(0,1fr)}.ctsec{padding:64px 0 64px}.phero+.ctsec{padding-top:96px}.ctsec::before{background-position:center top}}
@media(max-width:560px){.ctpanel{padding:24px 18px;border-radius:26px}
  .ctsec .form input,.ctsec .form select,.ctsec .form textarea{font-size:15px;padding:14px 20px}
  .ctsec .sel::after{width:40px;height:40px;margin-top:-20px}
  .ctsec .captcha{border-radius:22px}.ctsec .captcha .capn{margin-left:0}
  .ctsubmit{font-size:18px;padding:15px 64px}.ctsubmit i{width:42px;height:42px}
  .ctbtn{min-height:62px;font-size:17.5px}.ctbtn.hot{font-size:20px}.ctbtn .ic{width:46px;height:46px}}
@media(max-width:420px){.ctsec .form select{font-size:13px;padding:14px 40px 14px 16px}.ctsec .sel::after{width:32px;height:32px;margin-top:-16px;right:5px;background-size:11px}}
@media(prefers-reduced-motion:reduce){.ctsubmit,.ctbtn,.ctbtn .ic,.ctsubmit i{transition:none}}

/* ---------- THÔNG ĐIỆP — thư gửi ba mẹ, rương di sản, lời hứa tầng, vé mời, giá trị ---------- */
/* Thư gửi ba mẹ */
.hgrid{display:grid;grid-template-columns:.9fr 1.1fr;gap:48px;align-items:center}
.hremind{background:#fff;border:1px solid var(--line);border-radius:30px;padding:22px;box-shadow:var(--sh-lg);transform:rotate(-1.5deg);max-width:440px;justify-self:center;width:100%}
.hremind.in{transform:rotate(-1.5deg)}
.hrtop{display:flex;justify-content:space-between;align-items:center;padding:2px 6px 14px;border-bottom:1px dashed var(--line);margin-bottom:12px}
.hrtop span{font-weight:800;font-size:15px}.hrtop small{font-size:12px;font-weight:700;color:var(--muted)}
.hri{display:flex;gap:14px;align-items:center;padding:12px 10px;border-radius:18px;transition:opacity .5s calc(var(--d,0s) + .45s)}
.hri+.hri{margin-top:4px}
.hri .e{width:48px;height:48px;border-radius:14px;background:var(--bg2);display:grid;place-items:center;font-size:24px;flex:none}
.hri b{display:block;font-size:14.5px;line-height:1.3}
.hrw{display:flex;gap:8px;align-items:center;margin-top:3px;font-size:12.5px;font-weight:700}
.hri s{text-decoration:none;position:relative;color:var(--muted)}
.hri s::after{content:'';position:absolute;left:-3px;right:-3px;top:54%;height:2px;border-radius:2px;background:#e8574c;transform:scaleX(0);transform-origin:left;transition:transform .45s var(--d,0s)}
.hri em{font-style:normal;color:#e8574c;opacity:0;transition:opacity .4s calc(var(--d,0s) + .35s)}
.hremind.in .hri s::after{transform:scaleX(1)}
.hremind.in .hri em{opacity:1}
.hremind.in .hri:not(.keep){opacity:.62}
.hri.keep{margin-top:10px;background:linear-gradient(160deg,var(--gold-l),var(--gold));box-shadow:0 6px 0 var(--gold-d),0 16px 30px rgba(240,169,28,.35);color:#4a2505;animation:hkeep 2.6s ease-in-out infinite}
.hri.keep .e{background:rgba(255,255,255,.55)}
.hri .ok{display:inline-block;background:var(--maroon);color:#fff;font-size:11px;letter-spacing:.08em;padding:3px 10px;border-radius:100px}
@keyframes hkeep{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.hletter{position:relative;background:#fffdf8;border:1px solid var(--line);border-radius:30px;padding:38px 40px 32px;box-shadow:var(--sh);
  background-image:repeating-linear-gradient(transparent 0 33px,rgba(123,30,43,.06) 33px 34px)}
.hletter::before{content:'';position:absolute;top:-13px;left:50%;width:120px;height:26px;margin-left:-60px;background:rgba(255,217,119,.75);border-radius:4px;transform:rotate(-3deg);box-shadow:0 2px 6px rgba(0,0,0,.06)}
.hletter .ey{background:var(--maroon-soft)}
.hmk{color:var(--maroon);background:linear-gradient(transparent 62%,rgba(255,217,119,.7) 62%)}
.hlq{font-size:clamp(17px,1.7vw,20px);font-style:italic;font-weight:600;color:var(--maroon);border-left:4px solid var(--gold);padding:2px 0 2px 16px;margin-bottom:14px}
.hletter p{color:var(--ink2);font-size:15.5px;margin-bottom:10px}
.hsign{font-family:var(--fd);font-size:19px;font-weight:700;color:var(--maroon);text-align:right;margin-top:6px}
.hpil{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:40px}
.hpc{display:flex;gap:14px;align-items:flex-start;border-radius:22px;padding:20px;color:#fff;background:linear-gradient(160deg,var(--qc),var(--qc2));border:2px solid rgba(255,255,255,.25);box-shadow:0 7px 0 var(--qc2),0 18px 34px rgba(43,20,24,.18);transition:transform .18s,box-shadow .18s}
.hpc:hover{transform:translateY(5px);box-shadow:0 2px 0 var(--qc2),0 10px 20px rgba(43,20,24,.18)}
.hpc .e{font-size:34px;line-height:1;filter:drop-shadow(0 6px 8px rgba(0,0,0,.25));flex:none}
.hpc b{display:block;font-family:var(--fd);font-size:18px;line-height:1.15;margin-bottom:4px}
.hpc p{font-size:13.5px;color:rgba(255,255,255,.88);line-height:1.5}
@media(max-width:960px){.hgrid{grid-template-columns:1fr;gap:34px}.hpil{grid-template-columns:1fr}.hletter{padding:32px 24px 26px}}

/* Rương di sản */
.lgchain{display:flex;align-items:stretch;justify-content:center;gap:10px;margin:34px auto 0;max-width:900px}
.lgg{flex:1;background:#fff;border:1px solid var(--line);border-radius:22px;padding:18px 16px;box-shadow:var(--sh-sm);display:flex;flex-direction:column;align-items:center;gap:4px}
.lgg .e{font-size:40px;line-height:1.1}
.lgg b{font-family:var(--fd);font-size:18px;color:var(--maroon)}
.lgg small{font-size:13px;color:var(--ink2);line-height:1.4}
.lgg.now{background:linear-gradient(160deg,var(--gold-l),var(--gold));border-color:transparent;box-shadow:0 6px 0 var(--gold-d),0 16px 30px rgba(240,169,28,.3)}
.lgg.now b,.lgg.now small{color:#4a2505}
.lga{align-self:center;font-style:normal;font-size:26px;font-weight:900;color:var(--gold-d)}
.lgboard{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:38px;text-align:left}
.lgi{position:relative;border-radius:24px;padding:18px 20px 20px;color:#fff;overflow:hidden;isolation:isolate;background:linear-gradient(165deg,var(--qc),var(--qc2));border:2px solid rgba(255,255,255,.26);
  box-shadow:0 8px 0 var(--qc2),0 20px 38px rgba(43,20,24,.2);transition:transform .18s cubic-bezier(.2,.7,.2,1),box-shadow .18s,opacity .7s,translate .7s}
.lgi::before{content:'';position:absolute;inset:0;z-index:-1;background:radial-gradient(120px 90px at 88% 6%,rgba(255,255,255,.3),transparent 70%)}
.lgi:hover{transform:translateY(6px);box-shadow:0 2px 0 var(--qc2),0 10px 22px rgba(43,20,24,.2)}
.lgr{display:inline-block;font-size:10px;font-weight:800;letter-spacing:.12em;background:rgba(0,0,0,.24);border:1px solid rgba(255,255,255,.3);padding:4px 11px;border-radius:100px;color:var(--gold-l)}
.lgic{display:grid;place-items:center;width:84px;height:84px;margin:12px 0 8px;border-radius:22px;background:rgba(255,255,255,.18);border:2px dashed rgba(255,255,255,.4);font-size:46px}
.lgic span{display:inline-block;filter:drop-shadow(0 8px 10px rgba(0,0,0,.28));animation:qbob 3.2s ease-in-out infinite;animation-delay:calc(var(--qd,0s)*4)}
.lgi b{display:block;font-family:var(--fd);font-size:20px;line-height:1.15;margin-bottom:4px}
.lgi p{font-size:13.5px;line-height:1.5;color:rgba(255,255,255,.88)}
.lgfoot{margin-top:30px;font-size:14px;font-weight:700;color:var(--maroon)}
@media(max-width:900px){.lgboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:640px){.lgchain{flex-direction:column}.lga{transform:rotate(90deg)}.lgboard{grid-template-columns:1fr}}

/* Lời hứa với ba mẹ theo tầng */
.pmsec{padding-top:46px}
.pmcard{display:grid;grid-template-columns:1.15fr .85fr;gap:34px;align-items:stretch;background:#fff;border:1px solid var(--line);border-top:6px solid var(--ac);border-radius:32px;padding:36px;box-shadow:var(--sh-lg);position:relative;overflow:hidden}
.pmcard::before{content:'';position:absolute;right:-80px;top:-80px;width:320px;height:320px;border-radius:50%;background:transparent;background:color-mix(in srgb,var(--ac) 12%,transparent);pointer-events:none}
.pmkick{display:inline-block;font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--ac);background:#fff;background:color-mix(in srgb,var(--ac) 10%,#fff);padding:7px 14px;border-radius:14px;line-height:1.5}
.pmh{font-size:clamp(26px,3.2vw,38px);margin:14px 0 14px;color:var(--ink)}
.pmh span{color:var(--ac)}
.pmtxt p{color:var(--ink2);font-size:15.5px}
.pmdisan{display:flex;gap:14px;align-items:center;margin-top:20px;padding:14px 18px;border-radius:20px;background:linear-gradient(160deg,var(--gold-l),var(--gold));box-shadow:0 5px 0 var(--gold-d);color:#4a2505}
.pmdisan .e{font-size:30px;line-height:1}
.pmdisan small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;opacity:.8}
.pmdisan b{font-family:var(--fd);font-size:18px;line-height:1.2}
.pmside{position:relative;display:flex;flex-direction:column;gap:12px}
.pmkids{height:170px;width:auto;align-self:center;filter:drop-shadow(0 12px 16px rgba(0,0,0,.14));margin-bottom:-4px}
.pmcol{border-radius:20px;padding:14px 18px}
.pmcol h4{font-size:16px;margin-bottom:6px}
.pmcol ul{list-style:none;display:flex;flex-direction:column;gap:5px}
.pmcol li{font-size:13.5px;line-height:1.45;display:flex;gap:8px}
.pmcol li::before{content:'✓';font-weight:900;flex:none}
.pmcol.kid{background:#fff;background:color-mix(in srgb,var(--ac) 11%,#fff)}
.pmcol.kid h4,.pmcol.kid li::before{color:var(--ac)}
.pmcol.par{background:#fff6e3}
.pmcol.par h4,.pmcol.par li::before{color:var(--gold-d)}
@media(max-width:900px){.pmcard{grid-template-columns:1fr;padding:28px 22px}.pmkids{height:150px}}

/* Vé mời ba mẹ — trang khóa */
.tkgrid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center}
.ticket{display:flex;max-width:520px;width:100%;justify-self:center;transform:rotate(-2deg);filter:drop-shadow(0 22px 34px rgba(43,20,24,.22))}
.ticket.in{transform:rotate(-2deg)}
.tkmain{flex:1;position:relative;color:#fff;padding:24px 26px;border-radius:22px 0 0 22px;background:linear-gradient(150deg,var(--ac),var(--ac));background:linear-gradient(150deg,var(--ac),color-mix(in srgb,var(--ac) 55%,#000));
  -webkit-mask:radial-gradient(circle 13px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at 100% 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 100% 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tkhead{font-size:11.5px;font-weight:800;letter-spacing:.14em;color:var(--gold-l)}
.tkev{font-size:13.5px;opacity:.9;margin-top:10px}
.tkname{font-family:var(--fd);font-size:clamp(22px,2.4vw,28px);line-height:1.12;margin:2px 0 16px}
.tkrows{display:grid;grid-template-columns:repeat(3,auto);gap:10px 18px;padding:12px 0;border-top:1px dashed rgba(255,255,255,.35);border-bottom:1px dashed rgba(255,255,255,.35)}
.tkrows small{display:block;font-size:10.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;opacity:.7}
.tkrows b{font-size:13.5px}
.tknote{margin-top:12px;font-size:13px;font-style:italic;color:var(--gold-l)}
.tkstub{width:118px;flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;text-align:center;padding:14px 10px;border-radius:0 22px 22px 0;color:#4a2505;
  background:linear-gradient(170deg,var(--gold-l),var(--gold));border-left:2px dashed rgba(74,37,5,.35);
  -webkit-mask:radial-gradient(circle 13px at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat;
  mask:radial-gradient(circle 13px at 0 0,#0000 98%,#000) top/100% 51% no-repeat,radial-gradient(circle 13px at 0 100%,#0000 98%,#000) bottom/100% 51% no-repeat}
.tkseal{width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:30px;background:#fff;border:3px dashed var(--maroon);transform:rotate(-12deg)}
.tkstub b{font-family:var(--fd);font-size:15px;line-height:1.1}
.tkstub small{font-size:10.5px;font-weight:700;opacity:.8;line-height:1.3}
.tktxt p{color:var(--ink2);font-size:15.5px}
.tkli{list-style:none;display:flex;flex-direction:column;gap:10px;margin-top:18px}
.tkli li{display:flex;gap:12px;align-items:center;font-size:14.5px;color:var(--ink)}
.tkli i{font-style:normal;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;flex:none;background:#fff;background:color-mix(in srgb,var(--ac) 12%,#fff)}
@media(max-width:960px){.tkgrid{grid-template-columns:1fr;gap:34px}}
@media(max-width:520px){.tkmain{padding:20px 18px}.tkrows{grid-template-columns:1fr 1fr}.tkstub{width:92px}.tkseal{width:48px;height:48px;font-size:24px}}

/* Giá trị cốt lõi — tái dùng .qcard */
.vboard{grid-template-columns:repeat(5,1fr);margin-top:34px;text-align:left}
.vcard .qicon{width:112px;height:112px;font-size:66px;margin:16px 0 10px}
.vcard .qlab{font-size:14.5px;margin-top:2px}
@media(max-width:1100px){.vboard{grid-template-columns:repeat(3,1fr)}}
@media(max-width:700px){.vboard{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.vboard{grid-template-columns:1fr}}

/* Lộ trình — món di sản mỗi tầng */
.jcard .jdsn{margin-top:10px;font-size:12px;font-weight:700;line-height:1.4;color:#5a3a06;background:#fff3d4;border:1px solid #f6dca0;border-radius:10px;padding:6px 9px}

/* Liên hệ */
.ctheart{display:flex;gap:12px;align-items:flex-start;background:rgba(255,255,255,.12);border:1.5px dashed rgba(255,255,255,.35);border-radius:22px;padding:14px 16px;margin-top:4px}
.ctheart span{font-size:26px;line-height:1}
.ctside .ctheart p{text-align:left;margin:0;font-size:13.5px;color:rgba(255,255,255,.9)}
.ctheart b{color:var(--gold-l)}
.nxsec{padding-top:90px}
.nxq{max-width:760px;margin:34px auto 0;font-size:clamp(16px,1.6vw,19px);font-style:italic;font-weight:600;color:var(--maroon);line-height:1.55}
.nxq span{display:block;font-style:normal;font-size:15px;font-weight:700;color:var(--ink2);margin-top:10px}

/* Chân trang */
.foot .fheart{margin-top:14px;font-size:14px;font-weight:700;color:var(--gold-l);max-width:300px}
@media(prefers-reduced-motion:reduce){.hri.keep,.lgic span{animation:none}.hri s::after,.hri em,.hri{transition:none}}

/* ---------- Trang chu: gop section (cach hoc + con dau) va bang so sanh trong khoi toi ---------- */
.h3b{font-family:var(--fd);font-size:clamp(24px,3.2vw,34px);line-height:1.1;color:var(--ink);margin:12px 0 8px}
.sealrow{display:grid;grid-template-columns:180px 1fr;gap:34px;align-items:center;margin-top:52px;
  padding-top:44px;border-top:1px dashed var(--line)}
.wbcmp{position:relative;margin-top:40px}
.wbcmp .cmp,.wbcmp .cmp td{color:var(--ink2)}
.wbcmp .cmp td:first-child{color:var(--ink)}
.wbcmp h3{font-family:var(--fd);font-size:clamp(20px,2.6vw,27px);color:#fff;text-align:center;margin-bottom:18px;text-shadow:0 2px 12px rgba(0,0,0,.35)}
@media(max-width:860px){.sealrow{grid-template-columns:1fr;gap:24px;margin-top:40px;padding-top:34px}}

/* ---------- LIEN HE NHANH: 3 nut noi + 3 nut tren thanh top ----------
   .fcw  : cum nut noi goc trai duoi (Zalo · Messenger · Goi)
   .fcb.ph : nut goi co 2 vong song lan toa (.r1/.r2) va icon rung nhe
   Mau: Zalo xanh thuong hieu, Messenger gradient, Goi san ho cho noi bat tren nen kem */
.fcw{position:fixed;left:18px;bottom:18px;z-index:180;display:flex;flex-direction:column;gap:14px;align-items:flex-start}
.fcb{position:relative;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;cursor:pointer;
  transition:transform .2s cubic-bezier(.2,.7,.2,1);animation:fcpop .5s cubic-bezier(.2,1.4,.4,1) backwards}
.fcb:nth-child(1){animation-delay:.25s}.fcb:nth-child(2){animation-delay:.4s}.fcb:nth-child(3){animation-delay:.55s}
.fcb i{position:relative;z-index:2;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 20px rgba(40,10,20,.34),inset 0 2px 0 rgba(255,255,255,.3)}
.fcb.zl i{background:linear-gradient(160deg,#3d8bff,#0068ff)}
.fcb.zl i b{font-family:var(--fd);font-weight:800;font-size:15px;letter-spacing:-.02em}
.fcb.ms i{background:linear-gradient(135deg,#00b2ff,#006aff 45%,#a033ff 80%,#ff5c87)}
.fcb.ph i{background:linear-gradient(160deg,#ff8a70,#e8574c)}
.fcb:hover{transform:translateY(-4px) scale(1.07)}
.fcb:active{transform:translateY(0) scale(.96)}
.fcb:focus-visible{outline:3px solid var(--gold);outline-offset:4px;border-radius:50%}
.fcb .fcl{position:absolute;left:70px;top:50%;transform:translate(-10px,-50%) scale(.9);white-space:nowrap;
  background:#fff;color:var(--maroon);font-family:var(--fd);font-weight:800;font-size:14.5px;padding:9px 17px;border-radius:100px;
  box-shadow:0 8px 20px rgba(40,10,20,.22);opacity:0;pointer-events:none;transition:.2s cubic-bezier(.2,.7,.2,1)}
.fcb .fcl::before{content:'';position:absolute;left:-5px;top:50%;width:10px;height:10px;margin-top:-5px;background:#fff;transform:rotate(45deg);border-radius:2px}
.fcb:hover .fcl,.fcb:focus-visible .fcl{opacity:1;transform:translate(0,-50%) scale(1)}
/* vong song cua nut goi */
.fcb.ph s{position:absolute;left:50%;top:50%;width:58px;height:58px;margin:-29px 0 0 -29px;border-radius:50%;
  border:2px solid #e8574c;opacity:0;animation:fcring 2.4s ease-out infinite}
.fcb.ph s.r2{animation-delay:1.2s}
.fcb.ph i svg{animation:fcshake 2.4s ease-in-out infinite;transform-origin:50% 60%}
@keyframes fcring{0%{transform:scale(1);opacity:.9}70%{opacity:0}100%{transform:scale(2.1);opacity:0}}
@keyframes fcshake{0%,62%,100%{transform:rotate(0)}66%{transform:rotate(-22deg)}70%{transform:rotate(20deg)}
  74%{transform:rotate(-18deg)}78%{transform:rotate(16deg)}82%{transform:rotate(-10deg)}86%{transform:rotate(6deg)}}
@keyframes fcpop{from{opacity:0;transform:scale(.4) translateY(14px)}to{opacity:1;transform:none}}
/* thong bao khi bam goi tren may tinh */
.ctoast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,20px);z-index:220;max-width:min(92vw,460px);
  background:linear-gradient(160deg,var(--maroon-l),var(--maroon));color:#fff;font-weight:700;font-size:14.5px;
  padding:14px 22px;border-radius:100px;box-shadow:0 18px 40px rgba(40,10,20,.4);opacity:0;pointer-events:none;transition:.25s;text-align:center}
.ctoast.on{opacity:1;transform:translate(-50%,0)}
@media(max-width:640px){.fcw{left:12px;bottom:12px;gap:11px}
  .fcb,.fcb i,.fcb.ph s{width:50px;height:50px}.fcb.ph s{margin:-25px 0 0 -25px}
  .fcb .fcl{display:none}}
@media print{.fcw{display:none}}

/* 3 nut lien he tren thanh top: goi · messenger · zalo */
.tphone{display:inline-flex;align-items:center;gap:7px;font-family:var(--fd);font-weight:800;font-size:13.5px;letter-spacing:.01em;
  color:var(--maroon-d);background:linear-gradient(180deg,var(--gold-l),var(--gold));padding:6px 15px;border-radius:100px;
  white-space:nowrap;cursor:pointer;box-shadow:0 3px 0 rgba(90,20,29,.35);transition:transform .15s,box-shadow .15s}
.tphone:hover{transform:translateY(-2px);box-shadow:0 5px 0 rgba(90,20,29,.35);color:var(--maroon-d)}
.tphone:active{transform:translateY(1px);box-shadow:0 1px 0 rgba(90,20,29,.35)}
.tphone i{font-style:normal;display:inline-block;animation:fcshake 2.4s ease-in-out infinite;transform-origin:50% 60%}
.tsoc a.msg{background:linear-gradient(135deg,#00b2ff,#006aff 45%,#a033ff 80%,#ff5c87);color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.22)}
.tsoc a.msg:hover{background:linear-gradient(135deg,#00b2ff,#006aff 45%,#a033ff 80%,#ff5c87);color:#fff;transform:translateY(-2px)}
.tsoc a.zalo{background:#0068ff;color:#fff;box-shadow:0 2px 0 rgba(0,0,0,.22);font-size:11px}
.tsoc a.zalo:hover{background:#3d8bff;color:#fff;transform:translateY(-2px)}
/* <=1200px thanh top da an .tphone (dong 324); style moi o tren lam no hien lai nen phai an lai.
   Tren dien thoai da co cum nut noi .fcw nen khong thieu duong goi. */
@media(max-width:1200px){.tphone{display:none}}
@media(prefers-reduced-motion:reduce){.fcb,.fcb.ph s,.fcb.ph i svg,.tphone i{animation:none}.fcb{transition:none}}

/* ---------- TRANG DỰ ÁN: hero có art nền + thumbnail kính, section nền 3D + thẻ kính ----------
   .pjhero  : nền tối + ảnh projects_expo.webp lộ dần sang phải (mask), chữ luôn nằm vùng tối
   .pjthumb : khung kính nghiêng nhẹ, lơ lửng lệch pha
   .pjsec   : cùng ảnh nền nhưng phủ kem sáng, thẻ sản phẩm chuyển sang glassmorphism */
.pjhero{position:relative;overflow:hidden;background:linear-gradient(150deg,#4a1622,#1c0a0e)}
.pjhero .pjart{position:absolute;inset:0;background:url(/assets/img/projects_expo.webp) center 42%/cover no-repeat;opacity:.62;
  -webkit-mask-image:linear-gradient(100deg,transparent 4%,#000 62%);mask-image:linear-gradient(100deg,transparent 4%,#000 62%)}
.pjhero::after{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(100deg,rgba(26,9,14,.95) 10%,rgba(40,12,20,.6) 48%,rgba(26,9,14,.28) 100%),
  radial-gradient(ellipse 70% 100% at 0% 50%,rgba(26,9,14,.85),transparent 70%)}
.pjhero>.wrap{position:relative;z-index:2}
.pjgrid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);gap:30px;align-items:center}
.pjlead{max-width:580px;font-size:17.5px;line-height:1.62;opacity:.95;margin-top:4px}
.pjchips{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.pjchip{display:inline-flex;align-items:center;gap:7px;font-size:13px;font-weight:700;color:#fff;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3);padding:8px 15px;border-radius:100px;
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.pjthumbs{position:relative;height:400px}
.pjthumb{position:absolute;margin:0;padding:9px;border-radius:22px;overflow:hidden;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.1));border:1px solid rgba(255,255,255,.42);
  box-shadow:0 26px 56px rgba(0,0,0,.46),inset 0 1px 0 rgba(255,255,255,.5);
  -webkit-backdrop-filter:blur(13px) saturate(1.35);backdrop-filter:blur(13px) saturate(1.35);animation:pjfloat 7s ease-in-out infinite}
.pjthumb img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:15px;background:#120a0d}
.pjthumb figcaption{padding:9px 6px 3px;color:#fff;text-shadow:0 1px 6px rgba(0,0,0,.5)}
.pjthumb figcaption span{display:block;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--gold-l)}
.pjthumb figcaption b{font-family:var(--fd);font-size:16px;line-height:1.15}
.pjthumb.p1{left:0;top:6px;width:48%;transform:rotate(-5deg);z-index:2}
.pjthumb.p2{right:0;top:0;width:48%;transform:rotate(4.5deg);z-index:3;animation-delay:1.4s}
.pjthumb.p3{left:26%;bottom:0;width:50%;transform:rotate(2deg);z-index:4;animation-delay:2.8s}
@keyframes pjfloat{0%,100%{translate:0 0}50%{translate:0 -14px}}

.pjsec{position:relative;isolation:isolate;overflow:hidden;background:var(--cream);padding:74px 0 88px}
/* anh nen la mot dai o dau section (cover theo chieu ngang), roi tan dan vao nen kem —
   khong dung cover toan section vi section rat cao, anh se bi keo gian chi con thay troi */
.pjsec::before{content:'';position:absolute;left:0;right:0;top:0;height:clamp(360px,48vw,760px);z-index:-2;
  background:url(/assets/img/projects_expo.webp) center 24%/cover no-repeat}
.pjsec::after{content:'';position:absolute;left:0;right:0;top:0;height:clamp(380px,50vw,800px);z-index:-1;background:
  linear-gradient(180deg,rgba(255,250,240,.34) 0%,rgba(255,250,240,.46) 46%,rgba(251,243,225,.9) 82%,var(--cream) 100%)}
.pjhead{max-width:820px;margin:0 auto 26px;text-shadow:0 2px 16px rgba(255,255,255,.85)}
.pjhead .lead{color:var(--ink2)}
.pjtabs{margin-bottom:24px}
.pjsec .ptab{background:rgba(255,255,255,.6);border:1px solid rgba(255,255,255,.85);color:var(--ink);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 6px 16px rgba(50,22,32,.14)}
.pjsec .ptab:hover{background:rgba(255,255,255,.85)}
.pjsec .ptab.on{background:linear-gradient(180deg,var(--maroon-l),var(--maroon));color:#fff;border-color:transparent;box-shadow:0 8px 18px rgba(123,30,43,.35)}
.pjsec .prodcard{padding:10px;border-radius:24px;background:linear-gradient(150deg,rgba(255,255,255,.62),rgba(255,255,255,.42));
  border:1px solid rgba(255,255,255,.75);box-shadow:0 20px 44px rgba(50,22,32,.22),inset 0 1px 0 rgba(255,255,255,.85);
  -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);
  transition:transform .2s cubic-bezier(.2,.7,.2,1),box-shadow .2s}
.pjsec .prodcard:hover{transform:translateY(-6px);box-shadow:0 28px 56px rgba(50,22,32,.28),inset 0 1px 0 rgba(255,255,255,.9)}
.pjsec .prodcard img{border-radius:17px;background:#120a0d}
.pjsec .prodcard .cap{padding:12px 8px 4px;color:var(--ink)}
.pjsec .prodcard .cap b{font-family:var(--fd);font-size:16px}
.pjsec .prodcard .cap small{color:var(--ink2);font-size:12.5px}
.pjsec .rt-tag{color:#0b7a52;background:rgba(255,255,255,.78);border-color:rgba(12,143,95,.34)}
@media(max-width:960px){.pjgrid{grid-template-columns:1fr}.pjthumbs{height:320px;margin-top:8px}
  .pjhero .pjart{-webkit-mask-image:linear-gradient(180deg,transparent 6%,#000 70%);mask-image:linear-gradient(180deg,transparent 6%,#000 70%)}
  .pjhero::after{background:linear-gradient(180deg,rgba(26,9,14,.93) 8%,rgba(40,12,20,.66) 55%,rgba(26,9,14,.4) 100%)}}
@media(max-width:560px){.pjthumbs{height:250px}.pjthumb.p1{width:66%}.pjthumb.p2{width:66%;top:38px}.pjthumb.p3{display:none}
  .pjsec{padding:56px 0 64px}
  /* man hinh hep: dai anh nen nam ngay sau tieu de nen phu dam hon cho de doc */
  .pjsec::after{background:linear-gradient(180deg,rgba(255,250,240,.56) 0%,rgba(255,250,240,.64) 46%,rgba(251,243,225,.95) 82%,var(--cream) 100%)}}
@media(prefers-reduced-motion:reduce){.pjthumb{animation:none}.pjsec .prodcard{transition:none}}

/* ===== Trang cam on sau khi gui form (/dang-ky-thanh-cong/) =====
   Dau tick ve bang SVG stroke-dasharray nen khong can anh. */
.tysec{text-align:center;padding-top:54px}
.tytick{color:#8ef2c8;display:inline-block;line-height:0}
.tytick .tyc{stroke-dasharray:145;stroke-dashoffset:145;animation:tyc .5s ease-out forwards}
.tytick .tyv{stroke-dasharray:48;stroke-dashoffset:48;animation:tyv .34s .45s ease-out forwards}
@keyframes tyc{to{stroke-dashoffset:0}}
@keyframes tyv{to{stroke-dashoffset:0}}
@media(prefers-reduced-motion:reduce){.tytick .tyc,.tytick .tyv{animation:none;stroke-dashoffset:0}}
.tylead{font-size:clamp(17px,2.2vw,21px);max-width:660px;margin:14px auto 6px;opacity:.97}
.tysub{font-size:15.5px;max-width:620px;margin:0 auto;opacity:.86}
.tycta{display:flex;gap:12px;justify-content:center;flex-wrap:wrap;margin-top:26px}
.tyquote .nxq{margin:0 auto;max-width:760px}
.tylinks{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.tylink{display:block;background:#fff;border:1px solid var(--line);border-radius:18px;padding:20px;
  box-shadow:var(--sh-sm);cursor:pointer;transition:.16s;text-decoration:none}
.tylink:hover{transform:translateY(-3px);box-shadow:var(--sh-lg);border-color:var(--maroon)}
.tylink b{display:block;font-family:var(--fd);font-size:16px;color:var(--maroon);margin-bottom:6px}
.tylink span{font-size:13.5px;color:var(--ink2);line-height:1.5}
@media(max-width:900px){.tylinks{grid-template-columns:1fr}}

/* ===== Hinh minh hoa lon + the kinh mo (lam lai 2026-09-12) =====
   Ba nhom the dung chung mot ngon ngu: mot canh minh hoa chiem tron be ngang phia
   tren, ben duoi la chu tren nen kinh mo. Kinh mo chi doc duoc khi phia sau co mau,
   nen moi section deu co hai khoi mau nhoe lam nen. */
.h2sub{font-size:clamp(17px,2.2vw,22px);font-weight:700;color:var(--ink);margin:16px auto 0;max-width:760px;line-height:1.35}
.h2sub b{color:var(--maroon)}

/* nen mau cho kinh mo an vao */
.rdsec,.trusec{position:relative;overflow:hidden}
.rdsec::before,.trusec::before,.rdsec::after,.trusec::after{content:"";position:absolute;border-radius:50%;
  filter:blur(90px);opacity:.5;pointer-events:none;z-index:0}
.rdsec::before{width:420px;height:420px;background:#f6c9a8;top:-120px;left:-120px}
.rdsec::after{width:380px;height:380px;background:#c9d8f6;bottom:-140px;right:-100px}
.trusec::before{width:400px;height:400px;background:#f6d5c9;top:-140px;right:-110px}
.trusec::after{width:360px;height:360px;background:#cfe9dd;bottom:-130px;left:-90px}
.rdsec>.wrap,.trusec>.wrap{position:relative;z-index:1}

/* the kinh mo dung chung */

/* vung hinh minh hoa */
.artsvg{width:100%;height:100%;display:block}

/* --- R.D.V.P --- */
.rdsec .grid4{gap:20px;margin-top:34px;text-align:left}
.rdc{--ic:#7b1e2b;background:var(--glass);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--gline);border-radius:24px;
  overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--sh);transition:.2s}
.rdc:hover{transform:translateY(-5px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 26px 56px rgba(90,20,29,.18)}
.rda{position:relative;aspect-ratio:240/140;overflow:hidden}
.rda .artsvg{width:100%;height:100%;display:block}
.rdc .rdm{display:inline-block;margin:16px 20px 0;font-family:var(--fd);font-size:11.5px;font-weight:800;
  letter-spacing:.09em;color:#fff;background:var(--ic);padding:4px 12px;border-radius:99px}
.rdc b{display:block;font-family:var(--fd);font-size:18px;margin:10px 20px 6px;color:var(--ink)}
.rdc p{font-size:13.5px;color:var(--ink2);line-height:1.6;margin:0 20px 22px}

/* --- 5 tru tu duy --- */
.trugrid{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;margin-top:34px;text-align:left}
.truc{--ic:#7b1e2b;background:var(--glass);backdrop-filter:blur(16px) saturate(140%);
  -webkit-backdrop-filter:blur(16px) saturate(140%);border:1px solid var(--gline);border-radius:22px;
  overflow:hidden;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,var(--sh);transition:.2s}
.truc:hover{transform:translateY(-5px);box-shadow:0 1px 0 rgba(255,255,255,.85) inset,0 26px 56px rgba(90,20,29,.18)}
.trua{position:relative;aspect-ratio:240/140;overflow:hidden}
.trua .artsvg{width:100%;height:100%;display:block}
.truc b{display:block;font-family:var(--fd);font-size:16px;color:var(--ink);margin:16px 18px 2px}
.trum{display:block;font-size:11px;font-weight:800;letter-spacing:.06em;color:var(--ic);margin:0 18px 8px}
.truc p{font-size:12.8px;color:var(--ink2);line-height:1.55;margin:0 18px 20px}
@media(max-width:1050px){.trugrid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:680px){.trugrid{grid-template-columns:1fr 1fr}}

/* --- Ruong di san: kinh mo tren nen kem, co huy hieu do hiem --- */
.lgboard{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-top:34px;text-align:left}
/* Ghi de luat .lgi cu (nen dac mau + color trang + padding) de khong bi chu trang
   tren nen kinh sang. Tat luon .lgi::before cua ban cu vi no dung bien --qc da bo. */
.lgi::before{display:none!important}
.lgi{--ic:#7b1e2b;color:var(--ink);padding:0;position:relative;background:rgba(255,255,255,.62);
  backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);
  border:1px solid rgba(255,255,255,.85);border-radius:24px;overflow:hidden;
  box-shadow:0 1px 0 rgba(255,255,255,.8) inset,var(--sh);transition:.2s}
.lgi:hover{transform:translateY(-6px);box-shadow:0 1px 0 rgba(255,255,255,.9) inset,0 28px 60px rgba(90,20,29,.2)}
.lga2{position:relative;aspect-ratio:240/140;overflow:hidden}
.lga2 .artsvg{width:100%;height:100%;display:block}
.lgr{position:absolute;top:14px;left:14px;z-index:2;font-family:var(--fd);font-size:10.5px;font-weight:800;
  letter-spacing:.12em;color:#fff;background:var(--ic);padding:5px 12px;border-radius:99px;
  box-shadow:0 4px 12px rgba(0,0,0,.18)}
.lgi b{display:block;font-family:var(--fd);font-size:18px;color:var(--ink);margin:18px 22px 7px}
.lgi p{font-size:13.5px;color:var(--ink2);line-height:1.6;margin:0 22px 22px}
@media(max-width:900px){.lgboard{grid-template-columns:1fr 1fr}}
@media(max-width:600px){.lgboard{grid-template-columns:1fr}}

/* --- Dau Tu Lam gom ve khu san pham hoc vien --- */
.sealstrip{display:grid;grid-template-columns:auto 1fr;gap:26px;align-items:center;
  margin-top:30px;padding:24px;border-radius:22px;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.16)}
.sealbox{display:grid;place-items:center}
.sealtxt b{display:block;font-family:var(--fd);font-size:19px;color:#fff;margin-bottom:4px}
.sealtxt>p{font-size:14px;color:rgba(255,255,255,.82);margin:0 0 14px}
.sealev{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.sealev span{display:block;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);
  border-radius:14px;padding:13px 15px}
.sealev i{font-style:normal;font-size:17px;color:var(--gold-l);font-weight:800}
.sealev b{font-size:14px;margin:3px 0 3px}
.sealev small{display:block;font-size:12px;color:rgba(255,255,255,.72);line-height:1.5}
@media(max-width:820px){.sealstrip{grid-template-columns:1fr;text-align:center}.sealev{grid-template-columns:1fr}}

/* ===== Blog: the co anh dai dien + trang bai viet ===== */
.bcard{display:block;background:#fff;border:1px solid var(--line);border-radius:20px;overflow:hidden;
  box-shadow:var(--sh-sm);text-decoration:none;color:inherit;transition:.18s}
.bcard:hover{transform:translateY(-4px);box-shadow:var(--sh-lg);border-color:var(--maroon)}
.bimg{position:relative;aspect-ratio:16/9;overflow:hidden;background:#eee}
.bimg img{width:100%;height:100%;object-fit:cover;display:block;transition:.4s}
.bcard:hover .bimg img{transform:scale(1.05)}
.bcat{position:absolute;left:12px;bottom:12px;background:rgba(255,255,255,.94);font-size:11.5px;
  font-weight:800;padding:5px 12px;border-radius:99px;box-shadow:var(--sh-sm)}
.bbody{padding:18px 20px 20px}
.bbody h3{font-family:var(--fd);font-size:17px;line-height:1.3;margin:0 0 8px;color:var(--ink)}
.bbody p{font-size:13.5px;color:var(--ink2);line-height:1.55;margin:0}
.bmeta{display:flex;gap:14px;margin-top:14px;font-size:12px;color:var(--muted);font-weight:600}

/* --- trang bai viet --- */
.post{background:#fff}
.phead{background:linear-gradient(150deg,var(--maroon-l),var(--maroon-d));color:#fff;padding:34px 0 40px}
.phead .crumb{margin-bottom:16px}
.pcat{display:inline-block;font-size:11.5px;font-weight:800;letter-spacing:.06em;color:#fff;
  padding:5px 13px;border-radius:99px}
.phead h1{font-family:var(--fd);font-size:clamp(27px,4.2vw,44px);line-height:1.15;margin:14px 0 0;max-width:880px}
.pdek{font-size:clamp(16px,2vw,19px);opacity:.93;max-width:760px;margin:14px 0 0;line-height:1.55}
.pmeta{display:flex;gap:18px;flex-wrap:wrap;margin-top:20px;font-size:13px;opacity:.8;font-weight:600}
.pcover{margin:-24px auto 0;max-width:920px;padding:0 20px}
.pcover img{width:100%;border-radius:22px;box-shadow:var(--sh-lg);display:block;aspect-ratio:16/9;object-fit:cover}
.pbody{max-width:720px;margin:0 auto;padding:38px 20px 10px;font-size:17px;line-height:1.75;color:var(--ink)}
.pbody h2{font-family:var(--fd);font-size:clamp(21px,2.6vw,27px);line-height:1.3;margin:38px 0 14px;color:var(--maroon)}
.pbody p{margin:0 0 18px}
.pfig{margin:26px 0}
.pfig img{width:100%;border-radius:18px;display:block;box-shadow:var(--sh-sm);aspect-ratio:16/9;object-fit:cover}
.pfig figcaption{font-size:13px;color:var(--muted);margin-top:9px;text-align:center;font-style:italic}
.pbox{background:#faf8f3;border:1px solid var(--line);border-left:5px solid var(--ic);
  border-radius:14px;padding:20px 22px;margin:26px 0}
.pbox b{display:block;font-family:var(--fd);font-size:16px;color:var(--ic);margin-bottom:10px}
.pbox ul,.pbox ol{margin:0;padding-left:20px}
.pbox li{font-size:15px;line-height:1.65;margin-bottom:8px;color:var(--ink2)}
.pbox li::marker{color:var(--ic);font-weight:800}
.pnext{background:var(--cream);padding:44px 0;margin-top:34px}
.pnext h3{font-family:var(--fd);font-size:22px;text-align:center;margin:0 0 24px;color:var(--maroon)}
@media(max-width:700px){.pbody{font-size:16px}.pcover{margin-top:-14px}}

/* ---------- RƯƠNG DI SẢN: mỗi kỹ năng là một bảo vật 3D kiểu vật phẩm game ----------
   Viền gradient theo độ hiếm (r-leg vàng · r-epic tím · r-rare xanh), tia sáng xoay
   phía sau vật, vật lơ lửng lệch pha; Huyền thoại có vệt sáng quét qua. */
.lgi.loot{border:0;background:linear-gradient(180deg,rgba(255,255,255,.78),rgba(255,255,255,.6))}
.lgi.loot.r-leg{--rb:linear-gradient(135deg,#ffe08a,#f0a91c 35%,#fff4c2 55%,#d98a0b)}
.lgi.loot.r-epic{--rb:linear-gradient(135deg,#ddd6fe,#7c3aed 35%,#f3e8ff 55%,#5b21b6)}
.lgi.loot.r-rare{--rb:linear-gradient(135deg,#bfdbfe,#2563eb 35%,#e0ecff 55%,#1d4ed8)}
.lgi.loot::after{content:'';position:absolute;inset:0;z-index:4;border-radius:inherit;padding:2.5px;background:var(--rb);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude}
.lootart{position:relative;aspect-ratio:16/10;overflow:hidden;isolation:isolate;background:radial-gradient(circle at 50% 60%,#fff 0%,#fff8ec 46%,#fff8ec 100%);
  background:radial-gradient(circle at 50% 60%,color-mix(in srgb,var(--ic) 34%,#fff) 0%,color-mix(in srgb,var(--ic) 13%,#fff8ec) 46%,#fff8ec 100%)}
.lootray{position:absolute;left:50%;top:58%;width:150%;aspect-ratio:1;z-index:-1;translate:-50% -50%;background:repeating-conic-gradient(from 0deg,transparent 0 9deg,transparent 9deg 24deg);
  background:repeating-conic-gradient(from 0deg,color-mix(in srgb,var(--ic) 26%,transparent) 0 9deg,transparent 9deg 24deg);
  -webkit-mask-image:radial-gradient(circle,#000 14%,transparent 60%);mask-image:radial-gradient(circle,#000 14%,transparent 60%);
  animation:lootspin 26s linear infinite}
.lootimg{display:block;width:100%;height:100%;object-fit:contain;padding:4px 10px 0;
  filter:drop-shadow(0 8px 12px rgba(60,30,20,.16));animation:lootbob 3.8s ease-in-out infinite;animation-delay:calc(var(--qd,0s)*6);
  transition:scale .3s cubic-bezier(.2,.7,.2,1)}
.lgi.loot:hover .lootimg{scale:1.09}
.lgi.loot:hover .lootray{animation-duration:9s}
.lootstars{position:absolute;top:13px;right:15px;z-index:2;font-size:15px;letter-spacing:1.5px;color:#f5b301;
  text-shadow:0 1px 0 #fff,0 2px 8px rgba(160,90,0,.3)}
.lgi.loot.r-leg .lootart::after{content:'';position:absolute;inset:-20% auto -20% -60%;width:40%;z-index:3;pointer-events:none;
  background:linear-gradient(100deg,transparent,rgba(255,255,255,.65),transparent);transform:skewX(-18deg);animation:lootshine 4.8s ease-in-out infinite}
@keyframes lootspin{to{rotate:360deg}}
@keyframes lootbob{0%,100%{translate:0 0}50%{translate:0 -9px}}
@keyframes lootshine{0%,62%{left:-60%}100%{left:140%}}

/* ---------- NGƯỜI THẦY SÁNG LẬP: ảnh trong khung blob nghệ thuật + hồ sơ thành tích ---------- */
.fdrphoto{padding:26px 24px 28px}
.fphoto{position:relative;width:min(290px,86%);aspect-ratio:4/5;margin:4px auto 20px}
.fphoto::before{content:'';position:absolute;inset:-9px;border-radius:32% 54% 44% 56%/30% 36% 58% 50%;
  background:conic-gradient(from 0deg,#ffd76a,#f0a91c,#e8574c,#a855f7,#2fc4d8,#ffd76a);animation:fblob 14s linear infinite;
  box-shadow:0 0 50px rgba(240,169,28,.35)}
.fphoto::after{content:'';position:absolute;inset:-26px;z-index:-1;border-radius:50%;
  background:radial-gradient(circle,rgba(255,215,106,.32),transparent 68%)}
.fphoto img,.fphoto .fav{position:relative;display:block;width:100%;height:100%;border-radius:30% 52% 46% 54%/28% 34% 60% 52%;
  border:5px solid #4a1422;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
/* anh da cat san khung 4:5 quanh thay (founder_song.jpg 720x900) nen chi can can giua */
.fphoto img{object-fit:cover;object-position:50% 50%}
.fphoto .fav{display:none;place-items:center;font-size:96px;background:linear-gradient(150deg,var(--gold),#e0912a)}
.fphoto.noimg img{display:none}.fphoto.noimg .fav{display:grid}
.fbadge{position:absolute;z-index:2;white-space:nowrap;font-size:12px;font-weight:800;color:#fff;padding:7px 12px;border-radius:99px;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.1));border:1px solid rgba(255,255,255,.4);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);box-shadow:0 10px 24px rgba(0,0,0,.3);animation:pjfloat 6s ease-in-out infinite}
.fbadge.fb1{left:-30px;top:46%}
.fbadge.fb2{right:-30px;bottom:-5%;animation-delay:2s}
.fspk{position:absolute;z-index:2;font-style:normal;color:var(--gold-l);text-shadow:0 0 12px rgba(255,215,106,.9);animation:qtw 2.6s ease-in-out infinite}
.fspk.k1{right:6%;top:-4%;font-size:22px}.fspk.k2{left:2%;bottom:-2%;font-size:16px;animation-delay:1.1s}
@keyframes fblob{to{rotate:360deg}}
.fachlab{margin-top:22px;font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-l)}
.fdrach{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:10px}
.fach{display:flex;gap:11px;align-items:flex-start;padding:12px 13px;border-radius:16px;
  background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.14)}
.fach .ic{flex:none;width:36px;height:36px;border-radius:11px;display:grid;place-items:center;font-size:19px;
  background:linear-gradient(150deg,rgba(255,215,106,.3),rgba(240,169,28,.1));border:1px solid rgba(255,215,106,.36)}
.fach b{display:block;font-size:13.5px;line-height:1.3}
.fach small{display:block;font-size:12px;line-height:1.42;color:rgba(255,255,255,.72);margin-top:2px}
.fach .yr{display:inline-block;margin-top:6px;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:#3f1019;background:var(--gold-l);padding:2px 8px;border-radius:99px}
.fdrbody .fdrpts{grid-template-columns:1fr 1fr;gap:12px 16px}
@media(max-width:820px){.fbadge.fb1{left:-6px}.fbadge.fb2{right:-6px}}
@media(max-width:560px){.fdrach,.fdrbody .fdrpts{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lootray,.lootimg,.lgi.loot.r-leg .lootart::after,.fphoto::before,.fbadge,.fspk{animation:none}}

/* ---------- NGƯỜI THẦY SÁNG LẬP: tiêu đề thống nhất + nền art "xưởng sáng tạo" mờ phủ kín ----------
   ::before = ảnh founder_studio.webp (bàn làm việc, bảng sơ đồ, sách, mũ tốt nghiệp, kệ cúp,
   thẻ app/game bay lên); ::after = lớp phủ maroon đậm để chữ trắng luôn đọc được. */
.fdr{position:relative;isolation:isolate}
.fdr::before{content:'';position:absolute;inset:0;z-index:-2;pointer-events:none;
  background:url(/assets/img/founder_studio.webp) center 30%/cover no-repeat;opacity:.55;filter:saturate(1.1)}
.fdr::after{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:
  radial-gradient(ellipse 60% 40% at 50% 8%,rgba(63,16,25,.25),transparent 70%),
  linear-gradient(180deg,rgba(63,16,25,.72) 0%,rgba(78,20,34,.62) 38%,rgba(63,16,25,.78) 70%,rgba(47,12,20,.92) 100%)}
.fdrtitle{position:relative;margin-bottom:38px}
.fdr .qhead{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.fdr .qbadge{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--maroon-d);box-shadow:0 5px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
.fdr .qbadge i{color:#fff}
.fdr .qsub{color:rgba(255,255,255,.8)}

/* ---------- VÌ SAO CHỌN CYBERSOFT: tiêu đề thống nhất + nền "bệ phóng tương lai" + bảng Bệ phóng của con ----------
   .whyband .bg : ảnh why_launch.webp (tên lửa trên bệ phóng, 5 bậc màu theo 5 tầng, tháp điều khiển), không blur
   .lpad        : bảng kính 4 ô thông số lấy từ QSTATS, tên lửa 3D lơ lửng góc trên phải */
.whyband .bg{inset:0;transform:none;filter:saturate(1.08);background-position:center 42%;opacity:.72}
.whyband .ov{background:
  radial-gradient(ellipse 60% 45% at 50% 6%,rgba(30,8,16,.35),transparent 70%),
  linear-gradient(180deg,rgba(40,10,24,.8) 0%,rgba(61,15,24,.6) 38%,rgba(46,12,22,.8) 76%,rgba(30,8,16,.94) 100%)}
.whytitle{margin-bottom:40px}
.whyband .qhead{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.whyband .qbadge{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--maroon-d);box-shadow:0 5px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
.whyband .qbadge i{color:#fff}
.whyband .qsub{color:rgba(255,255,255,.82);font-size:15.5px}
.whyband .qsub b{color:var(--gold-l)}
.whyband .wcfeat{margin-top:0}
.lpad{position:relative;border-radius:28px;padding:26px 22px 22px;
  background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.24);
  box-shadow:0 30px 70px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(14px) saturate(1.3);backdrop-filter:blur(14px) saturate(1.3)}
.lprk{position:absolute;right:-40px;top:-96px;width:220px;height:auto;pointer-events:none;
  filter:drop-shadow(0 18px 26px rgba(0,0,0,.45));animation:lprise 4.5s ease-in-out infinite}
@keyframes lprise{0%,100%{translate:0 0}50%{translate:0 -12px}}
.lphead{padding-right:150px;margin-bottom:16px}
.lphead span{display:block;font-family:var(--fd);font-weight:800;font-size:19px;letter-spacing:.05em;color:var(--gold-l)}
.lphead small{display:block;font-size:13px;color:rgba(255,255,255,.74);margin-top:2px}
.lpgrid{display:grid;grid-template-columns:1fr;gap:10px}
/* moi thong so la 1 hang: icon | so | nhan — xep doc de khong bao gio tran chu (truoc day 2x2, tung bi CSS Phuong phap de thanh 4 cot) */
.lpgrid .lps{display:grid;grid-template-columns:40px minmax(96px,auto) 1fr;align-items:center;column-gap:12px;padding:12px 16px}
.lpgrid .lps::after{right:-30px;top:-40px}
.lpgrid .lps i{grid-row:1/3;font-size:26px}
.lpgrid .lpn{grid-row:1/3;margin-top:0}
.lpgrid .lps b{margin-top:0;align-self:end;font-size:13.5px}
.lpgrid .lps small{margin-top:3px;align-self:start}
.lps{position:relative;overflow:hidden;border-radius:20px;padding:16px 15px 14px;color:#fff;background:linear-gradient(160deg,var(--qc),var(--qc));
  background:linear-gradient(160deg,var(--qc),color-mix(in srgb,var(--qc) 52%,#1a0a10));box-shadow:0 5px 0 #000,0 14px 26px rgba(0,0,0,.3);
  box-shadow:0 5px 0 color-mix(in srgb,var(--qc) 42%,#000),0 14px 26px rgba(0,0,0,.3);transition:transform .18s cubic-bezier(.2,.7,.2,1)}
.lps:hover{transform:translateY(-4px)}
.lps::after{content:'';position:absolute;right:-22px;top:-22px;width:92px;height:92px;border-radius:50%;background:rgba(255,255,255,.13);pointer-events:none}
.lps i{display:block;font-style:normal;font-size:25px;filter:drop-shadow(0 4px 6px rgba(0,0,0,.3))}
.lpn{display:flex;align-items:baseline;gap:3px;margin-top:8px;font-family:var(--fd);font-weight:800;line-height:1}
.lpn span{font-size:clamp(28px,3vw,38px)}
.lpn em{font-style:normal;font-size:15px;color:var(--gold-l)}
.lps b{display:block;font-size:13px;line-height:1.3;margin-top:6px}
.lps small{display:block;margin-top:5px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.78}
@media(max-width:960px){.lprk{width:170px;right:-12px;top:-76px}.lphead{padding-right:120px}}
@media(max-width:560px){.lprk{width:130px;top:-56px;right:-6px}.lphead{padding-right:92px}.lpad{padding:22px 16px 16px}}
@media(prefers-reduced-motion:reduce){.lprk{animation:none}.lps{transition:none}}

/* ---------- BỨC TƯỜNG TỰ LÀM (trang chủ): tiêu đề thống nhất trên khối tối ---------- */
#wall .qhead{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
#wall .qbadge{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--maroon-d);box-shadow:0 5px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
#wall .qbadge i{color:#fff}
#wall .qsub{color:rgba(255,255,255,.82);font-size:15px}

/* ---------- HÀNH TRÌNH LEO BẬC 3D (trang chủ) ----------
   .r3map  : khung giữ đúng tỉ lệ ảnh (2400/1100) nên ghim % luôn nằm đúng đảo khi co giãn
   .r3pin  : nhãn LV ghim trên đảo, nhánh có viền đứt; .r3card: thẻ level kiểu game bên dưới */
.r3map{position:relative;max-width:1180px;margin:26px auto 0;aspect-ratio:2400/1100;border-radius:30px;overflow:hidden;
  box-shadow:0 30px 60px rgba(90,20,29,.14),inset 0 0 0 1px rgba(255,255,255,.6)}
.r3map img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.r3map::after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 72%,rgba(251,243,225,.5))}
.r3pin{position:absolute;z-index:2;display:flex;align-items:center;gap:8px;padding:5px 14px 5px 5px;border-radius:99px;
  border:2px solid #fff;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  box-shadow:0 10px 24px rgba(40,20,30,.18);cursor:pointer;white-space:nowrap;font-family:var(--fb);
  transform:translate(-50%,calc(-100% - 44px));transition:transform .2s cubic-bezier(.2,.7,.2,1);animation:r3bob 3.6s ease-in-out infinite}
.r3pin::after{content:'';position:absolute;left:50%;bottom:-40px;width:2px;height:38px;transform:translateX(-50%);background:linear-gradient(var(--ac),transparent)}
.r3pin:nth-of-type(2){animation-delay:.6s}.r3pin:nth-of-type(3){animation-delay:1.2s}.r3pin:nth-of-type(4){animation-delay:1.8s}.r3pin:nth-of-type(5){animation-delay:2.4s}
.r3pin i{display:grid;place-items:center;min-width:34px;height:34px;padding:0 7px;border-radius:99px;font-style:normal;
  font-family:var(--fd);font-weight:800;font-size:13px;color:#fff;background:linear-gradient(160deg,var(--ac),var(--ac));background:linear-gradient(160deg,var(--ac),color-mix(in srgb,var(--ac) 62%,#000))}
.r3pin b{font-family:var(--fd);font-size:14px;letter-spacing:.03em;color:var(--ink)}
.r3pin small{font-size:11.5px;font-weight:600;color:var(--ink2)}
.r3pin.br{border-style:dashed;border-color:var(--ac)}
.r3pin:hover{transform:translate(-50%,calc(-100% - 50px)) scale(1.05)}
@keyframes r3bob{0%,100%{translate:0 0}50%{translate:0 -5px}}
.r3cards{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1180px;margin:22px auto 0}
.r3card{position:relative;cursor:pointer;text-align:left;border-radius:22px;padding:14px 14px 12px;background:#fff;border:2px solid #fff;
  border:2px solid color-mix(in srgb,var(--ac) 30%,#fff);box-shadow:0 5px 0 #fff,0 14px 28px rgba(90,20,29,.1);
  box-shadow:0 5px 0 color-mix(in srgb,var(--ac) 35%,#fff),0 14px 28px rgba(90,20,29,.1);transition:transform .18s,box-shadow .18s}
.r3card:hover{transform:translateY(-5px);box-shadow:0 9px 0 #fff,0 20px 36px rgba(90,20,29,.16);box-shadow:0 9px 0 color-mix(in srgb,var(--ac) 40%,#fff),0 20px 36px rgba(90,20,29,.16)}
.r3card.br{border-style:dashed;background:#fff;background:color-mix(in srgb,var(--ac) 5%,#fff)}
.r3top{display:flex;align-items:center;justify-content:space-between;gap:6px}
.r3lv{font-family:var(--fd);font-weight:800;font-size:11.5px;letter-spacing:.06em;color:#fff;background:var(--ac);padding:3px 10px;border-radius:99px}
.r3lv,.r3path{white-space:nowrap}
.r3path{font-size:10px;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--ac)}
.r3name{display:flex;align-items:center;gap:10px;margin-top:10px}
.r3em{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;font-size:22px;background:#fff;background:color-mix(in srgb,var(--ac) 14%,#fff)}
.r3name b{display:block;font-family:var(--fd);font-size:17px;line-height:1.1;color:var(--ink)}
.r3name small{display:block;margin-top:2px;font-size:12px;color:var(--ink2)}
.r3meta{display:flex;flex-direction:column;gap:3px;margin-top:10px;font-size:12px;font-weight:600;color:var(--ink2)}
.r3sk{display:flex;flex-wrap:wrap;gap:5px;margin-top:10px}
.r3sk em{font-style:normal;font-size:11px;font-weight:700;padding:3px 8px;border-radius:99px;color:var(--ac);
  color:color-mix(in srgb,var(--ac) 78%,#000);background:#fff;background:color-mix(in srgb,var(--ac) 12%,#fff)}
.r3go{margin-top:10px;font-size:12.5px;font-weight:800;color:var(--ac)}
@media(max-width:1100px){.r3cards{grid-template-columns:repeat(3,1fr)}}
@media(max-width:760px){.r3map{border-radius:20px}.r3pin{padding:3px 9px 3px 3px;gap:5px;transform:translate(-50%,calc(-100% - 24px))}
  .r3pin::after{bottom:-22px;height:20px}.r3pin i{min-width:24px;height:24px;font-size:10.5px}.r3pin b{font-size:11px}.r3pin small{display:none}
  .r3cards{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.r3pin b{display:none}.r3pin{padding:3px}.r3cards{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.r3pin{animation:none}.r3card{transition:none}}

/* ---------- PHƯƠNG PHÁP AI-NATIVE: AI-Native Engineer Learning Path (8 bước) ----------
   .lprail : thanh quy trình, token "sản phẩm" chạy qua 8 trạm (chu kỳ 16s, mỗi bước 2s)
   .lpcard : thẻ bước — .lpcard::before sáng viền đúng lúc bước đó đang chạy
   .lpsvg  : hình SVG động riêng từng bước (SMIL cho chuyển động theo đường, CSS cho bật/nhấp nháy) */
.lpsec{position:relative;overflow:hidden}
.lpkick{margin:14px auto 0;font-family:var(--fd);font-weight:700;font-size:clamp(17px,2vw,21px);color:var(--ink)}
.lpkick b{color:var(--maroon)}
.lpsec .lead{margin-top:6px}
.lprail{position:relative;max-width:1040px;height:80px;margin:78px auto 4px}
.lptrack{position:absolute;left:0;right:0;top:22px;height:8px;border-radius:99px;background:#eadfd2;overflow:hidden}
.lpfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:99px;
  background:linear-gradient(90deg,#e8574c,#e0912a,#0fa697,#2f74d0,#6d4bd8,#c8384b,#0e7490,#7b1e2b);background-size:1040px 100%;animation:lpFill 16s infinite}
.lpnode{position:absolute;top:0;width:0;display:flex;flex-direction:column;align-items:center}
.lpnode b{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#fff;color:var(--c);border:3px solid #fff;
  border:3px solid color-mix(in srgb,var(--c) 45%,#fff);font-family:var(--fd);font-weight:800;font-size:18px;
  box-shadow:0 6px 14px rgba(90,20,29,.1);animation-duration:16s;animation-iteration-count:infinite}
.lpnode small{margin-top:8px;white-space:nowrap;font-size:10.5px;font-weight:800;letter-spacing:.06em;color:var(--ink2)}
.lptoken{position:absolute;top:-8px;left:0;width:0;height:0;z-index:3;animation:lpMove 16s infinite}
.lptoken i{position:absolute;left:0;top:0;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;
  transform:translate(-50%,-100%);font-style:normal;font-size:24px;background:#fff;
  box-shadow:0 10px 22px rgba(90,20,29,.2),0 0 0 3px rgba(255,255,255,.9);visibility:hidden;
  animation:lpIco 16s infinite backwards;animation-delay:calc(var(--i)*2s)}
.lptoken i::after{content:'';position:absolute;left:50%;bottom:-6px;width:12px;height:12px;background:#fff;transform:translateX(-50%) rotate(45deg);border-radius:2px;z-index:-1}
/* dung visibility thay opacity: opacity chay tren compositor, co the lech nhip voi thanh (left/width chay luong chinh) */
@keyframes lpIco{0%{visibility:hidden}.5%,12%{visibility:visible}12.5%,100%{visibility:hidden}}
.lpsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:26px}
.lpcard{position:relative;display:flex;flex-direction:column;border-radius:24px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;
  border:1.5px solid color-mix(in srgb,var(--c) 22%,#efe6db);box-shadow:0 14px 30px rgba(90,20,29,.08)}
.lpcard::before{content:'';position:absolute;inset:0;z-index:3;border-radius:inherit;pointer-events:none;
  box-shadow:inset 0 0 0 3px transparent,0 0 0 4px transparent;
  animation:lpCard 16s infinite backwards;animation-delay:calc(var(--i)*2s)}
@keyframes lpCard{0%{box-shadow:inset 0 0 0 3px transparent,0 0 0 4px transparent}1.5%,11%{box-shadow:inset 0 0 0 3px var(--c),0 0 0 5px transparent;box-shadow:inset 0 0 0 3px var(--c),0 0 0 5px color-mix(in srgb,var(--c) 24%,transparent)}12.5%,100%{box-shadow:inset 0 0 0 3px transparent,0 0 0 4px transparent}}
.lpart{position:relative;aspect-ratio:240/150;background:radial-gradient(circle at 72% 28%,#fff 0%,#fffaf2 58%,#fffaf2 100%);
  background:radial-gradient(circle at 72% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 8%,#fffaf2) 58%,#fffaf2 100%)}
.lpbody{flex:1;display:flex;flex-direction:column;gap:6px;padding:14px 16px 16px}
.lptop{display:flex;align-items:center;gap:8px}
.lpno{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:var(--c);color:#fff;font-family:var(--fd);font-weight:800;font-size:14px}
.lpen{font-size:10.5px;font-weight:800;letter-spacing:.12em;color:var(--c)}
.lpcard h3{margin-top:2px;font-family:var(--fd);font-size:17px;line-height:1.2;color:var(--ink)}
.lpdo{font-size:13px;line-height:1.5;color:var(--ink2)}
.lpskill{align-self:flex-start;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:99px;color:var(--c);
  color:color-mix(in srgb,var(--c) 78%,#000);background:#fff;background:color-mix(in srgb,var(--c) 12%,#fff)}
.lpph{margin-top:auto;padding:8px 10px;border-radius:12px;border-left:3px solid var(--c);background:#fbf6ee;font-size:12.5px;line-height:1.45;color:var(--ink)}
.lpph em{display:block;margin-bottom:2px;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--c)}
/* hình SVG động */
.lpsvg{display:block;width:100%;height:100%}
.lpsvg .la-c{fill:var(--c)}
.lpsvg .la-soft2{fill:var(--c);fill:color-mix(in srgb,var(--c) 55%,#fff)}
.lpsvg .la-card{fill:#fff;filter:drop-shadow(0 6px 10px rgba(60,30,30,.12))}
.lpsvg .la-line{fill:#e9e1d6}
.lpsvg .la-glass{fill:rgba(191,243,251,.45)}
.lpsvg .la-ring{fill:none;stroke:var(--c);stroke-width:5}
.lpsvg .la-qt{fill:#fff;font:800 20px var(--fd);text-anchor:middle;dominant-baseline:central}
.lpsvg .la-qs{font-size:15px}.lpsvg .la-qx{font-size:13px}
.lpsvg .la-wl{fill:none;stroke:#fff;stroke-width:5;stroke-linecap:round;opacity:.9}
.lpsvg .la-arrow{fill:none;stroke:var(--c);stroke-width:5;stroke-linecap:round}
.lpsvg .la-tick{fill:none;stroke:#fff;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lpsvg .la-dia{fill:#fff;fill:color-mix(in srgb,var(--c) 16%,#fff);stroke:var(--c);stroke-width:3}
.lpsvg .la-box{fill:#fff;stroke:var(--c);stroke-width:3}
.lpsvg .la-bd{stroke:#e9e1d6;stroke:color-mix(in srgb,var(--c) 35%,#e9e1d6);stroke-width:2}
.lpsvg .la-flow{fill:none;stroke:var(--c);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round}
.lpsvg .la-dash{stroke-dasharray:6 7;animation:laDash 1s linear infinite}
.lpsvg .la-dot{fill:#ffc93c;stroke:#fff;stroke-width:2}
.lpsvg .la-t8{fill:#fff;font:800 8.5px var(--fb);letter-spacing:.04em;text-anchor:middle;dominant-baseline:central}
.lpsvg .la-t12{fill:var(--c);font:800 15px var(--fd);text-anchor:middle;dominant-baseline:central}
.lpsvg .la-ed{fill:#1f1b31}.lpsvg .la-edbar{fill:#2d2745}
.lpsvg .la-eye{fill:#22d3ee}
.lpsvg .la-chip{fill:#fff;fill:color-mix(in srgb,var(--c) 14%,#fff);stroke:var(--c);stroke-width:1.5}
.lpsvg .la-chipt{fill:var(--c)}
.lpsvg .la-score{fill:#f59e0b;font:800 13px var(--fd);text-anchor:middle}
.lpsvg .la-cloud{fill:#fff;filter:drop-shadow(0 6px 10px rgba(30,60,90,.16))}
.lpsvg .la-up{fill:none;stroke:var(--c);stroke-width:4;stroke-linecap:round;stroke-linejoin:round}
.lpsvg .la-emo{font-size:26px;text-anchor:middle;dominant-baseline:central}
.lpsvg .la-emo2{font-size:17px;text-anchor:middle;dominant-baseline:central}
.lpsvg .la-link{stroke:var(--c);stroke-width:2.5;stroke-dasharray:4 6;opacity:.7;animation:laDash 1.2s linear infinite reverse}
.lpsvg .la-pop,.lpsvg .la-pop2{transform-box:fill-box;transform-origin:center;animation:laPop 2.8s cubic-bezier(.2,1.4,.4,1) infinite}
.lpsvg .la-pop2{animation:laGlow 2s ease-in-out infinite}
.lpsvg .la-pulse{transform-box:fill-box;transform-origin:center;animation:laPulse 1.6s ease-in-out infinite}
.lpsvg .la-ringp{fill:none;stroke:var(--c);stroke-width:3;transform-box:fill-box;transform-origin:center;animation:laRing 2.4s ease-out infinite}
@keyframes laPop{0%,100%{transform:scale(0);opacity:0}12%,80%{transform:scale(1);opacity:1}}
@keyframes laGlow{0%,100%{transform:scale(1)}40%{transform:scale(1.18)}}
@keyframes laPulse{0%,100%{transform:scale(1)}50%{transform:scale(1.12)}}
@keyframes laRing{0%{transform:scale(1);opacity:.8}100%{transform:scale(1.7);opacity:0}}
@keyframes laDash{to{stroke-dashoffset:-26}}
@media(max-width:1100px){.lpsteps{grid-template-columns:repeat(2,1fr)}}
@media(max-width:760px){.lprail{height:46px;margin-top:64px}.lptrack{top:13px;height:6px}.lpnode b{width:32px;height:32px;font-size:13px;border-width:2px}
  .lpnode small{display:none}.lptoken i{width:34px;height:34px;font-size:18px}}
@media(max-width:560px){.lpsteps{grid-template-columns:1fr}}
@media(prefers-reduced-motion:reduce){.lpfill,.lptoken,.lptoken i,.lpnode b,.lpcard::before,.lpsvg *{animation:none!important}.lpfill{width:100%}.lptoken{display:none}}
@keyframes lpMove{0%,9.375%{left:0.0000%}12.5%,21.875%{left:14.2857%}25%,34.375%{left:28.5714%}37.5%,46.875%{left:42.8571%}50%,59.375%{left:57.1429%}62.5%,71.875%{left:71.4286%}75%,84.375%{left:85.7143%}87.5%,99%{left:100.0000%}100%{left:0%}}
@keyframes lpFill{0%,9.375%{width:0.0000%}12.5%,21.875%{width:14.2857%}25%,34.375%{width:28.5714%}37.5%,46.875%{width:42.8571%}50%,59.375%{width:57.1429%}62.5%,71.875%{width:71.4286%}75%,84.375%{width:85.7143%}87.5%,99%{width:100.0000%}100%{width:0%}}
@keyframes lpN0{0%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}1%,11.5%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}12.5%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n0{animation-name:lpN0}
@keyframes lpN1{0%,12.4%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}13.5%,24%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}25%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n1{animation-name:lpN1}
@keyframes lpN2{0%,24.9%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}26%,36.5%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}37.5%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n2{animation-name:lpN2}
@keyframes lpN3{0%,37.4%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}38.5%,49%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}50%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n3{animation-name:lpN3}
@keyframes lpN4{0%,49.9%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}51%,61.5%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}62.5%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n4{animation-name:lpN4}
@keyframes lpN5{0%,62.4%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}63.5%,74%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}75%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n5{animation-name:lpN5}
@keyframes lpN6{0%,74.9%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}76%,86.5%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}87.5%,97%{background:var(--c);background:color-mix(in srgb,var(--c) 82%,#fff);color:#fff;scale:1;box-shadow:0 6px 14px rgba(90,20,29,.12)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n6{animation-name:lpN6}
@keyframes lpN7{0%,87.4%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}88.5%,97%{background:var(--c);color:#fff;scale:1.16;box-shadow:0 0 0 8px transparent,0 10px 22px rgba(90,20,29,.22);box-shadow:0 0 0 8px color-mix(in srgb,var(--c) 24%,transparent),0 10px 22px rgba(90,20,29,.22)}100%{background:#fff;color:var(--c);scale:1;box-shadow:0 6px 14px rgba(90,20,29,.1)}}
.lpnode b.n7{animation-name:lpN7}

/* ---------- PHƯƠNG PHÁP trên điện thoại: chế độ Story (carousel vuốt ngang + thanh 8 đoạn) ----------
   Ghi chú: class .lpsteps/.lpno đổi từ .lpgrid/.lpn vì trùng tên với bảng "Bệ phóng của con" (whyBand). */
.lpstory,.lphint{display:none}
@media(max-width:760px){
 .lpsec .lprail{display:none}
 .lpstory{display:block;margin:20px 0 8px}
 .lpsegs{display:grid;grid-template-columns:repeat(8,1fr);gap:4px}
 .lpseg{display:block;height:24px;padding:9px 0;border:0;background:none;cursor:pointer}
 .lpseg span{position:relative;display:block;height:6px;border-radius:99px;background:#e6dace;overflow:hidden}
 .lpseg span::after{content:'';position:absolute;left:0;top:0;bottom:0;width:0;border-radius:inherit;background:var(--c)}
 .lpseg.done span::after,.lpseg.now span::after{width:100%}
 .lpseg.now.play span::after{animation:lpSeg 5s linear forwards}
 .lpstrow{display:flex;align-items:center;gap:10px;margin-top:2px}
 .lplab{flex:1;min-height:22px;text-align:center;font-size:14.5px;font-weight:700;line-height:1.35;color:var(--ink)}
 .lplab b{font-family:var(--fd)}
 .lpprev,.lpnext{flex:none;width:40px;height:40px;border-radius:50%;border:1.5px solid var(--line);background:#fff;color:var(--maroon);
   font-size:24px;line-height:1;box-shadow:0 4px 10px rgba(90,20,29,.08);cursor:pointer}
 .lpsteps{display:flex;gap:12px;margin:0 -22px;padding:8px 22px 14px;overflow-x:auto;scroll-snap-type:x mandatory;
   scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .lpsteps::-webkit-scrollbar{display:none}
 .lpsteps .lpcard{flex:0 0 84%;scroll-snap-align:center;opacity:.5;transform:none;scale:.94;transition:scale .3s,opacity .3s}
 .lpsteps .lpcard.on{opacity:1;scale:1}
 .lpsteps .lpcard::before{animation:none}
 .lpsteps .lpcard.on::before{box-shadow:inset 0 0 0 3px var(--c),0 0 0 5px transparent;box-shadow:inset 0 0 0 3px var(--c),0 0 0 5px color-mix(in srgb,var(--c) 22%,transparent)}
 .lphint{display:block;margin-top:0;text-align:center;font-size:12.5px;color:var(--muted)}
}
@keyframes lpSeg{from{width:0}to{width:100%}}
@media(prefers-reduced-motion:reduce){.lpsteps .lpcard{transition:none}}

/* ---------- ĐIỆN THOẠI: dải vuốt dùng chung (.msw do mSwipeInit gắn) + gọn nhịp section ----------
   Không kéo tràn mép (margin âm) để không bao giờ gây tràn ngang trang; thẻ 86% cho thẻ kế ló mép. */
.mswbar{display:none}
@media(max-width:760px){
 .msw{display:flex!important;flex-wrap:nowrap!important;grid-template-columns:none!important;gap:12px!important;
   overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;padding:4px 2px 12px!important;
   scrollbar-width:none;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain}
 .msw::-webkit-scrollbar{display:none}
 .msw>*{flex:0 0 86%!important;max-width:86%!important;min-width:0;scroll-snap-align:center;margin-top:0!important;margin-bottom:0!important;grid-column:auto!important}
 .msw>*[style*="display: none"],.msw>*[style*="display:none"]{display:none!important}
 .mswbar{display:flex;align-items:center;justify-content:center;gap:10px;margin:2px 0 4px;font-size:12px;font-weight:700;color:var(--muted)}
 .mswn b{font-family:var(--fd);font-size:14px;color:var(--maroon)}
 .mswdots{display:flex;align-items:center;gap:5px}
 .mswdots i{display:block;width:7px;height:7px;border-radius:99px;background:#dccfc0;cursor:pointer;transition:width .25s,background .25s}
 .mswdots i.on{width:22px;background:var(--maroon)}
 .mswhint{font-size:11.5px;opacity:.8;transition:opacity .2s}
 .mswbar.end .mswhint{opacity:0}
 /* nền tối */
 .fdr .mswbar,.imgband .mswbar,.dark .mswbar,#wall .mswbar{color:rgba(255,255,255,.72)}
 .fdr .mswn b,.imgband .mswn b,.dark .mswn b,#wall .mswn b{color:var(--gold-l)}
 .fdr .mswdots i,.imgband .mswdots i,.dark .mswdots i,#wall .mswdots i{background:rgba(255,255,255,.28)}
 .fdr .mswdots i.on,.imgband .mswdots i.on,.dark .mswdots i.on,#wall .mswdots i.on{background:var(--gold)}
}
@media(prefers-reduced-motion:reduce){.mswdots i{transition:none}}
/* ---------- ĐIỆN THOẠI (≤760px): gọn nhịp + các bố cục thay thế (ngoài dải vuốt) ---------- */
.pjmore{display:none}
@media(max-width:760px){
 .sec{padding:50px 0}
 .sec.tight{padding:38px 0}
 /* thẻ nhắc việc chỉ để trang trí (aria-hidden) — ẩn để thư gửi ba mẹ lên ngay */
 .hgrid .hremind{display:none}
 /* dải đăng ký ở trang chủ: nút Zalo/Messenger/Gọi đã có ở cụm nút nổi */
 .ctintro+.ctgrid .ctside{display:none}
 /* hồ sơ người thầy: 2 cột gọn */
 .fdrach{grid-template-columns:1fr 1fr;gap:8px}
 .fach{flex-direction:column;gap:6px;padding:10px 11px}
 .fach .ic{width:30px;height:30px;font-size:16px}
 .fach b{font-size:12.5px}.fach small{font-size:11px}
 /* thống kê Về CyberSoft: 2×2 */
 .grid4{grid-template-columns:1fr 1fr!important;gap:10px!important}
 .grid4>.card{padding:16px 10px!important}
 /* bảng so sánh -> mỗi hàng một thẻ */
 table.cmp,table.cmp tbody,table.cmp tr,table.cmp td{display:block;width:auto}
 table.cmp thead{display:none}
 table.cmp{background:none!important;box-shadow:none!important;border:0!important;border-radius:0!important;overflow:visible!important}
 table.cmp tr{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh-sm);padding:12px 14px;margin-bottom:10px}
 table.cmp td{border:0!important;padding:3px 0!important;font-size:13.5px;line-height:1.45}
 table.cmp td:first-child{font-family:var(--fd);font-size:15.5px;font-weight:700;color:var(--maroon);padding-bottom:6px!important}
 table.cmp td:not(:first-child)::before{content:attr(data-label);display:block;font-size:10px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
 table.cmp td.us{background:#fbf6ec;border-radius:10px;padding:6px 9px!important;margin-top:5px}
 table.cmp tbody.msw{padding-bottom:12px!important}
 table.cmp tbody.msw tr{margin-bottom:0}
 /* con dấu Dấu Tự Làm cỡ lớn (~220px) -> ẩn, thay bằng 🦁 nhỏ trước tiêu đề */
 .sealstrip{grid-template-columns:1fr!important}
 .sealstrip .sealbox{display:none}
 .sealtxt>b::before{content:'🦁 '}
 /* trang Dự án: 2 cột gọn + Xem thêm */
 .pjsec #pgrid{grid-template-columns:1fr 1fr!important;gap:10px!important}
 .pjsec #pgrid .prodcard{padding:6px;border-radius:16px}
 .pjsec #pgrid .prodcard img{border-radius:11px}
 .pjsec #pgrid .prodcard .cap{padding:8px 4px 2px}
 .pjsec #pgrid .prodcard .cap b{font-size:13px;line-height:1.25}
 .pjsec #pgrid .prodcard .cap small{display:none}
 .pjsec #pgrid .rt-tag{font-size:9.5px;padding:2px 7px;margin-bottom:5px}
 .pjx{display:none!important}
 .pjmore{display:block;width:100%;margin:18px 0 0;padding:14px 16px;border:0;border-radius:99px;cursor:pointer;
   background:linear-gradient(180deg,var(--maroon-l),var(--maroon));color:#fff;font-family:var(--fd);font-weight:800;font-size:15px;box-shadow:0 8px 18px rgba(123,30,43,.3)}
}
/* ---------- Trang Blog trên điện thoại: danh sách ảnh vuông trái - chữ phải (.blist gắn trong mSwipeInit) ---------- */
@media(max-width:760px){
 .blist{grid-template-columns:1fr!important;gap:10px!important}
 .blist .bcard{display:grid;grid-template-columns:104px 1fr;align-items:center;border-radius:16px}
 .blist .bimg{aspect-ratio:1/1;height:100%}
 .blist .bcat{left:6px;bottom:6px;font-size:9.5px;padding:2px 6px}
 .blist .bbody{padding:10px 12px 10px 0}
 .blist .bbody h3{font-size:14.5px;line-height:1.3;margin:0 0 6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
 .blist .bbody p{display:none}
 .blist .bmeta{margin-top:0;gap:10px;font-size:11px}
}
/* ---------- ĐIỆN THOẠI: tinh chỉnh sau khi chụp kiểm tra ---------- */
@media(max-width:760px){
 .mswbar,.mswn{white-space:nowrap}
 /* nút coverflow: dời về giữa sân khấu ảnh (khối .cflow giờ ngắn nên 50% rơi vào khung chữ) */
 .cflow .cfnav{top:214px}
 /* danh sách khóa: 2 cột gọn, chỉ mã + tên */
 .clist{grid-template-columns:1fr 1fr!important;gap:8px!important}
 .crow{flex-direction:column;align-items:flex-start;gap:6px;padding:10px 11px}
 .crow small,.crow .ar{display:none}
 .crow b{font-size:13px;line-height:1.3}
 .crow .cc{font-size:11.5px;padding:4px 8px}
 /* khối Lời hứa với ba mẹ: ảnh học viên thấp lại */
 .pmside .pmkids{max-height:210px;width:auto;margin:0 auto;object-fit:contain}
}
/* bo dem "3/9": mot so khung (vd .sealtxt b{display:block}) bien moi <b> ben trong thanh khoi -> so bi xuong dong */
.mswn b{display:inline!important}

/* ---------- TỐC ĐỘ TẢI: ảnh nền section bên dưới chỉ tải khi sắp cuộn tới (lazyBgInit gắn .lzb, thêm .bgon) ----------
   Chỉ chặn các lớp chứa ảnh url(); lớp phủ gradient ở ::after giữ nguyên. Ảnh nền hero (.hero::before) không chặn. */
.lzb:not(.bgon)::before{background-image:none!important}
.pgsec.lzb:not(.bgon){background-image:none!important}
.lzb:not(.bgon) .pgoal,.lzb:not(.bgon) .bg,.scn.lzb:not(.bgon){background-image:none!important}

/* ---------- GIẢI ĐÁP CHO BA MẸ: thẻ hỏi-đáp 2 cột, nút bấm thật ----------
   Bỏ <q> (trình duyệt tự chèn “ ” bị justify đẩy lệch hai mép). Dấu +/− vẽ bằng 2 vạch CSS nên luôn cân giữa.
   Mở/đóng mượt bằng grid-template-rows 0fr→1fr (không cần đoán max-height). Ghi đè luật .faq cũ. */
.fqsec .qsub{max-width:640px}
.fqgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px;align-items:start;max-width:1080px;margin:34px auto 0}
.fqcol{display:flex;flex-direction:column;gap:16px}
.fqcol .faq+.faq{margin-top:0}
.faq{--fc:var(--maroon);position:relative;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--fc) 16%,#efe6db);border-radius:22px;
  box-shadow:0 10px 24px rgba(90,20,29,.06);overflow:hidden;transition:border-color .2s,box-shadow .2s}
.faq:hover{border-color:#fff;border-color:color-mix(in srgb,var(--fc) 45%,#fff);box-shadow:0 14px 30px rgba(90,20,29,.1)}
.faq.op{border-color:var(--fc);box-shadow:0 16px 34px transparent;box-shadow:0 16px 34px color-mix(in srgb,var(--fc) 18%,transparent)}
.fq{display:flex;align-items:center;gap:14px;width:100%;margin:0;padding:16px 16px 16px 18px;border:0;background:none;
  text-align:left;cursor:pointer;font:inherit;color:var(--ink)}
.fq:focus-visible{outline:3px solid #fff;outline:3px solid color-mix(in srgb,var(--fc) 45%,#fff);outline-offset:-4px;border-radius:22px}
.fqi{flex:none;display:grid;place-items:center;width:46px;height:46px;border-radius:15px;font-size:23px;line-height:1;background:#fff;
  background:color-mix(in srgb,var(--fc) 12%,#fff);transition:transform .25s cubic-bezier(.2,1.4,.4,1)}
.faq:hover .fqi,.faq.op .fqi{transform:rotate(-8deg) scale(1.06)}
.fqt{flex:1;min-width:0}
.fqt small{display:block;margin-bottom:3px;font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--fc)}
.fqt b{display:block;font-family:var(--fd);font-weight:700;font-size:16.5px;line-height:1.32;color:var(--ink)}
.fqx{position:relative;flex:none;width:34px;height:34px;border-radius:50%;background:#fff;background:color-mix(in srgb,var(--fc) 11%,#fff);transition:background .25s,transform .35s}
.fqx::before,.fqx::after{content:'';position:absolute;left:50%;top:50%;width:14px;height:2.5px;margin:-1.25px 0 0 -7px;border-radius:2px;background:var(--fc);transition:transform .35s,background .25s}
.fqx::after{transform:rotate(90deg)}
.faq.op .fqx{background:var(--fc);transform:rotate(180deg)}
.faq.op .fqx::before,.faq.op .fqx::after{background:#fff}
.faq.op .fqx::after{transform:rotate(0)}
.faq .a{display:grid;grid-template-rows:0fr;max-height:none;overflow:visible;transition:grid-template-rows .32s ease;color:var(--ink2);font-size:14.5px}
.faq.op .a{grid-template-rows:1fr;max-height:none}
.faq .a>div{min-height:0;overflow:hidden}
.faq .a p{margin:0 18px 18px 78px;padding:12px 15px;border-left:3px solid var(--fc);border-radius:0 14px 14px 0;background:#fbf6ee;line-height:1.62}
.fqmore{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:10px 14px;margin:28px 0 0;font-size:15px;font-weight:700;color:var(--ink2);text-align:center}
.fqmore a{display:inline-flex;align-items:center;gap:8px;padding:9px 18px 9px 9px;border-radius:99px;background:#0068ff;color:#fff;font-weight:800;
  box-shadow:0 8px 18px rgba(0,104,255,.25);transition:transform .15s}
.fqmore a:hover{transform:translateY(-2px);color:#fff}
.fqmore a span{display:grid;place-items:center;height:26px;padding:0 9px;border-radius:99px;background:#fff;color:#0068ff;font-size:11.5px;font-weight:800}
@media(max-width:760px){
 .fqgrid{display:flex;flex-direction:column;gap:10px;margin-top:24px}
 .fqcol{display:contents}
 .fqgrid .faq{order:var(--o)}
 .fq{gap:11px;padding:13px 12px 13px 13px}
 .fqi{width:38px;height:38px;font-size:19px;border-radius:12px}
 .fqt b{font-size:15px}
 .fqx{width:30px;height:30px}
 .faq .a p{margin:0 12px 13px}
 .fqmore{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.faq .a,.fqx,.fqx::before,.fqx::after,.fqi{transition:none}}

/* ---------- Tiêu đề qhead thống nhất: biến thể nền tối dùng chung (khối CTA .dark, Bức tường...) + Thư gửi ba mẹ ---------- */
.dark .qhead{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.dark .qbadge{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--maroon-d);box-shadow:0 5px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
.dark .qbadge i{color:#fff}
.dark .qsub{color:rgba(255,255,255,.82)}
.hstitle{margin-bottom:34px}
@media(max-width:760px){.hstitle{margin-bottom:24px}}

/* ---------- HỆ SINH THÁI HỌC TẬP TOÀN DIỆN 360 (trong khối Vì sao chọn CyberSoft) ----------
   Panel kính tông vàng cam trên nền maroon. Chu kỳ 14s, 7 bước × 2s: trạm .e360n và dòng .e360list li
   sáng cùng lúc bằng background/box-shadow (cùng luồng chính). Chấm .e360run chạy vòng bằng SMIL. */
.e360{position:relative;margin-top:44px;padding:30px 32px 32px;border-radius:30px;color:#fff;overflow:hidden;
  background:linear-gradient(120deg,rgba(58,20,18,.78) 0%,rgba(120,50,20,.7) 55%,rgba(214,120,40,.62) 100%);
  border:1px solid rgba(255,215,106,.34);box-shadow:0 30px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.e360::before{content:'';position:absolute;right:-120px;top:-120px;width:420px;height:420px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,196,90,.35),transparent 65%)}
.e360hd{position:relative;display:flex;align-items:center;gap:16px}
.e360tag{flex:none;display:grid;place-items:center;width:64px;height:64px;border-radius:20px;font-family:var(--fd);font-weight:800;font-size:21px;
  color:var(--maroon-d);background:linear-gradient(160deg,var(--gold-l),var(--gold));box-shadow:0 6px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
.e360hd h3{font-family:var(--fd);font-weight:800;font-size:clamp(21px,2.6vw,29px);line-height:1.15;text-transform:uppercase;letter-spacing:.02em;color:#fff}
.e360hd h3 b{color:var(--gold-l)}
.e360hd p{margin-top:4px;font-size:14.5px;color:rgba(255,255,255,.8)}
.e360grid{position:relative;display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:30px;align-items:center;margin-top:24px}
.e360list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.e360list li{display:flex;align-items:center;gap:14px;padding:9px 14px 9px 9px;border-radius:16px;background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);transition:background .35s,box-shadow .35s}
.e360list li.on{background:rgba(255,215,106,.2);box-shadow:inset 3px 0 0 var(--gold),0 8px 18px rgba(0,0,0,.18)}
.e360no{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-family:var(--fd);font-weight:800;font-size:22px;
  color:var(--gold-l);background:rgba(255,215,106,.12)}
.e360tx{font-size:14.5px;line-height:1.45;font-weight:600;color:rgba(255,255,255,.92)}
.e360ring{position:relative;width:100%;max-width:420px;aspect-ratio:1;margin:0 auto}
.e360svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.e360orb{fill:none;stroke:rgba(255,215,106,.22);stroke-width:14}
.e360dash{fill:none;stroke:rgba(255,236,190,.75);stroke-width:2.5;stroke-dasharray:3 14;stroke-linecap:round;animation:e360D 30s linear infinite}
@keyframes e360D{to{stroke-dashoffset:-340}}
.e360sp{stroke:rgba(255,236,190,.35);stroke-width:1.5}
.e360pt{fill:#fff;stroke:var(--gold);stroke-width:3}
/* chấm chạy: tay quay .e360arm xoay quanh tâm, chấm ở mép trên (bán kính 42%) */
.e360arm{position:absolute;inset:0;z-index:1;pointer-events:none;transition:rotate 1s cubic-bezier(.5,0,.3,1)}
.e360dot{position:absolute;left:50%;top:8%;width:18px;height:18px;margin:-9px 0 0 -9px;border-radius:50%;background:#fff6d6;box-shadow:0 0 0 7px rgba(255,215,106,.35),0 0 22px rgba(255,230,160,.95)}
.e360hub{position:absolute;left:50%;top:50%;width:36%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%,#fff4d6,#f0b44a 55%,#b86a12);box-shadow:0 0 0 10px rgba(255,215,106,.18),0 0 50px rgba(255,190,80,.55),inset 0 -6px 14px rgba(120,60,0,.35)}
.e360hub b{font-family:var(--fd);font-weight:800;font-size:clamp(26px,3.4vw,40px);line-height:1;color:var(--maroon-d)}
.e360hub small{margin-top:2px;font-size:9.5px;font-weight:800;letter-spacing:.14em;color:rgba(90,20,29,.75)}
.e360arc{position:absolute;inset:9%;border-radius:50%;border:2.5px dashed rgba(90,20,29,.35);animation:e360S 12s linear infinite}
@keyframes e360S{to{rotate:360deg}}
.e360n{position:absolute;width:17%;aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;display:grid;place-items:center;
  background:linear-gradient(160deg,#ffe7ad,#e89a2c);border:3px solid rgba(255,244,214,.9);box-shadow:0 10px 22px rgba(0,0,0,.3);
  z-index:2;transition:background .35s,box-shadow .35s}
.e360n.on{background:linear-gradient(160deg,#fffdf4,#ffd36a);box-shadow:0 0 0 8px rgba(255,215,106,.4),0 0 34px rgba(255,220,130,.9)}
.e360n i{font-style:normal;font-size:clamp(20px,2.4vw,28px);line-height:1}
.e360n em{position:absolute;right:-6px;top:-6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;
  font-family:var(--fd);font-weight:800;font-size:13px;color:#fff;background:var(--maroon);border:2px solid #fff}
@media(max-width:960px){.e360grid{grid-template-columns:1fr;gap:18px}.e360ring{max-width:340px;order:-1}}
@media(max-width:560px){.e360{padding:22px 16px 18px;border-radius:24px;margin-top:34px}
  .e360tag{width:50px;height:50px;font-size:17px;border-radius:15px}.e360hd{gap:12px}.e360hd p{font-size:13.5px}
  .e360ring{max-width:290px}.e360n em{width:20px;height:20px;font-size:11px}
  .e360list li{gap:11px;padding:8px 10px 8px 8px}.e360no{width:32px;height:32px;font-size:18px}.e360tx{font-size:13.5px}}
@media(prefers-reduced-motion:reduce){.e360dash,.e360arc{animation:none}.e360arm,.e360n,.e360list li{transition:none}}
/* Khối 360 trên điện thoại: ẩn danh sách 7 dòng, chỉ giữ vòng tròn + 1 dòng chú thích đổi theo trạm đang sáng (chạm trạm để xem) */
.e360cap{display:none}
.e360n{cursor:pointer}
.e360n:focus-visible{outline:3px solid #fff;outline-offset:3px}
@media(max-width:760px){
 .e360list{display:none}
 .e360cap{display:flex;align-items:center;gap:11px;min-height:74px;margin:2px 0 0;padding:10px 14px 10px 10px;border-radius:16px;
   background:rgba(255,215,106,.18);box-shadow:inset 3px 0 0 var(--gold)}
 .e360cap b{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:11px;font-family:var(--fd);font-weight:800;font-size:19px;color:var(--maroon-d);background:var(--gold-l)}
 .e360cap span{font-size:14px;line-height:1.45;font-weight:600;color:#fff}
 .e360ring::after{content:'Chạm từng trạm để xem';position:absolute;left:0;right:0;bottom:-24px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.6)}
 .e360grid{gap:30px}
}

/* ---------- ĐIỆN THOẠI: gọn lại các section vừa thêm (đo 390px trước deploy 2026-09-13) ---------- */
@media(max-width:760px){
 /* Vì sao chọn: 4 cam kết thành dải vuốt (mSwipeInit) -> cho mỗi dòng nền thẻ */
 .wcfeat.msw .wcrow{background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:14px}
 /* Bảng Bệ phóng: 2×2 gọn, số trên - nhãn dưới */
 .lpgrid{grid-template-columns:1fr 1fr!important;gap:8px}
 .lpgrid .lps{display:block;padding:11px 11px 10px}
 .lpgrid .lps i{font-size:19px}
 .lpgrid .lpn{margin-top:4px}
 .lpgrid .lpn span{font-size:25px}
 .lpgrid .lpn em{font-size:13px}
 .lpgrid .lps b{margin-top:4px;font-size:12px;line-height:1.3}
 .lpgrid .lps small{margin-top:3px;font-size:9px}
 .lphead{margin-bottom:12px}
 /* Khối 360: vòng nhỏ lại */
 .e360ring{max-width:260px}
 .e360hd p{display:none}
 /* Người thầy: ảnh nhỏ lại, bỏ nhãn "Hồ sơ" dư */
 .fphoto{width:min(210px,62%);margin-bottom:14px}
 .fdrphoto{padding:20px 18px 22px}
 .fdrsig .qt{font-size:12.5px;margin-top:12px;padding-top:10px}
 .fdrach.msw .fach{flex-direction:row;align-items:center}
 /* FAQ: thẻ sít hơn */
 .fqgrid{gap:8px}
 .fq{padding:11px 11px 11px 12px}
 .fqi{width:34px;height:34px;font-size:17px}
 .fqt small{font-size:9.5px;margin-bottom:1px}
 .fqt b{font-size:14.5px;line-height:1.28}
}
/* Dải vuốt nằm trong cột lưới: cột mặc định min-width:auto nên phình theo độ dài dải -> đẩy lệch/cắt cả khu
   (lỗi thấy ở khu Người thầy khi đưa .fdrach vào MSWIPE). Cho mọi cột lưới chứa dải vuốt được co lại. */
@media(max-width:760px){
 .fdrhead>*,.fdrbody,.wc>*,.hgrid>*,.chgrid>*,.ctgrid>*,.tkgrid>*{min-width:0}
}
/* Tiêu đề khối CTA cuối trang trên màn hẹp: nhãn dài bị gãy 2 dòng -> thu nhỏ */
@media(max-width:560px){
 .dark .qhead.qey{font-size:22px;line-height:1.5}
 .dark .qhead .qbadge{padding:2px 12px 5px}
}

/* ---------- TRANG TẦNG (Tầng 1 · Tầng 2 · Tầng đệm): tierPage() ----------
   Tiền tố tp. --ac = màu tầng. .tpbg: ảnh nền section qua --tpbg ở ::before (lazyBgInit chặn tới khi gần cuộn tới).
   .tpdark: section nền tối (chữ trắng, nhãn vàng). Điện thoại ≤760px: lưới thẻ/chặng/sản phẩm thành dải vuốt (MSWIPE). */
.tpage{--acd:#333}
.tpsec{position:relative;isolation:isolate;overflow:hidden}
.tpbg::before{content:'';position:absolute;inset:0;z-index:-2;background:var(--tpbg) center/cover no-repeat;opacity:.5}
.tpbg::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(251,243,225,.9),rgba(251,243,225,.78) 50%,rgba(251,243,225,.94))}
.tpdark{color:#fff;background:linear-gradient(160deg,var(--acd),#1d0d14)}
.tpdark.tpbg::before{opacity:.42}
.tpdark.tpbg::after{background:linear-gradient(180deg,var(--acd),rgba(24,10,18,.72) 50%,var(--acd));background:linear-gradient(180deg,color-mix(in srgb,var(--acd) 88%,transparent),rgba(24,10,18,.72) 50%,color-mix(in srgb,var(--acd) 92%,#000))}
.tpdark .qhead{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.tpdark .qbadge{background:linear-gradient(180deg,var(--gold-l),var(--gold));color:var(--maroon-d);box-shadow:0 5px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
.tpdark .qbadge i{color:#fff}
.tpdark .qsub{color:rgba(255,255,255,.84)}
.tpsec .qbadge{background:linear-gradient(180deg,var(--ac),var(--ac));background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 82%,#fff),var(--ac));box-shadow:0 5px 0 var(--ac),0 14px 26px rgba(0,0,0,.18);box-shadow:0 5px 0 color-mix(in srgb,var(--ac) 55%,#000),0 14px 26px rgba(0,0,0,.18)}
.tpdark .qbadge{background:linear-gradient(180deg,var(--gold-l),var(--gold));box-shadow:0 5px 0 #a4670a,0 14px 26px rgba(0,0,0,.3)}
.tptitle{margin-bottom:34px}
.tptitle .qsub{max-width:760px;font-size:15.5px}
.tplabel{display:block;margin:34px 0 14px;font-family:var(--fd);font-size:18px;color:var(--ink)}
.tplabel.center{text-align:center}
.tpdark .tplabel{color:var(--gold-l)}

/* HERO */
.tphero{position:relative;overflow:hidden;isolation:isolate;color:#fff;padding:34px 0 64px;border-radius:0 0 42px 42px;
  background:linear-gradient(135deg,var(--ac),var(--acd) 78%)}
.tphbg{position:absolute;inset:0;z-index:-2;background:right center/cover no-repeat;opacity:.36;mix-blend-mode:luminosity}
.tphero::after{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(100deg,var(--acd) 0%,var(--ac) 62%,transparent 100%);background:linear-gradient(100deg,color-mix(in srgb,var(--acd) 94%,transparent) 0%,color-mix(in srgb,var(--ac) 55%,transparent) 62%,transparent 100%)}
.tphgrid{display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);gap:30px;align-items:center}
.tpkick{display:inline-block;margin:8px 0 14px;padding:7px 14px;border-radius:99px;font-size:12px;font-weight:800;letter-spacing:.1em;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28)}
.tph1{font-family:var(--fd);font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.05;letter-spacing:-.01em}
.tph1 em{display:block;font-style:normal;color:var(--gold-l)}
.tpsub{max-width:600px;margin-top:14px;font-size:17px;line-height:1.6;opacity:.95}
.tpstats{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;max-width:600px;margin-top:24px}
.tpstat{padding:12px 10px;border-radius:18px;text-align:center;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.tpstat b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(24px,2.6vw,32px);line-height:1;color:#fff}
.tpstat b em{font-style:normal;color:var(--gold-l)}
.tpstat small{display:block;margin-top:5px;font-size:11.5px;font-weight:700;line-height:1.3;opacity:.9}
.tpcta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.tpghost{background:rgba(255,255,255,.12);color:#fff;border:1.5px solid rgba(255,255,255,.35)}
.tphart{position:relative;height:420px}
.tpkids{position:absolute;left:50%;bottom:-10px;height:88%;width:auto;max-width:none;transform:translateX(-50%);z-index:2;filter:drop-shadow(0 18px 26px rgba(0,0,0,.35))}
.tpgl{position:absolute;margin:0;padding:8px;width:52%;border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.3),rgba(255,255,255,.1));
  border:1px solid rgba(255,255,255,.45);box-shadow:0 24px 50px rgba(0,0,0,.38);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);animation:pjfloat 7s ease-in-out infinite}
.tpgl img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:13px;background:#120a0d}
.tpgl.g0{left:0;top:6%;transform:rotate(-6deg);z-index:1}
.tpgl.g1{right:0;top:0;transform:rotate(5deg);z-index:1;animation-delay:2s}

/* SỐ LIỆU LỚN */
.tpbig{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}
.tpbigc{padding:20px 18px;border-radius:22px;background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border:1px solid rgba(255,255,255,.2)}
.tpbigc b{display:block;font-family:var(--fd);font-weight:800;font-size:clamp(34px,4vw,50px);line-height:1;color:var(--gold-l)}
.tpbigc span{display:block;margin-top:8px;font-size:14px;line-height:1.45;color:rgba(255,255,255,.88)}
.tpnote{margin-top:10px;text-align:center;font-size:11.5px;color:rgba(255,255,255,.55)}
.tpquote{margin:28px auto 0;max-width:820px;padding:18px 22px;border-left:4px solid var(--gold);border-radius:0 18px 18px 0;background:rgba(255,255,255,.08);font-size:17px;font-style:italic;line-height:1.55}
.tpschool{margin:14px auto 0;max-width:820px;font-size:14px;line-height:1.55;color:rgba(255,255,255,.82);text-align:center}

/* THẺ CHUNG */
.tpcards{display:grid;gap:16px;margin-top:22px}
.tpcards.tpc3{grid-template-columns:repeat(3,1fr)}
.tpcards.tpc4{grid-template-columns:repeat(4,1fr)}
.tpcard{--c:var(--ac);position:relative;padding:20px 18px 18px;border-radius:22px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 18%,#efe6db);box-shadow:0 5px 0 #fff,0 14px 28px rgba(90,20,29,.08);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 22%,#fff),0 14px 28px rgba(90,20,29,.08);transition:transform .2s,box-shadow .2s}
.tpcard:hover{transform:translateY(-4px);box-shadow:0 9px 0 #fff,0 20px 36px rgba(90,20,29,.12);box-shadow:0 9px 0 color-mix(in srgb,var(--c) 30%,#fff),0 20px 36px rgba(90,20,29,.12)}
.tpic{display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:26px;background:#fff;background:color-mix(in srgb,var(--c) 14%,#fff)}
.tpic.tpcode{width:auto;min-width:52px;padding:0 12px;font-family:var(--fd);font-weight:800;font-size:15px;color:#fff;background:var(--c)}
.tpcard b{display:block;margin-top:12px;font-family:var(--fd);font-size:17px;line-height:1.25;color:var(--ink)}
.tpcard p{margin-top:5px;font-size:13.5px;line-height:1.55;color:var(--ink2)}
.tpcards.sm .tpcard{padding:14px}.tpcards.sm .tpic{width:42px;height:42px;font-size:21px;border-radius:13px}.tpcards.sm .tpcard b{font-size:15.5px;margin-top:9px}
.tpdark .tpcard{background:linear-gradient(160deg,rgba(255,255,255,.14),rgba(255,255,255,.05));border-color:rgba(255,255,255,.18);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.tpdark .tpcard b{color:#fff}.tpdark .tpcard p{color:rgba(255,255,255,.8)}
.tpdark .tpic{background:rgba(255,255,255,.14)}
.tprule .tpcard{border-top:4px solid var(--c)}
.tpchips{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px;margin-top:24px}
.tpchips span{font-weight:800;color:var(--ink2);margin-right:4px}
.tpchips b{padding:9px 16px;border-radius:99px;font-family:var(--fd);color:#fff;background:linear-gradient(180deg,var(--ac),var(--ac));background:linear-gradient(180deg,color-mix(in srgb,var(--ac) 80%,#fff),var(--ac));box-shadow:0 4px 0 var(--ac);box-shadow:0 4px 0 color-mix(in srgb,var(--ac) 55%,#000)}

/* CHUỖI / FLOW */
.tpteam{margin-top:28px;text-align:center}
.tpchain{display:flex;align-items:stretch;justify-content:center;gap:10px}
.tpchain>i{align-self:center;font-style:normal;font-size:22px;color:var(--gold)}
.tplink{flex:1;max-width:260px;padding:16px 12px;border-radius:20px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.tplink span{font-size:28px}.tplink b{display:block;margin-top:6px;font-family:var(--fd);font-size:16px}.tplink small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;opacity:.82}
.tpteam p{max-width:760px;margin:14px auto 0;font-size:14px;line-height:1.55;color:rgba(255,255,255,.84)}
.tpflow{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;counter-reset:f}
.tpflow.tpc3{grid-template-columns:repeat(3,1fr);margin-bottom:26px}
.tpfl{position:relative;padding:18px 12px 16px;border-radius:22px;text-align:center;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--ac) 20%,#efe6db);box-shadow:0 12px 24px rgba(90,20,29,.08)}
.tpfl em{position:absolute;left:12px;top:10px;font-style:normal;font-family:var(--fd);font-weight:800;font-size:13px;color:var(--ac)}
.tpfl span{font-size:30px}.tpfl b{display:block;margin-top:6px;font-family:var(--fd);font-size:16px;color:var(--ink)}.tpfl small{display:block;margin-top:2px;font-size:12.5px;color:var(--ink2)}
.tpfl:not(:last-child)::after{content:'➜';position:absolute;right:-12px;top:50%;transform:translateY(-50%);z-index:2;font-size:16px;color:var(--ac)}
.tpdark .tpfl{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.2);box-shadow:none}
.tpdark .tpfl b{color:#fff}.tpdark .tpfl small{color:rgba(255,255,255,.78)}.tpdark .tpfl em,.tpdark .tpfl::after{color:var(--gold-l)}

/* ROADMAP BẬC THANG */
.tproad{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:14px;align-items:end;margin-top:10px}
.tpst{--c:var(--ac);display:flex;flex-direction:column;gap:10px;min-width:0}
.tpsthd{padding:14px 14px 12px;border-radius:20px;color:#fff;background:linear-gradient(160deg,var(--c),var(--c));background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 60%,#000));box-shadow:0 10px 22px transparent;box-shadow:0 10px 22px color-mix(in srgb,var(--c) 30%,transparent)}
.tpsthd span{font-size:11px;font-weight:800;letter-spacing:.12em;opacity:.85}
.tpsthd b{display:block;font-family:var(--fd);font-size:18px;line-height:1.2;margin-top:2px}
.tpsthd small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;opacity:.9}
.tpcs{display:flex;flex-direction:column;gap:8px}
.tpc{display:flex;align-items:flex-start;gap:10px;padding:11px 12px;border-radius:16px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 22%,#efe6db);cursor:pointer;transition:transform .18s,box-shadow .18s;color:var(--ink)}
.tpc:hover{transform:translateX(3px);box-shadow:0 10px 22px rgba(90,20,29,.1)}
.tpc em{flex:none;display:grid;place-items:center;min-width:42px;height:28px;padding:0 7px;border-radius:9px;font-style:normal;font-family:var(--fd);font-weight:800;font-size:12.5px;color:#fff;background:var(--c)}
.tpc b{display:block;font-size:14px;line-height:1.25}
.tpc i{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--c)}
.tpc small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink2)}
.tpcm{display:block;margin-top:4px;font-size:11px;font-weight:700;color:var(--muted)}
.tpc .ar{margin-left:auto;align-self:center;font-weight:800;color:var(--c)}
/* bậc thang: khối bậc cao dần theo chặng, có mặt trên sáng */
.tpstep{position:relative;height:calc(38px + var(--lv)*46px);border-radius:14px 14px 4px 4px;background:linear-gradient(180deg,var(--c),var(--c));
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 70%,#fff),color-mix(in srgb,var(--c) 85%,#000));box-shadow:inset 0 6px 0 rgba(255,255,255,.35),0 12px 22px rgba(0,0,0,.14)}
.tpstep span{position:absolute;left:50%;top:6px;transform:translateX(-50%);display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:var(--fd);font-weight:800;font-size:14px;color:var(--c);background:#fff}
.tprchips{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin:-10px 0 24px}
.tprchips span{padding:7px 13px;border-radius:99px;font-size:12.5px;font-weight:800;color:var(--ink2);background:#fff;border:1px solid var(--line)}
.tpforkl{margin:14px auto 0;width:max-content;max-width:100%;padding:8px 16px;border-radius:99px;font-size:13px;font-weight:800;color:#fff;background:var(--ink)}

/* KỸ NĂNG BẬC THANG */
.tplad{display:flex;flex-direction:column;gap:10px;max-width:920px;margin:0 auto}
.tpr{display:flex;align-items:center;gap:12px}
.tprn{flex:none;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;font-family:var(--fd);font-weight:800;font-size:18px;color:#fff;background:var(--ac)}
.tpbar{display:flex;align-items:center;gap:12px;width:30%;min-height:56px;padding:9px 16px 9px 10px;border-radius:16px;background:linear-gradient(90deg,#fff,#fff);
  background:linear-gradient(90deg,color-mix(in srgb,var(--ac) 16%,#fff),#fff);border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--ac) 25%,#efe6db);
  transition:width 1s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.12s);overflow:hidden}
.tplad.in .tpbar{width:var(--w)}
.tpri{flex:none;font-size:22px}
.tpbar b{flex:none;font-family:var(--fd);font-size:15.5px;color:var(--ink);white-space:nowrap}
.tpbar small{font-size:12.5px;line-height:1.4;color:var(--ink2);min-width:0}
.tplev{display:flex;align-items:stretch;justify-content:center;gap:10px;max-width:920px;margin:24px auto 0}
.tplev>i{align-self:center;font-style:normal;font-weight:800;color:var(--ac)}
.tplev div{flex:1;padding:12px;border-radius:16px;text-align:center;background:#fff;border:1.5px dashed #efe6db;border:1.5px dashed color-mix(in srgb,var(--ac) 40%,#efe6db)}
.tplev b{display:block;font-family:var(--fd);color:var(--ac)}.tplev span{display:block;font-weight:800;font-size:13.5px}.tplev small{font-size:12px;color:var(--ink2)}

/* SẢN PHẨM */
.tpprods{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.tpprods.tpp4{grid-template-columns:repeat(4,1fr)}
.tpprods.tpp3{grid-template-columns:repeat(3,1fr)}
.tpprod{margin:0;padding:8px;border-radius:20px;background:linear-gradient(150deg,rgba(255,255,255,.18),rgba(255,255,255,.06));border:1px solid rgba(255,255,255,.22);box-shadow:0 16px 34px rgba(0,0,0,.25);transition:transform .2s}
.tpprod:hover{transform:translateY(-5px)}
.tpprod img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;border-radius:13px;background:#120a0d}
.tpprod figcaption{padding:9px 5px 3px}
.tpprod figcaption b{display:block;font-family:var(--fd);font-size:15px;color:#fff}
.tpprod figcaption small{display:block;font-size:12px;color:rgba(255,255,255,.75)}
.tpprod .rt-tag{margin-bottom:5px}
.tpmethod .tpprod{background:#fff;border-color:var(--line);box-shadow:0 12px 26px rgba(90,20,29,.08)}
.tpmethod .tpprod figcaption b{color:var(--ink);font-size:14px}
.tpcaps{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.tpcaps div{padding:14px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.tpcaps em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--gold-l)}
.tpcaps b{display:block;font-family:var(--fd);font-size:16px;margin-top:2px}.tpcaps small{font-size:12.5px;opacity:.82}
.tpcaps p{grid-column:1/-1;text-align:center;font-size:14px;font-weight:700;color:rgba(255,255,255,.88)}

/* AN TÂM / MÔN HỌC (chip) */
.tpcare{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:9px;margin-top:24px;padding:14px 16px;border-radius:22px;background:#fff;background:color-mix(in srgb,var(--ac) 8%,#fff);border:1.5px dashed #efe6db;border:1.5px dashed color-mix(in srgb,var(--ac) 35%,#efe6db)}
.tpcare b{font-family:var(--fd);color:var(--ac);margin-right:4px}
.tpcare span{padding:7px 12px;border-radius:99px;font-size:13px;font-weight:700;background:#fff;border:1px solid var(--line)}

/* ĐI TIẾP */
.tpnext{display:flex;align-items:stretch;justify-content:center;gap:10px}
.tpnext>i{align-self:center;font-style:normal;font-size:20px;color:var(--ac)}
.tpnx{flex:1;max-width:320px;padding:16px;border-radius:20px;cursor:pointer;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 30%,#efe6db);color:var(--ink);transition:transform .18s}
.tpnx:hover{transform:translateY(-4px)}
.tpnx.on{background:linear-gradient(160deg,var(--c),var(--c));background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 62%,#000));color:#fff;border-color:transparent}
.tpnx em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--c)}.tpnx.on em{color:var(--gold-l)}
.tpnx b{display:block;font-family:var(--fd);font-size:17px;margin-top:2px}.tpnx small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;opacity:.85}

/* CHỨNG CHỈ */
.tpcert{margin-top:10px;text-align:center}
.tpcert div{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.tpcert span{display:inline-flex;align-items:center;gap:7px;padding:8px 14px 8px 8px;border-radius:99px;font-family:var(--fd);font-weight:800;font-size:14px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--ac) 30%,#efe6db)}
.tpcert em{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-style:normal;font-size:12px;color:#fff;background:var(--ac)}
.tpcert p{max-width:820px;margin:12px auto 0;font-size:12px;line-height:1.5;color:var(--muted)}

/* DẤU KIỂM CHỨNG */
.tpproof{display:grid;grid-template-columns:220px 1fr;gap:26px;align-items:center}
.tpseal{position:relative;display:grid;place-items:center;align-content:center;width:200px;height:200px;margin:0 auto;border-radius:50%;text-align:center;color:var(--maroon-d);
  background:radial-gradient(circle at 35% 30%,#fff6d8,#f0b44a 60%,#b86a12);box-shadow:0 0 0 10px rgba(255,215,106,.2),0 20px 40px rgba(0,0,0,.35)}
.tpseal .ring{position:absolute;inset:12px;border-radius:50%;border:2.5px dashed rgba(90,20,29,.4);animation:e360S 18s linear infinite}
.tpseal b{font-family:var(--fd);font-weight:800;font-size:19px;line-height:1.1;max-width:140px}.tpseal small{font-size:9px;font-weight:800;letter-spacing:.12em;margin-top:4px}
.tpev{display:grid;gap:10px}
.tpev div{display:flex;gap:12px;align-items:flex-start;padding:14px;border-radius:18px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.2)}
.tpev em{font-style:normal;font-size:24px;line-height:1;color:var(--gold-l)}
.tpev b{display:block;font-family:var(--fd);font-size:16px}.tpev small{display:block;margin-top:2px;font-size:13px;line-height:1.45;opacity:.82}
.tprub{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:22px}
.tprub span{padding:7px 14px;border-radius:99px;font-weight:800;font-size:13px;color:var(--maroon-d);background:var(--gold-l)}
.tprub p{flex-basis:100%;text-align:center;font-size:12.5px;color:rgba(255,255,255,.72)}

/* CAM KẾT */
.tpcommit{display:grid;grid-template-columns:1.4fr 1fr;gap:16px}
.tpcm1,.tpcm2{padding:22px;border-radius:24px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--ac) 25%,#efe6db);box-shadow:0 14px 30px rgba(90,20,29,.08)}
.tpshield{font-size:36px}
.tpcm1 h3{margin-top:6px;font-family:var(--fd);font-size:clamp(20px,2.4vw,26px);color:var(--ac)}
.tpterm{margin-top:10px;padding:12px 14px;border-left:3px solid var(--ac);border-radius:0 12px 12px 0;background:#fbf6ee;font-size:14px;line-height:1.6;color:var(--ink)}
.tpx{margin-top:10px;font-size:13px;color:var(--ink2)}
.tpcm2 b{font-family:var(--fd);font-size:17px;color:var(--ink)}
.tpcm2 ul{margin:10px 0 0;padding:0;list-style:none;display:grid;gap:7px}
.tpcm2 li{padding:8px 12px;border-radius:12px;background:#fdf0ee;font-size:13.5px;font-weight:600;color:#9a2f22}
.tpcm2 li::before{content:'✕  '}
.tpcm2 p{margin-top:12px;font-size:13px;line-height:1.5;color:var(--ink2)}
.tpvisit{margin-top:24px;text-align:center}
.tptime{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px}
.tptime div{padding:14px 12px;border-radius:18px;background:#fff;border:1.5px solid var(--line);text-align:left}
.tptime em{display:block;font-style:normal;font-family:var(--fd);font-weight:800;font-size:18px;color:var(--ac)}
.tptime span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink2)}

@media(max-width:1100px){.tpprods.tpp4{grid-template-columns:repeat(2,1fr)}.tpcards.tpc4{grid-template-columns:repeat(2,1fr)}.tpflow{grid-template-columns:repeat(3,1fr)}.tpfl:nth-child(3)::after{display:none}}
@media(max-width:960px){
 .tphgrid{grid-template-columns:1fr}.tphart{height:300px;max-width:520px;margin:0 auto;width:100%}
 .tproad{grid-template-columns:repeat(2,minmax(0,1fr))}.tpstep{display:none}
 .tpproof{grid-template-columns:1fr}.tpcommit{grid-template-columns:1fr}.tptime{grid-template-columns:repeat(2,1fr)}
}
/* ĐIỆN THOẠI */
@media(max-width:760px){
 .tphero{padding:22px 0 40px;border-radius:0 0 28px 28px}
 .tph1{font-size:32px}.tpsub{font-size:15px}
 .tpstats{grid-template-columns:repeat(2,1fr);gap:8px}.tpstat{padding:9px 8px}.tpstat b{font-size:24px}
 .tphart{height:220px}.tpgl{width:48%}
 .tptitle{margin-bottom:22px}.tplabel{margin:24px 0 10px;font-size:16px}
 .tpbig{grid-template-columns:repeat(2,1fr);gap:8px}.tpbigc{padding:12px}.tpbigc b{font-size:30px}.tpbigc span{font-size:12.5px}
 .tpcards.tpc3,.tpcards.tpc4{grid-template-columns:1fr}
 .tpcard{padding:14px}.tpcard b{font-size:15.5px}.tpcard p{font-size:13px}
 .tpchain{flex-direction:column;align-items:stretch}.tpchain>i{transform:rotate(90deg);margin:-4px auto}
 .tplink{max-width:none;display:flex;align-items:center;gap:10px;text-align:left;padding:10px 12px}.tplink b{margin-top:0}.tplink span{font-size:22px}
 .tpflow,.tpflow.tpc3{grid-template-columns:1fr}.tpfl::after{display:none}
 .tproad{grid-template-columns:1fr}
 .tpbar{width:100%!important;min-height:0;flex-wrap:wrap;gap:2px 10px;padding:8px 12px 8px 10px}.tpbar b{white-space:normal}.tpbar small{flex-basis:100%;padding-left:34px}
 .tprn{width:32px;height:32px;font-size:15px}
 .tplev{flex-direction:column}.tplev>i{transform:rotate(90deg);margin:-4px auto}
 .tpcaps{grid-template-columns:1fr}
 .tpnext{flex-direction:column}.tpnext>i{transform:rotate(90deg);margin:-4px auto}.tpnx{max-width:none;padding:12px 14px}
 .tpseal{width:150px;height:150px}.tpseal b{font-size:15px}
 .tptime{grid-template-columns:1fr 1fr}
 .tpquote{font-size:15px}
}
@media(prefers-reduced-motion:reduce){.tpgl,.tpseal .ring{animation:none}.tpbar{transition:none}.tplad .tpbar{width:var(--w)}}
/* Tầng đệm trên điện thoại: 3 cấp độ AI xếp ngang 3 cột thay vì dọc có mũi tên */
@media(max-width:760px){
 .tplev{flex-direction:row;gap:6px}.tplev>i{display:none}
 .tplev div{padding:9px 6px}.tplev b{font-size:13px}.tplev span{font-size:11.5px;line-height:1.3}.tplev small{display:none}
 .tprchips{gap:6px}.tprchips span{font-size:11.5px;padding:5px 10px}
}

/* ---------- TRANG TẦNG: biểu đồ SVG minh hoạ + ảnh học viên (bổ sung từ slide PR) ----------
   Biểu đồ vẽ dần khi .rv thêm .in (IntersectionObserver sẵn có). Thẻ biểu đồ nền trắng như slide. */
.tpcharts{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:22px}
.tpchart{margin:0;padding:16px 16px 12px;border-radius:22px;background:#fff;color:var(--ink);box-shadow:0 18px 40px rgba(0,0,0,.18)}
.tpchart figcaption{font-family:var(--fd);font-weight:700;font-size:16px;color:var(--ink)}
.tpchart svg{display:block;width:100%;height:auto;margin-top:6px;overflow:visible}
.tpchart small{display:block;margin-top:4px;font-size:11px;line-height:1.4;color:var(--muted)}
.tpgr{stroke:#eee6dc;stroke-width:1}
.tpax{font:600 10px var(--fb);fill:#a3928b;text-anchor:end}
.tpxl{font:700 11px var(--fb);fill:#6b5a54;text-anchor:middle}
.tparea{fill:#fff;fill:color-mix(in srgb,var(--ac) 22%,#fff);opacity:0;transition:opacity 1s .6s}
.tpln{fill:none;stroke:var(--ac);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s cubic-bezier(.4,0,.2,1)}
.tpdot{fill:#fff;stroke:var(--ac);stroke-width:3;opacity:0;transition:opacity .3s;transition-delay:calc(.3s + var(--i)*.3s)}
.tpb{fill:var(--ac);transform-box:fill-box;transform-origin:50% 100%;transform:scaleY(0);transition:transform .9s cubic-bezier(.2,.7,.2,1);transition-delay:calc(var(--i)*.14s)}
.tpbv{font:800 12.5px var(--fd);fill:var(--ink);text-anchor:middle;opacity:0;transition:opacity .4s;transition-delay:calc(.6s + var(--i)*.14s)}
.tpdk{fill:none;stroke:#f1e9df;stroke-width:26}
.tpdv{fill:none;stroke:var(--c);stroke-width:26;stroke-linecap:round;stroke-dasharray:var(--len);stroke-dashoffset:var(--len);transition:stroke-dashoffset 1.4s cubic-bezier(.4,0,.2,1)}
.tpdc{font:800 34px var(--fd);fill:var(--ink);text-anchor:middle}
.tpds{font:700 12px var(--fb);fill:#8a7872;text-anchor:middle}
.tpchart.in .tparea{opacity:1}.tpchart.in .tpln{stroke-dashoffset:0}.tpchart.in .tpdot,.tpchart.in .tpbv{opacity:1}
.tpchart.in .tpb{transform:none}.tpchart.in .tpdv{stroke-dashoffset:var(--off)}
/* ảnh */
.tpph{display:block;width:100%;height:100%;object-fit:cover;border-radius:22px;background:#1b1016}
.tpqph{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr);gap:22px;align-items:center;max-width:1000px;margin:28px auto 0;
  padding:14px;border-radius:26px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.tpqph .tpph{aspect-ratio:3/2}
.tpqph .tpquote{margin:0}.tpqph .tpschool{text-align:left;margin:12px 0 0}
.tpwithph{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:24px;align-items:end}
.tpcut{height:auto;max-height:520px;object-fit:contain;background:none;border-radius:0;filter:drop-shadow(0 24px 30px rgba(0,0,0,.4))}
.tpcards.tpc1{grid-template-columns:1fr;margin-top:0}
.tpcards.tpc2{grid-template-columns:1fr 1fr;margin-top:0}
.tpcarph{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:18px;align-items:stretch;margin-top:22px}
.tprnd{aspect-ratio:3/2;box-shadow:0 18px 40px rgba(90,20,29,.18)}
.tpaides{margin-top:18px;text-align:left}
.tpvisit.hasph{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:22px;align-items:center;text-align:left}
.tpvisit.hasph .tplabel{margin-top:0}.tpvisit.hasph .tptime{grid-template-columns:1fr 1fr}
@media(max-width:960px){.tpqph,.tpwithph,.tpcarph,.tpvisit.hasph{grid-template-columns:1fr}.tpcut{max-height:300px;margin:0 auto}}
@media(max-width:760px){
 .tpcharts{margin-top:16px}.tpchart{padding:12px 12px 10px}.tpchart figcaption{font-size:14.5px}
 .tpqph{padding:10px;gap:12px;margin-top:20px}.tpqph .tpquote{font-size:14.5px;padding:12px 14px}
 .tpcut{display:none}
 .tprnd{aspect-ratio:16/9}
 .tpvisit.hasph .tptime{grid-template-columns:1fr 1fr}
}
@media(prefers-reduced-motion:reduce){.tparea,.tpln,.tpdot,.tpb,.tpbv,.tpdv{transition:none}}
/* Trang tầng trên điện thoại: gọn lại sau khi thêm biểu đồ & ảnh (đo 390px) */
@media(max-width:760px){
 .tpdark .mswbar{color:rgba(255,255,255,.72)}
 .tpdark .mswn b{color:var(--gold-l)}
 .tpdark .mswdots i{background:rgba(255,255,255,.28)}
 .tpdark .mswdots i.on{background:var(--gold)}
 /* số liệu lớn đã có trong biểu đồ ngay dưới -> ẩn để không lặp */
 .tpdup .tpbig{display:none}
 .tpdup .tpnote{margin-top:0}
 .tpqph .tpph{aspect-ratio:16/9}
 .tpvisit.hasph>.tpph{display:none}
 .tpchain{gap:6px}.tplink{padding:8px 10px}
}

/* ---------- ROADMAP TẦNG: thẻ khóa kiểu màn chơi game (ảnh cảnh 3D chero/sm, số màn, sao độ khó, cúp đồ án) ---------- */
.tpc.tplv{display:block;padding:0;overflow:hidden;border-radius:18px;transform-style:preserve-3d;box-shadow:0 5px 0 #fff,0 12px 24px rgba(90,20,29,.1);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 30%,#fff),0 12px 24px rgba(90,20,29,.1);transition:transform .22s cubic-bezier(.2,.7,.2,1),box-shadow .22s}
.tpc.tplv:hover{transform:translateY(-5px) rotateX(3deg);box-shadow:0 10px 0 #fff,0 22px 36px rgba(90,20,29,.18);box-shadow:0 10px 0 color-mix(in srgb,var(--c) 38%,#fff),0 22px 36px rgba(90,20,29,.18)}
.tplvimg{position:relative;display:block;aspect-ratio:16/9;overflow:hidden;background:#1b1016;background:color-mix(in srgb,var(--c) 30%,#1b1016)}
.tplvimg img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .5s ease}
.tpc.tplv:hover .tplvimg img{transform:scale(1.08)}
.tplvimg::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.05) 35%,rgba(0,0,0,.62))}
.tplvimg em{position:absolute;left:10px;top:10px;z-index:2;min-width:46px;height:30px;padding:0 9px;border-radius:10px;display:grid;place-items:center;
  font-style:normal;font-family:var(--fd);font-weight:800;font-size:14px;color:#fff;background:var(--c);box-shadow:0 3px 0 var(--c),0 6px 14px rgba(0,0,0,.3);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 55%,#000),0 6px 14px rgba(0,0,0,.3)}
.tplvst{position:absolute;right:10px;top:10px;z-index:2;padding:3px 8px;border-radius:99px;font-size:13px;letter-spacing:1px;color:#ffc93c;background:rgba(0,0,0,.45);text-shadow:0 1px 2px rgba(0,0,0,.5)}
.tplvst s{text-decoration:none;color:rgba(255,255,255,.35)}
.tplvcup{position:absolute;left:10px;right:44px;bottom:9px;z-index:2;font-size:12px;font-weight:800;line-height:1.3;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.6);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tplvgo{position:absolute;right:10px;bottom:8px;z-index:2;width:28px;height:28px;border-radius:50%;display:grid;place-items:center;font-size:11px;color:var(--c);background:#fff;
  transition:transform .2s}
.tpc.tplv:hover .tplvgo{transform:scale(1.15)}
.tplvb{display:block;padding:10px 12px 12px}
.tplvb b{display:block;font-size:15px;line-height:1.25}
.tplvb i{display:block;font-style:normal;font-size:11.5px;font-weight:700;color:var(--c)}
.tplvb small{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--ink2)}
@media(max-width:760px){
 .tpc.tplv{display:flex;align-items:stretch}
 .tplvimg{flex:none;width:112px;aspect-ratio:auto}
 .tplvimg em{left:6px;top:6px;min-width:36px;height:24px;font-size:11.5px;border-radius:8px}
 .tplvst{right:auto;left:6px;top:auto;bottom:6px;font-size:10px;padding:1px 6px}
 .tplvcup,.tplvgo{display:none}
 .tplvb{padding:9px 10px;min-width:0}.tplvb b{font-size:14px}
}
@media(prefers-reduced-motion:reduce){.tpc.tplv,.tplvimg img,.tplvgo{transition:none}}

/* ---------- TRANG TẦNG: kỹ năng bậc thang có hình minh hoạ + chuỗi bước có hình (tpArt) ---------- */
.tpsvg .tpcap{font:700 10px var(--fb);fill:#6b5a54;text-anchor:middle}
.tpsvg .tpyes{fill:#16a34a}.tpsvg .tpno{fill:#c8384b}
.tpsvg .tpblk{font:800 9.5px var(--fb);fill:#fff}
.tpsvg .tpcode{font:700 10px ui-monospace,Menlo,monospace;fill:#6b5a54}
.tpsvg .tpmz{stroke:var(--c);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;animation:tpmz 3.4s ease-in-out infinite}
@keyframes tpmz{0%{stroke-dashoffset:1}70%,100%{stroke-dashoffset:0}}
/* bậc thang kỹ năng: thẻ có hình đứng trên bậc cao dần */
.tpsk{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:12px;align-items:end;max-width:1180px;margin:0 auto}
.tpskcol{display:flex;flex-direction:column;min-width:0}
.tpskc{border-radius:20px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 25%,#efe6db);box-shadow:0 5px 0 #fff,0 14px 28px rgba(90,20,29,.1);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 28%,#fff),0 14px 28px rgba(90,20,29,.1);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.tpskc:hover{transform:translateY(-6px)}
.tpskart,.tpflart,.tplkart{position:relative;display:block;aspect-ratio:240/150;background:radial-gradient(circle at 70% 28%,#fff 0%,#fffaf2 60%,#fffaf2 100%);
  background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 7%,#fffaf2) 60%,#fffaf2 100%)}
.tpskb em{display:inline-block;margin:-22px 0 6px;padding:3px 10px;border-radius:99px;font:800 10.5px var(--fb);font-style:normal;letter-spacing:.06em;color:#fff;background:var(--c);box-shadow:0 0 0 3px #fff;position:relative}
.tpskb{display:block;padding:10px 12px 12px}
.tpskb b{display:block;font-family:var(--fd);font-size:15px;line-height:1.25;color:var(--ink)}
.tpskb small{display:block;margin-top:4px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.tpskstep{display:block;height:calc(14px + var(--i)*22px);margin-top:10px;border-radius:12px 12px 4px 4px;background:linear-gradient(180deg,var(--c),var(--c));
  background:linear-gradient(180deg,color-mix(in srgb,var(--c) 62%,#fff),color-mix(in srgb,var(--c) 85%,#000));box-shadow:inset 0 5px 0 rgba(255,255,255,.35)}
/* chuỗi bước có hình */
.tpfl.hasart{padding:0;text-align:left;background:#fff;border-color:#efe6db;border-color:color-mix(in srgb,var(--c) 25%,#efe6db)}
.tpfl.hasart em{left:8px;top:8px;z-index:2;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;color:#fff;background:var(--c);font-size:13px}
.tpfl.hasart b{display:block;margin:10px 12px 0;font-size:15px;color:var(--ink)}
.tpfl.hasart small{display:block;margin:2px 12px 12px;color:var(--ink2)}
.tpfl.hasart:not(:last-child)::after{top:32%}
.tpdark .tpfl.hasart{background:#fff}.tpdark .tpfl.hasart b{color:var(--ink)}.tpdark .tpfl.hasart small{color:var(--ink2)}
.tplink.hasart{padding:0;overflow:hidden;background:#fff;border-color:transparent;color:var(--ink);box-shadow:0 14px 30px rgba(0,0,0,.25)}
.tplink.hasart b{margin:10px 12px 0;color:var(--ink)}.tplink.hasart small{margin:2px 12px 12px;color:var(--ink2);opacity:1}
@media(max-width:1100px){.tpsk{grid-template-columns:repeat(3,minmax(0,1fr));align-items:stretch}.tpskstep{display:none}}
@media(max-width:760px){
 .tpskc{height:100%}
 .tplink.hasart{display:flex;align-items:center;gap:0;text-align:left;padding:0}
 .tplink.hasart .tplkart{flex:none;width:120px}
 .tplink.hasart b{margin:0 12px}.tplink.hasart small{margin:2px 12px 0}
 .tplink.hasart>div{min-width:0}
}
.tpflart{display:block;border-radius:20px 20px 0 0;overflow:hidden}
.tpfl.hasart:not(:last-child)::after{content:'➜';display:grid;place-items:center;width:28px;height:28px;right:-20px;border-radius:50%;font-size:13px;color:#fff;background:var(--ac);box-shadow:0 0 0 4px var(--bg,#fffaf2)}
.tpdark .tpfl.hasart:not(:last-child)::after{color:#3a1a12;background:var(--gold-l);box-shadow:0 0 0 4px rgba(0,0,0,.25)}
.tplkart em{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:800 12px var(--fd);font-style:normal;color:#fff;background:var(--c)}
.tplink.hasart{text-align:left}
.tpchain .tplink.hasart{max-width:300px}
.tpskemo{position:absolute;inset:0;display:grid;place-items:center;font-size:52px}
.tpsk3{max-width:980px}
@media(max-width:760px){.tpsk{display:flex}.tpskb small{font-size:12.5px}}

/* ---------- MENU CON THEO TẦNG: bản đồ màn chơi (máy tính) + thẻ gập mở có dải vuốt khóa (≤1200px) ---------- */
.nav{position:relative}
.pill{position:static}
.pdrop.mn{left:50%;top:calc(100% - 2px);width:min(900px,calc(100vw - 40px));padding:0;display:grid;grid-template-columns:240px minmax(0,1fr);overflow:hidden;border-radius:24px}
.pdrop.mn::before{top:-18px;height:20px}
.pill:focus-within .pdrop.mn{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)}
.mnl{position:relative;display:flex;flex-direction:column;gap:8px;padding:18px;color:#fff;background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.22),transparent 45%),linear-gradient(160deg,var(--pc),var(--pc));background:radial-gradient(circle at 80% 10%,rgba(255,255,255,.22),transparent 45%),linear-gradient(160deg,var(--pc),color-mix(in srgb,var(--pc) 52%,#000))}
.mnhero{position:relative;flex:1;display:flex;flex-direction:column;min-height:270px;cursor:pointer}
.mnhero img{position:absolute;left:-10px;right:-10px;bottom:0;width:calc(100% + 20px);height:160px;object-fit:contain;object-position:center bottom;filter:drop-shadow(0 10px 16px rgba(0,0,0,.3));transition:transform .3s cubic-bezier(.2,.7,.2,1)}
.mnhero:hover img{transform:translateY(-5px) scale(1.04)}
.mnbadge{align-self:flex-start;padding:4px 10px;border-radius:99px;font-size:11px;font-weight:800;letter-spacing:.04em;background:rgba(255,255,255,.2)}
.mnhero b{margin-top:10px;font-family:var(--fd);font-size:21px;line-height:1.15}
.mnhero small{margin-top:2px;font-size:12.5px;opacity:.9}
.mnstat{margin-top:6px;font-size:12px;font-weight:700}.mnstat em{font-style:normal;font-family:var(--fd);font-size:19px;color:var(--gold-l)}
.mngo,.mntry{position:relative;z-index:1;border:0;border-radius:99px;padding:10px 12px;font:800 13px var(--fb);cursor:pointer;transition:transform .15s,background .15s}
.mngo{color:var(--pc);background:#fff;box-shadow:0 6px 14px rgba(0,0,0,.2)}.mngo:hover{transform:translateY(-2px)}
.mntry{color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35)}.mntry:hover{background:rgba(255,255,255,.26)}
.mnr{padding:14px 16px 4px;max-height:min(74vh,610px);overflow-y:auto;background:linear-gradient(180deg,#fffaf3,#fff 40%)}
.mngh{display:flex;align-items:center;gap:8px;margin:2px 2px 8px;font:800 12.5px var(--fb);color:var(--ink);white-space:nowrap}
.mngh span{padding:3px 9px;border-radius:99px;font-size:10px;letter-spacing:.06em;color:#fff;background:var(--gc)}
.mngh::after{content:"";flex:1;height:2px;border-radius:2px;background:linear-gradient(90deg,#fff,transparent);background:linear-gradient(90deg,color-mix(in srgb,var(--gc) 45%,#fff),transparent)}
.mngrid{display:grid;grid-template-columns:repeat(var(--k,3),minmax(0,1fr));gap:10px;margin-bottom:12px}
.mnc{display:flex;flex-direction:column;min-width:0;border-radius:14px;overflow:hidden;background:#fff;border:1.5px solid var(--line);cursor:pointer;transition:transform .18s,box-shadow .18s,border-color .18s}
.mnc:hover{transform:translateY(-3px);border-color:var(--pc);border-color:color-mix(in srgb,var(--pc) 50%,#fff);box-shadow:0 12px 22px transparent;box-shadow:0 12px 22px color-mix(in srgb,var(--pc) 24%,transparent)}
.mnth{position:relative;display:block;aspect-ratio:16/7;overflow:hidden;background:linear-gradient(135deg,#fff,#f6efe6);background:linear-gradient(135deg,color-mix(in srgb,var(--pc) 30%,#fff),color-mix(in srgb,var(--pc) 10%,#f6efe6))}
.mnth img{display:block;width:100%;height:100%;object-fit:cover;transition:transform .35s}
.mnc:hover .mnth img{transform:scale(1.08)}
.mnth em{position:absolute;left:6px;top:6px;padding:2px 7px;border-radius:7px;font:800 10.5px var(--fd);font-style:normal;color:#fff;background:var(--pc);box-shadow:0 2px 6px rgba(0,0,0,.25)}
.mnth i{position:absolute;right:6px;bottom:6px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font-size:9px;font-style:normal;color:var(--pc);background:#fff;opacity:0;transform:scale(.6);transition:.18s}
.mnc:hover .mnth i{opacity:1;transform:none}
.mnt{display:block;padding:6px 9px 8px;min-width:0}
.mnt b{display:block;font:700 12.5px/1.25 var(--fb);color:var(--ink);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnt small{display:block;margin-top:1px;font-size:11px;line-height:1.3;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mnc.active{border-color:var(--pc);box-shadow:0 0 0 2px var(--pc)}.mnc.active .mnt b{color:var(--pc)}
/* menu điện thoại / máy tính bảng */
#mobprogs{display:flex;flex-direction:column;gap:8px;margin:10px 0}
.mnm{border-radius:16px;background:#fff;border:1.5px solid var(--line);border:1.5px solid color-mix(in srgb,var(--pc) 30%,var(--line));overflow:hidden}
.mnm summary{list-style:none;display:flex;align-items:center;gap:10px;padding:8px 12px 8px 8px;cursor:pointer;background:linear-gradient(100deg,#fff,#fff 72%);background:linear-gradient(100deg,color-mix(in srgb,var(--pc) 16%,#fff),#fff 72%)}
.mnm summary::-webkit-details-marker{display:none}
.mnm summary img{flex:none;width:52px;height:52px;object-fit:contain;border-radius:12px;background:linear-gradient(160deg,var(--pc),var(--pc));background:linear-gradient(160deg,var(--pc),color-mix(in srgb,var(--pc) 58%,#000))}
.mnm summary span{flex:1;min-width:0}.mnm summary b{display:block;font:800 14.5px/1.25 var(--fd);color:var(--ink)}.mnm summary small{display:block;font-size:11.5px;color:var(--muted)}
.mnm summary i{font-style:normal;color:var(--pc);transition:transform .2s}.mnm[open] summary i{transform:rotate(180deg)}
.mnm.on summary{box-shadow:inset 4px 0 0 var(--pc)}
.mnms{display:flex;gap:8px;overflow-x:auto;padding:10px 12px 4px;scroll-snap-type:x mandatory;scrollbar-width:none}
.mnms::-webkit-scrollbar{display:none}
#mob .mnms .mnc{flex:none;display:flex;width:136px;padding:0;border-bottom:1.5px solid var(--line);scroll-snap-align:start;font-weight:400}
#mob .mnms .mnc.active{background:#fff;border-color:var(--pc)}
#mob a.mnmgo{padding:8px 12px 12px;border:0;font:800 13px var(--fb);color:var(--pc)}
@media(prefers-reduced-motion:reduce){.mnc,.mnth img,.mnhero img{transition:none}}
@media(max-width:760px){.tpflow .tpfl.hasart:not(:last-child)::after{display:none}}
.mngrid[style*="--k:4"] .mnt b{white-space:normal;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;min-height:2.5em}

/* ---------- TRANG TẦNG: Triết lý học (4 bước tư duy máy tính · vòng bổ trợ · khoa học phía sau),
   thẻ cầu nối "Trong code ↔ Ở trường", điểm khác biệt có hình + dòng ✗ đối chiếu ---------- */
.tpsvg .tpdraw{stroke-dasharray:1;stroke-dashoffset:1;animation:tpmz 3.4s ease-in-out infinite}
.tiecart,.tpbrart,.tpdfart{position:relative;display:block;aspect-ratio:240/150;background:radial-gradient(circle at 70% 28%,#fff 0%,#fffaf2 60%,#fffaf2 100%);
  background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 7%,#fffaf2) 60%,#fffaf2 100%)}
.tiect{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;margin-top:14px}
.tiec{position:relative;border-radius:20px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 25%,#efe6db);box-shadow:0 5px 0 #fff,0 14px 26px rgba(90,20,29,.08);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 26%,#fff),0 14px 26px rgba(90,20,29,.08)}
.tiec:not(:last-child)::after{content:'➜';position:absolute;right:-21px;top:31%;z-index:2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;
  font-size:13px;color:#fff;background:var(--ac);box-shadow:0 0 0 4px #fffaf2}
.tiecart{border-radius:19px 19px 0 0;overflow:hidden}
.tiecart em{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:800 13px var(--fd);font-style:normal;color:#fff;background:var(--c)}
.tiec b{display:block;margin:10px 14px 0;font-family:var(--fd);font-size:18px;color:var(--c);color:color-mix(in srgb,var(--c) 82%,#000)}
.tiec small{display:block;margin:2px 14px 0;font-size:13px;font-weight:700;font-style:italic;color:var(--ink)}
.tiec p{margin:6px 14px 14px;font-size:12.5px;line-height:1.5;color:var(--ink2)}
.tiewrap{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:34px;align-items:center;margin-top:40px}
.tieloop{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;align-items:center;max-width:640px;margin:10px auto 0}
.tiering{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.tiering ellipse{fill:none;stroke:#efe6db;stroke:color-mix(in srgb,var(--ac) 45%,#efe6db);stroke-width:3;stroke-dasharray:9 9;vector-effect:non-scaling-stroke;animation:laDash 1s linear infinite}
.tien{position:relative;z-index:1;padding:12px 10px;border-radius:18px;text-align:center;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 32%,#efe6db);box-shadow:0 4px 0 #fff,0 10px 20px rgba(90,20,29,.08);
  box-shadow:0 4px 0 color-mix(in srgb,var(--c) 30%,#fff),0 10px 20px rgba(90,20,29,.08)}
.tien span{display:block;font-size:28px;line-height:1.1}.tien b{display:block;margin-top:4px;font-family:var(--fd);font-size:15px;line-height:1.25;color:var(--c);color:color-mix(in srgb,var(--c) 82%,#000)}
.tien small{display:block;margin-top:2px;font-size:12px;line-height:1.4;color:var(--ink2)}
.tien.n0{grid-area:1/2}.tien.n1{grid-area:2/3}.tien.n2{grid-area:3/2}.tien.n3{grid-area:2/1}
.tiehub{grid-area:2/2;z-index:1;justify-self:center;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:118px;height:118px;border-radius:50%;text-align:center;color:#fff;background:radial-gradient(circle at 35% 30%,var(--ac),var(--ac));
  background:radial-gradient(circle at 35% 30%,color-mix(in srgb,var(--ac) 65%,#fff),var(--ac));box-shadow:0 0 0 8px transparent,0 14px 30px rgba(0,0,0,.18);box-shadow:0 0 0 8px color-mix(in srgb,var(--ac) 14%,transparent),0 14px 30px rgba(0,0,0,.18);animation:laPulse 2.6s ease-in-out infinite}
.tiehub span{font-size:28px;line-height:1}.tiehub b{font:800 12.5px/1.2 var(--fd);padding:0 12px}
.tiel{z-index:1;justify-self:center;max-width:170px;padding:7px 10px;border-radius:12px;font-size:12px;font-weight:700;line-height:1.35;text-align:center;color:var(--ink);
  background:#fffaf2;border:1.5px dashed #efe6db;border:1.5px dashed color-mix(in srgb,var(--ac) 45%,#efe6db)}
.tiel i{display:block;font-style:normal;font-size:10.5px;font-weight:800;letter-spacing:.04em;color:var(--ac)}
.tiel.l0{grid-area:1/3}.tiel.l1{grid-area:3/3}.tiel.l2{grid-area:3/1}.tiel.l3{grid-area:1/1}
.tiesci{display:grid;gap:10px;margin-top:10px}
.tiesc{display:grid;grid-template-columns:46px minmax(0,1fr);column-gap:12px;align-items:start;padding:12px 14px;border-radius:16px;background:#fff;border:1px solid var(--line);box-shadow:inset 4px 0 0 var(--c),0 8px 18px rgba(90,20,29,.05)}
.tiesc span{grid-row:1/4;display:grid;place-items:center;width:46px;height:46px;border-radius:13px;font-size:23px;background:#fff;background:color-mix(in srgb,var(--c) 14%,#fff)}
.tiesc b{font-family:var(--fd);font-size:14.5px;line-height:1.3;color:var(--ink)}
.tiesc cite{font-style:normal;font-size:11.5px;font-weight:800;line-height:1.35;color:var(--c);color:color-mix(in srgb,var(--c) 80%,#000)}
.tiesc small{margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.tienote{margin-top:8px;font-size:11.5px;color:var(--muted)}
/* thẻ cầu nối môn học */
.tpbr{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:14px}
.tpbrc{border-radius:20px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 25%,#efe6db);box-shadow:0 5px 0 #fff,0 14px 26px rgba(90,20,29,.08);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 26%,#fff),0 14px 26px rgba(90,20,29,.08);transition:transform .2s cubic-bezier(.2,.7,.2,1)}
.tpbrc:hover{transform:translateY(-5px)}
.tpbrb{padding:10px 14px 14px}
.tpbrb>b{display:block;font-family:var(--fd);font-size:17px;color:var(--ink)}
.tpbrrow{display:grid;grid-template-columns:96px minmax(0,1fr);gap:8px;align-items:baseline;margin-top:7px;font-size:13px;line-height:1.45;color:var(--ink2)}
.tpbrk{font-size:11px;font-weight:800;white-space:nowrap;color:var(--c);color:color-mix(in srgb,var(--c) 80%,#000)}
.tpbrlink{display:block;width:0;height:12px;margin:2px 0 -3px 30px;border-left:2px dashed var(--c);border-left:2px dashed color-mix(in srgb,var(--c) 50%,#fff)}
.tpbrl{margin-top:30px}
/* điểm khác biệt có hình */
.tpdf.hasart{padding:0;overflow:hidden}
.tpdfb{padding:12px 16px 16px}
.tpdf.hasart b{margin-top:3px}
.tpvs{display:inline-block;font-size:12px;font-weight:700;color:#9a8b84;text-decoration:line-through;text-decoration-color:rgba(220,38,38,.7);text-decoration-thickness:1.5px}
.tpvs::before{content:'✗ ';color:#dc2626}
.tpdf.hasart b::before{content:'✓ ';color:#16a34a}
@media(max-width:1100px){.tiect{grid-template-columns:repeat(2,minmax(0,1fr))}.tiec:nth-child(2)::after{display:none}.tiewrap{grid-template-columns:1fr}.tpbr{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:760px){
 .tiec::after,.tiec:not(:last-child)::after{display:none}
 .tiewrap{gap:18px;margin-top:20px}
 .tieloop{gap:6px}
 .tien{padding:8px 4px;border-radius:14px}.tien span{font-size:20px}.tien b{font-size:12.5px}.tien small{display:none}
 .tiehub{width:86px;height:86px;box-shadow:0 0 0 5px transparent;box-shadow:0 0 0 5px color-mix(in srgb,var(--ac) 14%,transparent)}.tiehub span{font-size:20px}.tiehub b{font-size:10px;padding:0 6px}
 .tiel{max-width:none;padding:4px 5px;font-size:10px;border-radius:10px}.tiel i{font-size:8.5px}
 .tiesc{grid-template-columns:38px minmax(0,1fr);height:100%}.tiesc span{width:38px;height:38px;font-size:19px}
 .tienote{display:none}
 .tpbrrow{grid-template-columns:88px minmax(0,1fr)}
}
.apz,.apz *{animation-play-state:paused!important}
@media(prefers-reduced-motion:reduce){.tpsvg *,.lpsvg *{animation:none!important}}

/* ---------- TRIẾT LÝ HỌC: vòng tăng cấp (quỹ đạo + ngọc + XP) & thẻ khoa học kiểu thẻ bài ---------- */
.tie2{position:relative;margin-top:8px}
.tieo{position:relative;width:min(100%,540px);aspect-ratio:1/1;margin:0 auto}
.tieorb{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.tietrack{fill:none;stroke:#f1e6d8;stroke-width:24}
.tiearc{fill:none;stroke:var(--c);stroke-width:24;stroke-linecap:round;opacity:.16;transition:opacity .6s}
.tiearc.on{opacity:.85}
.tiedash{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:1 13;animation:laDash 1.3s linear infinite}
.tiexpbg{fill:none;stroke:#f3e7d6;stroke-width:10}
.tiexp{fill:none;stroke:#f0a91c;stroke-width:10;stroke-linecap:round;stroke-dasharray:100;stroke-dashoffset:75;transition:stroke-dashoffset 1s ease}
.tierot{position:absolute;inset:0;z-index:2;pointer-events:none;transform:rotate(var(--a,0deg));transition:transform 1.2s cubic-bezier(.55,0,.25,1)}
.tietok{position:absolute;left:35.95%;top:15.23%;width:26px;height:26px;margin:-13px 0 0 -13px;border-radius:50%;
  background:radial-gradient(circle at 35% 30%,#fff7c2,#ffc93c 45%,#f08c00);box-shadow:0 0 0 5px rgba(255,201,60,.35),0 0 22px 6px rgba(255,190,40,.55)}
.tiecore{position:absolute;left:50%;top:50%;z-index:2;width:36%;aspect-ratio:1/1;transform:translate(-50%,-50%);border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;text-align:center;color:#fff;background:radial-gradient(circle at 35% 28%,var(--ac),var(--ac) 58%,var(--ac));
  background:radial-gradient(circle at 35% 28%,color-mix(in srgb,var(--ac) 55%,#fff),var(--ac) 58%,color-mix(in srgb,var(--ac) 72%,#000));box-shadow:inset 0 -9px 0 rgba(0,0,0,.14),0 18px 36px rgba(90,20,29,.25)}
.tiecore span{font-size:36px;line-height:1;animation:tieRk 2.4s ease-in-out infinite}
.tiecore b{font:800 13px/1.2 var(--fd);padding:0 16px}
.tiecore em{margin-top:5px;padding:2px 10px;border-radius:99px;font:800 11px var(--fd);font-style:normal;letter-spacing:.08em;color:#3a1a12;background:#ffd35c;box-shadow:0 3px 0 #d99a00}
.tiecore em u{text-decoration:none}
.tiecore.up em{animation:tieUp .7s cubic-bezier(.2,1.4,.4,1)}
@keyframes tieRk{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes tieUp{0%{transform:scale(1)}40%{transform:scale(1.45)}100%{transform:scale(1)}}
.tien2{position:absolute;z-index:3;width:27%;transform:translate(-50%,-32px);text-align:center;cursor:pointer;outline:none}
.tien2.p0{left:50%;top:12.5%}.tien2.p1{left:87.5%;top:50%}.tien2.p2{left:50%;top:87.5%}.tien2.p3{left:12.5%;top:50%}
.tiegem{position:relative;display:grid;place-items:center;width:64px;height:64px;margin:0 auto;border-radius:20px;transform:rotate(45deg);background:linear-gradient(145deg,var(--c),var(--c));
  background:linear-gradient(145deg,color-mix(in srgb,var(--c) 62%,#fff),var(--c));box-shadow:0 5px 0 var(--c),0 10px 20px rgba(0,0,0,.16);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 62%,#000),0 10px 20px rgba(0,0,0,.16);transition:transform .5s cubic-bezier(.2,1.5,.4,1),box-shadow .5s}
.tiegem svg{width:40px;height:40px;transform:rotate(-45deg)}
.tien2.on .tiegem,.tien2:focus-visible .tiegem{transform:rotate(45deg) scale(1.2);box-shadow:0 5px 0 var(--c),0 0 0 7px transparent,0 0 36px 6px var(--c);box-shadow:0 5px 0 color-mix(in srgb,var(--c) 62%,#000),0 0 0 7px color-mix(in srgb,var(--c) 22%,transparent),0 0 36px 6px color-mix(in srgb,var(--c) 60%,transparent)}
.tien2 b{display:block;margin-top:16px;font-family:var(--fd);font-size:15px;line-height:1.2;color:var(--c);color:color-mix(in srgb,var(--c) 82%,#000)}
.tien2 small{display:block;margin-top:2px;font-size:12px;line-height:1.35;color:var(--ink2)}
.tiepl{position:absolute;left:50%;top:-20px;padding:2px 8px;border-radius:99px;font:800 12px var(--fd);font-style:normal;color:#16a34a;background:#fff;box-shadow:0 4px 10px rgba(0,0,0,.12);opacity:0;transform:translateX(-50%)}
.tien2.on .tiepl{animation:tieXp 1.8s ease-out .5s}
@keyframes tieXp{0%{opacity:0;transform:translate(-50%,12px)}25%{opacity:1}100%{opacity:0;transform:translate(-50%,-22px)}}
.tiel2{position:absolute;z-index:1;width:29%;transform:translate(-50%,-50%);padding:6px 8px;border-radius:12px;text-align:center;font-size:11.5px;font-weight:700;line-height:1.3;color:var(--ink2);
  background:rgba(255,250,242,.94);border:1.5px dashed #e6d6c4;transition:transform .5s,box-shadow .5s,border-color .5s,color .5s}
.tiel2 i{display:block;font-style:normal;font-size:10px;font-weight:800;letter-spacing:.04em;color:var(--ac)}
.tiel2.l0{left:81%;top:19%}.tiel2.l1{left:81%;top:81%}.tiel2.l2{left:19%;top:81%}.tiel2.l3{left:19%;top:19%}
.tiel2.on{color:var(--ink);background:#fff;border:1.5px solid var(--ac);box-shadow:0 10px 22px rgba(90,20,29,.16);transform:translate(-50%,-50%) scale(1.08)}
.tiecap{display:flex;align-items:center;gap:10px;max-width:540px;margin:12px auto 0;padding:10px 14px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 18px rgba(90,20,29,.06);font-size:13.5px;line-height:1.45;color:var(--ink)}
.tiecap b{flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font-family:var(--fd);color:#fff;background:var(--ac)}
.tiesci2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin-top:10px}
.tiecard{position:relative;border-radius:18px;overflow:hidden;background:#fff;border:2px solid #efe6db;border:2px solid color-mix(in srgb,var(--c) 35%,#efe6db);box-shadow:0 5px 0 #fff,0 12px 24px rgba(90,20,29,.08);
  box-shadow:0 5px 0 color-mix(in srgb,var(--c) 30%,#fff),0 12px 24px rgba(90,20,29,.08);transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.tiecard:hover{transform:translateY(-5px) rotate(-.8deg)}
.tiecart2{position:relative;display:block;aspect-ratio:240/150;border-bottom:2px dashed #efe6db;border-bottom:2px dashed color-mix(in srgb,var(--c) 30%,#efe6db);background:radial-gradient(circle at 70% 28%,#fff 0%,#fffaf2 60%,#fffaf2 100%);
  background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 7%,#fffaf2) 60%,#fffaf2 100%)}
.tieyr{position:absolute;right:8px;top:8px;padding:2px 8px;border-radius:8px;font:800 11px var(--fd);font-style:normal;color:#fff;background:var(--c)}
.tiert{position:absolute;left:8px;top:6px;font-size:12px;font-style:normal;letter-spacing:1px;color:#f0a91c;text-shadow:0 1px 0 #fff}
.tiecb{padding:8px 12px 12px}
.tiecb b{display:block;font-family:var(--fd);font-size:14px;line-height:1.25;color:var(--ink)}
.tiecb cite{display:block;margin-top:2px;font-style:normal;font-size:11px;font-weight:800;color:var(--c);color:color-mix(in srgb,var(--c) 80%,#000)}
.tiecb small{display:block;margin-top:4px;font-size:12px;line-height:1.4;color:var(--ink2)}
.tieap{display:block;margin-top:8px;padding:5px 8px;border-radius:10px;font-size:11.5px;font-weight:700;line-height:1.35;color:var(--ink);background:#fff;background:color-mix(in srgb,var(--c) 11%,#fff)}
.tieap i{font-style:normal;color:var(--c);color:color-mix(in srgb,var(--c) 80%,#000)}
@media(max-width:760px){
 .tiegem{width:46px;height:46px;border-radius:14px}.tiegem svg{width:30px;height:30px}
 .tien2{width:31%;transform:translate(-50%,-23px)}.tien2 b{margin-top:10px;font-size:12px}.tien2 small{display:none}
 .tiepl{top:-18px;font-size:10.5px}
 .tiel2{display:none}
 .tietok{width:20px;height:20px;margin:-10px 0 0 -10px}
 .tiecore span{font-size:24px}.tiecore b{font-size:10.5px;padding:0 8px}.tiecore em{margin-top:3px;font-size:9.5px;padding:1px 7px}
 .tiecap{font-size:12.5px;padding:8px 10px;margin-top:6px}
 .tiecard{height:100%}.tiecb small{display:none}
}
@media(prefers-reduced-motion:reduce){.tierot,.tiegem,.tiexp{transition:none}.tiecore span,.tiedash{animation:none}}

/* vòng tăng cấp: chữ ngọc có nền để không đè quỹ đạo; chú thích cách xa ngọc dưới; cột lưới không bị dải vuốt kéo giãn */
.tienb{display:inline-block;margin-top:14px;padding:5px 10px 6px;border-radius:12px;background:rgba(255,255,255,.96);box-shadow:0 6px 16px rgba(90,20,29,.1)}
.tien2 .tienb b{margin-top:0}
.tiecap{margin-top:54px}
.tiewrap>div{min-width:0}
@media(max-width:1100px){.tiewrap{grid-template-columns:minmax(0,1fr)}}
@media(max-width:760px){.tienb{margin-top:8px;padding:3px 6px 4px;border-radius:9px}.tiecap{margin-top:30px}}
/* Triết lý học trên điện thoại: thẻ 4 bước & thẻ khoa học chuyển dạng ngang (hình trái – chữ phải) cho section ≤ 1,5 màn */
@media(max-width:760px){
 .tiec{display:grid;grid-template-columns:52% minmax(0,1fr);grid-template-rows:1fr auto auto 1fr}
 .tiecart{grid-row:1/5;grid-column:1;border-radius:19px 0 0 19px}
 .tiec b{grid-row:2;grid-column:2;margin:0 10px 0 12px;font-size:16px}
 .tiec small{grid-row:3;grid-column:2;margin:3px 10px 0 12px;font-size:12px}
 .tiec p{display:none}
 .tiecard{display:grid;grid-template-columns:44% minmax(0,1fr);align-items:center}
 .tiecart2{border-bottom:0;border-right:2px dashed #efe6db;border-right:2px dashed color-mix(in srgb,var(--c) 30%,#efe6db)}
 .tiecb{padding:8px 10px}.tiecb b{font-size:13px}.tiecb cite{font-size:10.5px}.tieap{margin-top:5px;padding:4px 6px;font-size:11px}
 .tieo{width:min(100%,340px)}
}

/* ---------- TRANG KHÓA (CPR): khung ảnh thật, khóa là gì, cây kỹ năng, bản đồ buổi, sản phẩm, đồ án, Dấu Tự Làm, gói học liệu, vị trí ---------- */
.cphart{position:relative}
.cpshot{margin:0;border-radius:18px;overflow:hidden;background:#140d18;border:1px solid rgba(255,255,255,.16);box-shadow:0 22px 50px rgba(20,8,16,.32)}
.cpbar{display:flex;align-items:center;gap:6px;padding:8px 12px;background:#231a2c}
.cpbar i{width:9px;height:9px;border-radius:50%;background:#ff6b6b}.cpbar i:nth-child(2){background:#ffd35c}.cpbar i:nth-child(3){background:#7fe6b0}
.cpbar em{margin-left:auto;font:800 10.5px var(--fb);font-style:normal;letter-spacing:.06em;color:#7fe6b0}
.cpshot img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#140d18}
.cpshot figcaption{padding:9px 12px;font-size:12.5px;font-weight:700;line-height:1.4;color:#fff;background:#231a2c}
.cphero .cpshot{transform:rotate(1.6deg);animation:cpFloat 6s ease-in-out infinite}
@keyframes cpFloat{0%,100%{transform:rotate(1.6deg) translateY(0)}50%{transform:rotate(1.6deg) translateY(-8px)}}
.cpquote{max-width:600px;margin-top:12px;padding-left:14px;border-left:3px solid var(--gold-l);font-style:italic;font-size:15px;line-height:1.55;opacity:.95}
.cpwhat{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:28px;align-items:center;margin-top:24px}
.cpwhat.noimg{grid-template-columns:1fr}.cpwhat.noimg .cpchips{grid-template-columns:repeat(4,minmax(0,1fr))}
.cpchips{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.cpchip{padding:14px;border-radius:18px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 25%,#efe6db);box-shadow:0 5px 0 #fff;box-shadow:0 5px 0 color-mix(in srgb,var(--c) 26%,#fff)}
.cpchip span{display:grid;place-items:center;width:44px;height:44px;border-radius:14px;font-size:22px;background:#fff;background:color-mix(in srgb,var(--c) 14%,#fff)}
.cpchip b{display:block;margin-top:8px;font-family:var(--fd);font-size:15.5px;line-height:1.25;color:var(--ink)}
.cpchip small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.cplearn{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.cplearn.cp2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cplg{position:relative;display:flex;flex-direction:column;padding:20px 18px 0;border-radius:22px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 22%,#efe6db);box-shadow:0 6px 0 #fff,0 16px 30px rgba(90,20,29,.08);
  box-shadow:0 6px 0 color-mix(in srgb,var(--c) 28%,#fff),0 16px 30px rgba(90,20,29,.08);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.cplg:hover{transform:translateY(-5px)}
.cplgi{position:relative;display:grid;place-items:center;width:60px;height:60px;border-radius:18px;font-size:30px;transform:rotate(-4deg);background:linear-gradient(145deg,#fff,#fff);
  background:linear-gradient(145deg,color-mix(in srgb,var(--c) 24%,#fff),color-mix(in srgb,var(--c) 8%,#fff))}
.cplgi em{position:absolute;right:-8px;top:-8px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;font:800 12px var(--fd);font-style:normal;color:#fff;background:var(--c);transform:rotate(4deg)}
.cplg b{margin-top:12px;font-family:var(--fd);font-size:17px;line-height:1.25;color:var(--ink)}
.cplg small{margin:5px 0 14px;font-size:13px;line-height:1.5;color:var(--ink2)}
.cplg p{margin:auto -18px 0;padding:11px 18px;font-size:13px;font-weight:700;line-height:1.45;color:var(--c);color:color-mix(in srgb,var(--c) 72%,#000);background:#fff;background:color-mix(in srgb,var(--c) 10%,#fff)}
.cplg p i{margin-right:6px;font-style:normal}
.cpmap{display:grid;gap:16px;margin-top:24px}
.cpst{display:grid;grid-template-columns:210px minmax(0,1fr);gap:14px;align-items:stretch}
.cpsth{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px;border-radius:20px;color:#fff;background:linear-gradient(150deg,var(--c),var(--c));
  background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 62%,#000));box-shadow:0 6px 0 var(--c);box-shadow:0 6px 0 color-mix(in srgb,var(--c) 55%,#000)}
.cpsth em{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:800 15px var(--fd);font-style:normal;color:var(--c);background:#fff}
.cpsth b{font-family:var(--fd);font-size:16px;line-height:1.25}
.cpsess{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:10px}
.cpse{display:flex;gap:10px;align-items:flex-start;padding:12px;border-radius:16px;background:#fff;border:1.5px solid #efe4d6}
.cpsen{flex:none;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:800 14px var(--fd);color:#fff;background:var(--c);
  background:color-mix(in srgb,var(--c) 85%,#000);box-shadow:0 3px 0 var(--c);box-shadow:0 3px 0 color-mix(in srgb,var(--c) 50%,#000)}
.cpse small{display:block;font-size:10.5px;font-weight:800;letter-spacing:.05em;color:var(--c);color:color-mix(in srgb,var(--c) 75%,#000)}
.cpse b{display:block;margin-top:1px;font-size:13.5px;line-height:1.3;color:var(--ink)}
.cpse i{display:block;margin-top:3px;font-style:normal;font-size:12px;line-height:1.4;color:var(--ink2)}
.cpse.capstone{border-color:#f0c24b;background:linear-gradient(160deg,#fff8e1,#fff);box-shadow:0 0 0 3px rgba(240,169,28,.16)}
.cpse.capstone .cpsen{font-size:17px;background:linear-gradient(145deg,#ffd35c,#f08c00);box-shadow:0 3px 0 #b86b00}
.cpse.doan{border-color:#b9a4f0;background:linear-gradient(160deg,#f1ebff,#fff)}
.cpse.doan .cpsen{font-size:17px;background:linear-gradient(145deg,#9b7bf0,#6d4bd8);box-shadow:0 3px 0 #4a2fa8}
.cpprods{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin-top:24px}
.cpprods.cp2{grid-template-columns:repeat(2,minmax(0,1fr))}
.cpprod{border-radius:20px;overflow:hidden;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18)}
.cpprod .cpshot{border:0;border-radius:0;box-shadow:none}
.cpprodb{padding:12px 14px 16px}
.cpprodb b{display:block;margin-top:6px;font-family:var(--fd);font-size:17px;color:#fff}
.cpprodb small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.82)}
.cpnoimg{display:grid;place-items:center;aspect-ratio:16/10;font-size:48px;background:rgba(0,0,0,.25)}
.cpfinal{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px;margin-top:24px}
.cpfinal.cp2{grid-template-columns:repeat(2,minmax(0,1fr))}.cpfinal.cp1{grid-template-columns:minmax(0,640px);justify-content:center}
.cpfi{border-radius:20px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 25%,#efe6db);box-shadow:0 6px 0 #fff;box-shadow:0 6px 0 color-mix(in srgb,var(--c) 28%,#fff)}
.cpfimg img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;background:#140d18}
.cpfico{display:grid;place-items:center;aspect-ratio:16/7;font-size:44px;background:linear-gradient(145deg,#fff,#fffaf2);background:linear-gradient(145deg,color-mix(in srgb,var(--c) 22%,#fff),#fffaf2)}
.cpfi>div{padding:12px 14px 16px}
.cpfi em{display:inline-block;padding:2px 9px;border-radius:99px;font:800 10.5px var(--fd);font-style:normal;letter-spacing:.05em;color:#fff;background:var(--c)}
.cpfi b{display:block;margin-top:8px;font-family:var(--fd);font-size:16.5px;line-height:1.3;color:var(--ink)}
.cpfi small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink2)}
.cpdemo{display:flex;gap:14px;align-items:center;max-width:860px;margin:22px auto 0;padding:14px 18px;border-radius:18px;background:linear-gradient(120deg,#fff3c4,#fff);border:1.5px solid #f0c24b}
.cpdemo span{font-size:30px}.cpdemo p{font-size:14px;line-height:1.55;color:var(--ink)}
.cpflow,.tpflow.cpf4{grid-template-columns:repeat(4,1fr)}
.cpproof{display:grid;grid-template-columns:220px minmax(0,1fr);gap:24px;align-items:center;margin-top:24px}
.cpev{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.cpevc{border-radius:18px;overflow:hidden;background:#fff;color:var(--ink)}
.cpevart{position:relative;display:block;aspect-ratio:240/150;background:radial-gradient(circle at 70% 28%,#fff 0%,#fffaf2 60%,#fffaf2 100%);background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 7%,#fffaf2) 60%,#fffaf2 100%)}
.cpevart em{position:absolute;left:8px;top:8px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;font:800 13px var(--fd);font-style:normal;color:#fff;background:var(--c)}
.cpevc b{display:block;margin:10px 12px 0;font-family:var(--fd);font-size:15px;line-height:1.3}
.cpevc small{display:block;margin:3px 12px 14px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.cppack{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-top:22px}
.cppk{display:flex;flex-direction:column;align-items:flex-start;padding:14px;border-radius:18px;background:#fff;border:1.5px dashed #efe6db;border:1.5px dashed color-mix(in srgb,var(--c) 40%,#efe6db)}
.cppk span{font-size:26px;line-height:1.1}.cppk b{margin-top:6px;font-family:var(--fd);font-size:14.5px;line-height:1.3;color:var(--ink)}.cppk small{margin-top:2px;font-size:12px;line-height:1.4;color:var(--ink2)}
.cpwhere{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-top:22px}
.cpw{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:#fff;border:1.5px solid var(--line);cursor:pointer;transition:transform .18s}
.cpw:hover{transform:translateY(-3px)}
.cpw b{padding:6px 9px 8px;font:700 12.5px/1.3 var(--fb);color:var(--ink)}
.cpw i{margin:-4px 9px 8px;font-style:normal;font-size:11px;font-weight:800;color:var(--ac)}
.cpw.on{border-color:var(--ac);box-shadow:0 0 0 3px transparent;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 30%,transparent)}
@media(max-width:1100px){
 .cpwhat{grid-template-columns:1fr}.cplearn{grid-template-columns:repeat(2,minmax(0,1fr))}.cpprods,.cpfinal{grid-template-columns:repeat(2,minmax(0,1fr))}
 .cpproof{grid-template-columns:1fr}.cpproof .tpseal{display:none}.cppack{grid-template-columns:repeat(3,minmax(0,1fr))}.tpflow.cpf4{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:760px){
 .cphero .cphart{margin-top:4px}.cphero .cpshot{animation:none;transform:none}
 .cpchips{gap:8px}.cpchip{padding:10px}.cpchip span{width:36px;height:36px;font-size:18px}.cpchip small{display:none}
 .cpwhat.noimg .cpchips{grid-template-columns:1fr 1fr}
 .cplg{height:100%}
 .cpst{grid-template-columns:1fr;gap:8px}
 .cpsth{flex-direction:row;align-items:center;padding:10px 12px;border-radius:14px}.cpsth em{width:28px;height:28px;font-size:13px}.cpsth b{font-size:14.5px}
 .cpsess{grid-template-columns:1fr;gap:6px}
 .cpse{padding:8px 10px;border-radius:12px}.cpse i{display:none}.cpsen{width:28px;height:28px;font-size:12.5px}.cpse b{font-size:13px}
 .cpprod,.cpfi,.cpevc{height:100%}
 .cpdemo{padding:10px 12px}.cpdemo span{font-size:24px}.cpdemo p{font-size:13px}
 .cppack{grid-template-columns:1fr 1fr;gap:8px}.cppk{padding:10px}.cppk small{display:none}
}
@media(prefers-reduced-motion:reduce){.cphero .cpshot{animation:none}}
/* bản đồ buổi: đường nối nét đứt giữa các trạm trong một chặng → cảm giác đường màn chơi */
.cpse{position:relative}
.cpse:not(:last-child)::after{content:'';position:absolute;right:-11px;top:28px;z-index:1;width:12px;height:4px;border-radius:2px;background:repeating-linear-gradient(90deg,var(--c) 0 4px,transparent 4px 7px);
  background:repeating-linear-gradient(90deg,color-mix(in srgb,var(--c) 70%,#fff) 0 4px,transparent 4px 7px)}
.cpsth{position:relative}
.cpsth::after{content:'';position:absolute;right:-11px;top:50%;width:12px;height:4px;margin-top:-2px;border-radius:2px;background:var(--c);background:color-mix(in srgb,var(--c) 70%,#fff)}
@media(max-width:760px){.cpse:not(:last-child)::after,.cpsth::after{display:none}}
.cpfart{position:relative;display:block;aspect-ratio:240/150;background:radial-gradient(circle at 70% 28%,#fff 0%,#fffaf2 60%,#fffaf2 100%);background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 7%,#fffaf2) 60%,#fffaf2 100%)}
/* bản đồ buổi trên điện thoại: 12–14 buổi phải ≤ 1,5 màn — buổi thường bỏ nhãn "BUỔI N" (số đã ở vòng tròn), dòng thấp hơn */
@media(max-width:760px){
 .cpmap{gap:10px;margin-top:16px}
 .cpst{gap:5px}
 .cpsth{padding:7px 10px}
 .cpsess{gap:4px}
 .cpse{align-items:center;padding:5px 8px;border-radius:10px}
 .cpse:not(.capstone):not(.doan) small{display:none}
 .cpse small{font-size:9.5px}
 .cpse b{font-size:12.5px;line-height:1.25}
 .cpsen{width:24px;height:24px;font-size:11.5px}
 .cpse.capstone .cpsen,.cpse.doan .cpsen{font-size:14px}
}
.cpprod .cpnoart{border-bottom:1px solid rgba(255,255,255,.18)}

/* ---------- TRANG KHÓA v2 (2026-09-14): hình minh hoạ cho từng mục, bản đồ nội dung có hình, buổi ra mắt cho ba mẹ, bản đồ lộ trình ---------- */
.cpart{position:relative;display:block;aspect-ratio:240/150;overflow:hidden;background:radial-gradient(circle at 70% 28%,#fff 0%,#fffaf2 60%,#fffaf2 100%);
  background:radial-gradient(circle at 70% 28%,color-mix(in srgb,var(--c) 20%,#fff) 0%,color-mix(in srgb,var(--c) 7%,#fffaf2) 60%,#fffaf2 100%)}
.cpart>svg{display:block;width:100%;height:100%}
.cqchip{display:flex;flex-direction:column;border-radius:18px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 25%,#efe6db);box-shadow:0 5px 0 #fff;box-shadow:0 5px 0 color-mix(in srgb,var(--c) 26%,#fff);transition:transform .2s}
.cqchip:hover{transform:translateY(-4px)}
.cqchip>div{padding:10px 12px 12px}
.cqchip b{display:block;font-family:var(--fd);font-size:15px;line-height:1.25;color:var(--ink)}
.cqchip small{display:block;margin-top:3px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.cqlg{display:flex;flex-direction:column;border-radius:22px;overflow:hidden;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 22%,#efe6db);box-shadow:0 6px 0 #fff,0 16px 30px rgba(90,20,29,.08);
  box-shadow:0 6px 0 color-mix(in srgb,var(--c) 28%,#fff),0 16px 30px rgba(90,20,29,.08);transition:transform .22s cubic-bezier(.2,.7,.2,1)}
.cqlg:hover{transform:translateY(-5px)}
.cqlg .cpart>em,.cqse .cpart>em{position:absolute;left:10px;top:10px;font-style:normal}
.cqlg .cpart>em{display:grid;place-items:center;width:28px;height:28px;border-radius:50%;font:800 13px var(--fd);color:#fff;background:var(--c);box-shadow:0 0 0 3px #fff}
.cqlgb{padding:12px 16px}
.cqlgb b{display:block;font-family:var(--fd);font-size:17px;line-height:1.25;color:var(--ink)}
.cqlgb small{display:block;margin-top:5px;font-size:13px;line-height:1.5;color:var(--ink2)}
.cqlg p{margin-top:auto;padding:11px 16px;font-size:13px;font-weight:700;line-height:1.45;color:var(--c);color:color-mix(in srgb,var(--c) 72%,#000);background:#fff;background:color-mix(in srgb,var(--c) 10%,#fff)}
.cqlg p i{margin-right:6px;font-style:normal}
.cqmap{display:grid;gap:18px;margin-top:24px}
.cqst{display:grid;grid-template-columns:190px minmax(0,1fr);gap:14px;align-items:stretch}
.cqsth{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:16px;border-radius:20px;color:#fff;background:linear-gradient(150deg,var(--c),var(--c));
  background:linear-gradient(150deg,var(--c),color-mix(in srgb,var(--c) 62%,#000));box-shadow:0 6px 0 var(--c);box-shadow:0 6px 0 color-mix(in srgb,var(--c) 55%,#000)}
.cqsth em{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;font:800 15px var(--fd);font-style:normal;color:var(--c);background:#fff}
.cqsth b{font-family:var(--fd);font-size:16px;line-height:1.25}
.cqsess{display:grid;grid-template-columns:repeat(auto-fill,minmax(205px,1fr));gap:12px}
.cqse{display:flex;flex-direction:column;border-radius:16px;overflow:hidden;background:#fff;border:1.5px solid #efe4d6;transition:transform .2s}
.cqse:hover{transform:translateY(-3px)}
.cqse .cpart>em{padding:3px 8px;border-radius:99px;font:800 10px var(--fd);letter-spacing:.04em;color:#3a1a12;background:#ffd35c;box-shadow:0 2px 6px rgba(0,0,0,.15)}
.cqse.doan .cpart>em{color:#fff;background:#6d4bd8}
.cqse>div{padding:9px 12px 12px}
.cqse small{display:none;font-size:10px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--c);color:color-mix(in srgb,var(--c) 75%,#000)}
.cqse b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink)}
.cqse i{display:block;margin-top:3px;font-style:normal;font-size:12px;line-height:1.4;color:var(--ink2)}
.cqse.capstone{border-color:#f0c24b;box-shadow:0 0 0 3px rgba(240,169,28,.18)}
.cqse.doan{border-color:#b9a4f0;box-shadow:0 0 0 3px rgba(109,75,216,.14)}
.cqhint{display:none}
.cpprod .cpnoart{border-bottom:1px solid rgba(255,255,255,.18)}
.cpshow{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:28px;align-items:start;margin-top:24px}
.cpshowl{display:grid;gap:18px}
.cpshowart{border-radius:18px;overflow:hidden;border:1.5px solid #efe4d6}
.cpshowr{display:grid;gap:12px}
.cpsr{padding:14px 16px;border-radius:18px;background:#fff;border:1.5px solid #efe4d6;box-shadow:0 8px 18px rgba(90,20,29,.05)}
.cpsr>em{display:block;font:800 11.5px var(--fd);font-style:normal;letter-spacing:.05em;color:var(--ac)}
.cpsr>b{display:block;margin-top:4px;font-family:var(--fd);font-size:18px;line-height:1.3;color:var(--ink)}
.cpsr>small{display:block;margin-top:4px;font-size:13px;line-height:1.5;color:var(--ink2)}
.cpchipl{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.cpchipl span{padding:5px 10px;border-radius:99px;font-size:12.5px;font-weight:700;color:var(--ink);background:#fff;background:color-mix(in srgb,var(--ac) 10%,#fff);border:1px solid #efe6db;border:1px solid color-mix(in srgb,var(--ac) 25%,#efe6db)}
.cpchk{display:grid;gap:5px;margin:8px 0 0;padding:0}
.cpchk li{position:relative;list-style:none;padding-left:22px;font-size:13px;line-height:1.45;color:var(--ink2)}
.cpchk li::before{content:'✓';position:absolute;left:0;top:0;font-weight:800;color:#16a34a}
.cproad{position:relative;margin-top:20px;overflow-x:auto;overflow-y:hidden;padding-bottom:6px;scrollbar-width:thin}
.cproadin{position:relative;margin:0 auto}
.cproad svg{position:absolute;left:0;top:0}
.cprbase{fill:none;stroke:#eadfce;stroke-width:26;stroke-linecap:round}
.cprdash{fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-dasharray:2 12;animation:laDash 1.4s linear infinite}
.cprn{position:absolute;z-index:1;display:flex;flex-direction:column;align-items:center;width:112px;transform:translate(-50%,-34px);text-align:center;cursor:pointer}
.cprimg{display:block;width:64px;height:64px;border-radius:50%;overflow:hidden;border:4px solid #fff;background:#fff;box-shadow:0 0 0 3px #fff,0 8px 16px rgba(90,20,29,.18);
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 45%,#fff),0 8px 16px rgba(90,20,29,.18);transition:transform .2s}
.cprimg img{display:block;width:100%;height:100%;object-fit:cover}
.cprn:hover .cprimg{transform:scale(1.08)}
.cprn b{margin-top:6px;padding:1px 8px;border-radius:99px;font:800 11px var(--fd);color:#fff;background:var(--ac)}
.cprn small{margin-top:3px;font-size:11.5px;font-weight:700;line-height:1.25;color:var(--ink)}
.cprn.done .cprimg{filter:saturate(.75)}
.cprn.on{z-index:2;transform:translate(-50%,-44px)}
.cprn.on .cprimg{width:84px;height:84px;box-shadow:0 0 0 4px var(--ac),0 0 0 11px transparent,0 12px 24px rgba(90,20,29,.25);box-shadow:0 0 0 4px var(--ac),0 0 0 11px color-mix(in srgb,var(--ac) 22%,transparent),0 12px 24px rgba(90,20,29,.25)}
.cppin{position:absolute;bottom:100%;margin-bottom:8px;white-space:nowrap;padding:5px 11px;border-radius:99px;font:800 12px var(--fd);color:#fff;background:#e8574c;box-shadow:0 6px 14px rgba(232,87,76,.4);animation:cpPin 1.6s ease-in-out infinite}
.cppin::after{content:'';position:absolute;left:50%;top:100%;margin-left:-6px;border:6px solid transparent;border-top-color:#e8574c}
@keyframes cpPin{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}}
@media(max-width:1100px){.cpshow{grid-template-columns:1fr}.cpshowl{grid-template-columns:repeat(2,minmax(0,1fr));align-items:center}}
@media(max-width:760px){
 .cpwhat.noimg .cpchips{grid-template-columns:1fr 1fr}
 .cqchip>div{padding:8px 10px 10px}.cqchip b{font-size:13.5px}.cqchip small{display:none}
 .cqlg{height:100%}
 .cqmap{display:flex;gap:10px;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;margin:16px -16px 0;padding:4px 16px 12px;scrollbar-width:none}
 .cqmap::-webkit-scrollbar{display:none}
 .cqst,.cqsess{display:contents}
 .cqsth{flex:none;width:40%;scroll-snap-align:start;border-radius:18px}
 .cqse{flex:none;width:70%;scroll-snap-align:start}
 .cqse small{display:block}
 .cqhint{display:block;margin-top:2px;text-align:center;font-size:12px;font-weight:700;color:var(--ink2)}
 .cpshowl{grid-template-columns:1fr}
 .cpsr{padding:10px 12px}.cpsr>b{font-size:16px}.cpchk li:nth-child(n+5){display:none}
 .cproad{margin-left:-16px;margin-right:-16px}
}
@media(prefers-reduced-motion:reduce){.cppin,.cprdash{animation:none}}

/* buổi ra mắt: danh sách đề đồ án cuối khóa + chú thích hình đồ án */
.cpdoan{display:grid;gap:8px;margin:8px 0 0;padding:0}
.cpdoan li{list-style:none;position:relative;padding:8px 10px 8px 34px;border-radius:12px;background:#fff;background:color-mix(in srgb,var(--ac) 7%,#fff);border:1px solid #efe6db;border:1px solid color-mix(in srgb,var(--ac) 18%,#efe6db)}
.cpdoan li::before{content:'🎓';position:absolute;left:10px;top:8px;font-size:14px}
.cpdoan li b{display:block;font-size:13.5px;line-height:1.3;color:var(--ink)}
.cpdoan li small{display:block;margin-top:2px;font-size:12.5px;line-height:1.45;color:var(--ink2)}
.cpshowart{margin:0;background:#fff}
.cpshowart figcaption{padding:9px 12px;font-size:12.5px;font-weight:700;color:var(--ink);background:#fff}
@media(max-width:760px){.cpdoan li small{display:none}}

/* buổi ra mắt trên điện thoại: bỏ ảnh đồ án dưới vé (đồ án đã có ở mục riêng), các thẻ nội dung thành dải vuốt → ≤ 1,5 màn */
@media(max-width:760px){
 .cpshow{gap:14px;margin-top:16px}
 .cpshowl>div:not(.ticket),.cpshowl>figure{display:none}
 .cpshowr .cpsr{height:100%}
 .cpchk li:nth-child(n+4),.cpdoan li:nth-child(n+4){display:none}
}

/* bản đồ lộ trình Tầng đệm: nhãn năm 1 / nhánh A / nhánh B; nhánh không phải của khóa đang xem nhạt đi */
.cprbr{position:absolute;z-index:1;padding:4px 10px;border-radius:99px;white-space:nowrap;font:800 11px var(--fd);letter-spacing:.04em;color:var(--ink2);background:#fff;border:1.5px dashed #e2d6c6}
.cprbrA{color:#6d4bd8;border-color:#b9a4f0}.cprbrB{color:#0f8f82;border-color:#8fd6cc}
.cprbr.on{color:#fff;border-style:solid}.cprbrA.on{background:#6d4bd8;border-color:#6d4bd8}.cprbrB.on{background:#0fa697;border-color:#0fa697}
.cprn.alt{opacity:.55}.cprn.alt:hover{opacity:1}

/* HÀNH TRÌNH LEO BẬC v2 (2026-09-14): bản đồ tràn toàn bề ngang, mây trôi, sư tử nhảy qua các đảo + chú thích đổi theo;
   điện thoại: bản đồ 880px trong khung vuốt ngang, ghim to dễ bấm */
.road3sec{overflow-x:clip}
.r3wrap{position:relative;margin:26px calc(50% - 50vw) 0;}
.r3scroll{overflow:hidden}
.r3wrap .r3map{max-width:none;width:100%;margin:0;border-radius:0;box-shadow:none}
.r3wrap .r3map::before{content:'';position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(255,250,242,.9),transparent 12%,transparent 82%,rgba(255,250,242,.95))}
.r3cloud{position:absolute;z-index:1;width:22%;height:14%;border-radius:50%;pointer-events:none;background:radial-gradient(closest-side,rgba(255,255,255,.95),rgba(255,255,255,0));filter:blur(2px);animation:r3Drift 38s linear infinite}
.r3cloud.c1{top:10%;left:-20%}.r3cloud.c2{top:30%;left:-30%;width:16%;animation-duration:52s;animation-delay:-20s;opacity:.8}
@keyframes r3Drift{to{transform:translateX(160vw)}}
.r3hero{position:absolute;z-index:3;display:grid;place-items:center;width:44px;height:44px;margin:-8px 0 0 -22px;border-radius:50%;font-size:26px;background:#fff;
  box-shadow:0 0 0 4px rgba(255,211,92,.7),0 10px 22px rgba(90,20,29,.25);transition:left 1.1s cubic-bezier(.5,0,.3,1),top 1.1s cubic-bezier(.5,0,.3,1)}
.r3hero.hop{animation:r3Hop 1.1s ease}
@keyframes r3Hop{0%,100%{margin-top:-8px}45%{margin-top:-70px}}
.r3pin{transition:transform .3s,box-shadow .3s}
.r3pin.on{z-index:4;box-shadow:0 0 0 4px transparent,0 14px 28px rgba(90,20,29,.25);box-shadow:0 0 0 4px color-mix(in srgb,var(--ac) 35%,transparent),0 14px 28px rgba(90,20,29,.25);transform:translate(-50%,calc(-100% - 50px)) scale(1.12)}
.r3cap{position:relative;z-index:2;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;max-width:760px;margin:-34px auto 0;padding:10px 18px;border-radius:99px;
  text-align:center;background:#fff;box-shadow:0 12px 28px rgba(90,20,29,.12);font-size:14px;line-height:1.4}
.r3cap b{font-family:var(--fd);color:var(--ink)}.r3cap span{color:var(--ink2)}
.r3hint{display:none}
@media(max-width:760px){
 .r3scroll{overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-webkit-overflow-scrolling:touch}
 .r3scroll::-webkit-scrollbar{display:none}
 .r3wrap .r3map{width:880px}
 .r3wrap .r3pin{padding:5px 12px 5px 5px;gap:6px;transform:translate(-50%,calc(-100% - 40px))}
 .r3wrap .r3pin i{min-width:34px;height:34px;font-size:12px}.r3wrap .r3pin b{display:inline;font-size:13px}.r3wrap .r3pin small{display:none}
 .r3wrap .r3pin::after{bottom:-38px;height:36px}
 .r3wrap .r3pin.on{transform:translate(-50%,calc(-100% - 40px)) scale(1.08)}
 .r3cap{margin:-26px 16px 0;border-radius:18px;font-size:13px}
 .r3hint{display:block;margin-top:8px;text-align:center;font-size:12px;font-weight:700;color:var(--ink2)}
}
@media(prefers-reduced-motion:reduce){.r3cloud,.r3hero.hop{animation:none}.r3hero{transition:none}}

/* nút tìm kiếm / mạng xã hội chưa có link: dùng <button> thay <a> không href (SEO crawlable-anchors) */
.tsoc .tsbtn{width:29px;height:29px;border:0;padding:0;border-radius:50%;background:rgba(255,255,255,.16);display:grid;place-items:center;color:#fff;cursor:pointer;transition:.15s}
.tsoc .tsbtn:hover{background:var(--gold);color:var(--maroon-d)}

/* TỐC ĐỘ (2026-09-14): section dưới màn hình đầu bỏ qua tính layout/vẽ tới khi sắp cuộn tới — giảm "Style & Layout"
   trên điện thoại (Lighthouse: 4 giây). contain-intrinsic-size giữ chỗ để thanh cuộn không nhảy. Section đầu (hero) không áp dụng. */
#app>section~section,#app>.tpage>section~section,#app>div>section~section{content-visibility:auto;contain-intrinsic-size:auto 900px}
@media(max-width:760px){#app>section~section,#app>.tpage>section~section,#app>div>section~section{contain-intrinsic-size:auto 1000px}}

/* NÚT HỌC THỬ "MÓC CÂU" + FORM GIỮA TRANG (trang tầng & trang khóa) */
.hooksec{padding:6px 0 10px}
.hookcta{display:flex;align-items:center;gap:16px;max-width:980px;margin:0 auto;padding:16px 18px 16px 16px;border-radius:24px;
  background:linear-gradient(110deg,#fff7e0,#fff 55%);border:1.5px solid #f3d27a;box-shadow:0 10px 26px rgba(90,20,29,.08)}
.hookic{flex:none;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:26px;background:#fff;box-shadow:0 4px 0 #f3d27a}
.hookcta p{flex:1;min-width:0;font-size:15px;font-weight:600;line-height:1.5;color:var(--ink)}
.hookbtn{white-space:nowrap}
.hookcta .hookbtn{flex:none;animation:hookPulse 2.6s ease-in-out infinite}
@keyframes hookPulse{0%,100%{box-shadow:0 0 0 0 rgba(240,169,28,.55)}50%{box-shadow:0 0 0 10px rgba(240,169,28,0)}}
.ctsec.cpform{scroll-margin-top:84px}
@media(max-width:760px){
 .hookcta{flex-wrap:wrap;gap:10px;padding:12px}
 .hookic{width:40px;height:40px;font-size:20px;border-radius:12px}
 .hookcta p{font-size:13.5px}
 .hookcta .hookbtn{width:100%;justify-content:center;white-space:normal;text-align:center}
 .ctsec.cpform{padding:40px 0 44px}
 .ctsec.cpform .ctside{display:none}
 .ctsec.cpform .form label:has(textarea){display:none}
}
@media(prefers-reduced-motion:reduce){.hookcta .hookbtn{animation:none}}

/* bấm nút học thử: vẽ đủ mọi section để cuộn tới form đúng vị trí (xem toForm) */
.cvoff #app section{content-visibility:visible!important}

/* ===== Tầng đệm — DẤU KIỂM CHỨNG: carousel 3D đồ án cuối khóa (tpfInit) + 3 bằng chứng + rubric lục giác ===== */
.tpfx{position:relative;margin:0 -8px;padding-top:4px;overflow:hidden}
.tpfst{position:relative;height:340px;perspective:1400px;transform-style:preserve-3d}
.tpfc{position:absolute;top:10px;left:50%;width:460px;height:304px;margin:0 0 0 -230px;border-radius:18px;overflow:hidden;cursor:pointer;background:#1a0f14;border:1px solid rgba(255,255,255,.14);box-shadow:0 26px 60px rgba(0,0,0,.5);transition:transform .7s cubic-bezier(.22,.61,.36,1),opacity .6s,border-color .4s;will-change:transform}
.tpfc img{width:100%;height:100%;object-fit:cover;object-position:top;display:block}
.tpfc::after{content:"";position:absolute;inset:0;background:rgba(20,6,12,.55);transition:opacity .6s;pointer-events:none}
.tpfc.act{border-color:rgba(255,215,106,.75);box-shadow:0 0 0 3px rgba(255,215,106,.22),0 30px 70px rgba(0,0,0,.55)}
.tpfc.act::after{opacity:0}
.tpfc figcaption{position:absolute;left:0;right:0;bottom:0;z-index:1;padding:44px 16px 12px;text-align:left;color:#fff;background:linear-gradient(180deg,transparent,rgba(12,4,8,.92) 55%);opacity:0;transform:translateY(12px);transition:opacity .5s .15s,transform .5s .15s}
.tpfc.act figcaption{opacity:1;transform:none}
.tpfc figcaption em{display:inline-block;padding:2px 9px;border-radius:99px;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.04em;color:var(--maroon-d);background:var(--gold-l)}
.tpfc figcaption b{display:block;margin-top:5px;font-family:var(--fd);font-size:21px;line-height:1.1}
.tpfc figcaption small{display:block;margin-top:2px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.85)}
.tpstamp{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;align-content:center;width:86px;height:86px;border-radius:50%;font-family:var(--fd);font-weight:800;font-size:10.5px;letter-spacing:.06em;color:#fff6d8;background:radial-gradient(circle at 35% 30%,#f7c66a,#c8384b 72%);border:2px dashed rgba(255,246,216,.75);box-shadow:0 0 0 4px rgba(200,56,75,.35),0 10px 22px rgba(0,0,0,.4);opacity:0;transform:scale(2.4) rotate(-30deg)}
.tpstamp i{font-style:normal;font-size:27px;line-height:1}
.tpfc.act .tpstamp{animation:tpstamp .5s .6s cubic-bezier(.3,1.5,.5,1) both}
@keyframes tpstamp{0%{opacity:0;transform:scale(2.4) rotate(-30deg)}100%{opacity:1;transform:scale(1) rotate(-12deg)}}
.tpfnav{position:absolute;top:162px;z-index:60;display:grid;place-items:center;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,.4);color:#fff;font-size:24px;line-height:1;cursor:pointer;transform:translateY(-50%);transition:background .2s,color .2s}
.tpfnav:hover{background:var(--gold);color:var(--maroon-d);border-color:var(--gold)}
.tpfnav.pv{left:14px}.tpfnav.nx{right:14px}
.tpfbar{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:6px 12px;font-size:13px;color:rgba(255,255,255,.75)}
.tpflab{font-size:12px;font-weight:800;letter-spacing:.06em;text-transform:uppercase}
.tpfcap{padding:3px 12px;border-radius:99px;background:rgba(255,255,255,.12)}.tpfcap b{color:var(--gold-l)}
.tpprow{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:24px;align-items:center;margin-top:28px}
.tpsteps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.tpsteps>div{position:relative;padding:16px 10px 14px;border-radius:20px;text-align:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.16)}
.tpsteps>div+div::before{content:"";position:absolute;left:-14px;top:45px;width:14px;border-top:3px dotted var(--gold-l)}
.tpsteps span{position:relative;display:grid;place-items:center;width:60px;height:60px;margin:0 auto;border-radius:50%;font-size:28px;background:radial-gradient(circle at 35% 30%,rgba(255,246,216,.3),rgba(255,215,106,.1));border:2px solid rgba(255,215,106,.55)}
.tpsteps em{position:absolute;top:-4px;right:-4px;display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:11.5px;font-weight:800;color:var(--maroon-d);background:var(--gold-l)}
.tpsteps b{display:block;margin-top:10px;font-family:var(--fd);font-size:17px;color:#fff}
.tpsteps small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:rgba(255,255,255,.78)}
.tprad{display:grid;grid-template-columns:190px minmax(0,1fr);gap:16px;align-items:center}
.tpradw{position:relative;width:190px;height:190px}
.tpradw svg{position:absolute;top:18px;left:18px;width:154px;height:154px;overflow:visible}
.tpradw .g{fill:none;stroke:rgba(255,255,255,.18);stroke-width:1}
.tpradw line{stroke:rgba(255,255,255,.14);stroke-width:1}
.tpradw .th{fill:none;stroke:#ff9d8a;stroke-width:1.6;stroke-dasharray:4 4}
.tpradw .v{fill:rgba(255,215,106,.3);stroke:#ffd76a;stroke-width:2.4;stroke-linejoin:round;opacity:0;transform:scale(.2);transition:transform 1s cubic-bezier(.3,1.4,.5,1) .2s,opacity .6s .2s}
.tprad.in .v{opacity:1;transform:none}
.tpradw span{position:absolute;transform:translate(-50%,-50%);font-size:11px;font-weight:800;white-space:nowrap;color:var(--gold-l)}
.tprad p{font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.75)}
.tprad p b{display:block;margin-bottom:3px;font-family:var(--fd);font-size:17px;color:#fff}
.tprad p i{display:flex;align-items:center;gap:6px;margin-top:6px;font-style:normal;color:#ff9d8a}.tprad p s{width:18px;border-top:2px dashed #ff9d8a}
.tpwk{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px 10px;margin-top:24px;padding:12px 14px;border-radius:20px;background:rgba(255,255,255,.07);border:1px dashed rgba(255,215,106,.4)}
.tpwk>b{margin-right:4px;font-family:var(--fd);font-size:15px;color:var(--gold-l)}
.tpwk span{display:inline-flex;align-items:center;gap:7px;padding:6px 12px 6px 6px;border-radius:99px;font-size:13px;font-weight:700;color:#fff;background:rgba(255,255,255,.1)}
.tpwk i{display:grid;place-items:center;flex:none;width:26px;height:26px;border-radius:50%;font-style:normal;font-size:14px;background:rgba(255,255,255,.14)}

/* ===== Tầng đệm — KHÔNG ĐÓNG KHUNG NGHỀ: nền tảng chung ở giữa tỏa ra 4 ngành, mỗi ngành xếp chồng ảnh đồ án thật ===== */
.tphub{display:grid;grid-template-columns:minmax(0,1fr) 230px minmax(0,1fr);grid-template-areas:"a h b" "c h d";gap:18px 36px;align-items:center;margin-top:18px}
.tphg0{grid-area:a}.tphg1{grid-area:b}.tphg2{grid-area:c}.tphg3{grid-area:d}
.tphubc{grid-area:h;position:relative;display:grid;justify-items:center;text-align:center}
.tphubc img{width:190px;height:190px;aspect-ratio:1;border-radius:50%;object-fit:cover;border:6px solid #fff;box-shadow:0 0 0 3px var(--ac),0 20px 40px rgba(90,20,29,.2)}
.tphring{position:absolute;top:-14px;left:50%;width:222px;height:222px;margin-left:-111px;border-radius:50%;border:2px dashed rgba(200,56,75,.45);animation:e360S 24s linear infinite;pointer-events:none}
.tphubc div{display:grid;margin-top:26px}
.tphubc em{font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;color:var(--ac)}
.tphubc b{font-family:var(--fd);font-size:19px;line-height:1.2;color:var(--ink)}
.tphubc small{font-size:12.5px;color:var(--muted)}
.tphg{--c:var(--ac);position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:14px;align-items:center;padding:14px;border-radius:22px;background:#fff;border:1.5px solid #efe6db;border:1.5px solid color-mix(in srgb,var(--c) 30%,#efe6db);box-shadow:0 6px 0 #efe6db,0 16px 30px rgba(90,20,29,.08);box-shadow:0 6px 0 #fff,0 16px 30px rgba(90,20,29,.08);box-shadow:0 6px 0 color-mix(in srgb,var(--c) 24%,#fff),0 16px 30px rgba(90,20,29,.08);transition:transform .25s}
.tphg:hover{transform:translateY(-4px)}
.tphg::after{content:"";position:absolute;top:50%;width:36px;border-top:2.5px dashed var(--c)}
.tphg0::after,.tphg2::after{right:-37px}.tphg1::after,.tphg3::after{left:-37px}
.tphst{position:relative;height:118px}
.tphst img{position:absolute;top:14px;left:12px;width:126px;height:84px;object-fit:cover;object-position:top;border-radius:10px;border:2px solid #fff;box-shadow:0 8px 18px rgba(0,0,0,.18);transition:transform .35s}
.tphst img:nth-child(1){transform:translate(-10px,-8px) rotate(-9deg)}
.tphst img:nth-child(2){transform:translate(10px,4px) rotate(7deg)}
.tphst img:nth-child(3){transform:translate(0,18px) rotate(-1deg)}
.tphg:hover .tphst img:nth-child(1){transform:translate(-18px,-14px) rotate(-14deg)}
.tphg:hover .tphst img:nth-child(2){transform:translate(18px,0) rotate(12deg)}
.tphgt b{display:flex;align-items:center;gap:8px;font-family:var(--fd);font-size:17px;line-height:1.2;color:var(--ink)}
.tphgt b span{display:grid;place-items:center;flex:none;width:34px;height:34px;border-radius:11px;font-size:18px;background:#f6efe6;background:#fff;background:color-mix(in srgb,var(--c) 14%,#fff)}
.tphgt p{margin-top:4px;font-size:13px;color:var(--ink2)}
.tphp{display:flex;flex-wrap:wrap;gap:5px;margin-top:8px}
.tphp i{padding:3px 9px;border-radius:99px;font-style:normal;font-size:11.5px;font-weight:800;color:#5a141d;color:var(--c);color:color-mix(in srgb,var(--c) 70%,#000);background:#f6efe6;background:#fff;background:color-mix(in srgb,var(--c) 11%,#fff)}

@media(max-width:1100px){
 .tphub{grid-template-columns:repeat(2,minmax(0,1fr));grid-template-areas:"h h" "a b" "c d";gap:14px}
 .tphg::after,.tphring{display:none}
 .tphubc{display:flex;align-items:center;justify-content:center;gap:16px;text-align:left}
 .tphubc img{width:96px;height:96px;border-width:4px}.tphubc div{margin-top:0}
}
@media(max-width:960px){.tpprow{grid-template-columns:1fr;gap:18px}.tprad{justify-content:center}}
@media(max-width:760px){
 .tpfx{margin:0 -16px}
 .tpfc figcaption{padding:30px 12px 9px}.tpfc figcaption b{font-size:16px}.tpfc figcaption small{font-size:11.5px}
 .tpstamp{top:8px;right:8px;width:60px;height:60px;font-size:8px;border-width:1.5px}.tpstamp i{font-size:18px}
 .tpfnav{width:34px;height:34px;font-size:19px}.tpfnav.pv{left:6px}.tpfnav.nx{right:6px}
 .tpprow{margin-top:18px;gap:14px}
 .tpsteps{gap:8px}.tpsteps>div{padding:10px 5px}.tpsteps>div+div::before{left:-8px;width:8px;top:33px}
 .tpsteps span{width:44px;height:44px;font-size:21px}.tpsteps em{width:18px;height:18px;font-size:10px}
 .tpsteps b{margin-top:7px;font-size:14.5px}.tpsteps small{font-size:11px;line-height:1.35}
 .tprad{grid-template-columns:150px minmax(0,1fr);gap:10px}
 .tpradw{width:150px;height:150px}.tpradw svg{top:14px;left:14px;width:122px;height:122px}.tpradw span{font-size:9.5px}
 .tprad p{font-size:11.5px}.tprad p b{font-size:15px}
 .tpwk{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:14px;padding:10px}.tpwk>b{grid-column:1/-1;margin:0;text-align:center}
 .tpwk span{gap:6px;padding:5px 8px 5px 5px;border-radius:14px;font-size:11.5px;line-height:1.3}.tpwk i{width:22px;height:22px;font-size:12px}
 .tphub{gap:10px}
 .tphubc img{width:72px;height:72px}.tphubc b{font-size:16px}
 .tphg{grid-template-columns:1fr;gap:4px;padding:10px;border-radius:18px}
 .tphst{height:92px}.tphst img{top:6px;left:50%;width:100px;height:66px;margin-left:-50px}
 .tphst img:nth-child(1){transform:translate(-14px,-2px) rotate(-9deg)}.tphst img:nth-child(2){transform:translate(14px,2px) rotate(7deg)}.tphst img:nth-child(3){transform:translate(0,14px) rotate(-1deg)}
 .tphgt b{gap:6px;font-size:14px}.tphgt b span{width:26px;height:26px;border-radius:8px;font-size:14px}
 .tphgt p{font-size:11.5px}.tphp{gap:4px;margin-top:6px}.tphp i{padding:2px 7px;font-size:10.5px}
}
@media(prefers-reduced-motion:reduce){.tphring{animation:none}.tpfc.act .tpstamp{animation:none;opacity:1;transform:rotate(-12deg)}.tpradw .v{transition:none}}

/* ===== Trang chủ + Về CyberSoft — CẦU NỐI HIỂU CON (bridgeBlock, brgInit) + dòng cầu nối trong lời hứa theo tầng ===== */
.brgsec{background:linear-gradient(180deg,#fff,#fdf6ee)}
.brgw{display:grid;grid-template-columns:minmax(0,1fr) 250px minmax(0,1fr);gap:22px;align-items:center}
.brgside{display:grid;gap:10px;padding:18px;border-radius:26px;background:#fff;border:1.5px solid var(--line);box-shadow:var(--sh-lg)}
.brgside.kid{transform:rotate(-1deg)}.brgside.par{transform:rotate(1deg)}
.brghd{display:flex;align-items:center;gap:10px;margin-bottom:2px}
.brghd>span{display:grid;place-items:center;flex:none;width:46px;height:46px;border-radius:14px;font-size:26px;background:#fdecea}
.par .brghd>span{background:#e3f6f3}
.brghd small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.brghd b{font-family:var(--fd);font-size:18px;color:var(--ink)}
.brgc{display:flex;gap:10px;align-items:flex-start;padding:11px 13px;cursor:pointer;background:#faf6f1;border:1.5px solid transparent;opacity:.55;transition:background .4s,border-color .4s,box-shadow .4s,opacity .4s}
.kid .brgc{border-radius:18px 18px 18px 4px}.par .brgc{border-radius:18px 18px 4px 18px}
.brgc i{flex:none;font-style:normal;font-size:22px;line-height:1.15}
.brgc p{font-size:14px;line-height:1.45;color:var(--ink2)}
.kid .brgc.on{opacity:1;background:#fff4f2;border-color:#f3b6ad;box-shadow:0 8px 18px rgba(232,87,76,.14)}
.kid .brgc.on p{font-style:italic;font-weight:600;color:var(--ink)}
.par .brgc.on{opacity:1;background:#effaf7;border-color:#9edcd2;box-shadow:0 8px 18px rgba(15,166,151,.14);transition-delay:1s}
.par .brgc.on p{color:var(--ink)}
.brgmid{position:relative;text-align:center}
.brgsvg{display:block;width:100%;height:auto;overflow:visible}
.brgsvg .dk{fill:none;stroke:#b86a12;stroke-width:7;stroke-linecap:round}
.brgsvg .rl{fill:none;stroke:#e0912a;stroke-width:3;stroke-linecap:round}
.brgsvg .ps{stroke:#e0912a;stroke-width:2.2}
.brgsvg .wv{fill:none;stroke:#9edcd2;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:8 7}
.brglion{position:absolute;left:50%;top:6%;font-size:30px;line-height:1;transform:translateX(-50%);filter:drop-shadow(0 6px 6px rgba(0,0,0,.2))}
.brgenv{position:absolute;left:2%;top:40%;font-size:22px;line-height:1;opacity:0}
.brgenv.go{animation:brgenv 1.2s ease-in-out both}
@keyframes brgenv{0%{left:2%;top:40%;opacity:0}15%{opacity:1}50%{left:40%;top:-8%}85%{opacity:1}100%{left:84%;top:40%;opacity:0}}
.brgmid b{display:block;margin-top:6px;font-family:var(--fd);font-size:14px;line-height:1.3;color:var(--maroon)}
.brgdots{grid-column:1/-1;display:flex;justify-content:center;align-items:center;gap:8px}
.brgdots button{width:9px;height:9px;padding:0;border:0;border-radius:99px;background:#e5d9cc;cursor:pointer;transition:width .3s,background .3s}
.brgdots button.on{width:26px;background:var(--maroon)}
.brgdots small{margin-left:6px;font-size:11.5px;font-style:italic;color:var(--muted)}
.brgrules{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:26px}
.brgrules>div{display:flex;gap:13px;align-items:center;padding:16px 18px;border-radius:22px;background:#fff;border:1.5px solid var(--line);box-shadow:0 10px 24px rgba(90,20,29,.06);transition:transform .25s}
.brgrules>div:hover{transform:translateY(-4px)}
.brgrules span{display:grid;place-items:center;flex:none;width:54px;height:54px;border-radius:50%;font-size:26px;background:radial-gradient(circle at 35% 30%,#fff6d8,#ffe9a8);box-shadow:0 0 0 3px rgba(240,169,28,.25)}
.brgrules b{display:block;font-family:var(--fd);font-size:16px;color:var(--ink)}
.brgrules p{margin-top:2px;font-size:13px;line-height:1.45;color:var(--ink2)}
.brganc{margin-top:16px;text-align:center;font-size:12.5px;color:var(--muted)}
.pmbridge{display:flex;gap:12px;align-items:flex-start;margin-top:12px;padding:12px 16px;border-radius:18px;background:#effaf7;border:1.5px dashed #9edcd2}
.pmbridge .e{font-size:24px;line-height:1.1}
.pmbridge small{display:block;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:#0b7c70}
.pmbridge p{margin:2px 0 0;font-size:14px;line-height:1.5;color:var(--ink2)}
@media(max-width:960px){.brgw{grid-template-columns:repeat(2,minmax(0,1fr))}.brgmid{grid-column:1/-1;grid-row:1;width:240px;margin:0 auto}}
@media(max-width:760px){
 .brgw{grid-template-columns:minmax(0,1fr);gap:8px}
 .brgmid{grid-row:auto;width:170px}.brgmid b{display:none}
 .brgside{padding:12px;border-radius:20px;transform:none}
 .brgside .brgc:not(.on){display:none}
 .brghd>span{width:38px;height:38px;font-size:21px}.brghd b{font-size:15.5px}
 .brgc p{font-size:13.5px}.par .brgc.on{transition-delay:0s}
 .brgrules{grid-template-columns:1fr;gap:8px;margin-top:16px}
 .brgrules>div{padding:10px 12px}.brgrules span{width:36px;height:36px;font-size:18px}.brgrules b{font-size:14.5px}.brgrules p{font-size:12.5px}
 .brganc{font-size:11.5px}
 .pmbridge{padding:10px 12px}.pmbridge small{display:none}.pmbridge p{margin:0;font-size:13px}
 /* thêm dòng cầu nối làm khung lời hứa vượt 1,5 màn (Architect 1,54) → ẩn ảnh nhân vật trang trí trên điện thoại */
 .pmside .pmkids{display:none}
}
@media(prefers-reduced-motion:reduce){.brgenv.go{animation:none}.par .brgc.on{transition-delay:0s}}

/* ===== Trang chủ + Về CyberSoft — MẠCH XUYÊN SUỐT (ecoChain): 4 trạm có ảnh + vòng phản hồi + 3 điểm nghẽn một dòng ===== */
.ecsec{background:linear-gradient(180deg,#fdf6ee,#fff)}
.ecloop{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:0 4px}
.ecn{--c:var(--ac);flex:1 1 0;min-width:0;text-align:center;padding:0 6px}
.ecph{position:relative;display:block;width:132px;height:132px;margin:0 auto 12px;border-radius:50%;overflow:hidden;background:#fff;border:4px solid #fff;box-shadow:0 0 0 3px var(--c),0 16px 30px rgba(90,20,29,.16);transition:transform .3s}
.ecn:hover .ecph{transform:translateY(-5px) scale(1.03)}
.ecph img{width:100%;height:100%;object-fit:cover;display:block}
.ecph em{position:absolute;left:50%;bottom:-2px;transform:translateX(-50%);padding:4px 12px;border-radius:99px;font-style:normal;font-family:var(--fd);font-size:14px;font-weight:800;color:#fff;background:var(--c);box-shadow:0 4px 10px rgba(0,0,0,.2);white-space:nowrap}
.ecn b{display:block;font-family:var(--fd);font-size:18px;line-height:1.2;color:var(--ink)}
.ecn small{display:block;margin-top:3px;font-size:12.5px;line-height:1.4;color:var(--ink2)}
.ecar{flex:none;align-self:flex-start;width:42px;height:4px;margin-top:64px;border-radius:99px;background:repeating-linear-gradient(90deg,var(--gold) 0 8px,transparent 8px 15px);position:relative}
.ecar::after{content:"";position:absolute;right:-2px;top:-5px;border:7px solid transparent;border-left-color:var(--gold)}
.ecfb{flex-basis:100%;margin-top:22px;text-align:center}
.ecfb span{display:inline-block;max-width:100%;padding:11px 22px;border-radius:99px;font-family:var(--fd);font-size:16px;font-weight:800;color:var(--maroon-d);background:linear-gradient(90deg,#ffe9a8,#ffd76a);box-shadow:0 5px 0 #e0912a}
.ecgaps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:26px}
.ecg{display:grid;grid-template-columns:52px minmax(0,1fr);grid-template-areas:"i s" "i b";align-items:center;gap:2px 12px;padding:12px 14px;border-radius:20px;background:#fff;border:1.5px solid var(--line);box-shadow:0 10px 22px rgba(90,20,29,.06)}
.ecg .eci{grid-area:i;display:grid;place-items:center;width:52px;height:52px;border-radius:16px;font-size:26px;background:#fdecea}
.ecg s{grid-area:s;font-size:13px;line-height:1.35;color:var(--muted);text-decoration-color:rgba(148,129,122,.6)}
.ecg i{display:none}
.ecg b{grid-area:b;font-family:var(--fd);font-size:15.5px;line-height:1.25;color:var(--ink)}
.ecg b::before{content:"→ ";color:var(--gold-d)}
.ecgl{margin-top:12px;text-align:center;font-size:12.5px;color:var(--muted)}
@media(max-width:1000px){.ecloop{gap:14px 0}.ecn{flex:1 1 40%}.ecar{display:none}.ecgaps{grid-template-columns:1fr}}
@media(max-width:760px){
 .ecloop{gap:10px 0}
 .ecn{flex:1 1 45%;padding:0 4px}
 .ecph{width:96px;height:96px;margin-bottom:10px;border-width:3px}
 .ecph em{font-size:12px;padding:3px 9px}
 .ecn b{font-size:15px}.ecn small{font-size:11.5px}
 .ecfb{margin-top:16px}.ecfb span{padding:9px 14px;font-size:13.5px;line-height:1.35;box-shadow:0 4px 0 #e0912a}
 .ecgaps{gap:8px;margin-top:18px}
 .ecg{grid-template-columns:44px minmax(0,1fr);gap:1px 10px;padding:10px 12px;border-radius:16px}
 .ecg .eci{width:44px;height:44px;font-size:21px;border-radius:13px}
 .ecg s{font-size:11.5px}.ecg b{font-size:13.5px}
 .ecgl{font-size:11.5px}
}
/* ===== Trang chủ + Về CyberSoft — DOANH NGHIỆP ĐÃ ĐÀO TẠO (dtBlock): carousel ảnh đào tạo (dùng lại .tpfc/tpfInit) + dải logo chạy ===== */
.dtsec{background:linear-gradient(160deg,#3a1218,#5a141d 55%,#7b1e2b);color:#fff;position:relative;overflow:hidden}
.dtsec .qhead{color:#fff;text-shadow:0 3px 18px rgba(0,0,0,.35)}
.dtsec .qsub{color:rgba(255,255,255,.82)}
.dtsec .tpfbar{margin-top:2px}
.dtmq{position:relative;margin-top:20px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.dtmq+.dtmq{margin-top:12px}
.dtmr{display:flex;gap:14px;width:max-content;animation:dtmq 86s linear infinite;will-change:transform}
.dtmq.rev .dtmr{animation-direction:reverse}
.dtmq:hover .dtmr,.dtmq:focus-within .dtmr{animation-play-state:paused}
@keyframes dtmq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.dtlg{flex:none;display:grid;place-items:center;overflow:hidden;width:164px;height:86px;padding:9px 13px;border-radius:16px;background:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:0 10px 22px rgba(0,0,0,.18)}
.dtlg img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;transition:transform .3s}
.dtlg:hover img{transform:scale(1.06)}
.dtbadge{position:absolute;top:12px;right:12px;z-index:2;display:grid;place-items:center;width:104px;height:54px;padding:8px 10px;border-radius:14px;background:rgba(255,255,255,.95);box-shadow:0 8px 18px rgba(0,0,0,.28);opacity:0;transform:translateY(-8px);transition:opacity .45s .25s,transform .45s .25s}
.tpfc.act .dtbadge{opacity:1;transform:none}
.dtbadge img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain}
.dtnote{margin-top:18px;text-align:center;font-size:12.5px;color:rgba(255,255,255,.66)}
.dtlink{display:inline-flex;align-items:center;gap:8px;margin-top:14px;padding:9px 18px;border-radius:99px;font-weight:800;font-size:13.5px;color:var(--maroon-d);background:linear-gradient(90deg,#ffe9a8,#ffd76a);box-shadow:0 4px 0 #e0912a}
@media(max-width:760px){
 .dtlg{width:124px;height:66px;padding:7px 9px;border-radius:13px}
 .dtmr{gap:10px;animation-duration:62s}
 .dtmq{margin-top:14px}.dtmq+.dtmq{margin-top:9px}
 .dtnote{font-size:11.5px;margin-top:14px}
}
@media(prefers-reduced-motion:reduce){.dtmr{animation:none}}

/* Menu "Luyện gõ chữ" (game /luyen-go-chu, mở tab mới) — nổi bật màu vàng */
.tnav a.nav-go{color:var(--gold-l)}
.tnav a.nav-go:hover{color:#fff}
#mob a.nav-go{color:var(--gold-l);font-weight:800}