/* ==========================================================================
   VietSure Insurance — Customer Portal
   Mở rộng design system từ site marketing (assets/css/style.css).
   Không định nghĩa lại biến/​class đã có — chỉ bổ sung layer portal.
   ========================================================================== */
@import url('../../../assets/css/style.css');

/* ==========================================================================
   REBRAND 2026 — TOKEN MỚI (navy + gold)
   Override toàn bộ token cũ kế thừa từ style.css của site marketing.
   Giữ nguyên TÊN biến cũ (--green nay mang giá trị GOLD) + bổ sung biến mới.
   ========================================================================== */
:root {
  --navy: #0D1D36;
  --navy-dark: #081221;
  --navy-light: #1C2E4E;
  --navy-600: #26385A;
  --navy-500: #3B4D72;
  --navy-100: var(--navy-100);          /* chữ phụ trên nền navy tối */
  --green: #C6AC69;             /* GOLD — tên biến giữ nguyên vì tham chiếu khắp code */
  --green-dark: #8A7235;        /* gold đậm — hover nút, viền */
  --green-light: #E3D3A6;       /* gold nhạt — nền badge/icon-circle */
  --sand: #F7F2E6;              /* nền phụ ấm */
  --text: #0D1D36;
  --text-muted: #5A6577;
  --border: #E4E8EF;
  --border-strong: #D8DEE8;
  --warn: #C0392B;              /* ĐỎ — hết hạn/từ chối/khẩn cấp (cam cũ chuyển vai cho --amber) */
  --warn-dark: #A93226;
  --warn-light: #FBECEA;
  --info: #2C5AA0;              /* link, chữ nhấn nhỏ trên nền trắng, đang-xử-lý */
  --info-dark: #1F3F70;
  --info-light: var(--info-light);
  --ok: #17723F;                /* thành công / hiệu lực */
  --ok-light: #EAF6EF;
  --amber: #E0952B;             /* sắp hết hạn / đang chờ */
  --amber-light: #FDF1E2;
  --gradient-navy: linear-gradient(135deg, var(--navy-dark) 0%, var(--navy) 45%, var(--navy-light) 75%, var(--navy-600) 100%);
  --shadow-sm: 0 2px 8px rgba(13,29,54,0.08);
  --shadow-md: 0 10px 30px rgba(13,29,54,0.12);
  --shadow-lg: 0 20px 50px rgba(13,29,54,0.18);
}

/* Biến thể trạng thái — 4 màu ngữ nghĩa, tách hoàn toàn khỏi gold (override marketing) */
.status-pill.success { background: var(--ok-light); color: var(--ok); }
.status-pill.pending { background: var(--amber-light); color: var(--amber); }
.status-pill.processing { background: var(--info-light); color: var(--info-dark); }
.status-pill.danger { background: var(--warn-light); color: var(--warn); }

/* ==========================================================================
   1. PORTAL SHELL (WEB) — topbar + sidebar cố định
   ========================================================================== */
.portal-body { background: var(--bg-soft); min-height: 100vh; }

.p-topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 600; height: 64px;
  background: var(--white); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 18px; padding: 0 22px;
}
.p-topbar .p-logo img { height: 36px; }
.p-burger { display: none; background: none; border: none; color: var(--navy); padding: 10px; min-width: 44px; min-height: 44px; }

.p-search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 10px;
  background: var(--bg-soft); border: 1.5px solid var(--border); border-radius: 999px; padding: 9px 16px;
  color: var(--text-muted);
}
.p-search input { border: none; background: none; outline: none; flex: 1; font-size: .9rem; color: var(--text); }
.p-search svg { flex-shrink: 0; }

.p-topbar-actions { margin-left: auto; display: flex; align-items: center; gap: 10px; position: relative; }
.p-iconbtn {
  position: relative; width: 44px; height: 44px; border-radius: 50%; border: none;
  background: var(--bg-soft); color: var(--navy); display: inline-flex; align-items: center; justify-content: center;
  transition: background .2s ease;
}
.p-iconbtn:hover { background: var(--green-light); color: var(--green-dark); }
.p-badge {
  position: absolute; top: 2px; right: 0; min-width: 18px; height: 18px; padding: 0 5px;
  background: var(--warn); color: var(--white); border-radius: 999px;
  font-size: .66rem; font-weight: 800; display: flex; align-items: center; justify-content: center;
  border: 2px solid var(--white);
}
.p-user { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); }
.p-user:hover { background: var(--bg-soft); }
.p-avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--navy); color: var(--white);
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: .85rem; flex-shrink: 0;
}
.p-user-meta { line-height: 1.25; }
.p-user-meta strong { display: block; color: var(--navy); font-size: .86rem; }
.p-user-meta small { color: var(--text-muted); font-size: .72rem; }

/* Notification dropdown panel */
.p-notif-panel {
  position: absolute; top: 54px; right: 0; width: 360px; max-width: calc(100vw - 32px);
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg); overflow: hidden; display: none; z-index: 700;
}
.p-notif-panel.is-open { display: block; }
.p-notif-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.p-notif-head strong { color: var(--navy); font-size: .95rem; }
.p-notif-head a { color: var(--green-dark); font-weight: 700; font-size: .8rem; }
.p-notif-foot { display: block; text-align: center; padding: 12px; font-weight: 700; color: var(--navy); font-size: .85rem; border-top: 1px solid var(--border); }
.p-notif-foot:hover { background: var(--bg-soft); }

/* Shell layout */
.p-shell { padding-top: 64px; display: block; }
.p-side {
  position: fixed; top: 64px; left: 0; bottom: 0; width: 248px; z-index: 500;
  background: var(--white); border-right: 1px solid var(--border);
  padding: 18px 14px; overflow-y: auto; display: flex; flex-direction: column;
}
.p-nav a {
  display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: var(--radius-sm);
  font-weight: 600; color: var(--navy); font-size: .9rem; margin-bottom: 3px; min-height: 44px;
}
.p-nav a svg { flex-shrink: 0; }
.p-nav a:hover { background: var(--bg-soft); }
.p-nav a.active { background: var(--navy); color: var(--white); }
.p-nav a .p-nav-count {
  margin-left: auto; background: var(--warn); color: var(--white); font-size: .68rem; font-weight: 800;
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center;
}
.p-nav a.active .p-nav-count { background: var(--green); color: var(--navy-dark); }
.p-side-foot { margin-top: auto; padding-top: 16px; }
.p-hotline-card {
  background: var(--green-light); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 12px;
  font-size: .8rem; color: var(--text);
}
.p-hotline-card strong { display: block; color: var(--navy); font-size: 1.02rem; }
.p-logout { color: var(--warn) !important; }
.p-logout:hover { background: var(--warn-light) !important; }

.p-main { margin-left: 248px; padding: 28px 30px 60px; max-width: 1250px; }
.p-page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; flex-wrap: wrap; margin-bottom: 22px; }
.p-page-head h1 { font-size: 1.55rem; }
.p-page-head p { color: var(--text-muted); font-size: .92rem; margin-top: 4px; }

/* Off-canvas sidebar for tablet */
.p-overlay { position: fixed; inset: 0; background: rgba(8,18,33,.45); z-index: 490; display: none; }
.p-overlay.is-open { display: block; }
@media (max-width: 980px) {
  .p-burger { display: inline-flex; align-items: center; justify-content: center; }
  .p-side { transform: translateX(-105%); transition: transform .25s ease; box-shadow: var(--shadow-lg); }
  .p-side.is-open { transform: translateX(0); }
  .p-main { margin-left: 0; padding: 20px 16px 60px; }
  .p-search { display: none; }
  .p-user-meta { display: none; }
}

/* ==========================================================================
   2. DASHBOARD COMPONENTS
   ========================================================================== */
.p-alert {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  background: var(--white); border: 1px solid var(--border); border-left: 5px solid var(--green);
  border-radius: var(--radius-md); padding: 16px 20px; margin-bottom: 14px; box-shadow: var(--shadow-sm);
}
.p-alert .p-alert-icon {
  width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green-light); color: var(--green-dark);
}
.p-alert-body { flex: 1; min-width: 220px; }
.p-alert-body strong { color: var(--navy); display: block; font-size: .95rem; }
.p-alert-body span { color: var(--text-muted); font-size: .85rem; }
.p-alert.warn { border-left-color: var(--warn); }
.p-alert.warn .p-alert-icon { background: var(--warn-light); color: var(--warn); }
.p-alert.pending { border-left-color: var(--amber); }
.p-alert.pending .p-alert-icon { background: var(--amber-light); color: var(--amber); }

.p-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 20px 0; }
.p-stat {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 18px 20px; display: flex; align-items: center; gap: 14px; box-shadow: var(--shadow-sm); min-width: 0;
}
.p-stat .icon-circle { width: 46px; height: 46px; background: var(--green-light); color: var(--green-dark); }
.p-stat.warn .icon-circle { background: var(--warn-light); color: var(--warn); }
.p-stat.pending .icon-circle { background: var(--amber-light); color: var(--amber); }
.p-stat.info .icon-circle { background: var(--info-light); color: var(--info); }
.p-stat-num { font-size: 1.35rem; font-weight: 800; color: var(--navy); line-height: 1.2; }
.p-stat-label { font-size: .78rem; color: var(--text-muted); font-weight: 600; }
@media (max-width: 980px) { .p-stats { grid-template-columns: repeat(2, 1fr); } }

.p-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 20px 0; }
.p-quick a {
  background: var(--navy); color: var(--white); border-radius: var(--radius-md); padding: 18px 20px;
  display: flex; align-items: center; gap: 14px; font-weight: 700; font-size: .95rem;
  transition: all .2s ease; box-shadow: var(--shadow-sm); min-height: 44px;
}
.p-quick a svg { flex-shrink: 0; }
.p-quick a:hover { background: var(--navy-dark); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.p-quick a.green { background: var(--green); color: var(--navy-dark); }
.p-quick a.green:hover { background: var(--green-dark); color: var(--white); }
@media (max-width: 700px) { .p-quick { grid-template-columns: 1fr; } }

.p-grid-2 { display: grid; grid-template-columns: 1.35fr 1fr; gap: 20px; align-items: start; }
@media (max-width: 980px) { .p-grid-2 { grid-template-columns: 1fr; } }

.dash-card h3 { font-size: 1.05rem; }
.dash-card .dash-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.dash-card .dash-card-head a { color: var(--green-dark); font-weight: 700; font-size: .82rem; white-space: nowrap; }

/* Policy summary row (dashboard) */
.p-policy-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border);
}
.p-policy-row:last-child { border-bottom: none; }
.p-policy-row .icon-circle { width: 42px; height: 42px; background: var(--green-light); color: var(--green-dark); flex-shrink: 0; }
.p-policy-row .p-policy-info { flex: 1; min-width: 0; }
.p-policy-row .p-policy-info strong { display: block; color: var(--navy); font-size: .9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.p-policy-row .p-policy-info span { font-size: .78rem; color: var(--text-muted); }

/* ==========================================================================
   3. STEPPER / TIMELINE (bồi thường)
   ========================================================================== */
.stepper { display: flex; margin: 26px 0; }
.stepper .st { flex: 1; text-align: center; position: relative; min-width: 0; }
.stepper .st::before {
  content: ''; position: absolute; top: 17px; left: -50%; width: 100%; height: 3px; background: var(--border);
}
.stepper .st:first-child::before { display: none; }
.stepper .st.done::before, .stepper .st.current::before { background: var(--green); }
.stepper .st-dot {
  position: relative; z-index: 2; width: 36px; height: 36px; border-radius: 50%; margin: 0 auto 8px;
  background: var(--white); border: 3px solid var(--border); color: var(--text-muted);
  display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: .8rem;
}
.stepper .st.done .st-dot { background: var(--green); border-color: var(--green); color: var(--navy-dark); }
.stepper .st.current .st-dot { border-color: var(--green); color: var(--green-dark); box-shadow: 0 0 0 5px rgba(198,172,105,.25); }
.stepper .st.rejected .st-dot { background: var(--warn); border-color: var(--warn); color: var(--white); }
.stepper .st.rejected::before { background: var(--warn); }
.stepper .st-label { font-size: .78rem; font-weight: 700; color: var(--text-muted); padding: 0 4px; }
.stepper .st.done .st-label, .stepper .st.current .st-label { color: var(--navy); }
.stepper .st.rejected .st-label { color: var(--warn); }
.stepper .st-date { display: block; font-size: .68rem; color: var(--text-muted); font-weight: 500; }
@media (max-width: 700px) {
  .stepper { flex-direction: column; gap: 0; }
  .stepper .st { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding-bottom: 20px; }
  .stepper .st::before { top: -20px; left: 17px; width: 3px; height: 20px; }
  .stepper .st-dot { margin: 0; flex-shrink: 0; }
  .stepper .st-label { padding: 7px 0 0; font-size: .85rem; }
}

/* Vertical timeline — ghi chú giám định viên / lịch sử */
.vtl { position: relative; padding-left: 26px; }
.vtl::before { content: ''; position: absolute; left: 8px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.vtl-item { position: relative; padding-bottom: 20px; }
.vtl-item:last-child { padding-bottom: 0; }
.vtl-item::before {
  content: ''; position: absolute; left: -24px; top: 5px; width: 12px; height: 12px; border-radius: 50%;
  background: var(--green); box-shadow: 0 0 0 4px var(--green-light);
}
.vtl-item.muted::before { background: var(--border-strong); box-shadow: 0 0 0 4px var(--bg-soft); }
.vtl-item time { font-size: .74rem; color: var(--text-muted); font-weight: 600; }
.vtl-item p { font-size: .88rem; margin-top: 2px; }
.vtl-item p strong { color: var(--navy); }

/* Mini stepper (dashboard) */
.mini-steps { display: flex; align-items: center; gap: 4px; margin-top: 10px; }
.mini-steps i { flex: 1; height: 5px; border-radius: 999px; background: var(--border); }
.mini-steps i.on { background: var(--green); }

/* ==========================================================================
   4. WIZARD (yêu cầu bồi thường mới)
   ========================================================================== */
.wiz-steps { display: flex; gap: 6px; margin-bottom: 26px; counter-reset: wiz; }
.wiz-steps .ws {
  flex: 1; display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 999px;
  background: var(--white); border: 1.5px solid var(--border); font-size: .8rem; font-weight: 700; color: var(--text-muted); min-width: 0;
}
.wiz-steps .ws::before {
  counter-increment: wiz; content: counter(wiz);
  width: 26px; height: 26px; border-radius: 50%; flex-shrink: 0;
  background: var(--bg-soft); color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; font-size: .74rem;
}
.wiz-steps .ws span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wiz-steps .ws.active { border-color: var(--navy); background: var(--navy); color: var(--white); }
.wiz-steps .ws.active::before { background: var(--green); color: var(--navy-dark); }
.wiz-steps .ws.done { border-color: var(--green); color: var(--green-dark); }
.wiz-steps .ws.done::before { background: var(--green); color: var(--navy-dark); content: '✓'; }
@media (max-width: 700px) {
  .wiz-steps .ws span { display: none; }
  .wiz-steps .ws.active span { display: inline; }
  .wiz-steps .ws { flex: 0 0 auto; }
  .wiz-steps .ws.active { flex: 1; }
}
.wiz-pane { display: none; }
.wiz-pane.active { display: block; }
.wiz-nav { display: flex; justify-content: space-between; gap: 12px; margin-top: 24px; flex-wrap: wrap; }

/* Radio-card chọn hợp đồng / phương thức thanh toán */
.pick-card {
  display: flex; align-items: center; gap: 14px; padding: 16px 18px; border: 2px solid var(--border);
  border-radius: var(--radius-md); background: var(--white); cursor: pointer; margin-bottom: 12px; transition: all .15s ease;
}
.pick-card:hover { border-color: var(--green); }
.pick-card input { accent-color: var(--green-dark); width: 20px; height: 20px; flex-shrink: 0; }
.pick-card .icon-circle { width: 42px; height: 42px; background: var(--green-light); color: var(--green-dark); flex-shrink: 0; }
.pick-card .pick-info { flex: 1 1 0; min-width: 0; }
.pick-card .badge-soft, .pick-card .status-pill, .pick-card .ncb-badge { flex-shrink: 0; }
.pick-card .pick-info strong { display: block; color: var(--navy); font-size: .92rem; }
.pick-card .pick-info span { font-size: .78rem; color: var(--text-muted); }
.pick-card.selected, .pick-card:has(input:checked) { border-color: var(--green); background: var(--green-light); }
.pick-card.disabled { opacity: .55; cursor: not-allowed; }
.pick-card.disabled:hover { border-color: var(--border); }

/* Upload */
.upload-zone {
  border: 2px dashed var(--border); border-radius: var(--radius-md); background: var(--bg-soft);
  padding: 34px 20px; text-align: center; color: var(--text-muted); cursor: pointer; transition: all .2s ease;
}
.upload-zone:hover, .upload-zone.dragover { border-color: var(--green); background: var(--green-light); color: var(--green-dark); }
.upload-zone strong { display: block; color: var(--navy); margin-top: 10px; font-size: .95rem; }
.upload-zone span { font-size: .8rem; }
.upload-actions { display: flex; gap: 12px; margin: 14px 0; flex-wrap: wrap; }
.upload-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin-top: 16px; }
.upload-thumb {
  position: relative; aspect-ratio: 1/1; border-radius: var(--radius-sm); overflow: hidden;
  border: 1px solid var(--border); background: var(--bg-soft);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; color: var(--navy);
}
.upload-thumb img { width: 100%; height: 100%; object-fit: cover; }
.upload-thumb .ut-name { font-size: .62rem; color: var(--text-muted); padding: 0 6px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.upload-thumb .ut-x {
  position: absolute; top: 5px; right: 5px; width: 24px; height: 24px; border-radius: 50%;
  background: rgba(8,18,33,.75); color: var(--white); border: none; font-size: .8rem; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}

/* Review block (bước 4) */
.review-row { display: flex; justify-content: space-between; gap: 16px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.review-row:last-child { border-bottom: none; }
.review-row .rk { color: var(--text-muted); flex-shrink: 0; }
.review-row .rv { font-weight: 700; color: var(--navy); text-align: right; }

/* ==========================================================================
   5. FORM / TOGGLE / OTP / MODAL
   ========================================================================== */
.field { margin-bottom: 16px; }
.field .field-hint { font-size: .76rem; color: var(--text-muted); margin-top: 5px; }
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--green); border-color: var(--green); }
.field textarea { width: 100%; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft); min-height: 110px; resize: vertical; }

.switch { position: relative; display: inline-block; width: 48px; height: 28px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch .sl {
  position: absolute; inset: 0; border-radius: 999px; background: var(--border-strong); transition: .2s; cursor: pointer;
}
.switch .sl::before {
  content: ''; position: absolute; width: 22px; height: 22px; border-radius: 50%; background: var(--white);
  left: 3px; top: 3px; transition: .2s; box-shadow: var(--shadow-sm);
}
.switch input:checked + .sl { background: var(--green); }
.switch input:checked + .sl::before { transform: translateX(20px); }
.switch-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.switch-row:last-child { border-bottom: none; }
.switch-row .sw-info strong { display: block; color: var(--navy); font-size: .92rem; }
.switch-row .sw-info span { font-size: .8rem; color: var(--text-muted); }

.otp-row { display: flex; gap: 10px; justify-content: center; margin: 20px 0; }
.otp-row input {
  width: 48px; height: 56px; text-align: center; font-size: 1.4rem; font-weight: 800; color: var(--navy);
  border: 1.5px solid var(--border); border-radius: var(--radius-sm); background: var(--bg-soft);
}
.otp-row input:focus { outline: 2px solid var(--green); border-color: var(--green); }
@media (max-width: 560px) { .otp-row input { width: 42px; height: 50px; } }
.otp-resend { text-align: center; font-size: .85rem; color: var(--text-muted); }
.otp-resend button { background: none; border: none; color: var(--green-dark); font-weight: 700; font-size: .85rem; }
.otp-resend button:disabled { color: var(--text-muted); cursor: default; }

/* Modal (confirm / OTP hành động nhạy cảm) */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(8,18,33,.5); z-index: 900;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.modal-backdrop.is-open { display: flex; }
.modal {
  background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg);
  width: 100%; max-width: 440px; padding: 30px; text-align: center;
}
.modal .modal-icon {
  width: 60px; height: 60px; border-radius: 50%; margin: 0 auto 16px;
  display: flex; align-items: center; justify-content: center;
  background: var(--warn-light); color: var(--warn);
}
.modal .modal-icon.ok { background: var(--green-light); color: var(--green-dark); }
.modal h3 { margin-bottom: 8px; }
.modal p { color: var(--text-muted); font-size: .9rem; }
.modal .btn-row { justify-content: center; margin-top: 22px; }

/* ==========================================================================
   6. AUTH PAGES
   ========================================================================== */
.auth-body {
  min-height: 100vh; background: var(--gradient-navy);
  display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 16px;
}
.auth-logo { margin-bottom: 24px; }
.auth-logo img { height: 44px; filter: brightness(0) invert(1); }
.auth-card { width: 100%; max-width: 440px; background: var(--white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 34px; }
.auth-card h1 { font-size: 1.4rem; text-align: center; margin-bottom: 6px; }
.auth-sub { text-align: center; color: var(--text-muted); font-size: .88rem; margin-bottom: 22px; }
.auth-tabs { display: flex; gap: 8px; margin-bottom: 22px; background: var(--bg-soft); padding: 5px; border-radius: 999px; }
.auth-tabs button {
  flex: 1; padding: 10px 8px; border-radius: 999px; border: none; background: none;
  font-weight: 700; font-size: .84rem; color: var(--text-muted); min-height: 44px;
}
.auth-tabs button.active { background: var(--navy); color: var(--white); }
.auth-alt { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-muted); font-size: .78rem; }
.auth-alt::before, .auth-alt::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.auth-bio {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px;
  border: 1.5px solid var(--border); background: var(--white); border-radius: 999px; padding: 13px;
  font-weight: 700; color: var(--navy); font-size: .9rem; min-height: 48px;
}
.auth-bio:hover { border-color: var(--green); color: var(--green-dark); }
.auth-foot { text-align: center; margin-top: 18px; font-size: .85rem; color: var(--text-muted); }
.auth-foot a { color: var(--green-dark); font-weight: 700; }
.auth-copy { color: rgba(255,255,255,.55); font-size: .76rem; margin-top: 26px; text-align: center; }
.auth-step { display: none; }
.auth-step.active { display: block; }

/* ==========================================================================
   7. TABLES / LISTS / STATES
   ========================================================================== */
.p-table { width: 100%; border-collapse: collapse; }
.p-table th { text-align: left; font-size: .74rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); padding: 10px 14px; border-bottom: 2px solid var(--border); white-space: nowrap; }
.p-table td { padding: 14px; border-bottom: 1px solid var(--border); font-size: .9rem; vertical-align: middle; }
.p-table tr:last-child td { border-bottom: none; }
.p-table tbody tr { transition: background .15s ease; }
.p-table tbody tr:hover { background: var(--bg-soft); }
.p-table .cell-strong { font-weight: 700; color: var(--navy); }
.p-table .cell-sub { display: block; font-size: .76rem; color: var(--text-muted); font-weight: 500; }
.masked { font-variant-numeric: tabular-nums; letter-spacing: .04em; }

.chip-rows { display: flex; flex-direction: column; gap: 10px; margin-bottom: 22px; }
.chip-rows .filter-bar { justify-content: flex-start; margin-bottom: 0; }
.chip-rows .filter-label { font-size: .76rem; font-weight: 700; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }

/* Empty state */
.empty-box { text-align: center; padding: 54px 24px; }
.empty-box .icon-circle { width: 76px; height: 76px; background: var(--bg-soft); color: var(--text-muted); margin: 0 auto 18px; }
.empty-box h3 { font-size: 1.1rem; margin-bottom: 6px; }
.empty-box p { color: var(--text-muted); font-size: .9rem; max-width: 380px; margin: 0 auto 20px; }

/* Error state */
.error-box { text-align: center; padding: 54px 24px; }
.error-box .icon-circle { width: 76px; height: 76px; background: var(--warn-light); color: var(--warn); margin: 0 auto 18px; }
.error-box h3 { font-size: 1.1rem; margin-bottom: 6px; }
.error-box p { color: var(--text-muted); font-size: .9rem; max-width: 400px; margin: 0 auto 20px; }

/* Skeleton loading */
@keyframes skel-shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.skel {
  border-radius: 6px; background: linear-gradient(90deg, #edf0f5 25%, #f7f9fc 50%, #edf0f5 75%);
  background-size: 800px 100%; animation: skel-shimmer 1.3s infinite linear;
}
.skel-line { height: 14px; margin-bottom: 10px; }
.skel-line.w40 { width: 40%; } .skel-line.w60 { width: 60%; } .skel-line.w80 { width: 80%; }
.skel-pill { height: 26px; width: 90px; border-radius: 999px; }
.skel-circle { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0; }
.skel-row { display: flex; align-items: center; gap: 14px; padding: 13px 0; border-bottom: 1px solid var(--border); }
.skel-row:last-child { border-bottom: none; }
.skel-row > div:nth-child(2) { flex: 1; }

/* Demo state switcher (chỉ phục vụ demo) */
.demo-states {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  background: var(--navy-dark); color: var(--white); border-radius: 999px;
  padding: 7px 14px; margin-bottom: 18px; font-size: .74rem; width: fit-content; max-width: 100%;
}
.demo-states button {
  background: rgba(255,255,255,.12); border: none; color: var(--white); border-radius: 999px;
  padding: 5px 12px; font-size: .72rem; font-weight: 700;
}
.demo-states button.active { background: var(--green); color: var(--navy-dark); }
[data-state-pane] { display: none; }
[data-state-pane].active { display: block; }

/* ==========================================================================
   8. PAYMENTS
   ========================================================================== */
.pay-due-card {
  background: linear-gradient(120deg, var(--navy), var(--navy-light)); color: var(--white);
  border-radius: var(--radius-lg); padding: 26px 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 22px;
}
.pay-due-card .pd-amount { font-size: 1.9rem; font-weight: 800; }
.pay-due-card .pd-info { flex: 1; min-width: 220px; }
.pay-due-card .pd-info span { color: var(--navy-100); font-size: .85rem; display: block; }
.qr-box {
  width: 190px; height: 190px; margin: 0 auto; background: var(--white); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 14px; box-shadow: var(--shadow-sm);
}
.qr-box svg { width: 100%; height: 100%; }

/* ==========================================================================
   9. NOTIFICATIONS / SUPPORT / PROFILE
   ========================================================================== */
.notif-item { display: flex; gap: 14px; padding: 15px 18px; border-bottom: 1px solid var(--border); position: relative; background: var(--white); }
.notif-item:hover { background: var(--bg-soft); }
.notif-item:last-child { border-bottom: none; }
.notif-item .icon-circle { width: 40px; height: 40px; background: var(--green-light); color: var(--green-dark); flex-shrink: 0; }
.notif-item.warn .icon-circle { background: var(--warn-light); color: var(--warn); }
.notif-item.info .icon-circle { background: var(--info-light); color: var(--info); }
.notif-item .nt-body { flex: 1; min-width: 0; }
.notif-item .nt-body strong { display: block; color: var(--navy); font-size: .88rem; }
.notif-item .nt-body p { font-size: .8rem; color: var(--text-muted); margin: 2px 0 4px; }
.notif-item .nt-body time { font-size: .7rem; color: var(--text-muted); font-weight: 600; }
.notif-item.unread { background: var(--sand); }
.notif-item.unread::after {
  content: ''; position: absolute; top: 20px; right: 16px; width: 9px; height: 9px; border-radius: 50%; background: var(--green);
}

.agent-card { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.agent-card .p-avatar { width: 54px; height: 54px; font-size: 1.05rem; background: var(--green); color: var(--navy-dark); }
.agent-card .ag-info { flex: 1; min-width: 180px; }
.agent-card .ag-info strong { display: block; color: var(--navy); }
.agent-card .ag-info span { font-size: .8rem; color: var(--text-muted); }

.info-list { display: grid; grid-template-columns: 1fr 1fr; gap: 4px 26px; }
.info-list .info-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px dashed var(--border); font-size: .9rem; }
.info-list .info-row .ik { color: var(--text-muted); flex-shrink: 0; }
.info-list .info-row .iv { font-weight: 700; color: var(--navy); text-align: right; min-width: 0; overflow-wrap: anywhere; }
@media (max-width: 700px) { .info-list { grid-template-columns: 1fr; } }

.device-row { display: flex; align-items: center; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--border); }
.device-row:last-child { border-bottom: none; }
.device-row .icon-circle { width: 42px; height: 42px; background: var(--bg-soft); color: var(--navy); flex-shrink: 0; }
.device-row .dv-info { flex: 1; min-width: 0; }
.device-row .dv-info strong { display: block; color: var(--navy); font-size: .9rem; }
.device-row .dv-info span { font-size: .78rem; color: var(--text-muted); }

/* ==========================================================================
   10. MOBILE APP SHELL (bộ mobile/ — khung điện thoại, bottom tab bar)
   ========================================================================== */
.m-body { background: #dfe4ec; min-height: 100vh; }
.m-app {
  max-width: 430px; margin: 0 auto; min-height: 100vh; background: var(--bg-soft);
  position: relative; display: flex; flex-direction: column;
  box-shadow: 0 0 40px rgba(8,18,33,.25);
}
@media (max-width: 480px) { .m-body { background: var(--bg-soft); } .m-app { box-shadow: none; } }

.m-topbar {
  position: sticky; top: 0; z-index: 300; background: var(--white); border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 12px; padding: 12px 16px; min-height: 58px;
}
.m-topbar .m-title { font-weight: 800; color: var(--navy); font-size: 1.05rem; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.m-topbar img { height: 30px; }
.m-back { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin-left: -10px; border: none; background: none; color: var(--navy); }
.m-topbar .p-iconbtn { width: 44px; height: 44px; }

.m-main { flex: 1; padding: 16px 16px 96px; }
.m-main h2 { font-size: 1.15rem; }

/* Bottom tab bar */
.m-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%);
  width: 100%; max-width: 430px; z-index: 400;
  background: var(--white); border-top: 1px solid var(--border);
  display: flex; padding: 6px 4px calc(8px + env(safe-area-inset-bottom));
  box-shadow: 0 -4px 18px rgba(13,29,54,.08);
}
.m-tabbar a {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 6px 2px; color: var(--text-muted); font-size: .72rem; font-weight: 700;
  border-radius: var(--radius-sm); min-height: 52px; justify-content: center; position: relative;
}
.m-tabbar a.active { color: var(--green-dark); }
.m-tabbar a.active svg { stroke: var(--green-dark); }
.m-tabbar a .m-tab-badge {
  position: absolute; top: 3px; left: calc(50% + 6px); min-width: 16px; height: 16px; padding: 0 4px;
  background: var(--warn); color: var(--white); font-size: .6rem; font-weight: 800; border-radius: 999px;
  display: flex; align-items: center; justify-content: center;
}

/* Greeting hero (mobile dashboard) */
.m-hero {
  background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: var(--white);
  margin: -16px -16px 16px; padding: 20px 16px 24px;
}
.m-hero .m-hero-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.m-hero .m-hero-top .p-avatar { background: var(--green); color: var(--navy-dark); }
.m-hero .m-hero-top strong { display: block; font-size: 1rem; }
.m-hero .m-hero-top small { color: var(--navy-100); font-size: .78rem; }
.m-hero .p-iconbtn { margin-left: auto; background: rgba(255,255,255,.12); color: var(--white); }

/* Mobile card list (thay bảng) */
.m-card {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 16px; margin-bottom: 12px; box-shadow: var(--shadow-sm); display: block;
}
.m-card .m-card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.m-card .m-card-top .icon-circle { width: 42px; height: 42px; background: var(--green-light); color: var(--green-dark); flex-shrink: 0; }
.m-card .m-card-top .mc-t { flex: 1; min-width: 0; }
.m-card .m-card-top .mc-t strong { display: block; color: var(--navy); font-size: .95rem; }
.m-card .m-card-top .mc-t span { font-size: .78rem; color: var(--text-muted); }
.m-card .m-card-rows { border-top: 1px dashed var(--border); padding-top: 10px; }
.m-card .m-row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; font-size: .85rem; }
.m-card .m-row .mk { color: var(--text-muted); }
.m-card .m-row .mv { font-weight: 700; color: var(--navy); text-align: right; }
.m-card .m-card-cta { display: flex; gap: 10px; margin-top: 12px; }
.m-card .m-card-cta .btn { flex: 1; }

/* Quick actions mobile */
.m-quick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin-bottom: 18px; }
.m-quick a {
  background: var(--white); border: 1px solid var(--border); border-radius: var(--radius-md);
  padding: 14px 8px; text-align: center; font-size: .76rem; font-weight: 700; color: var(--navy);
  display: flex; flex-direction: column; align-items: center; gap: 8px; box-shadow: var(--shadow-sm); min-height: 44px;
}
.m-quick a .icon-circle { width: 42px; height: 42px; background: var(--green-light); color: var(--green-dark); }
.m-quick a.hot .icon-circle { background: var(--navy); color: var(--white); }

/* FAB */
.m-fab {
  position: sticky; bottom: 96px; margin-left: auto; margin-right: 0; z-index: 350;
  display: flex; align-items: center; gap: 8px; width: fit-content;
  background: var(--green); color: var(--navy-dark); font-weight: 800; font-size: .85rem;
  border: none; border-radius: 999px; padding: 14px 20px; box-shadow: var(--shadow-md);
}

/* Camera-first upload (mobile) */
.m-camera-cta {
  width: 100%; display: flex; flex-direction: column; align-items: center; gap: 10px;
  background: var(--navy); color: var(--white); border: none; border-radius: var(--radius-md);
  padding: 26px 16px; font-weight: 800; font-size: 1rem; margin-bottom: 12px;
}
.m-camera-cta .icon-circle { width: 56px; height: 56px; background: rgba(198,172,105,.25); color: var(--green); }
.m-camera-cta small { font-weight: 500; font-size: .78rem; color: var(--navy-100); }

/* Emergency (mobile) — nằm trên tab bar */
.m-emergency { position: fixed; right: max(16px, calc(50% - 199px)); bottom: 96px; z-index: 380; }

/* Section label */
.m-sec { display: flex; align-items: center; justify-content: space-between; margin: 20px 0 10px; }
.m-sec h2 { font-size: 1.02rem; }
.m-sec a { color: var(--green-dark); font-weight: 700; font-size: .8rem; }

/* Mobile: cỡ chữ tối thiểu & vùng chạm */
.m-app { font-size: 15px; }
.m-app .btn { min-height: 48px; }
.m-app .field input, .m-app .field select, .m-app .field textarea { font-size: 16px; padding: 13px 14px; }
.m-app .filter-bar { flex-wrap: nowrap; overflow-x: auto; justify-content: flex-start; padding-bottom: 6px; scrollbar-width: none; }
.m-app .filter-bar::-webkit-scrollbar { display: none; }
.m-app .filter-chip { flex-shrink: 0; min-height: 44px; }

/* In đậm giá trị tiền */
.money { font-weight: 800; color: var(--navy); font-variant-numeric: tabular-nums; }
.money.warn { color: var(--warn); }
.money.ok { color: var(--green-dark); }

/* ==========================================================================
   14. RESPONSIVE HOÀN CHỈNH CHO BẢN WEB
   Bản web/ là bản chính, tự thích ứng mọi kích thước — bộ mobile/ chỉ tham khảo.
   Breakpoints kế thừa site marketing: 980 · 768 · 700 · 620 · 560 · 420.
   ========================================================================== */

/* Modal không tràn màn hình thấp */
.modal { max-height: calc(100vh - 40px); overflow-y: auto; }

/* --- Chống tràn ngang toàn cục (lưới an toàn) --- */
body.portal-body, body.m-body { overflow-x: hidden; }
.p-main, .p-grid-2 > *, .dash-card, .p-policy-info, .p-alert-body { min-width: 0; }
.review-row .rv, .info-list .info-row .iv, .p-table td { overflow-wrap: anywhere; }

/* Nút nhiều chữ phải xuống dòng được (gốc marketing đặt nowrap) */
.btn-block, .dash-card .btn, .m-card .btn, .modal .btn, .wiz-nav .btn, .p-alert .btn,
.pay-due-card .btn, .empty-box .btn, .error-box .btn, .onboard-card .btn { white-space: normal; }

/* Inline style trên trang (tỷ lệ cột desktop) phải nhường media query */
@media (max-width: 980px) {
  .p-grid-2 { grid-template-columns: 1fr !important; }
}
@media (max-width: 700px) {
  .p-quick { grid-template-columns: 1fr !important; }
}

/* Bottom tab bar cho BẢN WEB trên màn hẹp (JS tự gắn) */
.portal-body .m-tabbar { display: none; }
@media (max-width: 768px) {
  .portal-body .m-tabbar { display: flex; max-width: none; left: 0; transform: none; width: 100%; }
  .portal-body .p-main { padding-bottom: 115px; }
  .portal-body .emergency-btn { bottom: 152px; }
  .portal-body .chat-widget { bottom: 86px; }
  .portal-body .chat-panel { bottom: 152px; right: 12px; width: calc(100% - 24px); }

  .p-page-head { flex-direction: column; align-items: stretch; }
  .p-page-head > .btn { width: 100%; }
  .p-page-head .btn-row { width: 100%; }
  .p-page-head .btn-row .btn { flex: 1; min-width: 0; }
  .p-grid-2 > div > .dash-card:last-child { margin-bottom: 0; }
}

@media (max-width: 620px) {
  .p-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
  .p-stat { padding: 12px 14px; gap: 10px; }
  .p-stat .icon-circle { width: 38px; height: 38px; }
  .p-stat-num { font-size: 1.02rem; }
  .p-stat-label { font-size: .72rem; }

  .p-alert { align-items: flex-start; }
  .p-alert > .btn { width: 100%; }
  .pay-due-card > .btn { width: 100%; }
  .pay-due-card .pd-amount { font-size: 1.5rem; }

  /* Hàng filter: nhãn xuống dòng, chip cuộn ngang */
  .chip-rows > div { flex-direction: column; align-items: flex-start !important; gap: 6px !important; }
  .chip-rows .filter-bar, .filter-scope > .filter-bar {
    width: 100%; overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start;
    padding-bottom: 6px; scrollbar-width: none;
  }
  .chip-rows .filter-bar::-webkit-scrollbar, .filter-scope > .filter-bar::-webkit-scrollbar { display: none; }
  .chip-rows .filter-chip, .filter-scope > .filter-bar .filter-chip { flex-shrink: 0; min-height: 44px; }

  .dash-card { padding: 16px; }
  .dash-card .dash-card-head { flex-wrap: wrap; }

  .net-row { flex-direction: column; align-items: stretch; }
  .net-row .net-cta { flex-direction: row; }
  .net-row .net-cta .btn { flex: 1; }

  .doc-item { flex-wrap: wrap; }
  .doc-item a.btn, .doc-item .btn { margin-left: 0; }

  .wiz-nav { flex-wrap: nowrap; }
  .wiz-nav .btn { flex: 1; min-width: 0; white-space: normal; }

  .p-policy-row { flex-wrap: wrap; }
  .p-policy-row .vs-ring { order: 5; }

  .agent-card .btn-row { width: 100%; }
  .quote-total { flex-direction: column; align-items: flex-start; }
  .review-row .rv { max-width: 58%; }
  .tier-card { padding: 18px; }
  .voucher { flex-wrap: wrap; }
  .upload-grid { grid-template-columns: repeat(3, 1fr); }
  .p-quick a { padding: 15px 16px; font-size: .9rem; }
  .demo-states { font-size: .68rem; }
  .switch-row { flex-wrap: nowrap; gap: 12px; }
  .switch-row .sw-info { flex: 1; min-width: 0; }
  .p-notif-panel { position: fixed; top: 64px; left: 12px; right: 12px; width: auto; }

  /* Pick-card: badge/pill xuống dòng riêng, cột chữ được thở */
  .pick-card { flex-wrap: wrap; }
  .pick-card .pick-info { flex-basis: calc(100% - 176px); }
  .pick-card .badge-soft, .pick-card .status-pill, .pick-card .ncb-badge { margin-left: 90px; }

  /* Số tiền trong thẻ thống kê không gãy dòng */
  .p-stat-num { white-space: nowrap; font-size: .95rem; }
}

@media (max-width: 420px) {
  .p-topbar { gap: 8px; padding: 0 10px; }
  .p-topbar .p-logo img { height: 28px; }
  .p-iconbtn { width: 40px; height: 40px; }
  .p-main { padding-left: 12px; padding-right: 12px; }
  .otp-row { gap: 7px; }
  .otp-row input { width: 40px; height: 48px; font-size: 1.2rem; }
  .auth-card { padding: 24px 18px; }
  .wallet-card { padding: 16px; }
  .wallet-qr { width: 92px; height: 92px; }
  .p-stats { grid-template-columns: 1fr 1fr; }
  .modal { padding: 22px 16px; }
  .stepper .st-label { font-size: .82rem; }
  .emg-hero { padding: 20px 16px; }
  .qr-box { width: 160px; height: 160px; }
}

/* ==========================================================================
   11. MOBILE OVERRIDES — ép layout 1 cột bên trong khung .m-app
   (media query không áp dụng khi khung 430px hiển thị trên desktop)
   ========================================================================== */
.m-app .p-grid-2, .m-app .form-grid, .m-app .info-list, .m-app .doc-list { grid-template-columns: 1fr; }
.m-app .p-stats { grid-template-columns: 1fr 1fr; gap: 10px; margin: 14px 0; }
.m-app .p-stat { padding: 14px; gap: 10px; }
.m-app .p-stat-num { font-size: 1.05rem; }
.m-app .dash-card { padding: 18px; }
.m-app .stepper { flex-direction: column; }
.m-app .stepper .st { display: flex; align-items: flex-start; gap: 14px; text-align: left; padding-bottom: 20px; }
.m-app .stepper .st::before { top: -20px; left: 17px; width: 3px; height: 20px; }
.m-app .stepper .st-dot { margin: 0; flex-shrink: 0; }
.m-app .stepper .st-label { padding: 7px 0 0; font-size: .9rem; }
.m-app .wiz-steps .ws span { display: none; }
.m-app .wiz-steps .ws { flex: 0 0 auto; }
.m-app .wiz-steps .ws.active { flex: 1; }
.m-app .wiz-steps .ws.active span { display: inline; }
.m-app .p-alert { padding: 14px 16px; }
.m-app .p-alert .btn { width: 100%; }
.m-app .pay-due-card { padding: 20px; }
.m-app .pay-due-card .btn { width: 100%; }
.m-app .auth-card { box-shadow: none; padding: 26px 20px; max-width: none; }
.m-app .review-row .rv { max-width: 60%; }
.m-app .p-page-head h1 { font-size: 1.25rem; }
.m-app .demo-states { font-size: .7rem; padding: 6px 12px; }
.m-app .otp-row input { width: 44px; height: 52px; }
.m-app .qr-box { width: 170px; height: 170px; }
.m-app .modal { padding: 24px 20px; }
.m-app .upload-grid { grid-template-columns: repeat(3, 1fr); }
/* Auth toàn màn hình trong khung mobile */
.m-auth { background: var(--gradient-navy); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 30px 16px; flex: 1; }
.m-auth .auth-card { border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); }

/* ==========================================================================
   12. CHẾ ĐỘ KHÁCH HÀNG MỚI (đăng ký tài khoản, chưa có hợp đồng)
   body.is-new-user do main-portal.js gắn khi ?user=new / localStorage
   ========================================================================== */
[data-new-only] { display: none; }
.is-new-user [data-new-only] { display: block; }
.is-new-user [data-existing-only] { display: none !important; }
.is-new-user .p-badge, .is-new-user .p-nav-count, .is-new-user .m-tab-badge { display: none !important; }
/* Thẻ onboarding chào mừng */
.onboard-card { text-align: center; padding: 30px 22px; }
.onboard-card .icon-circle { width: 68px; height: 68px; background: var(--green-light); color: var(--green-dark); margin: 0 auto 14px; }
.onboard-card h3 { font-size: 1.12rem; margin-bottom: 6px; }
.onboard-card p { color: var(--text-muted); font-size: .9rem; max-width: 420px; margin: 0 auto 18px; }
.onboard-steps { text-align: left; max-width: 420px; margin: 0 auto 18px; }
.onboard-steps .ob-step { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.onboard-steps .ob-step:last-child { border-bottom: none; }
.onboard-steps .ob-num {
  width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white);
  font-weight: 800; font-size: .8rem; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px;
}
.onboard-steps .ob-step strong { display: block; color: var(--navy); font-size: .9rem; }
.onboard-steps .ob-step span { font-size: .8rem; color: var(--text-muted); }

/* ==========================================================================
   13. TIỆN ÍCH NÂNG CAO
   ========================================================================== */
/* --- Vòng đếm ngược ngày hết hạn (JS render vào .vs-ring[data-days]) --- */
.vs-ring { position: relative; width: 46px; height: 46px; flex-shrink: 0; }
.vs-ring svg { display: block; transform: rotate(-90deg); }
.vs-ring .ring-txt {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-size: .66rem; font-weight: 800; color: var(--navy); line-height: 1; text-align: center;
}
.vs-ring .ring-txt small { font-size: .48rem; font-weight: 600; color: var(--text-muted); margin-top: 1px; }
.vs-ring.lg { width: 84px; height: 84px; }
.vs-ring.lg .ring-txt { font-size: 1.15rem; }
.vs-ring.lg .ring-txt small { font-size: .62rem; }

/* --- Cỡ chữ lớn (người dùng lớn tuổi) --- */
html.font-lg { font-size: 18.5px; }
html.font-lg body { font-size: 17.5px; }

/* --- Cảnh báo thời tiết (biến thể info của p-alert) --- */
.p-alert.info { border-left-color: var(--info); }
.p-alert.info .p-alert-icon { background: var(--info-light); color: var(--info); }

/* --- Khẩn cấp 1 chạm --- */
.emg-hero {
  background: linear-gradient(135deg, var(--warn), var(--warn-dark)); color: var(--white);
  border-radius: var(--radius-lg); padding: 26px 24px; margin-bottom: 18px; box-shadow: var(--shadow-md);
}
.emg-hero h2 { color: var(--white); font-size: 1.3rem; margin-bottom: 4px; }
.emg-hero p { color: var(--warn-light); font-size: .9rem; }
.emg-call {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: var(--white); color: var(--warn); font-weight: 800; font-size: 1.1rem;
  border-radius: 999px; padding: 16px 22px; margin-top: 16px; min-height: 56px; box-shadow: var(--shadow-md);
}
.emg-call:hover { transform: translateY(-2px); }
.emg-item {
  display: flex; gap: 14px; align-items: flex-start; background: var(--white);
  border: 1px solid var(--border); border-radius: var(--radius-md); padding: 14px 16px; margin-bottom: 10px;
}
.emg-item input[type="checkbox"] { width: 24px; height: 24px; accent-color: var(--green-dark); flex-shrink: 0; margin-top: 2px; }
.emg-item strong { display: block; color: var(--navy); font-size: .95rem; }
.emg-item span { font-size: .82rem; color: var(--text-muted); }
.emg-item.done { background: var(--green-light); border-color: var(--green); }
.emg-loc {
  background: var(--navy); color: var(--white); border-radius: var(--radius-md); padding: 16px 18px; margin: 14px 0;
}
.emg-loc .loc-out { font-size: .85rem; color: var(--navy-100); margin-top: 8px; min-height: 20px; }

/* --- Thẻ chứng nhận điện tử (ví) --- */
.wallet-card {
  position: relative; overflow: hidden; max-width: 430px;
  background: var(--gradient-navy); color: var(--white);
  border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow-lg);
}
.wallet-card::after {
  content: ''; position: absolute; top: -60px; right: -60px; width: 190px; height: 190px;
  border-radius: 50%; background: rgba(122,193,66,.16);
}
.wallet-card .wc-brand { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.wallet-card .wc-brand img { height: 26px; filter: brightness(0) invert(1); }
.wallet-card .wc-type { font-size: .7rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--green); }
.wallet-card .wc-obj { font-size: 1.15rem; font-weight: 800; }
.wallet-card .wc-sub { font-size: .8rem; color: var(--navy-100); margin-bottom: 14px; }
.wallet-card .wc-grid { display: flex; justify-content: space-between; gap: 14px; align-items: flex-end; position: relative; z-index: 2; }
.wallet-card .wc-kv { font-size: .68rem; color: var(--navy-100); text-transform: uppercase; letter-spacing: .05em; }
.wallet-card .wc-kv strong { display: block; font-size: .92rem; color: var(--white); letter-spacing: 0; text-transform: none; margin-top: 2px; }
.wallet-qr { background: var(--white); border-radius: 12px; padding: 8px; width: 108px; height: 108px; flex-shrink: 0; }
.wallet-qr svg { width: 100%; height: 100%; display: block; }
.wallet-btns { display: flex; gap: 10px; margin-top: 16px; flex-wrap: wrap; }
.wallet-btns .btn-wallet {
  flex: 1; min-width: 150px; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--navy-dark); color: var(--white); border: 1.5px solid var(--navy-500); border-radius: 12px;
  padding: 11px 14px; font-weight: 700; font-size: .85rem; min-height: 46px;
}
.wallet-btns .btn-wallet:hover { border-color: var(--green); color: var(--green); }

/* --- Tối ưu bảo vệ (gap analysis) --- */
.gap-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px dashed var(--border); }
.gap-row:last-child { border-bottom: none; }
.gap-row .gr-name { flex: 1; font-size: .9rem; font-weight: 600; color: var(--navy); }
.gap-row .gr-ok { color: var(--green-dark); font-weight: 700; font-size: .8rem; }
.gap-row .gr-miss { color: var(--warn); font-weight: 700; font-size: .8rem; }

/* --- Mạng lưới bảo lãnh (bệnh viện/gara) --- */
.net-badge { display: inline-block; background: var(--green-light); color: var(--green-dark); font-size: .7rem; font-weight: 800; padding: 3px 10px; border-radius: 999px; }
.net-badge.direct { background: var(--info-light); color: var(--info); }
.net-row { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-bottom: 1px solid var(--border); }
.net-row:last-child { border-bottom: none; }
.net-row .icon-circle { width: 44px; height: 44px; background: var(--green-light); color: var(--green-dark); flex-shrink: 0; }
.net-row .net-info { flex: 1; min-width: 0; }
.net-row .net-info strong { display: block; color: var(--navy); font-size: .95rem; }
.net-row .net-info span { font-size: .8rem; color: var(--text-muted); display: block; margin: 2px 0 6px; }
.net-row .net-cta { display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; }

/* --- Chat với tổng đài / chatbot --- */
.chat-panel {
  position: fixed; right: 22px; bottom: 90px; z-index: 800; width: 360px; max-width: calc(100vw - 32px);
  height: 480px; max-height: calc(100vh - 140px); background: var(--white); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); border: 1px solid var(--border); display: none; flex-direction: column; overflow: hidden;
}
.chat-panel.is-open { display: flex; }
.chat-head { background: var(--navy); color: var(--white); padding: 14px 18px; display: flex; align-items: center; gap: 12px; }
.chat-head .p-avatar { background: var(--green); color: var(--navy-dark); width: 34px; height: 34px; font-size: .75rem; }
.chat-head strong { font-size: .92rem; display: block; }
.chat-head small { color: var(--navy-100); font-size: .72rem; }
.chat-head .chat-x { margin-left: auto; background: none; border: none; color: var(--white); font-size: 1.1rem; min-width: 34px; min-height: 34px; }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; background: var(--bg-soft); display: flex; flex-direction: column; gap: 10px; }
.chat-msg { max-width: 82%; padding: 10px 14px; border-radius: 16px; font-size: .85rem; line-height: 1.5; }
.chat-msg.bot { background: var(--white); border: 1px solid var(--border); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; }
.chat-msg.user { background: var(--navy); color: var(--white); border-bottom-right-radius: 4px; align-self: flex-end; }
.chat-quick { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.chat-quick button {
  background: var(--white); border: 1.5px solid var(--green); color: var(--green-dark);
  border-radius: 999px; padding: 7px 14px; font-size: .78rem; font-weight: 700; min-height: 36px;
}
.chat-quick button:hover { background: var(--green-light); }
.chat-foot { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--border); background: var(--white); }
.chat-foot input { flex: 1; border: 1.5px solid var(--border); border-radius: 999px; padding: 10px 16px; font-size: .85rem; background: var(--bg-soft); }
.chat-foot button { min-width: 44px; min-height: 44px; border-radius: 50%; border: none; background: var(--green); color: var(--navy-dark); display: flex; align-items: center; justify-content: center; }
.m-app .chat-panel { right: 12px; bottom: 96px; width: calc(100% - 24px); left: auto; }

/* --- Đánh giá CSAT 5 sao --- */
.stars { display: flex; gap: 8px; justify-content: center; margin: 16px 0; }
.stars button { background: none; border: none; padding: 4px; line-height: 1; }
.stars svg { width: 34px; height: 34px; }
.stars button .st-fill { fill: none; stroke: var(--border-strong); stroke-width: 1.6; transition: all .15s ease; }
.stars button.on .st-fill { fill: var(--green); stroke: var(--green-dark); }

/* --- Ưu đãi & trung thành --- */
.tier-card { background: var(--gradient-navy); color: var(--white); border-radius: var(--radius-lg); padding: 22px; }
/* ==========================================================================
   15. REBRAND 2026 — QUY TẮC COMPONENT (navy + gold)
   Đặt cuối file để override cả style.css marketing lẫn các rule phía trên.
   ========================================================================== */

/* --- Nút: gold phẳng, không gradient gold --- */
.btn-primary { background: var(--green); color: var(--navy); }
.btn-primary:hover { background: var(--green-dark); color: var(--white); }
.btn-navy { background: var(--gradient-navy); }
.btn-navy:hover { background: var(--navy-dark); }
.btn-ghost { border-color: var(--navy); color: var(--navy); }

/* --- Badge: chữ navy trên nền gold-light (không chữ gold trên nền trắng) --- */
.badge-soft, .card-badge, .package-tag { background: var(--green-light); color: var(--navy); }
.net-badge { background: var(--green-light); color: var(--navy); }
.net-badge.direct { background: var(--info-light); color: var(--info-dark); }
.ncb-badge { color: var(--navy); }

/* --- Link/chữ nhấn nhỏ trên nền trắng → --info --- */
.dash-card-head a, .m-sec a, .p-notif-head a, .p-notif-foot,
.auth-foot a, .otp-resend button, .field-hint a { color: var(--info); }
.otp-resend button:disabled { color: var(--text-muted); }

/* --- Bottom tab bar: active navy đậm --- */
.m-tabbar a.active { color: var(--navy); }
.m-tabbar a.active svg { stroke: var(--navy); }

/* --- Filter chip hover: viền gold, chữ giữ navy --- */
.filter-chip:hover { border-color: var(--green); color: var(--navy); }

/* --- Bảng dữ liệu: header navy chữ trắng --- */
.p-table th { background: var(--navy); color: var(--white); border-bottom: none; }
.p-table thead tr th:first-child { border-radius: var(--radius-sm) 0 0 var(--radius-sm); }
.p-table thead tr th:last-child { border-radius: 0 var(--radius-sm) var(--radius-sm) 0; }
.money.ok, .gr-ok { color: var(--ok); }

/* --- Khối nền tối lớn → gradient navy sang trọng --- */
.p-nav a.active, .p-avatar, .doc-icon, .onboard-steps .ob-num, .chat-head,
.m-quick a.hot .icon-circle { background: var(--gradient-navy); }
.pay-due-card, .tier-card, .wallet-card { background: var(--gradient-navy); }

/* --- Glow gold trang trí trên khối nền tối (không gradient gold) --- */
.pay-due-card, .tier-card { position: relative; overflow: hidden; }
.pay-due-card::before, .tier-card::before, .wallet-card::after {
  content: ""; position: absolute; right: -40px; top: -40px;
  width: 180px; height: 180px; border-radius: 50%;
  background: var(--green); opacity: .14; pointer-events: none;
}
.pay-due-card > *, .tier-card > * { position: relative; z-index: 1; }

/* --- Tiến trình bồi thường: ngữ nghĩa ok/info + gold cho bước hiện tại --- */
.stepper .st.done::before, .stepper .st.current::before { background: var(--ok); }
.stepper .st.done .st-dot { background: var(--ok); border-color: var(--ok); color: var(--white); }
.stepper .st.current .st-dot { border-color: var(--green); color: var(--navy); box-shadow: 0 0 0 5px rgba(198,172,105,.3); }
.mini-steps i.on { background: var(--ok); }

/* --- Khẩn cấp: đỏ mới --- */
.emg-hero { background: linear-gradient(135deg, var(--warn), var(--warn-dark)); }
.emg-call { color: var(--warn); }

/* --- Draft bar: amber, chữ navy --- */
.draft-bar { background: var(--amber-light); border-color: var(--amber); color: var(--navy); }

/* --- Logo responsive: luôn hiển thị ở mọi bề rộng --- */
.p-logo, .header-logo, .auth-logo { display: flex; align-items: center; flex-shrink: 0; }
.p-logo .logo-full { height: 34px; display: block; }
.p-logo .logo-mark { display: none; height: 30px; }
@media (max-width: 560px) {
  .p-logo .logo-full { display: none; }
  .p-logo .logo-mark { display: block; }
}
/* logo_footer.svg là bản trắng sẵn cho nền tối — bỏ mọi filter đổi màu */
.auth-logo img { filter: none; height: 44px; }