/* ==========================================================================
   XEMTHAY.COM — styles.css (Bootstrap 5)
   Tông màu hợp tuổi Giáp Tý 1984 – mệnh Hải Trung Kim:
   Kim (trắng, bạc, xám ánh kim) + Thổ tương sinh (vàng, nâu đất).
   Tránh đỏ/hồng (Hỏa khắc Kim).
   ========================================================================== */

:root {
    --xt-ink: #2b2118;          /* nâu đất đậm */
    --xt-ink-2: #4a3b2c;
    --xt-gold: #b8892b;         /* vàng kim */
    --xt-gold-2: #d9b45a;
    --xt-gold-soft: #f6ecd2;
    --xt-silver: #e7e3dc;       /* bạc */
    --xt-silver-2: #c9c4ba;
    --xt-bg: #faf8f3;           /* trắng ngà */
    --xt-card: #ffffff;
    --xt-text: #2f2a24;
    --xt-muted: #6e6558;
    --xt-bad: #7a7f8c;          /* xám bạc – hắc đạo */
    --xt-bad-soft: #eef0f3;
    --xt-radius: 16px;
    --xt-shadow: 0 1px 2px rgba(43, 33, 24, .06), 0 8px 24px rgba(43, 33, 24, .06);
    --bs-body-font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
    --bs-body-color: var(--xt-text);
    --bs-body-bg: var(--xt-bg);
    --bs-link-color: var(--xt-gold);
    --bs-link-color-rgb: 184, 137, 43;
    --bs-link-hover-color: var(--xt-ink);
    --bs-link-hover-color-rgb: 43, 33, 24;
    --bs-border-color: var(--xt-silver);
}

/* ---------- Base ---------- */
body { background: var(--xt-bg); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; transition: color .15s; }
h1, h2, h3, h4 { color: var(--xt-ink); font-weight: 700; line-height: 1.25; }
h1 { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.4rem); }
h2 { font-size: clamp(1.25rem, 1rem + 1vw, 1.6rem); }
h3 { font-size: 1.1rem; }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; z-index: 2000; top: 8px; left: 8px; padding: 8px 14px; background: var(--xt-gold); color: #fff; border-radius: 8px; }
.btn-gold { background: var(--xt-gold); border-color: var(--xt-gold); color: #fff; font-weight: 600; }
.btn-gold:hover, .btn-gold:focus { background: var(--xt-ink); border-color: var(--xt-ink); color: #fff; }
.form-control:focus { border-color: var(--xt-gold-2); box-shadow: 0 0 0 .2rem rgba(184, 137, 43, .2); }
.badge-secondary { background: var(--xt-silver); color: var(--xt-ink-2); font-weight: 500; }
.red { color: var(--xt-gold); font-weight: 600; }

/* ---------- Header ---------- */
.site-header { background: #2b2118; box-shadow: 0 2px 12px rgba(0, 0, 0, .15); }
.site-header .navbar { padding: .55rem 0; }
.brand { display: inline-flex; align-items: center; gap: .5rem; font-weight: 800; letter-spacing: .5px; color: #fff; font-size: 1.2rem; }
.brand:hover { color: var(--xt-gold-2); }
.brand small { font-weight: 500; color: var(--xt-gold-2); font-size: .75em; }
.brand-mark { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--xt-gold-2), var(--xt-gold)); color: var(--xt-ink); font-size: 1.2rem; }
.header-clock { align-items: center; gap: .35rem; padding: .3rem .7rem; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--xt-gold-2); font-variant-numeric: tabular-nums; font-size: .9rem; }
.navbar-toggler { border: 0; color: #fff; font-size: 1.7rem; padding: .1rem .4rem; }
.navbar-toggler:focus { box-shadow: 0 0 0 2px var(--xt-gold-2); }
.site-header .nav-link { color: rgba(255, 255, 255, .85); font-weight: 500; font-size: .95rem; padding: .5rem .8rem !important; border-radius: 10px; }
.site-header .nav-link i { color: var(--xt-gold-2); margin-right: .25rem; }
.site-header .nav-link:hover, .site-header .nav-link.active, .site-header .nav-link.show { color: #fff; background: rgba(255, 255, 255, .08); }
.dropdown-menu { border: 1px solid var(--xt-silver); border-radius: 12px; box-shadow: var(--xt-shadow); padding: .4rem; }
.dropdown-grid { display: none; grid-template-columns: repeat(2, minmax(150px, 1fr)); }
.dropdown-grid.show { display: grid; }
.dropdown-item { border-radius: 8px; font-size: .92rem; padding: .4rem .7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--xt-gold-soft); color: var(--xt-ink); }
@media (min-width: 992px) {
    .offcanvas-header { display: none; }
}
@media (max-width: 991.98px) {
    .offcanvas { background: var(--xt-ink); color: #fff; max-width: 320px; }
    .offcanvas .btn-close { filter: invert(1); }
    .offcanvas .dropdown-menu { background: rgba(255, 255, 255, .05); border: 0; box-shadow: none; }
    .offcanvas .dropdown-item { color: rgba(255, 255, 255, .85); }
    .offcanvas .dropdown-item:hover { background: rgba(255, 255, 255, .1); color: #fff; }
    .dropdown-grid { grid-template-columns: 1fr 1fr; }
}

/* ---------- Hero ---------- */
.hero { position: relative; overflow: hidden; padding: 1.25rem 0 5rem; color: #fff;
    background: radial-gradient(1200px 400px at 90% -10%, rgba(217, 180, 90, .35), transparent 60%),
                linear-gradient(135deg, #2b2118 0%, #4a3b2c 60%, #6b5536 100%); }
.hero::after { content: "☯"; position: absolute; right: -40px; bottom: -90px; font-size: 22rem; line-height: 1; color: rgba(255, 255, 255, .03); pointer-events: none; }
.hero-breadcrumb { margin-bottom: 1rem; font-size: .85rem; }
.hero-breadcrumb a { color: var(--xt-gold-2); }
.hero-breadcrumb .breadcrumb-item.active, .hero-breadcrumb .breadcrumb-item + .breadcrumb-item::before { color: rgba(255, 255, 255, .6); }
.hero-eyebrow { color: var(--xt-gold-2); font-weight: 600; text-transform: uppercase; letter-spacing: 1px; font-size: .85rem; margin-bottom: .5rem; }
.hero-title { color: #fff; margin-bottom: .75rem; }
.hero-title span { display: block; font-family: "Noto Serif", Georgia, serif; color: var(--xt-gold-2); font-size: .72em; margin-top: .35rem; }
.hero-lead { color: rgba(255, 255, 255, .85); font-size: 1.05rem; max-width: 640px; }
.hero-lead strong { color: #fff; }
.hero-tags { display: flex; flex-wrap: wrap; gap: .5rem; margin: 1rem 0; }
.chip { display: inline-flex; align-items: center; gap: .35rem; padding: .35rem .8rem; border-radius: 999px; font-size: .88rem; font-weight: 500; background: rgba(255, 255, 255, .1); color: #fff; border: 1px solid rgba(255, 255, 255, .15); }
.chip-good { background: var(--xt-gold); border-color: var(--xt-gold-2); }
.chip-bad { background: rgba(122, 127, 140, .5); }
.share-bar { display: flex; align-items: center; gap: .5rem; color: rgba(255, 255, 255, .7); font-size: .9rem; }
.share-btn { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: #fff; }
.share-btn:hover { background: var(--xt-gold); color: #fff; }

.date-card { height: 100%; border-radius: 22px; overflow: hidden; background: #fff; color: var(--xt-text); box-shadow: 0 20px 50px rgba(0, 0, 0, .3); display: flex; flex-direction: column; }
.date-card-top { background: linear-gradient(90deg, var(--xt-gold), var(--xt-gold-2)); color: var(--xt-ink); text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: .7rem; }
.date-card-body { display: flex; align-items: stretch; padding: 1.25rem .5rem; flex: 1; }
.date-col { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; }
.date-label { font-size: .8rem; text-transform: uppercase; letter-spacing: 1px; color: var(--xt-muted); font-weight: 600; }
.date-num { font-size: clamp(4rem, 3rem + 5vw, 6.5rem); font-weight: 800; line-height: 1; color: var(--xt-ink); font-variant-numeric: tabular-nums; }
.date-num.lunar { color: var(--xt-gold); font-family: "Noto Serif", Georgia, serif; }
.date-sub { font-size: .9rem; color: var(--xt-muted); }
.date-divider { width: 1px; background: var(--xt-silver); margin: 0 .5rem; }
.date-card-foot { display: flex; justify-content: space-between; align-items: center; padding: .7rem 1rem; background: var(--xt-bg); border-top: 1px dashed var(--xt-silver-2); font-size: .92rem; color: var(--xt-muted); font-variant-numeric: tabular-nums; }
.date-card-foot b { color: var(--xt-ink); }

/* ---------- Layout blocks ---------- */
.page-body { padding-bottom: 2.5rem; }
.block { background: var(--xt-card); border: 1px solid var(--xt-silver); border-radius: var(--xt-radius); box-shadow: var(--xt-shadow); padding: 1.25rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .block { padding: 1.5rem 1.75rem; } }
.block-head { margin-bottom: 1rem; }
.block-head h2 { position: relative; padding-left: .9rem; margin-bottom: .35rem; }
.block-head h2::before { content: ""; position: absolute; left: 0; top: .15em; bottom: .15em; width: 4px; border-radius: 4px; background: linear-gradient(var(--xt-gold-2), var(--xt-gold)); }
.block-head p { color: var(--xt-muted); margin: 0; font-size: .95rem; }
.side-block { padding: 1.1rem 1.25rem; }
.side-title { font-size: 1.05rem; margin-bottom: .9rem; display: flex; align-items: center; gap: .45rem; }
.side-title i { color: var(--xt-gold); }

/* ---------- Widgets ---------- */
.widget-grid { display: grid; gap: 1rem; grid-template-columns: 1fr; margin-top: -3.5rem; margin-bottom: 1.5rem; position: relative; z-index: 2; }
@media (min-width: 768px) { .widget-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1200px) { .widget-grid { grid-template-columns: 1.3fr 1fr 1fr; } }
.widget { background: var(--xt-card); border: 1px solid var(--xt-silver); border-radius: var(--xt-radius); box-shadow: var(--xt-shadow); padding: 1.1rem 1.25rem; min-height: 190px; }
.widget-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .75rem; }
.widget-title { font-size: 1rem; margin: 0; display: flex; align-items: center; gap: .45rem; }
.widget-title i { color: var(--xt-gold); font-size: 1.15rem; }
.btn-icon { border: 1px solid var(--xt-silver); background: #fff; width: 34px; height: 34px; border-radius: 50%; color: var(--xt-gold); display: grid; place-items: center; }
.btn-icon:hover { background: var(--xt-gold-soft); }

.weather-loading { color: var(--xt-muted); font-size: .92rem; }
.weather-now { display: flex; align-items: center; gap: 1rem; }
.weather-icon { font-size: 3.2rem; line-height: 1; }
.weather-temp { font-size: 2.6rem; font-weight: 800; color: var(--xt-ink); line-height: 1; }
.weather-temp sup { font-size: .45em; font-weight: 600; }
.weather-place { font-weight: 600; color: var(--xt-ink); }
.weather-desc { color: var(--xt-muted); font-size: .9rem; }
.weather-meta { display: flex; flex-wrap: wrap; gap: .4rem 1rem; margin: .75rem 0; font-size: .85rem; color: var(--xt-muted); }
.weather-meta i { color: var(--xt-gold); }
.weather-days { display: grid; grid-template-columns: repeat(4, 1fr); gap: .4rem; }
.weather-days div { background: var(--xt-bg); border-radius: 10px; text-align: center; padding: .4rem .2rem; font-size: .8rem; color: var(--xt-muted); }
.weather-days b { display: block; color: var(--xt-ink); font-size: .85rem; }
.weather-days span { font-size: 1.3rem; display: block; }
.weather-tip { margin: .7rem 0 0; font-size: .85rem; background: var(--xt-gold-soft); border-radius: 10px; padding: .45rem .7rem; color: var(--xt-ink-2); }

.countdown-caption { color: var(--xt-muted); font-size: .9rem; margin-bottom: .6rem; }
.countdown { display: grid; grid-template-columns: repeat(4, 1fr); gap: .5rem; }
.countdown div { background: linear-gradient(160deg, var(--xt-ink), var(--xt-ink-2)); color: #fff; border-radius: 12px; text-align: center; padding: .6rem .2rem; }
.countdown b { display: block; font-size: 1.6rem; font-weight: 800; color: var(--xt-gold-2); font-variant-numeric: tabular-nums; line-height: 1.1; }
.countdown span { font-size: .75rem; text-transform: uppercase; opacity: .8; }

.moon-wrap { display: flex; align-items: center; gap: 1rem; }
.moon { position: relative; flex: 0 0 84px; height: 84px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 35%, #fffaf0, #e9dfc8 60%, #cfc2a2); box-shadow: 0 0 30px rgba(217, 180, 90, .45); }
.moon-shadow { position: absolute; inset: 0; border-radius: 50%; background: #2b2118; transition: transform .6s; }
.moon-name { font-weight: 700; color: var(--xt-ink); margin: 0 0 .2rem; font-size: 1.05rem; }
.moon-desc { margin: 0; color: var(--xt-muted); font-size: .88rem; line-height: 1.5; }

/* ---------- Giờ hoàng đạo ---------- */
.hour-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
@media (min-width: 576px) { .hour-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 992px) { .hour-grid { grid-template-columns: repeat(6, 1fr); } }
.hour-item { border-radius: 12px; padding: .65rem .5rem; text-align: center; border: 1px solid var(--xt-silver); background: var(--xt-bad-soft); color: var(--xt-bad); position: relative; }
.hour-item.good { background: var(--xt-gold-soft); border-color: #ecd9a6; color: var(--xt-ink); }
.hour-name { display: block; font-weight: 700; font-size: 1.05rem; }
.hour-time { display: block; font-size: .8rem; font-variant-numeric: tabular-nums; }
.hour-tag { display: inline-block; margin-top: .25rem; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .5px; }
.hour-item.good .hour-tag { color: var(--xt-gold); }
.hour-item.now { outline: 2px solid var(--xt-gold); outline-offset: 2px; animation: xtPulse 1.8s ease-in-out infinite; }
.hour-item.now::after { content: "Hiện tại"; position: absolute; top: -9px; right: 6px; background: var(--xt-ink); color: var(--xt-gold-2); font-size: .62rem; padding: 1px 6px; border-radius: 6px; }
@keyframes xtPulse { 50% { box-shadow: 0 0 0 6px rgba(184, 137, 43, .15); } }

.hour-summary { display: grid; gap: .75rem; margin-bottom: 1rem; }
@media (min-width: 768px) { .hour-summary { grid-template-columns: 1fr 1fr; } }
.hour-summary .sum { border-radius: 12px; padding: .8rem 1rem; }
.hour-summary .sum h3 { font-size: .95rem; margin-bottom: .3rem; }
.hour-summary .sum p { margin: 0; font-size: .92rem; }
.hour-summary .good { background: var(--xt-gold-soft); }
.hour-summary .good i { color: var(--xt-gold); }
.hour-summary .bad { background: var(--xt-bad-soft); }

/* ---------- Accordion ---------- */
.accordion { --bs-accordion-border-color: var(--xt-silver); --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(184, 137, 43, .2); --bs-accordion-active-bg: var(--xt-gold-soft); --bs-accordion-active-color: var(--xt-ink); --bs-accordion-border-radius: 12px; --bs-accordion-inner-border-radius: 12px; }
.accordion-button { font-weight: 600; color: var(--xt-ink); gap: .5rem; font-size: 1rem; }
.accordion-button i { color: var(--xt-gold); }
.accordion-body p { margin-bottom: .4rem; }
.accordion-body p:empty { display: none; }

/* ---------- Sidebar ---------- */
.event-list, .history-list { list-style: none; padding: 0; margin: 0; }
.event-list li + li { border-top: 1px solid var(--xt-silver); }
.event-list a { display: flex; gap: .8rem; align-items: center; padding: .55rem 0; color: var(--xt-text); }
.event-list a:hover .event-name { color: var(--xt-gold); }
.event-date { flex: 0 0 50px; height: 50px; border-radius: 12px; background: var(--xt-ink); color: rgba(255, 255, 255, .75); display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .7rem; line-height: 1.1; }
.event-date b { font-size: 1.2rem; color: var(--xt-gold-2); }
.event-info { display: flex; flex-direction: column; min-width: 0; }
.event-name { font-weight: 600; font-size: .95rem; }
.event-info small { color: var(--xt-muted); }
.history-list li { position: relative; padding: 0 0 .7rem 1.1rem; font-size: .93rem; border-left: 2px solid var(--xt-gold-soft); margin-left: .3rem; }
.history-list li::before { content: ""; position: absolute; left: -6px; top: .45em; width: 10px; height: 10px; border-radius: 50%; background: var(--xt-gold); }
.age-result:not(:empty) { margin-top: .9rem; background: var(--xt-bg); border-radius: 12px; padding: .8rem 1rem; font-size: .93rem; }
.age-result dl { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; margin: 0; }
.age-result dt { color: var(--xt-muted); font-weight: 500; }
.age-result dd { margin: 0; font-weight: 600; color: var(--xt-ink); }
.age-result .swatches { display: flex; flex-wrap: wrap; gap: .3rem; }
.age-result .swatch { display: inline-flex; align-items: center; gap: .3rem; font-size: .82rem; font-weight: 500; }
.age-result .swatch i { width: 14px; height: 14px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, .15); display: inline-block; }

/* ---------- Article ---------- */
.article-block h2 { margin-bottom: 1rem; }
.article-block h3 { margin-top: 1.25rem; color: var(--xt-ink-2); }
.article-block p { text-align: justify; }

/* ---------- Lịch tháng (component x-show-month) ---------- */
.month-legend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: .85rem; color: var(--xt-muted); margin-bottom: .6rem; }
.month-legend span::before { content: "●"; margin-right: .3rem; }
.month-legend .l-good::before { color: var(--xt-gold); }
.month-legend .l-bad::before { color: var(--xt-bad); }
.vncal-header { display: flex; align-items: center; justify-content: space-between; gap: .5rem; background: var(--xt-ink); color: #fff; border-radius: 12px 12px 0 0; padding: .6rem .8rem; }
.vncal-header h3, .vncal-header h4 { color: #fff; margin: 0; font-size: 1rem; text-align: center; letter-spacing: .5px; }
.vncal-header-title, .vncal-header-titles { flex: 1; text-align: center; }
.vncal-header-titles a { color: #fff; }
.vncal-header-preview a, .vncal-header-next a { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, .1); color: var(--xt-gold-2); }
.vncal-header-preview a:hover, .vncal-header-next a:hover { background: var(--xt-gold); color: #fff; }
.vncal { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; border: 1px solid var(--xt-silver); border-top: 0; border-radius: 0 0 12px 12px; overflow: hidden; margin-bottom: 1rem; background: #fff; }
.vncal thead th { background: var(--xt-gold-soft); color: var(--xt-ink-2); font-size: .72rem; font-weight: 700; text-align: center; padding: .45rem .1rem; text-transform: uppercase; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vncal td { border-top: 1px solid var(--xt-silver); border-left: 1px solid var(--xt-silver); padding: 0; vertical-align: top; height: 68px; }
.vncal td:first-child { border-left: 0; }
.vncal td a { display: block; height: 100%; padding: .3rem .35rem; color: var(--xt-text); transition: background .15s; }
.vncal td a:hover { background: var(--xt-bg); }
.vncal td .dao { font-size: .6rem; line-height: 1; height: .7rem; }
.vncal td .dao.tot { color: var(--xt-gold); }
.vncal td .dao.xau { color: var(--xt-bad); }
.vncal td .duong { font-size: 1.25rem; font-weight: 700; line-height: 1.1; color: var(--xt-ink); }
.vncal td .duong.sun { color: #a8761f; }
.vncal td .am { font-size: .75rem; color: var(--xt-muted); text-align: right; line-height: 1.2; }
.vncal td .am span:first-child { font-weight: 600; }
.vncal td .am .hidden-xs { display: none; }
@media (min-width: 768px) {
    .vncal td { height: 84px; }
    .vncal td .duong { font-size: 1.5rem; }
    .vncal td .am .hidden-xs { display: block; font-size: .7rem; }
    .vncal thead th { font-size: .78rem; }
}
.vncal td.current a { background: linear-gradient(160deg, var(--xt-gold), var(--xt-gold-2)); }
.vncal td.current .duong, .vncal td.current .am, .vncal td.current .dao { color: #fff !important; }
.vncal td.hovered a { background: var(--xt-gold-soft); }
.vncal td.skip { background: repeating-linear-gradient(45deg, #fbfaf7, #fbfaf7 6px, #f5f3ee 6px, #f5f3ee 12px); }
.red-link { color: var(--xt-gold); font-weight: 600; }
.violet-link { color: var(--xt-bad); font-weight: 600; }

/* Bảng ngày (trang chi tiết ngày / đổi ngày) */
.vncal-days { width: 100%; border: 1px solid var(--xt-silver); border-radius: 0 0 12px 12px; border-collapse: separate; border-spacing: 0; overflow: hidden; margin-bottom: 1rem; background: #fff; }
.vncal-days th { background: var(--xt-gold-soft); color: var(--xt-ink-2); text-align: center; padding: .5rem; font-size: .85rem; width: 50%; }
.vncal-days td { text-align: center; padding: .6rem; border-top: 1px solid var(--xt-silver); vertical-align: middle; }
.vncal-days td + td { border-left: 1px solid var(--xt-silver); }
.vncal-days .duong, .vncal-days .am { font-size: clamp(3.5rem, 2.5rem + 4vw, 5.5rem); font-weight: 800; line-height: 1; color: var(--xt-ink); }
.vncal-days .am { color: var(--xt-gold); font-family: "Noto Serif", Georgia, serif; }
.vncal-days .chitiet p { margin: 0; font-size: .92rem; text-align: center; }
.vncal-days td.tot { background: var(--xt-ink); color: var(--xt-gold-2); font-weight: 700; text-transform: uppercase; font-size: .85rem; }
.vncal-detail .table { border-color: var(--xt-silver); background: #fff; }
.vncal-detail td { padding: .7rem; vertical-align: top; }
.vncal-detail td:first-child { width: 30%; background: var(--xt-bg); font-weight: 600; color: var(--xt-ink); }
.vncal-detail td p { margin-bottom: .3rem; }
@media (max-width: 575.98px) {
    .vncal-detail tr, .vncal-detail td { display: block; width: 100% !important; }
}

/* ---------- Trang con dùng chung (ngày, tháng, năm, đổi ngày, tử vi, bài viết) ---------- */
.main-body { background: var(--xt-card); border: 1px solid var(--xt-silver); border-radius: var(--xt-radius); box-shadow: var(--xt-shadow); padding: 1.25rem; margin-top: 1.5rem; margin-bottom: 1.5rem; }
@media (min-width: 768px) { .main-body { padding: 1.75rem 2rem; } }
.main-body h1 { margin: .25rem 0 .75rem; }
.main-body h2, .main-body h3 { margin: 1.25rem 0 .6rem; }
.main-featured:empty { display: none; }
.header-content { background: var(--xt-bg); border-radius: 12px; padding: 1rem .5rem; margin: .5rem 0 1rem; }
.header-content p { margin-bottom: .35rem; }
.sonar-date, .lunar-date { display: inline-block; padding: .1rem .6rem; border-radius: 8px; font-weight: 700; }
.sonar-date { background: var(--xt-ink); color: #fff; }
.lunar-date { background: var(--xt-gold); color: #fff; }
.main-text { text-align: justify; }
.breadcrumb { font-size: .88rem; }
.breadcrumb a { color: var(--xt-gold); }
.pagination { --bs-pagination-active-bg: var(--xt-gold); --bs-pagination-active-border-color: var(--xt-gold); --bs-pagination-color: var(--xt-ink); }
.ul-related { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: .5rem; }
.ul-related li { flex: 1 1 140px; }
.ul-related li a { display: block; text-align: center; padding: .45rem .6rem; border-radius: 10px; background: var(--xt-gold-soft); color: var(--xt-ink); font-size: .92rem; font-weight: 500; }
.ul-related li a:hover, .ul-related li a.active { background: var(--xt-gold); color: #fff; }

/* Tử vi */
.BoxDS { color: var(--xt-text); font-size: .95rem; margin-bottom: 1rem; }
.BoxDS_title { border-bottom: 2px solid var(--xt-gold-2); padding: .5rem 0; font-weight: 700; text-transform: uppercase; }
.BoxDS_title h1 { font-size: 1.2rem; margin: 0; }
.BoxDS_Table { width: 100%; margin-top: .5rem; }
.BoxDS_Table_col_1 { width: 100%; }
.BoxDS_Table_col_1 ul { margin: 0; padding: 0; list-style: none; }
.BoxDS_Table_col_1 ul li { line-height: 2; border-bottom: 1px solid var(--xt-silver); }
.BoxDS_Table_col_1 ul li:hover { background: var(--xt-bg); }
.BoxDS_Table_1, .BoxDS_Table_2, .BoxDS_Table_3, .BoxDS_Table_4 { text-align: left; padding: .35rem .4rem; line-height: 1.6; }
.BoxDS_Table_1 { width: 22%; font-weight: 700; }
.BoxDS_Table_3 { width: 15%; }
.BoxDS_Table_4 { width: 35%; }
.BoxTCDC_Table_1, .BoxTCDC_Table_2, .BoxTCDC_Table_3, .BoxTCDC_Table_4, .BoxTCDC_Table_5 { text-align: left; padding: .5rem .4rem; line-height: 1.4; }
.BoxTCDC_Table_1 { width: 15%; font-weight: 700; }
.BoxTCDC_Table_2 { width: 15%; }
.BoxTCDC_Table_3 { width: 12%; }
.BoxTCDC_Table_4 { width: 28%; }
.BoxTCDC_Table_5 { width: 30%; }
.BoxDS a, .BoxTL a { color: var(--xt-ink-2); }
.BoxDS a:hover, .BoxTL a:hover { color: var(--xt-gold); }
.BoxTC { text-align: center; margin-bottom: 1rem; }
.BoxTC_title { font-weight: 700; color: var(--xt-ink); padding: 1rem 0 .5rem; }
.BoxTC_title h1 { font-size: 1.3rem; }
.BoxTC_title p { font-size: .95rem; color: var(--xt-muted); font-weight: 400; text-align: justify; }
.BoxTL { margin-top: .75rem; padding: .75rem 0; border-top: 1px solid var(--xt-silver); text-align: center; }
.BoxTL p { text-align: justify; margin: 0; padding: 0 .5rem .4rem; }
.BoxTL .icon_12congiap { display: block; width: 120px; height: 120px; margin: 0 auto 15px; background: url(../images/12congiap/12congiap_icon.png) no-repeat 0 0; }
.BoxTL .icon_12congiap#suu { background-position: -120px 0; }
.BoxTL .icon_12congiap#dan { background-position: -240px 0; }
.BoxTL .icon_12congiap#mao { background-position: -360px 0; }
.BoxTL .icon_12congiap#thin { background-position: -480px 0; }
.BoxTL .icon_12congiap#ti { background-position: -600px 0; }
.BoxTL .icon_12congiap#ngo { background-position: -720px 0; }
.BoxTL .icon_12congiap#mui { background-position: -840px 0; }
.BoxTL .icon_12congiap#than { background-position: -960px 0; }
.BoxTL .icon_12congiap#dau { background-position: -1080px 0; }
.BoxTL .icon_12congiap#tuat { background-position: -1200px 0; }
.BoxTL .icon_12congiap#hoi { background-position: -1320px 0; }
@media (max-width: 575.98px) {
    .BoxDS_Table, .BoxDS_Table tbody, .BoxDS_Table tr { display: block; }
    .BoxDS_Table { overflow-x: auto; }
}

/* ---------- Affiliate ---------- */
.aff-block { background: var(--xt-card); border: 1px solid var(--xt-silver); border-radius: var(--xt-radius); box-shadow: var(--xt-shadow); padding: 1.1rem 1.25rem; margin-bottom: 1.5rem; }
.aff-head { display: flex; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: .8rem; }
.aff-title { font-size: 1.05rem; margin: 0; }
.aff-toggle { display: none; }
.aff-more-btn a { display: inline-block; padding: .3rem .9rem; border-radius: 999px; border: 1px solid var(--xt-gold); color: var(--xt-gold); font-size: .85rem; font-weight: 600; }
.aff-more-btn a:hover { background: var(--xt-gold); color: #fff; }
.aff-list { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(170px, 1fr); gap: .75rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: .4rem; }
.aff-card { scroll-snap-align: start; display: flex; flex-direction: column; border: 1px solid var(--xt-silver); border-radius: 12px; overflow: hidden; background: #fff; color: var(--xt-text); transition: transform .15s, box-shadow .15s; }
.aff-card:hover { transform: translateY(-3px); box-shadow: var(--xt-shadow); color: var(--xt-text); }
.aff-img { aspect-ratio: 1; background: var(--xt-bg); }
.aff-img img { width: 100%; height: 100%; object-fit: cover; }
.aff-body { padding: .6rem .7rem .75rem; display: flex; flex-direction: column; gap: .3rem; flex: 1; }
.aff-name { font-size: .85rem; font-weight: 500; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.aff-price .new { font-weight: 700; color: var(--xt-gold); }
.aff-price .old { font-size: .78rem; color: var(--xt-muted); text-decoration: line-through; margin-left: .3rem; }
.aff-meta { display: flex; justify-content: space-between; font-size: .75rem; color: var(--xt-muted); }
.aff-meta .badge { background: var(--xt-silver); color: var(--xt-ink-2); font-weight: 500; }
.aff-cta { margin-top: auto; text-align: center; font-size: .8rem; font-weight: 600; padding: .35rem; border-radius: 8px; background: var(--xt-gold-soft); color: var(--xt-ink); }

/* ---------- Footer ---------- */
.site-footer { background: var(--xt-ink); color: rgba(255, 255, 255, .75); padding: 2.5rem 0 1rem; font-size: .93rem; }
.site-footer a { color: rgba(255, 255, 255, .8); }
.site-footer a:hover { color: var(--xt-gold-2); }
.brand-footer { margin-bottom: .75rem; }
.footer-about { line-height: 1.7; }
.footer-title { color: var(--xt-gold-2); font-size: .9rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: .8rem; }
.footer-links { list-style: none; padding: 0; margin: 0 0 .75rem; }
.footer-links li { margin-bottom: .4rem; }
.footer-social a { display: inline-grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: rgba(255, 255, 255, .08); font-size: 1.05rem; }
.footer-social a:hover { background: var(--xt-gold); color: #fff; }
.footer-bottom { border-top: 1px solid rgba(255, 255, 255, .1); margin-top: 1.5rem; padding-top: 1rem; display: flex; flex-wrap: wrap; justify-content: space-between; gap: .5rem; font-size: .82rem; color: rgba(255, 255, 255, .55); }
.back-to-top { position: fixed; right: 16px; bottom: 16px; z-index: 1030; width: 44px; height: 44px; border-radius: 50%; border: 0; background: var(--xt-gold); color: #fff; box-shadow: var(--xt-shadow); opacity: 0; visibility: hidden; transition: opacity .2s; }
.back-to-top.show { opacity: 1; visibility: visible; }

/* ---------- Toast copy ---------- */
.xt-toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--xt-ink); color: #fff; padding: .55rem 1rem; border-radius: 10px; z-index: 2000; font-size: .9rem; box-shadow: var(--xt-shadow); }

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

/* ---------- Ngày lễ & sự kiện (trang năm / tháng) ---------- */
.holiday-section { margin-top: 2rem; }
.holiday-section > h2 { margin-bottom: 1rem; }
.holiday-tabs { gap: .5rem; flex-wrap: nowrap; overflow-x: auto; padding-bottom: .25rem; margin-bottom: 1.25rem; border: 0; }
.holiday-tabs .nav-link { white-space: nowrap; display: inline-flex; align-items: center; gap: .4rem; border: 1px solid var(--xt-silver); border-radius: 999px; background: #fff; color: var(--xt-ink-2); font-weight: 600; font-size: .92rem; padding: .45rem 1rem; }
.holiday-tabs .nav-link span { background: var(--xt-silver); color: var(--xt-ink-2); border-radius: 999px; font-size: .75rem; padding: 0 .5rem; }
.holiday-tabs .nav-link:hover { border-color: var(--xt-gold-2); }
.holiday-tabs .nav-link.active { background: var(--xt-ink); border-color: var(--xt-ink); color: #fff; }
.holiday-tabs .nav-link.active i { color: var(--xt-gold-2); }
.holiday-tabs .nav-link.active span { background: var(--xt-gold); color: #fff; }
.holiday-month { display: flex; align-items: center; gap: .5rem; font-size: .95rem; text-transform: uppercase; letter-spacing: .5px; color: var(--xt-ink-2); margin: 1.25rem 0 .6rem; }
.holiday-month::after { content: ""; flex: 1; height: 1px; background: var(--xt-silver); }
.holiday-month span { background: var(--xt-gold-soft); color: var(--xt-gold); border-radius: 999px; font-size: .72rem; padding: 0 .5rem; }
.holiday-grid { list-style: none; padding: 0; margin: 0 0 .5rem; display: grid; gap: .6rem; grid-template-columns: 1fr; }
@media (min-width: 576px) { .holiday-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 992px) { .holiday-grid { grid-template-columns: repeat(3, 1fr); } }
.holiday-grid li { display: flex; align-items: center; gap: .75rem; padding: .55rem .75rem; border: 1px solid var(--xt-silver); border-radius: 12px; background: #fff; transition: border-color .15s, transform .15s, box-shadow .15s; }
.holiday-grid li:hover { border-color: var(--xt-gold-2); transform: translateY(-2px); box-shadow: var(--xt-shadow); }
.holiday-date { flex: 0 0 52px; height: 52px; border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; font-size: .68rem; line-height: 1.1; text-transform: uppercase; background: var(--xt-ink); color: rgba(255, 255, 255, .75); }
.holiday-date b { font-size: 1.25rem; color: var(--xt-gold-2); }
.holiday-lunar .holiday-date { background: linear-gradient(160deg, var(--xt-gold), var(--xt-gold-2)); color: rgba(255, 255, 255, .9); }
.holiday-lunar .holiday-date b { color: #fff; }
.holiday-history .holiday-date { background: var(--xt-silver); color: var(--xt-muted); }
.holiday-history .holiday-date b { color: var(--xt-ink); }
.holiday-name { font-size: .93rem; font-weight: 500; line-height: 1.4; color: var(--xt-text); }
.holiday-name i { color: var(--xt-gold); margin-right: .15rem; }
.holiday-name small { display: block; color: var(--xt-muted); font-weight: 400; font-size: .78rem; }
.lead-intro { font-size: 1.05rem; color: var(--xt-text); background: var(--xt-gold-soft); border-left: 4px solid var(--xt-gold); border-radius: 0 12px 12px 0; padding: .8rem 1rem; }
.legal h2 { font-size: 1.2rem; margin-top: 1.5rem; }
.legal li { margin-bottom: .35rem; }


/* ---------- Đổi ngày dương sang âm ---------- */
.convert-card { background: #fff; border: 1px solid var(--xt-silver); border-radius: var(--xt-radius); padding: 1.25rem; margin-bottom: 1.25rem; box-shadow: var(--xt-shadow); }
@media (min-width: 768px) { .convert-card { padding: 1.5rem; } }
.convert-card h2 { font-size: 1.15rem; margin: 0 0 1rem; display: flex; align-items: center; gap: .5rem; }
.convert-card h2 i { color: var(--xt-gold); }
.convert-form .form-label { font-weight: 600; color: var(--xt-ink-2); font-size: .9rem; }
.convert-input { display: flex; flex-wrap: wrap; gap: .6rem; }
.convert-input input { flex: 1 1 200px; cursor: pointer; border-radius: 12px; border-color: var(--xt-silver-2); }
.convert-input input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .7; }
.convert-input .btn { border-radius: 12px; padding-left: 1.4rem; padding-right: 1.4rem; }
.convert-quick { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.convert-quick .btn { border: 1px solid var(--xt-silver); border-radius: 999px; background: var(--xt-bg); color: var(--xt-ink-2); padding: .3rem .9rem; }
.convert-quick .btn:hover { border-color: var(--xt-gold); color: var(--xt-gold); }
.convert-pair { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.1rem; }
.convert-pair > div { flex: 1; text-align: center; border-radius: 14px; padding: .9rem .5rem; background: var(--xt-ink); color: #fff; }
.convert-pair > div.lunar { background: linear-gradient(160deg, var(--xt-gold), var(--xt-gold-2)); }
.convert-pair span { display: block; font-size: .75rem; text-transform: uppercase; letter-spacing: 1px; opacity: .8; }
.convert-pair b { display: block; font-size: clamp(1.4rem, 1rem + 2vw, 1.9rem); font-weight: 800; line-height: 1.2; }
.convert-pair small { opacity: .85; }
.convert-pair > i { color: var(--xt-gold); font-size: 1.4rem; }
.convert-info { display: grid; grid-template-columns: max-content 1fr; gap: .6rem 1rem; margin: 0 0 1rem; }
.convert-info dt { color: var(--xt-muted); font-weight: 500; }
.convert-info dd { margin: 0; color: var(--xt-text); }
@media (max-width: 575.98px) { .convert-info { grid-template-columns: 1fr; gap: .15rem; } .convert-info dd { margin-bottom: .5rem; } }
.convert-more { font-weight: 600; }
@media (max-width: 575.98px) {
    .convert-input .btn { flex: 1 1 100%; }
    .convert-quick .btn { flex: 1; padding: .3rem .4rem; font-size: .8rem; }
    .convert-pair { gap: .4rem; }
    .convert-pair > div { min-width: 0; padding: .7rem .3rem; }
    .convert-pair b { font-size: 1.15rem; }
    .convert-pair > i { font-size: 1rem; }
}
/* Breadcrumb cũ (li không có class breadcrumb-item) */
.breadcrumb > li + li:not(.breadcrumb-item)::before { content: "/"; padding: 0 .5rem; color: var(--xt-silver-2); }
.convert-quick .btn { white-space: nowrap; }

/* Đồng hồ: bề rộng cố định để không làm xê dịch menu mỗi giây */
[data-live-clock] { display: inline-block; width: 8ch; text-align: center; font-family: ui-monospace, "SF Mono", Menlo, Consolas, "Roboto Mono", monospace; font-variant-numeric: tabular-nums; letter-spacing: 0; }
.header-clock { flex: none; white-space: nowrap; }


/* flatpickr – theo tông màu site (tiền tố .flatpickr-calendar để thắng CSS gốc tải sau) */
.convert-date { cursor: pointer; background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='%23b8892b' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 0a.5.5 0 0 1 .5.5V1h8V.5a.5.5 0 0 1 1 0V1h1a2 2 0 0 1 2 2v11a2 2 0 0 1-2 2H2a2 2 0 0 1-2-2V3a2 2 0 0 1 2-2h1V.5a.5.5 0 0 1 .5-.5zM1 4v10a1 1 0 0 0 1 1h12a1 1 0 0 0 1-1V4H1z'/%3E%3C/svg%3E") no-repeat right 1rem center; padding-right: 2.75rem; }
.convert-input .convert-date { flex: 1 1 200px; border-radius: 12px; border-color: var(--xt-silver-2); }
.flatpickr-calendar.open { font-family: var(--bs-body-font-family); border-radius: 14px; box-shadow: 0 12px 32px rgba(43, 33, 24, .2); border: 1px solid var(--xt-silver); overflow: hidden; }
.flatpickr-calendar.arrowTop::before, .flatpickr-calendar.arrowTop::after { display: none; }
.flatpickr-calendar .flatpickr-months { background: var(--xt-ink); padding: .35rem 0; }
.flatpickr-calendar .flatpickr-months .flatpickr-month { background: transparent; color: #fff; fill: #fff; height: 40px; }
.flatpickr-calendar .flatpickr-current-month { font-size: 1rem; font-weight: 600; padding-top: 8px; color: #fff; }
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months { background: transparent; color: #fff; font-weight: 600; appearance: none; -webkit-appearance: none; cursor: pointer; }
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months:hover,
.flatpickr-calendar .flatpickr-current-month .numInputWrapper:hover { background: rgba(255, 255, 255, .1); }
.flatpickr-calendar .flatpickr-current-month .flatpickr-monthDropdown-months option { background: #fff; color: var(--xt-text); }
.flatpickr-calendar .flatpickr-current-month input.cur-year { color: #fff; font-weight: 600; }
.flatpickr-calendar .numInputWrapper span.arrowUp::after { border-bottom-color: #fff; }
.flatpickr-calendar .numInputWrapper span.arrowDown::after { border-top-color: #fff; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month { color: var(--xt-gold-2); fill: var(--xt-gold-2); top: .35rem; padding: 12px 14px; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month svg { fill: var(--xt-gold-2); }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover svg { fill: #fff; }
.flatpickr-calendar .flatpickr-weekdays { background: var(--xt-gold-soft); height: 32px; }
.flatpickr-calendar span.flatpickr-weekday { background: transparent; color: var(--xt-ink-2); font-weight: 700; }
.flatpickr-calendar .flatpickr-day { border-radius: 10px; cursor: pointer; color: var(--xt-text); }
.flatpickr-calendar .flatpickr-day:hover, .flatpickr-calendar .flatpickr-day:focus { background: var(--xt-gold-soft); border-color: var(--xt-gold-soft); }
.flatpickr-calendar .flatpickr-day.today { border-color: var(--xt-gold); }
.flatpickr-calendar .flatpickr-day.today:hover { background: var(--xt-gold-soft); color: var(--xt-text); }
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover,
.flatpickr-calendar .flatpickr-day.selected:focus { background: var(--xt-gold); border-color: var(--xt-gold); color: #fff; }
.flatpickr-calendar .flatpickr-day.prevMonthDay, .flatpickr-calendar .flatpickr-day.nextMonthDay { color: var(--xt-silver-2); }

/* ==========================================================================
   Mobile: vùng chạm tối thiểu 44px, chữ tối thiểu 12px, chống tràn ngang
   ========================================================================== */
html, body { overflow-x: clip; }
.navbar-toggler { width: 44px; height: 44px; display: inline-grid; place-items: center; }
.hour-tag, .countdown span, .event-date, .vncal thead th, .holiday-date, .hour-item.now::after { font-size: .75rem; }
.BoxDS table { table-layout: fixed; word-break: break-word; }
@media (max-width: 767.98px) {
    .row.g-5 { --bs-gutter-x: 1.5rem; --bs-gutter-y: 1.5rem; }
}
@media (max-width: 575.98px) {
    .share-btn, .footer-social a, .btn-icon, .vncal-header-preview a, .vncal-header-next a { width: 44px; height: 44px; }
    .convert-quick .btn { min-height: 40px; }
    .offcanvas .nav-link { padding: .75rem 1rem !important; font-size: 1rem; }
    .offcanvas .dropdown-item { padding: .6rem .8rem; }
    .footer-links li { margin-bottom: .6rem; }
    .main-body { padding: 1rem; margin-top: 1rem; border-radius: 12px; }
    .BoxTCDC_Table_1, .BoxTCDC_Table_2, .BoxTCDC_Table_3, .BoxTCDC_Table_4, .BoxTCDC_Table_5 { font-size: .85rem; padding: .45rem .25rem; }
    .BoxTCDC_Table_5 { display: none; } /* cột giải thích dài: ẩn trên màn nhỏ, vẫn có ở trang chi tiết */
}
.brand-24 { display: inline-block; margin-left: .15rem; padding: .05rem .4rem; border-radius: 6px; background: linear-gradient(135deg, var(--xt-gold-2), var(--xt-gold)); color: var(--xt-ink); font-size: .8em; font-weight: 800; line-height: 1.3; vertical-align: .1em; }
.site-header .nav-link { white-space: nowrap; }
@media (min-width: 992px) and (max-width: 1399.98px) {
    .site-header .nav-link { font-size: .88rem; padding: .5rem .55rem !important; }
    .site-header .nav-link i { display: none; }
}
@media (max-width: 1199.98px) { .header-clock { display: none !important; } }