/* ============================================================
   Sợi — demo #6 · L3a tinh chỉnh 1/2 (da mới, xương L2 giữ nguyên) · khổ chính 390
   Chữ: Commissioner variable (OFL, tự host, subset tiếng Việt) — MỘT họ, hai giọng theo trục FLAR:
        tít/số lớn FLAR 100 (nét loe, như đuôi sợi tóc vừa tỉa) · thân FLAR 0 (grotesk sạch). Số tabular.
        L4: bản in trên thẻ cũng dùng Commissioner ⇒ một họ chữ duy nhất.
   Màu nền: một họ ấm lấy từ trung vị L*a*b* vùng sáng ảnh S1/A4 (h ≈ 69°, b* > 0) — đo ở _xuong/demo-6/L3a/do/lab.py
        ngà #F5F0EC · đá ấm #E3DBD4 (thay xám lạnh #E3E6E6) · gỗ khói #25211E (thay #121313). 0 màu nhấn.
   Thang chữ 390: 12·13·15·17·20·26·34·40 (+56 đồng hồ lớn)  |  1440: 13·15·17·22·32·56·72
   Thang khoảng cách: 4·8·12·16·24·32·48·64·96·128·160
   ============================================================ */
@font-face{font-family:'Commissioner';font-style:normal;font-weight:100 900;font-display:swap;src:url(font/commissioner-latin-flar-normal.woff2) format('woff2-variations');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Commissioner';font-style:normal;font-weight:100 900;font-display:swap;src:url(font/commissioner-vietnamese-flar-normal.woff2) format('woff2-variations');unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}

:root{
  --iv:#F5F0EC; --st:#E3DBD4; --cg:var(--st); --ink:#231F1C; --mut:#615B56; --line:rgba(35,31,28,.14);
  --dk:#25211E; --dk2:#312C29; --dkink:#F2EDE9; --dkmut:#AEA7A2; --dkline:rgba(242,237,233,.14);
  --f0:13px; --fm:14px; --f1:16px; --f2:18px; --f3:22px; --f4:28px; --f5:38px; --f6:46px; --fx:64px; /* L5: cả hệ chữ lên một bậc (L4: 12·13·15·17·20·26·34·40) */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px;
  --pad:20px; --gut:12px; --hd:56px; --sheet:200px; --edge:28px;
  --e-out:cubic-bezier(.16,1,.3,1);
  --disp:'FLAR' 100; --text:'FLAR' 0;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;background:var(--iv)}
body{font-family:'Commissioner',system-ui,sans-serif;font-variation-settings:var(--text);font-weight:400;font-size:var(--f2);line-height:1.5;background:var(--iv);color:var(--ink);-webkit-font-smoothing:antialiased;font-variant-numeric:tabular-nums;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
ol{list-style:none}
.ttl{font-variation-settings:var(--disp);font-weight:340;letter-spacing:-.022em;line-height:1.06}
/* điện thoại: cỡ tít theo bề ngang (T2) — 390 ra đúng 40/34, máy 375 thu theo, mỗi .ln vẫn đúng một dòng */
.t1{font-size:min(var(--f6),10.8vw)}
.t2{font-size:min(var(--f5),9.2vw)}
.ln>span{white-space:nowrap}
.disp{font-variation-settings:var(--disp)}

/* nút: MỘT kiểu viên · biến thể: đặc tối / đặc sáng */
.btn{display:inline-flex;align-items:center;justify-content:center;height:44px;padding:0 22px;border-radius:999px;font-size:var(--f1);font-weight:560;letter-spacing:.005em;white-space:nowrap}
.btn--dark{background:var(--ink);color:var(--iv)}
.btn--light{background:var(--iv);color:var(--ink)}
.btn--hd{box-shadow:inset 0 0 0 1px rgba(35,31,28,.10)}
.dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
.dot--ring{background:transparent;box-shadow:inset 0 0 0 1.4px currentColor}
.mot{font-size:var(--f0);color:var(--mut);text-decoration:underline;text-underline-offset:3px;padding:4px 0}

/* ---------- đầu trang ---------- */
.hd{position:fixed;left:0;right:0;top:0;z-index:50;height:var(--hd);display:flex;align-items:center;justify-content:space-between;padding:0 var(--pad);color:var(--ink);transition:color .3s var(--e-out),background-color .15s linear;background-color:rgba(245,240,236,0)}
/* thanh đầu có nền ĐẶC theo khối bên dưới ngay khi rời màn đầu ⇒ chữ thân trang không bao giờ chạy lộ dưới tên tiệm */
.solid .hd{background-color:#F5F0EC}
.solid.cg .hd{background-color:#E3DBD4}
.solid.inv .hd{background-color:#25211E}
.brand{font-variation-settings:var(--disp);font-size:36px;font-weight:640;letter-spacing:-.04em;line-height:1;text-shadow:0 1px 18px rgba(245,240,236,.55);transition:opacity .5s var(--e-out)}
.hb .brand{opacity:0}
.hd-r{display:flex;align-items:center;gap:var(--s2)}
.hd-x{display:none}
.hd .btn{height:40px;padding:0 16px;font-size:var(--f1);transition:background .45s,color .45s}
.inv .hd{color:var(--dkink)}
.inv .hd .btn--hd{box-shadow:none}

/* ---------- đồng hồ đầu trang: mặt số 24 giờ có cung giờ mở cửa + kim giây bấm từng nhịp + số giây cuộn ---------- */
.clock{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 13px 0 5px;border-radius:999px;background:rgba(245,240,236,.94);box-shadow:inset 0 0 0 1px rgba(35,31,28,.12),0 1px 0 rgba(255,255,255,.6);color:var(--ink);transition:background .45s,color .45s,box-shadow .45s}
.inv .clock{background:rgba(49,44,41,.92);color:var(--dkink);box-shadow:inset 0 0 0 1px rgba(242,237,233,.14)}
.dial{width:30px;height:30px;flex:none;overflow:visible}
.dial .bz{fill:none;stroke:currentColor;stroke-opacity:.28;stroke-width:1}
.dial .op{fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-opacity:.9}
.dial .tk{stroke:currentColor;stroke-opacity:.45;stroke-width:1}
.dial .hh{stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.dial .sh line{stroke:currentColor;stroke-width:.9;stroke-linecap:round;stroke-opacity:.75}
.dial .sh circle{fill:var(--iv);stroke:currentColor;stroke-width:.9}
.inv .dial .sh circle{fill:var(--dk2)}
.dial .hc{fill:currentColor}
.dial g{transform-origin:14px 14px;transform-box:view-box}
.dial .sh{transition:transform .42s var(--e-out)}
.dg{display:inline-flex;align-items:baseline;font-size:var(--f2);font-weight:560;letter-spacing:.01em;line-height:1;font-variant-numeric:tabular-nums}
.dg .cn{display:inline-block;width:.32em;text-align:center;opacity:.55;transform:translateY(-.06em)}
.dg .d{display:inline-block;height:1.1em;overflow:hidden;position:relative;line-height:1.1em}
.dg .col{display:block;transition:transform .5s var(--e-out)}
.dg .col span{display:block;height:1.1em;text-align:center}
.dg .sec{opacity:.62}
.clk-txt{font-size:var(--fm);font-weight:540}
.clock-st{display:none;font-size:var(--fm);color:var(--mut);margin-left:2px}
.inv .clock-st{color:var(--dkmut)}

/* ---------- màn đầu ---------- */
.stage{position:relative;height:100vh;height:100svh;overflow:hidden;background:var(--iv)}
.lyr{position:absolute;inset:0}
.lyr-hero{z-index:1}
/* mép chuyển có hình: tấm tối và tấm ngà trồi lên với góc bo của chính tấm thẻ */
.lyr-dark{z-index:2;background:var(--dk);transform:translate3d(0,101%,0);border-radius:var(--edge) var(--edge) 0 0}
.card-host{position:absolute;inset:0;z-index:3;pointer-events:none;overflow:hidden}
.lyr-band{z-index:4;pointer-events:none;transform:translate3d(0,101%,0)}
.lyr-sheet2{z-index:5;background:var(--iv);transform:translate3d(0,101%,0);display:flex;flex-direction:column;border-radius:var(--edge) var(--edge) 0 0;overflow:hidden}
.hero{position:absolute;left:0;right:0;top:0;bottom:var(--sheet);overflow:hidden}
/* ảnh tan vào tấm ngà: 40px cuối ảnh ngả dần về đúng màu nền (ảnh làm cầu nối) */
.hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:40px;background:linear-gradient(rgba(245,240,236,0),var(--iv));pointer-events:none}
.hero picture{position:absolute;inset:0}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.rm .hero-fx{display:none}
.hero img{position:absolute;left:0;top:-4%;width:100%;height:112%;object-fit:cover;object-position:50% 50%;transform-origin:78% 40%;will-change:transform}
.sheet1{position:absolute;left:0;right:0;bottom:0;height:var(--sheet);background:var(--iv);padding:10px var(--pad) 0}
.row1{display:flex;align-items:center;justify-content:space-between;gap:var(--s3);margin-top:var(--s4)}
.row1-r{display:flex;flex-direction:column;align-items:flex-end;gap:4px;text-align:right}
.st{display:flex;align-items:center;gap:7px;font-size:var(--fm);color:var(--mut);line-height:1.3}
.band{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--s6);color:var(--dkink)}
.band .sub{margin-top:var(--s3);font-size:var(--f1);color:var(--dkmut);line-height:1.45}
.lyr-sheet2 .a9{position:relative;height:54%;flex:none;overflow:hidden}
.lyr-sheet2 .a9 img{position:absolute;left:0;top:-5%;width:100%;height:110%;object-fit:cover;object-position:60% 28%;will-change:transform}
.sch{padding:var(--s5) var(--pad) 0;flex:1;display:flex;flex-direction:column}
.srows{margin-top:var(--s4)}
.srow{display:flex;align-items:baseline;justify-content:space-between;gap:10px;border-top:1px solid var(--line);padding:12px 0;font-size:var(--f1)}
.srow .who{font-weight:560;white-space:nowrap}
.st2{color:var(--mut);font-size:var(--fm);text-align:right;display:inline-flex;align-items:center;gap:7px}
.sch-btn{align-self:flex-start;margin-top:var(--s5)}
.disc{font-size:var(--f0);color:var(--mut);margin-top:auto;padding-bottom:var(--s4)}

/* tít trồi theo dòng sau mặt nạ (SO-TAY 17): H1 hero KHÔNG trồi (sàn t=0,5s) */
.ln{display:block;overflow:clip;padding:.3em .14em .18em;margin:-.3em -.14em -.18em}
.ln>span{display:block}
.js .rv .ln>span{transform:translate3d(0,150%,0);transition:transform 1.15s var(--e-out);transition-delay:calc(var(--i,0)*.09s)}
.js .rv .ln+.ln>span{--i:1}
.js .rv.on .ln>span{transform:none}
.js .t2-in .ln>span{transform:translate3d(0,150%,0);transition:transform 1.15s var(--e-out)}
.js .t2-in .ln+.ln>span{transition-delay:.09s}
.js .t2-in.on .ln>span{transform:none}
.js .rv2{opacity:0;transform:translate3d(0,18px,0);transition:opacity 1.2s var(--e-out),transform 1.2s var(--e-out);transition-delay:calc(var(--i,0)*.1s)}
.js .rv2.on{opacity:1;transform:none}

/* ---------- thẻ CSS 3D (đường lui + thẻ t=0) — giữ nguyên L2, chỉ đổi nền sau lỗ theo nền tối mới ---------- */
.cc{position:absolute;left:0;top:0;perspective:1100px;transform-origin:50% 50%;will-change:transform}
.cc-rot{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform}
.cc-face{position:absolute;inset:0;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.cc-face canvas{width:100%;height:100%;display:block}
.cc-front{transform:translateZ(calc(var(--d)/2))}
.cc-back{transform:rotateY(180deg) translateZ(calc(var(--d)/2))}
.cc-hl{position:absolute;left:0;top:0;bottom:0;width:32%;background:linear-gradient(98deg,transparent 0,rgba(255,255,255,.12) 25%,rgba(255,255,255,.42) 50%,rgba(255,255,255,.12) 75%,transparent 100%);will-change:transform}
.cc-hlb{opacity:.6}
.cc-edge{position:absolute;background:linear-gradient(var(--ed,90deg),#DDD2C4 0 26%,#3A322C 30% 70%,#DDD2C4 74%)}
.cc-er,.cc-el{top:4%;bottom:4%;width:var(--d);left:50%;margin-left:calc(var(--d)/-2)}
.cc-er{transform:rotateY(90deg) translateZ(var(--hw))}
.cc-el{transform:rotateY(-90deg) translateZ(var(--hw))}
.cc-et,.cc-eb{left:5%;right:5%;height:var(--d);top:50%;margin-top:calc(var(--d)/-2);--ed:0deg}

.cc-et{transform:rotateX(90deg) translateZ(var(--hh))}
.cc-eb{transform:rotateX(-90deg) translateZ(var(--hh))}
.cc-thru{position:absolute;inset:57% 5% 19% 5%;transform:translateZ(calc(var(--d)/-2 + 1px));overflow:hidden;opacity:0;background:var(--dk)}
.cc-thru img{position:absolute;left:-4%;top:-78%;width:150%;max-width:none}
.cc-pops{position:absolute;inset:0;transform:translateZ(calc(var(--d)/2 + .5px));pointer-events:none}

.cc-pop{position:absolute;transform:translate(-50%,-50%);border-radius:50%;background:#F0E9E1;box-shadow:inset 0 0 0 calc(var(--d)*.35) #3A322C;animation:chad .9s cubic-bezier(.4,0,.8,.6) forwards}
@keyframes chad{0%{transform:translate(-50%,-50%) scale(1)}25%{transform:translate(-40%,-90%) scale(1.15) rotate(40deg)}100%{transform:translate(-10%,900%) scale(.9) rotate(260deg);opacity:.9}}
.cc-shadow{position:absolute;left:-6%;right:-6%;top:-2%;bottom:-12%;background:radial-gradient(closest-side,rgba(26,22,18,.34),rgba(26,22,18,.16) 55%,rgba(26,22,18,0));transform:translate3d(-8%,6%,-120px)}
.c3d{position:absolute;left:0;top:0;opacity:0;transition:opacity .6s var(--e-out)}
.c3d.on{opacity:1}

/* ---------- dịch vụ (ngà) — bảng giá là một cuống vé bấm lỗ ---------- */
.sv{padding:var(--s9) var(--pad) 0}
.sv-h{max-width:12ch}
.sv-lead{margin-top:var(--s4);font-size:var(--f2);line-height:1.5;color:var(--mut);max-width:32ch}
.pb{position:relative;margin-top:var(--s6);background:#FBF8F5;border-radius:18px;box-shadow:0 1px 0 rgba(255,255,255,.7) inset,0 18px 40px -22px rgba(60,44,30,.30),0 0 0 1px rgba(35,31,28,.07);overflow:hidden}
.pb-hd{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);padding:var(--s4) var(--s4) var(--s3) 52px;font-size:var(--f0);color:var(--mut);letter-spacing:.01em}
.pb-hd b{font-weight:600;color:var(--ink);font-size:var(--fm);letter-spacing:.02em}
/* cuống vé: một cột lỗ bên trái, ngăn bằng đường răng cưa */
.pb ol{position:relative}
.pb ol::before{content:"";position:absolute;left:38px;top:-8px;bottom:8px;width:1px;background-image:radial-gradient(circle,rgba(35,31,28,.28) 1px,transparent 1.4px);background-size:1px 7px;background-repeat:repeat-y}
.pr{position:relative;display:grid;grid-template-columns:38px 1fr auto;align-items:center;column-gap:var(--s4);padding:11px var(--s4) 11px 0;min-height:54px}
.pr+.pr::after{content:"";position:absolute;left:52px;right:var(--s4);top:0;height:1px;background:rgba(35,31,28,.08)}
.pr-hole{position:relative;justify-self:center;width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(35,31,28,.30)}
.pr-hole::before{content:"";position:absolute;inset:0;border-radius:50%;background:#CFC4BA;box-shadow:inset 0 2px 3px rgba(35,31,28,.45),inset 0 0 0 1px rgba(35,31,28,.30);opacity:0;transform:scale(.4);transition:opacity .3s var(--e-out),transform .45s var(--e-out);transition-delay:calc(var(--i,0)*.16s + .25s)}
.pr-hole i{position:absolute;inset:0;border-radius:50%;background:#FBF8F5;box-shadow:0 0 0 1px rgba(35,31,28,.16);opacity:0}
.pr-nm{text-wrap:balance;font-size:var(--f2);font-weight:500;line-height:1.3;letter-spacing:-.005em}
.pr-v{font-variation-settings:var(--disp);font-size:var(--f3);font-weight:420;letter-spacing:-.01em;text-align:right;white-space:nowrap;line-height:1.1}
.pr-v small{font-variation-settings:var(--text);font-size:var(--f0);font-weight:400;color:var(--mut);margin-right:4px;letter-spacing:0}
.pb.on .pr-hole::before{opacity:1;transform:none}
.pb.on .pr-hole i{animation:chad2 1.1s cubic-bezier(.4,0,.75,.6) forwards;animation-delay:calc(var(--i,0)*.16s + .25s)}
@keyframes chad2{0%{opacity:1;transform:none}20%{opacity:1;transform:translate(3px,-5px) rotate(30deg) scale(1.05)}100%{opacity:0;transform:translate(14px,46px) rotate(220deg) scale(.85)}}
/* chân bảng giá: thẻ khách quen, giá mỗi lần tính từ ⚙️ CẤU HÌNH SHOP */
.pb-card{position:relative;margin:var(--s2);padding:var(--s4) var(--s5) var(--s4);border-radius:12px;background:var(--dk);color:var(--dkink);overflow:hidden}
.pb-card .lb{font-size:var(--fm);color:var(--dkmut)}
.pb-card .big{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:var(--s3);row-gap:2px;margin-top:6px}
.pb-card .big b{font-variation-settings:var(--disp);font-size:var(--f6);font-weight:330;letter-spacing:-.03em;line-height:1.05}
.pb-card .big span{font-size:var(--f1);color:var(--dkmut)}
.pb-card .sm{margin-top:var(--s2);font-size:var(--f1);color:var(--dkmut);line-height:1.45}
.pb-holes{display:flex;gap:7px;margin-top:var(--s4)}
.pb-holes i{width:12px;height:12px;border-radius:50%;box-shadow:inset 0 0 0 1.2px rgba(242,237,233,.42)}
/* ánh cửa sổ quét ngang chân thẻ — lớp tự chạy duy nhất của màn này, cùng ý vệt sáng trên tấm thẻ */
.pb-card::after{content:"";position:absolute;top:-20%;bottom:-20%;left:0;width:46%;background:linear-gradient(100deg,rgba(242,237,233,0) 0,rgba(242,237,233,.07) 40%,rgba(242,237,233,.13) 50%,rgba(242,237,233,.07) 60%,rgba(242,237,233,0) 100%);transform:translate3d(-110%,0,0) skewX(-12deg);pointer-events:none}
.js .pb.on .pb-card::after{animation:sweep 9.6s cubic-bezier(.45,0,.25,1) infinite;animation-delay:1.6s}
@keyframes sweep{0%{transform:translate3d(-110%,0,0) skewX(-12deg)}55%,100%{transform:translate3d(330%,0,0) skewX(-12deg)}}
.note{margin-top:var(--s4);font-size:var(--f1);line-height:1.5;color:var(--mut);max-width:40ch}

.gal{margin-top:var(--s8);display:grid;grid-template-columns:repeat(4,1fr);column-gap:var(--gut);row-gap:var(--s7)}
.fig{position:relative}
.ph{position:relative;overflow:hidden;border-radius:6px;background:#E7DFD8}
.ph img{position:absolute;left:0;top:-9%;width:100%;height:118%;object-fit:cover;will-change:transform}
.fig figcaption{font-size:var(--fm);color:var(--mut);margin-top:10px;line-height:1.4}
.f1{grid-column:1/4}.f1 .ph{aspect-ratio:2/3}
.f2{grid-column:3/5;margin-top:calc(var(--s7)*-1 - 40px);z-index:1}.f2 .ph{aspect-ratio:1/1;box-shadow:0 0 0 6px var(--iv)}
.f3{grid-column:1/4}.f3 .ph{aspect-ratio:4/5}
.f4{grid-column:2/5}.f4 .ph{aspect-ratio:2/3}
.f6{grid-column:2/4}.f6 .ph{aspect-ratio:2/3}
.f5{grid-column:1/-1;margin-left:calc(var(--pad)*-1);margin-right:calc(var(--pad)*-1)}.f5 .ph{aspect-ratio:4/5;border-radius:0}.f5 figcaption{padding:0 var(--pad)}
/* thở: ảnh khổ lớn dưới nếp gấp (≤2 cái cùng khung, lệch pha) */
.js .br>img{animation:breath 10.4s ease-in-out infinite alternate;animation-delay:-3.1s}
.js .br2>img{animation-duration:8.8s;animation-delay:-6.4s}
@keyframes breath{0%{scale:1;translate:0 0}100%{scale:1.07;translate:-2.6% 2%}}

/* ---------- L4 · cảnh dịch vụ (ghim): ảnh tay nghề trôi theo tầng sâu → bảng giá trồi lên đậu giữa → bấm lỗ ----------
   .sv-live do JS bật (không bật khi giảm chuyển động / tắt JS ⇒ xếp tĩnh như L3a). Mọi chuyển động: transform. */
.sv-pin{display:contents}
.sv.sv-live{height:250svh;padding:0;display:block}
.sv-live .sv-pin{display:block;position:sticky;top:0;height:100vh;height:100svh;overflow:hidden}
.sv-live .gal{position:absolute;inset:0;margin:0;display:block;z-index:1}
.sv-live .fig{position:absolute;top:0;margin:0;width:var(--w);left:var(--x);will-change:transform;grid-column:auto}
.sv-live .fig figcaption{margin-top:8px}
.sv-live .f1{--x:3%;--w:58%}.sv-live .f2{--x:57%;--w:40%;z-index:1}.sv-live .f2 .ph{box-shadow:none}
.sv-live .f3{--x:46%;--w:50%}.sv-live .f4{--x:4%;--w:46%}.sv-live .f5{--x:30%;--w:62%}.sv-live .f6{--x:2%;--w:38%}
.sv-live .f5 .ph{aspect-ratio:4/5;border-radius:6px}.sv-live .f5 figcaption{padding:0}
.sv-live .sv-l{position:absolute;inset:0;height:100%;align-self:stretch;z-index:3;padding:calc(var(--hd) + var(--s3)) var(--pad) 0;pointer-events:none}
.sv-live .sv-l>*{pointer-events:auto}
/* dải ngà phía trên: ảnh trôi lên tan vào nền dưới tít */
.sv-live .sv-l::before{content:"";position:absolute;left:0;right:0;top:0;height:calc(var(--hd) + 230px);background:linear-gradient(var(--iv) 58%,rgba(245,240,236,0));z-index:-1;pointer-events:none}
.sv-live .sv-lead{margin-top:var(--s3)}
.sv-live .pb{position:absolute;left:var(--pad);right:var(--pad);bottom:var(--s4);margin:0;will-change:transform}
@media (min-width:1000px){
  .sv.sv-live{height:240vh;padding:0}
  .sv-live .sv-l{padding:0}
  .sv-live .sv-l::before{display:none}
  .sv-live .sv-h,.sv-live .sv-lead{position:absolute;left:var(--pad);width:28%}
  .sv-live .sv-h{top:calc(50% - 150px)}
  .sv-live .sv-lead{top:calc(50% + 6px);margin:0}
  .sv-live .pb{left:50%;right:auto;width:min(520px,38vw);margin-left:calc(min(520px,38vw)/-2);bottom:auto;top:calc(var(--hd) + 24px)}
  .sv-live .f1{--x:69%;--w:22%}.sv-live .f2{--x:31%;--w:13%}.sv-live .f3{--x:80%;--w:17%}.sv-live .f4{--x:60%;--w:15%}.sv-live .f5{--x:33%;--w:30%}.sv-live .f6{--x:87%;--w:11%}
}


/* L5 · vòng ảnh tay nghề quay quanh bảng giá (CSS 3D; ô ảnh quay mặt vào tâm ⇒ nửa xa hiện sau bảng, nửa gần tự ẩn) */
.sv-live .gal{display:none}
.ring{position:absolute;left:0;right:0;top:var(--ry,37%);height:0;perspective:var(--rp,640px);perspective-origin:50% 0;z-index:1;pointer-events:none}
.ring-rot{position:absolute;left:50%;top:0;transform-style:preserve-3d;will-change:transform}
.rs{position:absolute;width:var(--cw,140px);height:var(--ch,188px);left:calc(var(--cw,140px)/-2);top:calc(var(--ch,188px)/-2);border-radius:12px;overflow:hidden;backface-visibility:hidden;-webkit-backface-visibility:hidden;background:#E7DFD8;box-shadow:0 18px 30px -18px rgba(60,44,30,.45)}
.rs img{width:100%;height:100%;object-fit:cover;display:block}
.sv-live .sv-l::before{display:none}
.sv-live .pb{transform-origin:50% 100%}
.pb-hd-x{display:none;font-style:normal}
.sv-live .pb-hd-x{display:inline}
.sv-live .pb-hd{flex-direction:column;align-items:flex-start;gap:2px}
.sv-live .sv-lead{display:none}
@media (min-width:1000px){.ring{--ry:61%;--rp:1600px;--cw:236px;--ch:316px}.sv-live .sv-h{top:calc(var(--hd) + 48px)}.sv-live .sv-lead{top:calc(var(--hd) + 230px)}}

/* ---------- thẻ khách quen (đá ấm) — ngà ngả dần sang đá, không có ranh ---------- */
.mem{margin-top:var(--s9);background:linear-gradient(var(--iv),var(--st) 160px);padding:var(--s8) 0 calc(var(--s9) + var(--edge))}
.mem-art{position:relative}
.mem-card{position:relative;height:540px;overflow:hidden}
.mem-txt{padding:0 var(--pad)}
.mem-txt .big{font-variation-settings:var(--disp);margin-top:var(--s5);font-size:var(--f4);font-weight:400;letter-spacing:-.015em;line-height:1.15}
.mem-txt .body{margin-top:var(--s3);font-size:var(--f2);line-height:1.5;color:var(--mut);max-width:34ch}
.ledger{margin-top:var(--s6)}
.lg-h{font-size:var(--f1);font-weight:560}
.lg-h span{font-weight:400;color:var(--mut)}
.ledger ol{margin-top:10px;border-bottom:1px solid var(--line)}
.ledger li{display:grid;grid-template-columns:28px 1fr;grid-template-rows:auto auto;column-gap:10px;border-top:1px solid var(--line);padding:12px 0}
.lg-n{grid-row:1/3;font-size:var(--fm);color:var(--mut);padding-top:2px}
.lg-w{font-size:var(--f1);font-weight:540}
.lg-t{font-size:var(--f1);color:var(--mut);margin-top:2px}
.mem-txt .btn{margin-top:var(--s6)}
.mnote{font-size:var(--f0);color:var(--mut);margin-top:var(--s3)}

/* ---------- giữ ghế (gỗ khói) — tấm tối bo góc trồi đè lên tấm đá ---------- */
.bk{background:var(--dk);color:var(--dkink);padding:var(--s8) var(--pad) var(--s9);position:relative;z-index:1;margin-top:calc(var(--edge)*-1);border-radius:var(--edge) var(--edge) var(--edge) var(--edge)}
.clock-big{font-variation-settings:var(--disp);margin-top:var(--s6);font-size:var(--fx);font-weight:300;letter-spacing:-.03em;line-height:1}
.clock-cap{margin-top:10px;font-size:var(--fm);color:var(--dkmut)}
.pills{margin-top:var(--s5);min-height:124px;display:flex;flex-direction:column;gap:var(--s2);align-items:flex-start}
.pill{display:inline-flex;align-items:center;gap:9px;font-size:var(--f1);line-height:1;padding:10px 13px 10px 11px;border-radius:10px;background:rgba(242,237,233,.07);box-shadow:inset 0 0 0 1px rgba(242,237,233,.10);color:var(--dkink);transition:opacity .9s var(--e-out),transform 1.1s var(--e-out)}
.pill .ok{width:16px;height:16px;border-radius:50%;box-shadow:inset 0 0 0 1.3px currentColor;position:relative;flex:none}
.pill .ok::after{content:"";position:absolute;left:5px;top:3.5px;width:4px;height:7px;border:solid currentColor;border-width:0 1.4px 1.4px 0;transform:rotate(42deg)}
.pill i{font-style:normal;color:var(--dkmut)}
.pill.in{opacity:0;transform:translate3d(0,14px,0)}
.pill.out{opacity:0;transform:translate3d(0,-10px,0)}
.pills-cap{font-size:var(--f0);color:var(--dkmut);margin-top:6px}
.bk-b{margin-top:var(--s7)}
.barber{display:grid;grid-template-columns:72px 1fr;gap:var(--s4);border-top:1px solid var(--dkline);padding:var(--s4) 0}
.barber img{width:72px;height:90px;object-fit:cover;border-radius:8px}
.b-nm{font-size:var(--f2);font-weight:540}
.b-st{margin-top:4px;font-size:var(--f1);color:var(--dkmut);display:flex;align-items:center;gap:7px}
.slots{margin-top:var(--s3);display:flex;flex-wrap:wrap;gap:6px}
.slot{font-size:var(--f1);padding:8px 12px;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(242,237,233,.28);color:var(--dkink)}
.hint{font-size:var(--fm);color:var(--dkmut);margin-top:6px;border-top:1px solid var(--dkline);padding-top:var(--s4);line-height:1.5}
.bk-b .btn{margin-top:var(--s5)}
.bk-c{margin-top:var(--s8)}
.bk-c .ph{aspect-ratio:4/5;background:var(--dk2)}
.bk-c figcaption{margin-top:var(--s3);display:flex;flex-direction:column;gap:4px;font-size:var(--f1);color:var(--dkmut)}
.bk-c figcaption b{font-variation-settings:var(--disp);font-weight:450;color:var(--dkink);font-size:var(--f3)}

/* ---------- chân trang (L5): cảnh kết — cuống vé của tiệm ---------- */
.ft{padding:var(--s8) var(--pad) var(--s7)}
.ft-ticket{position:relative;background:#FBF8F5;border-radius:26px;box-shadow:0 0 0 1px rgba(35,31,28,.07),0 30px 60px -36px rgba(60,44,30,.38)}
.ft-top{padding:var(--s7) var(--s5) var(--s6);text-align:center}
.ft-kick{text-wrap:balance;font-variation-settings:var(--disp);font-size:var(--f3);font-weight:400;color:var(--mut);letter-spacing:-.01em}
/* tên tiệm khổng lồ, lấp bằng ảnh tiệm — thứ người xem mang theo khi phim hết */
.ft-word{font-variation-settings:var(--disp);font-weight:560;font-size:min(46vw,300px);letter-spacing:-.06em;line-height:.9;margin:var(--s3) 0 0;padding:.04em .06em .3em;color:var(--ink)} /* đệm đáy .36em: dấu nặng của ợ nằm dưới chân chữ — background-clip:text chỉ vẽ trong hộp đệm */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .ft-word{background:linear-gradient(rgba(35,31,28,.30),rgba(35,31,28,.52)),url(img/a4-1080.webp) 46% 58%/cover;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent}
}
.ft-sub{font-size:var(--f1);color:var(--mut)}
/* đường xé: răng cưa + hai khuyết tròn ở hai mép, như cuống vé */
.ft-tear{position:relative;height:28px}
.ft-tear::before{content:"";position:absolute;left:28px;right:28px;top:13px;height:2px;background-image:radial-gradient(circle,rgba(35,31,28,.30) 1px,transparent 1.5px);background-size:8px 2px;background-repeat:repeat-x}
.ft-tear::after{content:"";position:absolute;left:-14px;right:-14px;top:0;height:28px;background:radial-gradient(circle at 14px 14px,var(--iv) 13.5px,transparent 14.5px) left/28px 28px no-repeat,radial-gradient(circle at 14px 14px,var(--iv) 13.5px,transparent 14.5px) right/28px 28px no-repeat}
.ft-bot{padding:var(--s5) var(--s5) var(--s6)}
.ft-info{display:grid;grid-template-columns:1fr;row-gap:var(--s4)}
.ft-l{font-size:var(--f0);color:var(--mut);letter-spacing:.02em}
.ft-v{font-variation-settings:var(--disp);font-size:var(--f4);font-weight:420;letter-spacing:-.015em;line-height:1.15;margin-top:2px}
.ft-v span{display:block;margin-top:4px;font-variation-settings:var(--text);font-size:var(--f1);color:var(--mut);font-weight:400;letter-spacing:0}
.ft-cta{margin-top:var(--s6);display:flex;flex-direction:column;align-items:flex-start;gap:var(--s3)}
.btn--xl{height:60px;padding:0 32px;font-size:var(--f2);font-weight:600}
.ft-tel{font-size:var(--f1);color:var(--mut);text-decoration:underline;text-underline-offset:3px}
.ft-holes{display:flex;gap:10px;margin-top:var(--s6)}
.ft-holes i{position:relative;width:20px;height:20px;border-radius:50%;box-shadow:inset 0 0 0 1.4px rgba(35,31,28,.32)}
.ft-holes i::before{content:"";position:absolute;inset:0;border-radius:50%;background:#CFC4BA;box-shadow:inset 0 2px 3px rgba(35,31,28,.45);opacity:0;transform:scale(.4);transition:opacity .3s var(--e-out),transform .45s var(--e-out)}
.ft-holes.on i::before{opacity:1;transform:none}
.ft-holes.on i:nth-child(1)::before{transition-delay:.2s}.ft-holes.on i:nth-child(2)::before{transition-delay:.32s}.ft-holes.on i:nth-child(3)::before{transition-delay:.44s}.ft-holes.on i:nth-child(4)::before{transition-delay:.56s}.ft-holes.on i:nth-child(5)::before{transition-delay:.68s}
.ft-holes.on i:nth-child(6)::before{transition-delay:.8s}.ft-holes.on i:nth-child(7)::before{transition-delay:.92s}.ft-holes.on i:nth-child(8)::before{transition-delay:1.04s}.ft-holes.on i:nth-child(9)::before{transition-delay:1.16s}.ft-holes.on i:nth-child(10)::before{transition-delay:1.28s}
html:not(.js) .ft-holes i::before,.rm .ft-holes i::before{opacity:1;transform:none}
.fdisc{margin-top:var(--s6);font-size:var(--f1);color:var(--mut);max-width:60ch;line-height:1.55}
.fdisc b{font-weight:600;color:var(--ink)}
.fsap{margin-top:var(--s4);font-size:var(--f0);color:var(--mut)}
.ft a.zl,.ft .btn{text-decoration:none}
.fsap a{text-decoration:underline;text-underline-offset:3px}
.nos{position:relative;z-index:60;margin:0 var(--pad) 40px;font-size:var(--f1);line-height:1.5}
.nos a{text-decoration:underline}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;top:68px;transform:translate3d(-50%,-10px,0);z-index:60;background:rgba(37,33,30,.95);color:#F2EDE9;font-size:var(--fm);line-height:1.35;padding:10px 14px;border-radius:10px;opacity:0;pointer-events:none;transition:opacity .35s,transform .45s var(--e-out);max-width:88vw;text-align:center}
.toast.on{opacity:1;transform:translate3d(-50%,0,0)}

/* ---------- ảnh vị trí ổ cắm thẻ tĩnh (giảm chuyển động / tắt JS) ---------- */
.rm-slot{display:none}

/* ============================================================
   DESKTOP ≥ 1000px — lưới 12 cột, lề 40px, rãnh 24px
   ============================================================ */
@media (min-width:1000px){
  :root{--pad:40px;--gut:24px;--hd:72px;--sheet:228px;--edge:40px;
    --f0:14px;--fm:15px;--f1:17px;--f2:19px;--f3:24px;--f4:34px;--f5:64px;--f6:84px;--fx:88px}
  .brand{font-size:48px}
  .hd-x{display:inline;margin-left:.28em}
  .clock{height:44px;padding:0 16px 0 6px;gap:10px}
  .dial{width:32px;height:32px}
  .dg{font-size:var(--f3)}
  .clock-st{display:inline}
  .hd .btn{height:44px;padding:0 20px;font-size:var(--f1)}
  .sheet1{padding:26px var(--pad) 0;display:flex;justify-content:space-between;align-items:flex-start}
  .row1{flex-direction:column;align-items:flex-end;margin-top:10px;gap:14px}
  .band{left:var(--pad);right:auto;width:640px;bottom:var(--s7)}
  .lyr-sheet2{flex-direction:row}
  .lyr-sheet2 .a9{height:auto;width:58%}
  .sch{padding:calc(var(--hd) + 48px) var(--pad) 0 56px;flex:1}
  .sch{justify-content:center;position:relative;padding-bottom:64px}
  .sch .t2{font-size:var(--f5)}
  .sch .disc{position:absolute;left:56px;bottom:0;margin:0}
  .srows{max-width:560px}
  .srow{font-size:var(--f1)}
  .sv{padding:var(--s10) var(--pad) 0;display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut)}
  .sv-l{grid-column:1/6;position:sticky;top:104px;align-self:start}
  .sv-h{max-width:none}
  .pb{margin-top:var(--s6)}
  .pr{min-height:62px}
  .pb-card .big b{font-size:var(--f5)}
  .gal{grid-column:7/13;margin-top:0;grid-template-columns:repeat(6,1fr);column-gap:var(--gut);row-gap:var(--s8);align-items:end}
  .f1{grid-column:1/5}
  .f2{grid-column:5/7;margin-top:0;align-self:end}.f2 .ph{box-shadow:none}
  .f3{grid-column:1/4;align-self:start}
  .f4{grid-column:4/7;align-self:start;margin-top:var(--s9)}
  .f5{grid-column:1/-1;margin:0}.f5 .ph{aspect-ratio:3/2;border-radius:6px}.f5 figcaption{padding:0}
  .mem{margin-top:var(--s10);padding:var(--s10) var(--pad) calc(var(--s10) + var(--edge));display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;background:linear-gradient(var(--iv),var(--st) 240px)}
  .mem-art{grid-column:1/8}
  .mem-txt{grid-column:8/13}
  .mem-card{height:740px}
  .mem-txt{padding:0}
  .mem-txt .t2{font-size:min(var(--f5),4.3vw)}
  .bk{padding:var(--s10) var(--pad);display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:start}
  .bk-a{grid-column:1/5}
  .bk-b{grid-column:5/9;margin-top:var(--s2)}
  .bk-c{grid-column:9/13;margin-top:var(--s2)}
  .bk-c .ph{aspect-ratio:1/1}
  .ft{padding:var(--s9) var(--pad) var(--s8)}
  .ft-top{padding:var(--s8) var(--s7) var(--s6)}
  .ft-word{font-size:min(30vw,420px)}
  .ft-bot{display:grid;grid-template-columns:repeat(12,1fr);column-gap:var(--gut);align-items:center;padding:var(--s7) var(--s7) var(--s7)}
  .ft-info{grid-column:1/7;grid-template-columns:1.5fr 1fr;column-gap:var(--gut)}
  .ft-cta{grid-column:7/10;margin-top:0;align-items:flex-start}
  .ft-holes{grid-column:10/13;margin-top:0;flex-wrap:nowrap;justify-content:flex-end;gap:8px}
}

/* ============================================================
   GIẢM CHUYỂN ĐỘNG (.rm) và TẮT JS (html:not(.js)) — trang tĩnh xếp chồng
   ============================================================ */
html:not(.js) .stage,.rm .stage{height:auto;overflow:visible}
html:not(.js) .lyr,.rm .lyr{position:relative;inset:auto;transform:none!important}
html:not(.js) .lyr-hero,.rm .lyr-hero{height:100vh;height:100svh;min-height:560px}
html:not(.js) .lyr-dark,.rm .lyr-dark{min-height:620px;display:block}
html:not(.js) .lyr-band,.rm .lyr-band{background:var(--dk);padding:0 0 8px;margin-top:-1px}
html:not(.js) .band,.rm .band{position:relative;left:auto;right:auto;bottom:auto;width:auto;padding:0 var(--pad) 40px}
html:not(.js) .lyr-sheet2,.rm .lyr-sheet2{min-height:0;border-radius:0}
html:not(.js) .lyr-sheet2 .a9,.rm .lyr-sheet2 .a9{height:52vh;min-height:300px}
html:not(.js) .sch,.rm .sch{padding-bottom:16px}
html:not(.js) .card-host,.rm .card-host{display:none}
.rm .rm-slot{display:block;position:absolute;inset:0}
.rm .hero img,.rm .ph img,.rm .lyr-sheet2 .a9 img{top:0;height:100%;transform:none!important;animation:none!important}
html:not(.js) .hero img,html:not(.js) .ph img,html:not(.js) .lyr-sheet2 .a9 img{top:0;height:100%}
.rm *,.rm *::before,.rm *::after{transition:none!important;animation:none!important}
.rm .rv .ln>span,.rm .rv2,.rm .t2-in .ln>span{transform:none!important;opacity:1!important}
.rm .pr-hole::before{opacity:1;transform:none}
.rm .pr-hole i{opacity:0}
html:not(.js) .mem-card{display:none}
@media (min-width:1000px){
  html:not(.js) .lyr-sheet2 .a9,.rm .lyr-sheet2 .a9{height:auto;min-height:620px}
  html:not(.js) .lyr-band,.rm .lyr-band{padding-bottom:24px}
}
html:not(.js) .pb{display:none}
/* L4: giảm chuyển động không chạy vòng rAF ⇒ thanh đầu không tự đổi nền theo khối; cho nền ngà đặc cố định (L2–L3a: trong suốt, tên tiệm đè lên tít) */
.rm .hd{background-color:var(--iv);color:var(--ink)}

/* L5 · con trỏ "lỗ bấm" (chỉ máy có chuột; JS đặt vị trí bằng transform) */
html.has-cur,html.has-cur *{cursor:none!important}
.cur{position:fixed;left:0;top:0;z-index:90;pointer-events:none;color:var(--ink)}
.inv .cur{color:var(--dkink)}
.cur-r,.cur-d{position:fixed;left:0;top:0;border-radius:50%;opacity:0;will-change:transform}
.cur-r{width:38px;height:38px;margin:-19px 0 0 -19px;box-shadow:inset 0 0 0 1.5px currentColor}
.cur-d{width:6px;height:6px;margin:-3px 0 0 -3px;background:currentColor}
.cur.on-card .cur-r{box-shadow:inset 0 0 0 1.2px currentColor,inset 0 2px 5px rgba(35,31,28,.25);background:rgba(35,31,28,.06)}