/* Nền chung của ba công cụ web: font, khung, nút, ô nhập, thẻ.

   MÀU KHÔNG NẰM Ở ĐÂY. Mỗi công cụ một file (lich-am.css, ngay-lanh.css,
   tinh-luong.css, studio.css) khai các biến --nen, --muc, --nhan... đúng theo
   bảng màu của app đó (MauApp trong apps/<app>/app/lib/src/ui/mau_app.dart).
   Đỏ ở Lịch Âm là "ngày đặc biệt", đỏ ở Tính lương là "khoản bị trừ" — ADR 0014.
   File này chỉ dùng biến, không bao giờ dùng mã màu trực tiếp.

   Bản vẽ: Claude Design, canvas "Latus Web — ba công cụ" (26/10/2026).

   CSP của worker cấm style="" và <style>: mọi thứ phải đi qua class ở đây. */

@font-face { font-family: 'Be Vietnam Pro'; src: url('/tai-nguyen/chu/bvp-400.woff2') format('woff2'); font-weight: 400; font-display: swap; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/tai-nguyen/chu/bvp-600.woff2') format('woff2'); font-weight: 500 600; font-display: swap; }
@font-face { font-family: 'Be Vietnam Pro'; src: url('/tai-nguyen/chu/bvp-700.woff2') format('woff2'); font-weight: 700 800; font-display: swap; }

*, *::before, *::after { box-sizing: border-box; }
/* Luôn chừa chỗ cho thanh cuộn: trang dài có thanh cuộn, trang ngắn thì không, và
   trên máy có chuột thanh cuộn chiếm chỗ — chuyển giữa hai trang là cả bố cục
   giật ngang nửa bề rộng thanh cuộn. */
html { -webkit-text-size-adjust: 100%; color-scheme: light; scrollbar-gutter: stable; }

/* Cỡ chữ gốc 17px, to hơn app (15px): người giữ việc cúng giỗ thường đã có
   tuổi, và trên laptop người ta ngồi xa màn hình hơn cầm điện thoại. */
body {
  margin: 0;
  background: var(--nen);
  color: var(--muc);
  font-family: 'Be Vietnam Pro', -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--nhan); text-underline-offset: 3px; }
:focus-visible { outline: 3px solid var(--nhan); outline-offset: 2px; border-radius: 4px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
button:disabled { cursor: progress; opacity: .6; }
h1, h2, h3, p { margin: 0; }
/* SVG dựng bằng JS không mang width/height: không có dòng này là nó phình hết khung. */
svg { width: 20px; height: 20px; flex-shrink: 0; }
[hidden] { display: none !important; }

.num { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.mo { color: var(--muc-mo); }
.phu { color: var(--muc-phu); }
.dam { font-weight: 700; }
.do { color: var(--nhan); }

.khung { max-width: 1200px; margin: 0 auto; padding: 0 32px; }
.noi-dung { padding-top: 32px; padding-bottom: 56px; display: flex; flex-direction: column; gap: 24px; }

/* ---------- đầu trang ---------- */

.dau-trang { background: var(--dau-nen, var(--the)); border-bottom: 1px solid var(--vien); }
.dau-trang .khung { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 28px; min-height: 68px; }
.thuong-hieu { display: flex; align-items: center; gap: 11px; padding: 12px 0; color: var(--muc); text-decoration: none; margin-right: auto; }
.thuong-hieu b { display: block; font-size: 18px; letter-spacing: -.3px; line-height: 1.2; }
.thuong-hieu small { display: block; font-size: 13px; color: var(--muc-mo); line-height: 1.3; }
.thuong-hieu img { width: 34px; height: 34px; border-radius: 8px; display: block; }

.chip-tk {
  min-height: 44px; display: flex; align-items: center; gap: 9px; padding: 0 6px 0 14px;
  border: 1px solid var(--vien); border-radius: var(--bo-nut); background: var(--the);
  color: var(--muc-phu); font-size: 15px; font-weight: 600; text-decoration: none;
}
.chip-tk span[data-chu-cai] {
  width: 32px; height: 32px; border-radius: 50%; background: var(--nen-chip);
  display: flex; align-items: center; justify-content: center; font-weight: 700;
}

/* Người xem chưa đăng nhập: chip thành nút "Đăng nhập" có chữ, kể cả trên điện thoại. */
.chip-tk.chua-dang-nhap { padding: 0 16px; border-radius: var(--bo-nut); color: var(--muc); }

/* Thanh mục: trên laptop là tab trong đầu trang, trên điện thoại là thanh dưới
   cố định với biểu tượng + nhãn LUÔN hiện. Một phần tử, hai cách bày. */
.dieu-huong { display: flex; flex-wrap: wrap; gap: 2px; }
.dieu-huong a {
  padding: 23px 14px 20px; font-size: 16px; font-weight: 600; color: var(--muc-phu);
  text-decoration: none; border-bottom: 3px solid transparent;
}
/* Mục đang chọn KHÔNG đậm hơn mục khác: chữ đậm rộng hơn, và mỗi lần chuyển
   trang các mục phía sau xê dịch một chút. Màu và gạch chân là đủ. */
.dieu-huong a[aria-current='page'] { color: var(--muc); border-bottom-color: var(--nhan); }
.dieu-huong svg { display: none; }

/* ---------- thẻ, nhãn ---------- */

.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo-the); }
.the-dem { padding: 18px 20px; }
.nhan {
  font-size: 13px; font-weight: 700; letter-spacing: var(--gian-nhan, 1.4px);
  text-transform: uppercase; color: var(--muc-mo);
}
.tieu-de-trang { display: flex; flex-direction: column; gap: 6px; }
.tieu-de-trang h1 { font-size: 34px; letter-spacing: -.8px; line-height: 1.15; }
.tieu-de-trang p { color: var(--muc-phu); max-width: 720px; }

.hai-cot { display: flex; flex-wrap: wrap; gap: 24px; align-items: flex-start; }
.hai-cot > * { min-width: 0; }

/* ---------- nút ---------- */

.nut {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 0 18px; border-radius: var(--bo-nut); font-size: 16px; font-weight: 600;
  text-decoration: none; border: 1px solid transparent; white-space: nowrap;
}
.nut-chinh { background: var(--nut-nen, var(--nhan)); color: var(--tren-nhan); }
.nut-chinh:hover { background: var(--nhan-dam); color: var(--tren-nhan); }
.nut-phu { background: var(--the); border-color: var(--vien-dam); color: var(--muc); }
.nut-phu:hover { background: var(--nen-phu); color: var(--muc); }
.nut-mo { background: transparent; color: var(--muc-phu); }
.nut-to { min-height: 56px; font-size: 17px; }
.nut-rong { width: 100%; }
.nut-vuong { width: 44px; min-height: 44px; padding: 0; }

/* Chip lựa chọn: một lựa chọn trong nhóm (radio) hoặc bật/tắt. Trạng thái đọc
   từ aria-checked / aria-pressed — cùng một nguồn với trình đọc màn hình. */
.lua-chon-nhom { display: flex; flex-wrap: wrap; gap: 8px; }
.lua-chon {
  min-height: 48px; padding: 0 15px; border-radius: var(--bo-nhan);
  border: 1px solid var(--vien); background: var(--nen-chip);
  font-size: 15.5px; font-weight: 600; color: var(--muc-phu);
}
.lua-chon[aria-checked='true'], .lua-chon[aria-pressed='true'] {
  background: var(--nhan-nhat); border-color: var(--nhan-vien); color: var(--chu-tren-nhat, var(--nhan));
}

/* ---------- ô nhập ---------- */

.truong { display: flex; flex-direction: column; gap: 8px; font-size: 16px; font-weight: 600; }
.truong .goi-y { font-size: 14.5px; font-weight: 400; color: var(--muc-phu); }
.o-nhap {
  min-height: 56px; width: 100%; padding: 0 16px; border-radius: var(--bo-nut);
  border: 1.5px solid var(--vien-dam); background: var(--the); font-size: 19px; font-weight: 400;
}
.o-nhap:focus { border-color: var(--nhan); outline: none; box-shadow: 0 0 0 3px var(--nhan-nhat); }
textarea.o-nhap { min-height: 96px; padding: 12px 16px; line-height: 1.5; font-size: 17px; resize: vertical; }

.bao-loi {
  padding: 12px 16px; border-radius: var(--bo-nut); background: var(--canh-bao-nen);
  border: 1px solid var(--canh-bao-vien); color: var(--canh-bao-chu); font-size: 16px;
}
.bao-tot {
  padding: 12px 16px; border-radius: var(--bo-nut); background: var(--nhan-nhat);
  border: 1px solid var(--nhan-vien); color: var(--chu-tren-nhat, var(--nhan)); font-size: 16px; font-weight: 600;
}

/* Trang đang nạp: khung xám thay vì trang trống, để người dùng biết là đang chạy. */
.dang-nap { min-height: 120px; border-radius: var(--bo-the); background: var(--nen-phu); }

/* Ô quảng cáo. Trang chỉ đặt chỗ (hidden); worker bỏ `hidden` và chèn mã AdSense
   khi đã cấu hình (web/src/cau-hinh.js). Chừa sẵn chiều cao: quảng cáo nạp sau
   mà không có chỗ thì đẩy cả trang xuống đúng lúc người ta định bấm. Nhãn
   "Quảng cáo" luôn hiện để không ai lẫn banner với nội dung của công cụ. */
.o-quang-cao { display: flex; flex-direction: column; gap: 6px; min-height: 130px; }
.o-quang-cao .nhan-quang-cao { font-size: 12px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; color: var(--muc-mo); }
.o-quang-cao ins.adsbygoogle { display: block; width: 100%; min-height: 100px; }

.chan-trang { border-top: 1px solid var(--vien); }
.chan-trang .khung {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding-top: 18px; padding-bottom: 18px; font-size: 14px; color: var(--muc-mo);
}

/* ---------- điện thoại ---------- */

@media (max-width: 899px) {
  body { font-size: 17px; }
  .khung { padding: 0 16px; }
  .noi-dung { padding-top: 16px; padding-bottom: 32px; gap: 16px; }
  .tieu-de-trang h1 { font-size: 26px; letter-spacing: -.5px; }
  .dau-trang .khung { min-height: 60px; gap: 8px 12px; }
  .chip-tk:not(.chua-dang-nhap) [data-ten] { display: none; }
  .chip-tk:not(.chua-dang-nhap) { padding: 0 5px; border-radius: 50%; }
  .an-tren-dt { display: none !important; }
  .chan-trang { padding-bottom: 8px; }

  /* Có thanh dưới thì chừa chỗ cho nó, kể cả vùng an toàn của iPhone. */
  body.co-thanh-duoi { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }
  .co-thanh-duoi .dieu-huong {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 10;
    display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
    background: var(--the); border-top: 1px solid var(--vien);
    padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  }
  .co-thanh-duoi .dieu-huong a {
    min-height: 58px; padding: 0; border: 0; display: flex; flex-direction: column;
    align-items: center; justify-content: center; gap: 4px; font-size: 13px;
  }
  .co-thanh-duoi .dieu-huong a[aria-current='page'] { color: var(--nhan); }
  .co-thanh-duoi .dieu-huong svg { display: block; width: 24px; height: 24px; }
}

@media (min-width: 900px) {
  .chi-tren-dt { display: none !important; }
}