/* ---------- Bảng giá page (static) ---------- */

/* Trang này dùng chung cấu trúc + CSS .hero/.hero-inner/.hero-text/.hero-sub/.hero-lead
   với index.html. Khác biệt duy nhất: không có .hero-route, và .hero-lead rộng hơn. */
.hero-lead--wide { max-width: 900px; }

.bg-layout {
  position: relative;
  display: grid;
  gap: 24px;
  width: 100%;
  max-width: var(--container);
  margin: -96px auto 0;
  padding: 0 var(--gutter) 56px;
}

/* ---------- Section heading ---------- */

.bg-section-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 18px;
}
.bg-section-title .card-icon { position: relative; }
.bg-section-title h2 { margin: 0; font-size: 18px; font-weight: 800; letter-spacing: -0.01em; color: var(--navy); }
.bg-section-title p { margin: 2px 0 0; font-size: 13px; color: var(--muted); }

/* ---------- Price table ---------- */

.price-table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--line); }
.price-table { width: 100%; min-width: 460px; border-collapse: collapse; font-size: 13.5px; }

.price-table thead th {
  position: sticky;
  top: 0;
  background: linear-gradient(135deg, var(--navy), var(--navy-900));
  color: #fff;
  font-weight: 700;
  padding: 10px 14px;
  text-align: center;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
}
.price-table thead tr:first-child th { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 8px 14px 4px; }
.price-table thead tr + tr th { padding-top: 4px; padding-bottom: 10px; }
.price-table thead th.kg-corner { text-align: center; }

.price-table tbody td {
  padding: 7px 14px;
  border-bottom: 1px solid var(--line);
  text-align: right;
  /* "Be Vietnam Pro" không có bảng glyph tabular-nums riêng nên tabular-nums
     bị trình duyệt bỏ qua âm thầm; ép font mono cho số để mọi ký tự đều bằng độ rộng. */
  font-variant-numeric: tabular-nums;
  font-family: ui-monospace, "SF Mono", "Roboto Mono", Menlo, Consolas, monospace;
  white-space: nowrap;
}
.price-table tbody td.kg {
  text-align: center;
  font-weight: 700;
  color: var(--navy);
  background: var(--surface-2);
  position: sticky;
  left: 0;
}
.price-table tbody tr:nth-child(even) td { background: var(--surface-2); }
.price-table tbody tr:nth-child(even) td.kg { background: var(--sky-50); }
.price-table tbody tr:hover td { background: var(--sky-100); }

.price-table tbody tr.price-note-row td {
  background: var(--gold-50);
  color: var(--gold-ink);
  font-weight: 700;
  text-align: left;
  white-space: normal;
}
.price-table tbody tr.price-perkg-row td { background: var(--gold-100); color: var(--gold-ink); font-weight: 800; }
.price-table tbody tr.price-perkg-row td.kg { background: var(--gold-100); color: var(--gold-ink); }

/* Header bảng nền tối: bôi đen cần màu riêng để không chìm chữ */
.price-table thead ::selection,
.fee-table thead ::selection { background: rgba(255, 255, 255, 0.88); color: var(--navy-900); }

/* ---------- Highlight chips (tỷ giá, miễn thuế) ---------- */

.bg-chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; }
.bg-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 999px;
  background: var(--no-50);
  border: 1px solid var(--no-100);
  color: var(--no);
  font-weight: 700;
  font-size: 13px;
}

/* ---------- Notice blocks (LƯU Ý) ---------- */

.notice {
  position: relative;
  overflow: hidden;
  border-color: var(--no-100);
  background: linear-gradient(135deg, var(--no-50), var(--surface) 55%);
  padding-left: 26px;
}
.notice::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 4px;
  background: linear-gradient(var(--no), #ff7a7a);
}
.notice-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: linear-gradient(135deg, #ff8a8a, var(--no));
  color: #fff;
  flex-shrink: 0;
}
.notice-icon svg { width: 17px; height: 17px; }
.notice h2 { display: flex; align-items: center; gap: 10px; margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--no); }
.notice p { margin: 0 0 10px; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.notice p:last-child { margin-bottom: 0; }
.notice ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.notice li { padding-left: 18px; position: relative; color: var(--ink-2); font-size: 14px; line-height: 1.7; }
.notice li::before { content: ""; position: absolute; left: 0; top: 9px; width: 6px; height: 6px; border-radius: 50%; background: var(--no); }
.notice li strong { color: var(--ink); }
.notice li + p { margin-top: 10px; }

/* ---------- Redelivery fee mini table ---------- */

.fee-table-wrap { overflow-x: auto; margin: 14px 0 16px; border-radius: var(--radius-sm); border: 1px solid var(--line); }
.fee-table { width: 100%; min-width: 340px; border-collapse: collapse; font-size: 13.5px; }
.fee-table th, .fee-table td { padding: 8px 14px; text-align: center; border-bottom: 1px solid var(--line); }
.fee-table thead th { background: linear-gradient(135deg, var(--navy), var(--navy-900)); color: #fff; font-weight: 700; }
.fee-table tbody td:first-child { text-align: center; font-weight: 700; color: var(--navy); background: var(--surface-2); }
.fee-table tbody tr:last-child td { border-bottom: none; }

@media (max-width: 760px) {
  .bg-layout { margin-top: -84px; gap: 16px; }
}