/*!
 * VỊNH ĐẦM SEASIDE — Hệ giao diện
 * Cùng bộ token với file Figma "Vịnh Đầm Seaside — Website + Voucher + Đối tác".
 * Đổi màu ở :root là đổi cả trang, không phải đi sửa từng chỗ.
 */

:root {
  /* Màu */
  --vd-trang:        #FFFFFF;
  --vd-cat:          #FDF8F0;
  --vd-cat-dam:      #F4EDE1;
  --vd-hai-quan:     #0E1B33;
  --vd-hai-quan-2:   #1B2A4A;
  --vd-vien:         #E7DECF;
  --vd-chu:          #3F4A5C;
  --vd-chu-dam:      #0E1B33;
  --vd-chu-mo:       #7C8797;
  --vd-vang:         #C9A96E;
  --vd-vang-sang:    #E3CFA3;
  --vd-vang-dam:     #A8873F;
  --vd-bien:         #1E6E7E;
  --vd-tot:          #2E7D5B;
  --vd-canh-bao:     #C77B2A;
  --vd-loi:          #B3352E;

  /* Bo góc */
  --vd-r-nho:  8px;
  --vd-r-vua:  14px;
  --vd-r-lon:  24px;
  --vd-r-tron: 999px;

  /* Bóng */
  --vd-bong-nhe: 0 2px 8px rgba(14, 27, 51, .06);
  --vd-bong-the: 0 10px 30px -6px rgba(14, 27, 51, .10);
  --vd-bong-cao: 0 24px 60px -12px rgba(14, 27, 51, .18);
  --vd-bong-vang: 0 10px 26px -6px rgba(201, 169, 110, .38);

  /* Chữ */
  --vd-serif: 'Playfair Display', Georgia, 'Times New Roman', serif;
  --vd-sans:  'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;

  --vd-max: 1180px;
}

/* ── Nền chung ──────────────────────────────────────────────────────────── */

.vd-shell,
.vd-hero,
.vd-chooser {
  font-family: var(--vd-sans);
  color: var(--vd-chu);
  -webkit-font-smoothing: antialiased;
}

.vd-shell {
  max-width: var(--vd-max);
  margin: 0 auto;
  padding: 56px 20px 88px;
}
.vd-shell--narrow { max-width: 620px; }

/* ── Chữ ────────────────────────────────────────────────────────────────── */

.vd-h1, .vd-h2, .vd-h3 { font-family: var(--vd-serif); color: var(--vd-chu-dam); font-weight: 600; }
.vd-h1 { font-size: clamp(30px, 4.2vw, 44px); line-height: 1.16; letter-spacing: -.015em; }
.vd-h2 { font-size: clamp(25px, 3.2vw, 34px); line-height: 1.2;  letter-spacing: -.01em; }
.vd-h3 { font-size: clamp(20px, 2.4vw, 25px); line-height: 1.28; }
.vd-h4 { font-family: var(--vd-sans); font-size: 18px; font-weight: 600; color: var(--vd-chu-dam); line-height: 1.4; }

.vd-eyebrow {
  font-size: 11.5px; font-weight: 500; letter-spacing: .24em;
  text-transform: uppercase; color: var(--vd-vang-dam);
}
.vd-eyebrow--light { color: var(--vd-vang-sang); }

.vd-lead  { font-size: 17px; line-height: 1.78; color: var(--vd-chu); max-width: 64ch; }
.vd-muted { color: var(--vd-chu-mo); font-size: 15px; line-height: 1.7; }
.vd-mini  { font-size: 11.5px; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--vd-chu-mo); }
.vd-fineprint { font-size: 13px; line-height: 1.7; color: var(--vd-chu-mo); margin-top: 12px; }
.vd-mb { margin-bottom: 18px; }

.vd-section-head { margin: 72px 0 34px; }
.vd-section-head:first-child { margin-top: 0; }
.vd-section-head--tight { margin: 0 0 22px; }
.vd-section-head .vd-h1,
.vd-section-head .vd-h2 { margin: 10px 0 12px; }

/* ── Nút ────────────────────────────────────────────────────────────────── */

.vd-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 15px 32px; border-radius: var(--vd-r-tron);
  font-family: var(--vd-sans); font-size: 15px; font-weight: 600; letter-spacing: .01em;
  text-decoration: none; cursor: pointer; border: 1.5px solid transparent;
  transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.vd-btn:hover  { transform: translateY(-1px); }
.vd-btn:active { transform: translateY(0); }
.vd-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }

.vd-btn--gold  { background: var(--vd-vang); color: var(--vd-hai-quan); box-shadow: var(--vd-bong-vang); }
.vd-btn--gold:hover { background: var(--vd-vang-sang); }
.vd-btn--navy  { background: var(--vd-hai-quan); color: #fff; }
.vd-btn--navy:hover { background: var(--vd-hai-quan-2); }
.vd-btn--ghost { background: #fff; color: var(--vd-chu-dam); border-color: var(--vd-vien); }
.vd-btn--ghost:hover { border-color: var(--vd-vang); }
.vd-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255,255,255,.42); }
.vd-btn--outline-light:hover { border-color: #fff; }
.vd-btn--block { display: flex; width: 100%; margin-top: 10px; }

/* ── Thẻ ────────────────────────────────────────────────────────────────── */

.vd-card {
  background: #fff; border: 1px solid var(--vd-vien); border-radius: var(--vd-r-lon);
  padding: 30px; box-shadow: var(--vd-bong-the); margin-bottom: 22px;
}
.vd-card--center { text-align: center; }
.vd-card--center .vd-btn { margin: 6px 5px 0; }

.vd-grid { display: grid; gap: 22px; }
.vd-grid--3     { grid-template-columns: repeat(auto-fit, minmax(268px, 1fr)); }
.vd-grid--cards { grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); }

/* ── Trang chọn sau khi quét QR ─────────────────────────────────────────── */

.vd-chooser {
  min-height: 78vh; display: flex; align-items: center; justify-content: center;
  background: linear-gradient(170deg, var(--vd-hai-quan) 0%, var(--vd-hai-quan-2) 100%);
  padding: 56px 20px;
}
.vd-chooser__inner { max-width: 720px; width: 100%; text-align: center; color: #fff; }
.vd-chooser__partner { font-family: var(--vd-serif); font-size: 25px; color: var(--vd-vang-sang); margin: 6px 0 26px; }
.vd-chooser__title { font-family: var(--vd-serif); font-size: clamp(32px, 5vw, 46px); font-weight: 600; color: #fff; }
.vd-chooser__sub   { color: rgba(255,255,255,.76); margin-top: 10px; font-size: 17px; }
.vd-chooser__grid  { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 18px; margin-top: 38px; }
.vd-choice {
  display: block; padding: 34px 24px; border-radius: var(--vd-r-lon); text-decoration: none;
  background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.16);
  transition: background .2s ease, transform .2s ease, border-color .2s ease;
}
.vd-choice:hover { background: rgba(255,255,255,.13); transform: translateY(-3px); border-color: var(--vd-vang); }
.vd-choice--gold { background: var(--vd-vang); border-color: var(--vd-vang); }
.vd-choice--gold:hover { background: var(--vd-vang-sang); }
.vd-choice__icon  { display: block; font-size: 34px; }
.vd-choice__title { display: block; font-family: var(--vd-serif); font-size: 23px; font-weight: 600; color: #fff; margin-top: 12px; }
.vd-choice--gold .vd-choice__title { color: var(--vd-hai-quan); }
.vd-choice__desc  { display: block; font-size: 14px; line-height: 1.6; color: rgba(255,255,255,.72); margin-top: 8px; }
.vd-choice--gold .vd-choice__desc { color: rgba(14,27,51,.72); }

/* ── Hero ───────────────────────────────────────────────────────────────── */

.vd-hero {
  background: linear-gradient(165deg, var(--vd-hai-quan) 0%, var(--vd-hai-quan-2) 62%, #24365C 100%);
  color: #fff; padding: 92px 20px 84px; position: relative; overflow: hidden;
}
.vd-hero:after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px;
  background: linear-gradient(90deg, var(--vd-vang-dam), var(--vd-vang-sang), var(--vd-vang), var(--vd-vang-dam));
}
.vd-hero__inner { max-width: var(--vd-max); margin: 0 auto; }
.vd-hero__title { font-family: var(--vd-serif); font-size: clamp(34px, 5.6vw, 58px); font-weight: 600; line-height: 1.1; margin: 14px 0 18px; letter-spacing: -.02em; }
.vd-hero__lead  { font-size: 17.5px; line-height: 1.8; color: rgba(255,255,255,.78); max-width: 62ch; }
.vd-hero__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 18px; margin: 40px 0 34px; }
.vd-hero__stats div { padding: 20px 22px; background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--vd-r-vua); }
.vd-hero__stats strong { display: block; font-size: 27px; font-weight: 700; color: var(--vd-vang-sang); }
.vd-hero__stats span   { display: block; font-size: 13px; color: rgba(255,255,255,.66); margin-top: 5px; line-height: 1.5; }
.vd-hero__cta { display: flex; flex-wrap: wrap; gap: 12px; }

/* ── Thẻ voucher ────────────────────────────────────────────────────────── */

.vd-voucher-card {
  position: relative; background: #fff; border: 1px solid var(--vd-vien);
  border-radius: var(--vd-r-lon); overflow: hidden; box-shadow: var(--vd-bong-the);
  display: flex; flex-direction: column; transition: transform .22s ease, box-shadow .22s ease;
}
.vd-voucher-card:hover { transform: translateY(-4px); box-shadow: var(--vd-bong-cao); }
.vd-voucher-card__flag {
  position: absolute; top: 16px; right: 16px; z-index: 2;
  background: var(--vd-vang); color: var(--vd-hai-quan);
  font-size: 12px; font-weight: 700; letter-spacing: .04em;
  padding: 7px 14px; border-radius: var(--vd-r-tron); box-shadow: var(--vd-bong-nhe);
}
.vd-voucher-card__img {
  height: 178px; overflow: hidden; background-color: var(--vd-cat-dam);
}
.vd-voucher-card__img img {
  display: block; width: 100%; height: 100%; object-fit: cover;
}
.vd-voucher-card__img--blank {
  background: linear-gradient(140deg, var(--vd-hai-quan) 0%, var(--vd-hai-quan-2) 100%);
}
.vd-voucher-card__body  { padding: 26px; display: flex; flex-direction: column; flex: 1; }
.vd-voucher-card__title { font-family: var(--vd-serif); font-size: 22px; font-weight: 600; color: var(--vd-chu-dam); line-height: 1.3; }
.vd-voucher-card__desc  { font-size: 14.5px; line-height: 1.7; color: var(--vd-chu-mo); margin-top: 9px; }
.vd-voucher-card__value {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 16px;
  margin: 20px 0 4px; padding: 18px; border-radius: var(--vd-r-vua);
  background: var(--vd-cat); border: 1px dashed var(--vd-vang);
}
.vd-voucher-card__price { text-align: right; }
.vd-face  { font-size: 17px; font-weight: 600; color: var(--vd-chu-mo); text-decoration: line-through; margin-top: 3px; }
.vd-price  { font-size: 25px; font-weight: 700; color: var(--vd-vang-dam); margin-top: 3px; }

.vd-ticks { list-style: none; margin: 18px 0 22px; padding: 0; }
.vd-ticks li { position: relative; padding-left: 26px; font-size: 14.5px; line-height: 1.9; color: var(--vd-chu); }
.vd-ticks li:before {
  content: '✓'; position: absolute; left: 0; top: 0;
  color: var(--vd-vang-dam); font-weight: 700;
}
.vd-ticks--two { columns: 2; column-gap: 34px; }
.vd-voucher-card .vd-btn { margin-top: auto; }

/* ── Thanh mã giới thiệu ────────────────────────────────────────────────── */

.vd-refbar {
  display: flex; align-items: center; gap: 10px;
  background: var(--vd-cat); border: 1px solid var(--vd-vang);
  border-radius: var(--vd-r-tron); padding: 12px 22px; margin-bottom: 30px;
  font-size: 14.5px; color: var(--vd-chu-dam);
}
.vd-refbar__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--vd-tot); flex: none; }

/* ── Biểu mẫu ───────────────────────────────────────────────────────────── */

.vd-field { display: block; margin-bottom: 16px; border: 0; padding: 0; }
.vd-field > span { display: block; font-size: 13.5px; font-weight: 600; color: var(--vd-chu-dam); margin-bottom: 7px; }
.vd-field input,
.vd-field select,
.vd-field textarea {
  width: 100%; padding: 13px 16px; font-family: var(--vd-sans); font-size: 15.5px;
  color: var(--vd-chu-dam); background: #fff;
  border: 1.5px solid var(--vd-vien); border-radius: var(--vd-r-nho);
  transition: border-color .16s ease, box-shadow .16s ease;
}
.vd-field input:focus,
.vd-field select:focus,
.vd-field textarea:focus {
  outline: 0; border-color: var(--vd-vang);
  box-shadow: 0 0 0 3px rgba(201, 169, 110, .18);
}
.vd-formgrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 0 18px; }

.vd-radios { display: grid; gap: 9px; }
.vd-radio {
  display: flex; align-items: center; gap: 11px; padding: 13px 16px;
  border: 1.5px solid var(--vd-vien); border-radius: var(--vd-r-nho); cursor: pointer;
  font-size: 15px; transition: border-color .16s ease, background .16s ease;
}
.vd-radio:hover { border-color: var(--vd-vang); }
.vd-radio input { accent-color: var(--vd-vang-dam); width: 17px; height: 17px; }
.vd-radio:has(input:checked) { border-color: var(--vd-vang); background: var(--vd-cat); }

/* ── Thông báo ──────────────────────────────────────────────────────────── */

.vd-alert { margin-top: 14px; padding: 13px 18px; border-radius: var(--vd-r-nho); font-size: 14.5px; line-height: 1.6; }
.vd-alert--good { background: #E4F1EA; color: #1E5F44; border: 1px solid #B9DECB; }
.vd-alert--bad  { background: #FBE9E7; color: #8E2A24; border: 1px solid #F0C4BF; }
.vd-warn {
  margin: 16px 0; padding: 13px 18px; border-radius: var(--vd-r-nho);
  background: #FBF3E3; border: 1px solid #E6D4AC; color: #7A5A1C; font-size: 14px; line-height: 1.6;
}

/* ── Cửa sổ mua ─────────────────────────────────────────────────────────── */

.vd-modal {
  position: fixed; inset: 0; z-index: 9999; background: rgba(14, 27, 51, .58);
  display: flex; align-items: flex-start; justify-content: center; overflow-y: auto; padding: 28px 16px;
  backdrop-filter: blur(3px);
}
.vd-modal[hidden] { display: none; }
.vd-modal__sheet {
  position: relative; background: #fff; border-radius: var(--vd-r-lon);
  width: 100%; max-width: 500px; padding: 34px; box-shadow: var(--vd-bong-cao);
  animation: vd-rise .24s ease;
}
@keyframes vd-rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.vd-modal__x {
  position: absolute; top: 14px; right: 16px; width: 36px; height: 36px;
  border: 0; background: transparent; font-size: 27px; line-height: 1;
  color: var(--vd-chu-mo); cursor: pointer; border-radius: 50%;
}
.vd-modal__x:hover { background: var(--vd-cat); color: var(--vd-chu-dam); }

.vd-done { text-align: center; margin-bottom: 22px; }
.vd-done__tick {
  width: 62px; height: 62px; margin: 0 auto 16px; border-radius: 50%;
  background: #E4F1EA; color: var(--vd-tot);
  display: flex; align-items: center; justify-content: center; font-size: 31px;
}
.vd-codes { margin: 18px 0; text-align: center; }
.vd-codechip {
  display: inline-block; margin: 7px 5px 0; padding: 11px 20px;
  background: var(--vd-cat); border: 1px dashed var(--vd-vang); border-radius: var(--vd-r-nho);
  font-size: 17px; font-weight: 700; letter-spacing: .09em; color: var(--vd-chu-dam);
}

.vd-payqr { display: flex; gap: 22px; flex-wrap: wrap; align-items: flex-start; margin: 18px 0; }
.vd-payqr img { border: 1px solid var(--vd-vien); border-radius: var(--vd-r-vua); padding: 9px; background: #fff; }
.vd-payqr__info { flex: 1 1 210px; }
.vd-payqr__amount { font-size: 27px; font-weight: 700; color: var(--vd-vang-dam); margin: 3px 0 12px; }
.vd-payqr__row { display: flex; justify-content: space-between; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--vd-cat-dam); font-size: 14px; }
.vd-payqr__row span { color: var(--vd-chu-mo); }

/* ── Bảng ───────────────────────────────────────────────────────────────── */

.vd-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 14.5px; }
.vd-table th {
  text-align: left; padding: 11px 12px; font-size: 11.5px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: var(--vd-chu-mo);
  border-bottom: 1.5px solid var(--vd-vien);
}
.vd-table td { padding: 13px 12px; border-bottom: 1px solid var(--vd-cat-dam); color: var(--vd-chu); }
.vd-table tbody tr:hover { background: var(--vd-cat); }
.vd-table--tight td, .vd-table--tight th { padding: 9px 10px; }

/* ── Bậc hoa hồng ───────────────────────────────────────────────────────── */

.vd-tier {
  text-align: center; padding: 36px 26px; border-radius: var(--vd-r-lon);
  background: #fff; border: 1px solid var(--vd-vien); box-shadow: var(--vd-bong-the);
}
.vd-tier--mid { border-color: var(--vd-vang-sang); }
.vd-tier--top { background: linear-gradient(165deg, var(--vd-hai-quan), var(--vd-hai-quan-2)); border-color: var(--vd-vang); }
.vd-tier__rate { font-family: var(--vd-serif); font-size: 48px; font-weight: 600; color: var(--vd-vang-dam); line-height: 1; }
.vd-tier--top .vd-tier__rate { color: var(--vd-vang-sang); }
.vd-tier__range { margin-top: 14px; font-size: 14.5px; line-height: 1.7; color: var(--vd-chu-mo); }
.vd-tier--top .vd-tier__range { color: rgba(255,255,255,.74); }
.vd-tier__range strong { color: var(--vd-chu-dam); font-size: 16px; }
.vd-tier--top .vd-tier__range strong { color: #fff; }

.vd-bonusbar {
  margin: 26px 0 8px; padding: 30px; border-radius: var(--vd-r-lon);
  background: var(--vd-cat); border: 1px dashed var(--vd-vang);
}
.vd-bonusbar .vd-h3 { margin: 9px 0; }
.vd-bonusbar strong { color: var(--vd-vang-dam); }

/* ── Tính năng, các bước ────────────────────────────────────────────────── */

.vd-feature {
  padding: 30px; background: #fff; border: 1px solid var(--vd-vien);
  border-radius: var(--vd-r-lon); box-shadow: var(--vd-bong-nhe);
}
.vd-feature__ico { font-size: 30px; }
.vd-feature h3 { margin: 13px 0 9px; }
.vd-feature p  { font-size: 14.5px; line-height: 1.75; color: var(--vd-chu-mo); }

.vd-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.vd-steps li { display: flex; gap: 16px; padding: 24px; background: #fff; border: 1px solid var(--vd-vien); border-radius: var(--vd-r-lon); }
.vd-steps li > span {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  background: var(--vd-hai-quan); color: var(--vd-vang-sang);
  display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 16px;
}
.vd-steps strong { display: block; color: var(--vd-chu-dam); font-size: 16px; }
.vd-steps p { font-size: 14px; line-height: 1.7; color: var(--vd-chu-mo); margin-top: 5px; }

/* ── Cổng đối tác ───────────────────────────────────────────────────────── */

.vd-portal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 30px; }
.vd-refcode { color: var(--vd-vang-dam); letter-spacing: .12em; }

.vd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(214px, 1fr)); gap: 16px; margin-bottom: 22px; }
.vd-stat { padding: 24px; border-radius: var(--vd-r-lon); background: #fff; border: 1px solid var(--vd-vien); box-shadow: var(--vd-bong-nhe); }
.vd-stat__val { font-size: 29px; font-weight: 700; color: var(--vd-chu-dam); line-height: 1.15; margin-top: 7px; }
.vd-stat__sub { font-size: 13px; color: var(--vd-chu-mo); margin-top: 6px; line-height: 1.5; }
.vd-stat--gold { background: var(--vd-cat); border-color: var(--vd-vang); }
.vd-stat--gold .vd-stat__val { color: var(--vd-vang-dam); }
.vd-stat--navy { background: linear-gradient(160deg, var(--vd-hai-quan), var(--vd-hai-quan-2)); border-color: var(--vd-hai-quan); }
.vd-stat--navy .vd-mini,
.vd-stat--navy .vd-stat__sub { color: rgba(255,255,255,.66); }
.vd-stat--navy .vd-stat__val { color: var(--vd-vang-sang); }

.vd-bonus__head  { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; }
.vd-bonus__title { font-size: 16.5px; line-height: 1.6; color: var(--vd-chu-dam); margin-top: 6px; }
.vd-bonus__pct   { font-size: 31px; font-weight: 700; color: var(--vd-vang-dam); flex: none; }
.vd-progress { height: 10px; border-radius: var(--vd-r-tron); background: var(--vd-cat-dam); overflow: hidden; margin: 16px 0 7px; }
.vd-progress span { display: block; height: 100%; border-radius: var(--vd-r-tron); background: linear-gradient(90deg, var(--vd-vang-dam), var(--vd-vang-sang)); transition: width .5s ease; }
.vd-bonus__scale { display: flex; justify-content: space-between; font-size: 12px; color: var(--vd-chu-mo); }

.vd-qrpane { display: flex; gap: 30px; flex-wrap: wrap; align-items: flex-start; }
.vd-qrpane__left  { flex: none; }
.vd-qrpane__left img { border: 1px solid var(--vd-vien); border-radius: var(--vd-r-vua); padding: 11px; background: #fff; }
.vd-qrpane__right { flex: 1 1 300px; }
.vd-copyrow { display: flex; gap: 9px; margin: 16px 0 12px; }
.vd-copyrow input {
  flex: 1; padding: 12px 15px; border: 1.5px solid var(--vd-vien); border-radius: var(--vd-r-nho);
  font-family: var(--vd-sans); font-size: 14px; color: var(--vd-chu-dam); background: var(--vd-cat);
}
.vd-btnrow { display: flex; flex-wrap: wrap; gap: 9px; }
.vd-btnrow .vd-btn { padding: 12px 22px; font-size: 14px; }

/* ── Quầy ───────────────────────────────────────────────────────────────── */

.vd-counter__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 18px; flex-wrap: wrap; }
.vd-counter__code { font-size: 25px; font-weight: 700; letter-spacing: .09em; color: var(--vd-chu-dam); margin: 5px 0 3px; }
.vd-counter__nums { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 16px; margin: 22px 0; }
.vd-num { font-size: 25px; font-weight: 700; color: var(--vd-chu-dam); margin-top: 5px; }
.vd-num--red { color: var(--vd-loi); }
.vd-num--sm  { font-size: 17px; }
.vd-counter__ops { display: grid; grid-template-columns: repeat(auto-fit, minmax(232px, 1fr)); gap: 18px; }
.vd-op { padding: 20px; border-radius: var(--vd-r-vua); background: var(--vd-cat); border: 1px solid var(--vd-vien); }
.vd-op__row { display: flex; gap: 9px; margin-top: 9px; }
.vd-op__row input { flex: 1; padding: 12px 14px; border: 1.5px solid var(--vd-vien); border-radius: var(--vd-r-nho); font-family: var(--vd-sans); font-size: 16px; }
.vd-op__row .vd-btn { padding: 12px 22px; font-size: 14px; }

.vd-badge {
  padding: 8px 16px; border-radius: var(--vd-r-tron); font-size: 12px; font-weight: 700;
  letter-spacing: .08em; background: var(--vd-cat-dam); color: var(--vd-chu-mo); white-space: nowrap;
}
.vd-badge--paid    { background: #E4F1EA; color: var(--vd-tot); }
.vd-badge--unpaid  { background: #FBE9E7; color: var(--vd-loi); }
.vd-badge--expired { background: #FBF3E3; color: var(--vd-canh-bao); }
.vd-badge--used,
.vd-badge--void    { background: #EEF1F5; color: var(--vd-chu-mo); }

/* ── Điện thoại ─────────────────────────────────────────────────────────── */

@media (max-width: 720px) {
  .vd-shell { padding: 38px 16px 64px; }
  .vd-card  { padding: 22px; border-radius: var(--vd-r-vua); }
  .vd-hero  { padding: 62px 16px 56px; }
  .vd-section-head { margin: 50px 0 26px; }
  .vd-ticks--two { columns: 1; }
  .vd-modal__sheet { padding: 26px 20px; }
  .vd-qrpane { justify-content: center; }
  .vd-portal__head { flex-direction: column; }
}

/* ── Thẻ chuyển đăng nhập / đăng ký ─────────────────────────────────────── */

.vd-tabs { display: flex; gap: 6px; margin-bottom: 22px; padding: 5px; background: var(--vd-cat); border-radius: var(--vd-r-tron); }
.vd-tab {
  flex: 1; padding: 11px 18px; border: 0; border-radius: var(--vd-r-tron); cursor: pointer;
  font-family: var(--vd-sans); font-size: 14.5px; font-weight: 600;
  background: transparent; color: var(--vd-chu-mo); transition: background .18s ease, color .18s ease;
}
.vd-tab.is-on { background: #fff; color: var(--vd-chu-dam); box-shadow: var(--vd-bong-nhe); }

/* ── Bảng rộng trên màn hẹp ─────────────────────────────────────────────── */
/* Bảng nhiều cột không co lại được. Cho nó cuộn TRONG khung của chính nó,
   thay vì đẩy cả trang trượt ngang — trang trượt ngang trên điện thoại là lỗi. */
.vd-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vd-scroll .vd-table { min-width: 520px; }