/* Giao diện khách — v2 "Vé vào ca" (docs/thiet-ke-v2.md). Phong cách: Bamos × TBQ × Apple, CHỈ cho điện thoại (khách chạm NFC bằng điện thoại).
 * - Nền đêm của trang quán Bamos (đen ô-liu + bụi vàng) → khách bấm từ trang quán sang thấy liền mạch.
 * - Nút viên thuốc màu kem giống nút "Nhận công cụ làm việc miễn phí" trên khối QS — đúng cái khách vừa bấm.
 * - Kiểu Apple: tiêu đề to, đậm, căn giữa; câu ngắn; nhiều khoảng thở; 1 nút chính + 1 nút viền.
 * - Vàng đồng TBQ chỉ làm điểm nhấn (món đang chọn, vòng thời gian, nhãn Miễn phí). Vé = giấy kem nổi trên nền tối.
 * Chữ hệ thống (SF Pro trên iPhone), không tải ngoài (CSP 'self'). Trang Quản trị dùng style.css riêng. */
:root {
  --bg: #191914; --bg-2: #22221c; --card: #26261f; --card-2: #2f2e27; --line: rgba(240, 235, 224, .1); --line-2: rgba(240, 235, 224, .18);
  --text: #f3efe6; --text-2: rgba(243, 239, 230, .64); --text-3: rgba(243, 239, 230, .42);
  --cream: #f0ebe0; --paper: #f6f2e9; --ink: #1c1b17; --ink-2: #6b665c;
  --gold: #d4b06a; --gold-2: #b38b45; --gold-50: rgba(212, 176, 106, .14);
  --mint: #5fd3a2; --red: #ff7b72; --red-50: rgba(255, 123, 114, .12);
  /* chữ có chân: phông hệ thống xếp dấu tiếng Việt chuẩn (Iowan / Palatino đặt dấu lệch) */
  --serif: 'Cormorant Garamond', ui-serif, 'New York', Georgia, 'Times New Roman', serif;
  --f: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --ease: cubic-bezier(.2, .8, .2, 1);
  color-scheme: dark;
}
* { box-sizing: border-box; }
/* Khung kiểu ứng dụng: TÀI LIỆU KHÔNG CUỘN, chỉ vùng .page dưới thanh TBQ cuộn. Lý do (Chrome trên iPhone): tài liệu cuộn → Chrome thu thanh địa chỉ,
 * màn cao thêm ~100px; trang chỉ dài hơn màn chút xíu thì hết chỗ cuộn mà vẫn kẹt lệch (che logo), kéo xuống lại thành "Tải lại". */
html { -webkit-text-size-adjust: 100%; background: var(--bg); height: 100%; overflow: hidden; overscroll-behavior: none; }
body { position: relative; margin: 0; height: 100%; height: 100dvh; display: flex; flex-direction: column; overflow: hidden;
  color: var(--text); font: 17px/1.47 var(--f); letter-spacing: -.01em;
  -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  background: radial-gradient(120% 60% at 70% -10%, rgba(212, 176, 106, .16), transparent 60%), var(--bg); }
/* bụi vàng lấp lánh (giống nền trang quán Bamos) */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; opacity: .55;
  background-image: radial-gradient(rgba(212, 176, 106, .55) .7px, transparent 1px), radial-gradient(rgba(240, 235, 224, .35) .6px, transparent 1px);
  background-size: 23px 29px, 37px 31px; background-position: 0 0, 11px 7px;
  -webkit-mask-image: radial-gradient(80% 50% at 70% 0%, #000, transparent 75%); mask-image: radial-gradient(80% 50% at 70% 0%, #000, transparent 75%); }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: -.03em; line-height: 1.08; text-wrap: balance; }
h1 { font-size: clamp(32px, 9vw, 40px); }
h2 { font-size: 22px; letter-spacing: -.02em; line-height: 1.2; }
p { margin: 0; }
a { color: inherit; text-decoration-color: var(--line-2); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
b { font-weight: 650; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 8px; }
code { font-family: var(--mono); }
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.sub { color: var(--text-2); font-size: 17px; margin-top: 10px; }
.sub b { color: var(--text); }
.hint { color: var(--text-3); font-size: 13px; margin-top: 10px; }
.center { text-align: center; }
.warn { background: var(--red-50); color: var(--red); border-radius: 14px; padding: 12px 14px; font-size: 15px; }
.ok-line { color: var(--mint); font-size: 15px; font-weight: 600; }

/* ---------- Khung ---------- */
.page { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; -webkit-overflow-scrolling: touch; }
.top { flex: none; position: relative; z-index: 20; background: rgba(25, 25, 20, .72); -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border-bottom: 1px solid var(--line); }
.top-in { display: flex; align-items: center; justify-content: space-between; max-width: 480px; margin: 0 auto; padding: 0 20px; height: 58px; }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand .tag { width: 22px; height: 37px; flex: none; }
.wordmark { display: flex; flex-direction: column; line-height: 1; }
.wordmark b { font: 500 19px/1 var(--serif); letter-spacing: 0; color: var(--text); }
.wordmark small { margin-top: 3px; font: 500 8.5px/1 var(--serif); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); }
.top-zalo { font-size: 14px; font-weight: 600; text-decoration: none; color: var(--gold); border: 1px solid rgba(212, 176, 106, .5); border-radius: 999px; padding: 6px 14px; }
.wrap { max-width: 480px; margin: 0 auto; padding: 8px 20px 40px; }
.wrap > * + * { margin-top: 20px; }
.foot { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 18px; max-width: 480px; margin: 0 auto; padding: 8px 20px 36px; font-size: 13px; color: var(--text-3); }
body.has-dock .foot { padding-bottom: 130px; }

/* ---------- Mở đầu trang (căn giữa kiểu Apple) ---------- */
.intro { text-align: center; padding-top: 20px; }
.intro .sub { max-width: 340px; margin-left: auto; margin-right: auto; }
.prog { display: flex; gap: 6px; justify-content: center; margin-bottom: 22px; }
.prog i { width: 28px; height: 4px; border-radius: 4px; background: var(--line-2); }
.prog i.d { background: var(--text-2); }
.prog i.n { width: 44px; background: var(--gold); }
.eyebrow { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 6px 8px; font-size: 15px; font-weight: 500; color: var(--text-2); margin-bottom: 10px; }
.free { display: inline-block; color: var(--gold); border: 1px solid rgba(212, 176, 106, .45); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; border-radius: 999px; padding: 3px 10px; }
.intro.home { padding-top: 36px; }
.intro.home h1 { font-size: clamp(40px, 12vw, 52px); margin-top: 16px; }
mark { background: none; color: var(--gold); }
.logos { display: flex; justify-content: center; gap: 8px; margin-top: 28px; }
.logos span { display: grid; place-items: center; width: 46px; height: 46px; border-radius: 14px; flex: none; background: var(--cream); animation: rise .5s var(--ease) both; }
.logos span:nth-child(2) { animation-delay: .05s; } .logos span:nth-child(3) { animation-delay: .1s; } .logos span:nth-child(4) { animation-delay: .15s; }
.logos span:nth-child(5) { animation-delay: .2s; } .logos span:nth-child(6) { animation-delay: .25s; }
.logos svg, .logos img { width: 26px; height: 26px; border-radius: 50%; }
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }

/* ---------- Logo món: nền kem (logo hãng màu tối vẫn rõ trên nền tối) ---------- */
.ic { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--cream); flex: none; font-size: 20px; }
.ic svg, .ic img { width: 24px; height: 24px; }
.ic img { border-radius: 50%; }

/* ---------- Chọn món: hàng danh sách (giống hàng Instagram / Facebook trên trang quán) ---------- */
.list { display: grid; gap: 10px; }
.tile { position: relative; display: flex; align-items: center; gap: 14px; padding: 12px 14px; border-radius: 18px; background: var(--card);
  border: 1.5px solid var(--line); cursor: pointer; transition: border-color .15s, background .15s, transform .15s var(--ease); }
.tile:active { transform: scale(.98); }
.tile input { position: absolute; opacity: 0; pointer-events: none; }
.tx { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.3; }
.tx b { font-size: 17px; font-weight: 600; }
.tx .what { font-size: 14px; color: var(--text-2); }
.tx em { font-style: normal; font-size: 12.5px; color: var(--text-3); margin-top: 2px; }
.tx em.low { color: var(--gold); }
.tick { flex: none; width: 24px; height: 24px; border-radius: 50%; border: 1.5px solid var(--line-2); display: grid; place-items: center; transition: all .2s; }
.tick::after { content: ''; width: 10px; height: 6px; border: solid var(--ink); border-width: 0 0 2px 2px; transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.tile.on, .tile:has(input:checked) { border-color: var(--gold); background: var(--card-2); }
.tile.on .tick, .tile:has(input:checked) .tick { background: var(--gold); border-color: var(--gold); }
.tile.on .tick::after, .tile:has(input:checked) .tick::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); }
.tile:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 3px; }
/* Món còn hàng: viền sáng + ánh chạy quanh viền + quầng vàng nhẹ — nổi hẳn lên so với món hết (chủ yêu cầu 09/10). */
.tile:not(.off) { border-color: rgba(212, 176, 106, .55); box-shadow: 0 0 0 1px rgba(212, 176, 106, .1), 0 10px 30px -14px rgba(212, 176, 106, .45); }
.tile:not(.off)::after { content: ''; position: absolute; inset: -1.5px; border-radius: 19.5px; padding: 1.5px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 64%, rgba(255, 236, 190, .95) 80%, transparent 94%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 4.5s linear infinite; }
.list .tile:nth-child(2)::after { animation-delay: -1.5s; } .list .tile:nth-child(3)::after { animation-delay: -3s; }
.list .tile:nth-child(4)::after { animation-delay: -.8s; } .list .tile:nth-child(5)::after { animation-delay: -2.3s; }
.tile.on, .tile:has(input:checked) { border-color: var(--gold); box-shadow: 0 0 0 1px rgba(212, 176, 106, .35), 0 12px 36px -12px rgba(212, 176, 106, .6); }
/* món hết suất: vẫn là hàng như món còn, nhưng mờ, không chọn được, nhãn "Tạm hết" bên phải */
.out { margin-top: 22px; }
.out:first-child { margin-top: 4px; }
.out-h { display: flex; justify-content: space-between; align-items: baseline; padding: 0 4px 10px; font-size: 13px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .06em; }
.out-h small { font-size: 13px; font-weight: 400; text-transform: none; letter-spacing: 0; }
.tile.off { cursor: default; background: transparent; border-style: dashed; }
.tile.off:active { transform: none; }
.out .list { gap: 8px; }
.tile.off { padding: 9px 12px; gap: 12px; border-radius: 16px; }
/* Xám hoá trên chính logo, không đặt filter/opacity lên ô: Safari iPhone vẽ lệch lớp lọc của ô → dải sáng dưới logo Adobe / Canva. */
.tile.off .ic { width: 34px; height: 34px; border-radius: 10px; background: rgba(240, 235, 224, .55); }
.tile.off .ic svg, .tile.off .ic img { width: 19px; height: 19px; filter: grayscale(1) brightness(.7); opacity: .85; }
.tile.off .tx b { font-size: 16px; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sold { flex: none; max-width: 46%; text-align: center; line-height: 1.25; font-size: 12.5px; font-weight: 600; color: var(--text-3); border: 1px solid var(--line-2); border-radius: 999px; padding: 4px 10px; }
.invite { margin-top: 14px; background: var(--card); border-radius: 18px; padding: 16px; border: 1px solid var(--line); }
.invite label { display: block; font-weight: 600; font-size: 16px; margin-bottom: 10px; }
.pick.js .invite { display: none; }
.pick.js.canva .invite { display: block; animation: rise .25s var(--ease); }
.dock { position: sticky; bottom: 0; z-index: 10; margin: 14px -20px 0; padding: 16px 20px calc(14px + env(safe-area-inset-bottom));
  background: linear-gradient(180deg, rgba(25, 25, 20, 0), var(--bg) 30%); }
.dock .hint { text-align: center; }

/* ---------- Nút viên thuốc ---------- */
.btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 0 24px; border: 0; border-radius: 999px;
  background: var(--cream); color: var(--ink); font: 600 17px/1.2 var(--f); letter-spacing: -.01em; text-decoration: none; text-align: center; cursor: pointer;
  transition: transform .12s, background .15s, opacity .15s; }
.btn:hover { background: #fff; }
.btn:active { transform: scale(.98); }
.btn[disabled], .btn.dis { background: var(--card-2); color: var(--text-3); cursor: default; }
.btn.ghost { background: transparent; color: var(--cream); box-shadow: inset 0 0 0 1.5px var(--line-2); }
.btn.ghost:hover { box-shadow: inset 0 0 0 1.5px var(--cream); }
.btn.dark { background: var(--ink); color: var(--cream); }
.btn.sm { display: inline-flex; width: auto; min-height: 44px; padding: 0 18px; font-size: 15px; }
.chip-btn { flex: none; border: 0; border-radius: 999px; padding: 8px 14px; min-height: 36px; background: var(--cream); color: var(--ink); font: 600 13px var(--f); cursor: pointer; transition: background .15s, color .15s; }
.chip-btn.ok { background: var(--mint); color: var(--ink); }
.link { border: 0; background: none; padding: 4px 2px; color: var(--gold); font: 500 inherit/inherit var(--f); font-size: inherit; cursor: pointer; }
.link[disabled] { color: var(--text-3); cursor: default; }
input[type=email], input[type=tel], input[type=text], input:not([type]) {
  width: 100%; height: 54px; border: 1.5px solid var(--line-2); border-radius: 14px; background: var(--bg-2); padding: 0 16px; color: var(--text);
  font: 500 17px var(--f); outline: none; transition: border-color .15s; }
input::placeholder { color: var(--text-3); }
input:focus { border-color: var(--gold); }
input.need { border-color: var(--red); }
.check { display: flex; gap: 12px; align-items: flex-start; margin: 16px 0; font-size: 13px; line-height: 1.45; color: var(--text-2); cursor: pointer; text-align: left; }
.check input { flex: none; width: 22px; height: 22px; margin: 0; accent-color: var(--gold); }
.check a { color: var(--gold); }
.check.need { color: var(--red); }
.msg { font-size: 15px; margin-top: 12px; text-align: center; }
.msg:empty { display: none; }
.msg.err { color: var(--red); background: var(--red-50); border-radius: 14px; padding: 10px 14px; }
.msg.ok { color: var(--mint); }
.hello { font-size: 13px; color: var(--text-3); text-align: center; }
.hello b { color: var(--text-2); }
.contact-tiem { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border-radius: 18px; background: var(--card);
  text-decoration: none; font-size: 15px; color: var(--text-2); }
.contact-tiem b { color: var(--gold); font-weight: 600; }
.contact-tiem b::after { content: ' ›'; }

/* ---------- Bảng giữ chỗ (trượt từ đáy, kiểu bảng của iOS) ---------- */
.sheet-wrap { position: fixed; inset: 0; margin: 0; z-index: 50; display: flex; align-items: flex-end; justify-content: center; }
.sheet-dim { position: absolute; inset: 0; background: rgba(0, 0, 0, .6); opacity: 0; transition: opacity .25s; }
.sheet { position: relative; width: 100%; max-width: 480px; max-height: 92dvh; overflow-y: auto; background: #23231d; border-radius: 28px 28px 0 0; text-align: center;
  padding: 10px 22px calc(26px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line-2); transform: translateY(100%); transition: transform .35s var(--ease); }
.sheet-wrap.open .sheet-dim { opacity: 1; }
/* Đang mở bàn phím (app.js fitSheet): khung = vùng nhìn thấy; bảng sát bàn phím, gọn lại, cuộn trong bảng. */
.sheet-wrap.kb .sheet { max-height: 100%; padding-top: 18px; padding-bottom: 14px; }
.sheet-wrap.kb .pick-sum, .sheet-wrap.kb .grab { display: none; }
.sheet-wrap.kb .sheet h2 { font-size: 22px; padding: 0 34px; }
.sheet-wrap.kb .sheet .sub { margin: 6px auto 12px; font-size: 14px; }
.sheet-wrap.kb .otp i { height: 50px; }
.sheet-wrap.open .sheet { transform: none; }
.grab { display: block; width: 38px; height: 5px; border-radius: 5px; background: var(--line-2); margin: 0 auto 14px; }
.sheet-x { position: absolute; top: 14px; right: 14px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: var(--card-2); color: var(--text-2); font-size: 13px; cursor: pointer; }
.sheet h2 { font-size: 26px; letter-spacing: -.03em; }
.sheet .sub { margin: 8px auto 18px; font-size: 15px; max-width: 320px; }
.sheet .btn { margin-top: 6px; }
.pick-sum { display: inline-flex; align-items: center; gap: 10px; background: var(--card-2); border-radius: 999px; padding: 6px 16px 6px 6px; margin: 4px 0 18px; font-size: 14px; color: var(--text-2); }
.pick-sum:empty { display: none; }
.pick-sum b { color: var(--text); }
.pick-sum .ic { width: 30px; height: 30px; border-radius: 50%; }
.pick-sum .ic svg, .pick-sum .ic img { width: 17px; height: 17px; }
.sheet.js .pane:not(.now) { display: none; }
.sheet.js .pane.now { animation: rise .25s var(--ease); }
.otp { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); gap: 8px; margin: 4px 0 12px; }
.otp input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; opacity: 0; border: 0; padding: 0; font-size: 16px; caret-color: transparent; cursor: text; }
.otp i { display: grid; place-items: center; height: 58px; border-radius: 14px; background: var(--bg-2); border: 1.5px solid var(--line); font: 600 26px var(--f); font-style: normal; color: var(--text); transition: border-color .15s; }
.otp i.f { border-color: var(--line-2); }
.otp.focus i.c { border-color: var(--gold); }
.otp.focus i.c:empty::after { content: ''; width: 2px; height: 26px; background: var(--gold); animation: blink 1s steps(1) infinite; }
.otp.bad i { border-color: var(--red); animation: shake .3s; }
@keyframes blink { 50% { opacity: 0; } }
@keyframes shake { 25% { transform: translateX(-4px); } 75% { transform: translateX(4px); } }
.meta { display: flex; justify-content: space-between; align-items: center; font-size: 13px; color: var(--text-3); margin-bottom: 14px; }

/* ---------- Thẻ "đang có vé" ---------- */
.mini-ticket { display: flex; align-items: center; gap: 14px; padding: 14px 18px 14px 14px; border-radius: 20px; background: var(--paper); color: var(--ink); text-decoration: none; }
.mini-ticket span:not(.ic) { display: flex; flex-direction: column; line-height: 1.25; }
.mini-ticket small { color: var(--ink-2); font-size: 13px; }
.mini-ticket b { font-size: 18px; }
.mini-ticket em { margin-left: auto; font-style: normal; font-weight: 600; color: var(--gold-2); font-size: 15px; }

/* ---------- Chưa ở quán: điện thoại chạm thẻ ---------- */
.tap, .state, .end { text-align: center; padding: 24px 0 8px; }
.tap .sub, .state .sub, .end .sub { max-width: 340px; margin-left: auto; margin-right: auto; }
.tap .eyebrow { margin-bottom: 8px; }
.scene { position: relative; width: 200px; height: 190px; margin: 0 auto 26px; }
.nfc-card { position: absolute; left: 30px; bottom: 18px; width: 140px; height: 88px; border-radius: 14px; background: #1c1b17; border: 1px solid rgba(212, 176, 106, .55);
  padding: 10px 14px; transform: perspective(400px) rotateX(55deg); box-shadow: 0 24px 40px -12px rgba(0, 0, 0, .8); }
.nfc-card .tag { width: 20px; height: 34px; }
.nfc-phone { position: absolute; left: 68px; top: 0; width: 64px; height: 116px; border-radius: 15px; background: #0e0e0b; border: 2px solid rgba(240, 235, 224, .55); animation: tapit 2.4s ease-in-out infinite; }
.wave { position: absolute; left: 50%; bottom: 52px; width: 30px; height: 30px; margin-left: -15px; border-radius: 50%; border: 1.5px solid var(--gold); opacity: 0; animation: wave 2.4s ease-out infinite; }
.wave.w2 { animation-delay: .25s; }
@keyframes tapit { 0%, 100% { transform: translateY(0); } 45%, 62% { transform: translateY(32px); } }
@keyframes wave { 0%, 45% { transform: scale(.4); opacity: 0; } 55% { opacity: 1; } 100% { transform: scale(3.2); opacity: 0; } }

/* ---------- Trang chủ: 3 bước ---------- */
.how { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; }
.how li { display: flex; gap: 14px; align-items: center; background: var(--card); border-radius: 18px; padding: 14px 16px; }
.how li > b { flex: none; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(212, 176, 106, .5); color: var(--gold); font-size: 14px; }
.how p { font-size: 16px; font-weight: 600; line-height: 1.3; }
.how small { display: block; color: var(--text-2); font-size: 14px; font-weight: 400; margin-top: 2px; }

/* ---------- Vé: giấy kem nổi trên nền đêm ---------- */
.ticket { position: relative; background: var(--paper); color: var(--ink); border-radius: 22px; padding: 14px 16px 12px; margin-top: 10px; overflow: hidden;
  box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .8); animation: pop .7s cubic-bezier(.2, 1.3, .4, 1) both;
  --rx: 0deg; --ry: 0deg; --mx: 50%; transform: perspective(900px) rotateX(var(--rx)) rotateY(var(--ry)); transition: transform .4s var(--ease); }
.ticket.held { transition: transform .08s linear; }
/* ánh giấy bóng chạy theo ngón tay */
.ticket::before { content: ''; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; opacity: 0; transition: opacity .3s;
  background: radial-gradient(60% 80% at var(--mx) 0%, rgba(255, 255, 255, .7), transparent 60%); mix-blend-mode: soft-light; }
.ticket.held::before { opacity: 1; }
@keyframes pop { from { opacity: 0; transform: translateY(24px) rotate(2deg) scale(.95); } }
.ticket h1 { font-size: 22px; }
.tk-h { display: flex; align-items: center; gap: 14px; }
.tk-h small { display: block; color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.ring { --p: 1; flex: none; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: conic-gradient(var(--gold-2) calc(var(--p) * 1turn), rgba(28, 27, 23, .1) 0); }
.ring .ic { width: 52px; height: 52px; border-radius: 50%; background: #fff; }
.ticket .ring { width: 50px; height: 50px; }
.ticket .ring .ic { width: 42px; height: 42px; }
.tk-cut { position: relative; border-top: 2px dashed rgba(28, 27, 23, .16); margin: 12px -16px 8px; }
.tk-cut::before, .tk-cut::after { content: ''; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--bg); }
.tk-cut::before { left: -11px; } .tk-cut::after { right: -11px; }
.tk-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 13px; color: var(--ink-2); padding: 1px 0; }
.tk-row b { color: var(--ink); font-size: 15px; font-variant-numeric: tabular-nums; }
.tk-warn { margin-top: 12px; font-size: 14px; background: rgba(229, 72, 77, .12); color: #a1272b; border-radius: 12px; padding: 10px 12px; }
.confetti { position: absolute; top: 0; width: 7px; height: 7px; border-radius: 2px; pointer-events: none; animation: fall 1.4s ease-out both; }
@keyframes fall { from { transform: translateY(-10px) rotate(0); opacity: 1; } to { transform: translateY(110px) rotate(240deg); opacity: 0; } }

/* ---------- Checklist đăng nhập ---------- */
.steps { background: var(--card); border-radius: 22px; padding: 18px 18px 8px; }
.steps h2 { font-size: 19px; margin-bottom: 6px; }
.steps ol { list-style: none; margin: 0; padding: 0; }
.st { border-bottom: 1px solid var(--line); padding: 12px 0; }
.st:last-child { border-bottom: 0; }
.st-h { display: flex; align-items: center; gap: 12px; width: 100%; border: 0; background: none; padding: 2px 0; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.n { flex: none; display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; border: 1.5px solid var(--line-2); color: var(--text-2); font-size: 13px; font-weight: 700; transition: all .2s; }
.tt { font-weight: 600; font-size: 16px; line-height: 1.3; }
.st-b { padding: 10px 0 4px 40px; font-size: 15px; color: var(--text-2); }
.st-b b { color: var(--text); }
.st-b > * + * { margin-top: 10px; }
.st.d .n { background: var(--mint); border-color: var(--mint); color: var(--ink); font-size: 0; }
.st.d .n::before { content: '✓'; font-size: 14px; font-weight: 800; }
.st.d .tt { color: var(--text-3); }
.st.now .n { background: var(--gold); border-color: var(--gold); color: var(--ink); box-shadow: 0 0 0 5px var(--gold-50); }
.steps.waiting .st.now .n { background: none; border-color: var(--line-2); box-shadow: none; }
/* Từng màn (có JS): 1 bước/màn, thanh tiến độ, nút Quay lại / Tiếp */
.pg-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
.pager.js .pg-top h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-2); margin: 0; }
.pg-count { font-size: 13px; font-weight: 600; color: var(--gold); font-variant-numeric: tabular-nums; }
.pg-bar { display: flex; gap: 6px; width: 100%; margin: 6px 0 0; }
.pg-bar button { flex: 1; height: 18px; border: 0; padding: 0; background: none; cursor: pointer; position: relative; }
.pg-bar button::before { content: ''; position: absolute; left: 0; right: 0; top: 7px; height: 4px; border-radius: 2px; background: var(--line-2); transition: background .3s var(--ease); }
.pg-bar button.d::before { background: var(--mint); }
.pg-bar button.now::before { background: var(--gold); }
/* gọn để vé + bước đang làm + nút Tiếp nằm trong 1 màn điện thoại, khỏi kéo */
.pager.js { padding: 14px 16px 4px; }
.pager.js .st { border: 0; padding: 10px 0 4px; min-height: 172px; }
.pager.js .st-h { gap: 10px; cursor: default; }
.pager.js .st-h .n { width: 30px; height: 30px; font-size: 14px; }
.pager.js .st-h .tt { font-size: 20px; font-weight: 700; letter-spacing: -.02em; line-height: 1.2; }
.pager.js .st-b { padding: 12px 0 2px; font-size: 15px; }
.pager.js .st-b > * + * { margin-top: 8px; }
.pager.js .st-b .chip-btn { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.pager.js .cp { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 8px 6px 8px 12px; }
.pager.js .cp small { grid-column: 1 / -1; width: auto; font-size: 11px; }
.pager.js .cp code { font-size: 14px; overflow-wrap: break-word; } /* ưu tiên xuống dòng ở <wbr> trước @, chỉ bẻ giữa chữ khi buộc phải */
.pg-nav { display: flex; gap: 10px; padding: 6px 0 12px; }
.pg-nav .btn { min-height: 46px; padding: 0 16px; font-size: 15px; }
.pg-nav .btn.ghost { flex: 0 0 auto; width: auto; }
.pg-nav .btn.ghost[disabled] { opacity: .35; background: transparent; color: var(--cream); }
.pg-nav .btn[data-pg-next] { flex: 1; }
.pager.at-end .pg-nav { display: none; }
/* màn Xong: vòng ✓ bạc hà tự vẽ + toả sáng, nút mở món, link xem lại */
.pg-done { position: relative; text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding-bottom: 12px !important; }
.pg-done h3 { font-size: 24px; margin-top: 4px; }
.pg-done .sub { margin-top: 0; font-size: 15px; }
.pg-done .btn { margin-top: 8px; min-height: 48px; }
.pg-done .link { font-size: 14px; color: var(--text-2); }
/* màn Xong có "Tài khoản đã nhận": vòng ✓ nhỏ lại để email + mật khẩu vẫn vừa 1 màn điện thoại */
.pg-done.has-acc { gap: 6px; }
.pg-done.has-acc .done-ok { width: 44px; height: 44px; }
.pg-done.has-acc h3 { font-size: 20px; margin-top: 0; }
.pg-acc { width: 100%; text-align: left; display: grid; gap: 8px; }
.pg-acc .cp + .cp { margin-top: 0; }
.pg-acc-h { margin: 0; font-size: 12px; letter-spacing: .04em; color: var(--text-3); }
.pg-acc-ws { margin: 0; font-size: 14px; color: var(--text-2); }
.pg-acc .link { justify-self: start; font-size: 14px; color: var(--gold, var(--text-2)); }
.pg-done.has-acc .btn { margin-top: 4px; }
.done-ok { width: 64px; height: 64px; border-radius: 50%; overflow: visible; animation: ok-glow 1.6s .7s ease-out both; }
.done-ok circle { fill: rgba(95, 211, 162, .14); stroke: var(--mint); stroke-width: 2.5; stroke-dasharray: 158; animation: ok-draw .6s var(--ease) both; }
.done-ok path { fill: none; stroke: var(--mint); stroke-width: 4; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 36; animation: ok-draw .4s .45s var(--ease) both; }
@keyframes ok-draw { from { stroke-dashoffset: var(--len, 158); } to { stroke-dashoffset: 0; } }
.done-ok path { --len: 36; }
@keyframes ok-glow { 0% { box-shadow: 0 0 0 0 rgba(95, 211, 162, .45); } 100% { box-shadow: 0 0 0 22px rgba(95, 211, 162, 0); } }
.pg-done .confetti { top: 30px; }
.st.in-r { animation: pg-in-r .38s var(--ease) both; }
.st.in-l { animation: pg-in-l .38s var(--ease) both; }
@keyframes pg-in-r { from { opacity: 0; transform: translateX(36px); } to { opacity: 1; transform: none; } }
@keyframes pg-in-l { from { opacity: 0; transform: translateX(-36px); } to { opacity: 1; transform: none; } }
.cp { display: flex; align-items: center; gap: 10px; background: var(--bg-2); border-radius: 14px; padding: 6px 6px 6px 14px; }
.cp + .cp { margin-top: 8px; }
.cp small { flex: none; width: 66px; font-size: 12px; color: var(--text-3); }
.cp code { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: var(--text); overflow-wrap: anywhere; }
.code-box .hint { margin-top: 8px; }
.code-wait { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 15px; margin-top: 12px; color: var(--text-2); }
.code-ready { margin-top: 12px; background: var(--bg-2); border-radius: 16px; padding: 14px; text-align: center; }
.code-digits { font: 700 36px/1.1 var(--mono); letter-spacing: .18em; color: var(--text); margin-bottom: 10px; }
.voucher { display: block; font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.voucher span { display: block; margin-bottom: 6px; }
.spin { display: inline-block; width: 16px; height: 16px; border: 2px solid var(--line-2); border-top-color: var(--gold); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Luật gập + Zalo + web Tiệm ---------- */
.fold { background: var(--card); border-radius: 18px; padding: 0 18px; }
.fold summary { display: flex; justify-content: space-between; align-items: center; min-height: 54px; font-weight: 600; font-size: 16px; cursor: pointer; list-style: none; }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: '›'; color: var(--text-3); font-size: 22px; transition: transform .2s; }
.fold[open] summary::after { transform: rotate(90deg); }
.fold ul { margin: 0 0 10px; padding-left: 20px; font-size: 15px; color: var(--text-2); }
.fold li { margin: 5px 0; }
.fold > p { font-size: 14px; color: var(--text-3); margin: 0 0 12px; }
.zalo-row { display: flex; gap: 10px; }
.zbtn { flex: 1; display: flex; flex-direction: column; align-items: center; padding: 14px; border-radius: 18px; background: var(--card); text-decoration: none; }
.zbtn b { font-size: 16px; }
.zbtn small { font-size: 12px; color: var(--text-3); }
.tiem-web { display: block; padding: 20px; border-radius: 22px; text-decoration: none; text-align: center;
  background: radial-gradient(120% 120% at 50% 0%, rgba(212, 176, 106, .22), transparent 70%), var(--card); border: 1px solid rgba(212, 176, 106, .25); }
.tiem-web b { display: block; font-size: 20px; letter-spacing: -.02em; color: var(--gold); }
.tiem-web span { font-size: 14px; color: var(--text-2); }

/* ---------- Thẻ thương hiệu Tiệm (thay nút "Tiệm Bản Quyền là ai?") ---------- */
.btn.gold { background: linear-gradient(180deg, #e2c27e, #c9a35a); color: #1c1b17; }
.btn.gold:hover { background: linear-gradient(180deg, #ebcd8c, #d4b06a); }
.serif { font-family: var(--serif); font-weight: 500; letter-spacing: -.01em; }
.tiem { position: relative; overflow: hidden; margin-top: 28px; padding: 26px 22px 22px; border-radius: 26px; text-align: left;
  background: radial-gradient(90% 70% at 15% 0%, rgba(212, 176, 106, .2), transparent 65%), linear-gradient(180deg, #26251f, #1d1c18);
  border: 1px solid rgba(212, 176, 106, .28); box-shadow: 0 30px 60px -30px rgba(0, 0, 0, .9); }
.tiem::after { content: '✦'; position: absolute; top: 18px; right: 20px; color: var(--gold); opacity: .7; font-size: 16px; animation: twinkle 3s ease-in-out infinite; }
@keyframes twinkle { 50% { opacity: .2; transform: scale(.7) rotate(20deg); } }
.tiem-h { display: flex; align-items: center; gap: 12px; }
.tiem-h .tag { width: 26px; height: 44px; flex: none; }
.eyebrow-s { font: 500 11px/1.2 var(--serif); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); }
.tiem h2 { font-size: 31px; line-height: 1.08; margin-top: 16px; color: var(--text); }
.tiem h2 em { font-style: normal; color: var(--gold); }
.tiem-p { color: var(--text-2); font-size: 15px; margin-top: 12px; }
.peek-cap { margin-top: 18px; font-size: 13px; color: var(--gold); }
.peek { list-style: none; margin: 8px 0 20px; padding: 2px 16px; border-radius: 16px; background: rgba(0, 0, 0, .22); border: 1px solid var(--line); transform: rotate(-.8deg); }
.peek li { display: flex; align-items: baseline; gap: 8px; padding: 11px 0; border-bottom: 1px solid var(--line); font-family: var(--serif); font-size: 18px; }
.peek li:last-child { border-bottom: 0; }
.peek i { flex: 1; border-bottom: 1px dotted rgba(240, 235, 224, .22); transform: translateY(-4px); }
.peek small { font-size: 13px; color: var(--text-3); }
.peek b { color: var(--gold); font-weight: 500; font-variant-numeric: tabular-nums; }
.tiem-a { display: grid; grid-template-columns: 1.4fr 1fr; gap: 10px; }
.tiem-a .btn { min-height: 52px; font-size: 16px; padding: 0 14px; }

/* ---------- Hết ca / trạng thái ---------- */
.cup, .state-ic { font-size: 60px; line-height: 1; margin-bottom: 16px; animation: rise .5s var(--ease) both; }
.end h1 { font-size: clamp(40px, 12vw, 52px); }
.stat { display: flex; gap: 10px; margin: 28px 0 20px; }
.stat div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; background: var(--card); border-radius: 18px; padding: 14px; }
.stat b { font-size: 26px; letter-spacing: -.03em; font-variant-numeric: tabular-nums; line-height: 44px; }
.stat small { font-size: 13px; color: var(--text-2); }
.offer { background: var(--paper); color: var(--ink); border-radius: 24px; padding: 22px; text-align: center; }
.offer b { display: block; font-size: 22px; letter-spacing: -.02em; }
.offer p { font-size: 15px; color: var(--ink-2); margin: 6px 0 16px; }
.end .hint { margin-top: 18px; }
.state .btn, .state > p + p { margin-top: 22px; }

/* ---------- Về chúng tôi / chính sách ---------- */
.panel, .prose { background: var(--card); border-radius: 22px; padding: 20px; }
.panel h2 { margin-bottom: 12px; }
.panel p { color: var(--text-2); }
.panel p + p { margin-top: 10px; }
.facts { margin: 0; padding-left: 18px; font-size: 15px; color: var(--text-2); }
.facts b { color: var(--text); }
.facts li { margin: 7px 0; }
.actions { display: grid; gap: 10px; }
.prose h1 { font-size: 28px; margin-bottom: 8px; }
.prose h2 { font-size: 18px; margin: 22px 0 8px; }
.prose p, .prose li { font-size: 15px; color: var(--text-2); }
.prose b { color: var(--text); }
.prose a { color: var(--gold); }
.prose p { margin: 8px 0; }
.prose ul { padding-left: 20px; margin: 8px 0; }
.prose .muted { color: var(--text-3); font-size: 13px; }

/* ===================== Sống động (chuyển động có mục đích — Apple HIG Motion, NN/g) =====================
 * 1 chuyển trang mượt  2 hiện dần khi cuộn tới (biết nội dung từ đâu tới)  3 tiêu đề lên từng chữ  4 bụi vàng trôi chậm
 * 5 logo lơ lửng  6 ánh vàng quét qua nút chính (gợi chỗ bấm)  7 vé nghiêng theo ngón tay. Máy bật "giảm chuyển động" → chỉ còn mờ dần. */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s var(--ease) both vt-out; }
::view-transition-new(root) { animation: .32s var(--ease) both vt-in; }
@keyframes vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes vt-in { from { opacity: 0; transform: translateY(12px); } }

.rv { opacity: 0; transform: translateY(22px) scale(.98); transition: opacity .7s var(--ease), transform .7s var(--ease); transition-delay: var(--d, 0s); }
.rv.in { opacity: 1; transform: none; }
.w { display: inline-block; opacity: 0; transform: translateY(.45em) rotate(2deg); filter: blur(4px); animation: word .8s var(--ease) forwards; animation-delay: var(--d, 0s); }
@keyframes word { to { opacity: 1; transform: none; filter: none; } }

/* bụi nền đứng yên: trôi background-position = vẽ lại cả màn hình mỗi khung (nặng nhất trên iPhone DPR 3) */

.logos span { animation: rise .5s var(--ease) both, bob 4.2s ease-in-out infinite; }
.logos span:nth-child(2) { animation-delay: .05s, .6s; } .logos span:nth-child(3) { animation-delay: .1s, 1.2s; } .logos span:nth-child(4) { animation-delay: .15s, 1.8s; }
.logos span:nth-child(5) { animation-delay: .2s, 2.4s; } .logos span:nth-child(6) { animation-delay: .25s, 3s; }
@keyframes bob { 50% { transform: translateY(-5px); } }

.btn:not(.ghost):not([disabled]) { position: relative; overflow: hidden; isolation: isolate; }
.btn:not(.ghost):not([disabled])::after { content: ''; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%); transform: translateX(-120%); animation: sheen 4.5s 1.2s ease-in-out infinite; }
.btn.dark::after { background: linear-gradient(105deg, transparent 35%, rgba(212, 176, 106, .35) 50%, transparent 65%) !important; }
@keyframes sheen { 0%, 70% { transform: translateX(-120%); } 100% { transform: translateX(120%); } }
.tile.pop { animation: tap-pop .35s cubic-bezier(.3, 1.6, .5, 1); }
@keyframes tap-pop { 40% { transform: scale(1.025); } }

/* thẻ Tiệm: viền ánh vàng chạy quanh */
.tiem::before { content: ''; position: absolute; inset: -1px; border-radius: inherit; padding: 1px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 70%, rgba(226, 194, 126, .9) 80%, transparent 90%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 6s linear infinite; }
@property --a { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes spin-a { to { --a: 360deg; } }

/* ---------- Collab: kiểu banner "Bamos × TBQ Space — COLLAB", nằm thẳng trên nền đêm (cùng màu trang), chữ / logo sáng cho tương phản ---------- */
.collab { max-width: 380px; margin: 0 auto; padding: 2px 4px 0; color: var(--text); }
.cb-row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 4px; }
.cb-side { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; text-align: center; }
.cb-side.cafe img { width: 100%; max-width: 100px; height: auto; display: block; }
.cb-side.cafe figcaption { font: 500 11px/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: #cfa982; }
.cb-mono { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--cream); font: 600 26px/1 var(--serif); color: var(--cream); }
.cb-side.tbq { flex-direction: row; gap: 7px; justify-content: center; }
.cb-side.tbq .tag { width: 24px; height: auto; flex: none; }
.cb-side.tbq figcaption { display: flex; flex-direction: column; align-items: flex-start; text-align: left; }
.cb-side.tbq b { font: 500 17px/1.05 var(--serif); letter-spacing: -.01em; white-space: nowrap; color: var(--cream); }
.cb-side.tbq small { margin-top: 3px; font: 500 7.5px/1.2 var(--serif); letter-spacing: .14em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.cb-x svg { display: block; width: 76px; height: 76px; filter: drop-shadow(0 0 10px rgba(98, 184, 204, .18)); }
.cb-x .hole { fill: var(--bg); }
.cb-x .bean path { stroke: var(--bg); stroke-width: 1.3; stroke-linecap: round; }
.cb-word { margin-top: 0; text-align: center; font: 700 19px/1 var(--serif); text-transform: uppercase; letter-spacing: .14em; padding-left: .14em; color: var(--cream); }
.cb-free { margin-top: 6px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--gold); }
.intro .collab + h1 { margin-top: 18px; }
/* mở trang: dấu X xoay vào như chong chóng, hạt cà phê bật, 2 bên trượt vào giữa, chữ COLLAB hiện sau cùng */
.collab .cb-x svg { animation: cb-spin .8s .1s cubic-bezier(.2, .9, .25, 1.15) both; }
.collab .bean { transform-box: fill-box; transform-origin: center; animation: cb-pop .45s .75s cubic-bezier(.3, 1.6, .5, 1) both; }
.collab .cb-side.cafe { animation: cb-in-l .6s .2s var(--ease) both; }
.collab .cb-side.tbq { animation: cb-in-r .6s .2s var(--ease) both; }
.collab .cb-word { animation: rise .5s .7s var(--ease) both; }
@keyframes cb-spin { from { opacity: 0; transform: rotate(-120deg) scale(.3); } to { opacity: 1; transform: none; } }
@keyframes cb-pop { from { transform: scale(0); } to { transform: scale(1); } }
@keyframes cb-in-l { from { opacity: 0; transform: translateX(-20px); } to { opacity: 1; transform: none; } }
@keyframes cb-in-r { from { opacity: 0; transform: translateX(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; }
  .rv { transform: none; transition: opacity .4s ease; }
  .w { transform: none; filter: none; }
  .btn::after, .tiem::before { display: none; }
  @view-transition { navigation: none; }
}

/* ===================== Cảnh quán (views/quan-canh.js) — O'renchi & Bamos =====================
 * Chủ yêu cầu 08/10/2026: thiết kế lại trang theo từng quán, tham khảo chuyển động trang O'renchi trên QS:
 * hiện lần lượt ~0,1 giây (fade / rise / pop / drop / trượt), rồi lặp nhẹ (lấp lánh / thở / đung đưa / trôi); thẻ kính viền sáng.
 * Áo theo quán áp cho MỌI trang khách của quán đó (trang quán, trang vé, trang chủ): body.q.q-<quán>.
 * Màu chính của Tiệm (vàng TBQ) vẫn giữ ở thanh trên cùng. */
body.q-orenchi {
  --bg: #111511; --bg-2: rgba(8, 12, 9, .55); --card: #1b211c; --card-2: #232b24;
  --text: #f3ead8; --text-2: rgba(243, 234, 216, .68); --text-3: rgba(243, 234, 216, .44); --cream: #f3ead8; --paper: #f7f0e1;
  --line: rgba(169, 221, 230, .12); --line-2: rgba(243, 234, 216, .2);
  --gold: #f0b664; --gold-2: #c98a3e; --gold-50: rgba(240, 182, 100, .16); --mint: #7cc0cf;
  --q-g1: rgba(38, 44, 38, .7); --q-g2: rgba(18, 22, 18, .78); --q-edge: rgba(169, 221, 230, .5); --q-b1: #f6c983; --q-b2: #eaa952;
  --q-leaf: #2f5e40; --q-leaf-2: #22452f; --q-a: #7cc0cf; --q-a2: #a9dde6;
  background: radial-gradient(90% 50% at 0% 0%, rgba(240, 182, 100, .2), transparent 60%), radial-gradient(70% 40% at 100% 55%, rgba(74, 143, 159, .18), transparent 70%),
    linear-gradient(180deg, #171b17, #101310 60%, #0c0e0c); }
body.q-bamos {
  --bg: #131719; --bg-2: rgba(6, 10, 12, .55); --card: #1b2124; --card-2: #232b2f;
  --text: #f4ecdf; --text-2: rgba(244, 236, 223, .68); --text-3: rgba(244, 236, 223, .44); --cream: #f4ecdf; --paper: #f6efe5;
  --line: rgba(108, 196, 214, .13); --line-2: rgba(244, 236, 223, .2);
  --gold: #e0ab7c; --gold-2: #b07a4c; --gold-50: rgba(224, 171, 124, .16); --mint: #6cc4d6;
  --q-g1: rgba(32, 40, 44, .7); --q-g2: rgba(16, 20, 23, .8); --q-edge: rgba(224, 171, 124, .5); --q-b1: #ecc099; --q-b2: #d39a67;
  --q-leaf: #2d5a48; --q-leaf-2: #234538; --q-a: #6cc4d6; --q-a2: #a6e0ea;
  background: radial-gradient(80% 45% at 100% 0%, rgba(108, 196, 214, .16), transparent 60%), radial-gradient(70% 40% at 0% 80%, rgba(201, 148, 103, .14), transparent 70%),
    linear-gradient(180deg, #161b1e, #121618 60%, #0e1113); }
body.q::before { opacity: .5;
  background-image: radial-gradient(color-mix(in srgb, var(--gold) 70%, transparent) .7px, transparent 1px), radial-gradient(color-mix(in srgb, var(--q-a2) 55%, transparent) .6px, transparent 1px); }
.q .top { background: color-mix(in srgb, var(--bg) 74%, transparent); }
.q .wordmark small { color: #d4b06a; }
.q .top-zalo { color: #d4b06a; border-color: rgba(212, 176, 106, .5); }
.q .page { position: relative; z-index: 1; }
.wrap > .qbg + * { margin-top: 0; }

/* ---------- Nền động cố định ---------- */
.qbg { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
/* Quầng chỉ nhấp nháy độ sáng (opacity), không phóng to: scale lớp blur 300px bắt máy vẽ lại blur mỗi khung → tụt còn 30 khung/giây (đo 09/10). */
.qbg .glow { position: absolute; border-radius: 50%; filter: blur(46px); will-change: opacity; animation: q-fade 1.2s both, q-glow 6s 1.2s ease-in-out infinite; }
.qbg svg { position: absolute; overflow: visible; }
.qbg .sway, .qbg .moon, .qh .sway { transform-box: fill-box; transform-origin: 50% 100%; }
.q-orenchi .g1 { left: -140px; top: -60px; width: 340px; height: 300px; background: rgba(255, 180, 94, .42); }
.q-orenchi .g2 { right: -120px; top: 44%; width: 280px; height: 240px; background: rgba(74, 143, 159, .3); animation-delay: 0s, 2.4s; }
.q-orenchi .g3 { left: -80px; bottom: -80px; width: 300px; height: 260px; background: rgba(47, 94, 64, .38); animation-delay: 0s, 3.6s; }
.leafy .leaf { fill: var(--q-leaf); }
.leafy .rib { fill: none; stroke: var(--q-leaf-2); stroke-width: 2.2; stroke-linecap: round; }
.leafy.l2 .rib, .leafy.l3 .rib { stroke: var(--q-leaf); }
.leafy.l1 { left: -74px; bottom: -40px; width: 230px; transform: rotate(32deg); animation: q-in-l 1s .5s var(--ease) both; }
.leafy.l2 { right: -58px; top: 46%; width: 150px; transform: rotate(-142deg); animation: q-in-r 1s .7s var(--ease) both; }
.leafy.l2 .leaf, .leafy.l3 .leaf { fill: var(--q-leaf-2); }
.leafy.l3 { left: -46px; top: 22%; width: 112px; transform: rotate(-40deg); opacity: .85; animation: q-in-l 1s .9s var(--ease) both; }
.qbg .sway { animation: q-sway 6.5s ease-in-out infinite alternate; }
.leafy.l2 .sway { animation-duration: 7.5s; animation-delay: -2s; }
.leafy.l3 .sway { animation-duration: 5.5s; animation-delay: -4s; }

.q-bamos .g1 { right: -100px; top: -40px; width: 300px; height: 260px; background: rgba(108, 196, 214, .26); }
.q-bamos .g2 { left: -120px; bottom: -60px; width: 320px; height: 260px; background: rgba(201, 148, 103, .26); animation-delay: 0s, 3s; }
.qbg .sky { left: 0; top: 0; width: 100%; height: 220px; }
.moon { animation: q-pop .9s .3s cubic-bezier(.3, 1.5, .5, 1) both; }
.moon-halo { fill: rgba(166, 224, 234, .16); filter: blur(7px); transform-box: fill-box; transform-origin: center; animation: q-glow 5s 1.2s ease-in-out infinite; }
.moon-body { fill: #f4ecdf; }
.star { fill: #f4ecdf; transform-box: fill-box; transform-origin: center; animation: q-tw 3.2s ease-in-out infinite; }
.star.s1 { animation-delay: 1.1s; fill: var(--q-a2); } .star.s2 { animation-delay: 2.2s; fill: var(--gold); }
.branch { width: 190px; }
.branch.b1 { left: -44px; bottom: -40px; width: 150px; opacity: .7; animation: q-in-l 1s .6s var(--ease) both; }
.twig { fill: none; stroke: #3d5f50; stroke-width: 3.2; stroke-linecap: round; }
.leaf2 { fill: var(--q-leaf); }
.petal { fill: #fff3df; stroke: rgba(243, 194, 91, .35); stroke-width: .6; }
.heart { fill: #f3c25b; }
.fall { top: -40px; width: 24px; opacity: 0; animation: q-fall 15s linear infinite; }
.fall.f1 { left: 16%; animation-delay: 2s; } .fall.f2 { left: 58%; animation-delay: 7s; width: 18px; } .fall.f3 { left: 84%; animation-delay: 11.5s; width: 20px; }

/* ---------- Đầu trang quán (hero) ---------- */
.qh { position: relative; isolation: isolate; text-align: center; padding: 78px 0 4px; }
.qh-bamos { padding-top: 60px; }
.qh-stage { position: absolute; z-index: -1; left: -20px; top: -10px; width: calc(100% + 40px); height: auto; overflow: visible; }
.qh-kicker { font-size: 11px; font-weight: 500; letter-spacing: .62em; padding-left: .62em; text-transform: uppercase; color: var(--q-a2); animation: q-fade .7s .45s both; }
.qh-name { display: block; margin: 2px auto 0; font: italic 600 clamp(48px, 15vw, 60px)/1.05 var(--serif); letter-spacing: -.01em; padding: 0 .08em .06em;
  background: linear-gradient(90deg, var(--q-a2), var(--q-a) 45%, #5fa3b5 70%, var(--q-a2)); -webkit-background-clip: text; background-clip: text; color: transparent;
  filter: drop-shadow(0 6px 18px rgba(0, 0, 0, .7)); animation: q-rise .9s .55s var(--ease) both; }
.qh-name.logo { width: min(200px, 56vw); height: auto; padding: 0; background: none; filter: drop-shadow(0 8px 22px rgba(0, 0, 0, .65)); animation: q-pop .8s .5s cubic-bezier(.3, 1.4, .5, 1) both; }
.qh-sub { margin-top: 6px; font-size: 12px; letter-spacing: .24em; color: var(--text-2); animation: q-fade .7s .7s both; }
.qh-bamos .qh-sub { margin-top: 12px; text-transform: uppercase; font-size: 11px; color: var(--gold); }
.qh-hand { position: absolute; right: -2px; bottom: 30px; transform: rotate(-7deg); text-align: left; font: 600 15px/1.08 'Noteworthy', 'Bradley Hand', 'Segoe Print', 'Chalkboard SE', cursive;
  color: var(--gold); opacity: .92; animation: q-fade .8s 1.1s both; }
.qh-with { display: inline-flex; align-items: center; gap: 8px; margin-top: 18px; animation: q-rise .7s .85s var(--ease) both; }
.qw-x { color: var(--gold); font-size: 12px; display: inline-block; animation: q-spin-in .8s .95s cubic-bezier(.2, .9, .25, 1.2) both; }
.qw-tbq { display: inline-flex; align-items: center; gap: 6px; }
.qw-tbq .tag { width: 13px; height: auto; }
.qw-tbq b { font: 500 16px/1 var(--serif); color: var(--cream); white-space: nowrap; }
.qh-free { margin-top: 8px; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--q-a2); animation: q-fade .7s 1s both; }
.intro .qh + h1 { margin-top: 20px; }
.qh-stage .roof { fill: none; stroke: rgba(243, 234, 216, .5); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 420; animation: q-draw 1.4s .1s var(--ease) both; }
.qh-stage .slats { fill: none; stroke: rgba(243, 234, 216, .09); stroke-width: 1.2; animation: q-fade 1.4s .5s both; }
.strand { transform-box: fill-box; transform-origin: 50% 0; animation: q-drop 1.1s .25s cubic-bezier(.3, 1.35, .5, 1) both; }
.strand .wire { fill: none; stroke: rgba(243, 234, 216, .35); stroke-width: 1; }
.strand .cord { stroke: rgba(243, 234, 216, .45); stroke-width: 1; }
.strand .glass { fill: #ffcf86; animation: q-bulb 2.8s ease-in-out infinite; }
.strand .halo { fill: rgba(255, 180, 94, .26); animation: q-bulb 2.8s ease-in-out infinite; }
.strand .bulb:nth-child(3n) .glass, .strand .bulb:nth-child(3n) .halo { animation-delay: .9s; }
.strand .bulb:nth-child(3n+1) .glass, .strand .bulb:nth-child(3n+1) .halo { animation-delay: 1.8s; }
.spark { fill: var(--q-a2); transform-box: fill-box; transform-origin: center; animation: q-pop .6s 1s cubic-bezier(.3, 1.6, .5, 1) both, q-tw 3s 1.6s ease-in-out infinite; }
.spark.k2 { fill: var(--gold); animation-delay: 1.2s, 2.4s; }
.rays .ray { fill: none; stroke: rgba(224, 171, 124, .42); stroke-width: 1.4; stroke-linecap: round; stroke-dasharray: 90; animation: q-draw-ray .9s var(--ease) both; }
.rays .ray:nth-child(5n+1) { animation-delay: .15s; } .rays .ray:nth-child(5n+2) { animation-delay: .25s; } .rays .ray:nth-child(5n+3) { animation-delay: .35s; }
.rays .ray:nth-child(5n+4) { animation-delay: .45s; } .rays .ray:nth-child(5n) { animation-delay: .55s; }
.rays .ray:nth-child(2n) { stroke: rgba(108, 196, 214, .38); }
.arcs circle { fill: none; stroke: rgba(166, 224, 234, .22); stroke-width: 1; stroke-dasharray: 2 6; }
.arcs { transform-box: view-box; transform-origin: 195px 124px; animation: q-fade 1s .6s both, q-rot 90s linear infinite; }

/* ---------- Dải đầu trang vé ---------- */
.qband { position: relative; height: 62px; margin: -8px -20px 4px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px; }
.qb-deco { position: absolute; left: 0; top: 0; width: 100%; height: 56px; overflow: visible; }
.qb-row { position: relative; display: flex; align-items: center; gap: 10px; animation: q-rise .7s .3s var(--ease) both; }
.qb-name { font: italic 600 26px/1 var(--serif); padding: 0 .06em .04em; background: linear-gradient(90deg, var(--q-a2), var(--q-a) 50%, var(--q-a2)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.qb-name.logo { width: 92px; height: auto; padding: 0; background: none; }
.qband .qw-x { animation-delay: .5s; }

/* ---------- Con dấu quán trên vé ---------- */
.tk-h > div { flex: 1; min-width: 0; }
.tk-stamp { flex: none; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; width: 60px; height: 60px; border-radius: 50%;
  border: 1.6px dashed var(--gold-2); color: var(--gold-2); transform: rotate(-12deg); opacity: .9; animation: q-stamp .55s .75s cubic-bezier(.3, 1.4, .5, 1) both; }
.tk-stamp i { font: italic 600 11px/1 var(--serif); white-space: nowrap; }
.tk-stamp img { width: 46px; height: auto; }
.tk-stamp small { font-size: 7.5px; font-weight: 700; letter-spacing: .22em; padding-left: .22em; }

/* ---------- Thẻ kính viền sáng (như thẻ trên trang O'renchi) ---------- */
.q .steps, .q .fold, .q .zbtn, .q .tile, .q .contact-tiem, .q .how li, .q .panel, .q .invite, .q .tiem {
  background: linear-gradient(165deg, var(--q-g1), var(--q-g2)); -webkit-backdrop-filter: blur(14px) saturate(140%); backdrop-filter: blur(14px) saturate(140%);
  border-color: transparent; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .08), 0 24px 48px -26px rgba(0, 0, 0, .75); }
.q .steps, .q .fold, .q .zbtn, .q .tile, .q .contact-tiem, .q .how li, .q .panel, .q .invite { position: relative; isolation: isolate; }
.q .steps::before, .q .fold::before, .q .zbtn::before, .q .tile::before, .q .contact-tiem::before, .q .how li::before, .q .panel::before, .q .invite::before {
  content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.1px; pointer-events: none;
  background: linear-gradient(135deg, rgba(255, 255, 255, .5), rgba(255, 255, 255, .06) 38%, var(--q-edge) 72%, rgba(255, 255, 255, .38));
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.q .tile.off { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: none; border-color: var(--line-2); }
.q .tile.off::before { display: none; }
.q .tile.on, .q .tile:has(input:checked) { background: linear-gradient(165deg, color-mix(in srgb, var(--gold) 16%, var(--q-g1)), var(--q-g2)); }
.q .tile:not(.off)::before { background: linear-gradient(135deg, var(--gold), rgba(255, 255, 255, .22) 40%, rgba(212, 176, 106, .5) 70%, rgba(255, 255, 255, .6)); padding: 1.3px; }
.q .tile:not(.off) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1), 0 0 26px -8px rgba(212, 176, 106, .5), 0 24px 48px -26px rgba(0, 0, 0, .75); }
.q .tile:not(.off)::after { inset: 0; border-radius: inherit; padding: 1.4px; z-index: 0; }
.q .tile.on::before, .q .tile:has(input:checked)::before { background: linear-gradient(135deg, var(--gold), rgba(255, 255, 255, .1) 45%, var(--gold)); padding: 1.6px; }
.q .tile.on, .q .tile:has(input:checked) { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .12), 0 0 34px -6px rgba(212, 176, 106, .7), 0 24px 48px -26px rgba(0, 0, 0, .75); }
/* viền thẻ bước đang làm có ánh chạy quanh (giống thẻ Tiệm) */
.q .steps::after { content: ''; position: absolute; inset: 0; z-index: -1; border-radius: inherit; padding: 1.2px; pointer-events: none;
  background: conic-gradient(from var(--a, 0deg), transparent 0 72%, color-mix(in srgb, var(--q-a2) 85%, transparent) 82%, transparent 92%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 7s linear infinite; }
.q .cp, .q .code-ready { background: rgba(0, 0, 0, .26); box-shadow: inset 0 0 0 1px var(--line); }
.q .btn:not(.ghost):not(.dark):not(.gold):not([disabled]):not(.dis) { background: linear-gradient(180deg, var(--q-b1), var(--q-b2)); color: #17140f;
  box-shadow: 0 10px 26px -12px color-mix(in srgb, var(--q-b2) 80%, transparent); }
.q .btn.ghost { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--q-a2) 45%, transparent); }
.q .chip-btn:not(.ok) { background: color-mix(in srgb, var(--q-a2) 85%, #fff); }
.q .sheet { background: color-mix(in srgb, var(--card) 92%, transparent); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); }
.q .ticket { box-shadow: 0 30px 60px -24px rgba(0, 0, 0, .85), 0 0 0 1px rgba(255, 255, 255, .5) inset; }
.q .ticket::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--q-a), var(--gold), var(--q-a)); }
.q .zbtn small { color: var(--text-3); }

@keyframes q-fade { from { opacity: 0; } }
@keyframes q-rise { from { opacity: 0; transform: translateY(16px); } }
@keyframes q-pop { from { opacity: 0; transform: scale(.4); } }
@keyframes q-drop { from { opacity: 0; transform: translateY(-34px) scaleY(.6); } }
@keyframes q-in-l { from { opacity: 0; translate: -60px 0; } }
@keyframes q-in-r { from { opacity: 0; translate: 60px 0; } }
@keyframes q-draw { from { stroke-dashoffset: 420; } }
@keyframes q-glow { 50% { opacity: .55; } }
@keyframes q-tw { 50% { opacity: .25; transform: scale(.65) rotate(25deg); } }
@keyframes q-bulb { 0%, 100% { opacity: 1; } 45% { opacity: .55; } 55% { opacity: .9; } }
@keyframes q-sway { from { transform: rotate(-4deg); } to { transform: rotate(5deg); } }
@keyframes q-rot { to { transform: rotate(360deg); } }
@keyframes q-spin-in { from { opacity: 0; transform: rotate(-180deg) scale(.2); } }
@keyframes q-stamp { from { opacity: 0; transform: rotate(-40deg) scale(1.9); } to { opacity: .9; transform: rotate(-12deg) scale(1); } }
@keyframes q-fall { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 6% { opacity: .9; } 50% { transform: translate(34px, 55vh) rotate(210deg); }
  88% { opacity: .9; } 100% { opacity: 0; transform: translate(-14px, 112vh) rotate(430deg); } }
@keyframes q-draw-ray { from { stroke-dashoffset: 90; } }
@media (prefers-reduced-motion: reduce) {
  .fall { display: none; }
  .q .steps::after { display: none; }
  .tile::after { display: none; }
}

/* ---------- Thẻ tài khoản (trang vé vào thẳng tài khoản, 08/10/2026) ---------- */
.acc-card { padding: 16px 16px 16px; display: grid; gap: 10px; }
.acc-card h2 { font-size: 15px; font-weight: 600; letter-spacing: -.01em; color: var(--text-2); margin: 0; }
.acc-rows { display: grid; gap: 8px; }
.acc-rows .cp + .cp { margin-top: 0; }
.acc-card .cp { display: grid; grid-template-columns: 1fr auto; align-items: center; column-gap: 10px; padding: 8px 6px 8px 12px; }
.acc-card .cp small { grid-column: 1 / -1; width: auto; font-size: 11px; }
.acc-card .cp code { font-size: 15px; overflow-wrap: break-word; }
.acc-card > .btn { margin-top: 2px; }
.acc-card .pg-acc-ws { margin: 0; }
.acc-card .hint { margin: 0; text-align: center; }
/* 3 bước cho món đăng nhập bằng mã email: số tròn, xong thì thành ✓ vàng, chữ mờ đi. */
.acc-h { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.acc-ws { flex: none; padding: 3px 11px; border-radius: 999px; background: var(--gold); color: var(--bg); font-size: 14px; font-weight: 700; letter-spacing: .01em; }
.acc-guide { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; counter-reset: g; }
.acc-guide li { counter-increment: g; display: grid; grid-template-columns: 22px 1fr; gap: 8px; align-items: center; font-size: 14px; line-height: 1.35; color: var(--text-2); }
.acc-guide li::before { content: counter(g); width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-size: 12px; font-weight: 700;
  border: 1px solid var(--gold); color: var(--gold); }
.acc-guide li b { color: var(--text); font-weight: 600; }
.acc-guide li.done { opacity: .55; }
.acc-guide li.done::before { content: '✓'; background: var(--gold); color: var(--bg); }
.acc-code { border-top: 1px solid var(--line); padding-top: 12px; }
.acc-code-h { font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 8px; }
.acc-more { border-top: 1px solid var(--line); padding-top: 4px; }
.acc-more summary { display: flex; justify-content: space-between; align-items: center; min-height: 40px; font-size: 14px; font-weight: 600; color: var(--gold); cursor: pointer; list-style: none; }
.acc-more summary::-webkit-details-marker { display: none; }
.acc-more summary::after { content: '›'; font-size: 20px; transition: transform .2s; }
.acc-more[open] summary::after { transform: rotate(90deg); }
.acc-more .hint { text-align: left; margin-bottom: 8px; }

/* ---------- Ảnh thật của quán làm nền (dưới đồ hoạ) ---------- */
.qphoto { position: absolute; left: 0; top: 0; width: 100%; height: 82vh; height: 82dvh; object-fit: cover; object-position: 50% 0; opacity: .6;
  transform-origin: 50% 20%; animation: q-fade 1.6s ease both, q-ken 28s ease-in-out infinite alternate; }
.qshade { position: absolute; left: 0; right: 0; top: 0; height: 84vh; height: 84dvh;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 28%, transparent) 0%, color-mix(in srgb, var(--bg) 52%, transparent) 34%, color-mix(in srgb, var(--bg) 86%, transparent) 70%, var(--bg) 100%); }
.q-orenchi .qshade { box-shadow: inset 0 0 120px 30px rgba(10, 13, 10, .55); }
.q-bamos .qshade { background: linear-gradient(180deg, rgba(16, 30, 40, .45) 0%, color-mix(in srgb, var(--bg) 58%, transparent) 34%, color-mix(in srgb, var(--bg) 88%, transparent) 70%, var(--bg) 100%); }
@keyframes q-ken { from { transform: scale(1.02); } to { transform: scale(1.12) translate(-2%, 1.5%); } }
/* Ảnh có biển quán thật (O'renchi, Bamos): biển rơi vào khoảng trống đầu trang, làm tiêu đề. Biển nằm ở 21–47% bề ngang ảnh tính từ đỉnh. */
.qphoto { top: 30px; height: auto; left: calc(50% - 50 * var(--pw)); width: calc(100 * var(--pw)); animation: q-fade 1.6s ease both, q-ken 26s ease-in-out infinite alternate; transform-origin: 50% 18%; }
@keyframes q-ken { from { transform: scale(1); } to { transform: scale(1.05); } }
.q .qshade { inset: 0; height: auto;
  background: linear-gradient(180deg, color-mix(in srgb, var(--bg) 30%, transparent) 0, color-mix(in srgb, var(--bg) 6%, transparent) calc(30px + 18 * var(--pw)),
    color-mix(in srgb, var(--bg) 18%, transparent) calc(30px + 47 * var(--pw)), color-mix(in srgb, var(--bg) 72%, transparent) calc(30px + 72 * var(--pw)), var(--bg) calc(30px + 100 * var(--pw))); }
.q-bamos .qshade { background: linear-gradient(180deg, rgba(16, 30, 40, .4) 0, rgba(16, 30, 40, .12) calc(30px + 26 * var(--pw)),
    color-mix(in srgb, var(--bg) 22%, transparent) calc(30px + 47 * var(--pw)), color-mix(in srgb, var(--bg) 78%, transparent) calc(30px + 72 * var(--pw)), var(--bg) calc(30px + 100 * var(--pw))); }
/* Màn hình rộng (máy tính): ảnh + khoảng chừa cho biển tính theo bề ngang cột trang (520px) thay vì cả màn hình — trước đó biển phóng to đè lên chữ. */
:root { --pw: 1vw; }
@media (min-width: 560px) {
  :root { --pw: 5.2px; }
  .qphoto { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
}
.q-orenchi .qphoto { opacity: 1; filter: saturate(1.05) contrast(1.04); }
.q-bamos .qphoto { opacity: 1; filter: brightness(.86) saturate(.95); }
.qh-photo { padding-top: clamp(90px, calc(46.9 * var(--pw) - 66px), 200px); }
.qh-photo .qh-kicker, .qh-photo .qh-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.qh-photo .qh-sub { margin-top: 2px; text-shadow: 0 1px 10px rgba(0, 0, 0, .8); color: var(--text); }
.qh-orenchi.qh-photo .qh-stage { top: -66px; }
.qh-bamos.qh-photo .qh-stage { top: -70px; }
.qh-photo .qh-hand { bottom: -12px; } /* cạnh dòng "Miễn phí tại quán" — không đè chữ TBQ lẫn biển trong ảnh */
.qh-bamos.qh-photo { padding-top: clamp(110px, calc(46.9 * var(--pw) - 40px), 230px); }
/* Bớt rối (chủ hỏi "Rối không" 08/10): trang vé / trang chủ bớt hoa (cành + bông rơi); trăng nhỏ lại. Ảnh vẫn rõ — biển thật làm đầu trang (.qb-photo). */
.q:not(.q-hero) .branch, .fall.f2 { display: none; }
.q:not(.q-hero) .fall.f3 { display: none; }
.sky { max-height: 200px; }
.qbg .sky { width: min(100%, 480px); left: 50%; transform: translateX(-50%); }
/* Trang vé / trang chủ tận dụng ảnh quán ("thiết kế để tận dụng", 08/10): chừa khoảng cho biển thật hiện rõ, dải "× TBQ Space" ngay dưới biển,
 * nội dung bắt đầu sau đó. Biển nằm tới ~47% bề ngang ảnh (ảnh đặt top 30px); khung trang bắt đầu dưới thanh TBQ (~66px). */
.qband.qb-photo { height: auto; display: block; margin: -8px -20px 6px; padding: calc(30px + 47 * var(--pw) - 66px) 20px 0; }
.q-bamos .qband.qb-photo { padding-top: calc(30px + 56 * var(--pw) - 66px); }
.qb-photo .qb-deco { height: 56px; top: -10px; }
.qb-photo .qb-row { justify-content: center; }
/* Chủ muốn giữ dòng "O'renchi ✕ TBQ" / "Bamos ✕ TBQ" (08/10) — tên quán hiện lại cạnh dấu ✕, cả trang chọn món lẫn trang vé. */
.qw-cafe, .qb-photo .qb-name { font: italic 600 24px/1 var(--serif); padding: 0 .06em .04em; background: linear-gradient(90deg, var(--q-a2), var(--q-a) 50%, var(--q-a2));
  -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 8px rgba(0, 0, 0, .85)); white-space: nowrap; }
.qw-cafe.logo, .qb-photo .qb-name.logo { width: 86px; height: auto; padding: 0; background: none; }
.qb-photo .qb-row .qw-tbq b { text-shadow: 0 1px 10px rgba(0, 0, 0, .85); }
.qb-photo .qb-free { margin-top: 4px; text-align: center; font-size: 10px; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; color: var(--q-a2);
  text-shadow: 0 1px 8px rgba(0, 0, 0, .8); animation: q-fade .7s .6s both; }
.q .intro.home .free { display: none; }
.q .intro.home { padding-top: 14px; }
.q .intro.home h1 { margin-top: 6px; }

/* ---------- Thẻ tài khoản: dẫn dắt (UI tâm lý, 08/10/2026) — 1 nút chính trên cùng, tự chép email, quay lại thì dòng kế tiếp sáng lên ---------- */
.acc-card > .acc-open { margin-top: 0; min-height: 58px; font-size: 18px; }
.acc-auto { margin: -2px 0 2px; text-align: center; font-size: 13px; color: var(--text-3); transition: color .3s; }
.acc-auto.ok { color: var(--mint); font-weight: 600; }
.acc-card .acc-miss { margin: -2px 0 0; }
.acc-next { margin: 2px 2px 0; font-size: 14px; font-weight: 600; color: var(--gold); animation: q-rise .5s var(--ease) both; }
.cp.done small::after { content: ' ✓'; color: var(--mint); font-weight: 700; }
/* Soi đèn (app.js spotlight): quay lại từ app → ô kế tiếp viền vàng chạy quanh, phần khác mờ; vuốt / chạm ngoài là hết */
.spot-dim { filter: blur(3px) brightness(.5); transition: filter .35s var(--ease); }
[data-acc-target] { position: relative; border-radius: 16px; transition: box-shadow .35s var(--ease); }
[data-acc-target].spot { box-shadow: 0 0 34px color-mix(in srgb, var(--gold) 30%, transparent); }
[data-acc-target].spot::before { content: ''; position: absolute; inset: -2px; border-radius: 17px; padding: 2px; pointer-events: none; z-index: 1;
  background: conic-gradient(from var(--a, 0deg), color-mix(in srgb, var(--gold) 18%, transparent) 0 52%, var(--gold) 72%, #fff1c2 78%, var(--gold) 84%, color-mix(in srgb, var(--gold) 18%, transparent) 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; animation: spin-a 2.2s linear infinite; }
[data-acc-target].spot .chip-btn { animation: tap-pop .5s .3s cubic-bezier(.3, 1.6, .5, 1) 2; }
.spot-on .acc-next { text-shadow: 0 0 18px color-mix(in srgb, var(--gold) 45%, transparent); }
@media (prefers-reduced-motion: reduce) { [data-acc-target].spot::before { animation: none; background: var(--gold); } .spot-dim { transition: none; } }

/* ---------- Cuộn xuống → nền tối dần (chủ yêu cầu 08/10: "lướt xuống là Background tối để nổi bật chữ lên") ----------
 * app.js đặt --qd (0 ở đầu trang → 1 khi cuộn ~150px). Lớp phủ nằm trên ảnh + lá/hoa, dưới nội dung; ảnh quán chỉ còn le lói.
 * O'renchi: đêm sân vườn — xanh rêu đen, ánh đèn vàng còn hắt ở trên. Bamos: nửa đêm 24h — xanh than, ánh ngọc + đồng. */
.qbg::after { content: ''; position: absolute; inset: 0; pointer-events: none; opacity: var(--qd, 0); transition: opacity .18s linear; }
.q-orenchi .qbg::after {
  background: radial-gradient(110% 38% at 50% -4%, rgba(240, 182, 100, .16), transparent 70%), radial-gradient(80% 40% at 100% 100%, rgba(47, 94, 64, .22), transparent 70%),
    linear-gradient(180deg, rgba(17, 21, 17, .88), rgba(13, 16, 13, .94) 40%, rgba(11, 13, 11, .97)); }
.q-bamos .qbg::after {
  background: radial-gradient(110% 38% at 50% -4%, rgba(108, 196, 214, .14), transparent 70%), radial-gradient(80% 40% at 0% 100%, rgba(201, 148, 103, .16), transparent 70%),
    linear-gradient(180deg, rgba(17, 23, 27, .88), rgba(14, 18, 21, .94) 40%, rgba(12, 15, 17, .97)); }

/* ---------- Đang vuốt cuộn → tạm dừng hiệu ứng trang trí (ưu tiên điện thoại, 09/10) ----------
 * app.js gắn .is-scrolling lên <html> khi [data-scroll] đang cuộn, gỡ ~200ms sau khi dừng. Điện thoại phải blur lại các thẻ kính
 * mỗi khi nền phía sau động đậy; đứng yên lúc cuộn thì GPU chỉ còn lo cuộn → hết giật. Thả tay ra là chạy tiếp. */
.is-scrolling .qbg, .is-scrolling .qbg *, .is-scrolling .qh *, .is-scrolling .qband *, .is-scrolling body::before,
.is-scrolling .tile::after, .is-scrolling .tiem::before, .is-scrolling .tiem::after, .is-scrolling .btn::after, .is-scrolling .logos span {
  animation-play-state: paused !important; }