/* =====================================================================
   Giao diện dùng chung cho các trang phụ của divuive.com
   (app-tai-xe.html, dang-ky-chay-xe.html, chinh-sach-bao-mat.html)

   Trang chủ `index.html` giữ CSS riêng bên trong nó — cố ý không gộp vào
   đây. Trang chủ là thứ chạy được rồi, đụng vào là rủi ro không đáng.
   Ba trang phụ thì mới, dùng chung một file cho khỏi chép đi chép lại.

   Màu và font lấy đúng theo trang chủ để nhìn ra cùng một nhà.
   ===================================================================== */

:root {
  --bg:        #F2F2F7;
  --surface:   #FFFFFF;
  --surface-2: #E9E9EF;
  --sep:       rgba(60,60,67,.18);
  --label:     #000000;
  --label-2:   rgba(60,60,67,.62);
  --label-3:   rgba(60,60,67,.36);
  --tint:      #00A651;
  --tint-deep: #00803E;
  --tint-soft: rgba(0,166,81,.12);
  --orange:    #FF9500;
  --red:       #D7263D;
  --r:         14px;
  --ui: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Theo cài đặt sáng/tối của máy, trừ khi trang tự ép sáng. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1C1C1E; --surface-2: #2C2C2E;
    --sep: rgba(84,84,88,.5);
    --label: #FFFFFF; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.32);
    --tint: #30D158; --tint-deep: #30D158; --tint-soft: rgba(48,209,88,.16);
    --orange: #FF9F0A; --red: #FF453A;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1C1C1E; --surface-2: #2C2C2E;
  --sep: rgba(84,84,88,.5);
  --label: #FFFFFF; --label-2: rgba(235,235,245,.62); --label-3: rgba(235,235,245,.32);
  --tint: #30D158; --tint-deep: #30D158; --tint-soft: rgba(48,209,88,.16);
  --orange: #FF9F0A; --red: #FF453A;
  color-scheme: dark;
}

* { box-sizing: border-box; margin: 0; padding: 0 }
html { -webkit-text-size-adjust: 100% }
body {
  font-family: var(--ui);
  background: var(--bg);
  color: var(--label);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit }
a { color: var(--tint-deep); text-decoration-thickness: 1px; text-underline-offset: 2px }
.tnum { font-variant-numeric: tabular-nums }

/* ---------- khung trang ---------- */
.wrap { width: min(980px, 100%); margin: 0 auto; padding: 0 16px }

.topbar {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: saturate(180%) blur(18px);
  border-bottom: 1px solid var(--sep);
}
.topbar .in { display: flex; align-items: center; gap: 14px; height: 58px }
.logo { display: flex; align-items: center; gap: 9px; font-weight: 700; font-size: 16.5px; text-decoration: none; color: inherit }
.logo .m {
  width: 30px; height: 30px; border-radius: 9px; background: var(--tint);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 16px;
}
.topbar .sp { margin-left: auto }
.callbtn {
  background: var(--tint); color: #fff; text-decoration: none;
  padding: 8px 14px; border-radius: 10px; font-weight: 600; font-size: 14.5px; white-space: nowrap;
}

/* ---------- đầu trang ---------- */
.head { padding: 34px 0 10px }
.head .kicker { color: var(--tint-deep); font-weight: 600; font-size: 13.5px; letter-spacing: .02em; text-transform: uppercase }
.head h1 { font-size: clamp(28px, 6vw, 40px); line-height: 1.15; letter-spacing: -.025em; margin-top: 6px }
.head p.lead { color: var(--label-2); font-size: 17px; margin-top: 10px; max-width: 62ch }

/* ---------- khối ---------- */
section { padding: 22px 0 }
h2 { font-size: 22px; letter-spacing: -.02em; margin-bottom: 12px }
h3 { font-size: 17px; letter-spacing: -.01em; margin-bottom: 6px }
p + p, p + ul, ul + p, p + .card, .card + .card, .card + p { margin-top: 12px }
ul, ol { padding-left: 20px }
li { margin: 5px 0 }

.card {
  background: var(--surface); border: 1px solid var(--sep);
  border-radius: var(--r); padding: 18px;
}
.card.flat { background: transparent; border-style: dashed }
.muted { color: var(--label-2); font-size: 14.5px }
.small { font-size: 13.5px; color: var(--label-3) }

.grid { display: grid; gap: 14px }
/* Ô lưới mặc định không chịu hẹp hơn nội dung bên trong. Ô chọn tệp lại
   rộng cố định, nên không có dòng này là trang tràn ngang trên điện thoại. */
.grid > * { min-width: 0 }
.g2 { grid-template-columns: 1fr 1fr }
@media (max-width: 720px) { .g2 { grid-template-columns: 1fr } }

.ticks { list-style: none; padding: 0 }
.ticks li { display: flex; gap: 10px; align-items: flex-start; margin: 9px 0 }
.ticks li::before {
  content: ''; flex: none; width: 19px; height: 19px; margin-top: 3px; border-radius: 50%;
  background: var(--tint-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300803E' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6L9 17l-5-5'/%3E%3C/svg%3E") center/12px no-repeat;
}

/* ---------- nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--tint); color: #fff; border: 0; cursor: pointer;
  padding: 12px 20px; border-radius: 11px; font-weight: 600; font-size: 15.5px;
  text-decoration: none;
}
.btn:disabled { opacity: .55; cursor: default }
.btn.ghost { background: var(--surface-2); color: var(--label); border: 1px solid var(--sep) }
.btn.wide { width: 100% }

/* ---------- mã QR ---------- */
.qrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px }
.qcard { background: var(--surface); border: 1px solid var(--sep); border-radius: var(--r); padding: 18px; text-align: center }
.qcard .box {
  width: 170px; height: 170px; margin: 0 auto 12px; border-radius: 10px;
  background: #fff; padding: 10px; display: grid; place-items: center;
}
.qcard .box img, .qcard .box svg { width: 100%; height: 100%; display: block; image-rendering: pixelated }
.qcard .box.cho { background: var(--surface-2); color: var(--label-3); font-size: 13.5px; padding: 18px; line-height: 1.45 }
.qcard b { display: block; font-size: 15px }
.qcard small { color: var(--label-2); font-size: 13px }

/* ---------- biểu mẫu ---------- */
.f { display: block; margin-bottom: 14px }
.f > span { display: block; font-size: 14px; font-weight: 600; margin-bottom: 6px }
.f > span em { font-style: normal; font-weight: 400; color: var(--label-3) }
.f input[type=text], .f input[type=tel], .f input[type=email], .f select, .f textarea {
  width: 100%; background: var(--surface); color: var(--label);
  border: 1px solid var(--sep); border-radius: 10px; padding: 11px 12px; font-size: 16px;
}
.f textarea { min-height: 86px; resize: vertical }
.f input:focus, .f select:focus, .f textarea:focus { outline: 2px solid var(--tint); outline-offset: 1px; border-color: transparent }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px }
@media (max-width: 620px) { .row2 { grid-template-columns: 1fr } }

.drop {
  border: 1.5px dashed var(--sep); border-radius: 12px; padding: 14px;
  display: flex; gap: 12px; align-items: center; background: var(--surface);
}
.drop .pv {
  width: 72px; height: 54px; flex: none; border-radius: 8px; background: var(--surface-2);
  display: grid; place-items: center; overflow: hidden; color: var(--label-3); font-size: 11px;
}
.drop .pv img { width: 100%; height: 100%; object-fit: cover }
.drop { min-width: 0 }
.drop .bd { min-width: 0; flex: 1 1 auto }
.drop b { display: block; font-size: 14.5px }
.drop small { color: var(--label-3); font-size: 12.5px; display: block; margin-top: 2px }
.drop input[type=file] { font-size: 12.5px; margin-top: 7px; width: 100%; max-width: 100% }
.drop b, .drop small { overflow-wrap: anywhere }

.note {
  background: var(--tint-soft); border-radius: 12px; padding: 14px 16px;
  font-size: 14.5px; color: var(--label); border: 1px solid transparent;
}
.note.warn { background: rgba(255,149,0,.13) }
.err { color: var(--red); font-size: 14px; margin-top: 10px; min-height: 18px }

/* ---------- chân trang ---------- */
footer { border-top: 1px solid var(--sep); margin-top: 34px; padding: 24px 0 40px; color: var(--label-2); font-size: 14px }
footer a { color: var(--label-2) }
footer .links { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-bottom: 12px }

/* ---------- mục lục trang dài ---------- */
.toc { background: var(--surface); border: 1px solid var(--sep); border-radius: var(--r); padding: 16px 18px }
.toc ol { margin: 0; padding-left: 20px; columns: 2; column-gap: 24px }
.toc li { margin: 4px 0; break-inside: avoid }
.toc a { color: var(--label); text-decoration: none }
.toc a:hover { text-decoration: underline }
@media (max-width: 620px) { .toc ol { columns: 1 } }

.doc h2 { margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--sep); scroll-margin-top: 70px }
.doc h2:first-of-type { border-top: 0; padding-top: 0 }
.doc p, .doc li { color: var(--label-2) }
.doc strong { color: var(--label) }