/* Tìm Luật Sư – giao diện.
   Ngôn ngữ hình ảnh lấy từ giấy tờ pháp lý Việt Nam: tờ phiếu trắng, dòng điền chấm, mực bút bi xanh cho thao tác,
   màu đỏ con dấu chỉ dùng cho dấu "đã ký", "đã duyệt" và lỗi. Chữ giao diện Be Vietnam Pro, chữ văn bản Source Serif 4. */

@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../phong/be-vietnam-pro-vietnamese-400-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 400; font-display: swap; src: url('../phong/be-vietnam-pro-latin-400-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../phong/be-vietnam-pro-vietnamese-600-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Be Vietnam Pro'; font-style: normal; font-weight: 600; font-display: swap; src: url('../phong/be-vietnam-pro-latin-600-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../phong/source-serif-4-vietnamese-wght-normal.woff2') format('woff2'); unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB; }
@font-face { font-family: 'Source Serif 4'; font-style: normal; font-weight: 200 900; font-display: swap; src: url('../phong/source-serif-4-latin-wght-normal.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

/* Hệ màu sơn mài: Đỏ thẫm (hành động, con dấu) và Vàng kim cổ (điểm nhấn, nét) trên nền ngà, mực nâu espresso.
   Tông trầm, nét mảnh, nhiều khoảng thở cho cảm giác trang trọng, tinh tế. */
:root {
  --nen: #f8f4ec;
  --giay: #fffdf8;
  --muc: #211810;
  --muc-nhat: #6a5c4b;
  --vien: #e8dcc6;
  --ke: #b6a68d;
  --do: #9e1b22;
  --do-dam: #7c141a;
  --do-sang: #be2630;
  --do-nen: #f6e8e3;
  --do-nut: linear-gradient(180deg, #ad2129 0%, #8a161d 100%);
  --do-nut-dam: linear-gradient(180deg, #9a1a21 0%, #771219 100%);
  --vang: #b8860b;
  --vang-dam: #8a6508;
  --vang-net: #c6a24a;
  --vang-sang: #dcbb63;
  --vang-nen: #f7eecd;
  --vang-chu: #6b4e05;
  --dau: #9e1b22;           /* con dấu và lỗi */
  --dau-nen: #f6e8e3;
  --bong: 0 1px 2px rgba(60, 40, 18, .04), 0 14px 32px -18px rgba(60, 40, 18, .18);
  --bong-nang: 0 2px 8px rgba(60, 40, 18, .06), 0 26px 50px -24px rgba(110, 30, 20, .24);
  --co: 16px;
  --chu-giao-dien: 'Be Vietnam Pro', -apple-system, system-ui, 'Segoe UI', Roboto, 'Noto Sans', Arial, sans-serif;
  --chu-van-ban: 'Source Serif 4', 'Times New Roman', 'Liberation Serif', Georgia, serif;
  /* Màu nhấn truyền vào bộ phận thống kê dùng chung (chỉ đặt biến host) */
  --chip-mau: #9e1b22; --chip-mau-chu: #fffdf8;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="sang"]) {
    --nen: #15110c; --giay: #1e1811; --muc: #f0e7d7; --muc-nhat: #b3a58f; --vien: #372c1f; --ke: #776550;
    --do: #f0918c; --do-dam: #f6b4ae; --do-sang: #f0918c; --do-nen: #35140f;
    --vang: #cda85a; --vang-dam: #e0c073; --vang-net: #b89445; --vang-sang: #e6c877; --vang-nen: #342a12; --vang-chu: #e9cf86;
    --dau: #f0918c; --dau-nen: #35140f;
    --bong: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 32px -18px rgba(0, 0, 0, .65);
    --bong-nang: 0 2px 8px rgba(0, 0, 0, .45), 0 28px 54px -22px rgba(0, 0, 0, .75);
    --chip-mau: #f0918c; --chip-mau-chu: #2a0f0d;
    color-scheme: dark;
  }
}
:root[data-theme="toi"] {
  --nen: #15110c; --giay: #1e1811; --muc: #f0e7d7; --muc-nhat: #b3a58f; --vien: #372c1f; --ke: #776550;
  --do: #f0918c; --do-dam: #f6b4ae; --do-sang: #f0918c; --do-nen: #35140f;
  --vang: #cda85a; --vang-dam: #e0c073; --vang-net: #b89445; --vang-sang: #e6c877; --vang-nen: #342a12; --vang-chu: #e9cf86;
  --dau: #f0918c; --dau-nen: #35140f;
  --bong: 0 1px 2px rgba(0, 0, 0, .35), 0 14px 32px -18px rgba(0, 0, 0, .65);
  --bong-nang: 0 2px 8px rgba(0, 0, 0, .45), 0 28px 54px -22px rgba(0, 0, 0, .75);
  --chip-mau: #f0918c; --chip-mau-chu: #2a0f0d;
  color-scheme: dark;
}
:root.chu-to { --co: 19px; }
::selection { background: var(--vang-nen); color: var(--muc); }

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--nen); color: var(--muc);
  font-family: var(--chu-giao-dien); font-size: var(--co); line-height: 1.62;
  padding-bottom: env(safe-area-inset-bottom);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
img, svg { max-width: 100%; }
a { color: var(--do); text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .15s ease; }
a:hover { color: var(--do-dam); }
:focus-visible { outline: 2px solid var(--do); outline-offset: 3px; border-radius: 4px; }
.an { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.an-tep { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

/* Chuyển động: nội dung vào mềm khi đổi trang; tôn trọng tuỳ chọn giảm chuyển động */
@keyframes hien-len { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }
.phieu, .phan, .van-ban, .bai, .the-so, .danh-ba, .cac-buoc, table.bang, .hai-hop-dong, dl.thong-tin,
.luoi-the, .luoi-linh-vuc, .dai-goi, .nhom-hoi {
  animation: hien-len .28s ease both;
}
/* Hero vào theo nhịp cho cảm giác cao cấp */
.hero .mao { animation: hien-len .5s .02s cubic-bezier(.2, .7, .2, 1) both; }
.hero h1 { animation: hien-len .6s .08s cubic-bezier(.2, .7, .2, 1) both; }
.hero .dan { animation: hien-len .6s .16s cubic-bezier(.2, .7, .2, 1) both; }
.tin-day { animation: hien-len .6s .24s cubic-bezier(.2, .7, .2, 1) both; }
.hero .phieu { animation: hien-len .7s .14s cubic-bezier(.2, .7, .2, 1) both; }
@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }

h1, h2, h3 { font-family: var(--chu-van-ban); font-weight: 640; line-height: 1.2; letter-spacing: -.012em; color: var(--muc); }
h1 { font-size: 1.95em; margin: .35em 0 .4em; }
h2 { font-size: 1.4em; margin: 1.7em 0 .55em; }
h3 { font-size: 1.12em; margin: 1.2em 0 .4em; letter-spacing: -.006em; }
p { margin: 0 0 .85em; }
.nhat { color: var(--muc-nhat); }
.nho { font-size: .875em; }

/* Mào chữ nhỏ: chữ hoa thưa, vàng kim cổ — nét trang trọng kiểu văn bản chính thức */
.mao { display: block; font-family: var(--chu-giao-dien); font-weight: 600; font-size: .76em; letter-spacing: .16em; text-transform: uppercase; color: var(--vang-dam); margin: 0 0 .5em; }

/* Thanh báo site thử */
.thanh-thu { background: var(--vang-nen); color: var(--vang-chu); font-weight: 600; font-size: .85em; letter-spacing: .01em; padding: 8px 16px; text-align: center; border-bottom: 1px solid rgba(110, 77, 0, .22); }

/* Đầu trang: nền giấy, chỉ vàng kim mảnh dưới chân */
.dau-trang { background: var(--giay); border-bottom: 1px solid var(--vien); position: sticky; top: 0; z-index: 10; }
.dau-trang::after { content: ''; display: block; height: 1px; background: linear-gradient(90deg, var(--vang-net) 0%, rgba(198, 162, 74, .18) 55%, transparent 100%); }
.dau-trang .trong-dau { max-width: 60rem; margin: 0 auto; padding: 12px 16px; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.nhan-hieu { display: inline-flex; align-items: center; gap: 10px; color: var(--muc); text-decoration: none; font-family: var(--chu-van-ban); font-weight: 640; font-size: 1.18em; letter-spacing: -.012em; white-space: nowrap; flex: none; }
.nhan-hieu svg { width: 34px; height: 34px; flex: none; filter: drop-shadow(0 2px 5px rgba(120, 20, 26, .16)); transition: transform .25s ease; }
.nhan-hieu:hover svg { transform: rotate(-4deg) scale(1.04); }
.dau-trang nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.dau-trang nav a { padding: 8px 11px; border-radius: 8px; text-decoration: none; color: var(--muc); font-size: .92em; white-space: nowrap; transition: background .15s ease, color .15s ease; }
.dau-trang nav a:hover { background: var(--do-nen); color: var(--do); }
.dau-trang nav a[aria-current="page"] { color: var(--do); background: var(--do-nen); font-weight: 600; }
.dau-trang nav .chi-may-lon { display: none; }
@media (min-width: 600px) { .dau-trang nav .chi-may-lon { display: inline-block; } .nhan-hieu { font-size: 1.26em; } }

main { display: block; }
.khung { max-width: 44rem; margin: 0 auto; padding: 24px 16px 80px; }
.khung.rong { max-width: 60rem; }
/* Trang chủ chạy toàn chiều rộng để dựng các dải mục; mỗi dải tự canh nội dung */
.khung.man-rong { max-width: none; padding: 0 0 72px; }

/* Dải mục toàn chiều rộng (chỉ dùng ở trang chủ) */
.bang { padding: 52px 0; }
.bang > .trong { max-width: 62rem; margin: 0 auto; padding: 0 20px; }
.bang.hep > .trong { max-width: 46rem; }
.bang.trang { background: var(--giay); border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); }
.bang .muc:first-child { margin-top: 0; }
.bang .muc:last-child { margin-bottom: 0; }

/* Hero sơn mài: nền đỏ thẫm có vân kim mảnh, chữ ngà, phiếu tiếp nhận nổi khối */
.hero { position: relative; overflow: hidden; color: #f6ecd8; padding: 54px 0 60px;
  background:
    radial-gradient(58% 48% at 86% -6%, rgba(220, 187, 99, .20), transparent 60%),
    radial-gradient(92% 72% at -12% 112%, rgba(140, 22, 29, .55), transparent 58%),
    repeating-linear-gradient(135deg, rgba(220, 187, 99, .05) 0 2px, transparent 2px 11px),
    linear-gradient(158deg, #5c1217 0%, #360d0f 60%, #280a0c 100%);
}
.hero::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--vang-net) 20%, var(--vang-sang) 50%, var(--vang-net) 80%, transparent); opacity: .7; }
.hero > .trong { position: relative; display: grid; gap: 30px; }
@media (min-width: 900px) { .hero > .trong { grid-template-columns: 1.08fr .92fr; align-items: center; gap: 48px; } .hero { padding: 72px 0 80px; } }
.hero .mao { color: var(--vang-sang); }
.hero h1 { color: #fdf6e8; font-family: var(--chu-van-ban); font-weight: 640; font-size: clamp(2.15em, 5.6vw, 3.15em); line-height: 1.05; letter-spacing: -.016em; margin: .05em 0 .34em; }
.hero h1::after { content: ''; display: block; width: 58px; height: 2px; margin-top: .5em; background: linear-gradient(90deg, var(--vang-sang), transparent); }
.hero .dan { color: rgba(253, 246, 232, .84); font-size: 1.12em; line-height: 1.55; max-width: 34rem; margin: 0; }
.tin-day { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 0; margin-top: 24px; padding-top: 18px; border-top: 1px solid rgba(220, 187, 99, .26); }
.tin-day .tin { display: flex; align-items: center; gap: 10px; padding: 0 18px; font-size: .9em; color: rgba(253, 246, 232, .92); border-left: 1px solid rgba(220, 187, 99, .26); }
.tin-day .tin:first-child { border-left: 0; padding-left: 0; }
.tin-day .tin .bt { width: 20px; height: 20px; color: var(--vang-sang); }
.hero .phieu { margin: 0; box-shadow: 0 34px 68px -26px rgba(0, 0, 0, .6), 0 4px 14px rgba(0, 0, 0, .22); border-color: rgba(220, 187, 99, .3); }

/* Tiêu đề phiếu nổi bật: con dấu kim nhỏ */
.tieu-phieu { display: flex; align-items: center; gap: 10px; margin: 0 0 4px; }
.tieu-phieu .dau-kim { width: 30px; height: 30px; border-radius: 8px; flex: none; background: linear-gradient(135deg, var(--do), var(--vang)); box-shadow: 0 3px 8px -3px rgba(120, 20, 26, .5); position: relative; }
.tieu-phieu .dau-kim::after { content: ''; position: absolute; inset: 7px; border: 1.5px solid rgba(255, 253, 248, .9); border-radius: 3px; }
.tieu-phieu h2 { margin: 0; }
.phi-dong { margin-top: 12px; padding-top: 12px; border-top: 1px dashed var(--vien); font-size: .9em; color: var(--muc-nhat); }

/* Tờ phiếu: bề mặt chính cho mọi biểu mẫu; nét vàng kim mảnh trên nóc */
.phieu { background: var(--giay); border: 1px solid var(--vien); border-radius: 14px; box-shadow: var(--bong); padding: 26px 22px 22px; margin: 20px 0; position: relative; overflow: hidden; }
.phieu::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--do) 0%, var(--vang-net) 60%, transparent 100%); }
.phieu > h2:first-child, .phieu > h3:first-child, .phan > h2:first-child, .phan > h3:first-child { margin-top: 0; }
.phieu .so-phieu { position: absolute; top: 18px; right: 18px; font-size: .78em; color: var(--muc-nhat); }
.phan { background: var(--giay); border: 1px solid var(--vien); border-radius: 14px; padding: 18px 20px; margin: 16px 0; }

/* Dòng điền: nhãn nhỏ phía trên, ô nhập như dòng chấm trên giấy */
.truong { margin: 0 0 18px; }
.truong > label, .truong > .nhan { display: block; font-size: .875em; color: var(--muc-nhat); margin-bottom: 2px; }
.truong .goi-y { font-size: .82em; color: var(--muc-nhat); margin-top: 4px; }
input[type="text"], input[type="tel"], input[type="email"], input[type="number"], input[type="search"], select, textarea {
  width: 100%; font: inherit; font-size: 1.05em; color: var(--muc); background: transparent;
  border: 0; border-bottom: 1.5px dotted var(--ke); border-radius: 0; padding: 8px 2px 6px; min-height: 44px;
}
select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--muc-nhat) 50%), linear-gradient(135deg, var(--muc-nhat) 50%, transparent 50%); background-position: calc(100% - 14px) 52%, calc(100% - 9px) 52%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 26px; }
select option { color: #1d2532; background: #fff; }
input, select, textarea { transition: border-color .15s ease, box-shadow .15s ease; }
input:focus, select:focus, textarea:focus { outline: none; border-bottom: 2px solid var(--do); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }
textarea {
  min-height: 9.6em; line-height: 1.6em; resize: vertical; padding: 0 2px; border-bottom: 0;
  background-image: repeating-linear-gradient(to bottom, transparent 0, transparent calc(1.6em - 1px), var(--vien) calc(1.6em - 1px), var(--vien) 1.6em);
  background-attachment: local;
}
textarea:focus { border-bottom: 0; box-shadow: 0 2px 0 var(--do); }
.dem-ky-tu { font-size: .8em; color: var(--muc-nhat); text-align: right; }
.ma-otp { letter-spacing: .4em; font-size: 1.4em !important; font-variant-numeric: tabular-nums; max-width: 12rem; }
.loi-dong { color: var(--do); font-size: .85em; margin-top: 4px; }
.loi-dong:not([hidden]) { display: block; }
.truong.sai input { border-bottom: 2px solid var(--do); }
.lua-chon.sai { outline: 1.5px solid var(--do); outline-offset: 2px; border-radius: 6px; }
.goi-y-sua { font-size: .85em; margin-top: 4px; }
.goi-y-sua[hidden], .loi-dong[hidden] { display: none; }
.nut-chu { background: none; border: 0; padding: 4px 2px; min-height: 36px; color: var(--do); font: inherit; font-size: .9em; text-decoration: underline; cursor: pointer; }
.nut-chu:disabled { color: var(--muc-nhat); text-decoration: none; cursor: default; }
.hang-chu-nho { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 6px; }
.o-ma { display: flex; gap: 8px; margin: 14px 0 6px; }
.o-ma-so { width: 100%; max-width: 3rem; min-width: 0; text-align: center; font-size: 1.5em; font-variant-numeric: tabular-nums; padding: 6px 0; min-height: 52px; border: 1.5px solid var(--ke); border-radius: 8px; background: var(--giay); }
.o-ma-so:focus { border: 2px solid var(--do); }
.o-ma.sai .o-ma-so { border-color: var(--do); }
.o-ma.lac { animation: lac .35s ease; }
@keyframes lac { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .o-ma.lac { animation: none; } }
.the-vai { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 8px 0 14px; }
.the-vai a, .the-vai button { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-align: left; padding: 12px 14px; border: 1.5px solid var(--vien); border-radius: 12px; background: var(--giay); color: var(--muc); font: inherit; cursor: pointer; text-decoration: none; min-height: 64px; }
.the-vai [aria-pressed="true"] { border-color: var(--do); background: var(--do-nen); }
.the-vai .bt { width: 22px; height: 22px; color: var(--do); }
.the-vai small { color: var(--muc-nhat); font-size: .8em; }

.lua-chon { display: flex; align-items: flex-start; gap: 10px; padding: 8px 0; min-height: 44px; cursor: pointer; }
.lua-chon input { width: 20px; height: 20px; margin: 3px 0 0; flex: none; accent-color: var(--do); }
.nhom-chon { display: flex; flex-wrap: wrap; gap: 6px 8px; }
.nhom-chon .lua-chon { border: 1px solid var(--vien); border-radius: 8px; padding: 6px 10px; min-height: 40px; align-items: center; transition: border-color .15s ease, background .15s ease; }
.nhom-chon .lua-chon:has(input:checked) { border-color: var(--do); background: var(--do-nen); }
.nhom-chon .lua-chon input { margin: 0; width: 18px; height: 18px; }
.goi { display: block; border: 1px solid var(--vien); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
.goi:hover { border-color: var(--ke); }
.goi:has(input:checked) { border-color: var(--do); background: var(--do-nen); box-shadow: inset 0 0 0 1px var(--do); }
.goi .dong-goi { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.goi .ten-goi { font-weight: 600; }
.goi .phi { font-family: var(--chu-van-ban); font-weight: 650; color: var(--do); }

/* Nút: nút chính nền đỏ thẫm có ánh nhẹ và viền kim mảnh, nổi khi rê và lún khi bấm */
button { font: inherit; }
.nut, .nut-chinh, .nut-phu, .nut-chu, .nut-xoa {
  font: inherit; font-weight: 600; letter-spacing: .01em; min-height: 48px; padding: 11px 22px; border-radius: 9px; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; line-height: 1.2;
  transition: transform .16s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, background .2s ease, border-color .2s ease, color .2s ease;
}
.nut-chinh { background: var(--do-nut); color: #fff; border: 0; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 3px 10px -3px rgba(120, 20, 26, .5); }
.nut-chinh:hover { background: var(--do-nut-dam); color: #fff; transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 10px 22px -6px rgba(120, 20, 26, .5); }
.nut-chinh:active { transform: translateY(0); box-shadow: 0 1px 4px -1px rgba(120, 20, 26, .5); }
.nut-phu { background: var(--giay); color: var(--do); border: 1px solid var(--do); }
.nut-phu:hover { background: var(--do-nen); transform: translateY(-1px); }
.nut-phu:active { transform: translateY(0); }
.nut-chu { background: transparent; color: var(--do); border: 0; padding-left: 4px; padding-right: 4px; min-height: 44px; white-space: nowrap; }
.nut-chu:hover { color: var(--do-dam); }
.nut-xoa { background: transparent; color: var(--muc-nhat); border: 1.5px solid var(--vien); }
.nut-xoa:hover { color: var(--do); border-color: var(--do); background: var(--do-nen); }
.nut-chinh[disabled], .nut-phu[disabled], .nut-xoa[disabled] { opacity: .5; cursor: not-allowed; transform: none; box-shadow: none; }
.hang-nut { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: 10px; }
.hang-nut.ca-dong > * { flex: 1 1 auto; }

/* Thông báo: tin thường nhấn vàng, lỗi nhấn đỏ, cảnh báo nền vàng đậm */
.thong-bao { border-left: 4px solid var(--vang); background: var(--vang-nen); color: var(--vang-chu); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 12px 0; }
.thong-bao.loi { border-color: var(--do); background: var(--do-nen); color: var(--muc); }
.thong-bao.canh-bao { border-color: var(--vang-dam); background: var(--vang-nen); color: var(--vang-chu); }
.thong-bao a { color: inherit; }
.thong-bao p:last-child { margin-bottom: 0; }
.ma-thu { font-variant-numeric: tabular-nums; font-weight: 600; letter-spacing: .12em; }
.ma-qr { display: block; width: 200px; height: 200px; margin-top: 12px; border: 1px solid var(--ke); border-radius: 6px; background: #fff; }

/* Con dấu: chỉ cho trạng thái đã ký, đã duyệt */
.dau-moc {
  display: inline-block; color: var(--dau); border: 2px solid var(--dau); outline: 1px solid var(--dau); outline-offset: 2px;
  border-radius: 4px; padding: 3px 10px 2px; font-weight: 600; font-size: .82em; letter-spacing: .06em; text-transform: uppercase;
  transform: rotate(-4deg); line-height: 1.35; text-align: center; background: transparent; white-space: nowrap;
  font-family: var(--chu-giao-dien); font-style: normal;
}
.dau-moc small { display: block; font-size: .78em; letter-spacing: .02em; text-transform: none; font-weight: 400; }
.dau-moc.vua-dong { animation: dong-dau .32s cubic-bezier(.2, .9, .3, 1.2) both; }
@keyframes dong-dau { from { transform: rotate(-12deg) scale(1.6); opacity: 0; } to { transform: rotate(-4deg) scale(1); opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .dau-moc.vua-dong { animation: none; } }

/* Trạng thái dạng chữ: đang xử lý = vàng (chờ), dừng/huỷ = đỏ */
.trang-thai { display: inline-block; font-size: .8em; padding: 2px 8px; border-radius: 999px; border: 1px solid var(--vien); color: var(--muc-nhat); white-space: nowrap; }
.trang-thai.dang { border-color: var(--vang-dam); color: var(--vang-chu); background: var(--vang-nen); }
.trang-thai.dung { border-color: var(--do); color: var(--do); background: var(--do-nen); }

/* Các bước của quy trình (là chuỗi thật nên đánh số); bước xong tô đỏ–vàng */
.cac-buoc { list-style: none; counter-reset: buoc; padding: 0; margin: 8px 0 0; }
.cac-buoc li { counter-increment: buoc; position: relative; padding: 0 0 18px 48px; }
.cac-buoc li::before { content: counter(buoc); position: absolute; left: 0; top: -2px; width: 32px; height: 32px; border: 1.5px solid var(--ke); color: var(--muc-nhat); border-radius: 50%; display: grid; place-items: center; font-family: var(--chu-van-ban); font-weight: 650; }
.cac-buoc li:not(:last-child)::after { content: ''; position: absolute; left: 16px; top: 34px; bottom: 2px; border-left: 1.5px dotted var(--ke); }
.cac-buoc .tieu-de-buoc { font-weight: 600; display: block; }
.cac-buoc li.xong::before { border: 0; background: linear-gradient(135deg, var(--do), var(--vang-net)); color: #fff; content: '✓'; box-shadow: 0 2px 7px -3px rgba(120, 20, 26, .5); }
.cac-buoc li.hien-tai::before { border-color: var(--do); color: var(--do); background: var(--do-nen); }

/* Hai hợp đồng */
.hai-hop-dong { display: grid; gap: 12px; margin: 10px 0; }
@media (min-width: 640px) { .hai-hop-dong { grid-template-columns: 1fr 1fr; } }
.hai-hop-dong > div { border-top: 2px solid var(--do); padding-top: 12px; }
.hai-hop-dong > div:nth-child(2) { border-top-color: var(--vang-net); }
.hai-hop-dong h3 { margin-top: 0; }
.hai-hop-dong ul { margin: 0; padding-left: 1.1em; }

/* Danh bạ luật sư: danh sách có đường kẻ, không thẻ */
.danh-ba { list-style: none; padding: 0; margin: 0; border-top: 1px solid var(--vien); }
.danh-ba li { border-bottom: 1px solid var(--vien); }
.danh-ba a { display: block; padding: 14px 10px; margin: 0 -10px; color: var(--muc); text-decoration: none; border-radius: 10px; transition: background .15s ease; }
.danh-ba a:hover { background: var(--do-nen); }
.danh-ba a:hover .ten-ls { color: var(--do); }
.ten-ls { font-family: var(--chu-van-ban); font-weight: 650; font-size: 1.12em; transition: color .15s ease; }
.dong-ls { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; }
.diem { font-size: .78em; border: 1px solid var(--vang-dam); color: var(--vang-chu); background: var(--vang-nen); padding: 1px 8px; border-radius: 999px; white-space: nowrap; }
.loc { display: grid; grid-template-columns: 1fr 1fr; gap: 0 14px; }

/* Văn bản hợp đồng hiển thị như tờ giấy */
.van-ban { background: var(--giay); color: var(--muc); border: 1px solid var(--vien); box-shadow: var(--bong); padding: 28px 20px; margin: 16px 0; font-family: var(--chu-van-ban); font-size: 1.03em; line-height: 1.55; }
@media (min-width: 640px) { .van-ban { padding: 40px 44px 40px 56px; } }
.van-ban .quoc-hieu { text-align: center; font-weight: 700; margin: 0; font-size: clamp(.8em, 3.9vw, 1em); }
.van-ban .tieu-ngu { text-align: center; font-weight: 700; margin: 0 0 1.2em; }
.van-ban .tieu-ngu span { border-bottom: 1px solid currentColor; padding-bottom: 1px; }
.van-ban .ten-van-ban { text-align: center; font-weight: 700; font-size: 1.2em; margin: .2em 0 .1em; font-family: var(--chu-van-ban); }
.van-ban .so, .van-ban .ngay { text-align: center; margin: 0; }
.van-ban .ngay { font-style: italic; margin-bottom: 1em; }
.van-ban .doan { text-align: justify; text-indent: 1cm; margin: 0 0 .35em; hyphens: manual; }
.van-ban .dieu { font-weight: 700; margin: .9em 0 .2em; break-after: avoid; }
.van-ban .ben { display: grid; grid-template-columns: minmax(7.5rem, 9.5rem) 1fr; margin: .3em 0 .8em; }
.van-ban .ben div { padding: 1px 0; }
.van-ban .ben .gia-tri::before { content: ': '; }
.van-ban .ben .dam { font-weight: 700; }
.van-ban .khoi-ky { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 1.6em; text-align: center; break-inside: avoid; }
.van-ban .khoi-ky .ky-dam { font-weight: 700; }
.van-ban .khoi-ky .cho-ky { min-height: 4.5em; display: grid; place-items: center; font-style: italic; color: var(--muc-nhat); font-size: .88em; padding: 6px 0; }
.van-ban .xac-minh { margin-top: 1.4em; padding-top: .8em; border-top: 1px solid var(--vien); font-family: var(--chu-giao-dien); font-size: .78em; color: var(--muc-nhat); overflow-wrap: anywhere; }

/* Bảng dữ liệu (quản trị) */
.cuon-ngang { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.bang { width: 100%; border-collapse: collapse; font-size: .92em; }
.bang th, .bang td { border-bottom: 1px solid var(--vien); padding: 10px 8px; text-align: left; vertical-align: top; }
.bang th { font-weight: 600; color: var(--muc-nhat); font-size: .85em; border-bottom: 2px solid var(--vang); }
.bang tbody tr { transition: background .12s ease; }
.bang tbody tr:hover { background: var(--do-nen); }
.the-so { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 10px; margin: 12px 0; }
.the-so a, .the-so div { display: block; background: var(--giay); border: 1px solid var(--vien); border-radius: 10px; padding: 14px; color: var(--muc); text-decoration: none; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; }
.the-so a:hover { transform: translateY(-2px); box-shadow: var(--bong-nang); border-color: var(--do); }
.the-so .so { font-family: var(--chu-van-ban); font-size: 1.7em; font-weight: 650; line-height: 1.1; display: block; color: var(--do); }
.the-so .nhan-so { font-size: .85em; color: var(--muc-nhat); }
.tab-loc { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; margin: 8px 0 12px; }
.tab-loc a { white-space: nowrap; padding: 6px 14px; border: 1px solid var(--vien); border-radius: 999px; text-decoration: none; color: var(--muc); font-size: .9em; transition: background .15s ease, color .15s ease, border-color .15s ease; }
.tab-loc a:hover { border-color: var(--do); color: var(--do); }
.tab-loc a[aria-current="true"] { border-color: var(--do); color: #fff; background: var(--do-nut); }
dl.thong-tin { display: grid; grid-template-columns: minmax(8rem, 12rem) 1fr; gap: 6px 12px; margin: 8px 0; }
dl.thong-tin dt { color: var(--muc-nhat); font-size: .9em; }
dl.thong-tin dd { margin: 0; overflow-wrap: anywhere; }
@media (max-width: 480px) { dl.thong-tin { grid-template-columns: 1fr; gap: 0; } dl.thong-tin dd { margin-bottom: 8px; } }
.anh-giay-to { max-width: 100%; border: 1px solid var(--vien); border-radius: 6px; margin: 8px 0; }

/* Nội dung văn bản dài (chính sách, quy chế) */
.bai { font-size: 1.02em; }
.bai h2 { font-size: 1.2em; }
.bai ul { padding-left: 1.2em; }
.bai li { margin-bottom: .35em; }

/* Chân trang: nhiều cột */
.chan-trang { border-top: 1px solid var(--vien); background: var(--giay); }
.chan-trang::before { content: ''; display: block; height: 1px; background: linear-gradient(90deg, var(--vang-net), rgba(198, 162, 74, .2), transparent 80%); }
.chan-trang .trong-chan { max-width: 60rem; margin: 0 auto; padding: 24px 16px 28px; font-size: .88em; color: var(--muc-nhat); }
.chan-luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; margin-bottom: 16px; }
.chan-gioi-thieu { grid-column: 1 / -1; }
.chan-gioi-thieu p { margin: 0; max-width: 30rem; }
@media (min-width: 640px) { .chan-luoi { grid-template-columns: 1.5fr 1fr 1fr; } .chan-gioi-thieu { grid-column: auto; } }
.chan-cot h2 { font-family: var(--chu-giao-dien); font-weight: 600; font-size: .74em; text-transform: uppercase; letter-spacing: .12em; color: var(--vang-dam); margin: 0 0 8px; }
.chan-cot ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.chan-cot a { color: var(--muc); text-decoration: none; }
.chan-cot a:hover, .chan-phap-ly a:hover { color: var(--do); text-decoration: underline; text-underline-offset: 3px; }
.chan-nhan { display: inline-flex; align-items: center; gap: 8px; font-family: var(--chu-van-ban); font-weight: 650; font-size: 1.1em; color: var(--muc); margin-bottom: 6px; }
.chan-nhan svg { width: 26px; height: 26px; }
.chan-phap-ly { display: flex; flex-wrap: wrap; gap: 4px 16px; padding: 12px 0; border-top: 1px solid var(--vien); }
.chan-phap-ly a { color: var(--muc-nhat); text-decoration: none; }
.chan-trang .tuyen-bo { max-width: 46rem; margin: 0; font-size: .86em; line-height: 1.5; }

.dang-tai { padding: 40px 0; color: var(--muc-nhat); }
.trong-rong { color: var(--muc-nhat); padding: 18px 0; }
/* Bộ phận thống kê dùng chung: truyền bề mặt ấm và màu nhấn đỏ của app (không sửa gói) */
.khoi-chip, #chip-cai-dat, #chip-nhan {
  margin: 14px 0;
  --chip-nen: var(--giay); --chip-nen-phu: var(--nen); --chip-vien: var(--vien);
  --chip-chu: var(--muc); --chip-chu-phu: var(--muc-nhat);
}
#chip-nhan { margin-top: 10px; }
.cap-nhat { position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 20; background: var(--giay); border: 1px solid var(--vien); border-radius: 8px; box-shadow: var(--bong); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Câu dẫn lớn dưới tiêu đề trang con */
.dan-lon { font-size: 1.14em; line-height: 1.55; color: var(--muc-nhat); max-width: 42rem; margin: 0 0 1.2em; }
.muc { margin: 40px 0; }
.muc > .mao { margin-bottom: 8px; }
.muc > h2 { position: relative; padding-top: 14px; margin-top: 0; }
.muc > h2::before { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 2px; background: linear-gradient(90deg, var(--do), var(--vang-net)); }
.muc > .mao + h2 { padding-top: 0; }
.muc > .mao + h2::before { display: none; }
.muc > h2 + .nhat, .muc > h2 + .dan-lon { margin-top: .2em; }

/* Dải số nổi bật dưới hero */
.dai-so { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.dai-so .o-so { padding: 4px 16px; border-left: 1px solid var(--vien); }
.dai-so .o-so:first-child { border-left: 0; }
.dai-so .con-so { font-family: var(--chu-van-ban); font-weight: 640; font-size: clamp(1.95em, 5.5vw, 2.7em); color: var(--do); line-height: 1; letter-spacing: -.01em; }
.dai-so .nhan-so { margin-top: 8px; color: var(--muc-nhat); font-size: .92em; }
@media (max-width: 560px) { .dai-so { grid-template-columns: 1fr; gap: 18px; } .dai-so .o-so { border-left: 0; border-top: 1px solid var(--vien); padding: 16px 16px 0; } .dai-so .o-so:first-child { border-top: 0; padding-top: 0; } }

/* Bốn bước kiểu thẻ, số lớn viền kim ở góc */
.cac-buoc-the { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 18px 0 0; counter-reset: bthe; }
@media (min-width: 720px) { .cac-buoc-the { grid-template-columns: 1fr 1fr; } }
.buoc-the { position: relative; overflow: hidden; background: var(--giay); border: 1px solid var(--vien); border-radius: 14px; padding: 22px 22px 20px; box-shadow: var(--bong); counter-increment: bthe; transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease; }
.buoc-the:hover { transform: translateY(-3px); box-shadow: var(--bong-nang); }
.buoc-the::before { content: '0' counter(bthe); position: absolute; top: 10px; right: 16px; font-family: var(--chu-van-ban); font-weight: 650; font-size: 2.7em; line-height: 1; color: transparent; -webkit-text-stroke: 1px var(--vang-net); opacity: .55; }
.buoc-the h3 { margin: 0 0 .3em; font-size: 1.08em; padding-right: 46px; }
.buoc-the p { margin: 0; color: var(--muc-nhat); font-size: .95em; line-height: 1.55; }

/* Biểu tượng nét mảnh và huy hiệu bọc icon */
.bt { width: 24px; height: 24px; flex: none; display: block; }
.huy-hieu { width: 48px; height: 48px; border-radius: 13px; flex: none; display: grid; place-items: center; color: var(--do); background: linear-gradient(145deg, var(--vang-nen), var(--giay)); border: 1px solid var(--vang-net); box-shadow: 0 5px 14px -8px rgba(158, 15, 22, .35); }
.huy-hieu.nho { width: 42px; height: 42px; border-radius: 12px; }
.huy-hieu .bt { width: 25px; height: 25px; }
.huy-hieu.nho .bt { width: 22px; height: 22px; }
.the-noi:hover .huy-hieu, .the-linh-vuc:hover .huy-hieu { border-color: var(--do); box-shadow: 0 7px 16px -8px rgba(158, 15, 22, .45); }
.huy-hieu { transition: border-color .2s ease, box-shadow .2s ease; }

/* Lưới thẻ nổi (vì sao chọn, an toàn) — có huy hiệu icon */
.luoi-the { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin: 18px 0; }
.the-noi { position: relative; overflow: hidden; background: var(--giay); border: 1px solid var(--vien); border-radius: 16px; padding: 24px 22px 20px; box-shadow: var(--bong); transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease; }
.the-noi::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--do), var(--vang-net)); }
.the-noi:hover { transform: translateY(-3px); box-shadow: var(--bong-nang); }
.the-noi .huy-hieu { margin-bottom: 16px; }
.the-noi h3 { margin: 0 0 .35em; font-size: 1.12em; }
.the-noi p { margin: 0; color: var(--muc-nhat); font-size: .95em; line-height: 1.55; }

/* Lưới lĩnh vực — mỗi thẻ có huy hiệu icon */
.luoi-linh-vuc { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 12px; margin: 18px 0; }
.the-linh-vuc { display: flex; gap: 14px; align-items: flex-start; background: var(--giay); border: 1px solid var(--vien); border-radius: 13px; padding: 15px 16px; color: var(--muc); text-decoration: none; transition: transform .2s cubic-bezier(.2, .8, .3, 1), box-shadow .2s ease, border-color .2s ease; }
.the-linh-vuc:hover { transform: translateY(-3px); box-shadow: var(--bong-nang); border-color: var(--vang-net); color: var(--muc); }
.the-linh-vuc .noi { min-width: 0; }
.the-linh-vuc .ten-lv { font-family: var(--chu-van-ban); font-weight: 640; font-size: 1.06em; display: block; margin-bottom: 3px; }
.the-linh-vuc .mo-ta-lv { font-size: .88em; color: var(--muc-nhat); line-height: 1.5; }

/* Danh sách có dấu tích vàng kim */
.ds-dau { list-style: none; padding: 0; margin: 12px 0; }
.ds-dau li { position: relative; padding: 5px 0 5px 32px; }
.ds-dau li::before { content: '✓'; position: absolute; left: 0; top: 4px; width: 21px; height: 21px; border-radius: 50%; border: 1px solid var(--vang-net); background: var(--vang-nen); color: var(--vang-chu); font-size: .78em; font-weight: 700; display: grid; place-items: center; }

/* Câu hỏi thường gặp: đóng mở */
.nhom-hoi { margin: 10px 0 6px; border-top: 1px solid var(--vien); }
details.hoi { border-bottom: 1px solid var(--vien); }
details.hoi > summary { list-style: none; cursor: pointer; padding: 14px 40px 14px 2px; font-weight: 600; position: relative; display: block; }
details.hoi > summary::-webkit-details-marker { display: none; }
details.hoi > summary { font-family: var(--chu-van-ban); font-weight: 600; font-size: 1.04em; }
details.hoi > summary::after { content: '+'; position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 25px; height: 25px; border-radius: 50%; border: 1px solid var(--vang-net); color: var(--do); display: grid; place-items: center; font-weight: 600; font-size: 1.1em; line-height: 1; transition: transform .2s ease, background .2s ease, color .2s ease, border-color .2s ease; }
details.hoi[open] > summary::after { content: '−'; background: var(--do); border-color: var(--do); color: #fff; }
details.hoi > summary:hover::after { background: var(--do-nen); border-color: var(--do); }
details.hoi[open] > summary:hover::after { background: var(--do); }
details.hoi .tra-loi { padding: 0 2px 16px; color: var(--muc-nhat); line-height: 1.6; }
details.hoi .tra-loi p { margin: 0 0 .5em; }
details.hoi .tra-loi p:last-child { margin-bottom: 0; }

/* Dải kêu gọi hành động: đỏ thẫm, viền kim mảnh, ánh vàng góc */
.dai-goi { background: var(--do-nut); color: #fff; border: 1px solid rgba(198, 162, 74, .35); border-radius: 16px; padding: 32px 26px; margin: 34px 0; text-align: center; box-shadow: var(--bong-nang); position: relative; overflow: hidden; }
.dai-goi::before { content: ''; position: absolute; inset: 0; background: radial-gradient(260px 180px at 90% 6%, rgba(220, 187, 99, .32), transparent 68%); pointer-events: none; }
.dai-goi h2 { color: #fff; margin: 0 0 .35em; }
.dai-goi h2::before { display: none; }
.dai-goi p { color: rgba(255, 250, 242, .9); max-width: 40rem; margin: 0 auto 1.1em; position: relative; }
.dai-goi .nut, .dai-goi .nut-chinh { background: #fffdf8; color: var(--do-dam); border: 0; position: relative; box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .5); }
.dai-goi .nut:hover, .dai-goi .nut-chinh:hover { background: var(--vang-nen); color: var(--do-dam); transform: translateY(-1px); }

@media print {
  .dau-trang, .chan-trang, .thanh-thu, .hang-nut, .khong-in { display: none !important; }
  body { background: #fff; }
  .van-ban { border: 0; box-shadow: none; padding: 0; }
}

/* Điện thoại: dồn các khu của trang chủ cho gọn */
@media (max-width: 560px) {
  .bang { padding: 30px 0; }
  .bang > .trong { padding: 0 16px; }
  .dai-so { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .dai-so .o-so { border-top: 0; border-left: 1px solid var(--vien); padding: 2px 6px; }
  .dai-so .o-so:first-child { border-left: 0; padding-top: 2px; }
  .dai-so .con-so { font-size: 1.7em; }
  .dai-so .nhan-so { font-size: .8em; margin-top: 6px; line-height: 1.3; }
  .bang .luoi-linh-vuc { grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
  .bang .the-linh-vuc { flex-direction: row; align-items: center; gap: 10px; padding: 9px 10px; }
  .bang .the-linh-vuc .huy-hieu { width: 36px; height: 36px; border-radius: 10px; }
  .bang .the-linh-vuc .huy-hieu .bt { width: 20px; height: 20px; }
  .bang .the-linh-vuc .mo-ta-lv { display: none; }
  .bang .the-linh-vuc .ten-lv { font-size: .92em; margin: 0; line-height: 1.3; }
  .cac-buoc-the { gap: 10px; margin-top: 14px; }
  .buoc-the { padding: 14px 16px 13px; }
  .buoc-the::before { font-size: 2em; top: 8px; right: 12px; }
  .buoc-the h3 { font-size: 1em; }
  .buoc-the p { font-size: .9em; line-height: 1.45; }
  .luoi-the { gap: 10px; margin: 14px 0; }
  .the-noi { display: grid; grid-template-columns: auto 1fr; column-gap: 14px; padding: 14px 16px; }
  .the-noi .huy-hieu { grid-row: 1 / span 2; margin: 0; }
  .the-noi h3 { font-size: 1.02em; margin: 0 0 .15em; align-self: end; }
  .the-noi p { font-size: .9em; line-height: 1.45; }
  .dai-goi { padding: 20px 18px; margin: 0; }
  .dai-goi h2 { font-size: 1.3em; }
  .dai-goi p { font-size: .94em; margin-bottom: .9em; }
  .khung.man-rong { padding-bottom: 28px; }
}

/* Nút trong dải kêu gọi luôn chữ đỏ thẫm cố định (nền nút trắng ở cả chế độ tối) */
.dai-goi .nut, .dai-goi .nut-chinh, .dai-goi .nut:hover, .dai-goi .nut-chinh:hover { color: #7c141a; }

/* Điện thoại: đồng đều cỡ chữ và khoảng cách ở mọi trang */
@media (max-width: 560px) {
  .khung { padding: 18px 16px 44px; }
  h1 { font-size: 1.62em; margin: .25em 0 .35em; }
  h2 { font-size: 1.22em; margin: 1.4em 0 .45em; }
  h3 { font-size: 1.05em; margin: 1em 0 .3em; }
  .dan-lon { font-size: 1.02em; line-height: 1.5; margin-bottom: .9em; }
  .muc { margin: 26px 0; }
  .muc > h2 { padding-top: 12px; }
  .bang th, .bang td { padding: 8px 6px; }
  table.bang { font-size: .86em; }
  .the-noi .huy-hieu { width: 40px; height: 40px; }
  .the-noi .huy-hieu .bt { width: 21px; height: 21px; }
  details.hoi > summary { padding: 11px 40px 11px 2px; }
}

/* Máy tính: bốn thẻ giá trị đủ một hàng, bớt khoảng trống giữa các dải */
@media (min-width: 900px) {
  .luoi-the { grid-template-columns: repeat(4, 1fr); }
  .bang { padding: 44px 0; }
  .dai-goi { margin: 8px 0; }
}

/* Thanh liên hệ nhanh cuối màn hình điện thoại: Gọi, Email, Gửi yêu cầu */
.thanh-lien-he { display: none; }
@media (max-width: 760px) {
  .thanh-lien-he:not([hidden]) {
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; display: grid; grid-template-columns: auto auto 1fr; gap: 8px;
    padding: 10px 12px calc(10px + env(safe-area-inset-bottom)); background: var(--giay); border-top: 1px solid var(--vien);
    box-shadow: 0 -10px 24px -16px rgba(60, 40, 18, .35);
  }
  body.co-thanh-lien-he { padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
  .lh-nut {
    display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 48px; padding: 0 14px; border-radius: 14px;
    border: 1px solid var(--ke); background: var(--nen); color: var(--muc); font-weight: 600; font-size: .95em; text-decoration: none; white-space: nowrap;
  }
  .lh-nut .bt { width: 20px; height: 20px; flex: none; }
  .lh-nut:active { transform: translateY(1px); }
  .lh-chinh { background: var(--do-nut); color: #fff; border-color: transparent; box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset, 0 4px 12px -4px rgba(120, 20, 26, .55); }
  .lh-chinh:hover { color: #fff; }
  .lh-nut:focus-visible { outline: 2px solid var(--do); outline-offset: 2px; }
}
@media (max-width: 360px) { .lh-nut { padding: 0 10px; } .lh-nut span { font-size: .9em; } }