.bi-khoa{position:relative;max-height:150px;overflow:hidden;-webkit-mask-image:linear-gradient(#000 20%,transparent);mask-image:linear-gradient(#000 20%,transparent);pointer-events:none;user-select:none}
.khoa-phu{border:1px solid #c9a24a;border-radius:12px;padding:14px;margin:14px 0;background:rgba(201,162,74,.08)}.khoa-phu p{margin:0 0 10px}
.moi-xem-tiep{margin-top:16px;border-top:1px dashed #c9a24a66;padding-top:12px}.hang-moi{display:flex;flex-wrap:wrap;gap:8px;margin:6px 0}
#ls-ket-qua, #xem-tiep, .luan-ai { scroll-margin-top: 150px }
/* Gói trọn bộ / hội viên */
.combo { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 18px; align-items: center; border: 1.5px solid var(--cam); border-radius: 18px; padding: 20px; background: linear-gradient(160deg, color-mix(in oklab, var(--do) 22%, var(--trang)), var(--trang)); box-shadow: var(--bong-the) }
.combo:empty { display: none }
.combo h3 { font-size: clamp(22px, 3vw, 28px); margin: 4px 0 8px } .combo .gia-to { color: var(--cam) }
.combo ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muc2) } .combo ul b { color: var(--muc) }
.combo-nut { display: grid; gap: 8px } .combo-nut .nut { width: 100% }
.combo.co { grid-template-columns: minmax(0, 1fr) auto; background: color-mix(in oklab, var(--xanh) 10%, var(--trang)); border-color: color-mix(in oklab, var(--xanh) 60%, var(--vien)) }
.combo.co b { font-family: var(--f-co); font-size: 21px; display: block; margin: 2px 0 }
.the-xem.rieng-tb .gia { color: var(--do-sang) }
.chon-goi .goi-lon { grid-column: 1 / -1 } .chon-goi .goi-lon span { grid-template-columns: minmax(0, 1fr) auto; justify-items: start; text-align: left; padding: 10px 14px } .chon-goi .goi-lon em { grid-column: 1 / -1 }
.chon-goi input:disabled + span { opacity: .45 }
@media (max-width: 720px) { .combo, .combo.co { grid-template-columns: minmax(0, 1fr) } }
/* Xem tiếp theo lá số */
.xem-tiep { display: grid; gap: 14px; border-top: 1px solid var(--vien); padding-top: 26px }
.xt-dau h2 { font-size: clamp(24px, 3.6vw, 32px); margin: 4px 0 6px }
.xt-nhom { font-size: 15px; font-family: var(--f-ui); color: var(--muc2); letter-spacing: .02em; margin-top: 8px }
.luoi-xem { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px }
.the-xem { all: unset; box-sizing: border-box; cursor: pointer; display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; gap: 4px 12px; align-items: center; background: var(--trang); border: 1px solid var(--vien); border-radius: 14px; padding: 14px; box-shadow: var(--bong-the); transition: transform .15s var(--de), border-color .2s }
.the-xem:hover { transform: translateY(-2px); border-color: var(--cam) }
.the-xem:focus-visible { outline: 2px solid var(--cam); outline-offset: 2px }
.the-xem .han, .moi-la-so .han { grid-row: 1 / 3; width: 46px; height: 46px; display: grid; place-items: center; border-radius: 10px; background: var(--do); color: var(--chu-tren-do); font: 700 24px var(--f-han); box-shadow: inset 0 0 0 1.5px color-mix(in oklab, var(--cam) 55%, transparent) }
.the-xem .txt { display: grid; gap: 2px; min-width: 0 } .the-xem .txt b { font-size: 16px; font-family: var(--f-co) } .the-xem .txt small { color: var(--muc2); font-size: 13px; line-height: 1.4 }
.the-xem .gia { grid-column: 2; font-size: 12.5px; font-weight: 700; color: var(--cam-chu) }
.the-xem.da { border-color: color-mix(in oklab, var(--xanh) 50%, var(--vien)) } .the-xem.da .gia { color: var(--xanh) }
.thanh-pdf { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; justify-content: space-between; border: 1px dashed var(--cam); border-radius: 16px; padding: 16px 18px; background: color-mix(in oklab, var(--cam) 6%, var(--trang)) }
.thanh-pdf b { font-family: var(--f-co); font-size: 18px }
.moi-la-so { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 26px; padding: 16px 18px; border: 1px solid var(--cam); border-radius: 16px; background: var(--trang); color: var(--muc); text-decoration: none; box-shadow: var(--bong-the); transition: transform .15s var(--de) }
.moi-la-so:hover { transform: translateY(-2px) } .moi-la-so .han { grid-row: auto } .moi-la-so b { display: block; font-family: var(--f-co); font-size: 19px } .moi-la-so small { color: var(--muc2); font-size: 14px } .moi-la-so .mui { font-size: 22px; color: var(--cam) }
/* Bản in PDF: giấy dó sáng, mực nâu, son đỏ */
.ban-in { position: absolute; left: -12000px; top: 0; width: 780px; color-scheme: light;
  --giay: #faf5ea; --giay2: #efe6d3; --trang: #fffdf7; --vien: #d9ccb2; --muc: #1f1712; --muc2: #4d4136; --nhat: #7d6f5d; --cam: #9a6b12; --cam-chu: #9a6b12; --do-sang: #b3341f; --xanh: #3c6e57; --bong-the: none;
  background: var(--giay); color: var(--muc); font: 15px/1.6 var(--f-ui) }
.ban-in .in-khoi { padding: 6px 4px; background: var(--giay) }
.ban-in .in-dau { display: flex; gap: 14px; align-items: center; margin-bottom: 14px } .ban-in .in-dau h1 { font-size: 30px } .ban-in .in-an svg { width: 52px; height: 52px }
.ban-in .la-so-luoi-in { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(150px, auto)); gap: 1px; background: var(--vien); border: 1.5px solid var(--cam); border-radius: 10px; overflow: hidden }
.ban-in .cung, .ban-in .cung.tp, .ban-in .cung.chon { background: var(--trang) !important; padding: 7px !important; font-size: 11.5px !important; gap: 3px !important }
.ban-in .cung.tp { background: #fbf4e4 !important } .ban-in .cung.menh { box-shadow: none !important; border: 2px solid var(--do-sang) } .ban-in .cung.menh .cung-dau b { color: var(--do-sang) !important }
.ban-in .cung-dau { flex-direction: row !important } .ban-in .cung-dau b { font-size: 13px !important } .ban-in .cung-dau small { font-size: 10.5px !important }
.ban-in .ds-tap, .ban-in .ds-phu { display: flex !important } .ban-in .cung-chan small:last-child { display: inline !important }
.ban-in .la-so-giua { background: var(--giay) !important; padding: 12px !important } .ban-in .la-so-giua dl, .ban-in .la-so-giua .eyebrow { display: grid !important } .ban-in .la-so-giua .eyebrow { display: block !important } .ban-in .tom-gon { display: none !important } .ban-in .la-so-giua h3 { font-size: 18px !important }
.ban-in .in-muc { display: grid; gap: 8px } .ban-in .in-muc h2 { font-size: 24px } .ban-in .in-muc h3 { font-size: 19px } .ban-in .in-muc p, .ban-in .in-muc li { color: var(--muc2) }
.ban-in .in-luan { border-left: 3px solid var(--do-sang); padding-left: 14px } .ban-in .in-luan strong, .ban-in .in-luan b { color: var(--muc) }
.ban-in .in-cung { border-top: 1px solid var(--vien); padding-top: 10px }
.ban-in .in-cuoi { display: flex; gap: 14px; align-items: center; border-top: 1px solid var(--vien); padding-top: 12px } .ban-in .in-thay svg { width: 70px; height: auto }
@media (max-width: 720px) {
  .luoi-xem { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px }
  .the-xem { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; padding: 12px; gap: 6px; align-content: start }
  .the-xem .han { grid-row: auto; width: 38px; height: 38px; font-size: 20px }
  .the-xem .txt b { font-size: 15px } .the-xem .txt small { font-size: 12px } .the-xem .gia { grid-column: 1 }
  .thanh-pdf .nut { width: 100% } }
/* Bố cục: "tráp sơn mài" — nền đen son, thếp vàng, son đỏ cho hào động và nút chính; một cột ~1040px; Thầy Ngẫm là điểm nhấn trang nghiêm. */
:root {
  color-scheme: dark;
  --giay: #120c0b;      /* nền đen son */
  --giay2: #2a1c17;     /* nền phụ, chip */
  --trang: #1c1210;     /* mặt tráp (thẻ) */
  --vien: #3b2a22;      /* đường viền */
  --muc: #efe6d2;       /* khảm vỏ trứng: chữ chính, hào */
  --muc2: #c3b59c;      /* chữ phụ */
  --nhat: #8f826f;      /* nhãn nhỏ */
  --cam: #d6b25e;       /* thếp vàng */
  --cam-chu: #d6b25e;
  --do: #b3341f;        /* son đỏ */
  --do-sang: #d9583f;   /* son đỏ đọc được trên nền tối */
  --xanh: #8fb98a;
  --bong: #3a1712;
  --chu-tren-do: #fff6ea;
  --f-ui: 'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --f-co: 'Alegreya', 'Iowan Old Style', 'Palatino Linotype', Georgia, serif;
  --f-han: 'Noto Serif TC', 'Songti TC', serif;
  --r: 14px;
  --bong-the: 0 1px 0 rgba(214,178,94,.05), 0 14px 30px -18px rgba(0,0,0,.8);
  --de: cubic-bezier(.2,.7,.2,1);
}
* { box-sizing: border-box }
[hidden] { display: none !important }
html, body { background: var(--giay); color: var(--muc) }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100% }
body { font: 16px/1.65 var(--f-ui); min-height: 100%; -webkit-font-smoothing: antialiased }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 10; background: var(--giay) }
a { color: var(--cam) }
:focus-visible { outline: 2px solid var(--cam); outline-offset: 2px; border-radius: 6px }
h1, h2, h3, h4 { font-family: var(--f-co); text-wrap: balance; margin: 0; line-height: 1.18; letter-spacing: -.01em }
h1 { font-weight: 800 } h2, h3 { font-weight: 700 } h4 { font-weight: 700 }
p { margin: 0 }
.wrap { max-width: 1040px; margin: 0 auto; padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px)) }
.eyebrow { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--cam-chu); font-weight: 700 }
.ghi { font-size: 13.5px; color: var(--muc2) }
.gach { display: block; width: 56px; height: 4px; background: var(--cam); border-radius: 2px }

/* Đầu trang */
header.top { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 5; background: color-mix(in oklab, var(--giay) 90%, transparent); backdrop-filter: saturate(1.2) blur(10px); border-bottom: 1px solid var(--vien) }
.top .wrap { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 18px; min-height: 62px; padding-block: 6px }
.logo { display: flex; align-items: center; gap: 9px; text-decoration: none; color: var(--muc); font-weight: 900; font-size: 22px; letter-spacing: -.01em }

.logo small { font-weight: 600; font-size: 12px; color: var(--nhat); letter-spacing: 0 }
nav.menu { display: flex; gap: 2px; margin-left: auto; overflow-x: auto; scrollbar-width: none; align-items: center }
nav.menu::-webkit-scrollbar { display: none }
.tab { padding: 7px 12px; border-radius: 999px; color: var(--muc2); text-decoration: none; font-weight: 600; font-size: 14px; white-space: nowrap; transition: background .2s, color .2s }
.tab:hover { background: var(--giay2); color: var(--muc) }
.tab[aria-current="page"] { background: var(--cam); color: var(--giay) }
.tab.luot { border: 1px solid var(--vien); margin-left: 6px; display: inline-flex; gap: 6px; align-items: center }
.tab.luot b { background: var(--do); color: var(--chu-tren-do); border-radius: 999px; min-width: 22px; padding: 0 6px; text-align: center; font-size: 12.5px }
#lich { display: flex; flex-wrap: wrap; gap: 2px 16px; font-size: 13px; color: var(--muc2); padding-block: 0 8px }
#lich b { color: var(--muc); font-weight: 700 }

main { padding-block: 32px 72px }
.view { display: grid; gap: 28px; animation: hien .45s var(--de) both }
@keyframes hien { from { opacity: 0; transform: translateY(8px) } }

/* Nút */
.nut { appearance: none; border: 1.5px solid var(--nhat); background: transparent; color: var(--muc); padding: 11px 18px; border-radius: 12px; font: 700 15px var(--f-ui); cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 8px; transition: transform .15s var(--de), background .2s, box-shadow .2s }
.nut:hover { transform: translateY(-1px); border-color: var(--cam); box-shadow: 0 8px 18px -12px rgba(0,0,0,.9) }
.nut:active { transform: translateY(0) scale(.98) }
.nut.chinh { background: var(--do); border-color: var(--do); color: var(--chu-tren-do) }
.nut.thay { background: linear-gradient(180deg, #e2c272, #c49a45); border-color: #c49a45; color: #1c1210 }
.nut.nhe { border-color: transparent; color: var(--muc2); text-decoration: underline; text-underline-offset: 3px; box-shadow: none }
.nut.nhe:hover { transform: none; color: var(--muc) }
.nut:disabled { opacity: .6; cursor: wait }
.hanh-dong { display: flex; flex-wrap: wrap; gap: 10px; align-items: center }

/* Ô nhập */
label.nho { font-size: 13px; color: var(--muc2); font-weight: 600 }
input[type="text"], input[type="date"], input[type="search"], input[type="tel"], input[type="email"], input[type="password"], select { width: 100%; background: var(--trang); color: var(--muc); border: 1px solid var(--vien); border-radius: 12px; padding: 12px 14px; font: inherit; transition: border-color .2s, box-shadow .2s }
input:focus, select:focus { outline: none; border-color: var(--cam); box-shadow: 0 0 0 3px color-mix(in oklab, var(--cam) 22%, transparent) }
input::placeholder { color: #7d705f }
.chips-chon { display: flex; flex-wrap: wrap; gap: 8px }
.chips-chon label { cursor: pointer }
.chips-chon input { position: absolute; opacity: 0; pointer-events: none }
.chips-chon span { display: inline-block; padding: 7px 15px; border: 1px solid var(--vien); border-radius: 999px; color: var(--muc2); font-size: 14px; font-weight: 600; background: var(--trang); transition: all .2s }
.chips-chon input:checked + span { border-color: var(--cam); background: transparent; color: var(--cam) }
.chips-chon input:focus-visible + span { outline: 2px solid var(--cam) }

/* Mở đầu */
.mo-dau { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: center }
.mo-dau h1 { font-size: clamp(38px, 6.4vw, 66px); line-height: 1.04 }
.mo-dau h1 em { font-style: italic; font-weight: 500; color: var(--cam) }
.mo-dau .dan { color: var(--muc2); max-width: 50ch; margin-top: 16px; font-size: 17px }
.hoi { display: grid; gap: 12px; margin-top: 24px }
.san-khau { position: relative; display: grid; justify-items: center; gap: 12px }
.san-khau .thay-ngam { width: min(100%, 340px); height: auto; aspect-ratio: 1 }
.vi-du { display: flex; gap: 14px; align-items: center; background: var(--trang); border: 1px solid var(--vien); border-radius: var(--r); padding: 14px 16px; max-width: 360px; box-shadow: var(--bong-the); font-size: 14px; color: var(--muc2) }
.vi-du b { color: var(--muc); font-size: 16px }
#chuoi { display: flex; align-items: center; gap: 12px; font-size: 14px; color: var(--muc2) }
.chuoi-dots { display: flex; gap: 5px }
.chuoi-dots i { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--cam) }
.chuoi-dots i.on { background: var(--cam) }

/* Thầy Ngẫm */
.thay-ngam { display: block; overflow: visible }
.thay-ngam .tn-dau { fill: var(--trang); stroke: var(--muc); stroke-width: 2.2 }
.thay-ngam .tn-ao { fill: #4a1710; stroke: var(--muc); stroke-width: 2; stroke-linejoin: round }
.thay-ngam .tn-net { fill: none; stroke: var(--muc); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round }
.thay-ngam .tn-net.mong { stroke-width: 1.5 }
.thay-ngam .tn-rau { fill: none; stroke: var(--muc); stroke-width: 1.3; stroke-linecap: round; transform-origin: 60px 42px; animation: rau 6s ease-in-out infinite }
.thay-ngam .tn-bui { fill: var(--muc) }
.thay-ngam .tn-tram { stroke: var(--cam); stroke-width: 2.4; stroke-linecap: round }
.thay-ngam .tn-doan { fill: var(--do) }
.thay-ngam .tn-quang { fill: none; stroke: var(--cam); stroke-width: 1; opacity: .6; transform-origin: 60px 33px; animation: quang 5s ease-in-out infinite }
.thay-ngam .tn-lu { fill: var(--cam) } .thay-ngam .tn-nen { stroke: var(--do-sang); stroke-width: 1.6 }
.thay-ngam .tn-khoi path { fill: none; stroke: var(--muc); stroke-width: 1.3; stroke-linecap: round; stroke-dasharray: 30; animation: khoi 4s linear infinite }
.thay-ngam .tn-khoi path + path { animation-delay: -2s }
.thay-ngam .tn-than { transform-origin: 60px 96px; animation: tho-thien 5s ease-in-out infinite }
@keyframes tho-thien { 50% { transform: scale(1.015) translateY(-.6px) } }
@keyframes quang { 50% { opacity: .9; transform: scale(1.03) } }
@keyframes rau { 50% { transform: rotate(1.5deg) } }
@keyframes khoi { from { stroke-dashoffset: 60; opacity: .7 } to { stroke-dashoffset: 0; opacity: 0 } }
.tn-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; background: var(--giay); border: 1px solid var(--cam); padding: 2px; overflow: hidden }
.tn-avatar .tn-khoi, .tn-avatar .tn-lu, .tn-avatar .tn-nen, .tn-avatar .tn-quang { display: none }
.cho-thay { display: grid; justify-items: center; gap: 4px; padding: 8px 0 4px }
.cho-thay .thay-ngam { width: 170px; height: 170px }
.cho-loi { font-family: var(--f-co); font-style: italic; color: var(--cam); font-size: 19px; min-height: 1.5em; transition: opacity .3s }
.mk-thay { width: 96px; height: 96px; justify-self: center }
.logo-hinh svg, .logo > svg { width: 38px; height: 38px }
/* Bàn gieo */
.ban-gieo { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 28px; align-items: center; padding: 26px; border: 1px solid var(--vien); border-radius: 18px; background: var(--trang); box-shadow: var(--bong-the) }
#xu { display: flex; gap: 14px; cursor: pointer; perspective: 600px; flex-wrap: wrap }
.dong-xu { width: clamp(76px, 18vw, 112px); aspect-ratio: 1; filter: drop-shadow(0 6px 8px rgba(29,27,24,.18)) }
.dong-xu svg { width: 100%; height: 100%; display: block }
.dong-xu.lat { animation: lat .85s cubic-bezier(.3,.7,.3,1) var(--d, 0ms) both }
@keyframes lat { 0% { transform: translateY(0) rotateX(0) } 45% { transform: translateY(-50px) rotateX(900deg) } 100% { transform: translateY(0) rotateX(1440deg) } }
.xu-vanh { fill: #9c7a35 } .xu-mat { fill: #d9b45f } .xu-mat.sau { fill: #c49d4f } .xu-lo { fill: var(--trang) } .xu-vong { fill: none; stroke: #9c7a35; stroke-width: 2 }
.dong-xu text { font: 700 17px var(--f-han); fill: #5b3f14; text-anchor: middle; dominant-baseline: middle }
#hao-dang-gieo { font-size: 22px; font-weight: 800 }
#ghi-lac { min-height: 1.6em }

/* Quẻ */
.que { display: grid; gap: var(--g) }
.que-lg { --w: 168px; --h: 18px; --g: 12px } .que-md { --w: 120px; --h: 13px; --g: 9px } .que-sm { --w: 64px; --h: 7px; --g: 5px } .que-xs { --w: 44px; --h: 5px; --g: 4px }
.hao { position: relative; width: var(--w); height: var(--h); display: flex; justify-content: space-between }
.hao i { display: block; height: 100%; background: var(--muc); border-radius: 2px; transition: background .3s }
.hao.duong i:first-child { width: 100% } .hao.duong i:last-child { display: none }
.hao.am i { width: 42% }
.hao.dong i { background: var(--do-sang) }
.hao.cho i { background: var(--vien) }
.hao .dau { position: absolute; left: calc(100% + 10px); top: 50%; transform: translateY(-50%); color: var(--do-sang); font-size: calc(var(--h) * 1.1); line-height: 1 }
#que-dang-thanh .hao:not(.cho) { animation: moc .4s var(--de) both }
@keyframes moc { from { transform: scaleX(.3); opacity: 0 } }

/* Kết quả */
.ket-qua { display: grid; gap: 24px }
.ket-qua > * { animation: hien .5s var(--de) both }
.ket-qua > *:nth-child(2) { animation-delay: .06s } .ket-qua > *:nth-child(3) { animation-delay: .12s } .ket-qua > *:nth-child(4) { animation-delay: .18s } .ket-qua > *:nth-child(5) { animation-delay: .24s }
.kq-dau { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 32px; align-items: center }
.kq-hinh { display: grid; justify-items: center; gap: 10px; padding: 24px 40px 22px 24px; border: 1px solid var(--vien); border-radius: 18px; background: var(--trang); box-shadow: var(--bong-the) }
.kq-hinh .ky { font-size: 22px; color: var(--nhat) }
.kq-ten h2, .kq-ten h1 { font-size: clamp(36px, 5vw, 58px); font-weight: 800; margin-top: 6px }
.hv-lon { font-family: var(--f-co); font-style: italic; font-size: 20px; color: var(--cam-chu); margin-top: 6px }
.cat { font-size: 13px; color: var(--muc2); margin-top: 10px } .cat span { color: var(--cam); letter-spacing: .2em }
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px }
.chips span { font-size: 13px; padding: 3px 11px; border-radius: 999px; background: var(--giay2); color: var(--muc2); font-weight: 600 }
.co-nhan { margin: 0; font-family: var(--f-co); font-size: clamp(22px, 3vw, 30px); line-height: 1.38; padding: 4px 0 4px 22px; border-left: 3px solid var(--do); max-width: 40ch }
.cau-hoi-lai { color: var(--muc2); font-style: italic }
.luoi-2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px }
.luoi-2 section { display: grid; gap: 8px; align-content: start; min-width: 0 }
.luoi-2 h3 { font-size: 18px; margin-top: 12px }
.luoi-2 p { max-width: 62ch; color: var(--muc2) }
.hao-dong, .sau-hao { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px }
.hao-dong li, .sau-hao li { display: grid; grid-template-columns: 84px minmax(0, 1fr); gap: 12px; align-items: start }
.hao-dong .nhan { color: var(--do-sang); font-weight: 700; font-size: 14px }
.hv { font-family: var(--f-co); font-style: italic; color: var(--cam-chu) }
.phu-que { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; margin-top: 10px }
.que-phu { display: grid; gap: 6px; justify-items: start; padding: 14px; border: 1px solid var(--vien); border-radius: var(--r); text-decoration: none; color: var(--muc); background: var(--trang); transition: transform .2s var(--de), border-color .2s }
.que-phu:hover { transform: translateY(-2px); border-color: var(--cam) }
.que-phu .nhan { font-size: 11.5px; color: var(--nhat); letter-spacing: .06em; text-transform: uppercase; font-weight: 700 }
.que-phu b { font-size: 16px } .que-phu small { color: var(--muc2) }
.da-gieo { color: var(--cam-chu) }
#the { width: min(100%, 300px); height: auto; border-radius: 12px; display: block; margin-bottom: 10px; box-shadow: var(--bong-the) }

/* Thầy luận */
.luan-ai { border: 1px solid var(--vien); border-radius: 18px; padding: 22px; background: var(--trang); box-shadow: var(--bong-the); animation: hien .4s var(--de) both }
.ai-dau { display: flex; align-items: center; gap: 12px; margin-bottom: 12px }
.ai-dau b { font-size: 18px }
.ai-noi-dung { display: grid; gap: 10px; max-width: 68ch }
.ai-noi-dung p { color: var(--muc2) }
.ai-noi-dung strong { color: var(--cam); font-family: var(--f-co); font-size: 18px }
.ai-noi-dung em { font-family: var(--f-co); font-size: 19px; color: var(--muc) }
.loi { color: #e58a74 }

/* Thư viện */
.thu-vien-dau { display: flex; flex-wrap: wrap; gap: 16px; align-items: end; justify-content: space-between }
.thu-vien-dau h1 { font-size: clamp(30px, 5vw, 46px) }
.thu-vien-dau input { max-width: 320px }
#luoi-que { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px }
.o-que { position: relative; display: grid; gap: 8px; justify-items: start; padding: 14px; border: 1px solid var(--vien); border-radius: var(--r); color: var(--muc); text-decoration: none; background: var(--trang); transition: transform .2s var(--de), border-color .2s, box-shadow .2s }
.o-que:hover { transform: translateY(-2px); border-color: var(--cam); box-shadow: var(--bong-the) }
.o-que .so { position: absolute; right: 12px; top: 10px; font: 700 12px var(--f-ui); color: var(--nhat); font-variant-numeric: tabular-nums }
.o-que b { font-size: 15px; line-height: 1.25 } .o-que small { color: var(--muc2); font-size: 12.5px }
.quay { font-size: 14px }
.hao-mini { width: 40px; height: 6px; display: flex; justify-content: space-between; margin-top: 9px }
.hao-mini i { height: 100%; background: var(--muc); border-radius: 1px } .hao-mini.duong i:first-child { width: 100% } .hao-mini.duong i:last-child { display: none } .hao-mini.am i { width: 42% }
.sau-hao li { grid-template-columns: 48px minmax(0, 1fr) }

/* Lá số */
.ls-dau { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: 32px; align-items: end }
.ls-dau h1 { font-size: clamp(30px, 5vw, 46px) }
#ls-form { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; align-items: end; background: var(--trang); border: 1px solid var(--vien); border-radius: 18px; padding: 18px; box-shadow: var(--bong-the) }
#ls-form .full { grid-column: 1 / -1 }
#ls-form .gt { display: flex; gap: 8px }
#ls-loi { color: #e58a74; font-size: 14px }
#ls-vi-du { color: var(--cam-chu); font-size: 14px; font-weight: 600 }
.la-so-wrap { overflow-x: auto }
#la-so-luoi { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); grid-template-rows: repeat(4, minmax(150px, auto)); gap: 1px; background: var(--vien); border: 1.5px solid var(--cam); border-radius: 12px; overflow: hidden; min-width: 640px }
.cung { all: unset; box-sizing: border-box; cursor: pointer; background: var(--trang); padding: 8px; display: flex; flex-direction: column; gap: 4px; font-size: 12.5px; line-height: 1.35; min-width: 0; transition: background .2s }
.cung:hover { background: #241713 }
.cung:focus-visible { outline: 2px solid var(--cam); outline-offset: -2px }
.cung.tp { background: #1f1411 }
.cung.menh { box-shadow: inset 0 0 0 2px var(--do-sang) }
.cung.chon { background: #2b1a14 }
.cung-dau { display: flex; justify-content: space-between; gap: 6px; border-bottom: 1px solid var(--vien); padding-bottom: 3px }
.cung-dau b { font-size: 14px; color: var(--cam); font-weight: 700; font-family: var(--f-co) }
.cung.menh .cung-dau b { color: #ff9a80 }
.cung-dau small { color: var(--nhat) }
.ds-chinh { display: flex; flex-direction: column }
.sao.chinh { font-weight: 700; color: var(--muc); font-size: 13.5px }
.sao.chinh.mo { color: var(--nhat) }
.sao sup { font-size: 9.5px; color: var(--cam-chu); margin-left: 2px; font-weight: 600 }
.vcd { color: var(--nhat); font-style: italic }
.ds-phu { display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--muc2) }
.sao.phu.sat { color: #e58a74 }
.ds-tap { color: var(--nhat); font-size: 11.5px }
.cung-chan { margin-top: auto; display: flex; flex-wrap: wrap; gap: 0 8px; color: var(--nhat); font-size: 11px }
.cung-chan .ln { color: var(--do-sang); font-weight: 700 } .cung-chan .dh { color: var(--cam-chu); font-weight: 700 }
.hoa { font-style: normal; font-size: 10px; padding: 0 4px; border-radius: 3px; margin-left: 4px; color: #fff; vertical-align: 1px }
.h-Lộc { background: #3c6e57 } .h-Quyền { background: #9a5a17 } .h-Khoa { background: #2f5e86 } .h-Kỵ { background: #a8382c }
.la-so-giua { background: var(--giay); padding: 18px; display: grid; gap: 8px; align-content: center; justify-items: center; text-align: center }
.la-so-giua h3 { font-size: 21px }
.la-so-giua dl { display: grid; grid-template-columns: auto auto; gap: 2px 12px; margin: 0; font-size: 13px; text-align: left }
.la-so-giua dt { color: var(--nhat) } .la-so-giua dd { margin: 0 }
.tom-gon { display: none; font-size: 12px; color: var(--muc2) }
.ls-duoi { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 36px }
#chi-tiet-cung, #tong-quan section { display: grid; gap: 10px; align-content: start }
#chi-tiet-cung h3, #tong-quan h3 { font-size: 21px }
#tong-quan { display: grid; gap: 20px }
.sao-mo-ta { display: grid; gap: 4px; padding-top: 10px; border-top: 1px dashed var(--vien) }
.sao-mo-ta h4 { font-size: 17px } .sao-mo-ta small { font-weight: 400; font-size: 13px; color: var(--nhat) }
.sao-mo-ta p, #chi-tiet-cung > p { color: var(--muc2) }
.phu-y { color: var(--muc2) } .phu-y b { color: var(--muc) }
.ds-phu-mo-ta { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muc2) } .ds-phu-mo-ta b { color: var(--muc) }
.cach-cuc { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px }
.cach-cuc li { display: grid; gap: 2px; padding-left: 12px; border-left: 3px solid var(--nhat) }
.cach-cuc li.cat { border-color: var(--xanh) } .cach-cuc li.hung { border-color: var(--do-sang) }
.cach-cuc b { font-size: 16px } .cach-cuc span { color: var(--muc2) }

/* Lượt luận */
.goi-dau h1 { font-size: clamp(30px, 5vw, 46px) } .goi-dau p { color: var(--muc2); max-width: 62ch; margin-top: 10px }
.bang-gia { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px }
.goi { display: grid; gap: 12px; align-content: start; padding: 22px; border: 1px solid var(--vien); border-radius: 18px; background: var(--trang); box-shadow: var(--bong-the) }
.goi.noi { border: 2px solid var(--cam) }
.goi h3 { font-size: 20px } .gia { font: 800 32px var(--f-co); color: var(--cam); font-variant-numeric: tabular-nums } .gia small { font: 500 14px var(--f-ui); color: var(--muc2) }
.goi ul { margin: 0; padding-left: 18px; display: grid; gap: 4px; color: var(--muc2) }
.mua { display: grid; gap: 8px; margin-top: 6px }
.mua .nut { justify-content: space-between }
.mua .nut s { font-weight: 500; opacity: .6; margin-right: 6px }
.chon-goi { border: 0; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px }
.chon-goi legend { margin-bottom: 6px }
.chon-goi label { cursor: pointer }
.chon-goi input { position: absolute; opacity: 0; pointer-events: none }
.chon-goi span { display: grid; gap: 2px; justify-items: center; padding: 10px 6px; border: 1px solid var(--vien); border-radius: 12px; text-align: center; transition: border-color .2s, background .2s }
.chon-goi b { font-size: 15px } .chon-goi i { font-style: normal; color: var(--cam); font-weight: 700; font-size: 14px } .chon-goi em { font-style: normal; font-size: 11px; color: var(--xanh) }
.chon-goi input:checked + span { border-color: var(--cam); background: #2b1c12 }
.chon-goi input:focus-visible + span { outline: 2px solid var(--cam) }
.o-nhap { display: grid; gap: 4px } .o-nhap.hai { grid-template-columns: 1fr 1fr; gap: 8px } .o-nhap.hai > div { display: grid; gap: 4px; min-width: 0 }
.tick { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; color: var(--muc2); cursor: pointer }
.tick input { margin-top: 3px; accent-color: var(--cam); width: 16px; height: 16px; flex: none }
#khung-qr { text-align: center } #khung-qr .anh-qr { justify-self: center; background: #fff; border-radius: 12px; padding: 8px; width: 240px; height: auto; max-width: 100% }
.ck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 4px 12px; margin: 0; text-align: left; font-size: 14px } .ck dt { color: var(--nhat) } .ck dd { margin: 0; overflow-wrap: anywhere } .ck b { color: var(--muc) } .ma-ck { color: var(--cam) !important; letter-spacing: .06em }
.chep { all: unset; cursor: pointer; font-size: 12px; color: var(--cam); border: 1px solid var(--vien); border-radius: 6px; padding: 0 6px; margin-left: 4px }
#thong-bao { position: fixed; left: 50%; bottom: calc(18px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 30; max-width: min(92vw, 520px); padding: 12px 18px; border-radius: 12px; background: #1c1210; border: 1px solid var(--cam); color: var(--muc); box-shadow: 0 18px 40px -16px #000; animation: hien .35s var(--de) both; font-size: 14.5px }
#thong-bao.loi { border-color: var(--do-sang) }
.tiet-kiem { font-size: 12px; font-weight: 700; color: var(--xanh); background: #1d2a1f; border-radius: 999px; padding: 1px 8px }
.kenh { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; padding: 22px; border: 1px dashed var(--nhat); border-radius: 18px }
.kenh h3 { font-size: 18px } .kenh p { color: var(--muc2); margin-top: 6px }

/* Hộp mở khoá */
#mo-khoa { position: fixed; inset: 0; z-index: 20; background: rgba(8,5,4,.78); overflow-y: auto; backdrop-filter: blur(3px); display: grid; place-items: center; padding: max(16px, env(safe-area-inset-left, 0px)); animation: hien-mo .25s ease both }
@keyframes hien-mo { from { opacity: 0 } }
#mo-khoa .hop { max-width: 440px; width: 100%; background: var(--trang); border: 1px solid #6b5432; margin-block: auto; border-radius: 20px; padding: 24px; display: grid; gap: 12px; box-shadow: 0 30px 60px -30px rgba(29,27,24,.6); animation: hien .35s var(--de) both }
#mo-khoa h3 { font-size: 22px; text-align: center }
#mo-khoa p { color: var(--muc2); text-align: center }

footer { border-top: 1px solid var(--vien); padding-block: 24px 44px; color: var(--muc2); font-size: 13.5px }
footer .wrap { display: grid; gap: 6px }
footer a { color: var(--muc2) }
#khoa-thay-khung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px }
#khoa-thay-khung .nut.nhe { padding: 4px 0; font-size: 13px }
#form-khoa-thay { display: flex; gap: 8px; width: 100%; max-width: 360px }
#form-khoa-thay input { padding: 8px 12px; font-size: 14px }
#form-khoa-thay .nut { padding: 8px 14px; font-size: 14px }
.huy-hieu-thay { display: inline-flex; align-items: center; gap: 6px; border: 1px solid #c49a45; color: #e2c272; border-radius: 999px; padding: 3px 12px; font: 700 12.5px var(--f-ui) }

@media (max-width: 760px) {
  .mo-dau, .luoi-2, .ls-dau, .ls-duoi, .kenh { grid-template-columns: minmax(0, 1fr) }
  .mo-dau { gap: 20px }
  .san-khau { order: -1 } .san-khau .thay-ngam { width: 190px } .vi-du { display: none }
  .kq-dau { grid-template-columns: minmax(0, 1fr) }
  .kq-hinh { justify-self: start }
  .ban-gieo { grid-template-columns: minmax(0, 1fr); padding: 18px }
  nav.menu { margin-left: 0; width: 100%; flex-wrap: wrap; overflow: visible }
  .tab { padding: 6px 10px; font-size: 13.5px }
  header.top { position: relative; top: 0 }
  #ls-form { grid-template-columns: minmax(0, 1fr) }
  #la-so-luoi { min-width: 0; grid-template-rows: repeat(4, minmax(118px, auto)) }
  .cung { padding: 5px; font-size: 11px; gap: 2px }
  .cung-dau { flex-direction: column; gap: 0 }
  .cung-dau b { font-size: 12.5px } .cung-dau small { font-size: 10px }
  .sao.chinh { font-size: 11.5px } .ds-tap, .ds-phu, .cung-chan small:last-child { display: none }
  .hoa { font-size: 9px; padding: 0 2px; margin-left: 2px }
  .la-so-giua { padding: 8px } .la-so-giua h3 { font-size: 15px } .la-so-giua dl, .la-so-giua .eyebrow { display: none } .tom-gon { display: block }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important } }

/* 11/11: điện thoại — ô nhập lên đầu, ẩn lá số mẫu, nút vận 2027 */
.goi-y-5k{margin:2px 0 0;font-size:13px;line-height:1.45;opacity:.85}
.goi-y-5k b{color:#e9b949}
@media (max-width:760px){
  #ls-ket-qua.la-vi-du{display:none!important}
  #la-so .ls-dau{display:flex;flex-direction:column}
  #la-so .ls-dau>div:first-child .ghi{display:none}
  #la-so .ls-dau>div:first-child h1{font-size:26px;margin:2px 0 4px}
  .nut-van-2027{font-size:17px;padding:15px 12px}
}
.tuy-chon{margin:8px 0}.tuy-chon summary{cursor:pointer;opacity:.8}
/* ---- Trang quẻ tĩnh ---- */
.trang-que { display: grid; gap: 30px; animation: hien .45s var(--de) both }
.trang-que > *, .trang-que section, .trang-que article { min-width: 0 }
.trang-que article { display: grid; gap: 28px }
.trang-que h1 { font-size: clamp(36px, 6vw, 58px); margin-top: 6px }
.trang-que h2 { font-size: 20px; margin-top: 10px }
.trang-que .luoi-2 h2 { margin-top: 12px }
.vet { font-size: 13px; color: var(--muc2) } .vet a { color: var(--muc2) }
.sau-hao-wrap { display: grid; gap: 12px }
.sau-hao h3 { font-size: 15px; color: var(--do-sang); font-weight: 700; font-family: var(--f-ui) }
.sau-hao p { color: var(--muc2) }
.video { display: grid; gap: 12px }
.video-khung { position: relative; width: 100%; aspect-ratio: 16 / 9; border-radius: 16px; overflow: hidden; background: var(--muc); box-shadow: var(--bong-the) }
.video-khung.doc { aspect-ratio: 9 / 16; max-width: 320px }
.video-khung iframe, .video-khung video { width: 100%; height: 100%; border: 0; display: block; object-fit: cover; background: var(--muc) }
.video-mo { all: unset; cursor: pointer; display: block; width: 100%; height: 100%; position: relative }
.video-mo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .4s var(--de) }
.video-mo:hover img { transform: scale(1.03) }
.video-play { position: absolute; inset: 0; margin: auto; width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; background: var(--do); color: var(--chu-tren-do); font-size: 26px; box-shadow: 0 10px 30px -10px rgba(0,0,0,.6) }
.ds-short { display: flex; flex-wrap: wrap; gap: 8px } .ds-short a { font-size: 14px; font-weight: 600 }
.video-cho { display: grid; grid-template-columns: 110px minmax(0, 1fr); gap: 14px; align-items: center; padding: 16px; border: 1px dashed var(--nhat); border-radius: 16px; color: var(--muc2); background: var(--trang) }
.video-cho .thay-ngam { width: 110px; height: 110px }
.moi-thay { display: grid; grid-template-columns: 100px minmax(0, 1fr); gap: 16px; align-items: center; padding: 20px; border: 1px solid #6b5432; border-radius: 18px; background: linear-gradient(180deg, #23150f, var(--trang)); margin-top: 8px }
.moi-thay-hinh { width: 100px; height: 100px }
.moi-thay h2 { margin-top: 0; font-size: 19px } .moi-thay p { color: var(--muc2); margin-block: 6px 12px }
.faq { display: grid; gap: 4px }
.faq details { border-top: 1px solid var(--vien); padding-block: 12px }
.faq summary { cursor: pointer; font-weight: 700; font-size: 16.5px }
.faq details p { margin-top: 8px; color: var(--muc2); max-width: 66ch }
.truoc-sau { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px; border-top: 1px solid var(--vien); padding-top: 18px }
.truoc-sau a { text-decoration: none; font-weight: 600 }
.muc-luc-dau { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; align-items: center }
.muc-luc-dau h1 { font-size: clamp(32px, 5vw, 50px) }
.muc-luc-thay .thay-ngam { width: 220px; height: 220px }
.co-video { font-size: 11.5px; font-weight: 700; color: var(--chu-tren-do); background: var(--do); border-radius: 999px; padding: 1px 8px }
.bang-wrap { overflow-x: auto; margin-top: 10px; border: 1px solid var(--vien); border-radius: 14px; background: var(--trang) }
.bang-tra { border-collapse: collapse; font-size: 13.5px; min-width: 720px; width: 100% }
.bang-tra th, .bang-tra td { border-bottom: 1px solid var(--vien); padding: 9px 8px; text-align: left }
.bang-tra th { font-weight: 700; background: var(--giay2) }
.bang-tra a { color: var(--muc); text-decoration: none } .bang-tra a:hover { color: var(--cam) }
@media (max-width: 760px) {
  .video-cho, .moi-thay { grid-template-columns: 80px minmax(0, 1fr) } .moi-thay-hinh, .video-cho .thay-ngam { width: 80px; height: 80px }
  .muc-luc-dau { grid-template-columns: minmax(0, 1fr) } .muc-luc-thay { display: none }
}