/* =========================================================
   TASCO INSURANCE - APP + PDF QUOTE
   Bản tối ưu giao diện web và xuất PDF
========================================================= */

*,
*::before,
*::after {
  box-sizing: border-box;
}

:root {
  --bg: #f4f7fb;
  --card: #ffffff;
  --line: #d9e2ec;
  --line-soft: #e9eef5;

  --text: #172335;
  --muted: #6b7787;

  --navy: #073b77;
  --navy-dark: #062f60;
  --blue: #0f69c2;
  --blue-soft: #edf5ff;

  --success: #0d7a4c;
  --success-soft: #eef8f2;

  --warn: #9a6200;
  --warn-soft: #fff7e8;

  --radius-sm: 10px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 20px;

  --shadow-card: 0 10px 30px rgba(19, 47, 76, 0.06);

  --font-ui: "Segoe UI Variable", "Segoe UI", "Aptos", Arial, Helvetica, sans-serif;
}


/* =========================================================
   GLOBAL
========================================================= */

html {
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.5;
  font-weight: 400;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button,
input,
textarea,
select {
  font-family: inherit;
}

button {
  letter-spacing: 0.01em;
}

.app-shell {
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
  padding: 18px;
}


/* =========================================================
   HERO
========================================================= */

.hero {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 20px;

  padding: 24px 26px;

  border-radius: 22px;

  color: #ffffff;

  background:
    linear-gradient(
      135deg,
      var(--navy) 0%,
      var(--blue) 100%
    );

  box-shadow:
    0 14px 30px rgba(7, 59, 119, 0.17);
}

.brand {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  opacity: 0.92;
}

.hero h1 {
  margin: 5px 0 8px;

  font-size: 28px;
  line-height: 1.2;
  font-weight: 750;
  letter-spacing: -0.02em;
}

.hero p {
  margin: 0;

  max-width: 650px;

  font-size: 14px;
  line-height: 1.55;

  opacity: 0.9;
}

.version {
  flex: 0 0 auto;

  padding: 8px 12px;

  border: 1px solid rgba(255,255,255,0.20);
  border-radius: 999px;

  background: rgba(255,255,255,0.12);

  font-size: 12px;
  font-weight: 750;
}


/* =========================================================
   MAIN CARD
========================================================= */

.card {
  margin-top: 16px;
  padding: 20px;

  background: var(--card);

  border: 1px solid var(--line);
  border-radius: 20px;

  box-shadow: var(--shadow-card);
}


/* =========================================================
   TABS
========================================================= */

.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;

  margin-bottom: 16px;
}

.tab {
  border: 1px solid var(--line);
  border-radius: 999px;

  background: #ffffff;
  color: var(--muted);

  padding: 10px 15px;

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.15s ease,
    color 0.15s ease,
    border-color 0.15s ease,
    transform 0.15s ease;
}

.tab:hover {
  border-color: #b9c8da;
}

.tab.active {
  background: var(--navy);
  color: #ffffff;
  border-color: var(--navy);
}


/* =========================================================
   FORM
========================================================= */

.hidden {
  display: none !important;
}

.field-label,
.grid label {
  display: block;

  color: #5f6d7e;

  font-size: 13px;
  font-weight: 650;
}

textarea,
input,
select {
  width: 100%;

  margin-top: 6px;
  padding: 12px 13px;

  border: 1px solid var(--line);
  border-radius: 12px;

  background: #ffffff;
  color: var(--text);

  font-size: 14px;
  font-weight: 500;

  outline: none;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}

textarea {
  resize: vertical;
  min-height: 110px;
}

textarea:focus,
input:focus,
select:focus {
  border-color: #8cb7e5;

  box-shadow:
    0 0 0 3px rgba(15,105,194,0.08);
}

input[readonly] {
  background: #f7f9fc;
  color: #566273;
}


/* =========================================================
   BUTTONS
========================================================= */

.primary-btn,
.confirm-btn,
.ghost-btn {
  border: 0;
  border-radius: 12px;

  padding: 12px 16px;

  font-size: 13px;
  font-weight: 750;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    box-shadow 0.15s ease,
    opacity 0.15s ease;
}

.primary-btn:hover,
.confirm-btn:hover,
.ghost-btn:hover {
  transform: translateY(-1px);
}

.primary-btn {
  margin-top: 12px;

  background: var(--navy);
  color: #ffffff;

  box-shadow:
    0 5px 12px rgba(7,59,119,0.12);
}

.primary-btn:hover {
  background: var(--navy-dark);
}

.primary-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.ghost-btn {
  background: var(--blue-soft);
  color: var(--navy);
}

.confirm-btn {
  width: 100%;
  margin-top: 16px;

  background: var(--success);
  color: #ffffff;

  box-shadow:
    0 5px 12px rgba(13,122,76,0.12);
}


/* =========================================================
   UPLOAD
========================================================= */

.upload-box {
  padding: 18px;

  text-align: center;

  border: 1px dashed #b9c8da;
  border-radius: 14px;

  background: #f9fbfd;
}

.upload-label {
  display: inline-block;

  padding: 11px 14px;

  border-radius: 12px;

  background: var(--blue-soft);
  color: var(--navy);

  font-size: 13px;
  font-weight: 700;

  cursor: pointer;
}

.subtext,
.status {
  margin-top: 8px;

  color: var(--muted);

  font-size: 12px;
}

.image-preview {
  display: block;

  width: 100%;
  max-height: 430px;

  object-fit: contain;

  margin-top: 14px;

  border: 1px solid var(--line);
  border-radius: 14px;
}


/* =========================================================
   LAYOUT
========================================================= */

.divider {
  height: 1px;

  margin: 20px 0;

  background: var(--line);
}

.section-heading {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;

  margin-bottom: 14px;
}

.section-heading h2 {
  margin: 0;

  color: #14253b;

  font-size: 21px;
  line-height: 1.3;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.section-heading p {
  margin: 4px 0 0;

  color: var(--muted);

  font-size: 13px;
  line-height: 1.5;
}

.grid {
  display: grid;
  grid-template-columns: minmax(0,1fr) minmax(0,1fr);
  gap: 12px;
}


/* =========================================================
   NOTICE / WARNING
========================================================= */

.notice,
.warning-box {
  margin-top: 14px;
  padding: 12px 14px;

  border-radius: 12px;

  font-size: 13px;
  line-height: 1.5;
}

.notice {
  background: var(--success-soft);
  color: #13613f;

  border: 1px solid #cce8d7;
}

.warning-box {
  background: var(--warn-soft);
  color: #7a4a00;

  border: 1px solid #f0d7a6;
}


/* =========================================================
   MODULE 2 / TNDS RESULT
========================================================= */

.valuation-section {
  margin-top: 20px;
}

.valuation-result {
  margin-top: 16px;
  padding: 16px;

  border: 1px dashed #b9c8da;
  border-radius: 14px;

  background: #fbfcfe;
  color: #4c596a;
}

.valuation-success h3 {
  margin: 0 0 10px;

  color: var(--navy);

  font-size: 18px;
  font-weight: 750;
}

.valuation-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;

  min-height: 40px;
  padding: 9px 0;

  border-bottom: 1px solid #e7edf4;

  font-size: 14px;
}

.valuation-row > span {
  color: #566273;
}

.valuation-row strong {
  color: #34445a;
  font-weight: 700;
}

.valuation-row.highlight {
  color: var(--success);
  font-size: 17px;
}

.valuation-row.highlight > span,
.valuation-row.highlight strong {
  color: var(--success);
}

.valuation-row.big {
  margin-top: 5px;

  border-bottom: none;

  color: var(--navy);

  font-size: 19px;
}

.valuation-row.big > span,
.valuation-row.big strong {
  color: var(--navy);
}

.valuation-explain {
  margin-top: 14px;
  padding: 12px 13px;

  border-radius: 10px;

  background: var(--blue-soft);

  color: #536174;

  font-size: 12px;
  line-height: 1.55;
}

.valuation-warning {
  padding: 12px;

  border-radius: 10px;

  background: var(--warn-soft);
  color: #945700;
}


/* =========================================================
   RESPONSIVE APP
========================================================= */

@media (max-width: 650px) {

  .app-shell {
    padding: 10px;
  }

  .hero {
    padding: 18px;
    border-radius: 18px;
  }

  .hero h1 {
    font-size: 23px;
  }

  .grid {
    grid-template-columns: 1fr;
  }

  .card {
    padding: 15px;
  }

  .section-heading {
    flex-direction: column;
  }

  .valuation-row {
    gap: 12px;
  }
}


/* =========================================================
   PDF QUOTE - QUAN TRỌNG
   Dùng layout ổn định cho html2canvas/html2pdf
========================================================= */

.quote-document,
.quote-document * {
  box-sizing: border-box !important;
}

.quote-document {
  display: block !important;

  width: 760px !important;
  min-width: 760px !important;
  max-width: 760px !important;

  margin: 0 !important;
  padding: 30px 32px !important;

  overflow: visible !important;

  background: #ffffff !important;
  color: #172335 !important;

  font-family: "Segoe UI", "Aptos", Arial, Helvetica, sans-serif !important;

  font-size: 12px;
  line-height: 1.45;

  transform: none !important;
  writing-mode: horizontal-tb !important;
}


/* ---------------------------------------------------------
   PDF HEADER
--------------------------------------------------------- */

.quote-header {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: flex-start !important;

  width: 100% !important;

  padding: 0 0 18px !important;

  border-bottom: 3px solid #0a4b8f !important;

  overflow: visible !important;
}

.quote-header > div:first-child {
  display: block !important;
  width: 72% !important;
  min-width: 0 !important;
}

.quote-brand {
  display: block !important;

  color: #0a4b8f !important;

  font-size: 12px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;
  letter-spacing: 1.8px !important;
}

.quote-header h1 {
  display: block !important;

  margin: 6px 0 4px !important;

  color: #082f5f !important;

  font-size: 25px !important;
  line-height: 1.18 !important;
  font-weight: 750 !important;
  letter-spacing: -0.4px !important;
}

.quote-header p {
  display: block !important;

  margin: 0 !important;

  color: #667085 !important;

  font-size: 11px !important;
}

.quote-date {
  display: block !important;

  width: 25% !important;

  text-align: right !important;

  font-size: 10px !important;
}

.quote-date span {
  display: block !important;

  margin-bottom: 3px !important;

  color: #8993a4 !important;
}

.quote-date strong {
  display: block !important;

  color: #25344a !important;

  font-size: 12px !important;
  font-weight: 700 !important;
}


/* ---------------------------------------------------------
   PDF CONTACT
--------------------------------------------------------- */

.quote-contact {
  display: block !important;

  width: 100% !important;

  margin: 10px 0 0 !important;
  padding: 10px 12px !important;

  border-radius: 8px !important;

  background: #f3f7fc !important;
  color: #526071 !important;

  font-size: 9.5px !important;
  line-height: 1.55 !important;

  overflow: visible !important;
}

.quote-contact span {
  display: inline !important;

  white-space: normal !important;
}

.quote-contact span:not(:last-child)::after {
  content: "  •  ";
  color: #9aa6b5;
}


/* ---------------------------------------------------------
   PDF SECTIONS
--------------------------------------------------------- */

.quote-section,
.quote-benefit-section {
  display: block !important;

  width: 100% !important;

  margin-top: 20px !important;

  overflow: visible !important;

  page-break-inside: auto !important;
}

.quote-section-title {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;

  width: 100% !important;

  margin-bottom: 10px !important;
}

.quote-section-title > span {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 24px !important;

  width: 24px !important;
  height: 24px !important;

  margin-right: 8px !important;

  border-radius: 50% !important;

  background: #0a4b8f !important;
  color: #ffffff !important;

  font-size: 9px !important;
  font-weight: 700 !important;
}

.quote-section-title h2,
.quote-benefit-section h2 {
  display: block !important;

  margin: 0 !important;

  color: #082f5f !important;

  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 750 !important;
}


/* ---------------------------------------------------------
   PDF VEHICLE INFO
   Tránh CSS Grid để html2canvas không cắt nội dung
--------------------------------------------------------- */

.quote-info-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  width: 100% !important;

  border: 1px solid #dbe4ef !important;
  border-radius: 10px !important;

  overflow: hidden !important;
}

.quote-info-item {
  display: block !important;

  flex: 0 0 50% !important;
  width: 50% !important;
  min-width: 0 !important;

  padding: 9px 12px !important;

  border-bottom: 1px solid #e8edf4 !important;

  background: #ffffff !important;

  overflow: visible !important;
}

.quote-info-item:nth-child(odd) {
  border-right: 1px solid #e8edf4 !important;
}

.quote-info-item span {
  display: block !important;

  margin-bottom: 2px !important;

  color: #7b8796 !important;

  font-size: 8.5px !important;
  line-height: 1.25 !important;
}

.quote-info-item strong {
  display: block !important;

  color: #26364a !important;

  font-size: 11px !important;
  line-height: 1.35 !important;
  font-weight: 700 !important;

  white-space: normal !important;
  overflow-wrap: anywhere !important;
}

.quote-info-wide {
  flex-basis: 100% !important;
  width: 100% !important;

  border-right: none !important;
}


/* ---------------------------------------------------------
   PDF PRODUCT CARDS
--------------------------------------------------------- */

.quote-product-list {
  display: block !important;

  width: 100% !important;
}

.quote-product-card {
  display: block !important;

  width: 100% !important;

  margin: 0 0 10px !important;
  padding: 13px 15px !important;

  border: 1px solid #d7e2ef !important;
  border-radius: 10px !important;

  background: #ffffff !important;

  overflow: visible !important;

  page-break-inside: avoid !important;
}

.quote-product-head {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;

  width: 100% !important;

  overflow: visible !important;
}

.quote-product-head > div:first-child {
  display: block !important;

  width: 66% !important;
  min-width: 0 !important;
}

.quote-product-code {
  display: block !important;

  color: #0a4b8f !important;

  font-size: 8px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
}

.quote-product-head h3 {
  display: block !important;

  margin: 3px 0 0 !important;

  color: #172f4f !important;

  font-size: 13px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.quote-product-price {
  display: block !important;

  width: 31% !important;

  text-align: right !important;
}

.quote-product-price small {
  display: block !important;

  margin-bottom: 2px !important;

  color: #7c8796 !important;

  font-size: 8px !important;
}

.quote-product-price strong {
  display: block !important;

  color: #07509f !important;

  font-size: 17px !important;
  line-height: 1.2 !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   PDF PRICE DETAIL
   Dùng flex thay grid
--------------------------------------------------------- */

.quote-price-detail {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  width: 100% !important;

  margin-top: 11px !important;
  padding-top: 10px !important;

  border-top: 1px solid #edf0f5 !important;
}

.quote-price-detail > div {
  display: block !important;

  flex: 1 1 30% !important;

  min-width: 150px !important;

  margin: 3px !important;
  padding: 8px 9px !important;

  border-radius: 7px !important;

  background: #f7f9fc !important;
}

.quote-price-detail span {
  display: block !important;

  margin-bottom: 2px !important;

  color: #7a8595 !important;

  font-size: 8px !important;
}

.quote-price-detail strong {
  display: block !important;

  color: #34445a !important;

  font-size: 10px !important;
  font-weight: 700 !important;

  white-space: normal !important;
}


/* ---------------------------------------------------------
   PDF TOTAL
--------------------------------------------------------- */

.quote-total {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;

  width: 100% !important;

  margin-top: 11px !important;
  padding: 13px 15px !important;

  border-radius: 10px !important;

  background: #073b77 !important;
  color: #ffffff !important;

  overflow: visible !important;

  page-break-inside: avoid !important;
}

.quote-total span {
  color: #ffffff !important;

  font-size: 11px !important;
  font-weight: 700 !important;
}

.quote-total strong {
  color: #ffffff !important;

  font-size: 19px !important;
  font-weight: 800 !important;

  white-space: nowrap !important;
}


/* ---------------------------------------------------------
   PDF BENEFITS
--------------------------------------------------------- */

.quote-benefit-section h2 {
  padding-bottom: 7px !important;

  border-bottom: 2px solid #e5ebf2 !important;
}

.quote-benefit-grid {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  width: 100% !important;

  margin-top: 10px !important;
}

.quote-benefit-card {
  display: flex !important;
  flex-direction: row !important;

  flex: 0 0 calc(50% - 6px) !important;
  width: calc(50% - 6px) !important;

  margin: 3px !important;
  padding: 10px 11px !important;

  border: 1px solid #e0e7f0 !important;
  border-radius: 8px !important;

  background: #ffffff !important;

  overflow: visible !important;

  page-break-inside: avoid !important;
}

.benefit-number {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;

  flex: 0 0 23px !important;

  width: 23px !important;
  height: 23px !important;

  margin-right: 8px !important;

  border-radius: 50% !important;

  background: #edf4fc !important;
  color: #0a4b8f !important;

  font-size: 8px !important;
  font-weight: 800 !important;
}

.quote-benefit-card > div:last-child {
  min-width: 0 !important;
}

.quote-benefit-card strong {
  display: block !important;

  color: #26364a !important;

  font-size: 10px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
}

.quote-benefit-card p {
  display: block !important;

  margin: 3px 0 0 !important;

  color: #5f6b7a !important;

  font-size: 8.5px !important;
  line-height: 1.4 !important;

  white-space: normal !important;
}


/* ---------------------------------------------------------
   PDF VCX BENEFIT LIST
--------------------------------------------------------- */

.quote-benefit-list {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: wrap !important;

  width: 100% !important;

  margin-top: 10px !important;
}

.quote-benefit-list > div {
  display: block !important;

  flex: 0 0 50% !important;
  width: 50% !important;

  padding: 4px 10px 4px 0 !important;

  color: #4f5c6b !important;

  font-size: 8.5px !important;
  line-height: 1.45 !important;

  white-space: normal !important;

  page-break-inside: avoid !important;
}

.quote-benefit-list b {
  color: #0d7a4c !important;

  margin-right: 4px !important;
}


/* ---------------------------------------------------------
   PDF NOTE
--------------------------------------------------------- */

.quote-note {
  display: block !important;

  width: 100% !important;

  margin-top: 17px !important;
  padding: 9px 11px !important;

  border-radius: 8px !important;

  background: #fff8e8 !important;
  color: #665127 !important;

  font-size: 8px !important;
  line-height: 1.45 !important;

  white-space: normal !important;

  overflow: visible !important;

  page-break-inside: avoid !important;
}


/* ---------------------------------------------------------
   PDF FOOTER
--------------------------------------------------------- */

.quote-footer {
  display: flex !important;
  flex-direction: row !important;
  justify-content: space-between !important;
  align-items: center !important;

  width: 100% !important;

  margin-top: 18px !important;
  padding-top: 10px !important;

  border-top: 1px solid #dfe5ec !important;

  color: #778292 !important;

  font-size: 8px !important;

  overflow: visible !important;
}

.quote-footer strong {
  color: #0a4b8f !important;

  font-weight: 800 !important;
  letter-spacing: 1px !important;
}


/* =========================================================
   PDF RENDER CONTAINER
========================================================= */

.quote-print-container {
  display: none;
}

.quote-print-container.pdf-generating {
  display: block !important;

  position: fixed !important;

  left: 0 !important;
  top: 0 !important;

  width: 760px !important;
  min-width: 760px !important;
  max-width: 760px !important;

  height: auto !important;
  min-height: 1px !important;

  margin: 0 !important;
  padding: 0 !important;

  overflow: visible !important;

  background: #ffffff !important;

  visibility: visible !important;
  opacity: 1 !important;

  z-index: 2147483647 !important;

  transform: none !important;
}


/* =========================================================
   KHI HTML2CANVAS CLONE DOM
========================================================= */

html2canvas-container,
.quote-print-container,
.quote-document {
  -webkit-print-color-adjust: exact !important;
  print-color-adjust: exact !important;
}


/* =========================================================
   PRINT
========================================================= */

@media print {

  body {
    background: #ffffff !important;
  }

  .quote-document {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
  }
}
/* =====================================================
   MOBILE FIX - GIỮ GIAO DIỆN CỐ ĐỊNH TRÊN IPHONE
   ===================================================== */

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

* {
  box-sizing: border-box;
}

input,
textarea,
select,
button {
  max-width: 100%;
}

/* Quan trọng:
   iPhone Safari sẽ tự zoom nếu font input < 16px */
@media (max-width: 768px) {

  input,
  textarea,
  select {
    font-size: 16px !important;
  }

  body {
    width: 100%;
    max-width: 100vw;
    overflow-x: hidden;
  }

  .container,
  .card,
  .section,
  form {
    width: 100%;
    max-width: 100%;
  }

}