/*! tcbt-chart.css: CSS lá số Tử Vi, trích nguyên vẹn từ tu-vi.html
    để trang /tu-vi-song-sinh vẽ lá số giống hệt trang /tu-vi.
    KHÔNG sửa luật CSS. Chỉ dọn gạch ngang dài trong phần chú thích.
    UK MASTER ACADEMY, UKM-TVSS-2026.08 */
        /* ============================================================
           THIÊN BÀN TỬ VI, A4 PORTRAIT  (210mm × 297mm)
           Thiết kế cố định, không co giãn theo viewport.
           Trên di động: scroll trái-phải-trên-dưới.
           ============================================================ */
        *, *::before, *::after { box-sizing: border-box; }

        :root {
            /* ── Nền giấy & nền ngoài (đổi theo Ngũ Hành) ── */
            --bg-page:    #e8d4d4;
            --sheet-bg:   #ffffff;
            --sheet-bg-2: #ffffff;
            --sheet-bg-3: #ffffff;

            /* ── Khung & viền cổ điển ── */
            --frame-deep: #6E0E0A;
            --frame-gold: #C9A24A;
            --frame-gold-soft: #E6CB85;
            --line:       #d8c79b;
            --line-soft:  #ece1bf;

            /* ── Chữ ── */
            --ink:        #1c1410;
            --ink-soft:   #5b4636;
            --ink-faint:  #8a7256;
            --title-red:  #6E0E0A;
            --accent-cyan:  #155e75;
            --accent-purple:#4c1d95;

            /* ── Chính tinh, Ngũ Hành bản thể ── */
            --star-tho:  #A16207;  /* Tử Vi · Cự Môn · Thiên Phủ · Thiên Lương */
            --star-moc:  #15803D;  /* Thiên Cơ · Tham Lang */
            --star-hoa:  #B91C1C;  /* Thái Dương · Liêm Trinh */
            --star-kim:  #52525B;  /* Vũ Khúc · Thất Sát */
            --star-thuy: #1D4ED8;  /* Thiên Đồng · Thiên Tướng · Phá Quân · Thái Âm */

            /* ── Phụ tinh: 5 hành × 2 khí ── */
            --phu-kim-cat:  #71717A;  --phu-kim-hung:  #3F3F46;
            --phu-moc-cat:  #16A34A;  --phu-moc-hung:  #14532D;
            --phu-thuy-cat: #2563EB;  --phu-thuy-hung: #1E3A8A;
            --phu-hoa-cat:  #DC2626;  --phu-hoa-hung:  #7F1D1D;
            --phu-tho-cat:  #CA8A04;  --phu-tho-hung:  #713F12;
            --phu-trung:    #6B7280;

            /* ── Tứ Hóa ── */
            --hoa-loc:   #16A34A;  /* Mộc · Cát */
            --hoa-quyen: #DC2626;  /* Hỏa · Cát */
            --hoa-khoa:  #71717A;  /* Kim · Cát */
            --hoa-ky:    #1E3A8A;  /* Thủy · Hung */

            /* ── Tuần · Triệt · Lưu tinh ── */
            --color-tuan-text:  #000000;
            --color-triet-text: #000000;
            --color-luu-tinh:   #6B7280;

            /* ── Đắc / Hãm ── */
            --dh-good:    #15803D;
            --dh-neutral: #6B7280;
            --dh-bad:     #7F1D1D;

            /* ── Huyền Khí ── */
            --hk-pos: #15803D;
            --hk-neg: #7F1D1D;

            /* ── Hành cho tên cung & sao lưu ── */
            --hanh-kim:  #71717A;
            --hanh-moc:  #16A34A;
            --hanh-thuy: #2563EB;
            --hanh-hoa:  #DC2626;
            --hanh-tho:  #CA8A04;

            /* Backwards-compat (một số rule cũ vẫn dùng tên này) */
            --text-primary: var(--ink);
            --text-secondary: var(--ink-soft);
            --color-palace-name: var(--title-red);
            --accent-gold: var(--frame-gold);
            --accent-red: var(--title-red);
            --bg-main: var(--sheet-bg);
            --bg-card: var(--sheet-bg-2);
            --bg-palace: var(--sheet-bg-2);
            --bg-center: var(--sheet-bg-3);
            --border-color-soft: var(--line-soft);
            --border-color-medium: var(--line);
            --huyen-khi-positive: var(--hk-pos);
            --huyen-khi-negative: var(--hk-neg);
            --hoa-tinh-loc: var(--hoa-loc);
            --hoa-tinh-quyen: var(--hoa-quyen);
            --hoa-tinh-khoa: var(--hoa-khoa);
            --hoa-tinh-ky: var(--hoa-ky);
            --color-dac-ham-good: var(--dh-good);
            --color-dac-ham-neutral: var(--dh-neutral);
            --color-dac-ham-bad: var(--dh-bad);
        }

        /* ── Nền giấy theo Ngũ Hành, lá số luôn trắng thuần, chỉ nền ngoài đổi màu ── */
        html[data-bg="kim"]   { --sheet-bg:#ffffff; --sheet-bg-2:#ffffff; --sheet-bg-3:#ffffff; --bg-page:#dcdcdf; --ci-soft-bg:#f0f0f3; --ci-soft-border:#d6d6db; }
        html[data-bg="moc"]   { --sheet-bg:#ffffff; --sheet-bg-2:#ffffff; --sheet-bg-3:#ffffff; --bg-page:#cee0c5; --ci-soft-bg:#edf5e6; --ci-soft-border:#cfe0c2; }
        html[data-bg="thuy"]  { --sheet-bg:#ffffff; --sheet-bg-2:#ffffff; --sheet-bg-3:#ffffff; --bg-page:#c8d8e3; --ci-soft-bg:#e8f1f7; --ci-soft-border:#c6d7e5; }
        html[data-bg="hoa"]   { --sheet-bg:#ffffff; --sheet-bg-2:#ffffff; --sheet-bg-3:#ffffff; --bg-page:#e2cccc; --ci-soft-bg:#f8ecec; --ci-soft-border:#e6cccc; }
        html[data-bg="tho"]   { --sheet-bg:#ffffff; --sheet-bg-2:#ffffff; --sheet-bg-3:#ffffff; --bg-page:#d8cda8; --ci-soft-bg:#f5efdd; --ci-soft-border:#e0d3a8; }
        html[data-bg="trang"] { --sheet-bg:#ffffff; --sheet-bg-2:#ffffff; --sheet-bg-3:#ffffff; --bg-page:#cccccc;
                                 --ink:#000000; --ink-soft:#000000; --ink-faint:#222222; --title-red:#000000;
                                 --ci-soft-bg:#f2f2f2; --ci-soft-border:#d9d9d9; }

        /* ============================================================
           TRANG WEB KHUNG NGOÀI
           ============================================================ */
        html, body { margin: 0; padding: 0; }
        body {
            font-family: "Be Vietnam Pro", "Helvetica Neue", system-ui, sans-serif;
            background: var(--bg-page);
            color: var(--ink);
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            text-rendering: optimizeLegibility;
            transition: background-color .35s ease;
            line-height: 1.5;
        }

        /* Tiêu đề trang web (phía trên tờ A4) */
        .tuvi-page-header {
            text-align: center;
            padding: 28px 16px 4px;
        }
        .tuvi-page-title {
            font-family: "Noto Serif", serif;
            color: var(--title-red);
            font-size: 36px;
            font-weight: 700;
            letter-spacing: 1.5px;
            margin: 0 0 8px;
            line-height: 1.05;
        }
        .tuvi-page-sub {
            color: var(--ink-soft);
            font-size: 14.5px;
            max-width: 660px;
            margin: 0 auto;
            line-height: 1.55;
        }

        /* Đang xem + Chỉnh sửa thông tin, gộp trong thẻ tài khoản (giống bat-tu, 2026-07-13) */
        #ukBanner {
            max-width:none; margin:7px 0 0;
            background:transparent; border:none; border-top:1px solid #e7dcc0; border-radius:0;
            padding:9px 14px 0; display:flex; justify-content:space-between;
            align-items:center; flex-wrap:wrap; gap:8px;
            font-family:"Be Vietnam Pro",sans-serif; font-size:14px; color:#5b4636;
        }
        #ukBanner b { color:#6E0E0A; }
        #ukBanner a {
            display:inline-flex; align-items:center; gap:6px;
            background:#fff; border:1px solid #d8c79b; border-radius:999px;
            padding:5px 12px; color:#5b4636; text-decoration:none;
            font-size:13.5px; font-weight:500;
        }
        #ukBanner a:hover { border-color:#C9A24A; color:#6E0E0A; }

        /* ============================================================
           PHIẾU AN LÁ SỐ TRÊN TRANG, cho khách vào thẳng /tu-vi
           (đồng bộ phong cách với an-la-so.html, scoped #cFormWrap)
           ============================================================ */
        /* ============================================================
           BỀ NGANG CHUẨN CHUNG CHO MỌI KHỐI (đăng nhập, phiếu, luận giải,
           gói, xu, bước tiếp theo, thanh thanh toán)
           = bề ngang tờ lá số SAU khi zoom (xem khối PHÓNG TO LÁ SỐ)
           + 16px đệm mỗi bên. Đổi hệ số zoom thì đổi cả ở đây.
           ============================================================ */
        :root { --uk-block-w: calc(210mm + 32px); }                 /* <768px: lá số 1:1 */
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            :root { --uk-block-w: calc(210mm * 1.12 + 32px); }      /* khớp zoom 1.12 */
        }
        @media screen and (min-width: 1024px) {
            :root { --uk-block-w: calc(210mm * 1.32 + 32px); }      /* khớp zoom 1.32 ≈ 1080px */
        }
        #cFormWrap { max-width: var(--uk-block-w); margin: 22px auto 30px; padding: 0 16px; }
        #cFormWrap .c-form-card { background: #fffaf0; border: 2px solid var(--title-red); border-radius: 14px; padding: 30px 26px 26px; box-shadow: 0 14px 34px rgba(60,40,10,.10); position: relative; }
        #cFormWrap .c-form-card::before { content: ""; position: absolute; inset: 6px; border: 1px solid var(--frame-gold); border-radius: 9px; pointer-events: none; }
        #cFormWrap .c-form-card > * { position: relative; }
        #cFormWrap .c-head { text-align: center; margin-bottom: 8px; }
        #cFormWrap .c-orn { color: var(--frame-gold); font-size: 15px; letter-spacing: 8px; margin-bottom: 4px; }
        #cFormWrap h2 { font-family: "Noto Serif", serif; color: var(--title-red); margin: 0 0 6px; font-size: 27px; letter-spacing: .5px; }
        #cFormWrap .c-hint { color: var(--ink-soft); font-size: 16px; margin: 0 0 14px; line-height: 1.6; }
        #cFormWrap .c-step { display: flex; align-items: center; gap: 10px; margin: 20px 0 10px; }
        #cFormWrap .c-step .num { width: 30px; height: 30px; border-radius: 50%; background: var(--title-red); color: #fff; font-weight: 700; font-size: 15px; display: grid; place-items: center; flex-shrink: 0; font-family: "Noto Serif", serif; }
        #cFormWrap .c-step .t { font-family: "Noto Serif", serif; font-size: 18.5px; color: var(--title-red); font-weight: 700; white-space: nowrap; }
        #cFormWrap .c-step::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, var(--frame-gold), transparent); }
        #cFormWrap .c-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
        #cFormWrap .c-row.three { grid-template-columns: 1fr 1fr 1fr; }
        #cFormWrap label { display: block; font-size: 16px; color: #3a2d20; margin-bottom: 6px; font-weight: 600; }
        #cFormWrap input, #cFormWrap select { width: 100%; padding: 13px 14px; min-height: 50px; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; font-family: "Be Vietnam Pro", sans-serif; font-size: 17px; color: var(--ink); outline: none; box-sizing: border-box; }
        #cFormWrap input:focus, #cFormWrap select:focus { border-color: var(--frame-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.22); }
        #cFormWrap .c-gender { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: stretch; }
        #cFormWrap .c-gender label { display: flex; align-items: center; justify-content: center; gap: 9px; cursor: pointer; font-size: 17px; color: var(--ink); font-weight: 600; margin: 0; border: 1.5px solid var(--line); border-radius: 10px; background: #fff; min-height: 50px; padding: 10px 12px; transition: all .15s ease; }
        #cFormWrap .c-gender label:has(input:checked) { border-color: var(--title-red); background: #fdf0ec; color: var(--title-red); font-weight: 700; box-shadow: 0 0 0 2px rgba(110,14,10,.12); }
        #cFormWrap .c-gender input[type="radio"] { width: auto; min-height: 0; accent-color: var(--title-red); transform: scale(1.25); }
        #cFormWrap .c-caltoggle { display: flex; background: #f3e9d2; border: 1px solid var(--line); border-radius: 11px; padding: 4px; gap: 4px; margin-bottom: 14px; }
        #cFormWrap .c-caltoggle button { flex: 1; padding: 12px; border: none; border-radius: 8px; font-family: "Be Vietnam Pro", sans-serif; font-size: 17px; font-weight: 500; cursor: pointer; transition: all .18s; background: transparent; color: var(--ink-soft); }
        #cFormWrap .c-caltoggle button.active { background: #fff; color: var(--title-red); font-weight: 700; box-shadow: 0 1px 4px rgba(60,40,10,.12); border: 1px solid var(--line); }
        #cFormWrap .c-calsec { display: none; }
        #cFormWrap .c-calsec.show { display: block; }
        #cFormWrap .c-badge { display: inline-block; font-size: 13px; padding: 2px 7px; border-radius: 999px; font-weight: 600; margin-left: 5px; vertical-align: middle; }
        #cFormWrap .c-badge.lunar { background: #e8f4ec; color: #166534; }
        #cFormWrap .c-badge.solar { background: #e8f0fb; color: #1d4ed8; }
        #cFormWrap .c-review { margin: 4px 0 8px; background: linear-gradient(180deg, #fffef9, #fdf6e5); border: 1px solid var(--frame-gold); border-radius: 10px; padding: 13px 16px; font-size: 16px; line-height: 1.75; color: #3a2d20; }
        #cFormWrap .c-review .cr-label { display: block; font-size: 12.5px; letter-spacing: 2px; text-transform: uppercase; color: #8a6309; font-weight: 700; margin-bottom: 3px; }
        #cFormWrap .c-review b { color: var(--title-red); }
        #cFormWrap .c-submit { text-align: center; margin-top: 22px; }
        #cFormWrap .c-submit button { display: inline-flex; align-items: center; gap: 10px; background: var(--title-red); color: #fff; border: 1.5px solid var(--title-red); border-radius: 12px; padding: 15px 34px; font-family: "Be Vietnam Pro", sans-serif; font-size: 18px; font-weight: 700; cursor: pointer; transition: all .2s ease; box-shadow: 0 6px 18px rgba(110,14,10,.25); }
        #cFormWrap .c-submit button:hover { background: #4a0808; border-color: #4a0808; transform: translateY(-1px); }
        #cFormWrap .c-submit button:disabled { opacity: .65; cursor: wait; transform: none; }
        #cFormWrap .c-alt { margin: 14px 0 0; font-size: 14.5px; color: var(--ink-soft); }
        #cFormWrap .c-alt a { color: var(--title-red); font-weight: 600; }
        @media (max-width: 767px) {
            #cFormWrap .c-row, #cFormWrap .c-row.three { grid-template-columns: 1fr 1fr; }
        }
        @media (max-width: 639px) {
            #cFormWrap .c-form-card { padding: 22px 14px 20px; }
            #cFormWrap h2 { font-size: 23px; }
            #cFormWrap .c-submit button { width: 100%; justify-content: center; }
        }

        /* ============================================================
           DẢI ĐĂNG NHẬP + XEM LẠI LÁ SỐ ĐÃ LƯU (trên cùng, 1 hàng gọn)
           ============================================================ */
        #ukAuthStrip { max-width: var(--uk-block-w); margin: 16px auto 0; padding: 0 16px; font-family: "Be Vietnam Pro", sans-serif; }
        #ukAuthStrip .uas-inner { background: #fffaf0; border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
        #ukAuthStrip .uas-guest, #ukAuthStrip .uas-user { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
        #ukAuthStrip .uas-txt { color: var(--ink-soft); font-size: 14.5px; flex: 1; min-width: 200px; line-height: 1.5; }
        #ukAuthStrip .uas-login { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; font-weight: 600; font-size: 14.5px; cursor: pointer; border: 1.5px solid var(--line); background: #fff; color: var(--ink); font-family: inherit; transition: all .2s; }
        #ukAuthStrip .uas-login:hover { border-color: var(--frame-gold); box-shadow: 0 4px 14px rgba(212,175,55,.22); }
        #ukAuthStrip .uas-login svg { width: 17px; height: 17px; flex-shrink: 0; }
        #ukAuthStrip .uas-avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; border: 1.5px solid var(--frame-gold); flex-shrink: 0; }
        #ukAuthStrip .uas-hello { font-size: 14.5px; color: var(--ink-soft); white-space: nowrap; }
        #ukAuthStrip .uas-hello b { color: var(--ink); }
        #ukAuthStrip .uas-select { flex: 1; min-width: 210px; padding: 9px 10px; min-height: 42px; border: 1.5px solid var(--line); border-radius: 9px; background: #fff; color: var(--ink); font-family: inherit; font-size: 14.5px; outline: none; cursor: pointer; }
        #ukAuthStrip .uas-select:focus { border-color: var(--frame-gold); box-shadow: 0 0 0 3px rgba(212,175,55,.18); }
        #ukAuthStrip .uas-hoso { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--title-red); color: #fff; font-size: 13.5px; font-weight: 600; text-decoration: none; white-space: nowrap; }
        #ukAuthStrip .uas-hoso:hover { background: #4a0808; }
        #ukAuthStrip .uas-logout { background: none; border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px; font-size: 13px; color: var(--ink-faint); cursor: pointer; font-family: inherit; transition: all .2s; white-space: nowrap; }
        #ukAuthStrip .uas-logout:hover { border-color: #dc2626; color: #dc2626; }
        @media (max-width: 639px) {
            #ukAuthStrip .uas-select { flex-basis: 100%; }
        }

        /* Toolbar, Lưu / In / Chọn nền */
        #chartToolbar {
            display: flex;
            flex-wrap: wrap;
            justify-content: center;
            align-items: center;
            gap: 12px;
            padding: 6px 16px 18px;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .tuvi-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 9px 18px;
            border-radius: 8px;
            font-size: 13.5px;
            font-weight: 600;
            cursor: pointer;
            border: 1.5px solid var(--frame-gold);
            background: #fff;
            color: var(--title-red);
            font-family: "Be Vietnam Pro", sans-serif;
            transition: all .2s ease;
        }
        .tuvi-btn:hover { background: var(--frame-gold); color: #fff; }
        .tuvi-btn-primary {
            background: var(--title-red);
            color: #fff;
            border-color: var(--title-red);
        }
        .tuvi-btn-primary:hover { background: #4a0808; border-color: #4a0808; }

        /* ============================================================
           Ô CHỌN: Ẩn / Hiện SAO PHI HÓA (chữ đỏ nổi bật, mặc định ẩn)
           ============================================================ */
        .phihoa-box {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            flex-wrap: wrap;
            max-width: 100%;
            padding: 7px 14px;
            border-radius: 8px;
            border: 1.5px dashed var(--title-red);
            background: #fff6f6;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .phihoa-label {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            cursor: pointer;
            white-space: nowrap;
            user-select: none;
        }
        .phihoa-chk {
            flex: none;
            width: 18px;
            height: 18px;
            accent-color: var(--title-red);
            cursor: pointer;
        }
        .phihoa-txt {
            font-size: 13.5px;
            font-weight: 800;
            color: var(--title-red);
            letter-spacing: .2px;
        }
        .phihoa-note {
            font-size: 11.5px;
            line-height: 1.5;
            color: #6b5a4a;
            max-width: 360px;
            text-align: left;
        }
        .phihoa-note b { color: var(--title-red); }
        @media (max-width: 640px) {
            .phihoa-box { width: 100%; justify-content: center; }
            .phihoa-note { max-width: none; text-align: center; }
        }

        /* ============================================================
           BG PICKER, chọn nền Ngũ Hành (giữ nguyên ý tưởng cũ)
           ============================================================ */
        .bg-picker {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            padding: 6px 12px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 8px;
        }
        .bg-picker .bgp-label {
            font-size: 11px;
            color: var(--ink-soft);
            font-weight: 600;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            white-space: nowrap;
        }
        .bg-picker .bgp-dots { display: inline-flex; gap: 6px; }
        .bgp-dot {
            position: relative;
            width: 26px; height: 26px;
            border-radius: 50%;
            border: 1.5px solid #D1D5DB;
            background: var(--dot-bg, #fff);
            cursor: pointer;
            padding: 0;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: "Noto Serif", serif;
            font-size: 11px;
            font-weight: 700;
            color: var(--dot-fg, #4A151C);
            transition: transform .2s, border-color .2s, box-shadow .2s;
        }
        .bgp-dot:hover {
            transform: scale(1.15);
            border-color: var(--dot-fg);
            box-shadow: 0 2px 8px rgba(0,0,0,.12);
        }
        .bgp-dot.active {
            border-color: var(--dot-fg);
            border-width: 2.5px;
            transform: scale(1.1);
            box-shadow: 0 2px 6px rgba(0,0,0,.1);
        }
        .bgp-dot .bgp-tip {
            position: absolute;
            top: calc(100% + 6px);
            left: 50%;
            transform: translateX(-50%);
            font-size: 10.5px;
            white-space: nowrap;
            color: #fff;
            background: rgba(31,41,55,.95);
            padding: 3px 8px;
            border-radius: 4px;
            opacity: 0;
            pointer-events: none;
            transition: opacity .15s;
            font-family: "Be Vietnam Pro", sans-serif;
            letter-spacing: .5px;
            font-weight: 500;
            z-index: 5;
        }
        .bgp-dot:hover .bgp-tip { opacity: 1; }

        /* ============================================================
           A4 SHEET, KÍCH THƯỚC 210mm × 297mm CỐ ĐỊNH
           Không co giãn dù xem trên màn hình nào.
           ============================================================ */
        .tuvi-viewport {
            width: 100%;
            overflow-x: auto;
            overflow-y: visible;
            -webkit-overflow-scrolling: touch;
            padding: 18px 0 32px;
            background: var(--bg-page);
            transition: background-color .35s ease;
        }
        /* Wrapper bên trong viewport: bọc tờ A4 và đảm bảo viewport không nén */
        .tuvi-stage {
            width: max-content;
            margin: 0 auto;
            padding: 0 16px;
        }
        .tuvi-sheet {
            /* ─── KHÓA BỀ NGANG THEO A4, CHIỀU CAO TỰ DO ─── */
            width: 210mm;
            min-width: 210mm;
            min-height: 297mm;   /* tối thiểu A4, nở thêm nếu cần */

            background: var(--sheet-bg);
            box-shadow: 0 10px 32px rgba(60,40,10,.22);
            position: relative;
            padding: 0;
            display: flex;
            flex-direction: column;
            color: var(--ink);
            font-family: "Be Vietnam Pro", "Noto Serif", serif;
            transition: background-color .35s ease;
        }
        /* Khung trang trí & header/footer đã bỏ, chart chiếm trọn tờ A4 */
        .sheet-corner, .sheet-head, .sheet-foot { display: none !important; }

        /* ============================================================
           KHUNG 4×4 THIÊN BÀN
           ============================================================ */
        .chart-container {
            flex: 1 1 auto;
            width: 100%;
            margin: 0;
            display: grid;
            /* minmax(0,1fr) → ép 4 cột chia đều tuyệt đối, không bị content kéo lệch */
            grid-template-columns: repeat(4, minmax(0, 1fr));
            /* minmax(min-content,1fr) → mỗi hàng vừa nở đều chia 4 hàng A4,
               vừa cho phép cao hơn nếu nội dung dày, không cắt chữ */
            grid-template-rows: repeat(4, auto);
            grid-template-areas:
                "p-ty p-ngo p-mui p-than"
                "p-thin center center p-dau"
                "p-mao center center p-tuat"
                "p-dan p-suu p-ty2 p-hoi";
            gap: 0;
            border: 0.3mm solid var(--frame-deep);
            background: var(--sheet-bg-2);
            position: relative;
            z-index: 1;
            min-height: 0;
        }

        /* Từng cung */
        .palace-box {
            background: var(--sheet-bg-2);
            border: 0.15mm solid var(--line);
            padding: 6px;
            font-size: 8.4pt;
            line-height: 1.8;
            display: flex;
            flex-direction: column;
            color: var(--ink);
            position: relative;
            /* min-width: 0 → cho phép cột grid chia đều, không bị content kéo lệch */
            min-width: 0;
            min-height: 0;
            /* Không khoá overflow: chữ tràn sẽ được ô tự dài thêm */
            overflow: visible;
            word-wrap: break-word;
            overflow-wrap: break-word;
        }
        .palace-box[data-chi="Tỵ"]   { grid-area: p-ty; }
        .palace-box[data-chi="Ngọ"]  { grid-area: p-ngo; }
        .palace-box[data-chi="Mùi"]  { grid-area: p-mui; }
        .palace-box[data-chi="Thân"] { grid-area: p-than; }
        .palace-box[data-chi="Thìn"] { grid-area: p-thin; }
        .palace-box[data-chi="Dậu"]  { grid-area: p-dau; }
        .palace-box[data-chi="Mão"]  { grid-area: p-mao; }
        .palace-box[data-chi="Tuất"] { grid-area: p-tuat; }
        .palace-box[data-chi="Dần"]  { grid-area: p-dan; }
        .palace-box[data-chi="Sửu"]  { grid-area: p-suu; }
        .palace-box[data-chi="Tý"]   { grid-area: p-ty2; }
        .palace-box[data-chi="Hợi"]  { grid-area: p-hoi; }

        /* Top: Can Chi · Tuần Triệt · Đại Hạn */
        .palace-top {
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            font-size: 7.4pt;
            color: var(--ink-soft);
            min-height: 3.2mm;
            padding: 0 0.3mm;
            line-height: 1.8;
        }
        .palace-top > *:nth-child(1) { justify-self: start; }
        .palace-top > *:nth-child(2) { justify-self: center; }
        .palace-top > *:nth-child(3) { justify-self: end; }

        /* Tên cung */
        .palace-name-container {
            text-align: center;
            font-weight: 700;
            color: var(--title-red);
            font-size: 12.5pt;
            padding: 0.8mm 0 0.5mm;
            border-bottom: none;
            margin: 0.3mm 0 0.8mm;
            line-height: 1.05;
            letter-spacing: 0.4px;
            font-family: "Noto Serif", serif;
            text-transform: uppercase;
        }
        .palace-name-ornament {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            margin-bottom: 0.5mm;
        }
        .palace-name-ornament .ornament-line {
            flex: 1;
            height: 1px;
            background: linear-gradient(90deg, transparent, var(--frame-gold), transparent);
        }
        .palace-name-ornament .ornament-diamond {
            color: var(--frame-gold);
            font-size: 6pt;
        }
        .palace-name-container .cung-menh-mark {
            border-bottom: none;
            padding-bottom: 0;
        }
        .luu-nguyet-han { font-weight: 700; display: inline-flex; flex-direction: column; line-height: 1.25; }
        /* Khoảng ngày dương của nguyệt hạn, dòng phụ nhỏ, nhạt, dưới "T.x" */
        .luu-nguyet-han .lnh-range { font-weight: 400; font-size: 5.6pt; opacity: .8; white-space: nowrap; letter-spacing: -0.1px; }

        /* Tên cung & sao lưu đổi màu theo nền Ngũ Hành */
        html[data-bg="kim"]  .palace-name-container,
        html[data-bg="kim"]  .star-luu,
        html[data-bg="kim"]  .luu-nguyet-han,
        html[data-bg="kim"]  .tieu-han-container,
        html[data-bg="kim"]  .ci-han-title,
        html[data-bg="kim"]  .ci-brand-name,
        html[data-bg="kim"]  .ci-name,
        html[data-bg="kim"]  .ci-foot-right,
        html[data-bg="kim"]  .bt-can,
        html[data-bg="kim"]  .bt-chi,
        html[data-bg="kim"]  .bt-title,
        html[data-bg="kim"]  .cpt-val,
        html[data-bg="kim"]  .ci-section-title { color: var(--hanh-kim) !important; }

        html[data-bg="moc"]  .palace-name-container,
        html[data-bg="moc"]  .star-luu,
        html[data-bg="moc"]  .luu-nguyet-han,
        html[data-bg="moc"]  .tieu-han-container,
        html[data-bg="moc"]  .ci-han-title,
        html[data-bg="moc"]  .ci-brand-name,
        html[data-bg="moc"]  .ci-name,
        html[data-bg="moc"]  .ci-foot-right,
        html[data-bg="moc"]  .bt-can,
        html[data-bg="moc"]  .bt-chi,
        html[data-bg="moc"]  .bt-title,
        html[data-bg="moc"]  .cpt-val,
        html[data-bg="moc"]  .ci-section-title { color: var(--hanh-moc) !important; }

        html[data-bg="thuy"] .palace-name-container,
        html[data-bg="thuy"] .star-luu,
        html[data-bg="thuy"] .luu-nguyet-han,
        html[data-bg="thuy"] .tieu-han-container,
        html[data-bg="thuy"] .ci-han-title,
        html[data-bg="thuy"] .ci-brand-name,
        html[data-bg="thuy"] .ci-name,
        html[data-bg="thuy"] .ci-foot-right,
        html[data-bg="thuy"] .bt-can,
        html[data-bg="thuy"] .bt-chi,
        html[data-bg="thuy"] .bt-title,
        html[data-bg="thuy"] .cpt-val,
        html[data-bg="thuy"] .ci-section-title { color: var(--hanh-thuy) !important; }

        html[data-bg="hoa"]  .palace-name-container,
        html[data-bg="hoa"]  .star-luu,
        html[data-bg="hoa"]  .luu-nguyet-han,
        html[data-bg="hoa"]  .tieu-han-container,
        html[data-bg="hoa"]  .ci-han-title,
        html[data-bg="hoa"]  .ci-brand-name,
        html[data-bg="hoa"]  .ci-name,
        html[data-bg="hoa"]  .ci-foot-right,
        html[data-bg="hoa"]  .bt-can,
        html[data-bg="hoa"]  .bt-chi,
        html[data-bg="hoa"]  .bt-title,
        html[data-bg="hoa"]  .cpt-val,
        html[data-bg="hoa"]  .ci-section-title { color: var(--hanh-hoa) !important; }

        html[data-bg="tho"]  .palace-name-container,
        html[data-bg="tho"]  .star-luu,
        html[data-bg="tho"]  .luu-nguyet-han,
        html[data-bg="tho"]  .tieu-han-container,
        html[data-bg="tho"]  .ci-han-title,
        html[data-bg="tho"]  .ci-brand-name,
        html[data-bg="tho"]  .ci-name,
        html[data-bg="tho"]  .ci-foot-right,
        html[data-bg="tho"]  .bt-can,
        html[data-bg="tho"]  .bt-chi,
        html[data-bg="tho"]  .bt-title,
        html[data-bg="tho"]  .cpt-val,
        html[data-bg="tho"]  .ci-section-title { color: var(--hanh-tho) !important; }

        /* ── Nền Trắng thuần, tất cả chữ đổi sang đen thuần ── */
        html[data-bg="trang"] .palace-name-container,
        html[data-bg="trang"] .star-luu,
        html[data-bg="trang"] .luu-nguyet-han,
        html[data-bg="trang"] .tieu-han-container,
        html[data-bg="trang"] .ci-han-title,
        html[data-bg="trang"] .ci-brand-name,
        html[data-bg="trang"] .ci-name,
        html[data-bg="trang"] .ci-foot-right,
        html[data-bg="trang"] .bt-can,
        html[data-bg="trang"] .bt-chi,
        html[data-bg="trang"] .bt-title,
        html[data-bg="trang"] .cpt-val,
        html[data-bg="trang"] .ci-section-title,
        html[data-bg="trang"] .palace-top,
        html[data-bg="trang"] .star-chinh,
        html[data-bg="trang"] .star-phu,
        html[data-bg="trang"] .tuvi-page-title,
        html[data-bg="trang"] .tuvi-page-sub { color: #000000 !important; }

        /* Nội dung sao trong cung */
        .stars-body {
            flex: 1 1 auto;
            display: flex;
            flex-direction: column;
            min-height: 0;
            line-height: 1.8;
        }
        .main-stars-container {
            text-align: center;
            padding: 0.4mm 0;
            min-height: 7mm;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            gap: 0;
            line-height: 1.8;
        }
        .aux-stars-container {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            width: 100%;
            column-gap: 1mm;
            overflow: visible;
            margin-top: 0.6mm;
            line-height: 1.8;
        }
        .aux-stars-container > div:first-child { text-align: left; }
        .aux-stars-container > div:last-child  { text-align: right; }
        .aux-stars-container .star { display: block; padding: 0; margin: 0; }

        .luu-stars-container {
            padding: 0.4mm 0;
            text-align: center;
            min-height: 4mm;
            border-top: 0.15mm dotted var(--line);
            line-height: 1.8;
        }
        .phi-hoa-details-container {
            padding-top: 0.4mm;
            border-top: 0.15mm dotted var(--line);
            font-size: 7.4pt;
            line-height: 1.8;
            text-align: left;
            min-height: 4mm;
            overflow: visible;
            display: flex;
            flex-direction: column;
        }
        .phi-hoa-item { white-space: normal; word-break: keep-all; line-height: 1.8; }
        .phi-hoa-item.phi-hoa-loc   { color: var(--hoa-loc); }
        .phi-hoa-item.phi-hoa-quyen { color: var(--hoa-quyen); }
        .phi-hoa-item.phi-hoa-khoa  { color: var(--hoa-khoa); }
        .phi-hoa-item.phi-hoa-ky    { color: var(--hoa-ky); }
        /* Ẩn / hiện khối SAO PHI HÓA (bật tắt bằng ô chọn trên thanh công cụ, mặc định ẩn) */
        body.uk-hide-phihoa .phi-hoa-details-container,
        body.uk-hide-phihoa .ci-brand-sub,
        body.uk-hide-phihoa .cpt-block { display: none !important; }

        .che-hoa-container { display:flex; flex-wrap:wrap; gap:0.5mm; justify-content:center; padding-top:0.4mm; }
        .che-hoa-tag { position:relative; cursor:pointer; font-size:6.4pt; font-weight:700; color:#7a2e00; background:#f6e3a8; border:0.15mm solid #d99b1c; border-radius:1mm; padding:0 0.8mm; line-height:1.4; white-space:normal; text-align:center; }

        .tieu-han-container {
            font-size: 7.5pt;
            color: var(--color-luu-tinh);
            font-weight: 600;
            padding: 0.3mm 0;
            line-height: 1.8;
            min-height: 3.2mm;
            text-align: center;
            border-top: 0.15mm dotted var(--line);
            margin-top: auto;
        }
        .tieu-han-container span { margin: 0 1.5px; }

        .palace-footer {
            font-size: 7.4pt;
            color: var(--ink-soft);
            border-top: 0.15mm solid var(--line);
            display: grid;
            grid-template-columns: 1fr auto 1fr;
            align-items: center;
            margin-top: auto;
            min-height: 3.2mm;
            padding: 0.4mm 0.2mm 0;
            line-height: 1.8;
        }
        .tuan-triet-container { display: flex; gap: 3px; font-weight: bold; }
        .palace-tuan  { color: var(--color-tuan-text); }
        .palace-triet { color: var(--color-triet-text); }

        /* Star styling */
        .star {
            line-height: 1.8;
            white-space: normal;
            font-size: 8.4pt;
            display: inline-block;
            word-break: keep-all;
        }
        .star-main {
            font-weight: 700;
            font-size: 10pt;
            font-family: "Noto Serif", serif;
            letter-spacing: 0.2px;
            line-height: 1.8;
            text-transform: uppercase;
        }
        .star-main .dac-ham, .star .dac-ham {
            font-weight: 700;
            font-size: 7pt;
            vertical-align: middle;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .star-luu {
            color: var(--color-luu-tinh);
            font-weight: 600;
            font-size: 7.6pt;
            margin: 0 1px;
            line-height: 1.8;
        }
        .star-hoa-tinh { font-weight: 700; font-size: 8pt; }
        .dac-ham-good    { color: var(--dh-good); }
        .dac-ham-neutral { color: var(--dh-neutral); }
        .dac-ham-bad     { color: var(--dh-bad); }

        /* 🔗 Liên kết sao → bài viết chi tiết */
        .star-link { color: inherit; text-decoration: none; cursor: pointer; border-bottom: 1px dotted rgba(150,110,20,.45); transition: border-color .15s ease, filter .15s ease; }
        .star-link:hover { border-bottom-color: currentColor; filter: brightness(1.18); }
        .star-link:focus-visible { outline: 2px solid var(--accent-purple, #7c3aed); outline-offset: 1px; border-radius: 2px; }
        @media print { .star-link { border-bottom: none !important; color: inherit !important; } }
        /* Ẩn gạch chân link sao khi chụp ảnh/lưu PNG (giữ 1px trong suốt để không lệch layout) */
        .uk-capturing .star-link { border-bottom-color: transparent !important; }

        /* Banner giới thiệu tính năng lá số tương tác */
        /* Gợi ý chạm sao: 1 dòng chữ đơn, không đóng khung, nằm sát bên trên lá số */
        .star-link-line { text-align:center; margin:6px auto 0; padding:0 14px; color:#7a5c00; font-size:14px; font-weight:600; font-family:"Be Vietnam Pro",sans-serif; line-height:1.5; }
        @media (max-width:640px){ .star-link-line{ font-size:13px; } }

        /* Chính tinh, màu theo Ngũ Hành bản thể */
        .star-tu-vi, .star-thien-phu { color: var(--star-tho); }
        .star-thien-co, .star-thien-luong { color: var(--star-moc); }
        .star-thai-duong, .star-liem-trinh { color: var(--star-hoa); }
        .star-vu-khuc, .star-that-sat { color: var(--star-kim); }
        .star-thien-dong, .star-thien-tuong, .star-pha-quan, .star-thai-am, .star-cu-mon, .star-tham-lang { color: var(--star-thuy); }

        /* Phụ tinh, Ngũ Hành × Khí */
        .aux-stars-container .star { font-weight: 500; }
        .aux-stars-container .star.phu-trung    { color: var(--phu-trung); }
        .aux-stars-container .star.phu-kim-cat  { color: var(--phu-kim-cat); }
        .aux-stars-container .star.phu-kim-hung { color: var(--phu-kim-hung); font-style: italic; }
        .aux-stars-container .star.phu-moc-cat  { color: var(--phu-moc-cat); }
        .aux-stars-container .star.phu-moc-hung { color: var(--phu-moc-hung); font-style: italic; }
        .aux-stars-container .star.phu-thuy-cat { color: var(--phu-thuy-cat); }
        .aux-stars-container .star.phu-thuy-hung{ color: var(--phu-thuy-hung); font-style: italic; }
        .aux-stars-container .star.phu-hoa-cat  { color: var(--phu-hoa-cat); }
        .aux-stars-container .star.phu-hoa-hung { color: var(--phu-hoa-hung); font-style: italic; }
        .aux-stars-container .star.phu-tho-cat  { color: var(--phu-tho-cat); }
        .aux-stars-container .star.phu-tho-hung { color: var(--phu-tho-hung); font-style: italic; }
        /* Phụ tinh, màu THUẦN theo Ngũ Hành (quy ước: tốt bên trái, xấu bên phải) */
        .aux-stars-container .star.phu-hanh-kim  { color: var(--star-kim); }
        .aux-stars-container .star.phu-hanh-moc  { color: var(--star-moc); }
        .aux-stars-container .star.phu-hanh-thuy { color: var(--star-thuy); }
        .aux-stars-container .star.phu-hanh-hoa  { color: var(--star-hoa); }
        .aux-stars-container .star.phu-hanh-tho  { color: var(--star-tho); }
        .aux-stars-container .star.font-semibold { font-weight: 700 !important; }

        /* Tứ Hóa */
        .star-hoa-loc   { color: var(--hoa-loc); }
        .star-hoa-quyen { color: var(--hoa-quyen); }
        .star-hoa-khoa  { color: var(--hoa-khoa); }
        .star-hoa-ky    { color: var(--hoa-ky); }

        /* Tràng Sinh */
        .vts-Tràng-Sinh, .vts-Mộc-Dục, .vts-Quan-Đới, .vts-Lâm-Quan, .vts-Đế-Vượng { color: #dc2626; font-weight: 700; }
        .vts-Suy, .vts-Bệnh, .vts-Tử, .vts-Mộ, .vts-Tuyệt, .vts-Thai, .vts-Dưỡng { color: #1c1410; }

        /* Huyền Khí */
        .huyen-khi-positive { color: var(--hk-pos); font-weight: bold; }
        .huyen-khi-negative { color: var(--hk-neg); font-weight: bold; }

        /* ============================================================
           CENTER, Ô trung tâm 2×2
           ============================================================ */
        .center-info {
            grid-area: center;
            background: var(--sheet-bg-3);
            border: 0.15mm solid var(--line);
            padding: 0;
            position: relative;
            display: flex;
            flex-direction: column;
            min-width: 0;
            overflow: visible;
            justify-content: flex-start;
        }
        .ci-root {
            width: 100%;
            padding: 3.5mm 4.5mm 2.5mm;
            display: flex;
            flex-direction: column;
            font-family: "Be Vietnam Pro", system-ui, sans-serif;
            color: var(--ink);
            box-sizing: border-box;
            overflow: visible;
            flex: 1 1 auto;
            min-height: 100%;
            position: relative;
        }

        .ci-brand { text-align: center; margin-bottom: 1.2mm; }
        .ci-brand-name {
            font-family: "Noto Serif", serif;
            font-weight: 700;
            color: var(--frame-deep);
            font-size: 22pt;
            letter-spacing: 1px;
            text-transform: uppercase;
        }
        .ci-brand-sub {
            font-size: 8pt;
            color: var(--ink-soft);
            letter-spacing: 1.5px;
            margin-top: 0.4mm;
            font-style: normal;
            font-family: "Noto Serif", serif;
        }

        .ci-name-block {
            text-align: center;
            margin: 1mm 0 0.2mm;
            padding: 1.2mm 0 0.3mm;
        }
        .ci-ornament {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin: 0.5mm 0;
        }
        .ci-ornament .ornament-line {
            flex: 1;
            height: 1px;
            min-height: 1px;
            background: linear-gradient(90deg, transparent, var(--frame-gold), transparent);
        }
        .ci-ornament .ornament-diamond {
            color: var(--frame-gold);
            font-size: 8pt;
        }
        .ci-name {
            font-family: "Noto Serif", serif;
            font-size: 18pt;
            font-weight: 700;
            color: var(--title-red);
            margin: 0;
            line-height: 1.05;
            letter-spacing: 1.2px;
        }
        .ci-gender {
            font-size: 8pt;
            color: var(--ink-soft);
            margin-top: 0.5mm;
            letter-spacing: 1.5px;
            text-transform: uppercase;
            font-weight: 500;
        }

        .ci-date-block {
            text-align: center;
            font-size: 8.5pt;
            color: var(--ink);
            line-height: 1.8;
            margin: 0.3mm 0 1.2mm;
        }
        .ci-date-block p { margin: 0; }
        .ci-date-block b { color: var(--title-red); font-weight: 600; }
        .lunar-line, .solar-line { color: var(--ink-soft); }
        .hour-line { font-size: 8.5pt; color: var(--ink); }

        /* Bát tự tiết khí */
        .bt-block { margin: 1.6mm 0 0; }
        .bt-tier {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            margin-bottom: 1.2mm;
        }
        .bt-title {
            font-family: "Noto Serif", serif;
            color: var(--title-red);
            font-size: 10pt;
            letter-spacing: 3px;
            font-weight: 700;
        }
        .ornament-line {
            flex: 1;
            height: 1px;
            min-height: 1px;
            background: linear-gradient(90deg, transparent, var(--frame-gold), transparent);
        }
        .ornament-diamond {
            color: var(--frame-gold);
            font-size: 8pt;
        }
        .bt-pillars {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 1.5mm;
        }
        .bt-pillar {
            background: transparent;
            border: none;
            padding: 0;
            text-align: center;
        }
        .bt-label {
            font-size: 7pt;
            color: var(--ink-soft);
            letter-spacing: 1.5px;
            font-weight: 600;
            text-transform: uppercase;
            margin-bottom: 0;
            display: block;
        }
        .bt-can, .bt-chi {
            font-family: "Noto Serif", serif;
            font-size: 9pt;
            font-weight: 700;
            color: var(--title-red);
            line-height: 1.15;
            display: inline;
        }
        /* Giữ Can + Chi trên cùng một dòng, không để "Nhâm Thân" xuống hàng */
        .bt-block .bt-pillar { white-space: nowrap; }
        .bt-can::after {
            content: " ";
        }
        .bt-meta {
            margin-top: 1.4mm;
            text-align: center;
            font-size: 8pt;
            color: var(--ink-soft);
            line-height: 1.8;
        }
        .bt-meta b { color: var(--title-red); font-weight: 600; }
        .bt-nhat { color: var(--frame-gold); font-size: 7pt; vertical-align: super; }

        /* ── Khối nền nhẹ đổi màu theo nút chọn nền Ngũ Hành ── */
        .ci-soft-box {
            background: #ffffff;
            border: 0.2mm solid var(--frame-gold);
            border-radius: 1.6mm;
            padding: 1.8mm 2.2mm 2mm;
            margin: 1.6mm 0 0;
        }

        /* Các Cung Phong Thủy (Cung Sanh · Cung Phi · Cung Cưới · Đông/Tây) */
        .cpt-block { margin: 1.6mm 0 0; }
        .cpt-val {
            font-family: "Noto Serif", serif;
            font-size: 9pt;
            font-weight: 700;
            color: var(--title-red);
            line-height: 1.15;
        }

        .ci-section-title {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 6px;
            font-family: "Noto Serif", serif;
            color: var(--title-red);
            font-size: 10pt;
            letter-spacing: 3px;
            font-weight: 700;
            margin: 1.4mm 0 1mm;
        }

        .ci-info-grid {
            display: grid;
            grid-template-columns: max-content 1fr max-content 1fr;
            column-gap: 2.5mm;
            row-gap: 1mm;
            font-size: 8pt;
            max-width: 100mm;
            margin: 0 auto;
            align-items: baseline;
        }
        .ci-info-grid .k { text-align: right; color: var(--ink-soft); font-weight: 500; white-space: nowrap; }
        .ci-info-grid .v { text-align: left; font-weight: 700; white-space: nowrap; }
        .ci-info-grid .v-cyan   { color: var(--accent-cyan); }
        .ci-info-grid .v-purple { color: var(--accent-purple); }
        /* Hàng căn giữa (Cân Lượng, Tổng): nhãn và số sát nhau, đặt chính giữa */
        .ci-info-grid .ci-center-row {
            grid-column: 1 / -1;
            display: flex;
            justify-content: center;
            align-items: baseline;
            gap: 1.5mm;
        }
        .ci-info-grid .ci-center-row.ci-divider {
            margin-top: 1mm;
            padding-top: 1mm;
            border-top: 0.15mm dotted var(--line);
        }
        .ci-info-grid .ci-center-row .v { font-size: 9pt; }
        .ci-info-grid .ci-cachcuc { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 1.2mm; justify-content: center; margin-top: 1mm; }
        .ci-info-grid .ci-cachcuc { overflow: visible; }
        .ci-cachcuc-tag { position: relative; cursor: pointer; white-space: nowrap; font-size: 7.5pt; font-weight: 700; color: #5a3b00; background: linear-gradient(160deg,#ffe9b0,#f3c14b); border: 0.15mm solid #d99b1c; border-radius: 1.2mm; padding: 0.3mm 1.5mm; line-height: 1.5; outline: none; }
        .ci-cachcuc-tag .cc-tip, .che-hoa-tag .cc-tip, .nh-phai .cc-tip {
            display: none;
            position: absolute;
            bottom: 135%;
            left: 50%;
            transform: translateX(-50%);
            width: 54mm;
            max-width: 72vw;
            background: #2a1a05;
            color: #fff7e6;
            font-size: 7pt;
            font-weight: 500;
            line-height: 1.55;
            text-align: left;
            padding: 1.6mm 2mm;
            border-radius: 1.4mm;
            box-shadow: 0 1.5mm 4mm rgba(0,0,0,.3);
            z-index: 60;
            white-space: normal;
        }
        .ci-cachcuc-tag .cc-tip::after, .che-hoa-tag .cc-tip::after, .nh-phai .cc-tip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 1.2mm solid transparent; border-top-color: #2a1a05; }
        .ci-cachcuc-tag:hover .cc-tip,
        .ci-cachcuc-tag:focus .cc-tip,
        .ci-cachcuc-tag.cc-open .cc-tip,
        .che-hoa-tag:hover .cc-tip,
        .che-hoa-tag:focus .cc-tip,
        .che-hoa-tag.cc-open .cc-tip,
        .nh-phai:hover .cc-tip,
        .nh-phai:focus .cc-tip,
        .nh-phai.cc-open .cc-tip { display: block; }
        @media print { .ci-cachcuc-tag .cc-tip, .che-hoa-tag .cc-tip, .nh-phai .cc-tip { display: none !important; } }
        /* Nhãn phái khởi nguyệt hạn (QT / VN): rê chuột hoặc chạm để xem giải nghĩa */
        .nh-phai { position: relative; cursor: pointer; outline: none; border-bottom: 0.2mm dotted currentColor; }
        .luu-nguyet-han .lnh-top { display: inline; white-space: nowrap; }

        .ci-han-box {
            margin: 1.6mm auto 0;
            margin-bottom: 8px;
            max-width: 84mm;
            background: linear-gradient(180deg, rgba(110,14,10,.06), rgba(212,175,55,.06));
            border: 0.5px solid var(--frame-gold);
            border-radius: 2mm;
            padding: 1.4mm 2mm;
            text-align: center;
        }
        .ci-han-title { color: var(--title-red); font-weight: 700; font-size: 9.5pt; }
        .ci-han-sub   { color: var(--ink-soft); font-size: 8pt; margin-top: 0.3mm; }
        .ci-han-age   { color: var(--ink); font-size: 8.5pt; margin-top: 0.5mm; }
        .ci-han-age b { color: var(--frame-gold); }
        .ci-han-phai  { color: var(--ink); font-size: 7pt; margin-top: 0.5mm; opacity: .75; font-style: italic; }

        .ci-foot {
            margin-top: auto;
            text-align: center;
            font-size: 7.5pt;
            color: var(--ink-soft);
            padding-top: 2mm;
        }
        .ci-foot a { color: var(--frame-gold); text-decoration: none; }
        .ci-foot-row {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            margin-top: 0.5mm;
            font-size: 7pt;
        }
        .ci-foot-left, .ci-foot-right {
            color: var(--frame-deep);
            font-weight: 600;
            letter-spacing: 1px;
        }

        /* ── Footer của tờ A4 ── */
        .sheet-foot {
            flex: 0 0 auto;
            text-align: center;
            font-size: 8pt;
            color: var(--ink-soft);
            margin: 0 6mm;
            padding: 1.5mm 0 0;
            border-top: 0.5px dashed var(--frame-gold);
            font-family: "Noto Serif", serif;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 1;
            font-style: italic;
        }
        .sheet-foot strong { color: var(--title-red); font-weight: 700; font-style: normal; }

        /* Form ẩn */
        #formCard { display: none !important; }

        /* Trạng thái ẩn / fade */
        .hidden { display: none !important; }
        @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
        .fade-in { animation: fadeIn .6s ease-out forwards; }

        /* ============================================================
           IN ẤN, A4 PORTRAIT, KHÔNG SCALE
           Vì .tuvi-sheet đã đúng 210×297mm → in ra giấy A4 chuẩn 1:1
           ============================================================ */
        @media print {
            @page { size: A4 portrait; margin: 0; }

            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }

            html, body {
                background: #fff !important;
                margin: 0 !important;
                padding: 0 !important;
            }

            /* Ẩn mọi thứ ngoài tờ A4, chỉ in lá số */
            #site-nav, #site-footer,
            .tuvi-page-header,
            #chartToolbar,
            #formCard,
            header, footer { display: none !important; }

            .container { padding: 0 !important; margin: 0 !important; max-width: none !important; }
            #resultSection { padding: 0 !important; margin: 0 !important; display: block !important; }
            .tuvi-viewport {
                padding: 0 !important;
                background: #fff !important;
                overflow: visible !important;
                display: block !important;
            }
            .tuvi-stage {
                padding: 0 !important;
                margin: 0 !important;
                width: 210mm !important;
            }
            .tuvi-sheet {
                margin: 0 !important;
                box-shadow: none !important;
                page-break-after: always;
                break-inside: avoid;
            }

            /* Ép nền trắng khi in dù đang chọn hành nào */
            html[data-bg], :root {
                --sheet-bg: #ffffff !important;
                --sheet-bg-2: #ffffff !important;
                --sheet-bg-3: #ffffff !important;
                --bg-page: #ffffff !important;
                --ci-soft-bg: #ffffff !important;
                --ci-soft-border: #d8c79b !important;
            }
            .tuvi-sheet, .palace-box, .center-info, .ci-root { background: #ffffff !important; }
            .bt-pillar { background: transparent !important; }
            .ci-han-box { background: #fff8f0 !important; }
        }

        /* ============================================================
           MÀN HÌNH NHỎ, KHÔNG CO GIẢN, CHỈ SCROLL
           ============================================================ */
        /* Gợi ý cuộn ngang lá số, chỉ hiện trên màn hình hẹp hơn tờ A4 */
        #scrollHint { display: none; }
        @media (max-width: 800px) {
            #scrollHint {
                display: flex;
                justify-content: center;
                padding: 2px 12px 0;
                transition: opacity .6s ease;
            }
            #scrollHint span {
                display: inline-flex;
                align-items: center;
                gap: 8px;
                background: rgba(28, 20, 16, .82);
                color: #f6e9c9;
                font-size: 13.5px;
                font-weight: 500;
                padding: 8px 16px;
                border-radius: 999px;
                box-shadow: 0 3px 10px rgba(0,0,0,.18);
            }
            #scrollHint.gone { opacity: 0; }
        }

        /* Hiệu ứng an sao: lá số hiện lên nhẹ nhàng */
        @keyframes sheetIn {
            from { opacity: 0; transform: translateY(14px); }
            to   { opacity: 1; transform: none; }
        }
        .tuvi-sheet { animation: sheetIn .55s ease-out; }
        @media print { .tuvi-sheet { animation: none; } }

        @media (max-width: 800px) {
            .tuvi-page-title { font-size: 26px; }
            .tuvi-page-sub   { font-size: 13px; padding: 0 14px; }
            .tuvi-viewport   { padding: 12px 0 24px; justify-content: flex-start; }
            /* .tuvi-sheet vẫn giữ 210mm, viewport scroll trái phải */
        }
        @media (max-width: 639px) {
            .bg-picker { padding: 5px 10px; gap: 8px; }
            .bg-picker .bgp-label { font-size: 10px; letter-spacing: 1px; }
            .bgp-dot { width: 22px; height: 22px; font-size: 10px; }
            /* Giữ nhãn chữ trên nút (dễ hiểu với người lớn tuổi), chỉ thu gọn kích thước */
            .tuvi-btn { padding: 9px 13px; font-size: 13px; }
            #chartToolbar { gap: 8px; }
        }

        /* ============================================================
           SAT MEP 2 BEN TREN MOBILE, tan dung be ngang man hinh
           Cac wrapper noi dung chi chua 6px moi ben (khong tinh la so A4
           trong .tuvi-viewport von co dinh 210mm va cuon ngang co chu dich).
           ============================================================ */
        /* Đồng bộ #ukXuSection (CSS gốc nằm trong uk-xu.js, nạp sau → cần !important) */
        #ukXuSection {
            max-width: var(--uk-block-w) !important;
            padding-left: 16px !important;
            padding-right: 16px !important;
        }

        @media (max-width: 640px) {
            .uk-pkg-wrap   { padding-left: 6px !important; padding-right: 6px !important; }
            .lg-section    { padding-left: 6px !important; padding-right: 6px !important; }
            #chartToolbar  { padding-left: 6px !important; padding-right: 6px !important; }
            #ukXuSection   { padding-left: 6px !important; padding-right: 6px !important; }
            #ukAuthStrip   { padding-left: 6px !important; padding-right: 6px !important; }
            #cFormWrap     { padding-left: 6px !important; padding-right: 6px !important; }
            .uk-next       { padding-left: 6px !important; padding-right: 6px !important; }
        }

        /* responsive.css ép .chart-container { min-width: 960px } cho thiết kế cũ.
           A4 mới đặt chart bên trong .tuvi-sheet (rộng 210mm) nên cần huỷ. */
        .tuvi-sheet .chart-container {
            min-width: 0 !important;
            width: 100% !important;
            height: 100% !important;
            margin: 0 !important;
        }
        .tuvi-sheet,
        .tuvi-stage,
        .tuvi-viewport { min-width: 0 !important; }

        /* responsive.css đặt html, body { overflow-x: hidden }.
           Cho phép scroll ngang ở .tuvi-viewport trên màn hình hẹp. */
        .tuvi-viewport { overflow-x: auto !important; }

        /* Ghi đè responsive.css: [class*="container"] { padding-left/right: 28px !important } */
        [class*="container"] {
            padding-left: 0 !important;
            padding-right: 0 !important;
        }

        /* ============================================================
           PHÓNG TO LÁ SỐ TRÊN MÀN HÌNH
           Tờ A4 chỉ rộng 210mm (~794px) nên nhìn hẹp hơn khối luận giải
           bên dưới (rộng ~1048px). Dùng zoom CHỈ trên màn hình để lá số
           rộng bằng khối luận giải và đồng thời phóng to mọi cỡ chữ nhỏ.
           Không đặt zoom lên .tuvi-sheet (phần được chụp ảnh & in) để giữ
           ảnh lưu và bản in A4 đúng tỉ lệ 1:1.  1048 / 794 ≈ 1.32
           ============================================================ */
        @media screen and (min-width: 1024px) {
            .tuvi-stage { zoom: 1.32; }
        }
        @media screen and (min-width: 768px) and (max-width: 1023px) {
            .tuvi-stage { zoom: 1.12; }
        }

        /* ============================================================
           GÓI LUẬN GIẢI, Thiết kế thân thiện người lớn tuổi
           Nguyên tắc: chữ to (≥16px), nút lớn (≥48px), 1 chạm là chọn
           ============================================================ */
        .uk-pkg-wrap {
            max-width: var(--uk-block-w);
            margin: 36px auto 120px;
            padding: 0 16px;
            font-family: "Be Vietnam Pro", system-ui, sans-serif;
            color: var(--ink);
        }
        .uk-pkg-hero {
            background: linear-gradient(135deg, #fffaf0 0%, #fff3e0 100%);
            border: 2px solid var(--frame-gold);
            border-radius: 18px;
            padding: 26px 24px;
            text-align: center;
            box-shadow: 0 4px 18px rgba(110,14,10,.08);
        }
        .uk-pkg-hero h2 {
            font-family: "Noto Serif", serif;
            color: var(--title-red);
            font-size: 30px;
            font-weight: 700;
            margin: 0 0 8px;
            letter-spacing: .5px;
        }
        .uk-pkg-hero p {
            font-size: 16.5px;
            color: var(--ink-soft);
            margin: 0 auto;
            max-width: 720px;
            line-height: 1.6;
        }
        .uk-pkg-hero .uk-pkg-hero-quote {
            margin-top: 14px;
            font-style: italic;
            font-size: 15.5px;
            color: var(--title-red);
        }

        .uk-trust {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
            gap: 12px;
            margin: 22px 0;
        }
        .uk-trust-item {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 12px;
            padding: 14px 16px;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 14.5px;
            color: var(--ink-soft);
            line-height: 1.4;
        }
        .uk-trust-item i {
            font-size: 22px;
            color: var(--frame-gold);
            min-width: 26px;
            text-align: center;
        }
        .uk-trust-item b { color: var(--title-red); font-weight: 600; }

        .uk-card {
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 16px;
            padding: 22px 22px 24px;
            margin-top: 18px;
            box-shadow: 0 2px 10px rgba(0,0,0,.04);
        }
        .uk-card-h {
            display: flex;
            align-items: center;
            gap: 14px;
            margin-bottom: 18px;
            padding-bottom: 14px;
            border-bottom: 1px dashed var(--line);
        }
        .uk-step-num {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            width: 42px; height: 42px;
            border-radius: 50%;
            background: var(--title-red);
            color: #fff;
            font-family: "Noto Serif", serif;
            font-size: 22px;
            font-weight: 700;
            flex-shrink: 0;
        }
        .uk-card-h h3 {
            font-family: "Noto Serif", serif;
            font-size: 24px;
            font-weight: 700;
            color: var(--title-red);
            margin: 0;
            line-height: 1.2;
        }
        .uk-card-h .uk-card-sub {
            font-size: 14.5px;
            color: var(--ink-soft);
            margin: 2px 0 0;
            font-family: "Be Vietnam Pro", sans-serif;
            font-weight: 400;
        }

        .uk-cat-row {
            display: flex;
            flex-wrap: wrap;
            gap: 8px;
            margin-bottom: 16px;
        }
        .uk-cat {
            padding: 10px 16px;
            border: 1.5px solid var(--line);
            background: #fff;
            border-radius: 999px;
            cursor: pointer;
            font-size: 14.5px;
            font-weight: 500;
            color: var(--ink-soft);
            transition: all .2s;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .uk-cat:hover { border-color: var(--frame-gold); color: var(--title-red); }
        .uk-cat.active {
            background: var(--title-red);
            color: #fff;
            border-color: var(--title-red);
        }

        .uk-pkg-grid {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 16px;
            align-items: stretch;
        }
        .uk-pkg-card {
            position: relative;
            background: #fffdf7;
            border: 2px solid var(--line);
            border-radius: 14px;
            padding: 18px 16px 84px;
            display: flex;
            flex-direction: column;
            transition: all .25s;
        }
        .uk-pkg-card.popular {
            border-color: var(--frame-gold);
            background: linear-gradient(180deg,#fffaf0 0%,#fffdf7 100%);
        }
        .uk-pkg-card.selected {
            border-color: var(--title-red);
            background: #fff8f5;
            box-shadow: 0 6px 20px rgba(110,14,10,.18);
            transform: translateY(-2px);
        }
        .uk-pkg-badge {
            position: absolute;
            top: -10px; left: 14px;
            background: var(--frame-gold);
            color: #fff;
            font-size: 12px;
            font-weight: 700;
            padding: 3px 10px;
            border-radius: 999px;
            letter-spacing: .5px;
            text-transform: uppercase;
        }
        .uk-pkg-card.popular .uk-pkg-badge { background: var(--title-red); }
        .uk-pkg-title {
            font-family: "Noto Serif", serif;
            font-size: 20px;
            font-weight: 700;
            color: var(--title-red);
            margin: 4px 0 6px;
            line-height: 1.25;
        }
        .uk-pkg-desc {
            font-size: 14.5px;
            color: var(--ink-soft);
            line-height: 1.5;
            margin-bottom: 10px;
            flex-grow: 1;
        }
        .uk-pkg-bullet {
            display: flex;
            align-items: flex-start;
            gap: 7px;
            font-size: 13.5px;
            color: var(--ink-soft);
            margin: 4px 0;
            line-height: 1.4;
        }
        .uk-pkg-bullet i {
            color: var(--hk-pos);
            font-size: 12px;
            margin-top: 4px;
            flex-shrink: 0;
        }
        .uk-pkg-foot {
            position: absolute;
            left: 16px; right: 16px; bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 8px;
        }
        .uk-pkg-price {
            font-family: "Noto Serif", serif;
            font-size: 19px;
            font-weight: 700;
            color: var(--title-red);
            white-space: nowrap;
        }
        .uk-pkg-price small {
            font-size: 12px;
            color: var(--ink-faint);
            font-weight: 400;
            display: block;
            margin-top: -2px;
        }
        .uk-pkg-btn {
            border: 2px solid var(--title-red);
            background: var(--title-red);
            color: #fff;
            font-size: 14.5px;
            font-weight: 700;
            padding: 10px 16px;
            border-radius: 10px;
            cursor: pointer;
            min-height: 44px;
            font-family: "Be Vietnam Pro", sans-serif;
            transition: all .2s;
            white-space: nowrap;
        }
        .uk-pkg-btn:hover { background: #4a0808; border-color: #4a0808; }
        .uk-pkg-card.selected .uk-pkg-btn {
            background: #fff;
            color: var(--title-red);
            border-color: var(--title-red);
        }
        .uk-pkg-sample {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            color: var(--accent-cyan);
            cursor: pointer;
            text-decoration: underline dotted;
            background: none;
            border: none;
            padding: 0;
            margin: 4px 0 8px;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .uk-pkg-sample:hover { color: var(--title-red); }
        .uk-pkg-links {
            display: flex;
            flex-wrap: wrap;
            align-items: center;
            gap: 6px 18px;
            margin: 6px 0 8px;
        }
        .uk-pkg-links .uk-pkg-sample { margin: 0; }
        .uk-pkg-detail {
            display: inline-flex;
            align-items: center;
            gap: 6px;
            font-size: 13px;
            font-weight: 600;
            color: var(--title-red);
            text-decoration: underline dotted;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .uk-pkg-detail:hover { color: var(--frame-gold); }

        .uk-method-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 12px;
        }
        .uk-method {
            display: flex;
            align-items: center;
            gap: 14px;
            border: 2px solid var(--line);
            border-radius: 12px;
            padding: 16px 16px;
            cursor: pointer;
            background: #fff;
            transition: all .2s;
            min-height: 76px;
        }
        .uk-method:hover { border-color: var(--frame-gold); }
        .uk-method.active {
            border-color: var(--title-red);
            background: #fff8f5;
            box-shadow: 0 4px 12px rgba(110,14,10,.12);
        }
        .uk-method.disabled {
            opacity: .45;
            cursor: not-allowed;
            background: #f8f8f8;
        }
        .uk-method-icon {
            width: 46px; height: 46px;
            border-radius: 50%;
            background: #fffaf0;
            border: 1.5px solid var(--frame-gold-soft);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--title-red);
            font-size: 20px;
            flex-shrink: 0;
        }
        .uk-method.active .uk-method-icon {
            background: var(--title-red);
            color: #fff;
            border-color: var(--title-red);
        }
        .uk-method-text { line-height: 1.35; }
        .uk-method-name {
            font-size: 16px;
            font-weight: 700;
            color: var(--ink);
            margin-bottom: 2px;
        }
        .uk-method-sub {
            font-size: 13.5px;
            color: var(--ink-soft);
        }

        .uk-cal-wrap { display: none; }
        .uk-cal-wrap.show { display: block; }
        .uk-cal-note {
            background: #fffaf0;
            border-left: 4px solid var(--frame-gold);
            padding: 10px 14px;
            border-radius: 6px;
            font-size: 14px;
            color: var(--ink-soft);
            margin-bottom: 14px;
            line-height: 1.65;
        }
        .uk-cal-note.uk-cal-warn {
            background: #fff5f5;
            border-left-color: #dc2626;
            color: #1c1410;
        }
        .uk-cal-note.uk-cal-warn b { color: #1c1410; }
        .uk-weekend-pill {
            display: inline-block;
            background: #dc2626;
            color: #fff;
            padding: 2px 8px;
            border-radius: 999px;
            font-size: 11px;
            font-weight: 700;
            margin-left: 6px;
        }
        .uk-surcharge-row {
            font-size: 13.5px;
            color: #dc2626;
            margin-top: 4px;
            display: block;
        }
        /* === LỊCH THÁNG === */
        .uk-cal-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 12px;
            padding: 6px 4px;
        }
        .uk-cal-nav {
            background: #fff;
            border: 1.5px solid var(--line);
            color: var(--title-red);
            width: 38px;
            height: 38px;
            border-radius: 8px;
            cursor: pointer;
            font-size: 16px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-family: "Be Vietnam Pro", sans-serif;
            transition: all .2s;
        }
        .uk-cal-nav:hover:not(:disabled) {
            background: var(--frame-gold);
            color: #fff;
            border-color: var(--frame-gold);
        }
        .uk-cal-nav:disabled {
            opacity: .35;
            cursor: not-allowed;
        }
        .uk-cal-month-label {
            font-family: "Noto Serif", serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--title-red);
            text-align: center;
            flex: 1;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .uk-cal-today-btn {
            background: var(--frame-gold);
            color: #fff;
            border: none;
            padding: 6px 14px;
            border-radius: 6px;
            cursor: pointer;
            font-size: 12.5px;
            font-weight: 600;
            font-family: "Be Vietnam Pro", sans-serif;
            margin-left: 8px;
        }
        .uk-cal-today-btn:hover { background: var(--title-red); }

        .uk-cal-dow-row {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 8px;
        }
        .uk-cal-dow {
            text-align: center;
            font-size: 12px;
            font-weight: 700;
            color: var(--ink-faint);
            text-transform: uppercase;
            letter-spacing: 1px;
            padding: 6px 0;
        }
        .uk-cal-dow.weekend { color: var(--title-red); }

        .uk-day-row {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 6px;
            margin-bottom: 16px;
        }
        .uk-day-empty {
            visibility: hidden;
        }
        .uk-day {
            text-align: center;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            padding: 10px 4px;
            cursor: pointer;
            background: #fff;
            transition: all .2s;
            min-height: 64px;
        }
        .uk-day:hover { border-color: var(--frame-gold); }
        .uk-day.active {
            background: var(--title-red);
            color: #fff;
            border-color: var(--title-red);
        }
        .uk-day-dow {
            font-size: 12px;
            color: var(--ink-faint);
            font-weight: 500;
            text-transform: uppercase;
            letter-spacing: 1px;
        }
        .uk-day.active .uk-day-dow { color: #ffd7a8; }
        .uk-day-dd {
            font-family: "Noto Serif", serif;
            font-size: 22px;
            font-weight: 700;
            color: var(--ink);
            margin: 4px 0 0;
        }
        .uk-day.active .uk-day-dd { color: #fff; }
        .uk-day.full {
            background: #f3f3f3;
            color: var(--ink-faint);
            cursor: not-allowed;
            border-color: #e5e5e5;
        }
        .uk-day.full .uk-day-dd { color: var(--ink-faint); text-decoration: line-through; }
        .uk-day.past {
            background: #f8f8f8;
            color: #c0c0c0;
            cursor: not-allowed;
            border-color: #e8e8e8;
        }
        .uk-day.past .uk-day-dd { color: #c8c8c8; }
        .uk-day.today:not(.active) {
            border-color: var(--frame-gold);
            border-width: 2px;
            background: #fffaf0;
        }
        .uk-day.today:not(.active) .uk-day-dd {
            color: var(--title-red);
            font-weight: 700;
        }
        /* Khi today + active cùng lúc: ưu tiên active (đỏ + text trắng) + giữ viền vàng */
        .uk-day.today.active {
            border-color: var(--frame-gold);
            border-width: 2px;
        }

        .uk-slot-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
            gap: 10px;
        }
        .uk-slot {
            padding: 12px 8px;
            text-align: center;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            font-family: "Noto Serif", serif;
            background: #fff;
            color: var(--ink);
            transition: all .2s;
            min-height: 48px;
        }
        .uk-slot:hover { border-color: var(--frame-gold); }
        .uk-slot.active {
            background: var(--title-red);
            color: #fff;
            border-color: var(--title-red);
        }
        .uk-slot.full {
            background: #f3f3f3;
            color: var(--ink-faint);
            cursor: not-allowed;
            text-decoration: line-through;
        }

        .uk-form-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
            gap: 14px;
        }
        .uk-field label {
            display: block;
            font-size: 14.5px;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 6px;
        }
        .uk-field input,
        .uk-field textarea {
            width: 100%;
            padding: 13px 14px;
            border: 1.5px solid var(--line);
            border-radius: 10px;
            font-size: 16px;
            font-family: "Be Vietnam Pro", sans-serif;
            background: #fff;
            color: var(--ink);
            transition: border-color .2s, box-shadow .2s;
            box-sizing: border-box;
        }
        .uk-field input:focus,
        .uk-field textarea:focus {
            outline: none;
            border-color: var(--frame-gold);
            box-shadow: 0 0 0 3px rgba(201,162,74,.15);
        }
        .uk-field textarea { resize: vertical; min-height: 80px; }
        .uk-field-note {
            font-size: 12.5px;
            color: var(--ink-faint);
            margin-top: 4px;
        }

        .uk-checkout-bar {
            position: fixed;
            left: 0; right: 0; bottom: 0;
            background: #fff;
            border-top: 2px solid var(--frame-gold);
            box-shadow: 0 -6px 24px rgba(0,0,0,.10);
            padding: 14px 16px;
            z-index: 50;
            transform: translateY(110%);
            transition: transform .3s ease;
        }
        .uk-checkout-bar.show { transform: translateY(0); }
        .uk-checkout-inner {
            max-width: var(--uk-block-w);
            margin: 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 16px;
            flex-wrap: wrap;
        }
        .uk-total {
            display: flex;
            align-items: baseline;
            gap: 8px;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .uk-total-lbl {
            font-size: 14px;
            color: var(--ink-soft);
            font-weight: 500;
        }
        .uk-total-amt {
            font-family: "Noto Serif", serif;
            font-size: 26px;
            font-weight: 700;
            color: var(--title-red);
        }
        .uk-total-cnt {
            font-size: 13px;
            color: var(--ink-faint);
            margin-left: 2px;
        }
        .uk-pay-btn {
            background: var(--title-red);
            color: #fff;
            border: 2px solid var(--title-red);
            border-radius: 12px;
            padding: 14px 28px;
            font-size: 17px;
            font-weight: 700;
            cursor: pointer;
            min-height: 54px;
            font-family: "Be Vietnam Pro", sans-serif;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            transition: all .2s;
        }
        .uk-pay-btn:hover { background: #4a0808; border-color: #4a0808; }
        .uk-pay-btn:disabled {
            background: #d0c8c0; border-color: #d0c8c0; cursor: not-allowed;
        }

        .uk-cart-mini {
            display: flex;
            flex-wrap: wrap;
            gap: 6px;
            max-width: 100%;
        }
        .uk-cart-chip {
            background: #fffaf0;
            border: 1px solid var(--frame-gold-soft);
            border-radius: 999px;
            padding: 5px 10px 5px 12px;
            font-size: 13px;
            color: var(--title-red);
            display: inline-flex;
            align-items: center;
            gap: 6px;
            white-space: nowrap;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .uk-cart-chip .uk-x {
            background: none;
            border: none;
            color: var(--title-red);
            cursor: pointer;
            font-size: 16px;
            line-height: 1;
            padding: 0;
            margin-left: 2px;
        }
        .uk-cart-chip .uk-x:hover { color: #4a0808; }

        .uk-modal {
            position: fixed; inset: 0;
            background: rgba(28,20,16,.55);
            display: none;
            align-items: center;
            justify-content: center;
            z-index: 100;
            padding: 16px;
        }
        .uk-modal.show { display: flex; }
        .uk-modal-box {
            background: #fff;
            border-radius: 18px;
            max-width: 520px;
            width: 100%;
            max-height: 90vh;
            overflow-y: auto;
            padding: 24px;
            box-shadow: 0 12px 40px rgba(0,0,0,.3);
        }
        .uk-modal-h {
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
        }
        .uk-modal-h h3 {
            font-family: "Noto Serif", serif;
            font-size: 24px;
            color: var(--title-red);
            margin: 0;
        }
        .uk-modal-close {
            background: none; border: none;
            font-size: 28px; line-height: 1;
            color: var(--ink-faint);
            cursor: pointer;
            padding: 0 6px;
        }
        .uk-modal-close:hover { color: var(--title-red); }
        .uk-modal-sum {
            background: #fffaf0;
            border: 1px solid var(--frame-gold-soft);
            border-radius: 10px;
            padding: 12px 14px;
            margin-bottom: 16px;
            font-size: 14.5px;
            color: var(--ink-soft);
            line-height: 1.5;
        }
        .uk-modal-sum b { color: var(--title-red); }
        .uk-gw-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }
        @media (max-width:420px){ .uk-gw-grid{grid-template-columns:1fr;} }
        .uk-gw {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 14px;
            border: 2px solid var(--line);
            border-radius: 12px;
            background: #fff;
            cursor: pointer;
            font-size: 15px;
            font-weight: 600;
            color: var(--ink);
            min-height: 64px;
            font-family: "Be Vietnam Pro", sans-serif;
            transition: all .2s;
            text-align: left;
        }
        .uk-gw:hover { border-color: var(--title-red); transform: translateY(-1px); }
        .uk-gw-logo {
            width: 38px; height: 38px;
            border-radius: 8px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 18px;
            color: #fff;
            flex-shrink: 0;
            font-weight: 700;
        }
        .uk-gw-vnpay { background: #005ba1; }
        .uk-gw-momo { background: #a50064; }
        .uk-gw-zalo { background: #0068ff; }
        .uk-gw-casso { background: #16a34a; }
        .uk-gw-stripe { background: #635bff; }
        .uk-gw-sub {
            font-size: 12.5px;
            color: var(--ink-faint);
            font-weight: 400;
            display: block;
        }

        .uk-faq {
            margin-top: 22px;
            background: #fff;
            border: 1px solid var(--line);
            border-radius: 14px;
            overflow: hidden;
        }
        .uk-faq-item { border-bottom: 1px solid var(--line-soft); }
        .uk-faq-item:last-child { border-bottom: none; }
        .uk-faq-q {
            display: flex;
            justify-content: space-between;
            align-items: center;
            gap: 12px;
            padding: 16px 18px;
            cursor: pointer;
            font-weight: 600;
            font-size: 15.5px;
            color: var(--ink);
            background: #fff;
            border: none;
            width: 100%;
            text-align: left;
            font-family: "Be Vietnam Pro", sans-serif;
        }
        .uk-faq-q:hover { background: #fffaf0; }
        .uk-faq-q .uk-faq-icon { color: var(--title-red); transition: transform .2s; font-size: 18px; }
        .uk-faq-item.open .uk-faq-q .uk-faq-icon { transform: rotate(45deg); }
        .uk-faq-a {
            display: none;
            padding: 0 18px 16px;
            font-size: 14.5px;
            color: var(--ink-soft);
            line-height: 1.6;
        }
        .uk-faq-item.open .uk-faq-a { display: block; }

        .uk-testi-row {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
            gap: 14px;
            margin-top: 14px;
        }
        .uk-testi {
            background: #fffdf7;
            border: 1px solid var(--line);
            border-left: 4px solid var(--frame-gold);
            border-radius: 10px;
            padding: 16px 16px;
        }
        .uk-testi-text {
            font-size: 14.5px;
            color: var(--ink-soft);
            line-height: 1.55;
            font-style: italic;
            margin-bottom: 10px;
        }
        .uk-testi-name {
            font-size: 14px;
            font-weight: 600;
            color: var(--title-red);
        }
        .uk-testi-meta {
            font-size: 12.5px;
            color: var(--ink-faint);
        }

        @media (max-width: 560px) {
            .uk-pkg-hero h2 { font-size: 24px; }
            .uk-pkg-hero p { font-size: 15px; }
            .uk-card { padding: 18px 16px; }
            .uk-card-h h3 { font-size: 20px; }
            .uk-step-num { width: 36px; height: 36px; font-size: 19px; }
            .uk-total-amt { font-size: 22px; }
            .uk-pay-btn { width: 100%; justify-content: center; font-size: 16px; }
            .uk-checkout-inner { flex-direction: column; align-items: stretch; }
            .uk-pkg-grid { grid-template-columns: 1fr; }
        }