/* ==========================================================================
   Smart Zoning System v3 — BTTS Global Logistics
   Tông sáng, lấy màu từ logo: navy #1b3a63, chàm #2f2b56, xanh thép #4b7ea8
   ========================================================================== */

/* Cho phép animate mượt góc quay của vệt sáng chạy quanh carrier-card (xem .carrier-card.is-glow::before) */
@property --spin-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

:root {
  color-scheme: light;

  /* Brand (logo) */
  --navy-900: #0f2645;
  --navy: #1b3a63;
  --indigo: #2f2b56;
  --steel: #4b7ea8;
  --sky: #2f7fd0;
  --sky-600: #1f6bb8;
  --sky-100: #dcebfa;
  --sky-50: #eef5fc;

  /* Accent: nắng vàng Úc — dùng cho "Tuyến vàng" & chính sách */
  --gold: #f5a524;
  --gold-600: #d98a0b;
  --gold-ink: #7a4a00;
  --gold-100: #ffecc2;
  --gold-50: #fff8e8;

  /* Surface */
  --bg: #f2f6fb;
  --surface: #ffffff;
  --surface-2: #f7fafd;
  --line: #e1e8f1;
  --line-strong: #cfdbe8;
  --ink: #10213b;
  --ink-2: #344660;
  --muted: #64748b;

  /* Status */
  --ok: #15924b;
  --ok-50: #edf9f2;
  --ok-100: #c9eed8;
  --warn: #e56a0a;
  --warn-50: #fff5ec;
  --warn-100: #fddcc0;
  --no: #d92d2d;
  --no-50: #fef2f2;
  --no-100: #fbd0d0;

  --radius-lg: 22px;
  --radius: 16px;
  --radius-sm: 11px;
  --shadow-sm: 0 1px 2px rgba(16, 33, 59, 0.06), 0 2px 8px rgba(16, 33, 59, 0.05);
  --shadow: 0 1px 2px rgba(16, 33, 59, 0.05), 0 10px 30px -8px rgba(27, 58, 99, 0.16);
  --shadow-hover: 0 1px 2px rgba(16, 33, 59, 0.05), 0 18px 40px -10px rgba(27, 58, 99, 0.22);
  --shadow-lg: 0 24px 60px rgba(15, 38, 69, 0.22);
  --ring: 0 0 0 4px rgba(47, 127, 208, 0.18);
  --ease: cubic-bezier(0.2, 0.8, 0.2, 1);

  /* Khung nội dung dùng chung cho nav, hero, layout, footer → luôn thẳng hàng */
  --container: 1320px;
  --gutter: 24px;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

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

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  font-family: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif;
  color: var(--ink);
  background:
    radial-gradient(900px 500px at 100% 55%, rgba(47, 127, 208, 0.06), transparent 70%),
    radial-gradient(700px 500px at 0% 85%, rgba(245, 165, 36, 0.05), transparent 70%),
    var(--bg);
  line-height: 1.5;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

button, input { font: inherit; color: inherit; }

::selection { background: rgba(47, 127, 208, 0.2); color: var(--navy-900); }

/* Nền tối (hero, header bảng…) cần màu bôi đen tương phản riêng để không bị chìm chữ */
.hero ::selection { background: rgba(255, 255, 255, 0.88); color: var(--navy-900); }

svg { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

:focus-visible { outline: 2px solid var(--sky); outline-offset: 2px; }

/* ---------- Top nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid rgba(225, 232, 241, 0.8);
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6), 0 6px 20px -12px rgba(15, 38, 69, 0.18);
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 10px var(--gutter);
}

.nav-brand { display: block; flex-shrink: 0; line-height: 0; }
.nav-brand img { display: block; width: auto; height: 54px; }

.nav-menu {
  display: flex;
  align-items: center;
  gap: 2px;
  padding: 4px;
  border-radius: 999px;
  background: var(--surface-2);
  border: 1px solid var(--line);
  flex-shrink: 0;
}
.nav-menu-link {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 700;
  color: var(--ink-2);
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-menu-link:hover { color: var(--navy); }
.nav-menu-link[aria-current="page"] {
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color: #fff;
  box-shadow: 0 4px 12px -4px rgba(31, 107, 184, 0.4);
}

.hotlines { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.hotline {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: linear-gradient(180deg, #fff, var(--surface-2));
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}
.hotline:hover { border-color: rgba(47, 127, 208, 0.5); box-shadow: 0 6px 16px -6px rgba(31, 107, 184, 0.35); transform: translateY(-1px); }
.hotline-icon {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color: #fff;
  flex-shrink: 0;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.hotline-icon svg { width: 15px; height: 15px; }
.hotline-text { display: flex; flex-direction: column; line-height: 1.2; }
.hotline-label { font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.hotline-phone { font-size: 14px; font-weight: 700; white-space: nowrap; color: var(--navy); font-variant-numeric: tabular-nums; }

/* ---------- Hero ---------- */

.hero {
  position: relative;
  overflow: hidden;
  color: #fff;
  /* Nắng vàng chỉ là quầng nhỏ quanh cờ Úc; quầng lớn trên nền xanh sẽ ngả màu ô-liu */
  background:
    radial-gradient(260px 160px at 86% 62%, rgba(255, 201, 92, 0.2), transparent 70%),
    radial-gradient(640px 360px at 78% -10%, rgba(125, 185, 245, 0.35), transparent 70%),
    radial-gradient(700px 400px at 0% 100%, rgba(47, 43, 86, 0.5), transparent 70%),
    linear-gradient(120deg, var(--navy-900) 0%, var(--navy) 28%, #21508a 62%, #3478ba 100%);
  padding: 44px 0 136px;
  border-radius: 0 0 50% 50% / 0 0 40px 40px;
}
/* Lưới chấm mờ gợi bản đồ tuyến */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.16) 1px, transparent 1.4px);
  background-size: 22px 22px;
  mask-image: linear-gradient(100deg, transparent 20%, #000 70%);
  -webkit-mask-image: linear-gradient(100deg, transparent 20%, #000 70%);
  pointer-events: none;
}

.hero-inner {
  position: relative;
  display: flex;
  /* align-items: center; */
  justify-content: space-between;
  gap: 32px;
  min-height: 200px;
  max-width: var(--container);
  margin: 0 auto;
  padding: 0 var(--gutter);
}
.hero-text { flex-shrink: 0; }

/* Tuyến bay VN → AU: cờ hai nước nối bằng đường bay */
.hero-route { flex: 0 1 600px; min-width: 0; height: auto; overflow: visible; }
.hero-route-arc { stroke: url(#route-grad); stroke-width: 2.5; stroke-dasharray: 2 10; animation: dash 1.6s linear infinite; }
.hero-route-plane path { fill: #fff; stroke: none; filter: drop-shadow(0 4px 6px rgba(10, 26, 51, 0.35)); }
.hero-route-halo { stroke: none; }
.hero-flag-border { fill: none; stroke: rgba(255, 255, 255, 0.7); stroke-width: 1; }
.hero-flag-label {
  fill: rgba(255, 255, 255, 0.78);
  stroke: none;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-anchor: middle;
}
@keyframes dash { to { stroke-dashoffset: -24; } }

.hero h1 {
  margin: 0;
  max-width: 640px;
  font-size: clamp(30px, 4.4vw, 46px);
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-shadow: 0 2px 24px rgba(10, 26, 51, 0.25);
}
.hero-sub {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 14px 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #ffd98a;
}
.hero-sub::before {
  content: "";
  width: 28px;
  height: 3px;
  border-radius: 3px;
  background: linear-gradient(90deg, var(--gold), #ffd98a);
  flex-shrink: 0;
}
.hero-lead {
  max-width: 460px;
  margin: 18px 0 0;
  font-size: 15.5px;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.78);
}
.hero-lead strong { color: #fff; font-weight: 700; }

/* ---------- Layout ---------- */

.layout {
  position: relative;
  display: grid;
  grid-template-columns: 380px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  width: 100%;
  max-width: var(--container);
  margin: -96px auto 0;
  padding: 0 var(--gutter) 48px;
  flex: 1;
}

.sidebar, .results { display: grid; gap: 24px; min-width: 0; }

.card {
  background: var(--surface);
  border: 1px solid rgba(207, 219, 232, 0.7);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 22px;
}

.card-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.card-head--compact { margin-bottom: 16px; padding-bottom: 16px; }
.card-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  border-radius: 13px;
  background: linear-gradient(135deg, var(--sky), var(--navy));
  color: #fff;
  flex-shrink: 0;
  box-shadow: 0 6px 14px rgba(31, 107, 184, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
.card-icon--steel { background: linear-gradient(135deg, #6ea3cf, var(--indigo)); box-shadow: 0 6px 14px rgba(47, 43, 86, 0.22); }
.card-icon svg { width: 20px; height: 20px; }
.card-title { margin: 0; font-size: 17px; font-weight: 800; letter-spacing: -0.015em; color: var(--navy); line-height: 1.3; }
.card-sub { margin: 1px 0 0; font-size: 13px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.card-head > div { min-width: 0; }

/* ---------- Steps ---------- */

.steps { list-style: none; margin: 0; padding: 0; }

.step { position: relative; display: flex; gap: 14px; padding-bottom: 20px; }
.step:last-child { padding-bottom: 0; }
/* Đường nối giữa các bước */
.step:not(:last-child)::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 32px;
  bottom: 4px;
  width: 2px;
  border-radius: 2px;
  background: var(--line);
}
.step[data-status="done"]:not(:last-child)::before { background: linear-gradient(var(--sky), var(--sky-100)); }

.step-dot {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  margin-top: 1px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  background: var(--surface);
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
  flex-shrink: 0;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.step[data-status="active"] .step-dot { border-color: var(--sky); color: var(--sky-600); box-shadow: var(--ring); }
.step[data-status="done"] .step-dot {
  border-color: var(--sky);
  background: var(--sky) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 12 5 5 9-10'/%3E%3C/svg%3E") center / 14px no-repeat;
  color: transparent;
}

.step-main { flex: 1; min-width: 0; }
.step-label {
  display: block;
  margin: 4px 0 8px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink-2);
}

/* ---------- Postcode ---------- */

.postcode-field { position: relative; }

.postcode-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  color: var(--steel);
  pointer-events: none;
}

#postcode {
  width: 100%;
  height: 64px;
  padding: 0 52px;
  border-radius: var(--radius);
  border: 2px solid var(--line-strong);
  background: var(--surface-2);
  color: var(--navy);
  font-size: 30px;
  font-weight: 800;
  letter-spacing: 0.16em;
  font-variant-numeric: tabular-nums;
  text-align: center;
  outline: none;
  box-shadow: inset 0 2px 4px rgba(16, 33, 59, 0.04);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
#postcode::placeholder { color: #a9b6c7; font-size: 19px; letter-spacing: 0.04em; font-weight: 600; }
#postcode:hover { border-color: #b3c6dc; }
#postcode:focus { border-color: var(--sky); background: var(--surface); box-shadow: var(--ring); }
#postcode:disabled { opacity: 0.6; }
.postcode-field.is-error #postcode { border-color: var(--no); box-shadow: 0 0 0 4px rgba(217, 45, 45, 0.12); }

.spinner {
  position: absolute;
  right: 18px;
  top: 50%;
  width: 22px;
  height: 22px;
  margin-top: -11px;
  border: 3px solid var(--sky-100);
  border-top-color: var(--sky);
  border-radius: 50%;
  animation: spin 0.7s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

.postcode-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  margin-top: -16px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
}
.postcode-clear:hover { background: var(--sky-50); color: var(--navy); }
.postcode-clear svg { width: 16px; height: 16px; }

.field-message { min-height: 18px; margin: 8px 2px 0; font-size: 13px; color: var(--ink-2); }
.field-message:empty { min-height: 0; margin: 0; }
.field-message.is-error { color: var(--no); font-weight: 500; }

/* ---------- State ---------- */

.state-slot { min-width: 0; }
.location-empty { font-size: 14px; color: var(--muted); }

.state-value {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 6px 6px;
  border-radius: 999px;
  background: var(--sky-50);
  border: 1px solid var(--sky-100);
}
.state-code {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--navy);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.04em;
}
.state-name { font-size: 14px; font-weight: 600; color: var(--navy); }

.state-chips { display: flex; flex-wrap: wrap; gap: 8px; }

.state-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px 8px 10px;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-weight: 700;
  font-size: 14px;
  color: var(--ink-2);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease;
}
.state-chip::before {
  content: "";
  width: 16px;
  height: 16px;
  border-radius: 50%;
  border: 2px solid var(--line-strong);
  flex-shrink: 0;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.state-chip:hover { border-color: var(--sky); }
.state-chip[aria-checked="true"] { border-color: var(--sky); background: var(--sky-50); color: var(--navy); box-shadow: var(--ring); }
.state-chip[aria-checked="true"]::before { border: 5px solid var(--sky); }

/* ---------- Suburb combobox ---------- */

.combo { position: relative; }

.combo-button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  min-height: 46px;
  padding: 10px 14px;
  border-radius: 12px;
  border: 1.5px solid var(--line-strong);
  background: var(--surface);
  font-weight: 700;
  font-size: 15px;
  color: var(--navy);
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.combo-button svg { width: 18px; height: 18px; color: var(--muted); flex-shrink: 0; transition: transform 0.15s ease; }
.combo-button[aria-expanded="true"] { border-color: var(--sky); box-shadow: var(--ring); }
.combo-button[aria-expanded="true"] svg { transform: rotate(180deg); }
.combo-button:disabled { cursor: default; min-height: 0; padding: 0; border-color: transparent; background: transparent; }
.combo-button:disabled svg { display: none; }
.combo-button:not(:disabled):hover { border-color: var(--sky); }
.combo-button.is-required { border-color: var(--gold); background: var(--gold-50); box-shadow: 0 0 0 4px rgba(245, 165, 36, 0.18); }
.combo-value { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.combo-value.is-muted { color: var(--muted); font-weight: 400; font-size: 14px; }
.combo-value.is-placeholder { color: var(--gold-ink); font-weight: 600; }

.combo-panel {
  position: absolute;
  z-index: 25;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  padding: 8px;
  border-radius: var(--radius);
  border: 1px solid var(--line);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  animation: pop 0.18s var(--ease);
  transform-origin: top center;
}
@keyframes pop { from { opacity: 0; transform: translateY(-4px) scale(0.98); } }

.combo-search-wrap { position: relative; }
.combo-search-wrap svg { position: absolute; left: 12px; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--muted); }
.combo-search {
  width: 100%;
  height: 40px;
  padding: 0 12px 0 36px;
  border-radius: 10px;
  border: 1px solid var(--line-strong);
  background: var(--surface-2);
  outline: none;
}
.combo-search:focus { border-color: var(--sky); background: var(--surface); }

.combo-list { list-style: none; margin: 8px 0 0; padding: 0; max-height: 250px; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }
.combo-list li { padding: 9px 12px; border-radius: 9px; transition: background 0.12s ease; font-size: 14px; font-weight: 500; color: var(--ink-2); cursor: pointer; }
.combo-list li:hover { background: var(--surface-2); }
.combo-list li.is-active { background: var(--sky-50); color: var(--navy); }
.combo-list li[aria-selected="true"] { color: var(--sky-600); font-weight: 700; }
.combo-list li.combo-empty { color: var(--muted); cursor: default; background: none; }

/* ---------- Map ---------- */

.map-frame {
  position: relative;
  height: 260px;
  border-radius: var(--radius);
  overflow: hidden;
  border: 1px solid var(--line);
  background: var(--sky-50);
}
#map { position: absolute; inset: 0; }

.map-expand {
  position: absolute;
  z-index: 2;
  top: 10px;
  right: 10px;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--navy);
  box-shadow: var(--shadow-sm);
  cursor: pointer;
  transition: transform 0.15s ease, color 0.15s ease;
}
.map-expand:hover { transform: scale(1.06); color: var(--sky); }
.map-expand svg { width: 17px; height: 17px; }

.map-placeholder {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 16px;
  text-align: center;
  align-content: center;
  gap: 10px;
  font-size: 13px;
  font-weight: 500;
  color: var(--muted);
  background:
    radial-gradient(circle at 50% 45%, rgba(255, 255, 255, 0.9), transparent 60%),
    radial-gradient(rgba(75, 126, 168, 0.18) 1px, transparent 1.4px) 0 0 / 16px 16px,
    var(--sky-50);
}
.map-placeholder-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 14px;
  background: #fff;
  color: var(--steel);
  box-shadow: var(--shadow-sm);
}
.map-placeholder-icon svg { width: 22px; height: 22px; }

/* Marker: chấm định vị có vòng lan toả */
.map-pin { position: relative; width: 28px; height: 36px; }
.map-pin-icon {
  position: relative;
  display: block;
  filter: drop-shadow(0 6px 6px rgba(15, 38, 69, 0.35));
  transform-origin: 50% 100%;
  animation: pin-drop 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Vòng lan toả dưới chân pin */
.map-pin-pulse {
  position: absolute;
  left: 50%;
  bottom: -3px;
  width: 16px;
  height: 7px;
  margin-left: -8px;
  border-radius: 50%;
  background: rgba(31, 107, 184, 0.45);
  animation: pin-pulse 2s ease-out infinite;
}
@keyframes pin-drop { 0% { transform: translateY(-24px) scale(0.8); opacity: 0; } 100% { transform: none; opacity: 1; } }
@keyframes pin-pulse { 0% { transform: scale(0.6); opacity: 0.9; } 100% { transform: scale(2.6); opacity: 0; } }

/* ---------- Map popup ---------- */

.map-dialog {
  width: min(1100px, calc(100vw - 32px));
  height: min(760px, calc(100vh - 32px));
  max-width: none;
  max-height: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--surface);
  color: var(--ink);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}
.map-dialog[open] { display: flex; flex-direction: column; }
.map-dialog::backdrop { background: rgba(15, 38, 69, 0.5); backdrop-filter: blur(4px); }
body:has(.map-dialog[open]) { overflow: hidden; }

.map-dialog-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 12px 14px 12px 16px;
  border-bottom: 1px solid var(--line);
}
.map-dialog-heading { display: flex; align-items: center; gap: 12px; min-width: 0; }
.map-dialog-heading .card-icon { width: 36px; height: 36px; border-radius: 11px; }
.map-dialog-heading .card-icon svg { width: 18px; height: 18px; }
.map-dialog-title {
  min-width: 0;
  margin: 0;
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.map-dialog-close {
  display: grid;
  place-items: center;
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  color: var(--ink-2);
  cursor: pointer;
}
.map-dialog-close:hover { border-color: var(--sky); color: var(--sky); }
.map-dialog-close svg { width: 18px; height: 18px; }

.map-dialog-body { position: relative; flex: 1; min-height: 0; }

/* ---------- Carrier cards ---------- */

.carrier-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.carrier-card {
  position: relative;
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-lg);
  background: var(--surface);
  border: 1px solid var(--line);
  border-color: rgba(207, 219, 232, 0.7);
  overflow: hidden;
  transition: border-color 0.3s var(--ease), transform 0.3s var(--ease);
}

.carrier-head {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 72px;
  padding: 18px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
}
.carrier-title { flex: 1; min-width: 0; }
.carrier-title h3 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: 0.01em; text-transform: uppercase; color: var(--navy); line-height: 1.2; }
.carrier-logo { display: block; width: auto; max-width: 100%; }
/* Cân thị giác: logo AusPost có biểu tượng tròn nên cao hơn wordmark CouriersPlease */
.carrier-logo--ap { height: 34px; }
.carrier-logo--cp { height: 24px; margin: 5px 0; }
.carrier-body { display: flex; flex-direction: column; gap: 14px; padding: 18px 20px 20px; flex: 1; }

/* Best choice (glow): ruy-băng chéo ở góc, nằm đè nên không đổi chiều cao thẻ */
.carrier-ribbon {
  position: absolute;
  z-index: 2;
  top: 24px;
  right: -46px;
  width: 180px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 6px 0;
  overflow: hidden;
  transform: rotate(45deg);
  background: linear-gradient(90deg, #ffc94d, var(--gold-600) 55%, #93590a);
  color: #ffffff;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  box-shadow: 0 4px 10px rgba(217, 138, 11, 0.35);
  pointer-events: none;
}
.carrier-ribbon svg { width: 13px; height: 13px; fill: currentColor; stroke-width: 1.5; flex-shrink: 0; }
/* Vệt sáng quét qua ruy-băng để thu hút ánh nhìn */
.carrier-ribbon::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg, transparent 30%, rgba(255, 255, 255, 0.55) 50%, transparent 70%);
  transform: translateX(-100%);
  animation: sheen 3.2s ease-in-out infinite;
}
@keyframes sheen { 0%, 55% { transform: translateX(-100%); } 100% { transform: translateX(100%); } }

/* Glow bao quanh thẻ khi Best choice — mặc định: sáng dần/tối dần (breathe) liên tục, không có điểm dừng.
   Thêm class "glow-sweep" cùng với is-glow để chuyển sang biến thể vệt sáng chạy vòng quanh viền (bên dưới). */
.carrier-card.is-glow:not(.glow-sweep) {
  /* border-color: var(--gold-600); */
  animation: card-glow-breathe 0.9s ease-in-out infinite;
}
@keyframes card-glow-breathe {
  0%, 100% {
    /* border-color: var(--gold-100); */
    box-shadow: 0 0 0 0 var(--gold-100), 0 0 10px 2px rgba(255, 236, 194, 0.5), 0 20px 44px -12px rgba(217, 138, 11, 0.40);
  }
  50% {
    border-color: var(--gold-600);
    box-shadow: 0 0 0 0 var(--gold-600), 0 0 36px 12px rgba(217, 138, 11, 0.85), 0 20px 44px -12px rgba(217, 138, 11, 0.40);
  }
}

/* Biến thể "glow-sweep": một vệt sáng gold chạy vòng quanh viền thẻ liên tục, nền glow tĩnh nhẹ phía sau */
.carrier-card.is-glow.glow-sweep {
  border-color: var(--gold-600);
  box-shadow: 0 0 20px 3px rgba(217, 138, 11, 0.28), 0 20px 44px -12px rgba(217, 138, 11, 0.40);
}
/* Vệt sáng: conic-gradient xoay tròn, "mask" khoét rỗng phần thân để chỉ còn lại viền dày 2px hiển thị
   (bằng đúng độ dày border gốc của thẻ). Xoay bằng cách animate góc bắt đầu (--spin-angle) thay vì
   transform:rotate, vì rotate cả khối đã che bị lỗi hiển thị (rò rỉ vệt sáng vào giữa thẻ) ở góc 90/270°
   trên thẻ hình chữ nhật dẹt trong Chrome. */
.carrier-card.is-glow.glow-sweep::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2px;
  border-radius: inherit;
  background: conic-gradient(from var(--spin-angle, 0deg), transparent 0deg, transparent 265deg, var(--gold-100) 300deg, var(--gold-600) 325deg, #fff3d6 340deg, var(--gold-600) 355deg, transparent 360deg);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: card-glow-spin 2.6s linear infinite;
}
@keyframes card-glow-spin {
  to { --spin-angle: 360deg; }
}
.carrier-card.is-glow .carrier-head { padding-right: 76px; }

/* Nền/viền mặc định theo từng hãng, không phụ thuộc Best choice */
#card-ap { border: 2px solid var(--line-strong); }
#card-cp {
  background: var(--gold-50);
  border: 2px solid rgba(245, 165, 36, 0.6);
}
#card-cp .carrier-head {
  background: linear-gradient(180deg, #ffe09a, #ffecc2);
  border-bottom-color: #f5c25a;
}

/* No service: hãng không phục vụ khu vực → ẩn quy định, ô zone giãn hết thẻ */
.carrier-card.is-unavailable .carrier-body > .rule { display: none; }
.carrier-card.is-unavailable .zone-box { flex: 1; }

.no-service {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 24px 16px;
  text-align: center;
  border-radius: var(--radius);
  border: 1.5px dashed var(--no-100);
  background: repeating-linear-gradient(135deg, #fffafa 0 12px, var(--no-50) 12px 24px);
}
.no-service-icon {
  display: grid;
  place-items: center;
  width: 60px;
  height: 60px;
  margin-bottom: 4px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid var(--no-100);
  color: var(--no);
  box-shadow: 0 6px 16px rgba(217, 45, 45, 0.12);
}
.no-service-icon svg { width: 30px; height: 30px; stroke-width: 2.4; }
.no-service strong {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--no);
  line-height: 1.1;
}
.no-service span:last-child { max-width: 280px; font-size: 13.5px; color: var(--ink-2); }

/* Zone rows */

.zone-box { display: grid; gap: 12px; }

.zone-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 72px;
  padding: 12px 12px 12px 12px;
  border-radius: 14px;
  background: var(--surface);
  border: 1px solid var(--line);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.zone-row:not(.is-best):not(.is-none):hover { border-color: var(--line-strong); box-shadow: var(--shadow-sm); }
.zone-icon {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: var(--sky-50);
  color: var(--steel);
  flex-shrink: 0;
}
.zone-icon svg { width: 19px; height: 19px; }
.zone-label { display: flex; flex-direction: column; flex: 1; min-width: 0; line-height: 1.25; }
.zone-label strong { font-size: 14.5px; font-weight: 700; color: var(--ink); text-transform: uppercase; }
.zone-label small { margin-top: 2px; font-size: 12.5px; font-weight: 500; color: var(--muted); }
.zone-value {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  font-size: 30px;
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--sky-600);
  white-space: nowrap;
}
.zone-value small { font-size: 11.5px; font-weight: 700; letter-spacing: 0.12em; opacity: 0.65; }

/* Số zone: ô vuông bo góc, nhãn "Zone" nằm trên */
.zone-row.is-zone .zone-value {
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  min-width: 64px;
  height: 52px;
  padding: 0 10px;
  border-radius: 12px;
  background: var(--sky-50);
  border: 1px solid var(--sky-100);
}
.zone-row.is-zone .zone-value small { font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.75; line-height: 1.2; }
.zone-row.is-zone .zone-value b { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }

.zone-title { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }

/* Tối ưu: nền xanh nhạt + viền xanh + tag cạnh tiêu đề — rõ ràng nhưng không rối */
.zone-row.is-best {
  border: 1.5px solid var(--ok);
  background: var(--ok-50);
  box-shadow: 0 6px 16px rgba(21, 146, 75, 0.14);
}
.zone-row.is-best .zone-icon { background: var(--ok); color: #fff; }
.zone-row.is-best .zone-value { color: var(--ok); }
.zone-row.is-best.is-zone .zone-value { background: var(--ok); border-color: var(--ok); color: #fff; box-shadow: 0 6px 14px -4px rgba(21, 146, 75, 0.5); }

.best-tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 8px 2px 6px;
  border-radius: 999px;
  background: var(--ok);
  color: #fff;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.4;
}
.best-tag svg { width: 11px; height: 11px; stroke-width: 3.5; }

.zone-row.is-none { background: var(--surface-2); box-shadow: none; border: 1px dashed var(--line-strong); }
.zone-row.is-none .zone-icon { background: var(--surface); color: var(--muted); }
.zone-row.is-none .zone-value { align-items: center; gap: 5px; font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--no); }
.zone-row.is-none .zone-value svg { width: 15px; height: 15px; stroke-width: 2.6; }
/* Liên hệ: pill cam kèm icon điện thoại, đọc như lời nhắc gọi hotline chứ không phải lỗi */
.zone-row.is-check { border-color: var(--warn-100); background: linear-gradient(90deg, var(--surface), var(--warn-50)); }
.zone-row.is-check .zone-icon { background: var(--warn-50); color: var(--warn); }
.zone-row.is-check .zone-value {
  align-items: center;
  gap: 6px;
  padding: 7px 14px 7px 12px;
  border-radius: 999px;
  background: var(--surface);
  border: 1px solid var(--warn-100);
  box-shadow: 0 4px 10px -4px rgba(229, 106, 10, 0.3);
  font-size: 13px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--warn);
}
.zone-row.is-check .zone-value svg { width: 14px; height: 14px; stroke-width: 2.4; }

.zone-hint {
  display: flex;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 10px;
  background: var(--warn-50);
  font-size: 12.5px;
  font-weight: 500;
  color: #a54a05;
}
.zone-hint svg { width: 14px; height: 14px; margin-top: 2px; flex-shrink: 0; }

.zone-state {
  display: grid;
  place-items: center;
  align-content: center;
  gap: 12px;
  min-height: 144px;
  padding: 16px;
  border-radius: var(--radius);
  border: 1.5px dashed var(--line-strong);
  background: radial-gradient(circle at 50% 30%, #fff, var(--surface-2) 70%);
  text-align: center;
  color: var(--muted);
  font-size: 14px;
  font-weight: 500;
}
.zone-state-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid var(--line);
  color: var(--steel);
  box-shadow: 0 6px 16px -6px rgba(27, 58, 99, 0.25);
}
.zone-state-icon svg { width: 22px; height: 22px; }
.zone-state strong { color: var(--ink); font-size: 15px; }

.zone-skeleton {
  height: 72px;
  border-radius: 14px;
  background: linear-gradient(90deg, #e3edf8 0%, #f5f9fd 50%, #e3edf8 100%);
  background-size: 200% 100%;
  animation: shimmer 1.1s ease-in-out infinite;
}
.zone-box > * { animation: rise 0.35s var(--ease) both; }
.zone-box > :nth-child(2) { animation-delay: 0.05s; }
.zone-box > :nth-child(3) { animation-delay: 0.1s; }
@keyframes rise { from { opacity: 0; transform: translateY(6px); } }

@keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

/* Rules */

/* Giống v1: header nền đặc màu trạng thái + chữ trắng, viền cùng màu header, thân nền nhạt cùng tông */
.rule {
  --rule-c: var(--ok);
  --rule-bg: var(--ok-50);
  border-radius: var(--radius);
  border: 1.5px solid var(--rule-c);
  background: var(--rule-bg);
  overflow: hidden;
}
.rule h4 {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 9px 12px;
  background: var(--rule-c);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.3;
  color: #fff;
}
.rule-title { display: flex; flex-wrap: wrap; align-items: baseline; column-gap: 6px; flex: 1; min-width: 0; }
.rule-title small { font-size: 12.5px; font-weight: 500; color: rgba(255, 255, 255, 0.82); }
.rule-icon {
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.22);
  color: #fff;
  flex-shrink: 0;
}
.rule-icon svg { width: 13px; height: 13px; stroke-width: 2.8; }
.rule-body { padding: 12px 14px 14px; font-size: 14px; }

.rule ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rule li { display: flex; gap: 8px; align-items: flex-start; color: var(--ink-2); }
.rule li svg { width: 15px; height: 15px; margin-top: 3px; color: var(--ok); flex-shrink: 0; stroke-width: 3; }
.rule strong { color: var(--ink); font-weight: 700; }

.rule--no { --rule-c: var(--no); --rule-bg: var(--no-50); }
/* Badge trắng nổi trên header đỏ */
.rule-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex-shrink: 0;
  padding: 3px 10px;
  border-radius: 999px;
  background: #fff;
  color: var(--no);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(127, 18, 18, 0.25);
}
.rule-badge svg { width: 12px; height: 12px; stroke-width: 2.8; }
.rule--no p { margin: 0; font-size: 13.5px; font-weight: 500; color: #9f2323; }

.rule--warn { --rule-c: var(--warn); --rule-bg: var(--warn-50); }
.rule-note {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 6px;
  padding: 6px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px dashed var(--no-100);
  font-size: 12px;
  font-weight: 700;
  color: var(--no);
}
.rule-note svg { width: 14px; height: 14px; flex-shrink: 0; }
.surcharge {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 7px 0;
  color: var(--ink-2);
}
.surcharge + .surcharge { border-top: 1px dashed #f8bd8c; }
.surcharge-amount {
  padding: 3px 10px;
  border-radius: 8px;
  background: #fff;
  border: 1px solid var(--warn-100);
  color: var(--warn);
  font-weight: 800;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---------- Policy ---------- */

.policy {
  position: relative;
  overflow: hidden;
  border-color: var(--gold-100);
  background: linear-gradient(135deg, var(--gold-50), var(--surface) 60%);
  padding-left: 26px;
}
.policy::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(var(--gold), #ff9a3c);
}
.policy-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ffd166, var(--gold));
  color: var(--gold-ink);
  flex-shrink: 0;
}
.policy-icon svg { width: 17px; height: 17px; }
.policy h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 16px; font-weight: 800; color: var(--gold-ink); }
.policy p { margin: 0; color: var(--ink-2); font-size: 14.5px; line-height: 1.7; }
.policy strong { color: var(--ink); }
.policy .rate {
  display: inline-block;
  margin-left: 4px;
  padding: 2px 10px;
  border-radius: 8px;
  background: var(--navy);
  color: #fff;
  font-weight: 700;
  white-space: nowrap;
}

/* ---------- Footer ---------- */

.footer { border-top: 1px solid var(--line); background: linear-gradient(180deg, var(--surface), var(--surface-2)); }
.footer-inner { max-width: var(--container); margin: 0 auto; padding: 22px var(--gutter) 18px; text-align: center; }
.footer-inner p { margin: 3px 0; font-size: 12.5px; color: var(--muted); line-height: 1.6; }
.footer-brand-name { font-size: 14px; font-weight: 800; }
.footer-brand-name strong { color: var(--navy); }
.footer-inner a { color: inherit; text-decoration: none; }
.footer-inner a:hover { color: var(--sky-600); text-decoration: underline; }

/* ---------- Mapbox tweaks ---------- */

.mapboxgl-ctrl-group { border-radius: 10px !important; box-shadow: var(--shadow-sm) !important; }

/* ---------- Responsive ---------- */

@media (max-width: 1080px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .sidebar { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .map-card { display: flex; flex-direction: column; }
  .map-frame { flex: 1; height: auto; min-height: 260px; }
  .hero-route { flex-basis: 480px; }
  /* SVG bị thu nhỏ ở khổ tablet → tăng cỡ chữ để nhãn cờ vẫn đọc được */
  .hero-flag-label { font-size: 17px; }
}
@media (max-width: 760px) {
  .hero-flag-label { font-size: 12px; }
}

@media (max-width: 760px) {
  :root { --gutter: 14px; }
  .nav-inner { flex-direction: column; align-items: stretch; gap: 8px; padding-block: 8px; }
  .nav { position: static; }
  .nav-brand { align-self: center; }
  .nav-brand img { height: 44px; }
  .nav-menu { align-self: center; }
  .nav-menu-link { padding: 7px 14px; font-size: 12.5px; }
  .hotlines { flex-wrap: nowrap; gap: 6px; }
  .hotline { flex: 1 1 0; min-width: 0; justify-content: center; padding: 5px 6px; gap: 0; }
  .hotline-icon { display: none; }
  .hotline-text { align-items: center; }
  .hotline-phone { font-size: 12.5px; }

  .hero { padding: 24px 0 112px; border-radius: 0 0 50% 50% / 0 0 24px 24px; }
  /* Mobile: tuyến bay nằm trên tiêu đề */
  .hero-inner { flex-direction: column-reverse; align-items: stretch; gap: 14px; }
  .hero-route { flex: none; width: 100%; max-width: 400px; align-self: center; }
  .hero-lead { margin-top: 12px; font-size: 14px; }

  .layout { margin-top: -84px; padding-bottom: 32px; gap: 16px; }
  .sidebar, .results { gap: 16px; }
  /* Mobile: kết quả ngay sau ô tra cứu, bản đồ xuống cuối */
  .sidebar { display: contents; }
  .search-card { order: 1; }
  .results { order: 2; }
  .map-card { order: 3; }
  .card { padding: 18px; border-radius: 18px; }
  .carrier-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .carrier-card.is-glow { order: -1; }
  .zone-value { font-size: 26px; }
  .zone-row.is-zone .zone-value { min-width: 58px; height: 48px; }
  .zone-row.is-zone .zone-value b { font-size: 24px; }

  .map-dialog { width: 100vw; height: 100dvh; border-radius: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}