/* SAVILA — "Lụa ngà & Sơn mài" (Ivory Silk Gallery)
   Phòng tranh ban ngày: tường lụa ngà sáng (đúng hệ màu savila.vn), chữ mực xanh rêu thẫm,
   MỘT điểm nhấn sơn mài nâu đỏ lấy từ chính logo sepia của Savila. Không vàng đồng.
   Hero/phead/footer là ba "gian đêm" tối màu đóng khung hai đầu; thân trang sáng.
   Ảnh là tác phẩm: đóng khung passe-partout giấy trắng ngà, chú thích NẰM DƯỚI khung.
   Playfair Display (didone, subset VN) + Be Vietnam Pro.
   Quy tắc hình khối: khung/ảnh/panel bo 4px; nút pill; input bo 8px.
   Motion: cuộn native 100%, reveal IO một lần, một chuỗi mở màn ở hero, đèn rọi theo con trỏ. */

:root{
  --wall:#F5F1E6; --wall2:#EDE8D8; --paper:#FCFAF3;
  --ink:#1D2A22; --ink2:#12201A;
  --ink70:rgba(29,42,34,.74); --ink45:rgba(29,42,34,.52);
  --lac:#8A4631; --lacL:#C98A5E; --lac-soft:rgba(138,70,49,.09);
  --hair:rgba(29,42,34,.26); --hair2:rgba(29,42,34,.13);
  --silk:#F3EFE3; --silk70:rgba(243,239,227,.78); --silk45:rgba(243,239,227,.55);
  --hairD:rgba(243,239,227,.26); --hairD2:rgba(243,239,227,.13);
  --disp:"Playfair Display",Georgia,serif; --body:"Be Vietnam Pro",system-ui,sans-serif;
  --r:4px; --wrap:1240px;
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
html,body{overflow-x:clip}
body{margin:0;background:var(--wall);color:var(--ink);font:400 16px/1.75 var(--body);-webkit-font-smoothing:antialiased}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;cursor:pointer;color:inherit}
.sr{position:absolute;width:1px;height:1px;clip-path:inset(50%);overflow:hidden}
.wrap{max-width:var(--wrap);margin:0 auto;padding-left:clamp(18px,4vw,44px);padding-right:clamp(18px,4vw,44px)}
.sec{padding-top:clamp(70px,10vw,128px);padding-bottom:clamp(70px,10vw,128px)}
::selection{background:var(--lac);color:var(--silk)}

h1,h2,h3,h4{font-family:var(--disp);font-weight:500;line-height:1.14;margin:0 0 18px;letter-spacing:.002em}
h1{font-size:clamp(40px,6vw,76px);font-weight:500}
h2{font-size:clamp(28px,3.8vw,46px);font-weight:500}
h3{font-size:clamp(19px,2.2vw,23px)}
em{font-style:italic}
p{margin:0 0 14px}
.lede{font-size:clamp(16px,1.6vw,18.5px);color:var(--ink70);max-width:58ch}
.num{font-family:var(--disp);font-variant-numeric:lining-nums}
.note{font-size:13px;color:var(--ink45)}

/* ---------- thanh điều hướng: trên ảnh thì chữ lụa, cuộn xuống thì khay giấy ngà ---------- */
.bar{position:fixed;inset:0 0 auto 0;z-index:80;transition:background .35s,box-shadow .35s,transform .4s,color .35s;color:var(--silk)}
.bar-in{display:flex;align-items:center;gap:26px;padding-top:18px;padding-bottom:18px}
.bar .brand{margin-right:auto;display:inline-flex;text-decoration:none}
.wm{font:600 19px/1 var(--disp);letter-spacing:.42em;padding-left:.42em}
.wm i{font-style:normal;color:var(--lacL)}
.bar.solid{background:rgba(252,250,243,.96);box-shadow:0 1px 0 var(--hair2);color:var(--ink)}
.bar.solid .wm i{color:var(--lac)}
.bar.hide{transform:translateY(-110%)}
.nav{display:flex;gap:4px}
.nav a{font:500 14px/1 var(--body);text-decoration:none;padding:11px 13px;opacity:.85;border-bottom:1px solid transparent;transition:opacity .25s,border-color .25s}
.nav a:hover{opacity:1;border-bottom-color:currentColor}
.nav a[aria-current]{opacity:1;border-bottom-color:var(--lacL)}
.bar.solid .nav a[aria-current]{border-bottom-color:var(--lac)}
.nav a.ask{border:1px solid currentColor;border-radius:999px;margin-left:10px;padding:11px 18px}
.nav a.ask:hover{background:var(--lac);border-color:var(--lac);color:var(--silk)}
#menuBtn{display:none;background:none;border:1px solid currentColor;border-radius:999px;padding:10px 16px;font:500 13.5px/1 var(--body);align-items:center;gap:8px}
#menuBtn i{width:16px;height:1px;background:currentColor;position:relative;display:inline-block}
#menuBtn i::before,#menuBtn i::after{content:"";position:absolute;left:0;right:0;height:1px;background:currentColor;top:-5px}
#menuBtn i::after{top:5px}
@media(max-width:980px){.nav{display:none}#menuBtn{display:inline-flex}}
dialog#mmenu{border:0;border-radius:0;padding:0;width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;background:var(--wall);color:var(--ink)}
dialog#mmenu::backdrop{background:rgba(18,32,26,.5)}
.mm-in{padding:20px 26px 34px;height:100%;display:flex;flex-direction:column}
.mm-head{display:flex;align-items:center;justify-content:space-between;padding-bottom:18px;border-bottom:1px solid var(--hair2)}
.mm-head .wm i{color:var(--lac)}
#menuClose{background:none;border:1px solid var(--hair);border-radius:50%;width:42px;height:42px;font-size:18px}
.mm-list{display:flex;flex-direction:column;justify-content:center;flex:1}
.mm-list a{display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:16px 2px;text-decoration:none;border-bottom:1px solid var(--hair2)}
.mm-list b{font:500 26px/1.3 var(--disp)}
.mm-list small{color:var(--ink45);font-size:12.5px}
.mm-list a[aria-current] b{color:var(--lac);font-style:italic}

/* ---------- nút ---------- */
.btn{display:inline-flex;align-items:center;gap:9px;padding:15px 28px;border-radius:999px;border:0;background:var(--lac);color:var(--silk);font:600 14px/1 var(--body);text-decoration:none;transition:transform .25s,box-shadow .25s,background .25s}
.btn:hover{transform:translateY(-1px);box-shadow:0 14px 34px -16px rgba(138,70,49,.6)}
.btn:active{transform:translateY(0) scale(.98)}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--hair);box-shadow:none}
.btn.ghost:hover{border-color:var(--ink70);box-shadow:none}
.hero .btn.ghost,.phead .btn.ghost{color:var(--silk);border-color:var(--hairD)}
.hero .btn.ghost:hover,.phead .btn.ghost:hover{border-color:var(--silk70)}
.cta-row{display:flex;gap:12px;flex-wrap:wrap}
.chip{display:inline-flex;align-items:center;gap:7px;padding:9px 15px;border:1px solid var(--hair);border-radius:999px;background:none;font:500 13px/1 var(--body);color:var(--ink70)}

/* ---------- khung tranh (đơn vị thị giác của cả site) ---------- */
.fr{position:relative;margin:0}
.fr .mat{display:block;position:relative;border:1px solid var(--hair);border-radius:var(--r);padding:clamp(8px,1.1vw,14px);background:var(--paper);box-shadow:0 18px 44px -30px rgba(29,42,34,.4)}
.fr img{width:100%;border-radius:2px;display:block}
.fr figcaption{display:flex;justify-content:space-between;gap:14px;padding:12px 2px 0;font:italic 400 14px/1.5 var(--disp);color:var(--ink70)}
.fr figcaption small{font:400 12.5px/1.6 var(--body);color:var(--ink45)}
/* đèn rọi tranh theo con trỏ (opacity + gradient theo biến, không repaint khi cuộn) */
.fr .mat::after{content:"";position:absolute;inset:0;border-radius:inherit;background:radial-gradient(340px 260px at var(--mx,50%) var(--my,36%),rgba(201,138,94,.18),transparent 72%);opacity:0;transition:opacity .5s;pointer-events:none}
@media(hover:hover) and (pointer:fine){.fr:hover .mat::after{opacity:1}}
/* khung VÒM SALA: ảnh đời sống treo trong cửa vòm như hàng hiên của chính tòa nhà;
   bản vẽ/bản đồ/tư liệu giữ khung vuông. Nghiêng 3D nhẹ theo con trỏ (transform-only). */
.fr.arch .mat{border-radius:clamp(150px,21vw,330px) clamp(150px,21vw,330px) var(--r) var(--r);overflow:clip}
.fr.arch .mat img{border-radius:clamp(140px,20vw,320px) clamp(140px,20vw,320px) 2px 2px}
@media(hover:hover) and (pointer:fine){
  .fr .mat{transform:perspective(1100px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.3,1)}
}
@media(prefers-reduced-motion:reduce){.fr .mat{transform:none!important}}
/* reveal ảnh: tấm lụa ngà kéo lên như vải phủ tranh */
.hzr .mat{overflow:clip}
.hzr .mat::before{content:"";position:absolute;inset:0;background:var(--paper);z-index:2;transform:scaleY(1);transform-origin:top;transition:transform 1.1s cubic-bezier(.76,0,.22,1)}
.hzr.in .mat::before{transform:scaleY(0)}
.hzr img{transform:scale(1.05);transition:transform 1.4s cubic-bezier(.2,.7,.2,1)}
.hzr.in img{transform:scale(1)}
@media(prefers-reduced-motion:reduce){.hzr .mat::before{display:none}.hzr img{transform:none}}

/* ---------- reveal chữ ---------- */
.rv{opacity:0;translate:0 26px;transition:opacity .9s,translate .9s cubic-bezier(.2,.75,.25,1)}
.rv.in{opacity:1;translate:0 0}
h2.split .w{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.1em;margin-bottom:-.1em}
h2.split .w>span{display:inline-block;transform:translateY(112%) rotate(3deg);transform-origin:left bottom;transition:transform .9s cubic-bezier(.2,.75,.2,1);transition-delay:calc(var(--i,0)*60ms)}
h2.split.in .w>span{transform:none}
@media(prefers-reduced-motion:reduce){.rv{opacity:1;translate:none}h2.split .w>span{transform:none}}

/* ---------- đầu mục: lặng lẽ, không eyebrow ---------- */
.shead{max-width:820px;margin-bottom:clamp(26px,4vw,46px)}
.shead h2{margin-bottom:12px}
.shead .sub{color:var(--ink70);max-width:60ch}
.shead .hzl,.shead .ix{display:none}
.kicker{font:italic 500 15px/1.4 var(--disp);color:var(--lac);margin:0 0 10px}

/* ---------- hero: một bức tranh lớn trong passe-partout, gian đêm mở màn ---------- */
.hero{position:relative;min-height:100dvh;display:flex;align-items:flex-end;overflow:clip;color:var(--silk)}
.hero .bgw{position:absolute;inset:0;background:var(--ink2)}
.hero .bgw img{width:100%;height:100%;object-fit:cover;object-position:center 42%;animation:salift 2.8s cubic-bezier(.2,.7,.25,1) both}
/* tấm lụa WebGL phủ trên ảnh hero: ảnh chảy nhẹ như lụa, gợn sóng theo con trỏ (GPU, tắt theo IO) */
.hero .bgw canvas.silk{position:absolute;inset:0;width:100%;height:100%;opacity:0;transition:opacity 1.2s}
.hero .bgw canvas.silk.on{opacity:1}
@keyframes salift{from{transform:scale(1.06)}to{transform:scale(1)}}
.hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,32,26,.52),rgba(18,32,26,.06) 42%,rgba(18,32,26,.22) 68%,rgba(18,32,26,.88));pointer-events:none}
/* passe-partout VÒM: khung hairline cách mép cong như cổng vòm Sala, vẽ ra lúc mở màn */
.hero .ppt{position:absolute;inset:clamp(14px,2.6vw,30px);border:1px solid rgba(243,239,227,.42);border-radius:clamp(120px,15vw,250px) clamp(120px,15vw,250px) var(--r) var(--r);pointer-events:none;clip-path:inset(0 0 100% 0);animation:pptdraw 1.6s .4s cubic-bezier(.6,0,.2,1) forwards}
@keyframes pptdraw{to{clip-path:inset(0 0 0 0)}}
.hero-in{position:relative;width:100%;padding-bottom:clamp(130px,18vh,200px);z-index:2}
.hero .meta{font:italic 400 clamp(15px,1.5vw,18px)/1.5 var(--disp);color:var(--silk70);opacity:0;animation:fadeUp 1s 1.1s both}
.hero h1{margin:10px 0 14px;font-size:clamp(32px,4.6vw,58px);max-width:24ch;text-wrap:balance;text-shadow:0 2px 34px rgba(18,32,26,.65)}
.hero h1 .w{display:inline-block;overflow:clip;vertical-align:bottom;padding-bottom:.09em;margin-bottom:-.09em}
.hero h1 .w>span{display:inline-block;transform:translateY(110%);animation:wordUp 1s cubic-bezier(.2,.75,.2,1) both}
@keyframes wordUp{to{transform:none}}
.hero .plede{max-width:52ch;color:var(--silk70);opacity:0;animation:fadeUp 1s 1.9s both}
.hero .cta-row{margin-top:24px;opacity:0;animation:fadeUp 1s 2.1s both}
@keyframes fadeUp{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* thẻ số liệu: hàng chữ khắc trên nẹp, không hộp */
.hero .figs{display:flex;gap:clamp(22px,4vw,56px);margin-top:30px;flex-wrap:wrap;border-top:1px solid var(--hairD);padding-top:18px;opacity:0;animation:fadeUp 1s 2.3s both}
.hero .figs div{display:flex;flex-direction:column;gap:2px}
.hero .figs b{font:500 clamp(24px,3vw,34px)/1.05 var(--disp)}
.hero .figs b i{font-style:italic;font-size:.55em;color:var(--lacL)}
.hero .figs small{color:var(--silk45);font-size:12.5px}
.hero .ask{max-width:620px;margin-top:26px;opacity:0;animation:fadeUp 1s 2.5s both}
.hero .ask-hint{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;opacity:0;animation:fadeUp 1s 2.65s both}
.hero .ask-hint button{background:rgba(18,32,26,.5);border:1px solid var(--hairD);color:var(--silk70);border-radius:999px;padding:8px 15px;font:400 12.5px/1 var(--body);transition:border-color .25s,color .25s}
.hero .ask-hint button:hover{border-color:var(--lacL);color:var(--silk)}
@media(prefers-reduced-motion:reduce){.hero .bgw img,.hero .ppt,.hero .meta,.hero h1 .w>span,.hero .plede,.hero .cta-row,.hero .figs,.hero .ask,.hero .ask-hint{animation:none;opacity:1;transform:none;clip-path:none}}

/* ---------- hộp Hỏi AI: khay giấy ngà ---------- */
.ask{display:flex;align-items:center;gap:10px;background:var(--paper);border:1px solid var(--hair2);border-radius:999px;padding:7px 7px 7px 20px;color:var(--ink);box-shadow:0 20px 50px -28px rgba(18,32,26,.55)}
.ask .ask-ic{flex:none;color:var(--lac)}
.ask input{flex:1;min-width:0;border:0;outline:0;background:none;font:400 15.5px/1.4 var(--body);color:inherit;padding:10px 0}
.ask input::placeholder{color:var(--ink45)}
.ask button{flex:none;border:0;border-radius:999px;background:var(--lac);color:var(--silk);font:600 14px/1 var(--body);padding:13px 24px}
.ask.big{padding:9px 9px 9px 22px}
.ask.big input{font-size:17px;padding:14px 0}
.ask.big button{padding:16px 28px}

/* ---------- GÁY SÁCH: điều hướng dính bên trái như quyển art-book (desktop rộng) ---------- */
.spine{display:none}
@media(min-width:1200px){
  .bar{display:none}
  body{padding-left:272px}
  .hzp{left:272px}
  .spine{display:flex;position:fixed;left:0;top:0;bottom:0;width:272px;z-index:85;background:var(--wall);border-right:1px solid var(--hair2);padding:26px 22px 22px;gap:20px}
  .spine .vrail{display:flex;flex-direction:column;align-items:center;justify-content:space-between;flex:none}
  .spine .seal{width:12px;height:12px;border-radius:50%;background:var(--lac)}
  .spine .vert{writing-mode:vertical-rl;transform:rotate(180deg);font:600 32px/1 var(--disp);letter-spacing:.4em;color:var(--ink);text-decoration:none}
  .spine .vert i{font-style:normal;color:var(--lac)}
  .spine .edition{writing-mode:vertical-rl;transform:rotate(180deg);font:italic 400 12.5px/1 var(--disp);color:var(--ink45)}
  .sp-toc{display:flex;flex-direction:column;justify-content:flex-end;flex:1;min-width:0}
  .sp-toc a:not(.sp-ask){display:grid;grid-template-columns:32px 1fr;gap:2px 10px;align-items:baseline;padding:12px 0;border-top:1px solid var(--hair2);text-decoration:none;color:var(--ink)}
  .sp-toc a i{font:italic 500 13.5px/1 var(--disp);opacity:.45}
  .sp-toc a b{font:500 16px/1.25 var(--disp)}
  .sp-toc a small{grid-column:2;font-size:11.5px;color:var(--ink45)}
  .sp-toc a:hover b{color:var(--lac)}
  .sp-toc a[aria-current] i{opacity:1;color:var(--lac)}
  .sp-toc a[aria-current] b{font-style:italic;color:var(--lac)}
  .sp-act{margin-top:14px;border-top:2px solid var(--lac);padding-top:9px;font:italic 400 13.5px/1.5 var(--disp);color:var(--ink70);min-height:40px}
  .sp-ask{display:block;margin-top:12px;border-radius:999px;background:var(--lac);color:var(--silk);font:600 13.5px/1 var(--body);padding:14px 10px;text-align:center;text-decoration:none;white-space:nowrap}
  .sp-ask:hover{filter:brightness(1.08)}
}

/* ---------- CÁC HỒI SÂN KHẤU: số La Mã khắc chìm, hồi đêm, panel sơn mài vắt ranh giới ---------- */
.act{position:relative}
.anum{position:absolute;z-index:0;font:500 clamp(130px,17vw,300px)/0.8 var(--disp);color:transparent;-webkit-text-stroke:1px var(--ink);opacity:.12;pointer-events:none;user-select:none}
.act-dark{background:var(--ink2);color:var(--silk)}
.act-dark .anum{-webkit-text-stroke-color:var(--silk);opacity:.2}
.act-dark .shead .sub,.act-dark .lede,.act-dark .card p,.act-dark .faq p{color:var(--silk70)}
.act-dark .kicker{color:var(--lacL)}
.act-dark .note,.act-dark .ledger small,.act-dark .hatang li small,.act-dark .dtab small{color:var(--silk45)}
.act-dark .ledger li,.act-dark .dlist li,.act-dark .dtab,.act-dark .dtab:last-child,.act-dark .hatang li{border-color:var(--hairD2)}
.act-dark .dlist li{color:var(--silk70)}
.act-dark .ledger b i{color:var(--lacL)}
.act-dark .btn.ghost{color:var(--silk);border-color:var(--hairD)}
.act-dark .btn.ghost:hover{border-color:var(--silk70)}
.act-dark .fr .mat{background:rgba(252,250,243,.05);border-color:var(--hairD2);box-shadow:none}
.act-dark .hzr .mat::before{background:var(--ink2)}
.act-dark .fr figcaption{color:var(--silk70)}
.act-dark .fr figcaption small{color:var(--silk45)}
.hero .anum{right:2vw;top:9vh;-webkit-text-stroke-color:var(--silk);opacity:.3;z-index:1}
/* panel sơn mài nổi, vắt qua ranh giới hai hồi */
.lacq{position:relative;z-index:6;margin:clamp(-110px,-9vw,-60px) auto 0;width:min(900px,calc(100% - 2*clamp(18px,4vw,44px)));background:var(--lac);color:var(--silk);padding:26px 34px 0;border-radius:var(--r);box-shadow:0 40px 90px -40px rgba(18,32,26,.6)}
.lacq .row{display:grid;grid-template-columns:repeat(5,1fr);gap:16px;text-align:center;padding-bottom:22px}
.lacq .row b{font:500 clamp(23px,2.6vw,34px)/1.05 var(--disp);display:block}
.lacq .row small{font-size:11.5px;color:rgba(243,239,227,.78)}
.lacq .foot{margin:0 -34px;padding:12px 34px;background:rgba(18,32,26,.28);font:italic 400 13.5px/1.6 var(--disp);border-radius:0 0 var(--r) var(--r)}
@media(max-width:720px){.lacq .row{grid-template-columns:repeat(2,1fr)}.lacq .row div:last-child{grid-column:span 2}}
/* ghost chữ lớn in chìm + song tấu chữ đè ảnh */
.gword{position:absolute;z-index:0;top:2vh;left:-14px;font:italic 500 clamp(200px,26vw,380px)/0.8 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(29,42,34,.1);pointer-events:none;user-select:none}
.duet{position:relative;display:grid;grid-template-columns:1.05fr .95fr;align-items:center}
.duet .txt{position:relative;z-index:2;margin-right:clamp(-130px,-9vw,-60px)}
.duet .txt h2{font-size:clamp(34px,4.2vw,64px);max-width:13ch}
.duet .txt h2 em{color:var(--lac)}
.duet figure{position:relative;z-index:1}
@media(max-width:980px){.duet{grid-template-columns:1fr;gap:22px}.duet .txt{margin-right:0}}
/* ảnh tràn hết lề phải + thẻ nổi đè góc ảnh */
.bleedr{position:relative}
.bleedr .big{margin-left:clamp(60px,9vw,150px)}
.bleedr .big img{width:100%;height:clamp(340px,62vh,640px);object-fit:cover;border-radius:4px 0 0 4px;display:block}
.bleedr .fcard{position:relative;z-index:2;margin-top:clamp(-170px,-12vw,-90px);width:min(600px,86%);background:var(--paper);border:1px solid var(--hair2);padding:30px 36px;box-shadow:0 30px 70px -44px rgba(29,42,34,.5)}
.bleedr .fcard .cue{display:flex;gap:12px;align-items:center;font:italic 400 14px/1 var(--disp);color:var(--lac);margin-top:14px}
.bleedr .fcard .cue::before{content:"";flex:none;width:52px;height:1px;background:var(--lac)}

/* ---------- trang con: tiền sảnh gian trưng bày (gian đêm) ---------- */
.phead{position:relative;padding-top:clamp(130px,19vh,190px);padding-bottom:clamp(30px,5vh,52px);background:var(--ink2);overflow:clip;color:var(--silk)}
.phead.photo::before{content:"";position:absolute;inset:0;background:var(--bg) center/cover;opacity:.34}
.phead.photo::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,32,26,.66),rgba(18,32,26,.9))}
.phead .wrap{position:relative;z-index:2}
.phead h1{max-width:20ch}
.phead .plede{max-width:58ch;color:var(--silk70)}
.crumb{display:flex;gap:8px;font:italic 400 14px/1.2 var(--disp);margin-bottom:14px;color:var(--silk70)}
.crumb a{text-decoration:none}
.crumb i{font-style:normal;color:var(--lacL)}
.phead .hzb,.phead .gword{display:none}
/* nẹp sơn mài mảnh khép gian */
.phead::marker{content:none}
.phead .rail{position:absolute;left:clamp(18px,4vw,44px);right:clamp(18px,4vw,44px);bottom:0;height:1px;background:linear-gradient(90deg,var(--lacL),rgba(201,138,94,.12) 60%,transparent)}

/* ---------- lưới gian tranh ---------- */
.salon{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(16px,2.4vw,30px)}
.salon .s7{grid-column:span 7}
.salon .s5{grid-column:span 5;align-self:end}
.salon .s6{grid-column:span 6}
.salon .s4{grid-column:span 4}
.salon .s8{grid-column:span 8}
.salon .lift{margin-top:clamp(26px,5vw,72px)}
@media(max-width:860px){.salon .s7,.salon .s5,.salon .s6,.salon .s4,.salon .s8{grid-column:span 12}.salon .lift{margin-top:0}}

/* ---------- bảng dữ kiện: nẹp mảnh, không hộp ---------- */
.ledger{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:0 clamp(24px,4vw,56px)}
.ledger li{padding:18px 2px;border-top:1px solid var(--hair2)}
.ledger b{font:500 clamp(26px,3vw,38px)/1.1 var(--disp);display:block}
.ledger b i{font-style:italic;font-size:.5em;color:var(--lac)}
.ledger small{color:var(--ink45);display:block;margin-top:5px;font-size:13px}

/* danh mục dài: hai cột mục lục, số serif */
.hatang{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:0 clamp(26px,4.5vw,64px);counter-reset:ht}
.hatang li{counter-increment:ht;display:grid;grid-template-columns:52px 1fr;gap:2px 16px;align-items:start;padding:16px 2px;border-bottom:1px solid var(--hair2)}
.hatang li::before{content:counter(ht,decimal-leading-zero);grid-row:1/span 2;font:italic 400 24px/1.2 var(--disp);color:var(--ink45)}
.hatang li[data-n]{counter-increment:none}
.hatang li[data-n]::before{content:attr(data-n)}
.hatang li b{font:500 15.5px/1.5 var(--body)}
.hatang li small{grid-column:2;color:var(--ink45)}
.hatang li:hover::before{color:var(--lac)}
@media(max-width:860px){.hatang{grid-template-columns:1fr}}

/* ---------- dải phim "hành lang vòm": kéo ngang bằng tay, cuộn ngang native ---------- */
.strip{display:flex;gap:clamp(14px,2.2vw,26px);overflow-x:auto;overscroll-behavior-x:contain;padding:10px clamp(18px,4vw,44px) 16px;scrollbar-width:none;cursor:grab;scroll-snap-type:x proximity}
.strip::-webkit-scrollbar{display:none}
.strip.drag{cursor:grabbing;scroll-snap-type:none}
.strip.drag img{pointer-events:none}
.sitem{flex:0 0 auto;width:clamp(230px,26vw,360px);scroll-snap-align:center;margin:0}
.sitem .mat img{aspect-ratio:3/4;object-fit:cover;height:auto}
.sitem figcaption{justify-content:center;text-align:center}
.strip-hint{display:flex;align-items:center;gap:10px;color:var(--ink45);font:italic 400 14px/1 var(--disp);margin-top:4px}
.strip-hint::before{content:"";width:52px;height:1px;background:var(--lac);display:inline-block}

/* ---------- marquee khắc chữ (duy nhất một) ---------- */
.mq{overflow:clip;padding:30px 0;white-space:nowrap;border-top:1px solid var(--hair2);border-bottom:1px solid var(--hair2)}
.mq .mq-in{display:inline-flex;will-change:transform}
.mq .mq-in.go{animation:mqgo 56s linear infinite}
@keyframes mqgo{to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.mq .mq-in.go{animation:none}}
.mq span{font:italic 400 clamp(20px,2.5vw,30px)/1 var(--disp);color:var(--ink45);padding:0 30px}

/* ---------- thẻ chung / cards: giấy ngà trên tường lụa ---------- */
.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:clamp(14px,2vw,22px)}
.card{background:var(--paper);border:1px solid var(--hair2);border-radius:var(--r);padding:24px}
.card h3{margin-bottom:8px}
.card p{color:var(--ink70)}
.facts{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.facts dt{color:var(--ink45);font-size:14px;font-style:italic;font-family:var(--disp)}
.facts dd{margin:0;font-weight:500;border-bottom:1px dashed var(--hair2);padding-bottom:7px}

/* timeline pháp lý / tiến độ */
.tl{list-style:none;margin:0 0 0 8px;padding:0 0 0 30px;position:relative}
.tl::before{content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:linear-gradient(180deg,var(--lac),rgba(138,70,49,.1))}
.tl li{position:relative;padding:0 0 26px 0;opacity:0;translate:0 18px;transition:opacity .8s,translate .8s}
.tl li.in{opacity:1;translate:0 0}
.tl li::before{content:"";position:absolute;left:-34px;top:8px;width:7px;height:7px;border-radius:50%;background:var(--lac)}
.tl li.yr{font:italic 400 clamp(34px,4vw,48px)/1 var(--disp);color:rgba(29,42,34,.14);padding-bottom:18px}
.tl li.yr::before{display:none}
.tl time{font:italic 500 14px/1 var(--disp);color:var(--lac);display:block;margin-bottom:6px}
.tl b{display:block;font:400 17.5px/1.5 var(--disp)}
.tl small{color:var(--ink45)}
@media(prefers-reduced-motion:reduce){.tl li{opacity:1;translate:none}}

/* ---------- Hỏi AI trang ---------- */
.chat .sugg-tabs{display:flex;gap:8px;flex-wrap:wrap;margin:20px 0 10px}
.chat .sugg-tabs button{border:1px solid var(--hair);background:none;border-radius:999px;padding:10px 17px;font:500 13.5px/1 var(--body);color:var(--ink70);transition:all .25s}
.chat .sugg-tabs button[aria-pressed="true"]{background:var(--lac);border-color:var(--lac);color:var(--silk)}
.sugg{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:18px}
.sugg button{border:1px dashed var(--hair);background:none;border-radius:999px;padding:9px 15px;font:400 13.5px/1.35 var(--body);color:var(--ink70);transition:all .25s}
.sugg button:hover{border-style:solid;border-color:var(--lac);color:var(--ink)}
.sugg button.asked{opacity:.4}
.log{display:flex;flex-direction:column;gap:14px;margin:16px 0}
.msg{max-width:72ch;padding:15px 20px;border-radius:var(--r)}
.msg.user{align-self:flex-end;background:var(--lac);color:var(--silk)}
.msg.bot{background:var(--paper);border:1px solid var(--hair2)}
.msg.bot.thinking p{color:var(--ink45);animation:pulse 1.4s infinite}
@keyframes pulse{50%{opacity:.45}}
.msg p{margin:0;white-space:pre-wrap}
.srcs{display:flex;flex-wrap:wrap;gap:7px;margin-top:10px}
.srcs a{font:500 11.5px/1.3 var(--body);color:var(--lac);border:1px solid var(--hair2);border-radius:999px;padding:6px 11px;text-decoration:none}
.follow{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.follow a,.follow button{font:500 12px/1.3 var(--body);border:1px solid var(--hair2);background:none;border-radius:999px;padding:7px 12px;text-decoration:none;color:var(--ink70)}
.faq-sec{padding-bottom:clamp(70px,10vw,128px)}
.faq h2{margin-bottom:18px}
.faq details{border-top:1px solid var(--hair2);padding:0 2px}
.faq details:last-of-type{border-bottom:1px solid var(--hair2)}
.faq summary{cursor:pointer;font:500 16.5px/1.55 var(--disp);padding:16px 0;list-style:none;display:flex;justify-content:space-between;gap:12px}
.faq summary::after{content:"+";color:var(--lac);font-size:21px;flex:none}
.faq details[open] summary::after{content:"\2212"}
.faq p{color:var(--ink70);margin:0 0 18px}
.join-mini{display:flex;gap:16px;align-items:center;background:var(--paper);border:1px solid var(--hair2);border-radius:var(--r);padding:18px 20px}
.join-txt{display:flex;flex-direction:column;gap:3px}
.join-txt b{font:500 16.5px/1.4 var(--disp)}
.join-txt small{color:var(--ink45)}
.join-qr{border-radius:4px}
.join-btn{display:inline-flex;margin-top:8px;padding:11px 18px;border-radius:999px;background:var(--lac);color:var(--silk);font:600 13px/1 var(--body);text-decoration:none;align-self:flex-start}

/* ---------- fab ---------- */
.fab{position:fixed;right:16px;bottom:16px;z-index:70;display:inline-flex;align-items:center;gap:9px;background:var(--lac);color:var(--silk);border-radius:999px;padding:14px 21px;font:600 14px/1 var(--body);text-decoration:none;box-shadow:0 16px 40px -14px rgba(18,32,26,.5)}
.fab .g{width:8px;height:8px;border-radius:50%;background:var(--silk);flex:none}
.fab:hover{filter:brightness(1.06)}

/* ---------- lightbox: gian tối xem tranh ---------- */
dialog#lb{border:0;background:rgba(14,22,18,.97);width:100vw;height:100dvh;max-width:100vw;max-height:100dvh;margin:0;padding:0;color:var(--silk)}
#lb .fr2{position:absolute;inset:56px 16px 62px}
#lb img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;border-radius:2px}
#lb .wm2{position:absolute;right:10px;bottom:8px;font:italic 500 12.5px/1 var(--disp);opacity:.55}
#lb p{position:absolute;left:16px;right:16px;bottom:16px;margin:0;text-align:center;font:italic 400 14.5px/1.5 var(--disp);color:var(--lacL)}
#lb .x,#lb .pv,#lb .nx{position:absolute;z-index:2;background:none;border:1px solid var(--hairD);color:var(--silk);border-radius:50%;width:44px;height:44px;font-size:17px}
#lb .x{top:10px;right:12px}
#lb .pv{left:12px;top:50%;transform:translateY(-50%)}
#lb .nx{right:12px;top:50%;transform:translateY(-50%)}
#lb .x:hover,#lb .pv:hover,#lb .nx:hover{border-color:var(--lacL);color:var(--lacL)}
#lb.loading img{opacity:.3}

/* ---------- footer: gian đêm khép phòng tranh ---------- */
footer{background:var(--ink2);border-top:1px solid var(--hair2);position:relative;overflow:clip;color:var(--silk)}
footer .join{padding-top:clamp(44px,6vw,74px)}
footer .join h3{font-size:clamp(23px,2.6vw,30px)}
.join-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:14px;margin-top:18px}
.join-card{display:flex;gap:16px;align-items:center;border:1px solid var(--hairD2);border-radius:var(--r);padding:18px;text-decoration:none;background:rgba(252,250,243,.04)}
footer .join-txt small{color:var(--silk45)}
footer .join-btn{background:var(--lacL);color:var(--ink2)}
footer .foot{display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:clamp(20px,4vw,50px);padding-top:clamp(38px,6vw,62px);padding-bottom:30px;font-size:14px}
footer .foot p{color:var(--silk45);font-size:13px}
footer .foot h4{font:italic 500 15px/1.3 var(--disp);color:var(--lacL);margin:0 0 12px}
footer .foot ul{list-style:none;margin:0;padding:0;display:grid;gap:9px}
footer .foot a{color:var(--silk70);text-decoration:none}
footer .foot a:hover{color:var(--silk)}
footer .copy{padding-bottom:18px;color:var(--silk45);font-size:12.5px}
footer .gwm{display:block;text-align:center;font:italic 500 clamp(44px,10vw,138px)/1.05 var(--disp);color:transparent;-webkit-text-stroke:1px rgba(243,239,227,.15);white-space:nowrap;overflow:clip;padding:18px 0 6px;user-select:none}
@media(max-width:860px){footer .foot{grid-template-columns:1fr}}

/* ---------- qac ---------- */
.qac{position:absolute;z-index:95;background:var(--paper);border:1px solid var(--hair2);border-radius:var(--r);box-shadow:0 24px 60px -24px rgba(18,32,26,.4);overflow:hidden}
.qac button{display:block;width:100%;text-align:left;border:0;background:none;padding:11px 16px;font:400 14px/1.45 var(--body);color:var(--ink70)}
.qac button[aria-selected="true"],.qac button:hover{background:var(--wall2);color:var(--ink)}
.qac b{color:var(--lac);font-weight:600}

/* ---------- bảng tin ---------- */
.nfilter{display:flex;gap:8px;flex-wrap:wrap}
.nfilter .chip[aria-pressed="true"]{background:var(--lac);color:var(--silk);border-color:var(--lac)}
.nlist .card{margin-bottom:12px}
.nlist .card .kicker{font-size:13px;margin-bottom:6px}

/* ---------- hạt bụi trong nắng xiên phòng tranh ---------- */
canvas.motes{position:fixed;inset:0;width:100vw;height:100dvh;pointer-events:none;z-index:60}

/* ---------- mobile ---------- */
@media(max-width:720px){
  .msg{max-width:100%}
  .hero .figs{gap:16px}
  .hero .figs div{min-width:40%}
}

/* ---------- vạch tiến trình đọc: chỉ sơn mài mảnh ---------- */
.hzp{position:fixed;inset:0 0 auto 0;height:0;z-index:90;pointer-events:none}
.hzp i{position:absolute;left:0;top:0;height:2px;width:100%;background:linear-gradient(90deg,var(--lac),rgba(138,70,49,.4));transform-origin:left;transform:scaleX(var(--p,0))}
.hzp b{display:none}

/* ---------- sân khấu E-Deck / Sky Deck ---------- */
.decks{display:grid;grid-template-columns:minmax(220px,.9fr) 2.1fr;gap:clamp(18px,3vw,40px);align-items:start}
.deck-tabs{display:flex;flex-direction:column}
.dtab{position:relative;text-align:left;background:none;border:0;border-top:1px solid var(--hair2);padding:20px 4px;display:flex;flex-direction:column;gap:3px;opacity:.45;transition:opacity .5s,padding-left .4s;cursor:pointer}
.dtab:last-child{border-bottom:1px solid var(--hair2)}
.dtab b,.dtab{font:500 clamp(22px,2.6vw,30px)/1.2 var(--disp)}
.dtab small{font:400 13.5px/1.5 var(--body);color:var(--ink45)}
.dtab.on{opacity:1;padding-left:14px}
.dtab::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,var(--lac),rgba(138,70,49,.2));transform:scaleX(0);transform-origin:left}
.dtab.on.tick::after{animation:dfill 6.2s linear forwards}
@keyframes dfill{to{transform:scaleX(1)}}
@media(prefers-reduced-motion:reduce){.dtab.on.tick::after{animation:none;transform:scaleX(1)}}
.deck-stage{position:relative}
.dpane{display:none;grid-template-columns:1.5fr 1fr;gap:clamp(16px,2.6vw,32px);align-items:end}
.dpane.on{display:grid;animation:dfade .7s cubic-bezier(.2,.7,.3,1)}
@keyframes dfade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@media(prefers-reduced-motion:reduce){.dpane.on{animation:none}}
.dlist{list-style:none;margin:0;padding:0}
.dlist li{padding:11px 2px;border-top:1px solid var(--hair2);font:400 15px/1.55 var(--body);color:var(--ink70)}
.dlist li:first-child{border-top:0}
@media(max-width:860px){.decks{grid-template-columns:1fr}.deck-tabs{flex-direction:row;gap:10px}.dtab{border:1px solid var(--hair2);border-radius:var(--r);padding:12px 14px;flex:1}.dtab.on{padding-left:14px}.dtab::after{bottom:0}.dpane,.dpane.on{grid-template-columns:1fr}}