:root {
  --chinh: #12355b;
  --chinh-dam: #0b2440;
  --nhan: #f28c28;
  --nhan-dam: #d9741a;
  --nen: #f5f6f8;
  --the: #ffffff;
  --chu: #1d2633;
  --chu-phu: #5b6676;
  --vien: #e1e5eb;
  --xanh: #1f8a4c;
  --do: #c0392b;
  --bo: 12px;
  color-scheme: light;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--chu);
  background: var(--nen);
  line-height: 1.6;
  font-size: 16px;
}
img { max-width: 100%; display: block; }
a { color: var(--chinh); }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .5em; }
h2 { font-size: clamp(1.5rem, 3vw, 2rem); color: var(--chinh); }
.khung { max-width: 1120px; margin: 0 auto; padding: 0 16px; }
.muc { padding: 64px 0; }
.muc-trang { background: var(--the); }
.tieu-de-muc { text-align: center; max-width: 680px; margin: 0 auto 36px; }
.tieu-de-muc p { color: var(--chu-phu); margin: 0; }

/* Nút */
.nut {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px; border: 0; cursor: pointer;
  font: inherit; font-weight: 600; text-decoration: none; transition: background .15s, transform .15s;
}
.nut:active { transform: translateY(1px); }
.nut-nhan { background: var(--nhan); color: #fff; }
.nut-nhan:hover { background: var(--nhan-dam); }
.nut-vien { background: transparent; color: #fff; border: 2px solid rgba(255,255,255,.7); }
.nut-vien:hover { background: rgba(255,255,255,.1); }
.nut-chinh { background: var(--chinh); color: #fff; }
.nut-chinh:hover { background: var(--chinh-dam); }
.nut:disabled { opacity: .6; cursor: wait; }

/* Đầu trang */
.dau-trang { position: sticky; top: 0; z-index: 10; background: var(--chinh-dam); color: #fff; }
.dau-trang .khung { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.logo { color: #fff; text-decoration: none; font-weight: 800; font-size: 1.1rem; letter-spacing: .2px; }
.logo span { color: var(--nhan); }
.menu { display: flex; gap: 22px; }
.menu a { color: #dfe7f1; text-decoration: none; font-size: .95rem; }
.menu a:hover { color: #fff; }
.dau-trang .nut { padding: 9px 16px; font-size: .95rem; }
@media (max-width: 860px) { .menu { display: none; } }

/* Mở đầu */
.mo-dau {
  background: linear-gradient(135deg, var(--chinh-dam) 0%, var(--chinh) 60%, #1d4b7d 100%);
  color: #fff; padding: 72px 0 80px;
}
.mo-dau h1 { font-size: clamp(1.9rem, 4.6vw, 3rem); max-width: 760px; }
.mo-dau h1 em { font-style: normal; color: var(--nhan); }
.mo-dau p { font-size: 1.1rem; color: #d3deea; max-width: 620px; margin: 0 0 28px; }
.mo-dau .nhom-nut { display: flex; flex-wrap: wrap; gap: 12px; }
.cam-ket { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 36px; padding: 0; list-style: none; color: #d3deea; font-size: .95rem; }
.cam-ket li::before { content: "✓ "; color: var(--nhan); font-weight: 700; }

/* Công cụ dự toán */
.du-toan { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
@media (max-width: 860px) { .du-toan { grid-template-columns: 1fr; } }
.the { background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 24px; box-shadow: 0 4px 18px rgba(18, 53, 91, .06); }
.the h3 { color: var(--chinh); font-size: 1.15rem; }
.o-nhap { margin-bottom: 16px; }
.o-nhap label, .nhan-o { display: block; font-weight: 600; font-size: .92rem; margin-bottom: 6px; }
.o-nhap input[type=number], .o-nhap input[type=text], .o-nhap input[type=tel], .o-nhap input[type=password],
.o-nhap select, .o-nhap textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--vien); border-radius: 8px;
  font: inherit; background: #fff; color: var(--chu);
}
.o-nhap input:focus, .o-nhap select:focus, .o-nhap textarea:focus { outline: 2px solid var(--nhan); outline-offset: 0; border-color: transparent; }
.hai-cot { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 420px) { .hai-cot { grid-template-columns: 1fr; } }
.chon-goi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.chon-goi label {
  display: block; border: 2px solid var(--vien); border-radius: 10px; padding: 12px; cursor: pointer; font-weight: 400;
}
.chon-goi input { position: absolute; opacity: 0; pointer-events: none; }
.chon-goi b { display: block; color: var(--chinh); }
.chon-goi small { color: var(--chu-phu); }
.chon-goi label:has(input:checked) { border-color: var(--nhan); background: #fff7ef; }
.chon-goi label:has(input:focus-visible) { outline: 2px solid var(--nhan); }
.dong-check { display: flex; align-items: center; gap: 8px; font-weight: 600; font-size: .92rem; }
.dong-check input { width: 18px; height: 18px; accent-color: var(--nhan); }

.ket-qua { position: sticky; top: 84px; }
.so-tien { font-size: clamp(1.9rem, 5vw, 2.5rem); font-weight: 800; color: var(--nhan-dam); margin: 4px 0 2px; font-variant-numeric: tabular-nums; }
.ghi-chu-nho { color: var(--chu-phu); font-size: .85rem; }
.bang-quy-doi { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: .92rem; font-variant-numeric: tabular-nums; }
.bang-quy-doi td { padding: 7px 0; border-bottom: 1px dashed var(--vien); }
.bang-quy-doi td:last-child { text-align: right; white-space: nowrap; }
.bang-quy-doi tr.tong td { font-weight: 700; border-bottom: 0; border-top: 2px solid var(--chinh); }
.form-khach { border-top: 1px solid var(--vien); margin-top: 18px; padding-top: 18px; }
.o-bay { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.thong-bao { margin-top: 12px; padding: 12px 14px; border-radius: 8px; font-size: .95rem; }
.thong-bao.tot { background: #e7f6ed; color: var(--xanh); }
.thong-bao.loi { background: #fdecea; color: var(--do); }
.an { display: none !important; }

/* Gói dịch vụ */
.luoi-goi { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 760px) { .luoi-goi { grid-template-columns: 1fr; } }
.the-goi { position: relative; }
.the-goi .gia { font-size: 1.5rem; font-weight: 800; color: var(--nhan-dam); margin: 4px 0 14px; }
.the-goi .gia small { font-size: .9rem; font-weight: 500; color: var(--chu-phu); }
.the-goi ul { padding-left: 0; list-style: none; margin: 0 0 20px; }
.the-goi li { padding: 6px 0 6px 26px; position: relative; border-bottom: 1px solid #f0f2f5; }
.the-goi li::before { content: "✓"; position: absolute; left: 0; color: var(--xanh); font-weight: 700; }
.nhan-noi-bat { position: absolute; top: -12px; right: 20px; background: var(--nhan); color: #fff; font-size: .8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; }

/* Quy trình */
.quy-trinh { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; counter-reset: buoc; padding: 0; list-style: none; }
@media (max-width: 860px) { .quy-trinh { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .quy-trinh { grid-template-columns: 1fr; } }
.quy-trinh li { counter-increment: buoc; background: var(--the); border: 1px solid var(--vien); border-radius: var(--bo); padding: 20px; }
.quy-trinh li::before {
  content: counter(buoc); display: inline-grid; place-items: center; width: 36px; height: 36px;
  border-radius: 50%; background: var(--chinh); color: #fff; font-weight: 700; margin-bottom: 10px;
}
.quy-trinh b { display: block; color: var(--chinh); margin-bottom: 4px; }
.quy-trinh span { color: var(--chu-phu); font-size: .95rem; }

/* Bảng giá */
.cuon-ngang { overflow-x: auto; }
.bang-gia { width: 100%; border-collapse: collapse; background: var(--the); border-radius: var(--bo); overflow: hidden; font-variant-numeric: tabular-nums; }
.bang-gia th, .bang-gia td { padding: 12px 16px; text-align: left; border-bottom: 1px solid var(--vien); }
.bang-gia th { background: var(--chinh); color: #fff; font-weight: 600; }
.bang-gia td.so { text-align: right; white-space: nowrap; font-weight: 600; }
.bang-gia tr.nhom td { background: #eef2f7; font-weight: 700; color: var(--chinh); }

/* Hỏi đáp */
.hoi-dap { max-width: 800px; margin: 0 auto; }
.hoi-dap details { background: var(--the); border: 1px solid var(--vien); border-radius: 10px; margin-bottom: 10px; }
.hoi-dap summary { padding: 16px 18px; cursor: pointer; font-weight: 600; color: var(--chinh); }
.hoi-dap details p { margin: 0; padding: 0 18px 16px; color: var(--chu-phu); }

/* Kêu gọi + chân trang */
.keu-goi { background: var(--nhan); color: #fff; text-align: center; padding: 48px 0; }
.keu-goi h2 { color: #fff; }
.keu-goi .nut { background: #fff; color: var(--nhan-dam); }
.chan-trang { background: var(--chinh-dam); color: #b9c6d6; padding: 40px 0 24px; font-size: .95rem; }
.chan-trang .khung { display: grid; grid-template-columns: 2fr 1fr; gap: 24px; }
@media (max-width: 640px) { .chan-trang .khung { grid-template-columns: 1fr; } }
.chan-trang b { color: #fff; }
.chan-trang a { color: #fff; }
.ban-quyen { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; font-size: .85rem; }

/* Nút gọi nổi trên điện thoại */
.goi-noi { position: fixed; right: 16px; bottom: 16px; z-index: 20; box-shadow: 0 6px 18px rgba(0,0,0,.25); display: none; }
@media (max-width: 760px) { .goi-noi { display: inline-flex; } }

/* Trang quản trị */
.qt-dau { background: var(--chinh-dam); color: #fff; }
.qt-dau .khung { display: flex; justify-content: space-between; align-items: center; height: 56px; }
.qt-than { padding: 24px 0 48px; }
.hop-dang-nhap { max-width: 380px; margin: 64px auto; }
.thanh-loc { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.thanh-loc button { border: 1px solid var(--vien); background: var(--the); border-radius: 999px; padding: 7px 14px; font: inherit; font-size: .9rem; cursor: pointer; }
.thanh-loc button.dang-chon { background: var(--chinh); color: #fff; border-color: var(--chinh); }
.bang-khach { width: 100%; border-collapse: collapse; background: var(--the); font-size: .92rem; font-variant-numeric: tabular-nums; }
.bang-khach th, .bang-khach td { padding: 10px 12px; border-bottom: 1px solid var(--vien); text-align: left; vertical-align: top; }
.bang-khach th { background: #eef2f7; color: var(--chinh); white-space: nowrap; }
.bang-khach td.so { text-align: right; white-space: nowrap; }
.bang-khach select { font: inherit; padding: 5px 6px; border-radius: 6px; border: 1px solid var(--vien); }
.bang-khach .phu { color: var(--chu-phu); font-size: .85rem; }
.trong { text-align: center; color: var(--chu-phu); padding: 40px 0; }