/* ═══════════════════════════════════════════════════════════════════════════
 * ban-dung.css — NGUYÊN VĂN CSS CỦA BẢN DỰNG. KHÔNG SỬA TAY TỆP NÀY.
 * ═══════════════════════════════════════════════════════════════════════════
 *
 * Nguồn: khối <style> trong `Alo Uc v2.dc.html` (bản dựng Sếp Long duyệt).
 * Sinh ra bằng `/root/tmp/alouc-port/` — chỉ lược đi các luật của TRÌNH XEM
 * tài liệu thiết kế (`.dv-*`), ảnh mẫu (`.i1`–`.i16`, `.p1`–`.p4`) và luật
 * `body`/`a` của canvas. Mọi luật còn lại giữ nguyên từng byte.
 *
 * 🔴 VÌ SAO PHẢI LÀM THẾ (Thanh 30/10/2026 — sau 3 lần Sếp bảo "vẫn lệch"):
 *    Trước đây em viết TAY 4 tệp (tokens/base/components/layout) rồi đo vài
 *    thuộc tính xem có giống bản dựng không. Cách đó không bao giờ hội tụ, vì
 *    87,6% thông tin diện mạo của bản dựng nằm trong 1.506 thuộc tính
 *    `style=""` nội tuyến trên từng thẻ, không nằm trong CSS. Viết lại bằng
 *    tay là dịch lại một bản dịch — sai số cộng dồn vô hạn.
 *    Port đúng nghĩa là DỊCH 1-1: lấy nguyên bytes, chỉ đổi phần nội dung.
 *    (Cùng bài học Sếp đã dạy ở tvmst 22/10: "port = dịch 1-1, không viết lại".)
 *
 * Muốn đổi diện mạo thì sửa ở `thich-ung.css` hoặc qua Dashboard, KHÔNG sửa
 * tệp này — sửa ở đây là phá mất mốc đối chiếu với bản dựng.
 * Cổng nghiệm thu: `/root/tmp/alouc-port/doi-chieu.mjs` phải ra 0 lệch.
 * ═══════════════════════════════════════════════════════════════════════════ */


/* ── Alo Úc v2 — bảng màu sáng dựng trên dải tông Nocturne ─────────────── */
.pg{
  --ink:#1b1d26;            /* chữ chính */
  --ink-2:#4a4e60;          /* chữ phụ */
  --ink-3:#5a5e73;          /* chú thích — đã nâng tương phản lên 5,6:1 */
  --paper:#f7f8fd;          /* nền trang */
  --card:#fdfdff;           /* mặt thẻ */
  --line:#dde1ee;           /* đường kẻ */
  --line-2:#c7ccdf;         /* kẻ đậm */
  --navy:#262a60;           /* masthead + footer */
  --navy-2:#1d2050;
  --acc:#5d5294;            /* accent-700, đủ tương phản trên nền sáng */
  --acc-soft:#ece9f8;
  --foot-ink:#c9cde6;--foot-txt:#aeb4d6;--foot-mut:#8d93bd;
  --tint:#fbfaff;--tint-acc:#f3f1fb;--tint-ok:#eef6f2;
  --ok-ink:#1f7a5a;--ok-bg:#e3f3ec;--ok-bd:#bfe0d2;
  --warn-ink:#9a6414;--warn-bg:#fbf0dc;
  --bad-ink:#b03a3a;--bad-bg:#f8e7e7;
  width:1440px;font-family:Inter,system-ui,sans-serif;color:var(--ink);
  background:var(--paper);-webkit-font-smoothing:antialiased;
}
.pg a{text-decoration:none;color:inherit}
/* Tiêu đề dùng Source Serif 4 — giọng báo chí; giao diện và chữ nhỏ dùng Inter */
.pg h1,.pg h2,.pg h3,.pg h4{font-family:"Source Serif 4",Georgia,serif;font-weight:600;letter-spacing:-0.004em;margin:0;color:var(--ink);text-wrap:balance}
.pg p,.pg li,.pg .dek{text-wrap:pretty}
.pg .kick,.pg .badge,.pg .shd h2,.pg nav a,.pg footer a{white-space:nowrap}
.pg{position:relative}
.totop{display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 20px;border-radius:999px;border:1px solid var(--line-2);background:var(--card);font:500 13px Inter,system-ui,sans-serif;color:var(--ink-2);box-shadow:0 2px 10px rgba(27,29,38,.07)}
.totop:hover{border-color:var(--acc);color:var(--acc)}
/* ── Chế độ tối ─────────────────────────────────────────── */
body.dark{background:#0a0b12}
body.dark .pg{--ink:#e9eaf3;--ink-2:#b2b8cf;--ink-3:#959bb4;--paper:#12141d;--card:#1a1d28;--line:#2a2e3d;--line-2:#3b4053;--navy:#0d0f1c;--navy-2:#080a14;--acc:#b5abfc;--acc-soft:#242048;--tint:#1f2233;--tint-acc:#231f40;--tint-ok:#15241e;--ok-ink:#5fcb9f;--ok-bg:#153227;--ok-bd:#2b4a3c;--warn-ink:#e3b267;--warn-bg:#33281a;--bad-ink:#f08a8a;--bad-bg:#331d1d;--foot-ink:#b9bfdc;--foot-txt:#9aa0bf;--foot-mut:#7d83a4}
body.dark .ph{background:#232736;border-color:#2f3446;color:#6b7187}
body.dark .ad{background:#1a1d2b;border-color:#343a4e;color:#6b7187}
body.dark .seal{background:linear-gradient(180deg,#1f2233,#1a1d28)}
body.dark .totop{background:#1a1d28;box-shadow:none}
body.dark .pg img[src$="alouc-logo.png"]{filter:brightness(1.75) saturate(.8)}
body.dark .pg mark{background:#3a3470 !important;color:#e9eaf3 !important}
.tool-l{display:block;font:600 11px Inter,system-ui,sans-serif;letter-spacing:.09em;text-transform:uppercase;color:var(--ink-3);margin-bottom:9px}
.tool-row{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:18px}
.pg .shd h2,.pg .kick,.pg .meta,.pg nav,.pg .chip,.pg .ebtn,.pg .lbl,.pg table{font-family:Inter,system-ui,sans-serif}
.pg .shd h2{font-weight:600;letter-spacing:.04em;text-transform:uppercase;font-size:13px}
/* điều khiển biểu mẫu — không dùng mặc định của trình duyệt */
.pg input[type=radio],.pg input[type=checkbox]{appearance:none;-webkit-appearance:none;width:16px;height:16px;margin:0;flex:none;border:1.5px solid var(--line-2);background:var(--card);border-radius:50%;cursor:pointer}
.pg input[type=checkbox]{border-radius:12px}
.pg input[type=radio]:hover,.pg input[type=checkbox]:hover{border-color:var(--acc)}
.pg input[type=radio]:checked{border-color:var(--acc);background:var(--acc);box-shadow:inset 0 0 0 3px var(--card)}
.pg input[type=checkbox]:checked{border-color:var(--acc);background:var(--acc)}
/* huy hiệu tín nhiệm */
.badge{display:inline-flex;align-items:center;gap:7px;height:28px;padding:0 11px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font:500 11.5px Inter,system-ui,sans-serif;color:var(--ink-2)}
.badge-dot{width:6px;height:6px;border-radius:50%;background:var(--ok-ink);flex:none}
.badge-acc{border-color:#d9d3ef;background:var(--acc-soft);color:var(--acc)}
.seal{display:flex;gap:13px;align-items:flex-start;padding:18px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(180deg,var(--tint),var(--card))}
.seal-ic{min-width:46px;height:34px;flex:none;padding:0 11px;border-radius:999px;border:1.5px solid var(--acc);background:var(--acc-soft);color:var(--acc);display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;font:600 11.5px Inter,system-ui,sans-serif;letter-spacing:.02em}
.up{color:var(--ok-ink)}.down{color:var(--bad-ink)}
/* ảnh demo */
.ph.img{background-size:cover;background-position:center;font-size:0;color:transparent;border-color:var(--line-2)}
.wrap{padding:0 56px}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:32px}
.sect{padding:40px 0}
.shd{position:relative;display:flex;align-items:center;gap:14px;padding-bottom:14px;margin-bottom:24px;border-bottom:2px solid var(--navy)}
.shd::after{content:"";position:absolute;left:0;bottom:-2px;width:58px;height:2px;background:var(--acc)}
.shd h2{font-size:17px;letter-spacing:.02em}
.shd .more{margin-left:auto;font-size:13px;color:var(--acc)}
.kick{font-size:10.5px;font-weight:600;letter-spacing:.11em;text-transform:uppercase;color:var(--acc)}
.meta{font-size:11.5px;color:var(--ink-3)}
.dek{font-size:14px;line-height:1.55;color:var(--ink-2);margin:0}
.ph{display:grid;place-items:center;text-align:center;padding:8px;background:#e8ebf6;color:#9397ab;font:400 10px/1.4 Inter,system-ui,sans-serif;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);border-radius:14px;overflow:hidden}
.ad{display:grid;place-items:center;background:#eef0f8;border:1px dashed var(--line-2);border-radius:14px;color:#9397ab;font:400 10px/1.4 Inter,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase}
.story{display:flex;flex-direction:column;gap:9px}
.story h3{font-size:17px;line-height:1.3}
.row{display:flex;gap:16px;padding:16px 0;border-top:1px solid var(--line)}
.row h3{font-size:15.5px;line-height:1.34}
.ebtn{display:inline-flex;align-items:center;justify-content:center;height:38px;padding:0 18px;border-radius:999px;font-size:13.5px;font-weight:500;white-space:nowrap;border:1px solid var(--navy);color:var(--navy);background:transparent;transition:background .15s}
.ebtn-fill{background:var(--navy);color:#f7f8fd;border-color:var(--navy)}
.ebtn-fill:hover{background:var(--navy-2)}
.ebtn:hover{background:#e9ebf6}
/*
 * 🔴 NGOẠI LỆ CÓ LÝ DO — chỗ DUY NHẤT theme cố ý khác bản dựng về màu.
 *
 * Bản dựng có sẵn lỗi độ ưu tiên: `.pg a{color:inherit}` là (0,1,1) nên THẮNG
 * `.ebtn-fill{color:#f7f8fd}` (0,1,0). Đo trên CHÍNH bản dựng (không phải suy
 * đoán): nút "Tư vấn miễn phí" ra chữ rgb(27,29,38) trên nền rgb(38,42,96)
 * ⇒ tương phản 1,26:1, trong khi WCAG tối thiểu 4,5:1 — gần như không đọc.
 *
 * Port 1-1 thì đúng ra phải chép cả lỗi. Nhưng đây là nút kêu gọi chính của
 * trang và lỗi này cản người dùng thật, nên em nâng độ ưu tiên cho ĐÚNG Ý ĐỒ
 * thiết kế (nền đặc thì chữ sáng) thay vì chép nguyên. Đã khai vào
 * `ngoai-le.json` để cổng đối chiếu không báo nhầm — và cổng vẫn in số đã bỏ
 * qua, không giấu.
 */
.pg a.ebtn{color:var(--navy)}
.pg a.ebtn-fill{color:#f7f8fd}
.ein{height:38px;width:100%;padding:0 14px;border:1px solid var(--line-2);border-radius:999px;background:var(--card);font:400 13.5px Inter,system-ui,sans-serif;color:var(--ink)}
.lbl{display:block;font-size:11.5px;color:var(--ink-2);margin-bottom:5px}
.chip{display:inline-flex;align-items:center;height:28px;padding:0 13px;border-radius:999px;font-size:12px;white-space:nowrap;border:1px solid var(--line-2);color:var(--ink-2);background:var(--card)}
.chip-on{background:var(--navy);border-color:var(--navy);color:#f7f8fd}
.chip-acc{background:var(--acc-soft);border-color:#d9d3ef;color:var(--acc)}
/*
 * 🔴 CÙNG MỘT LỖI ĐỘ ƯU TIÊN, LẦN NÀY Ở THẺ LỌC (tìm ra 30/10/2026 vòng hai).
 *
 * Bản dựng vẽ thẻ lọc bằng <span class="chip"> nên ăn `color:var(--ink-2)`.
 * Trên site thật thẻ lọc BẮT BUỘC là <a> (bấm vào phải ra trang chủ đề), và
 * `.pg a{color:inherit}` (0,1,1) thắng `.chip{color:...}` (0,1,0) ⇒ chữ trong
 * the roi ve mau chu than trang. Do that: cong doi chieu bao lech `color` o
 * dung 10 the — 7 the chu de o dau chuyen muc + 3 the sap xep.
 *
 * Chua dung cho: nang do uu tien cho the <a> giu dung mau cua `.chip`, y nhu
 * da lam voi `.ebtn` o tren. Thu tu ba dong nay quan trong — mot the mang ca
 * `chip chip-on` thi dong sau phai thang.
 */
.pg a.chip{color:var(--ink-2)}
.pg a.chip-on{color:#f7f8fd}
.pg a.chip-acc{color:var(--acc)}
/* canvas chrome */
body{margin:0;background:#2a2d3a}