/* Tu Viện Trúc Lâm. Chỉ #stage (canvas 1080×1920) co theo màn; mọi chữ/nút nằm ở #ui với cỡ px THẬT (L-02, L-03, L-10).
   #ui nhận biến từ fit() trong app.js: --sl/--st/--sw/--sh = khung canvas trên màn, --tb = đáy thanh trên, --bh = cao thanh dưới, --pw = bề ngang cột bên (màn rộng). */

/* ===== B-40 Sơn mài · font tự host (SIL OFL 1.1, xem fonts/OFL-*.txt) — chỉ tập con latin + vietnamese ===== */
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/be-vietnam-pro-400-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:400; font-display:swap; src:url(fonts/be-vietnam-pro-400-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/be-vietnam-pro-600-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family:"Be Vietnam Pro"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/be-vietnam-pro-600-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/cormorant-garamond-600-vietnamese.woff2) format("woff2"); unicode-range:U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family:"Cormorant Garamond"; font-style:normal; font-weight:600; font-display:swap; src:url(fonts/cormorant-garamond-600-latin.woff2) format("woff2"); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* ===== Sơn mài: nguyên liệu (spec B-40 mục 2, research-ui.md mục 3.1) ===== */
:root{
  --font-display:"Cormorant Garamond","Noto Serif",Georgia,serif;   /* chỉ dùng ≥ 18px, bật lining-nums */
  --font-ui:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --then-900:#120D0B; --then-800:#1C1512; --then-700:#2A201B;
  --son-700:#7E1F14; --son-600:#9E2B1C; --son-500:#B8402A;
  --vang-200:#F5E7C1; --vang-300:#EBD39A; --vang-400:#E2C27E; --vang-500:#CDA45A; --vang-700:#8C6A2C;
  --giay-50:#FBF6EC; --giay-100:#F4EBDA; --giay-200:#E9DCC3;
  --muc-900:#2A1E16; --muc-700:#5A4636; --muc-500:#7E6A58;
  --ngoc-500:#4F8770; --ngoc-300:#8FCBAE;
  --aura-1:#F4EEDF; --aura-2:#F2D68A; --aura-3:#E9A24E; --aura-4:#7FC4B4; --aura-5:#F1A7B8; --aura-6:#FFE7A3;
  /* hình khối */
  --r-sm:12px; --r-md:18px; --r-lg:24px; --r-sheet:26px; --r-pill:999px;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:20px; --sp-6:24px;
  --hit:44px;            /* vùng chạm chuẩn; không gì dưới 40px */
  --ease:cubic-bezier(.22,1,.36,1); --t-fast:200ms; --t-panel:450ms; --t-toast:300ms;
  --blur:saturate(1.4) blur(18px);
  /* cỡ chữ (điện thoại) */
  --fs-xs:calc(12px * var(--fz)); --fs-sm:calc(13px * var(--fz)); --fs-md:calc(15px * var(--fz)); --fs-lg:calc(17px * var(--fz)); --fs-title:calc(24px * var(--fz)); --fs-room:calc(22px * var(--fz));
  /* lớp z (research mục 3.4) */
  --fz:1;               /* B-84 cỡ chữ: Vừa = 1, Lớn = 1,15 (:root.co-lon); mọi font-size chữ HTML nhân biến này, canvas không đổi */
  --z-hud:20; --z-yn:25; --z-modal:30; --z-toast:40; --z-conn:45; --z-fade:50; --z-xoay:100;
}
#ui.wide{ /* máy tính: theo B-35 (to hơn mockup) */
  --fs-xs:calc(14px * var(--fz)); --fs-sm:calc(15px * var(--fz)); --fs-md:calc(17px * var(--fz)); --fs-lg:calc(19px * var(--fz)); --fs-title:calc(30px * var(--fz)); --fs-room:calc(28px * var(--fz)); --hit:52px;
}
:root.co-lon{ --fz:1.15; }
/* ngữ nghĩa: ĐÊM = sơn then (Đợt 1–3 chỉ dùng bộ này) */
:root, :root[data-time="night"]{
  --surface:rgba(24,18,15,.72); --surface-strong:rgba(28,21,18,.95); --surface-sunk:rgba(255,236,200,.06);
  --on-surface:#F4EBDA; --on-surface-2:rgba(244,235,218,.70); --line:rgba(226,194,126,.18); --line-strong:rgba(226,194,126,.32);
  --accent:#E2C27E; --accent-soft:rgba(226,194,126,.12); --on-accent:#1C1512; --gold:#E2C27E; --ok:#8FCBAE; --danger:#E58A75;
  --shadow:0 10px 36px rgba(0,0,0,.5),0 1px 2px rgba(0,0,0,.4);
  --feed-bg:rgba(8,6,12,.5);
}
/* NGÀY = giấy dó (bật ở cuối Đợt 4, sau khi dọn màu cứng) */
:root[data-time="day"]{
  --surface:rgba(251,246,236,.84); --surface-strong:rgba(251,246,236,.97); --surface-sunk:rgba(110,80,50,.08);
  --on-surface:#2A1E16; --on-surface-2:#6E5A49; --line:rgba(90,70,54,.16); --line-strong:rgba(90,70,54,.28);
  --accent:#9E2B1C; --accent-soft:rgba(158,43,28,.10); --on-accent:#FBF6EC; --gold:#A97C2F; --ok:#3F7A60; --danger:#9E2B1C;
  --shadow:0 10px 32px rgba(42,20,10,.24),0 1px 2px rgba(42,20,10,.12);
  --feed-bg:rgba(30,14,8,.42);
}
/* cầu nối biến cũ → token mới (CSS cũ đổi màu ngay Đợt 1, dọn dần ở Đợt 3) */
:root{ --gold2:var(--vang-500); --red:var(--son-700); --ink:var(--on-surface); --panel:var(--surface-strong); }
/* mẫu dùng chung */
svg.i{width:22px;height:22px;flex:0 0 auto;vertical-align:middle}
#ui.wide svg.i{width:26px;height:26px}
.glass{background:var(--surface);-webkit-backdrop-filter:var(--blur);backdrop-filter:var(--blur);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--on-surface)}
.solid{background:var(--surface-strong);border:1px solid var(--line);box-shadow:var(--shadow);color:var(--on-surface)}
@supports not (backdrop-filter:blur(1px)){ .glass{background:var(--surface-strong)} }
/* B-86: vòng focus bàn phím thấy rõ trên cả nền then (đêm) lẫn giấy dó (ngày): viền --accent + quầng tối mỏng; chuột/chạm không hiện (chỉ :focus-visible) */
:focus-visible{outline:3px solid var(--accent)!important;outline-offset:2px;box-shadow:0 0 0 6px rgba(18,13,11,.55)}
#modalCard:focus-visible, #cv:focus-visible{outline:none!important;box-shadow:none}
input:focus-visible, textarea:focus-visible, select:focus-visible{outline-offset:0}
/* B-85: giảm chuyển động — app.js gắn .giam-cd lên <html> theo prefers-reduced-motion (mặc định) hoặc công tắc trong Cài đặt */
.giam-cd *, .giam-cd *::before, .giam-cd *::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}

* { box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body { margin:0; height:100%; background:var(--then-900); color:var(--on-surface); font:calc(15px * var(--fz))/1.5 var(--font-ui); font-variant-numeric:lining-nums; overflow:hidden; overscroll-behavior:none; }
button { font:inherit; color:inherit; cursor:pointer; }
[hidden] { display:none !important; }

/* ---------- khung canvas (co theo màn) ---------- */
#bg { position:fixed; inset:0; width:100%; height:100%; filter:blur(22px) brightness(.45) saturate(1.2); transform:scale(1.15); }
#view { position:fixed; left:0; top:0; width:100%; height:100%; overflow:hidden; }
#stage { position:absolute; left:0; top:0; width:1080px; height:1920px; transform-origin:0 0; overflow:hidden; box-shadow:0 0 80px rgba(0,0,0,.7); border-radius:6px; --s:1; }
#cv { position:absolute; inset:0; width:1080px; height:1920px; display:block; touch-action:none; }
#yt, #ytCard { position:absolute; border:0; background:#000; z-index:2; }
/* phần trong khung nhưng là chữ/nút: chia cho tỉ lệ co để ra đúng px thật */
#ytCard { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:calc(10px / var(--s)); text-align:center; padding:calc(10px / var(--s)); background:radial-gradient(#3a1a0c,#0d0503); font-size:calc(15px / var(--s)); }
/* B-67: lớp phủ chuyển phòng — tối dần 300 ms, giữ tối tới khi có phòng mới, sáng dần 300 ms; phủ cả #yt/#ytBig/#obArrow */
#manChuyen { position:absolute; inset:0; z-index:5; pointer-events:none; background:var(--then-900); opacity:0; transition:opacity .3s ease; }
#manChuyen.chuyen { opacity:1; }
#ytCard small { font-size:calc(14px / var(--s)); opacity:.8; }
#ytCard a { background:var(--accent); color:var(--on-accent); padding:0 calc(16px / var(--s)); min-height:calc(44px / var(--s)); display:inline-flex; align-items:center; border-radius:calc(22px / var(--s)); text-decoration:none; font-weight:700; }
/* B-83: dòng "Bài này chưa có phụ đề" ngay dưới khung giảng (toạ độ cảnh, chữ chia --s ra đúng px thật ≥ 12) */
#ytNoPD { position:absolute; z-index:3; margin:0; text-align:left; font-size:calc(var(--fs-xs) / var(--s)); color:var(--on-surface-2); background:var(--surface-strong); border-radius:calc(8px / var(--s)); padding:calc(4px / var(--s)) calc(10px / var(--s)); }
#ytBig { position:absolute; right:170px; top:1441px; z-index:3; background:var(--surface-strong); border:1px solid var(--line-strong); border-radius:calc(12px / var(--s)); padding:0 calc(14px / var(--s)); min-height:calc(44px / var(--s)); font-size:calc(14px / var(--s)); color:var(--gold); }

/* ---------- lớp giao diện ---------- */
#ui { position:fixed; left:0; top:0; width:100%; height:100%; z-index:5; pointer-events:none; --fsS:calc(12px * var(--fz)); --fsB:calc(15px * var(--fz)); --sl:0px; --st:0px; --sw:100vw; --sh:100vh; --tb:0px; --bh:0px; --pw:360px; }
#ui.wide { --fsS:calc(14px * var(--fz)); --fsB:calc(16px * var(--fz)); }
#hud { position:absolute; inset:0; pointer-events:none; }
#hud .top, #hud .bottom, #hud .strip, #hud .gopy, #hud .counts, #hud .leBanner, #hud .dongtam { pointer-events:auto; }

/* thanh trên */
.top { position:absolute; left:8px; right:8px; top:calc(6px + env(safe-area-inset-top)); height:var(--hit); display:flex; gap:6px; align-items:stretch; }
.brand { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:var(--r-md); box-shadow:var(--shadow); padding:0 12px; display:flex; flex-direction:column; justify-content:center; min-width:0; }
.brand b { font-family:var(--font-display); font-weight:600; font-size:calc(20px * var(--fz)); line-height:1.1; color:var(--accent); letter-spacing:.2px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand span { font-size:var(--fsS); line-height:1.35; color:var(--on-surface-2); }
.brand .am { color:var(--on-surface-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.brand .am span { font-size:inherit; opacity:1; }
.brand .am .am-ngan, .brand .am.gon .am-dai { display:none; } /* L-12: khung hẹp hiện bản gọn (Sảnh bỏ năm can chi), chạm xem đủ */
.brand .am.gon .am-ngan { display:inline; }
.brand .am.gon { cursor:pointer; }
.via-item { border-color:var(--gold); }
.top .sp { flex:1; }
.merit { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--shadow); padding:0 12px; text-align:right; display:flex; flex-direction:column; justify-content:center; line-height:1.25; }
.merit small { font-size:var(--fsS); color:var(--on-surface-2); white-space:nowrap; }
.merit b { font-size:calc(17px * var(--fz)); font-weight:600; color:var(--accent); font-variant-numeric:tabular-nums; }
.icon { flex:0 0 var(--hit); width:var(--hit); background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow); color:var(--accent); font-size:calc(20px * var(--fz)); padding:0; display:flex; align-items:center; justify-content:center; }

/* vùng nổi trên mép trên canvas (màn hẹp) */
.ov { position:absolute; left:6px; right:6px; top:calc(var(--ovt, max(var(--st), var(--tb))) + 6px); display:flex; flex-direction:column; gap:6px; pointer-events:none; }
.ovrow { display:flex; gap:6px; align-items:flex-start; }
.tl { flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; align-items:flex-start; }
.strip { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); border-radius:var(--r-md); box-shadow:var(--shadow); padding:4px 4px 4px 10px; min-height:var(--hit); font-size:calc(13px * var(--fz)); line-height:1.3; display:flex; align-items:center; gap:8px; }
.strip button { margin-left:auto; flex:0 0 auto; background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-pill); min-height:var(--hit); padding:0 14px; font-weight:600; font-size:calc(14px * var(--fz)); white-space:nowrap; }
.leBanner { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); border-radius:var(--r-sm); padding:3px 10px; font-size:calc(13px * var(--fz)); color:var(--accent); }
.gopy { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:var(--r-pill); box-shadow:var(--shadow); color:var(--on-surface); min-height:var(--hit); padding:0 12px; font-size:calc(14px * var(--fz)); }
.gopy i { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--son-500); box-shadow:0 0 0 2px var(--then-800); margin-left:6px; vertical-align:middle; }
.counts { flex:0 0 auto; background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:var(--r-sm); padding:4px 8px; font-size:var(--fsS); line-height:1.5; }
.counts div { display:flex; justify-content:space-between; gap:10px; }
.counts div.here { color:var(--accent); font-weight:600; }
.feed { display:flex; flex-direction:column; gap:4px; pointer-events:none; max-width:100%; }
.feed div { background:var(--feed-bg); border-radius:var(--r-pill); padding:2px 10px; font-size:calc(13px * var(--fz)); animation:feedIn .4s ease-out, feedOut .8s ease-in 5.2s forwards; align-self:flex-start; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.feed div:nth-last-child(n+3) { display:none; } /* màn hẹp: chỉ 2 dòng mới nhất, khỏi che cảnh */
.feed div b { color:var(--vang-300); font-weight:600; }
#ui.tinh .feed { display:none; } /* B-45: Chế độ Tĩnh ẩn dòng tin */
#chatIn { text-overflow:ellipsis; }
.dongtam { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:var(--r-pill); padding:2px 12px; font-size:calc(13px * var(--fz)); color:var(--vang-200); }
@keyframes feedIn { from { transform:translateX(-20px); opacity:0 } }
@keyframes feedOut { to { opacity:0 } }

/* thanh dưới: nằm NGOÀI canvas, canvas co vừa khoảng còn lại */
.bottom { position:absolute; left:8px; right:8px; bottom:calc(6px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; gap:6px; }
.acts { display:grid; grid-auto-flow:column; grid-auto-columns:minmax(0,1fr); gap:4px; }
.acts button { min-width:0; min-height:56px; background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow); color:var(--on-surface); padding:3px 2px; font-size:calc(12px * var(--fz)); line-height:1.25; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2px; text-align:center; overflow-wrap:anywhere; }
.acts button i { font-style:normal; font-size:calc(20px * var(--fz)); line-height:1.1; color:var(--gold); }
.acts button:active { transform:scale(.96); }
.acts button.door { border-color:color-mix(in srgb, var(--ngoc-300) 45%, transparent); color:var(--ngoc-300); }
/* B-70: chip sang phòng bám mép trái/phải cảnh (màn rộng đủ chỗ; --sl/--sw do fit() đặt), giữa chiều cao màn */
.edges { position:absolute; inset:0; pointer-events:none; z-index:var(--z-hud); }
.edge { position:absolute; top:var(--edgeY, 50%); display:flex; align-items:center; gap:10px; min-height:var(--hit); max-width:min(220px, calc(var(--sw) * .3)); padding:6px 16px 6px 6px; border-radius:var(--r-pill); text-align:left; transition:transform .25s var(--ease); }
.edge.l { left:calc(var(--sl) + 12px); transform:translateY(-50%); }
.edge.r { left:calc(var(--sl) + var(--sw) - 12px); transform:translate(-100%,-50%); flex-direction:row-reverse; padding:6px 6px 6px 16px; text-align:right; }
.edge .ibtn { flex:0 0 40px; width:40px; height:40px; border-radius:50%; background:var(--surface-sunk); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.edge .tx { display:flex; flex-direction:column; min-width:0; line-height:1.25; }
.edge b { font-size:calc(17px * var(--fz)); font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.edge small { font-size:calc(14px * var(--fz)); color:var(--on-surface-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
@media (hover:hover) { .edge.l:hover { transform:translate(-3px,-50%); } .edge.r:hover { transform:translate(calc(-100% + 3px),-50%); } }
.giam-cd .edge.l:hover { transform:translateY(-50%); } .giam-cd .edge.r:hover { transform:translate(-100%,-50%); }
#hud .edge { pointer-events:auto; }
/* 03/11 (PM "dạt ra 2 bên"): bản 3D cảnh phủ cả màn → màn rộng thì chip trái sát cột HUD, chip phải sát mép phải màn (không bám khung tranh 2D nữa) */
body.tl3d-ve #ui.wide .edge.l { left:calc(16px + var(--pw, 300px) + 14px); }
body.tl3d-ve #ui.wide .edge.r { left:auto; right:24px; transform:translateY(-50%); }
@media (hover:hover) { body.tl3d-ve #ui.wide .edge.r:hover { transform:translate(3px,-50%); } }
body.tl3d-ve.giam-cd #ui.wide .edge.r:hover, .giam-cd body.tl3d-ve #ui.wide .edge.r:hover { transform:translateY(-50%); }
#ui.wide:has(#modal.is-panel:not([hidden])) .edge.r { visibility:hidden; pointer-events:none; } /* L-41: bảng cạnh phải mở thì chip phải (B-70) nằm đè lên bảng, che nút "Để mõ tự gõ" ở 1440 */
.chat { display:flex; gap:6px; }
.chat input { flex:1; min-width:0; width:auto; margin:0; height:var(--hit); background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); border-radius:var(--r-pill); color:var(--ink); padding:0 14px; font-size:calc(16px * var(--fz)); outline:none; }
.chat button { flex:0 0 auto; min-width:64px; height:var(--hit); background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-pill); padding:0 16px; font-size:calc(15px * var(--fz)); font-weight:600; }
/* B-51 Chào nhau: nút tròn trước ô chat + hàng 2 lựa chọn nổi ngay trên */
.chat { position:relative; }
.chat .chao { flex:0 0 var(--hit); width:var(--hit); min-width:0; padding:0; background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); color:var(--accent); display:flex; align-items:center; justify-content:center; }
.chat .chao[aria-expanded="true"] { background:var(--accent-soft); }
#chaoChon { position:absolute; left:0; bottom:calc(100% + 6px); z-index:5; display:flex; gap:6px; padding:4px; max-width:100%; background:var(--surface-strong); border:1px solid var(--line-strong); border-radius:var(--r-pill); box-shadow:var(--shadow); }
#chaoChon button { min-width:0; height:var(--hit); padding:0 16px; background:var(--surface-sunk); color:var(--on-surface); border:1px solid var(--line); white-space:nowrap; }

/* màn rộng (laptop, desktop, máy ngang): canvas dọc ở giữa, HUD sang 2 cột bên */
#ui.wide .top { left:16px; right:auto; width:var(--pw); top:16px; height:56px; }
#ui.wide .brand b { font-size:calc(20px * var(--fz)); }
#ui.wide .merit b { font-size:calc(20px * var(--fz)); }
#ui.wide .icon { flex-basis:56px; width:56px; font-size:calc(24px * var(--fz)); }
#ui.wide .ov { left:16px; width:var(--pw); top:84px; }
#ui.wide .ovrow { flex-direction:column; align-items:stretch; }
#ui.wide .counts { order:-1; font-size:calc(15px * var(--fz)); padding:8px 14px; line-height:1.7; }
#ui.wide .strip, #ui.wide .leBanner, #ui.wide .gopy, #ui.wide .feed div, #ui.wide .dongtam { font-size:calc(15px * var(--fz)); }
#ui.wide .feed div:nth-last-child(n+3) { display:block; }
#ui.wide .bottom { left:auto; right:16px; width:var(--pw); bottom:16px; gap:10px; }
#ui.wide .acts { grid-auto-flow:row; grid-template-columns:repeat(3,minmax(0,1fr)); gap:8px; }
#ui.wide .acts button { min-height:64px; font-size:calc(14px * var(--fz)); }
#ui.wide .acts button i { font-size:calc(24px * var(--fz)); }

/* ý nghĩa thao tác (B-05) */
#yn { position:absolute; left:calc(var(--sl) + 8px); width:calc(var(--sw) - 16px); top:calc(var(--st) + var(--sh) * .40); z-index:15; pointer-events:auto; background:var(--surface-strong); border:1px solid var(--line-strong); border-radius:var(--r-md); color:var(--on-surface); padding:12px 16px; display:flex; flex-direction:column; gap:2px; font-size:calc(14px * var(--fz)); line-height:1.4; box-shadow:var(--shadow); animation:feedIn .3s; cursor:pointer; }
#yn b { color:var(--accent); font-family:var(--font-display); font-weight:600; font-size:calc(19px * var(--fz)); line-height:1.25; }
#yn small { font-size:var(--fsS); color:var(--on-surface-2); font-style:italic; }
#ui.wide #yn { left:auto; right:16px; width:var(--pw); top:auto; bottom:calc(var(--bh) + 12px); font-size:calc(15px * var(--fz)); }
#ui.wide #yn b { font-size:calc(22px * var(--fz)); }

/* thông báo nổi */
#toast { position:absolute; left:calc(var(--sl) + var(--sw) / 2); top:calc(var(--tb) + 8px); transform:translateX(-50%); width:max-content; max-width:min(92vw, 440px); z-index:var(--z-toast); display:flex; flex-direction:column; gap:6px; align-items:center; pointer-events:none; }
#toast div { background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); border-radius:var(--r-pill); box-shadow:var(--shadow); color:var(--on-surface); padding:9px 18px; font-size:calc(14px * var(--fz)); line-height:1.4; text-align:center; animation:toastIn var(--t-toast) var(--ease); pointer-events:auto; }
@supports not (backdrop-filter:blur(1px)) { #toast div { background:var(--surface-strong); } }
@keyframes toastIn { from { opacity:0; transform:translateY(-8px); } }
/* B-40 đợt 3: tấm dưới đang mở → toast lên sát đỉnh (đỉnh tấm chừa 56px) để không đè tiêu đề; bảng cạnh đang mở → toast giữa vùng trái bảng */
#modal.is-sheet:not([hidden]) ~ #toast { top:calc(8px + env(safe-area-inset-top)); }
#ui.wide #modal.is-panel:not([hidden]) ~ #toast { left:calc((100% - 472px - 16px) / 2); }
#ui.wide #toast div { font-size:calc(15px * var(--fz)); }
#toast div.err { border-color:var(--danger); }
#toast div.tt { border-color:var(--line); color:var(--on-surface-2); } /* B-46: toast tu tập ẩn danh, nhạt hơn toast thường */
#conn { position:absolute; left:50%; top:calc(6px + env(safe-area-inset-top)); transform:translateX(-50%); z-index:var(--z-conn); background:var(--son-600); color:var(--giay-50); padding:6px 14px; border-radius:var(--r-pill); font-size:calc(14px * var(--fz)); pointer-events:auto; }

/* ---------- hộp thoại + màn vào ---------- */
.overlay { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:calc(8px + env(safe-area-inset-top)) 8px calc(8px + env(safe-area-inset-bottom)); background:rgba(10,4,2,.55); z-index:10; backdrop-filter:blur(3px); pointer-events:auto; }
#gate { background:var(--surface-strong); background:radial-gradient(ellipse at 50% 30%, color-mix(in srgb, var(--then-700) 40%, transparent), color-mix(in srgb, var(--then-900) 88%, transparent)); }
.card { width:min(520px, 100%); max-height:100%; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain; background:var(--surface-strong); border:1px solid var(--line-strong); border-radius:var(--r-lg); padding:18px 18px 20px; box-shadow:0 20px 60px rgba(0,0,0,.6); font-size:var(--fsB); position:relative; }
.card h1, #gate h1 { margin:0; text-align:center; color:var(--accent); font-size:calc(34px * var(--fz)); line-height:1.15; letter-spacing:.3px; font-family:var(--font-display); font-weight:600; }
.card h2 { margin:0 44px 12px 0; color:var(--accent); font-size:var(--fs-title); font-family:var(--font-display); font-weight:600; line-height:1.25; }
.card h3 { margin:16px 0 6px; color:var(--accent); font-size:calc(16px * var(--fz)); font-weight:600; }
.logo { text-align:center; font-size:calc(42px * var(--fz)); color:var(--accent); line-height:1; text-shadow:0 0 20px var(--accent-soft); }
.sub { text-align:center; color:var(--on-surface-2); margin:4px 0 14px; font-size:calc(13px * var(--fz)); }
#ui.wide .sub { font-size:calc(14px * var(--fz)); }
.tabs { display:flex; gap:6px; background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-pill); padding:4px; margin-bottom:12px; }
.tabs button { flex:1; border:0; background:none; min-height:var(--hit); border-radius:var(--r-pill); font-size:calc(15px * var(--fz)); }
.tabs button.on { background:var(--accent); color:var(--on-accent); font-weight:600; }
label { display:block; margin:10px 0; font-size:calc(14px * var(--fz)); color:var(--on-surface); }
#ui.wide label { font-size:calc(15px * var(--fz)); }
label small { color:var(--on-surface-2); font-size:var(--fsS); }
input, textarea, select { display:block; width:100%; margin-top:5px; background:var(--surface-sunk); border:1px solid var(--line-strong); border-radius:var(--r-sm); color:var(--on-surface); min-height:var(--hit); padding:8px 12px; font:inherit; font-size:calc(16px * var(--fz)); outline:none; }
input:focus, textarea:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft); }
textarea { min-height:120px; resize:vertical; }
select { width:auto; }
.row { display:flex; gap:8px; align-items:stretch; }
.row input { flex:1; }
.row button { margin-top:5px; }
.hint { display:block; font-size:calc(13px * var(--fz)); color:var(--accent); margin-top:4px; min-height:2px; }
#ui.wide .hint { font-size:calc(14px * var(--fz)); }
.hint button { background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:var(--r-pill); min-height:var(--hit); padding:0 12px; margin:4px 6px 0 0; font-size:calc(14px * var(--fz)); }
.err { color:var(--danger); min-height:18px; margin:4px 0; font-size:calc(14px * var(--fz)); }
.primary { display:block; width:100%; margin-top:8px; background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-pill); min-height:48px; padding:10px 18px; font-size:calc(17px * var(--fz)); font-weight:600; box-shadow:0 6px 18px rgba(0,0,0,.35); }
.primary.big { font-size:calc(20px * var(--fz)); min-height:56px; }
.ghost { background:var(--surface-sunk); border:1px solid var(--line-strong); border-radius:var(--r-pill); min-height:var(--hit); padding:0 14px; font-size:calc(14px * var(--fz)); }
.link { display:block; margin:10px auto 0; min-height:var(--hit); padding:0 14px; background:none; border:0; color:var(--on-surface-2); text-decoration:underline; font-size:calc(14px * var(--fz)); }
.hello { text-align:center; font-size:calc(19px * var(--fz)); margin:6px 0 12px; }
.note { text-align:center; opacity:.75; font-size:calc(13px * var(--fz)); }
#ui.wide .note { font-size:calc(14px * var(--fz)); }
.robes { display:flex; gap:6px; margin-top:5px; }
.robes button { flex:1; border:2px solid transparent; border-radius:var(--r-sm); min-height:60px; padding:6px 2px; background:var(--surface-sunk); font-size:calc(13px * var(--fz)); }
.robes button::before { content:""; display:block; width:24px; height:24px; border-radius:50%; background:var(--c); margin:0 auto 3px; border:2px solid rgba(255,255,255,.3); }
.robes button.on { border-color:var(--accent); background:var(--accent-soft); }
#ui.wide .robes button { font-size:calc(14px * var(--fz)); }
.x { position:absolute; right:4px; top:4px; width:var(--hit); height:var(--hit); padding:0; background:none; border:0; font-size:calc(28px * var(--fz)); line-height:1; opacity:.8; z-index:1; }
.seg { display:flex; gap:6px; margin:8px 0; flex-wrap:wrap; }
.seg button { flex:1; min-height:var(--hit); border:1px solid var(--line-strong); background:var(--surface-sunk); border-radius:var(--r-pill); padding:4px 10px; font-size:calc(14px * var(--fz)); }
.seg button.on { background:var(--accent); color:var(--on-accent); border-color:var(--accent); font-weight:600; }
.check { display:flex; align-items:center; gap:4px; font-size:calc(14px * var(--fz)); margin:8px 0; }
.check label { margin:0; flex:1; }
.check input { -webkit-appearance:none; appearance:none; flex:0 0 var(--hit); width:var(--hit); height:var(--hit); min-height:0; margin:0; padding:0; border:0; background:none; position:relative; cursor:pointer; }
.check input::before { content:""; position:absolute; left:10px; top:10px; width:24px; height:24px; border:2px solid var(--line-strong); border-radius:7px; background:var(--surface-sunk); box-sizing:border-box; }
.check input:checked::before { background:var(--gold); }
.check input:checked::after { content:"✓"; position:absolute; left:0; top:0; width:var(--hit); line-height:var(--hit); text-align:center; color:var(--on-accent); font-weight:800; font-size:calc(16px * var(--fz)); }
.item { background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-md); padding:12px 14px; margin:8px 0; }
.item .meta { font-size:var(--fsS); opacity:.8; display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:4px; }
.item .txt { font-size:calc(15px * var(--fz)); white-space:pre-wrap; word-break:break-word; }
.item .bar { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; align-items:center; }
.item .bar button, .item .bar select { background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:10px; min-height:var(--hit); padding:0 12px; font-size:calc(14px * var(--fz)); margin:0; }
.item .bar button.on { background:var(--gold); color:var(--on-accent); }
.item .bar .sp { flex:1; }
.badge { border-radius:8px; padding:1px 7px; font-size:var(--fsS); font-weight:700; }
.badge { color:var(--on-surface); }
.b-moi { background:color-mix(in srgb, #4a6fa5 30%, transparent); } .b-danglam { background:color-mix(in srgb, #b7791f 30%, transparent); } .b-xong { background:color-mix(in srgb, var(--ok) 26%, transparent); } .b-khonglam { background:var(--surface-sunk); }
.b-loi { background:color-mix(in srgb, var(--danger) 26%, transparent); } .b-tinhnang { background:color-mix(in srgb, #6b46c1 30%, transparent); } .b-khac { background:color-mix(in srgb, #2c7a7b 30%, transparent); }
.reply { margin-top:6px; padding:6px 10px; border-left:3px solid var(--gold); background:var(--accent-soft); font-size:calc(14px * var(--fz)); }
.big-num { font-size:calc(48px * var(--fz)); color:var(--accent); text-align:center; font-family:var(--font-display); font-weight:600; line-height:1.1; }
.center { text-align:center; }
.que { text-align:center; }
.que .so { font-size:calc(16px * var(--fz)); color:var(--accent); }
.que .tho { font-family:var(--font-display); font-weight:600; font-size:calc(21px * var(--fz)); line-height:1.6; margin:12px 0; color:var(--gold); }
.beads { display:block; margin:0 auto; touch-action:none; cursor:grab; } .beads:active { cursor:grabbing; } /* B-68: cỡ do app.js đặt theo khung #beadsBox */
.breath { width:190px; height:190px; border-radius:50%; margin:18px auto; background:radial-gradient(circle,#ffe7a8 0%,#d79a2b 45%,rgba(120,40,10,.2) 70%); display:flex; align-items:center; justify-content:center; color:var(--on-accent); font-size:calc(18px * var(--fz)); font-weight:800; transition:transform 4s ease-in-out; }
.kinh { min-height:140px; display:flex; align-items:center; justify-content:center; text-align:center; font-family:var(--font-display); font-weight:600; font-size:calc(22px * var(--fz)); color:var(--accent); line-height:1.5; padding:10px; }
.kinh small { font-size:calc(14px * var(--fz)); }
.list-hdr { display:flex; gap:8px; align-items:center; }
.list-hdr input { flex:1; margin:0; }
.vol label { display:flex; align-items:center; gap:10px; }
.vol input[type=range] { flex:1; margin:0; min-height:var(--hit); padding:0; background:none; border:0; }
.tour { display:flex; gap:12px; align-items:center; }
.tour canvas { flex:0 0 84px; width:84px; height:109px; }
.tour p { font-size:calc(16px * var(--fz)); margin:0; }
.lich div { padding:4px 0; border-bottom:1px solid var(--line); font-size:calc(14px * var(--fz)); }
.lich b { color:var(--gold); }
.lich a { display:inline-flex; align-items:center; min-height:var(--hit); padding:0 6px; color:var(--gold); }
.bh-open { display:block; width:100%; min-height:48px; margin:4px 0; font-size:calc(16px * var(--fz)); }
.bh-head { display:flex; flex-direction:column; gap:2px; margin-bottom:4px; }
.bh-head b { font-size:calc(21px * var(--fz)); color:var(--accent); font-family:var(--font-display); font-weight:600; line-height:1.25; }
.bh-head small { font-size:calc(13px * var(--fz)); opacity:.8; }
#ui.wide .bh-head small { font-size:calc(14px * var(--fz)); }
.bh-y { display:flex; gap:10px; align-items:flex-start; }
.bh-y button, .item .bar button[data-ph] { flex:0 0 auto; background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:10px; min-height:var(--hit); padding:0 10px; font-size:calc(14px * var(--fz)); color:var(--gold); white-space:nowrap; }
.bh-y button.on, .item .bar button[data-ph].on { background:var(--gold); color:var(--on-accent); }
.bh-src { font-size:var(--fsS); opacity:.75; margin:4px 2px 8px; }
#bhPlayer iframe { display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:12px; background:#000; margin:8px 0; }
.bh-nopd { margin:6px 0 0; text-align:center; font-size:var(--fs-xs); color:var(--on-surface-2); }
.bh-busy { text-align:center; background:var(--surface-sunk); border:1px dashed var(--line-strong); border-radius:12px; padding:12px; margin:8px 0; font-size:calc(14px * var(--fz)); color:var(--accent); }
.bh-yt { display:inline-flex; align-items:center; min-height:var(--hit); margin-top:8px; background:var(--accent); color:var(--on-accent); padding:0 18px; border-radius:22px; text-decoration:none; font-weight:700; }
.b-goiy { background:color-mix(in srgb, #2c7a7b 30%, transparent); font-weight:600; }
.bh-k .txt { font-size:calc(15px * var(--fz)); }
.bh-hoc { margin-top:12px; }
.bh-hoc:disabled { background:var(--surface-sunk); color:var(--ok); box-shadow:inset 0 0 0 1px var(--ok); opacity:1; cursor:default; }
.bh-row { display:flex; align-items:center; gap:10px; width:100%; min-height:52px; text-align:left; background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 12px; margin:6px 0; font-size:calc(15px * var(--fz)); }
.bh-row:active { background:var(--accent-soft); }
.bh-d { color:var(--gold); font-weight:700; white-space:nowrap; }
.bh-t { flex:1; min-width:0; }
.bh-ok { color:var(--ok); font-size:calc(18px * var(--fz)); }
.b-chua { background:var(--surface-sunk); font-weight:600; white-space:nowrap; }
.bh-back { background:none; border:0; color:var(--gold); min-height:var(--hit); padding:0 4px; font-size:calc(15px * var(--fz)); }
.bh-so { font-size:calc(14px * var(--fz)); opacity:.85; margin:8px 0 0; }
/* B-82 màn vào: "N người đang ở chùa" / "Chùa đang tĩnh lặng" */
.dang-o { display:flex; align-items:center; justify-content:center; gap:8px; margin:0 0 12px; font-size:calc(15px * var(--fz)); opacity:.92; }
.dang-o .cham { flex:0 0 8px; width:8px; height:8px; border-radius:50%; background:#8FC79A; box-shadow:0 0 0 3px rgba(143,199,154,.2); }
.dang-o.vang .cham { background:var(--vang-300); box-shadow:none; opacity:.55; }
.loinhac { text-align:center; margin:4px 0 14px; padding:10px 6px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.loinhac small { font-size:calc(13px * var(--fz)); opacity:.75; letter-spacing:.3px; }
#ui.wide .loinhac small { font-size:calc(14px * var(--fz)); }
.loinhac p { margin:6px 0 0; font-family:var(--font-display); font-weight:600; font-size:calc(20px * var(--fz)); line-height:1.4; color:var(--vang-200); }

/* màn thấp (iPhone SE 667, Android 740): form đăng ký vừa 1 màn, nút "Tạo tài khoản" không phải cuộn */
@media (max-height: 760px) {
  #ui:not(.wide) #gate .logo { display:none; }
  #ui:not(.wide) #gate h1 { font-size:calc(26px * var(--fz)); }
  #ui:not(.wide) #gate .sub { margin:2px 0 8px; }
  .auth .tabs { margin-bottom:6px; }
  .auth label { margin:6px 0; }
  .auth input { margin-top:3px; }
  .auth .robes button { min-height:var(--hit); display:flex; align-items:center; justify-content:center; gap:5px; padding:2px; }
  .auth .robes button::before { width:18px; height:18px; margin:0; }
  .auth .err { min-height:0; }
}

/* điện thoại xoay ngang (L-05) */
#xoay { position:fixed; inset:0; z-index:100; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px; padding:16px; text-align:center; background:radial-gradient(ellipse at 50% 40%, var(--then-700), var(--then-900)); color:var(--on-surface); pointer-events:auto; }
#xoay b { font-size:calc(24px * var(--fz)); color:var(--accent); font-family:var(--font-display); font-weight:600; }
#xoay p { margin:0; font-size:calc(15px * var(--fz)); opacity:.85; max-width:420px; }
.xoay-icon { font-size:calc(44px * var(--fz)); line-height:1; animation:xoay 2.4s ease-in-out infinite; }
@keyframes xoay { 0%,30% { transform:rotate(-90deg) } 60%,100% { transform:rotate(0) } }
/* B-14 số liệu admin */
.sl-kpi { display:grid; grid-template-columns:repeat(3,1fr); gap:8px; margin:6px 0 4px; }
.sl-kpi.k4 { grid-template-columns:repeat(4,1fr); } @media (max-width:480px) { .sl-kpi.k4 { grid-template-columns:repeat(2,1fr); } } /* B-80: ô thứ 4 "lỗi hôm nay" */
.sl-kpi div { background:var(--surface-sunk); border:1px solid var(--line); border-radius:10px; padding:8px 6px; text-align:center; }
.sl-kpi b { display:block; font-size:calc(26px * var(--fz)); color:var(--gold); }
.sl-kpi small { font-size:calc(13px * var(--fz)); opacity:.85; }
.sl-tbl { font-size:calc(14px * var(--fz)); }
.sl-h, .sl-r { display:grid; grid-template-columns:76px 1fr 84px; gap:8px; align-items:center; padding:5px 2px; border-bottom:1px solid var(--line); }
.sl-h { opacity:.75; font-size:calc(13px * var(--fz)); }
.sl-r span:last-child, .sl-h span:last-child { text-align:right; }
.sl-bar { position:relative; display:flex; align-items:center; gap:6px; }
.sl-bar i { display:block; height:10px; min-width:2px; background:var(--gold); border-radius:5px; opacity:.85; }
.sl-loi .txt { font-size:calc(13px * var(--fz)); overflow-wrap:anywhere; } .sl-loi .txt b { font-family:monospace; font-weight:600; color:inherit; } /* B-80 */
/* B-15 Hỏi Pháp */
.hp-sub { margin:0 0 8px; font-size:calc(14px * var(--fz)); opacity:.9; }
.hp-sub small { opacity:.7; font-size:var(--fsS); font-style:italic; }
.hp-row { display:grid; grid-template-columns:1fr auto; gap:2px 10px; width:100%; min-height:56px; text-align:left; background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-sm); padding:8px 12px; margin:6px 0; }
.hp-row b { color:var(--gold); font-size:calc(16px * var(--fz)); }
.hp-row small { grid-column:1; font-size:calc(13px * var(--fz)); opacity:.85; line-height:1.35; }
.hp-row .hp-n { grid-column:2; grid-row:1 / span 2; align-self:center; font-size:calc(13px * var(--fz)); opacity:.75; white-space:nowrap; }
.hp-row:active { background:var(--accent-soft); }
.hp-bai .txt b { color:var(--accent); }
.hp-bai .txt small { opacity:.7; font-size:var(--fsS); }
/* B-16 Ôn bài */
.on-bai { background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-sm); padding:10px 12px; margin:10px 0 4px; }
.on-bai .meta { display:flex; gap:8px; align-items:center; flex-wrap:wrap; font-size:var(--fsS); }
.on-bai .meta b { color:var(--gold); font-size:calc(16px * var(--fz)); }
.ob-q p { margin:10px 0 6px; font-size:calc(15px * var(--fz)); }
.ob-q button { display:block; width:100%; text-align:left; min-height:48px; margin:4px 0; padding:6px 12px; background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:var(--r-sm); font-size:calc(14px * var(--fz)); line-height:1.35; }
.ob-q button:disabled { cursor:default; opacity:.75; }
.ob-q button.ok { background:var(--surface-sunk); border-color:var(--ok); opacity:1; color:var(--ok); }
.ob-q button.sai { background:var(--surface-sunk); border-color:var(--danger); opacity:1; color:var(--danger); }
.ob-q .ob-giai { margin:6px 2px 4px; font-size:calc(14px * var(--fz)); color:var(--on-surface); }
.ob-kq { margin:10px 0 2px; font-size:calc(15px * var(--fz)); color:var(--gold); text-align:center; }
.bh-hoc.glow { box-shadow:0 0 0 3px var(--line-strong), 0 0 22px var(--accent); }
/* B-18 ngày chay */
.leBanner.tap { cursor:pointer; min-height:var(--hit); display:flex; align-items:center; pointer-events:auto; }
.leBanner u { text-underline-offset:3px; }
.leBanner .chayDem { white-space:nowrap; } /* L-14: con số xuống dòng nguyên cụm */
.chay-btn.on { background:var(--surface-sunk); color:var(--ok); border-color:var(--ok); }
/* B-19 cầu an + hồi hướng */
.hh-cau { margin:8px 0; padding-left:12px; border-left:3px solid var(--line-strong); font-size:calc(15px * var(--fz)); line-height:1.5; }
.hh-ke { margin:14px 0 2px; text-align:center; font-family:var(--font-display); font-weight:600; font-size:calc(20px * var(--fz)); line-height:1.55; color:var(--gold); }
.hh-left { font-size:calc(20px * var(--fz)); color:var(--gold); margin:10px 0 4px; font-variant-numeric:tabular-nums; }
.hh-skip { display:block; margin:6px auto 0; }
/* B-21 hành trình tuần */
.m-btns { display:flex; gap:6px; flex-wrap:wrap; margin:8px 0; }
.m-btns button { flex:1 1 140px; min-height:48px; font-size:calc(15px * var(--fz)); display:flex; flex-direction:column; align-items:center; justify-content:center; line-height:1.2; }
.m-btns button small { font-size:var(--fsS); opacity:.75; }
.ht-nhan { margin:-6px 0 6px; font-size:calc(13px * var(--fz)); opacity:.8; }
.ht-days { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; margin:8px 0 12px; }
.ht-days div { background:var(--surface-sunk); border:1px solid var(--line); border-radius:10px; text-align:center; padding:4px 0; min-height:52px; display:flex; flex-direction:column; justify-content:center; }
.ht-days div.on { border-color:var(--gold); background:var(--accent-soft); }
.ht-days div.nay { box-shadow:inset 0 0 0 2px var(--line-strong); }
.ht-days div.toi { opacity:.45; }
.ht-days small { font-size:calc(13px * var(--fz)); opacity:.85; }
.ht-days i { font-style:normal; font-size:calc(20px * var(--fz)); line-height:1.2; min-height:24px; }
.ht-muc div { display:flex; align-items:center; gap:10px; padding:8px 4px; border-bottom:1px solid var(--line); font-size:calc(15px * var(--fz)); }
.ht-muc i { font-style:normal; font-size:calc(20px * var(--fz)); width:26px; text-align:center; }
.ht-muc span { flex:1; }
.ht-muc b { font-size:calc(20px * var(--fz)); color:var(--gold); }
.ht-ket { margin:14px 4px 4px; font-family:var(--font-display); font-weight:600; font-size:calc(19px * var(--fz)); color:var(--vang-200); text-align:center; }
/* B-17 trà đàm */
.strip span { flex:1; min-width:0; }
.strip span.strip-gio { flex:0 0 auto; white-space:nowrap; } /* L-32: '· 10:00–11:12' đọc liền 1 cụm */
.strip span.strip-tg { flex:0 0 auto; margin-left:auto; white-space:nowrap; opacity:.85; } /* L-31: 'x/72 phút' không bị co về 0 rồi tràn khung ở cột hẹp 1440 */
#ui.wide .strip.giang { flex-wrap:wrap; row-gap:2px; padding-top:6px; padding-bottom:6px; } /* L-32: cột 1440 hẹp → icon + tên bài 1 hàng, '· giờ–giờ' + 'x/72 phút' hàng dưới */
#ui.wide .strip.giang > b { flex:1 1 calc(100% - 40px); min-width:0; }
.td-sap { text-align:center; color:var(--accent); font-size:calc(15px * var(--fz)); margin:8px 0; }
.td-goiy { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 2px; }
.td-goiy button { background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:16px; min-height:var(--hit); padding:4px 12px; font-size:calc(13px * var(--fz)); text-align:left; }
/* B-20 pháp lữ */
.pl-code { font-size:calc(20px * var(--fz)); letter-spacing:3px; color:var(--gold); font-family:ui-monospace,Menlo,monospace; }
.pl-da { opacity:.7; font-size:calc(13px * var(--fz)); }
.pl-cau { display:flex; flex-direction:column; gap:4px; margin-top:6px; }
.pl-cau button { text-align:left; min-height:48px; padding:6px 12px; background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:var(--r-sm); font-size:calc(14px * var(--fz)); line-height:1.35; }
.pl-m .meta b { font-size:calc(15px * var(--fz)); color:var(--on-surface); opacity:1; }
.pl-m .meta { opacity:1; }

/* B-30: 1 dòng nhỏ kín đáo khi đang thiền (không hộp thoại) */
.thien-bar { align-self:center; background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line-strong); color:var(--vang-200); border-radius:var(--r-pill); font-variant-numeric:tabular-nums; padding:4px 12px; font-size:calc(13px * var(--fz)); line-height:1.4; pointer-events:none; max-width:100%; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.thien-bar.motu { pointer-events:auto; cursor:pointer; padding-top:10px; padding-bottom:10px; white-space:normal; text-align:center; border-radius:var(--r-md); } /* L-33: xuống dòng thay vì cắt mất 'chạm để dừng' ở 390 */ /* B-52: thanh mõ tự gõ chạm được để dừng (thanh thiền gốc không bắt chạm) */
/* B-29: bậc tu tập trong Bảng công đức */
.item.bac { display:flex; flex-direction:column; gap:6px; }
.bac-row { display:flex; align-items:center; gap:10px; }
.bac-row canvas { width:60px; height:75px; flex:none; }
.bac-bar { height:10px; border-radius:6px; background:var(--line); overflow:hidden; }
.bac-bar span { display:block; height:100%; background:linear-gradient(90deg,var(--vang-500),var(--vang-300)); }
.bac-bar.off span { width:0; }
.item.bac small { font-size:calc(12px * var(--fz)); opacity:.85; }
/* B-34: nút loa tắt/bật toàn bộ tiếng */
.icon.mute { display:flex; align-items:center; justify-content:center; color:var(--gold); }
.icon.mute svg { width:22px; height:22px; }
#ui.wide .icon.mute svg { width:26px; height:26px; }
/* B-34: thêm nút loa → màn hẹp nhãn công đức gọn để tên phòng không bị cắt; 7 nút Chính điện không bẻ chữ giữa từ */
.merit .ngan { display:none; }
@media (max-width: 400px) { #ui:not(.wide) .merit .dai { display:none; } #ui:not(.wide) .merit .ngan { display:inline; } #ui:not(.wide) .merit { padding:0 9px; } }
@media (max-width: 380px) { #ui:not(.wide) .acts { gap:3px; } #ui:not(.wide) .acts button { padding:3px 0; letter-spacing:-.25px; overflow-wrap:normal; } }
/* B-36: bảng xếp hạng */
.bxh-tools { display:flex; gap:8px; margin:6px 0; }
.bxh-tools input { flex:1; min-height:44px; }
.bxh-tools button { min-width:48px; min-height:44px; font-size:calc(20px * var(--fz)); }
.bxh-wrap { max-height:52vh; overflow:auto; border:1px solid var(--line); border-radius:10px; -webkit-overflow-scrolling:touch; }
table.bxh { width:100%; border-collapse:collapse; font-size:calc(14px * var(--fz)); white-space:nowrap; }
table.bxh th { position:sticky; top:0; background:var(--surface-strong); color:var(--gold); font-weight:600; text-align:left; padding:8px; font-size:calc(13px * var(--fz)); }
table.bxh td { padding:8px; border-top:1px solid var(--line); }
table.bxh td:first-child, table.bxh th:first-child { text-align:center; width:44px; }
table.bxh tr.me td { background:var(--accent-soft); color:var(--on-surface); font-weight:600; }
table.bxh tr.gap td { text-align:center; opacity:.6; padding:2px; }
.bac-dot { color:#8a7a60; } .bac-dot.b1 { color:#e8d6a0; } .bac-dot.b2 { color:#f3dc8a; } .bac-dot.b3 { color:#ffd25a; } .bac-dot.b4 { color:#ffb84a; text-shadow:0 0 6px #ffcf70; } .bac-dot.b5 { color:#fff0b4; text-shadow:0 0 8px #ffd25a; }
/* B-35: máy tính to hơn ~25% (chữ thân ≥ 16 px, nút ≥ 48 px); thanh trên 2 hàng để tên phòng không bị cắt */
#ui.wide { --fsS:calc(15px * var(--fz)); --fsB:calc(19px * var(--fz)); --hit:52px; }
#ui.wide .top { height:auto; flex-wrap:wrap; row-gap:8px; }
#ui.wide .top .brand { flex:1 1 100%; min-height:60px; padding:6px 16px; }
#ui.wide .top .sp { display:none; }
#ui.wide .top .merit { flex:1; min-height:60px; }
#ui.wide .brand b { font-size:calc(28px * var(--fz)); }
#ui.wide .merit b { font-size:calc(25px * var(--fz)); }
#ui.wide .icon { flex-basis:54px; width:54px; min-height:60px; font-size:calc(26px * var(--fz)); }
#ui.wide .top .merit { padding:0 10px; min-width:0; }
#ui.wide .ov { top:calc(var(--tb) + 12px); }
#ui.wide .counts { font-size:calc(18px * var(--fz)); }
#ui.wide .strip, #ui.wide .leBanner, #ui.wide .gopy, #ui.wide .feed div, #ui.wide .dongtam, #ui.wide .thien-bar { font-size:calc(17px * var(--fz)); }
/* B-47: máy tính chữ "cùng ngồi" đầy đủ 15 px, dài thì xuống dòng (cột HUD ~300 px); điện thoại giữ 1 dòng, dài thì … */
#ui.wide .thien-bar { font-size:calc(15px * var(--fz)); white-space:normal; border-radius:var(--r-md); text-align:center; }
#ui.wide .gopy { min-height:52px; }
#ui.wide .acts button { min-height:80px; font-size:calc(17px * var(--fz)); }
#ui.wide .acts button i { font-size:calc(30px * var(--fz)); }
#ui.wide .chat input { font-size:calc(18px * var(--fz)); height:56px; }
#ui.wide .chat button { font-size:calc(18px * var(--fz)); height:56px; min-width:80px; }
#ui.wide .chat .chao { flex-basis:48px; width:48px; min-width:0; }
#ui.wide .chat button:not(.chao) { min-width:64px; padding:0 14px; } /* L-35: ô chat 1440 ≥ 160 px sau khi thêm nút Chào */
#ui.wide #chaoChon button { min-width:0; }
#ui.wide #toast { top:24px; }
#ui.wide #toast div { font-size:calc(18px * var(--fz)); }
#ui.wide #yn { font-size:calc(18px * var(--fz)); } #ui.wide #yn b { font-size:calc(22px * var(--fz)); }
#ui.wide .card { width:min(660px, 100%); }
#ui.wide .card button, #ui.wide .card input, #ui.wide .card textarea { min-height:48px; }
#ui.wide table.bxh { font-size:calc(17px * var(--fz)); } #ui.wide table.bxh th { font-size:calc(16px * var(--fz)); }
/* B-37 Thời khoá hôm nay: bảng kính mỏng sơn mài ở cột trái (màn ngang), điện thoại mở bằng nút */
.tk { position:absolute; left:16px; width:var(--pw); top:var(--tkt, 300px); bottom:16px; overflow:auto; pointer-events:auto; background:var(--surface); border:1px solid var(--line); border-radius:var(--r-md); padding:12px; box-shadow:var(--shadow); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
#ui:not(.wide) .tk:not(.tk-modal) { display:none; }
.tk.tk-modal { position:static; width:auto; max-height:none; background:none; border:0; box-shadow:none; padding:0; backdrop-filter:none; }
.tk-head { display:flex; flex-direction:column; gap:4px; padding-bottom:8px; border-bottom:1px solid var(--line); }
.tk-head b { color:var(--accent); font-family:var(--font-display); font-weight:600; font-size:calc(22px * var(--fz)); line-height:1.2; }
.tk-head small { font-size:calc(13px * var(--fz)); opacity:.85; }
.tk h4 { margin:10px 0 4px; color:var(--vang-500); font-size:calc(14px * var(--fz)); letter-spacing:.6px; text-transform:uppercase; }
.tk-it { width:100%; display:flex; align-items:center; gap:10px; min-height:48px; padding:6px 8px; margin:3px 0; background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-sm); text-align:left; }
.tk-it i { font-style:normal; font-size:calc(20px * var(--fz)); width:26px; text-align:center; }
.tk-it span { flex:1; display:flex; flex-direction:column; min-width:0; }
.tk-it b { font-size:calc(15px * var(--fz)); font-weight:600; }
.tk-it small { font-size:calc(12px * var(--fz)); opacity:.75; }
.tk-it em { font-style:normal; font-size:calc(13px * var(--fz)); color:var(--accent); white-space:nowrap; }
.tk-it.xong { opacity:.7; } .tk-it.xong em { color:var(--ok); }
.tk-it:hover { border-color:var(--line-strong); }
#ui.wide .tk-it b { font-size:calc(16px * var(--fz)); } #ui.wide .tk-it small { font-size:calc(13px * var(--fz)); } #ui.wide .tk-it em { font-size:calc(14px * var(--fz)); }
/* B-40 đợt 2: biểu tượng Sơn mài (SVG sprite) thay emoji — nét vàng quỳ, cỡ theo chữ đi kèm */
#ui .icon svg.i, #ui .icon.mute svg { width:22px; height:22px; }
#ui.wide .icon svg.i, #ui.wide .icon.mute svg { width:26px; height:26px; }
.acts button i { display:flex; line-height:0; }
#ui .acts button i svg.i { width:24px; height:24px; color:var(--gold); }
#ui.wide .acts button i svg.i { width:28px; height:28px; }
#ui .acts button.door i svg.i { color:var(--ngoc-300); }
#ui .tk-it i svg.i, #ui .ht-muc i svg.i { width:22px; height:22px; color:var(--gold); }
.tk-it i, .ht-muc i { display:flex; justify-content:center; }
#ui .ht-days i svg.i { width:20px; height:20px; color:var(--gold); }
#ui .tk-it em svg.i, #ui .bh-ok svg.i { width:20px; height:20px; color:var(--ok); }
/* biểu tượng đứng trong dòng chữ (tiêu đề, nút, dải, chip) = cao theo chữ */
#ui .card h2 svg.i, #ui .card button svg.i, #ui .card a svg.i, #ui .card .txt svg.i, #ui .card p svg.i, #ui .card label svg.i, #ui .card b svg.i,
#ui .strip svg.i, #ui .leBanner svg.i, #ui .dongtam svg.i, #ui .thien-bar svg.i, #ui .brand svg.i, #ui .gopy svg.i, #ui .hint svg.i, #ui #yn svg.i, #ytBig svg.i, #ytCard svg.i
  { width:1.15em; height:1.15em; vertical-align:-.22em; }
#ui .card h2 svg.i { color:var(--accent); margin-right:2px; }
#ui .strip > svg.i, #ui .leBanner svg.i, #ui .gopy svg.i, #ui .card label svg.i { color:var(--accent); }
#ui .card .vol label svg.i { flex:0 0 auto; }
#toast div .ti { display:inline-flex; vertical-align:-.25em; margin-right:8px; color:var(--accent); }
#toast div .ti svg.i { width:20px; height:20px; }
#ui.wide #toast div .ti svg.i { width:24px; height:24px; }
.x { display:flex; align-items:center; justify-content:center; color:var(--on-surface-2); }
#ui .x svg.i { width:24px; height:24px; }
.list-hdr > svg.i { color:var(--on-surface-2); }
.logo { display:flex; justify-content:center; }
.logo .seal-big { width:64px; height:64px; padding:12px; border-radius:14px; background:var(--son-600); color:var(--vang-200); box-shadow:0 0 0 3px var(--line-strong), var(--shadow); }
#ui .xoay-icon svg.i { width:48px; height:48px; color:var(--accent); }
#ui .tk-head b svg.i { width:1em; height:1em; vertical-align:-.12em; color:var(--accent); }
/* B-42 onboarding: thẻ kính dẫn đường (không chặn màn) nằm trên thanh nút + mũi tên trong cảnh + nút cần bấm sáng viền */
.ob { position:absolute; left:12px; right:12px; bottom:calc(var(--bh) + 8px); margin:0 auto; max-width:460px; z-index:18; pointer-events:auto; border-radius:var(--r-md); padding:10px 12px; display:flex; gap:10px; align-items:flex-start; animation:obVao .4s var(--ease); }
#ui.wide .ob { left:calc(var(--pw) + 32px); right:calc(var(--pw) + 32px); bottom:16px; max-width:520px; }
.ob canvas { flex:0 0 72px; width:72px; height:92px; }
.ob-t { flex:1; min-width:0; }
.ob h3 { margin:0 0 4px; font-family:var(--font-display); font-weight:600; font-size:calc(19px * var(--fz)); line-height:1.2; color:var(--accent); }
.ob p { margin:0; font-size:calc(14px * var(--fz)); line-height:1.45; }
.ob p b { color:var(--vang-300); font-weight:600; }
.ob small { display:block; margin-top:4px; font-size:calc(12px * var(--fz)); color:var(--on-surface-2); }
.ob-btns { display:flex; flex-wrap:wrap; gap:6px 8px; margin-top:8px; }
.ob-btns button { min-height:var(--hit); border-radius:var(--r-pill); padding:0 14px; font-size:calc(14px * var(--fz)); display:inline-flex; align-items:center; gap:6px; }
.ob-btns .ob-go { background:var(--accent); color:var(--on-accent); border:0; font-weight:600; }
.ob-btns .ob-phu { background:var(--surface-sunk); border:1px solid var(--line-strong); color:var(--on-surface); }
#ui .ob h3 svg.i { width:1em; height:1em; vertical-align:-.12em; }
#ui .ob-btns svg.i { width:1.15em; height:1.15em; }
#ui.wide .ob h3 { font-size:calc(22px * var(--fz)); } #ui.wide .ob p, #ui.wide .ob-btns button { font-size:calc(16px * var(--fz)); } #ui.wide .ob small { font-size:calc(14px * var(--fz)); }
@keyframes obVao { from { opacity:0; } }
#obArrow { position:absolute; width:90px; height:120px; margin:-60px 0 0 -45px; z-index:4; pointer-events:none; color:var(--vang-300); filter:drop-shadow(0 0 14px rgba(242,214,138,.95)) drop-shadow(0 4px 6px rgba(0,0,0,.6)); animation:obNhun 1.2s ease-in-out infinite; }
#obArrow svg { display:block; width:100%; height:100%; transform:rotate(90deg); --i-sw:3; }
@keyframes obNhun { 50% { transform:translateY(-22px); } }
#obArrow.ngang { width:120px; height:90px; margin:-45px 0 0 -60px; animation-name:obNhunX; }
#obArrow.ngang svg { transform:none; }
@keyframes obNhunX { 50% { transform:translateX(-22px); } }
#ui .acts button.ob-hl { border-color:var(--accent); box-shadow:0 0 0 2px var(--accent), var(--shadow); animation:obHl 1.8s ease-in-out infinite; }
@keyframes obHl { 50% { box-shadow:0 0 0 2px var(--line), var(--shadow); } }
.giam-cd #obArrow, .giam-cd #ui .acts button.ob-hl { animation:none; } /* B-85: theo công tắc Giảm chuyển động (mặc định theo máy) */
.giam-cd #tk, .giam-cd #tk *, .giam-cd #hnCard, .giam-cd #hnCard *, .giam-cd #stage::after { animation:none!important; transition:none!important; } /* L-40: thẻ Hôm nay / nút Đi / ánh đủ 4/4 không mờ dần, không đổi dần khi Giảm chuyển động */
/* B-43 "Hôm nay" ở đầu Thời khoá + thẻ gọn ở Sảnh (màn hẹp). Không màu đỏ, việc chưa làm không bị nhấn */
.hn { display:flex; flex-direction:column; gap:8px; padding-bottom:10px; margin-bottom:8px; border-bottom:1px solid var(--line); }
.hn-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.hn-head b { font-family:var(--font-display); font-weight:600; font-size:calc(22px * var(--fz)); line-height:1.2; color:var(--accent); }
.hn-head span { font-size:calc(13px * var(--fz)); color:var(--on-surface-2); font-variant-numeric:tabular-nums; }
.hn-du { margin:0; font-size:calc(14px * var(--fz)); line-height:1.4; color:var(--ok); }
.hn-goi { display:flex; align-items:center; gap:10px; padding:6px 6px 6px 10px; background:var(--accent-soft); border:1px solid var(--line-strong); border-radius:var(--r-sm); }
.hn-goi > span { flex:1; min-width:0; font-size:calc(14px * var(--fz)); line-height:1.35; }
.hn-goi button { flex:0 0 auto; min-height:var(--hit); min-width:60px; padding:0 16px; background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--r-pill); font-weight:600; font-size:calc(14px * var(--fz)); }
.hn-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:6px; }
.hn-it { display:flex; align-items:center; gap:8px; min-height:48px; padding:6px 8px; background:none; border:1px solid var(--line); border-radius:10px; text-align:left; font-size:calc(13px * var(--fz)); line-height:1.3; color:var(--on-surface); }
.hn-it.xong { border-color:var(--ok); color:var(--ok); }
.hn-it:hover { border-color:var(--line-strong); }
.hn-nhac { font-size:calc(12px * var(--fz)); line-height:1.4; color:var(--on-surface-2); font-style:italic; }
#ui .hn svg.i { width:20px; height:20px; flex:0 0 auto; }
#ui .hn-goi > svg.i, #ui .hn-it:not(.xong) svg.i { color:var(--gold); }
#ui .hn-du svg.i { width:1.15em; height:1.15em; vertical-align:-.22em; }
#ui.wide .hn-head b { font-size:calc(24px * var(--fz)); } #ui.wide .hn-goi > span, #ui.wide .hn-du { font-size:calc(16px * var(--fz)); } #ui.wide .hn-it { font-size:calc(15px * var(--fz)); } #ui.wide .hn-nhac, #ui.wide .hn-head span { font-size:calc(14px * var(--fz)); }
.hn-card { display:flex; align-items:center; gap:6px; max-width:100%; min-width:0; text-align:left; }
.hn-card .hn-c-t { flex:1 1 auto; min-width:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.hn-card b { flex:0 0 auto; color:var(--accent); font-weight:600; font-variant-numeric:tabular-nums; }
#ui .hn-card svg.i:last-child { width:16px; height:16px; color:var(--on-surface-2); }
/* đủ 4/4 ở Sảnh: lớp ánh ấm rất nhẹ, chỉ máy mình */
#stage::after { content:""; position:absolute; inset:0; z-index:1; pointer-events:none; opacity:0; transition:opacity 2s ease; background:radial-gradient(ellipse 70% 55% at 50% 45%, rgba(255,214,140,1), rgba(255,170,80,.45) 55%, rgba(255,170,80,0) 85%); }
#stage.hn-du::after { opacity:.18; }
/* B-48 chuông tỉnh thức: viên kính "Thở vào, thở ra" giữa trên cảnh (không chặn chạm) + lời mời bật 1 lần */
#tinhThuc { position:absolute; left:calc(var(--sl) + var(--sw) / 2); top:calc(var(--st) + var(--sh) * .3); transform:translateX(-50%); z-index:var(--z-toast); pointer-events:none; white-space:nowrap; max-width:calc(100vw - 24px); padding:8px 20px; border-radius:var(--r-pill); background:var(--surface-strong); border:1px solid var(--line-strong); box-shadow:var(--shadow); color:var(--accent); font-family:var(--font-display); font-weight:600; font-size:calc(20px * var(--fz)); line-height:1.3; animation:ttHien 5s linear forwards; }
#ui #tinhThuc svg.i { width:1em; height:1em; vertical-align:-.12em; }
#ui.wide #tinhThuc { font-size:calc(24px * var(--fz)); }
@keyframes ttHien { 0% { opacity:0; } 12% { opacity:1; } 88% { opacity:1; } 100% { opacity:0; } }
#moiChuong, #moiTudo { position:absolute; left:12px; right:12px; bottom:calc(var(--bh) + 8px); margin:0 auto; max-width:460px; z-index:18; pointer-events:auto; border-radius:var(--r-md); padding:12px; animation:obVao .4s var(--ease); }
#ui.wide #moiChuong, #ui.wide #moiTudo { left:calc(var(--pw) + 32px); right:calc(var(--pw) + 32px); bottom:16px; max-width:520px; }
#moiChuong p, #moiTudo p { margin:0; font-size:calc(14px * var(--fz)); line-height:1.45; }
#ui #moiChuong p svg.i { width:1.15em; height:1.15em; vertical-align:-.22em; color:var(--accent); }
#ui.wide #moiChuong p, #ui.wide #moiChuong .ob-btns button, #ui.wide #moiTudo p, #ui.wide #moiTudo .ob-btns button { font-size:calc(16px * var(--fz)); }
.card h3.set-h { display:flex; align-items:center; gap:6px; }
.card .set-sub { margin:10px 0 0; font-size:calc(14px * var(--fz)); color:var(--on-surface-2); } /* B-84 */
#ui .card h3 svg.i { width:1.15em; height:1.15em; color:var(--accent); }
.seg button.thu { flex:0 0 auto; background:none; border-style:dashed; }
@media (prefers-reduced-motion:reduce){ #tinhThuc { animation:none; } }
/* ===== B-40 đợt 3: hộp thoại = bảng cạnh phải (máy tính, mockup c) / tấm dưới (điện thoại, mockup d) / hộp giữa (noClose) ===== */
#modalCard { --cp:18px; }
.grab { display:none; }
#modalCard .p-head { position:sticky; top:0; z-index:3; margin:0 calc(-1 * var(--cp)) 10px; padding:12px 12px 10px var(--cp); background:var(--surface-strong); border-bottom:1px solid var(--line); }
.p-hrow { display:flex; align-items:center; gap:10px; min-height:var(--hit); }
#modalCard .p-head h2 { flex:1; min-width:0; margin:0; }
#modalCard .x.ibtn { position:static; flex:0 0 auto; width:var(--hit); height:var(--hit); min-height:0; margin-left:auto; border-radius:50%; background:var(--surface-sunk); border:1px solid var(--line); color:var(--on-surface); opacity:1; }
#modalCard .x.ibtn:hover { border-color:var(--line-strong); }
/* không có tiêu đề (vd Thời khoá): nút đóng nổi góc phải, nội dung chạy lên ngang hàng */
#modalCard .p-head.no-t { background:none; border-bottom:0; pointer-events:none; margin-bottom:calc(-10px - var(--hit)); }
#modalCard .p-head.no-t .x { pointer-events:auto; background:var(--surface-strong); border-color:var(--line-strong); }
#modalCard .p-head.no-t + * > :first-child { padding-right:calc(var(--hit) + 6px); }
/* L-25: Thời khoá chỉ chừa chỗ nút đóng ở dòng tiêu đề "Hôm nay", lưới việc nhỏ vẫn rộng hết */
#modalCard .p-head.no-t + .tk-modal > .hn { padding-right:0; }
#modalCard .p-head.no-t + .tk-modal .hn-head { padding-right:calc(var(--hit) + 6px); }
/* máy tính: bảng cạnh phải 472, cao hết màn, vẫn thấy cảnh ở cột giữa */
#modal.is-panel { justify-content:flex-end; align-items:stretch; padding:16px; background:rgba(10,4,2,.25); -webkit-backdrop-filter:none; backdrop-filter:none; }
#modal.is-panel #modalCard { --cp:24px; width:min(472px, 100%); max-height:none; padding:0 var(--cp) var(--cp); border-radius:var(--r-lg); background:var(--surface-strong); border:1px solid var(--line); box-shadow:var(--shadow); }
#modal.is-panel #modalCard .p-head { padding:16px 14px 10px var(--cp); }
#modal.is-panel #modalCard .p-head h2 { font-size:calc(30px * var(--fz)); line-height:1.15; }
#modal.is-panel #modalCard.vao { animation:panelin var(--t-panel) var(--ease) backwards; }
@keyframes panelin { from { opacity:0; transform:translateX(30px); } }
/* điện thoại: tấm trượt từ đáy, tay nắm, đỉnh tấm chừa chỗ cho toast */
#modal.is-sheet { align-items:flex-end; justify-content:center; padding:calc(56px + env(safe-area-inset-top)) 0 0; background:rgba(10,4,2,.45); }
#modal.is-sheet #modalCard { --cp:20px; width:100%; max-width:560px; max-height:100%; max-height:min(88dvh, 100%); padding:0 var(--cp) calc(20px + env(safe-area-inset-bottom)); border-radius:var(--r-sheet) var(--r-sheet) 0 0; border:1px solid var(--line); border-bottom:0; background:var(--surface-strong); box-shadow:var(--shadow); }
#modal.is-sheet #modalCard .p-head { padding:8px 8px 8px var(--cp); }
#modal.is-sheet #modalCard .p-head { touch-action:none; cursor:grab; -webkit-user-select:none; user-select:none; } /* B-69: kéo đầu tấm xuống để đóng, trình duyệt không giành cử chỉ */
#modal.is-sheet .grab { display:block; width:40px; height:5px; border-radius:9px; background:var(--line-strong); margin:0 auto 6px; }
#modal.is-sheet #modalCard.vao { animation:sheetin var(--t-panel) var(--ease) backwards; }
@keyframes sheetin { from { opacity:0; transform:translateY(40%); } }
/* nút chính cuối thẻ dính đáy khi cuộn (Đã học, Gửi góp ý…), nền mờ dần phía trên */
#modal:not(.is-dialog) #modalCard > .primary:last-child, #modal:not(.is-dialog) #modalCard > .primary:has(+ .note:last-child) { position:sticky; bottom:calc(10px + env(safe-area-inset-bottom)); z-index:2; }
#modal:not(.is-dialog) #modalCard > .primary:last-child::before, #modal:not(.is-dialog) #modalCard > .primary:has(+ .note:last-child)::before { content:""; position:absolute; z-index:-1; left:calc(-1 * var(--cp)); right:calc(-1 * var(--cp)); top:-18px; bottom:calc(-20px - env(safe-area-inset-bottom)); background:linear-gradient(180deg, transparent, var(--surface-strong) 18px); pointer-events:none; }
#modal:not(.is-dialog) #bhHoc { position:sticky; bottom:0; z-index:2; margin:0 calc(-1 * var(--cp)); padding:14px var(--cp) calc(4px + env(safe-area-inset-bottom)); background:linear-gradient(180deg, transparent, var(--surface-strong) 16px); }
/* B-69: ý chính bài học. Máy tính: danh sách dọc như cũ (nav ẩn). Màn hẹp ≤ 600 px: thẻ vuốt ngang có snap, thẻ sau ló mép phải, chấm + Trước/Sau */
.bh-nav { display:none; }
@media (max-width:600px) {
  #modalCard .bh-ys { display:flex; gap:10px; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; margin:0 calc(-1 * var(--cp)); padding:2px var(--cp) 4px; scroll-padding:0 var(--cp); }
  #modalCard .bh-ys::-webkit-scrollbar { display:none; }
  #modalCard .bh-ys > .bh-y { flex:0 0 88%; margin:0; scroll-snap-align:start; scroll-snap-stop:always; flex-direction:column; align-items:flex-start; gap:12px; padding:16px; border-radius:var(--r-md); }
  #modalCard .bh-ys > .bh-y .txt { order:-1; font:500 calc(19px * var(--fz))/1.35 var(--font-display); }
  .bh-nav { display:flex; align-items:center; gap:8px; margin:10px 0 4px; }
  .bh-nav .ghost { display:inline-flex; align-items:center; gap:4px; flex:0 0 auto; padding:0 12px; color:var(--on-surface); }
  .bh-nav .ghost svg.i { width:18px; height:18px; }
  .bh-nav .ghost:disabled { opacity:.4; }
  .bh-dots { flex:1; display:flex; justify-content:center; align-items:center; gap:6px; min-width:0; }
  .bh-dots i { flex:0 1 12px; width:12px; height:4px; border-radius:9px; background:var(--line-strong); transition:flex-basis var(--t-fast) var(--ease), width var(--t-fast) var(--ease), background var(--t-fast) var(--ease); }
  .bh-dots i.on { flex-basis:24px; width:24px; background:var(--accent); }
  .bh-pos { font-size:var(--fs-sm); color:var(--on-surface-2); white-space:nowrap; }
}
/* hộp giữa: kicked, còn ở đây không, chú tiểu (không đóng bằng chạm nền) */
#modal.is-dialog #modalCard { width:min(420px, 100%); border-radius:var(--r-lg); background:var(--surface-strong); border:1px solid var(--line); box-shadow:var(--shadow); }
#ui.wide #modal.is-dialog #modalCard { width:min(480px, 100%); }
#modal.is-dialog #modalCard .p-head { position:static; margin:0 0 10px; padding:0; background:none; border:0; }
#modal.is-dialog #modalCard.vao { animation:dlgin var(--t-fast) var(--ease) backwards; }
@keyframes dlgin { from { opacity:0; transform:scale(.96); } }
/* B-68 tràng hạt toàn màn (mockup e): nền sơn then tối ở mọi chế độ Ngày/Đêm, vòng hạt vuông giữa màn, nút đóng tròn --hit (44 / 52 px) */
#modal.is-full { z-index:var(--z-modal); padding:0; align-items:stretch; justify-content:stretch; background:radial-gradient(ellipse at 50% 55%, var(--then-700) 0%, var(--then-800) 45%, var(--then-900) 80%); -webkit-backdrop-filter:none; backdrop-filter:none; }
#modal.is-full #modalCard { --cp:16px; width:100%; max-width:none; height:100%; max-height:none; display:flex; flex-direction:column; overflow:hidden; padding:0 var(--cp) calc(10px + env(safe-area-inset-bottom)); border:0; border-radius:0; background:none; box-shadow:none; color:var(--giay-100); }
#modal.is-full #modalCard .p-head { position:static; flex:0 0 auto; margin:0 calc(-1 * var(--cp)) 4px; padding:calc(8px + env(safe-area-inset-top)) 10px 6px var(--cp); background:none; border:0; }
#modal.is-full #modalCard .p-head h2 { color:var(--vang-300); font-size:calc(24px * var(--fz)); }
#ui.wide #modal.is-full #modalCard .p-head h2 { font-size:calc(30px * var(--fz)); }
#modal.is-full #modalCard .x.ibtn { color:var(--giay-50); background:rgba(255,236,200,.08); border-color:rgba(226,194,126,.32); }
#modal.is-full #modalCard.vao { animation:obVao var(--t-panel) var(--ease) backwards; }
.th-man { flex:1 1 auto; min-height:0; display:flex; flex-direction:column; align-items:center; gap:6px; width:100%; max-width:1100px; margin:0 auto; }
.th-dem { flex:0 0 auto; width:min(320px, 100%); text-align:center; }
.th-prog { height:4px; border-radius:var(--r-pill); background:rgba(255,236,200,.16); overflow:hidden; }
.th-prog i { display:block; height:100%; width:0; background:var(--vang-400); transition:width var(--t-fast) var(--ease); }
.th-so { margin:6px 0 0; font-size:calc(14px * var(--fz)); color:var(--giay-100); font-variant-numeric:tabular-nums; }
.th-vong { flex:1 1 auto; min-height:0; width:100%; position:relative; display:flex; align-items:center; justify-content:center; }
.th-goi { position:absolute; left:50%; bottom:6px; transform:translateX(-50%); margin:0; display:flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--r-pill); background:rgba(28,21,18,.86); border:1px solid rgba(226,194,126,.32); color:var(--giay-50); font-size:calc(14px * var(--fz)); white-space:nowrap; pointer-events:none; animation:obVao .6s var(--ease) backwards; }
.th-goi[hidden] { display:none; }
.th-niem { flex:0 0 auto; margin:0; padding:6px 14px; border-radius:var(--r-pill); background:rgba(255,236,200,.06); border:1px solid rgba(226,194,126,.18); font-family:var(--font-display); font-weight:600; font-size:calc(20px * var(--fz)); color:var(--vang-300); }
#modalCard .th-note { flex:0 0 auto; margin:0; font-size:calc(12px * var(--fz)); color:rgba(244,235,218,.78); opacity:1; }
#ui.wide .th-so, #ui.wide .th-goi { font-size:calc(16px * var(--fz)); }
#ui.wide #modalCard .th-note { font-size:calc(14px * var(--fz)); }
#ui.wide .th-niem { font-size:calc(22px * var(--fz)); }
@media (max-height:600px) { .th-niem { display:none; } }
/* Bảng công đức (mockup c): hero bậc + 2 chỉ số + công thức điểm thu gọn */
.item.bac.hero { display:grid; grid-template-columns:1fr auto 1fr; align-items:end; gap:6px; text-align:center; padding:14px 8px 12px; background:radial-gradient(ellipse at 50% 100%, var(--accent-soft), transparent 70%), var(--surface-sunk); }
.hero > div { display:flex; flex-direction:column; align-items:center; gap:2px; min-width:0; }
.hero canvas { width:72px; height:90px; }
.hero .lbl { font-family:var(--font-display); font-weight:600; font-size:calc(22px * var(--fz)); line-height:1.1; color:var(--on-surface); margin-top:4px; }
.item.bac.hero small { font-size:calc(13px * var(--fz)); opacity:1; color:var(--on-surface-2); }
.hero .h-next canvas, .hero .h-next .lbl { opacity:.6; }
.hero .h-mui { align-self:center; color:var(--on-surface-2); }
.bac-cau, .bac-ta { margin:6px 2px; font-size:calc(14px * var(--fz)); line-height:1.45; color:var(--on-surface-2); }
.bac-cau { text-align:center; font-style:italic; }
.bac-ta b { color:var(--on-surface); font-weight:600; }
.twom { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:10px 0; }
.twom .item { margin:0; display:flex; flex-direction:column; gap:6px; min-width:0; }
.m-top { display:flex; align-items:center; gap:6px; font-size:calc(14px * var(--fz)); color:var(--on-surface-2); }
#ui .m-top svg.i { width:20px; height:20px; color:var(--gold); }
#ui .metric.pd .m-top svg.i { color:var(--ok); }
.m-num { font-size:calc(24px * var(--fz)); font-weight:600; line-height:1.1; font-variant-numeric:tabular-nums; color:var(--on-surface); }
.m-num small { font-size:calc(13px * var(--fz)); font-weight:400; color:var(--on-surface-2); }
.metric small { font-size:calc(13px * var(--fz)); line-height:1.35; color:var(--on-surface-2); }
.metric.pd .bac-bar span { background:var(--ok); }
.dai-chung { text-align:center; margin:14px 0 4px; }
.dai-chung small { font-size:var(--fsS); color:var(--on-surface-2); letter-spacing:.06em; text-transform:uppercase; }
.dai-chung .big-num { font-size:calc(40px * var(--fz)); }
.cach-tinh { margin:12px 0 4px; background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-md); }
.cach-tinh summary { display:flex; align-items:center; gap:8px; min-height:var(--hit); padding:0 16px; cursor:pointer; list-style:none; font-weight:600; color:var(--accent); }
.cach-tinh summary::-webkit-details-marker { display:none; }
.cach-tinh summary::after { content:""; margin-left:auto; width:8px; height:8px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform var(--t-fast) var(--ease); }
.cach-tinh[open] summary::after { transform:rotate(-135deg); }
.cach-tinh .note { margin:0; padding:0 16px 14px; text-align:left; line-height:1.6; opacity:1; color:var(--on-surface-2); }
#ui.wide .m-num { font-size:calc(28px * var(--fz)); } #ui.wide .m-top, #ui.wide .bac-cau, #ui.wide .bac-ta { font-size:calc(16px * var(--fz)); } #ui.wide .metric small, #ui.wide .item.bac.hero small { font-size:calc(14px * var(--fz)); } #ui.wide .hero .lbl { font-size:calc(24px * var(--fz)); }
.tk-cd { display:flex; align-items:center; justify-content:center; gap:6px; width:100%; margin-top:10px; min-height:48px; }
/* ===== B-40 đợt 3: màn vào #gate (mockup g) — hẹp 1 cột (thương hiệu trên, thẻ dưới), rộng 2 cột ===== */
.gate-in { display:flex; flex-direction:column; width:min(520px, 100%); max-height:100%; min-height:0; }
.gate-in .card.auth { flex:0 1 auto; min-height:0; width:100%; }
.brand-big { flex:none; text-align:center; margin-bottom:12px; }
.brand-big .sub { margin:4px 0 0; }
#gate h1 { color:var(--on-surface); text-shadow:0 2px 20px rgba(0,0,0,.5); }
.today-card { display:none; }
#gate .auth input:not([type=checkbox]) { min-height:50px; border-radius:14px; }
.auth input:focus { border-color:var(--vang-500); box-shadow:0 0 0 4px color-mix(in srgb, var(--vang-500) 22%, transparent); }
.auth .err:empty { min-height:0; margin:0; }
/* màu áo: vòng 44 + nhãn dưới */
#gate .robes { gap:14px; flex-wrap:wrap; }
#gate .robes button { flex:0 0 auto; width:56px; min-height:0; padding:0; border:0; background:none; display:flex; flex-direction:column; align-items:center; gap:4px; font-size:calc(13px * var(--fz)); color:var(--on-surface-2); }
#gate .robes button::before { width:44px; height:44px; margin:0; border:2px solid var(--then-800); box-shadow:0 0 0 1.5px var(--line-strong); }
#gate .robes button.on { background:none; color:var(--on-surface); font-weight:600; }
#gate .robes button.on::before { box-shadow:0 0 0 2.5px var(--vang-500); }
#ui.wide #gate .robes button { font-size:calc(14px * var(--fz)); }
@media (max-height: 760px) {
  #gate .auth input:not([type=checkbox]) { min-height:var(--hit); }
  #gate .robes button::before { width:36px; height:36px; }
  #ui:not(.wide) .brand-big { margin-bottom:8px; }
}
/* máy tính: thương hiệu trái (dấu son, tên chùa Cormorant lớn, lời mời, thẻ giờ giảng) + thẻ đăng nhập phải */
#ui.wide #gate { padding:24px clamp(24px, 6vw, 120px); }
#ui.wide #gate .gate-in { display:grid; grid-template-columns:minmax(0, 1fr) minmax(400px, 480px); gap:clamp(32px, 4vw, 64px); align-items:center; width:min(1200px, 100%); }
#ui.wide #gate .brand-big { text-align:left; margin:0; }
#ui.wide #gate .logo { justify-content:flex-start; margin-bottom:24px; }
#ui.wide #gate .logo .seal-big { width:72px; height:72px; }
#ui.wide #gate h1 { text-align:left; font-size:clamp(56px, 5.3vw, 76px); line-height:.98; letter-spacing:-.5px; margin-bottom:16px; }
#ui.wide #gate .sub { text-align:left; font-size:calc(18px * var(--fz)); max-width:520px; margin:0 0 28px; color:var(--on-surface-2); }
#ui.wide #gate .today-card { display:flex; gap:14px; align-items:center; max-width:470px; padding:14px 18px; border-radius:var(--r-md); background:var(--surface); -webkit-backdrop-filter:var(--blur); backdrop-filter:var(--blur); border:1px solid var(--line); }
.tc-seal { flex:0 0 42px; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; background:var(--accent-soft); color:var(--vang-300); }
.today-card b { display:block; font-weight:600; color:var(--on-surface); font-size:calc(16px * var(--fz)); }
.today-card span { font-size:calc(15px * var(--fz)); color:var(--on-surface-2); }
#ui.wide #gate .card.auth { width:100%; max-height:calc(100vh - 48px); border-radius:28px; padding:28px 30px 26px; }

/* ───── B-49 Tủ đồ bản 1 (token B-40 Sơn mài) ───── */
.tudo-mo { display:block; width:100%; margin-top:10px; }
.tudo-xem { display:flex; justify-content:center; gap:12px; margin:4px 0 6px; }
.tudo-xem figure { margin:0; display:flex; flex-direction:column; align-items:center; gap:4px; }
.tudo-xem canvas { background:var(--surface-sunk); border:1px solid var(--line); border-radius:var(--r-md); }
.tudo-xem figcaption { font-size:calc(13px * var(--fz)); color:var(--on-surface-2); }
.tudo-nhom { margin:10px 0 4px; }
.tudo-nhom h3 { margin:0 0 2px; font-size:calc(15px * var(--fz)); }
.tudo-maus { display:flex; flex-wrap:wrap; gap:2px; margin:6px 0 2px; }
.tudo-mau { position:relative; flex:0 0 var(--hit); width:var(--hit); height:var(--hit); padding:0; border:0; background:none; display:flex; align-items:center; justify-content:center; border-radius:var(--r-pill); }
.tudo-mau i { display:block; width:36px; height:36px; border-radius:50%; border:1px solid var(--line-strong); box-sizing:border-box; }
#ui.wide .tudo-mau i { width:40px; height:40px; }
.tudo-mau.on i { box-shadow:0 0 0 2px var(--surface-strong), 0 0 0 4px var(--accent); }
.tudo-mau svg.i { position:absolute; width:18px; height:18px; color:#fff; filter:drop-shadow(0 0 2px rgba(0,0,0,.8)); pointer-events:none; }
.tudo-seg button { display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1px; line-height:1.2; min-width:0; }
.tudo-seg button svg.i { width:16px; height:16px; vertical-align:-3px; }
.tudo-seg button.tudo-khoa { border-style:dashed; border-color:var(--line-strong); }
.tudo-seg button.tudo-khoa.on { background:var(--accent-soft); color:var(--on-surface); border-color:var(--accent); }
.tudo-seg button small { font-size:calc(12px * var(--fz)); font-weight:400; opacity:.8; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; }
.tudo-duoi { margin:2px 0 0; font-size:calc(13px * var(--fz)); color:var(--on-surface-2); line-height:1.4; }
.tudo-day { position:sticky; bottom:0; z-index:2; margin:12px calc(-1 * var(--cp, 18px)) 0; padding:10px var(--cp, 18px) 4px; background:linear-gradient(var(--surface-strong), var(--surface-strong)), linear-gradient(var(--surface-strong), var(--surface-strong)), var(--surface-strong); border-top:1px solid var(--line); box-shadow:0 56px 0 var(--surface-strong), 0 56px 0 var(--surface-strong), 0 56px 0 var(--surface-strong); }
/* L-27: nền 3 lớp (.95 → gần 1, không lộ hàng dưới) + bóng dời xuống 56px phủ khoảng đệm đáy tấm/bảng (20px + vùng an toàn), bóng không làm dài vùng cuộn */
.tudo-day .note { text-align:left; opacity:1; color:var(--danger); margin:0 0 6px; }
.tudo-nut { display:flex; gap:8px; align-items:center; }
.tudo-nut .ghost { flex:0 0 auto; min-height:48px; display:flex; align-items:center; gap:6px; }
.tudo-nut .primary { flex:1; margin:0; }
.tudo-nut .primary:disabled { opacity:.45; box-shadow:none; }
/* B-66 Tủ đồ bản 2: chế độ Ghi danh "Chọn dáng người" (Bỏ qua · Ngẫu nhiên · Tiếp tục) + lời mời người cũ #moiTudo (cùng khuôn #moiChuong) */
#moiTudo p b { color:var(--accent); font-weight:600; }
.tudo-loi { text-align:left; opacity:1; margin:0 0 8px; font-size:calc(14px * var(--fz)); color:var(--on-surface-2); line-height:1.45; }
.tudo-nut-dk .ghost { padding:0 12px; }
.tudo-nut-dk .tudo-ngau-ic { min-width:48px; justify-content:center; }
#ui:not(.wide) .tudo-nut-dk .tudo-ngau-ic span { display:none; } /* màn hẹp: Ngẫu nhiên chỉ còn biểu tượng (aria-label giữ chữ), đủ chỗ cho 3 nút */
/* B-56 Lời chúc của chùa (hộp Cầu an): 1 cột < 600 px, 2 cột từ 600 px; nút chữ trái, xuống dòng, cao ≥ --hit */
#modalCard .chuc { margin:10px 0 4px; padding:10px 0 2px; border-top:1px solid var(--line); }
#modalCard .chuc h3 { display:flex; align-items:center; gap:6px; margin:0 0 4px; }
#modalCard .chuc .note { text-align:left; margin:0 0 8px; }
.chuc-l { display:grid; grid-template-columns:1fr; gap:6px; }
@media (min-width:600px) { .chuc-l { grid-template-columns:1fr 1fr; } }
.chuc-l button { min-height:var(--hit); text-align:left; white-space:normal; overflow-wrap:anywhere; line-height:1.35; padding:6px 12px; border:1px solid var(--line-strong); background:var(--surface-sunk); color:var(--on-surface); border-radius:var(--r-sm); font-size:calc(14px * var(--fz)); }
.chuc-l button:disabled { opacity:.45; }
#toast div.chuc { border-radius:var(--r-md); border-color:var(--line); } /* toast lời chúc có thể 2 dòng */