/* =====================================================================
   KHUNG THƯƠNG HIỆU DÙNG CHUNG — Tử Vi Các · Thư viện huyền học phương Đông
   Băng đầu trang, thanh 6 chuyên mục, dải "Nguồn & quy tắc" của từng công cụ, hộp thoại.
   Dùng biến riêng (--k-*) để hiển thị giống nhau ở mọi trang, không phụ thuộc bảng màu của trang.
   Màu thương hiệu: xanh đen · vàng đồng · trắng ngà.
   ===================================================================== */
:root{--tvc-rong:1280px} /* độ rộng nội dung chung của mọi trang */
.tvc-khung,.tvc-chan{--k-den:#1b2b35;--k-den2:#1c2f3a;--k-dong:#a8823e;--k-dongnhat:#c9a45c;--k-vang:#e6c98a;--k-nga:#efe5cc;
 --k-card:#fffefa;--k-card2:#fbf8f0;--k-ink:#16232b;--k-ink2:#3a454d;--k-ink3:#655f53;--k-line:#e7dfcc;--k-line2:#d3c6a6;--k-xanh:#24566b;--k-timbg:#f1e7cf;--k-timsoft:#e0cd9f;--k-on:#f5ecd6;--k-dangphu:#c9a45c;
 --k-disp:'Fraunces','Cormorant Garamond',Georgia,serif;--k-ui:'Be Vietnam Pro',system-ui,-apple-system,'Segoe UI',sans-serif;--k-han:'Noto Serif TC','Songti TC',serif;
 font-family:var(--k-ui);color:var(--k-ink);margin:0 0 4px}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .tvc-khung,:root:not([data-theme="light"]) .tvc-dlg,:root:not([data-theme="light"]) .tvc-chan{
 --k-card:#16212a;--k-card2:#1b2832;--k-ink:#efe7d4;--k-ink2:#c6bda8;--k-ink3:#8d8778;--k-line:#26343e;--k-line2:#3a4a52;--k-xanh:#6fb0c8;--k-timbg:#2b2919;--k-timsoft:#4a4128;--k-den2:#d4b26a;--k-on:#11191f;--k-dong:#d4b26a;--k-dongnhat:#e2c587;--k-dangphu:#3a3220}}
:root[data-theme="dark"] .tvc-khung,:root[data-theme="dark"] .tvc-dlg,:root[data-theme="dark"] .tvc-chan{
 --k-card:#16212a;--k-card2:#1b2832;--k-ink:#efe7d4;--k-ink2:#c6bda8;--k-ink3:#8d8778;--k-line:#26343e;--k-line2:#3a4a52;--k-xanh:#6fb0c8;--k-timbg:#2b2919;--k-timsoft:#4a4128;--k-den2:#d4b26a;--k-on:#11191f;--k-dong:#d4b26a;--k-dongnhat:#e2c587;--k-dangphu:#3a3220}
.tvc-khung *{box-sizing:border-box}
/* băng đầu trang */
.tvc-hero{position:relative;text-align:center;color:var(--k-nga);border-radius:16px;padding:20px 20px 16px;margin-bottom:12px;border:1px solid #2c4350;box-shadow:0 6px 20px rgba(17,30,38,.18);
 background:#1b2b35 radial-gradient(120% 140% at 50% 0%,#22394a 0%,#1b2b35 55%,#162330 100%)}
.tvc-hero a{color:inherit;text-decoration:none}
/* ảnh bìa chính: ảnh đã có đủ chữ (紫微閣, Tử Vi Các, khẩu hiệu); h1 ẩn giữ cho trình đọc màn hình và máy tìm kiếm */
.tvc-bia-hero{padding:0;overflow:hidden;background:#0d1626;line-height:0;border-color:#3a4a5a}
.tvc-bia-hero>a{display:block}
.tvc-bia{display:block;width:100%;height:auto;aspect-ratio:2000/667;transition:filter .2s}
.tvc-bia-hero>a:hover .tvc-bia{filter:brightness(1.06)}
.tvc-bia-hero>a:focus-visible{outline:2px solid #e6c98a;outline-offset:-4px}
.tvc-an{position:absolute!important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;margin:0}
.tvc-bia-hero .tvc-gd{background:rgba(10,18,30,.55);backdrop-filter:blur(2px);line-height:1.2}
/* hai logo đối xứng nằm ở hai đầu đường kẻ ngang; chữ vẫn căn giữa */
.tvc-logo{position:absolute;top:50%;width:96px;height:96px;border-radius:50%;pointer-events:none;box-shadow:0 0 0 1px rgba(217,184,120,.4),0 6px 18px rgba(0,0,0,.45)}
.tvc-logo-t{left:0;transform:translate(-50%,-50%)}.tvc-logo-p{right:0;transform:translate(50%,-50%)}
@media (max-width:900px){.tvc-logo{width:72px;height:72px}}
@media (max-width:640px){.tvc-logo{width:40px;height:40px}}
.tvc-gd{position:absolute;top:12px;right:14px;display:inline-flex;align-items:center;gap:6px;padding:6px 12px 6px 9px;border-radius:999px;border:1px solid rgba(217,184,120,.45);background:rgba(255,255,255,.06);color:#e6c98a;font:600 12.5px var(--k-ui);cursor:pointer;transition:background .15s,border-color .15s}
.tvc-gd:hover{background:rgba(217,184,120,.16);border-color:#d9b878}
.tvc-gd:focus-visible{outline:2px solid #e6c98a;outline-offset:2px}
.tvc-gd svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:640px){.tvc-gd{top:8px;right:8px;padding:5px 8px}.tvc-gd span{display:none}}
.tvc-han{font-family:var(--k-han);font-size:30px;font-weight:600;letter-spacing:.12em;color:#d9b878;line-height:1.2}
.tvc-hero h1{font-family:var(--k-disp);font-size:2rem;font-weight:650;text-transform:uppercase;letter-spacing:.1em;color:var(--k-vang);margin:4px 0 0;line-height:1.15}
.tvc-sub{font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:#d8ccb0;margin-top:6px}
.tvc-line{position:relative;height:1px;width:calc(100% - 150px);max-width:1180px;margin:12px auto 10px;background:linear-gradient(90deg,#b8934f80,#b8934f 10%,#b8934f 90%,#b8934f80)}
@media (max-width:900px){.tvc-line{width:calc(100% - 100px)}}
@media (max-width:640px){.tvc-line{width:calc(100% - 60px);margin:16px auto 22px}}
.tvc-mon{font-family:var(--k-disp);font-size:18px;font-weight:650;letter-spacing:.06em;color:var(--k-vang)}
.tvc-mon i{font-style:normal;color:#b8934f;margin:0 6px}
.tvc-tag{font-family:var(--k-disp);font-style:italic;font-size:16px;color:#eadfc4;margin:6px 0 0}
/* chuyên mục */
.tvc-cm{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin:0 0 12px}
/* mỗi chuyên mục: nền chuyển màu + họa tiết riêng (chung/cm/*.svg) ở góc phải */
.tvc-cm>*{position:relative;overflow:hidden;isolation:isolate;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:3px;min-height:64px;padding:11px 38px 11px 14px;border-radius:12px;border:1px solid var(--k-line2);
 background:linear-gradient(115deg,var(--k-card) 45%,color-mix(in srgb,var(--k-dong) 16%,var(--k-card)));color:var(--k-ink);text-decoration:none;font:inherit;text-align:left;cursor:pointer;min-width:0;transition:border-color .15s,transform .15s,box-shadow .15s}
.tvc-cm>*::after{content:'';position:absolute;z-index:-1;right:-16px;top:50%;width:66px;height:66px;transform:translateY(-50%) rotate(-8deg);background:center/contain no-repeat;opacity:.55;transition:opacity .15s,transform .2s}
.tvc-cm .cm-tuvi::after{background-image:url(cm/tuvi.svg)}.tvc-cm .cm-tutru::after{background-image:url(cm/tutru.svg?v=20261112f)}.tvc-cm .cm-phongthuy::after{background-image:url(cm/phongthuy.svg)}
.tvc-cm .cm-tuong::after{background-image:url(cm/tuong-mat.webp?v=20261113a);background-size:cover;background-position:center top;width:54px;height:66px;right:-8px;border-radius:8px}.tvc-cm .cm-kinhdich::after{background-image:url(cm/kinhdich.svg)}
.tvc-cm .cm-lichphap::after{background-image:url(cm/lichphap.svg)}.tvc-cm .cm-thuvien::after{background-image:url(cm/thuvien.svg)}
.tvc-cm .ten{font-family:var(--k-disp);font-weight:650;font-size:15.5px;line-height:1.2;color:var(--k-ink);text-transform:none;letter-spacing:0}
.tvc-cm small{font-size:11.5px;color:var(--k-ink3)}
/* di chuột: đổi sang nền đậm giống ô đang chọn (cùng kiểu thẻ chuyên mục ở trang chủ) */
.tvc-cm>*{transition:background .18s,border-color .18s,transform .18s,box-shadow .18s}
.tvc-cm>*:hover,.tvc-cm>*:focus-visible{background:linear-gradient(115deg,var(--k-den2) 50%,color-mix(in srgb,var(--k-dong) 35%,var(--k-den2)));border-color:var(--k-dong);transform:translateY(-2px);box-shadow:0 8px 20px rgba(28,47,58,.22)}
.tvc-cm>*:hover .ten,.tvc-cm>*:focus-visible .ten{color:var(--k-on)}
.tvc-cm>*:hover small,.tvc-cm>*:focus-visible small,.tvc-cm .co:hover small{color:var(--k-dangphu)}
.tvc-cm>*:hover::after{opacity:.8;transform:translateY(-50%) rotate(0)}
.tvc-cm>*:focus-visible{outline:2px solid var(--k-dong);outline-offset:2px}
.tvc-cm .dang{background:linear-gradient(115deg,var(--k-den2) 50%,color-mix(in srgb,var(--k-dong) 35%,var(--k-den2)));border-color:var(--k-den2)}.tvc-cm .dang::after{opacity:.85}
.tvc-cm .dang .ten{color:var(--k-on)}.tvc-cm .dang small{color:var(--k-dangphu)}
@media (prefers-reduced-motion:reduce){.tvc-cm>*,.tvc-cm>*::after{transition:none}.tvc-cm>*:hover{transform:none}}
.tvc-cm .co small{color:var(--k-xanh);font-weight:600}
/* dải thông tin công cụ */
.tvc-cc{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;padding:8px 14px;margin-bottom:12px;border:1px dashed var(--k-line2);border-radius:12px;font-size:13px;color:var(--k-ink2)}
.tvc-cc b{color:var(--k-ink)}.tvc-cc .dd{color:var(--k-dong);font-weight:600}
.tvc-cc .the{display:flex;flex-wrap:wrap;gap:6px}.tvc-cc .the span{padding:2px 9px;border-radius:999px;background:var(--k-card2);border:1px solid var(--k-line);font-size:12px}
.tvc-cc .nut{margin-left:auto;display:flex;flex-wrap:wrap;gap:6px}
.tvc-cc button{font:600 12.5px var(--k-ui);color:var(--k-den2);background:var(--k-timbg);border:1px solid var(--k-timsoft);border-radius:999px;padding:5px 12px;cursor:pointer}
.tvc-cc button:hover{border-color:var(--k-dong)}
/* màn hẹp: bảy chuyên mục thành một hàng cuộn ngang (không ép thành bảy ô nhỏ), mép phải mờ để gợi ý còn mục phía sau */
@media (max-width:900px){.tvc-cm{display:flex;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:thin;padding:2px 2px 6px;-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
 .tvc-cm>*{flex:0 0 172px;scroll-snap-align:start}}
@media (max-width:760px){.tvc-han{font-size:24px}.tvc-hero h1{font-size:1.5rem}.tvc-tag{font-size:15px}.tvc-sub{font-size:10.5px;letter-spacing:.08em}.tvc-hero{padding:16px 12px 14px}.tvc-mon{font-size:15px}}
@media (max-width:640px){.tvc-cc .nut{margin-left:0}}
/* hộp thoại */
.tvc-dlg{--k-card:#fffefa;--k-card2:#fbf8f0;--k-ink:#16232b;--k-ink2:#3a454d;--k-ink3:#655f53;--k-line:#e7dfcc;--k-line2:#d3c6a6;--k-dong:#a8823e;--k-den2:#1c2f3a;--k-on:#f5ecd6;--k-timbg:#f1e7cf;
 width:min(760px,calc(100vw - 24px));max-height:calc(100dvh - 24px);padding:0;border:1px solid var(--k-line2);border-radius:16px;background:var(--k-card);color:var(--k-ink);box-shadow:0 20px 60px rgba(0,0,0,.3);font-family:'Be Vietnam Pro',system-ui,sans-serif}
.tvc-dlg::backdrop{background:rgba(10,18,24,.6)}
.tvc-dlg .in{display:flex;flex-direction:column;max-height:calc(100dvh - 26px)}
.tvc-dlg .hd{display:flex;align-items:center;gap:12px;padding:16px 20px;border-bottom:1px solid var(--k-line)}
.tvc-dlg .hd .eb{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--k-dong);font-weight:600}
.tvc-dlg .hd h2{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-size:1.35rem;margin:2px 0 0;color:var(--k-ink)}
.tvc-dlg .x{width:44px;height:44px;border-radius:50%;border:1px solid var(--k-line2);background:var(--k-card2);color:var(--k-ink);font-size:22px;line-height:1;cursor:pointer;flex:none}
.tvc-dlg .bd{padding:4px 20px 10px;overflow:auto;font-size:14.5px;line-height:1.7}
.tvc-dlg .bd p{margin:6px 0}.tvc-dlg .bd ul{margin:6px 0 6px 20px;padding:0}
.tvc-dlg .muc{margin:12px 0;padding:10px 14px;border:1px solid var(--k-line);border-left:3px solid var(--k-dong);border-radius:10px;background:var(--k-card2)}
.tvc-dlg .muc h3{font-family:'Fraunces','Cormorant Garamond',Georgia,serif;font-size:15.5px;margin:0 0 4px}.tvc-dlg .muc ul{margin:4px 0 0 18px}
.tvc-dlg table{width:100%;border-collapse:collapse;font-size:13.5px;margin-top:6px}.tvc-dlg th,.tvc-dlg td{border:1px solid var(--k-line);padding:6px 9px;text-align:left;vertical-align:top}.tvc-dlg th{background:var(--k-timbg)}
.tvc-dlg .ft{display:flex;padding:14px 20px;border-top:1px solid var(--k-line)}
.tvc-dlg .ft button{flex:1;min-height:48px;border-radius:12px;font:600 15px 'Be Vietnam Pro',system-ui,sans-serif;cursor:pointer;background:var(--k-den2);color:var(--k-on);border:0}
.tvc-dlg .linkbtn{font:inherit;font-weight:600;color:var(--k-den2);background:none;border:0;padding:0;text-decoration:underline;cursor:pointer}

/* ---------- Chân trang chung ---------- */
.tvc-chan{margin:40px auto 0;padding:0 16px calc(28px + var(--tvc-chan-du,0px));max-width:1280px;font-family:var(--k-ui,'Be Vietnam Pro',system-ui,sans-serif)}
.tvc-chan-in{border-top:2px solid var(--k-dong,#a8823e);padding-top:18px;display:grid;gap:10px;color:var(--k-ink2,#46525b);font-size:13px}
.tvc-chan-ten{display:flex;align-items:center;gap:10px}
.tvc-chan-ten img{width:40px;height:40px;border-radius:50%}
.tvc-chan-ten b{display:block;font-family:var(--k-disp,'Fraunces',Georgia,serif);font-size:16px;color:var(--k-ink,#1b2a33)}
.tvc-chan-ten span{font-size:12px;color:var(--k-ink3,#857f72)}
.tvc-chan nav{display:flex;flex-wrap:wrap;gap:4px 18px}
.tvc-chan nav a{color:var(--k-ink,#1b2a33);text-decoration:none;font-weight:600}
.tvc-chan nav a:hover{color:var(--k-dong,#a8823e);text-decoration:underline}
.tvc-chan-dem{margin:0;display:inline-flex;align-items:center;gap:6px;justify-self:start;padding:4px 12px;border-radius:999px;border:1px solid var(--k-line2,#d3c6a6);background:var(--k-card2,#fbf8f0);font-size:12.5px;color:var(--k-ink2,#46525b)}
.tvc-chan-dem[hidden]{display:none}.tvc-chan-dem b{color:var(--k-ink,#1b2a33);font-variant-numeric:tabular-nums}.tvc-chan-dem i{font-style:normal;color:var(--k-dong,#a8823e)}
.tvc-cham{width:8px;height:8px;border-radius:50%;background:#2f9e5b;box-shadow:0 0 0 0 rgba(47,158,91,.5);animation:tvc-nhip 2s infinite}
@keyframes tvc-nhip{70%{box-shadow:0 0 0 7px rgba(47,158,91,0)}100%{box-shadow:0 0 0 0 rgba(47,158,91,0)}}
@media (prefers-reduced-motion:reduce){.tvc-cham{animation:none}}
.tvc-chan-lh{margin:0;font-size:13px}.tvc-chan-lh a{color:var(--k-ink,#1b2a33);font-weight:600}
.tvc-chan-mien,.tvc-chan-ban{margin:0;font-size:12px;color:var(--k-ink3,#857f72)}
@media print{.tvc-chan{display:none}}