/* ===== Lịch Vạn Niên — thiết kế riêng ===== */
:root {
    --red: #b91c1c;
    --red-dark: #8f1414;
    --red-light: #fef2f2;
    --gold: #d4a017;
    --ink: #1f2937;
    --muted: #6b7280;
    --line: #e5e7eb;
    --bg: #f5f6f8;
    --white: #fff;
    --green: #15803d;
    --radius: 12px;
    --shadow: 0 2px 12px rgba(0, 0, 0, .07);
    --sunday: #dc2626;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--ink);
    background: var(--bg);
    line-height: 1.6;
    font-size: 16px;
}
a { color: var(--red); text-decoration: none; }
a:hover { text-decoration: underline; }
.container { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* ===== Header ===== */
.site-header {
    background: linear-gradient(135deg, var(--red), var(--red-dark));
    color: #fff;
    box-shadow: var(--shadow);
    position: sticky;
    top: 0;
    z-index: 50;
}
.header-inner { display: flex; align-items: center; gap: 16px; height: 60px; }
.logo { display: flex; align-items: center; gap: 8px; color: #fff; font-size: 20px; font-weight: 700; }
.logo:hover { text-decoration: none; }
.logo-icon { display: block; }
.logo-text strong { color: var(--gold); }
.main-nav { margin-left: auto; display: flex; gap: 2px; align-items: center; }
.main-nav > a, .nav-parent {
    color: #fff; padding: 8px 12px; border-radius: 8px; font-weight: 500; font-size: 15px; display: block; white-space: nowrap; cursor: pointer;
}
.main-nav > a:hover, .nav-parent:hover { background: rgba(255, 255, 255, .15); text-decoration: none; }
.nav-item { position: relative; }
.nav-parent .caret { font-style: normal; font-size: 11px; opacity: .85; }
.submenu { position: absolute; top: 100%; left: 0; min-width: 200px; background: #fff; border-radius: 10px;
    box-shadow: 0 10px 28px rgba(0, 0, 0, .2); padding: 6px; display: none; z-index: 60; }
.nav-item:hover .submenu { display: block; }
.submenu a { display: block; color: var(--ink); padding: 10px 12px; border-radius: 7px; font-size: 14px; white-space: nowrap; }
.submenu a:hover { background: var(--red-light); color: var(--red); text-decoration: none; }
.nav-toggle { display: none; background: none; border: 0; color: #fff; font-size: 24px; margin-left: auto; cursor: pointer; }

/* ===== Breadcrumb ===== */
.breadcrumb { background: var(--white); border-bottom: 1px solid var(--line); font-size: 14px; }
.breadcrumb .container { padding: 10px 16px; color: var(--muted); }
.breadcrumb .sep { margin: 0 8px; color: var(--line); }
.breadcrumb a { color: var(--muted); }

.main-content { padding: 24px 16px 40px; }

/* ===== Layout 2 cột ===== */
.layout-2col { display: grid; grid-template-columns: 1fr 360px; gap: 24px; align-items: start; }

/* ===== Bố cục trang chủ: nội dung + sidebar ===== */
.home-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.home-main { min-width: 0; }
.home-side { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 76px; }

.event-mini, .post-mini { list-style: none; }
.event-mini li, .post-mini li { border-bottom: 1px solid var(--line); }
.event-mini li:last-child, .post-mini li:last-child { border-bottom: 0; }
.event-mini a { display: flex; gap: 12px; padding: 10px 0; align-items: center; color: var(--ink); }
.event-mini a:hover { text-decoration: none; }
.em-date { flex: 0 0 46px; height: 46px; border-radius: 8px; background: var(--red-light); color: var(--red);
    display: flex; flex-direction: column; align-items: center; justify-content: center; line-height: 1.1; }
.em-day { font-size: 19px; font-weight: 800; }
.em-mon { font-size: 11px; }
.em-body { display: flex; flex-direction: column; min-width: 0; }
.em-name { font-size: 14px; font-weight: 600; }
.em-name em { color: var(--red); font-style: normal; font-weight: 400; font-size: 12px; }
.em-when { font-size: 12px; color: var(--muted); margin-top: 2px; }
.event-mini a:hover .em-name { color: var(--red); }

.post-mini a { display: block; padding: 9px 0; font-size: 14px; color: var(--ink); line-height: 1.45; }
.post-mini a:hover { color: var(--red); }
.side-more { display: inline-block; margin-top: 10px; font-size: 13px; font-weight: 600; color: var(--red); }

/* ===== Lịch âm hôm nay (hero) ===== */
.section-title {
    font-size: 20px; font-weight: 800; text-transform: uppercase; color: var(--ink);
    border-left: 5px solid var(--red); padding-left: 12px; margin-bottom: 14px; letter-spacing: .01em;
}
.today-block { margin-bottom: 26px; transition: opacity .15s; }
.today-block.is-loading { opacity: .45; pointer-events: none; }
.today-card { background: var(--white); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.tc-head { display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; }
.tc-head-col { padding: 13px; text-align: center; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; font-size: 15px; }
.tc-head-col:first-child { border-right: 1px solid rgba(255,255,255,.25); }
.tc-body { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.tc-side { text-align: center; padding: 22px 16px 26px; }
.tc-solar { border-right: 1px solid var(--line); }
.tc-weekday { color: var(--red); font-weight: 700; font-size: 17px; margin-bottom: 6px; }
.tc-bignum { font-size: 74px; font-weight: 800; line-height: 1; color: var(--red); }
.tc-lunar-num { color: var(--ink); }
.tc-sub { margin-top: 10px; color: var(--muted); font-size: 14px; line-height: 1.5; }
.tc-sub strong { color: var(--ink); }
.tc-arrow {
    position: absolute; top: 46%; transform: translateY(-50%); width: 40px; height: 40px; border-radius: 50%;
    display: grid; place-items: center; background: #fff; border: 1px solid var(--line); color: var(--muted);
    font-size: 24px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.1);
}
.tc-arrow:hover { background: var(--red); color: #fff; border-color: var(--red); text-decoration: none; }
.tc-prev { left: 10px; }
.tc-next { right: 10px; }
.tc-hours { border-top: 1px solid var(--line); padding: 18px 20px 20px; }
.tc-hours-title { font-size: 16px; text-transform: uppercase; color: var(--red); font-weight: 700; margin-bottom: 14px; letter-spacing: .02em; }
.tc-hours-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 20px; }
.tc-hour-name { font-size: 15px; }
.tc-hour-range { color: var(--muted); font-size: 13px; }
.tc-stars { margin-top: 3px; font-size: 17px; letter-spacing: 1px; }
.tc-stars .st { color: #d8dbe0; }
.tc-stars .st-full { color: var(--gold); }
.tc-stars .st-half { position: relative; color: #d8dbe0; }
.tc-stars .st-half::before { content: '★'; position: absolute; left: 0; top: 0; width: 50%; overflow: hidden; color: var(--gold); }
.tc-nohour { color: var(--muted); font-style: italic; }
.tc-viec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); font-size: 15px; }
.tc-more { display: inline-block; margin-top: 14px; color: var(--red); font-weight: 600; }
.tc-more span { font-weight: 700; }

/* Công cụ nhanh dạng hàng */
.quick-tools { display: flex; gap: 12px; flex-wrap: wrap; margin: 20px 0; }
.qt-link { flex: 1 1 auto; min-width: 160px; text-align: center; background: var(--white); border: 1px solid var(--line); box-shadow: var(--shadow); border-radius: 10px; padding: 14px; font-weight: 600; color: var(--ink); }
.qt-link:hover { background: var(--red); color: #fff; border-color: var(--red); text-decoration: none; }

/* ===== Calendar panel ===== */
.calendar-panel, .side-panel > *, .tool-page, .seo-text {
    background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow);
}
.calendar-panel { padding: 20px; }
.cal-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.cal-title { text-align: center; }
.cal-month-title { font-size: 24px; color: var(--red); margin: 0; }
.cal-subtitle { color: var(--muted); font-size: 14px; }
.cal-nav {
    width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
    background: var(--red-light); color: var(--red); font-size: 24px; font-weight: 700;
    text-decoration: none; transition: .15s;
}
.cal-nav:hover { background: var(--red); color: #fff; text-decoration: none; }

.cal-jump { display: flex; gap: 8px; margin-bottom: 16px; flex-wrap: wrap; }
.cal-jump select, .inline-form select, .convert-form select {
    padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; background: #fff;
}
.cal-jump button, .btn-today {
    padding: 8px 16px; border-radius: 8px; border: 0; cursor: pointer; font-size: 15px; font-weight: 600;
}
.cal-jump button { background: var(--red); color: #fff; }
.btn-today { background: var(--gold); color: #fff; display: inline-flex; align-items: center; margin-left: auto; }
.btn-today:hover { text-decoration: none; opacity: .9; }

/* Grid lịch */
.calendar-grid { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.calendar-grid th {
    padding: 8px 0; font-size: 14px; color: var(--muted); font-weight: 600; text-transform: uppercase;
}
.calendar-grid th.is-sunday { color: var(--sunday); }
.cal-cell { height: 74px; vertical-align: top; padding: 0; }
.cal-cell a {
    display: flex; flex-direction: column; height: 100%; padding: 6px 8px; border-radius: 8px;
    background: #fafafa; border: 1px solid var(--line); color: var(--ink); position: relative; transition: .12s;
}
.cal-cell a:hover { border-color: var(--red); text-decoration: none; box-shadow: 0 2px 6px rgba(185, 28, 28, .15); }
.c-solar { font-size: 20px; font-weight: 700; line-height: 1.1; }
.c-lunar { font-size: 12px; color: var(--muted); margin-top: auto; }
.c-event { position: absolute; top: 6px; right: 6px; width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
/* Chấm hoàng đạo / hắc đạo ở góc dưới phải ô lịch */
.c-hd { position: absolute; bottom: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; }
.is-hoangdao .c-hd { background: var(--green); }
.is-hacdao .c-hd { background: #d1d5db; }
.cal-cell.is-today .c-hd { box-shadow: 0 0 0 1.5px rgba(255,255,255,.7); }
.cal-cell.other-month a { background: #fff; opacity: .4; }
.cal-cell.is-sunday .c-solar { color: var(--sunday); }
.cal-cell.is-today a { background: var(--red); border-color: var(--red); color: #fff; }
.cal-cell.is-today .c-lunar { color: rgba(255, 255, 255, .85); }
.cal-cell.has-holiday .c-solar { color: var(--red); }
.cal-cell.is-today.has-holiday .c-solar { color: #fff; }
/* Ngày đang chọn (điều hướng từ khối lịch âm phía trên) */
.cal-cell.is-selected a { outline: 2px solid var(--gold); outline-offset: -2px; box-shadow: 0 2px 8px rgba(212,160,23,.35); }
.cal-cell.is-selected:not(.is-today) a { background: #fffaf0; }

.calendar-mount { transition: opacity .15s; }
.calendar-mount.is-loading { opacity: .45; pointer-events: none; }

.cal-legend { display: flex; gap: 16px; flex-wrap: wrap; margin-top: 16px; font-size: 13px; color: var(--muted); align-items: center; }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 4px; vertical-align: middle; }
.dot-today { background: var(--red); }
.dot-holiday { background: #dc2626; }
.dot-event { background: var(--gold); }
.dot-hd-good { background: var(--green); }
.dot-hd-bad { background: #d1d5db; }
.legend-note { margin-left: auto; font-style: italic; }

/* ===== Side panel / day card ===== */
.side-panel { display: flex; flex-direction: column; gap: 16px; }
.side-title { font-size: 18px; color: var(--red); margin-bottom: 12px; }
.side-tools { padding: 20px; }
.tool-link { display: block; padding: 12px 14px; border-radius: 8px; background: var(--red-light); margin-bottom: 8px; font-weight: 500; color: var(--ink); }
.tool-link:hover { background: var(--red); color: #fff; text-decoration: none; }

.day-card { padding: 20px; }
.day-card-main {
    display: grid; grid-template-columns: 1fr 1fr; gap: 12px; border-radius: 10px; overflow: hidden;
    background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff; padding: 16px; margin-bottom: 16px;
}
.day-card-main.is-good { background: linear-gradient(135deg, #15803d, #0f5c2c); }
.day-card-main.is-bad { background: linear-gradient(135deg, #6b7280, #4b5563); }
.day-big { text-align: center; border-right: 1px solid rgba(255, 255, 255, .25); }
.day-weekday { font-size: 14px; opacity: .9; }
.day-number { font-size: 56px; font-weight: 800; line-height: 1; }
.day-monthyear { font-size: 14px; opacity: .9; }
.day-lunar { text-align: center; display: flex; flex-direction: column; justify-content: center; }
.lunar-number { font-size: 40px; font-weight: 700; line-height: 1; color: var(--gold); }
.lunar-label { font-size: 13px; opacity: .95; }
.lunar-canchi { font-size: 14px; margin-top: 6px; font-weight: 600; }

.day-facts { list-style: none; margin-bottom: 16px; }
.day-facts li { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.day-facts li span { color: var(--muted); }
.badge { display: inline-block; padding: 2px 8px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.badge-good { background: #dcfce7; color: var(--green); }
.badge-mid { background: #fef9c3; color: #a16207; }
.badge-bad { background: #fee2e2; color: var(--red); }

/* Chips + bảng almanac trang ngày */
.day-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0 18px; }
.chip { padding: 6px 13px; border-radius: 20px; font-size: 13px; font-weight: 600; }
.chip-good { background: #dcfce7; color: var(--green); }
.chip-bad { background: #fee2e2; color: var(--red); }
.chip-mid { background: #fef9c3; color: #a16207; }
.chip-plain { background: var(--red-light); color: var(--red); }

.almanac { width: 100%; border-collapse: collapse; margin-bottom: 18px; }
.almanac th { text-align: left; vertical-align: top; width: 180px; padding: 12px 14px; background: var(--red-light);
    color: var(--red); font-weight: 700; border: 1px solid var(--line); font-size: 14px; }
.almanac td { padding: 12px 14px; border: 1px solid var(--line); font-size: 15px; line-height: 1.6; vertical-align: top; color: #374151; }
.almanac tr:nth-child(even) td { background: #fcfcfd; }
.almanac strong { color: var(--ink); }
.al-good strong { color: var(--green); }
.al-bad strong { color: var(--red); }
.tu-detail { margin-top: 6px; font-size: 14px; line-height: 1.55; }
.tu-lbl { font-weight: 700; color: var(--ink); }
.tu-lbl-good { color: var(--green); }
.tu-lbl-bad { color: var(--red); }
.cau-tho { margin-top: 8px; padding: 10px 14px; background: #fffaf0; border-left: 3px solid var(--gold);
    border-radius: 6px; font-style: italic; color: #4b5563; line-height: 1.7; font-size: 14px; }

/* Giờ xuất hành Lý Thuần Phong */
.gio-xh { margin-bottom: 20px; }
.gio-xh h3, .block-title { font-size: 17px; color: var(--red); margin-bottom: 12px; }
.block-title { margin-top: 22px; }
.gio-xh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.gxh-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; }
.gxh-good { background: #f0fdf4; border-color: #bbf7d0; }
.gxh-bad { background: #fef2f2; border-color: #fecaca; }
.gxh-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 4px; }
.gxh-name { font-weight: 700; font-size: 16px; }
.gxh-good .gxh-name { color: var(--green); }
.gxh-bad .gxh-name { color: var(--red); }
.gxh-flag { font-size: 12px; font-weight: 600; padding: 1px 8px; border-radius: 10px; }
.gxh-good .gxh-flag { background: #dcfce7; color: var(--green); }
.gxh-bad .gxh-flag { background: #fee2e2; color: var(--red); }
.gxh-gio { font-size: 13px; color: var(--muted); margin-bottom: 6px; }
.gxh-mota { font-size: 14px; line-height: 1.5; color: #374151; }

/* Sao tốt / xấu */
.sao-block { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 16px; }
.sao-col { border-radius: 10px; padding: 12px 14px; }
.sao-col h3 { font-size: 15px; margin-bottom: 8px; }
.sao-col ul { list-style: none; }
.sao-col li { font-size: 13px; padding: 5px 0; border-bottom: 1px dashed rgba(0,0,0,.08); line-height: 1.45; }
.sao-col li:last-child { border-bottom: 0; }
.sao-tot { background: #f0fdf4; }
.sao-tot h3 { color: var(--green); }
.sao-tot strong { color: var(--green); }
.sao-xau { background: #fef2f2; }
.sao-xau h3 { color: var(--red); }
.sao-xau strong { color: var(--red); }
.sao-empty { font-size: 13px; color: var(--muted); font-style: italic; }

.day-events h3, .day-hours h3 { font-size: 16px; margin-bottom: 10px; color: var(--red); }
.day-events { margin-bottom: 16px; }
.day-events ul { list-style: none; }
.day-events li { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 15px; }
.day-events em { color: var(--red); font-size: 13px; }
.ev-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
.ev-dot.ev-holiday { background: var(--red); }

.hours-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; }
.hour-item { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; font-size: 13px; border: 1px solid var(--line); }
.hour-item.hour-good { background: #f0fdf4; border-color: #bbf7d0; }
.hour-item.hour-bad { background: #f9fafb; opacity: .7; }
.hour-name { font-weight: 700; font-size: 15px; }
.hour-range { color: var(--muted); }
.hour-flag { font-size: 12px; font-weight: 600; }
.hour-good .hour-flag { color: var(--green); }
.hour-bad .hour-flag { color: var(--muted); }

/* ===== Day page ===== */
.day-narrow { max-width: 900px; margin: 0 auto; }
.day-title { font-size: 22px; color: var(--red); text-align: center; margin-bottom: 16px; line-height: 1.35; }
.day-hero-card { margin-bottom: 18px; }
.day-page-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; gap: 12px; }
.day-page-nav h1 { font-size: 22px; color: var(--red); text-align: center; }
.day-page-nav .cal-nav { width: auto; padding: 8px 14px; border-radius: 20px; font-size: 14px; font-weight: 600; }
.day-page .day-card { background: var(--white); box-shadow: var(--shadow); border-radius: var(--radius); }
.day-actions { display: flex; gap: 12px; margin: 20px 0; flex-wrap: wrap; }

/* ===== Buttons ===== */
.btn { display: inline-block; padding: 10px 18px; border-radius: 8px; font-weight: 600; border: 0; cursor: pointer; background: var(--red-light); color: var(--red); }
.btn:hover { text-decoration: none; opacity: .92; }
.btn-primary { background: var(--red); color: #fff; }
.btn-outline { background: #fff; border: 1px solid var(--red); color: var(--red); }

/* ===== Tool pages ===== */
.tool-page { padding: 28px; max-width: 900px; margin: 0 auto 24px; }
.tool-page h1 { font-size: 26px; color: var(--red); margin-bottom: 6px; }
.lead { color: var(--muted); margin-bottom: 20px; }
.inline-form, .convert-form { display: flex; gap: 12px; flex-wrap: wrap; align-items: end; margin-bottom: 20px; }
.inline-form label, .convert-form label { display: flex; flex-direction: column; font-size: 14px; color: var(--muted); gap: 4px; }
.form-row { display: flex; gap: 12px; flex-wrap: wrap; }
.checkbox { flex-direction: row !important; align-items: center; gap: 6px; }

.convert-tabs { display: flex; gap: 4px; margin-bottom: 20px; background: var(--bg); padding: 4px; border-radius: 10px; width: fit-content; }
.convert-tabs a { padding: 8px 20px; border-radius: 8px; color: var(--muted); font-weight: 600; }
.convert-tabs a.active { background: var(--red); color: #fff; }
.convert-tabs a:hover { text-decoration: none; }

.convert-result { text-align: center; padding: 24px; background: var(--red-light); border-radius: var(--radius); margin: 20px 0; }
.cr-from { font-size: 18px; color: var(--muted); }
.cr-arrow { font-size: 28px; color: var(--red); margin: 6px 0; }
.cr-to { font-size: 26px; font-weight: 800; color: var(--red); }
.cr-extra { color: var(--muted); margin: 10px 0 16px; }

.alert { padding: 14px 16px; border-radius: 8px; background: #fef9c3; color: #854d0e; margin: 16px 0; }
.alert-error { background: #fee2e2; color: var(--red); }

/* Tables */
.event-table { width: 100%; border-collapse: collapse; }
.event-table th, .event-table td { padding: 12px 14px; text-align: left; border-bottom: 1px solid var(--line); font-size: 15px; }
.event-table th { background: var(--red-light); color: var(--red); }
.event-table tr.is-holiday td { background: #fffbeb; }

/* Horoscope */
.horo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; }
.horo-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; background: #fff; }
.horo-card h2 { font-size: 18px; color: var(--red); margin-bottom: 8px; }
.horo-scores { list-style: none; margin-top: 12px; font-size: 14px; }
.horo-scores li { display: flex; justify-content: space-between; padding: 3px 0; }
.horo-scores span { color: var(--gold); letter-spacing: 2px; }

/* Good days */
.good-days-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
.good-day-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; text-align: center; background: #fff; color: var(--ink); transition: .12s; }
.good-day-card:hover { border-color: var(--green); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-2px); }
.gd-solar { font-size: 26px; font-weight: 800; color: var(--red); }
.gd-thu, .gd-lunar, .gd-canchi { font-size: 13px; color: var(--muted); }
.gd-score { margin-top: 8px; }

/* ===== Cẩm nang ===== */
.content-layout { display: grid; grid-template-columns: 1fr 320px; gap: 24px; align-items: start; }
.content-main { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 28px; }
.content-main > h1 { font-size: 26px; color: var(--red); margin-bottom: 6px; }
.content-side { display: flex; flex-direction: column; gap: 16px; }
.side-box { background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px; }
.side-box h3 { font-size: 16px; color: var(--red); margin-bottom: 10px; }
.cat-list, .related-list { list-style: none; }
.cat-list li, .related-list li { border-bottom: 1px solid var(--line); }
.cat-list a { display: block; padding: 9px 0; color: var(--ink); }
.cat-list a.active, .cat-list a:hover { color: var(--red); text-decoration: none; padding-left: 6px; }
.related-list a { display: block; padding: 9px 0; color: var(--ink); font-size: 14px; }
.related-list a:hover { color: var(--red); }

.post-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 20px; margin-top: 20px; }
.post-card { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; transition: .15s; }
.post-card:hover { box-shadow: var(--shadow); transform: translateY(-2px); }
.post-thumb { display: block; height: 150px; background: var(--red-light); display: grid; place-items: center; overflow: hidden; }
.post-thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb-placeholder { font-size: 48px; }
.post-body { padding: 14px; }
.post-cat { display: inline-block; font-size: 12px; font-weight: 600; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.post-body h2 { font-size: 17px; line-height: 1.35; margin-bottom: 8px; }
.post-body h2 a { color: var(--ink); }
.post-body h2 a:hover { color: var(--red); }
.post-body p { font-size: 14px; color: var(--muted); }

.pagination { display: flex; gap: 6px; margin-top: 24px; flex-wrap: wrap; }
.pagination a { padding: 8px 14px; border: 1px solid var(--line); border-radius: 8px; color: var(--ink); }
.pagination a.active, .pagination a:hover { background: var(--red); color: #fff; border-color: var(--red); text-decoration: none; }

.article-detail .post-cat { margin-bottom: 10px; }
.article-meta { color: var(--muted); font-size: 14px; margin-bottom: 16px; }
.article-hero { width: 100%; border-radius: var(--radius); margin-bottom: 20px; }
.article-content { line-height: 1.8; }
.article-content h2 { font-size: 21px; color: var(--red); margin: 22px 0 10px; }
.article-content h3 { font-size: 18px; margin: 18px 0 8px; }
.article-content p { margin-bottom: 14px; }
.article-content ul, .article-content ol { margin: 0 0 14px 22px; }
.article-content img { max-width: 100%; border-radius: 8px; }

/* Xem ngày tốt: lưới loại việc + danh sách sidebar */
.viec-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: 20px 0; }
.viec-card { display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; color: var(--ink); transition: .15s; }
.viec-card:hover { border-color: var(--red); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-2px); }
.viec-thumb { display: block; height: 140px; background: var(--red-light); overflow: hidden; }
.viec-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.viec-thumb-ph { display: block; width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--red-light), #fff) center/cover; }
.viec-body { padding: 16px; display: flex; flex-direction: column; flex: 1; }
.viec-card h2 { font-size: 18px; color: var(--red); margin-bottom: 6px; }
.viec-card p { font-size: 14px; color: var(--muted); margin-bottom: 10px; flex: 1; }
.viec-cta { font-size: 13px; font-weight: 600; color: var(--gold); }
.viec-hero { width: 100%; max-height: 320px; object-fit: cover; border-radius: var(--radius); margin: 4px 0 14px; }

.viec-list { list-style: none; }
.viec-list li { border-bottom: 1px solid var(--line); }
.viec-list li:last-child { border-bottom: 0; }
.viec-list a { display: block; padding: 10px 12px; color: var(--ink); border-radius: 8px; font-weight: 500; }
.viec-list a:hover { background: var(--red-light); color: var(--red); text-decoration: none; }
.viec-list a.active { background: var(--red); color: #fff; }

/* ===== Đếm ngược Tết ===== */
.cd-hero { text-align: center; background: linear-gradient(135deg, var(--red), var(--red-dark)); color: #fff;
    border-radius: var(--radius); padding: 32px 20px; margin: 20px 0 24px; box-shadow: var(--shadow); }
.cd-tet-name { font-size: 20px; font-weight: 700; color: var(--gold); letter-spacing: .02em; }
.cd-bignum { font-size: 92px; font-weight: 800; line-height: 1; margin: 6px 0; text-shadow: 0 2px 10px rgba(0,0,0,.25); }
.cd-bigunit { font-size: 20px; opacity: .95; margin-bottom: 18px; }
.cd-clock { display: flex; justify-content: center; gap: 12px; margin-bottom: 16px; }
.cd-box { background: rgba(255,255,255,.15); border-radius: 10px; padding: 10px 16px; min-width: 74px; }
.cd-box span { display: block; font-size: 30px; font-weight: 800; line-height: 1.1; }
.cd-box small { font-size: 12px; opacity: .9; text-transform: uppercase; letter-spacing: .04em; }
.cd-date { font-size: 15px; opacity: .95; }

.cd-upcoming { margin-bottom: 8px; }
.cd-upcoming h2 { font-size: 20px; color: var(--red); margin-bottom: 14px; }
.cd-events { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 14px; }
.cd-ev { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 16px 12px;
    border: 1px solid var(--line); border-radius: var(--radius); background: #fff; color: var(--ink); transition: .12s; }
.cd-ev:hover { border-color: var(--red); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-2px); }
.cd-ev-num { font-size: 32px; font-weight: 800; color: var(--red); line-height: 1; }
.cd-ev-unit { font-size: 12px; color: var(--muted); text-transform: uppercase; }
.cd-ev-name { font-weight: 600; margin-top: 6px; font-size: 15px; }
.cd-ev-date { font-size: 13px; color: var(--muted); margin-top: 2px; }

@media (max-width: 560px) {
    .cd-bignum { font-size: 68px; }
    .cd-box { min-width: 60px; padding: 8px 10px; }
    .cd-box span { font-size: 24px; }
}

/* ===== Lá số tử vi ===== */
.tuvi-form { background: var(--red-light); border-radius: var(--radius); padding: 20px; margin-bottom: 20px; }
.tv-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.tv-row label { flex: 1 1 160px; display: flex; flex-direction: column; font-size: 14px; color: var(--muted); gap: 5px; font-weight: 500; }
.tv-row label.tv-full { flex-basis: 100%; }
.tuvi-form input[type=text], .tuvi-form select {
    padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; background: #fff; width: 100%;
}
.tuvi-result { margin-top: 24px; }
.tuvi-result h2 { font-size: 22px; color: var(--red); margin-bottom: 14px; }
.tuvi-info { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px 20px; margin-bottom: 22px; }
.tuvi-info li { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 15px; }
.tuvi-info li span { color: var(--muted); }
.tuvi-info li strong { color: var(--ink); text-align: right; }
.laso-wrap { text-align: center; background: #fffcf5; border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; overflow-x: auto; }
.laso-img { max-width: 100%; height: auto; width: 800px; }
.laso-actions { text-align: center; margin: 14px 0; }
.muted-note { text-align: center; color: var(--muted); font-size: 13px; font-style: italic; }

/* ===== Văn khấn ===== */
.vk-group { margin-bottom: 22px; }
.vk-cat { font-size: 18px; color: var(--red); border-left: 4px solid var(--red); padding-left: 10px; margin-bottom: 12px; }
.vk-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.vk-item { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); transition: .12s; }
.vk-item:hover { border-color: var(--red); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-2px); }
.vk-item-title { font-weight: 600; color: var(--ink); }
.vk-item:hover .vk-item-title { color: var(--red); }
.vk-item-desc { font-size: 13px; color: var(--muted); margin-top: 4px; }
.vankhan-content p { margin-bottom: 10px; }
.vankhan-content { background: #fffcf5; border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px; line-height: 1.9; }

/* Form điền thông tin gia chủ */
.vk-fill { background: var(--red-light); border-radius: 10px; padding: 16px 18px; margin: 16px 0; }
.vk-fill > h3 { font-size: 15px; color: var(--red); margin-bottom: 12px; }
.vk-fill-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.vk-fill-row label { flex: 1 1 180px; display: flex; flex-direction: column; font-size: 13px; color: var(--muted); gap: 4px; }
.vk-fill-row input { padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px; font-size: 15px; background: #fff; }
.vk-fill-actions { display: flex; gap: 10px; justify-content: flex-end; flex-wrap: wrap; }
.vk-print-title { display: none; }

/* Chế độ in: chỉ in bài khấn */
@media print {
    body { background: #fff; }
    body * { visibility: hidden; }
    .vankhan-print-area, .vankhan-print-area * { visibility: visible; }
    .vankhan-print-area { position: absolute; left: 0; top: 0; width: 100%; }
    .vankhan-content { border: 0; background: #fff; padding: 0; font-size: 17px; line-height: 2; }
    .vk-print-title { display: block; text-align: center; font-size: 22px; font-weight: 700; margin-bottom: 16px; }
    .no-print { display: none !important; }
}

/* ===== Giải mã giấc mơ ===== */
.dream-search { display: flex; gap: 10px; margin: 16px 0 20px; }
.dream-search input { flex: 1; padding: 12px 14px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; }
.dream-search-sm { margin-top: 20px; }
.dream-result-info { color: var(--muted); margin-bottom: 14px; }
.dream-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
.dream-card { display: flex; flex-direction: column; padding: 14px 16px; border: 1px solid var(--line); border-radius: 10px; background: #fff; color: var(--ink); transition: .12s; }
.dream-card:hover { border-color: var(--red); box-shadow: var(--shadow); text-decoration: none; transform: translateY(-2px); }
.dream-kw { font-weight: 600; }
.dream-card:hover .dream-kw { color: var(--red); }
.dream-num { font-size: 13px; color: var(--gold); font-weight: 600; margin-top: 4px; }
.dream-lucky { display: flex; align-items: center; gap: 12px; background: var(--red-light); border-radius: 10px; padding: 14px 18px; margin: 16px 0; }
.dream-lucky span { color: var(--muted); font-size: 14px; }
.dream-lucky strong { font-size: 24px; font-weight: 800; color: var(--red); letter-spacing: 2px; }

/* SEO text block */
.seo-text { padding: 24px 28px; margin-top: 24px; }
.seo-text h2 { font-size: 20px; color: var(--red); margin-bottom: 10px; }
.seo-text p { color: #374151; }
/* Ảnh trong mọi khối nội dung admin không tràn khung */
.seo-text img, .admin-content img, .article-content img, .vankhan-content img {
    max-width: 100%; height: auto; border-radius: 8px; display: block; margin: 12px 0;
}
.seo-text iframe, .article-content iframe { max-width: 100%; }
/* Bảng trong nội dung */
.article-content table, .seo-text table, .vankhan-content table, .admin-content table {
    width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14.5px;
}
.article-content th, .article-content td,
.seo-text th, .seo-text td,
.vankhan-content th, .vankhan-content td,
.admin-content th, .admin-content td {
    border: 1px solid var(--line); padding: 9px 12px; text-align: left; vertical-align: top;
}
.article-content th, .seo-text th, .vankhan-content th, .admin-content th {
    background: var(--red-light); color: var(--red); font-weight: 700;
}
.article-content tbody tr:nth-child(even) td,
.seo-text tbody tr:nth-child(even) td { background: #fcfcfd; }
.article-content table, .seo-text table { display: block; overflow-x: auto; }
@media (min-width: 700px) {
    .article-content table, .seo-text table, .vankhan-content table, .admin-content table { display: table; }
}

/* Error */
.error-page { text-align: center; padding: 60px 20px; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); }
.error-page h1 { font-size: 72px; color: var(--red); }
.error-page p { color: var(--muted); margin: 12px 0 24px; }

/* ===== Footer ===== */
.site-footer { background: #1f2937; color: #d1d5db; margin-top: 40px; padding: 36px 0 0; }
.footer-inner { display: grid; grid-template-columns: 2fr 1fr 1.5fr; gap: 32px; }
.footer-col h4 { color: #fff; margin-bottom: 12px; font-size: 16px; }
.footer-col a { display: block; color: #9ca3af; padding: 3px 0; }
.footer-brand { color: #fff; font-weight: 700; font-size: 18px; margin-bottom: 10px; }
.footer-col p { font-size: 14px; color: #9ca3af; }
.copyright { border-top: 1px solid #374151; margin-top: 28px; padding: 16px 16px; font-size: 13px; color: #6b7280; text-align: center; }

/* ===== Responsive ===== */
@media (max-width: 900px) {
    .layout-2col, .content-layout, .home-layout { grid-template-columns: 1fr; }
    .home-side { position: static; top: auto; }
    .footer-inner { grid-template-columns: 1fr; gap: 20px; }
    .main-nav {
        position: fixed; top: 60px; left: 0; right: 0; flex-direction: column; align-items: stretch;
        background: var(--red-dark); padding: 8px 16px; gap: 0; transform: translateY(-150%);
        transition: .25s; margin: 0; max-height: calc(100vh - 60px); overflow-y: auto;
    }
    body.nav-open .main-nav { transform: translateY(0); }
    .nav-toggle { display: block; }
    .main-nav > a, .nav-parent { padding: 12px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.1); }
    .nav-item { width: 100%; }
    /* Submenu hiển thị luôn dạng thụt lề khi mở menu mobile */
    .submenu { position: static; display: block; box-shadow: none; background: transparent; padding: 0; }
    .submenu a { color: #fff; padding: 10px 12px 10px 28px; border-radius: 0; border-bottom: 1px solid rgba(255,255,255,.08); font-size: 14px; opacity: .95; }
    .submenu a:hover { background: rgba(255,255,255,.1); color: #fff; }
    .nav-parent .caret { display: none; }
}
@media (max-width: 560px) {
    .cal-cell { height: 60px; }
    .c-solar { font-size: 16px; }
    .c-lunar { font-size: 10px; }
    .calendar-grid { border-spacing: 3px; }
    .calendar-panel, .tool-page { padding: 14px; }
    .day-number { font-size: 44px; }
    .hours-grid { grid-template-columns: 1fr; }
    .day-page-nav { flex-wrap: wrap; }
    .day-page-nav h1 { order: -1; width: 100%; }
    .almanac th { width: 110px; padding: 10px; font-size: 13px; }
    .almanac td { padding: 10px; font-size: 14px; }
    .tc-bignum { font-size: 54px; }
    .tc-hours-grid { grid-template-columns: repeat(2, 1fr); }
    .tc-arrow { width: 32px; height: 32px; font-size: 20px; }
    .tc-side { padding: 16px 8px 20px; }
    .section-title { font-size: 17px; }
}