/**
 * XEM NGÀY TỐT MUA XE (/xem-ngay-tot-mua-xe/) — giao diện "Lịch tháng" (12/10/2026). Nạp SAU hoptuoi.css (khung trang, ô ngày, nút, thẻ tiêu chí)
 * và kethon.css (khung mục .kh-cal, chú thích màu .kh-legend, tóm tắt .kh-sum-*).
 * Phần riêng: chọn tháng, ô kiểm ngày, lịch 7 cột tô màu theo mức ngày, ô chi tiết một ngày (5 tiêu chí, giờ hoàng đạo, hướng xuất hành), màu xe hợp mệnh.
 * Màu chỉ lấy từ biến của cute.css; trung tính, không emoji.
 */
body.page-template-page-xem-ngay-tot-mua-xe .page-header, body.page-template-page-xem-ngay-tot-mua-xe .nevo-breadcrumb { display: none !important; }

/* ---------- Khung nhập ---------- */
.mx-tool-head { padding-top: 28px; background: linear-gradient(115deg, color-mix(in srgb, var(--boi-sky) 75%, var(--theme-bg-elevated)), color-mix(in srgb, var(--boi-mint) 72%, var(--theme-bg-elevated)) 55%, color-mix(in srgb, var(--boi-butter) 72%, var(--theme-bg-elevated))); }
.mx-badge .boi-tool-art, .mx-badge img, .mx-badge svg { width: 44px; height: 44px; }
.mx-form { position: relative; max-width: 1180px; margin: -36px auto 0; padding: 0 24px; display: grid; gap: 14px; }
.mx-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 14px; align-items: stretch; }
.mx-owner { --ht-c: var(--boi-sky); }
.mx-av { width: 72px; height: 72px; }
.mx-mono { position: absolute; inset: 0; display: grid; place-items: center; font: 900 1.2rem/1 var(--boi-font-head); color: var(--boi-sticker-ink); }
.ht-who-av.is-known .mx-mono { opacity: 0; }
.mx-when { display: flex; flex-direction: column; gap: 14px; padding: 18px; border-radius: var(--boi-r-xl, 28px); border: 2px solid var(--boi-mint); background: var(--theme-bg-elevated); box-shadow: var(--boi-card-shadow); }
.mx-months { margin: 0; padding: 0; border: 0; }
.mx-l { padding: 0; margin: 0 0 8px; font: 900 1.05rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.mx-mlist { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mx-mopt { position: relative; cursor: pointer; }
.mx-mopt input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.mx-mopt span { display: block; padding: 10px 8px; border-radius: var(--boi-r-md, 16px); border: 2px solid var(--theme-border); text-align: center;
    font: 800 .92rem/1.2 var(--boi-font-body); color: var(--theme-text-secondary); background: var(--theme-bg-elevated); transition: border-color .15s, background .15s; }
.mx-mopt input:checked + span { border-color: var(--theme-gold-text); background: color-mix(in srgb, var(--boi-mint) 55%, var(--theme-bg-elevated)); color: var(--theme-text-strong); }
.mx-mopt input:focus-visible + span { outline: 3px solid var(--theme-gold-text); outline-offset: 2px; }
.mx-check .ht-label { text-align: left; }
.mx-form .ht-perks, .mx-form .ht-note, .mx-form .ht-error, .mx-form .ht-btn { grid-column: auto; }

/* ---------- Tóm tắt ---------- */
.mx-hero { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 22px 28px; }
.mx-owner-c { display: flex; flex-direction: column; align-items: center; gap: 4px; text-align: center; }
.mx-ring { width: 100px; height: 100px; }
.mx-big { margin-top: 14px; font: 900 1.25rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.mx-month-c p, .mx-top-c p { margin: 0; }
.mx-month-c { padding-right: 24px; border-right: 1px dashed var(--theme-border-strong); }
.mx-top-c { padding: 16px 18px; border-radius: var(--boi-r-lg, 24px); background: color-mix(in srgb, var(--boi-mint) 40%, var(--theme-bg-elevated)); }
.mx-top-c.is-empty { background: var(--theme-bg); }
.mx-yearnote { margin: 16px 0 0; padding: 12px 16px; border-radius: var(--boi-r-md, 18px); background: color-mix(in srgb, var(--boi-butter) 50%, var(--theme-bg-elevated)); line-height: 1.6; color: var(--theme-text-body); }

/* ---------- Chi tiết một ngày ---------- */
.mx-dd { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: var(--boi-r-lg, 22px); border: 1px solid var(--theme-border); border-left: 6px solid var(--kh-t); background: var(--theme-bg-elevated); }
.mx-dd-h { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; }
.mx-dd-date { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 18px; background: var(--kh-t); color: var(--boi-sticker-ink); }
.mx-dd-date strong { font: 900 1.5rem/1 var(--boi-font-head); }
.mx-dd-date span { font-size: .68rem; font-weight: 800; }
.mx-dd-t p { margin: 0; }
.mx-dd-k { font-size: .76rem; font-weight: 900; letter-spacing: .1em; text-transform: uppercase; color: var(--theme-gold-text); }
.mx-dd-main { font: 900 1.02rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.mx-dd-sub { font-size: .8rem; line-height: 1.45; color: var(--theme-text-soft); }
.mx-sc { font: 900 1.5rem/1 var(--boi-font-head); color: var(--theme-gold-text); white-space: nowrap; }
.mx-sc small { font-size: .74rem; color: var(--theme-text-soft); }
.mx-pill { align-self: flex-start; margin: 0; padding: 3px 12px; border-radius: 999px; font: 900 .84rem/1.4 var(--boi-font-head); color: var(--boi-sticker-ink); background: var(--kh-t); }
.mx-dd.is-off .mx-pill { color: var(--theme-text-secondary); }
.mx-avoid { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; }
.mx-avoid li { padding: 5px 10px; border-radius: 10px; font-size: .84rem; font-weight: 700; color: var(--boi-sticker-ink); background: color-mix(in srgb, var(--boi-pink) 80%, transparent); }
.mx-crit { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px; }
.mx-crit li { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 6px; padding: 6px 10px; border-radius: 12px; font-size: .8rem; line-height: 1.4;
    background: color-mix(in srgb, var(--kh-t) 35%, transparent); color: var(--theme-text-secondary); }
.mx-crit li span { grid-column: 1 / -1; font-size: .72rem; color: var(--theme-text-soft); }
.mx-crit li b { color: var(--theme-text-strong); }
.mx-crit li em { font-style: normal; font-weight: 800; color: var(--theme-text-soft); }
.mx-crit li small { grid-column: 1 / -1; margin-top: 2px; font-size: .74rem; color: var(--theme-text-secondary); }
.mx-go-time { display: grid; gap: 8px; }
.mx-gt-h { margin: 0; font-size: .78rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; color: var(--theme-text-soft); }
.mx-hours { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.mx-hours li { display: flex; flex-direction: column; align-items: center; padding: 6px 4px; border-radius: 12px; background: color-mix(in srgb, var(--boi-butter) 55%, transparent); font-size: .74rem; color: var(--theme-text-secondary); }
.mx-hours b { font: 900 .95rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.mx-dirs { margin: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.mx-dirs span { padding: 5px 12px; border-radius: 999px; font-size: .84rem; background: color-mix(in srgb, var(--boi-mint) 45%, transparent); color: var(--theme-text-secondary); }
.mx-dirs b { color: var(--theme-text-strong); }

.mx-blist { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.mx-blist > li:first-child { grid-column: 1 / -1; }
.mx-blist > li:first-child .mx-dd { box-shadow: 0 0 0 2px var(--theme-gold-text); }

/* ---------- Lịch tháng ---------- */
.is-off { --kh-t: var(--theme-border); }
.mx-cal-wd, .mx-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; max-width: 820px; margin-inline: auto; }
.mx-cal-wd { margin-bottom: 6px; }
.mx-cal-wd span { text-align: center; font-size: .78rem; font-weight: 800; color: var(--theme-text-soft); }
.mx-cal { list-style: none; margin: 0 auto; padding: 0; } /* margin auto: thẳng cột với hàng tên thứ (cùng max-width 820px) */
.mx-cal li { margin: 0; }
.mx-cal-d { position: relative; width: 100%; aspect-ratio: 1 / .7; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 4px;
    border-radius: 14px; border: 2px solid transparent; background: color-mix(in srgb, var(--kh-t) 50%, var(--theme-bg-elevated)); color: var(--theme-text-strong); cursor: pointer; font-family: var(--boi-font-body); }
.mx-cal-d strong { font: 900 1.1rem/1 var(--boi-font-head); }
.mx-cal-d small { font-size: .68rem; color: var(--theme-text-soft); }
.mx-cal-d.is-good { background: var(--boi-mint); color: var(--boi-sticker-ink); }
.mx-cal-d.is-hard { background: color-mix(in srgb, var(--boi-pink) 70%, var(--theme-bg-elevated)); }
.mx-cal-d.is-off { background: var(--theme-bg); }
.mx-cal-d.is-past { opacity: .45; }
.mx-cal-d[aria-pressed="true"] { border-color: var(--theme-gold-text); }
.mx-cal-d:focus-visible { outline: 3px solid var(--theme-gold-text); outline-offset: 2px; }
.mx-cal-detail { margin-top: 14px; }
.mx-legend .is-off::before { background: var(--theme-border); }

/* ---------- Màu xe ---------- */
.mx-col-l { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.mx-col-l li { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--boi-r-md, 18px); border-left: 6px solid var(--kh-t); background: color-mix(in srgb, var(--kh-t) 30%, var(--theme-bg-elevated)); }
.mx-col-l span { font-size: .76rem; font-weight: 900; letter-spacing: .08em; text-transform: uppercase; color: var(--theme-gold-text); }
.mx-col-l strong { font: 900 1.05rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); }
.mx-col-l small { font-size: .8rem; color: var(--theme-text-secondary); }

/* ---------- Bảng tra trong bài ---------- */
.mx-truc-table td.is-good, .mx-mau-table td.is-good { background: color-mix(in srgb, var(--boi-mint) 45%, transparent); }
.mx-truc-table td.is-mid { background: color-mix(in srgb, var(--boi-butter) 45%, transparent); }
.mx-truc-table td.is-hard, .mx-mau-table td.is-hard { background: color-mix(in srgb, var(--boi-pink) 40%, transparent); }
.mx-gen { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 16px 0; }
.mx-gen-m { padding: 14px 16px; border-radius: var(--boi-r-lg, 22px); border: 1px solid var(--theme-border); background: var(--theme-bg-elevated); }
.mx-gen-h { margin: 0 0 8px !important; font: 900 1.05rem/1.3 var(--boi-font-head); color: var(--theme-text-strong); text-align: center; }
.mx-gen-m ul { list-style: none; margin: 0 !important; padding: 0 !important; display: grid; gap: 6px; }
.mx-gen-m li { margin: 0 !important; display: grid; grid-template-columns: 74px minmax(0, 1fr); column-gap: 10px; padding: 6px 10px; border-radius: 12px; background: color-mix(in srgb, var(--boi-mint) 30%, transparent); }
.mx-gen-m li::before { display: none !important; }
.mx-gen-m strong { grid-row: span 2; align-self: center; font: 900 .95rem/1.2 var(--boi-font-head); color: var(--theme-text-strong); }
.mx-gen-m span { font-size: .84rem; color: var(--theme-text-secondary); }
.mx-gen-m em { font-style: normal; font-size: .78rem; color: var(--theme-text-soft); }
.mx .ht-learn .ht-crit-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); }

/* ---------- Nền tối ---------- */
:root:not([data-theme="light"]) .mx-tool-head { background: linear-gradient(115deg, var(--boi-sky), var(--boi-mint) 55%, var(--boi-butter)); }
:root:not([data-theme="light"]) .mx-mopt input:checked + span { background: color-mix(in srgb, var(--boi-mint) 16%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-top-c { background: color-mix(in srgb, var(--boi-mint) 14%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-yearnote { background: color-mix(in srgb, var(--boi-butter) 14%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-crit li, :root:not([data-theme="light"]) .mx-col-l li { background: color-mix(in srgb, var(--kh-t) 12%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-cal-d { background: color-mix(in srgb, var(--kh-t) 14%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-cal-d.is-good { background: color-mix(in srgb, var(--boi-mint) 70%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-cal-d.is-hard { background: color-mix(in srgb, var(--boi-pink) 22%, var(--theme-bg-elevated)); }
:root:not([data-theme="light"]) .mx-hours li { background: color-mix(in srgb, var(--boi-butter) 14%, transparent); }
:root:not([data-theme="light"]) .mx-dirs span, :root:not([data-theme="light"]) .mx-gen-m li { background: color-mix(in srgb, var(--boi-mint) 12%, transparent); }
:root:not([data-theme="light"]) .mx-truc-table td.is-good, :root:not([data-theme="light"]) .mx-mau-table td.is-good { background: color-mix(in srgb, var(--boi-mint) 14%, transparent); }
:root:not([data-theme="light"]) .mx-truc-table td.is-mid { background: color-mix(in srgb, var(--boi-butter) 14%, transparent); }
:root:not([data-theme="light"]) .mx-truc-table td.is-hard, :root:not([data-theme="light"]) .mx-mau-table td.is-hard { background: color-mix(in srgb, var(--boi-pink) 14%, transparent); }

/* ---------- Tablet ---------- */
@media (max-width: 1100px) {
    .mx-hero { grid-template-columns: 1fr 1fr; }
    .mx-hero > .mx-owner-c { grid-column: 1 / -1; }
    .mx .ht-learn .ht-crit-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 900px) { .mx-blist { grid-template-columns: 1fr; } .mx-gen { grid-template-columns: 1fr; } }

/* ---------- Điện thoại ---------- */
@media (max-width: 768px) {
    .mx-form { padding: 0 14px; }
    .mx-grid { grid-template-columns: 1fr; }
    .mx-mlist { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mx-hero { grid-template-columns: 1fr; justify-items: center; text-align: center; }
    .mx-month-c { padding-right: 0; border-right: 0; padding-bottom: 14px; border-bottom: 1px dashed var(--theme-border-strong); width: 100%; }
    .mx-top-c { width: 100%; box-sizing: border-box; }
    .mx-hours { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .mx-col-l { grid-template-columns: 1fr; }
    .mx-cal-wd, .mx-cal { gap: 4px; }
    .mx-cal-d { border-radius: 10px; }
    .mx-cal-d strong { font-size: .95rem; }
    .mx .ht-learn .ht-crit-cards { grid-template-columns: 1fr 1fr; }
}