/* ============================================================
 * layout_v2.css - Theme V2 (no Tailwind, no Material Symbols)
 * Gồm:
 *   1. TOKENS                 - biến CSS dùng chung
 *   2. GLOBAL UI (.lichv2-*) - header bar, footer, skip-link, back-to-top, ad container
 *      → load mọi page qua meta.hbs
 *   3. HOME V3 (.lich-*)     - scope qua .home-v3-scope, dùng cho home-v3-view.hbs
 * ============================================================ */


/* ============================================================
 * 1. TOKENS
 * ============================================================ */
:root {
    --lich-red: #E11D55;
    --lich-red-dark: #A00C24;
    --lich-red-light: #FCE8EC;
    --lich-gold: #f59e0b;
    --lich-cream: #FFF8EC;
    --lich-ink: #1F2937;
    --lich-gray: #6b7280;
    --lich-gray-light: #f3f4f6;
    --lich-good: #1E7D32;
    --lich-bad: #7E22CE;
    --shadow-card: 0 2px 8px rgba(0, 0, 0, .05);
    --shadow-lich: 0 4px 16px rgba(200, 16, 46, .08);
}
.mt10 {
  margin-top: 10px;
}
.mt20 {
  margin-top: 20px;
}
.mt30 {
  margin-top: 30px;
}
/* Utility mt* trên thẻ H bị rule typography `.home-v3-scope h1..h4` (margin: 0 0 .75rem,
 * specificity 0,1,1) đè mất margin-top. Bản scoped 2 class (0,2,0) để mt* còn tác dụng. */
.home-v3-scope .mt10 { margin-top: 10px; }
.home-v3-scope .mt20 { margin-top: 20px; }
.home-v3-scope .mt30 { margin-top: 30px; }

/* ============================================================
 * 2. GLOBAL UI - .lichv2-* (header, footer, skip-link, back-to-top, ad)
 * ============================================================ */
.lichv2-header,
.lichv2-footer {
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, sans-serif;
    box-sizing: border-box;
}
.lichv2-header *,
.lichv2-footer * { box-sizing: border-box; }

/* ----- HEADER ----- */
.lichv2-header-bar {
    position: sticky; top: 0; z-index: 50; background: #fff;
    border-bottom: 2px solid var(--lich-red); box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.lichv2-header-bar > nav#nav-maintop-top-nav { width: 100%; }
.lichv2-header-bar .container {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    height: 64px;
}
.lichv2-header-bar .navbar-header { display: flex; align-items: center; gap: .5rem; flex-shrink: 0; }
.lichv2-header-bar .lichv2-logo-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--lich-red); color: #fff; font-size: 22px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .25); flex-shrink: 0;
}
.lichv2-header-bar #lichamduong { height: 75px; width: auto; }
.lichv2-header-bar .navbar-toggle {
    display: none !important; flex-direction: column; align-items: center; justify-content: center;
    background: transparent; border: 1px solid var(--lich-red) !important; color: var(--lich-red);
    width: 38px; height: 38px; border-radius: 6px; margin: 0; padding: 0;
}
.lichv2-header-bar .navbar-toggle .icon-bar {
    display: block; width: 20px; height: 2px; background-color: var(--lich-red) !important; border-radius: 2px; margin: 0; padding: 0;
}
.lichv2-header-bar .navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
.lichv2-header-bar .navbar-toggle .sr-only {
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Desktop menu - override các styles bootstrap cũ */
.lichv2-header-bar .navigation.menu_pc {
    display: none; float: none !important;
    align-items: center; gap: .25rem; margin-left: auto;
    font-size: 13px; font-weight: 500;
}
.lichv2-header-bar .navigation.menu_pc .navbar {
    background: transparent; border: 0; min-height: 0; margin: 0; box-shadow: none;
}
.lichv2-header-bar .navigation.menu_pc .main-nav {
    display: flex; align-items: center; gap: .25rem;
    list-style: none; padding: 0; margin: 0;
}
.lichv2-header-bar .navigation.menu_pc .main-nav > li { position: relative; }
.lichv2-header-bar .navigation.menu_pc .main-nav > li > a {
    display: inline-flex; align-items: center; gap: .25rem;
    padding: .5rem .75rem; color: #374151; text-decoration: none; transition: color .15s;
    white-space: nowrap;
}
.lichv2-header-bar .navigation.menu_pc .main-nav > li > a:hover,
.lichv2-header-bar .navigation.menu_pc .main-nav > li.is-active > a {
    color: var(--lich-red);
}
.lichv2-header-bar .navigation.menu_pc .main-nav > li.is-active > a {
    border-bottom: 2px solid var(--lich-red);
}
.lichv2-header-bar .navigation.menu_pc .mega-menu {
    position: absolute; left: 0; top: 100%; background: #fff;
    border: 1px solid #f3f4f6; border-radius: 12px; padding: .5rem 0;
    min-width: 220px; display: none; z-index: 50; list-style: none; margin: 0;
    box-shadow: 0 4px 16px rgba(200,16,46,.08);
}
.lichv2-header-bar .navigation.menu_pc .main-nav > li:hover .mega-menu { display: block; }
.lichv2-header-bar .navigation.menu_pc .mega-menu li a {
    display: block; padding: .5rem 1rem; font-size: 14px; color: #374151; text-decoration: none;
}
.lichv2-header-bar .navigation.menu_pc .mega-menu li a:hover,
.lichv2-header-bar .navigation.menu_pc .mega-menu li a.current,
.lichv2-header-bar .navigation.menu_pc .mega-menu li a.is-active {
    background: var(--lich-red-light); color: var(--lich-red);
}
.mega-menu li.mega-group {
    padding: .4rem 1rem .2rem; margin-top: .25rem;
    font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
    color: #9ca3af; border-top: 1px solid #f3f4f6;
}
/* Ngưỡng hiện menu ngang là 1200px chứ không phải 992px. Đo 02/08: 7 mục menu cần 965px
   nhưng chỗ trống bên phải logo chỉ có 744px ở 992 và 760px ở 1024 -> menu bị cắt cụt
   (ảnh user: "NGÀY TỐT XẤ..."). Thu hết padding + gap + font cũng chỉ tiết kiệm ~167px,
   không đủ bù 205px thiếu ở 1024, nên dải tablet phải dùng nút burger. */
@media (min-width: 1200px) { .lichv2-header-bar .navigation.menu_pc { display: flex; } }
@media (max-width: 1199px) {
    .lichv2-header-bar .navbar-toggle { display: inline-flex !important; margin-left: auto; }
    /* .navbar-toggle nằm TRONG .navbar-header (markup bootstrap), không phải con trực tiếp
       của .container - nên `margin-left:auto` chỉ đẩy được nó trong phạm vi .navbar-header.
       Khối đó khai `flex-shrink:0` mà không có grow nên chỉ rộng bằng nội dung (260px), bị
       `justify-content:space-between` của .container dồn vào giữa -> logo và nút burger
       dính nhau giữa thanh (user báo 02/08). Cho nó giãn hết chỗ thì auto mới có tác dụng.
       Dải <=991px trước đây vô tình đúng vì bootstrap cho khối này rộng hết ở khổ nhỏ. */
    .lichv2-header-bar .navbar-header { flex: 1 1 auto; }
}
/* Ở 1200-1279px chỗ trống là 948px, còn thiếu 17px so với 965px. Bỏ gap và thu padding
   một chút là đủ vừa, không phải đẩy tiếp ngưỡng lên 1240px và mất menu ngang ở khổ này. */
@media (min-width: 1200px) and (max-width: 1279px) {
    .lichv2-header-bar .navigation.menu_pc .main-nav { gap: 0; }
    .lichv2-header-bar .navigation.menu_pc .main-nav > li > a { padding: .5rem .5rem; }
}

/* ----- SKIP LINK (a11y) ----- */
.lichv2-skip-link {
    position: absolute; left: -9999px; top: auto;
    width: 1px; height: 1px; overflow: hidden;
}
.lichv2-skip-link:focus {
    position: absolute; left: 8px; top: 8px;
    width: auto; height: auto; overflow: visible;
    background: var(--lich-red); color: #fff;
    padding: 8px 12px; border-radius: 4px; z-index: 99;
}

/* ----- HEADER BRAND LINK ----- */
.lichv2-brand-link {
    display: inline-flex; align-items: center; gap: .5rem;
    text-decoration: none;
}

/* ----- FOOTER ----- */
/* Override main.css #footer{background:#000} với specificity cao hơn */
#footer.lichv2-footer {
    background: #fff !important;
    color: var(--lich-ink) !important;
    border-top: 4px solid var(--lich-red);
    margin-top: 2.5rem;
    padding: 0;
}
#footer.lichv2-footer .lichv2-footer-grid {
    display: grid; grid-template-columns: 1fr; gap: 24px;
    padding-top: 30px; padding-bottom: 16px;
}
@media (min-width: 768px) {
    #footer.lichv2-footer .lichv2-footer-grid { grid-template-columns: repeat(4, 1fr); }
}
#footer.lichv2-footer .title-block {
    font-weight: 700; color: var(--lich-red) !important; font-size: 13px;
    text-transform: uppercase; letter-spacing: .08em; margin-bottom: .75rem; text-align: left;
}
#footer.lichv2-footer ul { list-style: none; padding: 0; margin: 0; }
#footer.lichv2-footer li {
    list-style: none; text-align: left; padding: .25rem 0;
}
#footer.lichv2-footer p { color: var(--lich-gray); font-size: 13px; }
#footer.lichv2-footer a {
    color: #4b5563 !important; text-decoration: none; font-size: 14px;
    line-height: 1.6; border-bottom: 0 !important; transition: color .15s;
}
#footer.lichv2-footer a:hover {
    color: var(--lich-red) !important; border-bottom: 0 !important;
}
#footer.lichv2-footer address { color: var(--lich-gray); }
#footer.lichv2-footer .lichv2-footer-bottom {
    border-top: 1px solid #f3f4f6; padding: 16px 0;
    font-size: 12px; color: var(--lich-gray); text-align: center;
}
#footer.lichv2-footer .lichv2-footer-bottom p {
    margin: .25rem 0; color: var(--lich-gray); font-size: 13px;
}
#footer.lichv2-footer .lichv2-footer-desc {
    font-size: 13px; color: var(--lich-gray); line-height: 1.55; font-style: italic;
    background: #f9fafb; padding: 12px 16px; border-radius: 8px;
    margin: 16px 0; text-align: left;
}

/* ----- FOOTER ABOUT BLOCK ----- */
#footer.lichv2-footer .lichv2-footer-about-head {
    display: flex; align-items: center; gap: 8px; margin-bottom: 10px;
}
#footer.lichv2-footer .lichv2-logo-circle.is-sm {
    width: 36px; height: 36px; font-size: 20px;
}
#footer.lichv2-footer .lichv2-logo-circle {
    border-radius: 50%; background: var(--lich-red); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .25); line-height: 1;
}
#footer.lichv2-footer .lichv2-footer-brand-text {
    font-family: 'Playfair Display', serif; font-weight: 900;
    color: var(--lich-red) !important; font-size: 16px;
}
#footer.lichv2-footer .lichv2-footer-about-p {
    font-size: 13px; color: var(--lich-gray) !important;
    line-height: 1.55; margin: 0 0 10px;
}
#footer.lichv2-footer .lichv2-footer-address {
    font-size: 12px; color: var(--lich-gray); font-style: normal; line-height: 1.6;
}
#footer.lichv2-footer .lichv2-footer-h {
    font-family: inherit; font-size: 13px;
}
#footer.lichv2-footer .lichv2-footer-copyright-name { color: var(--lich-red); }
#footer.lichv2-footer .lichv2-footer-partners { color: #9ca3af; }

/* ----- YODI AD CONTAINER ----- */
.lichv2-yodi-ad {
    position: fixed; right: 20px; top: 40%; z-index: 9999;
}

/* ----- MOBILE OFF-CANVAS MENU (#menu) - ẩn cho đến khi mmenu plugin chuyển sang .mm-menu ----- */
nav#menu:not(.mm-menu) { display: none !important; }
/* mmenu mặc định set .mm-page { height: 100% } → tạo viewport gap khi content ngắn. Đè bằng min-height */
.mm-page { height: auto !important;}

/* ----- BACK TO TOP ----- */
#button-back-to-top {
    position: fixed !important; right: 20px !important; bottom: 20px !important;
    width: 40px !important; height: 40px !important; border-radius: 50%;
    background: var(--lich-red) !important; color: #fff !important;
    display: none; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(0,0,0,.15); z-index: 40;
    text-decoration: none; font-size: 16px;
}
#button-back-to-top.show,
#button-back-to-top.is-visible { display: inline-flex !important; }
#button-back-to-top:hover { background: var(--lich-red-dark) !important; color: #fff !important; }
#button-back-to-top .fa { line-height: 1; }


/* ============================================================
 * 3. HOME V3 - .lich-* (scope: .home-v3-scope)
 * ============================================================ */

/* ----- BASE ----- */
.home-v3-scope * { box-sizing: border-box; }
.home-v3-scope { scroll-behavior: smooth; }
.home-v3-scope body {
    background: #FAFAFA;
    color: var(--lich-ink);
    font-family: 'Be Vietnam Pro', system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.7;
    margin: 0;
}
.home-v3-scope h1,
.home-v3-scope h2,
.home-v3-scope h3,
.home-v3-scope h4 {
    font-family: 'Playfair Display', Georgia, serif;
    color: var(--lich-red); font-weight: 900; line-height: 1.3;
}
.home-v3-scope h1 { font-size: 23px; line-height: 1.35; margin: 0; }
.home-v3-scope h2 { font-size: 20px; }
.home-v3-scope h3 { font-size: 17px; }
.home-v3-scope h4 { font-size: 15px; }
@media (min-width: 768px) {
  .home-v3-scope h2 { font-size: 20px; }
.home-v3-scope h3 { font-size: 17px; }
.home-v3-scope h4 { font-size: 15px; }
}
.home-v3-scope p { margin: 0 0 1rem; }
.home-v3-scope ul,
.home-v3-scope ol { margin: 0 0 1rem;}
.home-v3-scope strong,
.home-v3-scope b { font-weight: 600; }
.home-v3-scope ul li,
.home-v3-scope ol li { margin-bottom: .35rem; }
.home-v3-scope a { color: var(--lich-red); text-decoration: none; transition: color .15s; }
.home-v3-scope a:hover,
.home-v3-scope a:focus { color: var(--lich-red-dark); text-decoration: underline; }
.home-v3-scope img,
.home-v3-scope picture > img { max-width: 100%; height: auto; }
.home-v3-scope dl { margin: 0; }
.home-v3-scope time { font-variant-numeric: tabular-nums; }

/* ----- LAYOUT ----- */
.lich-wrap { max-width: 1200px; margin: 0 auto; padding: 0 15px; }
.lich-wrap-pad { padding-top: 20px; padding-bottom: 20px; }
@media (min-width: 992px) {
    .lich-grid {
        display: grid;
        /* minmax(0,1fr) chứ KHÔNG phải 1fr: `1fr` = `minmax(auto,1fr)`, tức cột không được
           phép co xuống dưới min-content của nội dung bên trong.
           GHI CHÚ VỀ NGUYÊN NHÂN (đã đo lại 02/08, đừng tin bản giải thích đầu):
           tràn ngang 94px ở 1024px KHÔNG do luật này mà do MENU NGANG ở header nong
           container rộng ra - đổi ngưỡng menu sang 1200px là hết tràn, thử cả 4 tổ hợp
           bật/tắt hai bản vá grid đều cho 0px. Giữ minmax ở đây là phòng ngừa: nó là dạng
           đúng và chặn đúng lớp lỗi đó, nhưng KHÔNG phải thứ đã chữa lỗi trong ảnh. */
        grid-template-columns: minmax(0, 1fr) 320px;
        gap: 24px;
    }
}
/* Base (mobile-first): luôn có khoảng cách giữa các card trong .lich-stack, kể cả dải
   576-767px trước đây bị bỏ trống giữa 2 media query khiến card dính liền nhau. */
.lich-stack > * + * { margin-top: 16px; }
@media (min-width: 768px) { .lich-stack > * + * { margin-top: 32px; } }

/* Card nằm TRONG <article> bọc trọn thân bài (chuẩn html-ky-thuat: article chứa H1 + mọi
   section) không còn là con trực tiếp của .lich-stack nên selector trên không với tới -
   phải áp riêng khoảng cách trước mỗi .lich-card bên trong article wrapper. Không đụng
   article.lich-card kiểu tiet-khi (ở đó card là chính article, không có .lich-card con). */
.lich-stack > article > * + .lich-card { margin-top: 16px; }
@media (min-width: 768px) { .lich-stack > article > * + .lich-card { margin-top: 32px; } }

/* Mobile: thu gọn padding chuỗi vì đã có .container của Bootstrap layout */
@media (max-width: 575px) {
    .lich-wrap { padding: 0 4px; }
    .lich-wrap-pad { padding-top: 10px; padding-bottom: 10px; }
    .lich-card-pad { padding: 16px 10px; }
    .lich-card { border-radius: 12px; }
    .lich-pattern-bar { padding: 10px 14px; }
    .lich-bar-title { font-size: 14px; letter-spacing: .08em; }
}

/* ----- HEADER (alt: dùng cho design custom riêng nếu có) ----- */
.lich-header {
    position: sticky; top: 0; z-index: 50;
    background: #fff; border-bottom: 2px solid var(--lich-red);
    box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.lich-header-inner {
    height: 64px; display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; max-width: 1200px; margin: 0 auto; padding: 0 15px;
}
.lich-brand { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; }
.lich-brand:hover { text-decoration: none; }
.lich-logo-circle {
    width: 40px; height: 40px; border-radius: 50%;
    background: var(--lich-red); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 6px rgba(200, 16, 46, .25); font-size: 22px; line-height: 1;
}
.lich-brand-text { line-height: 1.1; }
.lich-brand-title {
    font-family: 'Playfair Display', serif; font-weight: 900;
    color: var(--lich-red); font-size: 17px; letter-spacing: .03em;
}
.lich-brand-sub { color: var(--lich-gray); font-size: 10px; text-transform: uppercase; letter-spacing: .12em; }
.lich-nav { display: none; align-items: center; gap: 4px; font-size: 13px; font-weight: 600; }
.lich-nav a { color: #374151; padding: 8px 12px; }
.lich-nav a:hover { color: var(--lich-red); text-decoration: none; }
.lich-nav a.is-active {
    color: var(--lich-red); border-bottom: 2px solid var(--lich-red);
}
@media (min-width: 992px) { .lich-nav { display: inline-flex; } }
.lich-burger {
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px; background: transparent; border: 1px solid var(--lich-red);
    color: var(--lich-red); border-radius: 6px; cursor: pointer;
}
@media (min-width: 992px) { .lich-burger { display: none; } }
.lich-breadcrumb {
    font-size: 12px; color: var(--lich-gray);
    padding: 6px 15px; max-width: 1200px; margin: 0 auto;
}
.lich-breadcrumb ol { list-style: none; padding: 0; margin: 0; display: flex; gap: 8px; flex-wrap: wrap; }
.lich-breadcrumb a:hover { color: var(--lich-red); }

/* ----- META: tác giả + ngày cập nhật ----- */
.lich-meta-updated { font-size: 13px; color: var(--lich-gray); margin: 4px 0 0; }
.lich-meta-updated .fa { margin-right: 5px; opacity: .8; }
.lich-meta-updated a { color: var(--lich-red); font-weight: 500; }
.lich-meta-updated a:hover { text-decoration: underline; }

/* ----- INTRO ----- */
.lich-intro-summary { font-size: 15.5px; line-height: 1.75; margin-top: 14px; }
.lich-intro-h2 { font-size: 19px; margin-top: 24px; margin-bottom: 14px; }
/* .lich-callout gốc là flex NGANG vì thiết kế cho dạng "<strong>Nhãn</strong> + nội dung"
   (nên mới có strong:first-child { flex: 0 0 110px }). Riêng callout dưới H1 của trang ngày
   chứa HAI <p> độc lập - câu luận ngày và câu tuổi hợp/xung - nên bị xếp thành hai cột cạnh
   nhau (user báo 02/08). Hai đoạn không liên quan nhau về mặt đọc, phải xuống dòng.
   Biến thể .is-alt trước đó đã tự khai flex-direction: column vì cùng lý do. */
.lich-intro-callout { margin-top: 22px; flex-direction: column; gap: 8px; }

/* ----- INTRO DL ----- */
.lich-intro-dl { margin: 0; }
.lich-intro-row {
    display: grid; grid-template-columns: 1fr; gap: 2px;
    padding: 6px 0; border-bottom: 1px dashed #f3f4f6;
}
@media (min-width: 576px) {
    .lich-intro-row { grid-template-columns: 130px 1fr; gap: 16px; align-items: baseline; }
}
.lich-intro-row:last-child { border-bottom: 0; }
.lich-intro-row dt { font-weight: 600; color: var(--lich-ink); font-size: 14px; }
.lich-intro-row dd { margin: 0; font-size: 14px; line-height: 1.7; color: #374151; }

/* ----- CARDS ----- */
.lich-card {
    background: #fff; border: 1px solid #f3f4f6; border-radius: 16px;
    box-shadow: var(--shadow-lich); overflow: hidden;
}
.lich-card-pad { padding: 22px 10px; }
@media (min-width: 768px) { .lich-card-pad { padding: 18px 26px; } }
.lich-card h2:first-child, .lich-card h3:first-child { margin-top: 0; }

/* ----- RED PATTERN BAR ----- */
.lich-pattern-bar {
    background-image: linear-gradient(135deg, #e11d55 0%, #e53f6d 100%);
    padding: 12px 20px; position: relative; overflow: hidden;
}
.lich-pattern-bar::after {
    content: ''; position: absolute; inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .15) 1px, transparent 1px);
    background-size: 18px 18px; opacity: .6; pointer-events: none;
}
.lich-pattern-bar > * { position: relative; z-index: 1; }
.lich-pattern-bar.is-split {
    display: flex; justify-content: space-between; align-items: center;
    flex-wrap: wrap; gap: 8px;
}
.lich-pattern-bar-h2-left {
    text-align: left; display: flex; align-items: center; gap: 8px;
}
.lich-pattern-bar-month-group {
    display: flex; align-items: center; gap: 8px;
}
.lich-bar-title {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 16px; letter-spacing: .1em;  text-align: center; margin: 0;
    color: #fff;
}
.home-v3-scope .lich-pattern-bar h1,
.home-v3-scope .lich-pattern-bar h2,
.home-v3-scope .lich-pattern-bar h3,
.home-v3-scope .lich-pattern-bar h4 { color: #fff; }
.home-v3-scope .lich-pattern-bar a { color: #fff; }
.lich-date-range-pill {
    display: inline-block;
    font-size: 10px; font-weight: 700;
    background: rgba(255, 255, 255, .2); padding: 4px 8px;
    border-radius: 4px; letter-spacing: .08em;
    color: #fff;
}

.lich-card-lead { padding: 14px 10px 0; font-size: 13px; color: #4b5563; line-height: 1.6; }
@media (min-width: 768px) { .lich-card-lead { padding: 18px 26px 0; } }
.lich-panel-why { margin: 12px 0 0; padding-top: 10px; border-top: 1px dashed #f3f4f6; font-size: 13px; color: #6b7280; line-height: 1.6; }
.lich-panel-why a { color: var(--lich-red); font-weight: 600; }
.lich-mini-note { display: block; margin-top: 4px; font-size: 11px; color: #9ca3af; font-style: italic; }

/* ----- TODAY BIG DISPLAY ----- */
.lich-today-head {
    display: grid; grid-template-columns: 1fr 1fr 1fr; text-align: center;
    background: #dee9f5; border-bottom: 1px solid #f3f4f6;
    font-size: 12px; text-transform: uppercase; font-weight: 600; letter-spacing: .1em;
}
.lich-today-head > div { padding: 10px; }
.lich-today-head .h-duong { color: var(--lich-red); border-right: 1px solid #f3f4f6; }
.lich-today-head .h-am { color: var(--lich-gold); border-left: 1px solid #f3f4f6; }
.lich-today-head .h-thu { color: var(--lich-gray); }

.lich-today-body { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.lich-today-cell { text-align: center; padding: 22px 10px; }
.lich-today-cell + .lich-today-cell { border-left: 1px dashed #e5e7eb; }
.lich-today-cell-bare { margin: 0; }
.lich-today-cell-relative { margin: 0; position: relative; }
.lich-today-cap { font-size: 11px; color: var(--lich-gray); text-transform: uppercase; letter-spacing: .1em; font-weight: 600; }
.lich-today-big {
    font-family: 'Playfair Display', serif; font-weight: 900; line-height: 1;
    font-size: 70px; display: inline-block; position: relative; margin-top: 8px;
}
@media (min-width: 768px) { .lich-today-big { font-size: 90px; } }
.lich-today-big.is-duong { color: var(--lich-red); }
.lich-today-big.is-am { color: var(--lich-gold); }
.lich-nav-arrow {
    position: absolute; top: 50%; transform: translateY(-50%);
    min-height: 32px; padding: 5px 10px; border-radius: 16px; background: #fff;
    border: 1px solid #e5e7eb; color: var(--lich-red);
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; font-weight: 600; line-height: 1; white-space: nowrap;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .1); text-decoration: none; z-index: 5;
}
.lich-nav-arrow:hover { background: var(--lich-red); color: #fff; }
.lich-nav-arrow.is-prev { left: 8px; }
.lich-nav-arrow.is-next { right: 8px; }
/* Ẩn chữ trên màn hình rất hẹp để mũi tên không đè nội dung ô lịch (anchor text vẫn còn trong DOM cho SEO/crawler) */
@media (max-width: 480px) { .lich-nav-arrow-txt { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } }

.lich-today-info { border-top: 1px solid #f3f4f6; padding: 18px; }
.lich-today-tiet { text-align: center; margin-bottom: 14px; }
.lich-today-hours-box {
    background: #fff; border: 1px solid #f3f4f6;
    border-radius: 8px; padding: 12px;
}
.lich-today-hours-h3,
.home-v3-scope .lich-today-hours-h3 {
    font-size: 13px; color: var(--lich-red);
    margin: 0 0 8px; display: flex; align-items: center;
    gap: 6px; font-family: inherit; font-weight: 700;
}

/* ----- DAY CTA - center, value-prop bullets + primary button ----- */
.lich-day-cta {
    padding: 22px 16px 24px; text-align: center;
    background: linear-gradient(180deg, rgba(254, 243, 199, .35) 0%, #fff 100%);
    border-top: 1px solid #f3f4f6;
}
.lich-day-cta-bullets {
    list-style: none; padding: 0; margin: 0 auto 16px;
    display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 14px;
    font-size: 13px; color: #4b5563; max-width: 560px;
}
.lich-day-cta-bullets li {
    display: inline-flex; align-items: center; gap: 6px;
    line-height: 1.4;
}
.lich-day-cta-bullets li .fa { color: var(--lich-red); font-size: 13px; }
.lich-day-cta-btn {
    display: inline-flex; flex-direction: column; align-items: center; gap: 4px;
    padding: 12px 28px; background: var(--lich-red); color: #fff !important;
    border-radius: 8px; text-decoration: none;
    transition: background .15s, transform .15s, box-shadow .15s;
    box-shadow: 0 4px 12px rgba(200, 16, 46, .22);
}
.lich-day-cta-btn:hover {
    background: var(--lich-red-dark); transform: translateY(-2px);
    box-shadow: 0 6px 18px rgba(200, 16, 46, .32); text-decoration: none;
}
.lich-day-cta-btn-main {
    font-size: 15px; font-weight: 700; line-height: 1.2;
    display: inline-flex; align-items: center; gap: 8px;
}
.lich-day-cta-btn-main .fa-arrow-right { transition: transform .15s; }
.lich-day-cta-btn:hover .lich-day-cta-btn-main .fa-arrow-right { transform: translateX(4px); }
.lich-day-cta-btn-sub {
    font-size: 11px; opacity: .85; font-weight: 500;
    letter-spacing: .02em;
}
@media (max-width: 575px) {
    .lich-day-cta { padding: 18px 12px 20px; }
    .lich-day-cta-bullets { font-size: 12px; gap: 4px 10px; }
    .lich-day-cta-btn { padding: 11px 22px; }
    .lich-day-cta-btn-main { font-size: 14px; }
}

/* ----- TAG ----- */
.lich-tag {
    display: inline-block; background: var(--lich-red); color: #fff;
    font-size: 12px; font-weight: 500; letter-spacing: .01em;
    padding: 4px 10px; border-radius: 999px;
}
.lich-tag.is-gold { background: var(--lich-gold); color: #fff; }
.lich-tag.is-good { background: var(--lich-good); }
.lich-tag.is-bad { background: var(--lich-bad); }
.lich-tag.is-mid { background: var(--lich-gold); }
.lich-tag-sm { font-size: 11px; }

/* ----- CAN CHI GRID ----- */
.lich-canchi-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin: 14px 0;
    text-align: center;
}
@media (min-width: 768px) { .lich-canchi-grid { grid-template-columns: repeat(4, 1fr); } }
.lich-canchi-grid > div {
    background: #fff; padding: 10px; border-radius: 8px;
    border: 1px solid #f3f4f6; box-shadow: var(--shadow-card);
}
.lich-canchi-grid dt { font-size: 10px; color: #9ca3af; text-transform: uppercase; font-weight: 600; margin-bottom: 4px; }
.lich-canchi-grid dd { margin: 0; font-size: 13px; font-weight: 700; color: var(--lich-ink); }
.lich-canchi-grid dd.is-red { color: var(--lich-red); }
/* (05/08) Card tử vi 12 con giáp KHÔNG còn dùng .lich-canchi-grid - 4 chủ đề đổi sang
   4 dòng <p> cùng khuôn dòng Tổng quan (user chốt UX + giảm DOM). Grid này giờ chỉ còn
   phục vụ trang chi tiết ngày và khối kết quả cá nhân (dd = giá trị ngắn, đậm là đúng). */

/* ----- HOURS PILL LIST ----- */
.lich-hours-list { list-style: none; padding: 0; margin: 8px 0 0; display: flex; flex-wrap: wrap; gap: 6px; }
.lich-hours-list li {
    background: #f0fdf4; color: var(--lich-good); border: 1px solid #bbf7d0;
    font-size: 12px; font-weight: 500; padding: 4px 10px; border-radius: 6px;
}

/* ----- Internal links KW-anchor (contextual) dưới khối hôm nay ----- */
.lich-today-links { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin: 14px 0 0; }
.lich-today-links a {
    font-size: 13px; font-weight: 600; color: var(--lich-red);
    background: #fff; border: 1px solid #e5e7eb; border-radius: 14px;
    padding: 5px 12px; text-decoration: none; transition: background .15s, color .15s, border-color .15s;
}
.lich-today-links a:hover { background: var(--lich-red); color: #fff; border-color: var(--lich-red); }
/* Mobile: nén khối today-info - can chi 4 cột 1 hàng, giờ HĐ pill nhỏ, 2 link cùng hàng */
@media (max-width: 575px) {
    .lich-today-info { padding: 12px; }
    .lich-canchi-grid { grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 10px 0; }
    .lich-canchi-grid > div { padding: 8px 4px; }
    .lich-canchi-grid dd { font-size: 12px; }
    .lich-hours-list li { font-size: 11px; padding: 3px 8px; }
    .lich-today-links { gap: 6px; margin-top: 10px; }
    .lich-today-links a { flex: 1 1 45%; text-align: center; font-size: 12px; padding: 6px 8px; }
    .lich-intro-row { padding: 8px 0; }
}

/* ----- QUICK PURPOSE TABS ----- */
.lich-qp-header {
    padding-bottom: 8px;
    background: linear-gradient(90deg, rgba(255, 248, 236, .6), #fff);
    border-bottom: 1px solid #f3f4f6;
}
.lich-qp-h2 {
    font-size: 18px; display: flex; align-items: center;
    gap: 8px; margin-bottom: 4px;
}
.lich-qp-tagline { font-size: 12px; color: var(--lich-gray); margin: 0; }
.lich-qp-badge-new { margin-left: auto; font-size: 9px; display: inline-block; }

.lich-tabs { display: flex; flex-wrap: wrap; gap: 10px; padding: 18px 22px 12px; border-bottom: 1px solid #f9fafb; }
.lich-tab {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 5px 6px; border-radius: 999px; font-size: 14px; font-weight: 500;
    border: 2px solid #e5e7eb; background: #fff; color: #374151; cursor: pointer; line-height: 1.4;
}
.lich-tab:hover { border-color: var(--lich-red); color: var(--lich-red); }
.lich-tab.is-active { border-color: var(--lich-red); background: var(--lich-red-light); color: var(--lich-red); }
.lich-tab-badge {
    font-size: 10px; font-weight: 700; padding: 2px 8px;
    border-radius: 999px; color: #fff; line-height: 1.4;
}
.lich-tab-badge.is-good { background: var(--lich-good); }
.lich-tab-badge.is-mid { background: var(--lich-gold); }
.lich-tab-badge.is-bad { background: var(--lich-bad); }
/* Mobile: 8 tab xếp lưới 2 cột đều nhau, badge đẩy sát phải - hết wrap lởm chởm */
@media (max-width: 575px) {
    .lich-tabs { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 14px 10px 10px; }
    .lich-tab { width: 100%; justify-content: flex-start; padding: 6px 10px; font-size: 13px; border-radius: 10px; }
    .lich-tab .lich-tab-badge { margin-left: auto; }
}

.lich-panel { padding: 24px 26px; background: rgba(249, 250, 251, .4); }
.lich-panel.is-hidden { display: none; }
.lich-panel p { font-size: 14px; line-height: 1.7; }
.lich-verdict-head { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.lich-verdict-emoji { font-size: 28px; line-height: 1; }
.lich-verdict-icon {
    flex: 0 0 auto;
    width: 50px; height: 50px; border-radius: 50%; margin-left: auto;
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px; box-shadow: 0 4px 10px rgba(0, 0, 0, .12);
}
.lich-verdict-icon.is-good { background: var(--lich-good); }
.lich-verdict-icon.is-mid { background: var(--lich-gold); }
.lich-verdict-icon.is-bad { background: var(--lich-bad); }
.lich-verdict-title { font-family: 'Playfair Display', serif; font-weight: 700; font-size: 17px; color: var(--lich-ink); margin: 0; }
.lich-verdict-title .word-good { color: var(--lich-good); }
.lich-verdict-title .word-mid { color: var(--lich-gold); }
.lich-verdict-title .word-bad { color: var(--lich-bad); }
.lich-verdict-sub { font-size: 11px; color: var(--lich-gray); margin: 0; }
.lich-verdict-meta {
    display: grid; grid-template-columns: 1fr; gap: 12px; margin-top: 16px;
}
@media (min-width: 576px) { .lich-verdict-meta { grid-template-columns: 1fr 1fr; } }
.lich-verdict-meta > div { background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; padding: 14px 16px; font-size: 13px; line-height: 1.65; }
.lich-meta-title { font-weight: 600; margin-bottom: 6px; }
.lich-meta-title.is-good { color: var(--lich-good); }
.lich-meta-title.is-mid { color: var(--lich-gold); }
.lich-meta-title.is-bad { color: var(--lich-bad); }

/* ----- ALTERNATIVE DAYS BOX ----- */
.lich-alt-box {
    background: #fff; border: 1px solid #d1fae5;
    border-radius: 8px; padding: 10px; font-size: 12px;
}
.lich-alt-box ul { padding-left: 18px; margin: 6px 0 0; }

/* ----- WEEKLY TABLE ----- */
.lich-week-table { width: 100%; border-collapse: separate; border-spacing: 0; }
.lich-week-table thead { background: #f9fafb; }
.lich-week-table th, .lich-week-table td {
    padding: 14px 14px; font-size: 14px; border-bottom: 1px solid #f9fafb; line-height: 1.5;
}
.lich-week-table thead th { font-size: 11px; text-transform: uppercase; color: var(--lich-gray); font-weight: 700; letter-spacing: .08em; text-align: left; }
.lich-week-table thead th.center, .lich-week-table tbody td.center { text-align: center; }
.lich-week-table tbody tr:hover { background: #f9fafb; }
.lich-week-table tr.is-today {
    background: rgba(252, 232, 236, .4) !important;
    border-left: 4px solid var(--lich-red);
    font-weight: 600;
}
.lich-week-table tr.is-today th[scope="row"] { padding-left: 8px; }
.lich-week-today-label { color: var(--lich-red); }
.lich-week-today-label small { display: block; font-size: 10px; font-weight: 400; color: rgba(200, 16, 46, .7); text-transform: uppercase; }
.lich-week-am { color: var(--lich-gold); font-weight: 600; }
.lich-hide-sm { display: none; }
@media (min-width: 768px) { .lich-hide-sm { display: table-cell; } }

/* ----- TIET KHI CARD ----- */
.lich-tietkhi {
    border: 1px solid #fde68a; border-radius: 16px; overflow: hidden;
    background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 50%, var(--lich-cream) 100%);
    padding: 20px;
}
.lich-tietkhi-inner { display: flex; flex-direction: column; gap: 16px; }
@media (min-width: 768px) { .lich-tietkhi-inner { flex-direction: row; align-items: flex-start; } }
.lich-tietkhi-icon {
    width: 80px; height: 80px; border-radius: 18px;
    background: linear-gradient(135deg, #fb923c, #ef4444);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 40px; box-shadow: 0 4px 12px rgba(239, 68, 68, .25); flex-shrink: 0;
}
.lich-tietkhi-side { text-align: center; flex-shrink: 0; }
@media (min-width: 768px) { .lich-tietkhi-side { text-align: left; } }
.lich-tietkhi-name {
    font-family: 'Playfair Display', serif; font-weight: 900; font-size: 22px; color: #7c2d12; margin-top: 8px;
}
.lich-tietkhi-han { font-size: 12px; color: var(--lich-gray); }
.lich-tietkhi-label { font-size: 10px; color: #c2410c; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; }
.lich-tietkhi-meta {
    display: grid; grid-template-columns: 1fr; gap: 10px; margin: 14px 0;
}
@media (min-width: 576px) { .lich-tietkhi-meta { grid-template-columns: repeat(3, 1fr); } }
.lich-tietkhi-meta > div {
    background: rgba(255, 255, 255, .7); border: 1px solid #fde68a;
    border-radius: 8px; padding: 10px; font-size: 12px;
}
.lich-tietkhi-meta dt { font-weight: 600; color: #c2410c; margin-bottom: 4px; }
.lich-tietkhi-main { flex: 1; }
.lich-tietkhi-h2 { color: #7c2d12; font-size: 18px; margin-bottom: 8px; }
.lich-tietkhi-desc { font-size: 13px; }
.lich-tietkhi-foot {
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: 8px; font-size: 12px; color: var(--lich-gray);
}
.lich-tietkhi-next-icon { color: #fb923c; }
.lich-tietkhi-emphasis { color: #7c2d12; }
.lich-tietkhi-readmore { color: #7c2d12; font-weight: 600; }
/* Mobile: nén khối tiết khí - side thành hàng ngang, meta 3 cột, bớt padding */
@media (max-width: 575px) {
    .lich-tietkhi { padding: 14px; }
    .lich-tietkhi-inner { gap: 10px; }
    .lich-tietkhi-side { display: flex; align-items: center; gap: 10px; text-align: left; }
    .lich-tietkhi-icon { width: 44px; height: 44px; font-size: 22px; border-radius: 12px; }
    .lich-tietkhi-label { order: 2; }
    .lich-tietkhi-name { margin-top: 0; font-size: 18px; }
    .lich-tietkhi-han { display: none; }
    .lich-tietkhi-h2 { font-size: 16px; }
    .lich-tietkhi-meta { grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 10px 0; }
    .lich-tietkhi-meta > div { padding: 8px 6px; font-size: 11px; }
}

/* ----- MONTHLY CALENDAR ----- */
.lich-month-nav-arrow {
    width: 28px; height: 28px;
    background: rgba(255, 255, 255, .2); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: #fff;
}
/* PT2 25/08: hết vùng auto-link thì nav KHÔNG render <a> nữa (chặn crawl lùi vô hạn),
   chỗ đó thay bằng <span class="is-off"> để layout 3 cột của header không xô lệch. */
.lich-month-nav-arrow.is-off { opacity: .35; cursor: default; }
.lich-month-cal-h2 { font-size: 14px; }
.lich-month-form { display: flex; gap: 6px; align-items: center; }
.lich-month-select {
    font-size: 12px; padding: 4px;
    border-radius: 4px; border: 0;
}
.lich-month-go-btn {
    background: var(--lich-gold); color: #fff;
    padding: 4px 12px; border: 0; border-radius: 4px;
    font-weight: 700; font-size: 12px; cursor: pointer;
}
.lich-month-table { width: 100%; border-collapse: separate; border-spacing: 4px; }
.lich-month-table th {
    font-size: 11px; text-transform: uppercase; color: var(--lich-gray); padding: 8px 0; font-weight: 600;
}
.lich-month-table th.is-sun { color: var(--lich-red); }
.lich-month-cell {
    aspect-ratio: 1; display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    border: 1px solid #f3f4f6; border-radius: 8px;
    font-size: 14px; text-decoration: none; color: var(--lich-ink);
    transition: transform .15s, background .15s;
    min-height: 50px;
}
.lich-month-cell:hover { background: var(--lich-cream); transform: scale(1.04); text-decoration: none; z-index: 2; position: relative; }
.lich-month-cell .lunar { font-size: 10px; color: #9ca3af; }
.lich-month-cell .lunar.is-red { color: var(--lich-red); font-weight: 700; }
.lich-month-cell .solar { font-weight: 700; }
.lich-month-cell .solar.is-bad { color: var(--lich-bad); }
.lich-month-cell .solar.is-sun { color: var(--lich-red); }
.lich-month-cell.is-today {
    background: var(--lich-red); color: #fff; outline: 2px solid var(--lich-gold);
    position: relative;
}
.lich-month-cell.is-today .lunar { color: #fde68a !important; }
.lich-month-cell.is-today .solar { color: #fff; }
.lich-month-cell.is-today::after {
    content: '★'; position: absolute; top: -6px; right: -6px;
    background: var(--lich-gold); color: #fff; width: 16px; height: 16px;
    border-radius: 50%; font-size: 9px; display: flex; align-items: center; justify-content: center;
}
.lich-month-legend {
    display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--lich-gray);
    border-top: 1px solid #f3f4f6; padding-top: 10px; margin-top: 12px;
}
.lich-month-legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; vertical-align: middle; margin-right: 4px; border: 1.5px solid #d1d5db; background: #fff; }
.lich-month-legend .dot.is-good { background: var(--lich-red); }
.lich-month-legend .dot.is-bad { background: var(--lich-bad); }
.lich-month-legend .dot.is-today { background: var(--lich-red); outline: 2px solid var(--lich-gold); outline-offset: 1px; }
.lich-month-legend .dot.is-rat-tot { background: #15803d; border-color: #15803d; }
.lich-month-legend .dot.is-tot { background: var(--lich-good); border-color: var(--lich-good); }
.lich-month-legend .dot.is-binh-thuong { background: #fff; border-color: #d1d5db; }
.lich-month-legend .dot.is-xau { background: #f59e0b; border-color: #f59e0b; }
.lich-month-legend .dot.is-rat-xau { background: var(--lich-red); border-color: var(--lich-red); }

/* ----- DETAIL TABLE ----- */
.lich-detail-table { width: 100%; border-collapse: collapse; margin-bottom: 16px; }
.lich-detail-table th, .lich-detail-table td {
    border: 1px solid #e5e7eb; padding: 12px 10px; text-align: center; font-size: 14px; line-height: 1.55;
}
.lich-detail-table thead th { background: var(--lich-red); color: #fff; font-weight: 700; }
.lich-detail-table tbody tr:last-child td { font-style: italic; color: var(--lich-gray); }

.lich-hours-box { border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; }
.lich-hours-box .head {
    color: #fff; font-weight: 700; padding: 8px 12px;
    display: flex; align-items: center; gap: 8px;
}
.lich-hours-box .head.is-good { background: var(--lich-good); }
.lich-hours-box .head.is-bad { background: var(--lich-bad); }
.lich-hours-box ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; font-size: 13px; }
.lich-hours-box li { padding: 11px 14px; border-bottom: 1px solid #f3f4f6; line-height: 1.5; }
.lich-hours-box li:nth-child(odd) { border-right: 1px solid #f3f4f6; }
.lich-hours-box li:nth-last-child(-n+2) { border-bottom: 0; }

.lich-meta-list { list-style: none; padding: 0; }
.lich-hours-row { margin-bottom: 16px; }
.lich-hours-col { margin-bottom: 12px; }
.lich-hours-h3 {
    font-family: inherit; font-size: 14px; color: var(--lich-ink);
}
.lich-hours-h3-spaced { margin-top: 18px; }
.lich-hours-h4 {
    font-family: inherit; font-size: 14px; color: #fff; margin: 0;
}

/* ----- CALLOUT ----- */
.lich-callout { display: flex; gap: 14px; padding: 14px 16px; border-radius: 0 8px 8px 0; line-height: 1.65; }
.lich-callout strong:first-child { flex: 0 0 110px; }
@media (max-width: 575px) {
    .lich-callout { flex-direction: column; gap: 6px; padding: 12px 14px; }
    .lich-callout strong:first-child { flex: 0 0 auto; }
}
.lich-callout.is-red { border-left: 4px solid var(--lich-red); background: rgba(252, 232, 236, .4); }
.lich-callout.is-red strong:first-child { color: var(--lich-red); }
.lich-callout.is-gold { border-left: 4px solid var(--lich-gold); background: rgba(255, 248, 236, .6); }
.lich-callout.is-gold strong:first-child { color: var(--lich-gold); }
.lich-callout.is-good { border-left: 4px solid var(--lich-good); background: #f0fdf4; }
.lich-callout.is-good strong:first-child { color: var(--lich-good); }
.lich-callout.is-bad { border-left: 4px solid var(--lich-red); background: rgba(252, 232, 236, .4); }
.lich-callout.is-bad strong:first-child { color: var(--lich-red); }
.lich-callout.is-mid { border-left: 4px solid var(--lich-gold); background: rgba(255, 248, 236, .6); }
.lich-callout.is-mid strong:first-child { color: var(--lich-gold); }
.lich-callout p { margin: 0; font-size: 14px; line-height: 1.7; }
.lich-callout.is-alt { border-left: 4px solid var(--lich-gold); background: #fffbeb; flex-direction: column; gap: 8px; }
.lich-alt-days-list { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.lich-alt-days-list a { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid #fde68a; font-size: 13px; color: #92400e; text-decoration: none; }
.lich-alt-days-list a:hover { background: #fef3c7; }
.lich-alt-days-list a .is-good { color: var(--lich-good); font-weight: 700; }

/* ----- SECTION FOOTER STRIP ----- */
.lich-section-footer {
    padding: 10px 22px; border-top: 1px solid #f3f4f6;
    background: rgba(249, 250, 251, .6);
    display: flex; justify-content: space-between; flex-wrap: wrap;
    gap: 8px; font-size: 12px; color: var(--lich-gray);
}
.lich-section-footer.is-narrow { padding-left: 16px; padding-right: 16px; }
.lich-section-footer-link { font-weight: 600; }

/* ----- CTA PILL (highlight link in section-footer to boost CTR) ----- */
.lich-cta-pill {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 6px 14px 6px 12px; border-radius: 999px;
    background: var(--lich-red); color: #fff !important;
    font-size: 13px; font-weight: 700; line-height: 1.2;
    text-decoration: none;
    box-shadow: 0 2px 8px rgba(200, 16, 46, .25);
    transition: background .15s, transform .15s, box-shadow .15s;
}
.lich-cta-pill:hover {
    background: var(--lich-red-dark); transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(200, 16, 46, .35); text-decoration: none;
}
.lich-cta-pill-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #fff;
    box-shadow: 0 0 0 0 rgba(255, 255, 255, .7);
    animation: lich-cta-pulse 1.8s infinite;
}
@keyframes lich-cta-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(255, 255, 255, .7); }
    70%  { box-shadow: 0 0 0 8px rgba(255, 255, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 255, 255, 0); }
}
.lich-cta-pill-arrow { transition: transform .15s; }
.lich-cta-pill:hover .lich-cta-pill-arrow { transform: translateX(3px); }
@media (prefers-reduced-motion: reduce) {
    .lich-cta-pill-dot { animation: none; }
}

/* ----- SECTION CARD H2 (detail / FAQ) ----- */
.lich-section-h2 {
    font-size: 18px;
    border-bottom: 2px solid rgba(200, 16, 46, .2);
    padding-bottom: 10px; margin-bottom: 14px;
}

/* K1 (04/08/2026): nhãn FAQ KHÔNG dùng thẻ H (brief mục 3) - dáng giống .lich-section-h2
   nhưng trên <p> để không tạo heading giả cho khối phụ trợ. */
.lich-faq-label {
    font-size: 18px; font-weight: 700;
    border-bottom: 2px solid rgba(200, 16, 46, .2);
    padding-bottom: 10px; margin-bottom: 14px;
}

/* ----- FAQ ----- */
.lich-faq details {
    border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden; margin-bottom: 14px;
}
.lich-faq summary {
    cursor: pointer; padding: 16px 10px;
    background: #f9fafb; color: var(--lich-ink); list-style: none;
}
.lich-faq-q {
    margin: 0; font-weight: 700; font-size: 15px; line-height: 1.5; color: inherit;
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.lich-faq summary::-webkit-details-marker { display: none; }
.lich-faq summary .chev { color: var(--lich-red); transition: transform .15s; flex-shrink: 0; }
.lich-faq details[open] summary .chev { transform: rotate(180deg); }
.lich-faq .answer { padding: 6px 10px; font-size: 14px; color: #374151; line-height: 1.75; }

/* ----- SIDEBAR / WIDGETS ----- */
.lich-side h2,
.lich-side .lich-side-h {
    font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--lich-red); font-family: inherit; font-weight: 700;
    margin-bottom: 12px; display: flex; align-items: center; gap: 8px;
}
.lich-warning-card .lich-side-h {
    color: #fff !important;
}
.lich-side .lich-card-pad { padding: 10px; }
.lich-input-row { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 8px; }
.lich-input-row input,
.lich-input-row select,
.lich-day-select {
    width: 100%; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 13px; text-align: center; font-family: inherit;
    background: #fff; color: var(--lich-ink); cursor: pointer;
}
.lich-input-row input:focus,
.lich-input-row select:focus,
.lich-day-select:focus { outline: none; border-color: var(--lich-red); box-shadow: 0 0 0 1px var(--lich-red); }
.lich-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    background: var(--lich-red); color: #fff; padding: 10px 16px;
    border: 0; border-radius: 6px; font-weight: 700; font-size: 13px;
    text-decoration: none; cursor: pointer; width: 100%; font-family: inherit;
}
.lich-btn:hover { background: var(--lich-red-dark); color: #fff; text-decoration: none; }
.lich-btn-dash {
    display: block; text-align: center; padding: 8px;
    border: 2px dashed rgba(200, 16, 46, .3); border-radius: 6px;
    color: var(--lich-red); font-weight: 700; font-size: 11px;
}
.lich-btn-dash:hover { background: var(--lich-red-light); color: var(--lich-red); text-decoration: none; }

/* ----- SIDEBAR AGE WIDGET ----- */
.lich-age-h2-tight { margin-bottom: 4px; }
.lich-age-intro {
    font-size: 11px; color: var(--lich-gray); margin: 0 0 10px;
}
.lich-age-form { display: flex; gap: 6px; margin-bottom: 8px; }
.lich-age-input {
    flex: 1; padding: 8px 10px;
    border: 1px solid #fde68a; border-radius: 6px;
    font-size: 13px; font-family: inherit;
}
.lich-age-btn {
    background: var(--lich-red); color: #fff;
    padding: 0 14px; border: 0; border-radius: 6px;
    cursor: pointer;
}
.lich-age-noscript {
    padding: 0 16px 16px;
    font-size: 11px; color: var(--lich-gray);
}

/* ----- WARNING CARD ----- */
.lich-warning-card {
    background: linear-gradient(135deg, var(--lich-red), var(--lich-red-dark));
    color: #fff; padding: 16px; border-radius: 16px; position: relative; overflow: hidden;
}
.lich-warning-card .fa-magic { position: absolute; right: -10px; bottom: -10px; font-size: 110px; opacity: .1; }
.lich-warning-card h2 { color: #fff; font-size: 16px; margin-bottom: 6px; }
.lich-warning-card p { font-size: 12px; line-height: 1.5; opacity: .95; }
.lich-warning-card .lich-pill {
    display: inline-block; font-size: 10px; font-weight: 700; text-transform: uppercase;
    background: rgba(255, 255, 255, .2); padding: 4px 8px; border-radius: 4px; letter-spacing: .08em;
}

/* ----- ZODIAC WIDGET ----- */
.lich-zo-card { background: linear-gradient(135deg, var(--lich-cream), #fffbeb, #fff); border: 1px solid #fde68a; border-radius: 16px; overflow: hidden; }
.lich-zo-card .lich-card-pad { padding: 10px; }
.lich-zo-presets { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0; }
.lich-zo-presets button {
    font-size: 10px; font-weight: 600; background: #fff; border: 1px solid #fde68a;
    color: #374151; padding: 4px 8px; border-radius: 999px; cursor: pointer;
}
.lich-zo-presets button:hover { border-color: var(--lich-red); color: var(--lich-red); }
.lich-zo-result { display: none; margin-top: 12px; }
.lich-zo-result.is-on { display: block; }
.lich-zo-result > * + * { margin-top: 8px; }
.lich-zo-block { background: #fff; border: 1px solid #fde68a; border-radius: 8px; padding: 10px; }
.lich-zo-block.is-good { background: #f0fdf4; border-color: #bbf7d0; color: var(--lich-good); }
.lich-zo-block.is-mid  { background: #fffbeb; border-color: #fde68a; color: var(--lich-gold); }
.lich-zo-block.is-bad  { background: #faf5ff; border-color: #e9d5ff; color: var(--lich-bad); }
.lich-zo-head { display: flex; align-items: center; gap: 8px; }
.lich-zo-head .emoji { font-size: 22px; }
.lich-zo-name-sub { font-size: 10px; color: var(--lich-gray); text-transform: uppercase; font-weight: 600; }
.lich-zo-name { font-weight: 700; color: var(--lich-ink); font-size: 13px; }
.lich-zo-badge { font-size: 10px; font-weight: 700; padding: 4px 8px; border-radius: 999px; color: #fff; margin-left: auto; }
.lich-zo-badge.is-good { background: var(--lich-good); }
.lich-zo-badge.is-mid  { background: var(--lich-gold); }
.lich-zo-badge.is-bad  { background: var(--lich-bad); }
.lich-zo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; font-size: 11px; }
.lich-zo-grid dt { font-size: 9px; color: #9ca3af; text-transform: uppercase; font-weight: 600; }
.lich-zo-result-row { font-weight: 600; text-transform: uppercase; font-size: 11px; margin-bottom: 4px; }
.lich-zo-result-desc { margin: 0; font-size: 12px; color: #374151; }
.lich-zo-reset {
    background: 0; border: 0; color: var(--lich-gray);
    font-size: 11px; text-decoration: underline; cursor: pointer;
    padding: 4px; width: 100%;
}

/* ----- NAV WIDGETS ----- */
.lich-quick-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.lich-quick-nav a {
    display: flex; flex-direction: column; align-items: center;
    background: #f9fafb; border-radius: 8px; padding: 10px; text-decoration: none; color: var(--lich-ink);
}
.lich-quick-nav a:hover { background: var(--lich-red-light); color: var(--lich-red); text-decoration: none; }
.lich-quick-nav small { font-size: 10px; color: #9ca3af; text-transform: uppercase; }
.lich-quick-nav b { font-size: 14px; }

.lich-month-list { list-style: none; padding: 0; margin: 0; }
.lich-month-list li a {
    display: flex; align-items: center; justify-content: space-between;
    padding: 6px 8px; border-radius: 6px; color: #374151; text-decoration: none; font-size: 13px;
}
.lich-month-list li a:hover { background: var(--lich-red-light); color: var(--lich-red); text-decoration: none; }
.lich-month-list-chev { color: #d1d5db; }

/* ----- FOOTER ALT (cho design custom) ----- */
.lich-footer { background: #fff; border-top: 4px solid var(--lich-red); margin-top: 40px; }
.lich-footer-inner { max-width: 1200px; margin: 0 auto; padding: 40px 15px 0; }
.lich-footer-grid { display: grid; grid-template-columns: 1fr; gap: 24px; }
@media (min-width: 768px) { .lich-footer-grid { grid-template-columns: repeat(4, 1fr); } }
.lich-footer h2 {
    font-family: inherit; font-size: 13px; text-transform: uppercase; letter-spacing: .08em;
    color: var(--lich-red); font-weight: 700; margin-bottom: 12px;
}
.lich-footer ul { list-style: none; padding: 0; margin: 0; }
.lich-footer li { padding: 4px 0; font-size: 13px; }
.lich-footer a { color: #4b5563; }
.lich-footer a:hover { color: var(--lich-red); }
.lich-footer-bottom { border-top: 1px solid #f3f4f6; padding: 16px 0; text-align: center; font-size: 12px; color: var(--lich-gray); }

/* ----- UTILS / SHARED ----- */
.lich-sr {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
.lich-m-0 { margin: 0; }
.lich-mt0 { margin-top: 0 !important; }
.lich-mb0 { margin-bottom: 0 !important; }
.lich-mb-12 { margin-bottom: 12px; }
.lich-mb-14 { margin-bottom: 14px; }
.lich-mb-16 { margin-bottom: 16px; }
.lich-ml-6 { margin-left: 6px; }
.lich-mr-6 { margin-right: 6px; }
.lich-flex-1 { flex: 1; }
.lich-overflow-x { overflow-x: auto; }
.lich-fw-700 { font-weight: 700; }
.lich-list-reset { list-style: none; padding: 0; margin: 0; }
.lich-text-mini { font-size: 12px; color: var(--lich-gray); }
.lich-text-mini-italic { font-size: 11px; color: var(--lich-gray); font-style: italic; }
.lich-legend-hint { margin-left: auto; font-style: italic; color: #9ca3af; }
.text-good { color: var(--lich-good); }
.text-bad { color: var(--lich-bad); }
.text-mid { color: var(--lich-gold); }
.text-red { color: var(--lich-red); }

/* ----- LAZY SECTION (CWV) ----- */
.lich-lazy { content-visibility: auto; contain-intrinsic-size: 0 720px; }
.lich-lazy-sm { content-visibility: auto; contain-intrinsic-size: 0 360px; }

/* ============================================================
 * 4. CHI-TIET PAGE EXTENSIONS - 7 features từ chi-tiet.md
 * ============================================================ */

/* ----- 1) PHÂN TÍCH CAN CHI 5 HÀNH ----- */
.lich-hanh-table th, .lich-hanh-table td {
    border: 1px solid #e5e7eb; padding: 12px 14px; font-size: 14px; line-height: 1.6;
}
.lich-hanh-table thead th { background: var(--lich-red); color: #fff; font-weight: 700; text-align: left; }
.lich-hanh-table tbody th { background: #f9fafb; text-align: left; font-weight: 700; width: 28%; }
@media (max-width: 575px) {
    .lich-hanh-table th, .lich-hanh-table td {
        padding: 10px 8px; font-size: 13px; line-height: 1.5;
    }
    .lich-hanh-table tbody th { width: auto; font-size: 12px; }
    .lich-hanh-badge { font-size: 10px; padding: 2px 8px; margin-right: 2px; }
}
.lich-hanh-badge {
    display: inline-block; font-size: 11px; font-weight: 700;
    /* nền mặc định: badge thiếu class is-* vẫn đọc được (trước đây chữ trắng trên nền trắng) */
    padding: 3px 10px; border-radius: 999px; color: #fff; background: #6B7280;
    text-transform: uppercase; letter-spacing: .05em; margin-right: 4px;
    white-space: nowrap;
}
.lich-hanh-badge.is-moc  { background: #2E7D32; }
.lich-hanh-badge.is-hoa  { background: #C62828; }
.lich-hanh-badge.is-tho  { background: #F9A825; color: #1F2937; }
.lich-hanh-badge.is-kim  { background: #9E9E9E; }
.lich-hanh-badge.is-thuy { background: #1565C0; }
.lich-tuongquan {
    display: inline-flex; align-items: center; gap: 6px;
    font-weight: 700; font-size: 13px;
}
.lich-tuongquan.is-sinh { color: var(--lich-good); }
.lich-tuongquan.is-khac { color: var(--lich-bad); }
.lich-tuongquan.is-binh { color: var(--lich-gold); }

/* Vòng tròn ngũ hành */
.lich-nguhanh-circle {
    display: flex; align-items: center; justify-content: center;
    flex-wrap: nowrap; gap: 6px; margin: 16px 0;
    padding: 16px 12px; background: #f9fafb; border-radius: 12px;
}
.lich-nguhanh-circle .hanh {
    width: 56px; height: 56px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-weight: 700; font-size: 13px; color: #fff;
    border: 2px solid transparent;
    flex-shrink: 0;
}
@media (max-width: 575px) {
    .lich-nguhanh-circle { gap: 3px; padding: 12px 6px; }
    .lich-nguhanh-circle .hanh { width: 44px; height: 44px; font-size: 10px; border-width: 1.5px; }
    .lich-nguhanh-circle .arrow { font-size: 12px !important; }
    .lich-nguhanh-circle .hanh.is-active { transform: scale(1.05); }
}
.lich-nguhanh-circle .hanh.is-moc  { background: #2E7D32; }
.lich-nguhanh-circle .hanh.is-hoa  { background: #C62828; }
.lich-nguhanh-circle .hanh.is-tho  { background: #F9A825; color: #1F2937; }
.lich-nguhanh-circle .hanh.is-kim  { background: #9E9E9E; }
.lich-nguhanh-circle .hanh.is-thuy { background: #1565C0; }
.lich-nguhanh-circle .hanh.is-active {
    border-color: var(--lich-gold); box-shadow: 0 0 0 3px rgba(212,165,55,.3);
    transform: scale(1.1);
}
.lich-nguhanh-circle .arrow {
    font-size: 18px; color: var(--lich-gray); font-weight: 600;
}

/* ----- 2) ĐIỂM SỐ NGÀY THEO VIỆC ----- */
.lich-score-list { list-style: none; padding: 0; margin: 0; }
.lich-score-item {
    display: grid;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto auto;
    column-gap: 10px; row-gap: 4px;
    padding: 10px 0; border-bottom: 1px dashed #f3f4f6;
    align-items: center;
}
.lich-score-item:last-child { border-bottom: 0; }
.lich-score-item .lich-score-label { grid-column: 1; grid-row: 1; }
.lich-score-item .lich-score-value { grid-column: 2; grid-row: 1; justify-self: end; }
.lich-score-item .lich-score-bar   { grid-column: 1 / -1; grid-row: 2; }
@media (min-width: 576px) {
    .lich-score-item {
        grid-template-columns: 200px 1fr 110px;
        grid-template-rows: auto;
        gap: 16px;
        padding: 14px 0;
    }
    .lich-score-item .lich-score-label { grid-column: auto; grid-row: auto; }
    .lich-score-item .lich-score-value { grid-column: auto; grid-row: auto; justify-self: auto; }
    .lich-score-item .lich-score-bar   { grid-column: auto; grid-row: auto; }
}
.lich-score-label {
    font-weight: 700; font-size: 14px; display: flex; align-items: center; gap: 8px;
}
.lich-score-label .emoji { font-size: 18px; }
.lich-score-bar {
    position: relative; height: 8px;
    background: #f3f4f6; border-radius: 999px; overflow: hidden;
}
@media (min-width: 576px) { .lich-score-bar { height: 8px; } }
.lich-score-fill {
    position: absolute; left: 0; top: 0; bottom: 0;
    border-radius: 999px;
    transition: width .4s ease;
}
.lich-score-fill.is-good { background: linear-gradient(90deg, var(--lich-good), #4ade80); }
.lich-score-fill.is-mid  { background: linear-gradient(90deg, var(--lich-gold), #fcd34d); }
.lich-score-fill.is-bad  { background: linear-gradient(90deg, var(--lich-bad), #c084fc); }
.lich-score-value {
    font-weight: 700; font-size: 14px; display: inline-flex;
    align-items: center; gap: 6px; white-space: nowrap;
}
.lich-score-value .num { font-size: 18px; font-family: 'Playfair Display', serif; color: var(--lich-red); }
.lich-score-value.is-good .num { color: var(--lich-good); }
.lich-score-value.is-mid  .num { color: var(--lich-gold); }
.lich-score-value.is-bad  .num { color: var(--lich-bad); }
.lich-score-verdict {
    font-size: 11px; font-weight: 700; text-transform: uppercase;
    padding: 2px 8px; border-radius: 999px; color: #fff;
}
.lich-score-verdict.is-good { background: var(--lich-good); }
.lich-score-verdict.is-mid  { background: var(--lich-gold); }
.lich-score-verdict.is-bad  { background: var(--lich-bad); }
/* Danh sách dữ kiện ngắn (năm sinh, năm đẹp...): xếp nhiều cột cho đỡ dài trang.
   Dùng khi R8 buộc tách câu liệt kê dài thành danh sách. */
.lich-inline-list { columns: 2; column-gap: 24px; margin: 8px 0 12px; padding-left: 18px; }
.lich-inline-list li { break-inside: avoid; margin-bottom: 4px; font-size: 13px; line-height: 1.6; }
@media (min-width: 768px) { .lich-inline-list { columns: 3; } }

/* Bảng tra dài (vd bảng 12 con giáp x năm sinh ở /xem-tuoi/lam-nha/): cuộn ngang
   TRONG khung của chính nó, không để thân trang cuộn ngang trên mobile. */
.lich-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 12px 0; }
.lich-table-scroll table { margin: 0; min-width: 560px; }

/* Nhãn phân biệt các mục song song NGAY TRONG THÂN BÀI (R6c).
   Khác .lich-side-h - class đó chỉ có style khi nằm trong .lich-side (sidebar),
   đặt trong article thì vô hình. Class này có style độc lập, dùng được mọi nơi. */
.lich-label-inline {
    display: inline-block; margin-right: 6px;
    font-weight: 700; font-size: 13px; color: var(--lich-red);
    border-left: 3px solid var(--lich-gold); padding-left: 8px;
}

.lich-score-extra { grid-column: 1 / -1; }
.lich-score-summary {
    margin: 2px 0 0;
    font-size: 13px; color: #4b5563; line-height: 1.55;
}
.lich-score-detail { margin-top: 4px; }
.lich-score-detail summary {
    cursor: pointer; list-style: none; font-size: 12px; font-weight: 600;
    color: var(--lich-red); display: inline-flex; align-items: center; gap: 6px;
}
.lich-score-detail summary::-webkit-details-marker { display: none; }
.lich-score-detail summary .chev { font-size: 10px; transition: transform .15s; }
.lich-score-detail[open] summary .chev { transform: rotate(180deg); }
.lich-score-factors {
    list-style: none; padding: 0; margin: 10px 0 0;
    display: flex; flex-direction: column; gap: 8px;
}
.lich-score-factors li {
    padding: 8px 10px; border-radius: 8px; background: #f9fafb;
    border-left: 3px solid #d1d5db; font-size: 12px; line-height: 1.5;
}
.lich-score-factors li.is-tot { border-left-color: var(--lich-good); background: #f0fdf4; }
.lich-score-factors li.is-xau { border-left-color: var(--lich-bad); background: #fef2f2; }
.lich-score-factor-label { font-weight: 700; color: #111827; display: block; }
.lich-score-factor-note { display: block; color: #374151; margin-top: 1px; }
.lich-score-factor-explain { display: block; color: #9ca3af; margin-top: 3px; }
.lich-score-learn-more {
    margin-top: 10px; padding-top: 8px; border-top: 1px dashed #e5e7eb;
    font-size: 11px; color: #9ca3af;
}
.lich-score-learn-more a { color: #6b7280; text-decoration: underline; }
.lich-score-learn-more a:hover { color: var(--lich-red); }

/* ----- 3) TIMELINE GIỜ 24H ----- */
.lich-timeline-24h { margin: 14px 0 8px; }
.lich-timeline-bar {
    display: grid; grid-template-columns: repeat(24, minmax(0, 1fr));
    gap: 5px; row-gap: 6px;
    padding: 10px; background: #f9fafb; border-radius: 10px;
}
.lich-timeline-slot {
    min-height: 44px; border-radius: 6px;
    position: relative; cursor: help;
    transition: transform .15s, box-shadow .15s;
    display: flex; align-items: flex-end; justify-content: center;
    padding: 4px 0;
    font-size: 10px; font-weight: 700;
    font-variant-numeric: tabular-nums;
    color: rgba(255, 255, 255, .92);
    user-select: none;
}
.lich-timeline-slot:hover { transform: translateY(-2px); z-index: 2; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.lich-timeline-slot.is-good { background: var(--lich-good); }
.lich-timeline-slot.is-mid  { background: var(--lich-gold); color: #4b3000; }
.lich-timeline-slot.is-bad  { background: #e9d5ff; color: #6b21a8; }
.lich-timeline-slot.is-now {
    outline: 2px solid var(--lich-red); outline-offset: 1px;
    box-shadow: 0 0 0 3px rgba(200, 16, 46, .25);
}
/* Tablet / mobile: wrap 24 slots → 2 hàng × 12 cột - slot rộng gấp đôi */
@media (max-width: 768px) {
    .lich-timeline-bar {
        grid-template-columns: repeat(12, minmax(0, 1fr));
        gap: 5px; padding: 8px;
    }
    .lich-timeline-slot { min-height: 38px; font-size: 11px; }
}
.lich-timeline-legend {
    display: flex; flex-wrap: wrap; gap: 14px;
    font-size: 12px; margin-top: 14px;
}
.lich-timeline-legend .item {
    display: inline-flex; align-items: center; gap: 6px;
}
.lich-timeline-legend .dot {
    width: 14px; height: 14px; border-radius: 4px; display: inline-block;
}
.lich-timeline-legend .dot.is-good { background: var(--lich-good); }
.lich-timeline-legend .dot.is-mid  { background: var(--lich-gold); }
.lich-timeline-legend .dot.is-bad  { background: #e9d5ff; }
.lich-timeline-legend .dot.is-now  { background: #fff; outline: 2px solid var(--lich-red); }

/* ----- 4) TỬ VI 12 CON GIÁP ----- */
.lich-zodiac-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin: 14px 0;
}
@media (min-width: 576px) { .lich-zodiac-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .lich-zodiac-grid { grid-template-columns: repeat(4, 1fr); } }
.lich-zodiac-card {
    border: 1px solid #f3f4f6; border-radius: 12px;
    padding: 12px; background: #fff; transition: transform .15s, box-shadow .15s;
    display: flex; flex-direction: column; gap: 4px;
    border-left: 4px solid var(--lich-gray);
}
.lich-zodiac-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-lich); }
/* 05/08 user chốt: bỏ nền màu theo tone - tín hiệu tốt/xấu chỉ còn ở viền trái + badge điểm */
.lich-zodiac-card.is-good { border-left-color: var(--lich-good); }
.lich-zodiac-card.is-mid  { border-left-color: var(--lich-gold); }
.lich-zodiac-card.is-bad  { border-left-color: var(--lich-bad); }
.lich-zodiac-head {
    display: flex; align-items: center; gap: 8px;
}
.lich-zodiac-emoji { font-size: 24px; line-height: 1; }
.lich-zodiac-name {
    font-weight: 700; font-size: 14px; color: var(--lich-ink);
}
.lich-zodiac-stars { font-size: 12px; color: var(--lich-gold); letter-spacing: 1px; line-height: 1; }
.lich-zodiac-verdict {
    font-size: 11px; font-weight: 500; 
    padding: 2px 8px; border-radius: 999px; color: #fff;
    align-self: flex-start;
}
.lich-zodiac-card.is-good .lich-zodiac-verdict { background: var(--lich-good); }
.lich-zodiac-card.is-mid  .lich-zodiac-verdict { background: var(--lich-gold); }
.lich-zodiac-card.is-bad  .lich-zodiac-verdict { background: var(--lich-bad); }
.lich-zodiac-desc {
    font-size: 12px; color: #4b5563; line-height: 1.55; margin: 0;
}

/* ----- 5) LỜI KHUYÊN THEO NGHỀ ----- */
.lich-career-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    margin: 14px 0;
}
@media (min-width: 576px) { .lich-career-grid { grid-template-columns: repeat(2, 1fr); } }
.lich-career-card {
    display: flex; gap: 14px;
    padding: 14px 16px; background: #fff;
    border: 1px solid #f3f4f6; border-radius: 12px;
    box-shadow: var(--shadow-card);
}
.lich-career-icon {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 12px; background: var(--lich-cream);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.lich-career-body { flex: 1; }
.lich-career-title {
    font-weight: 700; font-size: 14px; color: var(--lich-red);
    margin: 0 0 4px;
}
.lich-career-text {
    font-size: 13px; line-height: 1.6; color: #374151; margin: 0;
}

/* ----- 6) UNIQUE CONTENT + SỰ KIỆN ÂM LỊCH ----- */
.lich-unique-content {
    font-size: 15px; line-height: 1.85; color: #1f2937;
    background: #fffbeb; border-left: 4px solid var(--lich-gold);
    padding: 18px 22px; border-radius: 0 12px 12px 0;
    margin-bottom: 16px;
}
.lich-unique-content p:last-child { margin-bottom: 0; }
.lich-event-box {
    display: flex; gap: 14px;
    padding: 14px 16px; margin: 12px 0;
    background: linear-gradient(135deg, var(--lich-red-light), #fff);
    border: 1px solid var(--lich-red-light); border-radius: 12px;
}
.lich-event-icon {
    flex-shrink: 0; font-size: 28px; line-height: 1;
}
.lich-event-title {
    font-weight: 700; font-size: 14px; color: var(--lich-red); margin: 0 0 4px;
}
.lich-event-desc {
    font-size: 13px; line-height: 1.6; color: #374151; margin: 0;
}
.lich-note-sm {
 margin: 8px 0 0;
}
/* ----- 7) CLUSTER LINKS ----- */
.lich-cluster-grid {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    margin: 14px 0;
}
/* minmax(0,...) - bản vá NÀY là bản có tác dụng thật, khác .lich-grid ở trên.
   Đo 02/08 ở 1024px: hai thẻ trong khối có min-content rộng hơn nửa cột, nên với repeat(2,1fr)
   chúng nở thành 286.8px + 366.5px = 663px nội dung nhồi vào hộp cha chỉ 564px -> vượt 99px và
   bị cắt. Với minmax(0,1fr) thành 251px + 251px = 512px, nằm trọn trong cha. */
@media (min-width: 576px) { .lich-cluster-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.lich-cluster-card {
    display: flex; align-items: center; gap: 12px;
    padding: 14px 16px; background: #fff;
    border: 1px solid #f3f4f6; border-radius: 10px;
    text-decoration: none; transition: border-color .15s, transform .15s;
}
.lich-cluster-card:hover {
    border-color: var(--lich-red); transform: translateX(4px);
    text-decoration: none;
}
.lich-cluster-icon {
    flex-shrink: 0; width: 40px; height: 40px;
    border-radius: 10px; background: var(--lich-red-light);
    color: var(--lich-red);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 18px;
}
.lich-cluster-body { flex: 1; min-width: 0; }
.lich-cluster-label {
    display: block; font-size: 11px; color: var(--lich-gray);
    text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
}
.lich-cluster-title {
    display: block; font-weight: 700; font-size: 14px; color: var(--lich-ink);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lich-cluster-arrow { color: var(--lich-red); font-size: 14px; flex-shrink: 0; }

/* ----- BREADCRUMB ----- */
.lich-breadcrumb-bar {
    font-size: 13px; color: var(--lich-gray);
    padding: 10px 15px; max-width: 1200px; margin: 0 auto;
}
.lich-breadcrumb-bar ol {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
}
.lich-breadcrumb-bar li { display: inline-flex; align-items: center; gap: 6px; }
.lich-breadcrumb-bar li + li::before {
    content: '/'; color: #d1d5db; margin-right: 2px;
}
.lich-breadcrumb-bar a { color: var(--lich-gray); }
.lich-breadcrumb-bar a:hover { color: var(--lich-red); }
.lich-breadcrumb-bar [aria-current] { color: var(--lich-ink); font-weight: 700; }

/* ============================================================
 * 5. THANG (MONTH) PAGE EXTENSIONS - 12 blocks từ month.md
 * ============================================================ */

/* ----- BLOCK 1: CALENDAR GRID THÁNG (above the fold) ----- */
.lich-thang-grid {
    width: 100%; border-collapse: separate; border-spacing: 6px;
    table-layout: fixed;
}
.lich-thang-grid thead th {
    font-size: 12px; text-transform: uppercase; color: var(--lich-gray);
    padding: 10px 0; font-weight: 700; letter-spacing: .06em;
}
.lich-thang-grid thead th.is-sun { color: var(--lich-red); }
.lich-thang-cell {
    display: flex; flex-direction: column; gap: 2px;
    min-height: 88px; padding: 8px 6px;
    border: 1px solid #f3f4f6; border-radius: 10px;
    text-decoration: none; color: var(--lich-ink);
    transition: transform .15s, box-shadow .15s, border-color .15s;
    position: relative;
    background: #fff;
    text-align: center;
}
@media (min-width: 768px) { .lich-thang-cell { min-height: 100px; padding: 10px 8px; } }
.lich-thang-cell:hover {
    transform: scale(1.03); z-index: 2; text-decoration: none;
    box-shadow: var(--shadow-lich); border-color: var(--lich-red);
}
.lich-thang-cell.is-empty {
    background: transparent; border: 1px dashed #e5e7eb;
    pointer-events: none; opacity: .35;
}
.lich-thang-cell.is-good   { border-color: #bbf7d0; background: #f0fdf4; }
.lich-thang-cell.is-bad    { border-color: #e9d5ff; background: #faf5ff; }
.lich-thang-cell.is-today  {
    box-shadow: 0 0 0 2px var(--lich-red); border-color: var(--lich-red);
}
.lich-thang-cell .ngay-top-row {
    display: flex; align-items: center; justify-content: space-between; gap: 4px;
}
.lich-thang-cell .ngay-duong {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 25px; line-height: 1; color: var(--lich-ink);
}
.lich-thang-cell.is-sun  .ngay-duong { color: var(--lich-red); }

/* 5 mức đánh giá theo Trực (khớp danh_gia_ngay_label trang chi tiết ngày) */
.lich-thang-cell .ngay-dot {
    flex: 0 0 auto;
    width: 7px; height: 7px; border-radius: 50%;
    border: 1.5px solid #d1d5db; background: #fff;
}
.lich-thang-cell.is-rat-tot .ngay-duong { color: #15803d; }
.lich-thang-cell.is-rat-tot .ngay-dot   { background: #15803d; border-color: #15803d; }
.lich-thang-cell.is-tot .ngay-duong     { color: #22c55e; }
.lich-thang-cell.is-tot .ngay-dot       { background: #22c55e; border-color: #22c55e; }
.lich-thang-cell.is-binh-thuong .ngay-duong { color: var(--lich-ink); }
.lich-thang-cell.is-xau .ngay-duong     { color: #f97316; }
.lich-thang-cell.is-xau .ngay-dot       { background: #f97316; border-color: #f97316; }
.lich-thang-cell.is-rat-xau .ngay-duong { color: var(--lich-red); }
.lich-thang-cell.is-rat-xau .ngay-dot   { background: var(--lich-red); border-color: var(--lich-red); }

/* Ngày thuộc tháng trước/sau: hiện số + âm lịch thật nhưng làm mờ, không tô màu theo verdict */
.lich-thang-cell.is-other-month { opacity: .5; background: #fafafa; }
.lich-thang-cell.is-other-month .ngay-duong { color: var(--lich-gray); }
.lich-thang-cell.is-other-month .ngay-dot { display: none; }
.lich-thang-cell.is-other-month:hover { opacity: .8; }
.lich-thang-cell .ngay-am {
    font-size: 11px; color: #9ca3af; font-weight: 600;
}
.lich-thang-cell .ngay-am.is-special { color: var(--lich-red); }
.lich-thang-cell .ngay-canchi {
    font-size: 10px; color: var(--lich-gray);
    margin-top: auto; line-height: 1.2;
}
.lich-thang-cell .ngay-badge {
    font-size: 9px; font-weight: 700; padding: 2px 6px;
    border-radius: 4px; text-transform: uppercase;
    align-self: flex-start; letter-spacing: .04em;
    margin-top: 2px;
}
.lich-thang-cell.is-good .ngay-badge { background: var(--lich-good); color: #fff; }
.lich-thang-cell.is-bad  .ngay-badge { background: var(--lich-bad); color: #fff; }
.lich-thang-cell .ngay-star {
    position: absolute; top: -6px; right: -6px;
    background: var(--lich-gold); color: #fff;
    width: 20px; height: 20px; border-radius: 50%;
    font-size: 11px;
    display: flex; align-items: center; justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,.15);
}

/* Mobile: compact calendar cells to avoid text wrap/overflow */
@media (max-width: 575px) {
    .lich-thang-grid { border-spacing: 3px; }
    .lich-thang-grid thead th { font-size: 11px; padding: 6px 0; }
    .lich-thang-cell {
        min-height: 78px; padding: 6px 3px;
        border-radius: 8px;
    }
    .lich-thang-cell .ngay-duong { font-size: 17px; }
    .lich-thang-cell .ngay-am { font-size: 10px; }
    .lich-thang-cell .ngay-canchi {
        font-size: 8.5px; line-height: 1.15;
        white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
        max-width: 100%;
    }
    .lich-thang-cell .ngay-badge { display: none; }
    .lich-thang-cell .ngay-star {
        width: 16px; height: 16px; font-size: 9px;
        top: -4px; right: -4px;
    }
}

/* ----- BLOCK 2: WIDGET BỘ LỌC NGÀY TỐT THEO VIỆC ----- */
.lich-filter-tabs {
    display: flex; flex-wrap: wrap; gap: 8px;
    padding: 16px 20px 8px; border-bottom: 1px solid #f9fafb;
    background: linear-gradient(90deg, var(--lich-cream), #fff);
}
.lich-filter-tab {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 10px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    border: 2px solid #e5e7eb; background: #fff; color: #374151;
    cursor: pointer; transition: all .15s;
}
.lich-filter-tab:hover { border-color: var(--lich-red); color: var(--lich-red); }
.lich-filter-tab.is-active {
    border-color: var(--lich-red); background: var(--lich-red);
    color: #fff;
}
/* Số ngày đạt ngưỡng của từng việc, hiện ngay trên nút tab để scan được mà không phải bấm */
.lich-filter-tab-count {
    display: inline-block; min-width: 20px; padding: 1px 6px;
    border-radius: 999px; background: #f3f4f6; color: #6b7280;
    font-size: 11px; font-weight: 700;
}
.lich-filter-tab.is-active .lich-filter-tab-count { background: rgba(255,255,255,.25); color: #fff; }

/* Panel "Top ngày đẹp" theo từng việc (trang lịch tháng).
   5 việc là OPTION song song nên KHÔNG dùng thẻ H (R6c) - phải phân biệt bằng NHÃN CÓ CSS THẬT.
   Trước đây nhãn này không có CSS ở bất kỳ file nào, tức vô hình - đúng loại lỗi của
   .lich-side-h (class chỉ có style trong sidebar) và .lich-disclaimer. */
.lich-top-panel[hidden] { display: none; }
.lich-top-panel-label {
    margin: 0 0 12px; padding: 8px 12px;
    border-left: 4px solid var(--lich-red); background: var(--lich-cream);
    border-radius: 0 6px 6px 0;
    font-size: 14px; line-height: 1.5; color: #374151;
}
.lich-top-panel-label strong { color: var(--lich-red); }
.lich-top-days {
    list-style: none; padding: 0; margin: 0;
    display: grid; grid-template-columns: 1fr; gap: 12px;
}
@media (min-width: 576px) { .lich-top-days { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .lich-top-days { grid-template-columns: repeat(5, 1fr); } }
.lich-top-day-card {
    display: block; padding: 14px;
    border: 2px solid var(--lich-good); border-radius: 12px;
    background: #f0fdf4; text-decoration: none;
    transition: transform .15s, box-shadow .15s;
    position: relative;
}
.lich-top-day-card:hover {
    transform: translateY(-3px); box-shadow: 0 6px 16px rgba(30,125,50,.18);
    text-decoration: none;
}
.lich-top-day-rank {
    position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--lich-good); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 900; font-size: 13px;
    box-shadow: 0 2px 6px rgba(30,125,50,.3);
}
.lich-top-day-date {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 24px; color: var(--lich-good); text-align: center;
    margin-top: 8px;
}
.lich-top-day-info {
    font-size: 11px; color: var(--lich-gray); text-align: center; margin: 4px 0;
}
.lich-top-day-canchi {
    text-align: center; font-size: 13px; font-weight: 700; color: var(--lich-ink);
}
.lich-top-day-score {
    text-align: center; font-size: 11px; color: var(--lich-good);
    font-weight: 700; margin-top: 4px;
}

/* Mobile: horizontal scroll carousel cho Top 5 - tiết kiệm space */
@media (max-width: 575px) {
    .lich-top-days {
        display: flex; gap: 10px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        padding-bottom: 10px; padding-top: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }
    .lich-top-days > li {
        flex: 0 0 120px;
        scroll-snap-align: start;
        list-style: none;
    }
    .lich-top-day-card {
        padding: 18px 16px 16px;
    }
    .lich-top-day-rank { width: 24px; height: 24px; font-size: 12px; top: -8px; }
    .lich-top-day-date { font-size: 22px; margin-top: 4px; }
    .lich-top-day-info { font-size: 10px; margin: 3px 0; }
    .lich-top-day-canchi { font-size: 12px; }
    .lich-top-day-score { font-size: 10px; margin-top: 3px; }
}

/* ----- BLOCK 4: BẢNG THỐNG KÊ TUẦN ----- */
.lich-week-stats { width: 100%; min-width: 620px; border-collapse: separate; border-spacing: 0; }
.lich-week-stats th, .lich-week-stats td {
    padding: 12px 14px; font-size: 14px; line-height: 1.55;
    border-bottom: 1px solid #f9fafb; white-space: nowrap;
}
.lich-week-stats td .lich-tag {
    white-space: nowrap;
    display: inline-flex; align-items: center; gap: 4px;
}
.lich-week-stats thead th {
    background: #f9fafb; font-size: 11px; text-transform: uppercase;
    color: var(--lich-gray); font-weight: 700; letter-spacing: .06em;
    text-align: left;
}
.lich-week-stats tbody th { font-weight: 700; text-align: left; }
.lich-week-stats .num-good { color: var(--lich-good); font-weight: 700; }
.lich-week-stats .num-bad  { color: var(--lich-bad);  font-weight: 700; }
.lich-week-stats tr.is-best { background: rgba(187,247,208,.4); }
.lich-week-stats tr.is-worst { background: rgba(233,213,255,.3); }
.lich-week-bar {
    height: 8px; background: #f3f4f6; border-radius: 999px;
    overflow: hidden; min-width: 80px; display: flex;
}
.lich-week-bar .good { background: var(--lich-good); }
.lich-week-bar .bad  { background: var(--lich-bad); }

/* ----- BLOCK 6: THẦN SÁT CAO CẤP (Tầng 1.1) ----- */
.lich-than-sat-grid {
    display: grid; grid-template-columns: 1fr; gap: 12px;
    margin: 14px 0;
}
@media (min-width: 768px) { .lich-than-sat-grid { grid-template-columns: repeat(2, 1fr); } }
.lich-than-sat-card {
    display: flex; gap: 14px;
    padding: 16px; border-radius: 12px;
    border: 1px solid #fde68a;
    background: linear-gradient(135deg, var(--lich-cream), #fffbeb);
}
.lich-than-sat-card.is-quy {
    border-color: var(--lich-good); background: linear-gradient(135deg, #f0fdf4, #fff);
}
.lich-than-sat-card.is-hung {
    border-color: var(--lich-bad); background: linear-gradient(135deg, #faf5ff, #fff);
}
.lich-than-sat-icon {
    flex-shrink: 0; width: 48px; height: 48px;
    border-radius: 12px; background: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 24px;
    box-shadow: 0 2px 6px rgba(0,0,0,.08);
}
.lich-than-sat-body { flex: 1; min-width: 0; }
.lich-than-sat-name {
    font-weight: 700; font-size: 15px; color: var(--lich-ink);
    margin: 0 0 4px; font-family: 'Playfair Display', serif;
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.lich-than-sat-card.is-quy .lich-than-sat-name { color: var(--lich-good); }
.lich-than-sat-card.is-hung .lich-than-sat-name { color: var(--lich-bad); }
.lich-than-sat-days {
    font-size: 12px; color: var(--lich-gray); margin-bottom: 4px;
}
.lich-than-sat-days strong { color: var(--lich-ink); font-weight: 700; }
.lich-than-sat-desc { font-size: 13px; line-height: 1.6; color: #374151; margin: 0; }

/* ----- BLOCK 8: TAM NGUYÊN CỬU VẬN (Tầng 1.3) ----- */
.lich-van-card {
    background: linear-gradient(135deg, #fef2f2 0%, #fff7ed 50%, var(--lich-cream) 100%);
    border: 1px solid var(--lich-gold);
    border-radius: 14px; padding: 20px 22px;
    position: relative; overflow: hidden;
}
.lich-van-card::before {
    content: '☯'; position: absolute; right: -20px; bottom: -30px;
    font-size: 180px; opacity: .06; color: var(--lich-red);
    pointer-events: none;
}
.lich-van-header {
    display: flex; align-items: center; gap: 14px; margin-bottom: 12px;
}
.lich-van-number {
    width: 64px; height: 64px; border-radius: 50%;
    background: linear-gradient(135deg, var(--lich-red), #ef4444);
    color: #fff; font-family: 'Playfair Display', serif;
    font-weight: 900; font-size: 30px; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 4px 12px rgba(200,16,46,.3);
}
.lich-van-title {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 20px; color: var(--lich-red); margin: 0;
}
.lich-van-subtitle { font-size: 12px; color: var(--lich-gray); }
.lich-van-meta {
    display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0;
}
@media (min-width: 576px) { .lich-van-meta { grid-template-columns: repeat(3, 1fr); } }
.lich-van-meta > div {
    background: rgba(255,255,255,.7); padding: 10px 12px;
    border-radius: 8px; font-size: 13px; border: 1px solid #fde68a;
}
.lich-van-meta dt { font-weight: 700; font-size: 10px; text-transform: uppercase; color: var(--lich-red); margin-bottom: 4px; }
.lich-van-meta dd { margin: 0; font-weight: 700; }
.lich-van-desc { font-size: 14px; line-height: 1.7; color: #1f2937; position: relative; z-index: 1; }

/* ----- BLOCK 5: TIẾT KHÍ TRONG THÁNG + CỔ THƯ (Tầng 2.4) ----- */
.lich-tk-month-list {
    display: grid; grid-template-columns: 1fr; gap: 10px; margin: 12px 0;
}
@media (min-width: 576px) { .lich-tk-month-list { grid-template-columns: repeat(2, 1fr); } }
.lich-tk-month-card {
    display: flex; gap: 12px; padding: 14px;
    background: #fffbeb; border: 1px solid #fde68a; border-radius: 10px;
}
.lich-tk-month-icon {
    flex-shrink: 0; width: 44px; height: 44px;
    border-radius: 50%; background: linear-gradient(135deg, #fb923c, #ef4444);
    color: #fff; display: inline-flex; align-items: center; justify-content: center;
    font-size: 22px;
}
.lich-tk-month-name { font-weight: 900; font-size: 15px; color: #7c2d12; margin: 0 0 2px; }
.lich-tk-month-range { font-size: 12px; color: var(--lich-gray); }
.lich-tk-month-note { font-size: 12px; color: #374151; margin-top: 4px; }

.lich-co-thu {
    border-left: 4px solid var(--lich-red); background: #fffaf5;
    padding: 14px 18px; margin: 16px 0; border-radius: 0 10px 10px 0;
    font-style: italic; font-size: 14px; line-height: 1.75; color: #1f2937;
    position: relative;
}
.lich-co-thu::before {
    content: '“'; font-family: 'Playfair Display', serif;
    font-size: 56px; color: var(--lich-red); opacity: .25;
    position: absolute; left: 8px; top: -8px; line-height: 1;
}
.lich-co-thu-source {
    display: block; margin-top: 8px;
    font-style: normal; font-size: 12px; color: var(--lich-red); font-weight: 700;
}
.lich-co-thu-han {
    display: inline-block; margin-left: 8px;
    font-family: 'Times New Roman', serif; color: var(--lich-gray); font-weight: 400;
}

/* ----- BLOCK 7: 28 TÚ THEO TỨ TƯỢNG (Tầng 2.5) ----- */
.lich-tu-tuong-grid {
    display: grid; grid-template-columns: 1fr; gap: 14px; margin: 14px 0;
}
@media (min-width: 768px) { .lich-tu-tuong-grid { grid-template-columns: repeat(2, 1fr); } }
.lich-tu-tuong-card {
    padding: 16px; border-radius: 12px;
    border: 2px solid; background: #fff;
}
.lich-tu-tuong-card.is-thanh-long  { border-color: #2E7D32; background: linear-gradient(135deg, #f0fdf4, #fff); }
.lich-tu-tuong-card.is-chu-tuoc    { border-color: #C62828; background: linear-gradient(135deg, #fef2f2, #fff); }
.lich-tu-tuong-card.is-bach-ho     { border-color: #6b7280; background: linear-gradient(135deg, #f9fafb, #fff); }
.lich-tu-tuong-card.is-huyen-vu    { border-color: #1565C0; background: linear-gradient(135deg, #eff6ff, #fff); }
.lich-tu-tuong-head {
    display: flex; align-items: center; gap: 10px; margin-bottom: 10px;
}
.lich-tu-tuong-emoji { font-size: 28px; }
.lich-tu-tuong-name {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 16px; margin: 0;
}
.lich-tu-tuong-card.is-thanh-long .lich-tu-tuong-name { color: #2E7D32; }
.lich-tu-tuong-card.is-chu-tuoc .lich-tu-tuong-name   { color: #C62828; }
.lich-tu-tuong-card.is-bach-ho .lich-tu-tuong-name    { color: #6b7280; }
.lich-tu-tuong-card.is-huyen-vu .lich-tu-tuong-name   { color: #1565C0; }
.lich-tu-tuong-sub { font-size: 11px; color: var(--lich-gray); text-transform: uppercase; letter-spacing: .05em; }
.lich-tu-tuong-stars { display: flex; flex-wrap: wrap; gap: 6px; }
.lich-tu-tuong-stars .star {
    font-size: 11px; padding: 4px 8px; border-radius: 6px;
    background: rgba(255,255,255,.6); border: 1px solid rgba(0,0,0,.06);
    color: var(--lich-ink); font-weight: 600;
}
.lich-tu-tuong-stars .star.is-good { background: #f0fdf4; color: var(--lich-good); border-color: #bbf7d0; }
.lich-tu-tuong-stars .star.is-bad  { background: #faf5ff; color: var(--lich-bad);  border-color: #e9d5ff; }

/* ----- BLOCK 11: RADAR CHART NĂNG LƯỢNG (Tầng 3.6) ----- */
.lich-radar-wrap {
    display: flex; flex-direction: column; gap: 18px;
    align-items: center; margin: 16px 0;
}
@media (min-width: 768px) {
    .lich-radar-wrap { flex-direction: row; align-items: center; justify-content: center; gap: 32px; }
}
.lich-radar-svg {
    width: 100%; max-width: 380px; height: auto;
    overflow: visible;
}
.lich-radar-svg .grid { fill: none; stroke: #e5e7eb; stroke-width: 1; }
.lich-radar-svg .axis  { stroke: #d1d5db; stroke-width: 1; }
.lich-radar-svg .area  { fill: rgba(200,16,46,.25); stroke: var(--lich-red); stroke-width: 2; }
.lich-radar-svg .point { fill: var(--lich-red); }
.lich-radar-svg .label {
    font-size: 11px; font-weight: 700; fill: var(--lich-ink);
    font-family: 'Be Vietnam Pro', sans-serif;
}
.lich-radar-legend {
    display: grid; grid-template-columns: 1fr 1fr; gap: 8px 16px;
    font-size: 12px; min-width: 200px;
}
.lich-radar-legend > div {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px; padding: 6px 10px;
    background: #f9fafb; border-radius: 6px;
}
.lich-radar-legend strong { color: var(--lich-red); }

/* ----- BLOCK 12: SỰ KIỆN LỊCH SỬ VN THEO ÂM LỊCH (Tầng 3.7) ----- */
.lich-history-timeline {
    list-style: none; padding: 0; margin: 14px 0;
    position: relative; padding-left: 2.4rem !important;
}
.lich-history-timeline::before {
    content: ''; position: absolute; left: 14px; top: 6px; bottom: 6px;
    width: 2px; background: linear-gradient(180deg, var(--lich-red), var(--lich-gold));
}
.lich-history-item { position: relative; padding: 10px 0 14px; }
.lich-history-item::before {
    content: ''; position: absolute;
    box-sizing: border-box;
    left: -29px; top: 10px;
    width: 16px; height: 16px; border-radius: 50%;
    background: #fff; border: 3px solid var(--lich-red);
    box-shadow: 0 0 0 2px #fff;
    z-index: 1;
}
.lich-history-item:last-child::after {
    content: ''; position: absolute; left: -25px; top: 26px;
    bottom: -16px; width: 6px; background: #fff;
}
.lich-history-date {
    display: inline-flex; align-items: baseline; gap: 8px;
    font-weight: 700; color: var(--lich-red); font-size: 13px;
    margin-bottom: 4px;
}
.lich-history-date .year {
    font-family: 'Playfair Display', serif; font-size: 16px;
}
.lich-history-am {
    background: var(--lich-gold); color: #fff; font-size: 10px;
    padding: 2px 8px; border-radius: 4px; font-weight: 700;
}
.lich-history-event {
    font-size: 14px; line-height: 1.65; color: #1f2937; margin: 0;
}

/* ----- BLOCK 3: MONTH SUMMARY STATS BANNER ----- */
.lich-month-summary {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin: 14px 0;
}
@media (min-width: 576px) { .lich-month-summary { grid-template-columns: repeat(4, 1fr); } }
.lich-month-summary-card {
    text-align: center; padding: 14px 10px;
    border: 1px solid #f3f4f6; border-radius: 12px;
    background: #fff;
}
.lich-month-summary-card.is-good { background: #f0fdf4; border-color: #bbf7d0; }
.lich-month-summary-card.is-bad  { background: #faf5ff; border-color: #e9d5ff; }
.lich-month-summary-card.is-mid  { background: var(--lich-cream); border-color: #fde68a; }
.lich-month-summary-card.is-red  { background: #fef2f2; border-color: var(--lich-red-light); }
.lich-month-summary-num {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 32px; line-height: 1; color: var(--lich-ink);
}
.lich-month-summary-card.is-good .lich-month-summary-num { color: var(--lich-good); }
.lich-month-summary-card.is-bad  .lich-month-summary-num { color: var(--lich-bad); }
.lich-month-summary-card.is-mid  .lich-month-summary-num { color: var(--lich-gold); }
.lich-month-summary-card.is-red  .lich-month-summary-num { color: var(--lich-red); }
.lich-month-summary-label {
    font-size: 11px; color: var(--lich-gray); text-transform: uppercase;
    font-weight: 700; letter-spacing: .04em; margin-top: 4px;
}

/* ============================================================
 * 6. NAM (YEAR) PAGE EXTENSIONS - blocks từ nam.md
 * ============================================================ */

/* ----- BLOCK: YEAR BIG CARD ----- */
.lich-year-card { position: relative; padding: 28px 20px; text-align: center; }
.lich-year-han {
    font-family: 'Times New Roman', serif;
    font-size: 18px; color: var(--lich-gray);
    letter-spacing: .2em; margin-bottom: 4px;
}
.lich-year-big {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 88px; line-height: 1; color: var(--lich-red);
    display: inline-block; position: relative;
}
@media (min-width: 768px) { .lich-year-big { font-size: 120px; } }
.lich-year-canchi {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 28px; color: var(--lich-gold); margin-top: 6px;
}
.lich-year-meta {
    display: grid; grid-template-columns: 1fr; gap: 10px;
    max-width: 560px; margin: 16px auto 0;
}
@media (min-width: 576px) { .lich-year-meta { grid-template-columns: repeat(3, 1fr); } }
.lich-year-meta > div {
    background: rgba(255,255,255,.8); padding: 10px 12px;
    border-radius: 8px; font-size: 13px; border: 1px solid #f3f4f6;
}
.lich-year-meta dt { font-size: 10px; font-weight: 600; text-transform: uppercase; color: var(--lich-red); margin-bottom: 4px; }
.lich-year-meta dd { margin: 0; font-weight: 700; }

/* ----- BLOCK: PHI TINH 3×3 GRID (Huyền Không Phi Tinh) ----- */
.lich-phi-tinh-wrap {
    max-width: 430px; margin: 14px auto;
}
/* 9 cung LUÔN giữ 3x3 ở mọi khổ màn hình - đây là bản đồ phương vị, gộp về 1 cột là mất nghĩa.
   Thu gọn bằng cách giảm cỡ chữ/padding, không giảm số cột. */
.lich-phi-tinh-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px;
    background: #f9fafb; padding: 8px; border-radius: 10px;
}
/* Trước đây `aspect-ratio: 1` + min-height 100px: trên PC 430px/3 cột ra ô ~140px vuông,
   3 hàng thành >500px cao. Bỏ aspect-ratio, chiều cao do nội dung quyết định. */
.lich-phi-tinh-cell {
    padding: 6px 4px;
    border-radius: 8px; border: 1.5px solid transparent;
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 1px; text-align: center;
    position: relative; background: #fff;
}
.lich-phi-tinh-cell.is-good { background: #f0fdf4; border-color: #bbf7d0; }
.lich-phi-tinh-cell.is-hung { background: #faf5ff; border-color: #e9d5ff; }
.lich-phi-tinh-cell.is-dai-hung {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-color: var(--lich-red);
}
.lich-phi-tinh-cell.is-trung { background: linear-gradient(135deg, #fef9c3, #fde68a); border-color: var(--lich-gold); }
/* Bát Bạch = đại cát (tài tinh mạnh nhất Vận 8-9): xanh đậm hơn is-good để phân biệt mức. */
.lich-phi-tinh-cell.is-dai-cat { background: #dcfce7; border-color: #4ade80; }
/* Nhãn "chủ về" trong bảng nên/tránh theo hướng - dùng lại đúng bộ màu của ô lưới 9 cung
   để bảng và lưới không nói 2 màu khác nhau cho cùng 1 sao. */
.lich-phi-tinh-tag-inline {
    display: inline-block; padding: 2px 7px; border-radius: 4px;
    font-size: 11px; font-weight: 600; white-space: nowrap; color: #fff;
}
.lich-phi-tinh-tag-inline.is-good     { background: var(--lich-good); }
.lich-phi-tinh-tag-inline.is-dai-cat  { background: #15803d; }
.lich-phi-tinh-tag-inline.is-hung     { background: var(--lich-bad); }
.lich-phi-tinh-tag-inline.is-dai-hung { background: var(--lich-red); }
.lich-phi-tinh-tag-inline.is-trung    { background: var(--lich-gold); }
.lich-phi-tinh-direction {
    font-size: 9px; color: var(--lich-gray); font-weight: 600;
    text-transform: uppercase; letter-spacing: .02em; line-height: 1.2;
}
.lich-phi-tinh-num {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 22px; line-height: 1.05; color: var(--lich-ink);
}
.lich-phi-tinh-cell.is-good .lich-phi-tinh-num { color: var(--lich-good); }
.lich-phi-tinh-cell.is-dai-cat .lich-phi-tinh-num { color: #15803d; }
.lich-phi-tinh-cell.is-hung .lich-phi-tinh-num { color: var(--lich-bad); }
.lich-phi-tinh-cell.is-dai-hung .lich-phi-tinh-num { color: var(--lich-red); }
.lich-phi-tinh-cell.is-trung .lich-phi-tinh-num { color: var(--lich-gold); }
.lich-phi-tinh-name {
    font-size: 9.5px; font-weight: 600; color: var(--lich-ink); line-height: 1.15;
}
.lich-phi-tinh-tag {
    font-size: 8px; font-weight: 700; padding: 1px 5px; border-radius: 3px;
    text-transform: uppercase; letter-spacing: .02em;
    display: inline-block; margin-top: 1px; line-height: 1.4;
}
.lich-phi-tinh-cell.is-good .lich-phi-tinh-tag { background: var(--lich-good); color: #fff; }
.lich-phi-tinh-cell.is-dai-cat .lich-phi-tinh-tag { background: #15803d; color: #fff; }
.lich-phi-tinh-cell.is-hung .lich-phi-tinh-tag { background: var(--lich-bad); color: #fff; }
.lich-phi-tinh-cell.is-dai-hung .lich-phi-tinh-tag { background: var(--lich-red); color: #fff; }
.lich-phi-tinh-cell.is-trung .lich-phi-tinh-tag { background: var(--lich-gold); color: #fff; }

/* Scale lên ở màn hình rộng. PHẢI đặt SAU các rule base: @media không tăng specificity,
   để trước thì rule base bên dưới ghi đè (đo thật: số vẫn 22px ở 1440px). */
@media (min-width: 576px) {
    .lich-phi-tinh-wrap { max-width: 500px; }
    .lich-phi-tinh-grid { gap: 6px; padding: 10px; }
    .lich-phi-tinh-cell { padding: 9px 6px; gap: 2px; }
    .lich-phi-tinh-direction { font-size: 10px; }
    .lich-phi-tinh-num { font-size: 27px; }
    .lich-phi-tinh-name { font-size: 10.5px; }
    .lich-phi-tinh-tag { font-size: 8.5px; padding: 1px 6px; }
}
.lich-phi-tinh-legend {
    display: flex; flex-wrap: wrap; gap: 12px; font-size: 12px;
    margin-top: 14px; color: var(--lich-gray);
}
.lich-phi-tinh-legend .dot {
    width: 12px; height: 12px; border-radius: 4px; display: inline-block;
    margin-right: 4px; vertical-align: middle;
}

/* ----- BLOCK: HEATMAP TOÀN NĂM ----- */
.lich-year-heatmap {
    display: grid;
    grid-template-columns: 50px repeat(12, 1fr);
    gap: 3px; margin: 14px 0;
    min-width: 540px;
}
@media (max-width: 575px) {
    .lich-year-heatmap { grid-template-columns: 36px repeat(12, 1fr); min-width: 480px; }
    .lich-heatmap-header, .lich-heatmap-row-label { font-size: 10px; }
    .lich-heatmap-cell { min-height: 18px; }
}
.lich-heatmap-header {
    font-size: 11px; color: var(--lich-gray);
    text-align: center; padding: 6px 2px; font-weight: 600;
    text-transform: uppercase;
}
.lich-heatmap-row-label {
    font-size: 11px; color: var(--lich-gray);
    text-align: right; padding-right: 8px;
    align-self: center; font-weight: 600;
}
.lich-heatmap-cell {
    aspect-ratio: 1; border-radius: 4px;
    cursor: help; transition: transform .15s;
    background: #f3f4f6;
    min-height: 24px;
}
.lich-heatmap-cell:hover { transform: scale(1.2); z-index: 2; }
.lich-heatmap-cell.lvl-1 { background: #dcfce7; }
.lich-heatmap-cell.lvl-2 { background: #86efac; }
.lich-heatmap-cell.lvl-3 { background: var(--lich-good); }
.lich-heatmap-cell.lvl-bad-1 { background: #ede9fe; }
.lich-heatmap-cell.lvl-bad-2 { background: #c4b5fd; }
.lich-heatmap-cell.lvl-bad-3 { background: var(--lich-bad); }
.lich-heatmap-legend {
    display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
    font-size: 12px; color: var(--lich-gray); margin-top: 12px;
}
.lich-heatmap-legend .scale {
    display: inline-flex; gap: 3px; align-items: center;
}
.lich-heatmap-legend .scale span {
    width: 12px; height: 12px; border-radius: 3px; display: inline-block;
}

/* ----- BLOCK: PLANNER NĂM (interactive widget) ----- */
.lich-planner-card {
    background: linear-gradient(135deg, var(--lich-red), var(--lich-red-dark));
    color: #fff; padding: 24px 22px; border-radius: 14px;
    position: relative; overflow: hidden;
}
.lich-planner-card::before {
    content: '☯'; position: absolute; right: -30px; bottom: -40px;
    font-size: 220px; opacity: .06; color: #fff;
}
.lich-planner-card .lich-planner-h {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 22px; color: #fff; margin: 0 0 6px;
    position: relative; z-index: 1;
}
.lich-planner-card .lich-planner-sub {
    font-size: 13px; color: #fff; margin: 0 0 16px;
    position: relative; z-index: 1;
}
.lich-planner-form {
    display: flex; gap: 8px; margin-bottom: 8px;
    position: relative; z-index: 1;
}
.lich-planner-input {
    flex: 1; padding: 12px 14px; border: 0; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--lich-ink);
}
/* Ô giới tính của planner: /tu-vi/nam-:year cần cả birth + gender mới ra kết quả cá nhân */
.lich-planner-select {
    padding: 12px 10px; border: 0; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--lich-ink);
    background: #fff; cursor: pointer;
}

/* .lich-disclaimer đang được dùng ở ~20 chỗ trong views/ mà TRƯỚC ĐÂY KHÔNG có CSS ở bất kỳ
   file nào - tức disclaimer hiển thị y như đoạn văn thường, không phân biệt được là lưu ý.
   Cùng loại lỗi với .lich-side-h (class chỉ có style trong sidebar). */
.lich-disclaimer {
    margin: 14px 0 0; padding: 10px 12px;
    border-left: 3px solid #d1d5db; background: #f9fafb;
    border-radius: 0 6px 6px 0;
    font-size: 13px; line-height: 1.6; color: #6b7280;
}
.lich-disclaimer em { font-style: italic; }

/* H3 ngăn ý bên trong 1 section đã gộp (vd "ngày cần tránh" + "nếu kẹt thì sao").
   Có khi 2 chủ đề con cùng thuộc 1 câu hỏi thì gộp 1 section rồi tách H3 sẽ đỡ cho
   người đọc hơn là tách 2 section - cuộn ít hơn, mạch không đứt. */
.lich-section-h3 {
    margin: 22px 0 8px; padding-bottom: 6px;
    border-bottom: 1px solid #f3f4f6;
    font-size: 16px; font-weight: 700; color: #1f2937;
}
.lich-card-pad > .lich-section-h3:first-child { margin-top: 0; }

/* ===== Trang lịch tháng - 3 khối theo quy ước "trang có tool trả kết quả dạng list" ===== */
.lich-month-above-tool { margin-bottom: 16px; }
.lich-month-tool { scroll-margin-top: 80px; }

/* Danh sách cách xử lý ở section objection-handling ("việc gấp buộc vào ngày xấu thì sao") */
.lich-objection-list {
    margin: 12px 0 0; padding-left: 22px;
    display: grid; gap: 10px;
    font-size: 15px; line-height: 1.65;
}
.lich-objection-list li::marker { color: var(--lich-red); font-weight: 700; }

/* Danh sách Rằm / Mùng 1 / lễ Tết trong tháng */
.lich-moc-am-list {
    list-style: none; margin: 12px 0 0; padding: 0;
    display: grid; gap: 8px;
}
.lich-moc-am-list li {
    padding: 8px 12px; border-radius: 6px; background: #f9fafb;
    border-left: 3px solid var(--lich-gold, #d4a017);
    font-size: 14px; line-height: 1.5;
}

/* Đoạn kết: khối trơn không thẻ H, gồm câu phân vai trang + link về pillar + disclaimer */
.lich-ket-bai {
    margin-top: 20px; padding: 16px 20px;
    background: #fff; border: 1px solid #f3f4f6; border-radius: 10px;
    font-size: 15px; line-height: 1.7;
}
.lich-ket-bai > p:first-child { margin-top: 0; }
.lich-ket-bai .lich-disclaimer { margin-bottom: 0; }

/* 12 lưới tháng inline trên trang năm. Lớp "định vị ngày": chỉ ngày dương + ngày âm + màu mức. */
.lich-year-month-block { margin-top: 18px; padding-top: 14px; border-top: 1px solid #e5e7eb; }
/* 1 legend dùng chung cho cả 12 lưới - in 1 lần, nằm ngay dưới lưới tháng 1.
   Có border-top + padding-top y như .lich-month-legend của trang tháng để đọc ra ngay là
   ghi chú của cái lưới vừa xem, không phải một dòng text rời. */
.lich-year-cal-legend {
    display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
    margin: 12px 0 2px; padding-top: 10px; border-top: 1px solid #f3f4f6;
    font-size: 11px; color: var(--lich-gray);
}
.lich-year-cal-legend b { font-weight: 700; }
.lich-year-cal-legend .dot {
    width: 9px; height: 9px; border-radius: 50%; display: inline-block;
    vertical-align: middle; margin-right: 4px;
    border: 1.5px solid #d1d5db; background: #fff;
}
.lich-year-cal-legend .dot.is-rat-tot     { background: #15803d; border-color: #15803d; }
.lich-year-cal-legend .dot.is-tot         { background: #22c55e; border-color: #22c55e; }
.lich-year-cal-legend .dot.is-binh-thuong { background: #fff; border-color: #d1d5db; }
.lich-year-cal-legend .dot.is-xau         { background: #f97316; border-color: #f97316; }
.lich-year-cal-legend .dot.is-rat-xau     { background: var(--lich-red); border-color: var(--lich-red); }
.lich-year-month-h3 {
    margin: 0 0 4px; font-size: 15px; font-weight: 700; color: var(--lich-ink);
}
.lich-year-month-sub { margin: 0 0 8px; font-size: 13px; color: #6b7280; }
.lich-year-month-cal { width: 100%; border-collapse: collapse; table-layout: fixed; min-width: 320px; }
.lich-year-month-cal th {
    padding: 5px 2px; font-size: 11px; font-weight: 600; color: #6b7280;
    text-transform: uppercase; letter-spacing: .03em; border-bottom: 1px solid #e5e7eb;
}
.lich-year-month-cal td {
    padding: 4px 2px; text-align: center; vertical-align: middle;
    border: 1px solid #f3f4f6; height: 38px;
    position: relative;   /* neo cho .dot ở góc trên phải */
}
.lich-year-month-cal td.is-empty { background: #fafafa; border-color: #f3f4f6; }
.lich-year-month-cal td .d { display: block; font-size: 13px; font-weight: 600; line-height: 1.2; }
.lich-year-month-cal td .l { display: block; font-size: 10px; color: #6b7280; line-height: 1.2; }
/* Mã hoá tốt/xấu bằng DẤU TRONG Ô (dot), KHÔNG tô màu chữ và KHÔNG tô nền ô.
   Lịch sử 3 bước: (1) tô nền 4 mức + tô màu số -> 6 màu nền trong 1 lưới, rối;
   (2) bỏ nền, chỉ tô màu số -> đỏ vừa nghĩa "Rất xấu" vừa nghĩa "Chủ Nhật", nhập nhằng;
   (3) hiện tại: số để mực đen, mức tốt/xấu nằm ở dot góc trên phải + 1 legend dùng chung.
   Bảng màu dot lấy y hệt `.lich-thang-cell .ngay-dot` để 2 trang cùng một ngôn ngữ. */
.lich-year-month-cal td .dot {
    /* Neo theo TÂM ô, không theo lề phải: ô rộng 47px (mobile) -> 101px (PC), neo lề phải
       thì trên PC dot dạt ra góc và đọc như không thuộc số ngày nào. left:calc(50%+11px)
       đặt dot sát ngay bên phải số ngày (số căn giữa, rộng ~18px) ở mọi bề rộng ô. */
    position: absolute; top: 4px; left: calc(50% + 11px);
    width: 7px; height: 7px; border-radius: 50%;
    border: 1.5px solid #d1d5db; background: #fff;
}
.lich-year-month-cal td.is-rat-tot .dot { background: #15803d; border-color: #15803d; }
.lich-year-month-cal td.is-tot .dot     { background: #22c55e; border-color: #22c55e; }
.lich-year-month-cal td.is-binh-thuong .dot { background: #fff; border-color: #d1d5db; }
.lich-year-month-cal td.is-xau .dot     { background: #f97316; border-color: #f97316; }
.lich-year-month-cal td.is-rat-xau .dot { background: var(--lich-red); border-color: var(--lich-red); }
.lich-year-month-cal td.is-other-month .dot { display: none; }
.lich-year-month-cal td.is-lunar-special .l { color: var(--lich-gold); font-weight: 700; }
/* Ngày của tháng trước/sau: calendar_rows trả tone5 = 'other-month'. Bám đúng convention
   đã dùng ở trang tháng (.lich-thang-cell.is-other-month) để 2 trang không lệch nhau. */
.lich-year-month-cal td.is-other-month     { opacity: .5; background: #fafafa; }
.lich-year-month-cal td.is-other-month .d  { color: var(--lich-gray); font-weight: 400; }

/* Bảng 24 tiết khí + 2 bảng ngày lễ của trang năm */
.lich-year-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.lich-year-table th, .lich-year-table td {
    padding: 7px 9px; border-bottom: 1px solid #f3f4f6; text-align: left;
}
.lich-year-table thead th {
    font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
    color: #6b7280; background: #f9fafb;
}
.lich-year-table tbody th { font-weight: 600; color: var(--lich-ink); }
.lich-le-group { margin-bottom: 6px; }
.lich-le-group-h {
    margin: 14px 0 6px; font-size: 13px; font-weight: 700; color: var(--lich-red);
    text-transform: uppercase; letter-spacing: .03em;
}
/* Nhãn thay cho 2 H3 đơn độc cũ (planner, tên Vận) - phải có CSS THẬT trong thân bài,
   không dùng .lich-side-h vì class đó chỉ có style khi nằm trong .lich-side */
.lich-body-label {
    margin: 0 0 4px; font-size: 14px; font-weight: 700; color: var(--lich-ink);
}
.lich-planner-btn {
    background: var(--lich-gold); color: #fff;
    padding: 12px 18px; border: 0; border-radius: 8px;
    font-weight: 700; font-size: 13px; cursor: pointer;
    text-transform: uppercase; letter-spacing: .04em;
}
.lich-planner-btn:hover { background: #b78b29; }
.lich-planner-presets {
    display: flex; flex-wrap: wrap; gap: 6px;
    position: relative; z-index: 1;
}
.lich-planner-presets button {
    background: rgba(255,255,255,.15); color: #fff;
    border: 1px solid rgba(255,255,255,.3);
    padding: 4px 10px; font-size: 11px; border-radius: 999px;
    cursor: pointer; font-family: inherit;
}
.lich-planner-presets button:hover { background: rgba(255,255,255,.25); }

/* ----- BLOCK: MA TRẬN 12 TUỔI × 12 THÁNG ----- */
.lich-matrix-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lich-matrix-table {
    border-collapse: separate; border-spacing: 3px;
    width: 100%; min-width: 560px; font-variant-numeric: tabular-nums;
}
@media (max-width: 575px) {
    .lich-matrix-table th, .lich-matrix-table td { font-size: 11px; }
    .lich-matrix-table tbody th { min-width: 50px; padding: 4px 6px; }
    .lich-matrix-cell { min-height: 28px; font-size: 11px; }
}
.lich-matrix-table th, .lich-matrix-table td {
    padding: 0; text-align: center; font-size: 13px;
}
.lich-matrix-table thead th, .lich-matrix-table tbody th {
    font-weight: 700; color: var(--lich-ink);
    background: #f9fafb; padding: 6px 8px;
    border-radius: 6px; font-size: 12px;
}
.lich-matrix-table thead th { text-transform: uppercase; font-weight: 600; font-size: 11px; color: var(--lich-gray); }
.lich-matrix-table tbody th { text-align: left; min-width: 60px; }
.lich-matrix-cell {
    width: 100%; min-height: 36px;
    display: flex; align-items: center; justify-content: center;
    border-radius: 6px; font-weight: 700; color: #fff;
    cursor: help;
}
.lich-matrix-cell.lvl-1 { background: #ede9fe; color: #6b21a8; }
.lich-matrix-cell.lvl-2 { background: #c4b5fd; color: #4c1d95; }
.lich-matrix-cell.lvl-3 { background: var(--lich-gold); color: #fff; }
.lich-matrix-cell.lvl-4 { background: #86efac; color: #064e3b; }
.lich-matrix-cell.lvl-5 { background: var(--lich-good); color: #fff; }

/* ----- BLOCK: 12 THÁNG GRID (link xuống trang tháng) ----- */
.lich-months-grid {
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
    margin: 14px 0;
}
@media (min-width: 576px) { .lich-months-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .lich-months-grid { grid-template-columns: repeat(4, 1fr); } }
.lich-month-tile {
    display: block; padding: 14px 12px;
    background: #fff; border: 1px solid #f3f4f6; border-radius: 10px;
    text-decoration: none; text-align: center;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.lich-month-tile:hover {
    transform: translateY(-2px); border-color: var(--lich-red);
    box-shadow: var(--shadow-lich); text-decoration: none;
}
.lich-month-tile-num {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 28px; color: var(--lich-red); line-height: 1;
}
.lich-month-tile-am {
    font-size: 11px; color: var(--lich-gray); margin-top: 4px;
}
.lich-month-tile-stat {
    font-size: 10px; color: var(--lich-good); margin-top: 6px;
    font-weight: 600;
}
.lich-month-tile-stat .bad { color: var(--lich-bad); }
.lich-month-tile.is-current {
    background: linear-gradient(135deg, var(--lich-red), var(--lich-red-dark));
    border-color: var(--lich-red);
}
.lich-month-tile.is-current .lich-month-tile-num,
.lich-month-tile.is-current .lich-month-tile-am,
.lich-month-tile.is-current .lich-month-tile-stat { color: #fff; }

/* ============================================================
 * 7. NGÀY TỐT - DANH SÁCH (Xem ngày tốt khai trương / cưới hỏi / ...)
 * ============================================================ */

/* Filter pills (Tất cả / Tốt / Xấu) - dùng lại pattern lich-filter-tabs */
.lich-day-filter {
    display: flex; flex-wrap: wrap; gap: 8px;
    margin: 12px 0;
}
.lich-day-filter button,
.lich-day-filter a {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 14px; border-radius: 999px;
    font-size: 13px; font-weight: 600; line-height: 1.3;
    border: 2px solid #e5e7eb; background: #fff; color: #374151;
    cursor: pointer; transition: all .15s;
    font-family: inherit; text-decoration: none;
}
.lich-day-filter button:hover,
.lich-day-filter a:hover { border-color: var(--lich-red); color: var(--lich-red); text-decoration: none; }
.lich-day-filter .active,
.lich-day-filter button.active,
.lich-day-filter a.active {
    border-color: var(--lich-red); background: var(--lich-red); color: #fff;
}

/* Month picker inline */
.lich-month-picker {
    display: flex; align-items: center; gap: 10px;
    padding: 12px 14px; background: #f9fafb; border-radius: 10px;
    font-size: 14px; flex-wrap: wrap;
}
.lich-month-picker label { font-weight: 600; color: var(--lich-ink); }
.lich-month-picker input[type=text] {
    flex: 1; min-width: 120px;
    padding: 8px 12px; border: 1px solid #e5e7eb; border-radius: 6px;
    font-size: 14px; font-family: inherit;
}

/* Best-day list - card cho mỗi ngày tốt/xấu */
.lich-bestday-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }

/* Biểu đồ so sánh số ngày Tốt các tháng còn lại trong năm (section "tháng nào nhiều nhất") */
.lich-year-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.lich-year-bars > li > a {
    display: grid; grid-template-columns: 72px 1fr 68px; align-items: center; gap: 10px;
    padding: 5px 8px; border-radius: 8px; text-decoration: none; color: #374151;
    font-size: 13px; transition: background .15s;
}
.lich-year-bars > li > a:hover { background: #f9fafb; text-decoration: none; }
.lich-year-bars > li.is-current > a { background: #fff7ed; font-weight: 700; color: #9a3412; }
.lich-year-lbl { white-space: nowrap; }
.lich-year-bar { background: #f3f4f6; border-radius: 999px; height: 10px; overflow: hidden; }
.lich-year-bar > b { display: block; height: 100%; background: #16a34a; border-radius: 999px; }
.lich-year-bars > li.is-current .lich-year-bar > b { background: #f97316; }
.lich-year-num { text-align: right; color: #6b7280; white-space: nowrap; }
.lich-year-bars > li.is-current .lich-year-num { color: #9a3412; }
@media (max-width: 575px) {
    .lich-year-bars > li > a { grid-template-columns: 62px 1fr 58px; gap: 7px; font-size: 12.5px; }
}

/* Note cuối danh sách ngày - 1 câu nhắc nhẹ, chữ thường không nhồi bold, viền trái gold */
.lich-list-note {
    margin: 14px 0 0; padding: 10px 14px; border-radius: 10px;
    background: #fbf7ef; border-left: 3px solid var(--lich-gold);
    font-size: 13px; line-height: 1.6; color: #6b5b3e; font-weight: 400;
    display: flex; gap: 9px; align-items: flex-start;
}
.lich-list-note i { color: var(--lich-gold); margin-top: 3px; flex-shrink: 0; }

/* Micro-content dưới danh sách - gợi ý xem tháng sau, tránh ngõ cụt khi tháng này ít/không có ngày Tốt */
.lich-bestday-more {
    margin-top: 14px; padding: 10px 14px; border-radius: 10px;
    background: #f9fafb; border: 1px dashed #e5e7eb;
    font-size: 13px; color: #6b7280;
    display: flex; align-items: center; gap: 8px;
}
.lich-bestday-more i { color: #9ca3af; flex-shrink: 0; }
.lich-bestday-more a { color: var(--lich-red); font-weight: 700; text-decoration: none; }
.lich-bestday-more a:hover { text-decoration: underline; }
.lich-bestday-more a i { color: inherit; margin-left: 2px; }
.lich-bestday-more.is-empty {
    background: #fff7ed; border: 1px solid #fed7aa; color: #9a3412;
}
.lich-bestday-more.is-empty i:first-child { color: #f97316; }
.lich-bestday {
    display: grid; grid-template-columns: 72px 1fr; gap: 18px;
    padding: 20px 24px; border-radius: 14px;
    border: 1px solid #eef0f2; border-left: 3px solid #d1d5db;
    background: #fff; color: var(--lich-ink);
    align-items: start;
}
.lich-bestday.is-good { border-left-color: var(--lich-good); }
.lich-bestday.is-bad  { border-left-color: var(--lich-bad); }
.lich-bestday.is-mid  { border-left-color: var(--lich-gold); }
.lich-bestday.is-mid { border-left-color: var(--lich-gold); }

/* Date — cột ngày thanh thoát, không viền, nền tint rất nhạt */
.lich-bestday-date {
    display: flex; flex-direction: column; align-items: center;
    text-align: center; padding: 10px 4px;
    border-radius: 10px; background: #f8fafc; border: 0;
    position: sticky; top: 12px;
}
.lich-bestday.is-good .lich-bestday-date { background: #f0fdf4; }
.lich-bestday.is-bad  .lich-bestday-date { background: #faf5ff; }
.lich-bestday.is-mid  .lich-bestday-date { background: #fffbeb; }
.lich-bestday.is-mid .lich-bestday-date { background: #fffbeb; }
.lich-bestday-day {
    font-family: 'Playfair Display', serif; font-weight: 800;
    font-size: 30px; line-height: 1; color: var(--lich-red);
}
.lich-bestday.is-good .lich-bestday-day { color: var(--lich-good); }
.lich-bestday.is-bad  .lich-bestday-day { color: var(--lich-bad); }
.lich-bestday.is-mid  .lich-bestday-day { color: #b45309; }
.lich-bestday.is-mid .lich-bestday-day { color: var(--lich-gold); }
.lich-bestday-monthlbl { font-size: 10px; color: var(--lich-gray); text-transform: uppercase; font-weight: 700; letter-spacing: .04em; }
.lich-bestday-am { font-size: 11px; color: var(--lich-gray); font-weight: 500; margin-top: 5px; }

.lich-bestday-body { min-width: 0; display: flex; flex-direction: column; padding: 6px; }
/* Head — thứ + badge, gạch ngăn mảnh */
.lich-bestday-head {
    display: flex; flex-wrap: wrap; align-items: center; gap: 10px;
    margin-bottom: 10px; padding-bottom: 10px;
    border-bottom: 1px solid #f3f4f6;
}
.lich-bestday-weekday { font-weight: 700; font-size: 15px; color: var(--lich-ink); }

/* Badge — pill đặc màu, không chấm trang trí (đã có số điểm làm điểm nhấn rồi) */
.lich-bestday-head .lich-tag {
    font-size: 12.5px; font-weight: 600; color: #fff;
    text-transform: none; letter-spacing: 0; line-height: 1.3;
    padding: 4px 12px; border-radius: 999px;
    display: inline-flex; align-items: center; gap: 6px;
}

/* Meta + giờ — dòng sạch, không box, nhãn mờ */
.lich-bestday-meta {
    display: flex; flex-wrap: wrap; gap: 4px 16px;
    font-size: 12.5px; color: #6b7280; margin-bottom: 6px;
}
.lich-bestday-meta strong { color: #374151; font-weight: 600; }
.lich-bestday-hours {
    font-size: 12.5px; color: #6b7280;
    display: flex; align-items: baseline; gap: 7px; line-height: 1.6;
    background: transparent; border: 0; padding: 0;
}
.lich-bestday-hours i { color: var(--lich-good); flex-shrink: 0; }
.lich-bestday-hours strong { color: var(--lich-good); font-weight: 700; }

/* Màu nền tag theo mức điểm - tốt xanh / xấu đỏ / trung bình cam nhạt.
   Scope riêng .lich-bestday-head để không đụng .lich-tag dùng chung ở lich-tuan/tu-vi/trang chủ. */
.lich-bestday-head .lich-tag b { font-weight: 800; }
.lich-bestday-head .lich-tag.is-good { background: #16a34a; }
.lich-bestday-head .lich-tag.is-mid  { background: #f97316; }
.lich-bestday-head .lich-tag.is-bad  { background: #dc2626; }

/* Lục Diệu (Đại An/Tốc Hỷ.../Xích Khẩu...) tự có tốt/xấu riêng, khác tone theo việc -
   tô màu đúng bản chất của chính Lục Diệu đó, không lệ thuộc điểm chấm việc. */
.lich-lucdieu-val { font-weight: 700; }
.lich-lucdieu-val.is-ngay-tot { color: var(--lich-good); }
.lich-lucdieu-val.is-ngay-xau { color: #dc2626; }

/* Câu luận giải nhân-quả đầu thẻ ngày (R2c) - đứng trước danh sách bullet bổ trợ */
.lich-bestday-why {
    margin: 10px 0 0; padding: 0;
    font-size: 13.5px; line-height: 1.55; color: #374151; font-weight: 500;
}

/* Lời khuyên - đứng SAU luận giải, khác vai trò (trả lời "nên làm gì") nên khác hẳn hình thức:
   khối nền vàng nhạt bo góc, có icon, để không lẫn với câu luận giải phía trên. */
.lich-bestday-advice {
    margin: 8px 0 0; padding: 7px 12px; border-radius: 8px;
    background: #fefaf3; border: 1px solid #f3e8d3;
    font-size: 12.5px; line-height: 1.55; color: #92703a; font-weight: 400;
    display: flex; align-items: flex-start; gap: 7px;
}
.lich-bestday-advice i { color: #c99a4f; margin-top: 2px; flex-shrink: 0; }

/* Chi tiết cách chấm - ẨN mặc định, click "Xem thêm" mới mở (native <details>) */
.lich-bestday-details { margin-top: 10px; }
.lich-bestday-details > summary {
    list-style: none; cursor: pointer; user-select: none;
    font-size: 12.5px; font-weight: 400; color: var(--lich-red);
    display: flex; align-items: center; gap: 6px;
}
.lich-bestday-details > summary::-webkit-details-marker { display: none; }
.lich-bestday-details > summary .chev { font-size: 10px; transition: transform .2s; }
.lich-bestday-details[open] > summary .chev { transform: rotate(180deg); }
.lich-bestday-details > .lich-bestday-verdicts { margin-top: 10px; }

/* Verdict — dòng sạch, marker ✓ hợp / ✕ kỵ / ⚠ cảnh báo */
.lich-bestday-verdicts {
    margin-top: 12px; padding: 0; border: 0; background: transparent;
    font-size: 13px; color: #374151; line-height: 1.55;
    display: flex; flex-direction: column; gap: 6px;
    list-style: none;
}
.lich-bestday-verdicts > li {
    position: relative; padding-left: 24px;
}
.lich-bestday-verdicts > li::before {
    position: absolute; left: 2px; top: 0;
    font-weight: 700; font-size: 13px; line-height: 1.55;
}
.lich-bestday-verdicts > li.is-hop::before { content: '\2713'; color: var(--lich-good); }
.lich-bestday-verdicts > li.is-ky::before  { content: '\2715'; color: #dc2626; }
.lich-bestday-verdicts > li.is-canhbao { color: #b45309; }
.lich-bestday-verdicts > li.is-canhbao::before { content: '\26A0'; color: #d97706; }
.lich-bestday-verdicts > li.is-tot::before { content: '\2713'; color: var(--lich-good); }
.lich-bestday-verdicts > li.is-xau::before { content: '\2715'; color: #dc2626; }
.lich-bestday-verdicts > li.is-trung::before { content: '\2022'; color: #9ca3af; }
.lich-bestday-verdicts,
.lich-bestday-verdicts * {
    text-decoration: none !important;
}
.lich-bestday-verdicts a { color: var(--lich-red); font-weight: 600; }
.lich-bestday-verdicts a:hover { text-decoration: underline !important; }

/* Detail CTA — link thanh lịch, mũi tên trượt khi hover */
.lich-bestday-detail-btn {
    display: inline-flex; align-items: center; gap: 6px;
    align-self: flex-end; margin-top: 14px; padding: 0;
    background: transparent; color: var(--lich-red) !important;
    border: 0; font-size: 13px; font-weight: 600;
    text-decoration: none; text-transform: none; letter-spacing: 0;
}
.lich-bestday-detail-btn i { font-size: 11px; transition: transform .18s ease; }
.lich-bestday-detail-btn:hover { text-decoration: none; }
.lich-bestday-detail-btn:hover i { transform: translateX(4px); }
.lich-bestday.is-good .lich-bestday-detail-btn { color: var(--lich-good) !important; }
.lich-bestday.is-bad  .lich-bestday-detail-btn { color: var(--lich-bad) !important; }
.lich-bestday.is-mid .lich-bestday-detail-btn { color: #b45309 !important; }

@media (max-width: 575px) {
    .lich-bestday { grid-template-columns: 56px 1fr; gap: 12px; padding: 14px 16px; }
    .lich-bestday-date { padding: 8px 3px; position: static; }
    .lich-bestday-day { font-size: 24px; }
    .lich-bestday-head { gap: 6px; }
}

/* ===== Khối điều khiển: chọn tháng + ngày sinh + lọc ===== */
.lich-controls { display: flex; flex-direction: column; gap: 16px; }
.lich-control-row { display: flex; flex-wrap: wrap; gap: 16px 20px; align-items: flex-end; }
.lich-field { display: flex; flex-direction: column; gap: 7px; margin: 0; }
.lich-field > label {
    font-size: 12px; font-weight: 700; color: #6b7280;
    text-transform: uppercase; letter-spacing: .03em;
    display: flex; align-items: center; gap: 6px;
}
.lich-field > label i { color: var(--lich-red); }
.lich-field-month { width: 168px; flex: 0 0 auto; }
.lich-field-month input[type=text] {
    width: 100%; height: 42px; padding: 0 12px;
    border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; font-family: inherit; color: var(--lich-ink); background: #fff;
}
.lich-field-month input[type=text]:focus { outline: none; border-color: var(--lich-red); }
.lich-field-birth { flex: 1 1 320px; min-width: 280px; }
.lich-birth-fields { display: flex; flex-wrap: wrap; gap: 8px; }
.lich-birth-fields select {
    height: 42px; padding: 0 10px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; color: var(--lich-ink); background: #fff; flex: 1 1 0; min-width: 74px;
}
.lich-birth-fields select:focus { outline: none; border-color: var(--lich-red); }
.lich-birth-btn {
    height: 42px; padding: 0 18px; border: 0; border-radius: 8px;
    background: var(--lich-red); color: #fff; font-size: 14px; font-weight: 600;
    cursor: pointer; transition: filter .15s ease; display: inline-flex; align-items: center; gap: 6px;
    flex: 0 0 auto;
}
.lich-birth-btn:hover { filter: brightness(.93); }
.lich-controls .lich-day-filter { margin: 0; }
.lich-birth-result {
    margin: 0; padding: 11px 14px; border-radius: 8px;
    background: #fffaeb; border: 1px solid #fde68a;
    font-size: 13px; color: #374151; line-height: 1.6;
}
.lich-birth-result strong { color: var(--lich-red); }
.lich-birth-result time { font-weight: 600; }
.lich-birth-star { color: var(--lich-gold); }

/* Filter chip "Hợp tuổi tôi" - tông vàng */
.lich-day-filter a.is-mine i { color: var(--lich-gold); }
.lich-day-filter a.is-mine:hover { border-color: var(--lich-gold); color: #b45309; }
.lich-day-filter a.is-mine.active { border-color: var(--lich-gold); background: var(--lich-gold); color: #fff; }
.lich-day-filter a.is-mine.active i { color: #fff; }

/* Badge "Hợp/Kỵ tuổi bạn" trong card ngày */
.lich-tag-mine {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 999px; line-height: 1.3;
}
.lich-tag-mine.is-hop { background: #fef3c7; color: #b45309; }
.lich-tag-mine.is-ky  { background: #fee2e2; color: #b91c1c; }

/* Highlight card hợp tuổi người xem + làm mờ card kỵ tuổi */
.lich-bestday.is-personal-hop {
    border-color: #fcd34d; border-left-color: var(--lich-gold);
    box-shadow: 0 0 0 1px #fcd34d; background: #fffdf5;
}
.lich-bestday.is-personal-ky { opacity: .68; }

/* Tag list tháng (12 tháng dạng pill) - chia sẻ với các page khác */
.lich-month-tags {
    list-style: none; padding: 0; margin: 12px 0 0;
    display: flex; flex-wrap: wrap; gap: 6px;
}
.lich-month-tags li { margin: 0; }
.lich-month-tags a {
    display: inline-block; padding: 8px 12px;
    background: #f9fafb; border: 1px solid #f3f4f6;
    border-radius: 999px; font-size: 12px;
    color: var(--lich-ink); text-decoration: none;
    transition: all .15s;
}
.lich-month-tags a:hover {
    background: var(--lich-red-light); border-color: var(--lich-red);
    color: var(--lich-red); text-decoration: none;
}
.lich-month-tags a.current,
.lich-month-tags li > a.current {
    background: var(--lich-red);
    background-image: none;
    border-color: var(--lich-red);
    color: #fff !important;
    box-shadow: none;
    text-shadow: none;
    font-weight: 600;
}
.lich-month-tags a.current:hover,
.lich-month-tags li > a.current:hover {
    background: var(--lich-red-dark);
    color: #fff;
}

/* ============================================================
 * 8. UTILITIES - width helpers + misc (thay cho inline style)
 * ============================================================ */
.lich-mt-18 { margin-top: 18px; }
.lich-ml-auto { margin-left: auto; }
.lich-mr-10 { margin-right: 10px; }
.lich-mb-30 { margin-bottom: 30px; }
.lich-hidden { display: none; }
.lich-link-inherit, .lich-link-inherit:hover, .lich-link-inherit:focus { color: inherit; }

/* Tool change-amduong + alert chỉnh ngày */
.tool-change-amduong { padding-top: 1px; }
.thong-bao-select-ngay-doi-boi-ngay-sinh { display: none; }

/* Figcaption overlay (con giáp images) */
.lich-figcaption-overlay {
    position: absolute; bottom: 0; left: 25px;
}

/* Chuyển đổi lịch âm dương tool */
.lich-chuyen-doi-row { margin: 20px 0; }
.lich-chuyen-doi-tool-row {
    align-items: center;
    align-content: space-between;
    justify-content: center;
    flex-wrap: wrap;
}

/* Predefined width % cho progress bars / week stats / fills */
.lich-w-0  { width: 0;   } .lich-w-5  { width: 5%;  } .lich-w-10 { width: 10%; } .lich-w-15 { width: 15%; }
.lich-w-20 { width: 20%; } .lich-w-25 { width: 25%; }
.lich-w-30 { width: 30%; } .lich-w-35 { width: 35%; }
.lich-w-40 { width: 40%; } .lich-w-45 { width: 45%; }
.lich-w-50 { width: 50%; } .lich-w-55 { width: 55%; }
.lich-w-60 { width: 60%; } .lich-w-65 { width: 65%; }
.lich-w-70 { width: 70%; } .lich-w-75 { width: 75%; }
.lich-w-80 { width: 80%; } .lich-w-85 { width: 85%; }
.lich-w-90 { width: 90%; } .lich-w-95 { width: 95%; }
.lich-w-100 { width: 100%; }

/* === Thay inline style bằng class — trang năm / tháng / ngày-mai / văn-khấn === */
.lich-phi-tinh-legend .dot.is-good { background: var(--lich-good); }
.lich-phi-tinh-legend .dot.is-bad  { background: var(--lich-bad); }
.lich-phi-tinh-legend .dot.is-red  { background: var(--lich-red); }
.lich-phi-tinh-legend .dot.is-gold { background: var(--lich-gold); }
.lich-heatmap-legend .scale-good span:nth-child(1) { background: #dcfce7; }
.lich-heatmap-legend .scale-good span:nth-child(2) { background: #86efac; }
.lich-heatmap-legend .scale-good span:nth-child(3) { background: var(--lich-good); }
.lich-heatmap-legend .scale-bad span:nth-child(1) { background: #ede9fe; }
.lich-heatmap-legend .scale-bad span:nth-child(2) { background: #c4b5fd; }
.lich-heatmap-legend .scale-bad span:nth-child(3) { background: var(--lich-bad); }
.lich-tk-han { color: #9ca3af; }
.lich-cta-card { background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); border-color: #fbbf24; }
.lich-cta-card .lich-card-pad { text-align: center; }
.lich-cta-h2 { margin-top: 0; color: #92400e; }
.lich-cta-p { font-size: 15px; color: #78350f; margin-bottom: 14px; }
.lich-cta-btn { background: var(--lich-red); font-size: 16px; padding: 14px 30px; }
.vk-tag-list { flex-wrap: wrap; }
.vk-item { width: 33%; }
.vk-occasion { font-size: 12px; display: block; }

/* Subtle hint text */
.lich-meta-hint { font-weight: 400; color: #9ca3af; }
.lich-han-text { color: #9ca3af; }
.lich-radar-note { font-size: 13px; color: var(--lich-gray); margin-top: 10px; }

/* Heatmap legend swatches */
.lich-heatmap-legend .scale-empty   { background: #f3f4f6; }
.lich-heatmap-legend .scale-good-1  { background: #dcfce7; }
.lich-heatmap-legend .scale-good-2  { background: #86efac; }
.lich-heatmap-legend .scale-good-3  { background: var(--lich-good); }
.lich-heatmap-legend .scale-bad-1   { background: #ede9fe; }
.lich-heatmap-legend .scale-bad-2   { background: #c4b5fd; }
.lich-heatmap-legend .scale-bad-3   { background: var(--lich-bad); }

/* Phi Tinh legend dots */
.lich-phi-tinh-legend .dot.is-good { background: var(--lich-good); }
.lich-phi-tinh-legend .dot.is-bad  { background: var(--lich-bad); }
.lich-phi-tinh-legend .dot.is-red  { background: var(--lich-red); }
.lich-phi-tinh-legend .dot.is-gold { background: var(--lich-gold); }

/* ============================================================
 * 9. KIẾN THỨC - Tiết Khí detail page
 * ============================================================ */

/* Hero tiết khí big card */
.lich-tk-hero {
    display: grid; grid-template-columns: 1fr; gap: 16px;
    padding: 24px 22px; align-items: center;
    background: linear-gradient(135deg, #fffbeb 0%, #fff7ed 50%, var(--lich-cream) 100%);
}
@media (min-width: 576px) { .lich-tk-hero { grid-template-columns: 120px 1fr; } }
.lich-tk-hero.season-xuan { background: linear-gradient(135deg, #f0fdf4, #ecfeff, #f0fdf4); }
.lich-tk-hero.season-ha   { background: linear-gradient(135deg, #fef2f2, #fffbeb, var(--lich-cream)); }
.lich-tk-hero.season-thu  { background: linear-gradient(135deg, #fffbeb, #fef3c7, #fef9c3); }
.lich-tk-hero.season-dong { background: linear-gradient(135deg, #eff6ff, #e0f2fe, #f0f9ff); }
.lich-tk-hero-icon {
    width: 100px; height: 100px; border-radius: 24px;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: 52px; color: #fff;
    background: linear-gradient(135deg, #fb923c, #ef4444);
    box-shadow: 0 6px 18px rgba(239, 68, 68, .25);
    margin: 0 auto;
}
.lich-tk-hero.season-xuan .lich-tk-hero-icon { background: linear-gradient(135deg, #4ade80, #16a34a); box-shadow: 0 6px 18px rgba(34, 197, 94, .25); }
.lich-tk-hero.season-thu  .lich-tk-hero-icon { background: linear-gradient(135deg, #fbbf24, #d97706); box-shadow: 0 6px 18px rgba(217, 119, 6, .25); }
.lich-tk-hero.season-dong .lich-tk-hero-icon { background: linear-gradient(135deg, #60a5fa, #2563eb); box-shadow: 0 6px 18px rgba(37, 99, 235, .25); }
.lich-tk-hero-body { text-align: center; }
@media (min-width: 576px) { .lich-tk-hero-body { text-align: left; } }
.lich-tk-hero-name {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 32px; color: #7c2d12; margin: 0 0 4px;
}
.lich-tk-hero.season-xuan .lich-tk-hero-name { color: #14532d; }
.lich-tk-hero.season-thu  .lich-tk-hero-name { color: #78350f; }
.lich-tk-hero.season-dong .lich-tk-hero-name { color: #1e3a8a; }
.lich-tk-hero-han {
    font-family: 'Times New Roman', serif; font-size: 16px;
    color: var(--lich-gray); letter-spacing: .15em;
}
.lich-tk-hero-meta {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
    margin-top: 14px;
}
.lich-tk-hero-meta > div {
    background: rgba(255, 255, 255, .7); border: 1px solid #fde68a;
    border-radius: 8px; padding: 8px 10px; font-size: 12px;
}
.lich-tk-hero-meta dt {
    font-size: 9px; font-weight: 600; text-transform: uppercase;
    color: var(--lich-gray); margin-bottom: 3px; letter-spacing: .04em;
}
.lich-tk-hero-meta dd { margin: 0; font-weight: 700; color: var(--lich-ink); font-size: 13px; }

/* Nhãn OPTION/loại song song trong thân bài (R6c) - không phải H, cần CSS riêng để phân biệt thị giác */
.lich-vk-version { border: 1px solid #e5e7eb; border-radius: 10px; padding: 14px 16px; margin: 14px 0; background: #fafaf9; }
.lich-vk-version-label {
    font-size: 13px; text-transform: uppercase; letter-spacing: .06em; font-weight: 700;
    color: var(--lich-red); margin: 0 0 8px;
}
.lich-vk-version .van-khan-content { margin-top: 0; }

/* Content body - styling cho HTML raw từ data layer */
.lich-tk-content { font-size: 15px; line-height: 1.85; color: #1f2937; }
.lich-tk-content h2 {
    font-family: 'Playfair Display', serif; font-weight: 900;
    font-size: 20px; color: var(--lich-red); margin: 24px 0 10px;
    padding-bottom: 8px; border-bottom: 2px solid rgba(200, 16, 46, .15);
}
.lich-tk-content h2:first-child { margin-top: 0; }
.lich-tk-content h3 {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 18px; color: var(--lich-ink); margin: 20px 0 8px;
}
.lich-tk-content p { margin: 0 0 14px; line-height: 1.8; }
.lich-tk-content ul, .lich-tk-content ol {
    margin: 0 0 14px; padding-left: 2px;
}
.lich-tk-content ul li, .lich-tk-content ol li {
    margin-bottom: 6px; line-height: 1.75;
}
.lich-tk-content strong { font-weight: 600; color: var(--lich-ink); }
.lich-tk-content blockquote {
    border-left: 4px solid var(--lich-gold);
    background: #fffaf5; padding: 14px 18px; margin: 16px 0;
    border-radius: 0 10px 10px 0; font-style: italic;
}

/* ============================================================================
   BẢNG TRONG NỘI DUNG BÀI — style bằng CSS, KHÔNG cần bọc wrapper ở view.
   Nhắm `table:not([class])` (bảng trần) + `.lich-table` (bảng sinh từ controller),
   nên KHÔNG đụng các bảng đã có style riêng: .lich-week-table, .lich-month-table,
   .lich-truc-table, .lich-detail-table, .table.table-bordered (bootstrap)...
   Không đặt min-width cho bảng trần: không có phần tử cuộn bao ngoài thì
   min-width sẽ đẩy bảng TRÀN khỏi card trên màn hẹp.
   ========================================================================= */
.lich-table-wrap { margin: 16px 0; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.lich-table-wrap > table { min-width: 420px; }

.lich-tk-content table:not([class]),
.lich-card-pad table:not([class]),
article table:not([class]),
table.lich-table {
    width: 100%; max-width: 100%;
    border-collapse: collapse; table-layout: auto;
    margin: 16px 0; font-size: 14px; background: #fff;
    border: 1px solid #e5e7eb; border-radius: 8px; overflow: hidden;
}
.lich-tk-content table:not([class]) caption,
.lich-card-pad table:not([class]) caption,
article table:not([class]) caption,
table.lich-table caption {
    caption-side: top; text-align: left; padding: 0 0 8px;
    font-size: 13px; color: var(--lich-gray);
}
.lich-tk-content table:not([class]) th, .lich-tk-content table:not([class]) td,
.lich-card-pad table:not([class]) th, .lich-card-pad table:not([class]) td,
article table:not([class]) th, article table:not([class]) td,
table.lich-table th, table.lich-table td {
    border: 1px solid #e5e7eb; padding: 10px 12px;
    text-align: left; vertical-align: top; line-height: 1.6;
    word-break: break-word; overflow-wrap: anywhere;
}
.lich-tk-content table:not([class]) thead th,
.lich-card-pad table:not([class]) thead th,
article table:not([class]) thead th,
table.lich-table thead th {
    background: #f9fafb; font-weight: 700; font-size: 13px;
    color: var(--lich-gray); text-transform: uppercase; letter-spacing: .04em;
    white-space: nowrap;
}
.lich-tk-content table:not([class]) tbody tr:nth-child(even),
.lich-card-pad table:not([class]) tbody tr:nth-child(even),
article table:not([class]) tbody tr:nth-child(even),
table.lich-table tbody tr:nth-child(even) { background: #fcfcfd; }
.lich-tk-content table:not([class]) tbody tr:hover,
.lich-card-pad table:not([class]) tbody tr:hover,
article table:not([class]) tbody tr:hover,
table.lich-table tbody tr:hover { background: #f9fafb; }

/* Màn hẹp: bảng nhiều cột tự cuộn ngang thay vì bị bóp méo hoặc tràn ra ngoài card */
@media (max-width: 640px) {
    .lich-tk-content table:not([class]),
    .lich-card-pad table:not([class]),
    article table:not([class]),
    table.lich-table {
        display: block; overflow-x: auto; -webkit-overflow-scrolling: touch;
        white-space: normal;
    }
    .lich-tk-content table:not([class]) thead th,
    .lich-card-pad table:not([class]) thead th,
    article table:not([class]) thead th,
    table.lich-table thead th { white-space: normal; }
}

/* 24 Tiết Khí grid (related list) */
.lich-tk-grid {
    list-style: none; padding: 0; margin: 14px 0;
    display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
@media (min-width: 576px) { .lich-tk-grid { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 768px) { .lich-tk-grid { grid-template-columns: repeat(4, 1fr); } }
.lich-tk-tile {
    border: 1px solid #f3f4f6; border-radius: 10px;
    background: #fff; overflow: hidden;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.lich-tk-tile:hover { transform: translateY(-2px); border-color: var(--lich-red); box-shadow: var(--shadow-lich); }
.lich-tk-tile a {
    display: block; padding: 12px 10px; text-align: center; text-decoration: none;
}
.lich-tk-tile-num {
    font-size: 10px; font-weight: 700; color: var(--lich-gray);
    text-transform: uppercase; letter-spacing: .05em;
}
.lich-tk-tile-name {
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 16px; color: var(--lich-red); margin: 4px 0 2px;
}
.lich-tk-tile-date { font-size: 11px; color: var(--lich-gray); }
.lich-tk-tile-season {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
    margin-top: 6px;
}
.lich-tk-tile-season.is-xuan { background: #dcfce7; color: #14532d; }
.lich-tk-tile-season.is-ha   { background: #fee2e2; color: #7f1d1d; }
.lich-tk-tile-season.is-thu  { background: #fef3c7; color: #78350f; }
.lich-tk-tile-season.is-dong { background: #dbeafe; color: #1e3a8a; }
.lich-tk-tile.is-current {
    background: var(--lich-red); border-color: var(--lich-red);
}
.lich-tk-tile.is-current .lich-tk-tile-num,
.lich-tk-tile.is-current .lich-tk-tile-name,
.lich-tk-tile.is-current .lich-tk-tile-date { color: #fff; }

/* Can Chi grid - 60 items dạng compact (5-6 cột) */
.lich-cc-grid {
    list-style: none; padding: 0; margin: 14px 0;
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px;
}
@media (min-width: 576px) { .lich-cc-grid { grid-template-columns: repeat(5, 1fr); } }
@media (min-width: 992px) { .lich-cc-grid { grid-template-columns: repeat(6, 1fr); } }
.lich-cc-tile {
    border: 1px solid #f3f4f6; border-radius: 8px; background: #fff;
    transition: transform .15s, border-color .15s, box-shadow .15s;
}
.lich-cc-tile:hover { transform: translateY(-2px); border-color: var(--lich-red); box-shadow: var(--shadow-lich); }
.lich-cc-tile a {
    display: block; padding: 10px 6px; text-align: center; text-decoration: none;
    font-family: 'Playfair Display', serif; font-weight: 700;
    font-size: 13px; color: var(--lich-ink);
}
.lich-cc-tile-num {
    display: block; font-size: 9px; font-weight: 600; color: var(--lich-gray);
    font-family: 'Be Vietnam Pro', sans-serif;
    margin-bottom: 3px; letter-spacing: .04em;
}
.lich-cc-tile a:hover { color: var(--lich-red); }
.lich-cc-tile.is-current { background: var(--lich-red); border-color: var(--lich-red); }
.lich-cc-tile.is-current a, .lich-cc-tile.is-current .lich-cc-tile-num { color: #fff; }

/* Sao tile - variants is-tot/is-xau */
.lich-sao-tile-type {
    display: inline-block; font-size: 9px; font-weight: 700;
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: .04em;
    margin-top: 6px;
}
.lich-sao-tile-type.is-tot { background: #dcfce7; color: #14532d; }
.lich-sao-tile-type.is-xau { background: #fee2e2; color: #7f1d1d; }
.lich-tk-tile.is-tot { border-color: #bbf7d0; }
.lich-tk-tile.is-tot .lich-tk-tile-name { color: var(--lich-good); }
.lich-tk-tile.is-xau { border-color: #fecaca; }
.lich-tk-tile.is-xau .lich-tk-tile-name { color: var(--lich-bad); }

/* ============================================================
 * 10. MỆNH NGŨ HÀNH - Nạp âm detail page (/menh-ngu-hanh/:slug/)
 * ============================================================ */

/* TL;DR "Trả lời nhanh" (GEO / AI Overview) */
.lich-tldr {
    background: #f0f9ff; border: 1px solid #bae6fd; border-left: 4px solid #0284c7;
    border-radius: 8px; padding: 14px 16px; font-size: 14px; line-height: 1.7; color: #0c4a6e;
    margin-top: 14px;
}
.lich-tldr-h {
    display: block; margin: 0 0 8px; font-size: 12px; color: #075985;
    text-transform: uppercase; letter-spacing: .04em; font-weight: 700;
}
.lich-tldr p { margin: 0 0 6px; }
.lich-tldr p:last-child { margin-bottom: 0; }
.lich-tldr strong { color: #082f49; }

/* Hero nạp âm - tô màu theo ngũ hành */
.lich-napam-hero {
    display: grid; grid-template-columns: 64px 1fr; gap: 14px; align-items: center;
    padding: 18px; border-radius: 12px; border: 1px solid #e5e7eb; background: #fafafa;
}
.lich-napam-hero-badge {
    width: 64px; height: 64px; border-radius: 50%; display: flex;
    align-items: center; justify-content: center; font-size: 30px; color: #fff;
}
.lich-napam-hero-name { margin: 0 0 4px; font-size: 18px; font-weight: 800; color: var(--lich-ink); }
.lich-napam-hero-sub { margin: 0; font-size: 13px; color: #6b7280; }
.lich-napam-hero.is-kim  { background: #f4f5f7; } .lich-napam-hero.is-kim  .lich-napam-hero-badge { background: #9ca3af; }
.lich-napam-hero.is-moc  { background: #f0fdf4; } .lich-napam-hero.is-moc  .lich-napam-hero-badge { background: #16a34a; }
.lich-napam-hero.is-thuy { background: #eff6ff; } .lich-napam-hero.is-thuy .lich-napam-hero-badge { background: #0284c7; }
.lich-napam-hero.is-hoa  { background: #fef2f2; } .lich-napam-hero.is-hoa  .lich-napam-hero-badge { background: #dc2626; }
.lich-napam-hero.is-tho  { background: #fffbeb; } .lich-napam-hero.is-tho  .lich-napam-hero-badge { background: #a16207; }

/* Bảng key-value tra cứu nhanh */
.lich-kv-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.lich-kv-table th, .lich-kv-table td {
    padding: 10px 12px; border: 1px solid #e5e7eb; text-align: left; vertical-align: top; line-height: 1.5;
}
.lich-kv-table th { width: 38%; background: #f9fafb; font-weight: 700; color: var(--lich-ink); }

/* Tương sinh / tương khắc */
.lich-rel-grid { display: grid; grid-template-columns: 1fr; gap: 10px; }
@media (min-width: 576px) { .lich-rel-grid { grid-template-columns: 1fr 1fr; } }
.lich-rel-cell {
    padding: 10px 12px; border-left: 3px solid #e5e7eb; background: #f9fafb;
    border-radius: 6px; font-size: 13px; line-height: 1.6;
}
.lich-rel-cell.is-sinh { border-left-color: #16a34a; background: #f0fdf4; color: #15803d; }
.lich-rel-cell.is-khac { border-left-color: #ef4444; background: #fef2f2; color: #b91c1c; }
.lich-rel-cell strong { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .03em; margin-bottom: 4px; opacity: .85; }
.lich-rel-cell ul { margin: 0; padding-left: 16px; }

/* Năm sinh - chips link sang trang sinh năm */
.lich-napam-canchi { margin: 0 0 14px; }
.lich-napam-canchi:last-child { margin-bottom: 0; }
.lich-year-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 0; padding: 0; list-style: none; }
.lich-year-chip a {
    display: inline-block; padding: 5px 12px; border: 1px solid #e5e7eb; border-radius: 999px;
    background: #fff; font-size: 13px; font-weight: 600; color: var(--lich-ink);
}
.lich-year-chip a:hover { background: var(--lich-red-light); color: var(--lich-red); text-decoration: none; }

/* ----- REDUCED MOTION ----- */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ═══ CỤM /cong-cu/ — viết lại 2026-07-31 sau phản hồi "màu tối, không hiện đại, bị AI" ═══
   Ba thứ đã bỏ vì là vân tay thiết kế máy-sinh:
     1. GRADIENT (panel, banner kết quả, ô giờ) - bỏ sạch, dùng nền phẳng.
     2. Pattern "hộp nền pastel + viền trái màu" lặp 3 lần (nhãn khối, H3, banner)
        - thay bằng phân cấp bằng CỠ CHỮ + KHOẢNG TRẮNG + gạch mảnh.
     3. Bảng màu Tailwind mặc định (#fef3c7, #dcfce7, #fee2e2...) lạc khỏi hệ màu site
        - nay dùng đúng biến --lich-* đã khai ở :root.
   Nguyên tắc: bề mặt trắng, đường kẻ mảnh trung tính, MỘT accent (đỏ thương hiệu)
   chỉ dùng cho thứ thực sự cần nhấn. Đáp án của công cụ được nhấn bằng CỠ CHỮ, không bằng hộp màu. */

/* ---- Khối công cụ: form + kết quả ---- */
.cc-tool-panel {
    margin: 4px 0 30px;
    border: 1px solid #e8e4dc;
    border-radius: 14px;
    background: #fff;
    overflow: hidden;
}
/* Nhãn khối: chữ nhỏ giãn ly, xám - KHÔNG hộp màu, KHÔNG viền trái, KHÔNG icon trang trí */
.cc-block-label {
    margin: 0;
    padding: 16px 20px 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: #9a938a;
    background: none;
    border: 0;
}
.cc-block-label .fa { display: none; }
.cc-block-label.is-result {
    margin-top: 4px;
    padding-top: 18px;
    border-top: 1px solid #f1ede6;
}
.cc-panel-body { padding: 10px 20px 20px; }
/* Đoạn kết đứng ngay sau khối FAQ nên phải có khoảng thở, không thì dính liền vào nhau. */
.lich-faq + .lich-disclaimer,
section + .lich-disclaimer { margin-top: 26px; }
.cc-panel-body > .cc-form { border: 0; padding: 0; background: none; }
/* Trang chia 3 section: nhãn nằm trong card nên cần đệm riêng */
.lich-card > .cc-block-label { padding: 16px 22px 0; }
.lich-card > .cc-block-label.is-result { margin-top: 0; }
/* ⚠️ Nhãn đặt TRONG thanh đỏ `lich-pattern-bar` thì màu xám #9a938a mất tương phản
   (chữ xám trên nền đỏ). Phải đảo sang chữ sáng. */
.lich-pattern-bar .cc-block-label {
    padding: 0;
    color: rgba(255, 255, 255, .92);
    letter-spacing: .08em;
}

/* ---- ĐÁP ÁN: nhấn bằng cỡ chữ, không bằng banner pastel ---- */
.cc-result-banner {
    margin: 0 0 22px;
    padding: 0;
    background: none;
    border: 0;
    border-radius: 0;
    font-size: 20px;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: -.01em;
    color: #4a4640;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.cc-result-banner.is-good { background: none; border: 0; }
/* Nhấn bằng ĐẬM + đậm màu chữ, KHÔNG tô đỏ: câu có 3 <strong> mà tô đỏ hết
   thì thành 3 mảng màu vụn, đọc rối hơn là nổi bật. */
.cc-result-banner strong { color: var(--lich-ink); font-weight: 600; }

/* ---- Bảng dữ kiện: hàng có gạch mảnh, bỏ lưới ô hộp ---- */
.cc-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 32px;
    margin: 0;
    border-top: 1px solid #f1ede6;
}
.cc-info-card {
    display: flex; align-items: baseline; justify-content: space-between; gap: 16px;
    padding: 11px 0;
    border: 0;
    border-bottom: 1px solid #f1ede6;
    background: none;
    border-radius: 0;
}
.cc-info-card dt {
    margin: 0; font-size: 13px; font-weight: 400; letter-spacing: 0;
    text-transform: none; color: #8b8377;
}
.cc-info-card dd { font-size: 15px; font-weight: 600; color: var(--lich-ink); text-align: right; }

/* ---- Khung giờ: bỏ ô pastel, dùng chấm màu + nền trắng ---- */
.cc-gio-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 0 24px; margin: 4px 0 0; }
.cc-gio-cell {
    display: flex; align-items: baseline; gap: 9px;
    padding: 10px 0; text-align: left;
    background: none; border: 0; border-bottom: 1px solid #f1ede6; border-radius: 0;
}
.cc-gio-cell::before {
    content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%;
    transform: translateY(-2px);
}
.cc-gio-cell.is-good { color: var(--lich-ink); }
.cc-gio-cell.is-good::before { background: var(--lich-good); }
.cc-gio-cell.is-bad { color: var(--lich-ink); }
.cc-gio-cell.is-bad::before { background: #b0aca4; }
.cc-gio-cell strong { display: inline; font-size: 15px; font-weight: 600; margin: 0; }
.cc-gio-cell small { font-size: 13px; color: #8b8377; opacity: 1; margin-left: auto; }

/* ---- 4 con số của công cụ đếm ngày ----
   ⚠️ grid-template-columns PHẢI khai ở đây. Thiếu nó thì grid về 1 cột và 4 con số
   xếp dọc chiếm cả màn hình (lỗi đã gặp 31/07, cùng loại với lưới tile hub). */
.cc-diff-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0 24px;
    border-top: 1px solid #f1ede6;
}
@media (max-width: 560px) { .cc-diff-grid { grid-template-columns: repeat(2, 1fr); } }
.cc-diff-card {
    padding: 14px 0; text-align: left;
    background: none; border: 0; border-bottom: 1px solid #f1ede6; border-radius: 0;
}
.cc-diff-card .num {
    font-size: 26px; font-weight: 600; color: var(--lich-ink);
    letter-spacing: -.015em; line-height: 1.25;
    /* w700 ở 28px trên nền sáng cho nét rất dày, nhìn "thô" - hạ 1 nấc + khử răng cưa */
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}
.cc-diff-card .lbl { font-size: 13px; color: #8b8377; margin-top: 2px; }

/* ---- H3 trong khối kết quả: phân cấp bằng cỡ chữ, không viền trái ---- */
.cc-sub-h {
    margin: 28px 0 10px;
    font-size: 15px; font-weight: 700; letter-spacing: -.01em;
    color: var(--lich-ink);
    padding: 0; border: 0;
}
.cc-sub-h:first-child { margin-top: 0; }
.cc-sub-h .fa { display: none; }

/* ---- Lưới công cụ ở hub: bỏ hover nhấc card, dùng đổi màu viền ----
   ⚠️ display:grid / flex / block PHẢI khai ở đây. Trước đây chúng nằm trong <style> của
   index.hbs; khi gỡ khối style đó mà quên chuyển sang, lưới tụt về block 1 cột và
   tên + mô tả dính chung một dòng. */
.cc-hub-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
    gap: 0 28px;
    margin-top: 4px;
}
.cc-hub-tile {
    position: relative;
    display: flex; align-items: flex-start;
    gap: 12px; padding: 16px 12px;
    border: 0; border-bottom: 1px solid #f1ede6;
    border-radius: 0; background: none;
    box-shadow: none;
    transition: background .15s;
}
.cc-hub-tile:hover { background: #faf8f4; border-color: #f1ede6; transform: none; box-shadow: none; }
.cc-hub-tile .cc-body { flex: 1 1 auto; min-width: 0; }
.cc-hub-tile .cc-emoji { flex: 0 0 auto; font-size: 16px; line-height: 1.5; opacity: .5; filter: grayscale(1); }
.cc-hub-tile .cc-name {
    display: block;
    font-size: 15px; font-weight: 600; color: var(--lich-ink);
    margin-bottom: 5px; line-height: 1.45;
}
.cc-hub-tile:hover .cc-name { color: var(--lich-red); }
.cc-hub-tile .cc-desc { display: block; font-size: 13px; color: #7d766c; line-height: 1.6; }
.cc-hub-tile .cc-stretch { text-decoration: none; }
.cc-hub-tile .cc-stretch::after { content: ""; position: absolute; inset: 0; }

/* ---- Form ---- */
.cc-form { background: none; border: 0; padding: 0; }
.cc-form label { font-size: 12px; color: #8b8377; letter-spacing: .01em; }
.cc-form select, .cc-form input {
    border: 1px solid #ded9d0; border-radius: 8px; padding: 10px 12px;
    font-size: 15px; color: var(--lich-ink); background: #fff;
}
.cc-form select { padding-right: 34px; }
.cc-form select:focus, .cc-form input:focus {
    outline: 0; border-color: var(--lich-red); box-shadow: 0 0 0 3px rgba(200, 16, 46, .08);
}
/* Canh GIỮA như bản gốc. Đợt sửa UX 31/07 tôi đổi sang flex-start, user không duyệt đổi này. */
.cc-form-actions { justify-content: center; margin-top: 18px; }
/* Nút phải ĂN KHỚP với ô select ngay trên nó: cùng cỡ chữ, cùng bo góc, cùng chiều cao.
   Trước đây view đè `padding: 11px 30px` lên `.lich-btn` (vốn 10px 16px / 13px) nên thành
   mảng đỏ rất rộng mà chữ bé 13px, lệch hẳn với select 15px / bo 8px. */
.cc-form-actions .lich-btn {
    width: auto; flex: 0 0 auto;
    padding: 10px 22px;
    font-size: 15px; font-weight: 600;
    border-radius: 8px;
    line-height: 1.45;
    -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
}

/* Bảng tra tuổi mụ (/cong-cu/tinh-tuoi-am-lich/, K17 - 2026-07-31).
   Bảng dài ~77 dòng nên cần đầu bảng dính và dòng đang chọn nổi rõ. */
.cc-age-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.cc-age-table thead th {
    position: sticky; top: 0; z-index: 1;
    background: #faf8f4; color: #6b6459;
    font-size: 12px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
    text-align: left; padding: 10px 12px; border-bottom: 1px solid #e8e4dc;
}
.cc-age-table td, .cc-age-table tbody th {
    padding: 9px 12px; border-bottom: 1px solid #f1ede6; text-align: left; font-weight: 400;
}
.cc-age-table tbody th { font-weight: 600; color: var(--lich-ink); }
.cc-age-table tbody tr:hover { background: #faf8f4; }
.cc-age-table tr.is-chon { background: #fff8e6; }
.cc-age-table tr.is-chon:hover { background: #fff3d6; }
.cc-age-table tr.is-chon th, .cc-age-table tr.is-chon td { color: var(--lich-ink); }
/* ⚠️ KHÔNG đặt max-height lên .lich-overflow-x - class đó dùng chung 7 view của cụm khác,
   sẽ cắt mọi bảng thành khung cuộn. Dùng class phụ đặt thẳng ở view, không dùng :has()
   (đã thử, không ăn trên Chromium của puppeteer -> không đáng tin cho mọi trình duyệt). */
.cc-age-scroll { max-height: 560px; overflow-y: auto; }

/* =========================================================================
   TRANG LỊCH TUẦN /lich-tuan/  (chuyển từ khối <style> trong lich-tuan-view.hbs
   ngày 2026-08-01, việc T11). CSS trong view không đi qua cơ chế bump
   rankVersion (B9) nên không kiểm soát được cache 30 ngày.
   Đã BỎ khi chuyển: .lich-tuan-headline (+3 biến thể tone) và
   .lich-tuan-summary-text - hai khối đó đã gỡ khỏi view ở đợt chống lặp,
   giữ lại là CSS chết (html-ky-thuat muc 7).
   ========================================================================= */
/* === 1. Tổng quan === */
.lich-tuan-intro { margin: 0 0 14px; font-size: 15.5px; line-height: 1.75; color: #374151; }
.lich-tuan-intro strong { color: #1f2937; }

.lich-tuan-quickstat { display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr)); gap: 8px; margin: 0 0 14px; }
.lich-tuan-quickstat > div { background: #fff; border: 1px solid #f3f4f6; border-radius: 8px; padding: 8px 10px; text-align: center; }
.lich-tuan-quickstat dt { font-size: 12px; color: var(--lich-gray); margin: 0 0 2px; }
.lich-tuan-quickstat dd { margin: 0; font-size: 14px; color: #1f2937; }
.lich-tuan-quickstat strong { font-size: 18px; color: var(--lich-red); }

.lich-tuan-note { margin: 10px 0 0; font-size: 14.5px; line-height: 1.7; color: #4b5563; }
.lich-tuan-note strong { color: #1f2937; }

.lich-tuan-h3 { margin: 16px 0 0; font-size: 16px; font-weight: 600; color: #1f2937; }

/* === 2. Ngày nổi bật === */
.lich-tuan-noibat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; }
.lich-tuan-noibat-lead { margin: 0 0 8px; font-size: 14px; color: var(--lich-gray); }
.lich-tuan-noibat-lead.is-good strong { color: #166534; }
.lich-tuan-noibat-lead.is-bad  strong { color: #991b1b; }

.lich-tuan-answer-lead {
  margin: 0 0 12px; font-size: 14.5px; line-height: 1.65; color: #4b5563;
  padding: 6px 0; border-bottom: 1px dashed #e5e7eb;
}
.lich-tuan-answer-lead strong { color: #1f2937; }

.lich-tuan-highlight-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.lich-tuan-highlight-item { border: 1px solid #f3f4f6; border-radius: 8px; background: #fff; }
.lich-tuan-highlight-item.is-good { border-left: 3px solid var(--lich-good); }
.lich-tuan-highlight-item.is-bad  { border-left: 3px solid var(--lich-red); }
.lich-tuan-highlight-link { display: flex; align-items: center; gap: 12px; padding: 10px 14px; text-decoration: none; color: #1f2937; }
.lich-tuan-highlight-link:hover { background: #f9fafb; }
.lich-tuan-highlight-rank { font-weight: 700; font-size: 16px; color: var(--lich-red); min-width: 32px; }
.lich-tuan-highlight-body { flex: 1; display: flex; flex-direction: column; }
.lich-tuan-highlight-meta { font-size: 13px; color: var(--lich-gray); margin-top: 2px; }

/* === 4. Strip số tuần === */
.lich-tuan-context-strip {
  list-style: none; margin: 0 0 12px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 8px;
}
.lich-tuan-context-strip li { background: #f9fafb; border-radius: 8px; padding: 8px 12px; font-size: 14px; }
.lich-tuan-context-label { display: block; font-size: 12px; color: var(--lich-gray); margin-bottom: 2px; }
.lich-tuan-context-strip strong { color: #1f2937; }

/* === 5. Khối lời khuyên === */
.lich-tuan-advice-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.lich-tuan-advice-item { border: 1px solid #f3f4f6; border-left-width: 3px; border-radius: 8px; padding: 10px 14px; background: #fff; }
.lich-tuan-advice-item.is-good { border-left-color: var(--lich-good); }
.lich-tuan-advice-item.is-bad  { border-left-color: var(--lich-red); }
.lich-tuan-advice-item.is-mid  { border-left-color: var(--lich-gold); }
.lich-tuan-advice-label { margin: 0 0 4px; font-size: 14px; color: #1f2937; }
.lich-tuan-advice-text  { margin: 0; font-size: 14.5px; line-height: 1.7; color: #374151; }

/* === 6. Ba cách xử lý === */
.lich-tuan-way-list { list-style: none; margin: 0 0 4px; padding: 0; display: flex; flex-direction: column; gap: 10px; counter-reset: none; }
.lich-tuan-way-item { border: 1px solid #f3f4f6; border-radius: 8px; padding: 10px 14px; background: #fdfdfc; }
.lich-tuan-way-title { margin: 0 0 4px; font-size: 14.5px; color: #1f2937; }
.lich-tuan-way-text  { margin: 0; font-size: 14.5px; line-height: 1.7; color: #374151; }

/* === Kết === */
.lich-tuan-ket { margin: 14px 0 0; font-size: 15px; line-height: 1.7; color: #374151; }

/* === Sidebar === */
.lich-side-current-link { margin: 8px 0 0; text-align: center; font-size: 13px; }
.lich-side-current-link a { color: var(--lich-red); text-decoration: none; }
.lich-side-current-link a:hover { text-decoration: underline; }

/* === Điều hướng tuần === */
.lich-tuan-table-foot {
  margin-top: 14px; padding-top: 14px; border-top: 1px solid #f3f4f6;
  display: flex; flex-direction: column; gap: 10px;
}
.lich-tuan-nav { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; align-items: center; }
.lich-tuan-nav-link {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 14px; border: 1px solid #e5e7eb; border-radius: 999px;
  color: #374151; text-decoration: none; font-size: 14px; font-weight: 500; background: #fff;
}
.lich-tuan-nav-link:hover { border-color: var(--lich-red); color: var(--lich-red); }
.lich-tuan-nav-link.is-today { border-color: var(--lich-red); color: var(--lich-red); }

/* =========================================================================
   POPUP Ô LỊCH (home / month / year) - thêm 2026-08-01.
   Ô lịch vẫn là <a href> thật; JS chỉ chặn click trái. Xem libjs/lich-day-popup.js.
   ========================================================================= */
.lich-daypop {
  position: absolute; z-index: 9999; width: 290px; max-width: calc(100vw - 16px);
  background: #fff; border: 1px solid #e5e7eb; border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17,24,39,.16); overflow: hidden;
}
.lich-daypop-head {
  padding: 10px 14px; font-weight: 600; font-size: 15px; color: #fff; background: var(--lich-red);
}
.lich-daypop-head.is-rat-tot     { background: var(--lich-good); }
.lich-daypop-head.is-tot         { background: var(--lich-good); }
.lich-daypop-head.is-binh-thuong { background: var(--lich-gold); }
.lich-daypop-head.is-xau,
.lich-daypop-head.is-rat-xau     { background: var(--lich-red); }

.lich-daypop-body { padding: 6px 14px 10px; }
.lich-daypop-row {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 7px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px;
}
.lich-daypop-row:last-child { border-bottom: 0; }
.lich-daypop-k { flex: 0 0 78px; color: var(--lich-gray); font-size: 13px; }
.lich-daypop-v { flex: 1; color: #1f2937; text-align: right; line-height: 1.5; }
.lich-daypop-v.is-event,
.lich-daypop-v.is-verdict {
  flex: 0 1 auto; padding: 2px 10px; border-radius: 999px; font-size: 13px; font-weight: 600;
  background: #f3f4f6; color: #374151;
}
.lich-daypop-v.is-event { background: rgba(254,226,226,.7); color: #b91c1c; }
.lich-daypop-v.is-verdict.is-rat-tot,
.lich-daypop-v.is-verdict.is-tot { background: rgba(220,252,231,.9); color: #166534; }
.lich-daypop-v.is-verdict.is-binh-thuong { background: rgba(255,248,236,.9); color: #92400e; }
.lich-daypop-v.is-verdict.is-xau,
.lich-daypop-v.is-verdict.is-rat-xau { background: rgba(254,226,226,.8); color: #991b1b; }

.lich-daypop-more {
  display: block; padding: 11px 14px; text-align: center; font-weight: 600; font-size: 14px;
  color: var(--lich-red); text-decoration: none; border-top: 1px solid #f3f4f6; background: #fcfcfd;
}
.lich-daypop-more:hover { background: #f9fafb; text-decoration: underline; }
.lich-daypop-x {
  position: absolute; top: 7px; right: 9px; width: 26px; height: 26px; line-height: 24px;
  border: 0; border-radius: 50%; background: rgba(255,255,255,.22); color: #fff;
  font-size: 19px; cursor: pointer; padding: 0;
}
.lich-daypop-x:hover { background: rgba(255,255,255,.38); }

/* Ô ngày trang năm: <a> phải phủ kín ô để giữ nguyên diện tích bấm như lúc còn là <td> trơ */
.lich-year-month-cal a.lich-year-cell {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  width: 100%; height: 100%; padding: 2px 0; color: inherit; text-decoration: none;
}
.lich-year-month-cal a.lich-year-cell:hover { background: rgba(0,0,0,.05); border-radius: 5px; }

/* Ô lưới lịch không còn là <a> (user chốt 01/08): giữ con trỏ + focus ring cho bàn phím */
.lich-thang-cell[role="button"], .lich-year-cell[role="button"] { cursor: pointer; }
.lich-thang-cell[role="button"]:focus-visible,
.lich-year-cell[role="button"]:focus-visible { outline: 2px solid var(--lich-red); outline-offset: 1px; }

/* =========================================================================
   HEADER GỌN - áp cho TOÀN DẢI DÙNG NÚT BURGER, tức <=1199px (user 02/08).
   Trước đây khối này chỉ chạy <=767px nên khi ngưỡng menu nâng lên 1200px,
   dải 768-1199 vẫn giữ thanh cao 85px trong khi đã là giao diện burger.
   Nay ngưỡng của khối bám đúng ngưỡng menu: hễ hiện nút burger thì header
   dùng cùng kích thước với mobile (thanh 52px, logo 44px, nút 34px).
   Gốc vấn đề chiều cao: .lichv2-header-bar .container khai height 64px nhưng
   #lichamduong cao 75px nên logo TRÀN ra, nav thực tế cao 85px. Phải thu logo
   trước rồi mới hạ chiều cao thanh - hạ mỗi .container thì logo vẫn đội lên.
   ⚠️ Nếu đổi ngưỡng menu (hiện 1200px) thì phải đổi cả con số ở đây cho khớp.
   ========================================================================= */
@media (max-width: 1199px) {
  /* #nav-maintop-top-nav (main.css) đang padding 10px mọi phía -> cộng thêm 20px chiều cao */
  .lichv2-header-bar > nav#nav-maintop-top-nav { padding: 2px 10px; }
  .lichv2-header-bar .container { height: 52px; gap: .5rem; }
  .lichv2-header-bar #lichamduong { height: 44px; }
  .lichv2-header-bar .navbar-toggle { width: 34px; height: 34px; }
  .lichv2-header-bar .navbar-toggle .icon-bar { width: 18px; }
  .lichv2-header-bar .lichv2-logo-circle { width: 34px; height: 34px; font-size: 19px; }
}

/* Nhãn tiết khí ở khối "hôm nay" trang chủ: căn giữa (user 02/08) */
.lich-tietkhi-badge { margin: 0 0 10px; text-align: center; }

/* =========================================================================
   BẢNG 7 NGÀY (/lich-tuan/) TRÊN MOBILE - dựng lại 02/08.
   Trước: 6 cột nhồi trong 360px -> "CAN CHI"/"ĐÁNH GIÁ" gãy 2 dòng, "Nhâm Dần 🐯"
   gãy 3 dòng, nhãn đánh giá gãy 2 dòng; mỗi dòng cao 92-101px, cả bảng 693px.
   Nay mỗi ngày là 1 khối 2 hàng: [thứ · ngày dương ........ nhãn] / [âm · can chi].
   Giữ <caption> và th[scope=row] để trình đọc màn hình vẫn có ngữ cảnh.
   ========================================================================= */
@media (max-width: 767px) {
  .lich-week-table, .lich-week-table tbody, .lich-week-table tr,
  .lich-week-table th, .lich-week-table td { display: block; }
  .lich-week-table thead { display: none; }
  /* Rule display:block ở trên ĐÈ MẤT .lich-hide-sm (cột Trực) -> ô đó hiện lại kèm
     câu gợi ý dài, dòng vọt từ 92px lên 172px. Phải khôi phục việc ẩn. */
  .lich-week-table .lich-hide-sm { display: none !important; }
  .lich-week-table { width: 100%; border-collapse: collapse; }

  .lich-week-table tbody tr {
    display: grid;
    grid-template-columns: auto auto 1fr auto;
    grid-template-areas:
      "thu duong .      danhgia"
      "am  canchi canchi danhgia";
    align-items: center;
    column-gap: 8px; row-gap: 1px;
    padding: 9px 10px;
    border-bottom: 1px solid #f1f2f4;
  }
  .lich-week-table tbody tr:last-child { border-bottom: 0; }
  .lich-week-table tbody tr.is-today { background: rgba(255, 248, 236, .7); border-radius: 8px; }

  .lich-week-table tbody th[scope="row"] { grid-area: thu; font-size: 14px; font-weight: 600; color: #1f2937; text-align: left; padding: 0; }
  .lich-week-table tbody td:nth-child(2) { grid-area: duong;  font-size: 14px; font-weight: 600; padding: 0; text-align: left; }
  .lich-week-table tbody td:nth-child(3) { grid-area: am;     font-size: 12.5px; color: var(--lich-gray); padding: 0; text-align: left; }
  .lich-week-table tbody td:nth-child(4) { grid-area: canchi; font-size: 12.5px; color: #4b5563; padding: 0; text-align: left; }
  .lich-week-table tbody td:nth-child(6) { grid-area: danhgia; padding: 0; text-align: right; }

  .lich-week-table tbody td:nth-child(6) .lich-tag { white-space: nowrap; font-size: 11.5px; padding: 3px 9px; }
  .lich-week-table tbody .lich-week-today-label { display: inline; }
  .lich-week-table tbody .lich-week-today-label small { margin-left: 4px; font-size: 11px; color: var(--lich-red); }
}

/* ============================================================
 * HỒ SƠ CÁ NHÂN (localStorage) - form + highlight ô lịch hợp/xung tuổi
 * Render bởi /libjs/lich-profile.js vào <div data-lich-profile>
 * ============================================================ */
.lich-profile-box {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin-top: 12px; padding: 11px 14px; border-radius: 8px;
    background: #fffaeb; border: 1px solid #fde68a;
    font-size: 13px; color: #374151;
}
.lich-profile-box:empty { display: none; }
.lich-profile-label { margin: 0; font-weight: 600; }
.lich-profile-input {
    height: 36px; width: 110px; padding: 0 10px;
    border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 14px; color: var(--lich-ink); background: #fff;
}
.lich-profile-input:focus { outline: none; border-color: var(--lich-red); }
.lich-profile-save, .lich-profile-del {
    height: 36px; padding: 0 14px; border: 0; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.lich-profile-save { background: var(--lich-red); color: #fff; }
.lich-profile-save:hover { filter: brightness(.93); }
.lich-profile-del { background: #fff; color: var(--lich-gray); border: 1px solid #d1d5db; }
.lich-profile-del:hover { border-color: var(--lich-red); color: var(--lich-red); }
.lich-profile-note { flex-basis: 100%; font-size: 12px; color: var(--lich-gray); }
.lich-profile-info { font-weight: 600; }

/* Ô lịch tháng: hợp tuổi viền xanh, xung khắc viền đỏ (không đè hệ màu verdict 5 mức) */
.lich-thang-cell.is-hop-tuoi {
    border-color: #22c55e; box-shadow: inset 0 0 0 1px #22c55e; background: #f0fdf4;
}
.lich-thang-cell.is-xung-tuoi {
    border-color: #ef4444; box-shadow: inset 0 0 0 1px #ef4444; background: #fef2f2;
}
.lich-thang-cell.is-today.is-hop-tuoi { box-shadow: 0 0 0 2px var(--lich-red), inset 0 0 0 1px #22c55e; }
.lich-thang-cell.is-today.is-xung-tuoi { box-shadow: 0 0 0 2px var(--lich-red), inset 0 0 0 1px #ef4444; }
/* Ô lịch năm (span nhỏ trong td): dùng inset shadow + bo góc */
.lich-year-cell.is-hop-tuoi { box-shadow: inset 0 0 0 2px #22c55e; border-radius: 6px; }
.lich-year-cell.is-xung-tuoi { box-shadow: inset 0 0 0 2px #ef4444; border-radius: 6px; }
.lich-profile-input.is-dm { width: 76px; }

/* ============================================================
 * AUDIO VĂN KHẤN - thanh player TTS (lich-van-khan-audio.js tự gắn
 * vào .lich-vk-version; không có SpeechSynthesis thì không render)
 * ============================================================ */
.lich-vka {
    display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
    margin: 8px 0 10px; padding: 8px 12px; border-radius: 8px;
    background: #fffaeb; border: 1px solid #fde68a;
}
.lich-vka-play, .lich-vka-stop {
    height: 34px; padding: 0 14px; border: 0; border-radius: 8px;
    font-size: 13px; font-weight: 600; cursor: pointer;
}
.lich-vka-play { background: var(--lich-red); color: #fff; }
.lich-vka-play:hover { filter: brightness(.93); }
.lich-vka-stop { background: #fff; color: var(--lich-gray); border: 1px solid #d1d5db; }
.lich-vka-stop:hover { border-color: var(--lich-red); color: var(--lich-red); }
.lich-vka-rate {
    height: 34px; padding: 0 8px; border: 1px solid #d1d5db; border-radius: 8px;
    font-size: 13px; color: var(--lich-ink); background: #fff;
}
.lich-vka-status { font-size: 12px; color: var(--lich-gray); }
.lich-vka-audio { display: block; width: 100%; max-width: 480px; margin: 8px 0 10px; }
.lich-vka-voice {
    display: inline-flex; align-items: center; height: 30px; padding: 0 12px;
    margin: 0 0 10px; border: 1px solid #fde68a; border-radius: 999px;
    background: #fffaeb; color: #b45309; font-size: 12px; font-weight: 600; cursor: pointer;
}
.lich-vka-voice:hover { border-color: var(--lich-gold); }