/* Trang Dịch vụ SHTT (dichvu.techfuture.vn) — cùng bảng màu, font, góc vuông với site chính (index.html). */
@font-face {
  font-family: 'Material Symbols Rounded';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("/fonts/material-symbols-rounded.woff2") format('woff2');
}

:root {
  color-scheme: dark;
  --bg: #060a14; --surface: #0f1a2e; --surface2: #14213b; --card: #0e1830;
  --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.15);
  --text: #e9eff8; --sub: #9db0cd; --muted: #5f7291;
  --accent: #22d3ee; --a2: #3b82f6; --ad: rgba(34,211,238,.08);
  --accent-fill: #22d3ee; --a2-fill: #3b82f6; /* màu nền nút / logo: giữ nguyên ở cả hai giao diện (chữ trên đó luôn tối) */
  --err: #ff6b7a; --ok: #33e08a; --warn: var(--warn);
  --glow: #10234a; --grid: rgba(255,255,255,.03); --shadow: rgba(0,0,0,.8);
}
/* Giao diện sáng (25/10, nút ở đầu trang; js/giao-dien.js): cùng bảng màu sáng của site chính, màu nhấn đậm hơn cho chữ dễ đọc trên nền sáng */
:root[data-theme="light"] {
  color-scheme: light;
  --bg: #eef2f8; --surface: #ffffff; --surface2: #e9eef7; --card: #ffffff;
  --line: rgba(16,20,31,.1); --line2: rgba(16,20,31,.18);
  --text: #10141f; --sub: #4a566e; --muted: #6b7890;
  --accent: #0e7490; --a2: #2563eb; --ad: rgba(14,116,144,.08);
  --err: #c42b3d; --ok: #15803d; --warn: #9a5b00;
  --glow: rgba(34,211,238,.1); --grid: rgba(16,20,31,.04); --shadow: rgba(16,20,31,.3);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; min-height: 100vh; color: var(--text); font-family: 'Be Vietnam Pro', system-ui, sans-serif; font-size: 15px;
  background: radial-gradient(900px 600px at 70% -8%, var(--glow) 0%, transparent 55%), var(--bg);
}
h1, h2, h3 { font-family: 'Archivo', 'Be Vietnam Pro', sans-serif; letter-spacing: -0.02em; margin: 0; }
a { color: var(--accent); }
button, input, select, textarea { font-family: inherit; font-size: inherit; }
.ms { font-family: 'Material Symbols Rounded'; font-weight: normal; font-style: normal; line-height: 1; display: inline-block; -webkit-font-feature-settings: 'liga'; font-feature-settings: 'liga'; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding: 0 16px; }

/* Header */
.dv-header { border-bottom: 1px solid var(--line); }
.dv-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; }
.dv-brand { display: flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; }
.dv-logo { width: 34px; height: 34px; display: grid; place-items: center; background: linear-gradient(135deg, #2f7dff, var(--accent-fill)); color: #05121a; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 16px; }
.dv-brand b { font-family: 'Archivo', sans-serif; font-size: 17px; }
.dv-brand small { display: block; color: var(--sub); font-size: 12px; }
.dv-hotline { display: flex; align-items: center; gap: 6px; color: var(--text); text-decoration: none; font-weight: 600; font-size: 14px; }
.dv-header-right { display: flex; align-items: center; gap: 16px; }
.dv-home-link { display: flex; align-items: center; gap: 6px; color: var(--sub); text-decoration: none; font-size: 14px; white-space: nowrap; }
.dv-home-link:hover { color: var(--accent); }
.dv-home-link .ms { font-size: 20px; }
@media (max-width: 860px) { .dv-home-text { display: none; } }
.dv-account { display: flex; align-items: center; gap: 10px; font-size: 14px; }
.dv-acc-name { max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.dv-account .dv-link, .dv-account .dv-btn { white-space: nowrap; }
.dv-btn-sm { padding: 8px 14px; font-size: 14px; text-decoration: none; }
.dv-hotline .ms { color: var(--accent); font-size: 20px; }
.dv-theme { flex: none; width: 36px; height: 36px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--sub); cursor: pointer; transition: background-color .15s ease, color .15s ease; }
.dv-theme:hover { background: var(--surface2); color: var(--text); }
.dv-theme:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dv-theme .ms { font-size: 21px; }
@media (max-width: 360px) { .dv-home-link { display: none; } } /* màn rất hẹp: nhường chỗ cho nút đổi giao diện (logo và chân trang vẫn dẫn về) */
/* Đổi giao diện: màu chuyển mượt trong lúc bấm (giảm chuyển động thì đổi ngay) */
@media (prefers-reduced-motion: no-preference) {
  html.dv-doi, html.dv-doi *, html.dv-doi *::before, html.dv-doi *::after { transition: background-color .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease !important; }
}

/* Hero + tìm kiếm */
.dv-hero { padding: 56px 0 36px; text-align: center; }
.dv-hero h1 { font-size: clamp(28px, 6vw, 44px); line-height: 1.2; }
.dv-hero p { color: var(--sub); margin: 12px auto 28px; max-width: 620px; line-height: 1.7; }
.dv-search { display: flex; max-width: 680px; margin: 0 auto; border: 1px solid var(--line2); background: var(--surface); }
.dv-search:focus-within { border-color: var(--accent); }
.dv-search .ms { color: var(--sub); font-size: 22px; align-self: center; padding: 0 4px 0 14px; }
.dv-search input { flex: 1; min-width: 0; border: 0; background: transparent; color: var(--text); padding: 15px 10px; outline: none; }
.dv-search input::placeholder { color: var(--muted); }
.dv-search button { border: 0; padding: 0 22px; cursor: pointer; font-weight: 700; color: #05121a; background: linear-gradient(135deg, var(--accent-fill), var(--a2-fill)); }
.dv-chips { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 14px; }
.dv-chip { border: 1px solid var(--line2); background: transparent; color: var(--sub); padding: 7px 14px; cursor: pointer; font-size: 13.5px; }
.dv-chip:hover, .dv-chip[aria-pressed="true"] { color: var(--accent); border-color: var(--accent); }
.dv-search-msg { max-width: 680px; margin: 14px auto 0; padding: 12px 14px; text-align: left; font-size: 14px; line-height: 1.6; color: var(--sub); border-left: 3px solid var(--accent); background: var(--ad); }
/* T18 cách C: bảng kết quả — nhúng trang kết quả của Cục SHTT (giao diện của Cục làm cho màn hình rộng). */
.dv-kq { margin: 22px auto 0; text-align: left; background: var(--card); border: 1px solid var(--line2); box-shadow: 0 24px 60px -30px var(--shadow); }
.dv-kq-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 16px 18px; border-bottom: 1px solid var(--line); }
.dv-kq-title { display: flex; align-items: center; gap: 12px; min-width: 0; }
.dv-kq-icon { flex: none; width: 40px; height: 40px; display: grid; place-items: center; font-size: 22px; color: var(--accent); background: var(--ad); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.dv-kq-title h2 { font-size: 17px; line-height: 1.3; overflow-wrap: anywhere; }
.dv-kq p { margin: 0; max-width: none; line-height: 1.5; } /* bỏ lề của .dv-hero p */
.dv-kq .dv-kq-src { display: flex; align-items: center; gap: 7px; margin-top: 3px; color: var(--sub); font-size: 12.5px; }
.dv-kq-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); box-shadow: 0 0 0 3px rgba(51,224,138,.15); }
.dv-kq-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dv-kq-btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 14px; border: 0; cursor: pointer; font-size: 13.5px; font-weight: 700; text-decoration: none; color: #05121a; background: linear-gradient(135deg, var(--accent-fill), var(--a2-fill)); }
.dv-kq-btn .ms { font-size: 18px; }
.dv-kq-btn.sec { color: var(--text); background: transparent; border: 1px solid var(--line2); font-weight: 600; }
.dv-kq-btn.sec:hover { border-color: var(--accent); color: var(--accent); }
.dv-kq-close { width: 38px; height: 38px; display: grid; place-items: center; border: 1px solid var(--line2); background: transparent; color: var(--sub); cursor: pointer; }
.dv-kq-close:hover { color: var(--text); border-color: var(--text); }
.dv-kq-btn:focus-visible, .dv-kq-close:focus-visible, .dv-kq-tips summary:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dv-kq-meta { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 16px; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--surface); }
.dv-kq-chip { padding: 4px 10px; font-size: 12.5px; font-weight: 600; color: var(--accent); background: var(--ad); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); }
.dv-kq-tips { flex: 1; min-width: 220px; font-size: 13px; color: var(--sub); }
.dv-kq-tips summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; padding: 3px 0; color: var(--text); font-weight: 600; list-style: none; }
.dv-kq-tips summary::-webkit-details-marker { display: none; }
.dv-kq-tips summary .ms { font-size: 18px; color: var(--accent); }
.dv-kq-tips ul { margin: 8px 0 2px; padding-left: 18px; line-height: 1.6; }
.dv-kq-tips b { color: var(--text); }
.dv-kq-frame { position: relative; background: #fff; }
.dv-kq-frame iframe { display: block; width: 100%; height: min(780px, 78vh); border: 0; }
.dv-kq-loading { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 24px; text-align: center; color: var(--sub); font-size: 14px; background: var(--card); }
.dv-kq-loading[hidden] { display: none; }
.dv-kq-loading p { margin: 0; }
.dv-kq-bar { position: relative; width: min(320px, 70%); height: 3px; margin-bottom: 10px; overflow: hidden; background: var(--line2); }
.dv-kq-bar::after { content: ""; position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--accent), transparent); animation: dv-kq-chay 1.2s ease-in-out infinite; }
@keyframes dv-kq-chay { from { left: -40%; } to { left: 100%; } }
.dv-kq-slow { color: var(--warn); font-size: 13px; }
@media (prefers-reduced-motion: reduce) { .dv-kq-bar::after { animation: none; left: 30%; } }

/* 4 ô Đăng ký ngay */
.dv-services { padding: 12px 0 64px; }
.dv-services h2 { font-size: 22px; margin-bottom: 16px; }
.dv-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.dv-card { display: flex; flex-direction: column; gap: 14px; padding: 20px; background: var(--card); border: 1px solid var(--line); }
.dv-card:hover { border-color: var(--line2); }
.dv-card .ms { font-size: 30px; color: var(--accent); }
.dv-card h3 { font-size: 17px; line-height: 1.35; flex: 1; }
.dv-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border: 0; padding: 12px 18px; cursor: pointer; font-weight: 700; color: #05121a; background: linear-gradient(135deg, var(--accent-fill), var(--a2-fill)); }
.dv-btn:focus-visible, .dv-chip:focus-visible, .dv-search button:focus-visible, .dv-close:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dv-btn[disabled] { opacity: .6; cursor: default; }

/* T17 — Hồ sơ của tôi */
.dv-ho-so { padding: 32px 0 64px; min-height: 60vh; }
.dv-ho-so h1 { font-size: clamp(24px, 5vw, 32px); margin: 8px 0 18px; outline: none; }
.dv-back { color: var(--sub); text-decoration: none; font-size: 14px; }
.dv-back:hover { color: var(--accent); }
.dv-ho-so-empty { color: var(--sub); line-height: 1.7; max-width: 680px; }
.dv-ho-so-empty .dv-btn { margin-left: 6px; }
.dv-hs-card { background: var(--card); border: 1px solid var(--line); padding: 20px; margin-bottom: 18px; }
.dv-hs-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; margin-bottom: 18px; }
.dv-hs-head h2 { font-size: 19px; }
.dv-hs-sub { color: var(--sub); font-size: 13.5px; }
.dv-steps { list-style: none; margin: 0 0 20px; padding: 0; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.dv-step { position: relative; display: flex; flex-direction: column; gap: 8px; padding-top: 4px; color: var(--muted); font-size: 13px; }
.dv-step::before { content: ""; position: absolute; top: 18px; left: 34px; right: -8px; height: 2px; background: var(--line2); }
.dv-step:last-child::before { display: none; }
.dv-step.done::before { background: var(--accent); }
.dv-step-dot { position: relative; z-index: 1; width: 30px; height: 30px; display: grid; place-items: center; border: 2px solid var(--line2); background: var(--bg); font-weight: 700; font-size: 13px; }
.dv-step.done .dv-step-dot { border-color: var(--accent-fill); background: var(--accent-fill); color: #05121a; }
.dv-step.current .dv-step-dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--ad); }
.dv-step.done, .dv-step.current { color: var(--text); }
.dv-step-text { display: flex; flex-direction: column; gap: 3px; line-height: 1.35; }
.dv-step-text small { color: var(--sub); font-size: 12px; }
.dv-badge { align-self: flex-start; padding: 1px 8px; font-size: 12px; font-weight: 700; border: 1px solid currentColor; }
.dv-badge.ok { color: var(--ok); } .dv-badge.err { color: var(--err); } .dv-badge.warn { color: var(--warn); }
.dv-hs-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; border-top: 1px solid var(--line); padding-top: 16px; }
.dv-hs-grid h3 { font-size: 15px; margin-bottom: 8px; }
.dv-hs-list { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.dv-hs-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; padding: 7px 0; border-bottom: 1px solid var(--line); color: var(--sub); }
.dv-hs-list li span { color: var(--text); overflow-wrap: anywhere; }
.dv-hs-list time { color: var(--muted); }
.dv-hs-none { color: var(--muted); font-size: 13.5px; margin: 0; }

.dv-footer { border-top: 1px solid var(--line); padding: 20px 0; color: var(--muted); font-size: 13px; }
.dv-footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; }

/* Form đăng ký (hộp thoại) */
.dv-overlay { position: fixed; inset: 0; z-index: 100; display: none; align-items: flex-start; justify-content: center; padding: 24px 16px; overflow-y: auto; background: rgba(3,6,12,.72); }
.dv-overlay.open { display: flex; }
.dv-modal { position: relative; width: 100%; max-width: 560px; margin: auto 0; padding: 26px 24px; background: var(--card); border: 1px solid var(--line2); }
.dv-modal h2 { font-size: 21px; margin: 0 40px 4px 0; }
.dv-modal .dv-desc { color: var(--sub); font-size: 13.5px; margin: 0 0 18px; }
.dv-close { position: absolute; top: 14px; right: 14px; width: 36px; height: 36px; display: grid; place-items: center; border: 1px solid var(--line2); background: transparent; color: var(--sub); cursor: pointer; }
.dv-close .ms { font-size: 20px; }
.dv-field { margin-bottom: 14px; }
.dv-field > label, .dv-field legend { display: block; font-size: 13px; color: var(--sub); margin-bottom: 6px; padding: 0; }
.dv-field .req { color: var(--err); }
.dv-field input[type="text"], .dv-field input[type="email"], .dv-field input[type="tel"], .dv-field input[type="password"], .dv-field select, .dv-field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); outline: none;
}
.dv-field textarea { resize: vertical; min-height: 84px; }
.dv-field input:focus, .dv-field select:focus, .dv-field textarea:focus { border-color: var(--accent); }
.dv-field [aria-invalid="true"] { border-color: var(--err) !important; }
.dv-field .hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.dv-field .err { font-size: 12.5px; color: var(--err); margin-top: 5px; }
.dv-field .err:empty { display: none; }
.dv-mst-info { font-size: 12.5px; line-height: 1.55; margin-top: 6px; padding: 7px 10px; color: var(--sub); border-left: 2px solid var(--line2); background: var(--surface); }
.dv-mst-info.ok { border-left-color: var(--ok); color: var(--text); }
.dv-mst-info.warn { border-left-color: var(--warn); }
fieldset.dv-field { border: 0; margin: 0 0 14px; padding: 0; min-width: 0; }
.dv-radios { display: flex; gap: 8px; }
.dv-radios label { flex: 1; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 10px; border: 1px solid var(--line2); cursor: pointer; font-size: 14px; }
.dv-radios input { accent-color: var(--accent); margin: 0; }
.dv-radios label:has(input:checked) { border-color: var(--accent); color: var(--accent); background: var(--ad); }
.dv-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.dv-file { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.dv-file input[type="file"] { color: var(--sub); font-size: 13px; max-width: 100%; }
.dv-consent { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: var(--sub); cursor: pointer; }
.dv-consent input { margin-top: 3px; accent-color: var(--accent); flex: none; }
.tf-legal-link { color: var(--a2); text-decoration: underline; }
.dv-submit { width: 100%; padding: 14px; font-size: 15px; margin-top: 4px; }
.dv-form-msg { margin-top: 14px; padding: 12px 14px; font-size: 13.5px; line-height: 1.6; border-left: 3px solid var(--accent); background: var(--ad); color: var(--text); }
.dv-form-msg:empty { display: none; }
body.dv-lock { overflow: hidden; }
.dv-otp-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 12px; }
.dv-forgot { margin: -2px 0 14px; } .dv-forgot .dv-link { padding: 0; }
.dv-link { background: none; border: 0; padding: 4px 0; color: var(--accent); text-decoration: underline; cursor: pointer; font-size: 13.5px; }
.dv-link[disabled] { opacity: .5; cursor: default; }
.dv-link:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
#f-otp { font-size: 22px; letter-spacing: 8px; text-align: center; }
.dv-form-msg.warn { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 8%, transparent); }
.dv-tabs { display: flex; gap: 8px; margin-bottom: 16px; }
.dv-tabs[hidden] { display: none; } /* thẻ Đăng nhập / Tạo tài khoản ẩn ở bước nhập mã và quên mật khẩu */
.dv-tabs button { flex: 1; padding: 10px; border: 1px solid var(--line2); background: transparent; color: var(--sub); cursor: pointer; font-weight: 600; }
.dv-tabs button[aria-selected="true"] { border-color: var(--accent); color: var(--accent); background: var(--ad); }
.dv-tabs button:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
.dv-form-msg.err { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 8%, transparent); }

@media (max-width: 960px) { .dv-grid { grid-template-columns: repeat(2, 1fr); } }
/* Điện thoại hẹp (≤420 px, gồm iPhone 390/393): chỉ giữ ô logo để đủ chỗ cho "Hồ sơ của tôi" + "Đăng xuất". */
@media (max-width: 420px) { .dv-brand > span:last-child { display: none; } }
@media (max-width: 560px) {
  .dv-hero { padding: 36px 0 28px; }
  .dv-grid, .dv-row2 { grid-template-columns: 1fr; }
  .dv-search button { padding: 0 14px; }
  .dv-hotline-text { display: none; }
  .dv-kq-head, .dv-kq-meta { padding-left: 14px; padding-right: 14px; }
  .dv-kq-actions { width: 100%; display: grid; grid-template-columns: 1fr auto; }
  .dv-kq-btn { justify-content: center; }
  #dv-kq-cv { grid-column: 1 / -1; order: -1; }
  .dv-kq-frame iframe { height: 72vh; }
  .dv-header-right { gap: 12px; }
  .dv-acc-name, .dv-brand small { display: none; }
  .dv-account { gap: 12px; }
  .dv-steps { grid-template-columns: 1fr; gap: 0; }
  .dv-step { flex-direction: row; align-items: flex-start; gap: 12px; padding: 0 0 14px; }
  .dv-step::before { top: 30px; left: 14px; right: auto; bottom: 0; width: 2px; height: auto; }
  .dv-hs-grid { grid-template-columns: 1fr; }
  .dv-hs-card { padding: 16px; }
  .dv-overlay { padding: 0; }
  .dv-modal { min-height: 100%; margin: 0; padding: 22px 16px; border: 0; }
}

/* ui-polish: đồng bộ hiệu ứng với trang chính (card, nút, ô nhập, hộp thoại) */
.dv-card, .dv-btn, .dv-chip, .dv-search { transition: transform .22s ease, box-shadow .22s ease, border-color .2s ease, filter .2s ease; }
.dv-field input, .dv-field select, .dv-field textarea { transition: border-color .18s ease, box-shadow .18s ease; }
.dv-field input:focus, .dv-field select:focus, .dv-field textarea:focus, .dv-search:focus-within { box-shadow: 0 0 0 3px rgba(34,211,238,.15); }
.dv-btn:active, .dv-chip:active { transform: translateY(1px); }
.dv-overlay.open { backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
@keyframes dvPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
@media (hover: hover) and (pointer: fine) {
  .dv-btn:hover { filter: brightness(1.08); }
  .dv-card:hover { box-shadow: 0 12px 30px -10px rgba(34,211,238,.35); }
}
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .dv-card:hover { transform: translateY(-3px); }
}
@media (prefers-reduced-motion: no-preference) {
  .dv-overlay.open .dv-modal { animation: dvPop .26s cubic-bezier(.2,.7,.3,1); }
}

/* ===== ui-polish round 2 — đồng bộ phong cách "bản vẽ kỹ thuật" + chuyển động với trang chính (css/tf-ui.css round 5–6) ===== */
@property --m  { syntax: '<length>'; inherits: false; initial-value: 10px; }
@property --mx { syntax: '<length-percentage>'; inherits: true; initial-value: 70%; }
@property --my { syntax: '<length-percentage>'; inherits: true; initial-value: 30%; }

/* lưới giấy kẻ ly mờ toàn trang */
body {
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 56px 56px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 56px 56px,
    radial-gradient(900px 600px at 70% -8%, var(--glow) 0%, transparent 55%), var(--bg);
}

/* hero: lưới accent đậm hơn tan dần ra mép + vầng sáng đi theo con trỏ (dv-ui.js đặt --mx/--my) */
.dv-hero { position: relative; }
.dv-hero > .wrap { position: relative; z-index: 1; }
.dv-hero::before, .dv-hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0; }
.dv-hero::before { background: radial-gradient(340px circle at var(--mx) var(--my), color-mix(in srgb, var(--hs-acc) 16%, transparent), transparent 70%), radial-gradient(60% 50% at 70% 30%, rgba(34,211,238,.1), transparent 70%);
  /* mờ dần về mép dưới để vầng sáng không bị cắt ngang ở ranh giới hero */
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, #000 55%, transparent 100%); }
.dv-hero::after {
  background-image:
    linear-gradient(rgba(34,211,238,.14) 1px, transparent 1px),
    linear-gradient(90deg, rgba(34,211,238,.14) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(75% 80% at 50% 38%, #000 10%, transparent 78%);
  mask-image: radial-gradient(75% 80% at 50% 38%, #000 10%, transparent 78%);
}

/* dấu góc (crop-mark) ở 4 góc thẻ / hộp thoại */
.dv-card, .dv-hs-card { position: relative; }
.dv-card::before, .dv-hs-card::before, .dv-modal::before {
  content: ""; position: absolute; inset: -1px; pointer-events: none; z-index: 2; opacity: .75;
  --m: 10px; --c: var(--accent);
  background:
    linear-gradient(var(--c), var(--c)) 0 0 / var(--m) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / var(--m) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 0 / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / var(--m) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 0 100% / 1px var(--m) no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / var(--m) 1px no-repeat,
    linear-gradient(var(--c), var(--c)) 100% 100% / 1px var(--m) no-repeat,
    radial-gradient(260px circle at var(--cx, -999px) var(--cy, -999px), color-mix(in srgb, var(--c) 11%, transparent), transparent 70%); /* vầng sáng trong thẻ theo con trỏ (round 3) */
  transition: opacity .25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .dv-card:hover::before, .dv-hs-card:hover::before { opacity: 1; }
  .dv-hotline:hover { color: var(--accent); }
}

/* nút chính: ánh "quét sáng" khi rê chuột (giống nút của trang chính) */
.dv-btn, .dv-kq-btn:not(.sec), .dv-search button { position: relative; overflow: hidden; }
.dv-btn::after, .dv-kq-btn:not(.sec)::after, .dv-search button::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; transform: translateX(-120%);
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%);
}
.dv-chip, .dv-kq-btn, .dv-kq-close, .dv-close, .dv-tabs button, .dv-radios label { transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .12s ease; }
.dv-kq-btn:active, .dv-tabs button:active { transform: translateY(1px); }

/* thanh tiến trình cuộn + nút lên đầu trang (dv-ui.js) */
.dv-progress { position: fixed; top: 0; left: 0; right: 0; height: 3px; z-index: 250; background: linear-gradient(90deg, var(--accent-fill), var(--a2-fill)); transform: scaleX(0); transform-origin: 0 50%; pointer-events: none; }
.dv-totop {
  position: fixed; right: 28px; bottom: 28px; z-index: 79; width: 52px; height: 52px; border: 0; cursor: pointer;
  background: linear-gradient(135deg, var(--accent-fill), var(--a2-fill)); color: #05121a; font-size: 26px; font-weight: 800; line-height: 1;
  box-shadow: 0 14px 34px -10px rgba(34,211,238,.6);
  opacity: 0; transform: translateY(10px); pointer-events: none; transition: opacity .25s ease, transform .25s ease, filter .2s ease;
}
.dv-totop.dv-show { opacity: 1; transform: none; pointer-events: auto; }
.dv-totop:hover { filter: brightness(1.1); transform: translateY(-3px); }
.dv-totop:focus-visible { outline: 2px solid var(--text); outline-offset: 2px; }
@media (max-width: 560px) { .dv-totop { right: 16px; bottom: 16px; width: 46px; height: 46px; } }

/* trợ năng: skip link, tắt cuộn mượt khi giảm chuyển động */
.dv-skip { position: fixed; top: 8px; left: 8px; z-index: 2000; padding: 10px 16px; background: var(--accent-fill); color: #05121a; font-weight: 700; text-decoration: none; transform: translateY(-200%); }
.dv-skip:focus { transform: none; }
button, [role="button"], a, select { touch-action: manipulation; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .dv-progress { transition: none; } }

@media (prefers-reduced-motion: no-preference) {
  @keyframes dvHeroIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
  @keyframes dvGridIn { from { opacity: 0; } to { opacity: 1; } }
  @keyframes dvRise { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }
  @keyframes dvShine { to { transform: translateX(120%); } }
  @keyframes dvLine { from { transform: scaleX(0); } to { transform: none; } }
  /* các hiệu ứng có hover đi kèm dùng fill-mode "backwards" (không "both") để không khoá transform sau khi chạy xong */
  .dv-hero::after { animation: dvGridIn 1.6s ease both; }
  .dv-hero > .wrap > :nth-child(-n+5) { animation: dvHeroIn .75s cubic-bezier(.2,.7,.3,1) backwards; }
  .dv-hero > .wrap > :nth-child(2) { animation-delay: .08s; }
  .dv-hero > .wrap > :nth-child(3) { animation-delay: .16s; }
  .dv-hero > .wrap > :nth-child(4) { animation-delay: .24s; }
  .dv-hero > .wrap > :nth-child(5) { animation-delay: .32s; }
  .dv-search-msg:not([hidden]), .dv-kq:not([hidden]) { animation: dvRise .45s cubic-bezier(.2,.7,.3,1); }

  /* dấu góc nở ra khi rê vào thẻ */
  .dv-card::before, .dv-hs-card::before, .dv-modal::before { transition: opacity .25s ease, --m .3s cubic-bezier(.2,.7,.3,1); }
  .dv-card .ms { transition: transform .25s cubic-bezier(.2,.7,.3,1); }
  @media (hover: hover) and (pointer: fine) {
    .dv-card:hover::before, .dv-hs-card:hover::before { --m: 20px; }
    .dv-btn:hover::after, .dv-kq-btn:not(.sec):hover::after, .dv-search button:hover::after { animation: dvShine .7s ease; }
    .dv-card:hover .ms { transform: translateY(-2px) scale(1.08); }
  }

  /* hero: vầng sáng theo con trỏ, trễ nhẹ cho mượt */
  .dv-hero { transition: --mx .35s ease-out, --my .35s ease-out; }

  /* 4 thẻ dịch vụ hiện lên lần lượt khi cuộn tới (dv-ui.js gắn .dv-pre rồi .is-in) */
  .dv-card.dv-pre { opacity: 0; }
  .dv-card.is-in { animation: dvRise .6s cubic-bezier(.2,.7,.3,1) backwards; }
  .dv-card.is-in:nth-child(2) { animation-delay: .08s; }
  .dv-card.is-in:nth-child(3) { animation-delay: .16s; }
  .dv-card.is-in:nth-child(4) { animation-delay: .24s; }

  /* tiến trình hồ sơ: đường nối "chạy" khi bước đã xong */
  .dv-step.done::before { transform-origin: 0 50%; animation: dvLine .6s cubic-bezier(.2,.7,.3,1) .1s backwards; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 560px) {
  @keyframes dvLineY { from { transform: scaleY(0); } to { transform: none; } }
  .dv-step.done::before { transform-origin: 50% 0; animation-name: dvLineY; }
}

/* ===== ui-polish round 3 — chữ kỹ thuật (JetBrains Mono) + viền sáng thẻ theo con trỏ (đồng bộ css/tf-ui.css round 7) ===== */
:root { --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; }
body { font-variant-numeric: tabular-nums; }

/* nhãn nhỏ, số liệu, mã → chữ đơn cách; tiêu đề/nội dung vẫn Archivo + Be Vietnam Pro */
.dv-eyebrow { font-family: var(--mono); font-weight: 500; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--accent); margin-bottom: 16px; }
.dv-eyebrow::before { content: "// "; opacity: .55; white-space: pre; }
.dv-brand small, .dv-hotline-text, .dv-chip, .dv-kq-chip, .dv-kq-src, .dv-badge, .dv-step-text small, .dv-hs-sub, .dv-hs-list time, .dv-field .hint, .dv-footer { font-family: var(--mono); }
.dv-brand small { font-size: 11px; }
.dv-chip { font-size: 12.5px; }
.dv-kq-chip, .dv-badge { font-size: 12px; font-weight: 500; }
.dv-kq .dv-kq-src, .dv-step-text small, .dv-hs-sub, .dv-field .hint { font-size: 11.5px; }
.dv-footer { font-size: 12px; }

/* đánh số 01, 02… trên tiêu đề từng thẻ dịch vụ */
.dv-grid { counter-reset: dvc; }
.dv-card { counter-increment: dvc; }
.dv-card h3::before { content: counter(dvc, decimal-leading-zero); display: block; margin-bottom: 6px; font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .1em; color: var(--muted); }

/* viền sáng 1px đi theo con trỏ quanh thẻ (--cx/--cy do dv-ui.js đặt; ngoài thẻ thì nằm ngoài khung nên không thấy) */
.dv-card::after, .dv-hs-card::after {
  content: ""; position: absolute; inset: 0; padding: 1px; pointer-events: none; z-index: 2;
  background: radial-gradient(200px circle at var(--cx, -999px) var(--cy, -999px), var(--accent), transparent 70%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
}

/* Hồ sơ động — 7 trạng thái (bước "Bổ sung theo yêu cầu Cục" có thể không phát sinh), việc khách cần làm (nộp giấy tờ theo checklist, xác nhận bộ hồ sơ) */
.dv-steps.dv-steps-7 { grid-template-columns: repeat(7, 1fr); }
.dv-step.skip { color: var(--muted); }
.dv-step.skip .dv-step-dot { border-style: dashed; }
.dv-step.skip::before { background: var(--accent); opacity: .45; }
.dv-badge.mute { color: var(--sub); border-color: var(--line2); }
.dv-viec { border: 1px solid var(--accent); background: var(--ad); padding: 16px; margin: 0 0 20px; }
.dv-viec-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 8px; }
.dv-viec-head h3 { font-size: 16px; }
.dv-viec-han { font-family: var(--mono); font-size: 12px; color: var(--warn); }
.dv-viec-mo { color: var(--sub); font-size: 13.5px; line-height: 1.6; margin: 0 0 12px; }
.dv-viec-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 14px 0 6px; }
/* Báo giá dịch vụ: bảng số tiền */
.dv-bg { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 6px 18px; max-width: 460px; margin: 0 0 10px; padding: 12px 14px; border: 1px solid var(--line2); background: var(--card); font-size: 13.5px; }
.dv-bg dt { color: var(--sub); } .dv-bg dd { margin: 0; text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; }
.dv-bg .dv-bg-tong { color: var(--accent); font-weight: 700; font-size: 15px; white-space: nowrap; }
@media (max-width: 480px) { .dv-bg dt:first-child, .dv-bg dt:first-child + dd { grid-column: 1 / -1; } .dv-bg dt:first-child + dd { text-align: left; overflow-wrap: anywhere; margin-top: -4px; } } /* số báo giá dài: nằm riêng một hàng */
.dv-viec .dv-field textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line2); background: var(--surface); color: var(--text); outline: none; margin: 8px 0; }
.dv-tp { list-style: none; margin: 0 0 14px; padding: 0; }
.dv-tp-item { background: var(--card); border: 1px solid var(--line); padding: 12px 14px; margin-bottom: 8px; }
.dv-tp-item.can { border-color: var(--warn); }
.dv-tp-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
.dv-tp-top b { font-size: 14.5px; }
.dv-tp-hd { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 4px 0 0; }
.dv-tp-note { color: var(--warn); font-size: 13px; margin: 6px 0 0; }
.dv-tp-item .dv-field, .dv-tp-item .dv-tp-hoi { margin: 10px 0 0; }
.dv-tp-item .dv-consent { margin: 8px 0 0; }
.dv-tp-item .dv-btn-sm { margin-top: 2px; }
.dv-tp-item .dv-hs-list { margin-top: 8px; }
.dv-tp-file { position: relative; display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 8px 12px; border: 1px dashed var(--line2); color: var(--accent); font-size: 13.5px; cursor: pointer; }
.dv-tp-file:hover, .dv-tp-file:focus-within { border-color: var(--accent); }
.dv-tp-file input { position: absolute; width: 1px; height: 1px; opacity: 0; }
/* Theo dõi thời gian xử lý của Cục: đã chờ / còn lại / đếm ngược */
.dv-td { border: 1px solid var(--line); background: var(--card); padding: 14px 16px; margin: 0 0 20px; }
.dv-td-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; margin-bottom: 10px; }
.dv-td-head h3 { font-size: 15px; }
.dv-td-head span { font-family: var(--mono); font-size: 12px; color: var(--sub); }
.dv-td-so { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 0 0 12px; }
.dv-td-so div { border: 1px solid var(--line2); padding: 10px 12px; }
.dv-td-so small { display: block; color: var(--sub); font-size: 12px; margin-bottom: 4px; }
.dv-td-so b { font-family: var(--mono); font-size: 20px; font-variant-numeric: tabular-nums; }
.dv-td-so .dem b { color: var(--accent); }
.dv-td-so .tre b { color: var(--warn); }
.dv-td-bar { height: 6px; background: var(--line2); overflow: hidden; }
.dv-td-bar i { display: block; height: 100%; background: var(--accent); }
.dv-td-bar.tre i { background: var(--warn); }
.dv-td-note { color: var(--muted); font-size: 12.5px; line-height: 1.55; margin: 10px 0 0; }
.dv-td-note.warn { color: var(--warn); }
@media (max-width: 960px) { .dv-steps.dv-steps-7 { grid-template-columns: repeat(4, 1fr); row-gap: 14px; } .dv-steps-7 .dv-step:nth-child(4)::before { display: none; } }
@media (max-width: 560px) {
  .dv-steps.dv-steps-7 { grid-template-columns: 1fr; row-gap: 0; }
  .dv-steps-7 .dv-step:nth-child(4)::before { display: block; }
  .dv-steps-7 .dv-step:last-child::before { display: none; }
  .dv-viec { padding: 12px; }
  .dv-td-so { grid-template-columns: 1fr; }
}
/* Hỗ trợ gọi lại trên Hồ sơ của tôi (phản hồi 18/10) — khung trung tính, không phải việc khách phải làm. */
.dv-ho-tro { border-color: var(--line2); background: var(--surface); }
.dv-ho-tro .dv-field input, .dv-ho-tro .dv-field select { width: 100%; margin-bottom: 8px; }
.dv-ho-tro .dv-hs-list { margin-top: 10px; }
/* Hồ sơ của tôi dạng danh sách (phản hồi 22/10): ảnh thu nhỏ nhãn, tên, trạng thái; ô "+" nộp thêm hồ sơ */
.dv-hs-ds { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; margin: 0 0 20px; }
.dv-hs-o { display: flex; align-items: center; gap: 14px; padding: 12px; background: var(--card); border: 1px solid var(--line); color: var(--text); text-decoration: none; text-align: left; font: inherit; cursor: pointer; }
.dv-hs-o:hover, .dv-hs-o:focus-visible { border-color: var(--accent); }
.dv-hs-anh { flex: none; width: 72px; height: 72px; display: grid; place-items: center; overflow: hidden; background: #fff; color: #05121a; font-family: 'Archivo', sans-serif; font-weight: 800; font-size: 28px; border: 1px solid var(--line2); }
.dv-hs-anh img { width: 100%; height: 100%; object-fit: contain; }
.dv-hs-o-txt { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.dv-hs-o-txt b { font-size: 15px; overflow-wrap: anywhere; }
.dv-hs-them { border-style: dashed; background: transparent; }
.dv-hs-them .dv-hs-anh { background: var(--ad); color: var(--accent); border-color: var(--accent); font-size: 36px; font-weight: 400; }
#dv-ho-so-body > .dv-link { display: inline-block; margin: 0 0 12px; text-decoration: none; }
/* Quy trình v5: 9 trạng thái (thêm "Đã chuyển phát" và "Đã nhận hồ sơ bản cứng") */
.dv-steps.dv-steps-9 { grid-template-columns: repeat(9, 1fr); }
/* Quy trình v7: 11 mốc (thêm Báo giá, Hợp đồng) */
.dv-steps.dv-steps-11 { grid-template-columns: repeat(11, 1fr); }
@media (max-width: 960px) { .dv-steps.dv-steps-11 { grid-template-columns: repeat(6, 1fr); row-gap: 14px; } .dv-steps-11 .dv-step:nth-child(6)::before { display: none; } }
@media (max-width: 560px) { .dv-steps.dv-steps-11 { grid-template-columns: 1fr; row-gap: 0; } .dv-steps-11 .dv-step:nth-child(6)::before { display: block; } .dv-steps-11 .dv-step:last-child::before { display: none; } }
.dv-viec details { margin: 4px 0 14px; }
.dv-viec details ul { margin: 6px 0 0; padding-left: 18px; }
@media (max-width: 960px) { .dv-steps.dv-steps-9 { grid-template-columns: repeat(5, 1fr); row-gap: 14px; } .dv-steps-9 .dv-step:nth-child(5)::before { display: none; } }
@media (max-width: 560px) {
  .dv-steps.dv-steps-9 { grid-template-columns: 1fr; row-gap: 0; }
  .dv-steps-9 .dv-step:nth-child(5)::before { display: block; }
  .dv-steps-9 .dv-step:last-child::before { display: none; }
  .dv-hs-ds { grid-template-columns: 1fr; }
}

/* ==========================================================================
   Hồ sơ của tôi — bố cục 25/10 (taste-skill, màn làm việc, kiểu true-black-flat giữ màu thương hiệu):
   tầng nền tách bằng độ sáng (không viền, không bóng), màu nhấn chỉ ở dữ liệu (dải tiến độ), nút chính đảo màu trắng.
   Chuyển động: khối hiện lần lượt khi vẽ, dải tiến độ chạy tới mốc hiện tại, khối gập mở mượt; tắt khi giảm chuyển động.
   ========================================================================== */
.dv-ho-so {
  --hs-0: #060a14; --hs-1: #0d1628; --hs-2: #121e35; --hs-3: #1a2945; --hs-vach: #1d2b47;
  --hs-ink: #e9eff8; --hs-mut: #a9b8cf; --hs-faint: #8796b0; --hs-acc: #22d3ee; --hs-warn: #f5c56a; --hs-ok: #4be39a; --hs-err: #ff8592;
  --hs-btn: #fff; --hs-btn-ink: #0b1324; --hs-btn-hover: #dfe8f5; --hs-pill-ink: #c9d5e6; --hs-focus: #fff; --hs-in-line: #263555; --hs-mark-ring: transparent;
  --hs-r: 16px; --hs-r2: 12px; --hs-de: cubic-bezier(.2,.7,.3,1);
  padding: 28px 0 72px;
}
/* Sáng: nền trang tối nhất, thẻ sáng dần lên (cùng nguyên tắc tầng nền theo độ sáng); nút chính đảo thành nền đậm */
:root[data-theme="light"] .dv-ho-so {
  --hs-0: #ffffff; --hs-1: #f7f9fd; --hs-2: #ffffff; --hs-3: #e3e9f3; --hs-vach: #d9e1ef;
  --hs-ink: #10141f; --hs-mut: #4a566e; --hs-faint: #66738c; --hs-acc: #0891b2; --hs-warn: #9a5b00; --hs-ok: #15803d; --hs-err: #c42b3d;
  --hs-btn: #10141f; --hs-btn-ink: #ffffff; --hs-btn-hover: #2a3550; --hs-pill-ink: #3b4760; --hs-focus: #10141f; --hs-in-line: #c3cde0; --hs-mark-ring: rgba(16,20,31,.12);
}
.hs-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 16px; align-items: start; }
.hs-cot-phu .hs-gap, .hs-cot-phu .hs-ho-tro { margin: 0 0 8px; }
.hs-cot-phu .hs-tep { grid-template-columns: 1fr; }
.hs-cot-phu .hs-ls li { grid-template-columns: 1fr; gap: 2px; }
@media (max-width: 900px) { .hs-luoi { grid-template-columns: 1fr; gap: 0; } }
.dv-ho-so .dv-back { display: inline-flex; align-items: center; min-height: 32px; color: var(--hs-mut); font-size: 14px; transition: color .15s ease; }
.dv-ho-so .dv-back:hover { color: var(--hs-ink); }

/* Đầu màn: tên (h1), một dòng mô tả, một hành động */
.hs-dau { display: flex; align-items: center; gap: 16px; margin: 10px 0 22px; }
.hs-dau-txt { flex: 1; min-width: 0; }
.dv-ho-so h1 { font-size: clamp(22px, 3.2vw, 28px); line-height: 1.2; margin: 0; overflow-wrap: anywhere; outline: none; }
.hs-sub { margin: 6px 0 0; color: var(--hs-mut); font-size: 14px; }
.hs-sub[hidden] { display: none; }
.hs-dau-act { flex: none; }

/* Ảnh nhãn: mặt của hồ sơ */
.hs-mark { flex: none; width: 52px; height: 52px; display: grid; place-items: center; overflow: hidden; border-radius: var(--hs-r2); background: #fff; color: #0b1324; box-shadow: inset 0 0 0 1px var(--hs-mark-ring);
  font: 800 22px 'Archivo', 'Be Vietnam Pro', sans-serif; }
.hs-mark img { width: 100%; height: 100%; object-fit: contain; }
.hs-mark-lon { width: 64px; height: 64px; font-size: 26px; }
.hs-mark[hidden] { display: none; }

/* Nút: chính = trắng đảo màu, phụ = chữ */
.dv-ho-so .dv-btn { min-height: 40px; padding: 0 18px; border-radius: 999px; background: var(--hs-btn); color: var(--hs-btn-ink); font-weight: 600; font-size: 14.5px;
  transition: transform .12s ease, background-color .15s ease, opacity .15s ease; }
.dv-ho-so .dv-btn::after { display: none; }
.dv-ho-so .dv-btn:hover { background: var(--hs-btn-hover); filter: none; }
.dv-ho-so .dv-btn:active { transform: scale(.97); }
.dv-ho-so .dv-btn[disabled] { opacity: .45; }
.dv-ho-so .dv-btn-sm { min-height: 34px; padding: 0 14px; font-size: 13.5px; }
.dv-ho-so .dv-link { color: var(--hs-ink); font-size: 14px; text-decoration: underline; text-decoration-color: color-mix(in srgb, var(--hs-ink) 35%, transparent); text-underline-offset: 3px; transition: text-decoration-color .15s ease; }
.dv-ho-so .dv-link:hover { text-decoration-color: var(--hs-ink); }

/* Nhãn trạng thái */
.hs-pill { flex: none; display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 10px; border-radius: 999px; background: var(--hs-3); color: var(--hs-pill-ink);
  font-size: 12.5px; font-weight: 600; white-space: nowrap; }
.hs-pill.can { background: color-mix(in srgb, var(--hs-warn) 14%, transparent); color: var(--hs-warn); }
.hs-pill.can::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.hs-pill.ok { background: color-mix(in srgb, var(--hs-ok) 13%, transparent); color: var(--hs-ok); }
.hs-pill.err { background: color-mix(in srgb, var(--hs-err) 13%, transparent); color: var(--hs-err); }
.hs-pill.warn { background: color-mix(in srgb, var(--hs-warn) 14%, transparent); color: var(--hs-warn); }

/* Danh sách hồ sơ */
.hs-ds { display: grid; gap: 8px; margin: 0 0 16px; }
.hs-row { display: grid; grid-template-columns: 52px minmax(0, 1fr) auto 14px; align-items: center; gap: 16px; padding: 14px 16px; border-radius: var(--hs-r);
  background: var(--hs-1); color: var(--hs-ink); text-decoration: none; transition: background-color .18s ease; }
.hs-row:hover { background: var(--hs-2); }
.hs-row:focus-visible { outline: 2px solid var(--hs-focus); outline-offset: 2px; }
.hs-row-giua { min-width: 0; display: grid; gap: 3px; }
.hs-row-giua b { font-size: 16px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-meta { color: var(--hs-faint); font-size: 13px; }
.hs-mini { height: 3px; margin-top: 6px; border-radius: 2px; background: var(--hs-vach); overflow: hidden; max-width: 260px; }
.hs-mini i { display: block; height: 100%; background: var(--hs-acc); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); transition: transform .6s var(--hs-de); }
.hs-row-ben { display: grid; justify-items: end; gap: 4px; text-align: right; }
.hs-row-viec { font-size: 13.5px; color: var(--hs-ink); }
.hs-row-tt { font-size: 13.5px; color: var(--hs-mut); }
.hs-chev { color: var(--hs-faint); font-size: 22px; line-height: 1; transition: transform .18s var(--hs-de), color .18s ease; }
.hs-row:hover .hs-chev { transform: translateX(3px); color: var(--hs-ink); }

/* Dải tiến độ */
.hs-dai { padding: 18px 20px 14px; border-radius: var(--hs-r); background: var(--hs-1); margin: 0 0 12px; }
.hs-dai-dong { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.hs-dai-ten { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.hs-dai-ten b { font-size: 17px; font-weight: 600; }
.hs-dai-so { color: var(--hs-faint); font-size: 13px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.hs-vach { list-style: none; display: flex; gap: 4px; margin: 0; padding: 0; }
.hs-vach li { flex: 1; height: 6px; border-radius: 3px; background: var(--hs-vach); overflow: hidden; position: relative; }
.hs-vach li::after { content: ""; position: absolute; inset: 0; background: var(--hs-acc); transform-origin: 0 50%; transform: scaleX(0); }
.hs-vach li.qua::after { transform: scaleX(1); opacity: .55; }
.hs-vach li.nay::after { transform: scaleX(1); }
.hs-dai.dung .hs-vach li.nay::after { background: var(--hs-warn); }
.hs-dai-chi-tiet { margin-top: 10px; }
.hs-dai-chi-tiet summary { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; cursor: pointer; color: var(--hs-mut); font-size: 13.5px; list-style: none; }
.hs-dai-chi-tiet summary::-webkit-details-marker, .hs-gap summary::-webkit-details-marker { display: none; }
.hs-dai-chi-tiet summary::after { content: "›"; font-size: 18px; transition: transform .2s var(--hs-de); }
.hs-dai-chi-tiet[open] summary::after { transform: rotate(90deg); }
.hs-buoc { list-style: none; margin: 6px 0 0; padding: 0; display: grid; }
.hs-buoc li { display: flex; align-items: baseline; gap: 12px; padding: 7px 0 7px 22px; position: relative; color: var(--hs-faint); font-size: 14px; }
.hs-buoc li::before { content: ""; position: absolute; left: 4px; top: 13px; width: 8px; height: 8px; border-radius: 50%; background: var(--hs-vach); }
.hs-buoc li.qua { color: var(--hs-mut); } .hs-buoc li.qua::before { background: color-mix(in srgb, var(--hs-acc) 55%, transparent); }
.hs-buoc li.nay { color: var(--hs-ink); font-weight: 600; } .hs-buoc li.nay::before { background: var(--hs-acc); box-shadow: 0 0 0 4px color-mix(in srgb, var(--hs-acc) 16%, transparent); }
.hs-buoc li span { flex: 1; } .hs-buoc li small { color: var(--hs-faint); font-size: 12.5px; font-variant-numeric: tabular-nums; font-weight: 400; }

/* Việc của bạn: khối lớn nhất */
.hs-viec { padding: 22px 24px; border-radius: var(--hs-r); background: var(--hs-2); margin: 0 0 12px; }
.hs-viec-dau { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.hs-viec-dau h2 { font-size: 20px; font-weight: 600; line-height: 1.3; }
.hs-han { display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border-radius: 999px; background: var(--hs-3); color: var(--hs-mut); font-size: 13px; font-weight: 600; white-space: nowrap; }
.hs-han.gan { background: color-mix(in srgb, var(--hs-warn) 14%, transparent); color: var(--hs-warn); }
.hs-han.qua { background: color-mix(in srgb, var(--hs-err) 13%, transparent); color: var(--hs-err); }
.hs-nho { color: var(--hs-mut); font-size: 14px; margin: 0; }
.dv-ho-so .dv-viec-mo { color: var(--hs-mut); font-size: 14.5px; line-height: 1.6; margin: 0 0 14px; }
.dv-ho-so .dv-viec-nut { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 16px 0 4px; }
.dv-ho-so .dv-tp { display: grid; gap: 8px; margin: 0 0 14px; }
.dv-ho-so .dv-tp-item { border: 0; border-radius: var(--hs-r2); background: var(--hs-1); padding: 14px 16px; margin: 0; }
.dv-ho-so .dv-tp-item.can { background: color-mix(in srgb, var(--hs-warn) 8%, transparent); }
.dv-ho-so .dv-tp-top b { font-size: 15px; font-weight: 600; }
.dv-ho-so .dv-tp-hd { color: var(--hs-faint); font-size: 13px; }
.dv-ho-so .dv-tp-note { color: var(--hs-warn); }
.dv-ho-so .dv-badge { border: 0; border-radius: 999px; padding: 2px 9px; background: var(--hs-3); color: var(--hs-pill-ink); font: 600 12px 'Be Vietnam Pro', sans-serif; }
.dv-ho-so .dv-badge.ok { background: color-mix(in srgb, var(--hs-ok) 13%, transparent); color: var(--hs-ok); }
.dv-ho-so .dv-badge.warn { background: color-mix(in srgb, var(--hs-warn) 14%, transparent); color: var(--hs-warn); }
.dv-ho-so .dv-badge.err { background: color-mix(in srgb, var(--hs-err) 13%, transparent); color: var(--hs-err); }
.dv-ho-so .dv-badge.mute { background: var(--hs-3); color: var(--hs-mut); }
.dv-ho-so .dv-hs-list li { border-bottom: 1px solid color-mix(in srgb, var(--hs-ink) 8%, transparent); padding: 8px 0; color: var(--hs-mut); }
.dv-ho-so .dv-hs-list li:last-child { border-bottom: 0; }
.dv-ho-so .dv-tp-file { border-radius: 10px; min-height: 40px; padding: 0 14px; color: var(--hs-ink); border-color: color-mix(in srgb, var(--hs-ink) 22%, transparent); transition: border-color .15s ease, background-color .15s ease; }
.dv-ho-so .dv-tp-file:hover, .dv-ho-so .dv-tp-file:focus-within { border-color: var(--hs-ink); background: color-mix(in srgb, var(--hs-ink) 5%, transparent); }
.dv-ho-so .dv-bg { border: 0; border-radius: var(--hs-r2); background: var(--hs-1); padding: 14px 16px; max-width: 480px; }
.dv-ho-so .dv-bg dd { font-family: inherit; font-variant-numeric: tabular-nums; }
.dv-ho-so .dv-bg .dv-bg-tong { color: var(--hs-ink); font-size: 18px; font-weight: 700; }
.dv-ho-so .dv-radios label { border: 1px solid transparent; border-radius: 10px; background: var(--hs-1); min-height: 44px; transition: background-color .15s ease, color .15s ease; }
.dv-ho-so .dv-radios label:has(input:checked) { background: var(--hs-btn); color: var(--hs-btn-ink); border-color: var(--hs-btn); }
.dv-ho-so .dv-field input[type="text"], .dv-ho-so .dv-field input[type="tel"], .dv-ho-so .dv-field select, .dv-ho-so .dv-field textarea, .dv-ho-so .dv-viec .dv-field textarea, .dv-ho-so .hs-viec .dv-field textarea {
  border-radius: 10px; background: var(--hs-0); border: 1px solid var(--hs-in-line); }
.dv-ho-so .dv-form-msg { border-left: 0; border-radius: 10px; }
.dv-ho-so .dv-field .hint, .dv-ho-so .dv-viec-han, .dv-ho-so .dv-hs-sub, .dv-ho-so .dv-hs-list time { font-family: inherit; }

/* Bây giờ (khi khách không có việc) */
.hs-bay-gio { padding: 20px 24px; border-radius: var(--hs-r); background: var(--hs-2); margin: 0 0 12px; }
.hs-bay-gio > small { color: var(--hs-faint); font-size: 13px; }
.hs-bay-gio > p { margin: 4px 0 0; font-size: 17px; line-height: 1.5; color: var(--hs-ink); }
.hs-bay-gio .dv-td { margin: 14px 0 0; }

/* Khối thông tin (địa chỉ gửi, đã gửi bản cứng, thời gian xử lý Cục) */
.dv-ho-so .dv-td { border: 0; border-radius: var(--hs-r); background: var(--hs-1); padding: 16px 20px; }
.hs-viec .dv-td, .hs-bay-gio .dv-td { background: var(--hs-1); border-radius: var(--hs-r2); }
.dv-ho-so .dv-td h3 { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.dv-ho-so .dv-td-head span { font-family: inherit; color: var(--hs-faint); }
.dv-ho-so .dv-td-so div { border: 0; border-radius: 10px; background: var(--hs-2); }
.dv-ho-so .dv-td-so b { font-family: inherit; font-weight: 700; font-variant-numeric: tabular-nums; }
.dv-ho-so .dv-td-bar { border-radius: 3px; background: var(--hs-vach); }
.dv-ho-so .dv-td-bar i { border-radius: 3px; }

/* Khối gập: chuẩn bị giấy tờ trước, tài liệu, lịch sử, hỗ trợ */
.hs-gap { border-radius: var(--hs-r); background: var(--hs-1); margin: 0 0 8px; }
.hs-gap > summary { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 0 20px; cursor: pointer; list-style: none; border-radius: var(--hs-r); transition: background-color .15s ease; }
.hs-gap > summary:hover { background: var(--hs-2); }
.hs-gap > summary:focus-visible { outline: 2px solid var(--hs-focus); outline-offset: 2px; }
.hs-gap > summary span { font-size: 15.5px; font-weight: 600; }
.hs-gap > summary small { flex: 1; color: var(--hs-faint); font-size: 13px; }
.hs-gap > summary::after { content: "›"; color: var(--hs-faint); font-size: 20px; transition: transform .22s var(--hs-de); }
.hs-gap[open] > summary::after { transform: rotate(90deg); }
.hs-gap-noi { padding: 4px 20px 20px; }
.hs-gap-noi > .hs-viec { padding: 0; background: none; margin: 0; }
.hs-gap-noi > .hs-viec > .hs-viec-dau h2 { font-size: 16px; }

/* Tài liệu: lưới tệp, bấm để xem nhanh */
.hs-tep { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.hs-tep-o { width: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 0; border-radius: var(--hs-r2); background: var(--hs-2); color: var(--hs-ink);
  text-align: left; font: inherit; cursor: pointer; transition: background-color .15s ease, transform .12s ease; }
.hs-tep-o:hover { background: var(--hs-3); }
.hs-tep-o:active { transform: scale(.985); }
.hs-tep-o:focus-visible { outline: 2px solid var(--hs-focus); outline-offset: 2px; }
.hs-tep-loai { flex: none; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 10px; background: var(--hs-vach); color: var(--hs-mut); font-size: 11.5px; font-weight: 700; }
.hs-tep-txt { min-width: 0; display: grid; gap: 2px; }
.hs-tep-txt b { font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-tep-txt small { color: var(--hs-faint); font-size: 12.5px; }

/* Lịch sử */
.hs-ls { list-style: none; margin: 0; padding: 0; }
.hs-ls li { display: grid; grid-template-columns: 132px 1fr; gap: 12px; padding: 8px 0; font-size: 14px; border-bottom: 1px solid color-mix(in srgb, var(--hs-ink) 7%, transparent); }
.hs-ls li:last-child { border-bottom: 0; }
.hs-ls time { color: var(--hs-faint); font-variant-numeric: tabular-nums; }

/* Trống, đang tải */
.hs-trong { padding: 26px 24px; border-radius: var(--hs-r); background: var(--hs-1); margin: 0 0 12px; }
.hs-trong h2 { font-size: 18px; margin-bottom: 6px; }
.hs-trong p { color: var(--hs-mut); margin: 0 0 14px; line-height: 1.6; }
.hs-cho-tai { display: grid; gap: 8px; }
.hs-cho-dong { height: 80px; border-radius: var(--hs-r); background: var(--hs-1); }
.hs-ho-tro { margin-top: 16px; }
.hs-ho-tro .dv-field input, .hs-ho-tro .dv-field select, .hs-ho-tro .dv-field textarea { width: 100%; margin-bottom: 8px; }
/* Tự cập nhật (29/10): báo ngắn "vừa được cập nhật" / thanh "Có cập nhật mới" khi khách đang có chữ chưa gửi */
.hs-moi { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 12px; max-width: calc(100% - 32px); padding: 8px 8px 8px 16px; border-radius: 999px; background: var(--hs-btn); color: var(--hs-btn-ink); font-size: 14px; box-shadow: 0 12px 30px -12px rgba(0,0,0,.5); animation: hsVao .3s var(--hs-de) both; }
.hs-moi.ngan { padding: 10px 18px; }
.hs-moi .dv-btn { flex: none; background: var(--hs-acc); color: #05121a; }
@media (prefers-reduced-motion: reduce) { .hs-moi { animation: none; } }

/* Chuyển động */
@keyframes hsVao { from { opacity: 0; transform: translateY(10px); } }
@keyframes hsVach { from { transform: scaleX(0); } }
@keyframes hsMo { from { opacity: 0; transform: translateY(-4px); } }
@keyframes hsCho { 50% { opacity: .55; } }
.hs-vao { animation: hsVao .36s var(--hs-de) both; animation-delay: calc(var(--i, 0) * 55ms); }
.hs-vach li.qua::after, .hs-vach li.nay::after { animation: hsVach .5s var(--hs-de) both; animation-delay: calc(120ms + var(--i, 0) * 45ms); }
.hs-gap[open] > .hs-gap-noi, .hs-dai-chi-tiet[open] > .hs-buoc { animation: hsMo .24s var(--hs-de); }
.hs-pill.can::before { animation: hsCho 1.6s ease-in-out 3; }
.hs-cho-dong { animation: hsCho 1.4s ease-in-out infinite; }
@media (prefers-reduced-motion: reduce) {
  .hs-vao, .hs-vach li::after, .hs-gap[open] > .hs-gap-noi, .hs-dai-chi-tiet[open] > .hs-buoc, .hs-pill.can::before, .hs-cho-dong { animation: none !important; }
  .hs-row, .hs-chev, .hs-mini i, .dv-ho-so .dv-btn, .hs-tep-o { transition: none; }
}

/* Điện thoại */
@media (max-width: 640px) {
  .dv-ho-so { padding: 18px 0 56px; }
  .hs-dau { flex-wrap: wrap; gap: 12px; margin-bottom: 18px; }
  .hs-dau-act { width: 100%; }
  .hs-dau-act .dv-btn { width: 100%; }
  .hs-dau-act .hs-pill { margin-left: 0; }
  .hs-row { grid-template-columns: 44px minmax(0, 1fr) 12px; gap: 12px; padding: 12px; }
  .hs-row .hs-mark { width: 44px; height: 44px; font-size: 19px; }
  .hs-row-ben { grid-column: 2 / 3; grid-row: 2; justify-items: start; text-align: left; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
  .hs-chev { grid-column: 3; grid-row: 1 / span 2; }
  .hs-viec { padding: 18px 16px; }
  .hs-viec-dau h2 { font-size: 18px; }
  .hs-dai { padding: 16px; }
  .hs-gap > summary { padding: 0 16px; }
  .hs-gap-noi { padding: 4px 16px 16px; }
  .hs-ls li { grid-template-columns: 1fr; gap: 2px; }
  .hs-tep { grid-template-columns: 1fr; }
  .dv-ho-so .dv-viec-nut .dv-btn { flex: 1 1 100%; }
}