/* ==========================================================================
   Vạn An Travel — hệ thiết kế
   Token lấy TRỰC TIẾP từ file Figma "Vạn An Travel 2026" (trang Themes),
   trích qua Figma API ngày 12/08/2026.

   Những chỗ tôi ĐỔI so với Figma đều ghi rõ bằng ghi chú "ĐỔI:" —
   xem Phần 4 của tài liệu kế hoạch để biết lý do.
   ========================================================================== */

:root {
  /* ---------- Primary (nguyên bản Figma) ---------- */
  --primary:          #076AE2;
  --primary-dark:     #044A9E;
  --primary-light:    #3887E7;
  --primary-variant:  #1207E2;
  --primary-wash:     #EAF2FD;   /* thêm: nền nhạt cho khối nhấn */
  --primary-line:     #C3DAF8;   /* thêm: viền nhạt */

  /* ---------- Secondary (nguyên bản Figma) ---------- */
  --secondary:        #0F3B70;
  --secondary-dark:   #0A294E;
  --secondary-light:  #3F628C;
  --secondary-variant:#002A5D;

  /* ---------- Nền / mặt phẳng (nguyên bản Figma) ---------- */
  --background:       #FFFFFF;
  --surface:          #F0F0F0;
  --surface-soft:     #F7F8FA;   /* thêm: một cấp nhạt hơn Surface */

  /* ---------- Mực ----------
     ĐỔI: Figma khai "On Background" và "On Surface" đều là #FFFFFF —
     chữ trắng trên nền trắng, tức vô hình. Thực tế thiết kế dùng #06202B
     (76 lần) làm màu chữ chính, nên tôi lấy giá trị đó.                     */
  --ink:              #06202B;   /* ĐỔI từ #FFFFFF */
  --ink-2:            #45525C;   /* thêm: chữ phụ */
  --ink-3:            #6D7A85;   /* thêm */
  --ink-muted:        #939393;   /* nguyên bản: đang dùng 30 lần trong file */
  --line:             #DFE3E8;   /* thêm: viền */
  --line-2:           #C7CDD4;   /* thêm */

  /* ---------- Hành động ----------
     ĐỔI: Figma chưa khai báo màu CTA. File đang dùng #F45B26 (9 lần)
     và #FF8D0A (5 lần) mà không khai. Tôi chốt #F45B26 làm màu CTA
     DUY NHẤT và không dùng nó cho việc gì khác — cách pystravel dùng cam.  */
  --cta:              #F45B26;
  --cta-dark:         #D2410F;
  --cta-wash:         #FEF0EB;

  /* ---------- Trạng thái ----------
     ĐỔI: Figma chỉ có Error. Bảng lịch khởi hành cần 3 trạng thái,
     nên tôi thêm success và warning.                                       */
  --error:            #C62828;   /* nguyên bản Figma */
  --error-wash:       #FBEAEA;
  --success:          #1C7A4A;   /* thêm */
  --success-wash:     #E7F5EE;
  --warning:          #9A5B00;   /* thêm */
  --warning-wash:     #FDF3E2;
  --star:             #F0CC00;   /* nguyên bản: đang dùng cho sao đánh giá */

  /* ---------- Chữ ----------
     Font Open Sans (nguyên bản). Cỡ 14/16/20/24 (nguyên bản).
     ĐỔI: thêm cấp 28px cho H1 — cỡ lớn nhất trong Figma chỉ 24px,
     hơi nhẹ cho H1; pystravel dùng 26px.
     ĐỔI: giãn dòng. Figma dùng 16/22 = 1,375 và 24/24 = 1,0 — quá chật
     cho tiếng Việt vì dấu chồng lên nhau (ẫ, ộ, ệ).                        */
  --font: "Open Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --fs-sm:   14px;
  --fs-base: 16px;
  --fs-md:   20px;
  --fs-lg:   24px;
  --fs-xl:   28px;   /* thêm */
  --lh-tight: 1.3;
  --lh-body:  1.6;   /* ĐỔI từ 1,375 */

  /* ---------- Lưới 4px (nguyên bản Figma) ---------- */
  --s1: 4px;   --s2: 8px;   --s3: 12px;  --s4: 16px;  --s6: 24px;
  --s8: 32px;  --s10: 40px; --s12: 48px; --s14: 56px; --s16: 64px;
  --s18: 72px; --s20: 80px; --s24: 96px;

  /* ---------- Bo góc (nguyên bản Figma) ---------- */
  --r:      12px;
  --r-sm:   4px;
  --r-lg:   16px;
  --r-pill: 999px;

  /* ---------- Chrome ----------
     ĐỔI: header Figma cao 96px. Trên mobile, 96px dính ăn ~12% màn hình
     812px, cộng thanh giá dính đáy thì nội dung còn rất hẹp.
     pystravel dùng 64px.                                                   */
  --header-h:    64px;   /* ĐỔI từ 96px */
  --header-h-mb: 56px;
  --bottombar-h: 72px;
  --maxw:        1200px;
  --gut:         clamp(16px, 3.5vw, 32px);

  --sh-1: 0 1px 2px rgba(6,32,43,.06), 0 1px 3px rgba(6,32,43,.05);
  --sh-2: 0 6px 20px rgba(6,32,43,.10);
}

* { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* bỏ delay 300ms do double-tap-to-zoom trên mobile */
  touch-action: manipulation;
  /* đặt màu nháy khi chạm một cách có chủ đích, thay vì để mặc định xám đen */
  -webkit-tap-highlight-color: rgba(7, 106, 226, .16);
}

body {
  margin: 0;
  background: var(--background);
  color: var(--ink);
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-body);
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--primary); text-decoration: none; }
a:hover { text-decoration: underline; }

:where(a, button, summary, input, select, [tabindex]):focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}

/* ĐỔI: Figma viết H1 và tiêu đề card IN HOA. Tiếng Việt có dấu rất khó đọc
   khi in hoa — dấu chồng lên chiều cao chữ và mất hình dạng từ.
   Trang danh sách trong Figma đã dùng chữ thường, nên tôi áp dụng nhất quán. */
h1, h2, h3, h4 { margin: 0; letter-spacing: -.01em; text-wrap: balance; text-transform: none; }
h1 { font-size: var(--fs-xl); line-height: var(--lh-tight); font-weight: 700; }
h2 { font-size: var(--fs-lg); line-height: 1.32; font-weight: 700; }
h3 { font-size: var(--fs-md); line-height: 1.35; font-weight: 700; }
h4 { font-size: var(--fs-base); line-height: 1.4; font-weight: 700; }
p  { margin: 0 0 var(--s3); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut); }

/* ---------- vùng bấm: sàn 44px ----------
   Đo được ở Phần 2: website hiện tại có 87% vùng bấm dưới 44px,
   pystravel 48%. Đây là sàn cứng.                                          */
button, .btn, .chip-date, .tab, select, input, summary { min-height: 44px; }

/* ---------- nút ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  padding: var(--s3) var(--s6); min-height: 48px;
  border: 1.5px solid transparent; border-radius: var(--r);
  font: inherit; font-weight: 700; cursor: pointer; text-align: center;
}
.btn:hover { text-decoration: none; }
/* ĐỔI: trong Figma nút CTA là nút VIỀN, nên dải cam chứa giá hút hết chú ý
   rồi nút hành động lại là phần tử nhạt nhất. Đảo lại: CTA tô đầy.         */
.btn-cta    { background: var(--cta); color: #fff; }
.btn-cta:hover { background: var(--cta-dark); }
.btn-zalo   { background: var(--primary); color: #fff; }
.btn-zalo:hover { background: var(--primary-dark); }
.btn-ghost  { background: #fff; color: var(--primary); border-color: var(--line-2); }
.btn-ghost:hover { background: var(--primary-wash); border-color: var(--primary-line); }
.btn-block  { width: 100%; }
/* min-height vẫn giữ sàn 44px — btn-sm chỉ nhỏ hơn về chữ và padding ngang,
   không được phá sàn vùng bấm. */
.btn-sm     { min-height: 44px; padding: var(--s2) var(--s4); font-size: var(--fs-sm); }
/* .btn-lg từng được dùng ở 4 nút — gồm CTA chính của trang B2B và nút Zalo trang
   chủ — mà KHÔNG hề được khai ở đâu, nên bốn nút đó vẫn ra cỡ thường. Phép kiểm
   quét động tên lớp bắt được ngày 23/08/2026. Đây đúng kiểu lỗi im lặng: markup
   trông có chủ ý, kết quả thì không có gì xảy ra. */
.btn-lg     { min-height: 56px; padding: var(--s4) var(--s8); font-size: 17px; }

/* ---------- nhãn ---------- */
.tag {
  display: inline-flex; align-items: center; gap: var(--s1);
  padding: 3px 10px; border-radius: var(--r-sm);
  font-size: 13px; font-weight: 700; min-height: 0; line-height: 1.5;
}
.tag-hot     { background: var(--cta);         color: #fff; }
.tag-ok      { background: var(--success-wash); color: var(--success); }
.tag-warn    { background: var(--warning-wash); color: var(--warning); }
.tag-full    { background: var(--surface);      color: var(--ink-muted); }
.tag-brand   { background: var(--primary-wash); color: var(--primary-dark); }

.meta {
  display: inline-flex; align-items: center; gap: var(--s2);
  font-size: var(--fs-sm); color: var(--ink-2);
}
.meta svg { flex: none; color: var(--primary); }

.muted { color: var(--ink-muted); }
.small { font-size: var(--fs-sm); }
.strike { text-decoration: line-through; color: var(--ink-muted); font-size: var(--fs-sm); }
.sr-only {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- .proto-note đã bỏ khi chuyển sang theme ----------
   Khối ghi chú của bản mẫu, chính CSS gốc ghi "xoá khi lên thật". Theme không
   in khối đó ở đâu, nên giữ lại luật là để CSS chết. */

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
}

/* Số trong cột bảng phải thẳng hàng: giá, số chỗ, ngày */
table.dep .p, table.dep .pc, table.dep .d,
table.tiers .p, table.tbl td b,
.booking .price-band .now, .tcard .pricerow .now, .trow .pr .now,
.calc-out td:last-child, .b-cta { font-variant-numeric: tabular-nums; }