/* Phố Học AI – trang web. Giao diện "Phố học" (docs/07-DESIGN.md): tường vôi, biển men xanh, mái hiên sọc, đèn vàng.
   Chữ: Big Shoulders Display (biển hiệu), Lexend (thân). Font tự lưu trong assets/fonts, không gọi Google Fonts.
   Chuyển động chỉ dùng transform và opacity. Timeline cuộn gốc của CSS khi trình duyệt có; JS (site.js) bù cho trình duyệt chưa có. */

@font-face{font-family:"Lexend";font-weight:400;font-style:normal;font-display:swap;src:url(fonts/Lexend-Regular.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:600;font-style:normal;font-display:swap;src:url(fonts/Lexend-SemiBold.woff2) format("woff2")}
@font-face{font-family:"Lexend";font-weight:700;font-style:normal;font-display:swap;src:url(fonts/Lexend-Bold.woff2) format("woff2")}
@font-face{font-family:"Big Shoulders Display";font-weight:800;font-style:normal;font-display:swap;src:url(fonts/BigShouldersDisplay-ExtraBold.woff2) format("woff2")}

:root{
  --bg:#EDF0EA;--surface:#fff;--surface2:#F3F5F0;--ink:#1C2026;--ink2:#525A66;--line:#D3D9D0;
  --plate:#1F4E95;--plate2:#1E6A50;--primary:#1F4E95;--on-primary:#fff;--link:#1F4E95;
  --lamp:#FFD27A;--sign:#FFFDF6;--sign-ink:#1C2026;--aw-a:#D9822B;--aw-b:#fff;--aw-c:#2E5AAC;
  --wall1:#F1C45B;--wall2:#E9B7A3;--wall3:#BFD9CB;--wall4:#CBDAF0;--wall-ink:#1C2026;
  --outline:#1B1B1F;--shadow:#1B1B1F;--ok:#2F7D4F;--warn:#A8461F;
  --warn-bg:#FFF3D1;--warn-fg:#4F3600;--warn-line:#E0B23F;--law-bg:#FFE3E3;--law-fg:#7A1111;
  --sky-a:#8EC3EE;--sky-b:#D8EBF6;--sky-c:#EDF0EA;--sidewalk:#CFC9BC;--sidewalk2:#B9B3A5;
  --night-a:#101A3C;--night-b:#3B3566;--night-c:#E58A55;
  --ground:60px;--farH:clamp(150px,26svh,280px);--nearH:clamp(150px,24svh,250px);
  --tw:calc(var(--farH)*3.75);--nw:calc(var(--nearH)*3.3333);
  --display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
  --body:"Lexend",system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  --r:18px;
  /* mặt quầy gỗ: chỗ nhân vật "đứng sau quầy" khi tranh vẽ chỉ tới nửa người */
  --ledge:linear-gradient(180deg,#F2CC8E 0 11px,#CF9553 11px 100%);
}
@media (prefers-color-scheme:dark){:root{
  --bg:#11151C;--surface:#1B212B;--surface2:#232A35;--ink:#EEF1F5;--ink2:#A9B3C2;--line:#2E3644;
  --primary:#FFD27A;--on-primary:#1F1606;--link:#9CC0FF;
  --wall1:#3A3424;--wall2:#3B2C28;--wall3:#24332D;--wall4:#26303F;--wall-ink:#EEF1F5;
  --aw-a:#A8611F;--aw-b:#C9C3B6;--aw-c:#2B4B86;
  --outline:#05070A;--shadow:#000;--ok:#6CC08E;--warn:#F0956F;
  --warn-bg:#3A2C08;--warn-fg:#FFE3A3;--warn-line:#8C6B1D;--law-bg:#4A1D1D;--law-fg:#FFCACA;
  --sky-a:#070B1C;--sky-b:#16203C;--sky-c:#1E2A47;--sidewalk:#2A303A;--sidewalk2:#3C4452;
}}

*,*::before,*::after{box-sizing:border-box}
html{overflow-x:clip;-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:72px;background:var(--bg)}
body{margin:0;background:transparent;color:var(--ink);font:400 1rem/1.6 var(--body);overflow-wrap:break-word;overflow-x:clip}
img{max-width:100%;height:auto;display:block}
a{color:var(--link)}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px;border-radius:4px}
@media (prefers-color-scheme:dark){:focus-visible{outline-color:var(--lamp)}}
h1,h2,h3,h4{margin:0;line-height:1.1}
p{margin:0 0 .9em}
.skip{position:absolute;left:12px;top:-60px;background:var(--plate);color:#fff;padding:10px 14px;border-radius:10px;z-index:100;text-decoration:none;font-weight:600}
.skip:focus{top:12px}
.wrap{width:min(1180px,100% - 32px);margin-inline:auto}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- Phố nền (cố định, chuyển động theo cuộn trang) ---------- */
.street{position:fixed;inset:0;z-index:-1;pointer-events:none;overflow:hidden;contain:strict}
.l{position:absolute;left:0;will-change:transform,opacity}
.l-sky{inset:0;background:linear-gradient(180deg,var(--sky-a) 0%,var(--sky-b) 55%,var(--sky-c) 100%)}
.l-far{bottom:var(--ground);height:var(--farH);width:calc(100vw + var(--tw));background:url(street/far-day.svg) 0 100%/auto 100% repeat-x;opacity:.9}
.l-lit{bottom:var(--ground);height:var(--farH);width:calc(100vw + var(--tw));background:url(street/far-lit.svg) 0 100%/auto 100% repeat-x;opacity:0}
.l-dusk{inset:0;background:linear-gradient(180deg,var(--night-a) 0%,var(--night-b) 62%,var(--night-c) 100%);opacity:0}
.l-near{bottom:calc(var(--ground) - 10px);height:var(--nearH);width:calc(100vw + var(--nw));background:url(street/near.svg) 0 100%/auto 100% repeat-x}
.l-glow{bottom:calc(var(--ground) - 10px);height:var(--nearH);width:calc(100vw + var(--nw));background:url(street/glow.svg) 0 100%/auto 100% repeat-x;opacity:0}
.l-ground{left:0;right:0;bottom:0;height:var(--ground);background:
  repeating-linear-gradient(90deg,transparent 0 119px,var(--sidewalk2) 119px 121px),
  linear-gradient(180deg,var(--sidewalk2) 0 6px,var(--sidewalk) 6px 100%)}
@media (prefers-color-scheme:dark){
  .l-far{background-image:url(street/far-night.svg);opacity:1}
  .l-lit{opacity:1}
  .l-dusk{opacity:0!important;animation:none!important}
  .l-glow{opacity:1}
}

/* Cuộn gốc: hoạt hình chạy theo vị trí cuộn trang. Chưa có thì JS đặt --sp (0..1) và ta tua bằng animation-delay âm. */
@keyframes far-move{to{transform:translate3d(calc(var(--tw) * -1),0,0)}}
@keyframes near-move{to{transform:translate3d(calc(var(--nw) * -3),0,0)}}
@keyframes dusk{from{opacity:0}to{opacity:.94}}
@keyframes lit{0%,28%{opacity:0}75%,100%{opacity:1}}
@keyframes fill{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes lamp-run{to{transform:translate3d(calc(100vw - 100%),0,0)}}
.l-far{animation:far-move 1s linear both paused}
.l-lit{animation:far-move 1s linear both paused,lit 1s linear both paused}
.l-near{animation:near-move 1s linear both paused}
.l-glow{animation:near-move 1s linear both paused,lit 1s linear both paused}
.l-dusk{animation:dusk 1s linear both paused}
.prog-fill{animation:fill 1s linear both paused}
.prog-lamp{animation:lamp-run 1s linear both paused}
.l-far,.l-lit,.l-near,.l-glow,.l-dusk,.prog-fill,.prog-lamp{animation-delay:calc(var(--sp,0) * -1s)}
@media (prefers-color-scheme:dark){
  .l-lit{animation:far-move 1s linear both paused;animation-delay:calc(var(--sp,0) * -1s)}
  .l-glow{animation:near-move 1s linear both paused;animation-delay:calc(var(--sp,0) * -1s)}
}
@supports (animation-timeline:scroll()){
  .l-far,.l-lit,.l-near,.l-glow,.l-dusk,.prog-fill,.prog-lamp{animation-duration:auto;animation-delay:0s;animation-play-state:running;animation-timeline:scroll(root block)}
}

/* ---------- Đầu trang ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:50;background:color-mix(in srgb,var(--surface) 88%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:3px solid var(--outline)}
.top .wrap{display:flex;align-items:center;gap:14px;min-height:62px}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:800 1.45rem/1 var(--display);letter-spacing:.03em;text-transform:uppercase}
.brand img{width:38px;height:38px;border-radius:10px;border:2px solid var(--outline)}
.nav{margin-left:auto}
.nav ul{display:flex;gap:2px;list-style:none;margin:0;padding:0;flex-wrap:wrap}
.nav a{display:block;padding:8px 11px;border-radius:10px;text-decoration:none;color:var(--ink);font-weight:600;font-size:.92rem}
.nav a:hover{background:var(--surface2)}
.nav a[aria-current=page]{background:var(--plate);color:#fff}
.menu-btn{display:none;margin-left:auto;border:3px solid var(--outline);background:var(--surface);color:var(--ink);border-radius:12px;width:46px;height:44px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.menu-btn span,.menu-btn span::before,.menu-btn span::after{display:block;width:20px;height:3px;background:var(--ink);border-radius:2px;position:relative;content:""}
.menu-btn span::before{position:absolute;top:-7px}.menu-btn span::after{position:absolute;top:7px}
.prog{position:absolute;left:0;right:0;bottom:-7px;height:4px;pointer-events:none}
.prog-fill{position:absolute;inset:0;background:var(--lamp);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px var(--lamp)}
.prog-lamp{position:absolute;left:0;top:-7px;width:18px;height:18px;border-radius:50%;background:var(--lamp);border:3px solid var(--outline);box-shadow:0 0 14px 4px color-mix(in srgb,var(--lamp) 70%,transparent)}
@media (max-width:900px){
  .js .menu-btn{display:flex}
  .js .nav{position:absolute;left:0;right:0;top:100%;margin:0;background:var(--surface);border-bottom:3px solid var(--outline);padding:8px 16px 14px;display:none}
  .js .nav.open{display:block}
  .js .nav ul{flex-direction:column}
  .js .nav a{padding:13px 12px;font-size:1.02rem}
  .nav ul{justify-content:flex-end}
}

/* ---------- Thành phần chung ---------- */
.plate{display:inline-block;background:var(--plate);color:#fff;border:3px solid #fff;outline:3px solid var(--outline);border-radius:6px;padding:3px 12px 2px;font:800 1.05rem/1.25 var(--display);letter-spacing:.08em;text-transform:uppercase;margin:3px}
.sign{display:inline-block;background:var(--sign);color:var(--sign-ink);border:4px solid var(--outline);border-radius:10px;padding:10px 22px 8px;box-shadow:6px 6px 0 var(--shadow);position:relative}
.sign h2{font:800 clamp(2.1rem,6.4vw,4.2rem)/.98 var(--display);text-transform:uppercase;letter-spacing:.01em}
.sign::before,.sign::after{content:"";position:absolute;top:50%;width:9px;height:9px;border-radius:50%;background:var(--outline);transform:translateY(-50%)}
.sign::before{left:7px}.sign::after{right:7px}
.awning{height:34px;background:repeating-linear-gradient(90deg,var(--aw-a) 0 34px,var(--aw-b) 34px 68px);border-top:4px solid var(--outline);
  -webkit-mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 17px) no-repeat,radial-gradient(circle at 17px 0,#000 16.5px,transparent 17px) 0 100%/34px 17px repeat-x;
  mask:linear-gradient(#000,#000) 0 0/100% calc(100% - 17px) no-repeat,radial-gradient(circle at 17px 0,#000 16.5px,transparent 17px) 0 100%/34px 17px repeat-x}
.awning.blue{--aw-a:var(--aw-c)}.awning.green{--aw-a:var(--plate2)}
.btn{display:inline-flex;align-items:center;gap:10px;min-height:52px;padding:10px 20px;border:3px solid var(--outline);border-radius:14px;background:var(--surface);color:var(--ink);box-shadow:4px 4px 0 var(--shadow);font:700 1rem/1.2 var(--body);text-decoration:none}
.btn.soon{cursor:default;opacity:1}
.btn small{display:block;font-weight:600;font-size:.7rem;letter-spacing:.07em;text-transform:uppercase;color:var(--ink2)}
.btn b{display:block;font-size:1.05rem}
.btn svg{width:26px;height:26px;flex:none}
.tag{display:inline-block;align-self:flex-start;background:var(--lamp);color:#1F1606;border:2px solid var(--outline);border-radius:999px;padding:1px 10px;font:700 .72rem/1.6 var(--body);letter-spacing:.06em;text-transform:uppercase}
.bubble{position:relative;background:#fff;color:#1C2026;border:3px solid var(--outline);border-radius:20px;padding:12px 16px;font-weight:600;font-size:1rem;line-height:1.45;box-shadow:4px 4px 0 var(--shadow);max-width:340px}
.bubble::after{content:"";position:absolute;width:20px;height:20px;background:#fff;border-right:3px solid var(--outline);border-bottom:3px solid var(--outline);bottom:-12px;left:34px;transform:rotate(45deg);border-radius:0 0 6px 0}
.bubble.tr::after{left:auto;right:34px}
.bubble.tl-side::after{bottom:auto;top:30px;left:-12px;transform:rotate(135deg)}
.bubble.tr-side::after{bottom:auto;top:30px;left:auto;right:-12px;transform:rotate(-45deg)}
.bubble b{display:block;font:800 1.15rem/1.1 var(--display);letter-spacing:.04em;text-transform:uppercase;color:var(--plate);margin-bottom:3px}
.panel{background:var(--surface);border:4px solid var(--outline);border-radius:var(--r);box-shadow:8px 8px 0 var(--shadow)}
.cast{position:absolute;bottom:0;width:auto;max-width:none;pointer-events:none;user-select:none;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12))}
section{position:relative}
.sec-head{display:flex;flex-direction:column;align-items:flex-start;gap:0}
.sec-head .awning{width:calc(100% + 20px);margin:0 -10px;max-width:520px}
.sec-head .sign{margin-top:-4px;margin-left:10px}
.lead{font-size:1.1rem;color:var(--ink);max-width:56ch}
.pill-lead{background:var(--surface);border:3px solid var(--outline);border-radius:14px;padding:12px 16px;display:inline-block;max-width:60ch}

/* ---------- Hero ---------- */
.hero{min-height:100svh;padding:96px 0 calc(var(--ground) + 14px);display:flex;align-items:flex-end}
.hero .wrap{width:min(1320px,100% - 48px)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(24px,3vw,56px);align-items:end;width:100%}
.hero-copy{min-width:0}
.hero .eyebrow{margin:0 0 14px}
.hero h1{font:800 clamp(2.4rem,calc(1.1rem + 3.4vw),4.7rem)/1.04 var(--display);text-transform:uppercase;letter-spacing:.005em;margin:0 0 18px;color:var(--ink);text-shadow:2px 2px 0 var(--surface)}
.hero h1 em{font-size:.94em;font-style:normal;background:var(--lamp);color:#1F1606;padding:0 .12em;border:4px solid var(--outline);border-radius:10px;display:inline-block;transform:rotate(-1.5deg);text-shadow:none;box-shadow:5px 5px 0 var(--shadow)}
.hero .lead{background:color-mix(in srgb,var(--surface) 82%,transparent);border-radius:14px;padding:10px 14px;margin-bottom:20px}
.badges{display:flex;flex-wrap:wrap;gap:12px;margin:0 0 14px;padding:0;list-style:none}
.hero .note{font-weight:600;margin:0;color:var(--ink)}
.hero .note span{background:var(--surface);border:2px solid var(--outline);border-radius:10px;padding:3px 10px;display:inline-block}
.hint{margin-top:22px;font-size:.85rem;font-weight:600;color:var(--ink);display:inline-flex;align-items:center;gap:8px;background:color-mix(in srgb,var(--surface) 86%,transparent);border-radius:999px;padding:3px 14px 3px 4px}
.hint i{width:22px;height:34px;border:3px solid var(--outline);border-radius:12px;position:relative;background:var(--surface)}
.hint i::after{content:"";position:absolute;left:50%;top:6px;width:4px;height:7px;margin-left:-2px;border-radius:2px;background:var(--ink);animation:wheel 1.6s ease-in-out infinite}
@keyframes wheel{0%{transform:translateY(0);opacity:1}70%{transform:translateY(9px);opacity:0}100%{opacity:0}}
.phone{position:relative;border:6px solid var(--outline);border-radius:38px;overflow:hidden;background:#1F4E95;box-shadow:10px 10px 0 var(--shadow);aspect-ratio:460/946;isolation:isolate}
.phone img{width:100%;height:100%;object-fit:cover}
/* Sân khấu hero: mọi kích thước tính từ bề rộng điện thoại --pw, nên các phần luôn giữ đúng tỉ lệ và không đè lên màn hình.
   Bố cục theo trục ngang (điện thoại ở giữa): bác Tư và Mai bên trái, cô Ba bên phải; ba nhân vật chỉ chạm mép điện thoại. */
.stage{position:relative;min-width:0;container-type:inline-size;display:flex;justify-content:center;align-items:flex-end}
.comp{--pw:min(39cqw,calc((100svh - 230px) * .486),340px);position:relative;width:var(--pw);flex:none;margin:0 calc(var(--pw) * .67) 14px calc(var(--pw) * .85)}
.comp .phone{width:100%;z-index:2}
.crew{display:contents}
.mate{position:absolute;bottom:-14px;z-index:3}
.mate .cast{position:static;display:block;height:calc(var(--pw) * 1.15);width:auto}
.w-tu{left:calc(var(--pw) * -.85)}
.w-mai{left:calc(var(--pw) * -.35);z-index:4}
.w-mai .cast{height:calc(var(--pw) * 1.0)}
.w-ba{left:calc(var(--pw) * .92)}
.w-ba .cast{height:calc(var(--pw) * 1.05);scale:-1 1}
.crew .bubble{position:absolute;z-index:5;width:max-content;font-size:clamp(.85rem,calc(var(--pw) * .0042 + .1rem),1rem);padding:9px 13px}
.crew .b1{left:calc(var(--pw) * -.85);bottom:calc(var(--pw) * 1.15 + 18px);max-width:calc(var(--pw) * .8)}
.crew .b2{right:calc(var(--pw) * -.67);bottom:calc(var(--pw) * 1.05 + 18px);max-width:calc(var(--pw) * .66)}
@media (min-width:1700px){
  .hero .wrap{width:min(1560px,100% - 96px)}
  .hero h1{font-size:clamp(4.2rem,calc(1.1rem + 3.4vw),5.3rem)}
  .comp{--pw:min(39cqw,calc((100svh - 230px) * .486),390px)}
}

/* Vào trang: chuyển động theo thời gian (phần đầu trang đã nằm trong khung nhìn nên không dùng timeline cuộn) */
.in-load{animation:rv-up .85s cubic-bezier(.2,.8,.2,1) both;animation-delay:var(--ld,0s)}
.in-load.pop{animation-name:rv-pop;animation-duration:.55s;animation-timing-function:cubic-bezier(.3,1.5,.5,1);transform-origin:20% 100%}
.in-load.walk-l{animation-name:rv-l;animation-duration:1s}
.in-load.walk-r{animation-name:rv-r;animation-duration:1s}
.in-load.pop-up{animation-name:rv-up}

/* ---------- Đi dạo bảy căn nhà (cuộn dọc kéo ngang) ---------- */
.walk{padding:0}
.walk-pin{position:sticky;top:0;height:100svh;min-height:560px;display:flex;flex-direction:column;overflow:hidden;padding-top:78px}
.walk-head{padding:8px 0 10px}
.walk-head p{margin:10px 0 0;max-width:46ch}
.walk-head .pill-lead{margin-top:12px}
.walk-stage{flex:1;position:relative;display:flex;align-items:flex-end;min-height:0}
.walk-track{display:flex;gap:26px;align-items:flex-end;padding:8px 6vw calc(var(--ground) + 6px) 40vw;will-change:transform}
.house{flex:none;width:clamp(258px,26vw,330px);background:var(--surface);border:4px solid var(--outline);border-radius:14px 14px 4px 4px;box-shadow:8px 8px 0 var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.house .awning{border-top:0;margin-bottom:-2px}
.house .wall{padding:14px 16px 16px;background:var(--wall);color:var(--wall-ink);flex:1}
.house:nth-child(4n+1){--wall:var(--wall1)}.house:nth-child(4n+2){--wall:var(--wall2)}.house:nth-child(4n+3){--wall:var(--wall3)}.house:nth-child(4n){--wall:var(--wall4)}
.house:nth-child(2n) .awning{--aw-a:var(--aw-c)}.house:nth-child(3n) .awning{--aw-a:var(--plate2)}
.house h3{font:800 1.55rem/1 var(--display);text-transform:uppercase;letter-spacing:.015em;margin:8px 0 8px}
.house p{margin:0;font-size:.97rem;line-height:1.5}
.house .wk{display:block;margin-top:10px;font-weight:700;font-size:.82rem;letter-spacing:.04em;text-transform:uppercase;opacity:.82}
.house.small{width:clamp(200px,20vw,250px)}
.house .gate{display:flex;gap:6px;margin-top:12px}.house .gate i{flex:1;height:34px;border:3px solid var(--outline);border-radius:4px 4px 0 0;background:var(--sign)}
.walker{position:absolute;left:3vw;bottom:calc(var(--ground) - 16px);z-index:6;width:min(32vw,170px,calc(var(--sh,600px) * .4));pointer-events:none}
.walker img{width:100%;height:auto;transform-origin:50% 100%;animation:bob 1s ease-in-out infinite paused;animation-delay:calc(var(--sp,0) * -60s)}
@keyframes bob{0%,100%{transform:translate3d(0,0,0) rotate(-2.5deg)}50%{transform:translate3d(0,-9px,0) rotate(2.5deg)}}
@supports (animation-timeline:scroll()){.walker img{animation-duration:auto;animation-iteration-count:60;animation-play-state:running;animation-delay:0s;animation-timeline:scroll(root block)}}
/* Bóng thoại nằm trong "làn" phía trên căn nhà cao nhất (site.js đặt --bb), nên không bao giờ đè lên nhà hay tiêu đề */
.walker .bubble{position:absolute;left:88%;bottom:var(--bb,330px);width:min(62vw,300px);max-width:none;font-size:.95rem}
.walker .bubble::after{left:calc(12% + 4px)}
.walker .bubble.talk{animation:rv-pop .45s cubic-bezier(.3,1.5,.5,1) both;transform-origin:10% 100%}
.weeks{position:absolute;z-index:4;left:0;right:0;bottom:calc(var(--ground) + 4px);display:none}
.mapbar{display:flex;gap:4px;align-items:center;margin:0 0 12px;flex-wrap:nowrap}
.mapbar span{font-size:.8rem;font-weight:700;margin-right:6px;white-space:nowrap}
.mapbar i{flex:1;height:14px;border:2px solid var(--outline);border-radius:3px;background:var(--surface);position:relative;overflow:hidden}
.mapbar i::after{content:"";position:absolute;inset:0;background:var(--lamp);opacity:0;transition:opacity .25s}
.mapbar i.on::after{opacity:1}
.walk.t1 .walk-head .pill-lead{display:none}
.walk.t2 .house p{font-size:.86rem;line-height:1.4}
.walk.t2 .house h3{font-size:1.3rem;margin:5px 0}
.walk.t2 .house .wall{padding:10px 14px 12px}
.walk.t2 .house .wk{display:none}
.walk-cap{position:relative;z-index:7;padding:0 0 10px}
.walk-cap .mapbar{background:var(--surface);border:3px solid var(--outline);border-radius:12px;padding:7px 10px;margin:0;box-shadow:4px 4px 0 var(--shadow)}

/* ---------- Cách học (ghim, đổi bước khi cuộn) ---------- */
.how{height:460svh}
.how-pin{position:sticky;top:0;height:100svh;min-height:560px;padding-top:78px;display:flex;flex-direction:column}
.how-head{padding:6px 0 0}
.chips{display:flex;gap:8px;list-style:none;padding:0;margin:14px 0 0;flex-wrap:wrap}
.chips li{margin:0}
.chip{display:flex;align-items:center;gap:8px;padding:6px 14px 6px 8px;border:3px solid var(--outline);border-radius:999px;background:var(--surface);font-weight:700;font-size:.9rem;cursor:pointer;color:var(--ink);font-family:var(--body);transition:background .2s,color .2s}
.chip b{display:grid;place-items:center;width:26px;height:26px;border-radius:50%;background:var(--plate);color:#fff;font:800 1rem/1 var(--display)}
.chip.on{background:var(--lamp);color:#1F1606}
.chip.on b{background:#1F1606;color:var(--lamp)}
.steps{flex:1;position:relative;display:grid;grid-template-rows:minmax(0,1fr);min-height:0;padding:16px 0 calc(var(--ground) + 8px)}
.step{grid-area:1/1;display:grid;grid-template-columns:1fr minmax(240px,auto) 1fr;grid-template-rows:minmax(0,1fr);align-items:end;gap:20px;will-change:transform,opacity;min-height:0;height:100%}
.step .say{position:relative;align-self:end;justify-self:end;height:100%;width:100%;display:flex;align-items:flex-end;justify-content:flex-end;padding-right:6px}
.step .say .bubble{position:absolute;right:8%;top:0;max-width:360px;font-size:1.02rem}
.step .say .cast{position:relative;height:62%;width:auto;margin-right:14%}
.step .say .bubble::after{left:auto;right:36px;bottom:-12px}
.step .say::after{content:"";position:absolute;left:6%;right:4%;bottom:0;height:15%;background:var(--ledge);border:4px solid var(--outline);border-bottom:0;border-radius:8px 8px 0 0;z-index:4;pointer-events:none}
.step .phone-wrap{height:100%;display:flex;align-items:flex-end;padding-bottom:10px}
.step .phone{height:100%}
.step .more{align-self:center;padding-bottom:6%;max-width:340px}
.step .more h3{display:inline-block;background:var(--sign);color:var(--sign-ink);border:3px solid var(--outline);border-radius:8px;box-shadow:4px 4px 0 var(--shadow);padding:8px 14px 5px;font:800 clamp(1.8rem,2.8vw,2.5rem)/1 var(--display);text-transform:uppercase;margin-bottom:12px}
.step .more p{background:var(--surface);border:3px solid var(--outline);border-radius:14px;padding:12px 14px}
.bar{height:8px;background:var(--surface);border:2px solid var(--outline);border-radius:6px;overflow:hidden;margin-top:12px}
.bar i{display:block;height:100%;background:var(--lamp);transform-origin:0 50%;transform:scaleX(0)}

/* ---------- Dành cho ai ---------- */
.who{padding:70px 0 40px}
.who .sec-head{margin-bottom:26px}
.trio{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin:0;padding:0;list-style:none}
.cp{background:var(--surface);border:4px solid var(--outline);border-radius:var(--r);box-shadow:8px 8px 0 var(--shadow);overflow:hidden;display:flex;flex-direction:column}
.cp .frame{--ledge-h:16%;--cast-h:72%;position:relative;aspect-ratio:4/3.5;background:var(--bg-img) center/cover;border-bottom:4px solid var(--outline);overflow:hidden}
.cp .frame .cast{height:var(--cast-h);left:50%;translate:-50% 0;bottom:calc(var(--ledge-h) - var(--cast-h) * .24)}
.cp .frame::after{content:"";position:absolute;left:0;right:0;bottom:0;height:var(--ledge-h);background:var(--ledge);border-top:4px solid var(--outline);z-index:3}
.cp .frame .bubble{position:absolute;top:10px;left:10px;right:10px;max-width:none;font-size:.9rem;padding:8px 12px;z-index:4;color:#1C2026}
.cp .txt{padding:16px 18px 20px}
.cp h3{font:800 1.8rem/1 var(--display);text-transform:uppercase;margin-bottom:6px}
.cp p{margin:0;color:var(--ink2)}
.nocode{margin-top:58px;display:grid;grid-template-columns:1fr 1.5fr 1fr;align-items:end;gap:10px;position:relative}
.nocode .big{background:var(--sign);color:var(--sign-ink);border:4px solid var(--outline);border-radius:14px;box-shadow:8px 8px 0 var(--shadow);padding:22px 24px;position:relative;z-index:2;text-align:center}
.nocode .big h3{font:800 clamp(2rem,4.6vw,3.4rem)/.98 var(--display);text-transform:uppercase;margin-bottom:10px}
.nocode .big h3 em{font-style:normal;background:var(--warn);color:#fff;padding:0 .18em;border-radius:6px}
.nocode .big p{margin:0 auto;max-width:48ch}
.nocode .fig{position:relative;height:300px}
.nocode .fig .cast{height:84%}
.nocode .fig::after{content:"";position:absolute;left:-4%;right:-4%;bottom:0;height:20.2%;background:var(--ledge);border:4px solid var(--outline);border-bottom:0;border-radius:8px 8px 0 0;z-index:2}
.nocode .fig .bubble{position:absolute;top:-32px;font-size:.95rem;max-width:210px;z-index:3}
.nocode .fig.l .cast{right:0}.nocode .fig.l .bubble{right:10%}
.nocode .fig.r .cast{left:0}.nocode .fig.r .bubble{left:6%}

/* ---------- Miễn phí và mở trọn khóa ---------- */
.free{padding:70px 0 50px}
.free .sec-head{margin-bottom:26px}
.shopwin{display:grid;grid-template-columns:1.1fr .9fr;gap:26px;align-items:stretch}
.lit-row{padding:22px 22px 24px;position:relative;overflow:hidden}
.lit-row h3,.lock-row h3{font:800 clamp(1.7rem,3.4vw,2.4rem)/1 var(--display);text-transform:uppercase;margin:6px 0 10px}
.windows{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin:18px 0 12px;padding:0;list-style:none}
.windows li{position:relative;aspect-ratio:1;border:3px solid var(--outline);border-radius:8px 8px 3px 3px;background:var(--surface2);overflow:hidden;font:800 1rem/1 var(--display);display:grid;place-items:end center;padding-bottom:5px;color:var(--ink2)}
.windows li::before{content:"";position:absolute;inset:0;background:var(--lamp);opacity:0;transform:scale(.6);box-shadow:inset 0 0 14px rgba(255,160,40,.6)}
.windows li span{position:relative;z-index:1}
.windows li.open::before{opacity:1;transform:none}
.windows li.open{color:#1F1606}
.windows li.shut{background:repeating-linear-gradient(180deg,var(--sidewalk) 0 5px,var(--sidewalk2) 5px 7px);color:var(--ink2)}
.windows li.shut span{background:var(--surface);padding:0 4px;border-radius:3px}
@keyframes win-on{from{opacity:0;transform:scale(.55)}to{opacity:1;transform:none}}
.legend{display:flex;gap:16px;flex-wrap:wrap;font-weight:600;font-size:.9rem;margin:0;color:var(--ink2)}
.legend i{display:inline-block;width:16px;height:16px;border:2px solid var(--outline);border-radius:4px;vertical-align:-3px;margin-right:6px;background:var(--lamp)}
.legend i.s{background:var(--sidewalk)}
.lock-row{padding:22px 22px 24px;display:flex;flex-direction:column;gap:6px;position:relative}
.lock-row ul{margin:6px 0 0;padding-left:1.15em}
.lock-row li{margin:.35em 0}
.free-cast{position:relative;height:210px;margin-top:6px;border-bottom:4px solid var(--outline)}
.free-cast .cast{height:100%}
.free-cast .c1{right:6%}
.free-cast .bubble{position:absolute;left:0;top:6px;max-width:min(250px,62%)}

/* ---------- Hỏi đáp và hỗ trợ ---------- */
.faq{padding:70px 0 60px}
.faq .sec-head{margin-bottom:26px}
.faq-grid{display:grid;grid-template-columns:1.25fr .75fr;gap:30px;align-items:start}
.qa{display:flex;flex-direction:column;gap:12px}
.qa details{background:var(--surface);border:3px solid var(--outline);border-radius:14px;box-shadow:5px 5px 0 var(--shadow);overflow:hidden}
.qa summary{list-style:none;cursor:pointer;padding:14px 52px 14px 18px;font-weight:700;position:relative;min-height:54px;display:flex;align-items:center}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{content:"+";position:absolute;right:14px;top:50%;margin-top:-16px;width:32px;height:32px;border-radius:50%;background:var(--plate);color:#fff;display:grid;place-items:center;font:800 1.4rem/1 var(--display)}
.qa details[open] summary::after{content:"–";background:var(--lamp);color:#1F1606}
.qa .a{padding:0 18px 16px;color:var(--ink)}
.qa .a p:last-child{margin:0}
.contact{position:relative;padding:20px 20px 0;overflow:hidden;position:sticky;top:90px}
.contact h3{font:800 1.9rem/1 var(--display);text-transform:uppercase;margin-bottom:8px}
.contact .mail{display:block;font-weight:700;font-size:1.05rem;margin:10px 0;word-break:break-all}
.contact ul{padding-left:1.15em;margin:8px 0 12px;font-size:.95rem}
.contact .cast{position:relative;height:190px;margin:4px 0 0 auto}
.contact .links{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 12px}

/* ---------- Kết: cả phố vẫy chào ---------- */
.finale{height:150svh}
.finale-pin{position:sticky;top:0;height:100svh;min-height:540px;display:flex;flex-direction:column;justify-content:flex-start;padding-top:86px}
.finale-in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.finale-in .sign h2{font-size:clamp(2rem,6vw,4rem)}
.finale-in .badges{justify-content:center;margin:4px 0 0}
.crowd{position:absolute;left:0;right:0;bottom:calc(var(--ground) - 14px);display:flex;justify-content:center;align-items:flex-end;pointer-events:none;padding:0 8px}
.crowd .row{position:relative;display:flex;align-items:flex-end;justify-content:center;max-width:100%}
.crowd img{height:clamp(150px,36svh,340px);width:auto;margin:0 -8px;filter:drop-shadow(0 6px 0 rgba(0,0,0,.12))}
/* quầy chung phía trước cả hàng: ai cũng đứng sau quầy, không ai lộ chân hay bị cắt ngang ống quần */
.crowd .row::after{content:"";position:absolute;left:-2%;right:-2%;bottom:0;height:24%;background:var(--ledge);border:4px solid var(--outline);border-bottom:0;border-radius:10px 10px 0 0;z-index:3}
.crowd .bubble{position:absolute;right:calc(50% - 150px);bottom:calc(clamp(150px,36svh,340px) + 6px);max-width:230px;font-size:.98rem}

@media (min-width:1000px) and (max-height:830px){
  .crowd img{height:clamp(150px,34svh,340px)}
  .crowd .bubble{right:auto;left:calc(50% + clamp(150px,34svh,340px) * 1.35 - 24px);bottom:calc(clamp(150px,34svh,340px) * .35);max-width:min(200px,calc(50vw - clamp(150px,34svh,340px) * 1.35 + 8px))}
  .crowd .bubble::after{left:auto;right:auto;left:-12px;top:auto;bottom:22px;transform:rotate(135deg);border-right:0;border-bottom:0;border-left:3px solid var(--outline);border-top:3px solid var(--outline);border-radius:6px 0 0 0}
}

/* ---------- Chân trang (phố lên đèn) ---------- */
.foot{position:relative;background:#0E1426;color:#E8ECF4;border-top:5px solid var(--outline);padding:0 0 28px}
.foot .awning{border-top:0;margin-top:-4px;transform:translateY(-100%);position:absolute;left:0;right:0;top:0;--aw-b:#E9E4D6}
.foot-in{padding-top:54px;display:grid;grid-template-columns:1.3fr 1fr 1fr;gap:34px}
.foot a{color:#FFD27A}
.foot h2{font:800 1.45rem/1 var(--display);text-transform:uppercase;letter-spacing:.06em;margin:0 0 12px;color:#fff}
.foot ul{list-style:none;margin:0;padding:0}
.foot li{margin:7px 0}
.foot .brand{color:#fff;font-size:1.9rem}
.foot .brand img{width:52px;height:52px;border-color:#fff}
.foot p{color:#C4CCDB;margin:12px 0}
.foot .badges .btn{background:#1B2440;color:#fff;box-shadow:4px 4px 0 #000;border-color:#000}
.foot .badges .btn small{color:#AEB8CE}
.foot .legal{grid-column:1/-1;border-top:2px dashed #35405E;padding-top:18px;margin-top:6px;font-size:.88rem;color:#AEB8CE;display:flex;flex-wrap:wrap;gap:6px 24px;justify-content:space-between}
.foot .legal p{margin:0;color:inherit}

/* ---------- Trang tài liệu (privacy, terms, support, delete-account) ---------- */
.page{padding:110px 0 80px}
.page .sec-head{margin-bottom:22px}
.page .sign h1{font:800 clamp(1.9rem,5.2vw,3.3rem)/1 var(--display);text-transform:uppercase}
.doc{max-width:780px;padding:26px clamp(18px,4vw,40px) 34px;font-size:1.02rem;line-height:1.7}
.doc h2{font-size:1.35rem;line-height:1.3;margin:2em 0 .5em;padding-top:.7em;border-top:2px dashed var(--line);font-family:var(--body);font-weight:700}
.doc h3{font-size:1.08rem;margin:1.4em 0 .4em;font-family:var(--body);font-weight:700}
.doc ul,.doc ol{padding-left:1.3em;margin:0 0 .9em}
.doc li{margin:.3em 0}
.doc a{overflow-wrap:anywhere}
.doc .lead{color:var(--ink2);font-size:1.07rem}
.doc .box{background:var(--surface2);border:2px solid var(--outline);border-radius:12px;padding:14px 16px;margin:16px 0}
.doc .box p:last-child,.doc .box ul:last-child{margin-bottom:0}
.doc .banner{background:var(--warn-bg);color:var(--warn-fg);border:3px solid var(--warn-line);border-radius:12px;padding:14px 16px;margin:0 0 22px;font-weight:700}
.doc .law{background:var(--law-bg);color:var(--law-fg);border-radius:4px;padding:0 .3em;font-weight:600;font-size:.92em}
.doc .small{font-size:.92rem;color:var(--ink2)}
.doc code{font-size:.9em;background:var(--surface2);padding:1px 5px;border-radius:5px;word-break:break-all}
.doc-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:26px;padding-top:20px;border-top:2px dashed var(--line)}
.doc-links a{display:inline-block;padding:8px 14px;border:3px solid var(--outline);border-radius:12px;background:var(--surface);color:var(--ink);font-weight:600;text-decoration:none;font-size:.95rem}
.doc-links a:hover{background:var(--lamp);color:#1F1606}

/* ---------- Hiện dần: gốc (view timeline) + dự phòng JS ---------- */
@keyframes rv-up{from{opacity:0;transform:translate3d(0,46px,0)}to{opacity:1;transform:none}}
@keyframes rv-l{from{opacity:0;transform:translate3d(-90px,0,0)}to{opacity:1;transform:none}}
@keyframes rv-r{from{opacity:0;transform:translate3d(90px,0,0)}to{opacity:1;transform:none}}
@keyframes rv-pop{0%{opacity:0;transform:scale(.4) rotate(-6deg)}70%{opacity:1;transform:scale(1.07) rotate(1deg)}100%{opacity:1;transform:none}}
@keyframes rv-walk{from{opacity:0;transform:translate3d(-30vw,0,0)}to{opacity:1;transform:none}}
@keyframes rv-rwalk{from{opacity:0;transform:translate3d(30vw,0,0)}to{opacity:1;transform:none}}
.rv-up{--k:rv-up}.rv-l{--k:rv-l}.rv-r{--k:rv-r}.rv-pop{--k:rv-pop;transform-origin:20% 100%}
.rv-walk{--k:rv-walk}.rv-rwalk{--k:rv-rwalk}
.rv-up,.rv-l,.rv-r,.rv-pop,.rv-walk,.rv-rwalk{will-change:transform,opacity}
@supports (animation-timeline:view()){
  .rv-up,.rv-l,.rv-r,.rv-pop,.rv-walk,.rv-rwalk{animation:var(--k) linear both;animation-timeline:view();animation-range:entry calc(0% + var(--d,0%)) entry calc(62% + var(--d,0%))}
  .rv-pop{animation-timing-function:ease-out;animation-range:entry calc(20% + var(--d,0%)) entry calc(70% + var(--d,0%))}
  .windows li.open::before{animation:win-on linear both;animation-timeline:view();animation-range:entry calc(25% + var(--i) * 2.4%) entry calc(60% + var(--i) * 2.4%);opacity:1;transform:none}
}
@supports not (animation-timeline:view()){
  html.js .rv-up,html.js .rv-l,html.js .rv-r,html.js .rv-walk,html.js .rv-rwalk{opacity:0;transition:opacity .7s ease,transform .7s cubic-bezier(.2,.8,.2,1);transition-delay:calc(var(--n,0) * 90ms)}
  html.js .rv-up{transform:translate3d(0,46px,0)}
  html.js .rv-l,html.js .rv-walk{transform:translate3d(-60px,0,0)}
  html.js .rv-r,html.js .rv-rwalk{transform:translate3d(60px,0,0)}
  html.js .rv-pop{opacity:0;transform:scale(.4);transition:opacity .35s ease,transform .5s cubic-bezier(.3,1.6,.5,1);transition-delay:calc(.25s + var(--n,0) * 90ms)}
  html.js .in.rv-up,html.js .in.rv-l,html.js .in.rv-r,html.js .in.rv-pop,html.js .in.rv-walk,html.js .in.rv-rwalk{opacity:1;transform:none}
  html.js .windows li.open::before{opacity:0;transform:scale(.55);transition:opacity .4s,transform .4s;transition-delay:calc(var(--i) * 70ms)}
  html.js .in .windows li.open::before,html.js .windows.in li.open::before{opacity:1;transform:none}
}

/* ---------- Máy nhỏ ---------- */
.house{will-change:transform,opacity}
@media (max-width:900px){
  :root{--ground:48px;--farH:clamp(130px,20svh,220px);--nearH:clamp(120px,18svh,200px)}
  .hero{padding-top:84px;align-items:flex-start}
  .hero-grid{grid-template-columns:1fr;gap:0}
  .hero h1{font-size:clamp(2.1rem,9.6vw,3.4rem);text-shadow:1px 1px 0 var(--surface)}
  .stage{margin-top:26px}
  .hero .eyebrow{margin-bottom:8px}.plate{font-size:.92rem}
  .hero h1{margin-bottom:12px}
  .hero .lead{font-size:.98rem;padding:8px 12px;margin-bottom:12px}
  .badges{gap:8px;margin-bottom:10px}
  .hero .note{font-size:.9rem}
  .hint{display:none}
  .comp{--pw:min(39cqw,300px)}
  .walk-pin{padding-top:70px}
  .house{width:min(74vw,320px)}
  .house.small{width:min(56vw,240px)}
  .walk-track{padding-left:30vw;gap:18px}
  .walker{width:min(28vw,128px);left:2vw}
  .walker .bubble{left:70%;width:min(70vw,300px);font-size:.88rem}
  .how{height:430svh}
  .how-pin{padding-top:68px}
  .chips{gap:6px;margin-top:8px;flex-wrap:nowrap;overflow:hidden}
  .chip{padding:4px 10px 4px 5px;font-size:.78rem}
  .chip span{display:none}
  .chip.on span{display:inline}
  .chip b{width:22px;height:22px;font-size:.9rem}
  .step{position:relative;grid-template-columns:1fr;grid-template-rows:auto auto 1fr;gap:8px;align-items:start;padding-bottom:0}
  .step .more{order:-1;grid-row:1;padding-bottom:0;max-width:none;align-self:start}
  .step .more h3{font-size:1.7rem;margin-bottom:0;padding:5px 12px 3px}
  .step .more p{display:none}
  .step .say{display:contents}
  .step .say .bubble{grid-row:2;position:relative;right:auto;top:auto;max-width:none;font-size:.88rem;padding:9px 12px;margin:0}
  .step .say .bubble::after{display:none}
  .step .say::after{left:-14px;right:auto;bottom:0;width:calc(min(31svh,270px) * .72 + 12px);height:calc(min(31svh,270px) * .24)}
  .step .say .bubble b{font-size:1rem}
  .step .say .cast{position:absolute;left:-14px;bottom:0;height:min(31svh,270px);margin:0;z-index:3}
  .step .phone-wrap{position:absolute;left:0;right:0;bottom:0;top:auto;justify-content:flex-end;padding:0 4% 0 0;pointer-events:none;height:min(50svh,420px)}
  .step .phone{max-height:100%}
  .steps{padding-bottom:calc(var(--ground) + 4px)}
  .trio{grid-template-columns:1fr;gap:22px}
  .cp .frame{aspect-ratio:4/3.1}
  .cp .frame{--cast-h:70%}
  .nocode{grid-template-columns:1fr 1fr;margin-top:44px}
  .nocode .big{grid-column:1/-1;order:-1}
  .nocode .fig{height:auto;display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
  .nocode .fig .bubble{position:relative;top:auto;left:auto;right:auto;max-width:100%;margin:0 0 14px;font-size:.9rem;padding:8px 12px}
  .nocode .fig .cast{position:relative;left:auto;right:auto;height:190px}
  .nocode .fig::after{height:46px;left:-2%;right:-2%}
  .nocode .fig.l .bubble::after,.nocode .fig.r .bubble::after{left:50%;right:auto;margin-left:-10px}
  .shopwin{grid-template-columns:1fr}
  .faq-grid{grid-template-columns:1fr}
  .contact{position:relative;top:auto}
  .foot-in{grid-template-columns:1fr;gap:24px}
  .free-cast{height:170px}
  .finale{height:135svh}
  .crowd img{height:clamp(120px,22svh,200px);margin:0 -13px}
  .crowd .bubble{right:6%;bottom:calc(clamp(120px,22svh,200px) + 4px);max-width:190px;font-size:.88rem}
}
@media (max-width:480px){
  .wrap{width:min(1180px,100% - 28px)}
  .sign{padding:8px 18px 6px}
  .brand{font-size:1.2rem}
  .windows{gap:5px}
  .windows li{font-size:.82rem}
  .btn{min-height:50px;padding:8px 14px}
  .step .more h3{font-size:1.7rem}
  .step .more p{font-size:.86rem}
}

/* Hero trên điện thoại (< 600px): chữ, rồi điện thoại, rồi các nhân vật xếp hàng bên dưới; không có phần nào đè lên phần nào */
@media (max-width:599px){
  .hero .wrap{width:min(1320px,100% - 32px)}
  .comp{--pw:min(60cqw,236px);--ch:min(38cqw,160px);width:100%;margin:0;display:flex;flex-direction:column;align-items:center}
  .comp .phone{width:var(--pw);border-width:5px;border-radius:32px;box-shadow:7px 7px 0 var(--shadow);margin-right:7px}
  .crew{display:grid;grid-template-columns:minmax(0,1fr) auto auto auto minmax(0,1fr);align-items:end;width:100%;margin-top:20px;row-gap:16px}
  .crew .bubble{position:relative;left:auto;right:auto;bottom:auto;grid-column:1/-1;grid-row:1;align-self:end;width:auto;font-size:.86rem;padding:8px 12px;box-shadow:3px 3px 0 var(--shadow)}
  .crew .b1{justify-self:start;max-width:52%}
  .crew .b2{justify-self:end;max-width:42%}
  .crew .bubble::after{width:16px;height:16px;bottom:-10px}
  .crew .b1::after{left:30px}
  .crew .b2::after{right:46px}
  .mate{position:relative;left:auto;bottom:auto;grid-row:2}
  .mate .cast{height:var(--ch)}
  .w-tu{grid-column:2}
  .w-mai{grid-column:3;margin-left:-12px}
  .w-mai .cast{height:calc(var(--ch) * .88)}
  .w-ba{grid-column:4;margin-left:-6px}
  .w-ba .cast{height:calc(var(--ch) * .93)}
}
/* "Bạn học thế nào" trên điện thoại hoặc màn hình thấp: bỏ ghim, bốn bước xếp dọc như bốn thẻ.
   Mỗi thẻ từ trên xuống: tên bước, lời thoại đầy đủ, rồi nhân vật đứng sau quầy cạnh điện thoại. Không có phần nào đè lên phần nào. */
@media (max-width:700px),(max-height:620px){
  /* Điện thoại và màn hình thấp: "Bạn sẽ học gì" và lời kết không ghim nữa, xếp dọc theo thứ tự đọc */
  .walk{height:auto;padding:56px 0 30px}
  .walk-pin{position:static;height:auto;min-height:0;display:block;padding-top:0;overflow:visible}
  .walk-head{padding:0 0 14px}
  .walk-stage{display:block}
  .walk-cap{display:none}
  .walker{position:relative;left:auto;bottom:auto;width:auto;margin:0 0 20px;display:flex;flex-direction:row-reverse;justify-content:flex-end;align-items:flex-end;gap:14px;z-index:auto}
  .walker img{width:clamp(78px,24vw,112px);flex:none;animation:none}
  .walker .bubble{position:relative;left:auto;bottom:auto;width:auto;max-width:none;flex:1;margin:0 0 56px;font-size:.92rem}
  .walker .bubble::after{left:-12px;bottom:auto;top:auto;bottom:18px;transform:rotate(135deg);border-right:0;border-bottom:0;border-left:3px solid var(--outline);border-top:3px solid var(--outline);border-radius:6px 0 0 0}
  .walk-track{display:flex;flex-direction:column;align-items:stretch;gap:20px;padding:0;transform:none}
  .house,.house.small{width:100%}
  .finale{height:auto}
  .finale-pin{position:static;height:auto;min-height:0;padding-bottom:calc(var(--ground) + 10px)}
  .crowd{position:relative;left:auto;right:auto;bottom:auto;margin-top:110px}
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference),(max-height:620px) and (prefers-reduced-motion:no-preference){

}
@media (max-width:700px),(max-height:620px){
  .how{height:auto;padding:56px 0 30px}
  .how-pin{position:static;height:auto;min-height:0;padding-top:0;display:block}
  .how-head{padding:0}
  .how .chips,.how .bar{display:none}
  .how .wrap[aria-hidden]{display:none}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-template-rows:none;gap:28px;padding:24px 0 0;min-height:0}
  .step{--sc:min(46vw,200px);position:relative;grid-area:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto;gap:12px 10px;align-items:end;height:auto;padding:14px 14px 0;overflow:hidden;background:var(--surface);border:4px solid var(--outline);border-radius:var(--r);box-shadow:6px 6px 0 var(--shadow)}
  .step .more{order:0;grid-column:1/-1;grid-row:1;padding:0;max-width:none;align-self:start}
  .step .more h3{font-size:1.75rem;margin:0}
  .step .more p{display:none}
  .step .say{display:contents}
  .step .say .bubble{grid-column:1/-1;grid-row:2;position:relative;right:auto;top:auto;max-width:none;margin:0 0 8px;font-size:.92rem;padding:10px 14px;box-shadow:3px 3px 0 var(--shadow)}
  .step .say .bubble::after{display:block;left:42px;right:auto;bottom:-12px}
  .step .say .cast{grid-column:1;grid-row:3;position:relative;left:auto;bottom:auto;height:var(--sc);width:auto;justify-self:center;align-self:end;margin:0;z-index:3}
  .step .say::after{position:relative;left:auto;right:auto;bottom:auto;width:auto;grid-column:1;grid-row:3;align-self:end;justify-self:stretch;height:calc(var(--sc) * .24);margin:0 -4px;border-width:4px 4px 0;z-index:4}
  .step .phone-wrap{grid-column:2;grid-row:3;position:relative;left:auto;right:auto;bottom:auto;top:auto;height:auto;padding:0;margin:0 0 -100px;justify-content:center;pointer-events:auto;align-self:end}
  .step .phone{height:auto;max-height:none;width:min(100%,230px)}
}
@media (max-width:700px) and (prefers-reduced-motion:no-preference),(max-height:620px) and (prefers-reduced-motion:no-preference){

}
@media (max-height:700px) and (max-width:900px){
  .how-pin{min-height:0}
  .step .phone-wrap{height:44svh}
}

/* ---------- Giảm chuyển động / không JS: bản tĩnh vẫn đẹp ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .l,.prog-fill,.prog-lamp,.walker img,.hint i::after,.in-load{animation:none!important}
  .l-dusk{opacity:.0}
  .rv-up,.rv-l,.rv-r,.rv-pop,.rv-walk,.rv-rwalk{animation:none!important;opacity:1!important;transform:none!important;transition:none!important}
  .windows li.open::before{animation:none!important;opacity:1!important;transform:none!important}
  .walk-pin{display:block;min-height:0;padding-bottom:30px}
  .walk-stage{display:block}
  .walk-track{overflow-x:auto;scroll-snap-type:x proximity;padding:10px 16px 40px;gap:18px;transform:none!important}
  .house{scroll-snap-align:start}
  .walker{position:relative;left:auto;bottom:auto;margin:0 0 -30px 16px}
  .walker .bubble{position:relative;left:auto;bottom:auto;display:block;margin:0 0 14px;width:auto;max-width:300px}
  .walker .bubble::after{left:30px}
  .walk-cap{display:none}
  .finale{height:auto}.finale-pin{position:static;height:auto;min-height:0;padding-bottom:calc(var(--ground) + 10px)}
  .crowd{position:relative;left:auto;right:auto;bottom:auto;margin-top:110px}
}
.noscroll-fx .l,.noscroll-fx .prog-fill,.noscroll-fx .prog-lamp{animation:none!important}
html:not(.js) .walk-cap{display:none}
html:not(.js) .walk-pin{display:block;min-height:0}
html:not(.js) .walk-stage{display:block}
html:not(.js) .walk-track{overflow-x:auto;padding:10px 16px 40px}
html:not(.js) .finale{height:auto}html:not(.js) .finale-pin{position:static;height:auto;min-height:0;padding-bottom:calc(var(--ground) + 10px)}
html:not(.js) .crowd{position:relative;left:auto;right:auto;bottom:auto;margin-top:110px}
/* Giảm chuyển động hoặc không JS: dùng chung bản xếp dọc của "Bạn học thế nào" */
@media (prefers-reduced-motion:reduce){
  .how{height:auto;padding:56px 0 30px}
  .how-pin{position:static;height:auto;min-height:0;padding-top:0;display:block}
  .how-head{padding:0}
  .how .chips,.how .bar{display:none}
  .how .wrap[aria-hidden]{display:none}
  .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-template-rows:none;gap:28px;padding:24px 0 0;min-height:0}
  .step{--sc:min(46vw,200px);position:relative;grid-area:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto;gap:12px 10px;align-items:end;height:auto;padding:14px 14px 0;overflow:hidden;background:var(--surface);border:4px solid var(--outline);border-radius:var(--r);box-shadow:6px 6px 0 var(--shadow)}
  .step .more{order:0;grid-column:1/-1;grid-row:1;padding:0;max-width:none;align-self:start}
  .step .more h3{font-size:1.75rem;margin:0}
  .step .more p{display:none}
  .step .say{display:contents}
  .step .say .bubble{grid-column:1/-1;grid-row:2;position:relative;right:auto;top:auto;max-width:none;margin:0 0 8px;font-size:.92rem;padding:10px 14px;box-shadow:3px 3px 0 var(--shadow)}
  .step .say .bubble::after{display:block;left:42px;right:auto;bottom:-12px}
  .step .say .cast{grid-column:1;grid-row:3;position:relative;left:auto;bottom:auto;height:var(--sc);width:auto;justify-self:center;align-self:end;margin:0;z-index:3}
  .step .say::after{position:relative;left:auto;right:auto;bottom:auto;width:auto;grid-column:1;grid-row:3;align-self:end;justify-self:stretch;height:calc(var(--sc) * .24);margin:0 -4px;border-width:4px 4px 0;z-index:4}
  .step .phone-wrap{grid-column:2;grid-row:3;position:relative;left:auto;right:auto;bottom:auto;top:auto;height:auto;padding:0;margin:0 0 -100px;justify-content:center;pointer-events:auto;align-self:end}
  .step .phone{height:auto;max-height:none;width:min(100%,230px)}
}
html:not(.js) .how{height:auto;padding:56px 0 30px}
html:not(.js) .how-pin{position:static;height:auto;min-height:0;padding-top:0;display:block}
html:not(.js) .how-head{padding:0}
html:not(.js) .how .chips, html:not(.js) .how .bar{display:none}
html:not(.js) .how .wrap[aria-hidden]{display:none}
html:not(.js) .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));grid-template-rows:none;gap:28px;padding:24px 0 0;min-height:0}
html:not(.js) .step{--sc:min(46vw,200px);position:relative;grid-area:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);grid-template-rows:auto auto auto;gap:12px 10px;align-items:end;height:auto;padding:14px 14px 0;overflow:hidden;background:var(--surface);border:4px solid var(--outline);border-radius:var(--r);box-shadow:6px 6px 0 var(--shadow)}
html:not(.js) .step .more{order:0;grid-column:1/-1;grid-row:1;padding:0;max-width:none;align-self:start}
html:not(.js) .step .more h3{font-size:1.75rem;margin:0}
html:not(.js) .step .more p{display:none}
html:not(.js) .step .say{display:contents}
html:not(.js) .step .say .bubble{grid-column:1/-1;grid-row:2;position:relative;right:auto;top:auto;max-width:none;margin:0 0 8px;font-size:.92rem;padding:10px 14px;box-shadow:3px 3px 0 var(--shadow)}
html:not(.js) .step .say .bubble::after{display:block;left:42px;right:auto;bottom:-12px}
html:not(.js) .step .say .cast{grid-column:1;grid-row:3;position:relative;left:auto;bottom:auto;height:var(--sc);width:auto;justify-self:center;align-self:end;margin:0;z-index:3}
html:not(.js) .step .say::after{position:relative;left:auto;right:auto;bottom:auto;width:auto;grid-column:1;grid-row:3;align-self:end;justify-self:stretch;height:calc(var(--sc) * .24);margin:0 -4px;border-width:4px 4px 0;z-index:4}
html:not(.js) .step .phone-wrap{grid-column:2;grid-row:3;position:relative;left:auto;right:auto;bottom:auto;top:auto;height:auto;padding:0;margin:0 0 -100px;justify-content:center;pointer-events:auto;align-self:end}
html:not(.js) .step .phone{height:auto;max-height:none;width:min(100%,230px)}

/* ---------- Điện thoại: hiệu ứng chạy theo cuộn bằng JS (chạy trên mọi Safari/Chrome) ----------
   Mai đi kèm dọc dãy phố (dải dính dưới thanh trên cùng), nhà đung đưa như bảng hiệu rồi hạ mái hiên,
   điện thoại trồi lên từ quầy, cả nhóm cuối trang đi vào từ hai bên. */
@media (max-width:700px) and (prefers-reduced-motion:no-preference),(max-height:620px) and (prefers-reduced-motion:no-preference){
  html.js .walker{position:sticky;top:70px;z-index:8;margin:0 -6px 18px;padding:8px 10px 8px 6px;background:var(--surface);border:3px solid var(--outline);border-radius:16px;box-shadow:4px 4px 0 var(--shadow);align-items:center;gap:10px;overflow:hidden}
  html.js .walker img{width:52px;height:auto;transform-origin:50% 100%;margin-bottom:-14px}
  html.js .walker .bubble{margin:0;box-shadow:none;border-width:2px;padding:8px 12px;font-size:.9rem;min-height:3.2em;display:flex;align-items:center}
  html.js .walker .bubble::after{display:none}
  html.js .walker .bubble.talk{animation:rv-pop .4s cubic-bezier(.3,1.5,.5,1) both;transform-origin:0 50%}
  html.js .walker .steps-dot{position:absolute;left:0;bottom:0;height:4px;background:var(--lamp);width:calc(var(--wp,0) * 100%);transition:width .15s linear}
  html.js .house{transform-origin:50% 0}
  html.js .house .awning{transform-origin:50% 0}
  html.js .step .phone-wrap,html.js .step .say .cast{will-change:transform}
  html.js .crowd img{will-change:transform,opacity;animation:none!important;transition:none!important}
}