/* =========================================================
   Mây Travel – Design tokens
   Phong cách "mộc": xanh rêu trầm + cam đất, chữ Playfair nhấn nghiêng.
   Mọi màu / bo góc / bóng dùng qua biến ở đây (không hardcode hex nơi khác).
   ========================================================= */
:root {
  /* ---- Màu thương hiệu (cam đất – CTA, link, giá) ---- */
  --mt-primary:        #D6532E; /* nút chính, link, tab active */
  --mt-primary-dark:   #B8431F; /* hover, chữ trên nền primary-soft */
  --mt-primary-soft:   #FBEDE6; /* nền chip, nền icon */
  --mt-primary-tint:   #FCF6F1; /* nền item đang chọn (gói, ngày, ngày lịch trình mở) */
  --mt-primary-line:   #ECC6B4; /* viền ngày lịch trình đang mở */
  --mt-hero:           #203632; /* nền hero xanh rêu (khi chưa có ảnh) */

  --mt-price:          #D6532E; /* giá, badge giảm giá – cùng tông cam đất */
  --mt-price-soft:     #FBEDE6;
  --mt-highlight:      #F4C492; /* badge "Ưu đãi", "Tiết kiệm nhất", "Combo" (cát ấm) */
  --mt-meal:           #B4622B; /* chữ chip bữa ăn */
  --mt-meal-soft:      #FBF0E4;
  --mt-star:           #DE8A28;

  --mt-success:        #2F7A5F; /* khách sạn, "Còn x chỗ", dấu check */
  --mt-success-soft:   #E5F1EB;
  --mt-danger:         #BB4127; /* "Chỉ còn x chỗ", "Không bao gồm" */

  /* ---- Trung tính (nền ấm, mực xanh rêu) ---- */
  --mt-ink:            #203632; /* chữ chính, nền topbar & footer */
  --mt-ink-2:          #2F4A44; /* chữ đoạn văn dài */
  --mt-muted:          #647069; /* chữ phụ (đạt 4.5:1 trên nền sáng) */
  --mt-muted-2:        #A6B0AB; /* viền radio chưa chọn */
  --mt-line:           #E8EAE6; /* viền card */
  --mt-line-2:         #DEE2DC; /* viền input, đường kẻ đứt giá */
  --mt-line-3:         #D2D7CF; /* viền nút outline */
  --mt-line-soft:      #EEF0EB; /* kẻ trong card */
  --mt-bg:             #F7F7F3; /* nền trang (be ấm) */
  --mt-surface:        #FFFFFF;
  --mt-chip:           #F1F3EF; /* chip trung tính */

  --mt-footer-text:    #C3CCC7;
  --mt-footer-line:    #33473F;
  --mt-footer-chip:    #2A3E38;
  --mt-topbar-text:    #D3DAD5;

  /* ---- Typography ---- */
  --mt-font:       'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mt-font-serif: 'Playfair Display', Georgia, 'Times New Roman', serif; /* nhấn nghiêng tiêu đề, trích dẫn */
  --mt-accent-sand: #F4C492; /* màu chữ nhấn nghiêng trên nền tối (hero) */
  --mt-fs-hero: 56px;   /* H1 hero, lh 1.12, ls -0.025em */
  --mt-fs-h1: 36px;     /* H1 trang danh sách; trang chi tiết 34px */
  --mt-fs-h2: 34px;     /* tiêu đề section trang chủ */
  --mt-fs-h2-sm: 28px;  /* "Tour tương tự" */
  --mt-fs-h3: 22px;     /* tiêu đề card section trang chi tiết */
  --mt-fs-lead: 19px;
  --mt-fs-body: 15px;
  --mt-fs-sm: 14px;
  --mt-fs-xs: 13px;
  --mt-fs-2xs: 12px;
  --mt-fw-regular: 400;
  --mt-fw-medium: 500;
  --mt-fw-semibold: 600;
  --mt-fw-bold: 700;
  --mt-fw-black: 800;

  /* ---- Khoảng cách / lưới ---- */
  --mt-container: 1260px;
  --mt-gutter: 24px;
  --mt-section-gap: 80px;
  --mt-card-pad: 28px;
  --mt-sidebar-filter: 288px;
  --mt-sidebar-booking: 400px;

  /* ---- Bo góc (dịu, editorial – nút & input gọn, card 12px) ---- */
  --mt-r-sm: 6px;    /* badge, chip */
  --mt-r-md: 8px;
  --mt-r-lg: 8px;    /* nút, input */
  --mt-r-xl: 12px;   /* card */
  --mt-r-2xl: 16px;  /* search box, booking box, gallery, tile điểm đến */
  --mt-r-3xl: 20px;  /* banner combo, newsletter */
  --mt-r-pill: 999px;

  /* ---- Đổ bóng (nhạt, ám xanh rêu – ưu tiên viền hơn bóng) ---- */
  --mt-shadow-search: 0 16px 40px rgba(20, 32, 29, .14);
  --mt-shadow-booking: 0 12px 28px rgba(20, 32, 29, .07);

  /* ---- Kích thước chạm ---- */
  --mt-touch: 44px;
  --mt-btn-lg: 52px;
}

/* ---- Bổ sung theme (vẫn thuộc hệ tokens) ---- */
:root {
  --mt-white:          #FFFFFF;
  --mt-hero-2:         #2A4A42; /* lớp núi hero placeholder */
  --mt-hero-3:         #35594F;
  --mt-hero-4:         #416B5F;
  --mt-hero-text:      #DDE7E2;
  --mt-footer-accent:  #E8A06A;
  --mt-upsell-flight-line: #7FA9E8;
  --mt-upsell-hotel-line:  #6DBB9C;
  --mt-overlay:        rgba(20, 32, 29, .55);
  --mt-overlay-soft:   rgba(0, 0, 0, .3);
  --mt-overlay-hero:   linear-gradient(180deg, rgba(20, 32, 29, .12) 0%, rgba(20, 32, 29, .38) 45%, rgba(20, 32, 29, .78) 100%);
  --mt-overlay-hero-side: linear-gradient(90deg, rgba(12, 39, 33, .73), rgba(12, 39, 33, .18) 65%), linear-gradient(0deg, rgba(10, 35, 30, .35), transparent 50%); /* hero dạng khối: tối bên trái cho chữ */
  --mt-overlay-tile:   linear-gradient(180deg, rgba(20, 32, 29, 0) 35%, rgba(20, 32, 29, .72) 100%);
  --mt-glass:          rgba(255, 255, 255, .92);
  --mt-shade:          rgba(0, 0, 0, .14);
  --mt-white-20:       rgba(255, 255, 255, .2);
  --mt-overlay-hero-mobile: linear-gradient(180deg, rgba(12, 39, 33, .62) 0%, rgba(12, 39, 33, .38) 55%, rgba(12, 39, 33, .72) 100%); /* hero trên điện thoại: chữ phủ cả khung */
  --mt-white-40:       rgba(255, 255, 255, .4);
  --mt-white-55:       rgba(255, 255, 255, .55);
  --mt-backdrop:       rgba(20, 32, 29, .6);
  --mt-shadow-card:    0 6px 18px rgba(20, 32, 29, .06);
  --mt-shadow-searchbar: 0 15px 40px rgba(38, 60, 43, .06);
  --mt-shadow-bar:     0 -8px 24px rgba(20, 32, 29, .10);
  --mt-header-h:       76px;
  --mt-topbar-h:       36px;
}