/* Tính Đền Bù: mặt giấy, mực xanh, số tiền đóng dấu son. Một điểm nhấn duy nhất là Tờ kê. */
:root {
  --giay: #F4F7F2; --to: #FFFFFF; --muc: #17302B; --muc2: #4A5F59; --ke: #D5DED8; --ke2: #E8EDE9;
  --lua: #0E6B52; --lua2: #0A5540; --lua-nhat: #E2F0EA; --son: #B4281E; --son-nhat: #FBECEA; --nghe: #F2C14E; --nghe-nhat: #FDF5DD;
  --than: 'Lexend', system-ui, 'Segoe UI', Arial, sans-serif; --so: 'Bitter', 'Times New Roman', serif;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 16px; }
body { margin: 0; background: var(--giay); color: var(--muc); font: 400 18px/1.55 var(--than); }
@media (min-width: 720px) { body { font-size: 19px; } }
h1, h2, h3 { font-family: var(--so); line-height: 1.2; margin: 0; font-weight: 700; }
p { margin: 0 0 .7em; max-width: 62ch; }
a { color: var(--lua2); text-underline-offset: 3px; }
button, input, select, textarea { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--lua); outline-offset: 2px; border-radius: 4px; }
.an { display: none !important; }
.vitinh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }

/* Khung trang */
.dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; max-width: 1180px; margin: 0 auto; padding: 14px 18px; }
.ten-web { font: 700 1.25rem/1 var(--so); color: var(--muc); text-decoration: none; display: inline-flex; align-items: center; gap: 9px; }
.ten-web i { width: 22px; height: 22px; border: 3px solid var(--son); border-radius: 50%; display: inline-block; transform: rotate(-12deg); position: relative; }
.ten-web i::after { content: ''; position: absolute; inset: 4px; background: var(--son); border-radius: 50%; }
.dau-phai { display: flex; align-items: center; gap: 8px; font-size: .92rem; }
.nut-mong { background: none; border: 0; padding: 10px 8px; cursor: pointer; color: var(--lua2); text-decoration: underline; text-underline-offset: 3px; min-height: 44px; }
.khung { max-width: 1180px; margin: 0 auto; padding: 0 18px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 28px; }
@media (min-width: 960px) { .khung { grid-template-columns: minmax(0, 1fr) 410px; gap: 44px; align-items: start; } }
.tieu-de { font-size: clamp(1.75rem, 5.4vw, 2.9rem); letter-spacing: -.01em; margin: 10px 0 12px; max-width: 18em; }
.khau-hieu { font: 600 1.12em var(--so, inherit); color: var(--xanh, #17302B); margin: 0 0 10px; max-width: 34em; }
.mo-dau { font-size: 1.04em; color: var(--muc2); margin-bottom: 26px; }

/* Bước câu hỏi */
.buoc { padding-bottom: 28px; }
.tien-trinh { font-size: .92rem; color: var(--muc2); margin-bottom: 6px; display: flex; gap: 12px; align-items: center; }
.tien-trinh b { font-weight: 500; white-space: nowrap; }
.vach { flex: 1; height: 7px; background: var(--ke2); border-radius: 4px; overflow: hidden; }
.vach i { display: block; height: 100%; background: var(--lua); transition: width .25s; }
.cau { font: 700 clamp(1.35rem, 3.6vw, 1.7rem)/1.25 var(--so); margin: 6px 0 6px; }
.goi-y { color: var(--muc2); font-size: .94em; margin: 0 0 14px; }
.nhom-hoi { margin: 22px 0 0; border: 0; padding: 0; min-width: 0; }
.nhom-hoi > legend, .nhan { display: block; font-weight: 500; margin: 0 0 8px; padding: 0; }
.nhan small, legend small { display: block; font-weight: 400; color: var(--muc2); font-size: .88em; line-height: 1.4; margin-top: 2px; }

.chon { display: grid; gap: 8px; }
.chon.ngang { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.o-chon { position: relative; display: flex; gap: 12px; align-items: flex-start; padding: 13px 14px; min-height: 54px; background: var(--to); border: 2px solid var(--ke); border-radius: 8px; cursor: pointer; line-height: 1.35; }
.o-chon:hover { border-color: var(--lua); }
.o-chon input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.o-chon .dau-chon { flex: none; width: 24px; height: 24px; margin-top: 1px; border: 2px solid var(--muc2); border-radius: 50%; display: grid; place-items: center; background: #fff; }
.o-chon.vuong .dau-chon { border-radius: 5px; }
.o-chon input:checked ~ .dau-chon { background: var(--lua); border-color: var(--lua); }
.o-chon input:checked ~ .dau-chon::after { content: ''; width: 11px; height: 6px; border: solid #fff; border-width: 0 0 3px 3px; transform: rotate(-45deg) translate(1px, -1px); }
.o-chon:has(input:checked) { border-color: var(--lua); background: var(--lua-nhat); }
.o-chon:has(input:focus-visible) { outline: 3px solid var(--lua); outline-offset: 2px; }
.o-chon small { display: block; color: var(--muc2); font-size: .86em; margin-top: 2px; }

.vao, select.vao { width: 100%; min-height: 54px; padding: 11px 13px; background: var(--to); border: 2px solid var(--ke); border-radius: 8px; }
textarea.vao { min-height: 100px; }
.vao:focus { border-color: var(--lua); outline: none; box-shadow: 0 0 0 3px var(--lua-nhat); }
.vao.so { font-family: var(--so); font-variant-numeric: tabular-nums; }
.co-don-vi { display: flex; gap: 8px; }
.co-don-vi .vao:first-child { flex: 1; min-width: 0; }
.co-don-vi select.vao { width: auto; flex: none; }
.hang { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.chu-thich { font-size: .88em; color: var(--muc2); margin: 6px 0 0; }

.manh { background: var(--to); border: 2px solid var(--ke); border-radius: 10px; padding: 16px; margin: 16px 0 0; }
.manh-dau { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.manh-dau h3 { font-size: 1.12em; }
.bo { background: none; border: 0; color: var(--son); text-decoration: underline; text-underline-offset: 3px; padding: 10px 4px; cursor: pointer; font-size: .92em; min-height: 44px; }
.manh .o-chon { background: var(--giay); }
.manh .o-chon:has(input:checked) { background: var(--lua-nhat); }

.ket-tim { position: relative; }
.ds-tim { list-style: none; margin: 4px 0 0; padding: 0; background: var(--to); border: 2px solid var(--lua); border-radius: 8px; max-height: 280px; overflow: auto; }
.ds-tim button { display: block; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--ke2); padding: 11px 13px; cursor: pointer; line-height: 1.35; min-height: 48px; }
.ds-tim button:hover, .ds-tim button:focus { background: var(--lua-nhat); }
.ds-tim small { color: var(--muc2); display: block; font-size: .85em; }
.gia-chon { margin-top: 10px; padding: 10px 13px; background: var(--lua-nhat); border-radius: 8px; font-size: .94em; }

.nut { display: inline-flex; align-items: center; justify-content: center; text-align: center; gap: 8px; min-height: 56px; padding: 12px 22px; border: 2px solid var(--lua); background: var(--lua); color: #fff; font-weight: 500; border-radius: 8px; cursor: pointer; text-decoration: none; line-height: 1.25; }
.nut:hover { background: var(--lua2); border-color: var(--lua2); }
.nut.phu { background: transparent; color: var(--lua2); }
.nut.phu:hover { background: var(--lua-nhat); }
.nut.rong { width: 100%; }
.nut[disabled] { opacity: .6; cursor: default; }
.them { width: 100%; margin-top: 12px; border-style: dashed; }
.dieu-huong { display: flex; gap: 10px; margin-top: 26px; flex-wrap: wrap; }
.dieu-huong .nut:last-child { flex: 1; min-width: 180px; }

/* Tờ kê: điểm nhấn của trang */
.to-ke-cot { position: sticky; top: 14px; }
.to-ke { background: var(--to); border: 2px solid var(--muc); border-radius: 3px; box-shadow: 7px 7px 0 var(--lua-nhat), 7px 7px 0 2px var(--muc); padding: 18px 20px 20px; position: relative; }
.to-ke h2 { font-size: 1.28rem; }
.to-ke .phu-de { font-size: .84rem; color: var(--muc2); margin: 2px 0 12px; }
.dong-ke { display: flex; align-items: baseline; gap: 8px; padding: 8px 0; font-size: .95rem; line-height: 1.3; }
.dong-ke .ten { flex: 0 1 auto; }
.dong-ke .cham { flex: 1; min-width: 14px; border-bottom: 2px dotted var(--ke); transform: translateY(-3px); }
.dong-ke .tien { font: 600 1.02rem var(--so); font-variant-numeric: tabular-nums; white-space: nowrap; }
.dong-ke.am .tien { color: var(--son); }
.dong-ke.moi { animation: muc .7s ease-out; }
@keyframes muc { from { background: var(--nghe-nhat); } to { background: transparent; } }
.dong-trong { color: var(--muc2); font-size: .92rem; padding: 12px 0 2px; }
.tong-ke { border-top: 3px double var(--muc); margin-top: 10px; padding-top: 12px; position: relative; min-height: 96px; }
.tong-ke .nhan-tong { font-size: .9rem; color: var(--muc2); }
.tong-ke .so-tong { font: 800 clamp(1.8rem, 5vw, 2.25rem)/1.1 var(--so); color: var(--son); font-variant-numeric: tabular-nums; letter-spacing: -.01em; display: block; margin: 3px 0; }
.tong-ke .khoang { font-size: .88rem; color: var(--muc2); }
.dau-son { position: absolute; right: 10px; top: 8px; width: 74px; height: 74px; border: 3px solid var(--son); border-radius: 50%; color: var(--son); display: grid; place-items: center; text-align: center; font: 700 .72rem/1.15 var(--so); transform: rotate(-14deg); opacity: .85; background: rgba(255, 255, 255, .55); outline: 1px solid var(--son); outline-offset: -7px; }
.thuoc { margin-top: 12px; display: grid; gap: 8px; font-size: .86rem; }
.thuoc-dong { display: grid; grid-template-columns: 1fr auto; gap: 2px 8px; }
.thuoc-dong b { font: 700 1rem var(--so); }
.thuoc-vach { grid-column: 1 / -1; height: 8px; background: var(--ke2); border-radius: 4px; overflow: hidden; }
.thuoc-vach i { display: block; height: 100%; background: var(--lua); transition: width .3s; }
.thuoc-vach.pt i { background: var(--nghe); }
.dong-tk { display: none; }

/* Thanh dưới màn hình điện thoại */
@media (max-width: 959px) {
  body { padding-bottom: 84px; }
  .to-ke-cot { position: fixed; left: 0; right: 0; bottom: 0; top: auto; z-index: 30; }
  .to-ke-cot .to-ke { display: none; border-width: 2px 0 0; box-shadow: none; max-height: 72vh; overflow: auto; border-radius: 12px 12px 0 0; padding-bottom: 10px; }
  .to-ke-cot.mo .to-ke { display: block; }
  .dong-tk { display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 10px; min-height: 68px; padding: 8px 16px; background: var(--muc); color: #fff; border: 0; cursor: pointer; text-align: left; }
  .dong-tk .nho { display: block; font-size: .8rem; opacity: .85; }
  .dong-tk b { font: 800 1.35rem/1.15 var(--so); font-variant-numeric: tabular-nums; }
  .dong-tk .mo-tk { font-size: .9rem; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }
  .dau-son { width: 66px; height: 66px; font-size: .64rem; right: 8px; top: 6px; }
}

/* Kết quả */
.kq-so { background: var(--to); border: 2px solid var(--muc); border-radius: 3px; padding: 20px; margin: 12px 0 18px; }
.kq-so .lon { font: 800 clamp(2rem, 7vw, 3rem)/1.1 var(--so); color: var(--son); font-variant-numeric: tabular-nums; display: block; }
.hai-so { display: grid; gap: 16px; margin-top: 16px; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.hai-so h3 { font: 500 .96em/1.3 var(--than); }
.hai-so .pt { font: 800 2rem/1.1 var(--so); display: block; margin: 2px 0 4px; }
.hai-so p { font-size: .88em; color: var(--muc2); margin: 6px 0 0; }
.bang-kq { margin-top: 22px; }
.bang-kq h3.nhom-ten { font-size: 1.15em; border-bottom: 2px solid var(--muc); padding: 16px 0 6px; display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.bang-kq h3.nhom-ten span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.khoan { border-bottom: 1px solid var(--ke); padding: 12px 0; }
.khoan-dau { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; }
.khoan-dau .so { font: 600 1.05em var(--so); font-variant-numeric: tabular-nums; white-space: nowrap; }
.khoan-dau .khoa { font-size: .84em; color: var(--muc2); white-space: nowrap; }
.khoan p { font-size: .92em; margin: 5px 0 0; }
.khoan .ct { font-size: .88em; color: var(--muc2); }
.nhan-chac { display: inline-block; font-size: .8em; padding: 1px 8px; border-radius: 12px; background: var(--ke2); margin: 5px 6px 0 0; }
.nhan-chac.cao { background: var(--lua-nhat); color: var(--lua2); }
.nhan-chac.thap { background: var(--son-nhat); color: var(--son); }
.nhan-chac.vua { background: var(--nghe-nhat); }
.nhan-mau { color: var(--lua2); font-size: .82em; font-weight: 500; display: block; margin-bottom: 2px; }
.bao { padding: 13px 15px; border-left: 5px solid var(--nghe); background: var(--nghe-nhat); margin: 10px 0; font-size: .94em; border-radius: 0 6px 6px 0; }
.bao.tot { border-color: var(--lua); background: var(--lua-nhat); }
.bao p:last-child { margin-bottom: 0; }
.ds-giay { list-style: none; padding: 0; margin: 10px 0; }
.ds-giay li { padding: 10px 0; border-bottom: 1px solid var(--ke); font-size: .95em; }
.ds-giay label { display: flex; gap: 12px; cursor: pointer; align-items: flex-start; }
.ds-giay input { width: 24px; height: 24px; flex: none; margin-top: 1px; accent-color: var(--lua); }
.ds-giay small { display: block; color: var(--muc2); margin-top: 2px; font-size: .92em; }

/* Mời mua gói */
.moi-goi { background: var(--muc); color: #F0F5F1; border-radius: 3px; padding: 22px 20px; margin: 24px 0; }
.moi-goi h3 { font-size: 1.4em; color: #fff; margin-bottom: 6px; }
.moi-goi ul { padding-left: 1.1em; margin: 10px 0 16px; }
.moi-goi li { margin: 5px 0; }
.moi-goi .nut { background: var(--nghe); color: var(--muc); border-color: var(--nghe); }
.moi-goi .nut:hover { background: #E6B23A; border-color: #E6B23A; }
.moi-goi small { display: block; margin-top: 10px; opacity: .85; font-size: .85em; }

.dv { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); margin: 12px 0; }
.dv-o { background: var(--to); border: 2px solid var(--ke); padding: 18px; border-radius: 4px; display: flex; flex-direction: column; }
.dv-o.noi { border-color: var(--lua); }
.dv-o h3 { font-size: 1.14em; }
.dv-o .gia { font: 700 1.25em var(--so); color: var(--son); margin: 4px 0 8px; }
.dv-o p { font-size: .94em; flex: 1; }

/* Tài khoản: công cụ sau khi mở gói */
.cong-cu { margin-top: 26px; }
.cong-cu h3 { font-size: 1.2em; margin-bottom: 6px; }
.doi-dong { display: grid; grid-template-columns: 1fr 150px; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--ke); font-size: .94em; }
@media (min-width: 620px) { .doi-dong { grid-template-columns: 1fr 140px 170px; } .doi-dong .lech { text-align: left; } }
.doi-dong .lech { grid-column: 1 / -1; font-size: .9em; }
@media (min-width: 620px) { .doi-dong .lech { grid-column: 1 / -1; } }
.lech.xau { color: var(--son); font-weight: 500; }
.lech.on { color: var(--lua2); }
.moc-td { list-style: none; padding: 0; margin: 8px 0 0; border-left: 3px solid var(--lua); }
.moc-td li { padding: 7px 0 7px 14px; font-size: .94em; }
.moc-td b { font-weight: 500; }

/* Hộp thoại */
.hop { position: fixed; inset: 0; z-index: 50; background: rgba(23, 48, 43, .55); display: grid; place-items: center; padding: 12px; overflow: auto; }
.hop-than { background: var(--to); width: min(520px, 100%); padding: 22px 20px; border-radius: 6px; max-height: calc(100vh - 24px); overflow: auto; }
.hop-than.rong { width: min(760px, 100%); }
.hop-than h2 { font-size: 1.4rem; margin-bottom: 6px; padding-right: 40px; }
.hop-dau { position: relative; }
.dong-hop { position: absolute; top: -10px; right: -8px; background: none; border: 0; font-size: 1.1em; width: 48px; height: 48px; cursor: pointer; color: var(--muc2); }
.loi { color: var(--son); font-weight: 500; margin: 10px 0 0; }
.qr { display: block; width: min(280px, 100%); margin: 12px auto; border: 1px solid var(--ke); }
.ck { font-size: .95em; }
.ck div { display: flex; justify-content: space-between; gap: 10px; padding: 6px 0; border-bottom: 1px solid var(--ke2); }
.ck b { font-weight: 500; text-align: right; }
.van-ban { background: var(--giay); border: 1px solid var(--ke); padding: 16px; white-space: pre-wrap; font-size: .95em; line-height: 1.55; overflow-wrap: anywhere; }

/* Phần thông tin dưới trang */
.duoi { max-width: 1180px; margin: 30px auto 0; padding: 0 18px 40px; }
.phan { padding: 30px 0; border-top: 2px solid var(--ke); }
.phan h2 { font-size: clamp(1.4rem, 3.6vw, 1.9rem); margin-bottom: 10px; max-width: 24em; }
.ba-buoc { counter-reset: b; list-style: none; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 12px 0; }
.ba-buoc li { counter-increment: b; font-size: .96em; }
.ba-buoc li::before { content: counter(b); display: grid; place-items: center; width: 36px; height: 36px; border: 2px solid var(--lua); color: var(--lua2); border-radius: 50%; font: 700 1rem var(--so); margin-bottom: 8px; }
.ba-buoc b { display: block; font-weight: 500; }
details.hoi { border-bottom: 1px solid var(--ke); padding: 4px 0; }
details.hoi summary { cursor: pointer; padding: 12px 0; font-weight: 500; min-height: 48px; }
details.hoi p { font-size: .95em; }
.can-cu { font-size: .9em; color: var(--muc2); columns: 2 300px; padding-left: 1.1em; margin: 8px 0; }
.can-cu li { margin-bottom: 4px; break-inside: avoid; }
.chan { background: var(--muc); color: #DCE6E0; padding: 26px 18px 30px; font-size: .88rem; }
.chan > div { max-width: 1180px; margin: 0 auto; }
.chan a { color: #fff; }
.chan p { max-width: 80ch; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}
@media print {
  body { background: #fff; padding: 0; font-size: 12pt; }
  .dau, .to-ke-cot, .dieu-huong, .moi-goi, .duoi, .chan, .tien-trinh, .khong-in, .dv { display: none !important; }
  .khung { display: block; }
  .kq-so { border: 1px solid #000; }
  .khoan { break-inside: avoid; }
}

/* Đầu trang điện thoại: giữ mỗi mục trên một dòng */
.ten-web, .nut-mong { white-space: nowrap; }
@media (max-width: 519px) { .chi-rong { display: none; } }