/* Tử Vi · Chỉ Tay — giao diện v4 "Modern Heritage" (Odin-B, 27/10/2026), nối tiếp v3 "Mực tàu · giấy dó · dấu son":
   trang chủ = khung làm việc 2 cột (giới thiệu 5 : khung thao tác 7), tab Lập lá số ↔ Xem chỉ tay, 12 canh giờ,
   đổi lịch âm ngay khi gõ, kéo thả ảnh tay, "Lá số đã lưu" trên máy khách. Trang đọc (lá số, năm, hỏi thầy) giữ bố cục v3.
   Font tự host (OFL): Be Vietnam Pro (thân), Playfair Display (tiêu đề, dấu tiếng Việt chuẩn). Thiết kế: DESIGN-UI-v4.md. */
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-latin-400.woff2') format('woff2');font-weight:400;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-vietnamese-700.woff2') format('woff2');font-weight:600 700;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Be Vietnam Pro';src:url('/static/fonts/be-vietnam-pro-latin-700.woff2') format('woff2');font-weight:600 700;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';src:url('/static/fonts/playfair-display-vietnamese-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Playfair Display';src:url('/static/fonts/playfair-display-latin-600.woff2') format('woff2');font-weight:600;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'Playfair Display';src:url('/static/fonts/playfair-display-vietnamese-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0102-0103,U+0110-0111,U+0128-0129,U+0168-0169,U+01A0-01A1,U+01AF-01B0,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+1EA0-1EF9,U+20AB}
@font-face{font-family:'Playfair Display';src:url('/static/fonts/playfair-display-latin-500-italic.woff2') format('woff2');font-weight:500;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}

:root{
  /* giấy dó sáng · mực tàu · đỏ son (Sếp 27/10: Modern Heritage) */
  /* v5 (Sếp 28/10, "Oriental Editorial"): giấy gạo ấm, mực tàu, chu sa trầm, chỉ sách cổ */
  --paper:#FAF7F2; --paper-2:#F3EFE6; --sheet:#FCFAF5; --surface:#FFFFFF; --white:#FFFFFF;
  --ink:#1C1B18; --ink-2:#5C5852; --line:#E2DCD0; --line-2:#CFC6B3; --control:#A9A091;
  --son:#A82820; --son-dark:#84200F; --son-wash:#F8ECE7; --son-soft:#F1B9A6; --cham:#3F5A6E;
  --ink-strong:#000000; --placeholder:#857E72; --field-off:#EEE8DC; --topbar-bg:rgba(250,247,242,.96);
  --tint-day:#F4E2C8; --tint-day-line:#E2BF8E; --tint-cham:#E3E8EC; --tint-cham-line:#BCC8D2;
  /* ngũ hành — đạt tương phản AA trên giấy gạo */
  --hanh-kim:#7A6A4F; --hanh-moc:#2D6A4F; --hanh-thuy:#1D3557; --hanh-hoa:#B8292F; --hanh-tho:#9C6644;
  --serif:'Playfair Display','Noto Serif','Times New Roman',serif;
  --sans:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;
  --wrap:1120px; --read:680px; --gutter:16px;
  --r-sm:8px; --r-md:12px; --r-lg:16px;
  --shadow-card:0 1px 0 rgba(24,23,21,.04),0 28px 56px -32px rgba(24,23,21,.22);
  --focus-ring:0 0 0 3px rgba(24,23,21,.12);
  --ease-out:cubic-bezier(.23,1,.32,1);
  --topbar-h:65px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--topbar-h) + 12px)}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.6}
a{color:var(--son)} a:hover{color:var(--son-dark)}
h1,h2,h3{font-family:var(--serif);font-weight:600;margin:0;letter-spacing:-.01em;line-height:1.22;text-wrap:balance}
p{margin:0}
[hidden]{display:none!important}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
:focus-visible{outline:2px solid var(--son);outline-offset:2px}
.ic{width:1em;height:1em;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* khung trang */
.page{width:100%;max-width:var(--wrap);margin:0 auto;padding:0 var(--gutter) 48px}
.page--narrow{max-width:640px}
.page--read>*{max-width:var(--read);margin-left:auto;margin-right:auto}
.page--read>.result-head,.page--read>.chart,.page--read>.year-facts{max-width:880px}
/* thanh đầu dính: nền giấy gần đặc (không kính mờ), nét mảnh */
.topbar{position:sticky;top:0;z-index:30;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px max(var(--gutter),calc((100% - var(--wrap)) / 2 + var(--gutter)));background:var(--topbar-bg);border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;color:var(--ink);text-decoration:none;min-height:44px}
.brand:hover{color:var(--ink)}
.brand-name{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.3}
.topnav{display:flex;align-items:center;gap:8px 18px}
.topmode{display:none;gap:2px;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--surface)}
.topmode-link{display:flex;align-items:center;min-height:38px;padding:0 14px;border-radius:999px;font-size:14px;font-weight:600;color:var(--ink-2);text-decoration:none;transition:background-color .16s var(--ease-out),color .16s var(--ease-out)}
.topmode-link:hover{color:var(--ink)}
.topmode-link[aria-current=page]{background:var(--ink);color:var(--surface)}
.saved-link{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 2px;font-size:15px;font-weight:600;color:var(--ink);text-decoration:none}
.saved-link:hover{color:var(--son)}
.saved-link .ic{width:20px;height:20px}
.saved-long{display:none}
.saved-count{min-width:22px;height:22px;padding:0 6px;border-radius:999px;background:var(--son);color:var(--surface);font-size:12px;font-weight:700;line-height:22px;text-align:center}
.footer{margin-top:24px;padding:28px max(20px,calc((100% - var(--wrap)) / 2 + var(--gutter))) 36px;border-top:1px solid var(--line);font-size:14px;color:var(--ink-2);display:flex;flex-direction:column;gap:10px}
.footer-brand{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-weight:600;font-size:16px;color:var(--ink)}
.footer-links{display:flex;flex-wrap:wrap;gap:0 20px}
.footer-links a{display:inline-flex;align-items:center;min-height:44px}

/* con dấu son */
.seal{width:36px;height:36px;flex:0 0 auto;background:var(--son);color:var(--sheet);border-radius:3px;display:inline-flex;flex-direction:column;align-items:center;justify-content:center;font-family:var(--serif);font-weight:600;font-size:12px;line-height:1.05;letter-spacing:1px}
.seal--lg{width:48px;height:48px;font-size:14px}
.seal--sm{width:30px;height:30px;font-size:10px}
.seal-dot{width:10px;height:10px;background:var(--son);border-radius:2px;display:inline-block}

/* chữ */
.eyebrow{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px;font-size:14px;font-weight:600;line-height:1.5;color:var(--son)}
.eyebrow::before{content:"";width:22px;height:1.5px;background:var(--son);flex:0 0 auto}
.eyebrow a{display:inline-flex;align-items:center;min-height:44px;margin:-10px -5px -10px 0}
.lead{font-size:16px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.hint{font-size:14px;color:var(--ink-2)}
.muted{font-weight:400;color:var(--ink-2)}
.fine{font-size:13px;color:var(--ink-2);text-align:center}
.badge{padding:1px 8px;border:1px solid currentColor;border-radius:999px;font-size:12px;font-weight:500;line-height:1.5}
.badge--son{display:inline-block;vertical-align:middle;border-color:transparent;background:var(--son-wash);color:var(--son);font-family:var(--sans);font-weight:600;letter-spacing:0}

/* ===== ô nhập dùng chung ===== */
.sheet{background:var(--sheet);border:1px solid var(--line);border-radius:6px}
.field{border:0;padding:0;margin:0;min-width:0;display:flex;flex-direction:column;gap:8px}
.field legend,.label{font-size:14px;font-weight:600;padding:0;color:var(--ink)}
input,select,button{font:inherit}
input[type=text],input:not([type]),input[inputmode],input[type=time],select{width:100%;min-height:48px;padding:11px 12px;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);font-size:16px;transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out)}
input::placeholder{color:var(--placeholder)}
input:focus,select:focus{outline:none;border-color:var(--ink);box-shadow:var(--focus-ring)}
select:disabled{background:var(--field-off);color:var(--ink-2)}
.check{display:flex;align-items:flex-start;gap:10px;font-size:15px;min-height:44px;padding-top:2px;cursor:pointer}
.check input{width:20px;height:20px;margin:1px 0 0;accent-color:var(--ink);flex:0 0 auto}
.choice-row{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.choice input,.chip input,.seg input,.hour input,.gender input,.switch input,.consent input{position:absolute;opacity:0;width:1px;height:1px}
.choice span{display:flex;align-items:center;justify-content:center;min-height:48px;border:1px solid var(--line-2);border-radius:4px;background:var(--white);cursor:pointer;font-size:15px}
.choice input:checked+span{border:1.5px solid var(--ink);background:var(--paper);font-weight:600}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip span{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:6px 16px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);font-size:14px;cursor:pointer;transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out),color .16s var(--ease-out),transform .12s var(--ease-out)}
.chip .ic{width:17px;height:17px;color:var(--son);transition:color .16s var(--ease-out)}
.chip input:checked+span{background:var(--ink);border-color:var(--ink);color:var(--surface)}
.chip input:checked+span .ic{color:var(--son-soft)}
.chip:active span{transform:scale(.97)}
.choice input:focus-visible+span,.chip input:focus-visible+span,.seg input:focus-visible+span,.hour input:focus-visible+.hour-card,.gender input:focus-visible+span,.switch input:focus-visible+.switch-track,.consent input:focus-visible+.consent-box{outline:2px solid var(--son);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.chip span:hover{border-color:var(--ink-2)}}

.button{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:10px;min-height:52px;padding:10px 22px;border-radius:4px;border:1px solid var(--ink);font-size:16px;font-weight:600;line-height:1.4;text-decoration:none;cursor:pointer}
.button--ink{background:var(--ink);color:var(--sheet)}
.button--ink:hover{background:var(--ink-strong);color:var(--sheet)}
.button--line{background:transparent;color:var(--ink)}
.button--line:hover{background:var(--sheet);color:var(--ink)}
.button--small{min-height:44px;padding:6px 14px;font-size:14px;font-weight:500;background:transparent;color:var(--ink);border-color:var(--line-2)}
.button--small .ic{width:16px;height:16px}
.button[disabled]{opacity:.6;cursor:progress}

.loading-state{display:flex;align-items:center;justify-content:center;gap:10px;font-size:14px;color:var(--ink-2);text-align:left}
.spinner{width:18px;height:18px;flex:0 0 auto;border:2px solid var(--line-2);border-top-color:var(--son);border-radius:50%;animation:spin 1s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.spinner{animation-duration:2.4s}html{scroll-behavior:auto}}

/* ===== trang chủ v4: khung làm việc ===== */
.page--home{overflow-x:clip}
.ws{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:22px;padding-top:24px}
.ws-side{display:contents}
.ws-intro{order:1;position:relative;display:flex;flex-direction:column;gap:12px}
.ws-card{order:2}
.bento{order:3}
.ws-intro h1{font-size:clamp(34px,9vw,52px);line-height:1.2;max-width:15ch}
.ws-intro h1 em{font-style:italic;font-weight:500}
.ws-intro .lead{max-width:34em}
html[data-mode=tuvi] [data-for=palm],html[data-mode=palm] [data-for=tuvi]{display:none!important}
html:not(.js)[data-mode] .panel[data-for=palm]{display:flex!important;margin-top:24px;padding-top:24px;border-top:1px solid var(--line)}
@keyframes mode-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
@media (prefers-reduced-motion:no-preference){html.mode-moved [data-for]{animation:mode-in .28s var(--ease-out) both}}

/* vòng 12 địa chi + bát quái: tự vẽ một lần khi mở trang, xoay theo cuộn trang, quay một cung khi đổi tab */
.ws-ring{position:absolute;z-index:-1;top:-36px;right:-170px;width:400px;aspect-ratio:1;pointer-events:none;opacity:.12}
.ring{display:block;width:100%;height:100%;overflow:visible}
.ring-lines circle,.ring-lines path{fill:none;stroke:var(--ink);stroke-width:1;vector-effect:non-scaling-stroke}
.ring-lines .ring-dash{stroke-dasharray:2 7}
.ring-chi text{font-family:var(--serif);font-weight:600;font-size:17px;fill:var(--ink);text-anchor:middle;dominant-baseline:central}
.ring-que rect{fill:var(--ink)}
.ring-enso{fill:none;stroke:var(--son);stroke-width:11;stroke-linecap:round;opacity:.9}
.ring-dipper path{fill:none;stroke:var(--ink);stroke-width:1.2;vector-effect:non-scaling-stroke}
.ring-dipper circle{fill:var(--ink)}
.ring-turn{transform-origin:0 0;transition:transform 1.2s var(--ease-out)}
html[data-mode=palm] .ring-turn{transform:rotate(-30deg)}
@keyframes ring-draw{to{stroke-dashoffset:0}}
@keyframes ring-scroll{to{transform:rotate(45deg)}}
@media (prefers-reduced-motion:no-preference){
  .ring-lines circle[pathLength]{stroke-dasharray:1;stroke-dashoffset:1;animation:ring-draw 1.8s var(--ease-out) .1s forwards}
  @supports (animation-timeline:scroll()){.ring-scroll{transform-origin:0 0;animation:ring-scroll linear both;animation-timeline:scroll(root)}}
}
@media (prefers-reduced-motion:reduce){.ring-turn{transition:none}}

/* thẻ "lập thế nào": một thẻ rộng có ví dụ thật + hai thẻ nhỏ, mỗi thẻ một minh hoạ riêng */
.bento{display:flex;flex-direction:column;gap:12px}
.bento-title{font-family:var(--sans);font-size:14px;font-weight:600;letter-spacing:0;color:var(--ink-2)}
.bento-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:10px}
.bento-card{display:flex;flex-direction:column;gap:8px;padding:16px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md)}
.bento-card--wide{display:grid;gap:14px}
.bento-text{display:flex;flex-direction:column;gap:6px}
.bento-card h3{display:flex;align-items:center;gap:8px;font-size:18px;line-height:1.3}
.bento-card h3 .ic{width:20px;height:20px;color:var(--son)}
.bento-card p{font-size:15px;line-height:1.55;color:var(--ink-2)}
.cal-compare{margin:0;display:flex;flex-direction:column;gap:8px}
.cal-compare figcaption{font-size:13px;color:var(--ink-2)}
.cal-compare dl{margin:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:8px}
.cal-compare dl>div{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.cal-compare dt{font-size:13px;color:var(--ink-2)}
.cal-compare dd{margin:2px 0 0;font-family:var(--serif);font-weight:600;font-size:16px;line-height:1.3}
.cal-compare .is-vn{border-color:var(--son);background:var(--son-wash)}
.cal-compare .is-vn dt{color:var(--son);font-weight:600}
.lv-scale{list-style:none;margin:auto 0 0;padding:4px 0 0;display:flex;flex-wrap:wrap;gap:6px}
.lv-scale li{padding:1px 10px;border:1px solid currentColor;border-radius:999px;font-size:13px;font-weight:600;line-height:1.6}
.gates{list-style:none;margin:auto 0 0;padding:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:4px 0;font-size:13px;font-weight:600}
.gates li{display:flex;align-items:center}
.gates li+li::before{content:"";width:14px;height:1px;margin:0 6px;background:var(--control)}
.checks{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:6px 12px;font-size:14px}
.checks li{display:flex;align-items:center;gap:6px}
.checks .ic{width:16px;height:16px;color:var(--son)}

/* khung thao tác */
.ws-card{container:card/inline-size;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--shadow-card);padding:10px 16px 22px;scroll-margin-top:calc(var(--topbar-h) + 12px)}
.ws-card{position:relative}
.ws-anchor{position:absolute;top:0;left:0;width:1px;height:1px}
.mode-tabs{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:4px;margin:0 -6px 20px;background:var(--paper);border:1px solid var(--line);border-radius:12px}
.mode-tab{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:7px;min-height:48px;padding:6px 8px;border-radius:9px;color:var(--ink-2);font-size:15px;font-weight:600;line-height:1.3;text-decoration:none;transition:color .16s var(--ease-out)}
.mode-tab:hover{color:var(--ink)}
.mode-tab .ic{width:20px;height:20px;transition:color .16s var(--ease-out)}
.mode-tab[aria-selected=true]{color:var(--ink)}
.mode-tab[aria-selected=true] .ic{color:var(--son)}
.mode-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:9px;background:var(--surface);box-shadow:0 0 0 1px var(--line),0 2px 6px -2px rgba(24,23,21,.12);transition:transform .3s var(--ease-out)}
html[data-mode=palm] .mode-thumb{transform:translateX(100%)}
.mode-tab>span{white-space:nowrap}
.tab-long{display:none}
.tab-badge{display:none;padding:0 7px;border-radius:999px;background:var(--son-wash);color:var(--son);font-size:12px;font-weight:600;line-height:20px}
.panel{display:flex;flex-direction:column;gap:24px}

/* ngày sinh: gạt lịch + 3 ô liền một khối + dòng đổi lịch */
.field--date{display:block}
.field--date>legend{float:left;line-height:46px}
.field--date>.seg{float:right}
.field--date>.date-group{clear:both}
.field--date>.check--leap,.field--date>.convert,.field--date>.hint,.field--date>.field-error{margin-top:8px}
.seg{display:inline-flex;padding:3px;border:1px solid var(--line);border-radius:999px;background:var(--paper)}
.seg label{position:relative}
.seg span{display:block;min-height:38px;padding:8px 14px;border-radius:999px;font-size:14px;line-height:22px;color:var(--ink-2);cursor:pointer;transition:background-color .16s var(--ease-out),color .16s var(--ease-out)}
.seg input:checked+span{background:var(--ink);color:var(--surface)}
.date-group{margin-top:10px;display:grid;grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1.4fr);align-items:center;border:1px solid var(--line-2);border-radius:var(--r-sm);background:var(--surface);transition:border-color .16s var(--ease-out),box-shadow .16s var(--ease-out)}
.date-group:focus-within{border-color:var(--ink);box-shadow:var(--focus-ring)}
.date-group input[inputmode]{min-height:54px;padding:10px 4px;border:0;border-radius:var(--r-sm);background:transparent;box-shadow:none;text-align:center;font-size:18px;font-variant-numeric:tabular-nums}
.date-group input[inputmode]:focus{box-shadow:none;background:var(--paper)}
.date-sep{font-size:20px;line-height:1.2;color:var(--line-2)}
.has-error .date-group{border-color:var(--son)}
.convert{display:flex;align-items:baseline;gap:8px;padding:8px 12px;border-radius:var(--r-sm);background:var(--paper);font-size:15px;line-height:1.5;color:var(--ink)}
.convert::before{content:"";flex:0 0 auto;width:7px;height:7px;border-radius:1px;background:var(--son);transform:translateY(-2px)}
.convert--warn{background:var(--son-wash);color:var(--son-dark)}
.field-error{font-size:14px;font-weight:600;color:var(--son-dark)}

/* giờ sinh: 12 canh giờ, mỗi ô có mặt đồng hồ 24 giờ (Tý trên đỉnh, Ngọ dưới đáy, nửa dưới là ban ngày) */
.hours{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;transition:opacity .2s var(--ease-out)}
.hours.is-off{opacity:.42}
.hour{position:relative;min-width:0}
.hour-card{display:grid;grid-template-columns:auto minmax(0,1fr);grid-template-areas:"dial name" "time time";align-items:center;gap:2px 7px;min-height:66px;padding:8px 9px 7px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out),box-shadow .16s var(--ease-out),transform .12s var(--ease-out)}
.hours.is-off .hour-card{cursor:not-allowed}
.dial{grid-area:dial;width:20px;height:20px;overflow:visible}
.dial circle{fill:none;stroke:var(--control);stroke-width:1.2}
.dial-day{fill:var(--paper-2)}
.dial-arc{fill:var(--ink-2);transition:fill .16s var(--ease-out)}
.hour-name{grid-area:name;font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.2}
.hour-time{grid-area:time;font-size:13px;line-height:1.4;color:var(--ink-2);font-variant-numeric:tabular-nums;white-space:nowrap}
.hour input:checked+.hour-card{border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.hour input:checked+.hour-card .dial-arc{fill:var(--son)}
.hour input:checked+.hour-card .dial circle{stroke:var(--ink)}
.hour input:checked+.hour-card .hour-animal{color:var(--son)}
.hour:active .hour-card{transform:scale(.97)}
.has-error .hour-card{border-color:var(--son-soft)}
@media (hover:hover) and (pointer:fine){.hours:not(.is-off) .hour-card:hover{border-color:var(--ink-2)}}
.hour-tools{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 16px}
.switch{position:relative;display:inline-flex;align-items:center;gap:10px;min-height:44px;font-size:15px;cursor:pointer}
.switch-track{position:relative;flex:0 0 auto;width:40px;height:24px;border-radius:999px;background:var(--control);transition:background-color .16s var(--ease-out)}
.switch-track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:var(--surface);box-shadow:0 1px 2px rgba(24,23,21,.25);transition:transform .2s var(--ease-out)}
.switch input:checked+.switch-track{background:var(--ink)}
.switch input:checked+.switch-track::after{transform:translateX(16px)}
.clock{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--ink-2)}
.clock input[type=time]{width:auto;min-height:44px;padding:6px 10px}

/* giới tính: hai thẻ lớn; khi biết năm sinh hiện thêm Dương nam / Âm nữ… như ô giữa lá số */
.genders{display:grid;grid-template-columns:1fr 1fr;gap:8px}
.gender{position:relative}
.gender>span{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:60px;padding:8px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);cursor:pointer;transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out),box-shadow .16s var(--ease-out),transform .12s var(--ease-out)}
.gender b{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.25}
.gender small{font-size:13px;line-height:1.4;color:var(--ink-2)}
.gender small:empty{display:none}
.gender input:checked+span{border-color:var(--ink);background:var(--paper);box-shadow:inset 0 0 0 1px var(--ink)}
.gender input:checked+span small{color:var(--son);font-weight:600}
.gender:active>span{transform:scale(.98)}
.has-error .gender>span{border-color:var(--son-soft)}
@media (hover:hover) and (pointer:fine){.gender>span:hover{border-color:var(--ink-2)}}

/* tên gọi: nhãn nổi */
.float{position:relative;gap:0}
.float input{min-height:58px;padding:24px 12px 7px}
.float label{position:absolute;top:18px;left:13px;max-width:calc(100% - 26px);font-size:16px;line-height:1.3;color:var(--ink-2);pointer-events:none;transform-origin:left top;transition:transform .16s var(--ease-out),color .16s var(--ease-out);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.float input::placeholder{color:transparent;transition:color .16s var(--ease-out)}
.float input:focus::placeholder{color:var(--placeholder)}
.float input:focus+label,.float input:not(:placeholder-shown)+label{transform:translateY(-11px) scale(.8);color:var(--ink)}

/* nút chính + cam kết */
.submit-area{display:flex;flex-direction:column;gap:12px}
.button--cta{width:100%;min-height:56px;border-radius:12px;font-size:17px;transition:background-color .16s var(--ease-out),box-shadow .2s var(--ease-out),transform .12s var(--ease-out)}
.button--cta .seal-dot{transition:transform .3s var(--ease-out)}
.button--cta:active{transform:scale(.98)}
@media (hover:hover) and (pointer:fine){
  .button--cta:hover{background:var(--ink-strong);box-shadow:0 12px 26px -14px rgba(168,40,24,.75)}
  .button--cta:hover .seal-dot{transform:rotate(45deg) scale(1.15)}
}
.trust{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:4px 16px;font-size:13px;line-height:1.5;color:var(--ink-2)}
.trust li{display:inline-flex;align-items:center;gap:5px}
.trust .ic{width:15px;height:15px;color:var(--son)}
.turnstile{min-height:65px}

/* chỉ tay: hướng dẫn chụp, 2 khung kéo thả có xem trước, hộp cam kết */
.guide{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;counter-reset:guide}
.guide li{position:relative;display:flex;flex-direction:column;align-items:center;gap:6px;padding:14px 6px 10px;border-radius:var(--r-sm);background:var(--paper);font-size:13px;line-height:1.4;color:var(--ink-2);text-align:center;counter-increment:guide}
.guide li::before{content:counter(guide);position:absolute;top:5px;left:8px;font-family:var(--serif);font-weight:600;font-size:13px;color:var(--son)}
.guide .ic{width:26px;height:26px;color:var(--ink)}
.drops{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
.drop{display:flex;flex-direction:column;gap:6px;min-width:0}
.drop-target{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:208px;padding:14px 10px;border:1.5px dashed var(--control);border-radius:var(--r-md);background:var(--paper);text-align:center;cursor:pointer;overflow:hidden;transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out),transform .2s var(--ease-out)}
.drop-target:has(input:focus-visible){outline:2px solid var(--son);outline-offset:2px}
.drop-target input{position:absolute;opacity:0;width:1px;height:1px}
.drop-target strong{font-size:15px}
.palm-art{width:76px;height:95px;overflow:visible;transition:transform .3s var(--ease-out)}
.palm-art.mirror{transform:scaleX(-1)}
.palm-outline{fill:none;stroke:var(--ink);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.palm-line{fill:none;stroke:var(--son);stroke-width:1.5;stroke-linecap:round}
.drop-hint{max-width:20ch;font-size:13px;line-height:1.45;color:var(--ink-2)}
.drop-hint-fine{display:none}
.drop.is-drag .drop-target{border-style:solid;border-color:var(--son);background:var(--son-wash);transform:scale(1.015)}
.drop.is-checking .drop-target{opacity:.7}
.drop.has-preview .drop-target{border-style:solid;border-color:var(--ink)}
.drop-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.drop-bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 6px;font-size:13px;color:var(--ink-2)}
.drop-info{min-width:0;overflow-wrap:anywhere}
.drop-clear{display:inline-flex;align-items:center;gap:4px;min-height:40px;padding:2px 12px;border:1px solid var(--line-2);border-radius:999px;background:var(--surface);color:var(--ink);font-size:13px;cursor:pointer}
.drop-clear .ic{width:14px;height:14px}
.drop-msg{font-size:13px;line-height:1.45;color:var(--ink-2)}
.drop-msg--bad{font-weight:600;color:var(--son-dark)}
.has-error .drop-target{border-color:var(--son)}
@media (hover:hover) and (pointer:fine){
  .drop-hint-fine{display:inline}
  .drop-hint-touch{display:none}
  .drop-target:hover{border-color:var(--ink);background:var(--surface)}
  .drop-target:hover .palm-art{transform:translateY(-3px)}
  .drop-target:hover .palm-art.mirror{transform:scaleX(-1) translateY(-3px)}
}
.consent{position:relative;display:block;cursor:pointer}
.consent-box{position:relative;display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;padding:14px 50px 14px 14px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper);font-size:14px;line-height:1.55;color:var(--ink-2);transition:border-color .16s var(--ease-out),background-color .16s var(--ease-out)}
.consent-box>.ic{width:22px;height:22px;color:var(--son)}
.consent-box b{display:block;margin-bottom:2px;font-size:15px;color:var(--ink)}
.consent-box::after{content:"";position:absolute;top:14px;right:14px;width:22px;height:22px;border:1.5px solid var(--control);border-radius:6px;background:var(--surface) center/14px no-repeat;transition:background-color .16s var(--ease-out),border-color .16s var(--ease-out)}
.consent input:checked+.consent-box{border-color:var(--ink);background:var(--surface)}
.consent input:checked+.consent-box::after{border-color:var(--ink);background-color:var(--ink);background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E")}
.has-error .consent-box{border-color:var(--son)}

/* các phần dưới khung làm việc: nét chỉ mảnh phân đoạn */
.band{margin-top:56px;padding-top:32px;border-top:1px solid var(--line);display:flex;flex-direction:column;gap:24px}
.band-intro{display:flex;flex-direction:column;gap:12px}
.band h2{font-size:clamp(28px,7vw,38px);max-width:18ch}

.ledger{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink)}
.ledger li{display:flex;flex-direction:column;gap:6px;padding:18px 0;border-bottom:1px solid var(--line)}
.ledger-main{display:flex;flex-direction:column;gap:4px}
.ledger h3{font-size:21px}
.ledger p{font-size:16px;color:var(--ink-2);max-width:40em}
.ledger .ledger-items{margin:4px 0 0;padding:0 0 0 18px;list-style:disc;font-size:16px;color:var(--ink-2);max-width:40em}
.ledger .ledger-items li{display:list-item;padding:2px 0;border:0}
.ledger-price{font-size:14px;font-weight:600;color:var(--ink-2)}
.ledger-price b{font-family:var(--serif);font-weight:600;font-size:22px;color:var(--son);margin-right:4px}

.faq-list{border-top:1px solid var(--ink)}
.faq-item{border-bottom:1px solid var(--line)}
.faq-item summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 0;font-family:var(--serif);font-weight:600;font-size:19px;line-height:1.3;cursor:pointer;list-style:none}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";flex:0 0 auto;font-family:var(--sans);font-weight:400;font-size:22px;line-height:1.2;color:var(--son)}
.faq-item[open] summary::after{content:"–"}
.faq-item p{padding:0 0 18px;font-size:16px;color:var(--ink-2);max-width:42em}

.closing{margin-top:64px;padding:48px 8px 24px;border-top:1px solid var(--line);display:flex;flex-direction:column;align-items:center;gap:14px;text-align:center}
.closing h2{font-size:clamp(28px,7vw,40px);max-width:16ch}
.closing .lead{max-width:30em}
.closing .button{margin-top:6px;min-width:220px}

/* lá số đã lưu (danh sách trên máy khách) */
.saved{padding:40px 0 24px;display:flex;flex-direction:column;gap:14px}
.saved h1{font-size:clamp(32px,8vw,44px)}
.saved-list{list-style:none;margin:8px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.saved-item{display:flex;align-items:center;gap:8px;padding-right:10px;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-md)}
.saved-open{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;padding:14px 16px;color:var(--ink);text-decoration:none}
.saved-open:hover{color:var(--ink)}
.saved-open strong{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.3;transition:color .16s var(--ease-out)}
.saved-open:hover strong{color:var(--son)}
.saved-kind{font-size:13px;font-weight:600;color:var(--son)}
.saved-meta{font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.saved-remove{flex:0 0 auto;min-height:40px;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink-2);font-size:14px;cursor:pointer}
.saved-remove:hover{border-color:var(--ink);color:var(--ink)}
.saved-empty{display:flex;flex-direction:column;align-items:flex-start;gap:14px;padding:24px 0}
.saved-empty p{font-size:16px;color:var(--ink-2)}
.saved-tools{margin-top:4px}

/* ===== trang kết quả ===== */
.result-head{padding:28px 0 20px;display:flex;flex-direction:column;gap:8px}
.result-head h1{font-size:clamp(30px,8vw,48px);line-height:1.2}
.meta{font-size:14px;color:var(--ink-2)}
.notice{margin-top:6px;padding:10px 12px;border:1px solid var(--line-2);border-radius:4px;background:var(--sheet);font-size:14px}

.board{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-rows:minmax(124px,auto);gap:1px;background:var(--ink);border:1.5px solid var(--ink)}
.slot{display:flex;min-width:0}
.slot-phu-mau{grid-column:1;grid-row:1}.slot-phuc-duc{grid-column:2;grid-row:1}.slot-dien-trach{grid-column:3;grid-row:1}.slot-quan-loc{grid-column:4;grid-row:1}
.slot-menh{grid-column:1;grid-row:2}.slot-phu-the{grid-column:4;grid-row:2}
.slot-thien-di{grid-column:1;grid-row:3}.slot-no-boc{grid-column:4;grid-row:3}
.slot-tat-ach{grid-column:1;grid-row:4}.slot-tai-bach{grid-column:2;grid-row:4}.slot-tu-tuc{grid-column:3;grid-row:4}.slot-huynh-de{grid-column:4;grid-row:4}
.slot-center{grid-column:2/4;grid-row:2/4;background:var(--paper)}
.cell{flex:1;min-width:0;display:flex;flex-direction:column;gap:3px;padding:6px;background:var(--sheet);color:var(--ink);text-decoration:none;overflow-wrap:anywhere}
.cell:hover{background:var(--white);color:var(--ink)}
.cell--menh{background:var(--white);box-shadow:inset 0 0 0 2px var(--son)}
.cell--blank{background:var(--sheet)}
.cell-top{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 4px;font-size:10px;color:var(--ink-2);line-height:1.3}
.tag-than{background:var(--ink);color:var(--sheet);padding:0 4px;border-radius:2px;white-space:nowrap}
.cell-major{display:flex;flex-direction:column;font-size:12px;font-weight:600;line-height:1.25}
.major--empty{font-weight:400;color:var(--ink-2)}
.cell-hoa{font-size:10px;font-weight:600;color:var(--son);line-height:1.3}
.cell-minor{font-size:10px;line-height:1.3;color:var(--ink-2)}
.cell-minor .harsh{color:var(--cham)}
.cell-name{margin-top:auto;font-size:10px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--son)}
.cell--menh .cell-name{align-self:flex-start;background:var(--son);color:var(--sheet);padding:1px 5px;border-radius:2px;font-size:11px}
.lv{font-weight:700}
.lv--miếu,.lv--vượng{color:var(--son)}
.lv--đắc{color:var(--ink-2)}
.lv--hãm{color:var(--cham)}
.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;padding:12px;text-align:center;font-size:12px;color:var(--ink-2);line-height:1.45}
.center strong{font-family:var(--serif);font-weight:600;font-size:18px;color:var(--ink);line-height:1.25}
.center small{font-size:10px}
.legend{margin-top:10px;display:flex;flex-wrap:wrap;gap:4px 14px;font-size:13px;color:var(--ink-2)}

/* bài luận: trình bày như trang sách, mỗi mục ngăn bằng nét mảnh */
.reading{margin-top:36px;display:flex;flex-direction:column;gap:12px}
.tabs{display:flex;gap:24px;border-bottom:1px solid var(--line);overflow-x:auto}
.tabs a{padding:12px 0;min-height:44px;font-size:15px;color:var(--ink-2);text-decoration:none;white-space:nowrap}
.tabs a[aria-current=page]{color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--son)}
.card{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:18px;display:flex;flex-direction:column;gap:10px}
.reading>.card{background:none;border:0;border-radius:0;border-bottom:1px solid var(--line);padding:22px 0 24px}
.reading>.card:last-of-type{border-bottom:0}
.card-head{display:flex;justify-content:space-between;align-items:baseline;gap:4px 12px;flex-wrap:wrap}
.card-head h3{font-size:24px;line-height:1.25}
.card-head span{font-size:14px;color:var(--son);font-weight:600}
.card p,.entry p{font-size:16px;line-height:1.75}
.advice{padding:12px 14px;background:var(--sheet);border:1px solid var(--line);border-radius:4px}
.advice .nen{display:inline;margin-right:8px;font-family:var(--serif);font-style:italic;font-weight:500;font-size:18px;line-height:1.2;color:var(--son)}

.meanings{margin-top:48px;display:flex;flex-direction:column;gap:0}
.meanings h2{font-size:30px}
.meanings .lead{margin:8px 0 18px}
.meaning{border-top:1px solid var(--line);scroll-margin-top:12px}
.meaning:last-of-type{border-bottom:1px solid var(--line)}
.meaning summary{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:14px 4px;min-height:56px;cursor:pointer;list-style:none}
.meaning summary::-webkit-details-marker{display:none}
.meaning summary::after{content:"+";font-size:20px;line-height:1;color:var(--son)}
.meaning[open] summary::after{content:"–"}
.m-name{font-family:var(--serif);font-weight:600;font-size:20px;line-height:1.3;flex:1}
.m-sub{font-size:13px;color:var(--ink-2)}
.meaning:target,.meaning.is-flash{background:var(--sheet);box-shadow:0 0 0 2px var(--son)}
.entry{padding:0 4px 18px;display:flex;flex-direction:column;gap:8px}
.entry+.entry{padding-top:16px;border-top:1px dashed var(--line-2)}
.entry-title{font-weight:600;font-size:16px!important}
.kw{display:flex;flex-wrap:wrap;gap:6px}
.kw span{font-size:13px;padding:3px 10px;border:1px solid var(--line-2);border-radius:999px}

.share{margin-top:48px}
.share h2{font-size:30px;margin-bottom:14px}
.share-row{display:flex;gap:20px;align-items:flex-end}
.share-card{position:relative;margin:0;width:168px;aspect-ratio:9/16;flex:0 0 auto;padding:16px 14px;background:var(--paper);border:1.5px solid var(--ink);display:flex;flex-direction:column;gap:10px;overflow:hidden}
.share-card .enso{width:150px;height:150px;right:-40px;top:auto;bottom:40px;opacity:.13}
.share-eyebrow{font-size:9px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--son)}
.share-quote{font-family:var(--serif);font-style:italic;font-weight:500;font-size:17px;line-height:1.25}
.share-stars{font-size:10px;color:var(--ink-2)}
.share-site{margin-top:auto;font-size:9px;color:var(--ink-2)}
.share-actions{flex:1;display:flex;flex-direction:column;gap:8px}
.share-actions--solo{margin-top:32px}
.action-status{min-height:1.2em;font-size:14px;color:var(--son)}

.feedback{margin-top:32px;padding:16px 0;display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:15px;background:none;border:0;border-radius:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.feedback div{display:flex;gap:8px}

.empty{padding:64px 0;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.empty h1{font-size:38px;line-height:1.22}

/* giọng văn + mở khoá bài luận (5.000đ/lượt, 27/10) — thẻ "phiếu" có khung trong mảnh */
.style-bar{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;padding:12px 0}
.style-bar select{width:auto;flex:1 1 200px;min-height:44px}
.free-label{margin-top:8px;font-size:14px;font-weight:600;color:var(--son)}
.bullets{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:16px;line-height:1.65}
.unlock{margin-top:16px;padding:26px 22px;display:flex;flex-direction:column;gap:14px;border:1px solid var(--ink);box-shadow:inset 0 0 0 5px var(--sheet),inset 0 0 0 6px var(--line-2)}
.unlock h3{font-size:26px;line-height:1.22}
.unlock-sub{font-size:16px;color:var(--ink-2)}
.perks{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:15px}
.perks li::marker{color:var(--son)}
.unlock-form{display:flex;flex-direction:column;gap:16px}
.pay{display:flex;flex-wrap:wrap;gap:16px;align-items:flex-start}
.qr{width:220px;height:220px;max-width:100%;background:var(--white);border:1px solid var(--line);border-radius:4px}
.pay-info{flex:1 1 220px;min-width:0;display:grid;grid-template-columns:max-content 1fr;gap:8px 12px;margin:0;font-size:15px}
.pay-info dt{color:var(--ink-2)}
.pay-info dd{margin:0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;overflow-wrap:anywhere}
.code{font-size:18px;letter-spacing:.06em;color:var(--son)}
.copy{font:inherit;font-size:13px;min-height:36px;padding:2px 10px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);cursor:pointer}

/* ảnh chia sẻ: nền theo giọng văn (27/10) */
.share-card{background-size:cover;background-position:center}
.share-card .enso{display:none}
.share-panel{display:flex;flex-direction:column;gap:6px;margin-top:22px;padding:10px 9px;border-radius:2px}
.share-card--light .share-panel{background:rgba(243,237,225,.72)}
.share-card--dark .share-panel{background:rgba(12,14,24,.58)}
.share-card--dark .share-eyebrow{color:#E6BE6E}
.share-card--dark .share-quote{color:#FBF8F1}
.share-card--dark .share-stars,.share-card--dark .share-site{color:#E8E0D0}
.share-card--light .share-site{color:var(--ink)}

/* Vận năm (27/10): thẻ mời trên trang lá số, bảng dữ kiện kẻ như lá số, dải nhịp 12 tháng */
.year-promo{margin-top:40px;margin-bottom:8px;padding:26px 22px;display:flex;flex-direction:column;gap:12px;border:1px solid var(--ink);box-shadow:inset 0 0 0 5px var(--sheet),inset 0 0 0 6px var(--line-2)}
.year-promo h2{margin:0;font-family:var(--serif);font-size:28px;font-weight:600}
.year-promo p{margin:0}
.year-facts{margin:8px auto}
.fact-grid{display:flex;flex-wrap:wrap;gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.fact{flex:1 1 200px;background:var(--sheet);padding:16px 18px}
.fact--wide{flex-basis:100%}
.fact-label{margin:0;font-size:14px;font-weight:600;line-height:1.5;color:var(--son)}
.fact-main{margin:4px 0 2px;font-family:var(--serif);font-size:24px;font-weight:600;line-height:1.25}
.fact-sub{margin:0;font-size:14px;color:var(--ink-2)}
.hoa-list{list-style:none;margin:8px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:6px 24px;font-size:15px}
.hoa b{display:inline-block;min-width:86px;color:var(--son)}
.hoa--4 b{color:var(--cham)}
.months-title{margin:28px 0 12px;font-family:var(--serif);font-size:22px;font-weight:600}
.months{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:6px}
.month{border-radius:4px;padding:8px 4px;text-align:center;display:flex;flex-direction:column;gap:2px;border:1px solid var(--line)}
.month-name{font-weight:600;font-size:14px}
.month-tone{font-size:12px;line-height:1.3;color:var(--ink-2)}
.month--day{background:var(--tint-day);border-color:var(--tint-day-line)}
.month--giu{background:var(--sheet)}
.month--cham{background:var(--tint-cham);border-color:var(--tint-cham-line)}
.months-legend{margin:8px 0 0;font-size:13px;color:var(--ink-2);display:flex;flex-wrap:wrap;align-items:center;gap:4px 12px}
.month-key{display:inline-block;width:12px;height:12px;border-radius:2px;border:1px solid var(--line);margin-right:-4px;vertical-align:middle}
.year-facts .fine{margin-top:12px;text-align:left}
.year-promo .months .month-tone{display:none}
.year-promo .months{grid-template-columns:repeat(12,1fr);gap:3px}
.year-promo .month{padding:6px 0}
.year-promo .month-name{font-size:11px;font-weight:500}
.share-actions--solo .button+.button{margin-top:8px}
.page--read .reading>h2{font-size:30px}

/* ===== khổ màn hình ===== */
@media (max-width:480px){.months{grid-template-columns:repeat(4,1fr)}.year-promo .months{grid-template-columns:repeat(6,1fr)}}
@media (max-width:359px){
  :root{--gutter:12px}
  .cell{padding:4px}
  .cell-major{font-size:11px}
  .share-row{flex-direction:column;align-items:stretch}
  .share-card{width:100%;max-width:220px}
  .ws-intro h1{font-size:32px}
  .mode-tab{gap:5px;font-size:14px}
  .brand-name{font-size:16px}
}
/* 12 canh giờ theo bề ngang khung thao tác: 3 → 4 → 6 cột */
@container card (min-width:330px){.hours{grid-template-columns:repeat(4,minmax(0,1fr))}}
@container card (min-width:560px){.hours{grid-template-columns:repeat(6,minmax(0,1fr))}}
@media (min-width:420px){.tab-long,.tab-badge{display:inline}}
@media (min-width:560px){
  .board{grid-auto-rows:minmax(132px,auto)}
  .cell{padding:8px}
  .cell-major{font-size:14px}
  .cell-top,.cell-hoa,.cell-minor,.cell-name{font-size:11px}
  .center{font-size:13px}
  .center strong{font-size:21px}
  .ledger li{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:20px;align-items:baseline}
  .ledger-price{text-align:right}
  .ledger-price b{display:block;margin:0}
  .share-actions--solo{flex-direction:row;flex-wrap:wrap;gap:10px}
  .share-actions--solo .button{flex:1 1 220px}
  .share-actions--solo .button+.button{margin-top:0}
  .share-actions--solo .action-status{flex-basis:100%}
  .bento-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .bento-card--wide{grid-column:1/-1;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:18px}
  .ws-card{padding:12px 22px 24px}
  .mode-tabs{margin:0 -10px 22px}
  .drop-target{min-height:224px}
}
@media (min-width:768px){
  :root{--gutter:32px}
  .topmode{display:inline-flex}
  .saved-long{display:inline}
  .saved-short{display:none}
  .lead{font-size:17px}
  .footer{flex-direction:row;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 32px}
  .footer-note{flex:1 1 360px}
  .result-head{align-items:center;text-align:center;padding:48px 0 28px}
  .result-head .eyebrow{justify-content:center}
  .result-head .notice{text-align:left}
  .center{font-size:14px}
  .center strong{font-size:24px}
  .board{grid-auto-rows:minmax(150px,auto)}
  .cell{padding:10px}
  .months{grid-template-columns:repeat(12,minmax(0,1fr))}
  .month{padding:10px 2px}
  .empty{padding:96px 0}
  .ws-ring{right:-120px;width:520px}
}
@media (min-width:960px){
  .ws{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:48px;align-items:start;padding-top:52px}
  .ws-side{position:relative;display:flex;flex-direction:column;gap:36px;padding-top:12px}
  .ws-ring{top:-150px;left:-250px;right:auto;width:700px}
  .ws-intro h1{font-size:44px;max-width:none}
  .ws-intro .lead{font-size:18px}
  .bento-card--wide{grid-template-columns:minmax(0,1fr);gap:14px}
  .ws-card{padding:14px 28px 28px}
  .mode-tabs{margin:0 -14px 24px}
  .band{margin-top:104px;padding-top:44px;display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:72px;align-items:start}
  .band-intro{position:sticky;top:calc(var(--topbar-h) + 24px)}
  .closing{margin-top:104px;padding-top:72px}
}
@media (min-width:1200px){
  .ws{gap:64px}
  .ws-intro h1{font-size:52px}
}

/* Đợt 2: Hỏi thầy + Trọn bộ (27/10) */
.upsell{margin-top:40px}
.upsell h2{font-family:var(--serif);font-size:24px;font-weight:600;margin:0 0 12px}
.upsell-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:12px}
.upsell-card{display:flex;flex-direction:column;gap:6px;padding:20px;background:var(--sheet);border:1px solid var(--line);border-radius:6px;color:var(--ink);text-decoration:none;min-height:44px}
.upsell-card:hover{border-color:var(--ink);color:var(--ink)}
.upsell-card strong{font-family:var(--serif);font-size:19px;font-weight:600;line-height:1.25}
.upsell-card span:last-child{font-size:14px;color:var(--ink-2)}
.upsell-kicker{font-size:13px;font-weight:600;color:var(--son)}
.upsell-card--full{border-color:var(--ink);box-shadow:inset 0 0 0 4px var(--sheet),inset 0 0 0 5px var(--line-2)}
.qa{display:flex;flex-direction:column;gap:14px;margin:20px 0}
.qa-item{background:var(--sheet);border:1px solid var(--line);border-radius:6px;padding:18px 18px 14px}
.qa-q{margin:0 0 10px;font-weight:600}
.qa-a p{margin:0 0 10px}
.qa-tag{display:block;font-size:12px;font-weight:600;color:var(--ink-2);margin-bottom:4px}
.qa-tag--son{color:var(--son)}
.qa-item--refused .qa-a{color:var(--ink-2)}
.qa-form{padding:20px;display:flex;flex-direction:column;gap:10px}
.qa-form textarea{width:100%;min-height:96px;padding:12px;border:1px solid var(--line-2);border-radius:4px;background:var(--white);color:var(--ink);font:inherit;font-size:16px;line-height:1.5;resize:vertical}
.qa-form textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(29,27,24,.12)}
.bundle-status{padding:22px;display:flex;flex-direction:column;gap:12px;margin-top:16px}
.bundle-status h2{font-family:var(--serif);font-size:21px;font-weight:600;margin:0}
.bundle-parts{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.bundle-parts li{display:flex;align-items:center;gap:10px;min-height:28px}
.bundle-dot{width:12px;height:12px;border-radius:50%;border:2px solid var(--line-2);flex:0 0 auto}
.is-done .bundle-dot{background:var(--son);border-color:var(--son)}
.is-pending .bundle-dot{border-color:var(--son);border-style:dashed}
.links{margin:0;font-size:15px}

/* Kiến thức v2 (27/10): Điểm nhấn lá số (miễn phí) + nhãn Tuần/Triệt trên ô cung */
.tag-void{padding:0 4px;border:1px solid var(--cham);border-radius:2px;color:var(--cham);white-space:nowrap}
.hl{margin-top:36px;padding:24px 20px;display:flex;flex-direction:column;gap:14px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md)}
.hl h2{font-size:28px}
.hl-facts{margin:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:var(--r-sm);overflow:hidden}
.hl-facts>div{padding:10px 14px;background:var(--surface)}
.hl-facts dt{font-size:13px;font-weight:600;color:var(--son)}
.hl-facts dd{margin:2px 0 0;font-family:var(--serif);font-weight:600;font-size:17px;line-height:1.35}
.hl-note{font-size:15px;color:var(--ink-2)}
.hl-sub{margin-top:6px;font-size:21px}
.hl-pats{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.hl-pat{padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);display:flex;flex-direction:column;gap:6px}
.hl-pat p{font-size:15px;line-height:1.6;color:var(--ink-2)}
.hl-pat .hl-pat-head{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;color:var(--ink)}
.hl-pat-head strong{font-family:var(--serif);font-weight:600;font-size:18px;line-height:1.3}
.hl-tag{padding:0 8px;border-radius:999px;font-size:12px;font-weight:600;line-height:20px;background:var(--paper-2);color:var(--ink-2)}
.hl-pat--cat{border-color:var(--son-soft)}
.hl-pat--cat .hl-tag{background:var(--son-wash);color:var(--son)}
.hl-pat--thach_thuc .hl-tag{background:var(--tint-cham);color:var(--cham)}
.hl-pat .hl-weak{font-size:14px;color:var(--cham)}
.hl-fine{text-align:left}
@media (min-width:768px){.hl{padding:28px 28px}.hl-facts{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* Vận năm v2 + móc câu (27/10 tối): câu Tuần/Triệt lưu niên ở thẻ mời, dòng cách cục ở thẻ mở khoá */
.promo-void{padding:10px 12px;border-left:0;border-radius:var(--r-sm);background:var(--son-wash);color:var(--ink)}
.promo-void b,.unlock-cach b{color:var(--son)}
.unlock-cach{font-size:16px;line-height:1.6}
.fact .hl-tag{vertical-align:middle;margin-left:4px}
.fact-main+.fact-sub+.fact-main{margin-top:12px}

/* Chỉ tay tạm khoá (27/10): khung "Sắp ra mắt" thay form tải ảnh */
.palm-soon{gap:16px}
.palm-soon h2{display:flex;align-items:center;gap:10px;font-size:22px}
.palm-soon h2 .ic{color:var(--son);width:24px;height:24px}
.palm-soon p{margin:0;font-size:15px;line-height:1.65;color:var(--ink-2);text-wrap:pretty}
.soon-list{list-style:none;margin:0;padding:0;display:grid;gap:10px;font-size:15px;line-height:1.5}
.soon-list li{display:flex;align-items:flex-start;gap:8px}
.soon-list .ic{width:18px;height:18px;margin-top:2px;color:var(--son)}
.palm-soon .button{align-self:flex-start;text-decoration:none}
@media (max-width:520px){.palm-soon .button{align-self:stretch;justify-content:center}}


/* ===== v5 Bước 2 (Odin-A 28/10): chữ số thẳng hàng, đọc đêm, thẻ đối chiếu lịch, bài luận mẫu ===== */
.num,.ledger-price,.pay-meta dd,.date-group input,.hour-time,.convert,.cal-compare dd,.badge,.price,.meta{font-variant-numeric:tabular-nums}
html[data-theme="dark"]{color-scheme:dark;
  --paper:#15140F; --paper-2:#1D1B16; --sheet:#1A1914; --surface:#221F19; --white:#26231C;
  --ink:#ECE5D6; --ink-2:#B4AC9D; --line:#35312A; --line-2:#4A443A; --control:#6E675B;
  --son:#EE8A80; --son-dark:#F6A79F; --son-wash:#2C1713; --son-soft:#7A3A30; --cham:#93B2C9;
  --ink-strong:#FFFFFF; --placeholder:#8D8576; --field-off:#2A2720; --topbar-bg:rgba(21,20,15,.94);
  --tint-day:#3A2E1D; --tint-day-line:#6B5432; --tint-cham:#1F2A33; --tint-cham-line:#3A4D5C;
  --hanh-kim:#C9B48C; --hanh-moc:#7FC4A0; --hanh-thuy:#9FB8DA; --hanh-hoa:#F08A80; --hanh-tho:#D6A57E;
  --shadow-card:0 1px 0 rgba(0,0,0,.3),0 28px 56px -32px rgba(0,0,0,.6); --focus-ring:0 0 0 3px rgba(236,229,214,.2)}
html[data-theme="dark"] .button--ink,html[data-theme="dark"] .button--cta{color:var(--paper)}
html[data-theme="dark"] img.qr{background:#FFFFFF}
.theme-toggle{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.theme-toggle .ic{width:18px;height:18px}
.theme-toggle:hover{background:var(--sheet)}
.theme-toggle .ic-sun{display:none}
html[data-theme="dark"] .theme-toggle .ic-sun{display:block}
html[data-theme="dark"] .theme-toggle .ic-moon{display:none}

/* thẻ đối chiếu lịch pháp ở hero */
.cal-card{margin-top:20px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r-md);background:var(--paper-2)}
.cal-card figcaption{font-size:14px;color:var(--ink-2);margin-bottom:8px}
.cal-card dl{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0}
.cal-card dl div{padding:10px 12px;border-radius:var(--r-sm);background:var(--sheet);border:1px solid var(--line)}
.cal-card dl .is-vn{border-color:var(--son);box-shadow:inset 3px 0 0 var(--son)}
.cal-card dt{font-size:13px;color:var(--ink-2)}
.cal-card dd{margin:2px 0 0;font-family:var(--serif);font-size:17px;line-height:1.3}
.cal-card .cal-note{margin-top:8px;font-size:14px;color:var(--ink-2)}

/* ba lớp kiểm có hồn hơn */
.gates--rich{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:10px;counter-reset:g}
.gates--rich li{counter-increment:g;display:grid;grid-template-columns:28px 1fr;gap:2px 10px;font-size:15px}
.gates--rich li::before{content:counter(g);grid-row:span 2;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--son-wash);color:var(--son);font-weight:700;font-size:14px}
.gates--rich b{font-weight:600}
.gates--rich span{color:var(--ink-2);font-size:14px}

/* chỉ tay thu gọn khi chưa mở */
.palm-teaser{display:flex;gap:12px;align-items:flex-start;margin-top:14px;padding:12px 14px;border:1px dashed var(--line-2);border-radius:var(--r-md);color:var(--ink-2);font-size:15px}
.palm-teaser .ic{width:22px;height:22px;color:var(--son);margin-top:2px}
.palm-teaser b{color:var(--ink)}
.palm-teaser a{white-space:nowrap}

/* bài luận mẫu */
.sample-cta{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:18px}
.sample-cta .hint{color:var(--ink-2);font-size:14px}
dialog.sample{width:min(760px,100% - 24px);max-height:min(88dvh,900px);padding:0;border:1px solid var(--line);border-radius:var(--r-lg);background:var(--paper);color:var(--ink);box-shadow:var(--shadow-card)}
dialog.sample::backdrop{background:rgba(20,18,14,.55)}
.sample-head{position:sticky;top:0;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--line);background:var(--paper)}
.sample-head h2{font-size:20px}
.sample-body{padding:8px 18px 24px;overflow:auto}
.sample-meta{margin:10px 0 4px;color:var(--ink-2);font-size:14px}
.sample-sec{margin-top:22px}
.sample-sec > h3{font-size:19px;margin-bottom:10px;padding-bottom:6px;border-bottom:1px solid var(--line)}
.sample-close{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;border:1px solid var(--line);border-radius:50%;background:transparent;color:var(--ink);cursor:pointer}
.sample-page .sample-body{padding:0}
@media (max-width:560px){.cal-card dl{grid-template-columns:1fr}.sample-head h2{font-size:18px}}
@media (prefers-reduced-motion:no-preference){dialog.sample[open]{animation:sample-in .22s var(--ease-out)}}
@keyframes sample-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.form-title{font-size:22px;margin:2px 0 4px}
.sample-page .sample-head{position:static;padding:24px 0 8px;border-bottom:1px solid var(--line);background:none}
.sample-page .sample-head h1{font-size:30px}
.cal-card{margin:20px 0 0}
@media (max-width:959px){.cal-card--hero{display:none}}
@media (min-width:960px){.cal-card--bento{display:none}}
.bento-card .cal-card{margin-top:14px}

/* ===== v5 Bước 3–4 (Odin-A 28/10): bàn lá số tương tác, chia đôi máy tính, bàn gọn + bảng trượt điện thoại ===== */
.keep-link{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin-top:12px}
.keep-link .fine{flex:1 1 260px;margin:0;color:var(--ink-2);font-size:13px}
.keep-link .action-status{flex-basis:100%;font-size:14px;color:var(--ink-2)}
.board-tools{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:10px;margin-bottom:12px}
.laso-tools{display:flex;flex-wrap:wrap;gap:8px}
.laso-tools .button--small{text-decoration:none}
.board{position:relative}
.board-links{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;overflow:visible;z-index:2}
.board-links line{stroke:var(--son);stroke-width:1.5;stroke-opacity:.6}
.board-links line.xung{stroke:var(--hanh-kim);stroke-dasharray:5 4;stroke-opacity:.8}
.board.has-focus .cell{background:var(--paper-2);color:var(--control);transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}
.board.has-focus .cell .cell-name,.board.has-focus .cell .cell-hoa,.board.has-focus .cell .lv{opacity:.55}
.board.has-focus .cell.is-focus,.board.has-focus .cell.is-linked{color:var(--ink)}
.board.has-focus .cell.is-focus *,.board.has-focus .cell.is-linked *{opacity:1}
.cell.is-focus{background:var(--white);box-shadow:inset 0 0 0 2px var(--son)}
.cell.is-linked{background:var(--white);box-shadow:inset 0 0 0 1.5px var(--hanh-kim)}
.cell-more{display:none;font-size:11px;color:var(--ink-2)}

/* bàn gọn / bản đầy đủ trên điện thoại */
@media (max-width:767px){
  .chart[data-view=compact] .cell-minor,.chart[data-view=compact] .cell-hoa{display:none}
  .chart[data-view=compact] .cell-more{display:block}
  .chart[data-view=compact] .board{grid-auto-rows:minmax(92px,auto)}
  .chart[data-view=compact] .cell-major{font-size:13px}
  .chart[data-view=full] .board-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;overscroll-behavior-x:contain;padding-bottom:6px}
  .chart[data-view=full] .board{min-width:680px}
  .chart[data-view=full] .cell-major{font-size:14px}
  .chart[data-view=full] .cell-top,.chart[data-view=full] .cell-hoa,.chart[data-view=full] .cell-minor,.chart[data-view=full] .cell-name{font-size:12px}
  .laso-tools{display:none}
}
@media (min-width:768px){.seg--board{display:none}}

/* khung chia đôi trên máy tính */
.cung-panel{margin-bottom:20px}
.cung-panel h2{font-size:24px;margin:2px 0 4px}
.psub{color:var(--ink-2);font-size:14px;margin:0 0 8px}
.pstars{display:grid;gap:10px;margin:10px 0 0}
.pstars dt{font-size:13px;color:var(--ink-2);margin-bottom:4px}
.pstars dd{margin:0}
.pstar{display:inline-block;margin:0 6px 6px 0;padding:3px 10px;border:1px solid var(--line);border-radius:999px;background:var(--sheet);font-size:15px;line-height:1.5}
.pstar.harsh{border-color:var(--tint-cham-line);color:var(--cham)}
.pjump{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:16px 0 4px}
.pjump .fine{flex-basis:100%;margin:0;color:var(--ink-2);font-size:13px}
.pjump button{min-height:44px;padding:6px 14px;border:1px solid var(--line-2);border-radius:999px;background:transparent;color:var(--ink);font:inherit;font-size:15px;cursor:pointer}
.pjump button:hover{border-color:var(--ink-2)}
.pjump small{color:var(--ink-2);font-size:12px}
.pmeaning{margin-top:16px;border-top:1px solid var(--line);padding-top:8px}
@media (min-width:1024px){
  .page--laso{max-width:var(--wrap)}
  .page--laso>.laso-split,.page--laso>.result-head{max-width:none}
  .laso-split{display:grid;grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:32px;align-items:start}
  .laso-left{position:sticky;top:calc(var(--topbar-h) + 12px)}
  .laso-left .board{grid-auto-rows:minmax(116px,auto)}
  .laso-right>*{max-width:none}
}

/* bảng trượt từ dưới lên (điện thoại) */
dialog.psheet{position:fixed;inset:auto 0 0 0;width:100%;max-width:100%;max-height:78dvh;margin:0;padding:0 0 env(safe-area-inset-bottom);border:0;border-radius:18px 18px 0 0;background:var(--paper);color:var(--ink);box-shadow:0 -12px 40px rgba(0,0,0,.25)}
dialog.psheet::backdrop{background:rgba(20,18,14,.5)}
.psheet-grip{display:flex;justify-content:center;padding:10px 0 4px;touch-action:none;cursor:grab}
.psheet-grip span{width:44px;height:5px;border-radius:3px;background:var(--line-2)}
.psheet-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:0 16px 8px;border-bottom:1px solid var(--line)}
.psheet-head h2{font-size:22px}
.psheet-body{padding:12px 16px 24px;overflow:auto;max-height:calc(78dvh - 76px);font-size:16px;line-height:1.6}
@media (min-width:768px){dialog.psheet{left:50%;right:auto;width:min(560px,100%);transform:translateX(-50%)}}
@media (prefers-reduced-motion:no-preference){dialog.psheet[open]{animation:sheet-up .24s var(--ease-out)}}
@keyframes sheet-up{from{translate:0 40px;opacity:.6}to{translate:0 0;opacity:1}}

/* thanh đáy (điện thoại) */
.dock{display:none}
@media (max-width:767px){
  .dock{position:fixed;left:0;right:0;bottom:0;z-index:40;display:flex;gap:4px;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:var(--topbar-bg);border-top:1px solid var(--line)}
  .dock a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:48px;font-size:12px;color:var(--ink);text-decoration:none}
  .dock .ic{width:20px;height:20px}
  body.has-dock{padding-bottom:calc(72px + env(safe-area-inset-bottom))}
}

/* bài luận chưa mở: thẻ cuối mờ dần vào thẻ mở khoá */
.card--fade{max-height:260px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 45%,transparent);mask-image:linear-gradient(#000 45%,transparent)}

/* thanh toán trên điện thoại */
.pay-dl{width:100%;margin-bottom:12px;text-decoration:none}
.pay .copy{min-height:44px;padding:6px 14px}
.pulse-dot{display:inline-block;flex:0 0 auto;width:10px;height:10px;margin-right:4px;border-radius:50%;background:var(--son);animation:pulse-dot 1.4s ease-in-out infinite}
@keyframes pulse-dot{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.35;transform:scale(.7)}}
@media (prefers-reduced-motion:reduce){.pulse-dot{animation:none}}
@media (min-width:768px){.pay-tip{display:none}}

/* Hỏi thầy: câu hỏi gợi ý */
.qa-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 10px}
.chip-q{min-height:44px;padding:8px 12px;border:1px solid var(--line-2);border-radius:12px;background:var(--sheet);color:var(--ink);font:inherit;font-size:14px;line-height:1.4;text-align:left;cursor:pointer}
.chip-q:hover{border-color:var(--ink-2)}

/* bản in A4 */
@media print{
  @page{size:A4;margin:12mm}
  html,body{background:#fff;color:#000}
  .topbar,.footer,.dock,.board-tools,.keep-link,.unlock,.upsell,.share,.feedback,.year-promo .button,.cung-panel,.tabs,dialog,.listen{display:none!important}
  .laso-split{display:block}
  .laso-left{position:static}
  .board{break-inside:avoid}
  .board-links{display:none}
  .card,.meaning{break-inside:avoid}
  .meaning{display:block}
}
@media (max-width:420px){.brand-name{font-size:16px;white-space:nowrap}.saved-link{white-space:nowrap}.theme-toggle{width:40px;height:40px}.topbar{gap:8px}}
@media (max-width:359px){.brand-name{display:none}}

/* T282: vòng Tràng Sinh + đại vận từng cung */
.cell-stage{font-size:10px;color:var(--ink-2);font-style:italic;line-height:1.3}
.cell-foot{margin-top:auto;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:2px 4px}
.cell-foot .cell-name{margin-top:0}
.cell-dv{font-size:10px;color:var(--ink-2);font-variant-numeric:tabular-nums}
@media (min-width:768px){.cell-stage,.cell-dv{font-size:11px}}
@media (max-width:767px){.chart[data-view=compact] .cell-stage{display:none}}
.board.has-focus .cell .cell-stage,.board.has-focus .cell .cell-dv{opacity:.55}
.board.has-focus .cell.is-focus .cell-stage,.board.has-focus .cell.is-focus .cell-dv,.board.has-focus .cell.is-linked .cell-stage,.board.has-focus .cell.is-linked .cell-dv{opacity:1}

/* T283: đổi chủ đề tại chỗ */
#bai-luan.is-swapping .card{opacity:.55;transition:opacity .12s var(--ease-out)}

/* ===== T292 Phòng nghe (audio-first): thẻ sơn mài đen + vàng thếp, dùng chung sáng/tối ===== */
.studio{--lq:#15110D;--lq-2:#221A12;--gold:#D4AF37;--gold-2:#F3E5AB;--gold-dim:rgba(212,175,55,.28);
  position:relative;margin:20px 0 28px;padding:20px 18px 16px;border-radius:18px;color:#F6EFE0;
  background:radial-gradient(120% 140% at 0% 0%,#2A1F14 0%,var(--lq) 55%,#0E0B08 100%);
  border:1px solid var(--gold-dim);box-shadow:0 18px 50px rgba(20,12,4,.35),inset 0 1px 0 rgba(243,229,171,.08)}
.studio::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 0 0 rgba(212,175,55,0);transition:box-shadow .4s var(--ease-out)}
.studio.is-playing::after{box-shadow:0 0 34px 2px rgba(212,175,55,.22)}
.studio-eyebrow{margin:0;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold)}
.studio-head h2{margin:2px 0 12px;font-size:22px;line-height:1.3;color:var(--gold-2)}
.studio-main{display:flex;align-items:center;gap:14px}
.studio-play{flex:0 0 auto;width:64px;height:64px;border-radius:50%;border:0;cursor:pointer;display:grid;place-items:center;
  background:radial-gradient(circle at 35% 30%,#F7E7B0,var(--gold) 55%,#9C7420);color:#1A1208;
  box-shadow:0 6px 18px rgba(212,175,55,.35)}
.studio-play svg{width:28px;height:28px;fill:currentColor}
.studio-play .i-pause,.studio.is-playing .studio-play .i-play{display:none}
.studio.is-playing .studio-play .i-pause{display:block}
.studio-play:disabled{opacity:.45;cursor:wait}
.studio-play:focus-visible,.studio-chip:focus-visible,.teaser:focus-visible{outline:2px solid var(--gold-2);outline-offset:3px}
.studio-wave{flex:1;min-width:0;width:100%;height:56px}
.studio-bar{display:flex;align-items:center;gap:10px;margin-top:10px;font-size:13px;color:#CDBF9F;font-variant-numeric:tabular-nums}
.studio-bar input[type=range]{flex:1;accent-color:var(--gold);height:24px}
.studio-caps{position:relative;margin-top:12px;max-height:6.6em;overflow:auto;scrollbar-width:none;
  -webkit-mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);mask-image:linear-gradient(transparent,#000 22%,#000 78%,transparent);
  padding:1.6em 0}
.studio-caps::-webkit-scrollbar{display:none}
.studio-caps p{margin:0;padding:3px 0;font-size:16px;line-height:1.55;color:rgba(246,239,224,.42);cursor:pointer;transition:color .2s}
.studio-caps p.is-on{color:var(--gold-2);text-shadow:0 0 14px rgba(243,229,171,.25)}
.studio-tools{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.studio-chip{display:inline-flex;align-items:center;gap:6px;min-height:40px;padding:6px 14px;border-radius:999px;cursor:pointer;
  border:1px solid var(--gold-dim);background:rgba(243,229,171,.05);color:#F1E6C8;font:inherit;font-size:14px;text-decoration:none}
.studio-chip .ic{width:16px;height:16px}
.studio-chip[aria-pressed=true]{background:rgba(212,175,55,.2);border-color:var(--gold);color:var(--gold-2)}
.studio-status{margin:10px 0 0;font-size:14px;color:#CDBF9F}
.studio.is-empty .studio-main,.studio.is-empty .studio-bar,.studio.is-empty .studio-tools{display:none}
@media (min-width:768px){.studio{padding:24px 26px 20px}.studio-head h2{font-size:26px}.studio-wave{height:64px}}

/* thanh nghe dính đáy */
.studio-mini{position:fixed;z-index:45;left:12px;right:12px;bottom:calc(12px + env(safe-area-inset-bottom));display:flex;align-items:center;gap:10px;
  padding:8px 12px 10px;border-radius:14px;background:#15110D;color:#F6EFE0;border:1px solid rgba(212,175,55,.35);box-shadow:0 10px 30px rgba(0,0,0,.35)}
.studio-mini[hidden]{display:none}
body.has-dock .studio-mini{bottom:calc(70px + env(safe-area-inset-bottom))}
@media (min-width:768px){.studio-mini{left:auto;width:420px;right:20px}body.has-dock .studio-mini{bottom:20px}}
.studio-mini-play{flex:0 0 auto;width:40px;height:40px;border-radius:50%;border:0;cursor:pointer;background:#D4AF37;position:relative}
.studio-mini-play::before{content:"";position:absolute;left:15px;top:12px;width:4px;height:16px;background:#1A1208;box-shadow:7px 0 0 #1A1208}
.studio-mini.is-paused .studio-mini-play::before{left:16px;top:12px;width:0;height:0;background:none;box-shadow:none;
  border-style:solid;border-width:8px 0 8px 13px;border-color:transparent transparent transparent #1A1208}
.studio-mini-cap{flex:1;min-width:0;border:0;background:none;color:#F3E5AB;font:inherit;font-size:14px;text-align:left;cursor:pointer;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-height:40px}
.studio-mini-bar{position:absolute;left:12px;right:12px;bottom:5px;height:2px;background:rgba(243,229,171,.15);border-radius:2px;overflow:hidden}
.studio-mini-bar i{display:block;height:100%;width:0;background:#D4AF37}

/* khoá mờ: 2 câu thật + vạch giữ chỗ (không chữ giả) */
.locks{margin:24px 0 8px;display:grid;gap:12px}
.locks-title{margin:0 0 2px;font-size:20px}
.lock{position:relative;padding:16px 16px 14px;border:1px solid var(--line);border-radius:14px;background:var(--sheet)}
.lock-head{display:flex;align-items:center;gap:8px;margin-bottom:6px;color:var(--son)}
.lock-head h4{margin:0;font-size:17px;color:var(--ink)}
.lock-lead{margin:0 0 10px;font-size:16px;line-height:1.6}
.lock-rest{display:grid;gap:7px;margin:4px 0 10px}
.lock-rest i{display:block;height:11px;border-radius:6px;background:linear-gradient(90deg,var(--line),var(--paper-2),var(--line));
  -webkit-mask-image:linear-gradient(90deg,#000 70%,transparent);mask-image:linear-gradient(90deg,#000 70%,transparent)}
.lock-rest i:nth-child(2){width:92%}.lock-rest i:nth-child(3){width:84%}.lock-rest i:nth-child(4){width:60%;opacity:.6}
.lock-note{margin:0;font-size:14px;color:var(--ink-2)}
.lock-link{display:inline-block;margin-top:2px;font-weight:600;color:var(--son)}
.teaser{display:flex;align-items:center;gap:10px;width:100%;min-height:52px;padding:10px 16px;border-radius:14px;cursor:pointer;
  border:1px solid rgba(212,175,55,.45);background:#15110D;color:#F3E5AB;font:inherit;font-size:16px;text-align:left}
.teaser svg{flex:0 0 auto;width:24px;height:24px;fill:none;stroke:#D4AF37;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.teaser.is-playing{box-shadow:0 0 26px rgba(212,175,55,.3)}
#mo-khoa.is-call{animation:call-pulse 1.2s var(--ease-out) 2}
@keyframes call-pulse{50%{box-shadow:0 0 0 6px rgba(168,40,32,.18)}}
@media (prefers-reduced-motion:reduce){#mo-khoa.is-call{animation:none}.studio::after{transition:none}}

/* góp ý nhanh */
.quick-fb{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:14px 0 4px}
.quick-fb p{margin:0 6px 0 0;font-size:15px;color:var(--ink-2)}
.quick-fb .studio-chip{border-color:var(--line-2);background:transparent;color:var(--ink)}
.quick-fb .studio-chip:disabled{opacity:.5}

@media print{.studio,.studio-mini,.locks,.quick-fb{display:none!important}}
@media (min-width:768px){.page--read>.studio{max-width:880px;margin-left:auto;margin-right:auto}}

/* T293 Podcast 2 giọng */
.studio-mode{display:inline-flex;border:1px solid rgba(212,175,55,.35);border-radius:999px;overflow:hidden}
.studio-mode label{position:relative}
.studio-mode input{position:absolute;opacity:0;inset:0}
.studio-mode span{display:inline-flex;align-items:center;min-height:40px;padding:6px 14px;font-size:14px;color:#F1E6C8;cursor:pointer}
.studio-mode input:checked+span{background:rgba(212,175,55,.22);color:#F3E5AB}
.studio-mode input:focus-visible+span{outline:2px solid #F3E5AB;outline-offset:-2px}
.studio-hosts{display:flex;gap:18px;margin:12px 0 2px}
.studio-hosts[hidden]{display:none}
.host{display:flex;align-items:center;gap:8px;font-size:14px;color:#CDBF9F}
.host i{display:grid;place-items:center;width:44px;height:44px;border-radius:50%;font-style:normal;font-size:12px;font-weight:600;
  background:#221A12;color:#F3E5AB;border:2px solid rgba(212,175,55,.25);transition:box-shadow .25s,border-color .25s}
.host.is-on i{border-color:#D4AF37;box-shadow:0 0 18px rgba(212,175,55,.45)}
.host.is-on{color:#F3E5AB}
.studio-caps p.who-dan.is-on{color:#F4D3C4}
@media (prefers-reduced-motion:reduce){.host i{transition:none}}

/* ===== T295 (Sếp 01/11 "để giao diện sáng cho dễ nhìn"): phòng nghe nền sáng giấy dó, nhấn vàng + son.
   Khối tối T292 phía trên chỉ còn dùng cho chế độ đọc đêm (html[data-theme=dark]). ===== */
html:not([data-theme="dark"]) .studio{--gold-dim:#E3D2A2;color:var(--ink);
  background:linear-gradient(180deg,#FFFDF8 0%,#F7F0E1 100%);border:1px solid #E3D2A2;
  box-shadow:0 10px 30px rgba(120,90,30,.10),inset 0 1px 0 #FFFFFF}
html:not([data-theme="dark"]) .studio.is-playing::after{box-shadow:0 0 0 3px rgba(212,175,55,.18)}
html:not([data-theme="dark"]) .studio-eyebrow{color:#8C6A1C}
html:not([data-theme="dark"]) .studio-head h2{color:var(--ink)}
html:not([data-theme="dark"]) .studio-play{background:radial-gradient(circle at 35% 30%,#E7C766,#C49A2C 55%,#946F1C);color:#FFFFFF;
  box-shadow:0 6px 16px rgba(150,110,30,.30)}
html:not([data-theme="dark"]) .studio-bar{color:var(--ink-2)}
html:not([data-theme="dark"]) .studio-bar input[type=range]{accent-color:#B8892C}
html:not([data-theme="dark"]) .studio-caps p{color:rgba(28,27,24,.38)}
html:not([data-theme="dark"]) .studio-caps p.is-on{color:var(--ink);text-shadow:none;
  background:linear-gradient(transparent 62%,rgba(212,175,55,.32) 62%);border-radius:2px}
html:not([data-theme="dark"]) .studio-caps p.who-dan.is-on{color:#7A2E22}
html:not([data-theme="dark"]) .studio-chip{border-color:#E0CF9E;background:#FFFFFF;color:var(--ink)}
html:not([data-theme="dark"]) .studio-chip[aria-pressed=true]{background:#F6E9C4;border-color:#C49A2C;color:#5C4210}
html:not([data-theme="dark"]) .studio-status{color:var(--ink-2)}
html:not([data-theme="dark"]) .studio-mode{border-color:#E0CF9E;background:#FFFFFF}
html:not([data-theme="dark"]) .studio-mode span{color:var(--ink)}
html:not([data-theme="dark"]) .studio-mode input:checked+span{background:#F6E9C4;color:#5C4210}
html:not([data-theme="dark"]) .studio-mode input:focus-visible+span{outline-color:#B8892C}
html:not([data-theme="dark"]) .studio-play:focus-visible,html:not([data-theme="dark"]) .studio-chip:focus-visible,
html:not([data-theme="dark"]) .teaser:focus-visible{outline-color:#B8892C}
html:not([data-theme="dark"]) .host{color:var(--ink-2)}
html:not([data-theme="dark"]) .host i{background:#FFFFFF;color:#5C4210;border-color:#E0CF9E}
html:not([data-theme="dark"]) .host.is-on{color:var(--ink)}
html:not([data-theme="dark"]) .host.is-on i{border-color:#C49A2C;box-shadow:0 0 0 4px rgba(212,175,55,.22)}
html:not([data-theme="dark"]) .studio-mini{background:#FFFDF8;color:var(--ink);border-color:#E3D2A2;box-shadow:0 8px 24px rgba(80,60,20,.18)}
html:not([data-theme="dark"]) .studio-mini-play{background:#C49A2C}
html:not([data-theme="dark"]) .studio-mini-play::before{background:#FFFFFF;box-shadow:7px 0 0 #FFFFFF}
html:not([data-theme="dark"]) .studio-mini.is-paused .studio-mini-play::before{background:none;box-shadow:none;border-color:transparent transparent transparent #FFFFFF}
html:not([data-theme="dark"]) .studio-mini-cap{color:var(--ink)}
html:not([data-theme="dark"]) .studio-mini-bar{background:#EFE4C8}
html:not([data-theme="dark"]) .studio-mini-bar i{background:#C49A2C}
html:not([data-theme="dark"]) .teaser{background:#FFF8E6;color:var(--ink);border-color:#E0CF9E}
html:not([data-theme="dark"]) .teaser svg{stroke:#A47A1E}
html:not([data-theme="dark"]) .teaser.is-playing{box-shadow:0 0 0 3px rgba(212,175,55,.22)}
.studio{--wave-a:#F3E5AB;--wave-b:#B8892C}
html:not([data-theme="dark"]) .studio{--wave-a:#E2BF55;--wave-b:#A82820}

/* ===== v7 "Sơn mài sáng" (Odin 01/11/2026, Sếp: "Sơn mài màu sáng"): bố cục v6 (tráp sơn mài đầu trang, lá số mẫu
   khảm vàng, trích bài mẫu, dải lời kết) trên nền NGÀ — mặt sơn mài mài bóng, hạt vỏ trứng rất nhẹ, nét vàng thếp,
   dấu son. Chữ mực đậm cho dễ đọc; chế độ đọc đêm của khách dùng tông tối. ===== */
:root{
  --lq:#F2E6CE; --lq-2:#FBF6EA; --lq-edge:#E3CFA6; --lq-line:rgba(150,110,35,.38);
  --gold:#B48A2E; --gold-2:#D9B556; --gold-text:#7A5714; --gold-ink:#2A1A08;
  --egg:#1C1B18; --egg-2:#5C5852;
  --lq-sheen:linear-gradient(115deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.55) 44%,rgba(255,255,255,0) 60%);
  --lq-grain:radial-gradient(rgba(255,255,255,.7) .8px,transparent 1.4px) 0 0/15px 15px,
             radial-gradient(rgba(180,138,46,.10) .8px,transparent 1.4px) 7px 9px/19px 19px;
}
html[data-theme="dark"]{
  --lq:#1C0F0B; --lq-2:#33190F; --lq-edge:#120906; --lq-line:rgba(201,162,83,.34);
  --gold:#C9A253; --gold-2:#E4CC94; --gold-text:#E4CC94; --gold-ink:#24160A;
  --egg:#F2EAD9; --egg-2:#D0C2A6;
  --lq-sheen:linear-gradient(115deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.04) 45%,rgba(255,255,255,0) 60%);
  --lq-grain:radial-gradient(rgba(242,234,217,.05) .8px,transparent 1.4px) 0 0/15px 15px;
}
body.home{overflow-x:clip}
.home .page--home{overflow-x:visible}
.home .ws-ring{display:none}
.home .ws-intro{color:var(--egg);padding:26px 0 6px}
.home .ws-intro::before{content:"";position:absolute;z-index:-1;inset:-24px calc(50% - 50vw) -64px;
  background:var(--lq-sheen),var(--lq-grain),radial-gradient(110% 60% at 88% 0%,var(--lq-2) 0%,rgba(251,246,234,0) 62%),
    radial-gradient(90% 50% at 0% 100%,var(--lq-edge) 0%,rgba(227,207,166,0) 70%),var(--lq);
  box-shadow:inset 0 -1px 0 var(--lq-line),inset 0 -5px 0 var(--lq),inset 0 -6px 0 rgba(180,138,46,.28)}
.home .ws-intro .eyebrow{color:var(--gold-text)}
.home .ws-intro .eyebrow::before{background:var(--gold)}
.home .ws-intro h1{color:var(--egg)}
.home .ws-intro h1 em{color:var(--son)}
.home .ws-intro .lead{color:var(--egg-2)}
.home .ws-intro .badge{background:rgba(180,138,46,.14);color:var(--gold-text)}
.home .ws-card{position:relative;z-index:1}
.button--gold{background:linear-gradient(180deg,#E6C76C,var(--gold-2) 55%,#C9A040);border-color:#B48A2E;color:var(--gold-ink);box-shadow:0 4px 12px rgba(150,110,35,.22)}
@media (hover:hover) and (pointer:fine){.button--gold:hover{background:#E9CF80;border-color:#B48A2E;color:var(--gold-ink)}}
.button--gold:focus-visible{outline:2px solid var(--gold-text);outline-offset:3px}
.hero-go{align-self:flex-start;margin-top:4px}

/* lá số mẫu khảm vàng trên nền ngà */
.hero-board{margin:6px 0 4px}
.lac{position:relative;width:min(100%,400px);aspect-ratio:1;margin-inline:auto;border-radius:6px;
  background:var(--lq-sheen),linear-gradient(180deg,var(--lq-2),var(--lq));box-shadow:0 14px 34px rgba(120,90,30,.16),inset 0 0 0 1px rgba(255,255,255,.6)}
html[data-theme="dark"] .lac{background:none;box-shadow:none}
.lac-svg{display:block;width:100%;height:100%;overflow:visible}
.lac-frame path{fill:none;stroke:var(--gold);stroke-width:1.2;vector-effect:non-scaling-stroke}
.lac-menh{fill:rgba(168,40,32,.12)}
html[data-theme="dark"] .lac-menh{fill:rgba(168,40,32,.34)}
.lac-lines path{fill:none;stroke:var(--son);stroke-width:1.5;vector-effect:non-scaling-stroke;stroke-linejoin:round;opacity:.75}
html[data-theme="dark"] .lac-lines path{stroke:var(--gold-2);opacity:1}
.lac-lines .xung{stroke:var(--gold);stroke-width:1.1;stroke-dasharray:.014 .018;opacity:.85}
.b-chi{font:500 10.5px var(--sans);fill:var(--egg-2)}
.b-star{font:600 13px var(--serif);fill:var(--egg)}
.b-empty{font:italic 400 11.5px var(--serif);fill:var(--egg-2)}
.b-cung{font:600 11px var(--sans);fill:var(--gold-text)}
.is-menh .b-cung{fill:var(--son)}
html[data-theme="dark"] .is-menh .b-cung{fill:var(--gold-2)}
.lac-center{position:absolute;inset:25%;background:radial-gradient(circle at 50% 50%,var(--lq-2) 0%,var(--lq-2) 56%,rgba(251,246,234,0) 74%);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;padding:4px;text-align:center}
html[data-theme="dark"] .lac-center{background:radial-gradient(circle at 50% 50%,var(--lq) 0%,var(--lq) 56%,rgba(28,15,11,0) 74%)}
.seal--gold{background:var(--son);color:#FBF6EA;box-shadow:0 0 0 1px var(--gold),0 0 0 5px rgba(180,138,46,.16)}
.lac-label,.lac-you{margin:0;font-family:var(--serif);font-size:15px;line-height:1.35;color:var(--egg)}
.lac-label span,.lac-you span+span{display:block;font-family:var(--sans);font-size:12.5px;line-height:1.4;color:var(--egg-2)}
.lac-you{display:flex;flex-direction:column;gap:2px;color:var(--son)}
html[data-theme="dark"] .lac-you{color:var(--gold-2)}
.lac-cell .b-star,.lac-cell .b-empty,.lac-lines{transition:opacity .3s var(--ease-out)}
.lac.is-yours .b-star,.lac.is-yours .b-empty{opacity:.3}
.lac.is-yours .lac-lines{opacity:.2}
.lac.is-yours [data-hero-sample]{display:none}
@media (prefers-reduced-motion:no-preference){
  .lac-frame path{stroke-dasharray:1;stroke-dashoffset:1;animation:b-draw 1.1s var(--ease-out) .1s forwards}
  .lac-cell{animation:b-in .5s var(--ease-out) both;animation-delay:calc(.45s + var(--i) * 45ms)}
  .lac-lines .tam-hop{stroke-dasharray:1;stroke-dashoffset:1;animation:b-draw .9s var(--ease-out) 1.1s forwards}
  .lac-lines .xung{opacity:0;animation:b-xung .5s var(--ease-out) 1.7s forwards}
  .lac-center .seal{animation:b-seal .4s var(--ease-out) 1.3s both}
}
@keyframes b-draw{to{stroke-dashoffset:0}}
@keyframes b-in{from{opacity:0}}
@keyframes b-xung{to{opacity:.85}}
@keyframes b-seal{from{opacity:0;transform:scale(.9) rotate(-6deg)}}

/* trích bài mẫu: giấy, câu chính tô dạ quang son / vàng */
.showcase .lead{max-width:34em}
.excerpt{display:flex;flex-direction:column;gap:12px;padding:22px 18px 20px;background:var(--sheet);border:1px solid var(--line);border-radius:var(--r-md);box-shadow:var(--shadow-card)}
.excerpt-meta{margin:0;font-size:14px;color:var(--ink-2)}
.excerpt-h{display:flex;align-items:center;gap:10px;font-size:22px;line-height:1.3}
.excerpt p:not(.excerpt-meta){margin:0;font-size:17px;line-height:1.75;text-wrap:pretty}
.excerpt mark{background:linear-gradient(transparent 56%,var(--son-wash) 56%);color:inherit;padding:0 1px;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.excerpt mark.mark-do{background:linear-gradient(transparent 56%,rgba(217,181,86,.38) 56%)}
.excerpt-notes{list-style:none;margin:6px 0 0;padding:14px 0 0;border-top:1px dashed var(--line-2);display:grid;gap:12px}
.excerpt-notes li{display:grid;gap:2px;font-size:14px;line-height:1.55;color:var(--ink-2)}
.excerpt-notes b{font-size:14px;font-weight:600;color:var(--son)}
.excerpt-more{align-self:flex-start;margin-top:4px}
.proof .bento{order:0}
html[data-theme="dark"] .excerpt mark{background:linear-gradient(transparent 56%,rgba(238,138,128,.22) 56%)}

/* lời kết: dải sơn mài ngà */
.closing--lacquer{position:relative;isolation:isolate;border-top:0;padding:60px 8px 64px;color:var(--egg)}
.closing--lacquer::before{content:"";position:absolute;z-index:-1;inset:0 calc(50% - 50vw);
  background:var(--lq-sheen),var(--lq-grain),radial-gradient(70% 90% at 50% 0%,var(--lq-2) 0%,rgba(251,246,234,0) 70%),var(--lq);
  box-shadow:inset 0 1px 0 var(--lq-line),inset 0 5px 0 var(--lq),inset 0 6px 0 rgba(180,138,46,.28)}
.closing--lacquer h2{color:var(--egg)}
.closing--lacquer .lead{color:var(--egg-2)}
.home .footer{margin-top:0}

/* phòng nghe: mặt tráp sơn mài ngà, viền chỉ vàng trong */
html:not([data-theme="dark"]) .studio{background:var(--lq-sheen),var(--lq-grain),linear-gradient(180deg,var(--lq-2) 0%,var(--lq) 100%);
  border-color:var(--lq-edge);box-shadow:0 12px 30px rgba(120,90,30,.12),inset 0 0 0 5px var(--lq-2),inset 0 0 0 6px rgba(180,138,46,.35)}
html:not([data-theme="dark"]) .studio-eyebrow{color:var(--gold-text)}

@media (min-width:768px){
  .excerpt{padding:34px 40px 30px}
  .excerpt-notes{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px}
}
@media (min-width:960px){
  .home .ws{padding-bottom:64px}
  .home .ws::before{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:calc(50% - 50vw);width:100vw;
    background:var(--lq-sheen),var(--lq-grain),radial-gradient(70% 70% at 22% 10%,var(--lq-2) 0%,rgba(251,246,234,0) 60%),var(--lq);
    box-shadow:inset 0 -1px 0 var(--lq-line),inset 0 -5px 0 var(--lq),inset 0 -6px 0 rgba(180,138,46,.28)}
  .home .ws-intro::before{content:none}
  .home .ws-side{position:sticky;top:calc(var(--topbar-h) + 20px)}
  .home .ws-intro{padding:0}
  .hero-go{display:none}
  .lac{width:min(100%,420px);margin-inline:0}
  .closing--lacquer{padding:88px 8px 92px}
}

/* ===== T297 (Sếp 01/11 "dọc cũng được, không cần vuông trên điện thoại") ===== */
/* trang chủ: bàn minh hoạ dọc 4×4, ô 90×140 — đủ chính tinh, tứ hoá, phụ tinh, Tràng Sinh, đại vận */
.lac--tall{aspect-ratio:9/14;width:min(100%,380px)}
.b-major{font:600 11.5px var(--serif);fill:var(--egg)}
.b-hoa{font:600 8.6px var(--sans);fill:var(--son)}
.b-minor{font:400 8.8px var(--sans);fill:var(--egg-2)}
.b-minor.harsh{fill:#9A3B2E}
html[data-theme="dark"] .b-minor.harsh{fill:#E59A8E}
.b-than{font:600 8.4px var(--sans);fill:var(--son)}
.b-foot{font:400 8px var(--sans);fill:var(--egg-2)}
.lac--tall .b-chi{font-size:9.5px}
.lac--tall .b-cung{font-size:10.5px}
.lac--tall .b-empty{font-size:10.5px}
.lac.is-yours .b-major,.lac.is-yours .b-minor,.lac.is-yours .b-hoa{opacity:.3}
.lac--tall .lac-label span+span{font-size:12px}
@media (min-width:960px){.lac--tall{width:min(100%,360px)}}

/* trang lá số, điện thoại: "Bản đầy đủ" là bàn dọc rộng đủ màn hình, ô cao, không kéo ngang */
.cell-adj{font-size:10px;line-height:1.3;color:var(--ink-2)}
.cell-adj span,.cell-minor span{white-space:nowrap}
@media (max-width:767px){
  .chart[data-view=compact] .cell-adj{display:none}
  .chart[data-view=full] .board-scroll{overflow:visible;margin:0 -8px;padding-bottom:0}
  .chart[data-view=full] .board{min-width:0;grid-auto-rows:minmax(168px,auto)}
  .chart[data-view=full] .cell{padding:4px 3px 5px;gap:2px;overflow-wrap:break-word}
  .chart[data-view=full] .cell-top{font-size:9.5px}
  .chart[data-view=full] .cell-major{font-size:12px;line-height:1.2}
  .chart[data-view=full] .cell-hoa,.chart[data-view=full] .cell-minor{font-size:10px;line-height:1.25}
  .chart[data-view=full] .cell-adj{font-size:9px;line-height:1.25}
  .chart[data-view=full] .cell-stage,.chart[data-view=full] .cell-dv,.chart[data-view=full] .cell-name{font-size:9.5px}
  .chart[data-view=full] .center{padding:8px 6px;font-size:11px;gap:4px}
  .chart[data-view=full] .center strong{font-size:16px}
}

/* ===== T298 khu bài luận kiểu biên tập Đông phương: thẻ giấy ngà, tên cung son + huy hiệu sao vàng đồng,
   khung "sao đi kèm", lời tựa, tab dạng viên, mờ dần khi đổi chủ đề ===== */
.studio-caps:focus-visible{outline:2px solid #B8892C;outline-offset:2px;border-radius:6px}
#bai-luan{--bronze:#8A5A12;--bronze-bg:#FBF1DC;--bronze-line:#E2C48C;--aux-line:#C98A1C}
html[data-theme="dark"] #bai-luan{--bronze:#E8C58A;--bronze-bg:#2A2116;--bronze-line:#5A4526;--aux-line:#B9822C}
/* tab chủ đề dạng viên */
#bai-luan nav.tabs{display:flex;gap:4px;width:100%;max-width:520px;padding:4px;margin:4px 0 18px;border:1px solid var(--line);border-radius:999px;background:var(--paper-2);overflow-x:auto}
#bai-luan nav.tabs a{flex:1;display:flex;align-items:center;justify-content:center;min-height:42px;padding:8px 14px;border-radius:999px;font-weight:600;color:var(--ink-2);box-shadow:none;transition:background-color .15s var(--ease-out),color .15s var(--ease-out)}
#bai-luan nav.tabs a[aria-current=page]{background:var(--sheet);color:var(--son);box-shadow:0 2px 8px rgba(60,40,10,.14)}
#bai-luan nav.tabs a:focus-visible{outline:2px solid var(--son);outline-offset:2px}
/* thẻ bài */
#bai-luan>.card{background:var(--sheet);border:1px solid var(--line);border-radius:14px;padding:18px 18px 16px;margin:0 0 14px;gap:12px;
  transition:box-shadow .2s var(--ease-out),border-color .2s var(--ease-out)}
#bai-luan>.card p{max-width:65ch;line-height:1.75}
#bai-luan>.card.is-highlighted{border-color:var(--bronze-line);box-shadow:0 0 0 3px rgba(212,175,55,.22)}
.card--palace .card-head{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 12px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.card--palace .card-head h3{display:flex;align-items:center;gap:10px;font-family:var(--serif);font-size:22px;color:var(--son)}
.card--palace .card-head h3::before{content:"";flex:0 0 auto;width:18px;height:1px;background:currentColor}
.star-pills{display:flex;flex-wrap:wrap;gap:6px;margin:0;padding:0;list-style:none}
.pill{display:inline-flex;align-items:baseline;gap:4px;max-width:100%;padding:3px 11px;border:1px solid var(--bronze-line);border-radius:999px;background:var(--bronze-bg);
  color:var(--bronze);font-size:14px;font-weight:600;line-height:1.5}
.pill-lv{font-weight:400;font-size:13px}
.pill--empty{background:transparent;border-style:dashed;border-color:var(--line-2);color:var(--ink-2);font-weight:500}
.aux{margin:0;padding:10px 14px 12px;border-left:2px solid var(--aux-line);border-radius:0 10px 10px 0;background:rgba(180,138,46,.07)}
.aux p{margin:0}
.aux-tags{display:flex;flex-wrap:wrap;gap:6px;margin:0 0 8px!important}
.tag{display:inline-block;padding:1px 9px;border:1px solid var(--line-2);border-radius:999px;font-size:12.5px;font-weight:600;line-height:1.6;color:var(--ink-2);background:var(--sheet)}
.tag--hoa{color:var(--bronze);background:var(--bronze-bg);border-color:var(--bronze-line)}
.tag--sat{color:#8E2A20;background:#FBEAE6;border-color:#E9BDB4}
.tag--void{border-style:dashed}
.tag--chieu{color:#5C4210;background:#F4EDDC;border-color:#E3D2A2}
html[data-theme="dark"] .tag--sat{color:#F0B2A6;background:#341A15;border-color:#6B3328}
html[data-theme="dark"] .tag--chieu{color:#E9D6A6;background:#2A2318;border-color:#5A4A2A}
/* lời tựa + lời kết */
#bai-luan>.card--lead{position:relative;padding:24px 20px 18px 24px;border-color:#E3D2A2;background:linear-gradient(180deg,#FBF6EA,var(--sheet))}
#bai-luan>.card--lead::before{content:"\201C";position:absolute;top:2px;left:10px;font:600 54px/1 var(--serif);color:rgba(168,40,32,.28)}
#bai-luan>.card--lead p{font-family:var(--serif);font-size:1.08rem;line-height:1.7;color:var(--ink)}
.lead-kicker{margin:0;font-size:12px!important;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-text,#7A5714)}
#bai-luan>.card--close{border-top:2px solid var(--son)}
#bai-luan>.card--close .card-head h3{font-family:var(--serif);color:var(--son)}
html[data-theme="dark"] #bai-luan>.card--lead{border-color:var(--line);background:var(--sheet)}
/* mờ dần khi đổi chủ đề */
@media (prefers-reduced-motion:no-preference){#bai-luan.is-enter{animation:bl-in .15s ease-out}}
@keyframes bl-in{from{opacity:0;transform:translateY(3px)}}
@media (max-width:767px){
  #bai-luan>.card{padding:16px 16px 14px;border-radius:12px}
  #bai-luan>.card--lead{padding:22px 16px 16px 20px}
  .card--palace .card-head h3{font-size:20px}
  .pill{font-size:13.5px;padding:2px 10px}
}

/* T301: tam giác mặc định của cung Mệnh — ô tam hợp/xung chiếu chỉ viền nhẹ, không đổi nền khi chưa chọn cung */
.board:not(.has-focus) .cell.is-linked{background:var(--sheet);box-shadow:inset 0 0 0 1.5px rgba(168,40,32,.28)}
/* chữ ô giữa nằm trên đường chiếu, có quầng nền giấy để nét kẻ đi sau chữ */
.slot-center .center>*{position:relative;z-index:3;text-shadow:0 0 3px var(--paper),0 0 7px var(--paper),0 0 12px var(--paper)}
.slot-center .center>.seal{text-shadow:none}
/* sửa lỗi: .studio (T292) tự khai --lq/--lq-2 màu TỐI nên khối Sơn mài sáng dùng var(--lq…) trong studio ra nền tối → ghi thẳng màu ngà */
html:not([data-theme=dark]) .studio{background:var(--lq-sheen),var(--lq-grain),linear-gradient(180deg,#FBF6EA 0%,#F2E6CE 100%);
  box-shadow:0 12px 30px rgba(120,90,30,.12),inset 0 0 0 5px #FBF6EA,inset 0 0 0 6px rgba(180,138,46,.35)}

/* ===== T303 khung chọn gói cạnh Phòng nghe (Sơn mài sáng) ===== */
.hero-zone{display:grid;gap:16px;margin:20px 0 28px}
.hero-zone>.studio{margin:0}
@media (min-width:768px) and (max-width:1023px){.page--read>.hero-zone{max-width:880px;margin-left:auto;margin-right:auto}.hero-zone>.studio{max-width:none}}
@media (min-width:1024px){
  .page--read>.hero-zone{max-width:none}
  .hero-zone.has-offers{grid-template-columns:minmax(0,1.3fr) minmax(320px,1fr);align-items:start}
  .hero-zone>.studio{max-width:none}
}
.offers{display:flex;flex-direction:column;gap:12px;padding:18px 18px 16px;border-radius:18px;background:var(--sheet);
  border:1px solid #E3D2A2;box-shadow:0 10px 30px rgba(120,90,30,.08)}
.offers.is-call{animation:offers-call 1.4s var(--ease-out) 2}
@keyframes offers-call{40%{box-shadow:0 0 0 5px rgba(212,175,55,.35),0 10px 30px rgba(120,90,30,.08)}}
@media (prefers-reduced-motion:reduce){.offers.is-call{animation:none;box-shadow:0 0 0 3px rgba(212,175,55,.35)}}
.offers-eyebrow{margin:0;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#7A5714}
.offers h2{margin:0;font-family:var(--serif);font-size:22px;line-height:1.3}
.offer--best{position:relative;margin-top:6px;padding:16px 16px 14px;border:1.5px solid #C9A040;border-radius:14px;
  background:linear-gradient(180deg,#FFFBF0,#FBF3DF)}
.offer-ribbon{position:absolute;top:-12px;right:14px;padding:3px 11px;border-radius:999px;background:var(--son);color:#FFF8F0;
  font-size:12.5px;font-weight:700;letter-spacing:.02em;box-shadow:0 3px 8px rgba(168,40,32,.25)}
.offer-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;margin-bottom:8px}
.offer-head h3{margin:0;font-family:var(--serif);font-size:22px;color:var(--son)}
.offer-price{margin:0;display:flex;align-items:baseline;gap:8px}
.offer-price b{font-family:var(--serif);font-size:24px;color:var(--ink);font-variant-numeric:tabular-nums}
.offer-price s{color:var(--ink-2);font-size:14px}
.offer-items{display:grid;gap:6px;margin:0;padding:0;list-style:none}
.offer-items li{display:flex;align-items:flex-start;gap:8px;font-size:15px;line-height:1.45;color:var(--ink)}
.offer-items .ic{flex:0 0 auto;width:16px;height:16px;margin-top:3px;color:#A47A1E}
.offer-items li.is-have{color:var(--ink-2)}
.offer-items li.is-have .ic{color:var(--son)}
.offer-items small{margin-left:4px;padding:0 7px;border-radius:999px;background:#F3E6CC;color:#6B4C12;font-size:12px;font-weight:600}
.offer-items a{display:inline-flex;align-items:center;min-height:32px;color:var(--ink);font-weight:600}
.offer-note{margin:8px 0 0;font-size:13.5px;color:var(--ink-2)}
.offer-buy{width:100%;margin-top:12px;min-height:48px;font-size:16px}
.offers-or{margin:6px 0 0;font-size:13px;font-weight:600;color:var(--ink-2);text-align:center;letter-spacing:.04em}
.offer-singles{display:grid;gap:8px}
.offer-single{width:100%;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:1px 12px;min-height:58px;
  padding:9px 14px;border:1px solid var(--line);border-radius:12px;background:var(--paper);color:var(--ink);font:inherit;text-align:left;cursor:pointer;
  transition:border-color .15s var(--ease-out),background-color .15s var(--ease-out)}
@media (hover:hover) and (pointer:fine){.offer-single:hover{border-color:#C9A040;background:#FFFBF0}}
.offer-single:focus-visible{outline:2px solid var(--son);outline-offset:2px}
.os-name{font-weight:600;font-size:15px}
.os-desc{grid-column:1;font-size:13px;color:var(--ink-2)}
.os-price{grid-row:1/span 2;grid-column:2;font-family:var(--serif);font-size:18px;color:var(--son);font-variant-numeric:tabular-nums}
.offers-trust{display:flex;align-items:center;gap:6px;margin:4px 0 0;font-size:12.5px;color:var(--ink-2)}
.offers-trust .ic{width:15px;height:15px;color:#A47A1E}
html[data-theme="dark"] .offers{border-color:var(--line)}
html[data-theme="dark"] .offer--best{background:var(--sheet);border-color:#8A6A2A}
html[data-theme="dark"] .offers-eyebrow{color:#E8C58A}
html[data-theme="dark"] .offer-items small{background:#3A2E1C;color:#E8C58A}
@media print{.offers{display:none!important}}

/* T304 dòng báo thử nghiệm trong khung gói */
.offers-test{margin:-4px 0 0;padding:6px 10px;border-radius:8px;background:#EEF5E9;color:#2F5A23;font-size:13.5px;font-weight:600}
html[data-theme="dark"] .offers-test{background:#1F2E1A;color:#B9DDAA}

/* T305 khuyến mại 0đ: giá thật gạch ngang nhạt */
.offer-price s,.os-price s,.ledger-price s,.unlock-form s{color:var(--ink-2);font-weight:400;font-size:.85em;margin-right:2px}
.offers-test{background:#FBEAE6;color:#8E2A20}
html[data-theme="dark"] .offers-test{background:#341A15;color:#F0B2A6}

/* T307 lá số của trẻ: ghi chú cho bố mẹ, câu đọc theo tuổi ở nghĩa 12 cung */
.kid-note{display:flex;gap:8px;align-items:flex-start;margin:0 0 12px;padding:10px 12px;border-radius:10px;background:#FBF3E4;color:#5A4630;font-size:.94rem;line-height:1.5}
.kid-note svg{flex:none;width:18px;height:18px;margin-top:2px;color:#A33A2A}
.m-lens{margin:6px 0 10px;padding:8px 10px;border-left:3px solid #A33A2A;background:#FBF3E4;color:#4A3A28;font-size:.93rem}
html[data-theme="dark"] .kid-note,html[data-theme="dark"] .m-lens{background:#2C2318;color:#EADBC4}

/* T310 dòng giải thích Lời luận / Trà đàm */
.studio-mode-hint{margin:10px 0 0;font-size:.92rem;line-height:1.55;color:#6B5640;max-width:62ch}
.studio-mode-hint b{color:#8E2A20;font-weight:600}
html[data-theme="dark"] .studio-mode-hint{color:#D9C9AE}
html[data-theme="dark"] .studio-mode-hint b{color:#F0B2A6}

/* T311 trang thông tin, liên hệ, chân trang */
.legal h1{margin:8px 0 2px}.legal h2{font-size:1.08rem;margin:22px 0 6px}.legal p,.legal li{line-height:1.65}
.legal ul{padding-left:20px}.legal-meta{color:var(--ink-2);font-size:.88rem;margin:0 0 14px}
.legal-nav{display:flex;flex-wrap:wrap;gap:6px 14px;margin:6px 0 10px;font-size:.92rem}
.legal-nav a{min-height:32px;display:inline-flex;align-items:center}.legal-nav a[aria-current]{font-weight:600;color:#8E2A20}
.legal-op{list-style:none;padding:12px 14px!important;border-radius:10px;background:#FBF3E4}
.contact-form{display:grid;gap:14px;margin:16px 0 8px}.contact-form label{display:grid;gap:6px;font-weight:500}
.contact-form input,.contact-form select,.contact-form textarea{font:inherit;padding:10px 12px;border:1px solid #D8C9AE;border-radius:10px;background:#FFFDF8;color:inherit;min-height:44px}
.contact-form .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.legal-sent{display:flex;gap:8px;align-items:center}
.footer-tag{margin-left:8px;color:var(--ink-2);font-size:.88em}.footer-legal{font-size:.9rem}
html[data-theme="dark"] .legal-op{background:#2C2318}
html[data-theme="dark"] .contact-form input,html[data-theme="dark"] .contact-form select,html[data-theme="dark"] .contact-form textarea{background:#1F1A14;border-color:#4A3D2C}

/* T312 bàn lá số minh hoạ trang chủ to hơn trên máy tính */
@media (min-width:960px){.home .ws-side{position:relative;top:auto}.lac--tall{width:100%;max-width:520px}}
@media (min-width:1200px){.ws{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}

/* T313 xác nhận bố mẹ, hỗ trợ ở khung thanh toán, ghi chú Trà đàm */
.guardian{display:flex;gap:10px;align-items:flex-start;margin:4px 0 12px;padding:10px 12px;border:1px solid #E3C9A0;border-radius:10px;background:#FBF3E4;font-size:.92rem;line-height:1.5;cursor:pointer}
.guardian[hidden]{display:none}.guardian input{margin-top:3px;width:18px;height:18px;flex:none}
.pay-help a{font-weight:600}.lock-note{font-size:.86rem;opacity:.85}
html[data-theme="dark"] .guardian{background:#2C2318;border-color:#4A3D2C}

/* T314 khung gói 2 thẻ + dòng lẻ, khoá nghĩa cung, 4 bước chờ, nút kiểm tra lại */
.offer--year{margin-top:12px;border:1px solid #E3C9A0;border-radius:14px;padding:14px 16px;background:#FFFDF8}
.offer-save{margin:2px 0 8px;font-size:.9rem;color:#8E2A20;font-weight:600}
.offer-line{margin:12px 0 0;font-size:.9rem;line-height:1.55;color:var(--ink-2)}
.link-button{background:none;border:0;padding:0;font:inherit;font-weight:700;color:#8E2A20;text-decoration:underline;cursor:pointer;min-height:24px}
.entry--locked p{margin:4px 0}.m-blur{display:grid;gap:6px;margin:8px 0;filter:blur(1.5px);opacity:.55}
.m-blur span{display:block;height:10px;border-radius:6px;background:#E8DCC5}.m-blur span:nth-child(2){width:86%}.m-blur span:nth-child(3){width:64%}
.m-unlock{display:flex;gap:6px;align-items:center;font-size:.92rem;font-weight:600}.m-unlock svg{width:16px;height:16px;color:#A33A2A}
.steps{margin:0 0 14px;padding:14px 16px;border-radius:12px;background:#FBF3E4;border:1px solid #E3C9A0}
.steps-title{margin:0 0 8px;font-weight:600}.steps ol{margin:0 0 6px;padding-left:22px;display:grid;gap:4px}
.steps li{color:var(--ink-2);opacity:.6}.steps li.is-on{opacity:1;font-weight:600;color:inherit}
.steps li.is-done{opacity:1;color:#2F6B3A}.steps li.is-done::marker{content:'✓  '}
.pay-recheck{margin:10px 0 4px}
html[data-theme="dark"] .offer--year{background:#1F1A14;border-color:#4A3D2C}html[data-theme="dark"] .steps{background:#2C2318;border-color:#4A3D2C}html[data-theme="dark"] .m-blur span{background:#4A3D2C}

/* T317 phiếu 3 mức + cảm nhận */
.quick-fb-row{display:flex;flex-wrap:wrap;gap:8px}.quick-fb-row .is-on{outline:2px solid #A33A2A}
.quick-fb-more{display:grid;gap:8px;margin-top:10px}.quick-fb-more label{display:grid;gap:6px;font-size:.92rem}
.quick-fb-more input{font:inherit;padding:10px 12px;border:1px solid #D8C9AE;border-radius:10px;background:#FFFDF8;min-height:44px}
html[data-theme="dark"] .quick-fb-more input{background:#1F1A14;border-color:#4A3D2C;color:inherit}
.tabs a .tab-ok{color:var(--son);font-size:13px}

/* Trang chưa mua: Phòng nghe + khung giá ở cột phải, dưới bàn lá số (04/11) */
@media (min-width:1024px){
  .laso-right>.hero-zone{margin-top:0}
  .laso-right>.hero-zone.has-offers{grid-template-columns:minmax(0,1fr)}
}

/* Đọc nhanh miễn phí, trên khung giá (04/11) */
.quick-read{margin-bottom:20px}
.quick-read h2{font-size:24px;margin:0 0 12px}
.quick-read dl{margin:0;display:flex;flex-direction:column;gap:14px}
.quick-read dt{font-size:14px;font-weight:600;margin-bottom:2px;color:var(--ink-soft,inherit)}
.quick-read dd{margin:0;font-size:16px;line-height:1.6}
.quick-read-note{margin:14px 0 0;font-size:14px;line-height:1.5;color:var(--ink-soft,inherit)}