/* Sinh tự động từ thuong-hieu/tokens.json bởi web/build.py, không sửa tay. */
:root {
  --background: #FFFFFF;
  --card: #FFFFFF;
  --popover: #FFFFFF;
  --accent: #FFF2E8;
  --muted: #EEF3FF;
  --border: #ECE6F0;
  --input: #ECE6F0;
  --foreground: #1E2340;
  --muted-foreground: #5B5F78;
  --primary: #F27A2E;
  --ring: #B4501A;
  --brand-strong: #B4501A;
  --primary-foreground: #1E2340;
  --sun: #FFC23D;
  --sun-soft: #FFF6DB;
  --on-sun: #6B4600;
  --ok: #1E7A4C;
  --ok-soft: #E4F5EC;
  --destructive: #B42318;
  --shadow-card: 0 6px 24px rgba(30, 35, 64, 0.08);
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --space-8: 32px;
  --space-12: 48px;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 20px;
  --radius-pill: 999px;
  --radius: 20px;
  --font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Be Vietnam Pro", system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --background: #17141F;
    --card: #211D2B;
    --popover: #211D2B;
    --accent: #2E2219;
    --muted: #1E2438;
    --border: #332D3F;
    --input: #332D3F;
    --foreground: #F4F1F8;
    --muted-foreground: #B9B4C8;
    --primary: #FF9A55;
    --ring: #FFB27F;
    --brand-strong: #FFB27F;
    --primary-foreground: #1E2340;
    --sun: #FFD36B;
    --sun-soft: #3A3017;
    --on-sun: #FFD36B;
    --ok: #6FCF97;
    --ok-soft: #1A3326;
    --destructive: #F28B7A;
    --shadow-card: 0 6px 24px rgba(0, 0, 0, 0.35);
  }
}
:root {
  --ic-check: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M5%2012l5%205l10%20-10%22/%3E%3C/svg%3E");
  --ic-chevron-down: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M6%209l6%206l6%20-6%22/%3E%3C/svg%3E");
  --ic-arrow-right: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M5%2012l14%200%22/%3E%3Cpath%20d%3D%22M13%2018l6%20-6%22/%3E%3Cpath%20d%3D%22M13%206l6%206%22/%3E%3C/svg%3E");
  --ic-alert-triangle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M12%209v4%22/%3E%3Cpath%20d%3D%22M10.363%203.591l-8.106%2013.534a1.914%201.914%200%200%200%201.636%202.871h16.214a1.914%201.914%200%200%200%201.636%20-2.87l-8.106%20-13.536a1.914%201.914%200%200%200%20-3.274%200z%22/%3E%3Cpath%20d%3D%22M12%2016h.01%22/%3E%3C/svg%3E");
  --ic-info-circle: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22black%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20aria-hidden%3D%22true%22%20focusable%3D%22false%22%3E%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200%22/%3E%3Cpath%20d%3D%22M12%209h.01%22/%3E%3Cpath%20d%3D%22M11%2012h1v4h1%22/%3E%3C/svg%3E");
}
/* Hiểu Bảo Hiểm, một tệp CSS. Biến lấy từ thuong-hieu/tokens.json (bộ nhận diện v2). Mobile trước. */

/* Biến màu, khoảng cách, bo góc, bóng, họ chữ: build.py sinh từ thuong-hieu/tokens.json và chèn lên đầu tệp này trong dist.
   TODO font: tự host Be Vietnam Pro (400/600/700/800, subset vietnamese, woff2) để bỏ phụ thuộc Google Fonts;
   hiện nạp từ Google Fonts, có fallback system-ui. */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 80px; }
body {
  margin: 0; background: var(--background); color: var(--foreground);
  font-family: var(--font); font-size: 17px; line-height: 1.65; overflow-x: hidden;
}
@media (min-width: 900px) { body { font-size: 18px; } }
img, svg { max-width: 100%; height: auto; }
a { color: var(--brand-strong); text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; border-radius: 4px; }
main:focus { outline: none; }
h1, h2, h3, h4 { font-family: var(--font-display); line-height: 1.25; margin: 0 0 var(--space-3); color: var(--foreground); text-wrap: balance; }
h1 { font-size: 30px; font-weight: 800; letter-spacing: -0.01em; }
h2 { font-size: 23px; font-weight: 700; margin-top: var(--space-8); }
h3 { font-size: 18px; font-weight: 600; margin-top: var(--space-6); }
@media (min-width: 900px) { h1 { font-size: 40px; } h2 { font-size: 26px; } }
p, ul, ol, dl { margin: 0 0 var(--space-4); }
li + li { margin-top: var(--space-1); }
small, .mo { color: var(--muted-foreground); font-size: 14px; line-height: 22px; }
.so { font-variant-numeric: tabular-nums; white-space: nowrap; }
/* Cụm từ khóa cam trong tiêu đề: --primary trên nền trắng chỉ đạt 2,76:1 (dưới 3:1 cho chữ lớn).
   Trộn nửa với --brand-strong cho 3,7:1 (sáng) mà vẫn đọc là cam nắng; ở chế độ tối cả hai token đều sáng nên vẫn đạt. */
.cum-cam { color: var(--primary); color: color-mix(in srgb, var(--primary) 50%, var(--brand-strong)); }
.eyebrow { font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-strong); margin-bottom: var(--space-2); }
/* Eyebrow có liên kết là đường dẫn (breadcrumb): chữ thường, dễ đọc hơn chữ hoa; vùng bấm 44px mà không đẩy bố cục */
.eyebrow:has(a) { font-size: 14px; line-height: 20px; letter-spacing: 0; text-transform: none; color: var(--muted-foreground); }
.eyebrow a { display: inline-block; padding: 12px 0; margin: -12px 0; font-weight: 700; }
/* Câu dẫn dưới h1 */
.phu { font-size: 1.06em; max-width: 62ch; }
/* Viền ô nhập đạt 3:1 (token --border chỉ ~1,2:1 trên nền trắng); trộn từ token, không dùng màu thô */
:root { --vien-o: color-mix(in srgb, var(--muted-foreground) 70%, var(--border)); }
.an-di { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.khung { width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 var(--space-4); }
.hep { max-width: 720px; }
.muc { padding-top: var(--space-8); padding-bottom: var(--space-8); }
.bai { max-width: 760px; }
.bai > p, .bai li { max-width: 70ch; }
hr { border: 0; border-top: 1px solid var(--border); margin: var(--space-8) 0; }
blockquote { margin: 0 0 var(--space-4); padding: var(--space-4); border-left: 4px solid var(--sun); background: var(--sun-soft); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
blockquote p:last-child { margin: 0; }

/* Bỏ qua, băng nội bộ */
.bo-qua { position: absolute; left: var(--space-2); top: -60px; z-index: 100; background: var(--foreground); color: var(--background); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); }
.bo-qua:focus { top: var(--space-2); }
.bang-noi-bo { background: var(--sun-soft); color: var(--on-sun); font-size: 13px; font-weight: 600; text-align: center; padding: 6px var(--space-4); }

/* Đầu trang */
.dau-trang { position: sticky; top: 0; z-index: 50; background: var(--background); border-bottom: 1px solid var(--border); }
.dau-trang-trong { display: flex; align-items: center; gap: var(--space-3); min-height: 64px; }
.logo { display: inline-flex; min-width: 0; min-height: 44px; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--foreground); font-weight: 800; font-size: 19px; white-space: nowrap; margin-right: auto; }
.logo-mark { width: 34px; height: 34px; flex: none; }
.menu { display: none; }
.menu-ds { list-style: none; margin: 0; padding: 0; }
.menu-ds > li { margin: 0; }
.menu a, .menu summary { color: var(--foreground); text-decoration: none; font-weight: 600; cursor: pointer; }
.menu summary { list-style: none; }
.menu summary::-webkit-details-marker { display: none; }
.menu summary::after { content: ""; display: inline-block; width: 18px; height: 18px; margin-left: 4px; vertical-align: -3px; background: currentColor; -webkit-mask: var(--ic-chevron-down) center / contain no-repeat; mask: var(--ic-chevron-down) center / contain no-repeat; }
.menu details[open] summary::after { transform: rotate(180deg); }
.menu [aria-current] { color: var(--brand-strong); }
.menu-phu { font-size: 15px; color: var(--muted-foreground); }
.nut-menu { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border: 0; background: transparent; color: var(--foreground); border-radius: var(--radius-pill); cursor: pointer; }
.ic { width: 24px; height: 24px; flex: none; vertical-align: middle; }
.chu-ngan { display: inline; } .chu-dai { display: none; }
@media (min-width: 420px) { .chu-ngan { display: none; } .chu-dai { display: inline; } }

/* Menu mở trên điện thoại */
.menu.mo-menu { display: block; position: absolute; left: 0; right: 0; top: 100%; background: var(--background); border-bottom: 1px solid var(--border); box-shadow: var(--shadow-card); padding: var(--space-2) var(--space-4) var(--space-4); max-height: calc(100vh - 100px); overflow-y: auto; }
.menu.mo-menu .menu-ds > li > a, .menu.mo-menu summary { display: block; padding: var(--space-3) 0; min-height: 48px; font-size: 18px; border-bottom: 1px solid var(--border); }
.menu.mo-menu details ul { list-style: none; padding: 0 0 var(--space-2) var(--space-4); margin: 0; }
.menu.mo-menu details li a { display: block; padding: 10px 0; min-height: 44px; font-weight: 400; }
.menu.mo-menu .menu-phu { margin: var(--space-4) 0 0; }

@media (min-width: 900px) {
  .nut-menu { display: none; }
  .menu, .menu.mo-menu { display: flex; align-items: center; position: static; box-shadow: none; border: 0; padding: 0; background: none; max-height: none; overflow: visible; }
  .menu-ds { display: flex; gap: var(--space-6); align-items: center; }
  .menu-phu { display: none; }
  .menu.mo-menu .menu-ds > li > a, .menu.mo-menu summary { border: 0; padding: 0; min-height: 0; font-size: inherit; display: inline; }
  /* Vùng bấm menu máy tính 44px (trước: 30px) */
  .menu .menu-ds > li > a, .menu .menu-ds summary, .menu.mo-menu .menu-ds > li > a, .menu.mo-menu summary { display: inline-flex; align-items: center; min-height: 44px; }
  .co-con { position: relative; }
  .co-con details ul { position: absolute; top: calc(100% + 6px); left: -16px; min-width: 240px; list-style: none; margin: 0; padding: var(--space-2); background: var(--card); border-radius: var(--radius-md); box-shadow: var(--shadow-card); border: 1px solid var(--border); }
  .co-con details li a, .menu.mo-menu details li a { display: block; padding: 10px var(--space-3); border-radius: var(--radius-sm); font-weight: 400; min-height: 0; }
  .co-con details li a:hover { background: var(--muted); }
  .logo { margin-right: var(--space-8); }
  .nut-hanh-dong { margin-left: auto; }
}

/* Nút */
.nut { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: 48px; padding: 12px 26px; border-radius: var(--radius-pill); background: var(--primary); color: var(--primary-foreground); font: inherit; font-weight: 700; font-size: 17px; text-decoration: none; border: 2px solid var(--primary); cursor: pointer; text-align: center; line-height: 1.3; }
.nut { transition: filter .15s ease-out, border-color .15s ease-out, transform .1s ease-out; }
.nut:hover { filter: brightness(1.05); text-decoration: none; }
.nut:active:not([disabled]):not([aria-disabled="true"]) { transform: translateY(1px); }
.nut-nho { min-height: 44px; padding: 8px 16px; font-size: 15px; white-space: nowrap; }
.nut-phu { background: transparent; color: var(--foreground); border-color: var(--border); }
.nut-phu:hover { border-color: var(--primary); }
.nut[disabled], .nut[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.nut-day { width: 100%; }
.lien-ket-mui { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; font-weight: 600; }
.lien-ket-mui::after { content: ""; width: 18px; height: 18px; background: currentColor; -webkit-mask: var(--ic-arrow-right) center / contain no-repeat; mask: var(--ic-arrow-right) center / contain no-repeat; }
.hang-nut { display: flex; flex-wrap: wrap; gap: var(--space-3); align-items: center; margin: var(--space-6) 0; }

/* Thẻ, lưới */
.the { background: var(--card); border-radius: var(--radius); box-shadow: var(--shadow-card); padding: var(--space-6); }
.the > :last-child { margin-bottom: 0; }
.the h3:first-child, .the h2:first-child { margin-top: 0; }
.the-link { display: block; text-decoration: none; color: inherit; }
.the-link:hover { box-shadow: 0 8px 28px rgba(30, 35, 64, 0.14); }
.the-link h3 { color: var(--foreground); }
.the-wash { background: var(--muted); box-shadow: none; }
.the-dao { background: var(--accent); box-shadow: none; }
.luoi { display: grid; gap: var(--space-4); grid-template-columns: 1fr; }
@media (min-width: 700px) { .luoi-2 { grid-template-columns: repeat(2, 1fr); } .luoi-3 { grid-template-columns: repeat(3, 1fr); } }
.the-case p { font-size: 16px; }
.dong-nhan { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Nhãn */
.nhan { display: inline-block; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0.04em; padding: 4px 10px; border-radius: var(--radius-pill); vertical-align: middle; white-space: normal; }
.nhan-ok { color: var(--ok); background: var(--ok-soft); }
.nhan-ok::before { content: ""; display: inline-block; width: 12px; height: 12px; margin-right: 4px; vertical-align: -1px; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
.nhan-luu-y, .nhan-chua { color: var(--on-sun); background: var(--sun-soft); }
.nhan-cong-dong { color: var(--foreground); background: var(--muted); }
.nhan-dinh-chinh { color: var(--brand-strong); background: var(--accent); }
.nhan-trung { color: var(--muted-foreground); background: var(--muted); }
/* Alert: một thành phần cảnh báo chung */
.bang-canh-bao { position: relative; background: var(--sun-soft); color: var(--on-sun); border-radius: var(--radius-md); padding: var(--space-4) var(--space-4) var(--space-4) 48px; margin: 0 0 var(--space-6); font-weight: 600; }
.bang-canh-bao::before { content: ""; position: absolute; left: 16px; top: 18px; width: 20px; height: 20px; background: currentColor; -webkit-mask: var(--ic-alert-triangle) center / contain no-repeat; mask: var(--ic-alert-triangle) center / contain no-repeat; }
.bang-canh-bao p { margin: 0; }
.bang-canh-bao p + p { margin-top: var(--space-2); font-weight: 400; }
.hop-thong-tin { background: var(--muted); border-radius: var(--radius-md); padding: var(--space-4); margin: 0 0 var(--space-6); }
.hop-thong-tin > :last-child { margin-bottom: 0; }
.cong-khai-nho { font-size: 14px; color: var(--muted-foreground); }

/* Hero */
.hero { position: relative; overflow: hidden; isolation: isolate; padding: var(--space-8) 0 var(--space-8); }
.hero::before, .hero::after { content: ""; position: absolute; z-index: -1; border-radius: 50%; filter: blur(8px); }
.hero::before { width: 520px; height: 420px; left: -180px; top: -140px; background: radial-gradient(closest-side, var(--accent), transparent); }
/* Vệt loang dưới nằm gọn trong hero: trước đây tràn 200px nên bị overflow cắt thành mép thẳng ở cuối hero */
.hero::after { width: 560px; height: 400px; right: -220px; bottom: -40px; background: radial-gradient(closest-side, var(--muted), transparent); }
.hero h1 { font-size: 27px; line-height: 1.2; }
@media (min-width: 420px) { .hero h1 { font-size: 34px; } }
.hero .phu { font-size: 18px; color: var(--muted-foreground); max-width: 34ch; }
.hero .hang-nut { margin: var(--space-6) 0 var(--space-4); }
.hero-luoi { display: grid; gap: var(--space-8); align-items: center; }
.hero-xem-truoc { display: none; }
@media (min-width: 900px) {
  .hero { padding: var(--space-12) 0; }
  .hero h1 { font-size: 52px; }
  .hero-luoi { grid-template-columns: 1.1fr 1fr; }
  .hero-xem-truoc { display: block; }
}

/* Biểu đồ thanh ca chuẩn */
.bieu-do { list-style: none; padding: 0; margin: 0 0 var(--space-4); }
.bieu-do li { display: grid; grid-template-columns: 1fr auto; gap: 4px var(--space-3); align-items: center; margin: 0 0 var(--space-3); }
.bd-ten { font-weight: 600; font-size: 15px; }
.bd-ten small { font-weight: 400; }
.bd-thanh { grid-column: 1 / -1; grid-row: 2; height: 12px; background: var(--muted); border-radius: var(--radius-pill); overflow: hidden; }
.bd-thanh span { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-pill); }
.bd-so { font-weight: 700; grid-row: 1; grid-column: 2; }

/* Bảng */
.bang-cuon { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 0 var(--space-4); border-radius: var(--radius); border: 1px solid var(--border); background: var(--card); }
.bang { border-collapse: separate; border-spacing: 0; width: 100%; font-size: 15px; line-height: 1.45; }
.bang caption { text-align: left; font-weight: 600; padding: var(--space-3) var(--space-4); color: var(--muted-foreground); font-size: 14px; }
.bang th, .bang td { padding: 10px var(--space-3); border-bottom: 1px solid var(--border); text-align: left; vertical-align: top; }
.bang thead th { font-weight: 700; background: var(--card); position: sticky; top: 0; }
.bang tbody tr:nth-child(even) td, .bang tbody tr:nth-child(even) th[scope="row"] { background: var(--muted); }
.bang-so-sanh th[scope="row"], .bang-so-sanh thead th:first-child { position: sticky; left: 0; z-index: 1; background: var(--card); min-width: 150px; max-width: 190px; box-shadow: 1px 0 0 var(--border); }
.bang-so-sanh thead th:first-child { z-index: 2; }
.bang-so-sanh td, .bang-so-sanh thead th { min-width: 150px; }
.nhom-hang th { background: var(--background) !important; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-strong); padding-top: var(--space-4); }
.hang-ket-qua td, .hang-ket-qua th { background: var(--accent) !important; font-weight: 600; }
.hang-ket-qua strong { font-size: 17px; }
.cot-phu { display: block; font-weight: 400; font-size: 13px; color: var(--muted-foreground); }
.bang-nho td, .bang-nho th { padding: 8px 10px; }
.bang-nho td.so { text-align: right; }

/* Form */
label { font-weight: 600; display: block; margin-bottom: var(--space-1); }
input[type="text"], input[type="email"], input[type="tel"], input[type="number"], select, textarea {
  font: inherit; color: var(--foreground); background: var(--card); border: 1.5px solid var(--border); border-color: var(--vien-o); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 48px; width: 100%;
}
input:focus-visible, select:focus-visible, textarea:focus-visible { border-color: var(--brand-strong); }
.o-form { margin-bottom: var(--space-4); }
.o-dong-y { display: flex; gap: var(--space-3); align-items: flex-start; font-weight: 400; margin: var(--space-3) 0; cursor: pointer; }
.o-dong-y input { width: 22px; height: 22px; margin-top: 3px; flex: none; accent-color: var(--brand-strong); }
.loi { color: var(--destructive); font-size: 15px; font-weight: 600; }
.goi-y { font-size: 14px; color: var(--muted-foreground); font-weight: 400; display: block; }
fieldset { border: 0; padding: 0; margin: 0 0 var(--space-4); min-width: 0; }
legend { font-weight: 700; font-size: 20px; line-height: 1.3; margin-bottom: var(--space-4); padding: 0; }

/* Quiz */
.quiz { max-width: 640px; }
.tien-do { display: flex; align-items: center; gap: var(--space-3); font-size: 14px; color: var(--muted-foreground); margin-bottom: var(--space-6); }
.tien-do-thanh { flex: 1; height: 8px; background: var(--muted); border-radius: var(--radius-pill); overflow: hidden; }
.tien-do-thanh span { display: block; height: 100%; background: var(--primary); border-radius: var(--radius-pill); transition: width .2s; }
.lua-chon { display: grid; gap: var(--space-2); }
.lua-chon label { display: flex; align-items: center; gap: var(--space-3); padding: 12px var(--space-4); min-height: 52px; border: 1.5px solid var(--border); border-radius: var(--radius-md); font-weight: 400; cursor: pointer; background: var(--card); margin: 0; }
.lua-chon label:hover { border-color: var(--primary); }
.lua-chon input { width: 20px; height: 20px; flex: none; accent-color: var(--brand-strong); }
.lua-chon label:has(input:checked) { border-color: var(--brand-strong); background: var(--accent); }
.lua-chon label:has(input:focus-visible) { outline: 3px solid var(--ring); outline-offset: 2px; }
.vi-sao { margin: var(--space-4) 0; }
.vi-sao summary { cursor: pointer; font-weight: 600; color: var(--brand-strong); min-height: 44px; display: flex; align-items: center; }
.quiz-chan { display: flex; gap: var(--space-3); margin-top: var(--space-6); flex-wrap: wrap; }
.ro { display: block; width: 120px; height: 120px; }
.ro-nho { width: 88px; height: 88px; }
.ro-ben { display: flex; gap: var(--space-4); align-items: center; }
.ro-ben p { margin: 0; }
.bong-hoi { background: var(--sun-soft); color: var(--foreground); border-radius: var(--radius); padding: var(--space-4); }

/* Công cụ so sánh */
.tab-ds { display: flex; gap: var(--space-2); flex-wrap: wrap; margin: 0 0 var(--space-4); padding: 4px; background: var(--muted); border-radius: var(--radius-pill); width: fit-content; max-width: 100%; }
.tab-ds button { font: inherit; font-weight: 600; font-size: 15px; border: 0; background: transparent; color: var(--foreground); padding: 10px 18px; min-height: 44px; border-radius: var(--radius-pill); cursor: pointer; }
.tab-ds button[aria-selected="true"] { background: var(--card); box-shadow: var(--shadow-card); }
.dieu-khien { display: grid; gap: var(--space-4); grid-template-columns: 1fr; margin-bottom: var(--space-4); }
@media (min-width: 700px) { .dieu-khien { grid-template-columns: repeat(3, 1fr); } }
.dieu-khien label { font-size: 15px; }
.ca-tu-nhap { display: grid; gap: var(--space-3); grid-template-columns: 1fr; }
@media (min-width: 700px) { .ca-tu-nhap { grid-template-columns: repeat(4, 1fr); align-items: end; } }
.bo-chon { display: grid; gap: var(--space-2); grid-template-columns: 1fr; margin: 0 0 var(--space-4); }
@media (min-width: 700px) { .bo-chon { grid-template-columns: repeat(2, 1fr); } }
.bo-chon label { display: flex; gap: var(--space-3); align-items: flex-start; padding: 10px var(--space-3); border: 1.5px solid var(--border); border-radius: var(--radius-md); font-weight: 400; font-size: 15px; margin: 0; cursor: pointer; }
.bo-chon label:has(input:checked) { border-color: var(--brand-strong); background: var(--accent); }
.bo-chon label:has(input:disabled) { opacity: .55; cursor: not-allowed; }
.bo-chon input { width: 20px; height: 20px; flex: none; margin-top: 2px; accent-color: var(--brand-strong); }
.bo-chon small { display: block; }
.the-ket-qua { display: grid; gap: var(--space-3); margin: 0 0 var(--space-6); }
@media (min-width: 900px) { .the-ket-qua { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); } }
.the-ket-qua .the { padding: var(--space-4); }
.the-ket-qua .so-lon { font-size: 26px; font-weight: 700; line-height: 1.2; display: block; margin: 4px 0; }
.chu-thich-bang { font-size: 14px; color: var(--muted-foreground); }
.hang-cong-khai { font-size: 14px; border-top: 1px solid var(--border); padding-top: var(--space-3); margin-top: var(--space-3); }
.thanh-day { position: sticky; bottom: 0; z-index: 20; background: var(--background); border-top: 1px solid var(--border); padding: var(--space-3) var(--space-4); margin: var(--space-6) calc(-1 * var(--space-4)) 0; }
@media (min-width: 900px) { .thanh-day { position: static; border: 0; padding: 0; margin: var(--space-6) 0 0; background: none; } }

/* Từ điển */
.tu-dien > div { padding: var(--space-4) 0; border-bottom: 1px solid var(--border); }
.tu-dien dt { font-weight: 700; font-size: 18px; margin-bottom: var(--space-1); }
.tu-dien dd { margin: 0; }
.muc-luc-nho ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: var(--space-2); }
.muc-luc-nho li { margin: 0; }
.muc-luc-nho a { display: inline-block; padding: 8px 14px; border-radius: var(--radius-pill); background: var(--muted); text-decoration: none; color: var(--foreground); font-size: 15px; font-weight: 600; min-height: 40px; }
.ds-hang { columns: 1; padding-left: 0; list-style: none; }
.ds-hang li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); break-inside: avoid; margin: 0; }
@media (min-width: 700px) { .ds-hang { columns: 2; column-gap: var(--space-8); } }
.checklist { list-style: none; padding: 0; }
.checklist li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); margin: 0; }
.checklist label { display: flex; gap: var(--space-3); font-weight: 400; cursor: pointer; margin: 0; }
.checklist input { width: 22px; height: 22px; flex: none; margin-top: 3px; accent-color: var(--brand-strong); }
.dong-tac-gia { font-size: 14px; color: var(--muted-foreground); border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: var(--space-3) 0; margin: var(--space-4) 0 var(--space-6); }
.tra-loi-ngan { background: var(--accent); border-radius: var(--radius); padding: var(--space-6); margin-bottom: var(--space-6); }
.tra-loi-ngan > :last-child { margin-bottom: 0; }
.nguon-kiem-chung { font-size: 15px; }
.nguon-kiem-chung li { margin-bottom: var(--space-2); }

/* Chân trang */
.chan-trang { margin-top: var(--space-12); padding: var(--space-8) 0 var(--space-12); background: var(--muted); font-size: 15px; }
.cong-khai { background: var(--card); border-radius: var(--radius-md); padding: var(--space-4); }
.chan-ds { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-2) var(--space-4); }
@media (min-width: 900px) { .chan-ds { grid-template-columns: repeat(4, 1fr); } }
.chan-ds li { margin: 0; }
.chan-ds a { color: var(--foreground); display: inline-block; padding: 6px 0; }
.chong-mao-danh { font-size: 14px; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
@media print { .dau-trang, .chan-trang, .bang-noi-bo, .nut, .thanh-day { display: none !important; } body { font-size: 12pt; } }
#cong-cu-so-sanh:not(.co-js) .can-js { display: none; }
.o-thieu { color: var(--muted-foreground); font-style: italic; }
.radio-hang { display: flex; flex-wrap: wrap; gap: var(--space-4); font-weight: 400; }
.radio-hang label { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 400; margin: 0; min-height: 44px; }
.radio-hang input, .o-chon input { width: 20px; height: 20px; accent-color: var(--brand-strong); }
.o-chon { display: inline-flex; gap: var(--space-2); align-items: center; font-weight: 400; min-height: 44px; margin: 0; }
/* Thanh ngữ cảnh: không bao giờ cuộn ngang. Điện thoại: các nhóm xếp dọc, chip tự xuống dòng, không dính đầu trang
   (dính thì che mất nửa màn hình). Từ 900px: lưới 2 cột "Ca | Tuổi" và "Loại thẻ | Loại viện", dính đầu trang. */
.thanh-ngu-canh { display: grid; grid-template-columns: 1fr; gap: var(--space-3); background: var(--background); padding: var(--space-2) 0 var(--space-3); border-bottom: 1px solid var(--border); margin-bottom: var(--space-2); }
.thanh-ngu-canh > * { min-width: 0; }
@media (min-width: 900px) {
  .thanh-ngu-canh { position: sticky; top: 64px; z-index: 30; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); column-gap: var(--space-6); }
}
.che-do { margin: var(--space-4) 0 var(--space-2); }
.loi-truong { margin: 4px 0 0; color: var(--destructive); font-size: 14px; font-weight: 600; }
.ca-tu-nhap input[aria-invalid="true"] { border-color: var(--destructive); }
.thanh-ngu-canh label { font-size: 13px; color: var(--muted-foreground); margin: 0; }
.thanh-ngu-canh select { min-height: 44px; padding: 6px 8px; font-size: 15px; }
.o-nut { all: unset; display: block; width: 100%; cursor: pointer; border-radius: 4px; }
.o-nut:hover { text-decoration: underline; text-decoration-color: var(--primary); }
.o-nut:focus-visible { outline: 3px solid var(--ring); outline-offset: 2px; }
/* Ô bấm xem nguồn trong bảng: nới vùng bấm lên ~44px bằng padding âm, không đổi chiều cao hàng */
.o-nut { padding: 11px 0; margin: -11px 0; }
.ngan-nguon { position: fixed; z-index: 60; left: 0; right: 0; bottom: 0; max-height: 70vh; overflow-y: auto; background: var(--card); box-shadow: 0 -8px 30px rgba(0,0,0,.18); border-radius: var(--radius) var(--radius) 0 0; padding: var(--space-6) var(--space-4); }
.ngan-nguon #dong-nguon { float: right; }
.ngan-nguon dt { font-weight: 600; font-size: 14px; color: var(--muted-foreground); margin-top: var(--space-2); }
.ngan-nguon dd { margin: 0; }
@media (min-width: 900px) { .ngan-nguon { left: auto; top: 80px; width: 380px; max-height: none; border-radius: var(--radius) 0 0 var(--radius); } }
.nut-chu { font: inherit; color: var(--brand-strong); background: none; border: 0; padding: 0; text-decoration: underline; cursor: pointer; min-height: 0; }
.bang-so-sanh thead .nhan { margin-top: 4px; }

/* Empty: ô trống chung, có Rõ tư thế suy nghĩ và một hành động */
.empty { display: grid; justify-items: center; text-align: center; gap: var(--space-3); padding: var(--space-8) var(--space-4); background: var(--muted); border-radius: var(--radius); }
.empty img { width: 104px; height: 104px; }
.empty h2, .empty h3 { margin: 0; }
.empty p { margin: 0; max-width: 46ch; color: var(--muted-foreground); }
/* Nhóm nút chọn (toggle group) cho 2–7 phương án */
.nhom-chon { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px; }
.nhom-chon label { margin: 0; flex: none; }
.nhom-chon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.nhom-chon span { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: var(--radius-pill); border: 1.5px solid var(--border); background: var(--card); font-size: 15px; font-weight: 600; cursor: pointer; }
.nhom-chon input:checked + span { background: var(--accent); border-color: var(--brand-strong); color: var(--foreground); }
/* Trạng thái đã chọn không chỉ dựa vào màu: thêm dấu tích (Tabler check) */
.nhom-chon input:checked + span::before { content: ""; width: 16px; height: 16px; margin-right: 6px; flex: none; background: currentColor; -webkit-mask: var(--ic-check) center / contain no-repeat; mask: var(--ic-check) center / contain no-repeat; }
.nhom-chon input:focus-visible + span { outline: 3px solid var(--ring); outline-offset: 2px; }
.nhan-nhom { display: block; font-size: 13px; font-weight: 600; color: var(--muted-foreground); margin-bottom: 2px; }
button, summary, label, select, [role="tab"] { cursor: pointer; }
.dong-minh-bach { display: flex; gap: var(--space-3); align-items: flex-start; background: var(--muted); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); font-size: 15px; margin: 0; }
.dong-minh-bach .ic { color: var(--brand-strong); margin-top: 2px; }
.luoi-bang-chung { display: grid; gap: var(--space-6); }
@media (min-width: 900px) { .luoi-bang-chung { grid-template-columns: 1fr 1fr; align-items: start; } }
.luoi-loi-vao { display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .luoi-loi-vao { grid-template-columns: 1.4fr 1fr 1fr; } }
.loi-vao-chinh { background: var(--accent); box-shadow: none; }
.the-link .ic { color: var(--brand-strong); width: 28px; height: 28px; margin-bottom: var(--space-2); }
.cac-buoc { counter-reset: buoc; list-style: none; padding: 0; display: grid; gap: var(--space-4); }
@media (min-width: 900px) { .cac-buoc { grid-template-columns: repeat(3, 1fr); } }
.cac-buoc li { counter-increment: buoc; margin: 0; padding-left: 48px; position: relative; }
.cac-buoc li::before { content: counter(buoc); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: var(--accent); color: var(--brand-strong); font-weight: 800; display: grid; place-items: center; }
.ds-bai { list-style: none; padding: 0; }
.ds-bai li { padding: var(--space-3) 0; border-bottom: 1px solid var(--border); margin: 0; }
.ds-bai a { font-weight: 600; font-size: 18px; display: block; }
.ds-bai small { color: var(--muted-foreground); }
.ten-goi { display: flex; gap: 10px; align-items: center; text-align: left; }
.ten-goi strong { display: block; }
/* Logo hãng phần lớn là ảnh ngang (~5:1). Khung vuông 24-32px làm logo cao chưa tới 6px, không nhận ra được.
   Khung ngang giữ nguyên ảnh (contain), chỉ để nhận diện. */
.logo-hang { width: 64px; height: 28px; padding: 2px 4px; flex: none; border-radius: var(--radius-sm); object-fit: contain; background: #fff; }
.logo-nho { width: 56px; height: 24px; padding: 2px 3px; }
.logo-chu { display: inline-grid; place-items: center; background: var(--muted); color: var(--foreground); font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.bd-ten { display: flex; gap: 8px; align-items: center; }
.dang-hoan-thien { font-size: 13px; line-height: 1.4; color: var(--on-sun); background: var(--sun-soft); border-radius: var(--radius-sm); padding: 6px 8px; margin: 8px 0 0; }
.loi-form { margin: 0 0 var(--space-4); padding-left: 20px; }
[aria-invalid="true"] { border-color: var(--destructive) !important; }
.o-dong-y:has([aria-invalid="true"]) { color: var(--destructive); }
/* Trang Hãng: logo hãng là ảnh ngang, cần khung rộng để đọc được (logo giữ nguyên, chỉ co giãn) */
.ds-hang .logo-hang { width: 104px; height: 44px; padding: 4px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm); }
.ds-hang .logo-chu { display: inline-flex; align-items: center; justify-content: center; }
.ds-hang .ten-goi { gap: var(--space-3); }
/* Trạng thái form: bản mẫu (chưa ghi nhận), đang gửi, lỗi mạng. Luôn có chữ, không dùng màu một mình. */
.tb-form { margin: var(--space-3) 0 0; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); background: var(--muted); font-size: 15px; }
.tb-form:empty { display: none; }
.tb-mau { background: var(--sun-soft, var(--accent)); border-left: 4px solid var(--sun, var(--brand)); }
.tb-loi { background: var(--muted); border-left: 4px solid var(--destructive); }
.tb-form:focus { outline: 3px solid var(--ring); outline-offset: 2px; }
/* "Đang so": cho biết các gói đang được tính ngay dưới tiêu đề kết quả */
.dang-so { margin: 0 0 var(--space-3); color: var(--muted-foreground); font-size: 15px; }
.dang-so strong { color: var(--foreground); }
.dang-so .nut-chu { min-height: 44px; padding: 0 6px; }