/*
 * cong-cu-la-so.css — Tấm lá số Tử Vi (trang /cong-cu/lap-la-so-tu-vi/).
 *
 * TOÀN BỘ tô màu/độ sáng/bố cục chép đúng từ bảng an sao của app
 * (1vong-frontend/modules/tu-vi/style.css + index.js). Mọi thứ SCOPE dưới
 * `.ls-vung` và mọi biến đặt trên `.ls-vung` (không phải :root) để KHÔNG đụng
 * biến/nhãn của theme (main.css cũng có --son, .btn, .foot…). Sửa ở đây không
 * ảnh hưởng trang khác.
 */

.ls-vung{
  /* Bảng an sao — chép từ app */
  --paper:#fcf8f0; --paper-menh:#f5ead0; --paper-center:#f2e5c6;
  --line:#7A5A36; --ink:#402c12; --ink-dim:#7a5a2c;
  --header-grad:linear-gradient(180deg,#3d2b1a 0%,#4a3520 100%); --header-ink:#f8efd8;
  --gold:#b5822a; --wine:#8a3a2a; --son:#A9332A;
  --the:#F7F2E6; --vien:#D8CDB4; --muc:#1A1610; --muc-nhat:#4E463A; --mo:#6E6353;
  /* Ngũ Hành (màu CHỮ của sao) */
  --nh-kim:#57606f; --nh-moc:#1f7a3d; --nh-thuy:#1d3a5f; --nh-hoa:#c23616; --nh-tho:#8a6410;
  /* Màu nhóm dự phòng */
  --cat-tuhoa:#1f5f8f; --cat-saoxau:#8c2a12; --cat-saodep:#1f7a3d;
  /* Vòng Tràng Sinh: MỰC ĐEN (anh chốt 18/09). Trước là tím #6a3f9e — tím đứng
     cạnh màu tầng sao lưu Đại Vận (cũng tím) dễ đọc nhầm là một họ. */
  --cat-trangsinh:#1A1610; --cat-nguyethan:#0f6b6b; --cat-canchi:#8a6410;
  --lsf-display:"Cormorant Garamond",Georgia,serif;
  --lsf-body:"Be Vietnam Pro",system-ui,sans-serif;
  margin:22px 0 4px;
}
.ls-vung *{box-sizing:border-box}

/* Trạng thái chờ / báo lỗi */
.ls-cho,.ls-loi{color:var(--muc-nhat);font-size:15px;text-align:center;padding:34px 16px;
  background:var(--the);border:1px solid var(--vien);border-radius:14px}
.ls-loi{color:var(--son)}

/* Tấm lá số cố định 800px; scaler co nhỏ vừa màn hẹp, không tràn ngang */
.ls-vung .scaler{margin:0 auto;overflow:hidden}
.ls-vung .khung-anh{width:800px;transform-origin:top left;
  background:radial-gradient(120% 90% at 50% 0%,#FBF7EC 0%,var(--the) 55%,#F0E8D5 100%);
  border:1px solid var(--vien);border-radius:16px;padding:20px;
  box-shadow:0 1px 0 #fff inset,0 18px 44px -30px rgba(60,40,18,.5)}
.ls-vung .khung-anh.dang-chup{border-radius:0;box-shadow:none;border:none}
/* Lúc CHỤP ẢNH: bỏ cắt đáy ô. Trên màn, .cell overflow:hidden cho lưới gọn;
   nhưng html2canvas dựng lại bản sao có thể xếp chữ cao hơn vài điểm ảnh → cắt
   cụt sao ở đáy ô (rõ nhất khi bật sao lưu). Cho overflow:visible + hàm chụp đã
   khoá chiều cao hàng theo nội dung thật nên không tràn đè hàng dưới. */
.ls-vung .dang-chup .cell{overflow:visible}

/* danh thiếp */
.ls-vung .thiep{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 20px;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--vien)}
.ls-vung .thiep-ten{font-family:var(--lsf-display);font-weight:600;font-size:clamp(23px,4vw,32px);line-height:1.1;margin:0;color:var(--muc)}
.ls-vung .thiep-phu{color:var(--muc-nhat);font-size:13px;margin:6px 0 0}
.ls-vung .thiep-phu b{color:var(--muc);font-weight:600}
.ls-vung .thiep-mau{display:inline-block;margin-top:6px;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mo)}

/* ── Lưới an sao 4×4 (khung ĐỀU: mọi hàng cùng chiều cao) ── */
.ls-vung .cuon{position:relative}
.ls-vung .laso{position:relative;display:grid;grid-template-columns:repeat(4,1fr);grid-template-rows:repeat(4,minmax(190px,auto));
  gap:0;width:100%;border:1.5px solid var(--line);background:var(--paper)}
.ls-vung .cell{position:relative;border:1px solid var(--line);margin:-0.75px 0 0 -0.75px;background:var(--paper);
  display:flex;flex-direction:column;min-width:0;overflow:hidden;padding-bottom:10px}
.ls-vung .cell.is-menh{background:var(--paper-menh);box-shadow:inset 0 0 0 1.5px var(--gold)}
.ls-vung .cell.is-than{background:var(--paper-menh);box-shadow:inset 0 0 0 1.5px var(--wine)}
.ls-vung .cell.is-daivan-hientai{box-shadow:inset 0 0 0 2px var(--gold)}

/* ── ẢNH CON GIÁP LÀM NỀN MỜ TỪNG CUNG (18/09, chép từ app) ──
   Ảnh đứng DƯỚI CÙNG (z-index 0), mọi chữ nằm trong .cell-in đứng trên. Khung
   ảnh thu vào 26% mỗi bên + mờ 6% — đủ nhận ra con giáp, không tranh chữ.
   ⚠️ KHÁC APP MỘT CHI TIẾT CÓ CHỦ Ý: app đặt ảnh lên thẻ cha rồi để lớp
   ::before "kế thừa" ảnh mà vẽ. Ở đây KHÔNG làm vậy, vì tấm lá web còn phải
   CHỤP THÀNH ẢNH: bộ chụp đọc ảnh nền theo từng thẻ thật, gặp lối kế thừa qua
   lớp giả thì dễ vừa nhúng thừa ảnh to vừa không vẽ ra gì. Nên khung thu nhỏ
   đặt thẳng lên .cell-bg — kết quả trên màn y hệt, mà chụp thì chắc chắn. */
.ls-vung .cell-bg{position:absolute;inset:26%;z-index:0;pointer-events:none;
  background-repeat:no-repeat;background-position:center;background-size:contain;
  opacity:.06;filter:grayscale(55%) sepia(25%) brightness(.55)}
.ls-vung .cell--ty   .cell-bg{background-image:url('../img/zodiac/ty.png')}
.ls-vung .cell--suu  .cell-bg{background-image:url('../img/zodiac/suu.png')}
.ls-vung .cell--dan  .cell-bg{background-image:url('../img/zodiac/dan.png')}
.ls-vung .cell--mao  .cell-bg{background-image:url('../img/zodiac/mao.png')}
.ls-vung .cell--thin .cell-bg{background-image:url('../img/zodiac/thin.png')}
.ls-vung .cell--ti   .cell-bg{background-image:url('../img/zodiac/ti.png')}
.ls-vung .cell--ngo  .cell-bg{background-image:url('../img/zodiac/ngo.png')}
.ls-vung .cell--mui  .cell-bg{background-image:url('../img/zodiac/mui.png')}
.ls-vung .cell--than .cell-bg{background-image:url('../img/zodiac/than.png')}
.ls-vung .cell--dau  .cell-bg{background-image:url('../img/zodiac/dau.png')}
.ls-vung .cell--tuat .cell-bg{background-image:url('../img/zodiac/tuat.png')}
.ls-vung .cell--hoi  .cell-bg{background-image:url('../img/zodiac/hoi.png')}
/* Lớp chữ của ô — phủ kín ô, đứng trên ảnh nền. Giữ NGUYÊN cách xếp cũ
   (cột dọc, .body co giãn) để lúc chụp ảnh không đổi chiều cao hàng. */
.ls-vung .cell-in{position:relative;z-index:1;display:flex;flex-direction:column;flex:1;min-width:0;min-height:0}

/* đầu ô — dải nâu đậm, cao đều */
.ls-vung .cell-head{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:6px;
  background:var(--header-grad);padding:9px 8px}
.ls-vung .cell-head .chi{font-size:11px;font-weight:700;color:var(--header-ink);opacity:.9}
.ls-vung .cell-head .title{font-family:var(--lsf-display);font-weight:700;font-size:15px;text-align:center;color:var(--header-ink);line-height:1.1;letter-spacing:.01em}
.ls-vung .cell-head .dv{font-size:10.5px;font-weight:700;color:var(--header-ink);opacity:.85;justify-self:end}

/* chính tinh */
.ls-vung .chinh{text-align:center;padding:6px 6px 2px;min-height:20px}
.ls-vung .chinh .sao{display:block;font-weight:700;font-size:15px;color:#7a1010;letter-spacing:-.15px;margin:1px 0;line-height:1.2}
.ls-vung .chinh .vcc{font-style:italic;font-weight:400;color:var(--ink-dim);font-size:13.5px}

/* thân sao — hai cột */
/* Hai cột sao. Cột KHÔNG chia cứng đôi ô: chia cứng thì cột nào có tên sao dài
   ("Kình Dương (H)") bị cắt cụt thành "Kình Dương…" dù cột bên kia đang trống
   quá nửa — đã thấy tận mắt ở ô Tài Bạch. Cho mỗi cột lấy đúng bề ngang nó cần
   rồi đẩy hai cột về hai mép; chật quá thì minmax(0,…) vẫn cho co lại như cũ
   nên không bao giờ tràn vỡ khung 4x4. */
.ls-vung .body{flex:1;display:grid;grid-template-columns:minmax(0,auto) minmax(0,auto);
  justify-content:space-between;gap:0 7px;padding:2px 7px 4px;align-content:start}
.ls-vung .col{display:flex;flex-direction:column;min-width:0;gap:1.5px}
.ls-vung .col.dep{align-items:flex-start;text-align:left}
.ls-vung .col.xau{align-items:flex-end;text-align:right}
.ls-vung .sao2{font-size:11.5px;line-height:1.4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.ls-vung .sao2.dep{color:var(--cat-saodep)} .ls-vung .sao2.tuhoa{color:var(--cat-tuhoa);font-weight:700} .ls-vung .sao2.xau{color:var(--cat-saoxau)}
.ls-vung .sao2.important{font-weight:800}
.ls-vung .tt{margin-left:1px;font-weight:400} .ls-vung .chinh .tt{font-weight:700;margin-left:2px;font-size:.9em}
.ls-vung .hoaline{font-size:.92em;font-weight:600;opacity:.92}

/* Ngũ Hành thắng màu nhóm */
.ls-vung .nh-kim{color:var(--nh-kim)!important} .ls-vung .nh-moc{color:var(--nh-moc)!important}
.ls-vung .nh-thuy{color:var(--nh-thuy)!important} .ls-vung .nh-hoa{color:var(--nh-hoa)!important} .ls-vung .nh-tho{color:var(--nh-tho)!important}

/* Màu TẦNG cho sao LƯU — đúng bộ màu app dùng (--tuvi-luu-dv/tv/td), đặt SAU
   nhóm Ngũ Hành để tầng thắng: nhìn màu biết sao thuộc Đại Vận / Tiểu Vận /
   Tứ Đức, khỏi phải dò tiền tố. Sao gốc không có class này nên giữ Ngũ Hành. */
.ls-vung .sao2.lm-dv{color:#6d3f9c!important}
.ls-vung .sao2.lm-tv{color:#0f7f88!important}
.ls-vung .sao2.lm-nv{color:#9a6b1f!important}
.ls-vung .sao2.lm-td{color:#b23f86!important}

/* LỘC KỴ NHẬP — dải mảnh ngay trên chân ô, chỉ hiện khi bật chip.
   CỐ Ý không kẻ đường phân cách (chủ dự án chốt: "bỏ luôn đường kẻ đứt đi"). */
.ls-vung .lk{display:flex;flex-direction:column;gap:1px;padding:1px 7px 0}
.ls-vung .lk-d{display:flex;align-items:center;gap:4px;font-size:10px;font-weight:700;line-height:1.3;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.ls-vung .lk-t{display:inline-flex;align-items:center;justify-content:center;min-width:11px;height:11px;
  border-radius:3px;font-style:normal;font-size:8px;font-weight:700;line-height:1;color:#fff;flex:none}
.ls-vung .lk-t-l{background:#1f7a3d}
.ls-vung .lk-t-k{background:#c23616}

/* chân ô */
.ls-vung .foot{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;
  font-size:10px;padding:3px 8px;border-top:1px solid rgba(64,44,18,.3)}
/* Góc trái chân ô: CUNG ĐẠI VẬN ("ĐV.Mệnh") — từ 15/09 chỗ này không còn là
   Can Chi nữa, Can Chi đã dọn lên đầu ô nằm cạnh tên cung. */
.ls-vung .foot .cdv{text-align:left;color:var(--cat-canchi);font-weight:700}
.ls-vung .foot .ts{text-align:center;color:var(--cat-trangsinh);font-weight:700}
.ls-vung .foot .nh{text-align:right;color:var(--cat-nguyethan)}

/* pill Thân + nhãn Tuần/Triệt */
.ls-vung .pills{position:absolute;top:26px;right:4px;display:flex;flex-direction:column;gap:3px;align-items:flex-end;z-index:2}
.ls-vung .pill{font-size:9.5px;font-weight:700;color:var(--header-ink);background:var(--wine);
  border-radius:4px;padding:1px 6px;letter-spacing:.03em;box-shadow:0 1px 2px rgba(0,0,0,.35)}
.ls-vung .tt-label{position:absolute;transform:translate(-50%,-50%);z-index:4;pointer-events:none;
  display:flex;align-items:center;justify-content:center;line-height:1;
  font-size:9.5px;font-weight:700;letter-spacing:.05em;color:var(--header-ink);background:var(--wine);
  border-radius:4px;padding:3px 9px 2px;white-space:nowrap;
  box-shadow:0 0 0 1px var(--header-ink),0 1px 3px rgba(0,0,0,.45)}

/* Ô Trung Cung + nới cho cặp giữa Ngọ–Mùi / Sửu–Tý */
.ls-vung .tam.tt-pad-top{padding-top:24px} .ls-vung .tam.tt-pad-bottom{padding-bottom:24px}
.ls-vung .tam{grid-row:2 / 4;grid-column:2 / 4;background:var(--paper-center);border:1px solid var(--line);
  margin:-0.75px 0 0 -0.75px;position:relative;display:flex;flex-direction:column;justify-content:center;
  padding:14px 18px;overflow:hidden}
.ls-vung .tam-wm{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:60%;max-width:230px;
  height:auto;opacity:.06;z-index:0;pointer-events:none}
.ls-vung .tam>*:not(.tam-wm){position:relative;z-index:1}
.ls-vung .tam-head{text-align:center;margin-bottom:9px}
.ls-vung .tam-kicker{font-size:9px;letter-spacing:.24em;text-transform:uppercase;color:var(--son);font-weight:700}
.ls-vung .tam-title{font-family:var(--lsf-display);font-weight:700;font-size:21px;color:#5c1914;line-height:1;margin-top:2px}
.ls-vung .tam-rule{width:36px;height:2px;background:var(--son);opacity:.5;border-radius:2px;margin:7px auto 0}
.ls-vung .tam-rows{display:grid;grid-template-columns:auto 1fr;gap:6px 14px;margin:0}
.ls-vung .tam-rows dt{font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:var(--mo);align-self:center}
.ls-vung .tam-rows dd{margin:0;font-size:13px;font-weight:600;color:var(--ink);text-align:right;align-self:center}
.ls-vung .tam-rows dd.em{color:var(--son);font-weight:700}
/* CHÚ GIẢI BA HÀNG — sao gốc (Ngũ Hành) · sao lưu (màu tầng) · độ sáng.
   Chép bố cục .tuvi-cg của app: mỗi hàng một nhãn trái + các mục xếp ngang. */
.ls-vung .tam-chugiai{margin-top:11px;padding-top:9px;border-top:1px solid rgba(122,90,54,.3);
  display:flex;flex-direction:column;gap:4px;font-size:10.5px}
.ls-vung .tam-cg-hang{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 11px}
.ls-vung .tam-cg-nhan{font-size:8.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--mo);font-weight:700}
.ls-vung .tam-cg-hang .m{display:flex;align-items:center;gap:4px;color:var(--ink-dim)}
.ls-vung .tam-cg-hang .dot{width:9px;height:9px;border-radius:2px;display:inline-block}
.ls-vung .tam-cg-hang .dot-dv{background:#6d3f9c} .ls-vung .tam-cg-hang .dot-tv{background:#0f7f88}
.ls-vung .tam-cg-hang .dot-td{background:#b23f86}
.ls-vung .tam-cg-hang b.lm-dv{color:#6d3f9c} .ls-vung .tam-cg-hang b.lm-tv{color:#0f7f88}
.ls-vung .tam-cg-hang b.lm-td{color:#b23f86}
.ls-vung .tam-cg-sang{color:var(--ink-dim)} .ls-vung .tam-cg-sang b{color:var(--ink);font-weight:700}
.ls-vung .tam-cta{text-align:center;font-size:11.5px;color:var(--ink-dim);margin-top:11px}
.ls-vung .tam-cta b{color:var(--son);font-weight:700}

/* Thanh nút lưu ảnh (dùng .btn của theme) */
.ls-thanh{margin:16px 0 4px;display:flex;flex-wrap:wrap;gap:10px 16px;justify-content:center;align-items:center}
.ls-ghi{width:100%;text-align:center;color:var(--mo,#6E6353);font-size:12.5px;margin:0}

/* ══════════════════════════════════════════════════════════════════════════
 * Ổ TRANG LẬP LÁ SỐ (CHỈ trang này, .cc-la-so)
 * ══════════════════════════════════════════════════════════════════════════
 * THIẾT KẾ LẠI 18/09/2026 — phản hồi trực tiếp "hiện tại hơi rẻ tiền lệch
 * lạc, cần chuyên nghiệp dễ sử dụng". Ba chỗ cụ thể đã sửa (đối chiếu ảnh
 * chụp thật khách gửi trước và sau):
 *   1. Cụm ngày sinh (dd/mm/yyyy) từng đứng trong một ô flex tự do co giãn
 *      theo phần thừa của hàng — có lúc để trống hẳn một mảng bên phải, nhìn
 *      như bố cục vỡ chứ không phải cố ý. Nay LƯỚI CÓ TÊN Ô (.f-luoi) khoá
 *      mỗi trường vào đúng một ô cố định, cụm ngày sinh gọn trong 1/3 lưới.
 *   2. Bốn chip an sao có chấm màu tầng (tím/xanh ngọc/hồng/xanh lá) LUÔN
 *      hiện rõ ngay cả khi CHƯA bật — bốn màu tương phản mạnh đặt sát nhau
 *      trông như bảng màu đồ chơi trẻ em, lạc tông với cả trang còn lại
 *      (be — nâu — đỏ son). Nay khi TẮT, chấm dùng một màu be trung tính
 *      DUY NHẤT cho cả bốn chip; màu tầng chỉ bừng lên khi chip đó BẬT —
 *      vẫn giữ được liên kết trực quan với màu sao lưu trên lá số, nhưng
 *      không còn sặc sỡ lúc mặc định.
 *   3. Ô tích "Che tên và ngày sinh" dùng checkbox vuông mặc định của trình
 *      duyệt — quá nhỏ so với một tính năng đáng chú ý (giấu thông tin cá
 *      nhân trước khi chia sẻ ảnh). Nay là CÔNG TẮC TRƯỢT tự vẽ bằng CSS.
 * Đồng thời: khối "Tùy chọn nâng cao" (chip + năm xem hạn + công tắc che)
 * bọc trong một mặt giấy hơi khác (.f-tuychon) để tách bạch với các trường
 * BẮT BUỘC phía trên — nhìn có tổ chức thay vì một khối phẳng liền mạch.
 */
.cc-la-so .ls-form{background:linear-gradient(180deg,#FDFAF2,#FBF7EC);border:1px solid #D8CDB4;border-radius:18px;
  padding:26px 26px 24px;margin-bottom:26px;
  box-shadow:0 1px 0 #fff inset,0 18px 40px -30px rgba(60,40,18,.6)}

/* LƯỚI CÓ TÊN Ô — 3 cột đều ở màn rộng, khoá từng trường vào đúng vị trí
   thay vì để flex tự xếp theo phần thừa. Họ tên chiếm 2 cột (khách gõ tên
   dài), Loại lịch 1 cột; hàng dưới Ngày sinh — Giờ sinh — Giới tính CHIA
   ĐỀU BA CỘT NHƯ NHAU nên cụm dd/mm/yyyy không còn khoảng trống thừa. */
.cc-la-so .f-luoi{display:grid;gap:18px 20px;
  grid-template-columns:repeat(3,1fr);
  grid-template-areas:
    "ten  ten  lich"
    "ngay gio  gt"
    "nhuan nhuan nhuan"}
.cc-la-so .f-ten{grid-area:ten} .cc-la-so .f-lich{grid-area:lich}
.cc-la-so .f-ngay{grid-area:ngay} .cc-la-so .f-gio{grid-area:gio} .cc-la-so .f-gt{grid-area:gt}
.cc-la-so .f-nhuan{grid-area:nhuan}
.cc-la-so .f-nhuan[hidden]{display:none}
@media (max-width:640px){
  .cc-la-so .f-luoi{grid-template-columns:1fr;
    grid-template-areas:"ten" "lich" "ngay" "gio" "gt" "nhuan"}
}

.cc-la-so .f-o{display:flex;flex-direction:column;gap:8px;min-width:0}
.cc-la-so .f-o label{font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6E6353}
.cc-la-so .f-o label em{font-style:normal;font-weight:600;letter-spacing:.01em;text-transform:none;color:#a89a80;margin-left:5px}
.cc-la-so .f-o input,.cc-la-so .f-o select{height:46px;background:#fff;border:1px solid #D8CDB4;border-radius:10px;
  padding:0 13px;font-family:inherit;font-size:15px;color:#1A1610;box-sizing:border-box;width:100%}
.cc-la-so .f-o input:focus,.cc-la-so .f-o select:focus{outline:2px solid #A9332A;outline-offset:1px;border-color:#A9332A}
/* Mũi tên riêng cho <select> thay mũi tên mặc định của hệ điều hành — đồng bộ
   với input chữ, không lệch phong cách giữa hai loại control trên cùng hàng. */
.cc-la-so .f-o select{appearance:none;-webkit-appearance:none;padding-right:34px;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' stroke='%237A5A36' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 13px center}
.cc-la-so .dmy{display:flex;align-items:center;gap:8px}
.cc-la-so .dmy input{width:0;flex:1 1 0;min-width:44px;text-align:center;font-variant-numeric:tabular-nums;letter-spacing:.04em}
.cc-la-so .dmy input.y{flex-grow:1.6}
.cc-la-so .dmy i{font-style:normal;color:#a89a80;font-weight:700;font-size:18px;line-height:1;flex:none}

/* ── KHỐI "TÙY CHỌN NÂNG CAO" — mặt giấy riêng, tách bạch khỏi trường bắt buộc ── */
.cc-la-so .f-tuychon{margin-top:22px;padding:18px 20px 20px;border-radius:14px;
  background:rgba(122,90,54,.05);border:1px solid rgba(122,90,54,.16)}
.cc-la-so .f-tc-dau{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#6E6353;margin-bottom:13px}
.cc-la-so .f-tc-dau em{font-style:normal;font-weight:600;letter-spacing:.01em;text-transform:none;color:#a89a80;margin-left:6px}
.cc-la-so .chip-hang{display:flex;flex-wrap:wrap;gap:9px;margin-bottom:18px}
/* ═══ BỐN CHIP AN SAO ═══
   Chấm tròn mặc định dùng MỘT màu be trung tính (--chip-mau-tat) chung cho cả
   bốn — không sặc sỡ lúc chưa bật. Bật lên (.on) chấm mới đổi sang màu TẦNG
   riêng (--chip-mau, khớp màu sao lưu trên lá số) và viền/chữ ăn theo màu đó.
   Đây là khác biệt DUY NHẤT so với bản trước: trước đổi màu theo --chip-mau
   NGAY TỪ ĐẦU (kể cả lúc tắt), nay chỉ đổi màu khi khách thật sự bật. */
.cc-la-so .chip{--chip-mau:#7A5A36;--chip-mau-tat:#B8AA92;display:inline-flex;align-items:center;gap:7px;
  background:#fff;border:1.5px solid #D8CDB4;border-radius:999px;padding:8px 15px;font-family:inherit;
  font-size:13.5px;font-weight:600;color:#4E463A;cursor:pointer;transition:.14s;user-select:none}
.cc-la-so .chip--dv{--chip-mau:#6d3f9c}
.cc-la-so .chip--tv{--chip-mau:#0f7f88}
.cc-la-so .chip--td{--chip-mau:#b23f86}
.cc-la-so .chip--lk{--chip-mau:#1f7a3d}
.cc-la-so .chip-cham{width:8px;height:8px;border-radius:50%;background:var(--chip-mau-tat);flex:none;transition:.14s}
.cc-la-so .chip:hover{border-color:var(--chip-mau)}
.cc-la-so .chip:hover .chip-cham{background:var(--chip-mau)}
.cc-la-so .chip.on{border-color:var(--chip-mau);color:var(--chip-mau);
  background:color-mix(in srgb,var(--chip-mau) 12%,#fff)}
.cc-la-so .chip.on .chip-cham{background:var(--chip-mau)}
.cc-la-so .chip:focus-visible{outline:2px solid var(--chip-mau);outline-offset:2px}

/* Ô năm xem hạn — đứng riêng vì đổi năm là thứ DUY NHẤT phải hỏi lại máy an sao. */
.cc-la-so .f-tc-nam{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:16px;
  margin-bottom:16px;border-bottom:1px dashed rgba(122,90,54,.25)}
.cc-la-so .f-tc-nam label{font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:#6E6353}
.cc-la-so .f-tc-nam .han-nam{width:78px;border:1px solid #D8CDB4;border-radius:8px;padding:6px 8px;font-size:13px;
  text-align:center;font-variant-numeric:tabular-nums;background:#fff;color:#1A1610;font-family:inherit}
.cc-la-so .f-tc-nam .han-nam:focus-visible{outline:2px solid #A9332A;outline-offset:1px}

/* Ô tích "Tháng nhuận" (trong lưới ô nhập chính) — checkbox vuông nhỏ gọn là
   đủ, vì đây chỉ là điều kiện phụ đi kèm Ngày sinh, không cần nổi bật.
   ⚠️ Selector đặc tả CAO HƠN ".f-o label" (dùng .f-o .f-tich, không chỉ
   .f-tich): label này VỪA là hậu duệ .f-o VỪA chính là thẻ <label> nên khớp
   cả hai luật; nếu để độ đặc tả bằng hoặc thấp hơn thì luật viết-hoa-toàn-bộ
   của ".f-o label" thắng, chữ "Tháng trên là tháng nhuận" bị hô biến thành
   HOA + rời khỏi khung — đã thấy tận mắt lúc soát bằng ảnh chụp. */
.cc-la-so .f-o .f-tich{display:flex;align-items:center;gap:8px;cursor:pointer;height:46px;
  font-size:13px;font-weight:600;letter-spacing:0;text-transform:none;color:#4E463A}
.cc-la-so .f-o .f-tich input[type="checkbox"]{width:17px;height:17px;min-height:0;flex:none;margin:0;
  padding:0;accent-color:#A9332A;cursor:pointer;border-radius:4px}
.cc-la-so .f-o-tich{justify-content:flex-start;align-items:center}

/* ── CÔNG TẮC TRƯỢT "Che tên và ngày sinh" — thay checkbox vuông mặc định.
   Input thật vẫn là <input type=checkbox id="ls-che"> (mã JS không đổi),
   chỉ ẩn nó đi và vẽ hai <span> thành thanh trượt bằng CSS thuần — không
   ảnh/emoji, chỉ hình khối. */
.cc-la-so .f-the-che{padding-top:2px}
.cc-la-so .f-toggle{display:inline-flex;align-items:center;gap:11px;cursor:pointer;user-select:none}
.cc-la-so .f-toggle input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}
.cc-la-so .f-toggle-vien{position:relative;flex:none;width:40px;height:23px;border-radius:999px;
  background:#D8CDB4;transition:.16s}
.cc-la-so .f-toggle-nut{position:absolute;top:2px;left:2px;width:19px;height:19px;border-radius:50%;
  background:#fff;box-shadow:0 1px 2px rgba(26,22,16,.35);transition:.16s}
.cc-la-so .f-toggle input:checked ~ .f-toggle-vien{background:#A9332A}
.cc-la-so .f-toggle input:checked ~ .f-toggle-vien .f-toggle-nut{transform:translateX(17px)}
.cc-la-so .f-toggle input:focus-visible ~ .f-toggle-vien{outline:2px solid #A9332A;outline-offset:2px}
.cc-la-so .f-toggle-chu{font-size:14px;font-weight:600;color:#1A1610}
.cc-la-so .f-the-ghi{margin:6px 0 0 51px;font-size:12px;color:#8a7c64;max-width:52ch}
@media (max-width:480px){.cc-la-so .f-the-ghi{margin-left:0}}

/* Nút Lập lá số ở ĐÁY thẻ — canh giữa, có chiều sâu (gradient + bóng đổ) thay
   vì một mảng màu phẳng, để đứng vững cạnh khối tuỳ chọn nhiều chi tiết hơn. */
.cc-la-so .f-nut{margin-top:22px;padding-top:20px;border-top:1px solid rgba(122,90,54,.22);display:flex;justify-content:center}
.cc-la-so .lap-btn{height:50px;min-width:240px;border:none;border-radius:11px;
  background:linear-gradient(180deg,#B23A30,#9A2C24);color:#fff;
  font-family:inherit;font-weight:700;font-size:15.5px;padding:0 30px;cursor:pointer;transition:.15s;
  box-shadow:0 1px 0 rgba(255,255,255,.18) inset,0 10px 22px -12px rgba(122,20,15,.55)}
.cc-la-so .lap-btn:hover{background:linear-gradient(180deg,#9A2C24,#822219)}
.cc-la-so .lap-btn:focus-visible{outline:2px solid #A9332A;outline-offset:2px}

/* Ô mời luận sâu — panel giấy điệp, gạch son (thay hộp tối) */
.cc-la-so .moi-the{margin:34px 0;display:flex;flex-wrap:wrap;align-items:center;gap:18px 28px;
  background:linear-gradient(180deg,#F5EADB,#F1E2D2);border:1px solid #E4CDBE;border-left:4px solid #A9332A;border-radius:15px;padding:22px 24px 22px 16px}
.cc-la-so .moi-chu{flex:1 1 260px}
.cc-la-so .moi-kicker{display:inline-block;font-size:10.5px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:#A9332A;margin-bottom:6px}
.cc-la-so .moi-the h2{font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);font-weight:700;font-size:clamp(20px,3.3vw,26px);margin:0 0 8px;color:#5c1914;line-height:1.12}
.cc-la-so .moi-the p{margin:0;color:#4E463A;font-size:14.5px;line-height:1.6;max-width:54ch}
.cc-la-so .btn-son{display:inline-flex;align-items:center;gap:7px;border:none;border-radius:11px;background:#A9332A;color:#fff;
  font-family:inherit;font-weight:700;font-size:15px;padding:14px 28px;cursor:pointer;text-decoration:none;transition:.15s}
.cc-la-so .btn-son:hover{background:#8C2620}
.cc-la-so .btn-vien{display:inline-flex;align-items:center;gap:7px;border:1px solid #A9332A;border-radius:11px;background:transparent;
  color:#8C2620;font-family:inherit;font-weight:700;font-size:15px;padding:13px 26px;cursor:pointer;transition:.15s}
.cc-la-so .btn-vien:hover{background:rgba(169,51,42,.06)}

/* Thanh lưu ảnh + Giải nghĩa — canh THẲNG CỘT với phần trên (chữ lùi ~20px) */
.cc-la-so .ls-vung{margin-top:6px}
.cc-la-so .ls-hoc{margin-top:34px;border-top:1px solid #D8CDB4;padding:26px 20px 0}
.cc-la-so .ls-hoc .cc-muc{max-width:66ch}
.cc-la-so .ls-hoc .cc-muc:first-child{margin-top:0}
.cc-la-so .ls-hoc p{color:#4E463A;line-height:1.72;max-width:66ch;margin:0 0 .2rem}

/* Ô nhập ngày sinh: ba số GÕ BẰNG BÀN PHÍM, mobile tự ra bàn phím số */
.ls-form .dmy input{width:100%}
/* Khung chẩn đoán (chỉ hiện khi máy an sao trả hình dạng lạ) */
.ls-chan-doan{margin:10px auto 0;max-width:520px;font-size:11px;line-height:1.5;color:#6E6353;
  white-space:pre-wrap;word-break:break-word;text-align:left;max-height:170px;overflow:auto;
  background:rgba(0,0,0,.03);border-radius:8px;padding:8px 10px}

/* ══ PHIẾU ĐỌC NHANH MỘT SAO ══
   Tên sao đã nối kho tra cứu: bấm được. Dấu hiệu KÍN (gạch chấm mờ) để không
   làm rối lá số; lúc CHỤP ảnh thì bỏ hẳn (ảnh sạch). */
/* Sao bấm được (đã có trang trong kho tra cứu).
   (18/09, anh chốt) BỎ gạch chấm mờ dưới MỌI tên sao: ô cung vốn đã dày chữ,
   thêm một hàng chấm dưới gần như mỗi dòng làm tấm lá rối mắt.
   Dấu hiệu "bấm được" KHÔNG mất hẳn — chuyển sang chỉ hiện KHI RÊ CHUỘT, lúc
   ấy gạch màu son rõ hẳn. Tấm lá lúc nào cũng sạch, ai rê vào vẫn biết bấm. */
.ls-vung .sao-tra{cursor:pointer;text-decoration:none;text-underline-offset:2px}
.ls-vung .sao-tra:hover{text-decoration:underline dotted #A9332A}
.ls-vung .dang-chup .sao-tra{text-decoration:none;cursor:auto}

/* Phiếu gắn vào <body> (ngoài .ls-vung/.cc-la-so) nên KHÔNG scope — dùng tiền
   tố .ls-phieu riêng để không đụng theme. Bản sắc: giấy + đỏ son. */
.ls-phieu{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;padding:20px}
.ls-phieu-nen{position:absolute;inset:0;background:rgba(26,22,16,.55)}
.ls-phieu-the{position:relative;max-width:420px;width:100%;background:#FBF7EC;border:1px solid #D8CDB4;border-radius:16px;
  padding:22px 24px 24px;box-shadow:0 18px 50px rgba(0,0,0,.3);font-family:inherit}
.ls-phieu-x{position:absolute;top:11px;right:11px;width:32px;height:32px;border:none;background:transparent;
  font-size:16px;line-height:1;color:#8A7F6C;cursor:pointer;border-radius:8px}
.ls-phieu-x:hover{background:rgba(122,90,54,.1)}
.ls-phieu-nhan{font-size:10.5px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:#a89a80}
.ls-phieu-ten{font-family:var(--font-display,"Cormorant Garamond",Georgia,serif);font-weight:700;font-size:26px;
  color:#5c1914;margin:4px 0 6px;line-height:1.1}
.ls-phieu-meta{font-size:12.5px;font-weight:600;color:#6E6353;margin:0 0 12px}
.ls-phieu-hoa{font-size:15px;line-height:1.62;color:#3a332a;margin:0 0 18px}
.ls-phieu-doc{display:inline-flex;align-items:center;gap:6px;color:#8C2620;font-weight:700;font-size:14.5px;text-decoration:none}
.ls-phieu-doc:hover{text-decoration:underline}