/* Mau, font, khoang cach theo DESIGN.md. Huong thiet ke: Dau moi tai tinh. */
:root {
  --nen: #FFFFFF;
  --nen-phu: #EEF4FA;
  --nen-dam: #0B2545;
  --chu: #1A2433;
  --chu-phu: #4A5568;
  --chu-tren-dam: #FFFFFF;
  --chu-phu-tren-dam: #C9D4E3;
  --chinh: #0057A8;
  --chinh-dam: #00427F;
  --nhan: #E3A72F;
  --vien: #D5DEE8;
  --vien-o: #7A8799;
  --vong-chon: #00427F;
  --loi: #B42318;
  --thanh-cong: #1E7A46;
  --font-tieu-de: "Manrope", system-ui, sans-serif;
  --font-noi-dung: "Be Vietnam Pro", system-ui, sans-serif;
  --rong: 1120px;
  --le: 16px;
  --khoang-phan: 56px;
}
@media (min-width: 1024px) {
  :root { --le: 32px; --khoang-phan: 96px; }
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--nen);
  color: var(--chu);
  font-family: var(--font-noi-dung);
  font-size: 1rem;
  line-height: 1.65;
}
@media (min-width: 1024px) { body { font-size: 1.0625rem; } }
h1, h2, h3 { font-family: var(--font-tieu-de); margin: 0; color: var(--chu); }
h1 { font-size: 2rem; font-weight: 800; line-height: 1.15; }
h2 { font-size: 1.5rem; font-weight: 700; line-height: 1.2; }
h3 { font-size: 1.125rem; font-weight: 700; line-height: 1.3; }
@media (min-width: 1024px) {
  h1 { font-size: 3.25rem; }
  h2 { font-size: 2.125rem; }
  h3 { font-size: 1.25rem; }
}
p { margin: 0; }
a { color: var(--chinh); }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline: 3px solid var(--vong-chon);
  outline-offset: 2px;
}
.khung { max-width: var(--rong); margin: 0 auto; padding: 0 var(--le); }
.phan { padding: var(--khoang-phan) 0; }
.doan { max-width: 65ch; }
.chu-phu { color: var(--chu-phu); }

/* Nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 48px; padding: 14px 22px;
  border-radius: 10px; border: 1.5px solid transparent;
  font: 600 1rem/1 var(--font-noi-dung);
  text-decoration: none; cursor: pointer; white-space: nowrap;
  transition: background-color .15s, border-color .15s;
}
.nut-chinh { background: var(--chinh); color: #fff; }
.nut-chinh:hover { background: var(--chinh-dam); }
.nut-phu { background: transparent; color: var(--chinh); border-color: var(--vien-o); }
.nut-phu:hover { background: var(--nen-phu); border-color: var(--chinh); }

/* Thanh điều hướng */
.dau-trang { border-bottom: 1px solid var(--vien); background: var(--nen); position: sticky; top: 0; z-index: 10; }
.dau-trang .khung { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.ten-dv { font: 800 1.0625rem/1.2 var(--font-tieu-de); color: var(--chu); text-decoration: none; }
.ten-dv span { color: var(--chinh); }
.ten-dv { white-space: nowrap; }
@media (max-width: 374px) {
  .ten-dv span { display: block; }
}
@media (max-width: 767px) {
  .dau-trang nav[aria-label="Menu chính"] { display: none; }
}
.menu { display: none; gap: 28px; list-style: none; margin: 0; padding: 0; }
.menu a { color: var(--chu); text-decoration: none; font-weight: 500; }
.menu a:hover { color: var(--chinh); }
.dau-trang-phai { display: flex; align-items: center; gap: 8px; }
.dau-trang .nut { min-height: 44px; padding: 10px 16px; }
.nut-menu {
  width: 44px; height: 44px; border: 1.5px solid var(--vien-o); border-radius: 10px;
  background: var(--nen); color: var(--chu); font-size: 1.25rem; cursor: pointer;
}
.menu-dt { display: none; border-top: 1px solid var(--vien); }
.menu-dt.mo { display: block; }
.menu-dt ul { list-style: none; margin: 0; padding: 8px var(--le) 16px; }
.menu-dt a { display: block; padding: 12px 0; color: var(--chu); text-decoration: none; font-weight: 500; }
@media (min-width: 768px) {
  .menu { display: flex; }
  .nut-menu, .menu-dt, .menu-dt.mo { display: none; }
}

/* Banner đầu trang */
.banner { background: var(--nen-dam); color: var(--chu-tren-dam); padding: 48px 0 72px; overflow: hidden; }
@media (min-width: 1024px) { .banner { padding: 80px 0 120px; } }
.banner .khung { display: grid; gap: 32px; align-items: center; }
@media (min-width: 768px) { .banner .khung { grid-template-columns: 7fr 5fr; gap: 48px; } }
.banner h1 { color: var(--chu-tren-dam); max-width: 16ch; }
.banner .mo-ta { margin-top: 16px; color: var(--chu-phu-tren-dam); max-width: 46ch; }
.banner .hang-nut { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.nut-sang { background: #fff; color: var(--nen-dam); }
.nut-sang:hover { background: var(--nen-phu); }
.nut-vien-sang { background: transparent; color: #fff; border-color: var(--chu-phu-tren-dam); }
.nut-vien-sang:hover { background: rgba(255,255,255,.08); border-color: #fff; }
.banner a:focus-visible { outline-color: var(--nhan); }
.minh-hoa { width: 100%; max-width: 420px; height: auto; justify-self: center; }
@media (max-width: 767px) { .minh-hoa { max-width: 300px; } }

/* Thẻ hotline đè lên mép dưới banner */
.khoi-hotline { margin-top: -40px; padding-bottom: 56px; position: relative; }
@media (min-width: 1024px) { .khoi-hotline { margin-top: -64px; padding-bottom: 80px; } }

/* Thẻ hotline: điểm nhấn duy nhất */
.the-hotline {
  background: var(--nhan); color: var(--chu);
  border-radius: 20px; padding: 24px;
  animation: hien-ra .5s ease-out both .15s;
}
@media (min-width: 768px) { .the-hotline { padding: 28px; } }
.the-hotline .nhan-nho { font-weight: 600; }
.the-hotline .so {
  display: block; margin: 4px 0 20px;
  font: 800 1.75rem/1.1 var(--font-tieu-de); color: var(--chu);
  text-decoration: none; white-space: nowrap;
}
@media (min-width: 1024px) { .the-hotline .so { font-size: 2.5rem; } }
.the-hotline .hang-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.the-hotline .hang-nut .nut { flex: 1 1 140px; }
.nut-goi { background: var(--chu); color: #fff; }
.nut-goi:hover { background: #000; }
.nut-zalo-the { background: #fff; color: var(--chu); border-color: var(--chu); }
.nut-zalo-the:hover { background: var(--nen-phu); }
.the-hotline a:focus-visible { outline-color: var(--chu); }
.the-hotline .ghi-chu { margin-top: 20px; padding-top: 16px; border-top: 1px solid rgba(26,36,51,.25); font-size: .9375rem; }
@media (min-width: 1024px) {
  .the-hotline { display: grid; grid-template-columns: auto 1fr 1fr; gap: 32px; align-items: center; padding: 28px 36px; }
  .the-hotline .so { margin-bottom: 0; }
  .the-hotline .ghi-chu { margin: 0; padding: 0 0 0 32px; border-top: 0; border-left: 1px solid rgba(26,36,51,.25); }
}
@keyframes hien-ra { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* Danh sách giải pháp */
.giai-phap { background: var(--nen-phu); }
.giai-phap .mo-ta-muc { margin-top: 12px; color: var(--chu-phu); }
.ds-giai-phap { list-style: none; margin: 32px 0 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 768px) { .ds-giai-phap { grid-template-columns: 1fr 1fr; } }
.hang-gp {
  background: var(--nen); border: 1px solid var(--vien); border-radius: 10px;
  padding: 20px; display: grid; grid-template-columns: 72px 1fr; gap: 16px; align-items: start;
}
@media (min-width: 1024px) { .hang-gp { grid-template-columns: 96px 1fr; gap: 20px; } }
.anh-gp { width: 100%; height: auto; display: block; }
.noi-dung-gp { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.hang-gp h3 { color: var(--chinh); }
.hang-gp .sp { font-size: .875rem; color: var(--chu-phu); font-weight: 500; }
.hang-gp p { color: var(--chu-phu); }
.hang-gp a { margin-top: 6px; font-weight: 600; align-self: flex-start; padding: 4px 0; }

/* Vì sao chọn */
.vi-sao .khung { display: grid; gap: 40px; }
@media (min-width: 1024px) { .vi-sao .khung { grid-template-columns: 1fr 1fr; gap: 64px; } }
.vi-sao .doan p + p { margin-top: 16px; }
.vi-sao .doan h2 { margin-bottom: 16px; }
.buoc { list-style: none; margin: 0; padding: 0; counter-reset: buoc; }
.buoc li {
  counter-increment: buoc; position: relative;
  padding: 0 0 28px 56px;
}
.buoc li:last-child { padding-bottom: 0; }
.buoc li::before {
  content: counter(buoc); position: absolute; left: 0; top: -4px;
  width: 38px; height: 38px; border-radius: 50%;
  background: var(--chinh); color: #fff;
  display: grid; place-items: center; font: 700 1rem/1 var(--font-tieu-de);
}
.buoc h3 { margin-bottom: 4px; }
.buoc p { color: var(--chu-phu); }

/* Câu hỏi thường gặp */
.hoi-dap { background: var(--nen-phu); }
.hoi-dap .khung { max-width: 820px; }
.hoi-dap details { border-bottom: 1px solid var(--vien); }
.hoi-dap summary {
  cursor: pointer; list-style: none; padding: 20px 40px 20px 0; position: relative;
  font: 700 1.0625rem/1.4 var(--font-tieu-de);
}
.hoi-dap summary::-webkit-details-marker { display: none; }
.hoi-dap summary::after { content: "+"; position: absolute; right: 8px; top: 16px; font-size: 1.5rem; color: var(--chinh); }
.hoi-dap details[open] summary::after { content: "−"; }
.hoi-dap details p { padding: 0 0 20px; color: var(--chu-phu); max-width: 65ch; }
.hoi-dap h2 { margin-bottom: 8px; }
.hoi-dap .nhom-hoi { margin-top: 32px; padding-bottom: 4px; color: var(--chinh); }

/* Liên hệ */
.lien-he { background: var(--nen-dam); color: var(--chu-tren-dam); }
.lien-he h2 { color: var(--chu-tren-dam); }
.lien-he .khung { display: grid; gap: 40px; }
@media (min-width: 1024px) { .lien-he .khung { grid-template-columns: 1fr 1fr; align-items: start; } }
.lien-he .chu-phu-dam { color: var(--chu-phu-tren-dam); margin-top: 12px; }
.lien-he dl { margin: 28px 0 0; display: grid; gap: 16px; }
.lien-he dt { color: var(--chu-phu-tren-dam); font-size: .875rem; }
.lien-he dd { margin: 2px 0 0; font-weight: 600; font-size: 1.125rem; }
.lien-he a { color: var(--chu-tren-dam); display: inline-block; padding: 4px 0; }
.lien-he a:focus-visible { outline-color: var(--nhan); }
.o-ban-do {
  width: 100%; height: 300px; border: 0; border-radius: 10px; background: var(--nen-phu);
}

.chan-trang { background: var(--nen-dam); color: var(--chu-phu-tren-dam); border-top: 1px solid rgba(201,212,227,.2); font-size: .875rem; }
.chan-trang .khung { padding-top: 24px; padding-bottom: 88px; }

/* Nút Zalo nổi */
.zalo-noi {
  position: fixed; right: 16px; bottom: 16px; z-index: 20;
  width: 56px; height: 56px; border-radius: 50%;
  background: var(--nhan); color: var(--chu);
  display: grid; place-items: center;
  font: 800 .875rem/1 var(--font-tieu-de); text-decoration: none;
  box-shadow: 0 4px 12px rgba(11,37,69,.25);
}
.zalo-noi:focus-visible { outline: 3px solid var(--vong-chon); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

.bo-qua { position: absolute; left: -9999px; }
.bo-qua:focus { left: 16px; top: 16px; background: var(--nen); padding: 8px 12px; z-index: 100; }
.chan-trang p + p { margin-top: 6px; }
.chan-trang a { color: #fff; }
.chan-trang a:focus-visible { outline-color: var(--nhan); }

/* Trang con giải pháp */
.banner--trang-con { padding: 32px 0 72px; }
@media (min-width: 1024px) { .banner--trang-con { padding: 48px 0 112px; } }
.anh-banner { width: 160px; height: auto; justify-self: start; }
@media (min-width: 768px) { .anh-banner { width: 220px; justify-self: end; } }
.duong-dan ol { list-style: none; margin: 0 0 20px; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; font-size: .875rem; color: var(--chu-phu-tren-dam); }
.duong-dan li + li::before { content: "/"; margin-right: 8px; }
.duong-dan a { color: #fff; display: inline-block; padding: 4px 0; }
.hang-gp--gon { grid-template-columns: 1fr; }
.ds-giay-to { margin: 8px 0 0; padding-left: 20px; }
.ds-giay-to li + li { margin-top: 8px; }
.cuon-bang { overflow-x: auto; margin-top: 24px; border: 1px solid var(--vien); border-radius: 10px; }
.bang-so-sanh { width: 100%; min-width: 520px; border-collapse: collapse; }
.bang-so-sanh th, .bang-so-sanh td { padding: 14px 16px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--vien); }
.bang-so-sanh thead th { background: var(--nen-phu); font-family: var(--font-tieu-de); }
.bang-so-sanh tbody th { font-weight: 600; color: var(--chu); }
.bang-so-sanh td { color: var(--chu-phu); }
.bang-so-sanh tr:last-child th, .bang-so-sanh tr:last-child td { border-bottom: 0; }
.lien-quan h2 { margin-bottom: 20px; }
.the-lien-quan {
  display: block; max-width: 560px; padding: 20px; border: 1px solid var(--vien); border-radius: 10px;
  text-decoration: none; color: var(--chu);
}
.the-lien-quan:hover { border-color: var(--chinh); background: var(--nen-phu); }
.ten-lq { display: block; font: 700 1.125rem/1.3 var(--font-tieu-de); color: var(--chinh); }
.mota-lq { display: block; margin-top: 6px; color: var(--chu-phu); }
.xem-tat-ca { margin-top: 20px; }
.xem-tat-ca a { font-weight: 600; display: inline-block; padding: 4px 0; }
@media (max-width: 599px) {
  .cuon-bang { overflow: visible; border: 0; }
  .bang-so-sanh { min-width: 0; }
  .bang-so-sanh thead { position: absolute; left: -9999px; }
  .bang-so-sanh, .bang-so-sanh tbody, .bang-so-sanh tr, .bang-so-sanh th, .bang-so-sanh td { display: block; }
  .bang-so-sanh tr { border: 1px solid var(--vien); border-radius: 10px; margin-bottom: 12px; }
  .bang-so-sanh tbody th { background: var(--nen-phu); border-radius: 10px 10px 0 0; }
  .bang-so-sanh td::before { content: attr(data-nhan); display: block; font-weight: 600; font-size: .875rem; color: var(--chu); margin-bottom: 2px; }
  .bang-so-sanh tr:last-child td:last-child, .bang-so-sanh td:last-child { border-bottom: 0; }
}