/* Layout: một căn phòng tối, đèn tường hắt ánh vàng xuống bàn làm việc. Đèn bật = giao diện sáng ấm; đèn tắt = giao diện tối.
   Các món trên bàn là cửa vào từng khu (laptop = công cụ, sổ = hành trình, sách, khung ảnh = liên hệ, cốc = mời cà phê). */
:root{
  /* đèn bật (sáng) */
  --bg:#ECE7DF; --card:#F8F5EF; --ink:#231E19; --ink-2:#6A6157; --line:#D9D1C4;
  --accent:#B06A22; --accent-soft:#F3E3CC; --ok:#3D7F58; --ok-soft:#DFEDE3; --risk:#B44A35; --risk-soft:#F5DFD9; --paid:#8A6A12; --paid-soft:#F2E9C9;
  --wall:#8F8A82; --photo-wall:#3A3631; --wall-text:#2A231B; --nav-ink:#2A231B; --nav-dim:#4E453B;
  --desk-top:#6E5038; --desk-edge:#3E2D20; --desk-leg:#2A1F16; --shadow-obj:rgba(40,25,10,.28);
  --lap-body:#C7CACD; --lap-dark:#8E9296; --screen:#1F252D; --screen-line:#7FA9E8;
  --book1:#8E3B2F; --book2:#2F4F6B; --book3:#C9A15A; --mug:#EDE8DE; --leaf:#4E7A55; --pot:#B49F84;
  --paper:#F4EFE5; --paper-line:#C2B8A7; --frame:#3B3632; --frame-in:#D7C7AC; --label:#2A231B;
  --glow-o:1; --lamp-strip:#FFE2A6;
  --f-wall:"Lexend","Be Vietnam Pro",system-ui,sans-serif; --f-hand:"Patrick Hand","Comic Sans MS",cursive;
  --f-body:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif; --f-mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --r:14px; --shadow:0 1px 0 rgba(35,30,25,.05),0 10px 24px -16px rgba(35,30,25,.45);
  color-scheme:light; --fade:4.5s; --ease:cubic-bezier(.45,0,.25,1);
}
:root[data-lamp="off"]{
  --bg:#101012; --card:#18181B; --ink:#ECE6DB; --ink-2:#A39B8F; --line:#2B2B30;
  --accent:#E8B06A; --accent-soft:#33281A; --ok:#7CC49B; --ok-soft:#1C3127; --risk:#E58A72; --risk-soft:#3A2420; --paid:#E2C25A; --paid-soft:#352E17;
  --wall:#0D0D0F; --wall-text:#CFC6B8; --nav-ink:#ECE5D8; --nav-dim:#9C9488;
  --desk-top:#211B16; --desk-edge:#16120E; --desk-leg:#100D0A; --shadow-obj:rgba(0,0,0,0);
  --lap-body:#393C40; --lap-dark:#26282B; --screen:#14233D; --screen-line:#5B8BDA;
  --book1:#3A1E1A; --book2:#1A2633; --book3:#4A3C22; --mug:#3A3835; --leaf:#22372A; --pot:#38312A;
  --paper:#34312C; --paper-line:#4A453E; --frame:#1E1C1A; --frame-in:#3A342B; --label:#D9D0C1;
  --glow-o:0; --lamp-strip:#5A5650;
  --shadow:0 1px 0 rgba(0,0,0,.3),0 12px 26px -16px rgba(0,0,0,.8);
  color-scheme:dark; --fade:4s;
}
*{box-sizing:border-box}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15.5px;line-height:1.6;transition:background-color var(--fade) var(--ease),color var(--fade) var(--ease)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px;border-radius:6px}
h1,h2,h3{text-wrap:balance;margin:0;line-height:1.15}
p{margin:0}
.wrap{max-width:1140px;margin:0 auto;padding-inline:20px}
.mono{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2)}
.muted{color:var(--ink-2)}
.hand{font-family:var(--f-hand)}

/* ---------- header (dùng chung) ---------- */
.topnav{display:flex;align-items:center;justify-content:space-between;gap:14px;flex-wrap:wrap;padding-block:16px}
.brand{display:flex;align-items:baseline;gap:10px;text-decoration:none;color:var(--nav-ink);transition:color var(--fade) var(--ease)}
.brand-name{font-family:var(--f-hand);font-size:30px;line-height:1}
.brand-sub{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--nav-dim);transition:color var(--fade) var(--ease)}
nav.main{display:flex;gap:2px;flex-wrap:wrap;align-items:center}
nav.main a{font-family:var(--f-wall);font-weight:500;font-size:13px;letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:7px 11px;border-radius:8px;color:var(--nav-dim);transition:color var(--fade) var(--ease)}
nav.main a:hover,nav.main a[aria-current="page"]{color:var(--nav-ink)}
nav.main a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--accent)}
.lampbtn{display:inline-flex;align-items:center;gap:7px;border:1.5px solid currentColor;background:transparent;color:var(--nav-ink);border-radius:999px;padding:5px 13px 5px 9px;cursor:pointer;font-size:13px;font-weight:600;margin-left:6px;transition:color var(--fade) var(--ease)}
.lampbtn svg{width:17px;height:17px}
.lampbtn .bulb-fill{fill:var(--lamp-strip);transition:fill var(--fade) var(--ease)}

/* ---------- ROOM (trang chủ) ---------- */
.room{position:relative;overflow:hidden;background:var(--wall);height:100vh;min-height:560px;display:flex;flex-direction:column;transition:background-color var(--fade) var(--ease);isolation:isolate}
.room .topnav{position:relative;z-index:5}
.glow,.beam,.vignette{position:absolute;inset:0;pointer-events:none}
.scene{position:relative;flex:1;display:flex;flex-direction:column;padding-top:46px}
.scene .glow,.scene .beam{inset:-110px -40px 0 -40px}
.glow{background:radial-gradient(ellipse 48% 92% at 50% 0%,rgba(255,232,184,1) 0%,rgba(250,216,162,.94) 16%,rgba(234,200,156,.66) 36%,rgba(204,182,154,.26) 58%,rgba(0,0,0,0) 76%);opacity:var(--glow-o);transition:opacity var(--fade) var(--ease);z-index:1}
.beam{background:radial-gradient(ellipse 18% 30% at 50% 0%,rgba(255,240,205,.9),rgba(255,240,205,0) 70%);opacity:var(--glow-o);transition:opacity var(--fade) var(--ease);z-index:1}
.vignette{background:radial-gradient(ellipse 75% 95% at 50% 30%,rgba(0,0,0,0) 40%,rgba(18,13,8,.5) 100%);z-index:2}
:root[data-lamp="off"] .vignette{background:radial-gradient(ellipse 70% 80% at 50% 70%,rgba(40,60,100,.10),rgba(0,0,0,0) 60%)}
.lamp{position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(340px,58vw);height:40px;z-index:4;background:linear-gradient(180deg,#DADCDD,#A9ADB0 70%,#8D9194);border-radius:0 0 4px 4px;box-shadow:0 2px 6px rgba(0,0,0,.25);filter:brightness(calc(.22 + .78*var(--glow-o)));transition:filter var(--fade) var(--ease)}
.lamp::after{content:"";position:absolute;left:4%;right:4%;bottom:-3px;height:5px;border-radius:3px;background:var(--lamp-strip);box-shadow:0 0 18px 6px rgba(255,214,140,calc(.7*var(--glow-o)));transition:background var(--fade) var(--ease),box-shadow var(--fade) var(--ease)}
.cord{position:absolute;top:10px;left:calc(50% + min(170px,29vw) + 4px);z-index:4;width:28px;height:72px;border:0;background:transparent;cursor:pointer;padding:0;transition:transform .25s cubic-bezier(.3,1.6,.5,1)}
.cord::before{content:"";position:absolute;left:13px;top:-30px;width:1.5px;height:84px;background:linear-gradient(var(--nav-dim),var(--nav-ink))}
.cord::after{content:"";position:absolute;left:7px;top:52px;width:14px;height:20px;border-radius:7px 7px 9px 9px;background:var(--accent);box-shadow:0 2px 0 rgba(0,0,0,.25)}
.cord.pulled{transform:translateY(14px)}
.cord .tip{position:absolute;left:30px;top:52px;white-space:nowrap;font-family:var(--f-hand);font-size:17px;color:var(--nav-ink);opacity:.8;transition:color var(--fade) var(--ease)}
.wall-text{position:relative;z-index:3;text-align:center;margin-top:clamp(40px,9vh,110px);padding-inline:20px}
.wall-text .eyebrow{font-family:var(--f-mono);font-size:12px;letter-spacing:.22em;color:var(--wall-text);opacity:.7;text-transform:uppercase;transition:color var(--fade) var(--ease)}
.wall-text h1{font-family:var(--f-wall);font-weight:600;font-size:clamp(28px,4.6vw,56px);letter-spacing:.06em;text-transform:uppercase;color:var(--wall-text);margin-top:14px;transition:color var(--fade) var(--ease)}
.wall-text p{font-family:var(--f-wall);font-weight:300;font-size:clamp(16px,1.8vw,20px);color:var(--wall-text);opacity:.85;margin-top:12px;transition:color var(--fade) var(--ease)}
.desk{position:relative;z-index:3;margin-top:auto;width:min(1180px,100vw);align-self:center;margin-bottom:var(--front)}
.scene{--front:clamp(40px,9vh,96px)}
.desk::before{content:"";position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:83.4%;height:8.4%;z-index:-1;
  background:linear-gradient(180deg,color-mix(in srgb,var(--desk-top) 82%,#000) 0,var(--desk-top) 100%);transition:background var(--fade) var(--ease)}
.desk::after{content:"";position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:91.8%;height:calc(8.2% + var(--front) + 4px);z-index:-1;
  background:linear-gradient(180deg,var(--desk-edge) 0,var(--desk-edge) 10px,var(--desk-leg) 10px,color-mix(in srgb,var(--desk-leg) 70%,#000) 100%);transition:background var(--fade) var(--ease)}
.desklight{position:absolute;left:50%;transform:translateX(-50%);width:100vw;top:83.4%;height:8.4%;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 38% 140% at 50% 0,rgba(255,226,170,.34),rgba(255,226,170,0));opacity:var(--glow-o);transition:opacity var(--fade) var(--ease)}
.desk .cshadow{fill:var(--shadow-obj)}
.desk .lit{opacity:var(--glow-o);transition:opacity var(--fade) var(--ease)}
.desk svg{display:block;width:100%;height:auto;overflow:visible}
.desk .hot{cursor:pointer}
.desk .hot .lbl{font-family:var(--f-hand);font-size:20px;fill:var(--label);opacity:0;transition:opacity .25s,fill var(--fade) var(--ease)}
.desk .hot .lead{stroke:var(--label);stroke-width:1.4;fill:none;opacity:.55;stroke-dasharray:3 4;transition:stroke var(--fade) var(--ease)}
.desk .hot:hover .lbl,.desk .hot:focus .lbl{opacity:1}
.desk .hot:hover .obj,.desk .hot:focus .obj{transform:translateY(-3px)}
.desk .obj{transition:transform .25s ease;transform-box:fill-box}
.desk .hot:focus{outline:none}
.desk .hot:focus-visible .lbl{text-decoration:underline}
.desk svg *{transition:fill var(--fade) var(--ease),stroke var(--fade) var(--ease)}
.steam path{stroke:var(--label);stroke-width:2;fill:none;opacity:calc(.35*var(--glow-o));stroke-linecap:round;animation:rise 3.2s ease-in-out infinite}
.steam path:nth-child(2){animation-delay:1.1s}
@keyframes rise{0%{transform:translateY(6px);opacity:0}40%{opacity:calc(.4*var(--glow-o))}100%{transform:translateY(-10px);opacity:0}}
.screen-glow{opacity:calc(1 - var(--glow-o));transition:opacity var(--fade) var(--ease)}
.deskchips{display:none}
.strip{position:relative;z-index:3;border-top:1px solid color-mix(in srgb,var(--wall-text) 25%,transparent);margin-inline:clamp(16px,4vw,60px);padding-block:14px 18px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;font-family:var(--f-wall);font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--wall-text);transition:color var(--fade) var(--ease)}
:root:not([data-lamp="off"]) .strip{color:#1E1813}
.strip .wave{display:flex;gap:3px;align-items:center}
.strip .wave i{display:block;width:2px;background:currentColor;opacity:.8;border-radius:1px}
.strip .grow{flex:1;min-width:0}
.strip .sep{width:1px;height:22px;background:currentColor;opacity:.5}
.strip b{font-weight:500}

/* ---------- sub-page header ---------- */
.subhead{position:relative;background:var(--wall);overflow:hidden;transition:background-color var(--fade) var(--ease)}
.subhead .glow{background:radial-gradient(ellipse 40% 160% at 50% 0%,rgba(255,228,176,.95),rgba(236,200,150,.5) 35%,rgba(0,0,0,0) 70%)}
.subhead .lamp{width:min(220px,40vw);height:22px}
.subhead .topnav{position:relative;z-index:5;padding-block:30px 18px}

/* ---------- content ---------- */
main{padding-block:44px 70px}
section{margin-top:64px}
section:first-child{margin-top:0}
.sec-head{display:flex;align-items:end;justify-content:space-between;gap:16px;margin-bottom:22px;flex-wrap:wrap}
.sec-head h2,.page-title{font-family:var(--f-wall);font-weight:600;font-size:clamp(24px,3vw,34px);letter-spacing:.02em}
.page-title{font-size:clamp(30px,4.4vw,48px);margin-top:8px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);transition:background-color var(--fade) var(--ease),border-color var(--fade) var(--ease)}
.btn{display:inline-flex;align-items:center;gap:8px;border:1.5px solid var(--ink);background:var(--ink);color:var(--bg);padding:10px 18px;border-radius:12px;text-decoration:none;font-weight:600;cursor:pointer;font-size:15px;transition:transform .15s}
.btn:hover{transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink)}
.btn.amber{background:var(--accent);border-color:var(--accent);color:#1A1208}
.btn.sm{padding:6px 12px;font-size:13.5px;border-radius:10px}

.lines{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.line{padding:26px;display:grid;gap:12px;text-decoration:none}
.line .k{font-family:var(--f-hand);font-size:26px;color:var(--accent)}
.line h3{font-family:var(--f-wall);font-weight:500;font-size:22px}
.line ul{margin:0;padding-left:18px;color:var(--ink-2);font-size:14.5px;display:grid;gap:3px}

.episode{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:stretch}
.player{aspect-ratio:16/9;max-width:100%;border-radius:12px;background:#121214;position:relative;overflow:hidden;display:grid;place-items:center}
.player .pglow{position:absolute;inset:0;background:radial-gradient(ellipse 50% 90% at 50% 0%,rgba(255,226,170,.85),rgba(225,190,140,.35) 40%,rgba(0,0,0,0) 72%)}
.player .ptitle{position:relative;font-family:var(--f-wall);font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#2A231B;font-size:clamp(16px,2.4vw,24px)}
.player .pbar{position:absolute;left:5%;right:5%;bottom:7%;border-top:1px solid rgba(237,230,218,.35);padding-top:8px;display:flex;justify-content:space-between;font-family:var(--f-wall);font-size:10.5px;letter-spacing:.12em;color:#EDE6DA;text-transform:uppercase;gap:8px}
.shorts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.short{aspect-ratio:9/16;max-width:100%;border-radius:10px;border:1.5px dashed var(--line);display:flex;align-items:end;padding:10px;font-size:12.5px;color:var(--ink-2);background:var(--card)}

.tools{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:18px}
.tool{padding:18px;display:flex;flex-direction:column;gap:10px;text-decoration:none;min-width:0;transition:transform .2s,background-color var(--fade) var(--ease),border-color var(--fade) var(--ease)}
.tool:hover{transform:translateY(-3px)}
.tool .row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.tool .no{font-family:var(--f-hand);font-size:22px;color:var(--accent);line-height:1}
.tool h3{font-size:16.5px;font-weight:600;line-height:1.35}
.tool .pain{font-size:14px;color:var(--ink-2)}
.tool .meta{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;padding-top:6px}
.pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap}
.pill::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}
.pill.ok{background:var(--ok-soft);color:var(--ok)}
.pill.soon{background:transparent;color:var(--ink-2);border:1px solid var(--line)}
.pill.paid{background:var(--paid-soft);color:var(--paid)}
.pill.risk{background:var(--risk-soft);color:var(--risk)}
.chip{font-size:12px;color:var(--ink-2);border:1px solid var(--line);border-radius:6px;padding:2px 7px}
.filters{display:flex;gap:8px;flex-wrap:wrap;align-items:center;margin-top:22px}
.filters button{border:1.5px solid var(--line);background:var(--card);padding:6px 14px;border-radius:999px;cursor:pointer;font-size:14px}
.filters button[aria-pressed="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.search{flex:1;min-width:200px;max-width:320px;border:1.5px solid var(--line);background:var(--card);border-radius:999px;padding:7px 16px}
.group-title{font-family:var(--f-wall);font-weight:500;font-size:20px;margin:34px 0 14px;display:flex;align-items:center;gap:12px}
.group-title::after{content:"";flex:1;height:1px;background:var(--line)}

.order{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;padding:28px;align-items:center}
.form{display:grid;gap:12px}
.form label{display:grid;gap:5px;font-size:13.5px;font-weight:600}
.form input,.form textarea,.form select{border:1.5px solid var(--line);background:var(--bg);border-radius:10px;padding:10px 12px;font-weight:400;width:100%}
.form textarea{min-height:92px;resize:vertical}
.note{font-size:13px;color:var(--ink-2)}
.toast{font-size:14px;color:var(--ok);font-weight:600}
.empty{border:1.5px dashed var(--line);border-radius:12px;padding:16px;font-size:14px;color:var(--ink-2);margin-top:12px}

.crumb{font-size:14px;color:var(--ink-2)} .crumb a{color:var(--accent);text-decoration:none}
.detail{display:grid;grid-template-columns:1.4fr .8fr;gap:28px;margin-top:16px;align-items:start}
.block{padding:22px;margin-top:20px}
.block h2{font-family:var(--f-wall);font-weight:500;font-size:20px;margin-bottom:12px}
.toolframe{border:2px dashed var(--line);border-radius:12px;min-height:220px;display:grid;place-items:center;text-align:center;padding:20px}
.vids{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px}
.vid{border:1.5px dashed var(--line);border-radius:10px;padding:12px;font-size:13.5px}
.vid b{display:block;font-size:12px;font-family:var(--f-mono);letter-spacing:.1em;color:var(--accent);margin-bottom:4px}
.side{position:sticky;top:20px;display:grid;gap:16px}
.side .card{padding:18px}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;font-size:14px;margin:0}
.kv dt{color:var(--ink-2)} .kv dd{margin:0;font-weight:500}
.warn{background:var(--paid-soft);border-radius:10px;padding:12px 14px;font-size:14px}
.cols3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.cat{padding:20px}
.cat h3{font-family:var(--f-wall);font-weight:500;font-size:20px}
.eps{display:grid;gap:12px}
.ep{display:grid;grid-template-columns:90px 1fr auto;gap:16px;align-items:center;padding:16px 18px}
.ep .n{font-family:var(--f-wall);font-weight:600;font-size:22px;letter-spacing:.06em}
footer.site{border-top:1px solid var(--line);padding-block:26px}
footer.site .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:14px;color:var(--ink-2)}

@media (max-width:980px){
  .lines,.episode,.order,.detail,.two{grid-template-columns:1fr}
  .side{position:static}
  .cols3{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .admin{grid-template-columns:1fr}
  .admin aside{flex-direction:row;flex-wrap:wrap;border-right:0;border-bottom:1px solid var(--line)}
  .admin aside .grp{display:none} .admin aside .ab{width:100%}
}
@media (max-width:640px){
  .room{min-height:620px}
  .cord .tip{display:none}
  .desk .hot .lbl{display:none}
  .room{height:auto;min-height:100svh}
  .deskchips{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;position:relative;z-index:3;padding:10px 16px 4px}
  .deskchips a{font-family:var(--f-hand);font-size:17px;text-decoration:none;color:var(--wall-text);border:1px solid color-mix(in srgb,var(--wall-text) 35%,transparent);border-radius:999px;padding:2px 11px}
  .strip .hide-m{display:none}
  .scene{padding-top:40px;--front:14px}
  nav.main a{font-size:11.5px;padding:6px 7px}
  .strip{font-size:11px;gap:10px} .strip .sep{display:none}
  .ep{grid-template-columns:1fr}
  .admin .pane{padding:18px 16px 48px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ---------- trang chủ bằng ảnh ---------- */
.photo-room{background:#141210;height:max(100vh,calc(100vw / 1.7921))}
.homenav{position:absolute;left:0;right:0;top:15.6%;z-index:6;display:flex;flex-direction:column;align-items:center;gap:clamp(4px,.8vh,10px);padding-inline:16px}
.homenav .brand{color:#2A1E14}
.homenav .brand-name{font-size:clamp(24px,2.3vw,36px)}
.homenav nav.main{justify-content:center}
.homenav nav.main a{color:rgba(42,30,20,.78);font-size:clamp(11px,.85vw,13px)}
.homenav nav.main a:hover{color:#1A120B}
:root[data-lamp="off"] .homenav .brand{color:#E9E1D3}
:root[data-lamp="off"] .homenav nav.main a{color:rgba(233,225,211,.72)}
:root[data-lamp="off"] .homenav nav.main a:hover{color:#FFF6E8}
.homenav .brand,.homenav nav.main a{transition:color var(--fade) var(--ease)}
.pullcord{position:absolute;left:64.6%;top:9.4%;width:2.2%;height:7.6%;z-index:7;border:0;padding:0;background:transparent;cursor:pointer;transform-origin:top center;transition:transform .35s cubic-bezier(.3,1.7,.5,1)}
.pullcord::before{content:"";position:absolute;left:50%;top:0;width:1.5px;height:calc(100% - 14px);transform:translateX(-50%);background:linear-gradient(#3a332d,#8a7d70)}
.pullcord::after{content:"";position:absolute;left:50%;bottom:0;width:12px;height:18px;transform:translateX(-50%);border-radius:6px 6px 7px 7px;background:radial-gradient(circle at 35% 30%,#e8c58a,#a8762f 70%);box-shadow:0 2px 3px rgba(0,0,0,.45)}
.pullcord.pulled{transform:translateY(12px)}
.pullcord:hover{animation:sway 1.6s ease-in-out}
@keyframes sway{0%,100%{rotate:0deg}30%{rotate:4deg}65%{rotate:-3deg}}
.pullcord .tag{position:absolute;left:calc(100% + 6px);bottom:-4px;white-space:nowrap;font-family:var(--f-hand);font-size:17px;color:#FFF3DE;background:rgba(20,16,12,.72);padding:1px 10px;border-radius:999px;opacity:0;transition:opacity .25s;pointer-events:none}
.pullcord:hover .tag,.pullcord:focus-visible .tag{opacity:1}
.photo{position:absolute;left:50%;top:0;transform:translateX(-50%);width:max(100%,calc(100vh * 1.7921));aspect-ratio:2000/1116}
.ph{position:absolute;inset:0;width:100%;height:100%;display:block;user-select:none}
.ph.on{opacity:var(--glow-o);transition:opacity var(--fade) var(--ease)}
.vnflag{position:absolute;left:93.1%;top:83.8%;width:5.5%;height:auto;z-index:2;pointer-events:none;filter:drop-shadow(0 4px 6px rgba(0,0,0,.35))}
.vnflag .shade{opacity:0;transition:opacity var(--fade) var(--ease)}
:root[data-lamp="off"] .vnflag .shade{opacity:.94}
.spot{position:absolute;display:block;border-radius:12px;z-index:4;background:transparent;border:0;padding:0;cursor:pointer;transition:box-shadow .3s,background-color .3s}
.spot:hover,.spot:focus-visible{background:rgba(255,226,170,.08);box-shadow:0 0 0 1.5px rgba(255,226,170,.55),0 0 28px rgba(255,214,150,.25);outline:none}
.spot .tag{position:absolute;left:50%;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(4px);white-space:nowrap;font-family:var(--f-hand);font-size:19px;color:#FFF3DE;background:rgba(20,16,12,.72);padding:2px 12px;border-radius:999px;opacity:0;transition:opacity .25s,transform .25s;pointer-events:none}
.lampspot .tag{bottom:auto;top:calc(100% + 8px)}
.spot:hover .tag,.spot:focus-visible .tag{opacity:1;transform:translateX(-50%) translateY(0)}
.photo-text{position:absolute;left:0;right:0;top:33%;text-align:center;z-index:3;pointer-events:none;padding-inline:20px}
.photo-text h1{font-family:var(--f-wall);font-weight:600;font-size:clamp(26px,3.4vw,52px);letter-spacing:.06em;text-transform:uppercase;color:#1E1812;transition:color var(--fade) var(--ease)}
.photo-text p{font-family:var(--f-wall);font-weight:300;font-size:clamp(15px,1.5vw,21px);color:#2A2119;margin-top:10px;transition:color var(--fade) var(--ease)}
:root[data-lamp="off"] .photo-text h1{color:#D9CFBF}
:root[data-lamp="off"] .photo-text p{color:#A79D8E}
@media (max-width:760px){
  .photo-room{height:auto;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end}
  .photo-room{height:auto}
  .homenav{position:relative;top:auto;padding-top:18px}
  .homenav .brand{color:#E9E1D3}
  .homenav nav.main a{color:rgba(233,225,211,.75)}
  .photo-room .pullcord{display:none}
  .photo{position:relative;left:auto;top:auto;transform:none;width:100%;margin-top:auto}
  .photo-room{background:linear-gradient(180deg,#141210 0,#1F1C19 100%)}
  .photo-text{top:auto;bottom:100%;padding-bottom:clamp(24px,8vh,70px)}
  .photo-text h1{font-size:clamp(22px,7vw,32px);color:#EDE3D2}
  .photo-text p{font-size:14px;margin-top:8px;color:#BFB4A3}
  :root[data-lamp="off"] .photo-text h1{color:#D9CFBF}
  .spot .tag{display:none}
  .photo-room .deskchips{display:flex;padding-bottom:16px}
  .photo-room .deskchips a,.photo-room .lampchip{color:#EDE3D2;border:1px solid rgba(237,227,210,.35);background:transparent;font-family:var(--f-hand);font-size:17px;border-radius:999px;padding:2px 11px}
}

/* ---------- bổ sung bản chính thức ---------- */
.notice{background:var(--accent);color:#1A1208;text-align:center;font-size:14px;padding:7px 16px}
.prose{max-width:68ch;font-size:16.5px;line-height:1.75}
.prose h2{font-family:var(--f-wall);font-weight:600;font-size:24px;margin:32px 0 10px}
.prose h3{font-family:var(--f-wall);font-weight:500;font-size:19px;margin:24px 0 8px}
.prose p{margin:0 0 14px}
.prose ul,.prose ol{margin:0 0 14px;padding-left:22px}
.prose img{border-radius:12px;margin:10px 0}
.prose a{color:var(--accent)}
.video{position:relative;aspect-ratio:16/9;max-width:100%;border-radius:12px;overflow:hidden;background:#000}
.video.vert{aspect-ratio:9/16;max-width:320px}
.video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.toolembed{width:100%;min-height:640px;border:1px solid var(--line);border-radius:12px;background:#fff}
.qr{width:220px;max-width:100%;border-radius:12px;background:#fff;padding:8px;display:block;margin-top:12px}
.loading{padding:60px 0;text-align:center;color:var(--ink-2)}
.postlist{display:grid;gap:14px}
.postitem{display:grid;gap:4px;padding:18px 20px;text-decoration:none}
.postitem h3{font-family:var(--f-wall);font-weight:500;font-size:19px}
.socials{display:flex;gap:14px;flex-wrap:wrap}
.socials a{color:var(--ink-2);text-decoration:none}
.socials a:hover{color:var(--ink)}
.err{color:var(--risk);font-size:14px;font-weight:600}

/* ---------- Bộ công cụ bản 1.2: tab chủ đề, thẻ công cụ, popup chi tiết ---------- */
:root{--c-kt:#B06A22;--c-hc:#2F6F8F;--c-kn:#9B4D6A;--c-ht:#5A5FA8;--free:#2E8B57;--free-soft:#DDF1E4;--paid-c:#C0392B;--paid-bg:#F8DEDA}
:root[data-lamp="off"]{--c-kt:#E8B06A;--c-hc:#79B8D6;--c-kn:#E39AB5;--c-ht:#A5A9F0;--free:#6FD39A;--free-soft:#163225;--paid-c:#FF8A7A;--paid-bg:#3D1F1B}
.g-kt{--g:var(--c-kt)} .g-hc{--g:var(--c-hc)} .g-kn{--g:var(--c-kn)} .g-ht{--g:var(--c-ht)}
.tools-head{display:flex;justify-content:space-between;align-items:end;gap:18px;flex-wrap:wrap}
.legend{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);flex-wrap:wrap}
.price{display:inline-flex;align-items:center;font-size:12.5px;font-weight:700;letter-spacing:.02em;padding:3px 10px;border-radius:999px;white-space:nowrap;line-height:1.35}
.price.free{background:var(--free-soft);color:var(--free)}
.price.paid{background:var(--paid-bg);color:var(--paid-c)}
.price.lg{font-size:14px;padding:4px 12px}
.pill.ok{background:var(--free-soft);color:var(--free)}

.tabs{display:flex;gap:6px;margin-top:26px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin;-webkit-overflow-scrolling:touch}
.tabs button{flex:none;display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--line);background:var(--card);padding:8px 15px;border-radius:999px;cursor:pointer;font-size:14px;font-weight:600;color:var(--ink-2);transition:all .2s}
.tabs button:hover{color:var(--ink);border-color:var(--ink-2)}
.tabs button[aria-selected="true"]{border-color:var(--ink);background:var(--ink);color:var(--bg)}
.tabs .cnt{font-size:11.5px;font-weight:600;min-width:20px;text-align:center;padding:0 6px;border-radius:999px;background:color-mix(in srgb,currentColor 14%,transparent)}
.tabs .tab-ic{width:16px;height:16px;color:var(--accent)}
.tabs button[aria-selected="true"] .tab-ic{color:inherit}
.toolbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:14px 0 18px}
.toolbar .search{max-width:360px}
.gdot{width:10px;height:10px;border-radius:50%;background:var(--g);flex:none}

.tgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(258px,1fr));gap:18px}
.tcard{position:relative;display:flex;text-decoration:none;color:var(--ink);background:var(--card);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow);overflow:hidden;min-width:0;isolation:isolate;
  transition:transform .28s cubic-bezier(.2,.8,.2,1),box-shadow .28s,border-color .28s,background-color var(--fade) var(--ease)}
.tcard::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(120% 70% at 100% 0%,color-mix(in srgb,var(--g) 16%,transparent),transparent 60%);opacity:.9;transition:opacity .3s}
.tcard::after{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--g);opacity:.85}
.tcard:hover,.tcard:focus-visible{transform:translateY(-5px);border-color:color-mix(in srgb,var(--g) 55%,var(--line));box-shadow:0 18px 38px -20px color-mix(in srgb,var(--g) 70%,#000),var(--shadow);outline:none}
.tcard:hover::before{opacity:1.4}
.tc-main{padding:18px 18px 16px 22px;display:flex;flex-direction:column;gap:10px;flex:1;min-width:0}
.tc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.ticon{width:50px;height:50px;border-radius:14px;display:grid;place-items:center;flex:none;color:var(--g);background:color-mix(in srgb,var(--g) 14%,var(--card));border:1px solid color-mix(in srgb,var(--g) 28%,transparent);transition:transform .35s cubic-bezier(.3,1.6,.5,1)}
.ticon svg{width:26px;height:26px}
.ticon.lg{width:64px;height:64px;border-radius:18px}.ticon.lg svg{width:34px;height:34px}
.tcard:hover .ticon{transform:rotate(-6deg) scale(1.06)}
.tcard h3{font-family:var(--f-wall);font-size:17.5px;font-weight:600;line-height:1.3;letter-spacing:.005em}
.tc-status{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.tc-grp{font-size:12px;color:var(--ink-2)}
.tc-pain{font-size:14px;color:var(--ink-2);line-height:1.5}
.tc-pain b{color:var(--ink);font-weight:600}
.tc-tags{display:flex;gap:6px;flex-wrap:wrap}
.tc-tags span{font-size:12px;color:var(--g);background:color-mix(in srgb,var(--g) 9%,transparent);border-radius:6px;padding:2px 8px}
.tm-side .tc-tags span{color:var(--ink-2);background:var(--bg);border:1px solid var(--line)}
.tc-more{margin-top:auto;padding-top:4px;font-size:13px;font-weight:600;color:var(--g);opacity:0;transform:translateX(-6px);transition:opacity .25s,transform .25s}
.tcard:hover .tc-more,.tcard:focus-visible .tc-more{opacity:1;transform:none}
@media (hover:none){.tc-more{opacity:1;transform:none}}
.tcard.st-soon .ticon{filter:saturate(.55)}
.tcard.st-soon h3{color:color-mix(in srgb,var(--ink) 88%,var(--bg))}
.tcard.wide{grid-column:span 2}
.tcard.wide .tc-art{flex:0 0 42%;position:relative;min-height:220px;overflow:hidden}
.tcard.wide .tc-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
@media (max-width:640px){.tcard.wide{grid-column:auto;flex-direction:column}.tcard.wide .tc-art{flex-basis:auto;min-height:130px}}

/* banner tượng trưng (tự vẽ theo nhóm + icon) */
.art-gen{position:absolute;inset:0;display:grid;place-items:center;overflow:hidden;color:#fff;
  background:radial-gradient(90% 120% at 15% 10%,color-mix(in srgb,var(--g) 55%,#fff) 0%,var(--g) 45%,color-mix(in srgb,var(--g) 55%,#120c06) 100%)}
.art-grid{position:absolute;inset:-20%;background-image:linear-gradient(rgba(255,255,255,.13) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.13) 1px,transparent 1px);background-size:26px 26px;transform:rotate(-8deg);mask-image:radial-gradient(70% 70% at 50% 50%,#000,transparent)}
.art-ring{position:absolute;border:1.5px solid rgba(255,255,255,.28);border-radius:50%}
.art-ring.r1{width:62%;aspect-ratio:1}.art-ring.r2{width:96%;aspect-ratio:1;border-style:dashed;border-color:rgba(255,255,255,.18);animation:spin 60s linear infinite}
.art-icon{position:relative;width:min(34%,120px);height:auto;stroke-width:1.3;filter:drop-shadow(0 6px 14px rgba(0,0,0,.25))}
@keyframes spin{to{transform:rotate(360deg)}}

/* popup */
.modal-open{overflow:hidden}
.tm-wrap{position:fixed;inset:0;z-index:100;display:grid;place-items:center;padding:24px}
.tm-backdrop{position:absolute;inset:0;background:rgba(18,13,8,.58);backdrop-filter:blur(3px)}
.tm{position:relative;width:min(980px,100%);max-height:calc(100vh - 48px);max-height:calc(100dvh - 48px);overflow:auto;overscroll-behavior:contain;background:var(--card);color:var(--ink);border:1px solid var(--line);border-radius:22px;box-shadow:0 40px 80px -30px rgba(0,0,0,.6)}
.tm-x{position:sticky;top:12px;float:right;margin:12px 12px -52px 0;z-index:3;width:40px;height:40px;border-radius:50%;border:0;background:rgba(20,15,10,.55);color:#fff;display:grid;place-items:center;cursor:pointer;backdrop-filter:blur(4px)}
.tm-x svg{width:20px;height:20px}
.tm-x:hover{background:rgba(20,15,10,.8)}
.tm-banner{position:relative;height:clamp(150px,26vh,230px);overflow:hidden}
.tm-banner>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.tm-banner .art-icon{width:min(22%,110px)}
.tm-banner-txt{position:absolute;left:24px;top:18px}
.tm-cat{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:#fff;background:rgba(0,0,0,.28);padding:4px 10px;border-radius:999px}
.tm-body{padding:0 28px 28px}
.tm-head{display:flex;gap:16px;align-items:flex-start;margin-top:-32px;position:relative}
.tm-head>div{padding-top:40px}
.tm-head .ticon{background:var(--card);box-shadow:0 8px 20px -10px rgba(0,0,0,.4)}
.tm-head h2{font-family:var(--f-wall);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.2}
.tm-meta{display:flex;gap:8px;align-items:center;flex-wrap:wrap;margin-top:8px}
.tm-grid{display:grid;grid-template-columns:1.55fr 1fr;gap:28px;margin-top:22px;align-items:start}
.tm-sec+.tm-sec{margin-top:24px}
.tm-sec h3,.tm-card h3{font-family:var(--f-mono);font-size:11.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);margin-bottom:10px}
.tm-pain{font-size:18px;line-height:1.5;font-family:var(--f-wall);font-weight:300;border-left:3px solid var(--g);padding-left:14px}
.hl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:12px}
.hl-item{border:1px solid var(--line);border-radius:14px;padding:14px;background:color-mix(in srgb,var(--g) 6%,var(--card))}
.hl-n{display:block;font-family:var(--f-mono);font-size:12px;color:var(--g);margin-bottom:4px}
.hl-item b{display:block;font-size:15px;line-height:1.35}
.hl-item p{font-size:13.5px;color:var(--ink-2);margin-top:4px;line-height:1.5}
.ft{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:8px 18px}
.ft li{position:relative;padding-left:26px;font-size:14.5px;line-height:1.45}
.ft li::before{content:"";position:absolute;left:0;top:2px;width:17px;height:17px;border-radius:50%;background:color-mix(in srgb,var(--g) 16%,transparent) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/11px no-repeat}
.tm-side{display:grid;gap:14px;position:sticky;top:12px}
.tm-card{border:1px solid var(--line);border-radius:14px;padding:16px;background:var(--bg)}
.tm-card.use{background:color-mix(in srgb,var(--g) 7%,var(--bg));border-color:color-mix(in srgb,var(--g) 30%,var(--line))}
.tm-actions{display:grid;gap:8px}
.tm-actions .btn{justify-content:center}
.soonbox{font-size:14px;font-weight:600;margin-bottom:10px}
.steps{margin:14px 0 0;padding-left:20px;display:grid;gap:6px;font-size:14px;color:var(--ink-2)}
.tm .kv{grid-template-columns:auto 1fr;font-size:13.5px;margin:0}
@media (max-width:820px){
  .tm-wrap{padding:0;place-items:end stretch}
  .tm{width:100%;max-height:94vh;max-height:94dvh;border-radius:20px 20px 0 0}
  .tm-grid{grid-template-columns:1fr}
  .tm-side{position:static}
  .tm-body{padding:0 18px 24px}
  .ft{grid-template-columns:1fr}
}

/* =====================================================================
   Bộ công cụ v1.5: lời trích của Tuấn · carousel "sách mở" · lưới "sách gập" · popup gọn
   ===================================================================== */
.tools-head{display:block}
.tquote{margin:18px 0 6px;max-width:52em;position:relative;padding:4px 0 0 34px}
.tquote::before{content:"“";position:absolute;left:0;top:-14px;font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--accent);opacity:.75}
.tquote blockquote{margin:0;font-family:var(--f-hand);font-size:clamp(19px,1.9vw,22.5px);line-height:1.45;color:var(--ink)}
.tquote blockquote a{color:var(--accent);text-underline-offset:3px}
.tquote figcaption{margin-top:8px;font-family:var(--f-hand);font-size:22px;color:var(--accent);text-align:right;max-width:100%}
.toolbar .note:empty{display:none}

/* ---- Trạng thái chỉ còn Active / Coming soon ---- */
.stb{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 9px;border-radius:999px;white-space:nowrap;color:var(--ink-2);border:1px solid var(--line);background:transparent}
.stb::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;opacity:.7}
.stb.on{color:var(--free);background:var(--free-soft);border-color:transparent}
.stb.on::before{opacity:1;box-shadow:0 0 0 3px color-mix(in srgb,var(--free) 25%,transparent)}

/* ---- Carousel tiện ích nổi bật ---- */
.carousel{position:relative;margin-top:6px}
.car-track{display:grid;grid-auto-flow:column;grid-auto-columns:calc((100% - 2*26px)/3);gap:26px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;padding:14px 4px 26px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.car-track::-webkit-scrollbar{display:none}
.car-item{scroll-snap-align:start;min-width:0}
.car-btn{position:absolute;top:calc(50% - 22px);z-index:3;width:44px;height:44px;border-radius:50%;border:1.5px solid var(--line);background:var(--card);color:var(--ink);font-size:26px;line-height:1;cursor:pointer;box-shadow:var(--shadow);display:grid;place-items:center;transition:opacity .2s,transform .2s}
.car-btn:hover:not(:disabled){transform:scale(1.07);border-color:var(--ink-2)}
.car-btn:disabled{opacity:0;pointer-events:none}
.car-btn.prev{left:-20px}.car-btn.next{right:-20px}
.carousel.static .car-btn{display:none}
.car-dots{display:flex;gap:7px;justify-content:center;margin-top:-8px}
.car-dots span{width:7px;height:7px;border-radius:99px;background:var(--line);transition:all .25s}
.car-dots span.on{width:22px;background:var(--accent)}
@media (max-width:980px){.car-track{grid-auto-columns:calc((100% - 26px)/2)}}
@media (max-width:640px){.car-track{grid-auto-columns:88%;gap:16px}.car-btn{display:none}}

/* ---- Sách mở: 2 trang ---- */
.obook{--pg:#FBF8F1;--pg-ink:#2A231B;--pg-dim:#6A6157;position:relative;display:grid;grid-template-columns:1fr 1fr;height:330px;text-decoration:none;color:var(--pg-ink);
  border-radius:6px 6px 10px 10px;background:color-mix(in srgb,var(--g) 70%,#2a1a0e);padding:7px 7px 9px;
  box-shadow:0 22px 34px -22px rgba(40,25,10,.55),0 2px 0 rgba(0,0,0,.08);transition:transform .35s var(--ease),box-shadow .35s}
:root[data-lamp="off"] .obook{--pg:#26231F;--pg-ink:#ECE6DB;--pg-dim:#A39B8F}
.obook:hover,.obook:focus-visible{transform:translateY(-6px);box-shadow:0 30px 44px -24px rgba(40,25,10,.6)}
.ob-page{position:relative;background:var(--pg);display:flex;flex-direction:column;min-width:0;overflow:hidden}
.ob-left{border-radius:3px 0 0 6px;box-shadow:inset -14px 0 18px -14px rgba(0,0,0,.35);padding:12px 14px 16px 12px}
.ob-right{border-radius:0 3px 6px 0;box-shadow:inset 14px 0 18px -14px rgba(0,0,0,.35);padding:16px 14px 14px 18px;gap:9px}
.ob-left::after,.ob-right::after{content:"";position:absolute;top:6px;bottom:-2px;width:5px;background:repeating-linear-gradient(90deg,transparent 0 1px,rgba(0,0,0,.08) 1px 2px)}
.ob-left::after{left:-1px}.ob-right::after{right:-1px}
.ob-art{position:relative;flex:1 1 auto;min-height:120px;border-radius:4px;overflow:hidden;background:linear-gradient(150deg,var(--g),color-mix(in srgb,var(--g) 55%,#000))}
.ob-art img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.ob-art .art-icon{width:min(42%,86px)}
.ob-name{margin-top:12px;font-family:var(--f-wall);font-weight:600;font-size:16.5px;line-height:1.28;color:var(--pg-ink);text-wrap:balance}
.ob-lbl{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.ob-pain{font-family:var(--f-hand);font-size:19px;line-height:1.3;color:var(--pg-ink);display:-webkit-box;-webkit-line-clamp:6;-webkit-box-orient:vertical;overflow:hidden}
.ob-tags{display:flex;flex-wrap:wrap;gap:5px}
.ob-tags span{font-size:11.5px;color:var(--pg-dim);background:color-mix(in srgb,var(--g) 10%,transparent);border-radius:99px;padding:1px 8px}
.ob-foot{margin-top:auto;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.obook.st-soon .ob-art{filter:saturate(.6)}

/* ---- Sách gập: bìa sách ---- */
.bgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:30px 26px;padding:6px 4px 10px;perspective:1400px}
.cbook{position:relative;display:block;aspect-ratio:3/4;text-decoration:none;color:#fff;transform-style:preserve-3d;transform:rotateY(-7deg);transform-origin:left center;transition:transform .45s var(--ease)}
.cbook:hover,.cbook:focus-visible{transform:rotateY(-18deg) translateY(-6px)}
.cb-pages{position:absolute;top:4px;bottom:4px;right:-9px;width:14px;border-radius:0 4px 4px 0;
  background:repeating-linear-gradient(180deg,#F6F1E6 0 2px,#E2D8C5 2px 3px);box-shadow:inset 3px 0 5px rgba(0,0,0,.18);transform:translateZ(-8px)}
:root[data-lamp="off"] .cb-pages{background:repeating-linear-gradient(180deg,#4a443b 0 2px,#3a352e 2px 3px)}
.cb-cover{position:absolute;inset:0;display:flex;flex-direction:column;padding:18px 18px 16px 30px;border-radius:4px 10px 10px 4px;overflow:hidden;
  background:radial-gradient(130% 80% at 100% 0%,rgba(255,255,255,.18),transparent 55%),linear-gradient(160deg,var(--g),color-mix(in srgb,var(--g) 58%,#120a04));
  box-shadow:0 24px 34px -20px rgba(30,18,8,.6),inset 0 0 0 1px rgba(255,255,255,.08)}
.cb-spine{position:absolute;left:0;top:0;bottom:0;width:16px;background:linear-gradient(90deg,rgba(0,0,0,.35),rgba(0,0,0,.08) 60%,rgba(255,255,255,.18) 80%,rgba(0,0,0,.15));border-right:1px solid rgba(0,0,0,.18)}
.cb-top{display:flex;justify-content:space-between;align-items:center;gap:8px}
.cb-ic{width:40px;height:40px;border-radius:50%;display:grid;place-items:center;border:1.5px solid rgba(255,255,255,.45);background:rgba(255,255,255,.1)}
.cb-ic svg{width:22px;height:22px}
.cb-cover .price{background:rgba(255,255,255,.92)}
.cb-title{margin-top:auto;font-family:var(--f-wall);font-weight:600;font-size:clamp(17px,1.5vw,19.5px);line-height:1.25;text-wrap:balance;text-shadow:0 1px 10px rgba(0,0,0,.2)}
.cb-rule{display:block;width:38px;height:2px;background:rgba(255,255,255,.65);margin:11px 0 9px}
.cb-pain{font-size:13.5px;line-height:1.45;color:rgba(255,255,255,.9);display:-webkit-box;-webkit-line-clamp:4;-webkit-box-orient:vertical;overflow:hidden}
.cb-foot{display:flex;justify-content:space-between;align-items:center;gap:6px;margin-top:14px}
.cb-grp{font-family:var(--f-mono);font-size:9.5px;letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72);text-align:right}
.cb-cover .stb{color:#fff;border-color:rgba(255,255,255,.4)}
.cb-cover .stb.on{background:rgba(255,255,255,.95);color:var(--free)}
:root[data-lamp="off"] .cb-cover .stb.on{background:#0f1f17}
.cbook.st-soon .cb-cover{filter:saturate(.7) brightness(.96)}
@media (prefers-reduced-motion:reduce){.cbook,.cbook:hover{transform:none}.obook:hover{transform:none}}
@media (max-width:640px){.bgrid{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px 18px}.cb-cover{padding:14px 12px 12px 22px}.cb-pain{-webkit-line-clamp:3;font-size:12.5px}.cb-spine{width:11px}}

/* ---- Popup gọn ---- */
.tm-head{align-items:flex-end;flex-wrap:wrap}
.tm-head>div{flex:1 1 320px}
.tm-cta{display:flex;gap:8px;flex-wrap:wrap;padding-bottom:4px}
.tm-tag{font-size:12px;color:var(--ink-2)}
.tm-key{display:grid;grid-template-columns:1.4fr 1fr;gap:14px;margin-top:22px}
.tm-kcard{border-radius:14px;padding:16px 18px;border:1px solid color-mix(in srgb,var(--g) 30%,var(--line));background:color-mix(in srgb,var(--g) 8%,var(--card))}
.tm-kcard.who{background:var(--bg);border-color:var(--line)}
.tm-klbl{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--g);margin-bottom:6px}
.tm-kcard.who .tm-klbl{color:var(--ink-2)}
.tm-kcard.pain p{font-family:var(--f-wall);font-weight:500;font-size:clamp(17px,1.7vw,20px);line-height:1.4}
.tm-kcard.who p{font-size:15.5px;font-weight:500}
.tm-body>.tm-sec{margin-top:26px}
.tm .hl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.tm-vids{display:grid;gap:14px}
.tm-vids.multi{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.tm-vids figure{margin:0}
.ytlite{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:12px;overflow:hidden;cursor:pointer;background:#000}
.ytlite.short,.yt-frame.short{aspect-ratio:9/16;max-width:320px}
.ytlite img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s}
.ytlite:hover img{opacity:1}
.yt-play{position:absolute;left:50%;top:50%;width:68px;height:48px;margin:-24px 0 0 -34px;border-radius:14px;background:#e1251b;box-shadow:0 6px 18px rgba(0,0,0,.35)}
.yt-play::after{content:"";position:absolute;left:28px;top:14px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.yt-frame{width:100%;aspect-ratio:16/9;border:0;border-radius:12px;display:block}
@media (max-width:760px){.tm-key{grid-template-columns:1fr}.tm .hl{grid-template-columns:1fr}.tm-cta{width:100%}.tm-cta .btn{flex:1;justify-content:center}}

/* v1.5.1: màu bìa theo từng công cụ, video gọn, sách mở trên điện thoại */
.cb-cover{background:radial-gradient(130% 80% at 100% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(160deg,var(--bc,var(--g)),color-mix(in srgb,var(--bc,var(--g)) 55%,#0d0703))}
.obook{background:color-mix(in srgb,var(--bc,var(--g)) 88%,#000)}
.ob-art{background:linear-gradient(150deg,var(--bc,var(--g)),color-mix(in srgb,var(--bc,var(--g)) 50%,#000))}
.ob-lbl{color:var(--bc,var(--g))}
:root[data-lamp="off"] .ob-lbl{color:color-mix(in srgb,var(--bc,var(--g)) 50%,#fff)}
.ob-tags span{background:color-mix(in srgb,var(--bc,var(--g)) 10%,transparent)}
.cb-foot{justify-content:flex-start}
.tm-vids:not(.multi){max-width:640px}
.tm-head>div{flex:1 1 420px}
@media (max-width:640px){.obook{height:300px}.ob-tags{display:none}.ob-pain{-webkit-line-clamp:7;font-size:17.5px}.ob-right{padding:14px 10px 12px 14px}.ob-left{padding:10px 10px 12px}.ob-name{font-size:15px}}

/* =====================================================================
   Bộ công cụ v1.6: màu theo nhóm · sao vàng nổi bật · lời trích dạng hộp · carousel sách gập · popup sách mở
   ===================================================================== */
:root{--c-kt:#1F5FA8;--c-hc:#2A7A55;--c-kn:#B45F1E;--c-ht:#6B4C9A;--gold:#F4B71E}
:root[data-lamp="off"]{--c-kt:#7DB3F0;--c-hc:#7DD0A6;--c-kn:#F0A86A;--c-ht:#B9A2E6;--gold:#FFC93A}
/* màu bìa sách (giữ đậm cả khi tắt đèn) */
.g-kt{--bk:#1E4F8F}.g-hc{--bk:#24684A}.g-kn{--bk:#9A4E17}.g-ht{--bk:#5A3D86}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
[hidden]{display:none!important}

/* ---- Lời trích: hộp trích dẫn, rộng bằng bố cục bên dưới ---- */
.tquote{max-width:none;margin:22px 0 4px;padding:26px 40px 18px 58px;background:var(--card);border:1px solid var(--line);border-left:4px solid var(--accent);border-radius:6px 18px 18px 6px;box-shadow:0 14px 30px -26px rgba(40,25,10,.5)}
.tquote::before{left:16px;top:8px;font-size:60px}
.tquote blockquote{position:relative;font-size:clamp(17px,1.55vw,20px);line-height:1.5;text-align:justify;text-justify:inter-word}
.tquote blockquote p+p{margin-top:8px}
.tquote blockquote p:last-child::after{content:"”";font-family:Georgia,serif;font-size:46px;line-height:0;color:var(--accent);opacity:.75;vertical-align:-.42em;margin-left:6px}
.tquote figcaption{font-size:21px;margin-top:4px}
@media (max-width:640px){.tquote{padding:22px 18px 14px 40px}.tquote::before{left:8px;font-size:48px}.tquote blockquote{text-align:left}}

/* ---- Tab nhóm + ô tìm trên 1 hàng ---- */
.tbar{display:flex;align-items:center;justify-content:space-between;gap:12px 18px;flex-wrap:wrap;margin:26px 0 8px}
.tbar .tabs{margin-top:0;flex:1 1 auto;min-width:0}
.tbar .search{flex:0 1 270px;min-width:200px;max-width:300px}
#tabnote{margin:4px 0 0}#tabnote:empty{display:none}
.tabs button[class*="g-"]{color:var(--g);background:var(--card);border-color:color-mix(in srgb,var(--g) 38%,var(--line))}
.tabs button[class*="g-"]:hover{border-color:var(--g)}
.tabs button[class*="g-"][aria-selected="true"]{background:var(--bk);border-color:var(--bk);color:#fff}
.tab-star{display:inline-grid;width:16px;height:16px}
.tab-star svg,.cb-star svg{width:100%;height:100%;fill:var(--gold)}
.tabs button[aria-selected="true"] .tab-star svg{filter:drop-shadow(0 0 4px rgba(244,183,30,.8))}
.gdot{background:var(--g)}

/* ---- Bìa sách theo nhóm + sao vàng phát sáng ---- */
.cb-cover{background:radial-gradient(130% 80% at 100% 0%,rgba(255,255,255,.16),transparent 55%),linear-gradient(160deg,var(--bk,#3a3a3a),color-mix(in srgb,var(--bk,#3a3a3a) 52%,#05070d))}
.cb-cover .price{background:rgba(255,255,255,.92)}
.cb-foot{justify-content:flex-start;gap:6px}
.cb-star{position:relative;width:30px;height:30px;display:grid;filter:drop-shadow(0 0 6px rgba(255,200,40,.85)) drop-shadow(0 0 14px rgba(255,190,30,.45));animation:starGlow 2.6s ease-in-out infinite}
@keyframes starGlow{0%,100%{filter:drop-shadow(0 0 5px rgba(255,200,40,.75)) drop-shadow(0 0 10px rgba(255,190,30,.35))}50%{filter:drop-shadow(0 0 9px rgba(255,210,60,1)) drop-shadow(0 0 20px rgba(255,190,30,.6))}}
@media (prefers-reduced-motion:reduce){.cb-star{animation:none}}

/* ---- Carousel Tiện ích nổi bật: sách gập, 3 cuốn / lượt + thanh lướt ---- */
.car-track{grid-auto-columns:calc((100% - 2*30px)/3);gap:30px;padding:16px 16px 28px 6px;perspective:1400px}
.car-item{perspective:1400px}
.car-item .cbook{aspect-ratio:4/4.5}
.car-item .cb-pain{-webkit-line-clamp:3}
.car-btn.prev{left:-22px}.car-btn.next{right:-22px}
.car-bar{position:relative;width:min(420px,70%);height:6px;margin:2px auto 0;border-radius:99px;background:var(--line);cursor:pointer;touch-action:none}
.car-bar::before{content:"";position:absolute;inset:-9px 0}
.car-bar span{position:absolute;top:0;bottom:0;border-radius:99px;background:var(--accent);transition:left .12s linear}
@media (max-width:980px){.car-track{grid-auto-columns:calc((100% - 30px)/2)}}
@media (max-width:640px){.car-track{grid-auto-columns:78%;gap:18px}.car-item .cbook{aspect-ratio:3/4}}

/* ---- Popup chi tiết: cuốn sách đang mở ---- */
.tm.tm-book{width:min(1080px,100%);background:color-mix(in srgb,var(--bk) 90%,#000);border:0;border-radius:10px 10px 16px 16px;padding:12px 12px 16px;
  --pg:#FBF8F1;--pg-ink:#2A231B;--pg-dim:#6A6157}
:root[data-lamp="off"] .tm.tm-book{--pg:#24211D;--pg-ink:#ECE6DB;--pg-dim:#A39B8F}
.tm-book .tm-x{margin:4px 4px -44px 0;background:rgba(20,15,10,.6)}
.bk-pages{display:grid;grid-template-columns:1fr 1fr;min-height:min(560px,calc(100dvh - 120px))}
.bk-page{position:relative;background:var(--pg);color:var(--pg-ink);padding:30px 34px 26px;display:flex;flex-direction:column;gap:18px;min-width:0}
.bk-left{border-radius:4px 0 0 8px;box-shadow:inset -22px 0 26px -22px rgba(0,0,0,.4)}
.bk-right{border-radius:0 4px 8px 0;box-shadow:inset 22px 0 26px -22px rgba(0,0,0,.4);padding-right:40px}
.bk-left::after,.bk-right::after{content:"";position:absolute;top:8px;bottom:-3px;width:6px;background:repeating-linear-gradient(90deg,transparent 0 1px,rgba(0,0,0,.09) 1px 2px)}
.bk-left::after{left:-2px}.bk-right::after{right:-2px}
.bk-grp{font-family:var(--f-mono);font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--g)}
.bk-head{display:flex;align-items:center;gap:14px;margin-top:-8px}
.bk-ic{width:54px;height:54px;flex:none;border-radius:50%;display:grid;place-items:center;color:#fff;background:linear-gradient(150deg,var(--bk),color-mix(in srgb,var(--bk) 55%,#000));box-shadow:0 8px 18px -10px rgba(0,0,0,.5)}
.bk-ic svg{width:28px;height:28px}
.bk-head h2{font-family:var(--f-wall);font-weight:600;font-size:clamp(21px,2.3vw,27px);line-height:1.22;text-wrap:balance}
.bk-meta{display:flex;gap:7px;align-items:center;flex-wrap:wrap;margin-top:-6px}
.bk-meta .tm-tag{color:var(--pg-dim)}
.bk-blk h3{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--g);margin-bottom:8px;display:flex;align-items:center;gap:10px}
.bk-blk h3::after{content:"";flex:1;height:1px;background:color-mix(in srgb,var(--g) 30%,transparent)}
.bk-pain{font-family:var(--f-hand);font-size:clamp(20px,2vw,24px);line-height:1.35}
.bk-who{font-size:15.5px;line-height:1.55;color:var(--pg-ink)}
.bk-cta{display:flex;gap:8px;flex-wrap:wrap}
.bk-go{background:var(--bk);border-color:var(--bk);color:#fff}
.bk-go:hover{filter:brightness(1.12)}
.bk-dates{margin-top:auto;font-size:12px;color:var(--pg-dim);border-top:1px dashed color-mix(in srgb,var(--pg-dim) 40%,transparent);padding-top:10px}
.vd-frame{position:relative;display:block;width:100%;aspect-ratio:16/9;border:0;padding:0;border-radius:10px;overflow:hidden;background:linear-gradient(150deg,var(--bk),color-mix(in srgb,var(--bk) 50%,#000));box-shadow:0 14px 26px -18px rgba(0,0,0,.6)}
button.vd-frame,a.vd-frame{cursor:pointer}
.vd-frame>img{position:absolute;inset:0;z-index:1;width:100%;height:100%;object-fit:cover;object-position:top left;transition:transform .4s var(--ease)}
.vd-frame:hover>img{transform:scale(1.03)}
.vd-frame .art-icon{width:min(24%,90px)}
.vd-frame .yt-play{z-index:2}
.vd-soon{position:absolute;z-index:2;left:12px;bottom:12px;font-size:12.5px;font-weight:600;color:#fff;background:rgba(15,12,8,.7);padding:4px 11px;border-radius:99px}
iframe.vd-frame{aspect-ratio:16/9;height:auto}
.bk-hl{list-style:none;margin:0;padding:0;display:grid;gap:12px;counter-reset:hl}
.bk-hl li{counter-increment:hl;display:grid;grid-template-columns:34px 1fr;column-gap:10px;align-items:baseline}
.bk-hl li::before{content:"0" counter(hl);grid-row:span 2;font-family:var(--f-hand);font-size:24px;line-height:1;color:var(--g)}
.bk-hl b{font-family:var(--f-wall);font-weight:600;font-size:15.5px;line-height:1.35}
.bk-hl span{font-size:14px;line-height:1.5;color:var(--pg-dim)}
@media (max-width:820px){
  .tm.tm-book{padding:6px 6px 8px;border-radius:16px 16px 0 0}
  .bk-pages{grid-template-columns:1fr;min-height:0}
  .bk-left,.bk-right{border-radius:4px;box-shadow:none;padding:24px 20px}
  .bk-left{border-radius:10px 10px 0 0;border-bottom:1px dashed color-mix(in srgb,var(--pg-dim) 40%,transparent)}
  .bk-right{border-radius:0 0 4px 4px}
  .bk-left::after,.bk-right::after{display:none}
  .bk-dates{margin-top:0}
  .bk-cta .btn{flex:1;justify-content:center}
}
/* v1.6.1 */
.tbar .tabs{flex:0 1 auto}
.tbar .search{flex:1 1 190px;min-width:180px;max-width:300px}
.car-item .cbook{aspect-ratio:4/4.25}
.tm-book .tm-x{position:absolute;top:20px;right:22px;float:none;margin:0}
.bk-right{padding-top:30px}
.bk-right .bk-blk:first-child h3{padding-right:52px}
.bk-page{margin-top:0}
@media (max-width:640px){.cb-foot{flex-wrap:wrap;gap:4px}.cb-foot .stb,.cb-foot .price{font-size:11px;padding:2px 7px}.cb-star{width:24px;height:24px}}

/* =====================================================================
   v1.6.2: carousel chuyển từng cuốn + chấm vị trí · hiệu ứng rê chuột trên sách
   ===================================================================== */
.car-track{scroll-behavior:auto}
.car-track.moving{scroll-snap-type:none}
.car-bar{display:none}
.car-dots{display:flex;gap:7px;justify-content:center;margin-top:0}
.car-dots button{width:8px;height:8px;padding:0;border:0;border-radius:99px;background:var(--line);cursor:pointer;transition:width .35s var(--ease),background .35s}
.car-dots button:hover{background:var(--ink-2)}
.car-dots button[aria-selected="true"]{width:24px;background:var(--accent)}

/* Rê chuột: sách nhấc lên, phóng nhẹ, bìa hé mở để lộ trang giấy, icon nghiêng */
.cbook{transform-style:preserve-3d;transition:transform .45s var(--ease),filter .45s}
.cbook::before{content:"";position:absolute;inset:3px 2px 3px 6px;border-radius:2px 8px 8px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.16),transparent 18%),repeating-linear-gradient(180deg,#FBF8F1 0 22px,#EFE8DA 22px 23px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
:root[data-lamp="off"] .cbook::before{background:linear-gradient(90deg,rgba(0,0,0,.3),transparent 18%),repeating-linear-gradient(180deg,#2B2823 0 22px,#24211D 22px 23px)}
.cb-cover{transform-origin:left center;transition:transform .55s var(--ease),box-shadow .55s;backface-visibility:hidden}
.cb-ic{transition:transform .45s var(--ease),background .3s}
.cbook:hover,.cbook:focus-visible{transform:rotateY(-4deg) translateY(-10px) scale(1.035)}
.cbook:hover .cb-cover,.cbook:focus-visible .cb-cover{transform:rotateY(-24deg);box-shadow:18px 26px 36px -18px rgba(30,18,8,.6),inset 0 0 0 1px rgba(255,255,255,.1)}
.cbook:hover .cb-ic,.cbook:focus-visible .cb-ic{transform:rotate(-12deg) scale(1.1);background:rgba(255,255,255,.2)}
.cbook:hover .cb-star{animation-duration:1.1s}
.cbook:active{transform:rotateY(-2deg) translateY(-4px) scale(1.01)}
@media (hover:none){.cbook:hover{transform:rotateY(-7deg)}.cbook:hover .cb-cover{transform:none}}
@media (prefers-reduced-motion:reduce){.cbook:hover,.cbook:focus-visible{transform:translateY(-4px)}.cbook:hover .cb-cover{transform:none}.cbook:hover .cb-ic{transform:none}}
.car-track{padding-top:28px;padding-bottom:32px;margin-top:-12px}

/* v1.6.3: popup sách mở – cân 2 trang, tiêu đề mục nổi bật hơn */
.bk-page{gap:16px}
.bk-meta{margin-top:-4px}
.bk-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:-8px}
.bk-tags span{font-size:12.5px;color:var(--pg-dim);background:color-mix(in srgb,var(--g) 9%,transparent);border-radius:99px;padding:2px 10px}
.bk-blk h3{font-family:var(--f-wall);font-size:15px;font-weight:700;letter-spacing:.02em;text-transform:none;color:var(--bk);margin-bottom:10px;gap:12px}
:root[data-lamp="off"] .bk-blk h3{color:var(--g)}
.bk-blk h3::before{content:"";width:5px;height:18px;border-radius:3px;background:var(--bk);flex:none}
:root[data-lamp="off"] .bk-blk h3::before{background:var(--g)}
.bk-blk h3::after{background:color-mix(in srgb,var(--g) 35%,transparent)}
.bk-right .bk-blk:first-child h3{text-transform:uppercase;letter-spacing:.08em}
.bk-ben{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.bk-ben li{position:relative;padding-left:26px;font-size:15px;line-height:1.5}
.bk-ben li::before{content:"";position:absolute;left:2px;top:.32em;width:16px;height:16px;border-radius:50%;background:color-mix(in srgb,var(--g) 16%,transparent)}
.bk-ben li::after{content:"";position:absolute;left:7px;top:calc(.32em + 4px);width:4px;height:7px;border:solid var(--bk);border-width:0 2px 2px 0;transform:rotate(45deg)}
:root[data-lamp="off"] .bk-ben li::after{border-color:var(--g)}
.bk-who{font-weight:500}
/* trang phải gọn: tiện ích nổi bật 2 cột */
.bk-hl{grid-template-columns:1fr 1fr;gap:14px 18px}
.bk-hl li{grid-template-columns:1fr;row-gap:2px}
.bk-hl li::before{grid-row:auto;font-size:22px}
.bk-hl b{font-size:14.5px}
.bk-hl span{font-size:13.5px;line-height:1.45}
@media (max-width:820px){.bk-hl{grid-template-columns:1fr}}
.bk-hl{align-items:start}.bk-hl li{align-content:start;align-items:start}

/* v1.7: Bảng ghim – bảng bần khung gỗ, giấy note ghim theo 4 làn trạng thái; tắt đèn chỉ còn note "Sẽ làm" sáng */
:root{--cork:#C39466;--cork-dot:rgba(92,58,28,.32);--cork-lit:rgba(255,236,204,.28);--frame-wood:#7A5638;--frame-wood2:#5B3E27;
  --n-ink:#2A231B;--n-xet:#FFF0A6;--n-plan:#FFD2B3;--n-build:#CFE3FB;--n-done:#D2EFCF;--n-pin:#C2402E}
:root[data-lamp="off"]{--cork:#3A2E23;--cork-dot:rgba(0,0,0,.35);--cork-lit:rgba(255,236,204,.05);--frame-wood:#271D15;--frame-wood2:#1A140F}
.bg-intro{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-top:40px}
.bg-lead{max-width:34em;margin-top:6px;font-size:22px;line-height:1.35;color:var(--ink-2)}
.bg-cta{flex:none;padding:10px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;font-size:14.5px;text-decoration:none;transition:background .2s}
.bg-cta:hover{background:var(--accent)}
.bg-stats{display:flex;flex-wrap:wrap;gap:6px 22px;margin:22px 0 16px;font-size:14px;color:var(--ink-2)}
.bg-stats b{margin-right:5px;font-family:var(--f-wall);font-size:20px;font-weight:600;color:var(--ink)}
.cork{position:relative;padding:14px;border-radius:12px;background:linear-gradient(150deg,var(--frame-wood),var(--frame-wood2));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.14);transition:background var(--fade) var(--ease)}
.cork>.loading,.cork>.empty{margin:0;padding:40px;background:var(--cork);border-radius:4px}
.cork-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;min-height:420px;padding:22px 18px 30px;border-radius:4px;
  background-color:var(--cork);background-image:radial-gradient(var(--cork-dot) 1px,transparent 1.6px),radial-gradient(var(--cork-lit) 1px,transparent 1.7px),radial-gradient(var(--cork-dot) 1.3px,transparent 2.1px);
  background-size:7px 7px,11px 11px,17px 17px;background-position:0 0,4px 6px,9px 3px;box-shadow:inset 0 2px 10px rgba(0,0,0,.28);transition:background-color var(--fade) var(--ease)}
.lane{display:flex;flex-direction:column;gap:18px;min-width:0}
.lane-tag{position:relative;align-self:center;display:flex;align-items:center;gap:8px;margin-bottom:4px;padding:7px 14px 6px;background:#FBF8F2;color:var(--n-ink);
  font-family:var(--f-mono);font-weight:500;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 2px 4px rgba(0,0,0,.22);transform:rotate(-1deg)}
.lane-tag::before{content:"";position:absolute;left:50%;top:-7px;width:40px;height:14px;margin-left:-20px;background:rgba(255,250,235,.55);border:1px solid rgba(0,0,0,.05);transform:rotate(3deg)}
.lane-tag b{display:grid;place-items:center;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--n-ink);color:#FBF8F2;font-size:11px;letter-spacing:0}
.l-plan .lane-tag b{background:var(--n-pin)}
:root[data-lamp="off"] .lane-tag{background:#2A2622;color:#CFC6B8}
:root[data-lamp="off"] .lane-tag::before{background:rgba(255,250,235,.12)}
.lane-notes{display:flex;flex-direction:column;gap:20px}
.lane-empty{padding:18px 8px;border:1.5px dashed rgba(255,248,235,.45);border-radius:4px;color:rgba(255,248,235,.8);text-align:center;font-size:18px}
:root[data-lamp="off"] .lane-empty{border-color:rgba(255,248,235,.14);color:rgba(255,248,235,.35)}
.pnote{position:relative;padding:22px 16px 14px;background:var(--n-xet);color:var(--n-ink);border-radius:2px 2px 4px 14px/2px 2px 4px 6px;
  box-shadow:0 1px 1px rgba(0,0,0,.12),0 12px 16px -12px rgba(0,0,0,.55);transform:rotate(var(--tilt,0deg));transition:transform .25s cubic-bezier(.3,1.4,.5,1),box-shadow .25s,filter var(--fade) var(--ease)}
.pnote:hover{transform:rotate(0) translateY(-3px) scale(1.02);box-shadow:0 1px 1px rgba(0,0,0,.12),0 20px 26px -14px rgba(0,0,0,.55);z-index:2}
.n-plan{background:var(--n-plan)}.n-build{background:var(--n-build)}.n-done{background:var(--n-done)}
.n-pin{position:absolute;left:50%;top:-6px;width:16px;height:16px;margin-left:-8px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F3A493,var(--n-pin) 55%,#7E2214);box-shadow:0 3px 4px rgba(0,0,0,.35)}
.n-build .n-pin{background:radial-gradient(circle at 35% 30%,#A9C8F5,#2F67B8 55%,#173A6E)}
.n-done .n-pin{background:radial-gradient(circle at 35% 30%,#A9DDB0,#3C8A4E 55%,#1E4A28)}
.n-xet .n-pin{background:radial-gradient(circle at 35% 30%,#F7E38E,#C99A12 55%,#6E520A)}
.pnote h3{font-size:23px;line-height:1.15;font-weight:400}
.n-desc{margin-top:6px;font-size:13.5px;line-height:1.45;color:rgba(42,35,27,.82)}
.n-eta{display:inline-flex;flex-wrap:wrap;align-items:baseline;gap:5px;margin-top:10px;padding:3px 9px;border:1.5px solid rgba(42,35,27,.55);border-radius:4px;font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;transform:rotate(-2deg)}
.n-eta b{font-size:12.5px;letter-spacing:.02em}
.n-eta.late{border-color:#A3321F;color:#A3321F}
.n-eta s{opacity:.65;font-size:11px}
.n-say{margin-top:10px;font-size:17px;line-height:1.25;color:#7A3D12}
.n-say::before{content:"— "}
.n-foot{display:flex;justify-content:flex-end;margin-top:12px}
.n-vote{display:inline-flex;align-items:center;gap:7px;padding:5px 6px 5px 10px;border:1.5px solid rgba(42,35,27,.35);border-radius:999px;background:rgba(255,255,255,.45);color:var(--n-ink);font-size:13px;font-weight:600;cursor:pointer;transition:background .2s,border-color .2s}
.n-vote:hover{background:rgba(255,255,255,.8);border-color:var(--n-ink)}
.n-vote b{display:grid;place-items:center;min-width:24px;height:22px;padding:0 6px;border-radius:999px;background:var(--n-ink);color:#FFF8EC;font-size:12px}
.n-plus{font-family:var(--f-mono);font-size:11.5px}
.n-vote[aria-pressed="true"]{border-color:var(--n-ink);background:rgba(255,255,255,.85);cursor:default}
.n-vote:disabled{opacity:.6}
.n-use{padding:6px 12px;border-radius:999px;background:#2E6B3F;color:#fff;font-size:13px;font-weight:600;text-decoration:none}
.n-use:hover{background:#245632}
.pnote.bump{animation:nbump .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes nbump{40%{transform:rotate(0) scale(1.06)}}
:root[data-lamp="off"] .pnote{filter:brightness(.42) saturate(.7)}
:root[data-lamp="off"] .pnote:hover{filter:brightness(.7) saturate(.85)}
:root[data-lamp="off"] .n-plan{filter:none;box-shadow:0 0 0 1px rgba(255,210,179,.4),0 0 26px 4px rgba(255,170,110,.32),0 12px 16px -12px rgba(0,0,0,.6)}
.bg-rest{margin-top:26px}
.bg-rest ul{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:10px;margin:10px 0 0;padding:0;list-style:none}
.bg-rest li{display:flex;flex-direction:column;gap:2px;padding:12px 14px;border:1px dashed var(--line);border-radius:10px;font-size:14px}
.bg-rest li .hand{font-size:17px;color:var(--ink-2)}
.bg-rest li a{align-self:flex-start;margin-top:4px;color:var(--accent);font-weight:600;font-size:13.5px}
.bg-add{display:flex;justify-content:center;margin:56px 0 80px;scroll-margin-top:20px}
.bg-paper{position:relative;width:min(640px,100%);padding:30px clamp(18px,4vw,34px) 24px;background:#FBF8F2;color:var(--n-ink);border-radius:3px;
  background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(70,110,170,.16) 31px 32px);background-position:0 70px;
  box-shadow:0 1px 1px rgba(0,0,0,.08),0 18px 30px -18px rgba(0,0,0,.45);transform:rotate(-.6deg);transition:background-color var(--fade) var(--ease)}
:root[data-lamp="off"] .bg-paper{background-color:#26231F;color:var(--ink);background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(255,255,255,.06) 31px 32px)}
.bg-paper h2{font-size:28px;font-weight:400;line-height:1.2}
.bg-paper label{display:flex;flex-direction:column;gap:5px;margin-top:14px;font-size:13px;font-weight:600;color:inherit}
.bg-paper textarea,.bg-paper input{width:100%;padding:10px 12px;border:1.5px solid rgba(42,35,27,.22);border-radius:8px;background:rgba(255,255,255,.7);font-size:15px;font-weight:400;color:var(--n-ink);resize:vertical}
:root[data-lamp="off"] .bg-paper textarea,:root[data-lamp="off"] .bg-paper input{background:rgba(0,0,0,.25);border-color:var(--line);color:var(--ink)}
.bg-paper textarea:focus,.bg-paper input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.bg-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.bg-paper .hp{position:absolute;left:-9999px;width:1px;height:1px}
.bg-priv{margin-top:12px;font-size:12.5px;color:var(--ink-2)}
.bg-send{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:16px}
.bg-send button{padding:10px 22px;border:0;border-radius:999px;background:var(--n-pin);color:#fff;font-weight:600;font-size:14.5px;cursor:pointer}
.bg-send button:hover{background:#A3321F}.bg-send button:disabled{opacity:.6;cursor:wait}
@media (max-width:980px){.cork-in{grid-template-columns:repeat(2,minmax(0,1fr));gap:26px 16px}}
@media (max-width:560px){.cork{padding:9px}.cork-in{grid-template-columns:1fr;padding:18px 14px 24px;gap:26px}.bg-two{grid-template-columns:1fr}.bg-lead{font-size:20px}}
@media (prefers-reduced-motion:reduce){.pnote,.pnote:hover{transition:none}.pnote.bump{animation:none}}

/* v1.7.1: trang chủ trên điện thoại – đèn ở trên cùng, logo + menu dưới đèn, dây kéo bật/tắt đèn, tường đổi sáng/tối theo đèn, bỏ hàng nút lặp menu. Máy tính giữ nguyên */
.m-lamp,.m-cord{display:none}
@media (max-width:760px){
  .photo-room{--m-wall:radial-gradient(ellipse 150% 92% at 50% 0,#F6D7A8 0,#E8BE88 22%,#CFA272 44%,#A57C56 62%,#6B5240 80%,#2A221B 100%);
    background:var(--m-wall),#211B16;justify-content:flex-start;position:relative;transition:background var(--fade) var(--ease)}
  .photo-room::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background:linear-gradient(180deg,#0B1014 0,#0E151B 70%,#0F1A22 100%);opacity:calc(1 - var(--glow-o));transition:opacity var(--fade) var(--ease)}
  .m-lamp{display:block;position:absolute;top:22px;left:50%;z-index:6;width:62%;height:11px;transform:translateX(-50%);border-radius:3px;background:linear-gradient(180deg,#34302C,#141210);box-shadow:0 3px 8px rgba(0,0,0,.35)}
  .m-lamp::before{content:"";position:absolute;left:50%;top:-14px;width:44px;height:16px;transform:translateX(-50%);border-radius:3px 3px 0 0;background:linear-gradient(180deg,#2A2622,#171513)}
  .m-lamp::after{content:"";position:absolute;left:3%;right:3%;bottom:-3px;height:3px;border-radius:2px;background:#FFE9C4;box-shadow:0 0 16px 5px rgba(255,214,150,calc(.85*var(--glow-o)));transition:background var(--fade) var(--ease),box-shadow var(--fade) var(--ease)}
  :root[data-lamp="off"] .m-lamp::after{background:#4A443D}
  .photo-room .m-cord{display:block;position:absolute;left:calc(79% - 9px);top:31px;width:26px;height:58px;z-index:7}
  .photo-room .m-cord{height:50px}
  .photo-room .m-cord .tag{opacity:1;left:calc(100% - 4px);bottom:-1px;font-size:13.5px;padding:0 6px;background:rgba(20,16,12,.6)}
  .homenav{z-index:6;padding-top:64px}
  .homenav .brand{color:#2A1E14}
  .homenav nav.main{gap:0 2px;max-width:340px}
  .homenav nav.main a{color:rgba(42,30,20,.82);font-size:11.5px;letter-spacing:.1em;padding:6px 8px}
  :root[data-lamp="off"] .homenav .brand{color:#E9E1D3}
  :root[data-lamp="off"] .homenav nav.main a{color:rgba(233,225,211,.75)}
  .photo{z-index:1}
  .photo .ph{-webkit-mask-image:linear-gradient(180deg,transparent 0,transparent 24%,#000 56%);mask-image:linear-gradient(180deg,transparent 0,transparent 24%,#000 56%)}
  .photo-text{padding-bottom:clamp(48px,17vh,160px)}
  .photo-text h1{color:#2A1E14}
  .photo-text p{color:#3A2B1E;font-size:15px}
  :root[data-lamp="off"] .photo-text h1{color:#E6DCCB}
  :root[data-lamp="off"] .photo-text p{color:#A79D8E}
  .photo-room .deskchips{display:none}
}

/* v1.8: Góc ngẫm (kệ sách + TV cũ) · Về Minh Tuấn (ngăn kéo, danh thiếp) · Tách cà phê (tách + lót ly). Tiền tố riêng: gn- tv- vm- cf- */
:root{--wood1:#8A6343;--wood2:#5E412A;--wood-top:#A57A55;--shelf-wall:#E4DCCF;--paper-w:#FBF8F2;--mark:#FFE36A}
:root[data-lamp="off"]{--wood1:#2E231A;--wood2:#1E1712;--wood-top:#3A2D22;--shelf-wall:#17161A;--paper-w:#211F1C;--mark:#8C7420}
.gn-intro,.vm-hero,.cf-hero{margin-top:40px}
.gn-lead{max-width:34em;margin-top:6px;font-size:22px;line-height:1.35;color:var(--ink-2)}
.gn-switch{display:inline-flex;gap:4px;margin:26px 0 22px;padding:4px;border:1.5px solid var(--line);border-radius:999px;background:var(--card)}
.gn-switch button{padding:8px 20px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-weight:600;font-size:14.5px;cursor:pointer;transition:background .2s,color .2s}
.gn-switch [aria-selected="true"]{background:var(--ink);color:var(--bg)}
.gn-room{margin-bottom:80px}
/* kệ sách */
.gn-shelf{padding:26px clamp(14px,3vw,30px) 0;border-radius:14px;background:linear-gradient(180deg,var(--wood2),var(--wood1));box-shadow:var(--shadow),inset 0 0 0 1px rgba(0,0,0,.15);transition:background var(--fade) var(--ease)}
.gn-books{display:flex;flex-wrap:wrap;align-items:flex-end;align-content:flex-start;gap:0 6px;min-height:300px;padding:0 10px;border-radius:6px 6px 0 0;
  background-color:var(--shelf-wall);background-image:repeating-linear-gradient(180deg,transparent 0 282px,var(--wood-top) 282px 286px,var(--wood1) 286px 300px,rgba(0,0,0,.25) 300px 302px,transparent 302px 310px);
  box-shadow:inset 0 10px 20px -10px rgba(0,0,0,.35);transition:background-color var(--fade) var(--ease)}
.gn-books>*{margin-bottom:18px}
.gn-books .gn-spine{margin-top:calc(282px - var(--h))}
.gn-books .gn-plant{margin-top:186px}
.gn-books .gn-wait{margin-top:140px}
.gn-spine{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;width:var(--w);height:var(--h);padding:14px 4px;border:0;border-radius:3px 3px 2px 2px;
  background:linear-gradient(90deg,rgba(0,0,0,.28),rgba(255,255,255,.1) 18%,rgba(0,0,0,0) 40%,rgba(0,0,0,.18)),var(--c);color:#FBF3E4;cursor:pointer;
  box-shadow:2px 0 0 rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.25);transform-origin:bottom center;transition:transform .25s cubic-bezier(.3,1.4,.5,1),filter var(--fade) var(--ease)}
.gn-spine:hover,.gn-spine:focus-visible{transform:translateY(-14px) rotate(-2deg)}
.gn-band{position:absolute;left:0;right:0;top:12px;height:5px;border-top:1.5px solid rgba(232,200,130,.75);border-bottom:1.5px solid rgba(232,200,130,.75)}
.gn-band.b{top:auto;bottom:12px}
.gn-st{writing-mode:vertical-rl;transform:rotate(180deg);max-height:calc(100% - 64px);overflow:hidden;font-family:var(--f-wall);font-weight:500;font-size:14px;letter-spacing:.04em;line-height:1.15;text-align:center}
.gn-sa{writing-mode:vertical-rl;transform:rotate(180deg);font-size:10.5px;opacity:.8;max-height:70px;overflow:hidden}
:root[data-lamp="off"] .gn-spine{filter:brightness(.55)}
:root[data-lamp="off"] .gn-spine:hover{filter:brightness(.9)}
.gn-books.is-empty{justify-content:space-between;align-items:flex-end;padding:0 24px}
.gn-wait{max-width:20em;margin-bottom:40px!important;height:102px;font-size:22px;color:var(--ink-2)}
.gn-plant{position:relative;display:block;width:58px;height:96px;margin-left:auto}
.gn-plant .pot{position:absolute;left:10px;bottom:0;width:38px;height:34px;border-radius:3px 3px 10px 10px;background:linear-gradient(90deg,#9C8264,#BFA584 45%,#9C8264)}
.gn-plant .lf{position:absolute;bottom:30px;left:26px;width:10px;height:54px;border-radius:50% 50% 0 0;background:#4E7A55;transform-origin:bottom center}
.gn-plant .l1{transform:rotate(-24deg)}.gn-plant .l2{height:64px}.gn-plant .l3{transform:rotate(26deg)}
:root[data-lamp="off"] .gn-plant{filter:brightness(.45)}
/* sách mở */
html.gn-lock{overflow:hidden}
.gn-modal{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:20px;overflow-y:auto}
.gn-dim{position:fixed;inset:0;background:rgba(20,15,10,.6);backdrop-filter:blur(2px);animation:gnfade .25s ease}
.gn-open{position:relative;display:grid;grid-template-columns:1fr 1fr;width:min(940px,100%);border-radius:6px;background:var(--paper-w);color:var(--ink);
  box-shadow:0 0 0 6px var(--c),0 0 0 7px rgba(0,0,0,.25),0 30px 60px -20px rgba(0,0,0,.7);animation:gnopen .35s cubic-bezier(.2,.8,.2,1)}
.gn-open::before{content:"";position:absolute;left:50%;top:0;bottom:0;width:36px;margin-left:-18px;pointer-events:none;background:linear-gradient(90deg,rgba(0,0,0,0),rgba(0,0,0,.12) 45%,rgba(0,0,0,.18) 50%,rgba(0,0,0,.12) 55%,rgba(0,0,0,0))}
@keyframes gnopen{from{opacity:0;transform:translateY(18px) scale(.97)}}
@keyframes gnfade{from{opacity:0}}
.gn-x{position:absolute;right:10px;top:8px;z-index:2;width:36px;height:36px;border:0;border-radius:50%;background:transparent;color:var(--ink-2);font-size:26px;line-height:1;cursor:pointer}
.gn-x:hover{background:var(--accent-soft);color:var(--ink)}
.gn-pg{padding:34px clamp(18px,3vw,38px) 30px;min-width:0}
.gn-pg h2{margin-top:6px;font-family:var(--f-wall);font-weight:600;font-size:clamp(22px,2.4vw,28px);line-height:1.2}
.gn-au{margin-top:4px;color:var(--ink-2);font-style:italic}
.gn-shift{display:grid;gap:6px;margin-top:22px}
.gn-bf,.gn-af{padding:12px 14px;border-radius:10px}
.gn-bf{background:rgba(120,110,100,.1);color:var(--ink-2)}
.gn-bf p{text-decoration:line-through;text-decoration-color:rgba(176,74,53,.55);text-decoration-thickness:1.5px}
.gn-af{background:var(--accent-soft)}
.gn-bf p,.gn-af p{margin-top:4px;font-size:15.5px;line-height:1.55}
.gn-arr{justify-self:center;color:var(--accent);font-size:20px;line-height:1}
.gn-ls{margin-top:20px}
.gn-ls ul{margin:8px 0 0;padding-left:20px}
.gn-ls li{margin-top:6px;line-height:1.5}
.gn-q{margin:14px 0 0;padding:0}
.gn-q p{font-family:var(--f-hand);font-size:21px;line-height:1.45}
.gn-q mark{padding:0 .15em;background:linear-gradient(transparent 38%,var(--mark) 38%,var(--mark) 88%,transparent 88%);color:inherit;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.gn-q cite{display:block;margin-top:2px;font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--ink-2)}
.gn-ask{margin-top:22px;padding:12px 16px;border:1.5px dashed var(--accent);border-radius:12px}
.gn-ask .mono{color:var(--accent)}
.gn-ask p{margin-top:4px;font-size:21px;line-height:1.3}
/* phòng chiếu */
.gn-cinema{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(24px,4vw,48px);align-items:start}
.tv-wrap{position:relative}
.tv{display:flex;gap:14px;padding:18px;border-radius:22px;background:linear-gradient(160deg,var(--wood1),var(--wood2));box-shadow:var(--shadow),inset 0 1px 0 rgba(255,255,255,.15),inset 0 -3px 0 rgba(0,0,0,.25);transition:background var(--fade) var(--ease)}
.tv-screen{position:relative;flex:1;aspect-ratio:16/10;display:grid;place-items:center;overflow:hidden;border-radius:26px/22px;background:#0E1114;box-shadow:inset 0 0 0 6px #1A1714,inset 0 0 30px rgba(0,0,0,.8)}
.tv-screen::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:inherit;background:radial-gradient(ellipse at 30% 20%,rgba(255,255,255,.12),transparent 55%),repeating-linear-gradient(180deg,rgba(0,0,0,.12) 0 1px,transparent 1px 3px)}
.tv-screen p{position:relative;z-index:1;color:#C9C2B6;font-size:22px}
.tv-static{background:repeating-radial-gradient(circle at 30% 40%,#2a2d31 0 1px,#16181b 1px 3px)}
.tv-screen iframe{position:absolute;inset:6px;width:calc(100% - 12px);height:calc(100% - 12px);border:0;border-radius:20px/16px}
.tv-play{position:absolute;inset:0;padding:0;border:0;background:#000;cursor:pointer}
.tv-play img{width:100%;height:100%;object-fit:cover;opacity:.88;transition:opacity .2s}
.tv-play:hover img{opacity:1}
.gn-play{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;background:rgba(176,74,53,.92);box-shadow:0 6px 18px rgba(0,0,0,.45)}
.gn-play::after{content:"";position:absolute;left:26px;top:20px;border-left:18px solid #fff;border-top:12px solid transparent;border-bottom:12px solid transparent}
.tv-side{display:flex;flex-direction:column;align-items:center;gap:14px;width:54px;padding-top:6px}
.tv-knob{width:34px;height:34px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#E3D6C2,#8D7B65 60%,#4B3E30);box-shadow:0 2px 4px rgba(0,0,0,.4)}
.tv-knob::after{content:"";display:block;width:3px;height:12px;margin:4px auto 0;border-radius:2px;background:#3A2E22}
.tv-grill{flex:1;width:36px;min-height:60px;border-radius:6px;background:repeating-linear-gradient(180deg,rgba(0,0,0,.4) 0 3px,transparent 3px 7px)}
.tv-legs{display:flex;justify-content:space-between;height:26px;margin:0 16%}
.tv-legs::before,.tv-legs::after{content:"";width:12px;height:100%;border-radius:0 0 4px 4px;background:var(--wood2);transform:skewX(-10deg)}
.tv-legs::after{transform:skewX(10deg)}
:root[data-lamp="off"] .tv-screen{box-shadow:inset 0 0 0 6px #1A1714,inset 0 0 30px rgba(0,0,0,.8),0 0 60px 6px rgba(120,170,255,.22)}
.gn-note{position:relative;padding:28px 26px 24px;border-radius:4px;background:var(--paper-w);box-shadow:var(--shadow);transform:rotate(.6deg);transition:background var(--fade) var(--ease)}
.gn-note::before{content:"";position:absolute;left:50%;top:-10px;width:70px;height:22px;margin-left:-35px;background:rgba(240,225,190,.7);transform:rotate(-2deg)}
.gn-note h2{margin-top:4px;font-family:var(--f-wall);font-weight:600;font-size:23px;line-height:1.25}
.gn-sum{margin-top:10px;color:var(--ink-2);line-height:1.6}
.gn-think{margin-top:16px;padding-top:14px;border-top:1px dashed var(--line)}
.gn-think p{margin-top:6px;font-size:20px;line-height:1.35}
.gn-tapes{margin-top:34px}
.gn-tape-row{display:flex;gap:16px;overflow-x:auto;padding:10px 2px 14px}
.gn-tape{position:relative;flex:none;width:190px;height:116px;padding:12px 14px 0;border:0;border-radius:8px;background:linear-gradient(180deg,#2B2826,#1B1917);box-shadow:0 8px 14px -8px rgba(0,0,0,.6);cursor:pointer;transition:transform .2s cubic-bezier(.3,1.4,.5,1)}
.gn-tape:hover{transform:translateY(-4px) rotate(-1deg)}
.gn-tape[aria-current="true"]{outline:2px solid var(--accent);outline-offset:3px}
.gn-tl{display:block;height:40px;padding:4px 8px;overflow:hidden;border-radius:3px;background:#F5EFE2;color:#2A231B;font-size:16px;line-height:1.1;text-align:left}
.gn-reels{display:flex;justify-content:center;gap:34px;margin-top:12px}
.gn-reels i{width:30px;height:30px;border-radius:50%;background:radial-gradient(circle,#1B1917 0 5px,#D9D2C6 5px 7px,#3C3835 7px)}
/* Về Minh Tuấn */
.vm-hero{display:grid;grid-template-columns:minmax(220px,320px) minmax(0,1fr);gap:clamp(28px,5vw,64px);align-items:start}
.vm-frame{padding:16px;border-radius:6px;background:linear-gradient(150deg,#3E3833,#25211E);box-shadow:var(--shadow),inset 0 0 0 1px rgba(255,255,255,.06);transform:rotate(-1.2deg)}
.vm-photo{display:grid;place-items:center;aspect-ratio:4/5;overflow:hidden;background:#E9DFCF;box-shadow:inset 0 0 0 10px #F4EEE3}
.vm-photo img{width:100%;height:100%;object-fit:cover}
.vm-photo span{font-family:var(--f-hand);font-size:84px;color:#8C6F4C}
:root[data-lamp="off"] .vm-photo{filter:brightness(.7)}
.vm-role{margin-top:6px;font-size:17px;color:var(--accent);font-weight:600}
.vm-p{margin-top:14px;max-width:40em;font-size:16.5px;line-height:1.75}
.vm-motto{position:relative;display:inline-block;max-width:30em;margin-top:26px;padding:20px 22px 16px;background:#FFF0A6;color:#2A231B;box-shadow:0 12px 16px -12px rgba(0,0,0,.5);transform:rotate(-1.4deg)}
.vm-motto .mono{color:rgba(42,35,27,.6)}
.vm-motto p{margin-top:4px;font-size:25px;line-height:1.25}
:root[data-lamp="off"] .vm-motto{box-shadow:0 0 0 1px rgba(255,240,166,.3),0 0 30px 4px rgba(255,220,120,.18)}
.vm-sec{margin-top:72px}
.vm-h{font-family:var(--f-wall);font-weight:600;font-size:clamp(22px,2.6vw,30px)}
.vm-cab{display:grid;gap:10px;max-width:760px;margin-top:20px;padding:14px;border-radius:10px;background:linear-gradient(180deg,var(--wood1),var(--wood2));box-shadow:var(--shadow)}
.vm-front{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:16px;width:100%;padding:16px 18px;border:0;border-radius:6px;cursor:pointer;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(0,0,0,.08)),var(--wood-top);color:#FBF3E4;box-shadow:inset 0 0 0 1px rgba(0,0,0,.2),0 3px 0 rgba(0,0,0,.25);transition:transform .25s}
.vm-front .mono{color:rgba(251,243,228,.75)}
.vm-dr-role{font-family:var(--f-wall);font-weight:500;font-size:16.5px}
.vm-handle{width:54px;height:12px;border-radius:6px;background:linear-gradient(180deg,#E9CF8E,#A47A2C);box-shadow:0 2px 3px rgba(0,0,0,.4)}
.vm-dr.open .vm-front{transform:translateY(-2px)}
.vm-dr-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .4s cubic-bezier(.2,.8,.2,1)}
.vm-dr-body>div{overflow:hidden}
.vm-dr.open .vm-dr-body{grid-template-rows:1fr}
.vm-paper{margin:8px 12px 4px;padding:14px 18px;border-radius:3px;background:var(--paper-w);box-shadow:inset 0 6px 10px -8px rgba(0,0,0,.4)}
.vm-paper p{margin-top:4px;font-size:20px;line-height:1.35}
.vm-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px;margin:20px 0 0;padding:0;list-style:none}
.vm-vals li{position:relative;padding:22px 20px 20px;border-radius:4px;background:var(--paper-w);background-image:repeating-linear-gradient(180deg,transparent 0 27px,rgba(70,110,170,.13) 27px 28px);background-position:0 54px;box-shadow:var(--shadow)}
.vm-vals li::before{content:"";position:absolute;left:0;right:0;top:46px;height:1.5px;background:rgba(176,74,53,.45)}
.vm-no{font-family:var(--f-mono);font-size:12px;color:var(--accent)}
.vm-vals h3{margin-top:2px;font-family:var(--f-wall);font-weight:600;font-size:17px;line-height:1.3}
.vm-vals p{margin-top:16px;font-size:14.5px;line-height:28px;color:var(--ink-2)}
.vm-biz{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:20px;margin-top:20px}
.vm-card{height:150px;perspective:900px;cursor:pointer;outline:none}
.vm-in{position:relative;width:100%;height:100%;transform-style:preserve-3d;transition:transform .6s cubic-bezier(.3,1.2,.5,1)}
.vm-card:hover .vm-in,.vm-card:focus-visible .vm-in,.vm-card.on .vm-in{transform:rotateY(180deg)}
.vm-f,.vm-b{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:16px 20px;border-radius:8px;backface-visibility:hidden;-webkit-backface-visibility:hidden;box-shadow:var(--shadow)}
.vm-f{background:var(--paper-w);border:1px solid var(--line)}
.vm-f .mono{font-size:10px}
.vm-f h3{margin-top:8px;font-family:var(--f-wall);font-weight:600;font-size:18px;line-height:1.25}
.vm-rule{width:36px;height:2px;margin:10px 0 6px;background:var(--accent)}
.vm-f .hand{font-size:17px;color:var(--ink-2)}
.vm-b{transform:rotateY(180deg);background:#2A231B;color:#F3EBDD}
.vm-b .mono{color:rgba(243,235,221,.65);font-size:10px}
.vm-b p{margin-top:4px;font-size:14.5px;line-height:1.5}
.vm-b a{align-self:flex-start;margin-top:10px;padding:6px 12px;border-radius:999px;background:var(--accent);color:#1A1208;font-size:13.5px;font-weight:600;text-decoration:none}
.vm-env{position:relative;max-width:620px;padding:30px 30px 26px;border-radius:6px;background:var(--paper-w);box-shadow:var(--shadow);
  border-top:10px solid transparent;border-image:repeating-linear-gradient(135deg,#B44A35 0 14px,var(--paper-w) 14px 22px,#2F4F6B 22px 36px,var(--paper-w) 36px 44px) 10}
.vm-env dl{display:grid;grid-template-columns:auto 1fr;gap:6px 18px;margin:10px 0 0}
.vm-env dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.vm-env dd{margin:0;font-weight:600;user-select:all}
.vm-soon{margin-top:8px;font-size:20px;color:var(--ink-2)}
.vm-soc{display:flex;gap:14px;flex-wrap:wrap;margin-top:14px}
.vm-soc a{color:var(--accent);font-weight:600}
.vm-go{display:inline-block;margin-top:18px;padding:9px 18px;border-radius:999px;background:var(--ink);color:var(--bg);font-weight:600;text-decoration:none}
.vm-go:hover{background:var(--accent)}
.vm-contact{margin-bottom:80px}
/* Tách cà phê */
.cf-hero{display:grid;grid-template-columns:minmax(240px,420px) minmax(0,1fr);gap:clamp(24px,5vw,60px);align-items:center}
.cf-table{position:relative;padding:40px 10px 0}
.cf-cup{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.25))}
.cf-saucer{fill:#F1EBE1}.cf-saucer-in{fill:#E2D9CB}.cf-saucer-sh{fill:rgba(0,0,0,.12)}
.cf-body{fill:#F7F2EA}.cf-handle{stroke:#EDE6DB}.cf-rim{fill:#FFFFFF}.cf-coffee{fill:#6B4429}.cf-shine{stroke:rgba(255,255,255,.7)}
:root[data-lamp="off"] .cf-cup{filter:brightness(.5)}
.cf-steam{position:absolute;left:22%;top:-34px;width:42%;height:auto;fill:none;stroke:var(--ink-2);stroke-width:3;stroke-linecap:round;opacity:.45}
.cf-steam path{animation:cfsteam 3.2s ease-in-out infinite}
.cf-steam path:nth-child(2){animation-delay:-1.1s}.cf-steam path:nth-child(3){animation-delay:-2.1s}
@keyframes cfsteam{0%{opacity:0;transform:translateY(14px)}40%{opacity:1}100%{opacity:0;transform:translateY(-16px)}}
:root[data-lamp="off"] .cf-steam{opacity:.25}
.cf-paper{position:relative;margin-top:20px;padding:22px 24px 18px;border-radius:3px;background:var(--paper-w);background-image:repeating-linear-gradient(180deg,transparent 0 31px,rgba(70,110,170,.14) 31px 32px);box-shadow:var(--shadow);transform:rotate(-.8deg)}
.cf-paper p{font-size:22px;line-height:32px}
.cf-sign{margin-top:6px;text-align:right;color:var(--accent)}
.cf-qr-sec{display:flex;flex-wrap:wrap;align-items:center;gap:clamp(24px,5vw,56px);margin-top:56px}
.cf-coaster{display:grid;place-items:center;flex:none;width:300px;height:300px;border-radius:50%;padding:46px;background:radial-gradient(circle,#F4EEE3 0 62%,#D9C9AE 62% 64%,#E9DDC7 64% 100%);box-shadow:var(--shadow),inset 0 0 0 10px #CDBA98}
.cf-coaster img{width:100%;height:auto;border-radius:10px;background:#fff;padding:6px}
.cf-coaster p{font-size:19px;line-height:1.3;color:#6A5A44;text-align:center}
.cf-bank{flex:1;min-width:240px}
.cf-bank dl{display:grid;grid-template-columns:auto 1fr;gap:8px 18px;margin:0}
.cf-bank dt{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.cf-bank dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:10px;font-size:16px}
.cf-copy{padding:3px 10px;border:1.5px solid var(--line);border-radius:999px;background:transparent;font-size:12.5px;font-weight:600;cursor:pointer}
.cf-copy:hover{border-color:var(--accent);color:var(--accent)}
.cf-thanks{margin-top:16px;font-size:21px;line-height:1.35;color:var(--ink-2)}
.cf-wall{margin-top:56px}
.cf-wall ul{display:flex;flex-wrap:wrap;gap:12px;margin:14px 0 0;padding:0;list-style:none}
.cf-wall li{padding:4px 14px;border-radius:4px;background:var(--paper-w);box-shadow:0 6px 10px -8px rgba(0,0,0,.5);font-size:20px;transform:rotate(var(--t,0deg))}
.cf-talk{margin:72px 0 80px;scroll-margin-top:20px}
.cf-tabs{display:inline-flex;flex-wrap:wrap;gap:4px;margin:18px 0 0;padding:4px;border:1.5px solid var(--line);border-radius:999px;background:var(--card)}
.cf-tabs button{padding:8px 18px;border:0;border-radius:999px;background:transparent;color:var(--ink-2);font-weight:600;font-size:14.5px;cursor:pointer}
.cf-tabs [aria-selected="true"]{background:var(--ink);color:var(--bg)}
.cf-pane{max-width:700px;margin-top:18px}
.cf-form{padding:24px clamp(18px,4vw,30px);border-radius:4px;background:var(--paper-w);box-shadow:var(--shadow)}
.cf-form label{display:flex;flex-direction:column;gap:5px;margin-top:14px;font-size:13px;font-weight:600}
.cf-form label:first-child{margin-top:0}
.cf-form input:not([type=checkbox]),.cf-form textarea,.cf-form select{width:100%;padding:10px 12px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);font-size:15px;font-weight:400;color:var(--ink);resize:vertical}
.cf-form input:focus,.cf-form textarea:focus,.cf-form select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.cf-form .cf-check{flex-direction:row;align-items:flex-start;gap:8px;font-weight:400;font-size:14px}
.cf-form .cf-check input{margin-top:3px}
.cf-form .bg-two label{margin-top:14px}
.cf-form .hp{position:absolute;left:-9999px;width:1px;height:1px}
.cf-form .bg-priv a{color:var(--accent)}
.cf-off{font-size:20px;color:var(--ink-2)}
@media (max-width:860px){.gn-cinema{grid-template-columns:1fr}.vm-hero{grid-template-columns:1fr}.vm-frame{max-width:260px}.cf-hero{grid-template-columns:1fr}.cf-table{max-width:340px}}
@media (max-width:640px){
  .gn-open{grid-template-columns:1fr}.gn-open::before{display:none}.gn-r{border-top:1px dashed var(--line)}.gn-modal{align-items:start;padding:12px}
  .gn-books{gap:0 4px;padding:0 4px}.tv{padding:12px;gap:10px}.tv-side{width:38px}.tv-knob{width:26px;height:26px}
  .cf-tabs,.gn-switch{display:grid;grid-template-columns:1fr 1fr;width:100%;border-radius:16px}.cf-tabs button,.gn-switch button{padding:9px 8px;font-size:13.5px;border-radius:12px}
  .cf-coaster{width:260px;height:260px;padding:40px}.vm-env{padding:24px 20px 20px}.vm-front{grid-template-columns:1fr auto;gap:4px 12px}.vm-front .mono{grid-column:1/-1}
}
@media (prefers-reduced-motion:reduce){.gn-spine,.vm-in,.gn-tape{transition:none}.cf-steam path{animation:none;opacity:.6}.gn-open,.gn-dim{animation:none}}

/* v1.9: Blog "Viết dưới ánh đèn" – thẻ bài như đặt dưới đèn: rê chuột thì đèn bật sáng ảnh; tắt đèn chỉ thẻ đang trỏ mới sáng. Tiền tố: bl- bp- blc- */
:root{--blc-amber:#B06A22;--blc-blue:#2F5D8A;--blc-green:#3D7F58;--blc-red:#B44A35;--blc-purple:#6E4A86;--blc-teal:#2F7A74}
:root[data-lamp="off"]{--blc-amber:#E8B06A;--blc-blue:#8DB4E2;--blc-green:#7CC49B;--blc-red:#E58A72;--blc-purple:#C3A3E0;--blc-teal:#7CCBC3}
.blc-amber{--t:var(--blc-amber)}.blc-blue{--t:var(--blc-blue)}.blc-green{--t:var(--blc-green)}.blc-red{--t:var(--blc-red)}.blc-purple{--t:var(--blc-purple)}.blc-teal{--t:var(--blc-teal)}
.bl-intro{margin-top:40px}
.bl-lead{max-width:34em;margin-top:6px;font-size:22px;line-height:1.35;color:var(--ink-2)}
.bl-topics{display:flex;flex-wrap:wrap;gap:8px;margin:26px 0 8px}
.bl-topics a{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink-2);font-weight:600;font-size:14px;text-decoration:none;transition:border-color .2s,color .2s,background .2s}
.bl-topics a b{font-family:var(--f-mono);font-size:11px;font-weight:500;opacity:.7}
.bl-topics a:hover{border-color:var(--t,var(--accent));color:var(--t,var(--accent))}
.bl-topics a[aria-current="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.bl-tdesc{max-width:46em;margin:14px 0 4px;color:var(--ink-2);font-size:16px}
.bl-body{margin:22px 0 80px}
.bl-tag{display:inline-block;padding:2px 9px;border-radius:999px;background:color-mix(in srgb,var(--t,var(--accent)) 14%,transparent);color:var(--t,var(--accent));font-size:12px;font-weight:600;letter-spacing:.02em;text-decoration:none}
.bl-tags{display:flex;flex-wrap:wrap;gap:6px}
.bl-meta{font-family:var(--f-mono);font-size:11.5px;letter-spacing:.06em;color:var(--ink-2)}
/* ảnh: tối nhẹ như phòng chưa bật đèn; rê chuột = bật đèn */
.bl-img,.bl-hero-img{position:relative;display:block;overflow:hidden;background:#1A1714}
.bl-img img,.bl-hero-img img,.bl-img .bl-ph,.bl-hero-img .bl-ph{display:block;width:100%;height:100%;object-fit:cover;filter:brightness(.8) saturate(.92);transform:scale(1.01);transition:filter .5s var(--ease),transform .7s var(--ease)}
.bl-glow{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 60% 80% at 50% -10%,rgba(255,226,170,.55),rgba(255,226,170,0) 60%);opacity:0;transition:opacity .5s var(--ease);mix-blend-mode:screen}
.bl-card:hover .bl-img img,.bl-card:focus-visible .bl-img img,.bl-hero:hover .bl-hero-img img,.bl-hero:focus-visible .bl-hero-img img{filter:brightness(1.06) saturate(1.05);transform:scale(1.04)}
.bl-card:hover .bl-glow,.bl-card:focus-visible .bl-glow,.bl-hero:hover .bl-glow,.bl-hero:focus-visible .bl-glow{opacity:1}
:root[data-lamp="off"] .bl-img img,:root[data-lamp="off"] .bl-hero-img img{filter:brightness(.42) saturate(.7)}
:root[data-lamp="off"] .bl-card:hover .bl-img img,:root[data-lamp="off"] .bl-hero:hover .bl-hero-img img{filter:brightness(1) saturate(1)}
.bl-ph{position:relative;display:block;aspect-ratio:16/9;background:radial-gradient(ellipse 55% 75% at 50% 0,#E8BE88 0,#9C7550 35%,#3A2D22 70%,#1A1512 100%)}
.bl-ph i{position:absolute;left:30%;right:30%;top:9%;height:5px;border-radius:3px;background:#2B2622;box-shadow:0 3px 0 -1px #FFE9C4,0 6px 16px 4px rgba(255,214,150,.5)}
/* bài nổi bật */
.bl-hero{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);border-radius:18px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:box-shadow .3s,transform .3s var(--ease)}
.bl-hero:hover{transform:translateY(-3px);box-shadow:0 1px 0 rgba(35,30,25,.05),0 24px 40px -24px rgba(35,30,25,.55)}
.bl-hero-img{aspect-ratio:16/10;min-height:100%}
.bl-hero-txt{display:flex;flex-direction:column;gap:12px;justify-content:center;padding:clamp(22px,3.4vw,44px)}
.bl-new{color:var(--accent)}
.bl-hero h2{font-family:var(--f-wall);font-weight:600;font-size:clamp(24px,2.7vw,34px);line-height:1.2;letter-spacing:-.005em}
.bl-hero .bl-ex{font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.bl-go{margin-top:4px;font-weight:600;color:var(--accent)}
/* lưới bài */
.bl-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(18px,2.4vw,30px);margin-top:clamp(22px,3vw,36px)}
.bl-card{display:flex;flex-direction:column;border-radius:14px;overflow:hidden;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--ink);text-decoration:none;transition:transform .3s var(--ease),box-shadow .3s,background var(--fade) var(--ease)}
.bl-card:hover{transform:translateY(-4px);box-shadow:0 1px 0 rgba(35,30,25,.05),0 22px 34px -22px rgba(35,30,25,.6)}
.bl-card .bl-img{aspect-ratio:16/9}
.bl-txt{display:flex;flex:1;flex-direction:column;gap:9px;padding:16px 18px 18px}
.bl-card h3{font-family:var(--f-wall);font-weight:600;font-size:18.5px;line-height:1.3}
.bl-card .bl-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.bl-card .bl-meta{margin-top:auto;padding-top:4px}
:root[data-lamp="off"] .bl-card:hover,:root[data-lamp="off"] .bl-hero:hover{box-shadow:0 0 0 1px rgba(232,176,106,.35),0 24px 44px -24px rgba(232,176,106,.35)}
.bl-more{display:flex;justify-content:center;margin-top:30px}
.bl-more button,.bl-back{padding:10px 22px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;font-size:14.5px;cursor:pointer;text-decoration:none}
.bl-more button:hover,.bl-back:hover{border-color:var(--accent);color:var(--accent)}
.bl-empty{display:grid;justify-items:center;gap:16px;max-width:520px;margin:30px auto 0;text-align:center}
.bl-empty .bl-ph{width:100%;border-radius:14px}
.bl-empty p{font-size:22px;color:var(--ink-2)}
/* trang bài viết */
.bp-progress{position:fixed;left:0;right:0;top:0;z-index:40;height:3px;pointer-events:none}
.bp-progress span{display:block;height:100%;background:linear-gradient(90deg,var(--accent),#FFD79A);transform:scaleX(0);transform-origin:left;box-shadow:0 0 10px rgba(255,200,120,.6)}
.bp{margin:36px auto 80px}
.bp-preview{max-width:760px;margin:0 auto 18px;padding:9px 14px;border:1.5px dashed var(--accent);border-radius:10px;color:var(--accent);font-weight:600;font-size:14px;text-align:center}
.bp-head{max-width:760px;margin:0 auto;text-align:center}
.bp-crumb{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font-size:14px}
.bp-crumb>a:first-child{color:var(--ink-2);font-weight:600;text-decoration:none}
.bp-crumb>a:first-child::after{content:"/";margin-left:8px;opacity:.5}
.bp-title{margin-top:14px;font-family:var(--f-wall);font-weight:600;font-size:clamp(30px,4.6vw,50px);line-height:1.15;letter-spacing:-.01em}
.bp-sapo{margin-top:16px;font-family:var(--f-hand);font-size:clamp(21px,2.2vw,25px);line-height:1.4;color:var(--ink-2)}
.bp-meta{margin-top:14px;font-family:var(--f-mono);font-size:12px;letter-spacing:.06em;color:var(--ink-2)}
.bp-meta a{color:var(--accent);text-decoration:none}
.bp-cover{position:relative;max-width:1040px;margin:32px auto 0;border-radius:18px;overflow:hidden;background:#1A1714;box-shadow:0 30px 60px -30px rgba(40,25,10,.6)}
.bp-cover::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 70% 90% at 50% -10%,rgba(255,226,170,.22),transparent 60%)}
.bp-cover img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
:root[data-lamp="off"] .bp-cover{box-shadow:0 0 0 1px rgba(232,176,106,.25),0 30px 70px -30px rgba(232,176,106,.35)}
.bp-layout{display:grid;grid-template-columns:minmax(0,720px);justify-content:center;gap:48px;margin-top:40px}
.bp-layout.has-toc{grid-template-columns:200px minmax(0,720px)}
.bp-toc{position:sticky;top:24px;align-self:start;padding-top:6px}
.bp-toc ol{margin:10px 0 0;padding:0;list-style:none;counter-reset:t;border-left:2px solid var(--line)}
.bp-toc li{counter-increment:t}
.bp-toc a{display:block;padding:6px 0 6px 14px;margin-left:-2px;border-left:2px solid transparent;color:var(--ink-2);font-size:14px;line-height:1.4;text-decoration:none}
.bp-toc a::before{content:counter(t,decimal-leading-zero) "  ";font-family:var(--f-mono);font-size:11px;color:var(--accent)}
.bp-toc a:hover{border-left-color:var(--accent);color:var(--ink)}
.bp-prose{max-width:none;font-size:18px;line-height:1.85}
.bp-prose>p:first-child::first-letter{float:left;margin:6px 10px 0 0;font-family:var(--f-wall);font-weight:600;font-size:58px;line-height:.85;color:var(--accent)}
.bp-prose h2{position:relative;margin:44px 0 12px;padding-top:6px;font-size:26px;scroll-margin-top:24px}
.bp-prose h2::before{content:"";position:absolute;left:0;top:-8px;width:40px;height:3px;border-radius:2px;background:var(--accent)}
.bp-prose h3{margin-top:30px}
.bp-prose a{text-decoration-thickness:1.5px;text-underline-offset:3px}
.bp-prose img{width:100%;border-radius:14px}
.bp-prose strong{color:var(--ink)}
.bp-quote{position:relative;margin:30px 0;padding:22px 26px 20px 60px;border-radius:14px;background:var(--accent-soft);font-family:var(--f-hand);font-size:24px;line-height:1.4}
.bp-quote::before{content:"\201C";position:absolute;left:16px;top:2px;font-family:Georgia,serif;font-size:64px;line-height:1;color:var(--accent)}
.bp-quote p{margin:0}
.bp-hr{width:80px;height:0;margin:40px auto;border:0;border-top:2px dotted var(--accent)}
.bp-end{max-width:1040px;margin:56px auto 0}
.bp-share{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 14px;padding:18px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.bp-share a,.bp-share button{padding:7px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);font-weight:600;font-size:14px;text-decoration:none;cursor:pointer}
.bp-share a:hover,.bp-share button:hover{border-color:var(--accent);color:var(--accent)}
.bp-cta{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:30px}
.bp-cta a{display:flex;flex-direction:column;gap:6px;padding:20px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line);color:var(--ink);text-decoration:none;box-shadow:var(--shadow);transition:transform .25s var(--ease),border-color .25s}
.bp-cta a:hover{transform:translateY(-3px);border-color:var(--accent)}
.bp-cta b{font-family:var(--f-wall);font-weight:600;font-size:18px;line-height:1.3}
.bp-cta a span:last-child{color:var(--accent);font-weight:600;font-size:14.5px}
.bp-next{margin-top:56px}
@media (max-width:1100px){.bp-layout.has-toc{grid-template-columns:minmax(0,720px)}.bp-toc{position:static;padding:16px 18px;border:1px solid var(--line);border-radius:12px;background:var(--card)}}
@media (max-width:980px){.bl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.bl-hero{grid-template-columns:1fr}.bl-hero-img{aspect-ratio:16/9}}
@media (max-width:640px){.bl-grid{grid-template-columns:1fr}.bp-cta{grid-template-columns:1fr}.bp-prose{font-size:17px}.bp-quote{padding:18px 18px 16px 48px;font-size:21px}.bp-quote::before{left:10px;font-size:52px}.bp-cover{border-radius:12px;margin-top:24px}}
@media (prefers-reduced-motion:reduce){.bl-card,.bl-hero,.bl-img img,.bl-hero-img img,.bl-glow{transition:none}}

/* v1.9.1: biểu tượng logo B cạnh tên thương hiệu ở đầu trang – nét theo màu chữ, vàng đổi theo đèn */
.brand-mark{display:inline-block;width:1.08em;height:1.08em;vertical-align:-.2em;margin-right:.32em}
.brand-mark .g{fill:#B06A22;transition:fill var(--fade) var(--ease)}
:root[data-lamp="off"] .brand-mark .g{fill:#E8B06A}

/* v1.11: số liệu thật của công cụ (bộ đếm) – bìa sách + popup giới thiệu */
.cb-stats{display:flex;flex-wrap:wrap;gap:2px 8px;margin-top:8px;font-size:11px;font-weight:500;white-space:nowrap;color:rgba(255,255,255,.8)}
.cb-stats span+span::before{content:"·";margin-right:8px;opacity:.6}
.bk-stats{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:10px;font-size:12.5px;color:var(--pg-dim,var(--ink-2))}
.bk-stats b{font-family:var(--f-wall);font-weight:600;font-size:14px;color:var(--pg-ink,var(--ink));margin-right:3px}
@media (max-width:640px){.cb-stats{font-size:10px;gap:0 6px}.cb-stats span+span::before{margin-right:6px}}

/* =====================================================================
   v1.12 – góp ý 09/10/2026 21h30
   ===================================================================== */
/* --- menu: Góc ngẫm thả xuống 3 phòng --- */
.subhead{overflow:visible;z-index:20}
.subhead .glow{overflow:hidden}
.nav-dd{position:relative;display:inline-flex}
.dd-caret{display:inline-block;width:6px;height:6px;margin:0 0 3px 7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);opacity:.7;transition:transform .2s}
.dd-menu{position:absolute;left:50%;top:100%;z-index:40;min-width:250px;padding:8px;margin-top:6px;border:1px solid var(--line);border-radius:14px;background:var(--card);box-shadow:0 22px 44px -22px rgba(30,20,10,.6);opacity:0;visibility:hidden;transform:translate(-50%,6px);transition:opacity .18s,transform .18s,visibility 0s .18s}
.dd-menu::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}
.nav-dd:hover .dd-menu,.nav-dd:focus-within .dd-menu{opacity:1;visibility:visible;transform:translate(-50%,0);transition:opacity .18s,transform .18s}
.nav-dd:hover .dd-caret,.nav-dd:focus-within .dd-caret{transform:rotate(225deg) translate(-2px,-2px)}
nav.main .dd-menu a{display:block;padding:9px 12px;border-radius:9px;color:var(--ink);text-transform:none;letter-spacing:0;font-family:var(--f-body);font-size:14.5px;box-shadow:none}
nav.main .dd-menu a b{display:block;font-weight:600}
nav.main .dd-menu a small{display:block;font-size:12.5px;color:var(--ink-2);font-weight:400}
nav.main .dd-menu a:hover,nav.main .dd-menu a:focus-visible{background:var(--accent-soft);color:var(--ink)}
:root[data-lamp="off"] .homenav nav.main .dd-menu a{color:var(--ink)}
.homenav nav.main .dd-menu a{color:var(--ink)}
@media (hover:none){.dd-menu{display:none}}

/* --- nút nhạc nền --- */
/* v1.12e biểu tượng nhạc: tắt = nốt nhạc gạch chéo, bật = sóng âm chạy */
.musicbtn{position:relative;display:inline-grid;place-items:center;width:38px;height:38px;margin-left:8px;padding:0;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent);border-radius:50%;background:transparent;color:var(--nav-ink);cursor:pointer;transition:border-color .25s,background-color .25s,box-shadow .3s,transform .2s}
.musicbtn:hover,.musicbtn:focus-visible{border-color:var(--accent);background:color-mix(in srgb,var(--accent) 10%,transparent)}
.musicbtn:active{transform:scale(.94)}
.mi{width:22px;height:22px;overflow:visible}
.mi-note{fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.mi-head{fill:currentColor}
.mi-cut{fill:none;stroke:#C8432F;stroke-width:2.2;stroke-linecap:round}
.mi-on{display:none;fill:currentColor}
.mi-on rect{transform-box:fill-box;transform-origin:50% 50%}
.musicbtn.on .mi-off{display:none}
.musicbtn.on .mi-on{display:inline}
.musicbtn.on{color:var(--accent);border-color:var(--accent);box-shadow:0 0 0 4px color-mix(in srgb,var(--accent) 14%,transparent),0 0 18px -2px color-mix(in srgb,#E8B06A 60%,transparent)}
.musicbtn.on .mi-on rect{animation:mwave 1s ease-in-out infinite}
.musicbtn.on .mi-on rect:nth-child(2){animation-delay:-.2s}.musicbtn.on .mi-on rect:nth-child(3){animation-delay:-.45s}
.musicbtn.on .mi-on rect:nth-child(4){animation-delay:-.7s}.musicbtn.on .mi-on rect:nth-child(5){animation-delay:-.9s}
@keyframes mwave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
.mb-t{position:absolute;left:50%;top:calc(100% + 10px);z-index:30;transform:translate(-50%,-3px);white-space:nowrap;padding:4px 10px;border-radius:999px;background:rgba(28,22,16,.9);color:#F6EEDF;font-family:var(--f-body);font-size:12px;font-weight:500;letter-spacing:.01em;opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;box-shadow:0 0 0 1px rgba(255,255,255,.08),0 6px 16px -8px rgba(0,0,0,.6)}
.musicbtn:hover .mb-t,.musicbtn:focus-visible .mb-t{opacity:1;transform:translate(-50%,0)}
/* trên bàn ở trang chủ: đĩa sứ nhỏ đặt phía trước, bên trái chồng sách */
.desk-music{position:absolute;left:4.6%;top:88.4%;z-index:5;width:clamp(42px,3.5%,68px);height:auto;aspect-ratio:1;margin:0;border:0;color:#3A2A1C;background:radial-gradient(circle at 38% 30%,#FFF8EC,#EADCC6 58%,#C9B497);box-shadow:0 2px 0 #A88F6E,0 10px 16px -6px rgba(0,0,0,.65),inset 0 1px 0 rgba(255,255,255,.8)}
.desk-music::after{content:"";position:absolute;left:8%;right:8%;bottom:-14%;height:16%;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.45),transparent 70%);z-index:-1;pointer-events:none}
.desk-music .mi{width:52%;height:52%}
.desk-music:hover,.desk-music:focus-visible{background:radial-gradient(circle at 38% 30%,#FFFBF3,#F1E4CF 58%,#D4BE9F);transform:translateY(-2px)}
.desk-music.on{color:#9A5A16;background:radial-gradient(circle at 38% 30%,#FFF6E2,#F6D9A6 58%,#D9A660);box-shadow:0 2px 0 #A88F6E,0 10px 16px -6px rgba(0,0,0,.65),0 0 0 5px rgba(255,214,150,.18),0 0 34px 6px rgba(255,196,110,.45)}
.desk-music .mb-t{top:auto;bottom:calc(100% + 10px);transform:translate(-50%,3px)}
.desk-music:hover .mb-t,.desk-music:focus-visible .mb-t{transform:translate(-50%,0)}
.desk-music .mb-t::after{content:"";position:absolute;left:50%;bottom:-4px;width:8px;height:8px;margin-left:-4px;background:inherit;transform:rotate(45deg)}
:root[data-lamp="off"] .desk-music:not(.on){filter:brightness(.55) saturate(.8)}
@media (max-width:760px){.desk-music{left:4%;top:86%;width:40px}}

/* --- trang chủ: bụi sáng lơ lửng trong vùng đèn (chỉ khi bật đèn; chỉ dùng transform/opacity nên không giật) --- */
.dust{position:absolute;left:0;right:0;top:6%;height:58%;z-index:2;pointer-events:none;opacity:var(--glow-o);transition:opacity var(--fade) var(--ease)}
.dust i{position:absolute;left:var(--x);bottom:0;width:var(--s);height:var(--s);border-radius:50%;background:rgba(255,236,196,.9);box-shadow:0 0 6px 1px rgba(255,214,150,.6);opacity:0;animation:mote var(--d) linear var(--dl) infinite;will-change:transform,opacity}
@keyframes mote{0%{transform:translate(0,0);opacity:0}15%{opacity:.75}50%{transform:translate(18px,-45%)}85%{opacity:.5}100%{transform:translate(-10px,-95%);opacity:0}}
.photo-text p{letter-spacing:.02em}

/* --- Bộ công cụ: lời Đốm kể về anh Tuấn (chữ mảnh, gọn) --- */
.tquote.dq{display:grid;grid-template-columns:76px minmax(0,1fr);gap:16px;align-items:center;margin:14px 0 4px;padding:12px 22px 12px 14px;border-left-width:3px;border-radius:6px 16px 16px 6px}
.tquote.dq::before{content:none}
.dq-dom{width:76px;height:76px;align-self:center}
.dq-dom img{width:100%;height:100%;animation:dom-float 4.6s ease-in-out infinite}
.tquote.dq blockquote{font-family:var(--f-body);font-weight:300;font-size:15px;line-height:1.6;text-align:left;color:var(--ink)}
.tquote.dq blockquote p+p{margin-top:4px}
.tquote.dq blockquote p:last-child::after{content:none}
.tquote.dq blockquote p:first-child::before{content:"Đốm kể: ";font-family:var(--f-hand);font-weight:400;font-size:19px;color:var(--accent)}
.dq-link{padding:0;border:0;background:none;color:var(--accent);font:inherit;font-weight:500;text-decoration:underline;text-underline-offset:3px;cursor:pointer}
.dq-link:hover{color:var(--ink)}
.dq-cta{display:grid;grid-template-columns:96px minmax(0,1fr) auto;gap:20px;align-items:center;margin:56px 0 70px;padding:20px 26px;border:1.5px dashed var(--accent);border-radius:18px;background:var(--card)}
.dq-cta-dom{width:96px;height:96px}
.dq-cta-dom img{width:100%;height:100%;animation:dom-float 4.6s ease-in-out infinite}
.dq-cta h2{margin-top:4px;font-family:var(--f-wall);font-weight:600;font-size:clamp(19px,2vw,24px)}
.dq-cta p:not(.mono){margin-top:6px;color:var(--ink-2);font-size:15px}
.dq-cta .btn{white-space:nowrap}
/* công cụ "Coming soon": phủ lớp tối để khác biệt với công cụ đang dùng được */
.cbook.st-soon .cb-cover::after,.cbook.st-risk .cb-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(12,9,6,.38),rgba(12,9,6,.62));transition:opacity .45s}
.cbook.st-soon .cb-foot,.cbook.st-risk .cb-foot{position:relative;z-index:2}
.cbook.st-soon:hover .cb-cover::after,.cbook.st-soon:focus-visible .cb-cover::after{opacity:.7}
.cbook.st-soon .cb-foot .stb{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.35);color:#fff}
@media (max-width:640px){.tquote.dq{grid-template-columns:56px minmax(0,1fr);gap:10px;padding:10px 14px 10px 10px}.dq-dom{width:56px;height:56px}.tquote.dq blockquote{font-size:14px}.dq-cta{grid-template-columns:64px minmax(0,1fr);padding:16px}.dq-cta-dom{width:64px;height:64px}.dq-cta .btn{grid-column:1/-1;justify-self:start}}

/* --- Bảng ghim --- */
.lane-sub{margin:-12px 0 -4px;text-align:center;font-size:16px;line-height:1.2;color:rgba(255,248,235,.85)}
.pnote{cursor:pointer}
.pnote:focus-visible{outline:2px solid #FFF3DE;outline-offset:3px}
.n-cnt{font-size:12.5px;font-weight:600;opacity:.75}
.nm .bk-right{display:flex;flex-direction:column;gap:18px}
.nm-eta{font-size:13px;font-weight:600;color:var(--ink-2)}
.nm-say{font-size:21px;line-height:1.35}
.nm-steps{display:grid;gap:0;margin:12px 0 0;padding:0;list-style:none}
.nm-steps li{position:relative;padding:0 0 16px 28px;color:var(--ink-2)}
.nm-steps li::before{content:"";position:absolute;left:4px;top:5px;width:12px;height:12px;border-radius:50%;border:2px solid var(--line);background:var(--card)}
.nm-steps li::after{content:"";position:absolute;left:10px;top:19px;bottom:0;width:2px;background:var(--line)}
.nm-steps li:last-child::after{content:none}
.nm-steps li b{display:block;color:var(--ink);font-weight:600}
.nm-steps li span{font-size:13.5px}
.nm-steps li.past::before{background:var(--accent);border-color:var(--accent)}
.nm-steps li.past::after{background:var(--accent)}
.nm-steps li.now::before{background:var(--accent);border-color:var(--accent);box-shadow:0 0 0 5px var(--accent-soft)}
.nm-steps li.now b{color:var(--accent)}
.nm-dom{display:grid;grid-template-columns:72px minmax(0,1fr);gap:12px;align-items:center;margin-top:auto;padding:12px 14px;border-radius:14px;background:var(--accent-soft)}
.nm-dom-img{width:72px;height:72px}
.nm-dom-img img{width:100%;height:100%}
.nm-dom p{font-size:19px;line-height:1.25}
.bk-sug{white-space:nowrap}

/* --- Góc ngẫm: 3 phòng, tab căn giữa --- */
.gn-intro{text-align:center}
.gn-intro .gn-lead{margin-inline:auto}
.gn-switch{display:flex;width:fit-content;max-width:100%;margin:26px auto 30px;padding:5px;gap:6px;box-shadow:var(--shadow)}
.gn-switch button{padding:10px 26px;font-size:15.5px}
.gn-room{animation:gnfade .3s ease}

/* Tủ sách → bộ thẻ trích dẫn */
.dk .dk-stage{position:relative;width:min(560px,100%);display:grid;justify-items:center;gap:16px}
.dk .gn-x{right:-6px;top:-46px;color:#F4EEE3;background:rgba(0,0,0,.35)}
.dk-deck{position:relative;width:100%;height:min(440px,70vh);perspective:1400px;touch-action:pan-y}
.dk-card{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:34px clamp(22px,5vw,44px);border-radius:18px;background:var(--paper-w);color:var(--ink);box-shadow:0 30px 60px -30px rgba(0,0,0,.75);transform-style:preserve-3d;transition:transform .5s cubic-bezier(.3,1.1,.4,1),opacity .4s;cursor:default;outline:none}
.dk-card[data-pos="0"]{z-index:5}
.dk-card[data-pos="1"]{z-index:4;transform:translate(14px,12px) rotate(3deg) scale(.97);cursor:pointer}
.dk-card[data-pos="2"]{z-index:3;transform:translate(26px,22px) rotate(6deg) scale(.94)}
.dk-card[data-pos="3"]{z-index:2;transform:translate(34px,30px) rotate(8deg) scale(.91)}
.dk-card[data-pos="far"]{z-index:1;opacity:0;transform:translate(34px,30px) rotate(8deg) scale(.9)}
.dk-card[data-pos="gone"]{z-index:6;opacity:0;pointer-events:none;transform:translate(-120%,-10px) rotate(-14deg)}
.dk-card[data-pos="1"]:not(.dk-cover),.dk-card[data-pos="2"],.dk-card[data-pos="3"]{filter:brightness(.97)}
.dk-cover{background:linear-gradient(160deg,var(--c),color-mix(in srgb,var(--c) 55%,#0b0704));color:#FBF4E6}
.dk-cover .mono{color:rgba(251,244,230,.75)}
.dk-cover h2{margin-top:10px;font-family:var(--f-wall);font-weight:600;font-size:clamp(26px,3.6vw,36px);line-height:1.15}
.dk-au{margin-top:6px;font-style:italic;opacity:.85}
.dk-shift{display:grid;gap:10px;margin-top:22px}
.dk-shift p{padding:10px 14px;border-radius:10px;background:rgba(255,255,255,.1);font-size:15px;line-height:1.5}
.dk-shift .mono{display:block;margin-bottom:2px;color:rgba(251,244,230,.7);font-size:10.5px}
.dk-hint{margin-top:22px;font-size:19px;opacity:.85}
.dk-q{padding:0;background:transparent;box-shadow:none}
.dk-face{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:34px clamp(22px,5vw,44px);border-radius:18px;background:var(--paper-w);box-shadow:0 30px 60px -30px rgba(0,0,0,.75);backface-visibility:hidden;-webkit-backface-visibility:hidden;transition:transform .6s cubic-bezier(.3,1.1,.4,1)}
.dk-front{border-top:6px solid var(--c)}
.dk-back{transform:rotateY(180deg);background:#2A231B;color:#F6EEDF}
.dk-q.flipped .dk-front{transform:rotateY(-180deg)}
.dk-q.flipped .dk-back{transform:rotateY(0)}
.dk-q.can-flip{cursor:pointer}
.dk-no{position:absolute;left:clamp(22px,5vw,44px);top:20px}
.dk-mark{font-family:Georgia,serif;font-size:80px;line-height:.6;color:var(--c);opacity:.6}
.dk-quote{font-family:var(--f-wall);font-weight:400;font-size:clamp(19px,2.3vw,24px);line-height:1.45}
.dk-front cite{display:block;margin-top:14px;font-style:normal;font-family:var(--f-mono);font-size:11.5px;color:var(--ink-2)}
.dk-turn{position:absolute;right:22px;bottom:18px;font-family:var(--f-hand);font-size:17px;color:var(--accent)}
.dk-back .mono{color:#E8B06A}
.dk-back p{margin-top:8px;font-size:clamp(21px,2.4vw,26px);line-height:1.35}
.dk-back .dk-turn{color:#E8B06A}
.dk-ls ol{margin:14px 0 0;padding-left:22px}
.dk-ls li{margin-top:10px;font-size:16.5px;line-height:1.5}
.dk-ask{border:2px dashed var(--accent)}
.dk-ask p{margin-top:10px;font-size:clamp(23px,2.8vw,30px);line-height:1.3}
.dk-nav{position:relative;z-index:7;display:flex;align-items:center;gap:16px;margin-top:20px}
.dk-btn{width:46px;height:46px;border:0;border-radius:50%;background:#F4EEE3;color:#2A231B;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 8px 18px -8px rgba(0,0,0,.6);transition:transform .15s}
.dk-btn:hover:not(:disabled){transform:scale(1.08)}
.dk-btn:disabled{opacity:.35;cursor:default}
.dk-count{color:#F4EEE3;min-width:64px;text-align:center}

/* Phòng chiếu: kênh – TV lớn ở giữa – cuộn băng */
.cn{display:grid;gap:22px;justify-items:center}
.cn-chs{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.cn-chs button{display:grid;gap:1px;min-width:150px;padding:10px 16px;border:1.5px solid var(--line);border-radius:12px;background:var(--card);text-align:left;cursor:pointer;transition:border-color .2s,transform .2s,background .2s}
.cn-chs button:hover{transform:translateY(-2px);border-color:var(--accent)}
.cn-chs button b{font-size:15px;line-height:1.25}
.cn-chs button small{font-size:12px;color:var(--ink-2)}
.cn-chs [aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:var(--bg)}
.cn-chs [aria-selected="true"] .mono,.cn-chs [aria-selected="true"] small{color:color-mix(in srgb,var(--bg) 75%,transparent)}
.cn-tv{width:min(980px,100%)}
.cn-tv .tv-screen{aspect-ratio:16/9}
.tv-ch{position:absolute;right:22px;top:16px;z-index:2;color:#9EF0A8;text-shadow:0 0 6px rgba(120,255,150,.7);pointer-events:none}
.cn-tv .tv-screen iframe+.tv-ch{opacity:0}
.cn-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:16px;flex-wrap:wrap;width:min(980px,100%)}
.cn-bar h2{margin-top:4px;font-family:var(--f-wall);font-weight:600;font-size:clamp(19px,2.2vw,25px)}
.cn-au{margin-top:2px;color:var(--ink-2);font-style:italic}
.cn .gn-tapes{width:min(980px,100%);margin-top:0}
.cn .gn-tape[aria-current="true"]{transform:translateY(-6px)}
.cn .gn-tape[aria-current="true"] .gn-reels i{animation:reel 2.4s linear infinite}
@keyframes reel{to{transform:rotate(360deg)}}
.cn-note{width:min(760px,100%);margin-top:8px}

/* Bài viết: sổ ghi chép */
.nb-topics{justify-content:center}
.nb{display:grid;gap:34px;margin-top:22px}
.nb-hero{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);overflow:hidden;border-radius:18px;background:var(--card);border:1px solid var(--line);text-decoration:none;color:inherit;box-shadow:var(--shadow);transition:transform .3s,box-shadow .3s}
.nb-hero:hover{transform:translateY(-3px);box-shadow:0 26px 50px -30px rgba(30,20,10,.6)}
.nb-hero-img{position:relative;display:block;min-height:280px;overflow:hidden;background:#1A1714}
.nb-hero-img img,.nb-hero-img .bl-ph{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;aspect-ratio:auto}
.nb-hero-txt{display:flex;flex-direction:column;gap:10px;padding:clamp(22px,3vw,36px)}
.nb-hero-txt h2{font-family:var(--f-wall);font-weight:600;font-size:clamp(22px,2.6vw,30px);line-height:1.2}
.nb-month{position:relative;padding:22px 22px 10px 70px;border-radius:6px;background:var(--paper-w);background-image:repeating-linear-gradient(180deg,transparent 0 31px,color-mix(in srgb,var(--paper-line) 55%,transparent) 31px 32px);box-shadow:var(--shadow)}
.nb-month::before{content:"";position:absolute;left:52px;top:0;bottom:0;width:1.5px;background:rgba(176,74,53,.45)}
.nb-month::after{content:"";position:absolute;left:18px;top:24px;bottom:24px;width:14px;background:radial-gradient(circle,var(--bg) 0 5px,transparent 6px) 0 0/14px 44px repeat-y}
.nb-mh{font-size:24px;color:var(--accent);margin-bottom:6px}
.nb-row{display:grid;grid-template-columns:56px minmax(0,1fr) 150px;gap:18px;align-items:center;padding:14px 0;border-top:1px dashed var(--line);text-decoration:none;color:inherit;transition:transform .2s}
.nb-row:first-of-type{border-top:0}
.nb-row:hover{transform:translateX(4px)}
.nb-row:hover b{color:var(--accent)}
.nb-stamp{display:grid;place-items:center;width:56px;height:56px;border:2px solid var(--accent);border-radius:50%;color:var(--accent);transform:rotate(-8deg);line-height:1}
.nb-stamp b{font-family:var(--f-wall);font-size:20px}
.nb-stamp small{font-family:var(--f-mono);font-size:10px;margin-top:-10px}
.nb-txt{display:flex;flex-direction:column;gap:4px;min-width:0}
.nb-txt b{font-family:var(--f-wall);font-weight:600;font-size:18px;line-height:1.3;transition:color .2s}
.nb-txt .bl-ex{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:14.5px;line-height:1.55;color:var(--ink-2)}
.nb-thumb{position:relative;display:block;width:150px;aspect-ratio:16/10;overflow:hidden;border-radius:6px;background:#1A1714;transform:rotate(1.5deg);box-shadow:0 8px 16px -10px rgba(0,0,0,.6)}
.nb-thumb img,.nb-thumb .bl-ph{width:100%;height:100%;object-fit:cover}

/* --- Về Minh Tuấn: profile mộc mạc --- */
.ab{padding-bottom:20px}
.ab-hero{display:grid;grid-template-columns:minmax(200px,300px) minmax(0,1fr);gap:clamp(26px,5vw,60px);align-items:center;margin-top:44px}
.ab-photo{position:relative;display:grid;place-items:center;aspect-ratio:4/5;padding:12px 12px 46px;background:#FBF8F2;box-shadow:0 22px 40px -22px rgba(30,20,10,.6);transform:rotate(-2.5deg)}
.ab-photo img{width:100%;height:100%;object-fit:cover}
.ab-photo>span:first-child{display:grid;place-items:center;width:100%;height:100%;background:#E9DFCF;font-family:var(--f-hand);font-size:84px;color:#8C6F4C}
.ab-tape{position:absolute;left:50%;top:-12px;width:96px;height:26px;margin-left:-48px;background:rgba(240,225,190,.75);transform:rotate(3deg)}
.ab-role{margin-top:8px;font-size:17px;font-weight:600;color:var(--accent)}
.ab-p{margin-top:12px;max-width:40em;font-size:16.5px;line-height:1.7}
.ab-motto{margin-top:18px;font-size:clamp(22px,2.4vw,27px);line-height:1.3;color:var(--ink)}
.ab-act{display:flex;flex-wrap:wrap;gap:10px;margin-top:22px}
.ab-sec{margin-top:70px}
.ab-h{display:flex;align-items:baseline;gap:12px;font-family:var(--f-wall);font-weight:600;font-size:clamp(22px,2.6vw,30px)}
.ab-h .mono{color:var(--accent)}
.ab-help{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:18px;margin-top:22px}
.ab-card{position:relative;padding:24px 22px 22px;border-radius:14px;background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow);transition:transform .25s,border-color .25s}
.ab-card:hover{transform:translateY(-4px);border-color:var(--accent)}
.ab-no{font-family:var(--f-hand);font-size:34px;line-height:1;color:var(--accent);opacity:.8}
.ab-card h3{margin-top:8px;font-family:var(--f-wall);font-weight:600;font-size:18px;line-height:1.3}
.ab-who{margin-top:10px;font-size:14px;color:var(--ink-2)}
.ab-who .mono{display:block;font-size:10px}
.ab-how{margin-top:10px;font-size:14.5px;line-height:1.6}
.ab-note{margin-top:18px;font-size:20px;color:var(--ink-2)}
.ab-note a{color:var(--accent)}
.ab-vals{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:14px;margin:22px 0 0;padding:0;list-style:none;counter-reset:v}
.ab-vals li{padding:18px 18px 16px;border-left:3px solid var(--accent);background:var(--paper-w);border-radius:0 10px 10px 0}
.ab-vals b{display:block;font-family:var(--f-wall);font-weight:600;font-size:16.5px}
.ab-vals span{display:block;margin-top:6px;font-size:14.5px;color:var(--ink-2);line-height:1.55}
.ab-road{position:relative;display:grid;gap:18px;margin:22px 0 0;padding:0 0 0 26px;list-style:none}
.ab-road::before{content:"";position:absolute;left:6px;top:6px;bottom:6px;width:2px;background:var(--line)}
.ab-road li{position:relative;display:grid;gap:2px}
.ab-road li::before{content:"";position:absolute;left:-26px;top:5px;width:14px;height:14px;border-radius:50%;background:var(--bg);border:2.5px solid var(--accent)}
.ab-road b{font-size:16.5px}
.ab-road .hand{font-size:19px;color:var(--ink-2)}
.ab-foot{margin:80px 0 40px;padding:34px 20px 30px;border-top:1px dashed var(--line);text-align:center}
.ab-ch{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:16px}
.ab-c{display:inline-flex;align-items:center;gap:8px;padding:9px 16px;border:1.5px solid var(--line);border-radius:999px;background:var(--card);color:var(--ink);text-decoration:none;font-weight:600;font-size:14.5px;transition:border-color .2s,transform .2s,color .2s}
.ab-c svg{width:19px;height:19px}
a.ab-c:hover{transform:translateY(-2px);border-color:var(--accent);color:var(--accent)}
.ab-c.off{opacity:.45;cursor:default}
.ab-mail{margin-top:14px;font-family:var(--f-mono);font-size:13px;color:var(--ink-2);user-select:all}
.ab-sign{margin-top:10px;font-size:22px;color:var(--accent)}
@media (max-width:760px){.ab-hero{grid-template-columns:1fr;justify-items:center;text-align:center}.ab-photo{width:min(240px,70vw)}.ab-act{justify-content:center}.ab-p{margin-inline:auto}}

/* --- Tách cà phê: gọn 1 màn hình --- */
.cf2{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(300px,1fr);gap:clamp(24px,4vw,56px);align-items:center;min-height:calc(100vh - 110px);min-height:calc(100dvh - 110px);padding-block:22px 28px}
.cf2-talk .page-title{margin-top:4px}
.cf2-lead{max-width:40em;margin-top:8px;color:var(--ink-2);font-size:15.5px}
.cf2-form{margin-top:16px;padding:20px clamp(16px,3vw,26px)}
.cf2-form label{margin-top:10px}
.cf2-form .bg-two label{margin-top:10px}
.cf2-form textarea{min-height:64px}
.cf2-form .bg-send{margin-top:12px}
.cf2-tool{margin-left:auto;font-size:14px}
.cf2-cafe{position:relative;display:grid;justify-items:center;gap:10px;padding:18px 18px 16px;border-radius:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--wood1) 22%,var(--card)),var(--card));border:1px solid var(--line)}
.cf2-say{display:grid;grid-template-columns:96px minmax(0,1fr);gap:10px;align-items:center;width:100%}
.cf2-dom{width:96px;height:96px}
.cf2-dom img{width:100%;height:100%;animation:dom-float 4.6s ease-in-out infinite}
.cf2-bubble{position:relative;padding:10px 14px;border-radius:14px 14px 14px 4px;background:var(--paper-w);box-shadow:var(--shadow);font-size:19px;line-height:1.28}
.cf2-cup{position:relative;width:min(300px,100%);padding-top:30px}
.cf2-cupsvg{display:block;width:100%;height:auto;filter:drop-shadow(0 14px 18px rgba(0,0,0,.25))}
.cf2-cup .cf-steam{top:-6px}
.cf2-qr{position:absolute;left:47.7%;top:calc(30px + 49%);width:31%;aspect-ratio:1;transform:translate(-50%,-50%) rotate(-3deg);padding:5px;border:0;border-radius:8px;background:#fff;box-shadow:0 2px 8px rgba(0,0,0,.18);cursor:zoom-in;transition:transform .35s cubic-bezier(.3,1.3,.5,1),box-shadow .35s;z-index:2}
.cf2-qr img{display:block;width:100%;height:100%;object-fit:contain}
.cf2-qr:hover{transform:translate(-50%,-50%) rotate(0) scale(1.06)}
.cf2-qr.zoom{position:fixed;left:50%;top:50%;width:min(320px,80vw);transform:translate(-50%,-50%);z-index:130;cursor:zoom-out;box-shadow:0 0 0 100vmax rgba(15,10,6,.65),0 20px 50px rgba(0,0,0,.5)}
.cf2-qr.none{display:grid;place-items:center;background:#F5EFE2;color:#6A6157;font-size:15px;cursor:default;text-align:center}
.cf2-bank{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;width:100%;margin:4px 0 0;font-size:14px}
.cf2-bank dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);padding-top:3px}
.cf2-bank dd{margin:0;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.cf2-thanks{font-size:18px;color:var(--accent);text-align:center}
.cf2-wall{width:100%;text-align:center}
.cf2-wall p{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 10px;margin-top:4px;font-family:var(--f-hand);font-size:17px;color:var(--ink-2)}
@media (max-width:900px){.cf2{grid-template-columns:1fr;min-height:0}.cf2-cafe{max-width:480px;justify-self:center;width:100%}}
@media (max-width:640px){.nb-hero{grid-template-columns:1fr}.nb-hero-img{min-height:190px}.nb-month{padding:18px 14px 8px 44px}.nb-month::before{left:32px}.nb-month::after{left:8px}.nb-row{grid-template-columns:46px minmax(0,1fr);gap:12px}.nb-stamp{width:46px;height:46px}.nb-thumb{display:none}
  .gn-switch button{padding:9px 16px;font-size:14.5px}.cn-chs button{min-width:0;flex:1 1 40%}.dk-deck{height:min(460px,68vh)}}
@media (prefers-reduced-motion:reduce){.dust{display:none}.dk-card,.dk-face{transition:none}}
/* Bộ công cụ: gọn màn hình đầu để thấy cả thanh chuyển trang của carousel */
.tools-head{margin-top:-18px}
.tools-head .page-title{font-size:clamp(28px,3.2vw,40px)}
.tquote.dq+.tbar{margin-top:14px}
@media (min-width:641px){.car-item .cbook{aspect-ratio:auto;height:clamp(250px,calc(100vh - 350px),382px);height:clamp(250px,calc(100dvh - 350px),382px)}}
@media (max-width:640px){.car-item .cbook{aspect-ratio:auto;height:clamp(230px,calc(100svh - 470px),340px)}.tools-head{margin-top:-8px}}
.tquote.dq{grid-template-columns:60px minmax(0,1fr);gap:14px;padding:8px 20px 8px 12px}
.tquote.dq .dq-dom{width:60px;height:60px}
.tquote.dq blockquote{font-size:14.5px;line-height:1.55}
@media (min-width:641px){.car-item .cbook{height:clamp(250px,calc(100vh - 380px),382px);height:clamp(250px,calc(100dvh - 380px),382px)}}
@media (max-width:640px){.tquote.dq{grid-template-columns:44px minmax(0,1fr)}.tquote.dq .dq-dom{width:44px;height:44px}.tquote.dq blockquote{font-size:13.5px;line-height:1.5}.car-item .cbook{height:clamp(220px,calc(100svh - 520px),320px)}}
.gn-modal{z-index:110}
.lane-sub{color:#3A2A1C;opacity:.85;font-size:15.5px}
.bg-send .cf2-tool{margin-left:auto;padding:0;border-radius:0;background:none;color:var(--accent);font-weight:600;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.bg-send .cf2-tool:hover{background:none;color:var(--ink)}
/* v1.12c: nhãn Coming soon – nền trắng, chữ đỏ, phát sáng */
.cbook.st-soon .cb-foot .stb{background:#fff;border-color:#fff;color:#D62F22;font-weight:700;text-shadow:0 0 6px rgba(255,80,60,.45);box-shadow:0 0 0 1px rgba(214,47,34,.25),0 0 12px 2px rgba(255,90,70,.55),0 0 24px 4px rgba(255,90,70,.25);animation:soon-glow 2.4s ease-in-out infinite}
.cbook.st-soon .cb-foot .stb::before{background:#D62F22;opacity:1;box-shadow:0 0 6px 1px rgba(255,70,50,.8)}
@keyframes soon-glow{0%,100%{box-shadow:0 0 0 1px rgba(214,47,34,.25),0 0 10px 1px rgba(255,90,70,.45),0 0 20px 3px rgba(255,90,70,.2)}50%{box-shadow:0 0 0 1px rgba(214,47,34,.35),0 0 16px 3px rgba(255,90,70,.7),0 0 30px 6px rgba(255,90,70,.3)}}
:root[data-lamp="off"] .subhead .mb-t{background:#2E2720;box-shadow:0 0 0 1px #4A3F33,0 6px 16px -8px rgba(0,0,0,.8)}
:root[data-lamp="off"] .mi-cut{stroke:#E8735F}