/* #200 — Góc giải trí · Xin quẻ cùng Pi (/goc-giai-tri/xin-que).
   CHÉP NGUYÊN KHỐI CSS mockup designs/redesign/xin-que-cung-pi.html (bản 04/11), tự động thêm tiền tố xq-
   cho MỌI class + keyframes (quy tắc 6). Bỏ: khối .pne-topbar/.pne-nav/.sitebar giả lập (dùng partial thật),
   footer mockup, dải .soon "Sắp có" (đã bỏ 04/11).
   Màu: token home-pne.css + 3 tone vàng hợp lệ chưa có biến (#7C6500 #E1BD00 #FFDF55) — khai báo cục bộ dưới. */
.xq-page{--xq-slip-line:#E1BD00;--xq-bamboo:#FFDF55;--xq-gold-1:#7C6500;--xq-gold-3:#E1BD00;--xq-gold-5:#FFDF55}
body.xq-page{background:var(--bg-soft);color:var(--text);font-size:16px;line-height:1.6}
:where(.xq-page) button{font:inherit;cursor:pointer}
/* home-pne.css ép text-wrap balance/pretty cho MỌI h2/p — mockup không có → trả về mặc định để ngắt dòng y mockup
   (tiêu đề h1 vẫn balance vì mockup khai riêng ở .xq-h1). */
:where(.xq-page) h2,:where(.xq-page) p{text-wrap:wrap}
:where(.xq-page) button:focus-visible,:where(.xq-page) input:focus-visible{outline:3px solid var(--gold);outline-offset:2px}

.xq-gutter{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.xq-in{max-width:1120px;margin:0 auto}
.xq-crumb{font-size:13px;color:var(--text-2);padding-block:14px 0}
.xq-crumb span{color:var(--text)}

/* Sân khấu */
.xq-stage{padding-block:18px 8px}
.xq-stage-card{position:relative;background:radial-gradient(120% 90% at 70% 0%,var(--bg) 0%,var(--red-light) 55%,var(--red-border) 100%);border-radius:var(--r-l);overflow:hidden;
  display:grid;grid-template-columns:1fr 1.05fr;gap:12px;align-items:end;min-height:440px}
.xq-stage-card > *{min-width:0}
.xq-lanterns{position:absolute;inset:0 0 auto 0;height:70px;pointer-events:none}
.xq-lantern{position:absolute;top:0;width:34px;height:46px;border-radius:12px;background:var(--red);box-shadow:inset 0 -6px 0 var(--red-deep);transform-origin:50% -24px;animation:xq-sway 4s ease-in-out infinite}
.xq-lantern::before{content:"";position:absolute;left:50%;top:-24px;width:2px;height:24px;background:var(--red-deep)}
.xq-lantern::after{content:"";position:absolute;left:50%;bottom:-10px;transform:translateX(-50%);width:4px;height:10px;background:var(--gold)}
@keyframes xq-sway{0%,100%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}}
.xq-copy-side{padding:44px 8px 84px 44px;position:relative;z-index:1}
.xq-kicker{display:inline-flex;gap:8px;align-items:center;font-size:12px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--red-deep);background:rgba(255,255,255,.7);padding:5px 12px;border-radius:999px}
.xq-h1{font-size:clamp(34px,5vw,56px);line-height:1.05;font-weight:800;letter-spacing:-.02em;margin:16px 0 12px;text-wrap:balance}
.xq-h1 em{font-style:italic;font-weight:800;color:var(--red)}
.xq-lede{color:var(--text);max-width:44ch;margin:0 0 22px}
.xq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px}
.xq-chip{font-size:15px;font-weight:600;padding:9px 16px;border-radius:999px;border:2px solid transparent;background:rgba(255,255,255,.85);color:var(--text)}
.xq-chip:hover{border-color:var(--red-border)}
.xq-chip[aria-pressed="true"]{background:var(--red);color:#fff}
.xq-btn{font-weight:800;font-size:17px;padding:15px 30px;border-radius:12px;border:0;background:var(--red);color:#fff;box-shadow:0 4px 0 var(--red-deep)}
.xq-btn:active{transform:translateY(3px);box-shadow:0 1px 0 var(--red-deep)}
.xq-btn[disabled]{opacity:.65;cursor:wait}
.xq-btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 4px 0 var(--xq-gold-3)}
.xq-btn-gold:active{box-shadow:0 1px 0 var(--xq-gold-3)}
.xq-hint{font-size:13px;color:var(--text-2);margin:12px 0 0}

.xq-scene{position:relative;height:440px;z-index:1}
.xq-altar{position:absolute;left:0;right:0;bottom:0;height:58px;z-index:0;background:linear-gradient(var(--red),var(--red-deep));border-top:6px solid var(--gold)}
.xq-cup-wrap{position:absolute;left:18%;bottom:52px;z-index:1;width:170px;height:280px;cursor:pointer;border:0;background:none;padding:0}
.xq-shaker{position:absolute;inset:0;transform-origin:50% 92%}
.xq-sticks{position:absolute;left:50%;bottom:150px;transform:translateX(-50%);width:140px;height:130px}
.xq-stick{position:absolute;bottom:0;width:9px;border-radius:3px 3px 1px 1px;background:var(--xq-bamboo);border-top:12px solid var(--red);transform-origin:bottom center}
.xq-stick.xq-out{transition:transform .6s cubic-bezier(.2,.9,.3,1.35)}
.xq-cup{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:140px;height:165px;border-radius:10px 10px 24px 24px;
  background:linear-gradient(90deg,var(--red-deep),var(--red) 40%,var(--red) 55%,var(--red-deep));display:grid;place-items:center;box-shadow:0 10px 20px -8px rgba(80,0,0,.5)}
.xq-cup::before,.xq-cup::after{content:"";position:absolute;left:0;right:0;height:9px;background:var(--gold)}
.xq-cup::before{top:14px}.xq-cup::after{bottom:22px}
.xq-cup span{font-weight:800;color:var(--gold);font-size:15px;letter-spacing:.14em;text-transform:uppercase;line-height:1.1;text-align:center}
.xq-shake{animation:xq-shake 1s ease-in-out}
@keyframes xq-shake{0%,100%{transform:rotate(0)}12%{transform:rotate(-11deg)}26%{transform:rotate(10deg)}40%{transform:rotate(-9deg)}54%{transform:rotate(8deg)}68%{transform:rotate(-5deg)}82%{transform:rotate(3deg)}}
.xq-pi{position:absolute;right:6%;bottom:40px;z-index:1;width:190px;transition:transform .3s}
.xq-pi img{width:100%;height:auto;display:block}
.xq-pi.xq-bounce{animation:xq-bounce .6s ease}
@keyframes xq-bounce{0%,100%{transform:translateY(0)}40%{transform:translateY(-18px)}}
.xq-bubble{position:absolute;right:4%;top:34px;max-width:250px;background:#fff;border-radius:16px;padding:12px 16px;font-size:14px;font-weight:600;box-shadow:var(--sh-s);z-index:2}
.xq-bubble::after{content:"";position:absolute;bottom:-9px;right:64px;border:10px solid transparent;border-top-color:#fff;border-bottom:0}
.xq-bubble small{display:block;font-weight:500;color:var(--text-2)}


/* ===== Gõ mõ tụng tiếng Đức ===== */
.xq-mo-sec{padding-block:48px 8px}
.xq-mo{border-radius:var(--r-l);background:linear-gradient(160deg,var(--bg-soft) 0%,var(--bg-alt) 100%);padding:34px;display:grid;grid-template-columns:.9fr 1.1fr;gap:34px;align-items:center;position:relative;overflow:hidden}
.xq-mo > *{min-width:0}
.xq-mo-left{display:grid;justify-items:center;gap:14px;text-align:center}
.xq-mo-kicker{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep)}
.xq-mo h2{font-size:clamp(28px,3.6vw,40px);font-weight:800;line-height:1.08;margin:0;color:var(--text)}
.xq-mo h2 em{font-style:italic;color:var(--red)}
.xq-mo-sub{margin:0;color:var(--text-2);font-size:15px;max-width:38ch}
.xq-fish-wrap{position:relative;width:260px;height:210px;border:0;background:none;padding:0;cursor:pointer;-webkit-tap-highlight-color:transparent}
.xq-fish{position:absolute;left:20px;bottom:0;width:220px;height:170px;border-radius:50% 50% 46% 46%/56% 56% 44% 44%;
  background:radial-gradient(circle at 35% 30%,var(--red) 0%,var(--red) 35%,var(--red-deep) 100%);box-shadow:inset -14px -18px 0 rgba(0,0,0,.18),0 16px 24px -12px rgba(168,24,29,.55);transition:transform .08s}
.xq-fish::before{content:"";position:absolute;left:18%;right:18%;top:58%;height:16px;border-radius:0 0 50% 50%/0 0 100% 100%;background:var(--ink);box-shadow:inset 0 4px 0 #000}
.xq-fish::after{content:"";position:absolute;left:50%;top:18%;width:56px;height:24px;transform:translateX(-50%);border-radius:50%;border:4px solid var(--gold);border-bottom-color:transparent;border-left-color:transparent;border-right-color:transparent}
.xq-fish-wrap.xq-hit .xq-fish{transform:scale(.96,.93)}
.xq-mallet{position:absolute;right:-6px;top:-4px;width:120px;height:14px;transform-origin:100% 50%;transform:rotate(-38deg);transition:transform .08s}
.xq-mallet::before{content:"";position:absolute;left:28px;right:0;top:3px;height:8px;border-radius:4px;background:var(--xq-gold-1)}
.xq-mallet::after{content:"";position:absolute;left:0;top:-7px;width:34px;height:28px;border-radius:50%;background:var(--xq-gold-5);box-shadow:inset -4px -4px 0 rgba(0,0,0,.15)}
.xq-fish-wrap.xq-hit .xq-mallet{transform:rotate(-14deg)}
.xq-plus{position:absolute;left:50%;top:10px;font-weight:800;color:var(--red-deep);font-size:18px;pointer-events:none;white-space:nowrap;animation:xq-float 1s ease-out forwards}
@keyframes xq-float{from{transform:translate(-50%,0);opacity:1}to{transform:translate(-50%,-70px);opacity:0}}
.xq-merit{display:grid;gap:6px;width:100%;max-width:300px}
.xq-merit-top{display:flex;justify-content:space-between;font-size:13px;font-weight:700;color:var(--text-2);font-variant-numeric:tabular-nums}
.xq-merit-bar{height:12px;border-radius:999px;background:var(--border-s);overflow:hidden}
.xq-merit-bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gold),var(--xq-gold-3));transition:width .25s}
.xq-mo-hint{font-size:12px;color:var(--text-2);margin:0}

.xq-sutra{background:var(--bg);border-radius:var(--r-m);padding:22px;box-shadow:var(--sh-s)}
.xq-tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.xq-tab{font-size:13px;font-weight:700;padding:7px 12px;border-radius:999px;border:1.5px solid var(--border-s);background:transparent;color:var(--text-2)}
.xq-tab[aria-selected="true"]{background:var(--ink);border-color:var(--ink);color:#fff}
.xq-now{min-height:128px;display:grid;align-content:center;gap:4px;border-bottom:1px dashed var(--border-s);padding-bottom:14px}
.xq-now-de{font-style:italic;font-weight:800;font-size:clamp(26px,3.4vw,36px);line-height:1.12;color:var(--ink);margin:0}
.xq-now-pr{font-weight:700;color:var(--red-deep);font-size:14px}
.xq-now-vi{color:var(--text);margin:0}
.xq-now-idle{color:var(--text-2);margin:0;font-size:15px}
.xq-beads{display:flex;gap:10px;justify-content:center;padding:16px 0 4px;position:relative}
.xq-beads::before{content:"";position:absolute;left:8px;right:8px;top:50%;height:2px;background:var(--border-s);margin-top:6px}
.xq-bead{position:relative;width:22px;height:22px;border-radius:50%;background:var(--bg-alt);box-shadow:inset -3px -3px 0 rgba(0,0,0,.08);transition:background .2s,transform .2s}
.xq-bead.xq-on{background:radial-gradient(circle at 35% 35%,var(--gold),var(--xq-gold-1));transform:scale(1.12)}
.xq-lines{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 16px;font-size:13px;color:var(--text-2)}
.xq-lines li.xq-done{color:var(--text);font-weight:600}
.xq-lines li.xq-done::before{content:"✓ ";color:var(--green);font-weight:800}
.xq-complete{margin-top:14px;background:var(--ink);color:#fff;border-radius:12px;padding:14px 16px;display:flex;gap:12px;align-items:center;flex-wrap:wrap;justify-content:space-between}
.xq-complete b{color:var(--gold)}
.xq-complete button{font-size:13px;font-weight:800;background:var(--gold);color:var(--ink);border:0;border-radius:8px;padding:8px 12px}
@media (max-width:900px){.xq-mo{grid-template-columns:1fr;padding:24px 18px}.xq-lines{grid-template-columns:1fr}}
@media (prefers-reduced-motion:reduce){.xq-plus{animation:none;opacity:0}.xq-fish,.xq-mallet{transition:none}}

/* ===== Quẻ của bạn: tờ xăm dọc + bùa may ===== */
.xq-reveal-sec{padding-block:36px 8px}
.xq-reveal-sec .xq-in{display:grid;grid-template-columns:1.25fr .75fr;gap:28px;align-items:start}
.xq-reveal-sec .xq-in > *{min-width:0}
.xq-scroll{position:relative;background:var(--gold-soft);border-radius:6px;padding:34px 40px 30px;box-shadow:0 22px 40px -26px rgba(90,60,0,.7);
  background-image:repeating-linear-gradient(0deg,transparent 0 31px,rgba(160,120,20,.08) 31px 32px)}
.xq-scroll::before,.xq-scroll::after{content:"";position:absolute;left:-10px;right:-10px;height:16px;border-radius:8px;background:linear-gradient(var(--red),var(--red-deep));box-shadow:0 3px 6px rgba(0,0,0,.2)}
.xq-scroll::before{top:-8px}.xq-scroll::after{bottom:-8px}
.xq-scroll-top{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:18px}
.xq-no{font-weight:800;color:var(--red-deep);font-variant-numeric:tabular-nums;letter-spacing:.02em}
.xq-stamp{width:74px;height:74px;border-radius:50%;border:3px double var(--red);color:var(--red);display:grid;place-items:center;text-align:center;font-weight:800;font-size:13px;line-height:1.1;text-transform:uppercase;transform:rotate(-12deg);background:rgba(255,255,255,.25)}
.xq-de{font-style:italic;font-weight:800;font-size:clamp(32px,4.6vw,50px);line-height:1.08;margin:0 0 10px;color:var(--ink);text-wrap:balance}
.xq-vi{font-size:18px;font-weight:600;margin:0 0 16px;color:var(--gold-deep)}
.xq-pron{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.xq-pron-txt{font-weight:700;color:var(--gold-deep);background:rgba(255,255,255,.6);padding:4px 12px;border-radius:6px}
.xq-speak{font-size:13px;font-weight:700;color:#fff;background:var(--ink);border:0;border-radius:999px;padding:6px 14px}
.xq-pron-note{font-size:12px;color:var(--gold-deep);margin:6px 0 0}
.xq-verses{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px;margin-top:24px;padding-top:20px;border-top:2px solid rgba(163,32,31,.25)}
.xq-verse h3{font-size:12px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--red-deep);margin:0 0 4px}
.xq-verse p{margin:0;color:var(--text)}
.xq-verse.xq-exam{grid-column:1/-1;background:rgba(255,255,255,.55);border-radius:8px;padding:14px 16px;display:grid;grid-template-columns:auto 1fr;gap:4px 14px;align-items:start}
.xq-verse.xq-exam img{width:46px;grid-row:span 2}
.xq-scroll-foot{display:flex;flex-wrap:wrap;gap:10px;justify-content:space-between;align-items:center;margin-top:22px;font-size:13px;color:var(--gold-deep)}
.xq-ghost-btn{font-size:13px;font-weight:700;background:transparent;color:var(--gold-deep);border:1.5px solid var(--gold-deep);border-radius:8px;padding:7px 12px}

.xq-charm{position:relative;background:linear-gradient(170deg,var(--red),var(--red-deep));color:#fff;border-radius:120px 120px 18px 18px;padding:34px 24px 26px;border:3px solid var(--gold);
  box-shadow:inset 0 0 0 6px var(--red-deep),inset 0 0 0 8px rgba(255,204,0,.6);display:flex;flex-direction:column;gap:14px;text-align:center}
.xq-charm::after{content:"";position:absolute;left:50%;bottom:-38px;transform:translateX(-50%);width:14px;height:40px;background:repeating-linear-gradient(90deg,var(--gold) 0 2px,var(--xq-gold-3) 2px 4px);border-radius:0 0 6px 6px}
.xq-charm-title{font-weight:800;font-size:22px;line-height:1.2;margin:0;color:#fff}
.xq-charm p{margin:0;font-size:14px;color:#fff}
.xq-phone{align-self:center;width:128px;aspect-ratio:9/17;max-width:100%;border-radius:18px;border:4px solid var(--ink);background:radial-gradient(90% 60% at 50% 20%,var(--gold-soft),var(--gold));color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:10px 8px 12px;gap:4px;box-shadow:0 12px 20px -8px rgba(0,0,0,.45)}
.xq-phone img{width:66px}
.xq-phone b{font-style:italic;font-weight:800;font-size:13px;line-height:1.15}
.xq-phone small{font-size:9px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--red-deep)}
.xq-charm form{display:grid;gap:8px;text-align:left}
.xq-charm input[type=text],.xq-charm input[type=tel]{font:inherit;font-size:15px;padding:11px 12px;border-radius:10px;border:0;background:#fff;color:var(--text);width:100%}
.xq-check{display:flex;gap:8px;align-items:flex-start;font-size:13px;color:#fff;cursor:pointer}
/* margin = mặc định trình duyệt của checkbox trong mockup (home-pne.css reset * margin:0 làm lệch 4px) */
.xq-check input{margin:3px 3px 3px 4px;accent-color:var(--gold)}
.xq-charm .xq-btn-gold{width:100%}
.xq-charm .xq-err{color:#fff;background:rgba(0,0,0,.2);border-radius:6px;padding:6px 10px;font-size:13px;margin:0}
/* Bổ sung 04/11 — gợi ý mở Safari/Chrome khi trình duyệt trong app FB/Zalo không tải được bùa (cùng kiểu .xq-err). */
.xq-charm .xq-dl-hint,.xq-viewer-in .xq-dl-hint{color:#fff;background:rgba(0,0,0,.2);border-radius:6px;padding:6px 10px;font-size:13px;margin:0}
/* Dòng lỗi SĐT dùng chung (partial phone-validate, chữ đỏ inline) không đọc được trên nền đỏ của bùa → ẩn trong
   bùa; lỗi SĐT hiện ở .xq-err như mockup (xin-que.js validate cùng nguồn Lead::PHONE_REGEX). */
.xq-charm .phone-err{display:none!important}
.xq-charm .xq-done{background:rgba(255,255,255,.12);border:1px dashed var(--gold);border-radius:12px;padding:16px;font-size:14px;color:#fff}
.xq-wall{border:0;padding:0;background:none;align-self:center;width:180px;max-width:100%;border-radius:18px;overflow:hidden;box-shadow:0 14px 26px -10px rgba(0,0,0,.55);cursor:zoom-in}
.xq-wall img{display:block;width:100%;height:auto}
.xq-wall-wait{align-self:center;width:180px;aspect-ratio:9/16;border-radius:18px;background:rgba(255,255,255,.12);display:grid;place-items:center;font-size:14px;color:#fff}
/* z-index 1500: trên thanh menu (500) + nút nổi (1000) — 50 cũ bị menu đè mất đầu ảnh (bổ sung 04/11). */
.xq-viewer{position:fixed;inset:0;background:rgba(16,16,28,.82);z-index:1500;display:grid;place-items:center;padding:max(16px,env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-right,0px)) max(16px,env(safe-area-inset-bottom,0px)) max(16px,env(safe-area-inset-left,0px))}
.xq-viewer-in{display:grid;gap:12px;justify-items:center;text-align:center;color:#fff;font-size:14px;max-height:100%}
.xq-viewer-in img{max-height:62vh;width:auto;max-width:100%;border-radius:18px}
.xq-viewer-in p{margin:0;max-width:36ch}
.xq-test-link{display:block;text-align:center;margin-top:46px;font-size:14px;color:var(--text-2)}
.xq-test-link b{color:var(--red)}

/* ===== Giá xăm sưu tầm ===== */
.xq-rack-sec{padding-block:40px 8px}
.xq-sec-head{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:18px}
h2.xq-sec{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-.01em;margin:0;line-height:1.15}
.xq-sec-head p{margin:4px 0 0;color:var(--text-2);max-width:58ch}
.xq-count{font-weight:800;font-size:15px;color:var(--red);font-variant-numeric:tabular-nums;white-space:nowrap}
.xq-rack{background:var(--bg);border-radius:var(--r-l);padding:26px 22px 0;box-shadow:var(--sh-s);overflow:hidden}
.xq-rack-sticks{display:grid;grid-template-columns:repeat(24,minmax(0,1fr));gap:8px;align-items:end;height:150px}
.xq-rs{position:relative;height:120px;border-radius:4px 4px 0 0;background:var(--bg-alt);transition:transform .4s cubic-bezier(.2,.9,.3,1.3),background .3s;display:flex;align-items:flex-end;justify-content:center;padding-bottom:8px;
  font-size:10px;font-weight:800;color:var(--text-2);font-variant-numeric:tabular-nums}
.xq-rs::before{content:"";position:absolute;top:0;left:0;right:0;height:14px;border-radius:4px 4px 0 0;background:var(--border-s)}
.xq-rs.xq-got{background:var(--xq-bamboo);color:var(--gold-deep);transform:translateY(-22px)}
.xq-rs.xq-got::before{background:var(--red)}
.xq-rs[data-g="thi"].xq-got::before{background:var(--red)}.xq-rs[data-g="duyen"].xq-got::before{background:var(--red-border)}.xq-rs[data-g="loc"].xq-got::before{background:var(--xq-gold-1)}.xq-rs[data-g="an"].xq-got::before{background:var(--ink)}
.xq-rs.xq-new{animation:xq-rise .7s ease-out}
@keyframes xq-rise{0%{transform:translateY(0)}60%{transform:translateY(-34px)}100%{transform:translateY(-22px)}}
.xq-rack-base{height:22px;margin:0 -22px;background:linear-gradient(var(--red),var(--red-deep));border-top:4px solid var(--gold)}
.xq-legend{display:flex;gap:16px;flex-wrap:wrap;font-size:13px;color:var(--text-2);margin-top:12px}
.xq-legend span::before{content:"";display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:6px;vertical-align:-1px}
.xq-legend .xq-l1::before{background:var(--red)}.xq-legend .xq-l2::before{background:var(--red-border)}.xq-legend .xq-l3::before{background:var(--xq-gold-1)}.xq-legend .xq-l4::before{background:var(--ink)}

/* ===== Chợ Giáng sinh ===== */
.xq-xmas-sec{padding-block:48px 8px}
.xq-xmas{position:relative;border-radius:var(--r-l);overflow:hidden;color:var(--text);background:linear-gradient(180deg,var(--bg) 0%,var(--bg-soft) 60%,var(--bg-alt) 100%);border:1px solid var(--border-s);padding:0 0 0}
.xq-lights{position:relative;height:40px}
.xq-lights::before{content:"";position:absolute;left:-5%;right:-5%;top:-30px;height:60px;border-bottom:2px solid var(--border-s);border-radius:0 0 50% 50%}
.xq-bulbs{position:absolute;left:0;right:0;top:14px;display:flex;justify-content:space-around}
.xq-bulbs i{width:9px;height:9px;border-radius:50%;background:var(--gold);box-shadow:0 0 10px 3px rgba(255,204,0,.55);animation:xq-twinkle 2.4s ease-in-out infinite}
.xq-bulbs i:nth-child(3n){background:var(--red);box-shadow:0 0 10px 3px rgba(209,32,38,.35);animation-delay:-.8s}
.xq-bulbs i:nth-child(3n+1){animation-delay:-1.6s}
@keyframes xq-twinkle{0%,100%{opacity:1}50%{opacity:.45}}
.xq-ornaments{display:flex;justify-content:space-around;gap:6px;padding:0 18px;flex-wrap:wrap}
.xq-orn{display:flex;flex-direction:column;align-items:center;border:0;background:none;padding:0;color:inherit;transform-origin:top center;animation:xq-sway 5s ease-in-out infinite}
.xq-orn:nth-child(2n){animation-delay:-2s}.xq-orn:nth-child(3n){animation-delay:-3.4s}
.xq-orn .xq-str{width:1.5px;background:var(--text-3)}
.xq-orn .xq-cap{width:16px;height:8px;background:var(--xq-gold-3);border-radius:2px}
.xq-orn .xq-ball{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;text-align:center;padding:10px;font-size:12.5px;font-weight:700;line-height:1.2;color:#fff;
  box-shadow:inset -10px -12px 0 rgba(0,0,0,.18),inset 8px 8px 0 rgba(255,255,255,.12);hyphens:manual;overflow-wrap:anywhere}
.xq-orn .xq-ball span{display:block;font-weight:500;font-size:11px;opacity:.85}
.xq-orn.xq-c1 .xq-ball{background:var(--red)}.xq-orn.xq-c2 .xq-ball{background:var(--gold);color:var(--ink)}.xq-orn.xq-c3 .xq-ball{background:var(--red-deep)}.xq-orn.xq-c4 .xq-ball{background:var(--ink)}
.xq-orn:hover .xq-ball,.xq-orn:focus-visible .xq-ball{outline:3px solid var(--gold);outline-offset:3px}
.xq-orn[aria-pressed="true"] .xq-ball{outline:3px solid var(--red);outline-offset:3px}
.xq-xmas-body{display:grid;grid-template-columns:1.1fr .9fr;gap:32px;padding:30px 36px 10px;align-items:center}
.xq-xmas-body > *{min-width:0}
.xq-xmas h2{font-size:clamp(26px,3.4vw,38px);font-weight:800;margin:0 0 10px;color:var(--text);line-height:1.1}
.xq-xmas h2 em{font-style:italic;color:var(--red)}
.xq-xmas p{margin:0 0 12px;color:var(--text-2)}
.xq-said{display:flex;gap:12px;align-items:center;background:var(--bg);box-shadow:var(--sh-xs);border-radius:14px;padding:12px 14px;min-height:72px}
.xq-said img{width:44px;flex:none}
.xq-said p{margin:0;color:var(--text);font-size:14px}
.xq-said b{color:var(--red-deep)}
.xq-wreath{text-align:center}
.xq-candles{display:flex;justify-content:center;gap:18px;align-items:flex-end;height:130px;position:relative}
.xq-candles::after{content:"";position:absolute;left:8%;right:8%;bottom:-6px;height:26px;border-radius:50%;background:radial-gradient(closest-side,var(--xq-gold-3),var(--xq-gold-1) 70%,transparent);z-index:0}
.xq-cdl{position:relative;width:24px;height:74px;border-radius:3px;background:linear-gradient(90deg,var(--red-deep),var(--red) 50%,var(--red-deep));z-index:1}
.xq-cdl::before{content:"";position:absolute;left:50%;top:-8px;width:2px;height:8px;background:var(--ink);transform:translateX(-50%)}
.xq-cdl.xq-lit::after{content:"";position:absolute;left:50%;top:-30px;width:14px;height:22px;transform:translateX(-50%);border-radius:50% 50% 50% 50%/60% 60% 40% 40%;background:radial-gradient(circle at 50% 70%,#fff 0 20%,var(--gold) 45%,var(--xq-gold-3) 80%);box-shadow:0 0 18px 6px rgba(255,204,0,.45);animation:xq-flick 1.6s ease-in-out infinite}
@keyframes xq-flick{0%,100%{transform:translateX(-50%) scaleY(1)}50%{transform:translateX(-50%) scaleY(.88)}}
.xq-wreath-cap{font-size:14px;color:var(--text-2);margin:16px 0 0}
.xq-wreath-cap b{color:var(--red-deep)}
.xq-timeline{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:24px 36px 0;position:relative}
.xq-timeline::before{content:"";position:absolute;left:0;right:0;top:7px;height:2px;background:var(--red-border)}
.xq-tl{position:relative;padding:22px 14px 0 0}
.xq-tl::before{content:"";position:absolute;left:0;top:0;width:16px;height:16px;border-radius:50%;background:var(--bg);border:2px solid var(--red)}
.xq-tl b{display:block;color:var(--red-deep);font-variant-numeric:tabular-nums}
.xq-tl strong{display:block;color:var(--text);font-size:15px;margin:2px 0}
.xq-tl span{font-size:13px;color:var(--text-2)}
.xq-stalls{height:70px;margin-top:30px;background:
  linear-gradient(135deg,transparent 50%,var(--red-light) 50%) 0 0/70px 70px,
  linear-gradient(225deg,transparent 50%,var(--red-light) 50%) 0 0/70px 70px;position:relative}
.xq-stalls::before{content:"";position:absolute;inset:auto 0 0 0;height:34px;background:repeating-linear-gradient(90deg,var(--red) 0 18px,var(--bg) 18px 36px);border-top:3px solid var(--red-deep)}
.xq-snow{position:absolute;inset:0;pointer-events:none;background-image:radial-gradient(2px 2px at 12% 30%,rgba(255,255,255,.6),transparent),radial-gradient(1.5px 1.5px at 33% 58%,rgba(255,255,255,.5),transparent),radial-gradient(2px 2px at 58% 22%,rgba(255,255,255,.5),transparent),radial-gradient(1.5px 1.5px at 76% 64%,rgba(255,255,255,.45),transparent),radial-gradient(2px 2px at 91% 36%,rgba(255,255,255,.5),transparent)}

.xq-pop{animation:xq-pop .45s ease-out}
@keyframes xq-pop{from{transform:translateY(16px);opacity:.4}to{transform:none;opacity:1}}

@media (max-width:900px){
  .xq-stage-card{grid-template-columns:1fr;min-height:0}
  .xq-copy-side{padding:36px 22px 0}
  .xq-scene{height:330px}
  .xq-cup-wrap{left:12%;transform:scale(.8);transform-origin:bottom left}
  .xq-pi{width:140px;right:8%}
  .xq-bubble{top:6px;right:4%;max-width:200px;font-size:13px}
  .xq-reveal-sec .xq-in,.xq-xmas-body{grid-template-columns:1fr}
  .xq-charm{max-width:420px;justify-self:center;width:100%}
  .xq-rack-sticks{grid-template-columns:repeat(12,minmax(0,1fr));height:auto;row-gap:34px;padding-top:24px}
  .xq-rack-sticks .xq-rs{height:90px}
  .xq-timeline{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:22px;margin-inline:22px}
  .xq-xmas-body{padding:24px 22px 4px}
  .xq-orn .xq-ball{width:76px;height:76px;font-size:11px}
}
@media (max-width:520px){
  .xq-scroll{padding:28px 20px 24px}
  .xq-verses{grid-template-columns:1fr}
  .xq-verse.xq-exam{grid-template-columns:1fr}.xq-verse.xq-exam img{display:none}
  .xq-ornaments .xq-orn:nth-child(n+6){display:none}
}
@media (prefers-reduced-motion:reduce){.xq-shake,.xq-pop,.xq-lantern,.xq-pi.xq-bounce,.xq-rs.xq-new,.xq-orn,.xq-bulbs i,.xq-cdl.xq-lit::after{animation:none}.xq-stick.xq-out,.xq-rs{transition:none}}

/* LỆCH CÓ LÝ DO (#200 brief 0.3): mockup nhúng ảnh Pi đã CẮT SÁT nhân vật; repo dùng public/images/pi/*.webp
   540×722 có VIỀN TRONG SUỐT (nhân vật chiếm ~447×471, sát đáy). Phóng ảnh từ ĐÁY để nhân vật to đúng như mockup
   (190px ở sân khấu · 46/44px ở tip thi + lời Pi Giáng sinh) mà KHÔNG nhập ảnh mới. */
.xq-pi img{transform:scale(1.21);transform-origin:50% 100%}
.xq-verse.xq-exam img,.xq-said img{aspect-ratio:1;object-fit:cover;object-position:50% 100%;transform:scale(1.14);transform-origin:50% 100%}
/* Mockup: link test hiện GẠCH CHÂN (mặc định trình duyệt); home-pne.css bỏ gạch chân mọi <a> → trả lại cho khớp. */
.xq-test-link{text-decoration:underline}