:root{
  --bg:#0d0b1a; --bg2:#171233; --ink:#f4efe6; --ink-dim:#b9b2cc;
  --gold:#e8c37a; --gold-deep:#c9a24d; --line:rgba(232,195,122,.22);
  --card-w:min(88vw,330px); --radius:18px;
  --shadow:0 24px 60px rgba(0,0,0,.55);
  --safe-b:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box}
/* iPhone, iPad: chạm nhanh hai lần vào một nút (bấm ô "Đi" hai lần liền trong Robot thắp sao) thì Safari tưởng là chạm
   đúp để phóng to, cả trang nhảy to ra. touch-action: manipulation bỏ đúng cử chỉ chạm đúp đó — vẫn cuộn, vẫn chụm hai
   ngón để phóng to như thường (không chặn hẳn việc phóng to: ai cần chữ to vẫn phải phóng được). Đặt cho mọi phần tử vì
   thuộc tính này không truyền từ cha xuống con, và trong một khung cuộn trình duyệt chỉ xét tới khung cuộn gần nhất. Các
   tấm vẽ tự lo việc chạm (touch-action: none) đặt bằng class nên vẫn thắng quy tắc này. */
*{touch-action:manipulation}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{
  background:radial-gradient(120% 80% at 50% -10%,#2a2059 0%,var(--bg2) 38%,var(--bg) 100%);
  color:var(--ink); font-family:"Be Vietnam Pro",system-ui,-apple-system,"Segoe UI",sans-serif;
  font-weight:300; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}
.sky{position:fixed;inset:0;z-index:0;pointer-events:none}
#stars{width:100%;height:100%;display:block;opacity:.75}

/* ---------- topbar ---------- */
.topbar{position:relative;z-index:2;display:flex;align-items:center;justify-content:space-between;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 18px 6px}
.brand{display:flex;align-items:center;gap:9px;font-size:13px;letter-spacing:.16em;
  text-transform:uppercase;color:var(--gold);font-weight:500}
.mark{width:19px;height:19px;fill:var(--gold);stroke:var(--gold);stroke-width:1.4;fill-opacity:.25}
.mark .rays{stroke-linecap:round}
.icon-btn{width:32px;height:32px;border-radius:50%;border:1px solid var(--line);background:transparent;
  color:var(--gold);font-size:14px;cursor:pointer;line-height:1}
.icon-btn:hover{background:rgba(232,195,122,.1)}
.icon-btn[hidden]{display:none}
.icon-btn svg{display:block;width:17px;height:17px;margin:auto}
.nut-tren{display:flex;gap:8px;flex-shrink:0}
.brand{min-width:0}
/* thêm nút cài app: chữ thưa bớt cho vừa một hàng trên màn 375–420 px (màn 320 px vốn đã xuống hai dòng) */
@media (max-width:420px){.brand{letter-spacing:.1em}}

/* ---------- layout ---------- */
main{position:relative;z-index:1;padding:0 18px calc(40px + var(--safe-b));max-width:560px;margin:0 auto;
  animation:rise .5s ease both}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

.today-date{color:var(--ink-dim);font-size:13px;margin:26px 0 22px;letter-spacing:.05em;text-align:center}

/* ---------- card ---------- */
.stage{display:flex;justify-content:center;perspective:1400px}
.card-shell{width:var(--card-w);aspect-ratio:200/300;position:relative}
.card{position:absolute;inset:0;transform-style:preserve-3d;transition:transform .95s cubic-bezier(.2,.75,.25,1);
  cursor:pointer;border-radius:var(--radius)}
.card.is-flipped{transform:rotateY(180deg)}
.card:focus-visible{outline:2px solid var(--gold);outline-offset:6px}
.face{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;
  border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.back{background:#14102c}
.back-art{width:100%;height:100%;display:block}
.back-word{font-family:"Cormorant Garamond",Georgia,serif;font-size:15px;fill:var(--gold);fill-opacity:.85;letter-spacing:.08em}
.back-word.small{font-size:10.5px;fill-opacity:.5;letter-spacing:.14em}
.ray-set{transform-origin:100px 126px;animation:spin 44s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
/* Hào quang thở bằng opacity của một lớp riêng: đổi box-shadow mỗi khung hình là vẽ lại cả lá 60 lần mỗi giây, tốn pin */
.card-shell::before{content:"";position:absolute;inset:0;border-radius:var(--radius);box-shadow:0 0 34px rgba(232,195,122,.22);
  opacity:0;pointer-events:none;animation:breathe 5.5s ease-in-out infinite}
.card-shell:has(.card.is-flipped)::before{animation:none}
@keyframes breathe{50%{opacity:1}}
/* Pin ("sao mở app nhanh hết pin điện thoại vậy"): sao lấp lánh, tia sáng, hào quang chạy mãi thì máy không được nghỉ.
   Đang mở trò (khoa-cuon) hay để yên trang một lúc (nghi, app.js) thì dừng; lá đã lật thì tia sáng khuất, khỏi quay. */
body.khoa-cuon .ray-set,body.khoa-cuon .star.is-placed,body.khoa-cuon .card-shell::before,
body.nghi .ray-set,body.nghi .star.is-placed,body.nghi .card-shell::before,.card.is-flipped .ray-set{animation-play-state:paused}

.front{transform:rotateY(180deg);background:linear-gradient(168deg,#1d1740 0%,#151030 60%,#100d24 100%);
  border:1px solid var(--line);display:flex;flex-direction:column;justify-content:center;
  padding:30px 22px;text-align:center;gap:16px}
.crest{width:44px;height:16px;align-self:center;color:var(--gold);margin-bottom:2px}
.message{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(21px,6.2vw,26px);
  line-height:1.45;margin:0;font-weight:600;text-wrap:balance}
.rule{height:1px;background:linear-gradient(90deg,transparent,var(--gold-deep),transparent);opacity:.5;margin:0 20%}
.meaning{font-size:13.5px;line-height:1.7;color:var(--ink-dim);margin:0;font-weight:300;text-wrap:pretty}

/* ---------- cta ---------- */
.cta{text-align:center;margin-top:26px}
.primary{
  background:linear-gradient(180deg,#f0d193 0%,#c9a24d 100%);
  color:#231a05;border:0;border-radius:999px;padding:14px 30px;font-size:15px;font-weight:600;
  font-family:inherit;cursor:pointer;box-shadow:0 10px 26px rgba(201,162,77,.28);transition:transform .18s,filter .18s;
}
.primary:hover{filter:brightness(1.06)}
.primary:active{transform:scale(.97)}
.primary.wide{display:block;width:100%;margin-top:18px}
.hint{color:var(--ink-dim);font-size:12.5px;margin:13px 0 0}

.after{margin-top:28px}
.actions{display:flex;gap:9px;justify-content:center;flex-wrap:wrap}
.ghost{background:rgba(255,255,255,.045);border:1px solid var(--line);color:var(--ink);
  border-radius:999px;padding:9px 15px;font-size:13px;font-family:inherit;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;transition:background .18s}
.ghost:hover{background:rgba(232,195,122,.13)}
.ghost:disabled{opacity:.55;cursor:default}
.ghost:disabled .ico{display:inline-block;animation:xoay 1s linear infinite}
@keyframes xoay{to{transform:rotate(360deg)}}
.ghost[aria-pressed="true"]{color:var(--gold);border-color:var(--gold-deep)}
.ico{font-size:14px;line-height:1}
.countdown{text-align:center;color:var(--ink-dim);font-size:12px;margin:18px 0 0;letter-spacing:.03em}

.star{position:fixed;z-index:6;width:34px;height:34px;padding:0;cursor:pointer;
  border:0;background:transparent;display:grid;place-items:center;
  opacity:0;left:-999px;top:-999px;-webkit-tap-highlight-color:transparent;
  transition:opacity .6s ease,transform .25s}
.star svg{width:17px;height:17px;fill:var(--mau-sao,var(--gold));
  filter:drop-shadow(0 0 6px var(--mau-sao,var(--gold)))}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  .star svg{filter:drop-shadow(0 0 6px color-mix(in srgb,var(--mau-sao,var(--gold)) 62%,transparent))}
}
.star.is-placed{opacity:.6;animation:twinkle 3.6s ease-in-out infinite}
.star:hover{opacity:1;transform:scale(1.25);animation:none}
.star:active{transform:scale(.9)}
.star:focus-visible{outline:2px solid var(--mau-sao,var(--gold));outline-offset:4px;border-radius:50%;opacity:1}
@keyframes twinkle{
  0%,100%{opacity:.35;transform:scale(.94)}
  50%{opacity:.95;transform:scale(1.06)}
}

/* ---------- nút ẩn hiện sao, ngôi sao góc, bảng mọi thế giới nhỏ (app.js batAnSao, moBangSao) ----------
   Sao che chữ thông điệp ("trên đt nhiều sao quá che mất thông điệp") thì con mắt #nut-an-sao cất chúng đi (body.an-sao), sao
   vẫn rải trên nền như cũ ("vẫn để các ngôi sao rồi có nút ẩn hiện chứ"). Ngôi sao góc #nut-sao mở bảng ("bạn làm ngôi sao ở
   trên góc đi"). Bảng nằm dưới trò (28 < 30): đóng trò là về lại bảng; nút ✕ của bảng nằm đúng chỗ ngôi sao góc. */
body.an-sao #bau-troi-sao{display:none}
#bau-troi-sao{transition:opacity .25s}
body.bs-mo{overflow:hidden}
body.bs-mo #bau-troi-sao{opacity:0}
body.bs-mo .ray-set,body.bs-mo .star.is-placed,body.bs-mo .card-shell::before{animation-play-state:paused}
/* Màn thấp (375×667) cuộn được: nền gradient của body chỉ cao 100%, quá đó trình duyệt lặp lại nó từ đầu thành một dải sáng.
   html có nền riêng đúng màu cuối của gradient thì phần dưới liền một màu. */
html{background:var(--bg)}

/* Thanh trên cùng thêm hai nút (con mắt, ngôi sao góc): màn 375 px có nút Cài app thì tên app một hàng không còn chỗ. Màn hẹp
   siết chữ một chút; vẫn thiếu chỗ thì tên xuống hai dòng gọn "Thông Điệp / Của Thượng Đế", không gãy giữa chữ. */
.brand-chu>span{white-space:nowrap}
@media (max-width:480px){.brand{font-size:12px;letter-spacing:.06em;gap:8px}.nut-tren{gap:6px}}
.nut-an-sao svg{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.nut-an-sao .gach{opacity:0;transition:opacity .2s}
.nut-an-sao[aria-pressed="true"] .gach{opacity:1}
.nut-an-sao[aria-pressed="true"]{color:rgba(232,195,122,.7)}
.nut-sao{position:relative;border-color:rgba(232,195,122,.45);-webkit-tap-highlight-color:transparent;transition:background .2s,transform .18s}
.nut-sao::before{content:"";position:absolute;inset:-1px;border-radius:50%;pointer-events:none;
  box-shadow:0 0 14px rgba(232,195,122,.45);opacity:0;animation:breathe 4.5s ease-in-out infinite}
.nut-sao:active{transform:scale(.9)}
.nut-sao svg{width:20px;height:20px;overflow:visible}
.nut-sao path{transform-box:fill-box;transform-origin:center;animation:ns-lap 3.2s ease-in-out infinite}
.nut-sao .ns-s1{fill:#f0d193;filter:drop-shadow(0 0 3px rgba(232,195,122,.8));animation-name:ns-lap-lon}
.nut-sao .ns-s2{fill:var(--ns-m1,#7ec8e3);animation-delay:-1.1s}
.nut-sao .ns-s3{fill:var(--ns-m2,#ff7ec4);animation-delay:-2.2s}
@keyframes ns-lap{0%,100%{opacity:.6;transform:scale(.8)}50%{opacity:1;transform:scale(1.12)}}
@keyframes ns-lap-lon{0%,100%{transform:scale(.92)}50%{transform:scale(1.06)}}
body.nghi .nut-sao::before,body.nghi .nut-sao path,body.khoa-cuon .nut-sao::before,body.khoa-cuon .nut-sao path{animation-play-state:paused}
/* sao bay gom vào ngôi sao góc xong thì nó nảy lên đón */
.nut-sao.nhan{animation:ns-nhan .5s cubic-bezier(.2,.8,.2,1)}
@keyframes ns-nhan{40%{transform:scale(1.28);box-shadow:0 0 18px rgba(232,195,122,.6)}}

.bang-sao{position:fixed;inset:0;z-index:28;display:none}
.bang-sao.hien{display:block}
.bang-sao.dong{pointer-events:none}
.bs-nen{position:absolute;inset:0;background:radial-gradient(130% 75% at 50% -8%,#2d2260 0%,#181336 42%,#0c0a18 100%);
  -webkit-clip-path:circle(0 at var(--x,50%) var(--y,100%));clip-path:circle(0 at var(--x,50%) var(--y,100%));
  transition:clip-path .65s cubic-bezier(.22,.8,.24,1),-webkit-clip-path .65s cubic-bezier(.22,.8,.24,1)}
.bs-nen::after{content:"";position:absolute;inset:0;opacity:.6;background-image:
  radial-gradient(1px 1px at 14% 22%,#fff,transparent),radial-gradient(1.3px 1.3px at 63% 11%,#f3dfa0,transparent),
  radial-gradient(1px 1px at 37% 71%,#fff,transparent),radial-gradient(1.2px 1.2px at 86% 58%,#aebff0,transparent),
  radial-gradient(1px 1px at 52% 41%,#fff,transparent),radial-gradient(1.4px 1.4px at 9% 88%,#f2a7c3,transparent);
  background-size:173px 211px,241px 197px,157px 229px,263px 181px,199px 167px,227px 251px}
/* quầng sáng vàng ở chỗ nút: lúc loang, mép vòng tròn sáng như ánh sáng bung ra từ nút chứ không là một lỗ tối; loang
   xong thì dịu lại, còn chút sáng sau nút ✕ */
.bs-nen::before{content:"";position:absolute;inset:0;
  background:radial-gradient(circle at var(--x,50%) var(--y,100%),rgba(240,209,147,.42) 0,rgba(232,195,122,.16) 22%,transparent 58%);
  transition:opacity 1.2s ease .35s}
.bang-sao.xong .bs-nen::before{opacity:.3}
.bang-sao.mo .bs-nen{-webkit-clip-path:circle(var(--r,150vmax) at var(--x,50%) var(--y,100%));clip-path:circle(var(--r,150vmax) at var(--x,50%) var(--y,100%))}
.bang-sao.mo.xong .bs-nen{-webkit-clip-path:none;clip-path:none}
.bang-sao.dong .bs-nen{transition-duration:.45s;transition-timing-function:cubic-bezier(.55,0,.75,.2)}
.bs-cuon{position:absolute;inset:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 30px) 16px calc(96px + var(--safe-b))}
.bs-dau,.bs-tim,.bs-loc{opacity:0;transform:translateY(14px);transition:opacity .45s ease,transform .6s cubic-bezier(.2,.8,.2,1)}
.bang-sao.mo .bs-dau{opacity:1;transform:none;transition-delay:.12s}
.bang-sao.mo .bs-tim{opacity:1;transform:none;transition-delay:.16s}
.bang-sao.mo .bs-loc{opacity:1;transform:none;transition-delay:.2s}
/* ô tìm (app.js timSao): chữ 16 px — nhỏ hơn thì Safari iPhone phóng to cả trang lúc chạm vào ô */
.bs-tim{display:flex;align-items:center;gap:9px;max-width:440px;height:44px;margin:14px auto 0;padding:0 8px 0 15px;border-radius:999px;cursor:text;
  border:1px solid rgba(232,195,122,.3);background:rgba(255,255,255,.05)}
.bs-tim:focus-within{border-color:rgba(232,195,122,.7);background:rgba(255,255,255,.08);box-shadow:0 0 0 3px rgba(232,195,122,.12)}
.bs-tim svg{flex:none;width:18px;height:18px;fill:none;stroke:var(--gold);stroke-width:2;stroke-linecap:round}
.bs-tim input{flex:1;min-width:0;height:100%;padding:0;border:0;outline:0;background:none;color:var(--ink);
  font:400 16px "Be Vietnam Pro",system-ui,sans-serif;-webkit-appearance:none;appearance:none}
.bs-tim input::placeholder{color:rgba(185,178,204,.75)}
.bs-tim input::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;width:22px;height:22px;margin:0;cursor:pointer;border-radius:50%;
  background:rgba(232,195,122,.18) no-repeat center/12px url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 6l12 12M18 6L6 18' stroke='%23e8c37a' stroke-width='2.6' stroke-linecap='round'/%3E%3C/svg%3E")}
.bs-trong{max-width:420px;margin:30px auto 0;text-align:center;color:var(--ink-dim);font-size:14px;line-height:1.6}
.bs-dau{max-width:980px;margin:0 auto;text-align:center}
.bs-so{margin:0 0 6px;font:600 11px/1.4 "Be Vietnam Pro",sans-serif;letter-spacing:.24em;text-transform:uppercase;color:var(--gold);font-variant-numeric:lining-nums}
.bs-tieu{margin:0;font:600 clamp(27px,7.6vw,42px)/1.12 "Cormorant Garamond",Georgia,serif;color:var(--ink);outline:none;text-wrap:balance}
.bs-loc{display:flex;gap:7px;overflow-x:auto;scrollbar-width:none;margin:12px -16px 18px;padding:2px 16px}
.bs-loc::-webkit-scrollbar{display:none}
.bs-loc::before,.bs-loc::after{content:"";margin:auto}   /* đủ chỗ thì nằm giữa; thiếu chỗ thì cuộn ngang mà nút đầu không bị cụt */
.bs-loc button{flex:none;display:inline-flex;align-items:center;gap:7px;padding:8px 13px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(232,195,122,.24);background:rgba(255,255,255,.045);color:var(--ink-dim);
  font:500 13px/1 "Be Vietnam Pro",sans-serif;transition:background .2s,color .2s,border-color .2s}
.bs-loc button:hover{color:var(--ink);border-color:rgba(232,195,122,.45)}
.bs-loc button small{font-size:11px;padding:2px 6px;border-radius:99px;background:rgba(255,255,255,.08);font-variant-numeric:tabular-nums}
.bs-loc button[aria-pressed="true"]{background:linear-gradient(180deg,#f0d193,#c9a24d);border-color:transparent;color:#231a05;font-weight:600}
.bs-loc button[aria-pressed="true"] small{background:rgba(35,26,5,.15)}
.bs-luoi{list-style:none;margin:0 auto;padding:0;max-width:980px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
@media (min-width:600px){.bs-luoi{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}}
@media (min-width:900px){.bs-luoi{grid-template-columns:repeat(4,minmax(0,1fr))}}
/* thẻ hiện dần chỉ bằng độ mờ, không dời chỗ: ngôi sao bay về phải đáp đúng chỗ đã đo lúc mở (app.js baySao) */
.bs-the{opacity:0;transition:opacity .5s ease var(--d,0ms)}
.bs-the.bs-thay{opacity:1}
.bang-sao.dong .bs-the{opacity:0;transition:opacity .2s ease}
.bs-the a{position:relative;display:flex;flex-direction:column;height:100%;border-radius:16px;color:inherit;text-decoration:none;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid rgba(255,255,255,.09);
  -webkit-tap-highlight-color:transparent;transition:transform .25s ease,border-color .25s,box-shadow .25s}
.bs-the a:focus-visible{transform:translateY(-3px);outline:none;border-color:rgba(232,195,122,.45);box-shadow:0 16px 34px rgba(0,0,0,.45)}
/* chỉ máy có chuột mới nhấc thẻ khi rê: điện thoại chạm xong thì :hover dính lại, đóng trò về bảng vẫn thấy thẻ nhấc lên */
@media (hover:hover){.bs-the a:hover{transform:translateY(-3px);border-color:rgba(232,195,122,.45);box-shadow:0 16px 34px rgba(0,0,0,.45)}}
.bs-the a:active{transform:scale(.97)}
.bs-anh{display:block;aspect-ratio:40/21;overflow:hidden;border-radius:15px 15px 0 0;background:#15112e}
.bs-anh img{display:block;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.1);
  transition:opacity .5s ease var(--d,0ms),transform 1.1s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.bs-thay .bs-anh img.da-tai{opacity:1;transform:none}
.bs-hang{position:relative;display:flex;align-items:flex-end;gap:8px;margin:-17px 10px 0}
.bs-sao,.bs-ma{display:grid;place-items:center;border-radius:50%}
.bs-sao{flex:none;width:34px;height:34px;background:#14102b;border:1px solid rgba(255,255,255,.16);box-shadow:0 4px 14px rgba(0,0,0,.45)}
.bs-sao svg,.bs-ma svg{width:17px;height:17px;fill:var(--mau);filter:drop-shadow(0 0 6px var(--mau))}
.bs-cho-sao .bs-sao svg{opacity:0}
.bs-dat .bs-sao{animation:bs-dat .8s ease-out}
@keyframes bs-dat{from{box-shadow:0 0 0 0 var(--mau),0 4px 14px rgba(0,0,0,.45)}to{box-shadow:0 0 0 16px transparent,0 4px 14px rgba(0,0,0,.45)}}
.bs-nhom{padding-bottom:3px;font:600 10px/1.2 "Be Vietnam Pro",sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--mau)}
.bs-ten{display:block;padding:7px 12px 0;font:600 19px/1.15 "Cormorant Garamond",Georgia,serif;color:#fff;font-variant-numeric:lining-nums}
.bs-cau{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;margin:4px 12px 13px;
  font-size:12.5px;line-height:1.5;color:var(--ink-dim)}   /* lề chứ không đệm: đệm dưới để lòi dòng thứ tư ra */
.bs-nhom,.bs-ten,.bs-cau{transform:translateY(7px);transition:transform .6s cubic-bezier(.2,.8,.2,1) var(--d,0ms)}
.bs-thay .bs-nhom,.bs-thay .bs-ten,.bs-thay .bs-cau{transform:none}
.bs-bay{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
/* ✕ đúng chỗ ngôi sao góc (--x, --y do tamNut đặt): ngôi sao thành ✕; trang đã cuộn thì không lên quá mép trên */
.bs-dong{position:fixed;z-index:3;left:calc(var(--x,100%) - 17px);top:max(calc(var(--y,30px) - 17px),calc(env(safe-area-inset-top,0px) + 8px));
  width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(232,195,122,.6);background:rgba(13,11,26,.88);color:var(--gold);-webkit-tap-highlight-color:transparent;
  opacity:0;transform:rotate(-90deg) scale(.4);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.bs-dong svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.bang-sao.mo .bs-dong{opacity:1;transform:none;transition-delay:.1s}
.bang-sao.mo .bs-dong:active{transform:scale(.9)}
.bs-dong:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
/* 🔗 chép link của bảng ("cho cái này có cái link luôn đi"), cùng hàng, bên trái ✕ — như nút 🔗 trong trò */
.bs-link{position:fixed;z-index:3;left:calc(var(--x,100%) - 61px);top:max(calc(var(--y,30px) - 17px),calc(env(safe-area-inset-top,0px) + 8px));
  width:34px;height:34px;padding:0;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(232,195,122,.4);background:rgba(13,11,26,.88);color:var(--gold);-webkit-tap-highlight-color:transparent;
  opacity:0;transform:scale(.6);transition:opacity .25s ease,transform .45s cubic-bezier(.2,.8,.2,1)}
.bs-link svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.bang-sao.mo .bs-link{opacity:1;transform:none;transition-delay:.18s}
.bang-sao.mo .bs-link:active{transform:scale(.9)}
.bs-link:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
.bs-ma{position:fixed;will-change:transform,opacity}
.bs-ma svg{width:19px;height:19px}
/* giảm chuyển động: luật chung chỉ rút thời lượng còn 0, thẻ vẫn chờ hết độ trễ mới hiện — bỏ luôn độ trễ */
@media (prefers-reduced-motion:reduce){
  .bang-sao *,.bang-sao.mo .bs-dau,.bang-sao.mo .bs-loc{transition-delay:0s!important}
}
@supports (color:color-mix(in srgb,red 50%,transparent)){
  .bs-sao{border-color:color-mix(in srgb,var(--mau) 45%,transparent)}
  .bs-the a:focus-visible{border-color:color-mix(in srgb,var(--mau) 60%,transparent);
    box-shadow:0 16px 34px rgba(0,0,0,.45),0 0 26px color-mix(in srgb,var(--mau) 24%,transparent)}
  @media (hover:hover){.bs-the a:hover{border-color:color-mix(in srgb,var(--mau) 60%,transparent);
    box-shadow:0 16px 34px rgba(0,0,0,.45),0 0 26px color-mix(in srgb,var(--mau) 24%,transparent)}}
  .bs-anh{background:radial-gradient(80% 120% at 72% 35%,color-mix(in srgb,var(--mau) 30%,transparent),transparent 72%),#15112e}
}

/* ---------- Mùa Chín ---------- */
body.khoa-cuon{overflow:hidden}
.game{position:fixed;inset:0;z-index:30;display:none;
  background:radial-gradient(120% 90% at 50% 0%,#241d4a 0%,#141029 45%,#0b0917 100%)}
.game.hien{display:block}
.game-cv{position:absolute;inset:0;display:block;touch-action:none;cursor:crosshair}
.game-hud{position:absolute;top:0;left:0;right:0;z-index:2;pointer-events:none;
  display:flex;align-items:center;gap:12px;
  padding:calc(env(safe-area-inset-top,0px) + 14px) 104px 0 16px}
.g-diem{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:600;color:var(--gold);
  display:flex;align-items:baseline;gap:8px;text-shadow:0 2px 12px rgba(0,0,0,.6)}
.g-nhan{font-family:"Be Vietnam Pro",sans-serif;font-size:14px;font-weight:600;color:#8fd6c2}
.g-mang{margin-left:auto;font-size:17px;letter-spacing:3px;color:#c94f5e;text-shadow:0 2px 10px rgba(0,0,0,.6)}
.g-mang .tim{opacity:.3}
.g-mang .tim.day{opacity:1}

.game-mo,.game-het{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;
  align-items:center;justify-content:center;gap:12px;text-align:center;padding:26px;
  background:rgba(9,7,20,.72);backdrop-filter:blur(4px);animation:fade .3s ease both}
.game-mo[hidden],.game-het[hidden]{display:none}
.game-mo h2,.game-het h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:38px;font-weight:600;
  margin:0;color:var(--gold);letter-spacing:.04em}
.g-dao{width:min(70vw,250px);margin-bottom:2px;filter:drop-shadow(0 6px 22px rgba(232,195,122,.34))}
.g-dao svg{width:100%;height:auto;display:block}
.g-phu,.g-tong{color:var(--ink-dim);font-size:14px;margin:0;line-height:1.7}
.g-cach{color:var(--ink-dim);font-size:12px;opacity:.75;margin:6px 0 0;line-height:1.8}
.g-hoa{width:16px;height:16px;vertical-align:-3px}
.game-het .ghost{margin-top:2px}
.ephemeral{text-align:center;color:var(--ink-dim);font-size:12.5px;line-height:1.8;margin:0 0 16px;opacity:.85}

/* ---------- sheet ---------- */
.sheet-wrap{position:fixed;inset:0;z-index:35;display:flex;align-items:flex-end;justify-content:center}   /* trên trò (30), dưới thông báo (40): gợi ý cài app hiện cả trong trò phát âm */
.sheet-bg{position:absolute;inset:0;background:rgba(6,5,14,.66);backdrop-filter:blur(3px);animation:fade .25s ease both}
@keyframes fade{from{opacity:0}to{opacity:1}}
.sheet{position:relative;width:100%;max-width:560px;max-height:86vh;overflow-y:auto;
  background:linear-gradient(170deg,#1b1540,#120f2a);border:1px solid var(--line);border-bottom:0;
  border-radius:22px 22px 0 0;padding:10px 20px calc(24px + var(--safe-b));animation:up .3s cubic-bezier(.2,.8,.3,1) both}
@keyframes up{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
.handle{width:42px;height:4px;border-radius:99px;background:rgba(255,255,255,.22);margin:4px auto 14px;cursor:pointer}
.sheet h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;margin:0 0 12px;font-weight:600}
.sheet h3[hidden]+#sheet-body .ve:first-child{margin-top:2px}
.sheet p{font-size:14px;line-height:1.75;color:var(--ink-dim);margin:0 0 12px}
.sheet .quote{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;line-height:1.55;color:var(--ink);
  border-left:2px solid var(--gold-deep);padding-left:14px;margin:0 0 14px}
textarea{width:100%;min-height:130px;background:rgba(0,0,0,.28);border:1px solid var(--line);
  border-radius:12px;color:var(--ink);font-family:inherit;font-size:14px;line-height:1.65;padding:12px;resize:vertical}
textarea:focus{outline:1px solid var(--gold-deep)}

/* ---------- toast ---------- */
.toast{position:fixed;left:50%;bottom:calc(30px + var(--safe-b));transform:translateX(-50%);z-index:40;
  background:rgba(232,195,122,.95);color:#231a05;padding:10px 18px;border-radius:999px;font-size:13px;
  font-weight:500;box-shadow:0 10px 30px rgba(0,0,0,.4);animation:up .25s ease both}

@media (prefers-reduced-motion:reduce){
  *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  .card-shell::before{animation:none}
}

/* ---------- màn hình phủ kín dùng chung cho các ngôi sao ---------- */
.hoadang,.ho,.hopho{position:fixed;inset:0;z-index:30;display:none}
.hoadang.hien,.ho.hien,.hopho.hien{display:block}
.hd-cv,.ho-cv,.ht-cv{position:absolute;inset:0;display:block;width:100%;height:100%}
.hd-dong,.ho-dong,.ht-dong,.g-dong{position:absolute;z-index:8;
  top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);color:var(--ink);font-size:14px;line-height:1}
.hd-dong:hover,.ho-dong:hover,.ht-dong:hover,.g-dong:hover{background:rgba(255,255,255,.12)}

/* ---------- thả đèn hoa đăng ---------- */
.hd-cv{touch-action:none}
.hd-lop{position:absolute;left:0;right:0;bottom:0;z-index:3;
  padding:22px 22px calc(30px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.hd-viet[hidden],.hd-xong[hidden]{display:none}
.hd-viet,.hd-xong{display:flex;flex-direction:column;align-items:center;gap:12px;
  width:100%;max-width:420px;animation:rise .45s ease both}
.hd-hoi{font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;margin:0;color:var(--ink)}
.hd-o{width:100%;min-height:88px;background:rgba(0,0,0,.34);border:1px solid rgba(240,168,96,.3);
  border-radius:14px;color:var(--ink);font-family:inherit;font-size:15px;line-height:1.6;padding:12px;resize:none}
.hd-o:focus{outline:1px solid rgba(240,168,96,.7)}
.hd-ghi{font-size:11.5px;color:var(--ink-dim);opacity:.65;margin:0;line-height:1.6}
.hd-loi{font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;margin:0;color:#f0c48a}
.hd-loi-nho{font-size:12.5px;line-height:1.6;margin:0;max-width:330px;color:var(--ink-dim)}
/* hai cách thả: một mình, cùng mọi người — nằm ngay trên câu hỏi, đổi cách là đổi luôn lời dưới ô nhập */
.hd-che{display:flex;gap:4px;width:100%;padding:3px;border-radius:999px;
  background:rgba(0,0,0,.34);border:1px solid rgba(240,168,96,.25)}
.hd-che button{flex:1;min-width:0;border:0;border-radius:999px;padding:9px 8px;background:transparent;cursor:pointer;
  color:var(--ink-dim);font-family:inherit;font-size:13px;line-height:1.3;transition:background .2s,color .2s}
.hd-che button:hover{color:var(--ink)}
.hd-che button[aria-pressed="true"]{background:rgba(240,168,96,.24);color:#f8d9ac}
.hd-che button:focus-visible{outline:1px solid rgba(240,168,96,.75);outline-offset:1px}
/* dòng sông chung: tên sông, số người ở bến — góc trên bên trái, chừa chỗ cho nút đóng, chép link (và nút Cài app) */
.hd-ben{position:absolute;z-index:4;top:calc(env(safe-area-inset-top,0px) + 12px);left:16px;
  max-width:calc(100% - 128px);pointer-events:none}
.co-nut-cai .hd-ben{max-width:calc(100% - 214px)}
.hd-ben-ten{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;line-height:1.2;margin:0;color:#f0c48a}
.hd-ben-so{font-size:12px;line-height:1.5;margin:2px 0 0;color:var(--ink-dim)}
.hd-ben-so:empty{display:none}
.hd-doc{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

/* ---------- hồ nước ---------- */
.ho-cv{touch-action:none;cursor:default}
.ho-tieng{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);color:var(--ink)}
.ho-tieng:hover{background:rgba(255,255,255,.12)}
.ho-tieng.tat{color:rgba(244,239,230,.42)}
.ho-cv.tro{cursor:pointer}          /* đang trỏ vào một con ếch */

/* ---------- hộp thở ---------- */
.ht-giua{position:absolute;inset:0;z-index:3;display:none;flex-direction:column;
  align-items:center;justify-content:center;gap:6px;pointer-events:none;text-align:center;padding:0 30px}
.ht-giua.hien{display:flex}
.ht-nhip{font-family:"Cormorant Garamond",Georgia,serif;font-size:27px;margin:0;color:#ded4f5;line-height:1.25}
.ht-dem{font-family:"Be Vietnam Pro",sans-serif;font-size:14px;margin:0;color:rgba(200,186,240,.55);
  font-variant-numeric:tabular-nums}
.ht-nhac{position:absolute;left:50%;transform:translateX(-50%);z-index:3;pointer-events:none;
  bottom:calc(112px + env(safe-area-inset-bottom,0px));
  width:min(88vw,340px);margin:0;text-align:center;
  font-size:12.5px;line-height:1.75;color:rgba(200,186,240,.6);transition:opacity 1.8s ease}
.ht-nhac.mo{opacity:0}
.ht-vong{position:absolute;left:0;right:0;z-index:3;text-align:center;margin:0;pointer-events:none;
  bottom:calc(78px + env(safe-area-inset-bottom,0px));font-size:12px;color:rgba(200,186,240,.45);letter-spacing:.08em}
.ht-thoat{position:absolute;left:50%;transform:translateX(-50%);z-index:4;
  bottom:calc(30px + env(safe-area-inset-bottom,0px));
  background:transparent;border:1px solid rgba(200,186,240,.25);color:rgba(200,186,240,.7);
  border-radius:999px;padding:8px 16px;font-size:12.5px;font-family:inherit;cursor:pointer}
.ht-thoat[hidden]{display:none}
.ht-thoat:hover{background:rgba(200,186,240,.1)}

.ht-chon,.ht-luuy{position:absolute;inset:0;z-index:4;overflow-y:auto;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;text-align:center;padding:30px 22px calc(30px + env(safe-area-inset-bottom,0px));
  background:rgba(9,7,20,.66);backdrop-filter:blur(5px);animation:fade .3s ease both}
.ht-chon[hidden],.ht-luuy[hidden]{display:none}
.ht-chon h2{font-family:"Cormorant Garamond",Georgia,serif;font-size:36px;font-weight:600;margin:0;color:#ded4f5}
.ht-phu{color:var(--ink-dim);font-size:13.5px;margin:0}
.ht-ds{display:flex;flex-direction:column;gap:9px;width:100%;max-width:400px;margin-top:4px}
.ht-the{display:flex;flex-direction:column;gap:4px;text-align:left;
  background:rgba(255,255,255,.045);border:1px solid rgba(200,186,240,.18);border-radius:14px;
  padding:14px 16px;cursor:pointer;font-family:inherit;transition:background .18s,border-color .18s}
.ht-the:hover{background:rgba(184,168,232,.14);border-color:rgba(200,186,240,.45)}
/* trạng thái của người dùng là dòng chính, tên kỹ thuật chỉ là chú thích */
.ht-the-khi{font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;
  color:#ded4f5;line-height:1.3}
.ht-the-ten{font-size:12px;color:rgba(232,195,122,.8);letter-spacing:.02em;
  font-variant-numeric:tabular-nums}
.ht-luuy-nut{background:none;border:0;color:rgba(200,186,240,.5);font-family:inherit;font-size:12px;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer;margin-top:6px;padding:6px}
.ht-luuy-nut:hover{color:var(--ink)}

.ht-tin-trong{width:100%;max-width:400px;display:flex;flex-direction:column;gap:12px;align-items:center}
.ht-tin-trong h3{font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:600;margin:0;color:#ded4f5}
.ht-tin-trong p{color:var(--ink-dim);font-size:13.5px;line-height:1.75;margin:0}
.ht-tin-canh{border:1px solid rgba(232,195,122,.3);background:rgba(232,195,122,.07);
  border-radius:12px;padding:11px 13px;color:rgba(240,215,170,.95)!important;font-size:12.5px!important}
.ht-tin-canh[hidden]{display:none}
.ht-tin-goi{color:rgba(232,195,122,.85)!important;font-size:12.5px!important;letter-spacing:.04em}
.ht-nguon{font-size:11.5px!important;opacity:.6;border-top:1px solid var(--line);padding-top:12px;margin-top:2px!important}
.ht-tin-trong .primary,.ht-tin-trong .ghost{width:100%;max-width:280px}

/* ---------- nối sao thành chòm ---------- */
.chomsao{position:fixed;inset:0;z-index:30;display:none}
.chomsao.hien{display:block}
.cs-cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.cs-dong{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);color:var(--ink);font-size:14px;line-height:1}
.cs-dong:hover{background:rgba(255,255,255,.12)}
.cs-tren{position:absolute;left:0;right:0;z-index:3;pointer-events:none;text-align:center;
  top:0;padding:calc(env(safe-area-inset-top,0px) + 52px) 60px 20px;
  background:linear-gradient(to bottom,rgba(8,7,22,.9) 0%,rgba(8,7,22,.7) 60%,rgba(8,7,22,0) 100%)}
.cs-ten{font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(24px,7vw,31px);margin:0;
  color:#f4efe6;letter-spacing:.02em;line-height:1.15;text-wrap:balance}
.cs-phu{font-size:11.5px;margin:5px 0 0;color:rgba(232,195,122,.7);letter-spacing:.04em}
.cs-nhac{position:absolute;left:0;right:0;z-index:3;pointer-events:none;text-align:center;margin:0;
  bottom:calc(46px + env(safe-area-inset-bottom,0px));
  font-size:12.5px;color:rgba(200,193,216,.5);transition:opacity 1.2s ease}
.cs-nhac.mo{opacity:0}
.cs-nhac.tren{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 170px)}
.cs-xong{position:absolute;left:0;right:0;bottom:0;z-index:4;text-align:center;
  padding:44px 26px calc(30px + env(safe-area-inset-bottom,0px));
  display:flex;flex-direction:column;align-items:center;gap:12px;animation:rise .6s ease both;
  background:linear-gradient(to top,rgba(8,7,22,.95) 0%,rgba(8,7,22,.88) 55%,rgba(8,7,22,0) 100%)}
.cs-xong[hidden]{display:none}
.cs-loi{font-size:13.5px;line-height:1.8;color:var(--ink-dim);margin:0;max-width:400px;
  max-height:34vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.cs-cadao{font-family:"Cormorant Garamond",Georgia,serif;font-size:18px;line-height:1.55;
  color:rgba(232,195,122,.9);margin:0;white-space:pre-line;font-style:italic}
.cs-cadao[hidden]{display:none}
.cs-xong .primary{margin-top:2px}
.cs-goc{position:absolute;left:50%;transform:translateX(-50%);z-index:5;
  top:calc(env(safe-area-inset-top,0px) + 126px);
  background:rgba(0,0,0,.35);border:1px solid rgba(232,195,122,.3);color:rgba(232,195,122,.85);
  border-radius:999px;padding:6px 14px;font-size:11.5px;font-family:inherit;cursor:pointer}
.cs-goc[hidden]{display:none}
.cs-goc:hover{background:rgba(232,195,122,.14)}

/* nút chép địa chỉ, nằm cạnh nút đóng của mọi trò */
.nut-link{position:absolute;z-index:8;
  top:calc(env(safe-area-inset-top,0px) + 14px);right:58px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.nut-link svg{width:17px;height:17px}
.nut-link:hover{background:rgba(255,255,255,.12)}
.nut-cai{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);right:100px;
  height:34px;padding:0 12px 0 9px;border-radius:999px;cursor:pointer;display:flex;align-items:center;gap:5px;
  border:1px solid rgba(232,195,122,.4);background:rgba(0,0,0,.32);color:#f0c48a;font:inherit;font-size:13px;
  -webkit-tap-highlight-color:transparent}
.nut-cai svg{width:16px;height:16px}
.nut-cai:hover{background:rgba(232,195,122,.12)}
/* Có nút Cài app thì khung trò mang lớp co-nut-cai (app.js, themNutCaiApp). Nút rộng chừng 94 px, nằm từ 100 tới
   194 px tính từ mép phải, nên thứ vốn ở hàng đó phải nhường: tim của Mùa Chín, số ếch, nút phóng của Trời đêm.
   Ba trò có thanh tiêu đề riêng (Robot thắp sao, Đẩy thùng sao, Cờ ba người) chừa thêm chỗ bên phải; điện thoại
   không đủ chỗ cho cả tiêu đề lẫn ba nút thì thanh tiêu đề lùi xuống dưới hàng nút, như trò phát âm. */
.co-nut-cai .game-hud{padding-right:204px}
.co-nut-cai .ho-dem{right:200px}
.co-nut-cai .lt-dau,.co-nut-cai .sk-dau,.co-nut-cai .cb-dau{padding-right:204px}
@media (max-width:479px){
  .co-nut-cai .td-phong{top:calc(env(safe-area-inset-top,0px) + 60px)}
  .co-nut-cai .lt-dau,.co-nut-cai .sk-dau,.co-nut-cai .cb-dau{padding-top:calc(env(safe-area-inset-top,0px) + 54px);padding-right:14px}
}

/* số ếch trong hồ — xếp cùng hàng với nút chép link và dấu x, bên trái hai nút đó */
.ho-dem{position:absolute;z-index:8;margin:0;pointer-events:none;
  top:calc(env(safe-area-inset-top,0px) + 14px);right:100px;
  min-width:34px;height:34px;line-height:34px;text-align:center;
  font-size:13px;color:rgba(190,225,240,.5)}

/* báo đang tua nhanh trong hồ */
.ho-nhanh{position:absolute;left:0;right:0;z-index:4;text-align:center;margin:0;pointer-events:none;
  top:calc(env(safe-area-inset-top,0px) + 62px);
  font-size:12px;letter-spacing:.14em;color:rgba(190,225,240,.6);
  animation:tho-nhanh 1.4s ease-in-out infinite}
@keyframes tho-nhanh{0%,100%{opacity:.35}50%{opacity:.85}}

/* ---------- bầu trời đêm nay ---------- */
.troidem{position:fixed;inset:0;z-index:30;display:none;background:#070b14;overflow:hidden}
.troidem.hien{display:block}
.td-cv{position:absolute;inset:0;display:block;width:100%;height:100%;touch-action:none;cursor:grab}
.td-cv:active{cursor:grabbing}
.td-dong{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.42);color:var(--ink);font-size:14px;line-height:1}
.td-dong:hover{background:rgba(255,255,255,.14)}

.td-tin{position:absolute;z-index:6;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 26px + var(--thanh,36px));
  padding:0 20px;text-align:center;pointer-events:none;
  text-shadow:0 1px 10px rgba(0,0,0,.9)}
.td-dong1{margin:0 0 4px;font-size:14px;color:rgba(240,232,214,.95)}
.td-dong2{margin:0 0 3px;font-size:12px;line-height:1.6;color:rgba(200,214,238,.8)}
.td-dong3{margin:0;font-size:12px;color:rgba(174,191,240,.8)}

.td-phong{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 16px);left:50%;transform:translateX(-50%);
  padding:7px 14px;border-radius:999px;cursor:pointer;font-size:12.5px;white-space:nowrap;
  border:1px solid rgba(174,191,240,.35);background:rgba(7,11,20,.6);color:#cdd8f5;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.td-phong[hidden]{display:none}
.td-thanh{position:absolute;z-index:7;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 16px);
  display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;padding:0 10px}
.td-thanh button{padding:8px 16px;border-radius:999px;cursor:pointer;font-size:13px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.42);color:var(--ink);
  -webkit-tap-highlight-color:transparent}
.td-thanh button:hover{background:rgba(255,255,255,.14)}
.td-thanh button.bat{border-color:rgba(174,191,240,.7);color:#aebff0}

.td-bang{position:absolute;inset:0;z-index:9;display:grid;place-items:center;
  background:rgba(6,10,20,.82);padding:22px}
.td-bang[hidden]{display:none}
.td-hop{width:100%;max-width:380px;text-align:center}
.td-tieu{margin:0 0 14px;font-family:"Cormorant Garamond",Georgia,serif;font-size:25px;color:#f0c48a}
.td-vi-sao{margin:-6px 0 16px;font-size:13px;line-height:1.6;color:rgba(244,239,230,.7)}
.td-dinhvi{width:100%;padding:11px;margin:0 0 14px;border-radius:12px;cursor:pointer;font-size:14px;
  border:1px solid rgba(174,191,240,.45);background:rgba(174,191,240,.1);color:var(--ink)}
.td-dinhvi:disabled{opacity:.6;cursor:default}
.td-hay{margin:0 0 10px;font-size:12px;color:rgba(244,239,230,.5)}
.td-tp{display:flex;flex-wrap:wrap;gap:8px;justify-content:center;margin-bottom:16px}
.td-tp button{padding:7px 13px;border-radius:999px;cursor:pointer;font-size:13px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:var(--ink)}
.td-tp button:hover{background:rgba(255,255,255,.11)}
.td-tp button.dang{border-color:rgba(174,191,240,.7);color:#aebff0}
.td-thoi{padding:8px 18px;border-radius:999px;cursor:pointer;font-size:13px;
  border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(244,239,230,.6)}
.td-gap{margin:5px 0 0;font-size:12px;color:rgba(240,196,138,.92)}

/* ---------- ngôi sao luyện phát âm ---------- */
.phatam{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#1f2338 0%,#15182b 45%,#0b0e1c 100%)}
.phatam.hien{display:block}
.pa-dong{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.32);color:var(--ink);font-size:14px;line-height:1}
.pa-dong:hover{background:rgba(255,255,255,.12)}
.pa-trong{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch}
.pa-man{max-width:560px;margin:0 auto;
  padding:calc(env(safe-area-inset-top,0px) + 62px) 16px calc(28px + var(--safe-b))}
.pa-tua{margin:0 0 6px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:26px;font-weight:600;color:var(--ink)}
.pa-phu{margin:0 0 18px;text-align:center;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.pa-nhom{margin:18px 0 8px;font-size:11.5px;letter-spacing:.13em;text-transform:uppercase;color:rgba(232,195,122,.72)}
.pa-ds{display:flex;flex-direction:column;gap:9px}
.pa-the{display:flex;align-items:center;gap:12px;width:100%;text-align:left;cursor:pointer;
  padding:12px 14px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink)}
.pa-the:hover{background:rgba(232,195,122,.09)}
.pa-ipa{flex:0 0 auto;min-width:58px;font-size:15px;font-weight:500;color:var(--gold)}
.pa-the-chu{flex:1;display:flex;flex-direction:column;gap:3px;min-width:0}
.pa-the-chu b{font-weight:500;font-size:14.5px}
.pa-the-chu i{font-style:normal;font-size:12px;line-height:1.5;color:var(--ink-dim)}
.pa-sao{flex:0 0 auto;font-size:8px;letter-spacing:2px;color:rgba(232,195,122,.55)}
.pa-do-nhan{display:inline-block;margin-top:3px;padding:1px 7px;border-radius:999px;font-size:10px;letter-spacing:.04em;border:1px solid rgba(150,205,160,.35);color:rgba(150,205,160,.9)}
.pa-tai-sai{margin:10px 0 0}
.pa-tai-sai[hidden]{display:none}
.pa-tai-cap{display:flex;gap:8px;margin:0 0 8px}
.pa-tai-cap .pa-le-phat{padding:10px}
.pa-le-phat.that{border-color:rgba(150,205,160,.6)}
.pa-tai-tiep{width:100%}
.pa-ve-ds{margin-top:10px;font-size:12.5px;color:var(--ink-dim)}
.pa-the{position:relative}
.pa-noithu{margin-left:auto;flex:0 0 auto;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:12.5px;
  border:1px solid rgba(232,195,122,.45);background:rgba(232,195,122,.1);color:#f0c48a}
.pa-noithu:hover{background:rgba(232,195,122,.2)}
.pa-do-chon{display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 12px}
.pa-do-tu{padding:6px 12px;border-radius:999px;cursor:pointer;font-size:13px;
  border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--ink-dim)}
.pa-do-tu.dang{border-color:rgba(232,195,122,.6);background:rgba(232,195,122,.14);color:#f0c48a}
.pa-do-hai{display:flex;align-items:center;justify-content:center;gap:8px;margin:0 0 10px;font-size:18px}
.pa-do-hai span{color:rgba(244,239,230,.4)}
.pa-do-hai span.nay{color:#f0c48a;font-weight:500}
.pa-do-hai span.xong{color:#bfe2c6}
.pa-do-hai i{font-style:normal;font-size:13px;color:rgba(244,239,230,.35)}
.pa-do-mau{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin:0 0 10px}
.pa-do-muc{height:4px;margin:8px 0 0;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.pa-do-muc i{display:block;height:100%;width:0;background:#e8c37a;transition:width .08s linear}
.pa-do-kq{margin:12px 0 10px;padding:11px 13px;border-radius:12px;border:1px solid var(--line)}
.pa-do-kq b{display:block;margin:0 0 3px;font-size:15px;font-weight:500}
.pa-do-kq span{font-size:13px;line-height:1.6;color:var(--ink)}
.pa-do-kq.dat{border-color:rgba(150,205,160,.45);background:rgba(150,205,160,.1)}
.pa-do-kq.dat b{color:#bfe2c6}
.pa-do-kq.chua{border-color:rgba(226,140,134,.4);background:rgba(226,140,134,.08)}
.pa-do-kq.chua b{color:#f0bcb8}
.pa-do-kq.loi{border-style:dashed}
.pa-do-kq.loi b{color:var(--ink-dim)}
.pa-hoac{margin:4px 0 10px}
.pa-thua{margin:20px 0 0;font-size:11.5px;line-height:1.65;color:rgba(185,178,204,.72)}

.pa-dau{display:flex;align-items:center;gap:10px;margin:0 0 14px}
.pa-quay{width:32px;height:32px;flex:0 0 auto;border-radius:50%;cursor:pointer;font-size:19px;line-height:1;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.28);color:var(--ink)}
.pa-quay:hover{background:rgba(255,255,255,.12)}
.pa-ten{font-size:16px;font-weight:500;color:var(--ink)}
.pa-hinh{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:center;gap:10px;margin-bottom:16px}
.pa-hinh svg{max-width:100%;height:auto}
.pa-khoi{margin:0 0 14px;padding:13px 14px;border-radius:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.035)}
.pa-khoi.pa-mo{border-style:dashed;opacity:.85}
.pa-nhan{margin:0 0 6px;font-size:11px;letter-spacing:.11em;text-transform:uppercase;color:rgba(232,195,122,.72)}
.pa-chu{margin:0;font-size:13.5px;line-height:1.7;color:var(--ink)}
.pa-chu.pa-nho{font-size:12.5px;color:var(--ink-dim)}
.pa-chu.pa-thua{margin-top:8px;font-size:11.5px;color:rgba(185,178,204,.7)}
.pa-bieu{margin:4px 0 8px;text-align:center}
.pa-bieu svg{max-width:100%;height:auto}
.pa-tu,.pa-cap,.pa-doi{display:flex;flex-wrap:wrap;gap:8px}
.pa-tu-nut{cursor:pointer;padding:8px 13px;border-radius:999px;font-size:13.5px;
  border:1px solid var(--line);background:rgba(232,195,122,.07);color:var(--ink)}
.pa-tu-nut:hover{background:rgba(232,195,122,.16)}
.pa-cap-nut{flex:1 1 150px;display:flex;flex-direction:column;gap:3px;cursor:pointer;text-align:left;
  padding:11px 13px;border-radius:12px;font-size:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink)}
.pa-cap-nut:hover{background:rgba(232,195,122,.1)}
.pa-cap-nut i{font-style:normal;font-size:11.5px;color:var(--ink-dim)}
.pa-doi{margin-bottom:14px}
.pa-gui{margin:0 0 9px;padding:9px 11px;border-radius:10px;font-size:11.5px;line-height:1.6;
  border:1px solid rgba(232,195,122,.2);background:rgba(232,195,122,.06);color:rgba(244,239,230,.86)}
.pa-mic{width:100%;cursor:pointer;padding:14px;border-radius:14px;font-size:14.5px;
  border:1px solid rgba(232,195,122,.4);background:rgba(232,195,122,.13);color:var(--ink)}
.pa-mic:hover{background:rgba(232,195,122,.2)}
.pa-mic.dang{border-color:rgba(226,140,134,.55);background:rgba(226,140,134,.16);animation:pa-tho 1.4s ease-in-out infinite}
@keyframes pa-tho{0%,100%{opacity:1}50%{opacity:.62}}
.pa-loi{margin:0 0 9px;font-size:12.5px;line-height:1.6;color:var(--ink-dim)}
.pa-loi.nang{color:#f0a9a3}
.pa-luot{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:8px}
.pa-luot span{padding:5px 10px;border-radius:999px;font-size:12px;border:1px solid var(--line)}
.pa-luot span.dung{border-color:rgba(150,205,160,.4);background:rgba(150,205,160,.12);color:#bfe2c6}
.pa-luot span.sai{border-color:rgba(226,140,134,.35);background:rgba(226,140,134,.1);color:#f0bcb8}
@media (max-width:420px){ .pa-ipa{min-width:50px;font-size:14px} }
/* bước và nút của chế độ hướng dẫn */
.pa-cham{display:flex;gap:6px;justify-content:center;margin:0 0 16px}
.pa-cham i{width:26px;height:3px;border-radius:2px;background:rgba(255,255,255,.14)}
.pa-cham i.roi{background:rgba(232,195,122,.45)}
.pa-cham i.nay{background:var(--gold)}
.pa-buoc{margin:0 0 12px;text-align:center;font-size:11.5px;letter-spacing:.11em;
  text-transform:uppercase;color:rgba(232,195,122,.75)}
.pa-to{display:block;width:100%;cursor:pointer;margin:0 0 12px;padding:22px 16px;border-radius:16px;
  font-size:17px;font-weight:400;border:1px solid rgba(232,195,122,.42);
  background:rgba(232,195,122,.13);color:var(--ink)}
.pa-to:hover{background:rgba(232,195,122,.22)}
.pa-to:active{transform:scale(.985)}
.pa-to.pa-nho-to{padding:14px;font-size:14.5px}
.pa-giua{text-align:center}
.pa-lai{display:flex;gap:10px;align-items:center;justify-content:space-between;margin-top:20px}
.pa-lui,.pa-toi{cursor:pointer;padding:13px 18px;border-radius:13px;font-size:14px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink)}
.pa-toi{flex:1;background:rgba(232,195,122,.14);border-color:rgba(232,195,122,.4)}
.pa-lui:hover{background:rgba(255,255,255,.12)}
.pa-toi:hover{background:rgba(232,195,122,.24)}
/* bước luyện tai */
.pa-o{display:flex;gap:5px;justify-content:center;margin:0 0 16px}
.pa-o i{width:18px;height:8px;border-radius:3px;background:rgba(255,255,255,.12)}
.pa-o i.nay{background:var(--gold)}
.pa-o i.dung{background:rgba(150,205,160,.8)}
.pa-o i.sai{background:rgba(226,140,134,.75)}
.pa-chon{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:10px}
.pa-chon-nut{flex:1 1 140px;cursor:pointer;padding:20px 12px;border-radius:14px;font-size:16px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink)}
.pa-chon-nut:hover:enabled{background:rgba(232,195,122,.14)}
.pa-chon-nut:disabled{cursor:default;opacity:.5}
.pa-chon-nut.that{opacity:1;border-color:rgba(150,205,160,.6);background:rgba(150,205,160,.16)}
.pa-bao{margin:0;min-height:20px;text-align:center;font-size:13.5px;color:var(--ink-dim)}
.pa-bao.dung{color:#bfe2c6}
.pa-bao.sai{color:#f0bcb8}
.pa-mo-nut{background:rgba(255,255,255,.05)!important;border-color:var(--line)!important;
  flex:0 0 auto!important;font-size:13px}
.pa-truoc svg{max-width:100%;height:auto}
.pa-nut-hang{display:flex;gap:8px;justify-content:center;margin:0 0 14px}
.pa-phu-nut{cursor:pointer;padding:9px 14px;border-radius:999px;font-size:12.5px;
  border:1px solid var(--line);background:rgba(255,255,255,.05);color:var(--ink-dim)}
.pa-phu-nut:hover{background:rgba(255,255,255,.11);color:var(--ink)}
.pa-phu-nut.bat{border-color:rgba(232,195,122,.45);background:rgba(232,195,122,.14);color:var(--ink)}
/* luyện từng âm: bảng âm, màn một âm, tiếng người thật ở bước đầu mỗi bài */
.pa-muc{margin:26px 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;color:var(--ink)}
.pa-phu.pa-trai{margin:0 0 4px;text-align:left}
.pa-bang{display:grid;grid-template-columns:repeat(auto-fill,minmax(60px,1fr));gap:8px}
.pa-am-o,.pa-le-to,.pa-nguoi-ipa{font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Serif","Times New Roman",serif}
.pa-am-o{cursor:pointer;min-height:58px;padding:6px 2px;border-radius:13px;font-size:21px;line-height:1.1;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1px solid var(--line);background:rgba(232,195,122,.06);color:var(--ink)}
.pa-am-o b{font-weight:400}
.pa-am-o i{font-style:normal;font-size:10.5px;letter-spacing:.02em;color:var(--ink-dim);
  font-family:"Be Vietnam Pro",system-ui,sans-serif}
.pa-am-o:hover{background:rgba(232,195,122,.16);border-color:rgba(232,195,122,.4)}
.pa-le-to{margin:0 0 4px;text-align:center;font-size:58px;line-height:1.1;color:var(--gold)}
.pa-le-phat{flex:1 1 150px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:14px 12px;border-radius:14px;font-size:15px;
  border:1px solid rgba(232,195,122,.4);background:rgba(232,195,122,.12);color:var(--ink)}
.pa-le-phat i{font-style:normal;font-size:11px;color:var(--ink-dim)}
.pa-le-phat:hover{background:rgba(232,195,122,.22)}
.pa-le-phat.keu{border-color:var(--gold);background:rgba(232,195,122,.3)}
.pa-le-bao{min-height:18px;margin:0 0 8px;text-align:center;font-size:12.5px;line-height:1.55;color:#f0a9a3}
.pa-le-so{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0}
.pa-le-so[hidden]{display:none}
.pa-le-cap{display:flex;flex-direction:column;gap:8px}
.pa-le-cap-hang{display:flex;gap:8px;align-items:stretch}
.pa-le-cap-hang .pa-le-phat{padding:11px}
.pa-le-cap-hang .pa-phu-nut{flex:0 0 auto}
.pa-nguon{margin:16px 0 0;font-size:11px;line-height:1.6;color:rgba(185,178,204,.72)}
.pa-nguon a{color:inherit}
.pa-nguoi{display:flex;flex-direction:column;gap:10px;margin:0 0 8px}
.pa-nguoi-hang{padding:12px;border-radius:14px;border:1px solid var(--line);background:rgba(255,255,255,.035)}
.pa-nguoi-hang.sai{border-color:rgba(226,140,134,.35);background:rgba(226,140,134,.06)}
.pa-nguoi-ipa{display:block;margin:0 0 8px;font-size:22px;color:var(--gold)}
.pa-nguoi-ipa i{margin-left:8px;font-family:"Be Vietnam Pro",system-ui,sans-serif;font-style:normal;font-size:12px;color:#f0a9a3}
.pa-nguoi-nut{display:flex;flex-wrap:wrap;gap:8px}
.pa-nguoi-nut .pa-le-phat{flex:1 1 120px;padding:11px}
.pa-nguoi-nut .pa-phu-nut{flex:1 0 100%}
/* màn một âm: thanh chọn âm cùng nhóm, hình, từ ví dụ, ghi công */
.pa-le-cham{position:relative;display:flex;gap:5px;overflow-x:auto;margin:-4px -16px 10px;padding:2px 16px 6px;scrollbar-width:none}
.pa-le-cham::-webkit-scrollbar{display:none}
.pa-le-o{flex:0 0 auto;min-width:38px;height:34px;padding:0 7px;border-radius:10px;cursor:pointer;font-size:16px;
  font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Serif","Times New Roman",serif;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink-dim)}
.pa-le-o.nay{border-color:var(--gold);background:rgba(232,195,122,.2);color:var(--ink)}
.pa-le-hinh{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:4px 0 6px}
.pa-le-hinh .pa-hinh{flex:1 1 210px;max-width:290px;margin:0;display:flex;flex-direction:column;align-items:center;gap:4px}
.pa-le-hinh figcaption{font-size:11.5px;color:var(--ink-dim)}
/* bước xem miệng: hai tư thế thì bấm qua lại, mỗi lúc một cặp hình (nhìn thẳng + bên trong) */
.pa-hinh-tu[hidden]{display:none}
.pa-hinh-tu .pa-nut-hang{margin-top:4px}
.pa-hinh-tu .pa-le-phat{flex:0 1 300px}
.pa-hinh-chon{display:flex;gap:8px;margin:0 0 10px}
.pa-hinh-nut{flex:1 1 0;min-width:0;cursor:pointer;padding:10px 10px;border-radius:12px;font:inherit;font-size:13px;line-height:1.45;
  border:1px solid var(--line);background:rgba(255,255,255,.04);color:var(--ink-dim)}
.pa-hinh-nut:hover{background:rgba(255,255,255,.1);color:var(--ink)}
.pa-hinh-nut.dang{border-color:var(--gold);background:rgba(232,195,122,.18);color:var(--ink)}
.pa-hinh-nut.sai.dang{border-color:rgba(226,140,134,.75);background:rgba(226,140,134,.16);color:#f6cbc7}
.pa-le-phat.sai{border-color:rgba(226,140,134,.4);background:rgba(226,140,134,.12);color:#f0bcb8}
.pa-le-to.dai{font-size:34px;line-height:1.2}
.pa-le-bieu{max-width:320px;margin:6px auto 4px}
.pa-vd{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 8px}
.pa-vd-nut{flex:1 1 120px;display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;
  padding:12px 8px;border-radius:14px;border:1px solid rgba(232,195,122,.34);background:rgba(232,195,122,.09);color:var(--ink)}
.pa-vd-nut:hover{background:rgba(232,195,122,.18)}
.pa-vd-nut.keu{border-color:var(--gold);background:rgba(232,195,122,.3)}
.pa-vd-nut b{font-weight:500;font-size:16px}
.pa-vd-nut i{font-style:normal;font-size:11.5px;color:var(--ink-dim)}
.pa-vd-giong{min-height:14px;font-size:10.5px;color:rgba(232,195,122,.8)}
.pa-tu-nut.keu{border-color:var(--gold);background:rgba(232,195,122,.3)}
.pa-lien{padding:0;border:0;background:none;cursor:pointer;font:inherit;color:inherit;text-decoration:underline}
.pa-nguon-nut{display:block;margin:18px auto 0}
.pa-nguon-ds{margin:0 0 8px;padding-left:18px;font-size:11.5px;line-height:1.7;color:var(--ink-dim)}
.pa-nguon-ds span{color:var(--ink)}
.pa-nguon-ds a{color:inherit}
/* phiên âm quốc tế dưới mỗi từ — phông có đủ ký hiệu IPA, không để mỗi ký tự rơi về một phông khác */
.pa-pa{display:block;margin-top:2px;font-style:normal;font-size:12px;letter-spacing:.01em;line-height:1.35;
  color:rgba(232,195,122,.88)!important;font-family:"Charis SIL","Doulos SIL","Gentium Plus","Noto Serif","Times New Roman",serif}
.pa-pa span{color:var(--ink-dim)}
.pa-tu-nut{text-align:center}
.pa-chon-nut .pa-pa{font-size:14px;margin-top:4px}
.pa-do-nghe .pa-pa{display:inline;margin-left:5px}
/* nói thử: máy nghe ra chữ gì */
.pa-nt{border-color:rgba(232,195,122,.38)}
.pa-nt-chon{display:flex;flex-wrap:wrap;gap:7px;margin:10px 0}
.pa-nt-tu{display:flex;flex-direction:column;align-items:center;gap:1px;min-width:64px;cursor:pointer;padding:7px 11px;border-radius:12px;
  border:1px solid rgba(255,255,255,.14);background:transparent;color:var(--ink-dim)}
.pa-nt-tu b{font-weight:500;font-size:14.5px;color:var(--ink)}
.pa-nt-tu .pa-pa{font-size:11px}
.pa-nt-tu.dang{border-color:rgba(232,195,122,.7);background:rgba(232,195,122,.16)}
.pa-nt-mau{display:block;margin:0 auto 10px}
.pa-nt-mic{margin-bottom:6px}
.pa-nt-canh{margin:6px 0 2px;color:#f0c48a}
.pa-nt-kqs:empty{display:none}
.pa-nt-kq{margin:4px 0 10px;padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:rgba(255,255,255,.03)}
.pa-nt-kq b{display:block;font-size:16px;font-weight:500;color:var(--ink)}
.pa-nt-kq .pa-pa{margin:1px 0 4px}
.pa-nt-kq span{display:block;margin-top:3px;font-size:13px;line-height:1.6;color:var(--ink)}
.pa-nt-kq i{display:block;margin-top:5px;font-style:normal;font-size:12px;color:var(--ink-dim)}
.pa-nt-kq.dung{border-color:rgba(150,205,160,.5);background:rgba(150,205,160,.1)}
.pa-nt-kq.dung span{color:#bfe2c6}
.pa-nt-kq.sai{border-color:rgba(226,140,134,.45);background:rgba(226,140,134,.08)}
.pa-nt-kq.sai span{color:#f0bcb8}
.pa-nt-kq.loi{border-style:dashed}
.pa-nt-kq.loi b{font-size:13.5px;color:var(--ink-dim)}
.pa-nt-vao{border-color:rgba(232,195,122,.45);background:rgba(232,195,122,.1);margin-bottom:6px}
/* thẻ thông tin thiên thể trong bầu trời đêm */
.td-the{position:absolute;z-index:6;left:50%;transform:translateX(-50%);
  bottom:calc(96px + var(--safe-b));width:min(92vw,340px);
  padding:14px 16px;border-radius:16px;border:1px solid var(--line);
  background:rgba(8,12,26,.9);backdrop-filter:blur(8px);color:var(--ink)}
.td-the-ten{margin:0 0 4px;font-size:16px;font-weight:500}
.td-the-phu{margin:0 0 10px;font-size:13px;line-height:1.6;color:var(--ink-dim)}
.td-the-thoi{position:absolute;top:8px;right:10px;width:26px;height:26px;border-radius:50%;
  cursor:pointer;border:1px solid rgba(255,255,255,.14);background:rgba(0,0,0,.3);color:var(--ink);font-size:12px}
.td-the-nhin{width:100%;cursor:pointer;padding:9px;border-radius:11px;font-size:13px;
  border:1px solid rgba(232,195,122,.4);background:rgba(232,195,122,.14);color:var(--ink)}
.td-the-nhin:hover{background:rgba(232,195,122,.24)}
.td-ten{cursor:pointer;padding:1px 5px;border-radius:6px;font-size:inherit;font-family:inherit;
  border:1px solid rgba(232,195,122,.35);background:rgba(232,195,122,.12);color:var(--ink)}
.td-ten:hover{background:rgba(232,195,122,.24)}
/* dòng dự báo mưa trong bầu trời đêm */
.td-mua{margin:8px 0 0;padding:9px 11px;border-radius:11px;
  border:1px solid rgba(126,200,227,.26);background:rgba(126,200,227,.08)}
.td-mua p{margin:0}
.td-mua-chinh{font-size:13.5px;color:var(--ink)}
.td-mua-phu{margin-top:3px!important;font-size:12px;line-height:1.55;color:var(--ink-dim)}
.td-mua-nguon{margin-top:4px!important;font-size:10px;line-height:1.4;text-align:right}
.td-mua-nguon a{color:rgba(185,178,204,.45);text-decoration:none}
.td-mua-hong{margin:8px 0 0;font-size:12px;color:rgba(185,178,204,.7)}


/* ---------- xem ngày ---------- */
.xemngay{position:fixed;inset:0;z-index:30;display:none;
  background:radial-gradient(120% 80% at 50% 0%,#2a1b1f 0%,#17121a 55%,#0d0b12 100%)}
.xemngay.hien{display:block}
.xemngay button,.xemngay input,.xemngay select{font-family:inherit}
/* cuộn xuống thì phủ nền lên dải trên cùng (sau nút Cài app, chép link, đóng), thanh thẻ dính ngay dưới */
.xemngay::before{content:'';position:absolute;z-index:4;left:0;right:0;top:0;pointer-events:none;
  height:calc(env(safe-area-inset-top,0px) + 58px);opacity:0;transition:opacity .2s;background:#1d151a}
.xemngay.xn-cuon::before{opacity:1}
.xn-dong{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;
  width:34px;height:34px;border-radius:50%;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.36);color:var(--ink);font-size:14px;line-height:1}
.xn-dong:hover{background:rgba(255,255,255,.12)}
.xn-trong{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 20px calc(env(safe-area-inset-bottom,0px) + 36px)}
.xn-trong>*{max-width:520px;margin-left:auto;margin-right:auto}
.xn-tieude{margin:0 auto 14px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;color:#f0c48a}

.xn-ngay,.xn-khoi{display:block;margin-bottom:22px;padding:16px;border-radius:16px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035)}
.xn-dieu{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.xn-lui,.xn-toi{width:34px;height:34px;border-radius:50%;cursor:pointer;font-size:20px;line-height:1;
  border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(244,239,230,.7)}
.xn-lui:hover,.xn-toi:hover{background:rgba(255,255,255,.08)}
.xn-nhan{margin:0;font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:rgba(244,239,230,.55)}
.xn-nhan-o{flex:1;min-width:0;text-align:center}
.xn-ve{margin:3px 0 0;padding:3px 10px;border-radius:999px;cursor:pointer;font-size:11.5px;
  border:1px solid rgba(232,195,122,.35);background:transparent;color:#f0c48a}
.xn-ve:hover{background:rgba(232,195,122,.12)}
.xn-duong{margin:0 0 3px;text-align:center;font-size:15px;color:rgba(244,239,230,.95)}
.xn-le-hom{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:6px 0 8px}
.xn-le-hom span{padding:3px 10px;border-radius:999px;font-size:12.5px;
  border:1px solid rgba(229,138,122,.4);background:rgba(229,138,122,.08);color:#f0b3a6}
.xn-le-hom span.ram{border-color:rgba(168,200,240,.35);background:rgba(168,200,240,.07);color:#a8c8f0}
.xn-cc{margin:0 0 14px;text-align:center;font-size:12px;line-height:1.6;color:rgba(244,239,230,.55)}

.xn-phan{margin:0 0 12px;padding:14px;border-radius:12px;text-align:center}
.xn-phan.tot{background:rgba(232,195,122,.1);border:1px solid rgba(232,195,122,.32)}
.xn-phan.xau{background:rgba(229,138,122,.08);border:1px solid rgba(229,138,122,.3)}
.xn-loai{margin:0 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px}
.xn-phan.tot .xn-loai{color:#f0c48a}
.xn-phan.xau .xn-loai{color:#e8a092}
.xn-than{margin:0;font-size:13px;line-height:1.6;color:rgba(244,239,230,.8)}
.xn-than span{color:rgba(244,239,230,.45)}
.xn-canh{margin:0 0 10px;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.55;
  background:rgba(229,138,122,.1);color:#f0b3a6}
/* việc vừa tìm có hợp với ngày đang xem không */
.xn-kl{margin:0 0 12px;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.55;border:1px solid}
.xn-kl p{margin:0}
.xn-kl.tot{border-color:rgba(168,216,176,.4);background:rgba(168,216,176,.07)}
.xn-kl.vua{border-color:rgba(232,195,122,.38);background:rgba(232,195,122,.07)}
.xn-kl.xau{border-color:rgba(229,138,122,.38);background:rgba(229,138,122,.07)}
.xn-kl-dau{font-size:14px;color:rgba(244,239,230,.9)}
.xn-kl-dau b{font-weight:500}
.xn-kl.tot .xn-kl-dau b{color:#a8d8b0}
.xn-kl.vua .xn-kl-dau b{color:#f0c48a}
.xn-kl.xau .xn-kl-dau b{color:#e8a092}
.xn-kl .xn-kl-vi{margin-top:3px;color:#a8d8b0}
.xn-kl .xn-kl-canh{margin-top:3px;color:#f0b3a6}
.xn-kl i,.xn-mot i{font-style:normal;opacity:.65}

.xn-truc{margin:14px 0}
.xn-truc-ten{margin:0 0 8px;font-size:14px;color:rgba(244,239,230,.9)}
.xn-nen,.xn-kieng{margin:0 0 6px;font-size:13px;line-height:1.65;color:rgba(244,239,230,.72)}
.xn-nen b{color:#a8d8b0;font-weight:500;margin-right:6px}
.xn-kieng b{color:#e8a092;font-weight:500;margin-right:6px}
.xn-nen i,.xn-kieng i{font-style:normal;color:rgba(244,239,230,.42)}

.xn-tieu{margin:14px 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.5)}
.xn-gio{display:flex;flex-wrap:wrap;gap:6px}
.xn-gio span{padding:5px 10px;border-radius:999px;font-size:12px;
  background:rgba(232,195,122,.08);border:1px solid rgba(232,195,122,.2);color:rgba(244,239,230,.75)}
.xn-gio b{font-weight:500;color:#f0c48a;margin-right:3px}
.xn-gio span.nay{border-color:rgba(240,196,138,.85);background:rgba(232,195,122,.2);color:#fff}
.xn-bay{margin:8px 0 0;font-size:12.5px;line-height:1.55;color:rgba(244,239,230,.7)}
.xn-bay b{font-weight:500;color:#f0c48a}

.xn-hoi-nhan{margin:0 0 10px;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;color:#f0c48a}
.xn-o{display:flex;gap:8px;margin-bottom:12px}
.xn-hoi{flex:1;min-width:0;padding:11px 14px;border-radius:12px;font-size:16px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:var(--ink)}
.xn-hoi:focus{outline:none;border-color:rgba(232,195,122,.55)}
.xn-tim{padding:0 16px;border-radius:12px;cursor:pointer;font-size:14px;white-space:nowrap;
  border:1px solid rgba(232,195,122,.5);background:rgba(232,195,122,.14);color:#f0c48a}
.xn-tim:hover{background:rgba(232,195,122,.22)}
.xn-viec{display:flex;flex-wrap:wrap;gap:6px}
.xn-viec button{padding:6px 11px;border-radius:999px;cursor:pointer;font-size:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(244,239,230,.75)}
.xn-viec button:hover{background:rgba(255,255,255,.1)}
.xn-kq:not(:empty){margin-top:16px}
.xn-rong{margin:0;font-size:13px;line-height:1.6;color:rgba(244,239,230,.6)}
.xn-mot{display:block;width:100%;margin-bottom:10px;padding:12px 14px;border-radius:12px;cursor:pointer;
  text-align:left;color:inherit;font-size:inherit;font-weight:inherit;
  border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.18)}
.xn-mot:hover{border-color:rgba(255,255,255,.24)}
.xn-mot.dau{border-color:rgba(232,195,122,.45);background:rgba(232,195,122,.07)}
.xn-mot-ngay,.xn-mot-am,.xn-mot-vi,.xn-mot-canh,.xn-mot-gio{display:block}
.xn-mot-ngay{margin:0 0 2px;font-size:15px;color:rgba(244,239,230,.95)}
.xn-mot-ngay span{margin-left:6px;font-size:12px;color:rgba(232,195,122,.8)}
.xn-mot-am{margin:0 0 6px;font-size:12px;color:rgba(244,239,230,.5)}
.xn-mot-vi{margin:0 0 4px;font-size:13px;line-height:1.55;color:#a8d8b0}
.xn-mot-canh{margin:0 0 4px;font-size:12px;line-height:1.55;color:#f0b3a6}
.xn-mot-gio{margin:0;font-size:12px;line-height:1.55;color:rgba(244,239,230,.5)}

.xn-tuoi-hoi{margin:0;font-size:14px;color:rgba(244,239,230,.85)}
.xn-tuoi-hoi span{color:rgba(244,239,230,.45);font-size:12px}
.xn-chon-sinh{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.xn-chon-sinh select{flex:1 1 0;min-width:0;padding:10px 4px 10px 10px;border-radius:12px;font-size:16px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:var(--ink);color-scheme:dark}
.xn-chon-sinh select:focus{outline:none;border-color:rgba(232,195,122,.55)}
.xn-luu{flex:1 0 100%;padding:10px 14px;border-radius:12px;cursor:pointer;font-size:14px;white-space:nowrap;
  border:1px solid rgba(232,195,122,.4);background:rgba(232,195,122,.12);color:#f0c48a}
.xn-luu:disabled{opacity:.4;cursor:default}
.xn-loi{margin:8px 0 0;font-size:13px;color:#f0b3a6}
.xn-ghi{margin:8px 0 0;font-size:12px;line-height:1.6;color:rgba(244,239,230,.42)}
.xn-tuoi-co{margin:0 0 8px;font-size:14px;line-height:1.6;color:rgba(244,239,230,.85)}
.xn-tuoi-co b{color:#f0c48a;font-weight:500}
.xn-xoa{margin-top:10px;padding:6px 12px;border-radius:999px;cursor:pointer;font-size:12px;
  border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(244,239,230,.55)}
/* hạn theo năm: Kim lâu, Hoang ốc, Tam tai */
.xn-han{margin:0 0 10px}
.xn-han p{margin:0}
.xn-han-nam{font-size:14px;color:rgba(244,239,230,.9)}
.xn-han-nam b{font-weight:500;color:#f0c48a}
.xn-han-nam span{font-size:12px;color:rgba(244,239,230,.5)}
.xn-han .xn-han-ds{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px}
.xn-han-ds span{padding:3px 9px;border-radius:999px;font-size:12px;border:1px solid}
.xn-han-ds .tot{border-color:rgba(168,216,176,.3);color:rgba(168,216,176,.85)}
.xn-han-ds .xau{border-color:rgba(229,138,122,.45);background:rgba(229,138,122,.08);color:#f0b3a6}
.xn-han-thang{margin:0 0 10px;padding:8px 11px;border-radius:10px;font-size:12.5px;line-height:1.55;
  background:rgba(229,138,122,.08);color:#f0b3a6}
.xn-nguon{margin:4px auto 0;text-align:center;font-size:11px;line-height:1.6;color:rgba(244,239,230,.34)}
.xn-truc-ten span,.xn-cc span{color:rgba(244,239,230,.5);font-size:12px}

/* Xem ngày: bốn thẻ, lịch tháng, ngày lễ, đổi ngày, hướng xuất hành */
.xn-the{display:flex;gap:4px;margin:0 auto 16px;padding:4px;border-radius:14px;background:rgba(47,36,41,.95);
  border:1px solid rgba(255,255,255,.08);position:sticky;top:0;z-index:3;backdrop-filter:blur(8px)}
.xn-the button{flex:1;padding:9px 4px;border-radius:10px;cursor:pointer;font-size:13px;border:0;background:transparent;
  color:rgba(244,239,230,.62)}
.xn-the button.dang{background:rgba(232,195,122,.16);color:#f0c48a}
.xn-huong{margin:0 0 4px;font-size:13px;line-height:1.6;color:rgba(244,239,230,.78)}
.xn-huong b{font-weight:500;color:#a8d8b0}
.xn-huong.xn-tranh b{color:#e8a092}
.xn-huong-ghi{margin:6px 0 0;padding:8px 11px;border-radius:10px;font-size:12.5px;line-height:1.55;
  background:rgba(255,255,255,.045);color:rgba(244,239,230,.72)}
.xn-huong span{color:rgba(244,239,230,.45)}
.xn-huong.xn-trung b{color:#f0c48a}
.xn-ltp-xau{margin:6px 0 0;font-size:12px;line-height:1.55;color:rgba(244,239,230,.5)}
.xn-luoi{display:grid;grid-template-columns:repeat(7,1fr);gap:4px;margin:10px 0 8px}
.xn-thu{text-align:center;font-size:11px;letter-spacing:.06em;color:rgba(244,239,230,.4);padding:2px 0 4px}
.xn-o-ngay{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  aspect-ratio:1/1.05;min-width:0;border-radius:10px;cursor:pointer;border:1px solid transparent;
  background:rgba(255,255,255,.03);color:var(--ink);padding:0}
.xn-o-ngay b{font-size:15px;font-weight:500;line-height:1.1}
.xn-o-ngay i{font-style:normal;font-size:10px;color:rgba(244,239,230,.45)}
.xn-o-ngay.hd{background:rgba(232,195,122,.09)}
.xn-o-ngay.hd b{color:#f0c48a}
.xn-o-ngay.hk b{color:rgba(244,239,230,.7)}
.xn-o-ngay.ram i{color:#a8c8f0}
.xn-o-ngay.le::after{content:'';position:absolute;top:4px;right:5px;width:5px;height:5px;border-radius:50%;background:#e8a092}
.xn-o-ngay.nay{border-color:rgba(232,195,122,.7)}
.xn-o-ngay.hop::before{content:'';position:absolute;left:50%;bottom:3px;width:16px;height:3px;margin-left:-8px;
  border-radius:2px;background:#8fd6a0}
.xn-o-ngay:hover{background:rgba(255,255,255,.1)}
.xn-chu-giai{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin:4px 0 10px;font-size:11px;color:rgba(244,239,230,.5)}
.xn-chu-giai span::before{content:'';display:inline-block;width:8px;height:8px;border-radius:50%;margin-right:5px;vertical-align:0}
.xn-chu-giai .hd::before{background:rgba(232,195,122,.7)}
.xn-chu-giai .hk::before{background:rgba(244,239,230,.25)}
.xn-chu-giai .ram::before{background:#a8c8f0}
.xn-chu-giai .le::before{background:#e8a092}
.xn-chu-giai .hop::before{width:12px;height:3px;border-radius:2px;vertical-align:2px;background:#8fd6a0}
.xn-le-thang p{margin:0 0 4px;font-size:12.5px;color:rgba(244,239,230,.7)}
.xn-le-thang b{font-weight:500;color:#e8a092;margin-right:6px}
.xn-loc{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 12px}
.xn-loc button{padding:6px 12px;border-radius:999px;cursor:pointer;font-size:12.5px;border:1px solid rgba(255,255,255,.14);
  background:transparent;color:rgba(244,239,230,.62)}
.xn-loc button.dang{border-color:rgba(232,195,122,.6);background:rgba(232,195,122,.14);color:#f0c48a}
.xn-mot-le{display:flex;align-items:center;gap:10px;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.06)}
.xn-mot-le-chu{flex:1;min-width:0;padding:0;border:0;background:none;color:inherit;text-align:left;cursor:pointer;
  font-size:inherit;font-weight:inherit}
.xn-mot-le-ten,.xn-mot-le-ngay{display:block}
.xn-mot-le-ngay>span{white-space:nowrap}
.xn-mot-le-ten{margin:0 0 2px;font-size:14px;color:rgba(244,239,230,.95)}
.xn-mot-le.ram .xn-mot-le-ten{color:#a8c8f0}
.xn-mot-le.duong .xn-mot-le-ten{color:rgba(244,239,230,.8)}
.xn-mot-le-ngay{margin:0;font-size:11.5px;line-height:1.5;color:rgba(244,239,230,.45)}
.xn-mot-le-con{flex:0 0 auto;font-size:11.5px;color:rgba(232,195,122,.8);white-space:nowrap}
.xn-them{flex:0 0 auto;padding:6px 9px;border-radius:999px;cursor:pointer;font-size:11.5px;white-space:nowrap;
  border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(244,239,230,.7)}
.xn-them-het{display:flex;flex-direction:column;gap:8px;margin:14px 0 4px}
.xn-them-het button,.xn-them-lap,.xn-xem{padding:10px 14px;border-radius:12px;cursor:pointer;font-size:13.5px;
  border:1px solid rgba(232,195,122,.4);background:rgba(232,195,122,.1);color:#f0c48a}
.xn-cach{margin-top:22px}
.xn-chon-sinh input[type=number]{flex:1 1 0;min-width:0;padding:10px;border-radius:12px;font-size:16px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:var(--ink);color-scheme:dark}
/* "tháng 10", "tháng Chạp" bị cắt khi ba ô chia đều ở màn 375px; nới ô tháng cho "tháng Giêng" vừa cả ở 360px */
.xn-chon-sinh .xn-d-thang,.xn-chon-sinh .xn-a-thang{flex-grow:2.4}
/* màn 320px vẫn hẹp: ô năm xuống dòng riêng, ngày và tháng chia nhau cả dòng trên; nhãn thẻ nhỏ lại cho
   "Đổi ngày" khỏi gãy hai dòng */
@media (max-width:340px){
  .xn-chon-sinh input[type=number]{flex:1 1 100%}
  .xn-the button{padding:9px 2px;font-size:12px}
}
.xn-nhuan{display:none;margin:8px 0 0;font-size:13px;color:rgba(244,239,230,.75)}
.xn-nhuan.co{display:block}
.xn-doi-kq{margin:12px 0 0}
.xn-doi-to{margin:0 0 4px;font-size:18px;color:#f0c48a}
.xn-doi-phu{margin:0 0 10px;font-size:12.5px;line-height:1.6;color:rgba(244,239,230,.6)}
.xn-lap p{margin:0 0 5px;font-size:13.5px;color:rgba(244,239,230,.9)}
.xn-lap span{font-size:12px;color:rgba(244,239,230,.5)}
.xn-ten-su{display:block;width:100%;margin:10px 0 8px;padding:10px 12px;border-radius:12px;font-size:16px;
  border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.25);color:var(--ink)}
.xn-them-lap{width:100%}

/* ---------- thần số học (assets/thanso.js) ----------
   Tím đêm, chữ Cormorant cho con số. Năm thẻ. Hoạt cảnh: khối lọt vào màn hình thì JS gắn lớp dien (thẻ 1, lưới) hay
   vao (các khối khác) rồi gỡ khi diễn xong — lúc không có hai lớp đó là trạng thái cuối, nên máy giảm chuyển động, bài
   kiểm, hay khi bỏ dở giữa chừng vẫn thấy đủ. */
.thanso{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;color:var(--ink);
  background:radial-gradient(130% 70% at 50% -6%,#3d2a6c 0%,#21173f 40%,#110c24 72%,#0a0817 100%)}
.thanso.hien{display:block}
.thanso button,.thanso input,.thanso select{font-family:inherit}
/* nền: bụi sao đứng yên, chín con số trôi chậm lên */
.ts-nen{position:absolute;inset:0;overflow:hidden;pointer-events:none;
  background-image:radial-gradient(1.3px 1.3px at 9% 14%,rgba(255,255,255,.6),transparent),
    radial-gradient(1px 1px at 24% 38%,rgba(255,255,255,.45),transparent),
    radial-gradient(1.2px 1.2px at 41% 9%,rgba(255,255,255,.5),transparent),
    radial-gradient(1px 1px at 63% 27%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.4px 1.4px at 78% 12%,rgba(240,196,138,.6),transparent),
    radial-gradient(1px 1px at 88% 44%,rgba(255,255,255,.4),transparent),
    radial-gradient(1.2px 1.2px at 14% 66%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 52% 58%,rgba(215,195,245,.5),transparent),
    radial-gradient(1.3px 1.3px at 71% 79%,rgba(255,255,255,.35),transparent),
    radial-gradient(1px 1px at 33% 88%,rgba(255,255,255,.3),transparent),
    radial-gradient(1.2px 1.2px at 93% 91%,rgba(215,195,245,.45),transparent)}
.ts-nen span{position:absolute;bottom:-14%;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;line-height:1;
  color:rgba(215,195,245,.075);font-variant-numeric:lining-nums;animation:ts-troi linear infinite}
@keyframes ts-troi{from{transform:translateY(0) rotate(-8deg)}to{transform:translateY(-135vh) rotate(10deg)}}
/* cuộn xuống thì dải trên cùng (sau nút Cài app, chép link, đóng) phủ nền, thanh thẻ dính ngay dưới */
.ts-mui{position:absolute;z-index:6;left:0;right:0;top:0;height:calc(env(safe-area-inset-top,0px) + 58px);
  padding:env(safe-area-inset-top,0px) 0 0 18px;display:flex;align-items:center;pointer-events:none;opacity:0;transition:opacity .25s;
  background:rgba(23,16,45,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid rgba(215,195,245,.08)}
.thanso.ts-cuon-xuong .ts-mui{opacity:1}
.ts-mui span{font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:600;color:#e6dafa}
.ts-cuon{position:absolute;inset:0;overflow-x:hidden;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 16px calc(env(safe-area-inset-bottom,0px) + 40px)}
.ts-giua-trang{position:relative;max-width:560px;margin:0 auto}
.ts-giua{text-align:center}
.ts-dau{text-align:center;margin:0 0 12px}
.ts-tieude{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:36px;line-height:1.05;
  background:linear-gradient(100deg,#f6eeff 10%,#cbb0f6 55%,#f0c48a 95%);-webkit-background-clip:text;background-clip:text;color:transparent}
.ts-phu{margin:5px 0 0;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(215,195,245,.5)}
.thanso.ts-co-kq .ts-tieude{font-size:30px}
.thanso.ts-co-kq .ts-dau{margin-bottom:8px}

/* trang nhập ngày sinh */
.ts-vong-so{position:relative;width:min(56vw,224px);aspect-ratio:1;margin:0 auto 10px}
.ts-vong-so svg{display:block;width:100%;height:100%;overflow:visible;animation:ts-quay 90s linear infinite}
.ts-vong-so .v1{fill:none;stroke:rgba(215,195,245,.3);stroke-width:.7;stroke-dasharray:1.5 4}
.ts-vong-so .v2{fill:rgba(185,154,232,.05);stroke:rgba(215,195,245,.2);stroke-width:.7}
.ts-vong-so .sao{fill:none;stroke:rgba(240,196,138,.45);stroke-width:.8;stroke-linejoin:round;transition:stroke .3s,stroke-width .3s}
.ts-vong-so text{font-family:"Cormorant Garamond",Georgia,serif;font-size:16px;font-weight:600;fill:#d7c3f5;text-anchor:middle;
  font-variant-numeric:lining-nums;transition:fill .3s}
.ts-vong-tam{position:absolute;inset:0;display:grid;place-items:center;font-size:26px;color:#f0c48a;
  text-shadow:0 0 18px rgba(240,196,138,.9);animation:ts-tho 4.5s ease-in-out infinite}
.thanso.ts-giai-ma .ts-vong-so svg{animation:ts-quay .9s cubic-bezier(.6,0,.4,1) infinite}
.thanso.ts-giai-ma .ts-vong-so text{fill:#fff}
.thanso.ts-giai-ma .ts-vong-so .sao{stroke:#f0c48a;stroke-width:1.5}
.thanso.ts-giai-ma .ts-vong-tam{animation:ts-bung .7s ease-in both}
@keyframes ts-quay{to{transform:rotate(360deg)}}
@keyframes ts-tho{50%{transform:scale(1.18);opacity:.75}}
@keyframes ts-bung{to{transform:scale(3.2);opacity:0}}
.ts-moi{margin:0 0 16px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;line-height:1.3;color:#f1e8ff}
.ts-the-nhap{padding:18px 16px 16px;border-radius:22px;background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.03));
  border:1px solid rgba(215,195,245,.18);box-shadow:0 18px 44px rgba(0,0,0,.38),inset 0 1px 0 rgba(255,255,255,.07)}
.ts-hoi{margin:0 0 12px;font-size:14px;color:rgba(244,239,230,.9)}
.ts-hoi span{font-size:12px;color:rgba(244,239,230,.45)}
.ts-ba-o{display:grid;grid-template-columns:.9fr 1fr 1.3fr;gap:8px}
.ts-chon{display:flex;flex-direction:column;gap:6px;min-width:0;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(215,195,245,.6)}
.ts-chon select{width:100%;min-width:0;padding:12px 24px 12px 12px;border-radius:14px;font-size:18px;font-variant-numeric:lining-nums;
  -webkit-appearance:none;appearance:none;cursor:pointer;color:var(--ink);color-scheme:dark;border:1px solid rgba(215,195,245,.24);
  background:rgba(10,7,22,.55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23d7c3f5' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 9px center}
.ts-chon select:focus{outline:none;border-color:rgba(215,195,245,.75);box-shadow:0 0 0 3px rgba(185,154,232,.22)}
.ts-nut-chinh{display:block;width:100%;margin:14px 0 0;padding:14px 16px;border:0;border-radius:16px;cursor:pointer;
  font-size:15.5px;font-weight:500;letter-spacing:.02em;color:#1d1236;
  background:linear-gradient(100deg,#efe2ff 0%,#c8acf5 55%,#f0c48a 100%);box-shadow:0 10px 28px rgba(185,154,232,.35);
  transition:transform .15s,filter .15s,opacity .2s,box-shadow .2s}
.ts-nut-chinh:hover{filter:brightness(1.07)}
.ts-nut-chinh:active{transform:scale(.98)}
.ts-nut-chinh:disabled{opacity:.32;cursor:default;box-shadow:none;filter:saturate(.4)}
.thanso button:focus-visible{outline:2px solid #f0c48a;outline-offset:2px}
.ts-nut-phu{display:block;margin:10px auto 0;padding:6px 10px;border:0;background:none;cursor:pointer;font-size:13px;
  color:rgba(215,195,245,.75);text-decoration:underline;text-underline-offset:3px}
.ts-loi{margin:10px 0 0;font-size:13px;color:#f0b3a6}
.ts-ghi{margin:10px 0 0;font-size:12px;line-height:1.6;color:rgba(244,239,230,.45)}
.ts-se-thay{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:8px}
.ts-se-thay li{display:flex;align-items:center;gap:8px;padding:5px 12px 5px 5px;border-radius:999px;font-size:12.5px;
  color:rgba(244,239,230,.72);background:rgba(255,255,255,.035);border:1px solid rgba(215,195,245,.12)}
.ts-se-thay b{width:26px;height:26px;display:grid;place-items:center;border-radius:50%;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:15px;font-weight:600;color:#efe6ff;background:rgba(185,154,232,.22);font-variant-numeric:lining-nums}
.ts-se-thay b.luoi{background:rgba(185,154,232,.22) radial-gradient(circle,#d7c3f5 1.2px,transparent 1.6px) 4px 4px/6px 6px}

/* kết quả: ngày sinh, thanh năm thẻ */
.ts-sinh{display:flex;align-items:center;justify-content:center;gap:10px;margin:0 0 12px;font-size:13px;color:rgba(244,239,230,.6)}
.ts-sinh b{color:#f1e8ff;font-weight:500}
.ts-doi{padding:5px 12px;border-radius:999px;cursor:pointer;font-size:12px;border:1px solid rgba(215,195,245,.28);background:rgba(255,255,255,.04);color:#d7c3f5}
.ts-doi:hover{background:rgba(215,195,245,.1)}
/* top 0: chỗ dính tính từ mép trong phần đệm của khung cuộn — tức ngay dưới hàng nút */
.ts-the{position:sticky;z-index:7;top:0;display:grid;grid-template-columns:repeat(5,1fr);
  margin:0 0 16px;padding:4px;border-radius:18px;background:rgba(24,16,48,.88);border:1px solid rgba(215,195,245,.15);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 26px rgba(0,0,0,.35)}
.ts-the-nut{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:2px;min-width:0;padding:6px 2px 5px;
  border:0;border-radius:14px;background:none;cursor:pointer;font-size:11.5px;white-space:nowrap;color:rgba(244,239,230,.55);transition:color .25s}
.ts-the-nut.dang{color:#fff}
.ts-the-so{display:block;height:22px;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;line-height:22px;font-weight:600;
  color:rgba(215,195,245,.75);font-variant-numeric:lining-nums;transition:color .25s,transform .25s}
.ts-the-chu{font-size:17px}
.ts-the-nut.dang .ts-the-so{color:#f0c48a;transform:scale(1.08)}
.ts-the-ve{display:block;width:22px;height:22px;fill:rgba(215,195,245,.55);transition:fill .25s}
.ts-the-ve circle{fill:rgba(215,195,245,.3)}
.ts-the-ve circle.co{fill:rgba(215,195,245,.85)}
.ts-the-nut.dang .ts-the-ve,.ts-the-nut.dang .ts-the-ve circle.co{fill:#f0c48a}
.ts-the-vach{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 8px) / 5);border-radius:14px;
  background:linear-gradient(160deg,rgba(185,154,232,.42),rgba(110,80,190,.25));box-shadow:inset 0 0 0 1px rgba(215,195,245,.32),0 4px 18px rgba(127,99,201,.4);
  transform:translateX(calc(var(--i,0) * 100%));transition:transform .4s cubic-bezier(.3,1.25,.5,1)}
.ts-trang{animation:ts-len .4s ease both}
@keyframes ts-len{from{opacity:0;transform:translateY(10px)}}
.ts-khoi{position:relative;margin:0 0 14px;padding:18px 16px;border-radius:22px;
  background:linear-gradient(180deg,rgba(255,255,255,.065),rgba(255,255,255,.025));border:1px solid rgba(215,195,245,.13);
  box-shadow:0 16px 36px rgba(0,0,0,.26),inset 0 1px 0 rgba(255,255,255,.05)}
.ts-nhan{margin:0 0 10px;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(215,195,245,.62)}
.ts-lai{position:absolute;z-index:2;top:12px;right:12px;width:32px;height:32px;border-radius:50%;cursor:pointer;font-size:16px;line-height:1;
  border:1px solid rgba(215,195,245,.2);background:rgba(255,255,255,.04);color:rgba(215,195,245,.8);transition:transform .3s,background .2s}
.ts-lai:hover{background:rgba(215,195,245,.12);transform:rotate(-90deg)}
.ts-dan-giai{margin:-4px 0 10px;font-size:13px;line-height:1.6;color:rgba(244,239,230,.68)}
.ts-dan-giai b{color:#f1e8ff;font-weight:500}
.ts-rong{margin:0;font-size:13px;line-height:1.6;color:rgba(244,239,230,.6)}
.ts-dan,.ts-rut{transition:opacity .5s ease,transform .5s ease}
.ts-khoi.dien .ts-dan:not(.ra),.ts-khoi.dien .ts-rut:not(.ra){opacity:0;transform:translateY(10px)}

/* thẻ 1: dải chữ số, tổng, vầng sáng quanh số chủ đạo */
.ts-chuoi{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:5px;margin:4px 0}
.ts-nhom-so{display:flex;gap:4px}
.ts-xg{font-size:18px;color:rgba(215,195,245,.35)}
.ts-cs{display:grid;place-items:center;min-width:30px;height:40px;padding:0 4px;border-radius:11px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:600;font-variant-numeric:lining-nums;
  color:rgba(244,239,230,.45);background:rgba(255,255,255,.04);border:1px solid rgba(215,195,245,.12);
  transition:color .3s,background .3s,border-color .3s,box-shadow .3s,transform .3s,opacity .3s}
.ts-cs.sang{color:#fff;background:rgba(185,154,232,.24);border-color:rgba(215,195,245,.55);box-shadow:0 0 14px rgba(185,154,232,.4)}
.ts-cs.tat{opacity:.32}
.ts-khoi.dien .ts-cs.sang{transform:translateY(-3px)}
.ts-cs.di{opacity:.25;transform:scale(.9);box-shadow:none}
.ts-cs.roi{animation:ts-roi .75s ease-in forwards}
@keyframes ts-roi{to{transform:translateY(30px) rotate(28deg);opacity:0}}
.ts-chuoi.nho .ts-cs{min-width:26px;height:34px;font-size:20px}
.ts-tong{margin:12px 0 0;text-align:center;font-size:15px;color:rgba(244,239,230,.55)}
.ts-tong b{display:inline-block;min-width:1.3em;font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:600;line-height:1;
  color:#f1e8ff;font-variant-numeric:lining-nums}
.ts-tong b.nhay{animation:ts-bat .32s ease}
@keyframes ts-bat{40%{transform:scale(1.35);color:#f0c48a}}
.ts-rut{margin:4px 0 0;text-align:center;font-size:14.5px;color:rgba(244,239,230,.7);font-variant-numeric:lining-nums}
.ts-hao{position:relative;width:210px;height:210px;margin:6px auto 0;display:grid;place-items:center;
  transition:opacity .7s ease,transform .9s cubic-bezier(.2,1.45,.4,1)}
.ts-khoi.dien .ts-hao:not(.ra){opacity:0;transform:scale(.55)}
.ts-hao::before{content:'';position:absolute;inset:16%;border-radius:50%;
  background:radial-gradient(circle,rgba(200,170,250,.55),rgba(127,99,201,.16) 55%,transparent 72%);animation:ts-tho 5s ease-in-out infinite}
.ts-hao-ve{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:ts-quay 80s linear infinite}
.ts-hao-ve .v1{fill:none;stroke:rgba(215,195,245,.32);stroke-width:.8}
.ts-hao-ve .v2{fill:none;stroke:rgba(240,196,138,.45);stroke-width:1.2;stroke-dasharray:1 5;stroke-linecap:round}
.ts-hao-ve text{font-family:"Cormorant Garamond",Georgia,serif;font-size:13px;font-weight:600;fill:rgba(215,195,245,.55);text-anchor:middle}
.ts-so-lon{position:relative;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:96px;line-height:1;font-variant-numeric:lining-nums;
  background:linear-gradient(180deg,#fff 20%,#dccafb 60%,#b99ae8);-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 0 22px rgba(185,154,232,.6))}
.ts-so-lon.dai{font-size:68px}
.ts-ten-so{margin:2px 0 0;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;font-weight:600;color:#f6efff}
.ts-tu-khoa{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:10px 0 14px}
.ts-tu-khoa span{padding:4px 11px;border-radius:999px;font-size:12.5px;color:#e6dafa;background:rgba(185,154,232,.14);border:1px solid rgba(215,195,245,.25)}
.ts-hai{display:grid;gap:10px}
.ts-manh,.ts-yeu{padding:12px 14px;border-radius:16px;font-size:13.5px;line-height:1.6;color:rgba(244,239,230,.85)}
.ts-manh{background:rgba(168,216,176,.07);border:1px solid rgba(168,216,176,.24)}
.ts-yeu{background:rgba(232,180,146,.07);border:1px solid rgba(232,180,146,.24)}
.ts-manh b,.ts-yeu b{display:block;margin:0 0 4px;font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;font-weight:500}
.ts-manh b{color:#a8d8b0}
.ts-yeu b{color:#e8b492}
.ts-manh p,.ts-yeu p{margin:0}
/* thẻ 1: con số ngày sinh — ngày đi qua mũi tên thành quả cầu vàng */
.ts-ns-dau{display:flex;align-items:center;justify-content:center;gap:12px;margin:4px 0 4px}
.ts-ns-ngay{display:flex;flex-direction:column;align-items:center;min-width:64px;padding:8px 12px;border-radius:16px;
  background:rgba(255,255,255,.05);border:1px solid rgba(215,195,245,.25)}
.ts-ns-ngay i{font-style:normal;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(215,195,245,.6)}
.ts-ns-ngay b{font-family:"Cormorant Garamond",Georgia,serif;font-size:30px;font-weight:600;line-height:1.05;color:#fff;font-variant-numeric:lining-nums}
.ts-ns-mui{position:relative;width:46px;height:2px;border-radius:2px;background:linear-gradient(90deg,rgba(215,195,245,.25),#f0c48a);transform-origin:left}
.ts-ns-mui::after{content:'';position:absolute;right:-2px;top:-4px;border:5px solid transparent;border-left:7px solid #f0c48a;border-right:0}
.ts-ns-so{width:70px;height:70px;display:grid;place-items:center;border-radius:50%;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:34px;font-weight:600;color:#fff;font-variant-numeric:lining-nums;
  background:radial-gradient(circle at 35% 30%,#f8dba8,#a8742f);box-shadow:0 0 26px rgba(240,196,138,.45)}
.ts-ns-so.dai{font-size:24px}
.ts-ns-buoc{margin:6px 0 10px;text-align:center;font-size:12.5px;color:rgba(244,239,230,.55);font-variant-numeric:lining-nums}
.ts-ns-xu{margin:0;font-size:14px;line-height:1.65;color:rgba(244,239,230,.88)}
.ts-ns-y{margin:8px 0 0;padding:10px 12px;border-radius:14px;font-size:13.5px;line-height:1.6;color:rgba(244,239,230,.82);
  background:rgba(232,180,146,.07);border:1px solid rgba(232,180,146,.22)}
.ts-ns-y b{display:block;margin:0 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;font-weight:500;color:#e8b492}
.ts-ns-trung{margin:10px 0 0}
.ts-khoi.vao .ts-ns-ngay{animation:ts-truot .5s ease-out both}
.ts-khoi.vao .ts-ns-mui{animation:ts-keo .45s .35s ease-out both}
.ts-khoi.vao .ts-ns-so{animation:ts-no .55s .7s cubic-bezier(.3,1.5,.5,1) both}
.ts-khoi.vao .ts-ns-buoc,.ts-khoi.vao .ts-ns-xu,.ts-khoi.vao .ts-ns-y{animation:ts-len .5s 1s ease both}
@keyframes ts-truot{from{opacity:0;transform:translateX(-24px)}}
@keyframes ts-keo{from{transform:scaleX(0)}}
.ts-cot{display:grid;grid-template-columns:repeat(11,1fr);align-items:end;gap:4px;height:130px;margin:8px 0 6px}
.ts-cot span{display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:5px;height:100%;min-width:0}
.ts-cot i{display:block;width:100%;max-width:22px;height:calc(var(--h) * 88px);min-height:3px;border-radius:6px 6px 2px 2px;transform-origin:bottom;
  background:linear-gradient(180deg,rgba(215,195,245,.5),rgba(127,99,201,.22))}
.ts-cot b{font-size:11px;font-weight:500;color:rgba(244,239,230,.5);font-variant-numeric:lining-nums}
.ts-cot em{font-style:normal;font-size:11px;font-weight:500;color:#f0c48a;white-space:nowrap}
.ts-cot .nay i{background:linear-gradient(180deg,#f6d39c,#b98a4e);box-shadow:0 0 16px rgba(240,196,138,.55)}
.ts-cot .nay b{color:#f0c48a}
.ts-khoi.vao .ts-cot i{animation:ts-moc .9s cubic-bezier(.2,.9,.3,1.15) both;animation-delay:calc(var(--j) * 55ms)}
.ts-khoi.vao .ts-cot em{animation:ts-hien .5s .9s both}
@keyframes ts-moc{from{transform:scaleY(0)}}
@keyframes ts-hien{from{opacity:0}}
.ts-hiem-cau{margin:6px 0 0;font-size:13.5px;line-height:1.6;color:rgba(244,239,230,.8)}
.ts-hiem-cau b{color:#f0c48a;font-weight:500}
.ts-tong-ra{margin:8px 0 0;font-size:13px;color:rgba(244,239,230,.6);font-variant-numeric:lining-nums}
.ts-tong-ra b{color:#f0c48a;font-weight:600}
.ts-tong-ra span{color:rgba(244,239,230,.42)}
.ts-cach{margin:12px 0 0;font-size:13px;line-height:1.6;color:rgba(244,239,230,.72)}
.ts-cach summary{display:inline-flex;align-items:center;gap:7px;cursor:pointer;list-style:none;font-size:13px;color:#d7c3f5}
.ts-cach summary::-webkit-details-marker{display:none}
.ts-cach summary::before{content:'+';display:inline-grid;place-items:center;width:18px;height:18px;border-radius:50%;
  border:1px solid rgba(215,195,245,.4);font-size:13px;line-height:1}
.ts-cach[open] summary::before{content:'−'}
.ts-cach p{margin:8px 0 0}
details.ts-khoi.ts-cach{padding:14px 16px}
.ts-canh{padding:9px 12px;border-radius:12px;font-size:13px;line-height:1.6;background:rgba(232,180,146,.08);border:1px solid rgba(232,180,146,.22);color:#f2c9ad}

/* thẻ 2 (và biểu đồ tên, tổng hợp): lưới 3×3, mũi tên vẽ phía sau ô */
.ts-bang{display:grid;grid-template-columns:18px minmax(0,1fr);gap:6px;max-width:370px;margin:12px auto 0}
.ts-tang{display:grid;grid-template-rows:repeat(3,1fr)}
.ts-tang span{display:grid;place-items:center;writing-mode:vertical-rl;transform:rotate(180deg);font-size:10px;letter-spacing:.16em;
  text-transform:uppercase;white-space:nowrap;color:rgba(215,195,245,.5)}
.ts-luoi{position:relative;display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(3,1fr);aspect-ratio:1}
.ts-mt-ve{position:absolute;inset:0;z-index:0;width:100%;height:100%;overflow:visible;pointer-events:none}
.ts-o{position:relative;z-index:1;min-width:0;margin:5px;display:grid;place-items:center;padding:4px;border-radius:16px;cursor:pointer;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;font-weight:600;line-height:1;font-variant-numeric:lining-nums;
  color:rgba(215,195,245,.2);background:rgba(12,8,26,.55);border:1px dashed rgba(215,195,245,.16);
  transition:background .3s,border-color .3s,box-shadow .3s,color .3s,transform .25s}
.ts-o.co{color:#fff;border-style:solid;border-color:rgba(215,195,245,.45);
  background:linear-gradient(160deg,rgba(150,120,225,.42),rgba(70,48,140,.4));box-shadow:0 0 20px rgba(185,154,232,.22),inset 0 1px 0 rgba(255,255,255,.12)}
.ts-o.nhieu{font-size:22px}
.ts-o-so{max-width:100%;word-break:break-all;text-align:center;letter-spacing:.02em}
.ts-o.chon{transform:scale(1.05);border-color:#f0c48a;box-shadow:0 0 0 2px rgba(240,196,138,.45),0 0 24px rgba(240,196,138,.35)}
.ts-o.nhay{animation:ts-nhay .5s cubic-bezier(.3,1.6,.5,1)}
@keyframes ts-nhay{30%{transform:scale(1.16)}}
.ts-o i{font-style:normal}
.ts-o .n{color:#fff}
.ts-o .t{color:#f6cf8f;text-shadow:0 0 10px rgba(240,196,138,.6)}
.ts-o.bu{border-color:rgba(240,196,138,.7);box-shadow:0 0 18px rgba(240,196,138,.3)}
.ts-o.bu::after{content:'bù';position:absolute;top:4px;right:7px;font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:9.5px;font-weight:500;color:#f0c48a}
.ts-khoi.vao .ts-o .t{animation:ts-chop 1s .3s ease both}
@keyframes ts-chop{0%{opacity:0}45%{opacity:1;text-shadow:0 0 18px #f0c48a}}
.ts-mt-g{transition:opacity .3s}
.ts-mt-net{fill:none;stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:0}
.ts-mt-g.day .ts-mt-net{stroke:rgba(168,216,176,.8);filter:drop-shadow(0 0 7px rgba(168,216,176,.75))}
.ts-mt-g.day .ts-mt-dau{fill:#bfe6c6}
.ts-mt-g.trong .ts-mt-net{stroke:rgba(232,180,146,.85);stroke-width:7;stroke-dasharray:.035 .04}
.ts-mt-g.trong .ts-mt-dau{fill:rgba(232,180,146,.9)}
.ts-bang.co-chon .ts-mt-g:not(.sang){opacity:.12}
.ts-mt-g.sang .ts-mt-net{stroke-width:13}
.ts-khoi.dien .ts-bang.chua-ve .ts-mt-g{opacity:0}
.ts-bang.ve .ts-mt-g.day .ts-mt-net{animation:ts-ve .75s ease-out both;animation-delay:calc(var(--i) * .3s)}
.ts-bang.ve .ts-mt-g.trong .ts-mt-net,.ts-bang.ve .ts-mt-dau{animation:ts-hien .5s ease both;animation-delay:calc(var(--i) * .3s + .45s)}
@keyframes ts-ve{from{stroke-dashoffset:1}}
.ts-bay{position:fixed;z-index:20;display:grid;place-items:center;pointer-events:none;border-radius:11px;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:23px;font-weight:600;color:#fff;font-variant-numeric:lining-nums;
  background:rgba(170,135,240,.6);box-shadow:0 0 22px rgba(215,195,245,.85)}
.ts-chon-o{margin:12px 0 0;min-height:48px}
.ts-goi-y{margin:0;padding:10px 0 0;text-align:center;font-size:12.5px;line-height:1.5;color:rgba(215,195,245,.55)}
.ts-y-chon{display:flex;gap:12px;align-items:flex-start;padding:12px 14px;border-radius:16px;
  background:rgba(240,196,138,.07);border:1px solid rgba(240,196,138,.28);animation:ts-len .3s ease both}
.ts-y-chon b{flex:0 0 auto;min-width:40px;font-family:"Cormorant Garamond",Georgia,serif;font-size:28px;line-height:1;font-weight:600;color:#f0c48a;font-variant-numeric:lining-nums}
.ts-y-chon.trong b{color:rgba(240,196,138,.45)}
.ts-y-chon p{margin:0;font-size:13.5px;line-height:1.55;color:rgba(244,239,230,.86)}
.ts-y-chon p span{display:block;margin:0 0 2px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:rgba(240,196,138,.85)}
.ts-ds-mt{display:grid;gap:8px;margin:14px 0 0}
.ts-ds-mt>.ts-nhan{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:4px 0 2px}
.ts-chu-giai-mt{display:inline-flex;align-items:center;gap:6px;letter-spacing:.02em;text-transform:none;font-size:11px;color:rgba(244,239,230,.45)}
.ts-chu-giai-mt i{display:inline-block;width:18px;margin-left:4px;border-top:3px solid #a8d8b0;border-radius:2px}
.ts-chu-giai-mt i.trong{border-top-style:dashed;border-top-color:#e8b492}
.ts-mt{display:flex;gap:12px;align-items:flex-start;width:100%;padding:11px 12px;border-radius:16px;cursor:pointer;text-align:left;
  color:inherit;font-size:13px;line-height:1.55;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.08);
  transition:border-color .2s,background .2s,transform .15s,opacity .5s}
.ts-mt:active{transform:scale(.99)}
.ts-mt.day{border-color:rgba(168,216,176,.22)}
.ts-mt.trong{border-color:rgba(232,180,146,.22)}
.ts-mt.chon{background:rgba(255,255,255,.07)}
.ts-mt.day.chon{border-color:rgba(168,216,176,.75)}
.ts-mt.trong.chon{border-color:rgba(232,180,146,.75)}
.ts-mt b{font-weight:500;font-size:14.5px}
.ts-mt.day b{color:#a8d8b0}
.ts-mt.trong b{color:#e8b492}
.ts-mt i{font-style:normal;margin-left:6px;font-size:11.5px;color:rgba(244,239,230,.45)}
.ts-mt-y{display:block;margin-top:2px;color:rgba(244,239,230,.8)}
.ts-mt-icon{flex:0 0 34px;width:34px;height:34px;margin-top:2px}
.ts-mt-icon circle{fill:rgba(244,239,230,.22)}
.ts-mt-icon line{stroke-width:2.4;stroke-linecap:round}
.ts-mt-icon.day line{stroke:#a8d8b0}
.ts-mt-icon.day .ba{fill:#a8d8b0}
.ts-mt-icon.trong line{stroke:#e8b492;stroke-dasharray:2.2 2.2}
.ts-mt-icon.trong .ba{fill:#21173f;stroke:#e8b492;stroke-width:1.2}

/* thẻ 3: vòng chín năm */
.ts-vong{position:relative;width:min(100%,340px);aspect-ratio:1;margin:0 auto}
.ts-vong svg{display:block;width:100%;height:100%;overflow:visible}
.ts-vong .ray{fill:none;stroke:rgba(215,195,245,.14);stroke-width:3}
.ts-vong .tien{fill:none;stroke:url(#ts-mau-vong);stroke-width:4;stroke-linecap:round;stroke-dasharray:1;animation:ts-ve .7s ease-out both}
.ts-vn{cursor:pointer;transform-box:fill-box;transform-origin:center}
.ts-vn .hon{fill:#170f30;stroke:rgba(215,195,245,.35);stroke-width:1.5;transition:fill .3s,stroke .3s}
.ts-vn text{font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;font-weight:600;text-anchor:middle;fill:rgba(244,239,230,.75);font-variant-numeric:lining-nums}
.ts-vn text.nam{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:10.5px;font-weight:400;fill:rgba(244,239,230,.42)}
.ts-vn.qua .hon{fill:rgba(127,99,201,.45);stroke:rgba(215,195,245,.6)}
.ts-vn.chon .hon{fill:rgba(185,154,232,.62);stroke:#efe6ff;stroke-width:2}
.ts-vn.chon text{fill:#fff}
.ts-vn.chon text.nam{fill:#efe6ff;font-weight:500}
.ts-vn.nay .hon{stroke:#f0c48a;stroke-width:2.5}
.ts-vn.nay text.nam{fill:#f0c48a;font-weight:500}
.ts-vn:hover .hon{stroke:#efe6ff}
.ts-vn .xung{fill:none;stroke:#f0c48a;stroke-width:2;transform-box:fill-box;transform-origin:center;animation:ts-xung 2.4s ease-out infinite}
@keyframes ts-xung{from{transform:scale(1);opacity:.8}to{transform:scale(1.9);opacity:0}}
.ts-vong-giua{position:absolute;inset:27%;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;
  pointer-events:none;animation:ts-len .4s ease both}
.ts-vg-nam{font-family:"Cormorant Garamond",Georgia,serif;font-size:46px;font-weight:600;line-height:1;color:#fff;font-variant-numeric:lining-nums}
.ts-vg-so{margin:6px 0 0;font-size:12px;color:rgba(244,239,230,.62)}
.ts-vg-so b{font-size:15px;font-weight:600;color:#f0c48a}
.ts-vg-ten{margin:2px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:600;color:#efe6ff}
.ts-khoi.vao .ts-vn{animation:ts-no .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * 90ms)}
.ts-khoi.vao .tien{animation:ts-ve 1.1s .85s ease-out both}
.ts-khoi.vao .ts-vong-giua{animation:ts-len .6s 1.5s ease both}
@keyframes ts-no{from{opacity:0;transform:scale(.3)}}
.ts-nam-dk{display:flex;align-items:center;justify-content:space-between;gap:8px;margin:6px 0 0}
.ts-nam-dk button{padding:7px 12px;border-radius:999px;cursor:pointer;font-size:13px;font-variant-numeric:lining-nums;
  border:1px solid rgba(215,195,245,.22);background:rgba(255,255,255,.04);color:#e6dafa}
.ts-nam-dk button:hover{background:rgba(215,195,245,.1)}
.ts-nam-dk button.ve{border-color:rgba(240,196,138,.5);color:#f0c48a}
.ts-nam-dk span{font-size:12px;color:rgba(240,196,138,.8)}
.ts-y-nam{animation:ts-len .35s ease both}
.ts-y-nam-ten{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:600;color:#f6efff}
.ts-y-nam-y{margin:6px 0 0;font-size:14px;line-height:1.65;color:rgba(244,239,230,.85)}
.ts-buoc{margin:8px 0 0;font-size:12px;line-height:1.6;color:rgba(244,239,230,.45);word-break:break-word;font-variant-numeric:lining-nums}
.ts-buoc span{color:rgba(244,239,230,.35)}

/* thẻ 4: kim tự tháp, dãy núi trên đường đời */
.ts-thap{display:block;width:100%;max-width:400px;margin:0 auto;overflow:visible}
.ts-thap .net{stroke:rgba(215,195,245,.4);stroke-width:2;stroke-linecap:round;stroke-dasharray:1}
.ts-thap .nut{transform-box:fill-box;transform-origin:center}
.ts-thap .nut circle{fill:#1a1236;stroke:rgba(215,195,245,.55);stroke-width:1.6}
.ts-thap .nut text{font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:600;text-anchor:middle;fill:#fff;font-variant-numeric:lining-nums}
.ts-thap .chan circle{fill:rgba(255,255,255,.05);stroke:rgba(244,239,230,.32)}
.ts-thap .chan text{font-size:20px;fill:rgba(244,239,230,.85)}
.ts-thap .nut text.nho{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:10.5px;font-weight:400;fill:rgba(244,239,230,.5)}
.ts-thap .nut.nay circle{fill:rgba(240,196,138,.25);stroke:#f0c48a;stroke-width:2.5}
.ts-thap .nut.nay text.nho{fill:#f0c48a}
.ts-khoi.vao .ts-thap .net{animation:ts-ve .55s ease-out both;animation-delay:var(--t)}
.ts-khoi.vao .ts-thap .nut{animation:ts-no .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:var(--t)}
.ts-nui{display:block;width:100%;overflow:visible}
.ts-nui .nen{fill:url(#ts-mau-nui)}
.ts-nui .song{fill:none;stroke:rgba(215,195,245,.75);stroke-width:1.8;stroke-linejoin:round;stroke-dasharray:1}
.ts-nui .truc{stroke:rgba(244,239,230,.18);stroke-width:1}
.ts-nui .dinh{transform-box:fill-box;transform-origin:center}
.ts-nui .dinh circle{fill:#1b1338;stroke:#d7c3f5;stroke-width:1.5}
.ts-nui .dinh text{font-family:"Cormorant Garamond",Georgia,serif;font-size:15px;font-weight:600;text-anchor:middle;fill:#fff;font-variant-numeric:lining-nums}
.ts-nui .dinh.nay circle{fill:rgba(240,196,138,.3);stroke:#f0c48a;stroke-width:2}
.ts-nui text.tuoi{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:10.5px;text-anchor:middle;fill:rgba(244,239,230,.55)}
.ts-nui text.tuoi.nay{fill:#f0c48a;font-weight:500}
.ts-nui .ban{transform:translateX(var(--x))}
.ts-nui .ban line{stroke:#f0c48a;stroke-width:1.5;stroke-dasharray:3 3}
.ts-nui .ban circle{fill:#f0c48a}
.ts-nui .ban text{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:11px;font-weight:500;fill:#f0c48a}
.ts-khoi.vao .ts-nui .song{animation:ts-ve 1.4s ease-out both}
.ts-khoi.vao .ts-nui .nen{animation:ts-hien 1s .6s both}
.ts-khoi.vao .ts-nui .dinh{animation:ts-no .45s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(.5s + var(--i) * .22s)}
.ts-khoi.vao .ts-nui .ban{animation:ts-di 1.6s 1.1s cubic-bezier(.3,0,.2,1) both}
@keyframes ts-di{from{transform:translateX(0)}}
.ts-ds-dinh{display:grid;gap:8px;margin:0 0 14px}
.ts-dinh{display:flex;gap:12px;align-items:center;padding:12px 14px;border-radius:18px;background:rgba(255,255,255,.035);border:1px solid rgba(215,195,245,.12)}
.ts-dinh.qua{opacity:.72}
.ts-dinh.nay{background:rgba(240,196,138,.08);border-color:rgba(240,196,138,.45);box-shadow:0 0 22px rgba(240,196,138,.12)}
.ts-dinh-so{flex:0 0 44px;height:44px;display:grid;place-items:center;border-radius:50%;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:22px;font-weight:600;color:#fff;background:rgba(185,154,232,.2);border:1px solid rgba(215,195,245,.4);font-variant-numeric:lining-nums}
.ts-dinh.nay .ts-dinh-so{background:rgba(240,196,138,.28);border-color:#f0c48a}
.ts-dinh-dau{margin:0 0 2px;font-size:14px;color:rgba(244,239,230,.9)}
.ts-dinh-dau b{font-weight:500;color:#f1e8ff}
.ts-dinh-dau span{font-size:12px;color:rgba(244,239,230,.45)}
.ts-dinh-dau em{font-style:normal;font-size:11px;white-space:nowrap;padding:2px 8px;border-radius:999px;background:rgba(240,196,138,.2);color:#f0c48a}
.ts-dinh-y{margin:0;font-size:13px;line-height:1.55;color:rgba(244,239,230,.72)}

/* thẻ 5: họ tên — nguyên âm tím (Linh hồn), phụ âm xanh (Nhân cách), cả tên vàng (Sứ mệnh) */
.ts-truong{display:block;margin:0 0 12px;font-size:13px;color:rgba(244,239,230,.85)}
.ts-truong i{display:block;font-style:normal;font-size:11.5px;color:rgba(244,239,230,.45)}
.ts-truong input{display:block;width:100%;margin-top:6px;padding:12px 14px;border-radius:14px;font-size:16px;
  border:1px solid rgba(215,195,245,.22);background:rgba(10,7,22,.55);color:var(--ink)}
.ts-truong input::placeholder{color:rgba(244,239,230,.3)}
.ts-truong input:focus{outline:none;border-color:rgba(215,195,245,.75);box-shadow:0 0 0 3px rgba(185,154,232,.22)}
.ts-ten-kq{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 132px)}
.ts-chu-ten{display:flex;flex-wrap:wrap;justify-content:center;gap:10px 16px;perspective:600px}
.ts-tu{display:flex;gap:3px}
.ts-chu{display:flex;flex-direction:column;align-items:center;min-width:27px;padding:5px 3px 4px;border-radius:10px;
  background:rgba(126,200,227,.08);border:1px solid rgba(126,200,227,.25)}
.ts-chu b{font-size:15px;font-weight:500;line-height:1.2;color:rgba(244,239,230,.9)}
.ts-chu i{font-style:normal;font-family:"Cormorant Garamond",Georgia,serif;font-size:17px;font-weight:600;line-height:1.1;color:#a9d9ea;font-variant-numeric:lining-nums}
.ts-chu.na{background:rgba(185,154,232,.2);border-color:rgba(215,195,245,.5)}
.ts-chu.na i{color:#e6dafa}
.ts-khoi.vao .ts-chu{animation:ts-lat .5s ease both;animation-delay:calc(var(--i) * 55ms)}
.ts-khoi.vao .ts-chu i{animation:ts-len .4s ease both;animation-delay:calc(var(--i) * 55ms + .3s)}
@keyframes ts-lat{from{opacity:0;transform:rotateY(90deg)}}
.ts-chu-giai{display:flex;justify-content:center;gap:14px;margin:10px 0 0;font-size:12px;color:rgba(244,239,230,.6)}
.ts-chu-giai span::before{content:'';display:inline-block;width:10px;height:10px;margin-right:6px;border-radius:3px;vertical-align:-1px}
.ts-chu-giai .na::before{background:rgba(185,154,232,.6)}
.ts-chu-giai .pa::before{background:rgba(126,200,227,.45)}
.ts-ba-so{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 0 12px}
.ts-qua{display:flex;flex-direction:column;align-items:center;text-align:center;padding:12px 4px 10px;border-radius:18px;
  background:rgba(255,255,255,.03);border:1px solid rgba(215,195,245,.1)}
.ts-qua-so{width:60px;height:60px;display:grid;place-items:center;border-radius:50%;font-family:"Cormorant Garamond",Georgia,serif;
  font-size:28px;font-weight:600;color:#fff;font-variant-numeric:lining-nums}
.ts-qua.linhHon .ts-qua-so{background:radial-gradient(circle at 35% 30%,#d4b8ff,#6a4bbd);box-shadow:0 0 22px rgba(185,154,232,.5)}
.ts-qua.nhanCach .ts-qua-so{background:radial-gradient(circle at 35% 30%,#aee0ef,#3a6a96);box-shadow:0 0 22px rgba(126,200,227,.4)}
.ts-qua.suMenh .ts-qua-so{background:radial-gradient(circle at 35% 30%,#f8dba8,#ad7535);box-shadow:0 0 22px rgba(240,196,138,.45)}
.ts-qua-ten{margin:8px 0 0;font-size:13.5px;font-weight:500}
.ts-qua-tu{margin:1px 0 0;font-size:11px;color:rgba(244,239,230,.5)}
.ts-khoi.vao .ts-qua{animation:ts-no .55s cubic-bezier(.3,1.5,.5,1) both;animation-delay:calc(var(--i) * .16s)}
.ts-y-ba{display:grid;gap:8px}
.ts-y-mot{padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.03);border-left:3px solid;font-size:13.5px;line-height:1.55;color:rgba(244,239,230,.85)}
.ts-y-mot p{margin:0}
.ts-y-mot .ts-buoc{margin-top:4px}
.ts-y-mot.linhHon{border-color:#b99ae8}
.ts-y-mot.nhanCach{border-color:#7ec8e3}
.ts-y-mot.suMenh{border-color:#f0c48a}
.ts-y-mot.bieuDat{border-color:#7ec8e3}
.ts-ba-so.hai{grid-template-columns:repeat(2,1fr)}
.ts-qua.bieuDat .ts-qua-so{background:radial-gradient(circle at 35% 30%,#aee0ef,#3a6a96);box-shadow:0 0 22px rgba(126,200,227,.4)}
.ts-so-sanh .ts-chu-ten{margin:12px 0 10px}
.ts-chu-ten.nho{gap:8px 12px}
.ts-chu-ten.nho .ts-chu{min-width:22px;padding:3px 2px}
.ts-chu-ten.nho .ts-chu b{font-size:12.5px}
.ts-chu-ten.nho .ts-chu i{font-size:14px}
.ts-so-sanh .ts-ba-so{margin:0 0 8px}
.ts-so-sanh .ts-qua-so{width:46px;height:46px;font-size:21px}
.ts-so-sanh .ts-buoc{margin:4px 0 0}
.ts-so-sanh .ts-buoc b{margin-right:6px;font-weight:500;color:rgba(244,239,230,.75)}
.ts-chuoi-chu .ts-cs{height:auto;padding:4px 6px}
.ts-chuoi-chu .ts-cs b{font-family:"Be Vietnam Pro",system-ui,sans-serif;font-size:13px;font-weight:500;line-height:1.3}
.ts-chuoi-chu .ts-cs i{font-style:normal;font-size:20px;line-height:1}
.ts-cham{display:inline-block;width:10px;height:10px;border-radius:50%;vertical-align:-1px}
.ts-chu-giai-tong{display:flex;flex-wrap:wrap;gap:4px 14px;margin:0 0 8px;font-size:12px;color:rgba(244,239,230,.7)}
.ts-chu-giai-tong span{display:inline-flex;align-items:center;gap:6px}
.ts-cham.n{background:#fff;box-shadow:0 0 6px rgba(215,195,245,.8)}
.ts-cham.t{background:#f6cf8f;box-shadow:0 0 6px rgba(240,196,138,.8)}
.ts-nguon{margin:22px auto 0;max-width:460px;text-align:center;font-size:11px;line-height:1.6;color:rgba(244,239,230,.34)}
@media (min-width:520px){.ts-hai{grid-template-columns:1fr 1fr}}
@media (min-width:700px){.ts-cuon{padding-left:24px;padding-right:24px}.ts-the-nut{font-size:12.5px}}
@media (prefers-reduced-motion:reduce){.thanso *,.thanso *::before,.thanso *::after{animation:none!important;transition:none!important}}

/* ---------- nhạc ngủ ---------- */
.nhacngu{position:fixed;inset:0;z-index:30;display:none;
  background:radial-gradient(120% 80% at 50% 0%,#151a2c 0%,#0c0f1c 55%,#05060c 100%)}
.nhacngu.hien{display:block}
.nhacngu.dang-nghe{background:#030409}
.nhacngu.dang-nghe .xn-dong{opacity:.8}
.nhacngu .xn-tieude{color:#f3dfa0}
.ng-mo{margin:-6px 0 18px;text-align:center;font-size:13px;line-height:1.6;color:rgba(244,239,230,.55)}
.ng-ds{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.ng-bai{display:flex;flex-direction:column;align-items:flex-start;gap:3px;min-height:74px;padding:11px 12px;border-radius:14px;
  cursor:pointer;text-align:left;border:1px solid rgba(255,255,255,.1);background:rgba(0,0,0,.2);color:var(--ink)}
.ng-bai b{font-size:14.5px;font-weight:500;color:rgba(244,239,230,.95)}
.ng-bai span{font-size:12px;line-height:1.45;color:rgba(244,239,230,.5)}
.ng-bai i{font-style:normal;font-size:11px;color:#f3dfa0;opacity:.75}
.ng-bai.chon{border-color:rgba(243,223,160,.55);background:rgba(243,223,160,.08)}
.ng-bai:focus-visible,.ng-gio button:focus-visible,.ng-batdau:focus-visible,.ng-nut button:focus-visible{outline:2px solid rgba(243,223,160,.7);outline-offset:2px}
.ng-bc{margin:12px 0 0;font-size:12.5px;line-height:1.6;color:rgba(244,239,230,.62)}
.ng-gio{display:flex;gap:6px}
.ng-gio button{flex:1;min-width:0;padding:10px 0;border-radius:12px;cursor:pointer;font-size:16px;
  border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.2);color:rgba(244,239,230,.8)}
.ng-gio button small{font-size:10.5px;color:rgba(244,239,230,.45)}
.ng-gio button.chon{border-color:rgba(243,223,160,.55);background:rgba(243,223,160,.1);color:#f3dfa0}
.ng-am{display:block;width:100%;margin:4px 0 0;accent-color:#f3dfa0}
.ng-batdau{display:block;width:100%;margin:0 0 10px;padding:15px;border-radius:16px;cursor:pointer;font-size:17px;letter-spacing:.02em;
  border:1px solid rgba(243,223,160,.5);background:rgba(243,223,160,.14);color:#f3dfa0}
.ng-batdau:hover{background:rgba(243,223,160,.2)}
.ng-loi{margin:0 0 12px;text-align:center;font-size:13px;color:#f0b3a6}
.ng-canh{margin:0 0 18px;padding:10px 12px;border-radius:12px;font-size:12.5px;line-height:1.6;
  background:rgba(243,223,160,.07);border:1px solid rgba(243,223,160,.22);color:rgba(244,239,230,.75)}
.ng-vi{margin-top:12px}
.ng-vi p:not(.xn-tieu){margin:0 0 10px;font-size:13px;line-height:1.65;color:rgba(244,239,230,.68)}
.ng-vi b{font-weight:500;color:rgba(244,239,230,.92)}

.ng-nghe{text-align:center;padding-top:4vh}
.ng-vong{position:relative;width:min(62vw,240px);aspect-ratio:1;margin:0 auto 26px;display:grid;place-items:center}
.ng-vong span{width:100%;height:100%;border-radius:50%;transition:transform .25s linear,opacity .6s linear;
  background:radial-gradient(circle at 50% 50%,rgba(243,223,160,.16) 0%,rgba(243,223,160,.06) 55%,rgba(243,223,160,0) 70%);
  box-shadow:inset 0 0 0 1px rgba(243,223,160,.2)}
.ng-ten{margin:0 0 4px;font-size:14px;letter-spacing:.12em;text-transform:uppercase;color:rgba(244,239,230,.45)}
.ng-dem{margin:0;font-size:56px;font-weight:200;line-height:1.1;color:rgba(243,223,160,.85);font-variant-numeric:tabular-nums lining-nums}
.ng-trangthai{min-height:20px;margin:6px 0 0;font-size:13px;color:rgba(244,239,230,.45)}
.ng-tho{margin:14px 0 0;font-size:15px;color:rgba(243,223,160,.7)}
.ng-nut{display:flex;gap:8px;margin:28px 0 22px}
.ng-nut button{flex:1;min-width:0;padding:12px 0;border-radius:14px;cursor:pointer;font-size:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(244,239,230,.75)}
.ng-nut button:disabled{opacity:.35;cursor:default}
.ng-am-nhan{display:block;margin:0 0 6px;text-align:left;font-size:12px;color:rgba(244,239,230,.45)}
.ng-giua{text-align:center}
.ng-lui{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);left:16px;height:34px;padding:0 14px 0 11px;
  border-radius:17px;cursor:pointer;font-size:14px;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.36);color:var(--ink)}
.ng-lui:hover{background:rgba(255,255,255,.12)}
.ng-dp{display:flex;gap:8px;margin:-4px 0 18px}
.ng-dp-mo{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;border-radius:14px;cursor:pointer;
  text-align:left;border:1px solid rgba(243,223,160,.45);background:rgba(243,223,160,.08);color:#f3dfa0}
.ng-dp-ten{font-size:14px}
.ng-dp-ten::before{content:'';display:inline-block;width:7px;height:7px;margin-right:8px;border-radius:50%;background:#f3dfa0;
  vertical-align:middle;animation:ng-nhay 2.4s ease-in-out infinite}
.ng-dp-dem{font-size:12px;color:rgba(244,239,230,.55);font-variant-numeric:tabular-nums}
.ng-dp-tat{padding:0 16px;border-radius:14px;cursor:pointer;font-size:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(244,239,230,.75)}
.ng-batdau:disabled{opacity:.45;cursor:default}
@keyframes ng-nhay{0%,100%{opacity:.35}50%{opacity:1}}
@media (prefers-reduced-motion:reduce){.ng-dp-ten::before{animation:none}}

/* ---------- toàn cảnh: Trái Đất từ quỹ đạo ---------- */
.toancanh{position:fixed;inset:0;z-index:33;display:none;background:#000;overflow:hidden}   /* trên Trời đêm (30) */
.toancanh.hien{display:block}
.tc-cv{position:absolute;inset:0;display:block}
.tc-phu{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;pointer-events:none;
  padding:calc(env(safe-area-inset-top,0px) + 60px) 18px calc(env(safe-area-inset-bottom,0px) + 18px)}
.tc-phu button,.tc-phu details,.tc-phu summary{pointer-events:auto}
.tc-dau{text-align:center;text-shadow:0 1px 6px #000}
.tc-ten{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;color:#e9f2ff}
.tc-cham{display:flex;justify-content:center;gap:6px;margin:8px 0 4px}
.tc-cham i{width:18px;height:3px;border-radius:2px;background:rgba(255,255,255,.18)}
.tc-cham i.dang{background:#8ec9ff}
.tc-so{margin:0;min-height:16px;font-size:12px;color:rgba(220,232,255,.6);font-variant-numeric:tabular-nums}
.tc-chu{margin-top:auto;max-width:520px;align-self:center;text-align:center;text-shadow:0 1px 8px #000,0 0 2px #000;
  transition:opacity .6s ease}
.tc-chu.tat{opacity:0;transition:opacity .35s ease}
.tc-chu p{margin:0 0 10px;font-size:16px;line-height:1.55;color:rgba(244,246,255,.94)}
.tc-xong{max-width:520px;align-self:center;width:100%;margin:6px 0 0;text-align:center}
.tc-lai{padding:12px 22px;border-radius:999px;cursor:pointer;font:inherit;font-size:15px;
  border:1px solid rgba(142,201,255,.5);background:rgba(142,201,255,.12);color:#cfe6ff}
.tc-nguon{margin:12px 0 0;text-align:left;font-size:12.5px;line-height:1.6;color:rgba(220,232,255,.7);
  background:rgba(0,0,0,.55);border-radius:12px;padding:8px 12px}
.tc-nguon summary{cursor:pointer;color:rgba(220,232,255,.85)}
.tc-nguon p{margin:8px 0 0}
.tc-nut{display:flex;gap:8px;justify-content:center;margin-top:14px}
.tc-nut[hidden]{display:none}
.tc-nut button{padding:10px 18px;border-radius:999px;cursor:pointer;font:inherit;font-size:14px;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.45);color:rgba(240,244,255,.9)}
@media (prefers-reduced-motion:reduce){.tc-chu,.tc-chu.tat{transition:none}}

/* ---------- thiền luân xa: dùng lại khung xn-* và nút ng-* của nhạc ngủ ---------- */
.luanxa{position:fixed;inset:0;z-index:30;display:none;
  background:radial-gradient(120% 80% at 50% 0%,#221a33 0%,#141022 55%,#0b0a14 100%)}
.luanxa.hien{display:block}
.luanxa.dang-nghe{background:radial-gradient(90% 60% at 50% 28%,#1a1428 0%,#07060d 72%)}
.luanxa .xn-tieude{color:#e8c6e0}
.lx-mo{margin:-6px 0 18px;text-align:center;font-size:13px;line-height:1.6;color:rgba(244,239,230,.55)}
.lx-xong{margin:-4px 0 14px;padding:10px 12px;border-radius:12px;text-align:center;font-size:13.5px;line-height:1.55;
  color:#e8c6e0;background:rgba(242,167,195,.08);border:1px solid rgba(242,167,195,.28)}
.lx-mot{border-top:1px solid rgba(255,255,255,.07)}
.lx-mot:first-of-type{border-top:0}
.lx-mot summary{display:flex;align-items:center;gap:11px;padding:10px 2px;cursor:pointer;list-style:none}
.lx-mot summary::-webkit-details-marker{display:none}
.lx-mot summary i{flex:none;width:12px;height:12px;border-radius:50%}
.lx-mot-ten{display:flex;flex-direction:column;gap:2px;min-width:0}
.lx-mot-ten b{font-size:14.5px;font-weight:500;color:rgba(244,239,230,.95)}
.lx-mot-ten small{font-size:12px;line-height:1.45;color:rgba(244,239,230,.5)}
.lx-mot-than{padding:2px 2px 12px 23px}
.lx-mot-than p{margin:0 0 8px;font-size:13px;line-height:1.6;color:rgba(244,239,230,.72)}
.lx-mot-than b{font-weight:500;color:rgba(244,239,230,.95)}
.lx-mot-sen{width:120px;margin:4px auto 10px}
.lx-mot-than .lx-mot-hz{font-size:12px;color:rgba(244,239,230,.45)}
.lx-sen{display:block;width:100%;height:auto;overflow:visible}
.lx-sen text{font-family:"Noto Sans Devanagari","Kohinoor Devanagari","Devanagari Sangam MN",sans-serif}
.lx-nghe{text-align:center;padding-top:2vh}
.lx-hoa{position:relative;width:min(56vw,230px);aspect-ratio:1;margin:0 auto 14px}
.lx-hoa::before{content:'';position:absolute;inset:14%;border-radius:50%;background:var(--lx-mau,#a97ddb);opacity:.22;filter:blur(30px)}
.lx-hoa-trong{position:relative;width:100%;height:100%;transition:transform .2s linear,opacity .5s linear}
.lx-hang{display:flex;align-items:center;justify-content:center;gap:16px;max-width:360px;margin:0 auto}
.lx-than-o{flex:none;width:72px}
.lx-than{display:block;width:100%;height:auto}
.lx-chu{min-width:0;text-align:left}
.lx-so{margin:0;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(244,239,230,.45)}
.lx-ten{margin:3px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-size:24px;line-height:1.1;color:rgba(244,239,230,.92)}
.lx-bija{margin:2px 0 0;font-size:32px;font-weight:300;letter-spacing:.14em;line-height:1.15;color:var(--lx-mau,#e8c6e0)}
.lx-doc{margin:2px 0 0;font-size:12.5px;line-height:1.45;color:rgba(244,239,230,.5)}
.lx-chuy{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:rgba(244,239,230,.78)}
.lx-tho{min-height:24px;margin:18px 0 0;font-size:17px;color:rgba(244,239,230,.88)}
.lx-dem{margin:6px 0 0;font-size:12.5px;color:rgba(244,239,230,.45);font-variant-numeric:tabular-nums}
.lx-nut{margin:22px 0 18px}
.lx-hinh{display:flex;align-items:center;gap:14px}
.lx-hinh-ve{flex:0 0 48%;max-width:200px}
.lx-hinh-chu{flex:1;min-width:0}
.lx-hinh-chu .lx-bija{font-size:28px}
.lx-hinh-sen{width:78px;margin-top:10px}
.lx-hinh-ghi{text-align:center}
.lx-hinh-ve svg{cursor:pointer}
.lx-cham[data-lx]{outline:none}
.lx-cham[data-lx]:focus-visible circle:last-of-type{stroke:#fff;stroke-width:.8}
.lx-quang{animation:lx-sang 2.6s ease-in-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes lx-sang{0%,100%{opacity:.16;transform:scale(.8)}50%{opacity:.45;transform:scale(1.18)}}
.lx-mot-hinh{display:flex;align-items:center;justify-content:center;gap:18px;margin:4px 0 10px}
.lx-mot-nguoi{flex:none;width:72px}
.lx-mot-hinh .lx-mot-sen{margin:0}
.lx-che{margin-bottom:4px}
.lx-che button{font-size:14px}
.lx-chonlx{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin:12px 0 0}
.lx-chonlx button{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:9px 2px 8px;border-radius:12px;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.03);color:rgba(244,239,230,.85);font:inherit}
.lx-chonlx button i{width:10px;height:10px;border-radius:50%}
.lx-chonlx button b{font-size:15px;font-weight:500}
.lx-chonlx button span{font-size:11px;line-height:1.25;color:rgba(244,239,230,.55);text-align:center}
.lx-chonlx button.chon{border-color:rgba(242,167,195,.6);background:rgba(242,167,195,.1)}
.lx-chonlx button:focus-visible,.lx-rieng:focus-visible{outline:2px solid rgba(242,167,195,.7);outline-offset:2px}
.lx-rieng{display:block;width:100%;margin:4px 0 0;padding:10px;border-radius:12px;cursor:pointer;font:inherit;font-size:14px;
  border:1px solid rgba(242,167,195,.4);background:rgba(242,167,195,.08);color:#f2c6d8}
.lx-rieng:hover{background:rgba(242,167,195,.15)}
@media (prefers-reduced-motion:reduce){.lx-hoa-trong{transition:none}.lx-quang{animation:none}}

/* ---------- cài app ---------- */
.cai-lien{white-space:nowrap}
.cai-dau{display:flex;gap:14px;align-items:center;margin:0 0 14px}
.cai-dau img{flex:0 0 52px;border-radius:13px;box-shadow:0 2px 10px rgba(0,0,0,.35)}
.cai-dau p{margin:0;font-size:13.5px;line-height:1.55;color:var(--ink-dim,rgba(244,239,230,.75))}
.cai-buoc{list-style:none;margin:0;padding:0}
.cai-buoc li{display:flex;gap:12px;align-items:flex-start;padding:10px 0;border-top:1px solid var(--line,rgba(255,255,255,.08))}
.cai-buoc li>span{flex:0 0 24px;height:24px;border-radius:50%;display:grid;place-items:center;font-size:12.5px;
  background:rgba(232,195,122,.14);color:var(--gold,#e8c37a);border:1px solid rgba(232,195,122,.35)}
.cai-buoc p{margin:2px 0 0;font-size:14px;line-height:1.6}
.cai-buoc small{display:block;margin-top:4px;font-size:12.5px;opacity:.7}
.cai-ico{display:inline-block;width:19px;height:19px;vertical-align:-4px;margin:0 2px;color:#7fb2ff}
.cai-cham{display:inline-block;padding:0 6px;border-radius:6px;line-height:1.3;background:rgba(255,255,255,.1);font-weight:600}
.cai-luu{margin:0 0 6px;font-size:13.5px;line-height:1.6;padding:9px 12px;border-radius:12px;background:rgba(232,195,122,.08);border:1px solid rgba(232,195,122,.22)}
a.cai-nut{text-align:center;text-decoration:none;box-sizing:border-box}
.wide-ghost{display:block;width:100%;margin-top:10px}

/* ---------- Robot thắp sao (assets/laptrinh.js) ---------- */
.laptrinh{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;background:#0d0b22;color:#eef1ff;
  padding-bottom:env(safe-area-inset-bottom,0px)}
.laptrinh.hien{display:flex}
/* bấm liên tục vào ô lệnh: không bôi đen chữ, không bật bảng "Sao chép / Tra cứu" khi giữ lâu */
.laptrinh{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.lt-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 8px 14px;min-height:56px}
.lt-dau button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:16px;cursor:pointer}
.lt-ten{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.3;color:rgba(238,241,255,.7);white-space:nowrap}
.lt-ten b{color:#ffd77a;font-weight:600}
.lt-ten span{display:block;overflow:hidden;text-overflow:ellipsis;font-size:15px;color:#eef1ff}
/* Cảnh 3D lấy phần còn lại và co được: bản trước giữ tối thiểu 34% chiều cao màn, nên trên màn thấp (iPhone SE) có bảng
   ô lệnh ba hàng thì cả cột tràn xuống — nút ▶ Chạy bị đẩy ra ngoài màn. */
.lt-canh{position:relative;flex:1 1 0;min-height:120px;overflow:hidden}
.lt-cv{position:absolute;inset:0;display:block;touch-action:none}
.lt-muc{position:absolute;left:12px;top:8px;margin:0;padding:5px 10px;border-radius:999px;background:rgba(10,10,30,.55);font-size:12.5px;color:#ffe6a6}
.lt-xoay{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
/* chuyển sang bài trước, bài sau ngay trên cảnh — bài nào cũng mở, khỏi phải vào danh sách */
.lt-chuyen{position:absolute;left:10px;bottom:10px;display:flex;gap:6px}
.lt-chuyen button{height:40px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,30,.55);
  color:#eef1ff;font:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer}
.lt-chuyen button[hidden]{display:none}
.lt-xoay button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,30,.55);color:#eef1ff;font-size:18px;cursor:pointer}
.lt-bao{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);width:max-content;max-width:86%;margin:0;padding:8px 14px;border-radius:12px;
  background:rgba(20,18,50,.92);border:1px solid rgba(255,214,120,.4);font-size:13.5px;line-height:1.45;text-align:center}
.lt-bao[hidden]{display:none}
.lt-bao{cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.lt-dangchay .lt-cho{visibility:hidden}
.lt-ma{flex:none;height:clamp(110px,26vh,260px);overflow:auto;padding:6px 12px 2px;background:#0d0b22}
.lt-khung{margin:0 0 8px;padding:6px 8px 8px;border-radius:14px;border:1.5px dashed rgba(255,255,255,.18);background:rgba(255,255,255,.03)}
.lt-khung[hidden]{display:none}
.lt-khung.lt-dich{border-color:rgba(143,208,255,.7);background:rgba(143,208,255,.06)}
.lt-nhan{margin:0 0 6px;font-size:12px;color:rgba(238,241,255,.6)}
.lt-dem{margin-left:6px;padding:1px 7px;border-radius:999px;background:rgba(255,255,255,.08);color:#eef1ff;font-variant-numeric:tabular-nums}
.lt-dem.lt-day{background:rgba(255,160,90,.25);color:#ffc89a}
.lt-o,.lt-than{display:flex;flex-wrap:wrap;align-items:flex-start;gap:6px;min-height:40px}
.lt-chip{position:relative;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:52px;height:52px;
  padding:4px 6px;border:0;border-radius:12px;color:#fff;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;
  box-shadow:inset 0 -3px 0 rgba(0,0,0,.25),0 2px 6px rgba(0,0,0,.3);transition:transform .15s,box-shadow .15s}
.lt-chip svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.lt-chip b{font-size:10px;font-weight:600;line-height:1.1;max-width:64px;text-align:center}
.lt-xanh{background:linear-gradient(#4f8ef0,#2f63c4)}
.lt-vang{background:linear-gradient(#f2c04a,#d18f1c);color:#2a1a00}
.lt-tim{background:linear-gradient(#a173ea,#7144c6)}
.lt-cam{background:linear-gradient(#f2944a,#cc5f1d)}
.lt-ngoc{background:linear-gradient(#35c2b2,#14877c)}
.lt-chip.lt-chay-day{transform:scale(1.1);box-shadow:0 0 0 3px #fff,0 0 16px rgba(255,255,255,.6)}
.lt-solan{display:inline-grid;place-items:center;min-width:22px;height:20px;margin:0 2px;border-radius:6px;background:rgba(255,255,255,.92);
  color:#a4460f;font-style:normal;font-weight:700;font-size:13px}
.lt-hop{display:flex;flex-wrap:wrap;align-items:flex-start;gap:5px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);border-left:4px solid}
.lt-hop-cam{border-color:#e98a3c}
.lt-hop-ngoc{border-color:#26ad9f}
.lt-hop .lt-chip{height:42px;flex-direction:row;gap:5px}
.lt-hop .lt-chip b{font-size:10.5px}
.lt-than{flex:1 1 100%;margin-left:10px;padding:4px;border-radius:10px;border:1.5px dashed rgba(255,255,255,.2)}
.lt-cho.lt-khac-gon{width:auto;height:30px;margin-left:10px;padding:0 10px;font-size:12.5px;white-space:nowrap}
.lt-chip.lt-chay-trong{box-shadow:0 0 0 2px rgba(255,255,255,.75),0 2px 6px rgba(0,0,0,.3)}
.lt-than.lt-dich{border-color:rgba(143,208,255,.8);background:rgba(143,208,255,.07)}
.lt-nhanphu{flex:1 1 100%;margin:2px 0 -2px 16px;font-size:11px;color:rgba(238,241,255,.55)}
.lt-cho{display:inline-grid;place-items:center;width:34px;height:40px;border-radius:10px;border:1.5px dashed rgba(255,255,255,.25);
  color:rgba(255,255,255,.45);font-size:18px;cursor:pointer}
.lt-cho{opacity:.55}
.lt-cho.lt-cho-dang{opacity:1;width:38px;height:44px;border:2px solid #8fd0ff;background:rgba(143,208,255,.16);color:#e6f5ff;font-size:20px;
  animation:lt-nhay 1.2s ease-in-out infinite}
@keyframes lt-nhay{50%{background:rgba(143,208,255,.04);border-color:rgba(143,208,255,.45)}}
.lt-chip.lt-chon{box-shadow:0 0 0 3px #ffd77a,0 2px 10px rgba(0,0,0,.4)}
.lt-xoa-o{position:absolute;top:-10px;right:-10px;display:grid;place-items:center;width:26px;height:26px;border-radius:50%;
  background:#ff5a4f;color:#fff;font-style:normal;font-weight:700;font-size:17px;line-height:1;box-shadow:0 2px 6px rgba(0,0,0,.4);z-index:2}
.lt-chip.lt-sai{box-shadow:0 0 0 3px #ff5a4f,0 0 14px rgba(255,90,79,.55);animation:lt-rung .45s ease 1}
@keyframes lt-rung{20%,60%{transform:translateX(-4px)}40%,80%{transform:translateX(4px)}}
.lt-goiy-o{animation:lt-goiy .9s ease-in-out infinite;box-shadow:0 0 0 3px #fff,0 0 18px rgba(255,255,255,.7)!important;z-index:3}
@keyframes lt-goiy{50%{transform:translateY(-6px) scale(1.08)}}
/* Bảng ô lệnh xếp lưới đều, ô hẹp lại và chữ xuống tối đa hai dòng: chương Nếu… thì… có 9 ô, bản trước bày thành ba
   hàng (ô điều kiện rộng gấp đôi) — giờ vừa hai hàng trên điện thoại. */
.lt-bang{flex:none;display:grid;grid-template-columns:repeat(auto-fill,minmax(54px,1fr));gap:5px;padding:7px 10px;
  border-top:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.02)}
.lt-bang .lt-chip{min-width:0;height:52px;padding:3px 2px}
.lt-bang .lt-chip b{max-width:none;font-size:10px}
/* iPad, máy tính bảng: màn rộng thì ô lệnh to ra cho dễ bấm, vẫn một hàng */
@media (min-width:600px){
  .lt-bang{grid-template-columns:repeat(auto-fill,minmax(66px,1fr));gap:7px;padding:9px 14px}
  .lt-bang .lt-chip{height:62px}
  .lt-bang .lt-chip svg{width:26px;height:26px}
  .lt-bang .lt-chip b{font-size:11.5px}
}
.lt-nut{flex:none;display:flex;gap:8px;padding:6px 12px 10px}
.lt-nut button{height:46px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;
  font:inherit;font-size:15px;cursor:pointer}
.lt-nut .lt-chay{flex:1;border:0;background:linear-gradient(#5fd38a,#2f9c5b);color:#06240f;font-weight:700;font-size:16px;white-space:nowrap}
.lt-nut button:not(.lt-chay){display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;width:58px;padding:0}
.lt-nut button span{font-size:17px;line-height:1}
.lt-nut button small{font-size:9.5px;line-height:1.1;color:rgba(238,241,255,.7);white-space:nowrap}
.lt-nut button:disabled{opacity:.35}
.lt-dangchay .lt-chay{background:linear-gradient(#f07a6a,#c4473a);color:#fff}
.lt-nut .lt-nhanh.lt-bat{background:rgba(143,208,255,.25);border-color:rgba(143,208,255,.7)}
.lt-dangchay .lt-bang{opacity:.5;pointer-events:none}
.lt-dangchay .lt-ma{pointer-events:none}
.lt-dangchay .lt-hoan,.lt-dangchay .lt-goiy,.lt-dangchay .lt-xoa{opacity:.35;pointer-events:none}
.lt-nhan-phu{font-size:11px;color:rgba(238,241,255,.4)}
.lt-dich .lt-nhan-phu{display:none}
.lt-tin .lt-tin-meo{font-size:13px;color:rgba(238,241,255,.6)}
.lt-tin,.lt-ds{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,5,18,.72)}
.lt-tin[hidden],.lt-ds[hidden]{display:none}
.lt-tin-trong,.lt-ds-trong{width:100%;max-width:420px;max-height:88vh;overflow:auto;padding:22px 20px;border-radius:20px;
  background:linear-gradient(#22204a,#17153a);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:center}
.lt-tin h2,.lt-ds h2{margin:4px 0 10px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;color:#ffe2a0}
.lt-tin p{margin:0 0 10px;font-size:15px;line-height:1.55;color:rgba(238,241,255,.88);text-align:left}
.lt-tin .lt-tin-nho{margin:0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,255,.5)}
.lt-tin-o{display:flex;flex-wrap:wrap;justify-content:center;gap:7px;margin:4px 0 12px}
.lt-tin-o .lt-chip{cursor:default}
.lt-tin .lt-tin-goiy{padding:8px 10px;border-radius:10px;background:rgba(255,215,120,.1);color:#ffe6a6;font-size:14px}
.lt-tin-sao{font-size:38px;letter-spacing:6px}
.lt-tin-sao span{color:rgba(255,255,255,.14)}
.lt-tin-sao span.lt-co{color:#ffd35a;text-shadow:0 0 18px rgba(255,200,80,.7)}
.lt-ds-tong{margin:8px 0 0;font-size:15px;font-weight:600;color:#ffd77a}
.lt-tin button,.lt-ds-dong{display:block;width:100%;margin-top:10px;height:48px;border:0;border-radius:14px;
  background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.lt-tin button.lt-phu{background:rgba(255,255,255,.08);color:#eef1ff;font-weight:500}
.lt-ds-phu{margin:0 0 6px;font-size:13px;color:rgba(238,241,255,.65)}
.lt-ds h2{-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.lt-ds-x{position:sticky;top:-8px;z-index:2;float:right;width:36px;height:36px;margin:-8px -6px 0 0;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:#22204a;color:#eef1ff;font:inherit;font-size:15px;cursor:pointer}
.lt-ds-tiep{display:block;width:100%;margin:10px 0 2px;padding:11px 12px;border:0;border-radius:14px;
  background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font:inherit;font-size:14.5px;font-weight:700;line-height:1.35;cursor:pointer}
.lt-ds-tieng,.lt-ds-dien{display:inline-block;margin:6px 4px 0;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.lt-ds-dien{border-color:rgba(255,215,120,.5);color:#ffe6a6}
.lt-ds-thu{margin:10px 0 0;padding:7px 10px;border-radius:10px;background:rgba(255,215,120,.12);color:#ffe6a6;font-size:13px}
.lt-ds h3{margin:16px 0 8px;font-size:13.5px;font-weight:600;text-align:left;color:#cfe3ff}
.lt-ds-luoi{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.lt-ds-luoi button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:46px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.lt-ds-luoi button i{font-style:normal;font-size:9px;letter-spacing:1px;line-height:1}
.lt-ds-luoi button.lt-xong{background:rgba(255,215,120,.16);border-color:rgba(255,215,120,.45);color:#ffe6a6;font-weight:700}
.lt-ds-luoi button.lt-du{background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;border:0}
.lt-ds-luoi button.lt-dang{outline:2px solid #8fd0ff;outline-offset:1px}
.lt-ds-luoi button:disabled{opacity:.3;cursor:default}
@media (prefers-reduced-motion:reduce){.lt-cho.lt-cho-dang,.lt-goiy-o,.lt-chip.lt-sai{animation:none}}
/* Kéo thả ô lệnh. Chạm vào một ô (ở bảng dưới hay trong chương trình) mà rê tay là kéo ô đó, không phải cuộn trang —
   cuộn khung chương trình bằng cách rê ở khoảng trống, hoặc kéo ô tới mép trên/dưới cho nó tự cuộn. */
.lt-bang .lt-chip,.lt-ma .lt-chip{touch-action:none}
.lt-bong{position:fixed;left:0;top:0;z-index:20;pointer-events:none;will-change:transform}
.lt-bong>.lt-chip{width:100%;height:100%;transform:scale(1.1) rotate(-3deg);box-shadow:0 0 0 3px #fff,0 12px 26px rgba(0,0,0,.55)}
.lt-chip.lt-goc-keo{opacity:.3}
.lt-vach{position:fixed;z-index:19;border-radius:3px;background:#8fd0ff;box-shadow:0 0 10px rgba(143,208,255,.95);pointer-events:none}
.lt-vach[hidden]{display:none}
.lt-tha-vao{border-color:rgba(143,208,255,.95)!important;background:rgba(143,208,255,.12)!important}
.lt-bang.lt-xoa-vung{position:relative}
.lt-bang.lt-xoa-vung::after{content:"🗑  Thả vào đây để bỏ ô";position:absolute;inset:4px;display:grid;place-items:center;border-radius:12px;
  border:2px dashed rgba(255,130,120,.65);background:rgba(40,12,22,.82);color:#ffc9c3;font-size:14px;font-weight:600}
.lt-bang.lt-xoa-day::after{border-color:#ff7a6e;background:rgba(130,24,34,.9);color:#fff}
.lt-dangkeo .lt-cho-dang{animation:none}

/* ---------- Đẩy thùng sao — Sokoban (assets/sokoban.js) ---------- */
.sokoban{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;background:#0d0b22;color:#eef1ff;
  padding-bottom:env(safe-area-inset-bottom,0px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.sokoban.hien{display:flex}
.sk-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 8px 14px;min-height:56px}
.sk-dau button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:16px;cursor:pointer}
.sk-ten{flex:1;min-width:0;margin:0;font-size:13px;line-height:1.3;color:rgba(238,241,255,.7);white-space:nowrap}
.sk-ten b{color:#ffd77a;font-weight:600}
.sk-ten span{display:block;overflow:hidden;text-overflow:ellipsis;font-size:14px;color:#eef1ff}
.sk-canh{position:relative;flex:1 1 0;min-height:150px;overflow:hidden}
.sk-cv{position:absolute;inset:0;display:block;touch-action:none}
.sk-muc,.sk-dem{position:absolute;top:8px;margin:0;padding:5px 10px;border-radius:999px;background:rgba(10,10,30,.55);font-size:12.5px;pointer-events:none}
.sk-muc{left:12px;color:#ffe6a6}
.sk-dem{right:12px;color:#dfe6ff;font-variant-numeric:tabular-nums}
.sk-xoay{position:absolute;right:10px;bottom:10px;display:flex;gap:6px}
.sk-xoay button{width:40px;height:40px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,30,.55);color:#eef1ff;font-size:18px;cursor:pointer}
.sk-chuyen{position:absolute;left:10px;bottom:10px;display:flex;gap:6px}
.sk-chuyen button{height:40px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(10,10,30,.55);
  color:#eef1ff;font:inherit;font-size:13.5px;white-space:nowrap;cursor:pointer}
.sk-chuyen button[hidden]{display:none}
.sk-bao{position:absolute;left:50%;bottom:58px;transform:translateX(-50%);width:max-content;max-width:86%;margin:0;padding:8px 14px;border-radius:12px;
  background:rgba(20,18,50,.92);border:1px solid rgba(255,214,120,.4);font-size:13.5px;line-height:1.45;text-align:center;cursor:pointer;
  box-shadow:0 6px 20px rgba(0,0,0,.45)}
.sk-bao[hidden]{display:none}
/* Hàng dưới: nút lệnh bên trái, phím mũi tên bên phải cho ngón cái — đa số người cầm máy tay phải */
.sk-duoi{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:8px 16px 12px;border-top:1px solid rgba(255,255,255,.08)}
.sk-lenh{display:flex;flex-direction:column;gap:7px;flex:1;max-width:150px}
.sk-lenh button{display:flex;align-items:center;gap:8px;height:44px;padding:0 12px;border-radius:14px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#eef1ff;font:inherit;font-size:14.5px;cursor:pointer;touch-action:manipulation}
.sk-lenh button span{width:20px;font-size:18px;text-align:center}
.sk-lenh button:disabled{opacity:.35}
.sk-pad{display:grid;grid-template-columns:repeat(3,56px);grid-template-rows:repeat(3,48px);gap:4px}
.sk-pad button{border-radius:14px;border:1px solid rgba(143,208,255,.35);background:rgba(143,208,255,.12);color:#dff1ff;font-size:18px;cursor:pointer;
  touch-action:none;-webkit-tap-highlight-color:transparent}
.sk-pad [data-man="0"]{grid-area:1/2}
.sk-pad [data-man="3"]{grid-area:2/1}
.sk-pad [data-man="1"]{grid-area:2/3}
.sk-pad [data-man="2"]{grid-area:3/2}
.sk-pad button.sk-dang-bam,.sk-lenh button.sk-dang-bam{background:rgba(143,208,255,.32);transform:scale(.96)}
.sk-tin,.sk-ds{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(6,5,18,.72)}
.sk-tin[hidden],.sk-ds[hidden]{display:none}
.sk-tin-trong,.sk-ds-trong{width:100%;max-width:420px;max-height:88vh;overflow:auto;padding:22px 20px;border-radius:20px;
  background:linear-gradient(#22204a,#17153a);border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:center}
.sk-tin h2,.sk-ds h2{margin:4px 0 10px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;color:#ffe2a0}
.sk-tin p{margin:0 0 10px;font-size:15px;line-height:1.55;color:rgba(238,241,255,.88);text-align:left}
.sk-tin p b{color:#ffe6a6;font-weight:600}
.sk-tin .sk-tin-nho{margin:0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,255,.5)}
.sk-tin .sk-tin-meo{font-size:13.5px;color:rgba(238,241,255,.65);text-align:center}
.sk-tin-sao{font-size:38px;letter-spacing:6px}
.sk-tin-sao span{color:rgba(255,255,255,.14)}
.sk-tin-sao span.sk-co{color:#ffd35a;text-shadow:0 0 18px rgba(255,200,80,.7)}
.sk-tin button,.sk-ds-dong{display:block;width:100%;margin-top:10px;height:48px;border:0;border-radius:14px;
  background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.sk-tin button.sk-phu{background:rgba(255,255,255,.08);color:#eef1ff;font-weight:500}
.sk-ds-phu{margin:0 0 6px;font-size:13px;line-height:1.5;color:rgba(238,241,255,.65)}
.sk-ds-tong{margin:8px 0 0;font-size:15px;font-weight:600;color:#ffd77a}
.sk-ds h2{-webkit-tap-highlight-color:transparent}
.sk-ds-x{position:sticky;top:-8px;z-index:2;float:right;width:36px;height:36px;margin:-8px -6px 0 0;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:#22204a;color:#eef1ff;font:inherit;font-size:15px;cursor:pointer}
.sk-ds-tieng{display:inline-block;margin:6px 4px 0;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.sk-ds-xem{border-color:rgba(255,215,120,.5);color:#ffe6a6}
.sk-ds h3{margin:16px 0 8px;font-size:13.5px;font-weight:600;text-align:left;color:#cfe3ff}
.sk-ds-luoi{display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.sk-ds-luoi button{display:flex;flex-direction:column;align-items:center;justify-content:center;height:46px;border-radius:10px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.sk-ds-luoi button i{font-style:normal;font-size:9px;letter-spacing:1px;line-height:1}
.sk-ds-luoi button.sk-xong{background:rgba(255,215,120,.16);border-color:rgba(255,215,120,.45);color:#ffe6a6;font-weight:700}
.sk-ds-luoi button.sk-du{background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;border:0}
.sk-ds-luoi button.sk-dang{outline:2px solid #8fd0ff;outline-offset:1px}
@media (min-width:600px){
  .sk-duoi{justify-content:center;gap:48px}
  .sk-pad{grid-template-columns:repeat(3,62px);grid-template-rows:repeat(3,54px)}
}
/* điện thoại nằm ngang, màn thấp: thu hàng nút cho cảnh còn chỗ */
@media (max-height:560px){
  .sk-dau{min-height:44px;padding-top:calc(env(safe-area-inset-top,0px) + 6px);padding-bottom:4px}
  .sk-duoi{padding:4px 16px 6px}
  .sk-lenh{gap:4px}
  .sk-lenh button{height:34px}
  .sk-pad{grid-template-columns:repeat(3,46px);grid-template-rows:repeat(3,36px);gap:3px}
}

/* ---------- Cờ vua ba người (assets/coba.js) ---------- */
.coba{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;background:#0d0b22;color:#eef1ff;
  padding-bottom:env(safe-area-inset-bottom,0px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.coba.hien{display:flex}
.cb-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 6px 16px;min-height:52px}
.cb-dau button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:16px;cursor:pointer}
.cb-ten{flex:1;min-width:0;margin:0;line-height:1.3}
.cb-ten b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;color:#ffe2a0}
.cb-ten span{display:block;font-size:12.5px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-nha{display:flex;gap:6px;padding:4px 12px 6px}
.cb-the{flex:1;min-width:0;display:grid;grid-template-columns:auto 1fr;column-gap:7px;align-items:center;padding:6px 8px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s,opacity .2s}
.cb-the i{grid-row:1/3;width:16px;height:16px;border-radius:50%;border:1.5px solid rgba(255,255,255,.55)}
.cb-the b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-the span{min-height:14px;font-size:11px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-the.cb-dang{border-color:rgba(255,214,120,.8);background:rgba(255,214,120,.1)}
.cb-the.cb-dang span{color:#ffe6a6}
.cb-the.cb-chieu span{color:#ff8a7a;font-weight:600}
.cb-the.cb-loai{opacity:.45}
/* đồng hồ của phòng có đếm giờ: cột thứ ba của thẻ, ngang hàng tên — dòng dưới (đang đi, bị chiếu!) vẫn rộng hết thẻ. Chỉ
   thêm cột lúc có đồng hồ (khỏi bớt chỗ của tên) */
.cb-the.cb-co-gio{grid-template-columns:auto 1fr auto}
.cb-the.cb-co-gio span{grid-column:2/4}
.cb-gio{grid-column:3;grid-row:1;align-self:center;font-style:normal;font-size:13px;font-weight:600;font-variant-numeric:tabular-nums;color:rgba(238,241,255,.7)}
.cb-gio[hidden]{display:none}
.cb-the.cb-dang .cb-gio{color:#ffe6a6}
.cb-the .cb-gio.cb-gap{color:#ff8a7a}
.cb-canh{position:relative;flex:1 1 0;min-height:200px;overflow:hidden}
.cb-cv{position:absolute;inset:0;display:block;touch-action:none}
.cb-bao{position:absolute;left:50%;top:8px;z-index:10;transform:translateX(-50%);width:max-content;max-width:88%;margin:0;padding:8px 14px;border-radius:12px;
  background:rgba(20,18,50,.92);border:1px solid rgba(255,214,120,.4);font-size:13.5px;line-height:1.45;text-align:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45)}
.cb-bao[hidden]{display:none}
.coba.cb-co-tin .cb-bao{position:fixed;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
/* lời nói của máy: bong bóng dưới thẻ tên */
.cb-noi{position:absolute;z-index:6;width:140px;margin:0;padding:7px 10px;border-radius:12px;background:#fff8e6;color:#3b2a12;font-size:13px;line-height:1.35;
  text-align:center;box-shadow:0 6px 16px rgba(0,0,0,.4);cursor:pointer}
.cb-noi::before{content:"";position:absolute;top:-6px;left:50%;margin-left:-6px;border:6px solid transparent;border-top:0;border-bottom-color:#fff8e6}
.cb-noi[hidden]{display:none}
.cb-duoi{flex:none;padding:6px 14px 12px;border-top:1px solid rgba(255,255,255,.08)}
.cb-luot{margin:0 0 8px;min-height:20px;font-size:13.5px;line-height:1.4;text-align:center;color:rgba(238,241,255,.85)}
.cb-nut{display:flex;gap:10px;justify-content:center}
.cb-nut button{height:44px;padding:0 18px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;
  font:inherit;font-size:15px;cursor:pointer}
.cb-nut button[hidden]{display:none}
.cb-nut button:disabled{opacity:.35}
/* quân đã mất: một hàng hình quân nhỏ trong thẻ mỗi nhà; chạm thẻ thì báo bằng chữ */
.cb-the{cursor:pointer}
.cb-mat{grid-column:1/-1;display:block;width:100%;height:17px;margin-top:3px}
.cb-mat[hidden]{display:none}
/* xem cách đi từng quân: hàng chọn loại quân ở thanh dưới */
.cb-xem{display:flex;gap:6px;margin:0 0 10px}
.cb-xem[hidden]{display:none}
.cb-xem button{flex:1;min-width:0;height:40px;padding:0 2px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:13.5px;cursor:pointer}
.cb-xem button.cb-bat{border-color:#ffd77a;background:rgba(255,215,120,.18);color:#ffe6a6;font-weight:600}
/* Bảng của trò phủ cả khung, mà lúc chưa vào ván bảng Ván mới lúc nào cũng mở — trước đây nó đè lên hàng nút của app nên
   không bấm được chép link, cả nút đóng (người dùng: "chưa vô ván thì không bấm chia sẻ link được vì lúc nào cũng có
   popup"). Giờ ba nút đóng, chép link, Cài app nằm trên bảng; bảng chừa hàng nút ở trên (nút cao 34 px, cách mép 14 px). */
.coba .xn-dong,.coba .nut-link,.coba .nut-cai{z-index:10}
.cb-tin{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);background:rgba(6,5,18,.72)}
.cb-tin[hidden]{display:none}
.cb-tin-trong{width:100%;max-width:420px;max-height:100%;overflow:auto;padding:22px 20px;border-radius:20px;background:linear-gradient(#22204a,#17153a);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:center}
.cb-tin h2{margin:4px 0 12px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;color:#ffe2a0}
.cb-tin p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:rgba(238,241,255,.88);text-align:left}
.cb-tin p b{color:#ffe6a6;font-weight:600}
.cb-tin .cb-tin-nho{margin:0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,255,.5)}
.cb-tin .cb-meo{font-size:13px;color:rgba(238,241,255,.65);text-align:center}
.cb-tin .cb-nhan{margin:12px 0 6px;font-size:12.5px;color:rgba(238,241,255,.6)}
.cb-hang{display:flex;flex-wrap:wrap;gap:6px}
.cb-chon{flex:1;min-width:0;height:42px;padding:0 8px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.cb-chon.cb-bat{border-color:#ffd77a;background:rgba(255,215,120,.18);color:#ffe6a6;font-weight:600}
.cb-tin button:not(.cb-chon){display:block;width:100%;margin-top:10px;height:48px;border:0;border-radius:14px;background:linear-gradient(#ffd77a,#e9a93a);
  color:#2a1a00;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.cb-tin button.cb-phu{background:rgba(255,255,255,.08);color:#eef1ff;font-weight:500}
.cb-phong{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.cb-tin .cb-phong button{margin-top:0}
/* hàng chọn đồng hồ: năm nút, ba nút một hàng (không đếm giờ và giây mỗi nước trên, phút cả ván dưới) */
.cb-hang-gio .cb-chon{flex:1 1 28%}
/* bảng bàn trống trong quán dài hơn màn hình điện thoại nhỏ (luật, đồng hồ, quân, mức máy): nút Ngồi bàn nổi ở đáy bảng, khỏi phải cuộn tìm */
.cb-tin button.cb-ngoiban{position:sticky;bottom:0;box-shadow:0 -10px 14px rgba(23,21,58,.85)}
/* chơi qua mạng: ô nhập tên */
.cb-o-ten{box-sizing:border-box;width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);
  color:#eef1ff;font:inherit;font-size:16px}
.cb-o-ten:focus{outline:none;border-color:#ffd77a}
.cb-chon small{display:block;font-size:10.5px;font-weight:400;opacity:.75;line-height:1.1}
.cb-tin .cb-trai{text-align:left}
/* ván mới: ba lối lớn */
.cb-tin button.cb-lua{display:flex;align-items:center;gap:14px;width:100%;height:auto;min-height:72px;margin-top:10px;padding:12px 14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eef1ff;text-align:left;font-weight:400}
.cb-tin button.cb-lua:hover{border-color:rgba(255,215,120,.6);background:rgba(255,215,120,.1)}
.cb-lua-hinh{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,215,120,.14);color:#ffd77a}
.cb-lua-hinh svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.cb-lua-chu{display:flex;flex-direction:column;gap:3px;min-width:0}
.cb-lua-chu b{font-size:16px;color:#ffe6a6;font-weight:600}
.cb-lua-chu i{font-style:normal;font-size:13px;line-height:1.35;color:rgba(238,241,255,.7)}
.cb-tin button.cb-lui{display:block;width:auto;height:32px;margin:-6px auto 2px -4px;padding:0 6px;background:none;color:rgba(238,241,255,.7);font-size:14px;font-weight:500}
.cb-tin button.cb-chu{height:auto;margin-top:14px;padding:6px;background:none;color:rgba(238,241,255,.62);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
.cb-tin button:disabled{opacity:.42;cursor:default}
/* chờ ở bàn: ba ghế một hàng */
.cb-ghe-hang{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:4px 0 10px}
.cb-ghe-o{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.cb-ghe-o i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 1px rgba(0,0,0,.35)}
.cb-ghe-o b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#eef1ff}
.cb-ghe-o small{font-size:11px;line-height:1.3;color:rgba(238,241,255,.55);text-align:center}
.cb-ghe-trong{border-style:dashed;opacity:.7}
.cb-ghe-minh{border-color:rgba(255,215,120,.6);background:rgba(255,215,120,.1)}
.cb-tin button.cb-batdau-phong{height:auto;min-height:48px;padding:7px 12px;line-height:1.25}
.cb-batdau-phong small{display:block;font-size:12.5px;font-weight:500;opacity:.78}
.cb-tin button + .cb-meo{margin-top:12px}
.cb-tin button.cb-vaoban{display:flex;align-items:center;justify-content:center;gap:10px}
.cb-vaoban i{width:16px;height:16px;border-radius:50%;box-shadow:0 0 0 2px rgba(0,0,0,.25)}
/* chủ bàn duyệt người xin vào */
.cb-tin .cb-xin{display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 8px 8px 12px;border-radius:12px;border:1px solid rgba(255,215,120,.4);background:rgba(255,215,120,.1)}
.cb-tin .cb-xin span{flex:1;min-width:0;font-size:13.5px;line-height:1.3;color:#eef1ff;text-align:left;overflow-wrap:anywhere}
.cb-xin span i{display:inline-block;width:11px;height:11px;margin-right:6px;border-radius:50%;vertical-align:-1px;box-shadow:0 0 0 1px rgba(255,255,255,.35)}
.cb-tin .cb-xin button.cb-duyet{flex:none;width:auto;height:36px;margin:0;padding:0 12px;border-radius:10px;font-size:14px}
/* quán cờ phủ kín khung trò như quán bida: đầu, hình quán, hàng nút 20 bàn; bảng một bàn hiện đè lên, nền mờ nhẹ cho quán vẫn
   thấy ở sau */
.cb-quan{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);
  background:linear-gradient(#4a3828,#6e5440)}
.cb-quan[hidden]{display:none}
.cb-quan-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 4px 16px;min-height:52px}
.cb-quan-dau button{flex:none;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:16px;cursor:pointer}
.cb-quan-dau .cb-quan-lui{font-size:24px;line-height:1}
.cb-quan-ten{flex:1;min-width:0;margin:0;line-height:1.3}
.cb-quan-ten b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(17px,5vw,21px);font-weight:600;color:#ffe2a0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-quan-ten span{display:block;font-size:12.5px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums}
.cb-quan-khung{position:relative;flex:1 1 0;min-height:200px}
.cb-quan-cv{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
.cb-quan-duoi{flex:none;padding:4px 12px 10px}
.cb-quan-ds{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:4px;max-width:640px;margin:0 auto}
.cb-quan-ds button.cb-quan-o{display:block;width:100%;height:32px;margin:0;padding:0;border:1px solid transparent;border-radius:8px;font:inherit;font-size:12px;font-weight:700;
  color:#fff;background:#2a2a30;cursor:pointer;font-variant-numeric:lining-nums}
.cb-quan-ds button.cb-quan-trong{background:#187a4b;border-color:rgba(255,215,110,.85)}
.cb-quan-ds button.cb-quan-cho{background:#a8650f}
.cb-quan-ds button.cb-quan-choi{color:rgba(255,255,255,.7)}
.cb-quan-meo{margin:6px 0 0;font-size:12px;line-height:1.4;color:rgba(238,241,255,.55);text-align:center}
.coba.cb-o-quan .cb-tin{background:rgba(30,20,12,.3)}
.co-nut-cai .cb-quan-dau{padding-right:204px}
@media (max-width:479px){
  .co-nut-cai .cb-quan-dau{padding-top:calc(env(safe-area-inset-top,0px) + 54px);padding-right:14px}
}
@media (max-width:640px){
  .coba.cb-o-quan .cb-tin{align-items:flex-end}
}
@media (min-width:900px){                       /* màn rộng: bảng của bàn nằm phía bên kia quán, bàn đang chọn vẫn thấy */
  .coba.cb-o-quan .cb-tin[data-ben="phai"]{justify-content:flex-end;padding-right:max(24px,5vw)}
  .coba.cb-o-quan .cb-tin[data-ben="trai"]{justify-content:flex-start;padding-left:max(24px,5vw)}
}
@media (max-height:600px){
  .cb-dau{min-height:44px;padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
  .cb-nha{padding:2px 12px 4px}
  .cb-the{padding:4px 8px}
  .cb-duoi{padding:4px 14px 8px}
  .cb-nut button{height:38px}
  .cb-xem button{height:34px}
}
/* trò chuyện ở bàn cờ (như quán bida): nút ở đầu khung có số lời chưa đọc, con mắt số người xem, bảng trò chuyện (điện thoại: tấm trượt
   từ dưới lên, nửa trên vẫn thấy bàn; màn rộng: khung nổi góc phải dưới), bong bóng lời của người khác, biểu cảm bay lên trên bàn */
.cb-ten b{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-dau .cb-chat-nut{position:relative;display:grid;place-items:center;padding:0;color:#ffe2a0}
.cb-dau .cb-chat-nut[hidden]{display:none}
.cb-chat-nut svg,.cb-tin .cb-chat-mo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.cb-tin .cb-chat-mo svg{width:18px;height:18px;margin-right:7px;vertical-align:-4px}
.cb-chat-so{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#e5483b;
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:lining-nums;animation:cb-noi .4s cubic-bezier(.3,1.8,.5,1)}
.cb-mat-xem{flex:none;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#ffe2a0;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.cb-mat-xem[hidden]{display:none}
.cb-mat-xem svg{width:18px;height:18px}
.cb-mat-xem.cb-nay{animation:cb-mat-nay .7s cubic-bezier(.3,1.6,.5,1)}
.cb-chat{position:absolute;left:0;right:0;bottom:0;z-index:11;display:flex;flex-direction:column;max-height:62%;
  padding-bottom:env(safe-area-inset-bottom,0px);border-radius:20px 20px 0 0;background:linear-gradient(#22204a,#17153a);
  border:1px solid rgba(255,255,255,.14);border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.5);-webkit-user-select:text;user-select:text}
.cb-chat[hidden]{display:none}
.cb-chat-dau{flex:none;display:flex;align-items:center;gap:8px;padding:12px 10px 4px 16px}
.cb-chat-dau b{flex:1;min-width:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:600;color:#ffe2a0;
  font-variant-numeric:lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cb-chat-dau button{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:15px;cursor:pointer}
.cb-chat-ds{flex:1 1 auto;min-height:96px;overflow-y:auto;padding:2px 14px 8px;overscroll-behavior:contain}
.cb-chat-loi{width:fit-content;max-width:85%;margin:6px 0 0;padding:7px 11px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.08);
  font-size:14px;line-height:1.4;color:#eef1ff;overflow-wrap:anywhere}
.cb-chat-loi b{display:block;font-size:12px;font-weight:600}
.cb-chat-loi small{font-size:11px;font-weight:400;color:rgba(238,241,255,.5)}
.cb-chat-minh{margin-left:auto;border-radius:14px 14px 4px 14px;background:rgba(255,215,120,.2);color:#fff4d6}
.cb-chat-cho{opacity:.55}
.cb-chat-vach{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,241,255,.45)}
.cb-chat-vach::before,.cb-chat-vach::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.cb-chat-trong{margin:18px 0;font-size:13.5px;color:rgba(238,241,255,.55);text-align:center}
.cb-chat-nhanh{flex:none;display:flex;gap:6px;overflow-x:auto;padding:4px 12px 6px;scrollbar-width:none}
.cb-chat-nhanh::-webkit-scrollbar{display:none}
.cb-chat-nhanh button{flex:none;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,215,120,.35);background:rgba(255,215,120,.08);
  color:#ffe6a6;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.cb-chat-go{flex:none;display:flex;gap:8px;margin:0;padding:2px 12px 4px}
.cb-chat-o{flex:1;min-width:0;height:44px;box-sizing:border-box;padding:0 14px;border-radius:22px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25);color:#eef1ff;font:inherit;font-size:16px}
.cb-chat-o:focus{outline:none;border-color:#ffd77a}
.cb-chat-go button{flex:none;height:44px;padding:0 18px;border:0;border-radius:22px;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.cb-chat-meo{flex:none;margin:2px 14px 10px;font-size:11.5px;line-height:1.4;color:rgba(238,241,255,.5);text-align:center}
.cb-chat-bong{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:11;display:flex;flex-direction:column;gap:6px;
  padding:0 8px;pointer-events:none}
.cb-chat-bong .cb-bong{display:block;width:max-content;max-width:min(260px,100%);margin:0;padding:6px 11px;
  border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(16,14,40,.94);color:#eef1ff;font:inherit;font-size:13.5px;line-height:1.35;
  text-align:left;overflow-wrap:anywhere;pointer-events:auto;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.cb-chat-bong .cb-bong-moi{transform-origin:50% 0;animation:cb-bong .42s cubic-bezier(.2,1.5,.4,1)}
.cb-bong b{margin-right:6px;font-weight:600}
.cb-chat-doc{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.cb-chat-bieu{flex:none;display:flex;gap:4px;padding:8px 12px 2px}
.cb-chat-bieu button{flex:1 1 0;min-width:0;height:44px;padding:0;border:0;border-radius:14px;background:rgba(255,255,255,.06);
  font:inherit;font-size:25px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,background-color .15s}
.cb-chat-bieu button:hover{background:rgba(255,215,120,.14)}
.cb-chat-bieu button:active{transform:scale(.84);background:rgba(255,215,120,.24)}
.cb-bieu-dong{display:inline-block;font-style:normal;line-height:1}
.cb-chat-bieu .cb-bieu-dong{animation:cb-nhun 2.8s ease-in-out var(--tre,0s) infinite}
.cb-chat-bieu button:hover .cb-bieu-dong,.cb-chat-bieu button:focus-visible .cb-bieu-dong,.cb-chat-bieu button:active .cb-bieu-dong{animation:var(--dieu) .9s ease-in-out infinite}
.cb-chat-loi.cb-chat-bieu-loi{padding:0 4px;background:none}
.cb-chat-bieu-loi .cb-bieu-dong{margin-top:2px;font-size:46px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.cb-chat-bieu-loi.cb-moi .cb-bieu-dong,.cb-bong-bieu .cb-bieu-dong{animation:var(--dieu) .9s ease-in-out 3}
.cb-chat-bong .cb-bong.cb-bong-bieu{display:flex;align-items:center;padding:4px 12px 4px 11px}
.cb-bong-bieu .cb-bieu-dong{font-size:30px}
.cb-emo{display:inline-block}
.cb-chat-loi.cb-moi .cb-emo,.cb-bong-moi .cb-emo,.cb-chat-nhanh button:hover .cb-emo{animation:cb-nhay .7s cubic-bezier(.3,1.6,.5,1) 2}
.cb-chat-loi.cb-moi{transform-origin:0 100%;animation:cb-vao .38s cubic-bezier(.2,1.4,.4,1)}
.cb-chat-minh.cb-moi{transform-origin:100% 100%}
.cb-chat-bieu-loi.cb-moi{animation:none}
.cb-bay{position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none}
.cb-bay-mot{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 96px);margin-left:-.5em;line-height:1;opacity:0;
  animation:cb-bay-len 2.2s cubic-bezier(.25,.7,.35,1) forwards;will-change:transform,opacity;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.cb-bay-mot .cb-bieu-dong{animation:var(--dieu) .9s ease-in-out infinite}
.cb-dau .cb-chat-nut.cb-rung{animation:cb-rung .8s ease-in-out}
.coba [data-bieu="vo-tay"]{--dieu:cb-vo-tay}
.coba [data-bieu="lua"]{--dieu:cb-lua;transform-origin:50% 85%}
.coba [data-bieu="cuoi"]{--dieu:cb-cuoi}
.coba [data-bieu="wow"]{--dieu:cb-wow}
.coba [data-bieu="tram"]{--dieu:cb-tram}
.coba [data-bieu="tot"]{--dieu:cb-tot;transform-origin:50% 100%}
/* quân tốt ♟️ là emoji màu đen: viền sáng cho khỏi chìm vào nền tối (trong bảng, bong bóng, lúc bay) */
.coba .cb-bieu-dong[data-bieu="tot"]{filter:drop-shadow(0 0 1px #fff) drop-shadow(0 0 3px rgba(255,236,190,.85))}
.coba [data-bieu="khoc"]{--dieu:cb-khoc}
.coba [data-bieu="tim"]{--dieu:cb-tim}
@keyframes cb-nhun{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes cb-nhay{35%{transform:translateY(-5px) scale(1.25)}70%{transform:translateY(0) scale(.95)}}
@keyframes cb-vao{from{opacity:0;transform:translateY(8px) scale(.85)}}
@keyframes cb-bong{from{opacity:0;transform:translateY(-8px) scale(.6)}}
@keyframes cb-bay-len{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1;transform:translate(var(--x1),-40px) scale(1.15) rotate(var(--r1))}
  70%{opacity:1}100%{opacity:0;transform:translate(var(--x2),var(--y)) scale(.8) rotate(var(--r2))}}
@keyframes cb-rung{20%{transform:rotate(-16deg) scale(1.15)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
@keyframes cb-noi{from{transform:scale(0)}}
@keyframes cb-mat-nay{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
@keyframes cb-vo-tay{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.22) rotate(-12deg)}40%{transform:scale(.9) rotate(5deg)}60%{transform:scale(1.18) rotate(-8deg)}80%{transform:scale(.96) rotate(2deg)}}
@keyframes cb-lua{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(1.1,.9) skewX(6deg)}50%{transform:scale(.93,1.15) skewX(-5deg)}75%{transform:scale(1.05,.95) skewX(3deg)}}
@keyframes cb-cuoi{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg) translateY(-3px)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg) translateY(-3px)}80%{transform:rotate(8deg)}}
@keyframes cb-wow{0%{transform:scale(.5)}45%{transform:scale(1.32)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes cb-tram{0%{opacity:0;transform:scale(1.9) rotate(-20deg)}55%{opacity:1;transform:scale(.88) rotate(4deg)}78%{transform:scale(1.08) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
/* quân tốt tiến hai ô: nhún xuống lấy đà, bật lên, chạm đất, bật thêm một bước */
@keyframes cb-tot{0%,100%{transform:translateY(0) scale(1)}15%{transform:translateY(0) scale(1.12,.86)}35%{transform:translateY(-12px) scale(.94,1.08)}
  52%{transform:translateY(0) scale(1.1,.9)}70%{transform:translateY(-7px) scale(.97,1.04)}85%{transform:translateY(0) scale(1.04,.96)}}
@keyframes cb-khoc{0%,100%{transform:translateX(0)}12%,36%,60%{transform:translateX(-3px) rotate(-4deg)}24%,48%,72%{transform:translateX(3px) rotate(4deg)}}
@keyframes cb-tim{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(.95)}45%{transform:scale(1.2)}60%{transform:scale(1)}}
.coba.cb-co-chat.cb-co-tin .cb-bao{top:calc(env(safe-area-inset-top,0px) + 60px);bottom:auto}
/* ô nói ở quán: nút 💬 trên đầu quán mở một hàng gõ ngay dưới đầu quán; bảng chờ ở bàn có ô nói riêng (bảng che mất đầu quán) */
.cb-quan-dau{position:relative}
.cb-quan-dau .cb-loi-nut{font-size:17px;line-height:1}
.cb-loi-hang{position:absolute;top:100%;left:16px;right:16px;z-index:4;display:flex;gap:6px;padding:6px;border-radius:14px;
  background:rgba(40,28,18,.96);border:1px solid rgba(255,226,160,.25);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.cb-loi-hang[hidden]{display:none}
.cb-loi-o{flex:1;min-width:0;height:38px;box-sizing:border-box;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);
  color:#fff;font:inherit;font-size:15px}
.cb-loi-o:focus{outline:none;border-color:#ffd77a}
.cb-quan-dau .cb-loi-hang button{width:auto;height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;background:#c99a52;border-color:transparent;color:#1b130c}
/* lời đang nói ở ghế (ngồi chờ ở bàn): bong bóng nhỏ ngay dưới tên trong bảng chờ, 8 giây */
.cb-ghe-o .cb-ghe-loi{display:block;max-width:100%;margin-top:5px;padding:4px 8px;border-radius:10px;background:#fff8e6;color:#3b2a12;font-style:normal;
  font-size:12px;line-height:1.3;overflow-wrap:anywhere}
.cb-tin .cb-loi-ban{display:flex;gap:6px;margin:2px 0 10px}
.cb-tin .cb-loi-ban .cb-loi-o{height:44px;font-size:16px;background:rgba(0,0,0,.25)}
.cb-tin .cb-loi-ban button{flex:none;width:auto;height:44px;margin:0;padding:0 16px;border-radius:12px;font-size:15px}
/* hỏi tên trước khi vào quán */
.cb-ten-quan{display:flex;flex-direction:column;gap:10px;margin:10px 0 6px}
.cb-tin .cb-ten-quan button{margin-top:0}
.cb-tin .cb-loi-ten{margin:0;color:#ffb38a;font-size:13.5px}
@media (min-width:720px){
  .cb-chat{left:auto;right:16px;bottom:16px;width:360px;max-height:min(520px,calc(100% - 96px));border-radius:20px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.cb-chat-bong .cb-bong-moi{animation:none}
  .cb-bieu-dong,.cb-emo,.cb-chat-loi.cb-moi,.cb-dau .cb-chat-nut.cb-rung,.cb-chat-so,.cb-mat-xem.cb-nay{animation:none!important}.cb-bay{display:none}}

/* ---------- Bida lỗ (assets/bida.js) — cùng dáng với Cờ vua ba người ---------- */
.bida{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;background:#0b1a16;color:#eef1ff;
  background:radial-gradient(120% 80% at 50% 40%,#12302a 0%,#0b1a16 60%,#09110f 100%);
  padding-bottom:env(safe-area-inset-bottom,0px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bida.hien{display:flex}
.bd-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 6px 16px;min-height:52px}
.bd-dau button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:16px;cursor:pointer}
/* tập một mình: cụm 2D | 3D cạnh nút ? — ô đang chọn sáng vàng */
.bd-dau .bd-cach3{flex:none;display:flex}
.bd-dau .bd-cach3[hidden]{display:none}
.bd-dau .bd-cach3 button{width:auto;padding:0 9px;border-radius:0;margin-left:-1px;font-size:13.5px;font-weight:700;letter-spacing:.02em;color:rgba(238,241,255,.72)}
.bd-dau .bd-cach3 button:first-child{margin-left:0;border-radius:18px 0 0 18px}
.bd-dau .bd-cach3 button:last-child{border-radius:0 18px 18px 0}
.bd-dau .bd-cach3 button.bd-bat{position:relative;border-color:#ffd77a;background:rgba(255,215,120,.18);color:#ffe6a6}
.bd-ten{flex:1;min-width:0;margin:0;line-height:1.3}
.bd-ten b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;color:#ffe2a0}
.bd-ten span{display:block;font-size:12.5px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-nguoi{display:flex;gap:6px;padding:2px 12px 4px}
.bd-nguoi:empty{display:none}
.bd-the{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;padding:5px 8px;border-radius:12px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.bd-the b{font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-the span{min-height:14px;font-size:11px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-the em{display:flex;gap:2px;margin-top:2px;font-style:normal}
/* bảng lật số (bida Libre, bida dù): bảng gỗ nhỏ, hai tấm số giấy ngà treo trên khoen; tấm cũ lật lên qua khoen (xoay quanh mép trên, mặt
   sau ẩn), "+1" bay lên, cả bảng sáng một nhịp. Hàng ba, bốn người thì tấm nhỏ lại, thẻ hẹp quá thì bảng xuống dưới tên */
.bd-the.bd-the-diem{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 8px}
.bd-the-chu{flex:1 1 44px;min-width:0;display:flex;flex-direction:column;gap:1px}
.bd-bang-lat{position:relative;flex:none;display:flex;gap:3px;padding:6px 4px 4px;border-radius:7px;background:linear-gradient(#4a3424,#2a1c12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 2px 6px rgba(0,0,0,.45)}
.bd-lat{position:relative;width:19px;height:26px;perspective:140px}
.bd-lat::before,.bd-lat::after{content:"";position:absolute;top:-4px;z-index:3;width:3px;height:7px;border-radius:2px;background:linear-gradient(90deg,#8f8a7c,#f2ecdc 50%,#8f8a7c)}
.bd-lat::before{left:4px}
.bd-lat::after{right:4px}
.bd-lat i{position:absolute;inset:0;display:grid;place-items:center;border-radius:3px;background:linear-gradient(#fffcf3,#f4eedd 49%,#e4dcc7 51%,#efe8d6);
  color:#1b1814;font:800 19px/1 "Be Vietnam Pro",system-ui,sans-serif;font-style:normal;font-variant-numeric:lining-nums tabular-nums;box-shadow:0 1px 2px rgba(0,0,0,.5)}
.bd-lat-cu{z-index:2;transform-origin:50% 0;backface-visibility:hidden;-webkit-backface-visibility:hidden;animation:bd-lat-len .65s cubic-bezier(.5,0,.25,1) forwards}
.bd-lat-them{position:absolute;right:-8px;top:-14px;z-index:4;color:#ffd77a;font:800 14px/1 "Be Vietnam Pro",system-ui,sans-serif;font-style:normal;
  text-shadow:0 1px 4px rgba(0,0,0,.7);pointer-events:none;opacity:0;animation:bd-lat-them 1.2s ease-out forwards}
.bd-bang-an{animation:bd-bang-an .9s ease-out}
.bd-nguoi-dong .bd-bang-lat{padding:5px 3px 3px}
.bd-nguoi-dong .bd-lat{width:15px;height:21px}
.bd-nguoi-dong .bd-lat i{font-size:15px}
.bd-nguoi-dong .bd-lat::before{left:3px}
.bd-nguoi-dong .bd-lat::after{right:3px}
@keyframes bd-lat-len{0%{transform:rotateX(0);filter:brightness(1)}100%{transform:rotateX(100deg);filter:brightness(.55)}}
@keyframes bd-lat-them{0%{opacity:0;transform:translateY(8px) scale(.6)}18%{opacity:1;transform:translateY(0) scale(1.2)}100%{opacity:0;transform:translateY(-18px) scale(1)}}
@keyframes bd-bang-an{25%{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 0 0 2px rgba(255,215,120,.95),0 0 18px rgba(255,215,120,.6)}}
@media (prefers-reduced-motion:reduce){.bd-lat-cu,.bd-lat-them{display:none}.bd-bang-an{animation:none}}
.bd-bai{display:flex;align-items:center;gap:8px;padding:0 12px 4px}
.bd-bai[hidden]{display:none}
.bd-bai p{flex:none;margin:0;max-width:64px;font-size:11.5px;line-height:1.25;color:rgba(238,241,255,.6)}
.bd-bai div{display:flex;gap:4px;overflow-x:auto}
.bd-la{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;min-width:30px;height:40px;padding:0 3px;border-radius:6px;
  background:#f6f2e8;color:#1b1b1f;box-shadow:0 1px 3px rgba(0,0,0,.35);line-height:1}
.bd-la b{font-size:14px;font-weight:700}
.bd-la i{font-size:12px;font-style:normal}
.bd-la small{font-size:8.5px;color:#555}
.bd-la-do{color:#c4261d}
/* quán bida phủ kín khung trò (người dùng: "Quán bida cho to full đi đừng làm popup"): đầu, hình quán, hàng nút 16 bàn; bảng một
   bàn hiện đè lên, nền mờ nhẹ cho quán vẫn thấy ở sau */
.bd-quan{position:absolute;inset:0;z-index:8;display:flex;flex-direction:column;padding-bottom:env(safe-area-inset-bottom,0px);
  background:linear-gradient(#120e0b,#2b2018)}
.bd-quan[hidden]{display:none}
.bd-quan-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 4px 16px;min-height:52px}
.bd-quan-dau button{flex:none;width:36px;height:36px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:16px;cursor:pointer}
.bd-quan-dau .bd-quan-lui{font-size:24px;line-height:1}
.bd-quan-dau{position:relative}
.bd-quan-dau .bd-bc-nut{font-size:19px;line-height:1}
.bd-bc-hang{position:absolute;top:100%;right:16px;z-index:4;display:flex;flex-wrap:wrap;justify-content:center;gap:4px;max-width:calc(100% - 32px);padding:6px;
  border-radius:16px;background:rgba(24,18,13,.96);border:1px solid rgba(255,226,160,.25);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.bd-bc-hang[hidden]{display:none}
.bd-ten-quan{display:flex;flex-direction:column;gap:10px;margin:10px 0 6px}
.bd-quan-dau .bd-noi-nut{font-size:17px;line-height:1}
.bd-noi-hang{position:absolute;top:100%;left:16px;right:16px;z-index:4;display:flex;gap:6px;padding:6px;border-radius:14px;
  background:rgba(24,18,13,.96);border:1px solid rgba(255,226,160,.25);box-shadow:0 10px 26px rgba(0,0,0,.45)}
.bd-noi-hang[hidden]{display:none}
.bd-noi-o{flex:1;min-width:0;height:38px;padding:0 12px;border-radius:10px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:15px}
.bd-quan-dau .bd-noi-hang button{width:auto;height:38px;padding:0 14px;border-radius:10px;font-size:14px;font-weight:600;background:#c99a52;border-color:transparent;color:#1b130c}
.bd-loi-ten{margin:0;color:#ffb38a;font-size:13.5px}
.bd-quan-dau .bd-bc-hang button{width:40px;height:40px;font-size:23px;line-height:1;border-color:transparent;background:rgba(255,255,255,.05)}
.bd-quan-dau .bd-bc-hang button:hover,.bd-quan-dau .bd-bc-hang button:focus-visible{background:rgba(255,226,160,.18)}
.bd-quan-ten{flex:1;min-width:0;margin:0;line-height:1.3}
.bd-quan-ten b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:clamp(17px,5vw,21px);font-weight:600;color:#ffe2a0;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-quan-ten span{display:block;font-size:12.5px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums}
.bd-quan-khung{position:relative;flex:1 1 0;min-height:200px}
.bd-quan-cv{position:absolute;inset:0;display:block;width:100%;height:100%;cursor:pointer;touch-action:manipulation}
.bd-quan-duoi{flex:none;padding:4px 12px 10px}
.bd-quan-ds{display:grid;grid-template-columns:repeat(8,minmax(0,1fr));gap:4px;max-width:640px;margin:0 auto}
.bd-quan-ds button.bd-quan-o{display:block;width:100%;height:32px;margin:0;padding:0;border:1px solid transparent;border-radius:8px;font:inherit;font-size:12px;font-weight:700;
  color:#fff;background:#2a2a30;cursor:pointer}
.bd-quan-ds button.bd-quan-trong{background:#187a4b;border-color:rgba(255,215,110,.85)}
.bd-quan-ds button.bd-quan-cho{background:#a8650f}
.bd-quan-ds button.bd-quan-choi{color:rgba(255,255,255,.7)}
.bd-quan-meo{margin:6px 0 0;font-size:12px;line-height:1.4;color:rgba(238,241,255,.55);text-align:center}
.bida.bd-o-quan .bd-tin{background:rgba(4,10,9,.42)}
@media (max-width:640px){
  .bida.bd-o-quan .bd-tin{align-items:flex-end}
}
@media (min-width:900px){                       /* màn rộng: bảng của bàn nằm phía bên kia quán, bàn đang chọn vẫn thấy */
  .bida.bd-o-quan .bd-tin[data-ben="phai"]{justify-content:flex-end;padding-right:max(24px,5vw)}
  .bida.bd-o-quan .bd-tin[data-ben="trai"]{justify-content:flex-start;padding-left:max(24px,5vw)}
}
.bd-xem-bai{width:100%;height:40px;border-radius:10px;border:1px dashed rgba(255,215,110,.55);background:rgba(255,215,110,.08);color:#ffe6a6;font:inherit;font-size:13.5px;cursor:pointer}
.bd-the.bd-dang{border-color:rgba(255,214,120,.8);background:rgba(255,214,120,.1)}
.bd-the.bd-dang span{color:#ffe6a6}
/* thời gian mỗi cú (bàn trong quán): vạch giờ dưới thẻ người đang đánh ngắn dần; 10 giây cuối đỏ, viền thẻ nhấp nháy */
.bd-the.bd-co-gio{position:relative}
.bd-the.bd-co-gio::after{content:"";position:absolute;left:10px;right:10px;bottom:2px;height:3px;border-radius:2px;pointer-events:none;
  background:linear-gradient(90deg,#ffd77a calc(var(--gio,1)*100%),rgba(255,255,255,.14) 0)}
.bd-the.bd-gio-gap::after{background:linear-gradient(90deg,#ff5a3c calc(var(--gio,1)*100%),rgba(255,255,255,.14) 0)}
.bd-the.bd-gio-gap{animation:bd-gio-gap 1s ease-in-out infinite}
@keyframes bd-gio-gap{50%{box-shadow:0 0 0 2px rgba(255,90,60,.6)}}
@media (prefers-reduced-motion:reduce){.bd-the.bd-gio-gap{animation:none}}
.bd-mini{flex:none;width:10px;height:10px;border-radius:50%;box-shadow:inset -1px -1px 2px rgba(0,0,0,.35),0 0 0 .5px rgba(0,0,0,.4)}
.bd-mini.bd-mat{opacity:.18}
.bd-canh{position:relative;flex:1 1 0;min-height:160px;overflow:hidden}
.bd-cv{position:absolute;inset:0;display:block;touch-action:none}
/* lời báo nằm đè vùng tiêu đề trên cùng, không đè lên bàn (người dùng: "điện thoại tôi thấy toast che mất bàn á" — bàn chiếm gần hết khung,
   lời báo ở đầu khung bàn che băng trên với hàng số); trên các nút ✕, 🔗, Cài app một lúc, chạm là tắt */
.bd-bao{position:fixed;left:50%;top:calc(env(safe-area-inset-top,0px) + 6px);z-index:12;transform:translateX(-50%);width:max-content;max-width:min(600px,calc(100% - 16px));
  box-sizing:border-box;margin:0;padding:7px 14px;border-radius:12px;background:rgba(12,28,24,.97);border:1px solid rgba(255,214,120,.45);font-size:13px;line-height:1.4;
  text-align:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.5)}
.bd-bao[hidden]{display:none}
.bida.bd-co-tin .bd-bao{position:fixed;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 18px)}
/* chọn xoáy: bi chủ to, chấm đỏ là đầu cơ */
.bd-xoay-bang{position:absolute;left:50%;bottom:10px;z-index:9;transform:translateX(-50%);width:min(250px,80%);padding:14px 14px 12px;border-radius:18px;
  background:rgba(12,28,24,.96);border:1px solid rgba(255,255,255,.14);box-shadow:0 14px 34px rgba(0,0,0,.5);text-align:center}
.bd-xoay-bang[hidden]{display:none}
.bd-xoay-bang svg{display:block;width:170px;height:170px;margin:0 auto;touch-action:none;cursor:pointer}
/* dòng mô tả xoáy dài ngắn khác nhau (1–3 dòng): giữ chỗ đủ ba dòng, chữ nằm giữa — bảng neo đáy, chữ dài thêm một dòng là cả bảng cao
   lên, bi to bị đẩy khỏi ngón tay đang kéo (người dùng: "khi kéo chữ dài bị nhảy lên nhảy xuống") */
.bd-xoay-chu{display:flex;align-items:center;justify-content:center;min-height:4.05em;margin:8px 0 8px;font-size:14px;line-height:1.35;color:#ffe6a6}
.bd-nang{display:flex;flex-direction:column;gap:2px;margin:0 0 10px;font-size:13px;color:rgba(238,241,255,.75);text-align:left}
.bd-nang span{display:flex;justify-content:space-between;gap:8px}
.bd-nang b{color:#ffe6a6;font-weight:600}
.bd-nang input{width:100%;margin:4px 0 0;accent-color:#e9a93a}
.bd-nang-nho:not(:empty){margin-left:2px;font-size:12px;font-weight:600;color:#ffd77a}
.bd-xoay-nut{display:flex;gap:8px}
.bd-xoay-nut button{flex:1;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.bd-xoay-nut .bd-xoay-xong{border:0;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font-weight:700}
.bd-duoi{flex:none;padding:6px 14px 12px;border-top:1px solid rgba(255,255,255,.08)}
.bd-luot{margin:0 0 8px;min-height:20px;font-size:13.5px;line-height:1.4;text-align:center;color:rgba(238,241,255,.85)}
.bd-nut{display:flex;gap:10px;justify-content:center}
.bd-nut button{height:44px;padding:0 16px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;
  font:inherit;font-size:15px;cursor:pointer;display:flex;align-items:center;gap:8px}
.bd-nut button[hidden]{display:none}
/* góc nhìn 3D: ba nút liền một cụm ▲ ▼ ↺ trên dòng tiêu đề, cạnh 2D | 3D (phương án B — trước ở hàng nút dưới bàn); tới đầu thì nút mờ */
.bd-dau .bd-may3{flex:none;display:flex}
.bd-dau .bd-may3[hidden]{display:none}
.bd-dau .bd-may3 button{width:auto;padding:0 6px;border-radius:0;margin-left:-1px;display:flex;align-items:center;justify-content:center}
.bd-dau .bd-may3 button:first-child{margin-left:0;border-radius:18px 0 0 18px}
.bd-dau .bd-may3 button:last-child{border-radius:0 18px 18px 0}
.bd-dau .bd-may3 button:disabled{opacity:.35;cursor:default}
.bd-nut .bd-xoay span{position:relative;width:22px;height:22px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff,#e8e2d4 60%,#a9a396);box-shadow:0 0 0 1px rgba(0,0,0,.3)}
.bd-nut .bd-xoay i{position:absolute;left:50%;top:50%;width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:#d42a20}
.bd-nut .bd-xoay.bd-bat{border-color:#ffd77a;background:rgba(255,215,120,.18)}
.bd-nut .bd-xoay small:empty{display:none}
/* nút Ngắm ‹ › đầu trái hàng nút (phương án B — thay cặp + − ở cột trái), nút Đánh cuối hàng: có lực thì tô vàng, chưa có lực chỉ viền */
.bd-nut .bd-ngam{display:flex;flex:none;margin-right:auto}
.bd-nut .bd-ngam[hidden]{display:none}
.bd-nut .bd-ngam button{padding:0 13px;font-size:24px;line-height:1;touch-action:manipulation}
.bd-nut .bd-ngam button:first-child{border-radius:14px 0 0 14px}
.bd-nut .bd-ngam button:last-child{border-radius:0 14px 14px 0}
.bd-nut .bd-ngam b{display:flex;align-items:center;padding:0 7px;border-top:1px solid rgba(255,255,255,.18);border-bottom:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);font-size:12.5px;font-weight:600;color:rgba(238,241,255,.75)}
.bd-nut .bd-danh{margin-left:auto;border:0;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font-weight:700;touch-action:manipulation}
.bd-nut .bd-danh.bd-trong{border:1px solid rgba(255,215,120,.55);background:rgba(255,215,120,.08);color:#ffe6a6}
.bd-nut .bd-ngam button:disabled,.bd-nut .bd-danh:disabled{opacity:.4;cursor:default}
/* xoay ngang: hàng nút lên dòng tiêu đề (xepHang), nút thấp như nút tiêu đề; dưới bàn chỉ còn dòng lượt */
.bd-dau .bd-nut{flex:0 1 auto;min-width:0;gap:6px}
.bd-dau .bd-nut button{width:auto;height:36px;border-radius:12px;padding:0 11px;font-size:14px}
.bd-dau .bd-nut .bd-ngam{margin-right:0}
.bd-dau .bd-nut .bd-ngam button{padding:0 11px;font-size:22px}
.bd-dau .bd-nut .bd-ngam button:first-child{border-radius:12px 0 0 12px}
.bd-dau .bd-nut .bd-ngam button:last-child{border-radius:0 12px 12px 0}
.bd-dau .bd-nut .bd-danh{margin-left:0}
.bd-duoi .bd-luot:last-child{margin-bottom:0}
.bida.bd-hang-tren .bd-bao{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 4px)}
/* hàng chật thì gọn từng nấc (xepHang đo thật): bớt lề nút hai nấc, rồi mới bỏ chữ Ngắm; vẫn tràn thì cuộn ngang */
.bd-nut.bd-gon{gap:6px}
.bd-nut.bd-gon button,.bd-nut.bd-gon .bd-ngam button{padding:0 10px}
.bd-nut.bd-gon2{gap:4px}
.bd-nut.bd-gon2 button,.bd-nut.bd-gon2 .bd-ngam button{padding:0 7px}
.bd-nut.bd-gon2 .bd-ngam b{padding:0 5px}
.bd-nut.bd-gon3 .bd-ngam b{display:none}
.bd-nut.bd-cuon{justify-content:flex-start;overflow-x:auto;scrollbar-width:none}
.bd-nut.bd-cuon::-webkit-scrollbar{display:none}
/* nút đóng, chép link, Cài app nằm trên bảng của trò (như cờ ba người) */
.bida .xn-dong,.bida .nut-link,.bida .nut-cai{z-index:10}
.co-nut-cai .bd-dau,.co-nut-cai .bd-quan-dau{padding-right:204px}
@media (max-width:479px){
  .co-nut-cai .bd-dau,.co-nut-cai .bd-quan-dau{padding-top:calc(env(safe-area-inset-top,0px) + 54px);padding-right:14px}
}
.bd-tin{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);background:rgba(4,10,9,.72)}
.bd-tin[hidden]{display:none}
.bd-tin-trong{width:100%;max-width:420px;max-height:100%;overflow:auto;padding:22px 20px;border-radius:20px;background:linear-gradient(#173a32,#0f2621);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:center}
.bd-tin h2{margin:4px 0 12px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;color:#ffe2a0}
.bd-tin p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:rgba(238,241,255,.88);text-align:left}
.bd-tin p b{color:#ffe6a6;font-weight:600}
.bd-tin .bd-tin-nho{margin:0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(238,241,255,.5)}
.bd-tin .bd-meo{font-size:13px;color:rgba(238,241,255,.65);text-align:center}
.bd-tin .bd-nhan{margin:12px 0 6px;font-size:12.5px;color:rgba(238,241,255,.6)}
.bd-tin .bd-trai{text-align:left}
.bd-hang{display:flex;flex-wrap:wrap;gap:6px}
.bd-tin .bd-hang + .bd-meo{margin-top:8px}
.bd-chon{flex:1;min-width:0;min-height:42px;padding:4px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:14px;cursor:pointer}
.bd-chon small{display:block;font-size:10.5px;font-weight:400;opacity:.75;line-height:1.15}
.bd-chon.bd-bat{border-color:#ffd77a;background:rgba(255,215,120,.18);color:#ffe6a6;font-weight:600}
.bd-tin button:not(.bd-chon){display:block;width:100%;margin-top:10px;height:48px;border:0;border-radius:14px;background:linear-gradient(#ffd77a,#e9a93a);
  color:#2a1a00;font:inherit;font-size:16px;font-weight:700;cursor:pointer}
.bd-tin button.bd-phu{background:rgba(255,255,255,.08);color:#eef1ff;font-weight:500}
.bd-tin button:disabled{opacity:.42;cursor:default}
.bd-tin button + .bd-meo{margin-top:12px}
.bd-o-ten{box-sizing:border-box;width:100%;height:44px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.25);
  color:#eef1ff;font:inherit;font-size:16px}
.bd-o-ten:focus{outline:none;border-color:#ffd77a}
.bd-tin .bd-o-chung + .bd-o-chung{margin-top:8px}
/* ván mới: các lối lớn */
.bd-tin button.bd-lua{display:flex;align-items:center;gap:14px;width:100%;height:auto;min-height:68px;margin-top:10px;padding:11px 14px;border-radius:16px;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#eef1ff;text-align:left;font-weight:400}
.bd-tin button.bd-lua:hover{border-color:rgba(255,215,120,.6);background:rgba(255,215,120,.1)}
.bd-lua-hinh{flex:none;width:44px;height:44px;border-radius:12px;display:grid;place-items:center;background:rgba(255,215,120,.14);color:#ffd77a}
.bd-lua-hinh svg{width:26px;height:26px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.bd-lua-chu{display:flex;flex-direction:column;gap:3px;min-width:0}
.bd-lua-chu b{font-size:16px;color:#ffe6a6;font-weight:600}
.bd-lua-chu i{font-style:normal;font-size:13px;line-height:1.35;color:rgba(238,241,255,.7)}
.bd-tin button.bd-lui{display:block;width:auto;height:32px;margin:-6px auto 2px -4px;padding:0 6px;background:none;color:rgba(238,241,255,.7);font-size:14px;font-weight:500}
.bd-tin button.bd-chu{height:auto;margin-top:14px;padding:6px;background:none;color:rgba(238,241,255,.62);font-size:14px;font-weight:500;text-decoration:underline;text-underline-offset:3px}
/* phòng chờ: mã to, ghế, mã QR */
.bd-ghe-hang{display:grid;grid-template-columns:repeat(2,1fr);gap:6px;margin:4px 0 10px}
.bd-ghe-hang.bd-ghe-3{grid-template-columns:repeat(3,1fr)}
.bd-ghe-o{display:flex;flex-direction:column;align-items:center;gap:3px;min-width:0;padding:10px 6px;border-radius:12px;background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1)}
.bd-ghe-o b{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:14px;color:#eef1ff}
.bd-ghe-o small{font-size:11px;line-height:1.3;color:rgba(238,241,255,.55);text-align:center}
.bd-ghe-trong{border-style:dashed;opacity:.7}
.bd-ghe-minh{border-color:rgba(255,215,120,.6);background:rgba(255,215,120,.1)}
/* chủ bàn duyệt người xin vào: mỗi người một dòng, tên bên trái, Đồng ý / Không nhỏ bên phải */
.bd-tin .bd-xin{display:flex;align-items:center;gap:6px;margin-top:8px;padding:8px 8px 8px 12px;border-radius:12px;border:1px solid rgba(255,215,120,.4);background:rgba(255,215,120,.1)}
.bd-tin .bd-xin span{flex:1;min-width:0;font-size:13.5px;line-height:1.3;color:#eef1ff;text-align:left;overflow-wrap:anywhere}
.bd-tin .bd-xin button.bd-duyet{flex:none;width:auto;height:36px;margin:0;padding:0 12px;border-radius:10px;font-size:14px}
/* trò chuyện ở bàn (quán bida): nút ở đầu khung có số lời chưa đọc, bảng trò chuyện (điện thoại: tấm trượt từ dưới lên; màn rộng:
   khung nổi góc phải dưới), bong bóng lời của người khác */
.bd-dau .bd-chat-nut{position:relative;display:grid;place-items:center;padding:0;color:#ffe2a0}
.bd-dau .bd-chat-nut[hidden]{display:none}
.bd-mat-xem{flex:none;display:inline-flex;align-items:center;gap:4px;height:30px;padding:0 10px;border-radius:999px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#ffe2a0;font-size:13.5px;font-weight:600;font-variant-numeric:tabular-nums lining-nums}
.bd-mat-xem[hidden]{display:none}
.bd-mat-xem svg{width:18px;height:18px}
.bd-mat-xem.bd-nay{animation:bd-mat-nay .7s cubic-bezier(.3,1.6,.5,1)}
@keyframes bd-mat-nay{0%{transform:scale(1)}35%{transform:scale(1.3)}100%{transform:scale(1)}}
@media (prefers-reduced-motion:reduce){.bd-mat-xem.bd-nay{animation:none}}
.bd-chat-nut svg,.bd-tin .bd-chat-mo svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linejoin:round}
.bd-tin .bd-chat-mo svg{width:18px;height:18px;margin-right:7px;vertical-align:-4px}
.bd-chat-so{position:absolute;top:-5px;right:-6px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;border-radius:9px;background:#e5483b;
  color:#fff;font-size:11px;font-weight:700;line-height:18px;text-align:center;font-variant-numeric:lining-nums}
.bd-chat{position:absolute;left:0;right:0;bottom:0;z-index:11;display:flex;flex-direction:column;max-height:62%;
  padding-bottom:env(safe-area-inset-bottom,0px);border-radius:20px 20px 0 0;background:linear-gradient(#173a32,#0f2621);
  border:1px solid rgba(255,255,255,.14);border-bottom:0;box-shadow:0 -12px 40px rgba(0,0,0,.5);-webkit-user-select:text;user-select:text}
.bd-chat[hidden]{display:none}
.bd-chat-dau{flex:none;display:flex;align-items:center;gap:8px;padding:12px 10px 4px 16px}
.bd-chat-dau b{flex:1;min-width:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;font-weight:600;color:#ffe2a0;
  font-variant-numeric:lining-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bd-chat-dau button{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:15px;cursor:pointer}
.bd-chat-ds{flex:1 1 auto;min-height:96px;overflow-y:auto;padding:2px 14px 8px;overscroll-behavior:contain}
.bd-chat-loi{width:fit-content;max-width:85%;margin:6px 0 0;padding:7px 11px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.08);
  font-size:14px;line-height:1.4;color:#eef1ff;overflow-wrap:anywhere}
.bd-chat-loi b{display:block;font-size:12px;font-weight:600}
.bd-chat-loi small{font-size:11px;font-weight:400;color:rgba(238,241,255,.5)}
.bd-chat-minh{margin-left:auto;border-radius:14px 14px 4px 14px;background:rgba(255,215,120,.2);color:#fff4d6}
.bd-chat-cho{opacity:.55}
.bd-chat-vach{display:flex;align-items:center;gap:10px;margin:14px 0 4px;font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,241,255,.45)}
.bd-chat-vach::before,.bd-chat-vach::after{content:"";flex:1;height:1px;background:rgba(255,255,255,.12)}
.bd-chat-trong{margin:18px 0;font-size:13.5px;color:rgba(238,241,255,.55);text-align:center}
.bd-chat-nhanh{flex:none;display:flex;gap:6px;overflow-x:auto;padding:4px 12px 6px;scrollbar-width:none}
.bd-chat-nhanh::-webkit-scrollbar{display:none}
.bd-chat-nhanh button{flex:none;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,215,120,.35);background:rgba(255,215,120,.08);
  color:#ffe6a6;font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.bd-chat-go{flex:none;display:flex;gap:8px;margin:0;padding:2px 12px 4px}
.bd-chat-o{flex:1;min-width:0;height:44px;box-sizing:border-box;padding:0 14px;border-radius:22px;border:1px solid rgba(255,255,255,.2);
  background:rgba(0,0,0,.25);color:#eef1ff;font:inherit;font-size:16px}
.bd-chat-o:focus{outline:none;border-color:#ffd77a}
.bd-chat-go button{flex:none;height:44px;padding:0 18px;border:0;border-radius:22px;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;
  font:inherit;font-size:15px;font-weight:700;cursor:pointer}
.bd-chat-meo{flex:none;margin:2px 14px 10px;font-size:11.5px;line-height:1.4;color:rgba(238,241,255,.5);text-align:center}
.bd-chat-bong{position:absolute;left:0;right:0;top:calc(env(safe-area-inset-top,0px) + 58px);z-index:11;display:flex;flex-direction:column;gap:6px;
  padding:0 8px;pointer-events:none}
.bd-chat-bong .bd-bong{display:block;width:max-content;max-width:min(260px,100%);margin:0;padding:6px 11px;
  border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(8,16,14,.92);color:#eef1ff;font:inherit;font-size:13.5px;line-height:1.35;
  text-align:left;overflow-wrap:anywhere;pointer-events:auto;cursor:pointer;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.bd-chat-bong .bd-bong-moi{transform-origin:50% 0;animation:bd-bong .42s cubic-bezier(.2,1.5,.4,1)}
.bd-bong b{margin-right:6px;font-weight:600}
@keyframes bd-bong{from{opacity:0;transform:translateY(-8px) scale(.6)}}
.bd-chat-doc{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* biểu cảm động: hàng biểu cảm nhún nhẹ mời bấm (lệch nhịp theo --tre), di chuột hay chạm thì nhảy điệu riêng; lời là một biểu cảm thì
   vẽ to; lời mới hiện ra bật nảy, emoji trong lời nhún một nhịp; biểu cảm bay lên trên bàn; nút trò chuyện lắc khi có lời mới */
.bd-chat-bieu{flex:none;display:flex;gap:4px;padding:8px 12px 2px}
.bd-chat-bieu button{flex:1 1 0;min-width:0;height:44px;padding:0;border:0;border-radius:14px;background:rgba(255,255,255,.06);
  font:inherit;font-size:25px;line-height:1;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .12s,background-color .15s}
.bd-chat-bieu button:hover{background:rgba(255,215,120,.14)}
.bd-chat-bieu button:active{transform:scale(.84);background:rgba(255,215,120,.24)}
.bd-bieu-dong{display:inline-block;font-style:normal;line-height:1}
.bd-chat-bieu .bd-bieu-dong{animation:bd-nhun 2.8s ease-in-out var(--tre,0s) infinite}
.bd-chat-bieu button:hover .bd-bieu-dong,.bd-chat-bieu button:focus-visible .bd-bieu-dong,.bd-chat-bieu button:active .bd-bieu-dong{animation:var(--dieu) .9s ease-in-out infinite}
.bd-chat-loi.bd-chat-bieu-loi{padding:0 4px;background:none}
.bd-chat-bieu-loi .bd-bieu-dong{margin-top:2px;font-size:46px;filter:drop-shadow(0 6px 10px rgba(0,0,0,.35))}
.bd-chat-bieu-loi.bd-moi .bd-bieu-dong,.bd-bong-bieu .bd-bieu-dong{animation:var(--dieu) .9s ease-in-out 3}
.bd-chat-bong .bd-bong.bd-bong-bieu{display:flex;align-items:center;padding:4px 12px 4px 11px}
.bd-bong-bieu .bd-bieu-dong{font-size:30px}
.bd-emo{display:inline-block}
.bd-chat-loi.bd-moi .bd-emo,.bd-bong-moi .bd-emo,.bd-chat-nhanh button:hover .bd-emo{animation:bd-nhay .7s cubic-bezier(.3,1.6,.5,1) 2}
.bd-chat-loi.bd-moi{transform-origin:0 100%;animation:bd-vao .38s cubic-bezier(.2,1.4,.4,1)}
.bd-chat-minh.bd-moi{transform-origin:100% 100%}
.bd-chat-bieu-loi.bd-moi{animation:none}
.bd-bay{position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none}
.bd-bay-mot{position:absolute;bottom:calc(env(safe-area-inset-bottom,0px) + 84px);margin-left:-.5em;line-height:1;opacity:0;
  animation:bd-bay-len 2.2s cubic-bezier(.25,.7,.35,1) forwards;will-change:transform,opacity;filter:drop-shadow(0 4px 8px rgba(0,0,0,.4))}
.bd-bay-mot .bd-bieu-dong{animation:var(--dieu) .9s ease-in-out infinite}
.bd-dau .bd-chat-nut.bd-rung{animation:bd-rung .8s ease-in-out}
.bd-chat-so{animation:bd-noi .4s cubic-bezier(.3,1.8,.5,1)}
[data-bieu="vo-tay"]{--dieu:bd-vo-tay}
[data-bieu="lua"]{--dieu:bd-lua;transform-origin:50% 85%}
[data-bieu="cuoi"]{--dieu:bd-cuoi}
[data-bieu="wow"]{--dieu:bd-wow}
[data-bieu="tram"]{--dieu:bd-tram}
[data-bieu="bi8"]{--dieu:bd-bi8}
[data-bieu="khoc"]{--dieu:bd-khoc}
[data-bieu="tim"]{--dieu:bd-tim}
@keyframes bd-nhun{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes bd-nhay{35%{transform:translateY(-5px) scale(1.25)}70%{transform:translateY(0) scale(.95)}}
@keyframes bd-vao{from{opacity:0;transform:translateY(8px) scale(.85)}}
@keyframes bd-bay-len{0%{opacity:0;transform:translate(0,0) scale(.3)}12%{opacity:1;transform:translate(var(--x1),-40px) scale(1.15) rotate(var(--r1))}
  70%{opacity:1}100%{opacity:0;transform:translate(var(--x2),var(--y)) scale(.8) rotate(var(--r2))}}
@keyframes bd-rung{20%{transform:rotate(-16deg) scale(1.15)}40%{transform:rotate(12deg)}60%{transform:rotate(-8deg)}80%{transform:rotate(4deg)}}
@keyframes bd-noi{from{transform:scale(0)}}
@keyframes bd-vo-tay{0%,100%{transform:scale(1) rotate(0)}20%{transform:scale(1.22) rotate(-12deg)}40%{transform:scale(.9) rotate(5deg)}60%{transform:scale(1.18) rotate(-8deg)}80%{transform:scale(.96) rotate(2deg)}}
@keyframes bd-lua{0%,100%{transform:scale(1,1) skewX(0)}25%{transform:scale(1.1,.9) skewX(6deg)}50%{transform:scale(.93,1.15) skewX(-5deg)}75%{transform:scale(1.05,.95) skewX(3deg)}}
@keyframes bd-cuoi{0%,100%{transform:rotate(0)}20%{transform:rotate(-16deg) translateY(-3px)}40%{transform:rotate(14deg)}60%{transform:rotate(-10deg) translateY(-3px)}80%{transform:rotate(8deg)}}
@keyframes bd-wow{0%{transform:scale(.5)}45%{transform:scale(1.32)}70%{transform:scale(.92)}100%{transform:scale(1)}}
@keyframes bd-tram{0%{opacity:0;transform:scale(1.9) rotate(-20deg)}55%{opacity:1;transform:scale(.88) rotate(4deg)}78%{transform:scale(1.08) rotate(-3deg)}100%{transform:scale(1) rotate(0)}}
@keyframes bd-bi8{0%{transform:translateX(-14px) rotate(-360deg)}70%{transform:translateX(3px) rotate(12deg)}100%{transform:translateX(0) rotate(0)}}
@keyframes bd-khoc{0%,100%{transform:translateX(0)}12%,36%,60%{transform:translateX(-3px) rotate(-4deg)}24%,48%,72%{transform:translateX(3px) rotate(4deg)}}
@keyframes bd-tim{0%,100%{transform:scale(1)}15%{transform:scale(1.3)}30%{transform:scale(.95)}45%{transform:scale(1.2)}60%{transform:scale(1)}}
.bida.bd-co-chat .bd-bao{top:calc(env(safe-area-inset-top,0px) + 6px);bottom:auto}
@media (min-width:720px){
  .bd-chat{left:auto;right:16px;bottom:16px;width:360px;max-height:min(520px,calc(100% - 96px));border-radius:20px;border-bottom:1px solid rgba(255,255,255,.14);padding-bottom:0}
}
@media (prefers-reduced-motion:reduce){.bd-chat-bong .bd-bong-moi{animation:none}
  .bd-bieu-dong,.bd-emo,.bd-chat-loi.bd-moi,.bd-dau .bd-chat-nut.bd-rung,.bd-chat-so{animation:none!important}.bd-bay{display:none}}
@media (max-height:640px){
  .bd-dau{min-height:44px;padding-top:calc(env(safe-area-inset-top,0px) + 6px)}
  .bd-nguoi{padding:0 12px 2px}
  .bd-the{padding:3px 8px}
  .bd-duoi{padding:4px 14px 8px}
  .bd-luot{margin-bottom:5px}
  .bd-nut button{height:38px}
}

/* ---------- hôm nay ăn gì (assets/angi.js) ---------- */
.angi{position:fixed;inset:0;z-index:30;display:none;color:var(--ink);
  background:radial-gradient(120% 75% at 50% 0%,#351c10 0%,#1d120c 50%,#0f0a08 100%)}
.angi.hien{display:block}
.angi [hidden]{display:none!important}
.ag-ico{width:17px;height:17px;flex:none;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.ag-dong,.ag-tieng{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);width:34px;height:34px;padding:0;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.36);
  color:var(--ink);font-size:14px;line-height:1;-webkit-tap-highlight-color:transparent}
.ag-dong{right:16px}
.ag-tieng{left:16px}
.ag-dong:hover,.ag-tieng:hover{background:rgba(255,255,255,.12)}
.ag-tieng[aria-pressed="false"]{color:rgba(244,239,230,.45)}
.ag-trong{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 18px calc(env(safe-area-inset-bottom,0px) + 28px)}
.ag-trong>*{max-width:460px;margin-left:auto;margin-right:auto}
.ag-tieude{margin:0 auto 12px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;line-height:1.15;font-weight:600;color:#ffc59e}
.ag-the{display:flex;gap:4px;padding:4px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08);margin-bottom:8px}
.ag-the button{flex:1;min-width:0;padding:9px 6px;border-radius:10px;border:0;background:transparent;color:rgba(244,239,230,.62);
  font:inherit;font-size:14px;white-space:nowrap;cursor:pointer}
.ag-the button[aria-selected="true"]{background:rgba(255,134,87,.2);color:#ffd2b3}
.ag-bc{display:block;width:100%;margin:0 auto 4px;padding:6px 4px;border:0;background:none;color:rgba(244,239,230,.55);
  font:inherit;font-size:12.5px;line-height:1.55;text-align:center;cursor:pointer}
.ag-bc b{color:#ffb98f;font-weight:500;white-space:nowrap}
.ag-ram{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:6px 10px;margin:2px auto 6px;padding:8px 12px;border-radius:12px;
  background:rgba(159,211,138,.09);border:1px solid rgba(159,211,138,.28);font-size:13px;line-height:1.5;color:rgba(232,245,226,.85);text-align:center}
.ag-ram button{padding:5px 12px;border-radius:999px;border:1px solid rgba(159,211,138,.55);background:rgba(159,211,138,.14);color:#d9f2cf;
  font:inherit;font-size:12.5px;cursor:pointer}
.ag-nhom-dau{margin:4px auto 2px;font-size:12.5px;line-height:1.5;text-align:center;color:#ffc9d4}
.ag-chu-nut{padding:0;margin-left:6px;border:0;background:none;color:#ffb98f;font:inherit;font-size:inherit;
  text-decoration:underline;text-underline-offset:3px;cursor:pointer}
/* vòng quay: SVG vẽ bánh xe, nút QUAY là nút HTML nằm đè giữa (che vừa trục 46/350 của viewBox) */
.ag-vong{position:relative;width:min(100%,340px);width:min(100%,340px,calc(100dvh - 330px));min-width:240px;aspect-ratio:1;margin:6px auto 0;
  touch-action:none;-webkit-user-select:none;user-select:none}
.ag-banh{display:block;width:100%;height:100%;overflow:visible;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5))}
.ag-vanh{fill:#2b1a11;stroke:rgba(255,200,150,.42);stroke-width:2}
.ag-mieng{stroke:rgba(42,22,12,.55);stroke-width:1.2;transition:opacity .25s}
.ag-mieng.mo,.ag-chu.mo{opacity:.38}
.ag-mieng.chon,.ag-mieng.thang{stroke:#fff6ea;stroke-width:4}
.ag-chu{fill:#2a1409;font-family:"Be Vietnam Pro",system-ui,sans-serif;font-weight:500;text-anchor:end;dominant-baseline:central;
  pointer-events:none;transition:opacity .25s}
.ag-chu.lat{text-anchor:start}
.ag-den{fill:#ffe2b8;stroke:rgba(80,40,10,.5);stroke-width:1}
.ag-kim path{fill:#ffd9a3;stroke:#5a2f12;stroke-width:2;stroke-linejoin:round}
.ag-kim circle{fill:#5a2f12}
.ag-quay{position:absolute;left:50%;top:50%;width:26%;aspect-ratio:1;transform:translate(-50%,-50%);padding:0;border-radius:50%;cursor:pointer;
  border:3px solid #f7d39c;background:radial-gradient(circle at 35% 30%,#ffe0b5,#f0935a 55%,#b9542a);color:#2a1206;
  font:inherit;font-weight:700;font-size:clamp(13px,4vw,16px);letter-spacing:.1em;
  box-shadow:0 4px 14px rgba(0,0,0,.5),inset 0 -3px 6px rgba(0,0,0,.2);-webkit-tap-highlight-color:transparent}
.ag-quay:active{transform:translate(-50%,-50%) scale(.96)}
.ag-quay:disabled{cursor:default;filter:saturate(.7) brightness(.9)}
.ag-quay:focus-visible{outline:2px solid #fff1e0;outline-offset:3px}
.ag-goi{min-height:20px;margin:10px auto 6px;font-size:12.5px;line-height:1.55;text-align:center;color:rgba(244,239,230,.55)}
.ag-goi:empty{margin:4px auto}
.ag-o-chon{margin:4px auto 8px;padding:10px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ag-o-chon p{margin:0 0 8px;font-size:13px;line-height:1.55;color:rgba(244,239,230,.72)}
.ag-o-chon b{color:#fff1e0;font-weight:500}
.ag-o-nut{display:flex;gap:6px}
.ag-o-nut button{flex:1;min-height:38px;padding:0 10px;border-radius:10px;border:1px solid rgba(255,190,140,.35);background:rgba(255,134,87,.1);
  color:#ffd2b3;font:inherit;font-size:13px;cursor:pointer}
.ag-o-nut button[data-viec="bo-chon"]{flex:0 0 38px;padding:0;border-color:rgba(255,255,255,.14);background:transparent;color:rgba(244,239,230,.6)}
.ag-hang{display:flex;gap:8px;margin:8px auto 0}
.ag-hang button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:4px;padding:9px 4px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.045);color:rgba(244,239,230,.82);font:inherit;font-size:12.5px;cursor:pointer}
.ag-hang button:hover{background:rgba(255,255,255,.09)}
.ag-hang .ag-ico{width:19px;height:19px;color:#ffb98f}
/* kết quả, bảng lọc: trượt lên từ đáy, trong khung của trò */
.ag-kq-nen,.ag-bang-nen{position:absolute;inset:0;z-index:10;background:rgba(12,7,4,.58)}
.ag-kq,.ag-bang{position:absolute;left:0;right:0;bottom:0;z-index:11;box-sizing:border-box;max-width:500px;margin:0 auto;
  border-radius:22px 22px 0 0;border:1px solid rgba(255,190,140,.24);border-bottom:0;background:linear-gradient(170deg,#3b2317,#1e130d);
  box-shadow:0 -14px 40px rgba(0,0,0,.45);animation:up .3s cubic-bezier(.2,.8,.3,1) both}
.ag-kq{padding:20px 20px calc(env(safe-area-inset-bottom,0px) + 18px);text-align:center}
.ag-bang{max-height:88%;overflow-y:auto;overscroll-behavior:contain;padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 18px)}
.ag-kq-nhan{margin:0;font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:rgba(255,197,158,.72)}
.ag-kq-ten{margin:6px 0 8px;font-family:"Cormorant Garamond",Georgia,serif;font-size:38px;line-height:1.08;font-weight:600;color:#fff1e0;font-variant-numeric:lining-nums}
.ag-kq-mo{margin:0 auto 10px;max-width:380px;font-size:14px;line-height:1.6;color:rgba(244,239,230,.75)}
.ag-tag{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;margin:0 0 16px}
.ag-tag span{padding:4px 10px;border-radius:999px;font-size:12px;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12);color:rgba(244,239,230,.78)}
.ag-nut-chinh{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;min-height:50px;margin:0;padding:0 16px;box-sizing:border-box;
  border:0;border-radius:14px;background:linear-gradient(#ffbe91,#ef7c49);color:#2a1206;font:inherit;font-size:16px;font-weight:700;
  text-decoration:none;cursor:pointer}
.ag-nut-chinh:disabled{opacity:.55;cursor:default}
.ag-nut-chinh .ag-ico{width:19px;height:19px}
.ag-hai{display:flex;gap:8px;margin-top:8px}
.ag-hai>*{flex:1;min-width:0}
.ag-nut-phu{display:flex;align-items:center;justify-content:center;gap:6px;min-height:46px;padding:0 10px;border-radius:14px;
  border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#fff1e0;font:inherit;font-size:14px;cursor:pointer}
.ag-nut-phu:hover{background:rgba(255,255,255,.1)}
.ag-meo{margin:12px auto 0;max-width:360px;font-size:12px;line-height:1.55;color:rgba(244,239,230,.45)}
.ag-phao{position:absolute;left:50%;top:70px;width:0;height:0;pointer-events:none}
.ag-phao i{position:absolute;width:8px;height:12px;border-radius:2px;animation:ag-bung 1.2s cubic-bezier(.15,.7,.3,1) forwards}
@keyframes ag-bung{0%{transform:translate(0,0) rotate(0);opacity:1}100%{transform:translate(var(--x),calc(var(--y) + 120px)) rotate(var(--q));opacity:0}}
/* nấu ở nhà: ba hàng như máy xèng */
.ag-mam{display:flex;flex-direction:column;gap:12px;margin:8px 0 12px}
.ag-cot{display:grid;grid-template-columns:1fr 50px;grid-template-rows:auto 64px;column-gap:8px;row-gap:5px}
.ag-cot-ten{grid-column:1/-1;margin:0 0 0 4px;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(255,197,158,.65)}
.ag-o{position:relative;height:64px;overflow:hidden;border-radius:14px;cursor:pointer;border:1px solid rgba(255,190,140,.22);
  background:linear-gradient(#140c08,#2b1a11 26%,#2b1a11 74%,#140c08);
  box-shadow:inset 0 10px 12px -8px rgba(0,0,0,.7),inset 0 -10px 12px -8px rgba(0,0,0,.7)}
.ag-dai{position:absolute;left:0;right:0;top:0;will-change:transform}
.ag-muc{height:64px;box-sizing:border-box;display:flex;flex-direction:column;justify-content:center;min-width:0;padding:0 16px}
.ag-muc b{font-size:17px;font-weight:500;line-height:1.3;color:#fff1e0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ag-muc i{font-style:normal;font-size:12px;color:rgba(244,239,230,.48)}
.ag-khoa{height:64px;padding:0;border-radius:14px;display:grid;place-items:center;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:rgba(244,239,230,.55)}
.ag-khoa .ag-ico{width:21px;height:21px}
.ag-khoa[aria-pressed="true"]{border-color:rgba(255,185,138,.75);background:rgba(255,134,87,.18);color:#ffd2b3}
.ag-cot.khoa .ag-o{border-color:rgba(255,185,138,.7)}
.ag-cap{margin:0 0 6px;padding:9px 12px;border-radius:12px;background:rgba(244,195,94,.08);border:1px solid rgba(244,195,94,.25);
  font-size:13px;line-height:1.55;color:#f6dfae}
.ag-gio{margin:0 0 12px;font-size:12.5px;color:rgba(244,239,230,.5);text-align:center}
.ag-ghi{margin:10px 0 0;font-size:12px;line-height:1.6;color:rgba(244,239,230,.45)}
.ag-giua{text-align:center}
.ag-an{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* bảng lọc, cả nhóm, đi chợ */
.ag-bang h3{margin:0 0 14px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:600;color:#ffc59e;
  font-variant-numeric:lining-nums}
.ag-muc-loc{margin:0 0 14px}
.ag-muc-loc>p{margin:0 0 8px;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:rgba(244,239,230,.5)}
.ag-muc-loc>p i{font-style:normal;text-transform:none;letter-spacing:0;color:rgba(244,239,230,.4)}
.ag-chips{display:flex;flex-wrap:wrap;gap:6px}
.ag-chips button,.ag-lay-vt{min-height:34px;padding:0 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.04);
  color:rgba(244,239,230,.8);font:inherit;font-size:13px;cursor:pointer}
.ag-chips button[aria-pressed="true"]{border-color:rgba(255,185,138,.8);background:rgba(255,134,87,.2);color:#ffe0c9}
.ag-khong button[aria-pressed="true"]{border-color:rgba(240,120,110,.75);background:rgba(240,120,110,.16);color:#ffc9c2;
  text-decoration:line-through;text-decoration-thickness:1.5px}
.ag-lay-vt{display:inline-flex;align-items:center;gap:5px;border-style:dashed;color:#ffb98f}
.ag-lay-vt .ag-ico{width:15px;height:15px}
.ag-cac-cong{display:flex;flex-direction:column;gap:8px;margin:4px 0 12px}
.ag-cong{display:flex;align-items:center;justify-content:space-between;gap:12px;width:100%;min-height:44px;padding:8px 12px;border-radius:12px;
  border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.035);color:rgba(244,239,230,.86);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.ag-cong i{flex:none;position:relative;width:40px;height:23px;border-radius:999px;background:rgba(255,255,255,.18);transition:background .2s}
.ag-cong i::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:#fff1e0;transition:transform .2s}
.ag-cong[aria-pressed="true"] i{background:#ef7c49}
.ag-cong[aria-pressed="true"] i::after{transform:translateX(17px)}
.ag-them{display:flex;gap:6px;margin-bottom:8px}
.ag-them input{flex:1;min-width:0;height:42px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.25);
  color:var(--ink);font:inherit;font-size:16px}
.ag-them input:focus{outline:none;border-color:rgba(255,185,138,.7)}
.ag-them button{flex:none;padding:0 16px;border-radius:12px;border:1px solid rgba(255,185,138,.5);background:rgba(255,134,87,.16);color:#ffd2b3;
  font:inherit;font-size:14px;cursor:pointer}
.ag-rieng{margin-bottom:8px}
.ag-rieng button span{opacity:.6;margin-left:2px}
.ag-loi{margin:0 0 10px;font-size:13.5px;line-height:1.65;color:rgba(244,239,230,.72)}
.ag-dem{display:flex;align-items:center;justify-content:center;gap:14px;margin:14px 0 16px;font-size:14px;color:rgba(244,239,230,.75)}
.ag-dem button{width:42px;height:42px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff1e0;
  font:inherit;font-size:20px;cursor:pointer}
.ag-dem b{min-width:30px;text-align:center;font-size:26px;font-weight:600;color:#fff1e0}
.ag-phieu{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 14px}
.ag-pm{display:flex;flex-direction:column;justify-content:space-between;gap:8px;padding:10px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04)}
.ag-pm b{font-size:14px;font-weight:500;line-height:1.3;color:#fff1e0}
.ag-pm span{display:flex;gap:6px}
.ag-pm span button{flex:1;height:38px;border-radius:10px;border:1px solid rgba(255,255,255,.14);background:transparent;color:rgba(244,239,230,.6);
  font:inherit;font-size:15px;cursor:pointer}
.ag-pm .ag-tim[aria-pressed="true"]{background:rgba(234,143,176,.25);border-color:rgba(234,143,176,.8);color:#ffd0df}
.ag-pm .ag-gach[aria-pressed="true"]{background:rgba(255,255,255,.14);border-color:rgba(255,255,255,.5);color:#fff}
.ag-pm.co-tim{border-color:rgba(234,143,176,.55)}
.ag-pm.bi-gach b{text-decoration:line-through;opacity:.5}
.ag-chuyen{padding:16px 0 6px;text-align:center}
.ag-chuyen-so{display:grid;place-items:center;width:76px;height:76px;margin:0 auto 4px;border-radius:50%;
  font-family:"Cormorant Garamond",Georgia,serif;font-size:44px;font-weight:600;color:#2a1206;font-variant-numeric:lining-nums;background:radial-gradient(circle at 35% 30%,#ffe0b5,#f0935a 60%,#b9542a)}
.ag-tong{list-style:none;margin:0 0 10px;padding:0}
.ag-tong li{display:flex;justify-content:space-between;gap:10px;padding:9px 2px;border-bottom:1px solid rgba(255,255,255,.07);font-size:14px}
.ag-tong li b{font-weight:500;color:#fff1e0}
.ag-tong li span{flex:none;color:#ffc9d4}
.ag-tong li.loai b{text-decoration:line-through;opacity:.45}
.ag-tong li.loai span{color:rgba(244,239,230,.4)}
.ag-cho{list-style:none;margin:0 0 6px;padding:0}
.ag-cho li label{display:flex;align-items:center;gap:12px;min-height:44px;padding:0 4px;border-bottom:1px solid rgba(255,255,255,.07);font-size:15px;cursor:pointer}
.ag-cho input{width:20px;height:20px;accent-color:#ef7c49;color-scheme:dark}
.ag-cho input:checked+span{text-decoration:line-through;opacity:.5}
.ag-bang>.ag-nut-chinh{margin-top:14px}
.ag-bao{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 26px);z-index:20;transform:translateX(-50%);box-sizing:border-box;
  width:max-content;max-width:calc(100% - 48px);margin:0;padding:10px 16px;border-radius:12px;background:rgba(22,13,8,.94);
  border:1px solid rgba(255,190,140,.3);color:#ffe3cf;font-size:13.5px;line-height:1.45;text-align:center;pointer-events:none}
@media (prefers-reduced-motion:reduce){.ag-kq,.ag-bang{animation:none}.ag-mieng,.ag-chu{transition:none}}
@media (max-width:359px){.ag-hang button{font-size:11.5px}.ag-tieude{font-size:28px}}

/* ---------- Buôn lậu phố cổ (assets/buonlau.js) ---------- */
.buonlau{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;color:#f3eee4;
  background:radial-gradient(120% 80% at 50% 30%,#1b2140 0%,#0e1226 60%,#090b18 100%);
  padding-bottom:env(safe-area-inset-bottom,0px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.buonlau.hien{display:flex}
.bl-dau{display:flex;align-items:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 4px 16px;min-height:50px}
.bl-dau button{flex:none;width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#f3eee4;font:inherit;font-size:16px;cursor:pointer}
.bl-ten{flex:1;min-width:0;margin:0;line-height:1.3}
.bl-ten b{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;color:#ffd98a}
.bl-ten span{display:block;font-size:12.5px;color:rgba(243,238,228,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-nguoi{display:flex;gap:6px;padding:2px 12px 4px}
.bl-nguoi:empty{display:none}
.bl-the{flex:1;min-width:0;padding:5px 8px;border-radius:12px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);transition:border-color .2s,background .2s}
.bl-the b{display:flex;align-items:center;gap:5px;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-vai{flex:none;font-style:normal;font-size:13px}
.bl-the span{display:block;font-size:11px;color:rgba(243,238,228,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-the em{display:flex;align-items:center;gap:3px;margin-top:3px;font-style:normal}
.bl-the em i{width:9px;height:9px;border-radius:2px;border:1.5px solid var(--mau);opacity:.75}
.bl-the em i.bl-co{background:var(--mau);opacity:1}
.bl-the em small{margin-left:4px;font-size:10.5px;color:rgba(243,238,228,.62)}
.bl-the.bl-dang{border-color:var(--mau);background:rgba(255,255,255,.08)}
.bl-xau,.bl-tot{margin-left:4px;font-size:10.5px;font-weight:600}
.bl-xau{color:#ff8a7a}
.bl-tot{color:#8fe0a8}
.bl-dem{flex:none;height:3px;margin:0 14px 2px;border-radius:2px;background:rgba(255,255,255,.08);overflow:hidden}
.bl-dem i{display:block;width:0;height:100%;background:linear-gradient(90deg,#3b4a8a,#c9a462 80%,#ffd98a);transition:width .6s}
.bl-canh{position:relative;flex:1 1 0;min-height:220px;overflow:hidden}
.bl-ban{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:pointer}
/* bản đồ */
.bl-vien path{fill:none;stroke:#05060d;stroke-opacity:.8;stroke-width:26;stroke-linecap:round}
.bl-pho path{fill:none;stroke:#c9a462;stroke-opacity:.6;stroke-width:9;stroke-linecap:round}
.bl-ngo path{fill:none;stroke:#ef9a76;stroke-opacity:.85;stroke-width:6;stroke-dasharray:14 11;stroke-linecap:round}
.bl-loi path{fill:none;stroke:#9aa3c4;stroke-opacity:.5;stroke-width:5;stroke-dasharray:2 12;stroke-linecap:round}
.bl-ban text{font-family:"Be Vietnam Pro",system-ui,-apple-system,sans-serif;pointer-events:none}
.bl-tp{font-size:26px;fill:#e9d7a8;fill-opacity:.45;text-anchor:middle}
.bl-tp-ngo{fill:#f2b394;fill-opacity:.55;font-style:italic}
.bl-nga{fill:#f4efe6;fill-opacity:.85}
.bl-nga-ngo{fill:#ef9a76}
.bl-nga-moi{fill:#ffcf6a}
.bl-nga-ben{fill:#7ec8e3}
.bl-mui{fill:none;stroke:#aab3d4;stroke-opacity:.85;stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.bl-cua{fill:#2a3050;stroke:#aab3d4;stroke-width:3}
.bl-n-moi,.bl-n-ben,.bl-n-cua,.bl-n-oqc,.bl-k,.bl-dau text,.bl-linh text{paint-order:stroke;stroke:#0b0e1c;stroke-linejoin:round}
.bl-n-moi{font-size:32px;font-weight:600;fill:#ffd27a;stroke-width:7px}
.bl-n-ben{font-size:27px;fill:#9fd6f0;text-anchor:middle;stroke-width:6px}
.bl-n-cua{font-size:25px;fill:#c3c9e2;stroke-width:6px}
.bl-n-oqc{font-size:27px;font-style:italic;fill:#e9d7a8;stroke-width:6px}
.bl-song{font-size:34px;letter-spacing:.3em;fill:#7ab6d8;fill-opacity:.45;font-style:italic;text-anchor:middle}
.bl-ho{font-size:28px;fill:#9fd6f0;fill-opacity:.7;text-anchor:middle;font-style:italic}
/* lớp động */
.bl-nghi{fill:#ff5a4a;fill-opacity:.17}
.bl-tam{fill:#ffd27a;fill-opacity:.14}
.bl-x{stroke:#aab3d4;stroke-opacity:.6;stroke-width:4;stroke-linecap:round}
.bl-k{font-size:22px;font-weight:700;fill:#ffd27a;text-anchor:middle;stroke-width:5px}
.bl-k-kin{fill-opacity:.7}
.bl-dau text{font-size:22px;font-weight:700;fill:#fff;text-anchor:middle;stroke-width:5px}
.bl-dau-gia use{opacity:.5}
.bl-dau-gia text{fill:#ffb39a}
.bl-dau-lo text{fill:#ffe08a}
.bl-cham{fill:none;stroke-width:5;animation:bl-nhip 1.2s ease-in-out infinite}
.bl-cham-di{stroke:#8fe0a8}
.bl-cham-cua{stroke:#ffd27a}
.bl-cham-gia{stroke:#ffa36a;stroke-dasharray:8 7}
.bl-cham-linh{stroke:#8fc6ff}
.bl-cham-soat{stroke:#ff6a5a;stroke-dasharray:9 7}
.bl-chon-di{fill:#8fe0a8;fill-opacity:.25;stroke:#8fe0a8;stroke-width:6}
.bl-chon-gia{fill:#ffa36a;fill-opacity:.25;stroke:#ffa36a;stroke-width:5;stroke-dasharray:8 6}
.bl-chon-soat{fill:#ff6a5a;fill-opacity:.25;stroke:#ff6a5a;stroke-width:6}
.bl-soat-sung{fill:none;stroke:#ffe08a;stroke-width:6;transform-box:fill-box;transform-origin:center;animation:bl-sung 1.1s ease-out 2}
@keyframes bl-nhip{0%,100%{stroke-opacity:.95}50%{stroke-opacity:.3}}
@keyframes bl-sung{0%{transform:scale(.6);stroke-opacity:1}100%{transform:scale(2.4);stroke-opacity:0}}
.bl-linh circle{stroke:#0b0e1c;stroke-width:4}
.bl-linh-minh circle{stroke:#fff}
.bl-linh-chon circle{stroke:#ffe08a;stroke-width:8}
.bl-linh text{font-size:22px;font-weight:700;fill:#fff;text-anchor:middle;stroke-width:5px}
.bl-linh-cu{fill:none;stroke:#8fc6ff;stroke-width:4;stroke-dasharray:6 6;stroke-opacity:.75}
.bl-tb circle{stroke:#0b0e1c;stroke-width:4}
.bl-tb-bat circle{fill:#8a2a24}
.bl-tb-thoat{opacity:.6}
@media (prefers-reduced-motion:reduce){.bl-cham,.bl-soat-sung{animation:none}.bl-dem i{transition:none}}
.bl-bao{position:absolute;left:50%;top:8px;z-index:10;transform:translateX(-50%);width:max-content;max-width:86%;margin:0;padding:8px 14px;border-radius:12px;
  background:rgba(14,18,38,.95);border:1px solid rgba(255,214,120,.4);font-size:13.5px;line-height:1.45;text-align:center;cursor:pointer;box-shadow:0 6px 20px rgba(0,0,0,.45)}
/* dưới bản đồ */
.bl-duoi{flex:none;padding:6px 14px 10px;border-top:1px solid rgba(255,255,255,.08)}
.bl-luot{margin:0 0 6px;min-height:38px;font-size:13.5px;line-height:1.45;text-align:center;color:rgba(243,238,228,.88)}
.bl-luot b{color:#ffd98a;font-weight:600}
.bl-xem{display:inline-block;padding:1px 8px;border-radius:9px;background:rgba(255,255,255,.08);font-size:12.5px;color:#f3e2b8}
.bl-nghi-chu{color:rgba(243,238,228,.7);font-style:italic}
.bl-chip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:6px}
.bl-chip:empty{display:none}
.bl-chon-chip{height:32px;padding:0 12px;border-radius:16px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.05);color:#f3eee4;font:inherit;font-size:13px;cursor:pointer}
.bl-chon-chip.bl-bat{border-color:#8fe0a8;background:rgba(143,224,168,.16);color:#c9f5d6}
.bl-ghi{font-size:12.5px;color:rgba(243,238,228,.6)}
.bl-nut{display:flex;gap:8px;justify-content:center;flex-wrap:wrap}
.bl-nut button{height:42px;padding:0 14px;border-radius:14px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f3eee4;
  font:inherit;font-size:14.5px;cursor:pointer}
.bl-nut button:disabled{opacity:.4;cursor:default}
.bl-nut .bl-chinh{border:0;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font-weight:700}
.bl-nut .bl-bat{border-color:#ffa36a;background:rgba(255,163,106,.16);color:#ffd6bf}
.bl-nhat{display:block;width:100%;margin-top:6px;padding:4px 6px;border:0;background:none;color:rgba(243,238,228,.55);font:inherit;font-size:12px;line-height:1.45;text-align:center;cursor:pointer}
.bl-nhat span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bl-nk-bat{color:#ff8a7a}
.bl-nk-dau{color:#ffd27a}
.bl-nk-giao{color:#9fd6f0}
.bl-nk-thoat{color:#8fe0a8}
.bl-nk-minh{color:#f3e2b8}
.bl-nk-het{color:#ffd98a}
/* bảng chọn, cách chơi, kết quả */
.bl-tin{position:absolute;inset:0;z-index:9;display:flex;align-items:center;justify-content:center;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);background:rgba(6,8,18,.74)}
.bl-tin-trong{width:100%;max-width:420px;max-height:100%;overflow:auto;padding:22px 20px;border-radius:20px;background:linear-gradient(#1f2546,#141831);
  border:1px solid rgba(255,255,255,.12);box-shadow:0 20px 50px rgba(0,0,0,.5);text-align:center}
.bl-tin h2{margin:4px 0 12px;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;color:#ffd98a}
.bl-tin p{margin:0 0 10px;font-size:14.5px;line-height:1.55;color:rgba(243,238,228,.9);text-align:left}
.bl-tin p b{color:#ffe2a6;font-weight:600}
.bl-tin .bl-tin-nho{margin:0;text-align:center;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:rgba(243,238,228,.5)}
.bl-tin .bl-meo{font-size:13px;color:rgba(243,238,228,.66);text-align:center}
.bl-tin .bl-nhan{margin:12px 0 6px;font-size:12.5px;color:rgba(243,238,228,.6);text-align:center}
.bl-tin button{display:block;width:100%;min-height:46px;margin:8px 0 0;border-radius:14px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#f3eee4;font:inherit;font-size:15px;cursor:pointer}
.bl-tin .bl-chinh,.bl-tin .bl-batdau{border:0;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;font-weight:700}
.bl-tin .bl-lua{display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:10px 14px;text-align:left}
.bl-tin .bl-lua b{font-size:15px;font-weight:600;color:#ffe2a6}
.bl-tin .bl-lua i{font-size:12.5px;font-style:normal;color:rgba(243,238,228,.62)}
.bl-tin .bl-lui{width:auto;min-height:32px;margin:0 0 6px;padding:0 10px;border:0;background:none;color:rgba(243,238,228,.65);font-size:13.5px}
.bl-tin .bl-chu{min-height:36px;border:0;background:none;color:rgba(243,238,228,.62);font-size:13.5px}
.bl-hang{display:flex;flex-wrap:wrap;gap:6px}
.bl-tin .bl-chon{flex:1;width:auto;min-width:80px;margin:0;padding:8px 10px;line-height:1.3}
.bl-tin .bl-chon small{display:block;font-size:11.5px;color:rgba(243,238,228,.6)}
.bl-tin .bl-chon.bl-bat{border-color:#ffd77a;background:rgba(255,215,122,.15)}
.bl-chao svg{display:block;width:170px;height:96px;margin:0 auto 4px}
.bl-nk p{margin:0 0 6px;font-size:13px}
.buonlau .xn-dong,.buonlau .nut-link,.buonlau .nut-cai{z-index:10}
.co-nut-cai .bl-dau{padding-right:204px}
@media (max-width:479px){
  .co-nut-cai .bl-dau{padding-top:calc(env(safe-area-inset-top,0px) + 54px);padding-right:14px}
}
@media (min-width:720px){
  .bl-duoi{max-width:640px;margin:0 auto;width:100%}
}
@media (max-height:720px){
  .bl-luot{min-height:0;font-size:13px}
  .bl-nut button{height:38px}
  .bl-nhat span:not(:last-child){display:none}
}
.bl-vet{fill:none;stroke-width:5;stroke-opacity:.55;stroke-dasharray:3 10;stroke-linecap:round;stroke-linejoin:round}
/* ---------- hết Buôn lậu phố cổ ---------- */
/* ---------- Cơ thể người 3D (assets/cothe.js) ---------- */
.cothe{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;color:#eef1ff;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:radial-gradient(120% 85% at 50% 40%,#1c2742 0%,#0f1528 52%,#070a14 100%)}
.cothe.hien{display:block}
.cothe [hidden]{display:none!important}
.ct-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;cursor:grab;-webkit-tap-highlight-color:transparent}
.ct-cv:active{cursor:grabbing}
.ct-dong{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;border-radius:50%;z-index:5;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,14,28,.55);color:#eef1ff;font-size:15px;line-height:1;cursor:pointer}
.ct-dau{position:absolute;top:calc(env(safe-area-inset-top,0px) + 9px);left:16px;right:60px;z-index:2;pointer-events:none;text-shadow:0 1px 4px rgba(4,6,14,.85)}
.co-nut-cai .ct-dau{right:204px}
.ct-tieude{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.15;color:#f4f6ff}
.ct-phu{margin:2px 0 0;font-size:12.5px;color:rgba(238,241,255,.6)}
.ct-cong-cu{position:absolute;right:12px;top:calc(env(safe-area-inset-top,0px) + 66px);display:flex;flex-direction:column;gap:8px;z-index:3;
  max-height:calc(100% - 230px);overflow-y:auto;scrollbar-width:none}
.ct-cong-cu::-webkit-scrollbar{display:none}
.ct-cong-cu button{flex:none;width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(12,17,34,.62);
  color:#eef1ff;font:500 17px/1 "Be Vietnam Pro",system-ui,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ct-cong-cu button[data-viec="nhan"]{font-size:14px}
.ct-cong-cu button[aria-pressed="true"]{background:rgba(255,110,140,.3);border-color:rgba(255,150,170,.6)}
/* nút phóng: góc phải dưới, ngay trên hàng nút lớp (ngón cái với tới); điện thoại giấu khi thẻ, thanh nằm đúng chỗ ấy */
.ct-phong{position:absolute;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 62px);z-index:3;display:flex;flex-direction:column;gap:8px}
.ct-phong button{width:40px;height:40px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(12,17,34,.62);
  color:#eef1ff;font:400 23px/1 "Be Vietnam Pro",system-ui,sans-serif;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.cothe.co-thanh .ct-phong,.cothe.co-the-mo .ct-phong{display:none}
@media (min-width:760px){.cothe.co-thanh .ct-phong,.cothe.co-the-mo .ct-phong{display:flex}}
.ct-lop{position:absolute;left:0;right:0;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);z-index:3;display:flex;gap:7px;
  overflow-x:auto;padding:4px 12px;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.ct-lop::-webkit-scrollbar{display:none}
.ct-chip{flex:none;display:flex;align-items:center;gap:7px;padding:7px 12px 7px 10px;border-radius:999px;cursor:pointer;
  border:1px solid rgba(255,255,255,.16);background:rgba(12,17,34,.66);color:#eef1ff;font:500 13px/1.1 "Be Vietnam Pro",sans-serif;
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.ct-chip i{flex:none;width:11px;height:11px;border-radius:50%;background:var(--m);box-shadow:0 0 8px var(--m)}
.ct-chip.ct-mo i{width:7px;height:7px;background:transparent;border:2px solid var(--m);box-shadow:none}
.ct-chip.ct-an{color:rgba(238,241,255,.5)}
.ct-chip.ct-an i{width:8px;height:8px;background:transparent;border:1.5px dashed rgba(255,255,255,.45);box-shadow:none}
.ct-gioi{padding:7px 14px}
.ct-bao{position:absolute;left:50%;top:46%;transform:translateX(-50%);margin:0;z-index:2;padding:9px 16px;border-radius:999px;
  background:rgba(10,14,28,.7);color:rgba(238,241,255,.85);font-size:13.5px;white-space:nowrap;font-variant-numeric:lining-nums}
.ct-the,.ct-bang{position:absolute;left:0;right:0;bottom:0;max-height:46%;overflow-y:auto;z-index:4;box-sizing:border-box;
  padding:14px 18px calc(env(safe-area-inset-bottom,0px) + 18px);background:rgba(10,14,28,.95);border-top:1px solid rgba(255,255,255,.12);
  border-radius:18px 18px 0 0;animation:up .25s ease-out;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.ct-the-dong{position:sticky;top:0;float:right;width:30px;height:30px;margin:-2px -6px 0 8px;border-radius:50%;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#eef1ff;font-size:13px;cursor:pointer}
.ct-the-he{display:inline-flex;align-items:center;gap:6px;margin:0;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:rgba(238,241,255,.7)}
.ct-the-he::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m)}
.ct-the-ten{margin:4px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:27px;line-height:1.1;color:#fff}
.ct-the-la{margin:3px 0 0;font-size:12.5px;font-style:italic;color:rgba(238,241,255,.55)}
.ct-the-tom{margin:9px 0 0;font-size:14.5px;line-height:1.5;color:#ffe6a8}
.ct-the-nut{display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 4px}
.ct-the-nut button{padding:7px 13px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#eef1ff;
  font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ct-the-nut button[aria-pressed="true"]{background:rgba(79,209,197,.22);border-color:rgba(79,209,197,.6)}
.ct-the-than h4{margin:14px 0 4px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:rgba(79,209,197,.95);font-weight:500}
.ct-the-than p,.ct-the-than li{margin:0;font-size:14.5px;line-height:1.55;color:rgba(238,241,255,.9);font-variant-numeric:lining-nums}
.ct-the-than ul{margin:0;padding-left:18px}
.ct-the-than li+li{margin-top:3px}
/* nhãn tên nổi trên hình */
.ct-nhan{position:absolute;inset:0;z-index:1;pointer-events:none}
.ct-n{position:absolute;transform:translate(-5px,-50%);display:flex;align-items:center;gap:5px;padding:3px 9px 3px 6px;border-radius:999px;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,14,28,.62);color:#eef1ff;font:500 11.5px/1.2 "Be Vietnam Pro",sans-serif;
  white-space:nowrap;pointer-events:auto;cursor:pointer;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ct-n::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:#ffe08a;box-shadow:0 0 6px #ffe08a}
.ct-n-chon{border-color:rgba(255,224,138,.75)}
/* danh sách, tìm */
.ct-bang-ten{margin:0 0 10px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:24px;line-height:1.15;color:#fff}
.ct-tim{width:100%;box-sizing:border-box;padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:400 14px "Be Vietnam Pro",sans-serif;outline:none}
.ct-tim:focus{border-color:rgba(79,209,197,.7)}
.ct-ds h4{display:flex;align-items:center;gap:7px;margin:14px 0 6px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:rgba(238,241,255,.78);font-weight:500}
.ct-ds h4::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m)}
.ct-ds h4 span{color:rgba(238,241,255,.4);font-variant-numeric:lining-nums}
.ct-ds ul{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.ct-ds li button{padding:6px 11px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#eef1ff;
  font:400 13px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ct-ds li button:hover{background:rgba(79,209,197,.18)}
.ct-ds-rong{color:rgba(238,241,255,.6);font-size:13.5px}
/* thanh gọn: mặt cắt, hành trình — trên hàng nút lớp; có thẻ đang mở (điện thoại) thì lên dưới tiêu đề */
.ct-thanh{position:absolute;left:12px;right:12px;bottom:calc(env(safe-area-inset-bottom,0px) + 60px);z-index:5;box-sizing:border-box;padding:10px 44px 10px 12px;
  border-radius:16px;border:1px solid rgba(255,255,255,.14);background:rgba(10,14,28,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.co-the-mo .ct-thanh{bottom:auto;top:calc(env(safe-area-inset-top,0px) + 62px);right:62px}
/* điện thoại: đang bấm huyệt, đi hành trình mà mở thẻ (dưới) thì thanh nhường chỗ — cả hai cùng hiện là kín màn, không
   còn thấy hình (người dùng gửi ảnh: "Bị che hết"); đóng thẻ thì thanh hiện lại */
@media (max-width:759px){.cothe.co-the-mo .ct-thanh.ct-thanh-bh,.cothe.co-the-mo .ct-thanh.ct-thanh-ht{display:none}}
.ct-thanh-x{position:absolute;top:8px;right:8px;width:28px;height:28px;border-radius:50%;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);
  color:#eef1ff;font-size:12px;cursor:pointer}
.ct-cat-nut,.ct-ht-ds,.ct-ht-nut{display:flex;flex-wrap:wrap;gap:6px}
.ct-thanh button:not(.ct-thanh-x){padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#eef1ff;
  font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ct-thanh button[aria-pressed="true"]{background:rgba(79,209,197,.22);border-color:rgba(79,209,197,.6)}
.ct-thanh button:disabled{opacity:.4;cursor:default}
.ct-truot{display:block;width:100%;margin:10px 0 2px;accent-color:#4fd1c5}
.ct-ht-hoi{margin:0 0 8px;font-size:13px;color:rgba(238,241,255,.7)}
.ct-ht-ds button{display:flex;align-items:center;gap:8px}
.ct-ht-ds button span{font-size:11.5px;font-weight:400;color:rgba(238,241,255,.5);font-variant-numeric:lining-nums}
.ct-ht-ds button i,.ct-ht-dau i{flex:none;width:10px;height:10px;border-radius:50%;background:linear-gradient(135deg,var(--m),var(--m2));box-shadow:0 0 8px var(--m)}
.ct-ht-dau{display:flex;align-items:center;gap:8px;margin:0;font-size:12.5px;color:rgba(238,241,255,.72)}
.ct-ht-pip{display:flex;flex-wrap:wrap;gap:2px;margin:7px 0 0 -5px}
.ct-ht-pip button{position:relative;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.ct-thanh .ct-ht-pip button{padding:0;border:0;background:none;border-radius:0}
.ct-ht-pip button::after{content:"";position:absolute;left:7px;top:7px;width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.2)}
.ct-ht-pip button.qua::after{background:rgba(255,224,138,.6)}
.ct-ht-pip button.nay::after{left:5px;top:5px;width:12px;height:12px;background:#ffe08a;box-shadow:0 0 10px rgba(255,224,138,.9)}
.ct-ht-ten{display:flex;align-items:center;gap:9px;margin:3px 0 0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;line-height:1.2;color:#fff}
.ct-ht-ten b{display:inline-grid;place-items:center;min-width:22px;height:22px;border-radius:50%;background:rgba(255,224,138,.16);color:#ffe08a;
  font:600 12px/1 "Be Vietnam Pro",sans-serif;font-variant-numeric:lining-nums}
.ct-ht-chu{margin:5px 0 10px;font-size:14px;line-height:1.5;color:#eef1ff}
.ct-ht-nut button[data-viec="ht-lui"],.ct-ht-nut button[data-viec="ht-lai"]{min-width:38px;font-size:15px}
.ct-thanh .ct-ht-nut .ct-ht-toi{margin-left:auto;background:rgba(79,209,197,.2);border-color:rgba(79,209,197,.55)}
/* đố vui */
.ct-do{position:absolute;left:12px;right:62px;top:calc(env(safe-area-inset-top,0px) + 62px);z-index:5;box-sizing:border-box;padding:10px 12px;border-radius:16px;
  border:1px solid rgba(255,224,138,.35);background:rgba(10,14,28,.9);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);font-variant-numeric:lining-nums}
.ct-do-so{margin:0;font-size:11.5px;color:rgba(238,241,255,.6)}
.ct-do-hoi{margin:3px 0 0;font-size:16px;line-height:1.35;color:#fff}
.ct-do-hoi b{color:#ffe08a;font-weight:600}
.ct-do-goi{margin:6px 0 0;font-size:13px;line-height:1.45;color:rgba(238,241,255,.78);font-style:italic}
/* chỉ cho trình đọc màn hình. Đừng đặt tên ct-an: đó là trạng thái "đang ẩn" của nút lớp (.ct-chip.ct-an) — trùng tên là nút
   lớp nào bấm tới ẩn cũng biến mất, mất dần hết nút (người dùng gửi ảnh: "mất hết phần chọn ẩn hiện") */
.ct-chi-doc{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* đố vui: hàng chấm từng câu (xanh đúng, vàng đúng lần hai, đỏ sai, xám xem đáp án), dòng kết quả, nhãn tại chỗ chạm */
.ct-do-dau{display:flex;align-items:center;gap:8px}
.ct-do-tien{display:flex;flex-wrap:wrap;gap:4px;flex:1;min-width:0}
.ct-do-tien i{width:8px;height:8px;border-radius:50%;background:rgba(255,255,255,.16);flex:none}
.ct-do-tien i.nay{background:transparent;box-shadow:inset 0 0 0 1.5px #ffe08a}
.ct-do-tien i.dung{background:#4fdc7c}.ct-do-tien i.nua{background:#ffd75e}.ct-do-tien i.sai{background:#ff6b66}.ct-do-tien i.bo{background:rgba(255,255,255,.4)}
.ct-do-diem{font-size:11.5px;color:rgba(238,241,255,.75);white-space:nowrap}
.ct-do-kq{margin:7px 0 0;padding:7px 10px;border-radius:10px;font-size:14px;line-height:1.45}
.ct-do-kq b{font-weight:600}
.ct-do-kq.dung{background:rgba(79,220,124,.16);color:#bff7d0}.ct-do-kq.dung b{color:#7df0a2}
.ct-do-kq.sai{background:rgba(255,107,102,.16);color:#ffd2d0}.ct-do-kq.sai b{color:#ff8f8a}
.ct-do-kq.lo{background:rgba(255,215,94,.12);color:#fff1c4}.ct-do-kq.lo b{color:#ff8f8a}
.ct-do-nut button.ct-do-chinh{background:rgba(79,220,124,.22);border-color:rgba(79,220,124,.6);font-weight:600}
.ct-do-ds{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:5px;font-size:12px;max-height:30vh;overflow-y:auto}
.ct-do-ds li{padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.06);color:rgba(238,241,255,.8)}
.ct-do-ds li b{font-weight:500;color:#fff}
.ct-do-ds li.dung{box-shadow:inset 0 0 0 1px rgba(79,220,124,.6)}.ct-do-ds li.nua{box-shadow:inset 0 0 0 1px rgba(255,215,94,.6)}
.ct-do-ds li.sai{box-shadow:inset 0 0 0 1px rgba(255,107,102,.55)}.ct-do-ds li.bo{box-shadow:inset 0 0 0 1px rgba(255,255,255,.3)}
.ct-do-cham{position:absolute;z-index:6;margin:0;padding:5px 11px;border-radius:999px;transform:translate(-50%,calc(-100% - 16px));pointer-events:none;
  font:600 14px/1.2 "Be Vietnam Pro",system-ui,sans-serif;white-space:nowrap;box-shadow:0 4px 14px rgba(0,0,0,.45);animation:ct-bat .22s ease-out}
.ct-do-cham::after{content:"";position:absolute;left:calc(50% + var(--mui,0px));bottom:-6px;margin-left:-6px;border:6px solid transparent;border-bottom:0;border-top-color:inherit}
.ct-do-cham.dung{background:#1f9a4d;color:#fff;border-top-color:#1f9a4d}
.ct-do-cham.sai{background:#c9403b;color:#fff;border-top-color:#c9403b}
.ct-do-cham.xem{background:rgba(20,24,40,.92);color:#eef1ff;border-top-color:rgba(20,24,40,.92)}
@keyframes ct-bat{from{opacity:0;transform:translate(-50%,calc(-100% - 6px)) scale(.85)}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.ct-do-cham{animation:none}}
.ct-do-nut{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.ct-do-nut button{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#eef1ff;
  font:500 12.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
@media (min-width:760px){
  .ct-the,.ct-bang{left:16px;right:auto;top:calc(env(safe-area-inset-top,0px) + 70px);bottom:66px;width:360px;max-height:none;
    border:1px solid rgba(255,255,255,.12);border-radius:16px}
  .ct-thanh,.co-the-mo .ct-thanh{left:auto;right:70px;top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 60px);width:440px}
  .ct-do{left:50%;right:auto;width:440px;transform:translateX(-50%)}
  /* hành trình: thẻ lời kể sát hình (cothe.js kieuHT). Màn rộng: giữa mép phải, mũi trỏ sang đoạn đường ngay bên trái;
     màn đứng, hẹp: giữa đáy, hình ngay trên */
  .cothe .ct-thanh.ht-ben{top:auto;bottom:calc(50% - 130px);right:70px;left:auto;width:380px}
  .cothe .ct-thanh.ht-ben::before,.cothe .ct-thanh.ht-ben::after{content:"";position:absolute;top:50%;width:0;height:0;border-style:solid;border-color:transparent}
  .cothe .ct-thanh.ht-ben::before{left:-11px;margin-top:-11px;border-width:11px 11px 11px 0;border-right-color:rgba(255,255,255,.14)}
  .cothe .ct-thanh.ht-ben::after{left:-9px;margin-top:-10px;border-width:10px 10px 10px 0;border-right-color:rgba(10,14,28,.92)}
  .cothe .ct-thanh.ht-duoi{left:50%;right:auto;transform:translateX(-50%);width:min(480px,calc(100% - 150px))}
}
/* kinh lạc: thẻ huyệt, nhóm trong danh sách, thanh bấm huyệt */
.ct-the-tc{display:flex;flex-wrap:wrap;gap:6px;margin-top:2px}
.ct-the-tc button{padding:6px 11px;border-radius:999px;border:1px solid rgba(95,224,208,.35);background:rgba(95,224,208,.08);color:#eef1ff;
  font:400 13px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ct-the-ghi{margin:14px 0 0!important;font-size:12px!important;line-height:1.45!important;color:rgba(238,241,255,.5)!important}
.ct-ds h5{margin:10px 0 5px;font-size:11px;font-weight:500;letter-spacing:.4px;color:rgba(238,241,255,.55)}
.ct-ds-ghi{margin:8px 0 2px;font-size:12.5px;line-height:1.45;color:rgba(238,241,255,.62)}
.ct-ds-bh{display:block;width:100%;margin:4px 0 2px;padding:9px 12px;border-radius:12px;border:1px solid rgba(95,224,208,.45);
  background:rgba(95,224,208,.12);color:#eef1ff;font:500 13.5px "Be Vietnam Pro",sans-serif;text-align:left;cursor:pointer}
.cothe .ct-thanh.ct-thanh-bh{max-height:min(56vh,440px);overflow-y:auto;overscroll-behavior:contain}
.ct-bh-ds{display:flex;flex-wrap:wrap;gap:6px}
.ct-bh-cuoi{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px;margin-top:10px}
.ct-bh-cuoi span{font-size:11.5px;color:rgba(238,241,255,.5)}
.ct-bh-ma{margin-left:auto;padding-left:8px;font:400 12px "Be Vietnam Pro",sans-serif;color:rgba(238,241,255,.5)}
.ct-bh-muc{margin:6px 0 0;font-size:13.5px;line-height:1.5;color:#eef1ff;font-variant-numeric:lining-nums}
.ct-bh-muc b{color:#5fe0d0;font-weight:500}
.ct-bh-luu b{color:#ffcf7a}
.ct-bh-loi{margin:6px 0 8px;font-size:13.5px;line-height:1.5;color:#eef1ff}
.ct-bh-cac{margin-bottom:8px}
.ct-bh-khan{margin:4px 0 10px;padding:8px 10px;border-radius:10px;border:1px solid rgba(255,140,140,.35);background:rgba(255,90,90,.1);
  font-size:13px;line-height:1.5;color:#ffd9d9}
.ct-bh-khan b{display:block;color:#ff9e9e;font-weight:500}
.ct-thanh-bh .ct-ht-nut{margin-top:10px}
@media (prefers-reduced-motion:reduce){.ct-the,.ct-bang{animation:none}}
/* ---------- hết Cơ thể người 3D ---------- */
/* ---------- Chúc mừng sinh nhật (assets/sinhnhat.js) ---------- */
.sinhnhat{position:fixed;inset:0;z-index:30;display:none;color:var(--ink);overflow:hidden;
  background:radial-gradient(120% 70% at 50% 0%,#3d1838 0%,#1f0f22 52%,#0e0811 100%)}
.sinhnhat.hien{display:block}
.sinhnhat [hidden]{display:none!important}
.sn-dong,.sn-hat{position:absolute;z-index:8;top:calc(env(safe-area-inset-top,0px) + 14px);width:34px;height:34px;padding:0;
  border-radius:50%;cursor:pointer;display:grid;place-items:center;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.36);
  color:var(--ink);font-size:14px;line-height:1;-webkit-tap-highlight-color:transparent}
.sn-dong{right:16px}
.sn-hat{left:16px;font-size:16px}
.sn-hat[aria-pressed="true"]{background:rgba(255,126,196,.3);border-color:rgba(255,160,210,.6);color:#ffe3f1}
.sn-dong:hover,.sn-hat:hover{background:rgba(255,255,255,.12)}
.sn-trong{position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 18px calc(env(safe-area-inset-bottom,0px) + 32px)}
.sn-trong>*{max-width:460px;margin-left:auto;margin-right:auto}
.sn-tieude{margin:0 auto 12px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:32px;line-height:1.15;font-weight:600;color:#ffc2e2}
.sn-xem{width:min(100%,calc((100dvh - 250px) * .8));min-width:220px;margin:0 auto}
.sn-anh{display:block;width:100%;height:auto;aspect-ratio:1080/1350;border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08)}
.sn-hai{display:flex;gap:8px;margin-top:12px}
.sn-nut-chinh,.sn-nut-phu{min-height:50px;padding:0 14px;border-radius:14px;font:inherit;font-size:16px;cursor:pointer}
.sn-nut-chinh{flex:2;border:0;background:linear-gradient(#ffa9d6,#f0629f);color:#33061c;font-weight:700}
.sn-nut-phu{flex:1;border:1px solid rgba(255,190,225,.35);background:rgba(255,126,196,.1);color:#ffd6ec}
.sn-nut-chinh:disabled,.sn-nut-phu:disabled{opacity:.6;cursor:default}
.sn-goi-link{margin:8px auto 0;font-size:12.5px;line-height:1.55;text-align:center;color:rgba(255,226,241,.6)}
.sn-link{display:flex;gap:6px;margin-top:10px}
.sn-link input{flex:1;min-width:0;padding:9px 11px;border-radius:10px;border:1px solid rgba(255,150,205,.4);background:rgba(255,255,255,.06);
  color:#ffe3f1;font:inherit;font-size:13px;-webkit-user-select:all;user-select:all}
.sn-link button{flex:none;padding:0 14px;border-radius:10px;border:1px solid rgba(255,150,205,.5);background:rgba(255,126,196,.16);
  color:#ffe3f1;font:inherit;font-size:13px;cursor:pointer}
.sn-ba{display:flex;gap:6px;margin-top:10px}
.sn-ba button{flex:1;min-width:0;min-height:40px;padding:0 6px;border-radius:12px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:rgba(255,235,245,.82);font:inherit;font-size:13.5px;cursor:pointer;white-space:nowrap}
.sn-ba button:disabled{opacity:.6;cursor:default}
.sn-bao{min-height:0;margin:0 auto;font-size:13px;line-height:1.55;text-align:center;color:#ffd6ec;opacity:0;transition:opacity .25s}
.sn-bao.hien{opacity:1;margin-top:8px}
.sn-o{margin-top:14px}
.sn-o-hai{display:flex;gap:10px}
.sn-o-hai>div{flex:1;min-width:0}
.sn-nhan{display:block;margin:0 0 6px 2px;font-size:12.5px;letter-spacing:.04em;color:rgba(255,226,241,.72)}
.sn-nhan small{font-size:11.5px;color:rgba(255,226,241,.45)}
.sn-o input,.sn-loi{width:100%;box-sizing:border-box;padding:11px 13px;border-radius:12px;border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);color:#fff4fa;font:inherit;font-size:16px;line-height:1.45}
.sn-loi{resize:vertical;min-height:96px}
.sn-o input:focus,.sn-loi:focus{outline:none;border-color:rgba(255,150,205,.7);background:rgba(255,255,255,.09)}
.sn-o input::placeholder,.sn-loi::placeholder{color:rgba(255,235,245,.35)}
.sn-nhom{display:flex;gap:6px;overflow-x:auto;margin:0 -18px 8px;padding:0 18px 2px;scrollbar-width:none}
.sn-nhom::-webkit-scrollbar{display:none}
.sn-nhom button{flex:none;padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:rgba(255,235,245,.75);font:inherit;font-size:13px;cursor:pointer;white-space:nowrap}
.sn-nhom button[aria-pressed="true"]{background:rgba(255,126,196,.22);border-color:rgba(255,150,205,.6);color:#ffe3f1}
.sn-loi-duoi{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-top:8px}
.sn-boc{min-height:40px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,150,205,.5);background:rgba(255,126,196,.14);
  color:#ffe3f1;font:inherit;font-size:14px;cursor:pointer}
.sn-boc:active{transform:scale(.97)}
.sn-dem{font-size:12px;color:rgba(255,235,245,.4);font-variant-numeric:tabular-nums}
/* kiểu bánh: dải hình nhỏ vuốt ngang (13 kiểu), máy tính rộng thì xếp lưới */
.sn-banh{display:flex;gap:8px;overflow-x:auto;margin:0 -18px;padding:0 18px 4px;scrollbar-width:none;scroll-snap-type:x proximity;scroll-padding:0 18px;
  overscroll-behavior-x:contain}
.sn-banh::-webkit-scrollbar{display:none}
.sn-banh button{flex:none;width:92px;display:flex;flex-direction:column;align-items:center;gap:4px;padding:6px 4px 8px;box-sizing:border-box;
  border-radius:14px;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,235,245,.78);
  font:inherit;font-size:12px;line-height:1.3;cursor:pointer;scroll-snap-align:start}
.sn-banh button[aria-pressed="true"]{border-color:rgba(255,150,205,.75);background:rgba(255,126,196,.14);color:#ffe3f1}
.sn-banh canvas{display:block;width:80px;height:63px}
.sn-kieu{display:flex;gap:8px}
.sn-kieu button{flex:1;min-width:0;display:flex;flex-direction:column;align-items:center;gap:6px;padding:9px 4px;border-radius:14px;
  border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.04);color:rgba(255,235,245,.78);font:inherit;font-size:12.5px;cursor:pointer}
.sn-kieu button[aria-pressed="true"]{border-color:rgba(255,150,205,.75);background:rgba(255,126,196,.14);color:#ffe3f1}
.sn-kieu span{width:38px;height:38px;border-radius:10px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.2)}
.sn-k-dem span{background:linear-gradient(#2c2060,#0b0918)}
.sn-k-hong span{background:linear-gradient(#fff0f4,#ff9fbc)}
.sn-k-nang span{background:linear-gradient(#fff8e3,#ffc169)}
.sn-ghi{margin:16px auto 0;font-size:12px;line-height:1.6;text-align:center;color:rgba(255,235,245,.42)}
.sn-phao{position:absolute;inset:0;z-index:9;pointer-events:none;overflow:hidden}
.sn-phao i{position:absolute;top:-16px;width:9px;height:14px;border-radius:2px;opacity:0;animation:sn-roi 2s cubic-bezier(.3,.6,.5,1) forwards}
@keyframes sn-roi{0%{opacity:1;transform:translate(0,0) rotate(0)}
  85%{opacity:1}100%{opacity:0;transform:translate(var(--lech),105vh) rotate(var(--xoay))}}
@media (min-width:860px){
  .sn-trong{display:grid;grid-template-columns:minmax(0,440px) minmax(0,400px);justify-content:center;align-content:start;column-gap:36px}
  .sn-trong>*{max-width:none;margin-left:0;margin-right:0;grid-column:2}
  .sn-tieude{grid-column:1 / -1;text-align:center}
  .sn-banh{flex-wrap:wrap;overflow:visible;margin:0;padding:0}
  .sn-xem{grid-column:1;grid-row:2 / span 14;width:100%;max-width:calc((100dvh - 150px) * .8);align-self:start;position:sticky;top:0}
}
@media (prefers-reduced-motion:reduce){.sn-phao{display:none}}
/* ---------- hết Chúc mừng sinh nhật ---------- */
/* ---------- Thế giới lượng tử (assets/luongtu.js, màn chơi ở lqchoi.js, các phòng ở lqsong.js, lqnguyentu.js, lqdo.js) ---------- */
.luongtu{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;color:#eef1ff;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%,#1a2150 0%,#0d1230 45%,#05070f 100%)}
.luongtu.hien{display:block}
.luongtu [hidden]{display:none!important}
.lq-dong{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;border-radius:50%;z-index:6;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,14,28,.55);color:#eef1ff;font-size:15px;line-height:1;cursor:pointer}
.lq-dau{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:100px;z-index:5;display:flex;align-items:center;gap:8px;min-height:46px}
.lq-lui{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;
  font-size:24px;line-height:1;cursor:pointer;padding:0 0 3px}
.lq-dau-chu{min-width:0}
.lq-tieude{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.1;color:#f4f6ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lq-phu{margin:1px 0 0;font-size:12px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.lq-than{position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + 62px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
/* nút Cài app chiếm 100–194 px tính từ mép phải: thanh tiêu đề chừa chỗ; điện thoại thì lùi xuống dưới hàng nút */
.co-nut-cai .lq-dau{right:204px}
@media (max-width:559px){
  .co-nut-cai .lq-dau{top:calc(env(safe-area-inset-top,0px) + 54px);right:12px}
  .co-nut-cai .lq-than{top:calc(env(safe-area-inset-top,0px) + 106px)}
}
.lq-bao{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:8;transform:translate(-50%,20px);
  width:max-content;max-width:min(560px,calc(100% - 32px));padding:10px 16px;border-radius:14px;background:rgba(12,16,36,.96);
  border:1px solid rgba(160,172,255,.35);color:#eef1ff;font-size:13.5px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.lq-bao.hien{opacity:1;transform:translate(-50%,0)}
/* bản đồ: các chặng xếp zích zắc (--lech), vòng quanh mỗi chặng tô theo số sao (--pt) */
.lq-bando{max-width:620px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.lq-bd-chao{margin:0 0 4px;text-align:center;font-size:15px;line-height:1.5;color:rgba(238,241,255,.82)}
.lq-bd-tong{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 0;max-width:260px}
.lq-bd-tong b{font:700 16px "Be Vietnam Pro",sans-serif;color:#ffcf6b;font-variant-numeric:lining-nums;white-space:nowrap}
.lq-bd-tong b span{color:rgba(255,255,255,.45);font-weight:500}
.lq-bd-tong i{flex:1;height:6px;border-radius:999px;background:linear-gradient(90deg,#ffcf6b var(--pt),rgba(255,255,255,.12) 0)}
.lq-bd-khung{position:relative}
.lq-bd-vet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.lq-bd-duong{position:relative;list-style:none;margin:0;padding:14px 0 4px;display:flex;flex-direction:column;align-items:center;gap:26px}
.lq-bd-chang{transform:translateX(calc(var(--lech) * 54px))}
.lq-bd-chang>button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 6px 6px;background:none;border:0;color:#eef1ff;cursor:pointer;font:inherit;
  -webkit-tap-highlight-color:transparent}
.lq-bd-tron{position:relative;display:block;width:94px;height:94px;border-radius:50%;padding:4px;box-sizing:border-box;
  background:conic-gradient(var(--m) var(--pt,0%),rgba(255,255,255,.13) 0);transition:transform .15s}
.lq-bd-chang>button:active .lq-bd-tron{transform:scale(.95)}
.lq-bd-hinh{display:block;width:100%;height:100%;border-radius:50%;background:#0b1026;border:3px solid #080b1a;box-sizing:border-box}
.lq-bd-tiep .lq-bd-tron::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,255,255,.6);opacity:0;
  pointer-events:none;animation:lq-nhip 1.9s ease-out 6}
@keyframes lq-nhip{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.3);opacity:0}}
.lq-bd-nhan{position:absolute;left:50%;top:-11px;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--m);color:#0b0f24;
  font:600 12px/1.35 "Be Vietnam Pro",sans-serif;font-style:normal;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.lq-bd-ten{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:20px;line-height:1.1;text-align:center;max-width:190px;color:#fff}
.lq-bd-sao{font-size:14px;letter-spacing:1.5px;color:#ffcf6b;line-height:1}
.lq-bd-sao span{color:rgba(255,255,255,.17)}
.lq-bd-phu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px}
.lq-bd-nut{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#eef1ff;font:500 14px "Be Vietnam Pro",sans-serif;cursor:pointer}
.lq-bd-nut span{font-size:17px}
@media (max-width:359px){.lq-bd-chang{transform:translateX(calc(var(--lech) * 38px))}}
@media (min-width:700px){
  .lq-bd-chang{transform:translateX(calc(var(--lech) * 118px))}
  .lq-bd-tron{width:108px;height:108px}
}
/* thí nghiệm tự do: lưới các phòng */
.lq-sanh{max-width:1100px;margin:0 auto;padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 30px)}
.lq-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.lq-luoi-phu{margin-top:12px;grid-template-columns:repeat(auto-fill,minmax(200px,1fr))}
.lq-o{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(16,22,48,.72);color:#eef1ff;font:inherit;transition:border-color .2s,transform .2s}
.lq-o:hover{border-color:var(--m)}
.lq-o:active{transform:scale(.985)}
.lq-o-hinh{display:block;width:100%;height:auto;aspect-ratio:240/150;background:#0b1026}
.lq-luoi-phu .lq-o-hinh{aspect-ratio:240/96}
.lq-o-chu{display:flex;flex-direction:column;gap:4px;padding:10px 12px 13px}
.lq-o-chu b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;line-height:1.15;color:#fff}
.lq-o-chu>span{font-size:13px;line-height:1.45;color:rgba(238,241,255,.72)}
.lq-o-dau{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(127,220,155,.92);color:#08240f;
  font:600 13px/24px "Be Vietnam Pro",sans-serif;text-align:center;font-style:normal}
@media (max-width:559px){
  .lq-luoi,.lq-luoi-phu{grid-template-columns:1fr;gap:10px}
  .lq-o{flex-direction:row;align-items:stretch}
  .lq-o-hinh,.lq-luoi-phu .lq-o-hinh{flex:none;width:112px;height:auto;aspect-ratio:auto;object-fit:cover}
  .lq-o-chu{justify-content:center;padding:10px 12px}
  .lq-o-chu b{font-size:19px}
  .lq-o-chu>span{font-size:12.5px}
}
.lq-chan{margin:18px 0 10px;font-size:12.5px;line-height:1.55;color:rgba(238,241,255,.55)}
.lq-chan-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* phòng thí nghiệm tự do: một cột, thẻ kiến thức gập dưới cùng */
.lq-phong{max-width:1000px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 26px)}
.lq-san{position:relative;height:clamp(280px,56vh,560px);border-radius:16px;overflow:hidden;background:#070b1c;border:1px solid rgba(255,255,255,.08)}
.lq-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-tap-highlight-color:transparent}
.lq-dk{padding:10px 2px 2px}
.lq-hang{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 8px}
.lq-hang-nhan{font-size:12px;color:rgba(238,241,255,.6);margin-right:2px}
.lq-chip{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#eef1ff;
  font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer;font-variant-numeric:lining-nums}
.lq-chip[aria-pressed="true"]{background:rgba(127,140,255,.32);border-color:rgba(160,172,255,.78)}
.lq-chip:disabled{opacity:.32;cursor:default}
.lq-nut{padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#eef1ff;
  font:500 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
.lq-nut[aria-pressed="true"]{background:rgba(127,140,255,.26);border-color:rgba(160,172,255,.7)}
.lq-nut-chinh{background:#7f8cff;border-color:#7f8cff;color:#0b0f24;font-weight:600}
.lq-nut:disabled{opacity:.4;cursor:default}
.lq-nut-cong{min-width:46px;font-family:"Cormorant Garamond",Georgia,serif;font-size:19px;font-weight:600;padding:5px 12px}
.lq-tieng{width:40px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:16px;cursor:pointer;padding:0}
.lq-so{margin:2px 0 12px;font-size:13.5px;line-height:1.55;color:#ffe6a8;font-variant-numeric:lining-nums;min-height:3em}
.lq-truots{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:6px}
.lq-truot{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;font-size:12.5px;color:rgba(238,241,255,.75)}
.lq-truot output{font-variant-numeric:lining-nums;color:#fff;font-size:12.5px;text-align:right}
.lq-truot input{grid-column:1/-1;width:100%;margin:4px 0;accent-color:#7f8cff}
.lq-meo{display:inline-flex;align-items:center;gap:5px;margin-right:8px;font-size:12.5px;color:rgba(238,241,255,.75)}
.lq-tn-chu{min-height:7.2em}
.lq-tn-chu h3{margin:0 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:23px;line-height:1.15;color:#fff}
.lq-tn-chu p{margin:0 0 10px;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.88);font-variant-numeric:lining-nums}
.lq-tn-cham .lq-chip{min-width:36px}
/* thẻ kiến thức (phòng tự do): gập lại, bấm "Đọc thêm" mới mở */
.lq-the{margin:10px 0 0;padding:0 2px 10px}
.lq-the>summary{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);font:500 14px "Be Vietnam Pro",sans-serif;color:#eef1ff;cursor:pointer;list-style:none}
.lq-the>summary::-webkit-details-marker{display:none}
.lq-the[open]>summary{margin-bottom:14px}
.lq-khoi{margin:0 0 15px}
.lq-khoi h3{margin:0 0 5px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:#a3acff;font-weight:600}
.lq-khoi p,.lq-khoi li{margin:0;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.9);font-variant-numeric:lining-nums}
.lq-khoi ul{margin:0;padding-left:18px}
.lq-khoi li+li{margin-top:5px}
.lq-hl{list-style:none;margin-left:-18px}
.lq-hl-sai{display:block;color:#ffaa96}
.lq-hl-dung{display:block;color:#a8f0c0}
.lq-nam{color:#ffcf6b;font-weight:600}
.lq-khoi-congThuc li{list-style:none;margin-left:-18px}
.lq-ct-dong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.3;color:#fff;font-variant-numeric:lining-nums}
.lq-nut-ct{margin-top:2px}
@media (min-width:900px){.lq-san{height:min(62vh,620px)}}
/* màn chơi */
.lq-choi{max-width:760px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 24px);animation:lq-vao .28s ease-out}
@keyframes lq-vao{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.lq-c-cham{display:flex;justify-content:center;gap:8px;margin:0 0 10px}
.lq-c-o{width:30px;height:30px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  color:rgba(238,241,255,.75);font:600 13px/1 "Be Vietnam Pro",sans-serif;font-variant-numeric:lining-nums;cursor:pointer}
.lq-c-o.lq-c-qua{border-color:var(--m);color:#ffcf6b}
.lq-c-o.lq-c-dang{background:var(--m);border-color:var(--m);color:#0b0f24}
.lq-c-o:disabled{opacity:.3;cursor:default}
.lq-c-san{height:clamp(230px,46vh,520px)}
.lq-c-hoi{margin:12px 4px 12px;text-align:center;font-weight:600;font-size:18px;line-height:1.35;color:#fff}
.lq-c-viec{display:flex;flex-direction:column;align-items:center;gap:12px}
.lq-c-nuts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.lq-c-nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:16px;border:0;
  background:var(--m);color:#0b0f24;font:600 16px "Be Vietnam Pro",sans-serif;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent}
.lq-c-nut:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.lq-c-nut:disabled,.lq-c-nut[aria-disabled="true"]{opacity:.38;cursor:default;transform:none;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.lq-c-nut span{font-size:20px;line-height:1}
.lq-c-nut[style*="--mau"],.lq-c-nut[data-kim]{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.2)}
.lq-c-nut i{flex:none;width:20px;height:20px;border-radius:50%;background:var(--mau,#fff);box-shadow:0 0 12px var(--mau,transparent)}
.lq-c-nut[data-kim] i{border-radius:5px;box-shadow:none}
.lq-c-nut.lq-c-nut-dang{border-color:#fff;background:rgba(255,255,255,.18)}
.lq-c-nut[data-kim="zn"] i{background:linear-gradient(135deg,#c8d0dc,#7f8899)}
.lq-c-nut[data-kim="cu"] i{background:linear-gradient(135deg,#f0a878,#a35a32)}
.lq-c-nut[data-kim="cs"] i{background:linear-gradient(135deg,#f6e3a0,#c9a24a)}
.lq-c-chimau{width:60px;height:60px;min-height:0;padding:0;border-radius:50%}
.lq-c-chimau i{width:34px;height:34px}
.lq-c-chons{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;width:100%;max-width:520px}
.lq-c-chon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;border-radius:14px;border:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#eef1ff;font:600 14px/1.25 "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.lq-c-chon:not(:disabled):hover{border-color:var(--m)}}
.lq-c-chon:disabled{cursor:default;color:#eef1ff}
.lq-c-hinh{display:block;width:100%;max-width:132px;height:auto;aspect-ratio:132/88;border-radius:9px}
.lq-c-bieu{display:flex;align-items:center;justify-content:center;width:100%;max-width:132px;aspect-ratio:132/88;border-radius:9px;background:#0b1026;font-size:40px}
.lq-c-chon.lq-c-chon-da{border-color:var(--m);background:rgba(255,255,255,.1);animation:lq-nay .32s ease-out}
.lq-da-chon .lq-c-chon:not(.lq-c-chon-da){opacity:.42}
@keyframes lq-nay{50%{transform:scale(1.07)}}
.lq-c-truot{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;font-size:14px;color:rgba(238,241,255,.8);white-space:nowrap}
.lq-c-truot input{flex:1;min-width:0;height:32px;margin:0;accent-color:var(--m)}
.lq-c-pho input{-webkit-appearance:none;appearance:none;height:16px;border-radius:999px;background:var(--pho)}
.lq-c-pho input::-webkit-slider-thumb{-webkit-appearance:none;width:28px;height:28px;border-radius:50%;background:#fff;border:3px solid #0b0f24;box-shadow:0 1px 6px rgba(0,0,0,.5)}
.lq-c-pho input::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#fff;border:3px solid #0b0f24}
.lq-c-do{display:flex;align-items:center;gap:10px;width:100%;max-width:520px}
.lq-c-do-thanh{position:relative;flex:1;height:20px;border-radius:999px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14)}
.lq-c-do-vung{position:absolute;top:0;bottom:0;background:rgba(127,220,155,.3);border-left:2px solid #7fdc9b;border-right:2px solid #7fdc9b}
.lq-c-do-kim{position:absolute;top:-5px;bottom:-5px;width:4px;margin-left:-2px;border-radius:2px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.7);transition:left .25s}
.lq-c-do-chu{min-width:52px;text-align:right;font:600 15px "Be Vietnam Pro",sans-serif;color:#fff;font-variant-numeric:lining-nums}
.lq-c-do-trung .lq-c-do-chu{color:#7fdc9b}
.lq-c-suutap{display:flex;gap:14px;justify-content:center}
.lq-c-ss{width:34px;height:34px;border-radius:50%;border:2px dashed var(--mau);opacity:.55;box-sizing:border-box;transition:background .3s,opacity .3s}
.lq-c-ss.lq-c-ss-co{background:var(--mau);border-style:solid;opacity:1;box-shadow:0 0 14px var(--mau)}
.lq-c-kq{margin:14px auto 0;max-width:560px;padding:14px 16px;border-radius:16px;background:rgba(16,22,48,.94);border:1px solid rgba(255,255,255,.14);
  text-align:center}
.lq-c-kq:empty{margin:0;padding:0;border:0}
.lq-c-kq.hien{animation:up .3s ease-out}
.lq-an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.lq-c-kq-dau{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:700 20px/1.3 "Be Vietnam Pro",sans-serif;color:#7fdc9b}
/* pháo sao: các ngôi sao nhỏ bay ra từ giữa rồi tắt */
.lq-phao{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.lq-phao i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);color:var(--c);font-style:normal;line-height:1;opacity:0;
  text-shadow:0 0 8px var(--c);animation:lq-phao var(--t) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes lq-phao{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(1);opacity:0}}
.lq-c-kq-sai{color:#ffab96}
.lq-c-sao-to{font-size:30px;line-height:1;color:#ffcf6b;animation:lq-sao .55s ease-out}
@keyframes lq-sao{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:none}}
.lq-c-hoc{margin:8px 0 4px;font-size:16px;line-height:1.5;color:#fff}
/* điều kỳ thú: hiện ngay, không phải mở "Vì sao?" */
.lq-c-ky{margin:6px auto 4px;max-width:480px;padding:8px 12px;border-radius:12px;background:rgba(255,207,107,.09);border:1px solid rgba(255,207,107,.28);
  font-size:14.5px;line-height:1.5;color:#ffe6a8;font-variant-numeric:lining-nums}
.lq-c-them{margin:6px 0 0}
.lq-c-them summary{display:inline-block;cursor:pointer;color:#a3acff;font-size:14px;list-style:none;padding:4px 8px}
.lq-c-them summary::-webkit-details-marker{display:none}
.lq-c-them p{margin:6px 0 0;text-align:left;font-size:14px;line-height:1.6;color:rgba(238,241,255,.86);font-variant-numeric:lining-nums}
.lq-c-kq-nut{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.lq-c-kq-nut .lq-nut{min-height:44px;padding:10px 18px;font-size:15px}
.lq-c-kq.hien .lq-nut-chinh{animation:lq-moi 1.3s ease-in-out .7s 2}
@keyframes lq-moi{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(127,140,255,.25)}}
.lq-c-het{max-width:520px;margin:0 auto;padding:36px 16px;text-align:center}
.lq-c-het .lq-c-het-sao{position:relative;margin:0 0 4px;font-size:44px;letter-spacing:4px;line-height:1.1;color:rgba(255,255,255,.15)}
.lq-c-het-sao span{display:inline-block}
.lq-c-het-sao .lq-c-het-co{color:#ffcf6b;text-shadow:0 0 14px rgba(255,207,107,.55);animation:lq-sao .55s ease-out both}
.lq-c-het h3{margin:12px 0 6px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:30px;line-height:1.15;color:#fff}
.lq-c-het p{margin:0 0 18px;color:rgba(238,241,255,.8);font-size:15px}
/* ứng dụng trong đời sống, màn hết chặng */
.lq-ud{margin:0 auto 18px;max-width:480px;text-align:left;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.lq-c-het .lq-ud-dau{margin:0 0 8px;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#ffcf6b;text-align:center}
.lq-ud ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.lq-ud li{display:grid;grid-template-columns:26px 1fr;column-gap:8px;font-size:14px;line-height:1.42;color:rgba(238,241,255,.85);text-wrap:pretty}
.lq-ud li span{grid-row:1/3;font-size:20px;line-height:1.2}
.lq-ud li b{color:#fff;font-weight:600}
.lq-ud li.lq-ud-nhom{display:block;margin-top:4px;font-size:12.5px;font-weight:600;color:#9fe6ff}
.lq-ud li.lq-ud-nhom:first-child{margin-top:0}
.lq-ud li.lq-ud-nhom~li.lq-ud-nhom{color:#ffcf6b}
/* ôn nhanh cuối chặng */
.lq-on{margin:0 auto 18px;max-width:480px;text-align:left}
.lq-on:empty{display:none}
.lq-c-het .lq-on-dau{margin:0 0 6px;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--m);text-align:center}
.lq-c-het .lq-on-hoi{margin:0 0 10px;font-size:16px;line-height:1.45;color:#fff}
.lq-on-chon{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.lq-c-het .lq-on-giai{margin:0 0 10px;font-size:14px;line-height:1.55;color:rgba(238,241,255,.9)}
.lq-on .lq-nut{display:block;margin:0 auto}
/* đố vui, sổ khái niệm */
.lq-do,.lq-sotay{max-width:700px;margin:0 auto;padding:6px 16px calc(env(safe-area-inset-bottom,0px) + 30px)}
.lq-do-dem{margin:0;font-size:12.5px;color:rgba(238,241,255,.6);font-variant-numeric:lining-nums}
.lq-do-hoi{margin:6px 0 14px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.25;color:#fff}
.lq-do-chon{display:flex;flex-direction:column;gap:8px}
.lq-do-dap{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#eef1ff;
  font:500 14.5px/1.45 "Be Vietnam Pro",sans-serif;text-align:left;cursor:pointer}
.lq-do-dap:disabled{cursor:default;opacity:.75}
.lq-do-dap.lq-dung{border-color:rgba(127,220,155,.85);background:rgba(127,220,155,.18);opacity:1}
.lq-do-dap.lq-sai{border-color:rgba(255,140,120,.85);background:rgba(255,140,120,.16);opacity:1}
.lq-do-giai{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.92)}
.lq-do-sau{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.lq-do-het{text-align:center;padding-top:28px}
.lq-do-het .lq-do-sau{justify-content:center}
.lq-do-diem{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:76px;line-height:1;color:#fff;font-variant-numeric:lining-nums}
.lq-do-diem span{font-size:32px;color:rgba(238,241,255,.6)}
.lq-do-loi{margin:12px 0 4px;font-size:15px;color:rgba(238,241,255,.9)}
.lq-do-cao{margin:0;font-size:13px;color:#ffcf6b}
.lq-st-tim{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:15px "Be Vietnam Pro",sans-serif;margin:4px 0 14px}
.lq-st-tim::placeholder{color:rgba(238,241,255,.45)}
.lq-st-muc{padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.lq-st-muc h3{margin:0 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;color:#fff}
.lq-st-muc h3 span{font-family:"Be Vietnam Pro",sans-serif;font-size:12px;font-weight:400;color:rgba(238,241,255,.55)}
.lq-st-muc p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.88);font-variant-numeric:lining-nums}
.lq-st-di{margin-top:6px;padding:0;border:0;background:none;color:#a3acff;font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer}
.lq-st-rong{color:rgba(238,241,255,.6)}
/* bài học hoạt hình đầu chặng: vạch tiến độ từng cảnh, sân khấu, một câu, nút lùi / tiếp */
.lq-bh{max-width:760px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 24px);animation:lq-vao .28s ease-out}
.lq-bh-vach{display:flex;gap:5px;margin:0 2px 10px}
.lq-bh-vach i{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.lq-bh-vach b{display:block;height:100%;background:var(--m);transform:scaleX(0);transform-origin:left center}
.lq-bh-san{height:clamp(250px,48vh,540px)}
.lq-bh-san .lq-cv{cursor:pointer}
.lq-bh-lai{position:absolute;right:10px;bottom:10px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,14,34,.88);color:#fff;font:600 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
.lq-bh-chu{margin:14px 6px;min-height:2.8em;text-align:center;font-weight:600;font-size:18px;line-height:1.4;color:#fff;font-variant-numeric:lining-nums;text-wrap:balance}
.lq-bh-chu.lq-bh-moi{animation:lq-chu .4s ease-out}
@keyframes lq-chu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cảnh cho chạm tay: thanh kéo dưới câu; ghi chú nhỏ hình nào là ẩn dụ */
.lq-bh-keo{display:flex;flex-direction:column;align-items:center;gap:4px;margin:-4px auto 12px;max-width:520px}
.lq-bh-goiy{font-size:12.5px;color:#ffe6a8}
.lq-bh-ghi{margin:-6px 10px 12px;text-align:center;font-size:12.5px;line-height:1.45;color:rgba(238,241,255,.55);font-style:italic}
.lq-bh-nut{display:flex;justify-content:center;gap:10px}
.lq-bh-nut .lq-nut{min-height:50px;padding:10px 28px;font-size:16px;border-radius:14px}
.lq-bh-nut .lq-bh-truoc{width:54px;padding:0;font-size:24px;line-height:1}
.lq-bh-tiep.lq-bh-moi-bam{animation:lq-moi 1.3s ease-in-out 3}
.lq-bh-bo{display:block;margin:10px auto 0;padding:8px 12px;border:0;background:none;color:rgba(238,241,255,.62);
  font:500 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.lq-c-bai{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;margin-right:4px;border-radius:999px;border:1.5px solid var(--m);
  background:rgba(255,255,255,.06);color:#fff;font:600 13px "Be Vietnam Pro",sans-serif;cursor:pointer;white-space:nowrap}
.lq-c-bai span,.lq-c-hh span{font-size:10px;color:var(--m)}
.lq-c-hh{display:inline-flex;align-items:center;gap:7px;margin:6px auto 2px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--m);
  background:rgba(255,255,255,.07);color:#fff;font:600 14px "Be Vietnam Pro",sans-serif;cursor:pointer}
@media (prefers-reduced-motion:reduce){.lq-o,.lq-bao,.lq-bd-tron,.lq-c-do-kim,.lq-c-ss{transition:none}
  .lq-c-kq.hien,.lq-c-sao-to,.lq-bd-tiep .lq-bd-tron::after,.lq-choi,.lq-c-chon.lq-c-chon-da,.lq-c-kq.hien .lq-nut-chinh,.lq-c-het-sao .lq-c-het-co,
  .lq-bh,.lq-bh-chu.lq-bh-moi,.lq-bh-tiep.lq-bh-moi-bam{animation:none}}
/* ---------- hết Thế giới lượng tử ---------- */
/* ---------- Bên trong AI (assets/ai.js; phòng ở aiphong.js, aimang.js, aiviet.js, ainhin.js, ainhieu.js, aithusai.js, aidung.js; lõi noron.js) ---------- */
.ai{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;color:#eef1ff;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%,#2a1a52 0%,#110f33 45%,#05060f 100%)}
.ai.hien{display:block}
.ai [hidden]{display:none!important}
.ai-dong{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;border-radius:50%;z-index:6;
  border:1px solid rgba(255,255,255,.18);background:rgba(10,14,28,.55);color:#eef1ff;font-size:15px;line-height:1;cursor:pointer}
.ai-dau{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:100px;z-index:5;display:flex;align-items:center;gap:8px;min-height:46px}
.ai-lui{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;
  font-size:24px;line-height:1;cursor:pointer;padding:0 0 3px}
.ai-dau-chu{min-width:0}
.ai-tieude{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.1;color:#f4f6ff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-phu{margin:1px 0 0;font-size:12px;color:rgba(238,241,255,.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ai-than{position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + 62px);overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch}
/* nút Cài app chiếm 100–194 px tính từ mép phải: thanh tiêu đề chừa chỗ; điện thoại thì lùi xuống dưới hàng nút */
.co-nut-cai .ai-dau{right:204px}
@media (max-width:559px){
  .co-nut-cai .ai-dau{top:calc(env(safe-area-inset-top,0px) + 54px);right:12px}
  .co-nut-cai .ai-than{top:calc(env(safe-area-inset-top,0px) + 106px)}
}
.ai-bao{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:8;transform:translate(-50%,20px);
  width:max-content;max-width:min(560px,calc(100% - 32px));padding:10px 16px;border-radius:14px;background:rgba(12,16,36,.96);
  border:1px solid rgba(233,182,255,.35);color:#eef1ff;font-size:13.5px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.ai-bao.hien{opacity:1;transform:translate(-50%,0)}
/* bản đồ: các chặng xếp zích zắc (--lech), vòng quanh mỗi chặng tô theo số sao (--pt) */
.ai-bando{max-width:620px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.ai-bd-chao{margin:0 0 4px;text-align:center;font-size:15px;line-height:1.5;color:rgba(238,241,255,.82)}
.ai-bd-tong{display:flex;align-items:center;justify-content:center;gap:10px;margin:6px auto 0;max-width:260px}
.ai-bd-tong b{font:700 16px "Be Vietnam Pro",sans-serif;color:#ffcf6b;font-variant-numeric:lining-nums;white-space:nowrap}
.ai-bd-tong b span{color:rgba(255,255,255,.45);font-weight:500}
.ai-bd-tong i{flex:1;height:6px;border-radius:999px;background:linear-gradient(90deg,#ffcf6b var(--pt),rgba(255,255,255,.12) 0)}
.ai-bd-khung{position:relative}
.ai-bd-vet{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.ai-bd-duong{position:relative;list-style:none;margin:0;padding:14px 0 4px;display:flex;flex-direction:column;align-items:center;gap:26px}
.ai-bd-chang{transform:translateX(calc(var(--lech) * 54px))}
.ai-bd-chang>button{display:flex;flex-direction:column;align-items:center;gap:4px;padding:4px 6px 6px;background:none;border:0;color:#eef1ff;cursor:pointer;font:inherit;
  -webkit-tap-highlight-color:transparent}
.ai-bd-tron{position:relative;display:block;width:94px;height:94px;border-radius:50%;padding:4px;box-sizing:border-box;
  background:conic-gradient(var(--m) var(--pt,0%),rgba(255,255,255,.13) 0);transition:transform .15s}
.ai-bd-chang>button:active .ai-bd-tron{transform:scale(.95)}
.ai-bd-hinh{display:block;width:100%;height:100%;border-radius:50%;background:#0b1026;border:3px solid #080b1a;box-sizing:border-box}
.ai-bd-tiep .ai-bd-tron::after{content:"";position:absolute;inset:-3px;border-radius:50%;border:2px solid rgba(255,255,255,.6);opacity:0;
  pointer-events:none;animation:ai-nhip 1.9s ease-out 6}
@keyframes ai-nhip{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.3);opacity:0}}
.ai-bd-nhan{position:absolute;left:50%;top:-11px;transform:translateX(-50%);padding:3px 10px;border-radius:999px;background:var(--m);color:#0b0f24;
  font:600 12px/1.35 "Be Vietnam Pro",sans-serif;font-style:normal;white-space:nowrap;box-shadow:0 2px 8px rgba(0,0,0,.45)}
.ai-bd-ten{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:20px;line-height:1.1;text-align:center;max-width:190px;color:#fff}
.ai-bd-sao{font-size:14px;letter-spacing:1.5px;color:#ffcf6b;line-height:1}
.ai-bd-sao span{color:rgba(255,255,255,.17)}
.ai-bd-phu{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;margin-top:22px}
.ai-bd-nut{display:inline-flex;align-items:center;gap:7px;padding:10px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#eef1ff;font:500 14px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ai-bd-nut span{font-size:17px}
@media (max-width:359px){.ai-bd-chang{transform:translateX(calc(var(--lech) * 38px))}}
@media (min-width:700px){
  .ai-bd-chang{transform:translateX(calc(var(--lech) * 118px))}
  .ai-bd-tron{width:108px;height:108px}
}
/* thí nghiệm tự do: lưới các phòng */
.ai-sanh{max-width:1100px;margin:0 auto;padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 30px)}
.ai-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:12px}
.ai-o{position:relative;display:flex;flex-direction:column;align-items:stretch;text-align:left;padding:0;border-radius:16px;overflow:hidden;cursor:pointer;
  border:1px solid rgba(255,255,255,.12);background:rgba(16,22,48,.72);color:#eef1ff;font:inherit;transition:border-color .2s,transform .2s}
.ai-o:hover{border-color:var(--m)}
.ai-o:active{transform:scale(.985)}
.ai-o-hinh{display:block;width:100%;height:auto;aspect-ratio:240/150;background:#0b1026}
.ai-o-chu{display:flex;flex-direction:column;gap:4px;padding:10px 12px 13px}
.ai-o-chu b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;line-height:1.15;color:#fff}
.ai-o-chu>span{font-size:13px;line-height:1.45;color:rgba(238,241,255,.72)}
.ai-o-dau{position:absolute;top:8px;right:8px;width:24px;height:24px;border-radius:50%;background:rgba(127,220,155,.92);color:#08240f;
  font:600 13px/24px "Be Vietnam Pro",sans-serif;text-align:center;font-style:normal}
@media (max-width:559px){
  .ai-o{flex-direction:row;align-items:center}
  .ai-o-hinh{width:40%;flex:0 0 40%}   /* trước: ảnh chiếm gần hết hàng, cột chữ còn chừng 80px (người học thử 23/10/2026) */
  .ai-o-chu{flex:1 1 auto;min-width:0;justify-content:center;padding:10px 12px}
  .ai-o-chu b{font-size:19px}
  .ai-o-chu>span{font-size:12.5px}
}
.ai-chan{margin:18px 0 10px;font-size:12.5px;line-height:1.55;color:rgba(238,241,255,.55)}
.ai-chan-nut{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
/* phòng thí nghiệm tự do: một cột, thẻ kiến thức gập dưới cùng */
.ai-phong{max-width:1000px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 26px)}
.ai-san{position:relative;height:clamp(280px,56vh,560px);border-radius:16px;overflow:hidden;background:#070b1c;border:1px solid rgba(255,255,255,.08)}
.ai-cv{position:absolute;inset:0;width:100%;height:100%;display:block;touch-action:none;-webkit-tap-highlight-color:transparent}
.ai-dk{padding:10px 2px 2px}
.ai-hang{display:flex;flex-wrap:wrap;gap:7px;align-items:center;margin:0 0 8px}
.ai-hang-nhan{font-size:12px;color:rgba(238,241,255,.6);margin-right:2px}
.ai-chip{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#eef1ff;
  font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer;font-variant-numeric:lining-nums}
.ai-chip[aria-pressed="true"]{background:rgba(214,92,245,.32);border-color:rgba(233,182,255,.78)}
.ai-chip:disabled{opacity:.32;cursor:default}
.ai-nut{padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#eef1ff;
  font:500 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ai-nut[aria-pressed="true"]{background:rgba(214,92,245,.26);border-color:rgba(233,182,255,.7)}
.ai-nut-chinh{background:#d65cf5;border-color:#d65cf5;color:#0b0f24;font-weight:600}
.ai-nut:disabled{opacity:.4;cursor:default}
.ai-tieng{width:40px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:16px;cursor:pointer;padding:0}
.ai-so{margin:2px 0 12px;font-size:13.5px;line-height:1.55;color:#ffe6a8;font-variant-numeric:lining-nums;min-height:3em}
.ai-truots{display:grid;gap:10px 18px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));margin-bottom:6px}
.ai-truot{display:grid;grid-template-columns:1fr auto;gap:2px 8px;align-items:center;font-size:12.5px;color:rgba(238,241,255,.75)}
.ai-truot output{font-variant-numeric:lining-nums;color:#fff;font-size:12.5px;text-align:right}
.ai-truot input{grid-column:1/-1;width:100%;margin:4px 0;accent-color:#d65cf5}
/* thẻ kiến thức (phòng tự do): gập lại, bấm "Đọc thêm" mới mở */
.ai-the{margin:10px 0 0;padding:0 2px 10px}
.ai-the>summary{display:inline-flex;align-items:center;gap:6px;padding:10px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);font:500 14px "Be Vietnam Pro",sans-serif;color:#eef1ff;cursor:pointer;list-style:none}
.ai-the>summary::-webkit-details-marker{display:none}
.ai-the[open]>summary{margin-bottom:14px}
.ai-khoi{margin:0 0 15px}
.ai-khoi h3{margin:0 0 5px;font-size:11.5px;letter-spacing:.6px;text-transform:uppercase;color:#e9b6ff;font-weight:600}
.ai-khoi p,.ai-khoi li{margin:0;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.9);font-variant-numeric:lining-nums}
.ai-khoi ul{margin:0;padding-left:18px}
.ai-khoi li+li{margin-top:5px}
.ai-hl{list-style:none;margin-left:-18px}
.ai-hl-sai{display:block;color:#ffaa96}
.ai-hl-dung{display:block;color:#a8f0c0}
.ai-nam{color:#ffcf6b;font-weight:600}
.ai-khoi-congThuc li{list-style:none;margin-left:-18px}
.ai-ct-dong{display:block;font-family:"Cormorant Garamond",Georgia,serif;font-size:20px;line-height:1.3;color:#fff;font-variant-numeric:lining-nums}
.ai-nut-ct{margin-top:2px}
@media (min-width:900px){.ai-san{height:min(62vh,620px)}}
/* màn chơi */
.ai-choi{max-width:760px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 24px);animation:ai-vao .28s ease-out}
@keyframes ai-vao{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ai-c-cham{display:flex;justify-content:center;gap:8px;margin:0 0 10px}
.ai-c-o{width:30px;height:30px;padding:0;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  color:rgba(238,241,255,.75);font:600 13px/1 "Be Vietnam Pro",sans-serif;font-variant-numeric:lining-nums;cursor:pointer}
.ai-c-o.ai-c-qua{border-color:var(--m);color:#ffcf6b}
.ai-c-o.ai-c-dang{background:var(--m);border-color:var(--m);color:#0b0f24}
.ai-c-o:disabled{opacity:.3;cursor:default}
.ai-c-san{height:clamp(230px,46vh,520px)}
.ai-c-hoi{margin:12px 4px 12px;text-align:center;font-weight:600;font-size:18px;line-height:1.35;color:#fff}
.ai-c-viec{display:flex;flex-direction:column;align-items:center;gap:12px}
.ai-c-nuts{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.ai-c-nut{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:52px;padding:10px 22px;border-radius:16px;border:0;
  background:var(--m);color:#0b0f24;font:600 16px "Be Vietnam Pro",sans-serif;cursor:pointer;box-shadow:0 4px 0 rgba(0,0,0,.35);
  -webkit-tap-highlight-color:transparent}
.ai-c-nut:active{transform:translateY(2px);box-shadow:0 2px 0 rgba(0,0,0,.35)}
.ai-c-nut:disabled,.ai-c-nut[aria-disabled="true"]{opacity:.38;cursor:default;transform:none;box-shadow:0 4px 0 rgba(0,0,0,.35)}
.ai-c-nut span{font-size:20px;line-height:1}
.ai-c-chons{display:grid;grid-template-columns:repeat(auto-fit,minmax(92px,1fr));gap:10px;width:100%;max-width:520px}
.ai-c-chon{display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 6px 10px;border-radius:14px;border:2px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.05);color:#eef1ff;font:600 14px/1.25 "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
@media (hover:hover){.ai-c-chon:not(:disabled):hover{border-color:var(--m)}}
.ai-c-chon:disabled{cursor:default;color:#eef1ff}
.ai-c-hinh{display:block;width:100%;max-width:132px;height:auto;aspect-ratio:132/88;border-radius:9px}
.ai-c-bieu{display:flex;align-items:center;justify-content:center;width:100%;max-width:132px;aspect-ratio:132/88;border-radius:9px;background:#0b1026;font-size:40px}
.ai-c-chon.ai-c-chon-da{border-color:var(--m);background:rgba(255,255,255,.1);animation:ai-nay .32s ease-out}
.ai-da-chon .ai-c-chon:not(.ai-c-chon-da){opacity:.42}
@keyframes ai-nay{50%{transform:scale(1.07)}}
.ai-c-truot{display:flex;align-items:center;gap:10px;width:100%;max-width:520px;font-size:14px;color:rgba(238,241,255,.8);white-space:nowrap}
.ai-c-truot input{flex:1;min-width:0;height:32px;margin:0;accent-color:var(--m)}
.ai-c-kq{margin:14px auto 0;max-width:560px;padding:14px 16px;border-radius:16px;background:rgba(16,22,48,.94);border:1px solid rgba(255,255,255,.14);
  text-align:center}
.ai-c-kq:empty{margin:0;padding:0;border:0}
.ai-c-kq.hien{animation:up .3s ease-out}
.ai-c-kq-dau{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:700 20px/1.3 "Be Vietnam Pro",sans-serif;color:#7fdc9b}
/* pháo sao: các ngôi sao nhỏ bay ra từ giữa rồi tắt */
.ai-phao{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.ai-phao i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);color:var(--c);font-style:normal;line-height:1;opacity:0;
  text-shadow:0 0 8px var(--c);animation:ai-phao var(--t) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes ai-phao{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(1);opacity:0}}
.ai-c-kq-sai{color:#ffab96}
.ai-c-sao-to{font-size:30px;line-height:1;color:#ffcf6b;animation:ai-sao .55s ease-out}
@keyframes ai-sao{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:none}}
.ai-c-hoc{margin:8px 0 4px;font-size:16px;line-height:1.5;color:#fff}
/* điều kỳ thú: hiện ngay, không phải mở "Vì sao?" */
.ai-c-ky{margin:6px auto 4px;max-width:480px;padding:8px 12px;border-radius:12px;background:rgba(255,207,107,.09);border:1px solid rgba(255,207,107,.28);
  font-size:14.5px;line-height:1.5;color:#ffe6a8;font-variant-numeric:lining-nums}
.ai-c-them{margin:6px 0 0}
.ai-c-them summary{display:inline-block;cursor:pointer;color:#e9b6ff;font-size:14px;list-style:none;padding:4px 8px}
.ai-c-them summary::-webkit-details-marker{display:none}
.ai-c-them p{margin:6px 0 0;text-align:left;font-size:14px;line-height:1.6;color:rgba(238,241,255,.86);font-variant-numeric:lining-nums}
.ai-c-kq-nut{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.ai-c-kq-nut .ai-nut{min-height:44px;padding:10px 18px;font-size:15px}
.ai-c-kq.hien .ai-nut-chinh{animation:ai-moi 1.3s ease-in-out .7s 2}
@keyframes ai-moi{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(214,92,245,.25)}}
.ai-c-het{max-width:520px;margin:0 auto;padding:36px 16px;text-align:center}
.ai-c-het .ai-c-het-sao{position:relative;margin:0 0 4px;font-size:44px;letter-spacing:4px;line-height:1.1;color:rgba(255,255,255,.15)}
.ai-c-het-sao span{display:inline-block}
.ai-c-het-sao .ai-c-het-co{color:#ffcf6b;text-shadow:0 0 14px rgba(255,207,107,.55);animation:ai-sao .55s ease-out both}
.ai-c-het h3{margin:12px 0 6px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:30px;line-height:1.15;color:#fff}
.ai-c-het p{margin:0 0 18px;color:rgba(238,241,255,.8);font-size:15px}
/* ứng dụng trong đời sống, màn hết chặng */
.ai-ud{margin:0 auto 18px;max-width:480px;text-align:left;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.ai-c-het .ai-ud-dau{margin:0 0 8px;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#ffcf6b;text-align:center}
.ai-ud ul{margin:0;padding:0;list-style:none;display:grid;gap:7px}
.ai-ud li{display:grid;grid-template-columns:26px 1fr;column-gap:8px;font-size:14px;line-height:1.42;color:rgba(238,241,255,.85);text-wrap:pretty}
.ai-ud li span{grid-row:1/3;font-size:20px;line-height:1.2}
.ai-ud li b{color:#fff;font-weight:600}
/* ôn nhanh cuối chặng */
.ai-on{margin:0 auto 18px;max-width:480px;text-align:left}
.ai-on:empty{display:none}
.ai-c-het .ai-on-dau{margin:0 0 6px;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.4px;text-transform:uppercase;color:var(--m);text-align:center}
.ai-c-het .ai-on-hoi{margin:0 0 10px;font-size:16px;line-height:1.45;color:#fff}
.ai-on-chon{display:flex;flex-direction:column;gap:8px;margin-bottom:10px}
.ai-c-het .ai-on-giai{margin:0 0 10px;font-size:14px;line-height:1.55;color:rgba(238,241,255,.9)}
.ai-on .ai-nut{display:block;margin:0 auto}
/* đố vui, sổ khái niệm */
.ai-do,.ai-sotay{max-width:700px;margin:0 auto;padding:6px 16px calc(env(safe-area-inset-bottom,0px) + 30px)}
.ai-do-dem{margin:0;font-size:12.5px;color:rgba(238,241,255,.6);font-variant-numeric:lining-nums}
.ai-do-hoi{margin:6px 0 14px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.25;color:#fff}
.ai-do-chon{display:flex;flex-direction:column;gap:8px}
.ai-do-dap{padding:12px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#eef1ff;
  font:500 14.5px/1.45 "Be Vietnam Pro",sans-serif;text-align:left;cursor:pointer}
.ai-do-dap:disabled{cursor:default;opacity:.75}
.ai-do-dap.ai-dung{border-color:rgba(127,220,155,.85);background:rgba(127,220,155,.18);opacity:1}
.ai-do-dap.ai-sai{border-color:rgba(255,140,120,.85);background:rgba(255,140,120,.16);opacity:1}
.ai-do-giai{margin:14px 0 0;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.92)}
.ai-do-sau{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px}
.ai-do-het{text-align:center;padding-top:28px}
.ai-do-het .ai-do-sau{justify-content:center}
.ai-do-diem{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-size:76px;line-height:1;color:#fff;font-variant-numeric:lining-nums}
.ai-do-diem span{font-size:32px;color:rgba(238,241,255,.6)}
.ai-do-loi{margin:12px 0 4px;font-size:15px;color:rgba(238,241,255,.9)}
.ai-do-cao{margin:0;font-size:13px;color:#ffcf6b}
.ai-st-tim{width:100%;box-sizing:border-box;padding:11px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1ff;font:15px "Be Vietnam Pro",sans-serif;margin:4px 0 14px}
.ai-st-tim::placeholder{color:rgba(238,241,255,.45)}
.ai-st-muc{padding:12px 0;border-top:1px solid rgba(255,255,255,.08)}
.ai-st-muc h3{margin:0 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;color:#fff}
.ai-st-muc h3 span{font-family:"Be Vietnam Pro",sans-serif;font-size:12px;font-weight:400;color:rgba(238,241,255,.55)}
.ai-st-muc p{margin:0;font-size:14.5px;line-height:1.6;color:rgba(238,241,255,.88);font-variant-numeric:lining-nums}
.ai-st-di{margin-top:6px;padding:0;border:0;background:none;color:#e9b6ff;font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ai-st-rong{color:rgba(238,241,255,.6)}
/* bài học hoạt hình đầu chặng: vạch tiến độ từng cảnh, sân khấu, một câu, nút lùi / tiếp */
.ai-bh{max-width:760px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 24px);animation:ai-vao .28s ease-out}
.ai-bh-vach{display:flex;gap:5px;margin:0 2px 10px}
.ai-bh-vach i{flex:1;height:4px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden}
.ai-bh-vach b{display:block;height:100%;background:var(--m);transform:scaleX(0);transform-origin:left center}
.ai-bh-san{height:clamp(250px,48vh,540px)}
.ai-bh-san .ai-cv{cursor:pointer}
.ai-bh-lai{position:absolute;right:10px;bottom:10px;padding:8px 14px;border-radius:999px;border:1px solid rgba(255,255,255,.25);
  background:rgba(10,14,34,.88);color:#fff;font:600 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
.ai-bh-chu{margin:14px 6px;min-height:2.8em;text-align:center;font-weight:600;font-size:18px;line-height:1.4;color:#fff;font-variant-numeric:lining-nums;text-wrap:balance}
.ai-bh-chu.ai-bh-moi{animation:ai-chu .4s ease-out}
@keyframes ai-chu{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
/* cảnh cho chạm tay: thanh kéo dưới câu; ghi chú nhỏ hình nào là ẩn dụ */
.ai-bh-keo{display:flex;flex-direction:column;align-items:center;gap:4px;margin:-4px auto 12px;max-width:520px}
.ai-bh-ghi{margin:-6px 10px 12px;text-align:center;font-size:12.5px;line-height:1.45;color:rgba(238,241,255,.55);font-style:italic}
.ai-bh-nut{display:flex;justify-content:center;gap:10px}
.ai-bh-nut .ai-nut{min-height:50px;padding:10px 28px;font-size:16px;border-radius:14px}
.ai-bh-nut .ai-bh-truoc{width:54px;padding:0;font-size:24px;line-height:1}
.ai-bh-tiep.ai-bh-moi-bam{animation:ai-moi 1.3s ease-in-out 3}
.ai-bh-bo{display:block;margin:10px auto 0;padding:8px 12px;border:0;background:none;color:rgba(238,241,255,.62);
  font:500 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.ai-c-bai{display:inline-flex;align-items:center;gap:6px;height:30px;padding:0 12px;margin-right:4px;border-radius:999px;border:1.5px solid var(--m);
  background:rgba(255,255,255,.06);color:#fff;font:600 13px "Be Vietnam Pro",sans-serif;cursor:pointer;white-space:nowrap}
.ai-c-bai span,.ai-c-hh span{font-size:10px;color:var(--m)}
.ai-c-hh{display:inline-flex;align-items:center;gap:7px;margin:6px auto 2px;padding:9px 16px;border-radius:999px;border:1.5px solid var(--m);
  background:rgba(255,255,255,.07);color:#fff;font:600 14px "Be Vietnam Pro",sans-serif;cursor:pointer}
  .ai-c-kq.hien,.ai-c-sao-to,.ai-bd-tiep .ai-bd-tron::after,.ai-choi,.ai-c-chon.ai-c-chon-da,.ai-c-kq.hien .ai-nut-chinh,.ai-c-het-sao .ai-c-het-co,
  .ai-bh,.ai-bh-chu.ai-bh-moi,.ai-bh-tiep.ai-bh-moi-bam{animation:none}}
/* phần riêng của Bên trong AI */
.ai-c-tu{display:flex;align-items:center;justify-content:center;width:100%;max-width:132px;aspect-ratio:132/88;border-radius:9px;background:#0b1026;
  font:600 30px/1 "Cormorant Garamond",Georgia,serif;color:#fff}
.ai-c-truot-so{min-width:34px;text-align:right;font:600 14px "Be Vietnam Pro",sans-serif;color:#fff;font-variant-numeric:lining-nums}
.ai-c-nut b{font-weight:600}
.ai-dem{display:inline-block;min-width:20px;text-align:center;font:700 15px "Be Vietnam Pro",sans-serif;color:#fff;font-variant-numeric:lining-nums}
.ai-so{margin:2px 0 8px;font-size:13.5px;line-height:1.55;color:#f3d6ff;font-variant-numeric:lining-nums}
.ai-dk .ai-truot{margin:2px 0 10px;max-width:520px}
.ai-o-nhap{display:flex;flex-direction:column;gap:5px;margin:4px 0 10px;max-width:420px;font-size:12.5px;color:rgba(238,241,255,.75)}
.ai-o-nhap input{padding:9px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;font:15px "Be Vietnam Pro",sans-serif}
/* phòng máy viết: câu ở trên, các thanh chữ ở dưới, trong cùng một khung */
.ai-san.ai-san-chu .ai-cv{bottom:auto;height:42%}
.ai-chu-bang{position:absolute;left:0;right:0;top:42%;bottom:0;overflow-y:auto;padding:8px 12px 10px;border-top:1px solid rgba(255,255,255,.08)}
.ai-chu-hoi{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:rgba(238,241,255,.82)}
.ai-chu-bar{display:grid;grid-template-columns:minmax(64px,auto) minmax(0,1fr) 46px;align-items:center;gap:10px;width:100%;margin:0 0 6px;padding:7px 10px;
  border-radius:12px;border:1px solid rgba(95,224,208,.25);background:rgba(95,224,208,.06);color:#fff;text-align:left;cursor:pointer;
  font:500 16px "Cormorant Garamond",Georgia,serif;-webkit-tap-highlight-color:transparent}
.ai-chu-bar:disabled{cursor:default}
.ai-chu-bar.ai-chu-dang{border-color:#5fe0d0;background:rgba(95,224,208,.22)}
.ai-chu-tu{font-size:19px;line-height:1.1;white-space:nowrap}
.ai-chu-ray{height:10px;border-radius:999px;background:rgba(255,255,255,.08);overflow:hidden}
.ai-chu-ray i{display:block;height:100%;border-radius:999px;background:#5fe0d0;transition:width .35s}
.ai-chu-pt{font:600 13px "Be Vietnam Pro",sans-serif;text-align:right;color:#bff5ee;font-variant-numeric:lining-nums}
.ai-chu-con{margin:2px 0 0;font-size:12.5px;color:rgba(238,241,255,.55)}
.ai-chu-nut{display:flex;gap:8px;margin-top:6px}
.ai-an{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.ai-choi[data-phong="chu"] .ai-c-san,.ai-phong[data-phong="chu"] .ai-san{height:clamp(380px,64vh,620px)}
.ai-choi[data-phong="ve"] .ai-c-san{height:clamp(300px,58vh,560px)}
.ai-choi[data-phong="mang"] .ai-c-san{height:clamp(300px,54vh,560px)}
.ai-choi[data-phong="noron"] .ai-c-san{height:clamp(320px,56vh,560px)}
@media (prefers-reduced-motion:reduce){.ai-chu-ray i{transition:none}}
/* đợt 2 — phòng dùng AI: hình trên, bảng chọn dưới (chiều cao hình theo tình huống, --cao do phòng đặt) */
.ai-san.ai-san-dung .ai-cv{bottom:auto;height:var(--cao,100%)}
.ai-dung-bang{position:absolute;left:0;right:0;top:var(--cao,100%);bottom:0;overflow-y:auto;padding:8px 12px 10px;border-top:1px solid rgba(255,255,255,.08)}
.ai-dung-hoi{margin:0 0 8px;font-size:13.5px;line-height:1.45;color:rgba(238,241,255,.82)}
.ai-dung-chips{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px}
.ai-dung-chip{padding:7px 12px;border-radius:999px;border:1.5px solid rgba(255,184,107,.5);background:rgba(255,184,107,.06);color:#fff;
  font:600 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.ai-dung-chip[aria-pressed="true"]{background:rgba(255,184,107,.28);border-color:#ffb86b}
.ai-dung-soat{list-style:none;margin:0 0 6px;padding:0;font-size:13px;line-height:1.5}
.ai-dung-soat li{margin:0 0 3px}
.ai-dung-dat{color:#bff5cf}
.ai-dung-thieu{color:#ffb3b3}
.ai-dung-sao{margin:4px 0 0;font-size:13.5px;color:rgba(238,241,255,.8)}
.ai-dung-sao b{color:#ffcf6b;letter-spacing:2px}
.ai-dung-sao b span{color:rgba(255,255,255,.18)}
.ai-dung-the{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;margin:0 0 8px}
.ai-dung-o{position:relative;display:grid;grid-template-columns:24px minmax(0,1fr);column-gap:6px;align-items:center;padding:7px 24px 7px 8px;border-radius:12px;
  border:1.5px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);color:#fff;text-align:left;cursor:pointer;
  font:500 12.5px/1.3 "Be Vietnam Pro",sans-serif;-webkit-tap-highlight-color:transparent}
.ai-dung-o>span{font-size:17px;line-height:1;text-align:center}
.ai-dung-o b{font-weight:600}
.ai-dung-o i{grid-column:1/-1;margin-top:4px;font-style:normal;font-size:12px;color:rgba(238,241,255,.75)}
.ai-dung-o em{position:absolute;right:7px;top:6px;font-style:normal;font-size:15px}
.ai-dung-o.ai-dung-chon{border-color:#ff7676;background:rgba(255,118,118,.14)}
.ai-dung-o.ai-dung-dung{box-shadow:inset 0 0 0 1.5px #7fdc9b}
.ai-dung-o.ai-dung-sai{box-shadow:inset 0 0 0 1.5px #ff7676;animation:ai-lac .4s}
@keyframes ai-lac{25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.ai-dung-kq{margin:6px 0;font-size:13.5px;line-height:1.5;color:#ffe2c2}
.ai-dung-day{position:sticky;bottom:-10px;margin:0 -12px -10px;padding:12px 12px 10px;background:linear-gradient(rgba(7,11,28,0),#070b1c 45%)}
.ai-dung-chons{display:flex;flex-direction:column;gap:6px;margin:0 0 6px}
.ai-dung-dap{padding:10px 12px;border-radius:12px;border:1.5px solid rgba(255,184,107,.4);background:rgba(255,184,107,.06);color:#fff;text-align:left;
  cursor:pointer;font:500 14px "Be Vietnam Pro",sans-serif}
.ai-dung-dap:disabled{cursor:default;opacity:.7}
.ai-dung-dap.ai-dung-dung{opacity:1;border-color:#7fdc9b;background:rgba(127,220,155,.16)}
.ai-dung-dap.ai-dung-sai{opacity:1;border-color:#ff7676;background:rgba(255,118,118,.14)}
.ai-choi[data-phong="dung"] .ai-c-san,.ai-phong[data-phong="dung"] .ai-san{height:clamp(440px,72vh,660px)}
.ai-choi[data-phong="nhin"] .ai-c-san,.ai-choi[data-phong="nhieu"] .ai-c-san{height:clamp(320px,56vh,560px)}
.ai-phong[data-phong="nhin"] .ai-san{height:clamp(340px,60vh,600px)}
.ai-choi[data-phong="thusai"] .ai-c-san{height:clamp(340px,58vh,560px)}
/* phần kết: nút cuối bản đồ, màn tổng kết */
.ai-bd-ket .ai-bd-bieu{display:flex;align-items:center;justify-content:center;width:100%;height:100%;border-radius:50%;background:#0b1026;
  border:3px solid #080b1a;box-sizing:border-box;font-size:38px;line-height:1}
.ai-bd-khoa>button{opacity:.6}
.ai-bd-ket .ai-bd-sao{font-size:12.5px;letter-spacing:0;color:rgba(238,241,255,.62)}
.ai-ket{max-width:720px;margin:0 auto;padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 30px);text-align:center}
.ai-ket-san{height:clamp(220px,40vh,380px)}
.ai-ket h3{margin:16px 0 4px;font:600 26px/1.2 "Cormorant Garamond",Georgia,serif;color:#fff}
.ai-ket-sao{position:relative;margin:0 0 14px;font:700 15px "Be Vietnam Pro",sans-serif;color:#ffcf6b}
.ai-ket-dau{margin:0 0 8px;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.08em;text-transform:uppercase;color:rgba(238,241,255,.6)}
.ai-ket-ds{list-style:none;margin:0 0 18px;padding:0;text-align:left;counter-reset:k}
.ai-ket-ds li{position:relative;margin:0 0 8px;padding:9px 12px 9px 42px;border-radius:12px;background:rgba(255,255,255,.05);border-left:3px solid var(--m);
  font-size:14px;line-height:1.5;color:rgba(238,241,255,.88)}
.ai-ket-ds li::before{counter-increment:k;content:counter(k);position:absolute;left:14px;top:9px;font:700 14px "Be Vietnam Pro",sans-serif;color:var(--m)}
.ai-ket-ds b{color:#fff;font-weight:700}
@media (prefers-reduced-motion:reduce){.ai-dung-o.ai-dung-sai{animation:none}}
/* Đường ngắn (23/10/2026, "AI vẫn khó học khó hiểu quá"): thẻ xanh lá trên đầu bản đồ cho người mới, nhãn "đi sâu" trước mười
   chặng, nhãn và dòng ý mang theo trong màn của bước, màn đi hết mười bước */
.ai-ngan-the{position:relative;display:flex;align-items:center;gap:12px;margin:12px auto 16px;max-width:480px;padding:12px 14px 14px;border-radius:16px;overflow:hidden;text-align:left;
  background:linear-gradient(135deg,rgba(127,220,155,.18),rgba(95,224,208,.07));border:1px solid rgba(127,220,155,.45)}
.ai-ngan-the::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#7fdc9b var(--pt),rgba(255,255,255,.1) 0)}
.ai-ngan-chu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.ai-ngan-chu b{font:700 17px/1.2 "Be Vietnam Pro",sans-serif;color:#dfffe9}
.ai-ngan-chu span{font-size:13px;line-height:1.4;color:rgba(238,241,255,.78);text-wrap:pretty;font-variant-numeric:lining-nums}
.ai-ngan-the .ai-nut-chinh{flex:0 0 auto;min-height:42px;padding:10px 16px;background:#7fdc9b;border-color:#7fdc9b;white-space:nowrap;font-size:15px}
.ai-ngan-the:not(.ai-ngan-het) .ai-nut-chinh{animation:ai-moi-ngan 1.3s ease-in-out 1s 2}
@keyframes ai-moi-ngan{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(127,220,155,.3)}}
.ai-ngan-het{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.ai-ngan-het .ai-nut-chinh{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#eef1ff;font-weight:500}
.ai-bd-sau{margin:0 0 2px;text-align:center;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.06em;text-transform:uppercase;color:rgba(238,241,255,.55)}
.ai-c-ngan{display:inline-flex;align-items:center;height:30px;padding:0 12px;border-radius:999px;background:rgba(127,220,155,.12);border:1px solid rgba(127,220,155,.4);font-size:13px;color:#dfffe9}
.ai-c-y{background:rgba(127,220,155,.1);border-color:rgba(127,220,155,.35);color:#dfffe9}
.ai-c-them p+p{margin-top:8px}
.ai-ngan-xong .ai-c-het-sao{font-size:24px;letter-spacing:2px}
.ai-ngan-xong .ai-c-het-sao .ai-c-het-co{text-shadow:0 0 12px rgba(127,220,155,.6)}
.ai-ngan-xong .ai-ket-ds{max-width:560px;margin:0 auto 16px}
@media (max-width:359px){.ai-ngan-the{flex-direction:column;align-items:stretch}}
@media (prefers-reduced-motion:reduce){.ai-ngan-the .ai-nut-chinh{animation:none}}
/* ---------- hết Bên trong AI ---------- */
/* ---------- Học nấu ăn (assets/bep.js; bài Nêm đúng lúc bepbai.js, công thức bepmon.js, vẽ bepve.js) ---------- */
.bep{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;color:#f6efe4;font-family:"Be Vietnam Pro",system-ui,sans-serif;
  background:radial-gradient(120% 90% at 50% 0%,#3b2415 0%,#1a120d 45%,#0b0806 100%)}
.bep.hien{display:block}
.bep [hidden]{display:none!important}
.bep-dong{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;border-radius:50%;z-index:6;
  border:1px solid rgba(255,255,255,.18);background:rgba(20,12,6,.55);color:#f6efe4;font-size:15px;line-height:1;cursor:pointer}
.bep-dau{position:absolute;top:calc(env(safe-area-inset-top,0px) + 8px);left:12px;right:100px;z-index:5;display:flex;align-items:center;gap:8px;min-height:46px}
.bep-lui{flex:none;width:38px;height:38px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#f6efe4;
  font-size:24px;line-height:1;cursor:pointer;padding:0 0 3px}
.bep-dau-chu{min-width:0;flex:1 1 auto}
.bep-tieude{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:25px;line-height:1.1;color:#fff7ea;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.bep-phu{margin:1px 0 0;font-size:12px;color:rgba(246,239,228,.62);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:lining-nums}
.bep-tieng{flex:none;width:40px;height:36px;border-radius:12px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);font-size:16px;cursor:pointer;padding:0}
.bep-than{position:absolute;left:0;right:0;bottom:0;top:calc(env(safe-area-inset-top,0px) + 62px);overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
/* nút Cài app chiếm 100–194 px tính từ mép phải: thanh tiêu đề chừa chỗ; điện thoại thì lùi xuống dưới hàng nút */
.co-nut-cai .bep-dau{right:204px}
@media (max-width:559px){
  .co-nut-cai .bep-dau{top:calc(env(safe-area-inset-top,0px) + 54px);right:12px}
  .co-nut-cai .bep-than{top:calc(env(safe-area-inset-top,0px) + 106px)}
}
.bep-nut{padding:8px 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.07);color:#f6efe4;
  font:500 13.5px "Be Vietnam Pro",sans-serif;cursor:pointer}
.bep-nut-chinh{background:#ff9e2c;border-color:#ff9e2c;color:#2a1608;font-weight:600}
.bep-nut:disabled{opacity:.45;cursor:default}
.bep-chip{padding:7px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);color:#f6efe4;
  font:500 13px "Be Vietnam Pro",sans-serif;cursor:pointer;white-space:nowrap}
.bep-chip[aria-selected="true"]{background:rgba(255,158,44,.28);border-color:rgba(255,200,120,.8)}
/* sảnh */
.bep-sanh{max-width:640px;margin:0 auto;padding:2px 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.bep-chao{margin:0 0 10px;text-align:center;font-size:15px;line-height:1.5;color:rgba(246,239,228,.85);text-wrap:pretty}
.bep-ngan-the{position:relative;display:flex;align-items:center;gap:12px;margin:0 auto 16px;max-width:520px;padding:12px 14px 15px;border-radius:16px;overflow:hidden;
  text-align:left;background:rgba(255,158,44,.1);border:1px solid rgba(255,158,44,.4)}
.bep-ngan-the::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,#ff9e2c var(--pt),rgba(255,255,255,.1) 0)}
.bep-ngan-chu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:3px}
.bep-ngan-chu b{font:700 17px/1.2 "Be Vietnam Pro",sans-serif;color:#ffe3bd;font-variant-numeric:lining-nums}
.bep-ngan-chu span{font-size:13px;line-height:1.4;color:rgba(246,239,228,.8);text-wrap:pretty;font-variant-numeric:lining-nums}
.bep-ngan-the .bep-nut-chinh{flex:0 0 auto;min-height:42px;padding:10px 16px;white-space:nowrap;font-size:15px}
.bep-ngan-the:not(.bep-ngan-het) .bep-nut-chinh{animation:bep-moi 1.3s ease-in-out 1s 2}
.bep-ngan-het{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.bep-ngan-het .bep-nut-chinh{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.2);color:#f6efe4;font-weight:500}
@media (max-width:359px){.bep-ngan-the{flex-direction:column;align-items:stretch}}
.bep-mon-ds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media (min-width:600px){.bep-mon-ds{grid-template-columns:repeat(3,1fr);gap:12px}}
.bep-mon-ds button{position:relative;display:flex;flex-direction:column;align-items:center;gap:4px;width:100%;padding:12px 6px 10px;border-radius:16px;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#f6efe4;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:transform .15s,border-color .2s}
.bep-mon-ds button:active{transform:scale(.97)}
.bep-mon-ds button.bep-mon-xong{border-color:var(--m)}
.bep-mon-ds button.bep-mon-tiep::after{content:"";position:absolute;inset:-3px;border-radius:18px;border:2px solid var(--m);opacity:0;pointer-events:none;animation:bep-nhip 1.9s ease-out 5}
@keyframes bep-nhip{0%{transform:scale(1);opacity:.85}100%{transform:scale(1.08);opacity:0}}
.bep-mon-bieu{font-size:30px;line-height:1}
.bep-mon-ds b{font-size:13px;line-height:1.25;text-align:center;font-weight:600;text-wrap:balance}
.bep-mon-sao{font-size:12px;letter-spacing:1px;color:#ffcf6b;line-height:1;font-style:normal}
.bep-mon-sao span{color:rgba(255,255,255,.18)}
.bep-phu-nut{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin:16px 0 0}
.bep-nut-lon{display:flex;align-items:center;gap:9px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);
  color:#f6efe4;font:600 14.5px "Be Vietnam Pro",sans-serif;cursor:pointer;text-align:left;font-variant-numeric:lining-nums}
.bep-nut-lon span{font-size:20px;line-height:1}
.bep-nut-lon small{font-weight:500;font-size:12px;color:rgba(246,239,228,.65)}
.bep-chan{margin:18px 0 6px;font-size:12.5px;line-height:1.55;color:rgba(246,239,228,.55);text-wrap:pretty}
/* màn chơi */
.bep-choi{max-width:720px;margin:0 auto;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 24px);animation:bep-vao .28s ease-out}
@keyframes bep-vao{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.bep-c-cham{display:flex;justify-content:center;gap:7px;margin:0 0 8px}
.bep-c-o{display:inline-flex;align-items:center;justify-content:center;width:26px;height:26px;border-radius:50%;border:1.5px solid rgba(255,255,255,.22);background:rgba(255,255,255,.04);
  color:rgba(246,239,228,.7);font:600 12px/1 "Be Vietnam Pro",sans-serif;font-variant-numeric:lining-nums}
.bep-c-o.bep-c-qua{border-color:var(--m)}
.bep-c-o.bep-c-sao{color:#ffcf6b;border-color:#ffcf6b}
.bep-c-o.bep-c-dang{background:var(--m);border-color:var(--m);color:#2a1608}
.bep-c-ten{margin:0 0 8px;text-align:center;font-size:13px;color:rgba(246,239,228,.72)}
.bep-c-san{position:relative;height:clamp(210px,36vh,400px);border-radius:16px;overflow:hidden;background:#15100c;border:1px solid rgba(255,255,255,.08)}
.bep-cv{display:block;width:100%;height:100%}
.bep-c-anh{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}   /* ảnh SVG 2D đè lên canvas: ba cảnh bàn tay */
.bep-c-anh[hidden]{display:none}
.bep-c-hoi{display:flex;align-items:center;justify-content:center;gap:10px;margin:14px 4px 12px;text-align:center;font-weight:600;font-size:18px;line-height:1.3;color:#fff;text-wrap:balance}
.bep-c-gv{display:inline-flex;align-items:center;justify-content:center;flex:none;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.14);font-size:24px}
.bep-c-moc{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:8px;max-width:560px;margin:0 auto}
.bep-c-moc-o{display:flex;flex-direction:column;align-items:center;gap:4px;min-height:64px;padding:8px 4px 9px;border-radius:14px;border:2px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.06);color:#f6efe4;font:600 13px/1.2 "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
.bep-c-moc-o span{font-size:22px;line-height:1}
@media (max-width:379px){.bep-c-moc{gap:6px}.bep-c-moc-o{font-size:12px;padding:8px 2px 9px}}
@media (hover:hover){.bep-c-moc-o:not(:disabled):hover{border-color:var(--m)}}
.bep-c-moc-o:disabled{cursor:default;color:#f6efe4;opacity:.55}
.bep-c-moc-o.bep-c-moc-dap{opacity:1;border-color:#7fdc9b;background:rgba(127,220,155,.14)}
.bep-c-moc-o.bep-c-moc-dung{opacity:1;border-color:#7fdc9b;background:rgba(127,220,155,.28);animation:bep-nay .32s ease-out}
.bep-c-moc-o.bep-c-moc-sai{opacity:1;border-color:#ff8a70;background:rgba(255,138,112,.2);animation:bep-lac .35s ease-out}
@keyframes bep-nay{50%{transform:scale(1.07)}}
@keyframes bep-lac{25%{transform:translateX(-4px)}75%{transform:translateX(4px)}}
.bep-c-doan{display:grid;grid-template-columns:1fr 1fr;gap:10px;max-width:640px;margin:0 auto}
.bep-c-doan-o{display:flex;flex-direction:column;gap:8px;padding:6px 6px 10px;border-radius:16px;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.05);
  color:#f6efe4;font:600 13.5px/1.25 "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent;text-align:center}
.bep-c-doan-o canvas{width:100%;height:auto;aspect-ratio:4/3;border-radius:11px;background:#15100c}
.bep-c-doan-o:disabled{cursor:default;color:#f6efe4;opacity:.55}
@media (hover:hover){.bep-c-doan-o:not(:disabled):hover{border-color:var(--m)}}
@media (max-width:359px){.bep-c-doan{grid-template-columns:1fr}}
/* thẻ kết quả */
.bep-c-kq{margin:14px auto 0;max-width:560px;padding:14px 16px;border-radius:16px;background:rgba(32,20,12,.94);border:1px solid rgba(255,255,255,.14);text-align:center}
.bep-c-kq:empty{margin:0;padding:0;border:0}
.bep-c-kq.hien{animation:up .3s ease-out}
.bep-c-kq-dau{position:relative;display:flex;align-items:center;justify-content:center;gap:8px;margin:0;font:700 20px/1.3 "Be Vietnam Pro",sans-serif;color:#7fdc9b}
.bep-c-kq-sai{color:#ffab96}
.bep-c-sao-to{font-size:30px;line-height:1;color:#ffcf6b;animation:bep-sao .55s ease-out}
@keyframes bep-sao{0%{transform:scale(.2) rotate(-40deg);opacity:0}70%{transform:scale(1.25) rotate(8deg);opacity:1}100%{transform:none}}
.bep-c-ta{margin:6px 0 0;font-size:13px;line-height:1.45;color:rgba(246,239,228,.65);font-style:italic}
.bep-c-y{margin:8px auto 2px;max-width:500px;padding:8px 12px;border-radius:12px;background:rgba(255,207,107,.09);border:1px solid rgba(255,207,107,.28);
  font-size:15px;line-height:1.5;color:#ffe6b8;font-variant-numeric:lining-nums;text-wrap:pretty}
.bep-c-them{margin:6px 0 0}
.bep-c-them summary{display:inline-block;cursor:pointer;color:#ffc98a;font-size:14px;list-style:none;padding:4px 8px}
.bep-c-them summary::-webkit-details-marker{display:none}
.bep-c-them p{margin:6px 0 0;text-align:left;font-size:14px;line-height:1.6;color:rgba(246,239,228,.88);font-variant-numeric:lining-nums}
.bep-c-ly b{color:#ffe3bd}
.bep-c-nha{margin:8px 0 0!important;padding:8px 10px;border-radius:10px;background:rgba(255,158,44,.08);border:1px solid rgba(255,158,44,.25)}
.bep-c-nha b{color:#ffc98a}
.bep-c-kq-nut{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:12px}
.bep-c-kq-nut .bep-nut{min-height:44px;padding:10px 18px;font-size:15px}
.bep-c-kq.hien .bep-nut-chinh{animation:bep-moi 1.3s ease-in-out .7s 2}
@keyframes bep-moi{50%{transform:scale(1.06);box-shadow:0 0 0 6px rgba(255,158,44,.25)}}
.bep-phao{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none;z-index:5}
.bep-phao i{position:absolute;left:0;top:0;transform:translate(-50%,-50%);color:var(--c);font-style:normal;line-height:1;opacity:0;text-shadow:0 0 8px var(--c);
  animation:bep-phao var(--t) cubic-bezier(.15,.7,.3,1) forwards}
@keyframes bep-phao{0%{transform:translate(-50%,-50%) scale(.3);opacity:1}70%{opacity:1}100%{transform:translate(calc(var(--dx) - 50%),calc(var(--dy) - 50%)) scale(1);opacity:0}}
/* hết món, hết Đường ngắn, hết Thử sức */
.bep-het{max-width:560px;margin:0 auto;padding:30px 16px calc(env(safe-area-inset-bottom,0px) + 28px);text-align:center}
.bep-het-sao{position:relative;margin:0 0 4px;font-size:40px;letter-spacing:3px;line-height:1.1;color:rgba(255,255,255,.15)}
.bep-het-sao span{display:inline-block}
.bep-het-sao .bep-het-co{color:#ffcf6b;text-shadow:0 0 14px rgba(255,207,107,.55);animation:bep-sao .55s ease-out both}
.bep-het h3{margin:12px 0 6px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:29px;line-height:1.15;color:#fff;font-variant-numeric:lining-nums}
.bep-het p{margin:0 0 16px;color:rgba(246,239,228,.82);font-size:15px;line-height:1.5}
.bep-het-y{max-width:480px;margin:0 auto 16px!important;padding:9px 12px;border-radius:12px;background:rgba(255,207,107,.09);border:1px solid rgba(255,207,107,.28);color:#ffe6b8!important}
.bep-ngan-xong .bep-het-sao{font-size:26px;letter-spacing:2px}
.bep-ket-ds{max-width:520px;margin:0 auto 16px;padding-left:22px;text-align:left}
.bep-ket-ds li{margin:0 0 7px;padding-left:4px;font-size:14.5px;line-height:1.5;color:rgba(246,239,228,.92)}
.bep-ket-ds li::marker{color:var(--m);font-weight:700}
/* Năm lý do */
.bep-lydo{max-width:760px;margin:0 auto;padding:0 14px calc(env(safe-area-inset-bottom,0px) + 28px)}
.bep-ly-ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
.bep-ly{display:flex;gap:12px;align-items:stretch;padding:8px;border-radius:16px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12)}
.bep-ly-cv{flex:0 0 42%;width:42%;height:auto;aspect-ratio:3/2;border-radius:11px;background:#15100c;align-self:flex-start}
.bep-ly-chu{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:4px;padding:2px 4px 2px 0}
.bep-ly-chu b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:21px;line-height:1.15;color:#fff}
.bep-ly-chu p{margin:0;font-size:14px;line-height:1.5;color:rgba(246,239,228,.88);text-wrap:pretty}
.bep-ly-chu .bep-c-them summary{padding:2px 0}
@media (max-width:479px){.bep-ly{flex-direction:column}.bep-ly-cv{width:100%;flex-basis:auto}}
/* Sổ bí quyết */
.bep-so{max-width:680px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.bep-so-ds{margin:0 0 16px;padding-left:24px;display:flex;flex-direction:column;gap:10px}
.bep-so-o{padding:10px 12px 10px 6px;border-radius:12px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.1)}
.bep-so-o::marker{color:#ff9e2c;font-weight:700}
.bep-so-o b{display:block;font-size:15px;line-height:1.35;color:#ffe3bd;text-wrap:pretty}
.bep-so-o p{margin:5px 0 0;font-size:14px;line-height:1.55;color:rgba(246,239,228,.88);text-wrap:pretty;font-variant-numeric:lining-nums}
.bep-so-lam{margin:6px 0 0;padding:6px 10px;border-radius:9px;background:rgba(255,158,44,.07);border:1px solid rgba(255,158,44,.2);font-size:14px;line-height:1.55;color:#ffe6c4;text-wrap:pretty;font-variant-numeric:lining-nums}
.bep-so-lam b{color:#ffc98a}
.bep-so-nhan{display:flex;flex-wrap:wrap;gap:6px;margin-top:7px}
.bep-so-nhan i{font-style:normal;font-size:11.5px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.07);color:rgba(246,239,228,.75)}
/* Bảng tra */
.bep-tra{max-width:720px;margin:0 auto;padding:0 14px calc(env(safe-area-inset-bottom,0px) + 28px)}
.bep-tra-mon{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 10px;scrollbar-width:none}
.bep-tra-mon::-webkit-scrollbar{display:none}
.bep-tra-moc{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:0 0 14px}
.bep-tra-cot{padding:10px 12px 12px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);border-top:3px solid var(--m)}
.bep-tra-cot h3{margin:0 0 8px;font:700 15px/1.3 "Be Vietnam Pro",sans-serif;color:#ffe3bd}
.bep-tra-cot h3 small{display:block;font-weight:400;font-size:11.5px;color:rgba(246,239,228,.6)}
.bep-tra-cot ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:6px}
.bep-tra-cot li{font-size:14px;line-height:1.4}
.bep-tra-cot li small{color:rgba(246,239,228,.6)}
.bep-tra-trong{margin:0;font-size:13px;color:rgba(246,239,228,.45)}
@media (prefers-reduced-motion:reduce){
  .bep-choi,.bep-c-kq.hien,.bep-c-sao-to,.bep-het-sao .bep-het-co,.bep-c-kq.hien .bep-nut-chinh,.bep-ngan-the .bep-nut-chinh,.bep-mon-ds button.bep-mon-tiep::after,
  .bep-c-moc-o.bep-c-moc-dung,.bep-c-moc-o.bep-c-moc-sai{animation:none}
}
/* bếp: sảnh có hai mục, ô món ghi phút và đã nấu */
.bep-muc{margin:16px 2px 8px;font:600 12.5px "Be Vietnam Pro",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:#ffc98a}
.bep-mon-phut{font-size:12px;line-height:1.3;color:rgba(246,239,228,.7);font-style:normal;text-align:center;font-variant-numeric:lining-nums}
.bep-mon-da{display:block;color:#7fdc9b;font-size:11px}
/* nấu từng bước */
.bep-nau-tien{height:5px;margin:0 2px 10px;border-radius:999px;background:rgba(255,255,255,.1);overflow:hidden}
.bep-nau-tien i{display:block;height:100%;width:var(--pt);background:var(--m);border-radius:999px;transition:width .3s}
.bep-nau-chu{justify-content:flex-start;align-items:flex-start;text-align:left;font-size:17px}
.bep-nau-so{flex:none;width:28px;height:28px;border-radius:50%;background:var(--m);color:#2a1608;font:700 14px/28px "Be Vietnam Pro",sans-serif;text-align:center;font-variant-numeric:lining-nums}
.bep-nau-meta{display:flex;gap:16px;justify-content:center;margin:0 0 10px;font-size:13.5px;color:rgba(246,239,228,.8);font-variant-numeric:lining-nums}
.bep-nau-dau{margin:10px auto 0;max-width:560px;padding:8px 12px;border-radius:10px;background:rgba(127,220,155,.08);border:1px solid rgba(127,220,155,.25);font-size:14px;line-height:1.5;color:#dfffe9;text-align:left}
.bep-nau-dau b{color:#a8f0c0}
.bep-nau-meo{margin:8px auto 0;max-width:560px;font-size:13.5px;line-height:1.5;color:rgba(246,239,228,.75);text-align:left}
.bep-c-kq .bep-nau-dau,.bep-c-kq .bep-nau-meo{text-align:left}
/* màn nguyên liệu */
.bep-nl-san{height:clamp(150px,24vh,260px)}
.bep-nl-dau{margin:14px 2px 6px;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:24px;line-height:1.1;color:#fff}
.bep-nl-ds{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:5px;font-size:15px;line-height:1.45;color:rgba(246,239,228,.92);font-variant-numeric:lining-nums}
.bep-nl-ds li::marker{color:var(--m)}
.bep-nl-ghi{margin:12px 2px 4px;font-size:13.5px;line-height:1.5;color:rgba(246,239,228,.7)}
.bep-an-toan{margin:8px 2px 12px;font-size:13px;line-height:1.5;color:#ffc98a;text-wrap:pretty}   /* rà an toàn 24/10/2026: một dòng, không giảng */
/* công thức ra chữ */
.bep-ct{max-width:680px;margin:0 auto;padding:0 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.bep-ct-chu{margin:0 0 14px;padding:14px 16px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);white-space:pre-wrap;word-break:break-word;
  font:14px/1.6 "Be Vietnam Pro",system-ui,sans-serif;color:rgba(246,239,228,.92);user-select:text;-webkit-user-select:text;font-variant-numeric:lining-nums}
/* lời báo nhỏ ở đáy */
.bep-bao{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 18px);z-index:8;transform:translate(-50%,20px);width:max-content;max-width:min(560px,calc(100% - 32px));
  padding:10px 16px;border-radius:14px;background:rgba(32,20,12,.96);border:1px solid rgba(255,158,44,.4);color:#f6efe4;font-size:13.5px;line-height:1.5;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s}
.bep-bao.hien{opacity:1;transform:translate(-50%,0)}
/* lộ trình ba bậc */
.bep-lt-dau{display:flex;flex-direction:column;gap:10px;margin:0 0 14px;padding:14px 16px;border-radius:16px;background:rgba(255,158,44,.1);border:1px solid rgba(255,158,44,.4)}
.bep-lt-chu{display:flex;flex-direction:column;gap:3px}
.bep-lt-chu b{font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:26px;line-height:1.1;color:#fff7ea}
.bep-lt-chu span{font-size:13.5px;line-height:1.45;color:rgba(246,239,228,.85);text-wrap:pretty;font-variant-numeric:lining-nums}
.bep-lt-bac{display:flex;gap:6px}
.bep-lt-bac i{flex:1;height:6px;border-radius:999px;background:rgba(255,255,255,.12)}
.bep-lt-bac i.bep-lt-qua{background:#7fdc9b}
.bep-lt-bac i.bep-lt-dang{background:linear-gradient(90deg,#ff9e2c 50%,rgba(255,255,255,.12) 0)}
.bep-bac{margin:0 0 12px;padding:12px 14px 14px;border-radius:16px;background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12)}
.bep-bac-dang{border-color:rgba(255,158,44,.5)}
.bep-bac-qua{border-color:rgba(127,220,155,.4)}
.bep-bac-dau{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-weight:600;font-size:23px;line-height:1.15;color:#fff;font-variant-numeric:lining-nums}
.bep-bac-dau small{font:600 11.5px "Be Vietnam Pro",sans-serif;letter-spacing:.4px;text-transform:uppercase;color:#ffc98a;margin-left:6px;vertical-align:middle}
.bep-bac-qua .bep-bac-dau small{color:#7fdc9b}
.bep-bac-mota{margin:3px 0 0;font-size:13px;line-height:1.45;color:rgba(246,239,228,.7)}
.bep-muc-nho{margin:12px 0 6px;font:600 11.5px "Be Vietnam Pro",sans-serif;letter-spacing:.5px;text-transform:uppercase;color:rgba(246,239,228,.6)}
.bep-kn-ds{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.bep-kn-ds button{display:grid;grid-template-columns:30px 1fr;grid-template-rows:auto auto;column-gap:8px;align-items:center;width:100%;padding:9px 10px;border-radius:12px;text-align:left;
  border:1px solid rgba(255,255,255,.13);background:rgba(255,255,255,.05);color:#f6efe4;font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.bep-kn-ds button span{grid-row:1/3;font-size:22px;line-height:1}
.bep-kn-ds button b{font-size:13.5px;line-height:1.25}
.bep-kn-ds button i{font-style:normal;font-size:11.5px;color:rgba(246,239,228,.65);font-variant-numeric:lining-nums}
.bep-kn-ds button.bep-kn-xong{border-color:rgba(127,220,155,.45)}
.bep-kn-ds button.bep-kn-xong i{color:#7fdc9b}
.bep-mon-nho{gap:8px}
.bep-mon-nho button{padding:9px 4px 8px}
.bep-mon-nho .bep-mon-bieu{font-size:24px}
.bep-mon-nho b{font-size:12.5px}
.bep-sh{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:12px 0 0;padding:10px 12px;border-radius:12px;background:rgba(255,255,255,.04);border:1px dashed rgba(255,255,255,.18)}
.bep-sh span{flex:1 1 auto;font-size:13px;line-height:1.45;color:rgba(246,239,228,.8);font-variant-numeric:lining-nums}
.bep-sh .bep-nut{flex:none;white-space:nowrap}
@media (max-width:359px){.bep-kn-ds{grid-template-columns:1fr}.bep-sh{flex-direction:column;align-items:stretch}}
/* màn kỹ năng: ba lựa chọn xếp dọc */
.bep-kn-chon{display:flex;flex-direction:column;gap:8px;max-width:560px;margin:0 auto}
.bep-kn-o{display:block;width:100%;padding:11px 14px;border-radius:14px;border:2px solid rgba(255,255,255,.16);background:rgba(255,255,255,.06);color:#f6efe4;
  font:500 14.5px/1.35 "Be Vietnam Pro",sans-serif;text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent;transition:border-color .2s,background .2s}
@media (hover:hover){.bep-kn-o:not(:disabled):hover{border-color:var(--m)}}
.bep-kn-o:disabled{cursor:default;color:#f6efe4;opacity:.55}
.bep-kn-o.bep-c-moc-dap{opacity:1;border-color:#7fdc9b;background:rgba(127,220,155,.14)}
.bep-kn-o.bep-c-moc-dung{opacity:1;border-color:#7fdc9b;background:rgba(127,220,155,.28);animation:bep-nay .32s ease-out}
.bep-kn-o.bep-c-moc-sai{opacity:1;border-color:#ff8a70;background:rgba(255,138,112,.2);animation:bep-lac .35s ease-out}
/* ---------- hết Học nấu ăn (trước là Nêm đúng lúc) ---------- */

/* ---------- Bầu trời ngày ấy (assets/ngayay.js) ---------- */
.ngayay{position:fixed;inset:0;z-index:30;display:none;overflow:hidden;color:#eef1fb;
  background:radial-gradient(130% 80% at 50% 38%,#121a3f 0%,#090d24 55%,#04060f 100%)}
.ngayay.hien{display:block}
.ngayay [hidden]{display:none!important}
.na-cv{position:absolute;inset:0;width:100%;height:100%;display:block;transition:opacity .5s}
.ngayay.na-mo .na-cv{opacity:.42}
.na-dong,.na-am{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);width:34px;height:34px;padding:0;border-radius:50%;
  display:grid;place-items:center;cursor:pointer;border:1px solid rgba(255,255,255,.16);background:rgba(0,0,0,.36);color:#eef1fb;
  font-size:14px;line-height:1;-webkit-tap-highlight-color:transparent}
.na-dong{right:16px}
.na-am{left:16px;font-size:16px}
.na-am[aria-pressed="false"]{opacity:.5}
.na-dong:hover,.na-am:hover{background:rgba(255,255,255,.12)}
.na-dau{position:absolute;z-index:3;left:12px;right:12px;top:calc(env(safe-area-inset-top,0px) + 54px);text-align:center;pointer-events:none}
.na-nam{margin:0;font-family:"Cormorant Garamond",Georgia,serif;font-variant-numeric:lining-nums;font-weight:600;font-size:30px;line-height:1.1;color:#f3dfa9}
.na-dang-tua .na-nam{font-size:50px;letter-spacing:.02em}
.na-ngay{margin:2px 0 0;min-height:18px;font-size:13.5px;color:rgba(238,241,251,.82);font-variant-numeric:lining-nums}
.na-noi{margin:1px 0 0;font-size:12.5px;color:rgba(238,241,251,.55)}
.na-hoi{position:absolute;inset:0;z-index:4;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + 58px) 14px calc(env(safe-area-inset-bottom,0px) + 24px)}
.na-hop{max-width:440px;margin:0 auto;padding:20px 18px 18px;border-radius:22px;background:rgba(9,13,34,.74);
  border:1px solid rgba(243,223,169,.16);box-shadow:0 18px 50px rgba(0,0,0,.45);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.na-tieu{margin:0;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:34px;font-weight:600;line-height:1.1;color:#f3dfa9}
.na-loi{margin:6px 0 16px;text-align:center;font-size:14px;line-height:1.5;color:rgba(238,241,251,.7)}
.na-dip{display:flex;flex-wrap:wrap;gap:6px;justify-content:center;margin-bottom:14px}
.na-dip button,.na-lich button{min-height:38px;padding:0 13px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.05);
  color:#eef1fb;font:500 14px "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.na-dip button[aria-checked="true"],.na-lich button[aria-pressed="true"]{border-color:#f3dfa9;background:rgba(243,223,169,.18);color:#fff3cf}
.na-o{display:block;margin-bottom:12px}
.na-o span{display:block;margin:0 0 5px 2px;font-size:12.5px;color:rgba(238,241,251,.7)}
.na-hop input:not([type="checkbox"]),.na-hop select,.na-tim{width:100%;min-height:46px;padding:0 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#eef1fb;font:16px "Be Vietnam Pro",sans-serif;color-scheme:dark;box-sizing:border-box}
.na-hop select{padding-right:6px}
.na-hop input:focus,.na-hop select:focus,.na-tim:focus{outline:none;border-color:#f3dfa9}
.na-hop input:disabled{opacity:.45}
.na-lich{display:flex;gap:6px;margin-bottom:8px}
.na-lich button{flex:1}
.na-ngay-o{display:grid;grid-template-columns:.9fr 1.35fr .95fr;gap:6px}
.na-nhuan,.na-khong{display:flex;align-items:center;gap:7px;font-size:14px;color:rgba(238,241,251,.85);cursor:pointer}
.na-nhuan{margin:8px 0 0 2px}
.na-nhuan input,.na-khong input{width:18px;height:18px;accent-color:#f3dfa9}
.na-doi{min-height:18px;margin:6px 2px 10px;font-size:12.5px;line-height:1.45;color:rgba(243,223,169,.8);font-variant-numeric:lining-nums}
.na-gio-o{display:grid;grid-template-columns:1fr auto;gap:10px;align-items:center;margin-bottom:12px}
.na-noi-nut{width:100%;min-height:46px;padding:0 14px;border-radius:12px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#eef1fb;font:16px "Be Vietnam Pro",sans-serif;text-align:left;cursor:pointer}
.na-noi-nut::after{content:"›";float:right;opacity:.6}
.na-noi-nut.chua{border-style:dashed;border-color:rgba(243,223,169,.55);color:#f3dfa9}
.na-sai{margin:10px 2px 0;font-size:13.5px;line-height:1.45;color:#ffb8a3}
.na-di,.na-nut-chinh{min-height:50px;padding:0 18px;border:0;border-radius:14px;background:linear-gradient(#ffe7a6,#e6b95a);color:#2a1d05;
  font:700 16px "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.na-hop .na-di{display:block;width:100%;margin-top:16px}
.na-nut-phu{min-height:46px;padding:0 10px;border-radius:14px;border:1px solid rgba(243,223,169,.32);background:rgba(243,223,169,.08);color:#fbefcc;
  font:500 15px "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.na-di:disabled,.na-nut-chinh:disabled{opacity:.6;cursor:default}
.na-bang{position:absolute;inset:0;z-index:7;display:flex;align-items:flex-start;justify-content:center;background:rgba(3,5,14,.82);
  padding:calc(env(safe-area-inset-top,0px) + 58px) 14px calc(env(safe-area-inset-bottom,0px) + 14px)}
.na-bang-hop{display:flex;flex-direction:column;gap:8px;width:100%;max-width:440px;max-height:100%;padding:16px;border-radius:20px;
  background:#0c1130;border:1px solid rgba(243,223,169,.18)}
.na-bang-tieu{margin:0 0 2px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:26px;font-weight:600;color:#f3dfa9}
.na-dinhvi,.na-thoi{min-height:44px;border-radius:12px;border:1px solid rgba(243,223,169,.3);background:rgba(243,223,169,.08);color:#fbefcc;
  font:500 15px "Be Vietnam Pro",sans-serif;cursor:pointer}
.na-thoi{background:transparent;border-color:rgba(255,255,255,.15);color:rgba(238,241,251,.75)}
.na-ds{flex:1 1 auto;min-height:120px;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;display:flex;flex-direction:column;gap:4px}
.na-ds button{display:block;width:100%;padding:10px 12px;border:0;border-radius:10px;background:rgba(255,255,255,.04);color:#eef1fb;text-align:left;
  font:15px "Be Vietnam Pro",sans-serif;cursor:pointer}
.na-ds button:hover{background:rgba(255,255,255,.1)}
.na-ds button span{display:block;margin-top:2px;font-size:12px;color:rgba(238,241,251,.55)}
.na-ds-trong{margin:10px 4px;font-size:13.5px;line-height:1.5;color:rgba(238,241,251,.7)}
.na-bia{position:absolute;z-index:4;left:16px;right:16px;bottom:calc(env(safe-area-inset-bottom,0px) + 40px);max-width:440px;margin:0 auto;text-align:center;
  animation:up .6s ease-out}
.na-bia-nho{margin:0;font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:rgba(243,223,169,.75)}
.na-bia-tieu{margin:6px 0 4px;font-family:"Cormorant Garamond",Georgia,serif;font-size:36px;font-weight:600;line-height:1.12;color:#fff1c9;
  text-shadow:0 2px 18px rgba(0,0,0,.7)}
.na-bia-ngay{margin:0 0 18px;font-size:15px;color:rgba(238,241,251,.85);font-variant-numeric:lining-nums}
.na-bia .na-di{width:100%;max-width:320px}
.na-duoi{position:absolute;z-index:4;left:0;right:0;bottom:0;padding:12px 16px calc(env(safe-area-inset-bottom,0px) + 14px);text-align:center;
  background:linear-gradient(rgba(4,6,15,0),rgba(4,6,15,.88) 30%)}
.na-duoi>*{max-width:560px;margin-left:auto;margin-right:auto}
.na-chu{margin:0 auto;font-size:16.5px;line-height:1.5;font-weight:500;color:#f6f2e6;animation:up .45s ease-out}
.na-boi{margin:7px auto 0;font-family:"Cormorant Garamond",Georgia,serif;font-style:italic;font-size:19px;line-height:1.35;color:#f3dfa9;
  animation:up .55s ease-out}
.na-boi::before{content:"✦ ";font-style:normal;font-size:14px;color:#e6b95a}
.na-laso{max-height:40vh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;margin:4px auto 0;padding:12px 14px;
  border-radius:16px;background:rgba(243,223,169,.07);border:1px solid rgba(243,223,169,.22);text-align:left}
.na-laso-tieu{margin:0 0 8px;text-align:center;font-family:"Cormorant Garamond",Georgia,serif;font-size:22px;font-weight:600;line-height:1.2;color:#f3dfa9}
.na-laso ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:7px}
.na-laso li{display:grid;grid-template-columns:20px 1fr;column-gap:6px;font-size:14px;line-height:1.45;color:rgba(238,241,251,.82)}
.na-laso li span{grid-row:1/3;color:#e6b95a;font-size:15px;text-align:center}
.na-laso li b{font-weight:600;color:#fff1c9}
.na-laso-td{padding-top:7px;border-top:1px solid rgba(243,223,169,.18)}
.na-chu-phu{margin:5px auto 0;min-height:18px;font-size:13.5px;line-height:1.5;color:rgba(238,241,251,.65);font-variant-numeric:lining-nums}
.na-hang{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px}
.na-cham{display:flex;gap:6px}
.na-cham i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.22)}
.na-cham i.dang{background:#f3dfa9}
.na-tiep{min-height:44px;padding:0 20px;border-radius:999px;border:1px solid rgba(243,223,169,.45);background:rgba(243,223,169,.12);color:#fff1c9;
  font:600 15px "Be Vietnam Pro",sans-serif;cursor:pointer;-webkit-tap-highlight-color:transparent}
.na-cuoi{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:12px}
.na-cuoi .na-nut-chinh{grid-column:1/-1}
.na-bo{position:absolute;z-index:4;left:50%;transform:translateX(-50%);bottom:calc(env(safe-area-inset-bottom,0px) + 22px);min-height:40px;padding:0 18px;
  border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.35);color:rgba(238,241,251,.85);font:500 14px "Be Vietnam Pro",sans-serif;
  cursor:pointer}
.na-tranh{position:absolute;inset:0;z-index:8;display:flex;align-items:center;justify-content:center;background:rgba(3,5,14,.97);
  padding:calc(env(safe-area-inset-top,0px) + 54px) 14px calc(env(safe-area-inset-bottom,0px) + 14px)}
.na-tranh-hop{display:flex;flex-direction:column;align-items:center;gap:12px;width:100%;max-width:460px;max-height:100%}
.na-tranh-anh{display:block;width:auto;max-width:100%;max-height:calc(100dvh - 190px);aspect-ratio:1080/1350;border-radius:14px;
  box-shadow:0 16px 40px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.08)}
.na-tranh-nut{display:grid;grid-template-columns:2fr 1fr 1fr;gap:8px;width:100%}
.na-bao{position:absolute;z-index:9;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 20px);transform:translate(-50%,12px);max-width:min(92vw,460px);
  margin:0;padding:10px 16px;border-radius:14px;background:rgba(20,26,58,.96);border:1px solid rgba(243,223,169,.3);color:#fff3d6;font-size:14px;
  line-height:1.45;text-align:center;opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;word-break:break-word}
.na-bao.hien{opacity:1;transform:translate(-50%,0)}
@media (prefers-reduced-motion:reduce){.na-cv,.na-bao{transition:none}.na-chu,.na-bia,.na-boi{animation:none}}
/* ---------- hết Bầu trời ngày ấy ---------- */
/* ---------- Tranh cát (assets/tranhcat.js, lõi hatcat.js) ---------- */
.tranhcat{position:fixed;inset:0;z-index:30;display:none;flex-direction:column;background:#0b1020;color:#eef1ff;
  padding-bottom:env(safe-area-inset-bottom,0px);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  font-family:"Be Vietnam Pro",system-ui,sans-serif}
.tranhcat.hien{display:flex}
.tranhcat [hidden]{display:none!important}
.cc-dau{display:flex;align-items:center;padding:calc(env(safe-area-inset-top,0px) + 12px) 104px 6px 16px;min-height:56px}
.cc-ten{margin:0;font:600 24px/1.1 "Cormorant Garamond",Georgia,serif;color:#f3e6c8}
.cc-dong{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#eef1ff;font-size:16px;line-height:1;cursor:pointer}
.co-nut-cai .cc-dau{padding-right:204px}
@media (max-width:479px){.co-nut-cai .cc-dau{padding-top:calc(env(safe-area-inset-top,0px) + 54px);padding-right:14px}}
.cc-san{position:relative;flex:1 1 0;min-height:160px;overflow:hidden}
/* khung gỗ, sau tấm kính là nền tối (ô không khí trong suốt); khung xoay, co bằng transform (tranhcat.js datKhung) */
.cc-khung{position:absolute;left:50%;top:50%;border:6px solid #6b4a2b;border-radius:8px;background:#0f1726;line-height:0;
  box-shadow:0 10px 30px rgba(0,0,0,.45),inset 0 0 0 1px rgba(0,0,0,.35);transform-origin:50% 50%}
.cc-khung::after{content:"";position:absolute;inset:0;pointer-events:none;border-radius:2px;
  background:linear-gradient(135deg,rgba(255,255,255,.09),rgba(255,255,255,0) 38%,rgba(255,255,255,0) 72%,rgba(255,255,255,.05))}
.cc-cv{display:block;touch-action:none;image-rendering:crisp-edges;image-rendering:pixelated;cursor:crosshair}
/* dòng gợi ý giữ sẵn chỗ hai dòng: chữ đổi từ một sang hai dòng thì khung tranh không co giật (ResizeObserver co khung) */
.cc-loi{margin:6px 16px 2px;min-height:2.6em;display:flex;align-items:center;justify-content:center;font-size:13.5px;line-height:1.3;
  text-align:center;color:rgba(238,241,255,.78)}
/* vùng chạm: nút cao 40 px, cách nhau 8 px; chấm màu 32 px mà vùng chạm 44 px (::before). Soát giao diện: nút 36 px, chấm
   28 px cách nhau 6 px — ngón tay dễ bấm nhầm màu bên cạnh */
.cc-mau,.cc-hat,.cc-viec{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;padding:4px 12px}
.cc-mau{gap:10px}
.cc-viec{padding-bottom:10px}
.cc-o{position:relative;width:32px;height:32px;padding:0;border-radius:50%;border:2px solid rgba(255,255,255,.22);cursor:pointer}
.cc-o::before{content:"";position:absolute;inset:-6px;border-radius:50%}
.cc-o.cc-bat{border-color:#fff;box-shadow:0 0 0 2px rgba(255,255,255,.35)}
.cc-chon,.cc-nut{height:40px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);
  color:#eef1ff;font:inherit;font-size:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.cc-chon.cc-bat{background:#f3e6c8;border-color:#f3e6c8;color:#2a2010;font-weight:600}
.cc-xoay,.cc-tieng{min-width:44px;padding:0 10px}
/* tranh lắng xong: nút Lật sáng lên mời lật (tranhcat.js moiLat) */
.cc-nut.cc-goi{border-color:#f3e6c8;color:#f3e6c8;animation:cc-goi 1.6s ease-out 3}
@keyframes cc-goi{from{box-shadow:0 0 0 0 rgba(243,230,200,.55)}to{box-shadow:0 0 0 12px rgba(243,230,200,0)}}
/* màn hẹp (Android 360 px): chữ, đệm nút gọn lại cho hàng nút việc khỏi rớt xuống dòng thứ ba, khung tranh được thêm chỗ */
@media (max-width:374px){.cc-chon,.cc-nut{padding:0 9px;font-size:13px}.cc-mau,.cc-hat,.cc-viec{gap:6px;padding:4px 8px}.cc-mau{gap:6px}}
.cc-dau .cc-tieng{margin-left:auto;flex:none}
.cc-bang{position:absolute;inset:0;z-index:2;display:flex;align-items:center;justify-content:center;background:rgba(5,8,20,.6);padding:16px}
.cc-bang-trong{width:min(360px,100%);background:#141a33;border:1px solid rgba(255,255,255,.14);border-radius:18px;padding:18px;
  display:flex;flex-direction:column;gap:10px;animation:up .25s ease}
.cc-bang h3{margin:0 0 4px;font:600 22px/1.2 "Cormorant Garamond",Georgia,serif;color:#f3e6c8;text-align:center}
.cc-lua{display:flex;flex-direction:column;align-items:flex-start;gap:3px;padding:12px 14px;border-radius:14px;border:1px solid rgba(255,255,255,.16);
  background:rgba(255,255,255,.05);color:#eef1ff;font:inherit;text-align:left;cursor:pointer}
.cc-lua b{font-size:15px;color:#f3e6c8}
.cc-lua span{font-size:13px;color:rgba(238,241,255,.72)}
.cc-bao{position:absolute;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 150px);transform:translateX(-50%);z-index:3;max-width:86%;
  padding:9px 14px;border-radius:12px;background:rgba(20,26,58,.96);border:1px solid rgba(243,223,169,.3);color:#fff3d6;font-size:14px;text-align:center}
/* điện thoại xoay ngang: nút sang cột phải, khung tranh được cả chiều cao */
@media (orientation:landscape) and (max-height:520px){
  .tranhcat.hien{display:grid;grid-template-columns:minmax(0,1fr) 236px;grid-template-rows:auto auto auto auto auto minmax(0,1fr)}
  .cc-dau{grid-column:1/-1}
  .cc-san{grid-column:1;grid-row:2/7;min-height:0}
  .cc-loi{grid-column:2;grid-row:2}.cc-mau{grid-column:2;grid-row:3}.cc-hat{grid-column:2;grid-row:4}.cc-viec{grid-column:2;grid-row:5}
}
@media (prefers-reduced-motion:reduce){.cc-bang-trong,.cc-nut.cc-goi{animation:none}}
/* ---------- hết Tranh cát ---------- */

/* ---------- Đo chiều cao (assets/docao.js, lõi dogoc.js) ---------- */
/* Ngăn Đo cao làm như app chụp ảnh (người dùng: "làm cho UIUX đẹp dễ sử dụng đi"): camera sau phủ kín màn, chữ và nút
   nổi trên hình, nền tối mờ dần ở trên và dưới cho dễ đọc; nút chụp tròn to giữa đáy cho ngón cái. Màu theo bước:
   vàng là chân vật, xanh lơ là ngọn — cũng là màu hai tam giác trong bài học. Nút nào cũng tự đặt màu chữ (nút của
   trình duyệt mặc định chữ đen). */
.docao{--dc-goc:#ffd166;--dc-ngon:#7fe3ff;--dc-xanh:#5aa9ff;--dc-vung:#8ff0b0;--dc-kinh:rgba(10,15,34,.6);--dc-vien:rgba(255,255,255,.14);
  --dc-mo:rgba(238,241,255,.66);--dc-the:#121a34;
  position:fixed;inset:0;z-index:30;display:none;flex-direction:column;background:#0b1020;color:#eef1ff;overflow:hidden;
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-tap-highlight-color:transparent;
  font-family:"Be Vietnam Pro",system-ui,sans-serif}
.docao.hien{display:flex}
.docao [hidden]{display:none!important}
.docao button{font-family:inherit;-webkit-tap-highlight-color:transparent}
.docao button:disabled{opacity:.38;cursor:default}
.docao.dc-o-do::before{content:"";position:absolute;left:0;right:0;top:0;z-index:2;pointer-events:none;
  height:calc(env(safe-area-inset-top,0px) + 150px);background:linear-gradient(rgba(5,8,20,.82),rgba(5,8,20,.42) 58%,rgba(5,8,20,0))}
/* hàng tên: nút ✕ của trò, nút 🔗 và Cài app của app.js cùng hàng bên phải — tên co lại chứ không lùi xuống */
.dc-dau{position:relative;z-index:5;display:flex;align-items:center;min-height:34px;padding:calc(env(safe-area-inset-top,0px) + 14px) 112px 8px 16px}
.co-nut-cai .dc-dau{padding-right:212px}
.dc-ten{margin:0;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font:600 23px/34px "Cormorant Garamond",Georgia,serif;color:#dbe9ff}
@media (max-width:359px){.dc-ten{font-size:19px}}
.dc-dong{position:absolute;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.18);background:rgba(0,0,0,.32);color:#eef1ff;font-size:16px;line-height:1;cursor:pointer}
.dc-hang-ngan{position:relative;z-index:5;display:flex;align-items:center;gap:8px;margin:0 12px 10px}
.dc-ngan{flex:1;min-width:0;display:flex;gap:2px;padding:3px;border-radius:999px;background:var(--dc-kinh);border:1px solid var(--dc-vien);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.dc-the{flex:1;min-width:0;height:34px;padding:0 4px;border:0;border-radius:999px;background:none;color:rgba(238,241,255,.72);font-size:14px;
  white-space:nowrap;cursor:pointer;transition:background .2s,color .2s}
.dc-the.dc-bat{background:rgba(90,169,255,.28);color:#fff;font-weight:600}
.dc-tron{flex:none;width:42px;height:42px;padding:0;border-radius:50%;border:1px solid var(--dc-vien);background:var(--dc-kinh);color:#eef1ff;
  display:grid;place-items:center;font-size:22px;line-height:1;cursor:pointer;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}

/* khung ngắm phủ kín màn; tâm canvas là trục camera (video cắt theo cover giữ đúng tâm) */
.dc-than{position:absolute;inset:0;z-index:1}
.dc-ngam{position:absolute;inset:0;overflow:hidden;background:#0d1428;touch-action:none}
.dc-video,.dc-cv{position:absolute;inset:0;width:100%;height:100%}
.dc-video{object-fit:cover}
.dc-cv{cursor:ns-resize}
.dc-meo{position:absolute;z-index:3;left:50%;top:calc(env(safe-area-inset-top,0px) + 112px);transform:translateX(-50%);display:flex;align-items:center;gap:8px;
  max-width:calc(100% - 24px);padding:5px 12px;border-radius:999px;background:var(--dc-kinh);border:1px solid var(--dc-vien);color:var(--dc-mo);
  font-size:12.5px;white-space:nowrap;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dc-meo-chu{overflow:hidden;text-overflow:ellipsis}
.dc-meo-nut{flex:none;display:inline-flex;align-items:center;gap:5px;height:28px;margin-right:-7px;padding:0 11px;border-radius:999px;border:0;
  background:var(--dc-xanh);color:#06152b;font-size:12.5px;font-weight:600;cursor:pointer}
/* chữ quanh tâm ngắm: việc phải làm, góc đang ngắm (xanh khi tay vững), số chạy theo — khoảng cách rồi chiều cao */
.dc-quanh{position:absolute;z-index:2;left:50%;top:50%;width:min(340px,calc(100% - 32px));height:0;transform:translateX(-50%);pointer-events:none;
  text-align:center;text-shadow:0 1px 3px rgba(0,0,0,.85),0 0 14px rgba(0,0,0,.45)}
.dc-quanh p{position:absolute;left:0;right:0;margin:0}
.dc-quanh .dc-viec{left:50%;right:auto;bottom:78px;width:max-content;max-width:100%;box-sizing:border-box;transform:translateX(-50%);padding:5px 13px;border-radius:999px;
  background:rgba(5,8,20,.55);font-size:14px;font-weight:600;line-height:1.3;color:var(--dc-goc);text-shadow:none}
.dc-quanh .dc-viec:empty{display:none}
.dc-viec.dc-viec-ngon{color:var(--dc-ngon)}
.dc-goc{bottom:52px;font-size:15px;font-weight:500;font-variant-numeric:tabular-nums;color:rgba(255,255,255,.82)}
.dc-goc.dc-vung{color:var(--dc-vung)}
.dc-song{top:52px;font-size:17px;line-height:1.1;color:rgba(255,255,255,.86)}
.dc-song b{font-size:36px;font-weight:700;letter-spacing:-.5px;font-variant-numeric:tabular-nums;color:#fff}
.dc-song i{font-style:normal;font-size:14.5px;color:#ffe9b0}

/* đáy: hai mốc đã ghi, hàng nút chụp */
.dc-dieu{position:absolute;z-index:3;left:0;right:0;bottom:0;display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:44px 16px calc(env(safe-area-inset-bottom,0px) + 12px);background:linear-gradient(rgba(5,8,20,0),rgba(5,8,20,.6) 36%,rgba(5,8,20,.86))}
.dc-buoc-hang{display:flex;align-items:center;width:100%;max-width:440px}
.dc-moc{flex:1;min-width:0;padding:8px 12px;border-radius:14px;background:var(--dc-kinh);border:1px solid var(--dc-vien);
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:border-color .2s,box-shadow .2s}
.dc-moc-ten{display:flex;align-items:center;gap:6px;font-size:11.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--dc-mo)}
.dc-moc-ten i{display:grid;place-items:center;width:18px;height:18px;border-radius:50%;font-style:normal;font-size:11px;font-weight:700;letter-spacing:0;
  background:rgba(255,255,255,.14);color:#fff}
.dc-moc-so{display:block;margin-top:3px;font-size:14px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  color:rgba(238,241,255,.45)}
.dc-moc.dc-xong .dc-moc-so{color:#fff}
.dc-moc[data-moc="0"].dc-dang{border-color:var(--dc-goc);box-shadow:inset 0 0 0 1px var(--dc-goc),0 0 18px rgba(255,209,102,.22)}
.dc-moc[data-moc="1"].dc-dang{border-color:var(--dc-ngon);box-shadow:inset 0 0 0 1px var(--dc-ngon),0 0 18px rgba(127,227,255,.22)}
.dc-moc[data-moc="0"].dc-xong .dc-moc-ten i{background:var(--dc-goc);color:#2a1d00}
.dc-moc[data-moc="1"].dc-xong .dc-moc-ten i{background:var(--dc-ngon);color:#00222b}
.dc-moc-noi{flex:none;width:12px;height:2px;margin:0 4px;border-radius:1px;background:rgba(255,255,255,.25)}
.dc-hang-chup{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;width:100%;max-width:440px}
.dc-phu-nut{justify-self:start;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-width:84px;height:60px;padding:4px 10px;
  border-radius:16px;border:1px solid var(--dc-vien);background:var(--dc-kinh);color:#eef1ff;cursor:pointer;
  -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
.dc-lamlai{justify-self:end}
.dc-chip-dodai svg{color:var(--dc-xanh)}
.dc-chip-so{font-size:14px;font-weight:700;line-height:1.1;font-variant-numeric:tabular-nums;white-space:nowrap}
.dc-chip-ten{font-size:11px;line-height:1.15;color:var(--dc-mo);white-space:nowrap}
.dc-chup{position:relative;width:80px;height:80px;padding:0;border-radius:50%;border:3px solid rgba(255,255,255,.92);background:rgba(255,255,255,.08);
  display:grid;place-items:center;cursor:pointer;touch-action:manipulation;box-shadow:0 6px 24px rgba(0,0,0,.35)}
.dc-chup-tron{width:62px;height:62px;border-radius:50%;background:var(--dc-goc);box-shadow:inset 0 -4px 10px rgba(0,0,0,.18);
  display:grid;place-items:center;transition:transform .12s,background .25s}
.dc-chup.dc-chup-ngon .dc-chup-tron{background:var(--dc-ngon)}
.dc-chup.dc-chup-lai .dc-chup-tron{background:#fff}
.dc-chup.dc-chup-lai .dc-chup-tron::after{content:"↺";font-size:30px;font-weight:700;line-height:1;color:#0b1020}
.dc-chup:active .dc-chup-tron{transform:scale(.88)}
.dc-chup-chu{margin:-6px 0 0;font-size:13px;font-weight:600;color:#fff;text-shadow:0 1px 3px rgba(0,0,0,.7)}
.dc-co-kq .dc-dieu{visibility:hidden}

/* lớp Bắt đầu ngắm: hình tia ngắm quét từ chân lên ngọn */
.dc-batdau{position:absolute;inset:0;z-index:4;display:flex;align-items:center;justify-content:center;overflow-y:auto;
  padding:calc(env(safe-area-inset-top,0px) + 112px) 20px calc(env(safe-area-inset-bottom,0px) + 20px);
  background:radial-gradient(120% 80% at 50% 28%,#1c2c58,#080c1c)}
.dc-batdau-trong{width:100%;max-width:360px;margin:auto 0;display:flex;flex-direction:column;align-items:center;gap:12px;text-align:center}
.dc-minh{display:block;width:100%;max-width:300px;max-height:30vh;height:auto}
.dc-minh-dat{stroke:rgba(255,255,255,.3);stroke-width:1.5}
.dc-minh-than{fill:#7a5236}
.dc-minh-tan{fill:#3d8442}
.dc-minh-nguoi{fill:none;stroke:#eef1ff;stroke-width:2.4;stroke-linecap:round}
.dc-minh-may{fill:var(--dc-xanh)}
.dc-minh-goc,.dc-minh-ngon{stroke-width:2;stroke-dasharray:5 5;opacity:.7}
.dc-minh-goc{stroke:var(--dc-goc)}
.dc-minh-ngon{stroke:var(--dc-ngon)}
.dc-minh-tia{stroke:#fff;stroke-width:2.4;stroke-linecap:round;transform-box:view-box;transform-origin:60px 76px;transform:rotate(16.5deg);
  animation:dc-quet 4.4s ease-in-out infinite}
.dc-minh-diem-goc{fill:var(--dc-goc);animation:dc-sang-goc 4.4s ease-in-out infinite}
.dc-minh-diem-ngon{fill:var(--dc-ngon);animation:dc-sang-ngon 4.4s ease-in-out infinite}
.dc-minh-chu{font:600 11px "Be Vietnam Pro",system-ui,sans-serif}
@keyframes dc-quet{0%,20%{transform:rotate(16.5deg)}50%,74%{transform:rotate(-15.3deg)}100%{transform:rotate(16.5deg)}}
@keyframes dc-sang-goc{0%,20%{opacity:1}32%,92%{opacity:.35}100%{opacity:1}}
@keyframes dc-sang-ngon{0%,40%{opacity:.35}50%,74%{opacity:1}86%,100%{opacity:.35}}
.dc-batdau-ten{margin:2px 0 0;font:600 26px/1.15 "Cormorant Garamond",Georgia,serif;color:#fff}
.dc-batdau-buoc{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px;text-align:left;font-size:14.5px;line-height:1.4;color:rgba(238,241,255,.88)}
.dc-batdau-buoc li{display:flex;align-items:flex-start;gap:10px}
.dc-batdau-buoc i{flex:none;display:grid;place-items:center;width:22px;height:22px;margin-top:-1px;border-radius:50%;font-style:normal;font-size:12px;font-weight:700;
  background:rgba(255,255,255,.14);color:#fff}
.dc-batdau-buoc i.dc-i-goc{background:var(--dc-goc);color:#2a1d00}
.dc-batdau-buoc i.dc-i-ngon{background:var(--dc-ngon);color:#00222b}
.dc-lon{height:52px;padding:0 28px;border-radius:999px;border:0;background:var(--dc-xanh);color:#06152b;font-size:17px;font-weight:700;cursor:pointer;
  box-shadow:0 8px 24px rgba(90,169,255,.28)}
.dc-batdau .dc-lon{width:100%;margin-top:6px}
.dc-batdau-dodai,.dc-kq-theo{display:inline-flex;align-items:center;gap:7px;min-height:36px;padding:6px 14px;border-radius:999px;border:1px solid var(--dc-vien);
  background:rgba(255,255,255,.06);color:rgba(238,241,255,.88);font-size:13.5px;line-height:1.3;text-align:left;cursor:pointer}
.dc-batdau-dodai svg,.dc-kq-theo svg{flex:none;color:var(--dc-xanh)}
.dc-batdau-dodai b,.dc-kq-theo b{color:#fff}
.dc-chu-nut{height:40px;padding:0 14px;border:0;background:none;color:#9cc6ff;font-size:14.5px;text-decoration:underline;text-underline-offset:3px;cursor:pointer}

/* thẻ kết quả, tấm Độ dài thật: trượt lên từ đáy (máy tính: thẻ nổi giữa đáy) */
.dc-kq,.dc-dodai{position:absolute;inset:0;display:flex;align-items:flex-end;justify-content:center}
.dc-kq{z-index:5;background:rgba(5,8,20,.3)}
.dc-dodai{z-index:6;background:rgba(3,6,16,.55)}
.dc-kq-the,.dc-tam{position:relative;box-sizing:border-box;width:100%;overflow-y:auto;-webkit-overflow-scrolling:touch;
  padding:18px 18px calc(env(safe-area-inset-bottom,0px) + 16px);border-radius:24px 24px 0 0;background:var(--dc-the);
  border:1px solid rgba(90,169,255,.28);border-bottom:0;box-shadow:0 -10px 40px rgba(0,0,0,.45);animation:dc-len .32s cubic-bezier(.2,.8,.2,1)}
.dc-kq-the{max-width:520px;max-height:calc(100% - env(safe-area-inset-top,0px) - 56px)}
.dc-tam{max-width:480px;max-height:calc(100% - env(safe-area-inset-top,0px) - 40px);display:flex;flex-direction:column;gap:12px;
  -webkit-user-select:text;user-select:text}
@keyframes dc-len{from{transform:translateY(48px);opacity:0}to{transform:none;opacity:1}}
.dc-kq-the p{margin:0}
.dc-kq-dong,.dc-tam-dong{position:absolute;top:12px;right:12px;width:32px;height:32px;padding:0;border-radius:50%;border:0;background:rgba(255,255,255,.08);
  color:#eef1ff;font-size:14px;cursor:pointer}
.dc-kq-dau{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding-right:34px}
.dc-kq-nhan{font-size:13px;color:var(--dc-mo)}
.dc-kq-so{font:600 58px/1 "Cormorant Garamond",Georgia,serif;font-variant-numeric:lining-nums;color:#fff}
.dc-kq-so span{font-size:28px;color:#cfe4ff}
.dc-kq-pm{padding-bottom:8px;font-size:13px;text-align:right;color:#9cc6ff}
.dc-kq-phu{margin-top:6px!important;font-size:14px;line-height:1.45;color:rgba(238,241,255,.85)}
.dc-cv-kq{display:block;width:100%;height:150px;margin-top:10px;border-radius:14px;background:rgba(255,255,255,.035)}
.dc-kq-that{margin-top:10px!important;font-size:14px;color:#ffe9b0}
.dc-kq-khuyen{margin-top:8px!important;padding:9px 11px;border-radius:12px;background:rgba(255,209,102,.1);font-size:13px;line-height:1.45;color:#ffe9b0}
.dc-kq-theo{margin-top:10px}
.dc-kq-nut{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.dc-kq-nut .dc-lon{width:100%}
.dc-kq-nut2{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.dc-nut{min-height:42px;padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.06);color:#eef1ff;
  font-size:13.5px;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:6px;cursor:pointer}
.dc-kq-lich{margin-top:12px!important;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:12.5px;color:var(--dc-mo)}
.dc-kq-lich span{padding:3px 9px;border-radius:999px;background:rgba(255,255,255,.07);color:#eef1ff;font-variant-numeric:tabular-nums}
.dc-kq-lich span.dc-moi{background:rgba(90,169,255,.24)}
.dc-kq-lich i{font-style:normal;color:var(--dc-mo)}
.dc-tam-ten{margin:0;padding-right:36px;font:600 25px/1.15 "Cormorant Garamond",Georgia,serif;color:#fff}
.dc-tam-chu{margin:0;font-size:14px;line-height:1.5;color:rgba(238,241,255,.82)}
.dc-tam-chu b,.dc-phu b{color:#fff}
.dc-kieu,.dc-dv-hang{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;border-radius:16px;background:rgba(255,255,255,.06)}
.dc-chon{height:42px;padding:0 8px;border-radius:12px;border:0;background:none;color:rgba(238,241,255,.75);font-size:14px;cursor:pointer}
.dc-chon.dc-bat{background:var(--dc-xanh);color:#06152b;font-weight:700}
.dc-dv-hang .dc-chon{height:34px;font-size:13.5px}
.dc-nhap-mat,.dc-nhap-xa{display:flex;flex-direction:column;align-items:stretch;gap:10px}
.dc-so-lon{display:flex;align-items:center;justify-content:center;gap:16px}
.dc-so-lon .dc-tron{width:50px;height:50px;background:rgba(255,255,255,.08);font-size:26px}
.dc-cao-so{margin:0;min-width:130px;text-align:center;font-size:18px;color:var(--dc-mo)}
.dc-cao-so b{font:600 50px/1 "Cormorant Garamond",Georgia,serif;font-variant-numeric:lining-nums;color:#fff}
.dc-o-cao{width:100%;margin:0;accent-color:var(--dc-xanh)}
.dc-o{box-sizing:border-box;width:132px;height:58px;padding:0 6px;border-radius:14px;border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);
  color:#fff;font:600 30px/1 "Be Vietnam Pro",system-ui,sans-serif;font-variant-numeric:tabular-nums;text-align:center;-webkit-user-select:text;user-select:text}
.dc-o:disabled{opacity:.7}
.dc-phu{margin:0;font-size:13px;line-height:1.5;color:var(--dc-mo)}
.dc-tam-xong{width:100%}

/* thước thuỷ */
.dc-thuoc{position:relative;flex:1 1 0;min-height:0;display:flex;flex-direction:column;padding:0 12px calc(env(safe-area-inset-bottom,0px) + 14px)}
.dc-cv-thuoc{flex:1 1 0;min-height:180px;width:100%}
.dc-thuoc-so{display:flex;flex-direction:column;align-items:center;gap:4px;text-align:center}
.dc-thuoc-so p{margin:0}
.dc-thuoc-goc{font:600 52px/1.05 "Be Vietnam Pro",system-ui,sans-serif;font-variant-numeric:tabular-nums;letter-spacing:-1px}
.dc-thuoc-goc.dc-vung{color:var(--dc-vung)}
.dc-thuoc-phu{max-width:420px;min-height:2.9em;font-size:14px;line-height:1.45;color:rgba(238,241,255,.75)}
.dc-giu{min-width:124px;margin-top:4px}
.dc-giu.dc-bat{background:var(--dc-xanh);border-color:var(--dc-xanh);color:#06152b;font-weight:600}

/* Vì sao */
.dc-vi{flex:1 1 0;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch;-webkit-user-select:text;user-select:text}
.dc-vi-trong{max-width:620px;margin:0 auto;padding:4px 16px calc(env(safe-area-inset-bottom,0px) + 28px)}
.dc-vi h3{margin:20px 0 8px;font:600 22px/1.2 "Cormorant Garamond",Georgia,serif;color:#cfe4ff}
.dc-vi h3:first-child{margin-top:4px}
.dc-cv-bai,.dc-cv-ti,.dc-cv-tan{display:block;width:100%;border-radius:14px;background:#0d1428}
.dc-cv-bai{height:260px}
.dc-cv-ti{height:220px}
.dc-cv-tan{height:170px}
.dc-bai-chu,.dc-tan-chu,.dc-vi-chu{min-height:3em;font-size:14.5px;line-height:1.55;color:rgba(238,241,255,.88)}
.dc-bai-chu b,.dc-tan-chu b,.dc-vi-chu b{color:#fff}
.dc-bai-nut{display:flex;justify-content:flex-end;gap:6px}
.dc-bai-nut .dc-tiep{background:var(--dc-xanh);border-color:var(--dc-xanh);color:#06152b;font-weight:600}
.dc-tan-keo{width:100%;margin:10px 0 0;accent-color:var(--dc-xanh)}
.dc-ky{display:grid;gap:8px}
.dc-ky-the{padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1)}
.dc-ky-the b{display:block;margin-bottom:4px;font-size:15px;color:#cfe4ff}
.dc-ky-the p{margin:0;font-size:14px;line-height:1.5;color:rgba(238,241,255,.82)}
.dc-bao{position:absolute;z-index:7;left:50%;top:calc(env(safe-area-inset-top,0px) + 156px);transform:translateX(-50%);box-sizing:border-box;width:max-content;
  max-width:calc(100% - 32px);padding:10px 16px;border-radius:14px;background:rgba(18,26,58,.96);border:1px solid rgba(90,169,255,.38);color:#e6f1ff;
  font-size:14px;line-height:1.4;text-align:center;box-shadow:0 8px 30px rgba(0,0,0,.4)}
/* máy tính: ngăn nằm giữa hàng tên, thẻ kết quả nổi giữa đáy */
@media (min-width:860px){
  .dc-hang-ngan{position:absolute;top:calc(env(safe-area-inset-top,0px) + 10px);left:50%;width:440px;margin:0;transform:translateX(-50%)}
  .dc-meo{top:calc(env(safe-area-inset-top,0px) + 66px)}
  .dc-bao{top:calc(env(safe-area-inset-top,0px) + 112px)}
  .dc-batdau{padding-top:80px}
  .dc-kq-the,.dc-tam{margin-bottom:20px;border-radius:24px;border-bottom:1px solid rgba(90,169,255,.28)}
  .dc-thuoc,.dc-vi{margin-top:8px}
}
/* điện thoại nằm ngang: nút chụp sang cột phải, như app chụp ảnh */
@media (orientation:landscape) and (max-height:520px){
  .docao.dc-o-do::before{height:calc(env(safe-area-inset-top,0px) + 96px)}
  .dc-dau{padding-top:calc(env(safe-area-inset-top,0px) + 10px);padding-bottom:4px}
  .dc-hang-ngan{position:absolute;top:calc(env(safe-area-inset-top,0px) + 6px);left:50%;width:min(400px,calc(100% - 440px));min-width:230px;margin:0;transform:translateX(-50%)}
  .dc-the{font-size:13px}
  .dc-tron{width:38px;height:38px}
  .dc-meo{top:calc(env(safe-area-inset-top,0px) + 58px)}
  .dc-bao{top:calc(env(safe-area-inset-top,0px) + 96px)}
  .dc-dieu{left:auto;top:0;width:288px;box-sizing:border-box;justify-content:center;gap:10px;padding:calc(env(safe-area-inset-top,0px) + 58px) calc(env(safe-area-inset-right,0px) + 12px) 10px 16px;
    background:linear-gradient(90deg,rgba(5,8,20,0),rgba(5,8,20,.72) 28%,rgba(5,8,20,.86))}
  .dc-buoc-hang{flex-direction:column;gap:6px}
  .dc-moc{width:100%;box-sizing:border-box;padding:6px 10px}
  .dc-moc-noi{display:none}
  .dc-hang-chup{column-gap:8px}
  .dc-phu-nut{min-width:0;height:54px;padding:4px 6px}
  .dc-chup{width:68px;height:68px}
  .dc-chup-tron{width:52px;height:52px}
  .dc-batdau{padding-top:calc(env(safe-area-inset-top,0px) + 56px);padding-bottom:10px}
  .dc-batdau-trong{max-width:720px;display:grid;grid-template-columns:minmax(0,300px) minmax(0,1fr);column-gap:28px;row-gap:8px;align-items:center;text-align:left}
  .dc-batdau-trong > *{grid-column:2}
  .dc-batdau-trong > .dc-minh{grid-column:1;grid-row:1 / span 6;max-height:none}
  .dc-batdau-ten{font-size:23px}
  .dc-batdau .dc-lon{margin-top:2px;height:46px}
  .dc-batdau-dodai,.dc-chu-nut{justify-self:start}
  .dc-kq-the,.dc-tam{max-height:calc(100% - 16px)}
}
@media (prefers-reduced-motion:reduce){
  .dc-kq-the,.dc-tam{animation:none}
  .dc-minh-tia{display:none}
  .dc-minh-diem-goc,.dc-minh-diem-ngon{animation:none}
  .dc-chup-tron,.dc-the,.dc-moc{transition:none}
}
/* ---------- hết Đo chiều cao ---------- */

/* ---------- Ngồi thiền cùng nhau (assets/ngoithien.js; cảnh, giờ, chỗ ngồi canhthien.js; vẽ vethien.js; tiếng amthien.js) ---------- */
/* Cảnh là canvas phủ kín màn; chữ, nút nổi trên đó trong những tấm kính mờ cho dễ đọc mà vẫn thấy trời. Màn vào: tấm thẻ ở trên (trời),
   chừa bãi cỏ cho thấy ai đang ngồi; màn ngồi: hàng nút tròn ở đáy, dưới hàng người ngồi đầu (ngoithien.js đo chiều cao hàng nút để
   chừa chỗ), chừng 7 giây không chạm thì chữ và nút mờ đi cho cảnh yên. Màu nhấn vàng ấm như đèn lồng. */
.ngoithien{--nt-vang:#f3c98b;--nt-kinh:rgba(10,14,32,.58);--nt-vien:rgba(255,255,255,.14);--nt-mo:rgba(246,241,231,.72);
  position:fixed;inset:0;z-index:30;display:none;overflow:hidden;background:#0b1020;color:#f6f1e7;
  font-family:"Be Vietnam Pro",system-ui,sans-serif;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.ngoithien.hien{display:block}
.ngoithien [hidden]{display:none!important}
.ngoithien button{font-family:inherit;color:inherit;-webkit-tap-highlight-color:transparent;cursor:pointer}
.nt-cv{position:absolute;inset:0;width:100%;height:100%;display:block}
.nt-dong{position:absolute;z-index:6;top:calc(env(safe-area-inset-top,0px) + 14px);right:16px;width:34px;height:34px;padding:0;border-radius:50%;
  border:1px solid rgba(255,255,255,.2);background:rgba(0,0,0,.3);font-size:16px;line-height:1}
/* góc trên trái: buổi trong ngày, giờ máy, số người đang ngồi — chừa hàng nút 🔗, Cài app của app.js bên phải */
.nt-dau{position:absolute;z-index:5;top:calc(env(safe-area-inset-top,0px) + 12px);left:16px;max-width:calc(100% - 128px);pointer-events:none;
  text-shadow:0 1px 3px rgba(0,0,0,.55),0 0 16px rgba(0,0,0,.3);transition:opacity 1.2s}
.co-nut-cai .nt-dau{max-width:calc(100% - 228px)}
.nt-dau p{margin:0}
.nt-buoi{font:600 21px/1.15 "Cormorant Garamond",Georgia,serif;font-variant-numeric:lining-nums;letter-spacing:.01em}
.nt-dem{margin-top:3px!important;font-size:12.5px;line-height:1.35;color:var(--nt-mo)}
/* lời báo nhỏ: ai vừa ngồi xuống, ai chào */
.nt-tin{position:absolute;z-index:7;left:50%;top:calc(env(safe-area-inset-top,0px) + 78px);transform:translateX(-50%);margin:0;max-width:calc(100% - 32px);
  padding:7px 14px;border-radius:999px;background:var(--nt-kinh);border:1px solid var(--nt-vien);font-size:13px;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);pointer-events:none}
.nt-tin-ra{animation:nt-tin 3.8s ease both}
@keyframes nt-tin{0%{opacity:0;transform:translate(-50%,-6px)}10%,82%{opacity:1;transform:translate(-50%,0)}100%{opacity:0;transform:translate(-50%,-4px)}}
/* tấm thẻ kính */
/* căn giữa bằng left/right + margin (không dùng transform: điệu "up" trượt lên đè mất translateX) */
.nt-the{position:absolute;z-index:6;left:0;right:0;margin:0 auto;width:min(400px,calc(100% - 24px));box-sizing:border-box;padding:16px 16px 14px;
  border-radius:22px;background:var(--nt-kinh);border:1px solid var(--nt-vien);box-shadow:0 12px 40px rgba(0,0,0,.28);
  -webkit-backdrop-filter:blur(18px) saturate(1.15);backdrop-filter:blur(18px) saturate(1.15);animation:up .5s ease both}
.nt-vao{top:calc(env(safe-area-inset-top,0px) + 64px);max-height:calc(100% - env(safe-area-inset-top,0px) - 76px);overflow-y:auto;-webkit-user-select:auto;user-select:auto}
.nt-tieu{margin:0;font:600 27px/1.1 "Cormorant Garamond",Georgia,serif;color:#fff6e6}
.nt-cau{margin:4px 0 12px;font-size:13px;color:var(--nt-mo)}
.nt-form{display:flex;flex-direction:column;gap:11px;margin:0}
.nt-nhan-o{display:flex;flex-direction:column;gap:5px;font-size:12px;color:var(--nt-mo)}
.nt-o-ten{height:44px;padding:0 13px;border-radius:13px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:#fff;
  font:500 16px "Be Vietnam Pro",system-ui,sans-serif;outline:none;-webkit-user-select:text;user-select:text}
.nt-o-ten:focus{border-color:rgba(243,201,139,.7);background:rgba(255,255,255,.12)}
.nt-o-ten::placeholder{color:rgba(246,241,231,.42)}
.nt-loi-ten{margin:-4px 0 0;font-size:12.5px;color:#ffc39a}
/* nhân vật: ô nhỏ có hình của mình cạnh ô tên; bấm vào thì ba hàng áo, tóc, da hiện ra */
.nt-nv{display:flex;align-items:flex-end;gap:12px}
.nt-nv .nt-nhan-o{flex:1;min-width:0}
.nt-xem-nv{flex:none;position:relative;width:64px;height:64px;padding:0;border-radius:18px;border:1px solid rgba(255,255,255,.16);
  background:radial-gradient(circle at 50% 85%,rgba(255,214,150,.28),rgba(255,255,255,.05) 70%)}
.nt-mo-nv .nt-xem-nv{border-color:var(--nt-vang)}
.nt-mau-nv{width:64px;height:64px;display:block}
.nt-doi-nv{position:absolute;left:50%;bottom:-8px;transform:translateX(-50%);padding:1px 8px;border-radius:999px;background:#2a2238;border:1px solid var(--nt-vien);
  font-size:10.5px;color:var(--nt-vang)}
.nt-chon-nv{display:none;flex-direction:column;gap:7px;padding:10px 10px 8px;border-radius:14px;background:rgba(255,255,255,.05)}
.nt-mo-nv .nt-chon-nv{display:flex}
.nt-hang{display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.nt-ten-hang{flex:none;width:34px;font-size:11.5px;color:var(--nt-mo)}
.nt-o{flex:none;width:24px;height:24px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.3);background:var(--o)}
.nt-o[aria-pressed="true"]{box-shadow:0 0 0 2px #0b1020,0 0 0 4px var(--nt-vang)}
.nt-o-chu{width:auto;height:26px;padding:0 9px;border-radius:999px;background:rgba(255,255,255,.07);font-size:12px}
.nt-o-chu[aria-pressed="true"]{box-shadow:none;background:rgba(243,201,139,.22);border-color:var(--nt-vang);color:#fff3dd}
.nt-hen{display:flex;align-items:center;gap:6px}
.nt-hen .nt-ten-hang{width:auto;margin-right:2px}
.nt-hen-ds{flex:1;min-width:0;display:flex;gap:6px;overflow-x:auto;scrollbar-width:none;padding:2px 0}
.nt-hen-ds::-webkit-scrollbar{display:none}
.nt-hen-o{flex:none;height:30px;padding:0 11px;border-radius:999px;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);font-size:12.5px;white-space:nowrap}
.nt-hen-o[aria-pressed="true"]{background:rgba(243,201,139,.22);border-color:var(--nt-vang);color:#fff3dd}
.nt-ngoi{height:48px;border:0;border-radius:15px;background:linear-gradient(180deg,#f8d9a4,#e8b46c);color:#2a1a06!important;font-size:16px;font-weight:600;
  box-shadow:0 6px 20px rgba(232,180,108,.3)}
.nt-ngoi:active{transform:translateY(1px)}
.nt-tong{margin:10px 0 0;font-size:12.5px;text-align:center;color:var(--nt-mo)}
.nt-tong:empty{display:none}
/* đang ngồi: đồng hồ dưới góc trên trái, hàng nút tròn ở đáy */
.nt-gio{position:absolute;z-index:5;left:16px;top:calc(env(safe-area-inset-top,0px) + 66px);margin:0;padding:5px 12px;border-radius:999px;background:var(--nt-kinh);
  border:1px solid var(--nt-vien);font-size:13px;color:var(--nt-mo);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity 1.2s}
.nt-dongho{font-weight:600;color:#fff;font-variant-numeric:tabular-nums}
.nt-con{font-variant-numeric:tabular-nums}
.nt-nut{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 10px);transform:translateX(-50%);display:flex;gap:10px;transition:opacity 1.2s}
.nt-nut button{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;width:74px;height:54px;padding:0;border-radius:17px;
  border:1px solid var(--nt-vien);background:var(--nt-kinh);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
.nt-nut i{font-style:normal;font-size:11.5px;color:var(--nt-mo)}
.nt-bieu{display:grid;place-items:center;height:24px;font-size:19px;line-height:1}
.nt-bieu svg{width:22px;height:22px;fill:currentColor}
.nt-nut-day .nt-bieu{color:var(--nt-vang)}
.nt-bat-tieng{position:absolute;z-index:5;left:50%;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);transform:translateX(-50%);margin:0;padding:6px 13px;
  border-radius:999px;background:rgba(243,201,139,.2);border:1px solid rgba(243,201,139,.5);font-size:12.5px;white-space:nowrap;cursor:pointer}
.nt-lang .nt-dau,.nt-lang .nt-gio{opacity:.3}
.nt-lang .nt-nut{opacity:.22}
/* khung cảnh: theo giờ máy hay một buổi cố định */
.nt-canh{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);display:flex;flex-direction:column;gap:10px}
.nt-canh-tieu{margin:0;font:600 19px/1.2 "Cormorant Garamond",Georgia,serif}
.nt-canh-ds{display:flex;flex-wrap:wrap;gap:7px}
.nt-canh-ghi{margin:0;font-size:12px;line-height:1.45;color:var(--nt-mo)}
/* tiếng và màn hình */
.nt-cai{top:auto;bottom:calc(env(safe-area-inset-bottom,0px) + 74px);display:flex;flex-direction:column;gap:10px;font-size:14px}
.nt-cong{display:flex;align-items:center;gap:10px;cursor:pointer}
.nt-cong input{flex:none;width:20px;height:20px;margin:0;accent-color:#e8b46c}
.nt-cong i{font-style:normal;font-size:12px;color:var(--nt-mo)}
.nt-to{display:flex;align-items:center;gap:10px}
.nt-to input{flex:1;accent-color:#e8b46c}
.nt-phu{height:40px;border-radius:13px;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.07);font-size:14px}
/* xong một buổi */
.nt-xong{top:50%;transform:translateY(-50%);text-align:center;animation:none}
.nt-xong-nho{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--nt-vang)}
.nt-xong-so{margin:6px 0 4px;font:600 28px/1.15 "Cormorant Garamond",Georgia,serif;font-variant-numeric:lining-nums}
.nt-xong-tong{margin:0 0 14px;font-size:13.5px;color:var(--nt-mo)}
.nt-xong-nut{display:flex;gap:10px}
.nt-xong-nut button{flex:1}
@media (max-width:360px){
  .nt-nut{gap:7px}
  .nt-nut button{width:66px}
}
@media (min-width:900px){
  .nt-vao{left:auto;right:28px;margin:0;top:calc(env(safe-area-inset-top,0px) + 72px)}
  .nt-the.nt-vao{animation:none}
}
@media (max-height:620px){
  .nt-vao{top:calc(env(safe-area-inset-top,0px) + 56px);padding:12px 14px}
  .nt-cau{margin-bottom:8px}
  .nt-form{gap:8px}
}
@media (prefers-reduced-motion:reduce){
  .nt-the,.nt-tin-ra{animation:none}
  .nt-dau,.nt-gio,.nt-nut{transition:none}
}
/* chùa: nút Vào chùa trên mái chùa bên kia sông, nút Ra bờ sông (đang ngồi trong chùa), màn tối thoáng qua lúc bước qua cửa */
.nt-vao-chua{position:absolute;z-index:4;transform:translate(-50%,-100%);display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:999px;
  border:1px solid rgba(255,214,150,.6);background:rgba(44,24,8,.6);color:#ffe9c4;font-size:12.5px;font-weight:600;white-space:nowrap;
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);animation:nt-moi 2.8s ease-in-out infinite}
.nt-vao-chua i{font-style:normal;font-weight:400;color:rgba(255,233,196,.78)}
.nt-vao-chua i:empty{display:none}
.nt-vao-chua i::before{content:"· "}
@keyframes nt-moi{0%,100%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 0 rgba(255,214,150,0)}50%{box-shadow:0 4px 14px rgba(0,0,0,.25),0 0 0 6px rgba(255,214,150,.2)}}
.nt-lang .nt-vao-chua{opacity:.45}
.nt-ra-song{position:absolute;z-index:6;right:16px;top:calc(env(safe-area-inset-top,0px) + 58px);padding:7px 13px;border-radius:999px;
  border:1px solid var(--nt-vien);background:var(--nt-kinh);font-size:12.5px;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:opacity 1.2s}
.nt-lang .nt-ra-song{opacity:.3}
.nt-chuyen{position:absolute;inset:0;z-index:8;background:#0b0704;opacity:0;pointer-events:none}
.nt-chuyen-ra{animation:nt-chuyen .9s ease-out both}
@keyframes nt-chuyen{0%{opacity:.92}100%{opacity:0}}
/* hàng nút: bên sông có Chào, Cảnh; trong chùa có Lạy Phật, Thắp hương, Xin xăm — năm nút, nhỏ lại cho vừa màn */
.ngoithien:not(.nt-trong-chua) .nt-chi-chua,.nt-trong-chua .nt-chi-song{display:none!important}
.nt-trong-chua .nt-nut{gap:6px}
.nt-trong-chua .nt-nut button{width:66px}
.nt-trong-chua .nt-nut i{font-size:11px;white-space:nowrap}
.nt-bieu-nho{display:inline-grid;place-items:center;width:15px;height:15px;margin-right:5px;vertical-align:-2px}
.nt-bieu-nho svg{width:15px;height:15px;fill:currentColor}
/* xin xăm: khấn, lắc ống, thẻ rơi, gieo keo, đọc quẻ */
.nt-xam{top:calc(env(safe-area-inset-top,0px) + 64px);max-height:calc(100% - env(safe-area-inset-top,0px) - 150px);overflow-y:auto;text-align:center;
  -webkit-user-select:auto;user-select:auto}
.nt-xam-nho{margin:0;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--nt-vang)}
.nt-xam-tieu{margin:6px 0 4px;font:600 24px/1.15 "Cormorant Garamond",Georgia,serif}
.nt-xam-ghi{margin:0 0 4px;font-size:13px;line-height:1.5;color:var(--nt-mo);min-height:1.5em}
.nt-xam-canh{position:relative;height:196px;margin:2px 0 10px}
.nt-ong{position:absolute;left:50%;bottom:18px;width:96px;margin-left:-48px;transform-origin:50% 100%}
.nt-ong-svg{display:block;width:96px;height:144px}
.nt-xam-lac .nt-ong{animation:nt-lac .17s ease-in-out infinite alternate}
@keyframes nt-lac{0%{transform:rotate(-9deg) translateY(0)}100%{transform:rotate(9deg) translateY(-4px)}}
/* thẻ tre có số: trồi lên khỏi miệng ống rồi rơi nằm xuống cạnh ống */
.nt-the-roi{position:absolute;left:50%;bottom:22px;width:10px;height:118px;margin-left:-5px;opacity:0;border-radius:3px;
  background:linear-gradient(90deg,#b8954e,#ecd296 40%,#a8843e);box-shadow:0 2px 6px rgba(0,0,0,.35)}
.nt-the-roi::before{content:"";position:absolute;left:0;right:0;top:0;height:22px;border-radius:3px 3px 0 0;background:#c0392b}
.nt-the-roi span{position:absolute;left:50%;top:56%;transform:translate(-50%,-50%) rotate(-90deg);font:700 12px/1 "Be Vietnam Pro",system-ui,sans-serif;color:#5a3a10;white-space:nowrap}
.nt-xam-the .nt-the-roi,.nt-xam-gieo .nt-the-roi,.nt-xam-cuoi .nt-the-roi,.nt-xam-up .nt-the-roi,.nt-xam-duoc .nt-the-roi{opacity:1;transform:translate(76px,-6px) rotate(90deg)}
.nt-xam-the .nt-the-roi{animation:nt-roi .9s cubic-bezier(.3,.7,.4,1) both}
@keyframes nt-roi{0%{opacity:1;transform:translate(0,-60px) rotate(0)}45%{transform:translate(34px,-118px) rotate(40deg)}100%{opacity:1;transform:translate(76px,-6px) rotate(90deg)}}
/* keo: hai mảnh gỗ cong — mặt úp đỏ bóng (vòm), mặt ngửa gỗ phẳng */
.nt-keo{position:absolute;left:50%;bottom:4px;display:flex;align-items:flex-end;gap:18px;margin-left:-57px;opacity:0}
.nt-keo i{display:block;width:48px;height:24px;border-radius:48px 48px 6px 6px;background:radial-gradient(circle at 35% 30%,#f07a5a,#b52a1a 60%,#7a160c);
  box-shadow:0 3px 6px rgba(0,0,0,.35)}
.nt-xam-gieo .nt-keo,.nt-xam-cuoi .nt-keo,.nt-xam-up .nt-keo,.nt-xam-duoc .nt-keo{opacity:1}
.nt-xam-gieo .nt-keo i{animation:nt-gieo .95s cubic-bezier(.3,.6,.5,1) both}
.nt-xam-gieo .nt-keo i+i{animation-delay:.07s}
@keyframes nt-gieo{0%{transform:translateY(0) rotate(0)}40%{transform:translateY(-110px) rotate(320deg)}75%{transform:translateY(0) rotate(640deg)}88%{transform:translateY(-10px) rotate(700deg)}100%{transform:translateY(0) rotate(720deg)}}
.nt-keo-amDuong .nt-keo i:first-child,.nt-keo-cuoi .nt-keo i{height:15px;border-radius:7px;background:linear-gradient(180deg,#ecd096,#b8904a);
  box-shadow:inset 0 0 0 2px rgba(120,80,30,.45),0 3px 6px rgba(0,0,0,.3)}
.nt-xam-nut{display:flex;gap:10px}
.nt-xam-nut button{flex:1}
.nt-xam-nut button:disabled{opacity:.6}
/* tờ quẻ: giấy dó, viền đỏ, thơ nghiêng */
.nt-que{margin:2px 0 0;padding:16px 16px 14px;border-radius:16px;background:linear-gradient(180deg,#f8eed8,#f1e2c2);color:#3a2410;text-align:center;
  box-shadow:inset 0 0 0 1.5px rgba(176,48,32,.55),inset 0 0 0 5px #f6ead0,inset 0 0 0 6px rgba(176,48,32,.35)}
.nt-que-ra{animation:up .5s ease both}
.nt-que-so{margin:0;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:#a8321e;font-weight:600}
.nt-que-ten{margin:4px 0 8px;font:600 24px/1.15 "Cormorant Garamond",Georgia,serif;color:#5a1c0c}
.nt-que-tho{margin:0 0 10px;font:italic 500 17px/1.5 "Cormorant Garamond",Georgia,serif;color:#3a2410}
.nt-que-tho p{margin:0}
.nt-que-y{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#4a3018}
.nt-que-loi{display:grid;grid-template-columns:auto 1fr;gap:5px 10px;margin:0 0 10px;text-align:left;font-size:13px;line-height:1.45}
.nt-que-loi dt{font-weight:600;color:#8a2a18;white-space:nowrap}
.nt-que-loi dd{margin:0;color:#3a2410}
.nt-que-nhan{margin:0 0 8px;padding:8px 10px;border-radius:10px;background:rgba(176,48,32,.08);font-size:13px;line-height:1.5;color:#5a2a14}
.nt-que-nhan:empty{display:none}
.nt-que-ghi{margin:0 0 12px;font-size:11.5px;color:#8a6a4a}
.nt-que .nt-ngoi{width:100%}
.nt-mo-xam .nt-nut,.nt-mo-xam .nt-ra-song,.nt-mo-xam .nt-vao-chua{opacity:.15;pointer-events:none}
@media (max-width:360px){
  .nt-trong-chua .nt-nut button{width:60px}
  .nt-trong-chua .nt-nut i{font-size:10.5px}
}
@media (max-width:330px){
  .nt-trong-chua .nt-nut{gap:5px}
  .nt-trong-chua .nt-nut button{width:54px}
}
@media (prefers-reduced-motion:reduce){
  .nt-vao-chua,.nt-chuyen-ra,.nt-xam-lac .nt-ong,.nt-xam-the .nt-the-roi,.nt-xam-gieo .nt-keo i,.nt-que-ra{animation:none}
}
/* Ngồi thiền — trò chuyện (ngoithien.js "Trò chuyện", người dùng: "Oke làm phần chat như bida luôn nha"): nút tròn bên phải trên hàng
   nút (hàng nút đã kín chỗ), bảng như trò chuyện ở bàn của bida — điện thoại tấm trượt từ dưới lên, máy tính khung góc phải dưới */
.ngoithien .nt-tro-nut{position:absolute;z-index:5;right:14px;bottom:calc(env(safe-area-inset-bottom,0px) + 76px);display:grid;place-items:center;width:48px;height:48px;
  padding:0;border-radius:50%;border:1px solid var(--nt-vien);background:var(--nt-kinh);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  color:var(--nt-vang);cursor:pointer;transition:opacity 1.2s}
.nt-tro-nut[hidden]{display:none}
.nt-tro-nut .nt-bieu svg{width:22px;height:22px}
.nt-tro-so{position:absolute;top:-4px;right:-4px;min-width:19px;height:19px;padding:0 5px;box-sizing:border-box;border-radius:10px;background:#e5483b;
  color:#fff;font:600 11px/19px "Be Vietnam Pro",system-ui,sans-serif;text-align:center}
.nt-tro-so[hidden]{display:none}
.ngoithien.nt-lang .nt-tro-nut{opacity:.22}
.nt-tro{position:absolute;left:0;right:0;bottom:0;z-index:12;display:flex;flex-direction:column;max-height:62%;padding-bottom:env(safe-area-inset-bottom,0px);
  border-radius:20px 20px 0 0;border:1px solid var(--nt-vien);border-bottom:0;background:rgba(14,12,26,.9);-webkit-backdrop-filter:blur(14px);
  backdrop-filter:blur(14px);color:#f3eee4;font-family:"Be Vietnam Pro",system-ui,sans-serif}
.nt-tro[hidden]{display:none}
.nt-tro-dau{flex:none;display:flex;align-items:center;gap:8px;padding:12px 10px 4px 16px}
.nt-tro-dau b{flex:1;font-family:"Cormorant Garamond",Georgia,serif;font-size:21px;font-weight:600;color:var(--nt-vang)}
.ngoithien .nt-tro-dau button{flex:none;width:34px;height:34px;padding:0;border-radius:50%;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);
  color:#fff;font-size:15px;cursor:pointer}
.nt-tro-ds{flex:1 1 auto;min-height:96px;overflow-y:auto;padding:2px 14px 8px;overscroll-behavior:contain;font-size:14.5px;line-height:1.4}
.nt-tro-loi{width:fit-content;max-width:85%;margin:6px 0 0;padding:7px 11px;border-radius:14px 14px 14px 4px;background:rgba(255,255,255,.08);overflow-wrap:anywhere}
.nt-tro-loi b{display:block;font-size:12px;font-weight:600;color:var(--nt-vang)}
.nt-tro-minh{margin-left:auto;border-radius:14px 14px 4px 14px;background:rgba(255,215,120,.2);color:#fff4d6}
.nt-tro-cho{opacity:.55}
.nt-tro-loi.nt-tro-to{padding:0 4px;background:none;font-size:34px;line-height:1.25}
.nt-tro-trong{margin:18px 0;font-size:13.5px;color:var(--nt-mo);text-align:center}
.nt-tro-moi{transform-origin:0 100%;animation:nt-tro-vao .38s cubic-bezier(.2,1.4,.4,1)}
.nt-tro-minh.nt-tro-moi{transform-origin:100% 100%}
@keyframes nt-tro-vao{from{opacity:0;transform:scale(.85)}to{opacity:1;transform:none}}
.nt-tro-bieu{flex:none;display:flex;gap:4px;padding:8px 12px 2px}
.ngoithien .nt-tro-bieu button{flex:1 1 0;min-width:0;height:42px;padding:0;border:0;border-radius:14px;background:rgba(255,255,255,.06);font-size:22px;cursor:pointer}
.nt-tro-bieu button:active{transform:scale(.88);background:rgba(255,215,120,.22)}
.nt-tro-nhanh{flex:none;display:flex;gap:6px;overflow-x:auto;padding:6px 12px;scrollbar-width:none}
.nt-tro-nhanh::-webkit-scrollbar{display:none}
.ngoithien .nt-tro-nhanh button{flex:none;height:34px;padding:0 12px;border-radius:17px;border:1px solid rgba(255,215,120,.35);background:rgba(255,215,120,.08);
  color:#ffe9bf;font:500 13px "Be Vietnam Pro",system-ui,sans-serif;white-space:nowrap;cursor:pointer}
.nt-tro-go{flex:none;display:flex;gap:8px;margin:0;padding:2px 12px 4px}
.nt-tro-o{flex:1;min-width:0;height:44px;box-sizing:border-box;padding:0 14px;border-radius:22px;border:1px solid rgba(255,255,255,.2);
  background:rgba(255,255,255,.07);color:#fff;font:16px "Be Vietnam Pro",system-ui,sans-serif}
.nt-tro-o:focus{outline:none;border-color:var(--nt-vang)}
.ngoithien .nt-tro-gui{flex:none;height:44px;padding:0 18px;border:0;border-radius:22px;background:linear-gradient(#ffd77a,#e9a93a);color:#2a1a00;
  font:600 15px "Be Vietnam Pro",system-ui,sans-serif;cursor:pointer}
.nt-tro-meo{flex:none;margin:2px 14px 10px;font-size:11.5px;line-height:1.4;color:var(--nt-mo);text-align:center}
.nt-tro-doc{position:absolute;width:1px;height:1px;margin:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (min-width:700px){.nt-tro{left:auto;right:16px;bottom:84px;width:360px;max-height:min(520px,calc(100% - 140px));border-radius:20px;
  border-bottom:1px solid var(--nt-vien);padding-bottom:0}}
@media (prefers-reduced-motion:reduce){.nt-tro-moi{animation:none}.nt-tro-nut{transition:none}}
/* ---------- hết Ngồi thiền cùng nhau ---------- */