/* ==========================================================================
   AURA ASIA TRAVEL — site-2026.css
   Header + Footer dùng chung toàn site (bản 2026).
   Nguồn thiết kế: html/assets/css/style.css (chỉ phần header, footer, button, icon).
   Mọi selector đều scope dưới .site-header / .site-footer để KHÔNG ảnh hưởng
   các trang cũ (Bootstrap đã định nghĩa .btn, .dropdown, .container...).
   ========================================================================== */

/* ---------- Design tokens: copy nguyên từ html/assets/css/style.css ---------- */
:root {
  /* Brand */
  --color-primary: #11A298;
  --color-primary-dark: #0B817A;
  --color-primary-light: #DFF1EE;

  --color-accent: #F0A42E;
  --color-accent-dark: #D98A18;
  --color-accent-light: #FFF3DF;
  --color-on-accent: #FFFFFF;

  /* Neutral colors */
  --color-heading: #172C32;
  --color-text: #5C6B70;
  --color-text-light: #7B898D;
  --color-white: #FFFFFF;
  --color-background: #FFFFFF;
  --color-background-soft: #EFF8F6;
  --color-border: #E4ECEA;
  --color-footer: #FBF6EF;                       /* mock 2026-10-28: nền footer kem */
  --color-footer-mobile: #54A8A3;                /* mock 2026-10-28: nền footer mobile như ảnh */
  --footer-accent-height: 6px;                   /* dải cam trên mép footer mobile */
  --footer-mobile-text: rgba(255, 255, 255, .9);
  --footer-mobile-link: rgba(255, 255, 255, .78);
  --footer-mobile-divider: rgba(255, 255, 255, .25);
  --social-facebook: #3B5998;                    /* mock 2026-10-28: icon Facebook footer mobile */
  --social-youtube: #4CAF50;                     /* mock: icon YouTube footer mobile */
  --social-instagram: linear-gradient(45deg, #FEDA75 0%, #FA7E1E 30%, #D62976 60%, #962FBF 80%, #4F5BD5 100%); /* mock: icon Instagram footer mobile */

  /* Typography */
  --font-heading: "Playfair Display", Georgia, serif;
  --font-body: "DM Sans", Arial, sans-serif;

  --font-size-xs: 14px;
  --font-size-sm: 15px;
  --font-size-base: 15px;
  --font-size-md: 18px;
  --font-size-lg: 20px;
  --font-size-xl: 26px;
  --font-size-2xl: 34px;
  --font-size-3xl: 44px;
  --font-size-hero: clamp(38px, 4.2vw, 46px);

  /* Layout */
  --desktop-viewport: 1920px;
  --container-width: 1220px;
  --container-padding: 24px;
  --header-height: 102px;

  /* Spacing */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --space-12: 48px;
  --space-16: 64px;
  --space-20: 80px;
  --space-section: clamp(48px, 6vw, 88px);
  --section-gap: 50px;                           /* 2026-10-28: khoảng cách dọc giữa các box (section) ở desktop */

  /* Shape */
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 18px;
  --radius-xl: 24px;
  --radius-pill: 999px;

  /* Shadows */
  --shadow-card: 0 8px 24px rgba(19, 55, 53, 0.08);
  --shadow-card-hover: 0 18px 42px rgba(19, 55, 53, 0.16);
  --shadow-header: 0 8px 32px rgba(10, 39, 40, 0.08);

  /* Motion */
  --ease-smooth: cubic-bezier(0.22, 1, 0.36, 1);
  --duration-fast: 220ms;
  --duration-normal: 450ms;
  --duration-slow: 800ms;

  /* Layering */
  --z-base: 1;
  --z-header: 1000;
  --z-dropdown: 1100;
  --z-overlay: 1200;

  /* ---- Bổ sung cho header/footer (design không khai báo) ---- */
  --border-width: 1px;
  --border-style: solid;
  --border-color: var(--color-border);
  --border: var(--border-width) var(--border-style) var(--border-color);
  --border-transparent: var(--border-width) var(--border-style) transparent;
  --color-danger: #B73A26;      /* design .field__error */
  --color-success: #3C763D;     /* trùng màu .alert-success có sẵn trong iso.core.css */
  --logo-height: 82.5px;         /* design .logo svg 140×82.5 trong header 102px */
  --footer-logo-height: 52px;
  --header-blur: 10px;
  --header-blur-scrolled: 16px;
  --header-bg: rgb(255 255 255 / 90%);
  --header-bg-scrolled: rgba(255, 255, 255, .92);
  --backdrop-bg: rgba(10, 39, 40, .45);
  --header-shadow-color: rgba(10, 39, 40, .2);
  --focus-ring: 0 0 0 4px rgba(17, 162, 152, .18);
  --accent-shadow: 0 8px 20px rgba(217, 138, 24, .28);
  --accent-shadow-hover: 0 12px 26px rgba(217, 138, 24, .38);
  --top-btn-shadow: 0 10px 26px rgba(17, 162, 152, .4);
  --icon-stroke: 1.8;

  /* ---- Hero trang chủ 2026 (home-2026.css) ---- */
  --hero-min-height: 640px;
  --hero-min-height-lg: 700px;
  --hero-pad-top: var(--space-10);
  --hero-pad-bottom: 130px;
  --hero-media-bg: #123F3D;
  --photo-overlay: linear-gradient(135deg, rgba(6, 115, 108, .6) 0%, rgba(12, 125, 117, .32) 55%, rgba(12, 125, 117, .12) 100%); /* Figma: #06736C 60% → #0C7D75 32% → #0C7D75 12% */
  --hero-overlay: var(--photo-overlay);           /* mock 2026-10-28: lớp phủ teal như ảnh */
  --hero-title-shadow: 0 4px 28px rgba(0, 0, 0, .35);
  --hero-lead-color: rgba(255, 255, 255, .92);
  --hero-lead-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  --hero-content-width: 760px;
  --hero-lead-width: 560px;
  --hero-parallax-headroom: 15%;
  --hero-anim-duration: var(--duration-slow);
  --hero-search-duration: 1s;
  --hero-search-delay: .6s;
  --hero-arrow-size: 48px;
  --search-panel-max-width: 880px;
  --search-panel-pad: 10px 10px 10px 14px;
  --search-panel-shadow: 0 24px 60px rgba(10, 39, 40, .22);
  --search-panel-radius: 16px;                       /* mock 2026-10-27: panel bo góc 16px (trước là pill) */
  --search-panel-gap: 10px;                          /* mock: field cách nhau ~10px */
  --search-panel-lift: 16px;                         /* mock: panel nhô xuống 29% thay vì 50% (chỉ ≥1025px) */
  --search-field-bg: #F3F8F8;                        /* mock: nền field xám-mint rất nhạt */
  --search-field-radius: 10px;                       /* mock: field bo góc 10px */
  --search-button-radius: 12px;                      /* mock: nút "Search tours" bo góc 12px */
  --search-icon-bg: #E4F6F3;                         /* mock 2026-10-28: nền ô icon teal rất nhạt */
  --search-icon-glyph: 18px;                         /* mock 2026-10-28: glyph 18px trong ô 40px */
  --search-select-min-height: 26px;
  --search-select-pad-y: 2px;
  --search-select-line-height: 1.45;
  --search-label-gap: 1px;
  --search-label-tracking: .01em;
  --btn-primary-shadow: 0 8px 20px rgba(17, 162, 152, .25);
  --btn-ghost-bg: rgba(255, 255, 255, .14);
  --btn-ghost-border: rgba(255, 255, 255, .85);
  --btn-ghost-blur: 6px;

  /* ---- Section 02 BENEFITS (home-2026.css) ---- */
  --benefits-pad-top: 72px;                 /* design .benefits padding-top */
  --benefits-pad-bottom: 64px;               /* design .benefits padding-bottom */
  --benefits-grid-gap: var(--space-5);       /* design gap 20px */
  --benefit-card-pad: var(--space-6) 22px;   /* design 24px 22px */
  --benefit-hover-lift: -6px;                /* design .benefit-card:hover */
  --benefit-icon-size: 50px;                  /* mock 2026-10-28: ô icon 50px như Home-destop.png */
  --benefit-icon-rotate: -6deg;
  --benefit-title-gap: 6px;
  --benefit-rating-gap: var(--space-6);
  --benefit-rating-size: var(--font-size-3xl);
  --benefit-star-size: var(--space-4);

  /* ---- Animation A2 — reveal (home-2026.js) ---- */
  --reveal-offset: 34px;                     /* design .reveal-stagger > * */
  --reveal-offset-left: -40px;               /* design .reveal-left */
  --reveal-offset-right: 40px;               /* design .reveal-right */
  --reveal-step: 90ms;                       /* design delay = --i * 90ms */

  /* ---- Section 03 BEST VIETNAM TOURS (home-2026.css) ---- */
  --tours-pad-block: var(--space-section);        /* design .section padding-block */
  --tours-bg: var(--color-background-soft);      /* design .section--soft */
  --tours-head-width: 720px;                     /* design .section-head max-width */
  --tours-head-gap: var(--space-10);             /* design .section-head margin-bottom */
  --tours-eyebrow-tracking: .12em;               /* design .eyebrow letter-spacing */
  --tours-title-size: clamp(30px, 3.4vw, 46px);  /* design .section-title — mock 2026-10-28: desktop 46px */
  --tours-title-size-375: 28px;                  /* design @375 .section-title */
  --tours-title-tracking: -.01em;                /* design .section-title */
  --tours-lead-gap: var(--space-3);              /* design .section-lead margin-top */
  --tours-stage-inset-x: 4px;                    /* design .owl-stage-outer padding/margin ngang */
  --tours-stage-pad: 14px var(--tours-stage-inset-x) 30px;             /* design .owl-stage-outer padding */
  --tours-stage-margin: -14px calc(var(--tours-stage-inset-x) * -1) -30px; /* design .owl-stage-outer margin */
  --tours-nav-size: 48px;                        /* design .owl-nav button */
  --tours-nav-size-430: 44px;                    /* design @430 .owl-nav button */
  --tours-nav-offset: -68px;                     /* design desktop */
  --tours-nav-offset-1340: -14px;                /* design @1340 */
  --tours-nav-offset-1100: 6px;                  /* design @1100 */
  --tours-nav-icon-size: var(--space-5);         /* design .owl-nav .icon */
  --tours-nav-hover-scale: 1.08;                 /* design hover */
  --tours-nav-disabled-opacity: .35;             /* design .disabled */
  --tour-card-hover-lift: -8px;                  /* design .tour-card:hover */
  --tour-card-img-hover-scale: 1.07;             /* design hover img */
  --tour-card-media-ratio: 16 / 10.5;            /* design .tour-card__media */
  --tour-card-body-pad: 20px 22px 22px;          /* design .tour-card__body */
  --tour-card-meta-gap: 10px;                    /* design gap */
  --tour-card-meta-gap-bottom: 10px;             /* design margin-bottom */
  --tour-card-icon-gap: 6px;                     /* design .tag/.dur gap */
  --tour-card-tag-icon: 14px;                    /* design .tag .icon */
  --tour-card-dur-icon: 15px;                    /* design .dur .icon */
  --tour-card-title-size: 26px;                  /* design .tour-card__title */
  --tour-card-title-size-576: var(--tour-card-price-size-576); /* yêu cầu 2026-10-27: title bằng cỡ giá ở mobile */
  --tour-card-title-line: 32px;                  /* design line-height */
  --tour-card-title-min: 96px;                   /* design min-height */
  --tour-card-title-gap: 10px;                   /* design margin-bottom */
  --tour-card-route-gap: var(--space-2);         /* design gap 8px */
  --tour-card-route-icon: var(--space-4);        /* design .icon 16px */
  --tour-card-route-icon-offset: 2px;            /* design margin-top */
  --tour-card-route-line: 1.5;                   /* design .tour-card__route line-height */
  --tour-card-route-lines: 2;                    /* yêu cầu: route mặc định 2 hàng */
  --tour-card-info-gap: var(--space-4);          /* design margin-top 16px */
  --tour-card-info-pad: 14px;                    /* design padding-top 14px */
  --tour-card-info-border: var(--border-width) dashed var(--color-border);
  --tour-card-quote-icon-w: 16px;                /* design quote svg 16×11 */
  --tour-card-quote-icon-h: 11px;
  --tour-card-quote-line: 1.55;                  /* design line-height */
  --tour-card-quote-lines: 2;                    /* design -webkit-line-clamp */
  --tour-card-quote-cite-gap: 6px;               /* design margin-top */
  --tour-card-foot-gap: var(--space-3);          /* design gap 12px */
  --tour-card-foot-pad: 18px;                    /* design padding-top */
  --tour-card-price-gap: 6px;                    /* design column-gap */
  --tour-card-price-size: 28px;                  /* design .price strong */
  --tour-card-price-line: var(--space-10);       /* design line-height 40px */
  --tour-card-arrow-shift: 4px;                  /* design .btn:hover .icon-arrow */
  --tour-card-badge-offset: var(--space-3);      /* chip khuyến mãi (design không có) */
  --tour-btn-sm-height: var(--space-10);         /* design .btn--sm min-height */
  --tour-btn-sm-pad-x: 18px;                     /* design .btn--sm padding */
  --tour-cta-gap: var(--space-8);                /* design .center-cta margin-top */
  --tour-focus-width: 3px;                       /* design :focus-visible */
  --tour-focus-offset: 3px;                      /* design :focus-visible */
  --tours-fallback-card-width: 340px;            /* design html:not(.js) .owl-carousel > * */

  /* ---- Card 1 + 1/3 card/view @≤576 (yêu cầu 2026-10-27) ---- */
  --tour-card-body-pad-576: 15px 12px 14px;      /* PNG: 30 / 25 / 28px @2x */
  --tour-card-title-line-576: 22px;              /* title 17px → nhịp dòng 22px */
  --tour-card-title-min-576: 44px;               /* 2 dòng × 22px */
  --tour-card-title-lines-576: 2;                /* title tối đa 2 dòng */
  --tour-card-text-size-576: 11px;               /* PNG: ink 19px @2x (route + nhãn giá) */
  --tour-card-price-size-576: 17px;              /* PNG: ink 24px @2x */
  --tour-card-price-line-576: 1.2;               /* thay line-height 40px của design */
  --tour-card-foot-pad-576: 10px;
  --tour-card-foot-gap-576: 10px;
  --tour-card-btn-height-576: 36px;              /* PNG: nút cao 72px @2x */

  /* ---- Section 04 EXPERIENCE VIETNAM YOUR WAY (home-2026.css) ---- */
  --styles-pad-block: var(--space-section);       /* design .section padding-block */
  --styles-bg: var(--color-background);           /* design .section — nền trắng */
  --styles-head-width: 720px;                     /* design .section-head max-width */
  --styles-head-gap: var(--space-10);             /* design .section-head margin-bottom */
  --styles-eyebrow-tracking: .12em;               /* design .eyebrow letter-spacing */
  --styles-title-size: clamp(30px, 3.4vw, 46px);  /* design .section-title — mock 2026-10-28: desktop 46px */
  --styles-title-size-375: 28px;                  /* design @375 .section-title */
  --styles-title-line: 1.2;                       /* design .section-title */
  --styles-title-tracking: -.01em;                /* design .section-title */
  --styles-lead-gap: var(--space-3);              /* design .section-lead margin-top */
  --styles-grid-gap: 14px;                        /* design .styles-grid gap */
  --styles-grid-gap-768: var(--space-3);          /* design @768 .styles-grid gap 12px */
  --styles-grid-height: 440px;                    /* design .styles-grid height */
  --styles-grid-height-1024: 400px;               /* design @1024 .styles-grid height */
  --styles-card-radius: var(--radius-lg);         /* design .style-card border-radius */
  --styles-card-bg: var(--color-primary-light);   /* design .style-card background */
  --styles-card-img-scale: 1.08;                  /* design .style-card:hover img */
  --styles-card-img-lift: -6px;                   /* design .style-card:hover img */
  --styles-card-label-lift: -4px;                 /* design .style-card:hover label */
  --styles-card-label-size: 24px;                 /* design .style-card__label */
  --styles-card-label-size-big: 28px;             /* design .style-card--big label */
  --styles-card-label-size-375: 21px;             /* design @375 label */
  --styles-card-label-line: 1.2;                  /* design label line-height */
  --styles-card-label-inset-x: 22px;              /* design label left/right */
  --styles-card-label-inset-bottom: var(--space-4); /* design label bottom 16px */
  --styles-card-label-shadow: 0 2px 12px rgba(0, 0, 0, .4); /* design label text-shadow */
  --styles-card-overlay: linear-gradient(180deg, rgba(8, 36, 38, 0) 45%, rgba(8, 36, 38, .72) 100%); /* design .style-card::after */
  --styles-card-ratio-768: 1 / 1;                 /* design @768 .style-card */
  --styles-card-ratio-big-768: 16 / 11;           /* design @768 .style-card--big */
  --styles-card-ratio-wide-768: 16 / 9;           /* design @768 .style-card--wide */
  --styles-focus-width: 3px;                      /* design :focus-visible */
  --styles-focus-offset: 3px;                     /* design :focus-visible */

  /* ---- Section 05 BEST MULTICOUNTRIES TOURS (home-2026.css) ---- */
  --multi-filter-gap: 10px;                       /* design .filters gap */
  --multi-filter-gap-576: var(--space-2);         /* design @576 .filters gap 8px */
  --multi-filters-gap-bottom: var(--space-10);    /* design .filters margin-bottom */
  --multi-pill-min-height: 44px;                  /* design .pill min-height */
  --multi-pill-pad-x: 22px;                       /* design .pill padding 0 22px */
  --multi-pill-pad-x-576: var(--space-4);         /* design @576 .pill padding 0 16px */
  --multi-pill-font-size: var(--font-size-sm);    /* design .pill font-size */
  --multi-pill-font-weight: 600;                  /* design .pill font-weight */
  --multi-pill-bg: var(--color-white);            /* design .pill background */
  --multi-pill-hover-lift: -2px;                  /* design .pill:hover */
  --multi-pill-active-bg: var(--color-primary);   /* design .pill.is-active */
  --multi-pill-active-color: var(--color-white);  /* design .pill.is-active color */
  --multi-pill-active-shadow: 0 8px 18px rgba(17, 162, 152, .28); /* design .pill.is-active box-shadow */
  --multi-swap-offset: 10px;                      /* design .is-swapping translate */
  --multi-empty-gap: var(--space-5);              /* khoảng cách khối báo rỗng tới carousel */

  /* ---- Section 06 PROMO + INQUIRY (home-2026.css) ---- */
  --planner-pad-block: var(--space-section);      /* design .promo padding-block */
  --planner-grid-columns: 1.1fr 1fr;              /* design .promo__grid */
  --planner-grid-gap: var(--space-6);             /* design .promo__grid gap 24px */
  --planner-panel-radius: var(--radius-xl);       /* design .promo-panel border-radius */
  --planner-panel-pad: 44px 40px;                 /* design .promo-panel padding */
  --planner-panel-pad-768: 34px 26px;             /* design @768 .promo-panel padding */
  --planner-panel-pad-320: 18px;                  /* design @320 .promo-panel padding-inline */
  --planner-panel-min-height: 520px;              /* design .promo-panel min-height */
  --planner-panel-bg: #0b5b5a;                    /* design .promo-panel background */
  --planner-panel-overlay: linear-gradient(90deg, rgba(14, 145, 138, 1) 0%, rgba(14, 145, 138, 1) 45%, rgba(14, 145, 138, .88) 62%, rgba(14, 145, 138, .62) 79%, rgba(14, 145, 138, .25) 95%, rgba(14, 145, 138, .12) 100%);
                                                  /* mock 2026-10-28: teal đặc bên trái → trong suốt mép phải để lộ ảnh (đo từ ảnh: #0E918A ~100% → ~12%) */
  --planner-panel-title-size: clamp(28px, 2.6vw, 34px); /* design .promo-panel h2 — mock 2026-10-28: desktop 34px */
  --planner-title-underline-height: 3px;         /* mock: nét gạch tay dưới chữ "Your Journey" */
  --planner-title-underline-left: 6px;           /* mock: nét gạch ngắn hơn chữ, lệch phải */
  --planner-title-underline-right: 34px;         /* mock: chừa chỗ cho tim (18px + gap 8px + 8px) */
  --planner-title-underline-bottom: -5px;
  --planner-title-underline-radius: 3px;
  --planner-title-underline-rotate: -0.8deg;
  --planner-heart-width: 18px;                    /* mock: skin/images/home/Vector.svg 18×21 */
  --planner-heart-gap: var(--space-2);            /* mock: tim nằm sát sau chữ "Your Journey" */
  --planner-note-top: 20px;                       /* mock: chữ "Your journey, our priority" góc phải trên */
  --planner-note-right: 32px;
  --planner-note-width: 110px;                    /* mock: bẻ 2 dòng "Your journey," / "our priority" */
  --planner-note-size: 16px;
  --planner-note-line: 1.25;
  --planner-fly-top: 64px;                        /* mock: mũi tên nét đứt dưới dòng note */
  --planner-fly-right: 40px;
  --planner-fly-width: 150px;                     /* mock: skin/images/home/fly.svg 185×117 */
  --planner-panel-title-gap: var(--space-6);      /* design .promo-panel h2 margin-bottom */
  --planner-eyebrow-tracking: .12em;              /* design .eyebrow letter-spacing */
  --planner-eyebrow-gap: var(--space-3);          /* design .eyebrow margin-bottom */
  --planner-list-gap: 14px;                       /* design .promo-list gap */
  --planner-list-gap-bottom: var(--space-8);      /* design .promo-list margin-bottom */
  --planner-list-item-gap: 14px;                  /* design .promo-list li gap */
  --planner-list-line: 1.5;                       /* design .promo-list li line-height */
  --planner-list-color: rgba(255, 255, 255, .95); /* design .promo-list li color */
  --planner-ico-size: 36px;                       /* design .promo-list .ico */
  --planner-ico-bg: rgba(255, 255, 255, .14);     /* design .promo-list .ico background */
  --planner-ico-border: 1px solid rgba(255, 255, 255, .3); /* design .promo-list .ico border */
  --planner-ico-rotate: 8deg;                     /* design .promo-list li:hover .ico */
  --inquiry-radius: var(--radius-xl);             /* design .inquiry border-radius */
  --inquiry-pad: 36px 34px;                       /* design .inquiry padding */
  --inquiry-pad-768: 28px 22px;                   /* design @768 .inquiry padding */
  --inquiry-pad-320: 18px;                        /* design @320 .inquiry padding-inline */
  --inquiry-title-size: 28px;                     /* design .inquiry h2 */
  --inquiry-title-gap: var(--space-2);            /* design .inquiry h2 margin-bottom 8px */
  --inquiry-lead-gap: var(--space-6);             /* design .inquiry__lead margin-bottom */
  --inquiry-grid-gap: 8px 14px;                   /* mock 2026-10-28: các input sát lại */
  --inquiry-input-min-height: 48px;               /* design .field input min-height */
  --inquiry-input-pad: 12px 14px;                 /* design .field input padding */
  --inquiry-input-border: 1.5px solid var(--color-border); /* design .field input border */
  --inquiry-input-radius: var(--radius-md);       /* design .field input border-radius */
  --inquiry-input-bg: #F7FAF9;                    /* design .field input background */
  --inquiry-input-bg-focus: var(--color-white);   /* design .field input:focus background */
  --inquiry-textarea-min-height: 108px;           /* design .field textarea min-height */
  --inquiry-error-border: #C8442F;                /* design .field.has-error border-color */
  --inquiry-error-bg: #FFF7F5;                    /* design .field.has-error background */
  --inquiry-error-min-height: 22px;               /* design .field__error min-height */
  --inquiry-error-pad-top: 2px;                   /* design .field__error padding-top */
  --inquiry-actions-gap: var(--space-3);          /* design .form-actions gap */
  --inquiry-actions-top: var(--space-1);          /* design .form-actions margin-top */
  --inquiry-status-top: var(--space-3);           /* design .form-status margin-top */
  --inquiry-status-min-height: var(--space-6);    /* design .form-status min-height */
  --inquiry-note-top: 14px;                       /* design .form-note margin-top */
  --inquiry-spam-offset: -9999px;                 /* field honeypot đẩy khỏi viewport */
  --inquiry-loading-opacity: .72;                 /* nút submit trong lúc gửi form */
  --inquiry-spinner-size: var(--space-4);         /* spinner loading 16px */
  --inquiry-spinner-ring: 2px;                    /* độ dày spinner */
  --inquiry-spinner-duration: 700ms;              /* 1 vòng xoay spinner */

  /* ---- Section 07 BEST SELLING CRUISES (home-2026.css) ---- */
  --cruise-tab-in-offset: 16px;                   /* design @keyframes tab-in translateY */
  --cruise-card-media-ratio: 16 / 9.5;            /* design .cruise-card__media */
  --cruise-card-hover-lift: -8px;                 /* design .cruise-card:hover */
  --cruise-card-body-pad: 18px 22px 22px;         /* design .cruise-card__body */
  --cruise-card-top-gap: 10px;                    /* design .cruise-card__top gap */
  --cruise-card-top-gap-bottom: var(--space-2);   /* design .cruise-card__top margin-bottom */
  --cruise-card-star-gap: 2px;                    /* design .stars gap */
  --cruise-card-star-size: var(--space-4);        /* design .stars .icon 16px */
  --cruise-card-title-size: 22px;                 /* design .cruise-card__title */
  --cruise-card-title-size-576: var(--tour-card-price-size-576); /* yêu cầu 2026-10-27: title bằng cỡ giá ở mobile */
  --cruise-card-title-gap: var(--space-2);        /* design .cruise-card__title margin-bottom */
  --cruise-card-title-line: 1.3;                  /* design .cruise-card__title line-height */
  --cruise-card-text-line: 1.6;                   /* design .cruise-card__text */
  --cruise-card-text-lines: 3;                    /* design -webkit-line-clamp */
  --cruise-card-foot-pad: var(--space-4);         /* design .cruise-card .tour-card__foot */
  --cruise-card-price-size: 26px;                 /* design .cruise-card .price strong */

  /* ---- Section 08 TESTIMONIALS (home-2026.css) ---- */
  --review-pad-block: var(--space-section);       /* design .section padding-block */
  --review-bg: var(--color-background);           /* design #reviews — nền trắng */
  --review-chip-bg: #FDECEC;                      /* design .chip background */
  --review-chip-color: #C8442F;                   /* design .chip color */
  --review-chip-pad: 5px var(--space-4);          /* design .chip padding */
  --review-chip-size: var(--font-size-xs);        /* design .chip font-size */
  --review-chip-gap: var(--space-4);              /* design .chip margin-bottom */
  --review-grid-columns: repeat(3, 1fr);          /* design .reviews grid-template-columns */
  --review-grid-columns-1024: repeat(2, 1fr);     /* design @1024 .reviews */
  --review-grid-columns-768: 1fr;                 /* design @768 .reviews */
  --review-grid-gap: 22px;                        /* design .reviews gap */
  --review-card-bg: var(--color-white);           /* design .review-card background */
  --review-card-border: var(--border-width) var(--border-style) var(--color-border); /* design .review-card border */
  --review-card-radius: var(--radius-lg);         /* design .review-card border-radius */
  --review-card-pad: 26px 26px 24px;              /* design .review-card padding */
  --review-card-shadow: var(--shadow-card);       /* design .review-card box-shadow */
  --review-card-shadow-hover: var(--shadow-card-hover); /* design .review-card:hover box-shadow */
  --review-card-hover-lift: -6px;                 /* design .review-card:hover translate */
  --review-star-gap: 2px;                         /* design .stars gap */
  --review-star-size: var(--space-4);             /* design .stars .icon 16px */
  --review-stars-gap: 14px;                       /* design .review-card .stars margin-bottom */
  --review-quote-size: var(--font-size-base);     /* design .review-card p font-size */
  --review-quote-line: 1.65;                      /* design body line-height */
  --review-who-gap: var(--space-3);               /* design .review-card__who gap 12px */
  --review-who-top: var(--space-5);               /* design .review-card__who margin-top 20px */
  --review-avatar-size: 44px;                     /* design .avatar */
  --review-avatar-bg: var(--color-primary-light); /* design .avatar background */
  --review-avatar-color: var(--color-primary-dark);/* design .avatar color */
  --review-name-size: var(--font-size-base);      /* design .review-card__who strong font-size */
  --review-name-line: 1.3;                        /* design .review-card__who strong line-height */
  --review-meta-size: var(--font-size-xs);        /* design .review-card__who span font-size */
  --review-meta-color: var(--color-text-light);   /* design .review-card__who span color */
  --review-note-top: var(--space-8);              /* design .reviews-note margin-top */
  --review-note-size: var(--font-size-xs);        /* design .reviews-note font-size */
  --review-note-color: var(--color-text-light);   /* design .reviews-note color */
  --review-foot-gap: 14px;                        /* mock 2026-10-28: note ↔ nút CTA */
  --review-cta-height: 44px;                      /* mock: nút "View traveler stories" trong ảnh Home-destop */
  --review-cta-pad-x: var(--space-6);             /* mock: padding ngang nút */
  --review-cta-size: var(--font-size-xs);         /* mock: chữ nút 14px */
  --review-cta-border: 1px;                       /* mock: viền nút mảnh */

  /* ---- Nút outline section 08 (mock 2026-10-28: viền/chữ cam như ảnh) ---- */
  --btn-outline-bg: transparent;                  /* nút trong suốt trên nền trắng */
  --btn-outline-color: var(--color-accent-dark);  /* mock: chữ cam đậm */
  --btn-outline-border: var(--color-accent);      /* mock: viền cam */
  --btn-outline-hover-bg: var(--color-accent);    /* hover: nền cam */
  --btn-outline-hover-color: var(--color-white);  /* hover: chữ trắng */

  /* ---- Section 09 DESTINATIONS (home-2026.css) ---- */
  --dest-bg: var(--color-background);              /* design #asia .section — nền trắng */
  --dest-card-aspect: 3 / 4.2;                     /* design .dest-card aspect-ratio */
  --dest-card-radius: var(--radius-lg);            /* design .dest-card border-radius */
  --dest-card-bg: var(--color-primary-light);      /* design .dest-card background */
  --dest-card-shadow: var(--shadow-card);          /* design .dest-card box-shadow */
  --dest-card-shadow-hover: var(--shadow-card-hover); /* design .dest-card:hover box-shadow */
  --dest-card-img-scale: 1.1;                      /* design .dest-card:hover img scale */
  --dest-card-img-lift: -8px;                      /* design .dest-card:hover img translate */
  --dest-card-overlay: linear-gradient(180deg, rgba(8, 36, 38, 0) 50%, rgba(8, 36, 38, .72) 100%); /* design .dest-card::after */
  --dest-card-overlay-hover: rgba(11, 129, 122, .22); /* design .dest-card:hover::after background-color */
  --dest-card-name-inset-x: var(--space-4);        /* design .dest-card__name left/right 16px */
  --dest-card-name-inset-bottom: var(--space-4);   /* design .dest-card__name bottom 16px */
  --dest-card-name-size: 24px;                     /* design .dest-card__name */
  --dest-card-name-line: 1.2;                      /* design .dest-card__name line-height */
  --dest-card-name-lift: -5px;                     /* design :hover .dest-card__name */
  --dest-card-name-shadow: 0 2px 12px rgba(0, 0, 0, .45); /* design .dest-card__name text-shadow */
  --dest-card-name-size-576: 14px;                 /* PNG mobile: card 156 CSS, name ~14px */
  --dest-card-name-inset-576: 10px;                /* PNG mobile: name inset 20px @2x */

  /* ---- Section 10 ARTICLES (home-2026.css) ---- */
  --articles-bg: var(--color-background);          /* design #articles — nền trắng */
  --articles-head-gap-x: var(--space-6);           /* design .articles__head gap 24px */
  --articles-head-gap: 14px;                       /* design .articles__head margin-bottom */
  --articles-head-gap-768: 6px;                    /* design @768 .articles__head gap 6px */
  --articles-lead-gap: var(--space-8);             /* design .articles__lead margin-bottom */
  --articles-grid-columns: repeat(4, 1fr);         /* design .articles-grid grid-template-columns */
  --articles-grid-columns-1100: repeat(2, 1fr);    /* design @1100 .articles-grid */
  --articles-grid-columns-576: 1fr;                /* design @576 .articles-grid */
  --articles-grid-gap: 22px;                       /* design .articles-grid gap */
  --articles-card-bg: var(--color-white);          /* mock 2026-10-28: card như tour card */
  --articles-card-radius: var(--radius-lg);
  --articles-card-shadow: var(--shadow-card);
  --articles-card-shadow-hover: var(--shadow-card-hover);
  --articles-card-hover-lift: var(--tour-card-hover-lift);
  --articles-card-body-pad: var(--tour-card-body-pad);
  --articles-card-media-ratio: 13 / 10;            /* mock 2026-10-28: ảnh card 289×222 như Home-destop */
  --articles-card-media-bg: var(--color-primary-light); /* design .media background */
  --articles-card-img-scale: 1.07;                 /* design .article-card:hover .media img */
  --articles-card-cat-gap: 6px;                    /* design .article-card__cat margin-bottom */
  --articles-card-title-size: 21px;                /* design .article-card h3 */
  --articles-card-title-line: 1.28;                /* design .article-card h3 line-height */
  --articles-card-title-gap: var(--space-2);       /* design .article-card h3 margin-bottom 8px */
  --articles-card-title-lines: 2;                  /* yêu cầu: title 2 dòng */
  --articles-card-text-line: 1.65;                 /* design body line-height */
  --articles-card-text-gap: var(--space-3);        /* design .article-card p margin-bottom 12px */
  --articles-card-text-lines: 2;                   /* yêu cầu: description 2 dòng */
  --articles-link-gap: 6px;                        /* design .link-arrow gap */
  --articles-link-icon: var(--space-4);            /* design .link-arrow .icon 16px */
  --articles-link-shift: 5px;                      /* design .link-arrow:hover .icon translate */

  /* ---- Section 10 ARTICLES — card ngang ở mobile (mock 2026-10-27) ---- */
  --articles-mobile-head-gap: var(--space-2);      /* khoảng cách title/lead/link khi căn giữa */
  --articles-mobile-grid-gap: var(--space-3);      /* mock: card cách nhau 12px */
  --articles-mobile-card-pad: 10px;                /* mock: ảnh cách mép card ~10px */
  --articles-mobile-card-gap: var(--space-3);      /* mock: ảnh → chữ 12px */
  --articles-mobile-card-radius: var(--radius-lg); /* mock: card bo góc 18px */
  --articles-mobile-card-bg: var(--color-white);
  --articles-mobile-media-size: 104px;             /* mock: ảnh vuông ~104px */
  --articles-mobile-media-radius: var(--radius-md);
  --articles-mobile-media-shadow: none;
  --articles-mobile-cat-size: 11px;                /* mock: nhãn category nhỏ, in hoa */
  --articles-mobile-cat-gap: var(--space-1);
  --articles-mobile-cat-tracking: .12em;
  --articles-mobile-cat-color: var(--color-primary);
  --articles-mobile-title-size: var(--font-size-md);
  --articles-mobile-title-lines: 2;
  --articles-mobile-text-size: var(--font-size-xs);
  --articles-mobile-text-line: 1.5;
  --articles-mobile-text-lines: 2;

  /* ---- Section 11 FINAL CTA (site-2026.css — trước footer, toàn site) ---- */
  --cta-pad-block: 84px;                           /* design .final-cta padding */
  --cta-pad-block-768: 64px;                       /* design @768 .final-cta padding */
  --cta-bg: #8a5a1e;                               /* design .final-cta background */
  --cta-overlay: linear-gradient(90deg, rgba(240, 164, 46, .93) 0%, rgba(240, 164, 46, .78) 38%, rgba(190, 100, 30, .28) 72%, rgba(120, 60, 20, .12) 100%); /* design .final-cta__bg::after */
  --cta-overlay-768: linear-gradient(180deg, rgba(240, 164, 46, .9), rgba(190, 100, 30, .55)); /* design @768 .final-cta__bg::after */
  --cta-img-top: -15%;                             /* design .parallax-img top */
  --cta-img-height: 130%;                          /* design .parallax-img height */
  --cta-title-size: clamp(34px, 3.4vw, 46px);      /* design .final-cta h2 — mock 2026-10-28: desktop 46px */
  --cta-title-line: 1.2;                           /* design h1,h2,h3,h4 line-height */
  --cta-title-shadow: 0 2px 18px rgba(120, 60, 0, .3);  /* design .final-cta h2 text-shadow */
  --cta-lead-max: 520px;                           /* design .final-cta p max-width */
  --cta-lead-line: 1.65;                           /* design body line-height */
  --cta-lead-shadow: 0 1px 12px rgba(120, 60, 0, .35);  /* design .final-cta p text-shadow */
  --cta-note-size: var(--font-size-md);            /* design: .final-cta p thắng .final-cta__note */
  --cta-note-top: 14px;                            /* design .final-cta__note margin-top */
  --cta-actions-gap: 14px;                         /* design .final-cta__actions gap */
  --cta-actions-top: var(--space-6);               /* design .final-cta__actions margin-top */
  --cta-btn-height: 55px;                          /* design .final-cta__actions .btn height */
  --cta-btn-pad-x: 26px;                           /* design .btn padding */
  --cta-btn-pad-x-375: 20px;                       /* design @375 .btn padding */
  --cta-btn-border: 2px solid transparent;         /* design .btn border */
  --cta-btn-shadow: 0 10px 24px rgba(0, 0, 0, .25);/* design .final-cta .btn--accent box-shadow */
  --cta-btn-accent-hover-bg: #0c1c20;              /* design .final-cta .btn--accent:hover */
  --cta-btn-ghost-bg: rgba(255, 255, 255, .2);     /* design .final-cta .btn--ghost-light background */
  --cta-arrow-shift: 4px;                          /* design .btn:hover .icon-arrow */
  --cta-focus-width: 3px;                          /* design :focus-visible */
  --cta-focus-offset: 3px;                         /* design :focus-visible */

  /* ---- Yêu cầu 2026-10-27: chỉnh mobile theo html/Home-mobile.png ---- */
  --planner-panel-bg-light: var(--color-accent-light);          /* mock: card kem (nền sáng) */
  --planner-panel-pad-576: var(--space-4);                      /* mock: card padding 16px */
  --planner-panel-title-color-light: var(--color-heading);      /* mock: chữ tối trên nền kem */
  --planner-panel-eyebrow-color-light: var(--color-primary-dark);
  --planner-list-color-light: var(--color-text);
  --planner-list-columns-576: repeat(2, minmax(0, 1fr));        /* mock: feature 2 cột (co được, không tràn) */
  --planner-list-columns-375: 1fr;                              /* ≤375: 1 cột — 2 cột quá hẹp, chữ gãy từ */
  --planner-list-gap-576: var(--space-3);
  --planner-ico-bg-light: var(--color-white);
  --planner-ico-border-light: var(--border);
  --planner-ico-color-light: var(--color-primary-dark);
  --review-slide-width-576: 75%;                                /* mock: 1 card + ~0.3 card */
  --review-slide-gap-576: 14px;                                 /* mock: gap 28px @2x */
  --review-slide-pad-576: var(--space-2) 0 var(--space-6);      /* chừa chỗ cho box-shadow card */
  --cta-chip-gap: var(--space-3);                               /* mock: chip cách tiêu đề */
  --cta-chip-size: var(--font-size-xs);
  --cta-chip-tracking: .16em;
  --cta-chip-color: rgba(255, 255, 255, .95);
  --cta-inner-gap-768: var(--space-5);                          /* mock: khoảng cách khối chữ → nút */

  /* ---- Alias bảng màu cũ → token 2026 (tour.css legacy + block .tpl) ---- */
  --main-color: var(--color-accent);
  --secondary-color: var(--color-primary);
  --secondary-light-color: var(--color-primary-light);

  /* ---- Action bar mobile — bottom nav (yêu cầu 2026-10-27) ---- */
  --actionbar-height: 60px;
  --actionbar-safe-bottom: env(safe-area-inset-bottom, 0px);
  --actionbar-bg: var(--color-white);
  --actionbar-shadow: 0 -6px 20px rgba(10, 39, 40, .08);
  --actionbar-icon-size: 20px;
  --actionbar-cta-icon-size: var(--space-5);
  --actionbar-label-size: 10px;
  --actionbar-label-line: 12px;
  --actionbar-label-gap: 4px;
  --actionbar-label-tracking: .01em;
  --actionbar-color: var(--color-text);
  --actionbar-color-active: var(--color-primary);
  --actionbar-cta-size: 42px;
  --actionbar-cta-bg: var(--color-accent);
  --actionbar-cta-color: var(--color-on-accent);
  --actionbar-cta-lift: -9px;
  --actionbar-cta-ring: 3px;
  --actionbar-cta-shadow: var(--accent-shadow);
  --actionbar-cta-label: var(--color-heading);
}

/* ==========================================================================
   SHARED — icon + button (scope trong header/footer)
   ========================================================================== */

/* Bootstrap clearfix gắn ::before/::after vào MỌI .container.
   Khi .container là flex/grid container, 2 pseudo này trở thành flex/grid item
   → đẩy lệch logo/burger và làm cột footer thứ 6 rớt xuống dòng.
   Vô hiệu hoá trong phạm vi header/footer. */
.site-header .container::before,
.site-header .container::after,
.site-footer .container::before,
.site-footer .container::after {
  content: none;
  display: none;
}

.site-header .icon,
.site-footer .icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  color: inherit;               /* chặn rule .icon cũ (color:#f26522) khiến icon bị ám cam */
  stroke: currentColor;
  fill: none;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  background-color: transparent;
}

.site-header .btn,
.site-footer .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-12);
  padding: 0 var(--space-6);
  border: var(--border-width) var(--border-style) transparent;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-size-base);
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast),
              box-shadow var(--duration-fast),
              translate var(--duration-fast) var(--ease-smooth);
}
.site-header .btn:hover,
.site-footer .btn:hover { translate: 0 -2px; }
.site-header .btn--accent,
.site-footer .btn--accent {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--accent-shadow);
}
.site-header .btn--accent:hover,
.site-footer .btn--accent:hover { box-shadow: var(--accent-shadow-hover); }
.site-footer .btn--sm { min-height: var(--space-10); padding: 0 var(--space-4); }
.site-header .btn--block { width: 100%; }

/* ---------- Skip link ---------- */
.site-skip-link {
  position: absolute;
  left: var(--space-4);
  top: calc(var(--space-4) * -4);
  z-index: calc(var(--z-overlay) + 400);
  padding: var(--space-3) var(--space-4);
  background: var(--color-heading);
  color: var(--color-white);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  transition: top var(--duration-fast);
}
.site-skip-link:focus { top: var(--space-3); }

/* ==========================================================================
   HEADER
   ========================================================================== */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: var(--z-header);
  height: var(--header-height);
  border-bottom: var(--border-transparent);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  line-height: 1.65;
  color: var(--color-text);
  transition: box-shadow var(--duration-normal) var(--ease-smooth),
              border-color var(--duration-normal);
}
/* Blur trên pseudo-element để header không thành containing block của drawer fixed */
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--header-bg);
  backdrop-filter: blur(var(--header-blur));
  -webkit-backdrop-filter: blur(var(--header-blur));
  transition: background-color var(--duration-normal) var(--ease-smooth),
              backdrop-filter var(--duration-normal);
}
.site-header.is-scrolled {
  border-bottom-color: var(--border-color);
  box-shadow: var(--shadow-header);
}
.site-header.is-scrolled::before {
  background: var(--header-bg-scrolled);
  backdrop-filter: blur(var(--header-blur-scrolled));
  -webkit-backdrop-filter: blur(var(--header-blur-scrolled));
}

.site-header .container {
  width: calc(100% - (var(--container-padding) * 2));
  max-width: var(--container-width);
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
.site-header__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-6);
}

/* ---------- Logo ---------- */
.site-header .logo {
  display: inline-flex;
  align-items: center;
  flex: none;
  line-height: 1;
  text-decoration: none;
}
.site-header .logo img {
  display: block;
  width: auto;
  height: var(--logo-height);
  max-width: none;
}

/* ---------- Nav ---------- */
.site-header .nav {
  flex: 1 1 auto;
  display: flex;
  justify-content: center;
}
.site-header .nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin: 0;
  padding: 0;
  list-style: none;
}
.site-header .nav__item { position: relative; }
.site-header .nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: 44px;
  padding: 0 var(--space-3);
  font-weight: 600;
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.site-header .nav__link::after {
  content: "";
  position: absolute;
  left: var(--space-3);
  right: var(--space-3);
  bottom: 6px;
  height: 2px;
  background: var(--color-accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease-smooth);
}
.site-header .nav__link:hover,
.site-header .nav__item.is-open > .nav__link { color: var(--color-primary-dark); }
.site-header .nav__link:hover::after,
.site-header .nav__item.is-open > .nav__link::after { transform: scaleX(1); }
.site-header .nav__link .icon {
  width: 14px;
  height: 14px;
  transition: rotate var(--duration-fast);
}
.site-header .nav__item.is-open > .nav__link .icon { rotate: 180deg; }
.site-header .nav__cta-mobile { display: none; }

/* ---------- Dropdown ---------- */
.site-header .dropdown {
  position: absolute;
  left: 50%;
  top: calc(100% + 6px);
  z-index: var(--z-dropdown);
  min-width: 250px;
  padding: var(--space-3);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card-hover);
  opacity: 0;
  visibility: hidden;
  translate: -50% 10px;
  transition: opacity var(--duration-fast),
              translate var(--duration-normal) var(--ease-smooth),
              visibility 0s var(--duration-fast);
}
.site-header .nav__item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  translate: -50% 0;
  transition-delay: 0s;
}
.site-header .dropdown--wide {
  display: grid;
  grid-template-columns: repeat(2, minmax(220px, 1fr));
  gap: 0 var(--space-4);
  min-width: 480px;
}
.site-header .dropdown__title {
  grid-column: 1 / -1;
  padding: var(--space-1) var(--space-3) var(--space-2);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-primary);
}
.site-header .dropdown a {
  display: block;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  text-decoration: none;
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              padding var(--duration-fast);
}
.site-header .dropdown a:hover,
.site-header .dropdown a:focus-visible {
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  padding-left: var(--space-4);
}
.site-header .nav__item:last-child .dropdown,
.site-header .nav__item:nth-last-child(2) .dropdown {
  left: auto;
  right: 0;
  translate: 0 10px;
}
.site-header .nav__item:last-child.is-open > .dropdown,
.site-header .nav__item:nth-last-child(2).is-open > .dropdown { translate: 0 0; }

/* ---------- Right side ---------- */
.site-header__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 6px;
  flex: none;
}
.site-header .header-mail {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-size-xs);
  font-weight: 500;
  color: var(--color-text);
  text-decoration: none;
  transition: color var(--duration-fast);
}
.site-header .header-mail:hover { color: var(--color-primary-dark); }
.site-header .header-mail .icon {
  width: 15px;
  height: 15px;
}
.site-header .header-cta {
  min-height: var(--space-12);
  border-radius: var(--radius-md);
  padding: 0 var(--space-4);
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* ---------- Burger ---------- */
.site-header .burger {
  display: none;
  width: 46px;
  height: 46px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  position: relative;
  background: var(--color-primary-light);
  flex: none;
  cursor: pointer;
}
.site-header .burger span {
  position: absolute;
  left: 13px;
  right: 13px;
  height: 2px;
  background: var(--color-primary-dark);
  border-radius: 2px;
  transition: transform var(--duration-normal) var(--ease-smooth),
              opacity var(--duration-fast),
              top var(--duration-normal) var(--ease-smooth);
}
.site-header .burger span:nth-child(1) { top: 16px; }
.site-header .burger span:nth-child(2) { top: 22px; }
.site-header .burger span:nth-child(3) { top: 28px; }
.site-header .burger[aria-expanded="true"] span:nth-child(1) { top: 22px; transform: rotate(45deg); }
.site-header .burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header .burger[aria-expanded="true"] span:nth-child(3) { top: 22px; transform: rotate(-45deg); }

/* ---------- Backdrop ---------- */
.nav-backdrop {
  position: fixed;
  inset: 0;
  z-index: calc(var(--z-header) - 1);
  background: var(--backdrop-bg);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--duration-normal), visibility 0s var(--duration-normal);
}
.nav-backdrop.is-active {
  opacity: 1;
  visibility: visible;
  transition-delay: 0s;
}

/* ==========================================================================
   FINAL CTA — "Not sure where to start?" (thay box tailor_home_box)
   Nguồn thiết kế: html/assets/css/style.css (.final-cta, .final-cta__bg,
   .final-cta__inner, .final-cta__note, .final-cta__actions, .btn--ghost-light,
   .parallax-img) + responsive.css (.final-cta @768/@576).
   Render toàn site (từ _footer-h26.tpl) → khai báo trong file dùng chung với
   prefix riêng .h26-final-cta / .h26-cta-btn / .h26-cta-icon.
   ========================================================================== */
.h26-final-cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: var(--cta-pad-block);
  background: var(--cta-bg);
  font-family: var(--font-body);
}

/* Sprite icon của block — ẩn khỏi layout */
.h26-final-cta__sprite {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Ảnh nền + overlay (design .final-cta__bg) ---------- */
.h26-final-cta__bg {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
}

.h26-final-cta__bg::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--cta-overlay);
}

.h26-final-cta__img {
  position: absolute;
  left: 0;
  top: var(--cta-img-top);
  width: 100%;
  height: var(--cta-img-height);
  object-fit: cover;
  will-change: transform;
}

.h26-final-cta__container {
  position: relative;
  width: calc(100% - var(--container-padding) * 2);
  max-width: var(--container-width);
  margin-left: auto;
  margin-right: auto;
}

/* ---------- Khối nội dung (design .final-cta__inner) ---------- */
.h26-final-cta__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  transition: opacity var(--duration-slow) var(--ease-smooth),
              translate var(--duration-slow) var(--ease-smooth);
}

/* Animation A2 — reveal trái (html.h26-cta-js do site-2026.js thêm) */
html.h26-cta-js .h26-final-cta__inner {
  opacity: 0;
  translate: var(--reveal-offset-left) 0;
}

html.h26-cta-js .h26-final-cta__inner.is-visible {
  opacity: 1;
  translate: 0 0;
}

/* ---------- Chip nhãn phía trên tiêu đề (chỉ hiện ở mobile — mock mobile) ---------- */
.h26-final-cta__chip {
  display: none;
  margin: 0 0 var(--cta-chip-gap);
  font-family: var(--font-body);
  font-size: var(--cta-chip-size);
  font-weight: 700;
  letter-spacing: var(--cta-chip-tracking);
  text-transform: uppercase;
  color: var(--cta-chip-color);
}

.h26-final-cta__title {
  margin: 0 0 var(--space-4);
  font-family: var(--font-heading);
  font-size: var(--cta-title-size);
  font-weight: 700;
  line-height: var(--cta-title-line);
  color: var(--color-white);
  text-shadow: var(--cta-title-shadow);
}

.h26-final-cta__lead {
  max-width: var(--cta-lead-max);
  margin: 0;
  font-size: var(--font-size-md);
  line-height: var(--cta-lead-line);
  color: var(--color-white);
  text-shadow: var(--cta-lead-shadow);
}

/* Design: `.final-cta p` (0-1-1) thắng `.final-cta__note` (0-1-0) → note render 17px */
.h26-final-cta__note {
  margin: var(--cta-note-top) 0 0;
  font-size: var(--cta-note-size);
  font-style: italic;
  line-height: var(--cta-lead-line);
  color: var(--color-white);
  text-shadow: var(--cta-lead-shadow);
}

.h26-final-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--cta-actions-gap);
  margin-top: var(--cta-actions-top);
}

.h26-final-cta__actions .h26-cta-btn { height: var(--cta-btn-height); }

/* ---------- Nút (design .btn + .btn--accent / .btn--ghost-light) ---------- */
.h26-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--space-12);
  padding: 0 var(--cta-btn-pad-x);
  border: var(--cta-btn-border);
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: var(--font-size-base);
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  text-decoration: none;
  -webkit-text-decoration: none;
  transition: background-color var(--duration-fast) var(--ease-smooth),
              color var(--duration-fast) var(--ease-smooth),
              border-color var(--duration-fast),
              box-shadow var(--duration-fast),
              translate var(--duration-fast) var(--ease-smooth);
}

/* Bootstrap (iso.core.css) đặt `a:hover, a:focus { color; text-decoration: underline }`
   với specificity 0-1-1 → khai báo lại ở mức 0-2-0 để nút giữ đúng design. */
.h26-cta-btn:hover,
.h26-cta-btn:focus,
.h26-cta-btn:active,
.h26-cta-btn:visited {
  text-decoration: none;
  -webkit-text-decoration: none;
}

.h26-cta-btn:hover { translate: 0 -2px; }

.h26-cta-btn--accent,
.h26-cta-btn--accent:visited {
  background: var(--color-accent);
  color: var(--color-on-accent);
  box-shadow: var(--cta-btn-shadow);
}

.h26-cta-btn--accent:hover,
.h26-cta-btn--accent:focus {
  background: var(--cta-btn-accent-hover-bg);
  color: var(--color-white);
}

.h26-cta-btn--ghost,
.h26-cta-btn--ghost:visited {
  background: var(--cta-btn-ghost-bg);
  color: var(--color-white);
  border-color: var(--btn-ghost-border);
  -webkit-backdrop-filter: blur(var(--btn-ghost-blur));
  backdrop-filter: blur(var(--btn-ghost-blur));
}

.h26-cta-btn--ghost:hover,
.h26-cta-btn--ghost:focus {
  background: var(--color-white);
  color: var(--color-heading);
}

/* ---------- Icon trong nút (design .icon) ---------- */
.h26-cta-icon {
  width: 1.15em;
  height: 1.15em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: middle;
  transition: translate var(--duration-fast) var(--ease-smooth);
}

.h26-cta-btn--accent:hover .h26-cta-icon--arrow,
.h26-cta-btn--accent:focus .h26-cta-icon--arrow {
  translate: var(--cta-arrow-shift) 0;
}

.h26-final-cta a:focus-visible {
  outline: var(--cta-focus-width) solid var(--color-accent);
  outline-offset: var(--cta-focus-offset);
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.site-footer {
  background: var(--color-footer);
  border-top: var(--border);
  padding-top: var(--space-16);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  line-height: 1.65;
  color: var(--color-text);
}
.site-footer .container {
  width: calc(100% - (var(--container-padding) * 2));
  max-width: var(--container-width);
  padding-left: 0;
  padding-right: 0;
  margin-left: auto;
  margin-right: auto;
}
.site-footer h2 { margin: 0; }
.site-footer a { color: inherit; text-decoration: none; }
.site-footer ul { margin: 0; padding: 0; list-style: none; }
.footer__grid {
  display: grid;
  grid-template-columns: 1.25fr 1fr 1.05fr 1.15fr 1fr 1.1fr;
  gap: var(--space-6);
  padding-bottom: var(--space-10);
}
.footer__brand .footer__logo {
  display: inline-block;
  padding: var(--space-3) var(--space-4);
  background: var(--color-white);
  border: var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-card);
  margin-bottom: var(--space-4);
}
.footer__brand .footer__logo img {
  display: block;
  width: auto;
  height: var(--footer-logo-height);
  max-width: 100%;
}
.footer__company {
  font-weight: 700;
  color: var(--color-heading);
  margin-bottom: var(--space-2);
}
.footer__contact li {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
  margin-bottom: var(--space-2);
  overflow-wrap: anywhere;
}
.footer__contact li span { display: block; }
.footer__contact .icon {
  color: var(--color-primary);
  margin-top: var(--space-1);
  width: var(--space-4);
  height: var(--space-4);
  flex: none;
  border-radius: 0;
}
.footer__contact a:hover { color: var(--color-primary-dark); }

.site-footer .footer__title {
  font-family: var(--font-body);
  font-size: var(--font-size-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-accent-dark);
  margin: 0 0 var(--space-4);
}
.footer__links li { margin-bottom: var(--space-2); }
.footer__links a {
  transition: color var(--duration-fast), padding var(--duration-fast);
}
.footer__links a:hover {
  color: var(--color-primary-dark);
  padding-left: var(--space-1);
}

.footer__news p { margin: 0 0 var(--space-3); }
.footer__social-title { margin-top: var(--space-6); }
.social { display: flex; gap: var(--space-2); }
.social a {
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  font-size: var(--font-size-lg);
  transition: background-color var(--duration-fast),
              color var(--duration-fast),
              translate var(--duration-fast) var(--ease-smooth);
}
.social a i { font-size: var(--font-size-md); line-height: 1; }
.social a:hover {
  background: var(--color-primary);
  color: var(--color-white);
  translate: 0 -3px;
}

/* Newsletter: markup theo design (block h26_subscribe), giữ endpoint AJAX ajSubmitSubscribe */
.footer__news p { margin: 0 0 var(--space-3); }
.news-form { display: grid; gap: var(--space-3); }
.news-form input {
  width: 100%;
  min-height: var(--space-12);
  padding: 0 var(--space-3);
  border: var(--border);
  border-radius: var(--radius-md);
  background: var(--color-white);
  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  color: var(--color-heading);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.news-form input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
}
.news-form .field__error {
  display: block;
  min-height: var(--space-5);
  padding-top: var(--space-1);
  font-size: var(--font-size-xs);
  color: var(--color-danger);
}
.news-status {
  min-height: var(--space-5);
  margin: 0 0 var(--space-3);
  font-size: var(--font-size-xs);
  font-weight: 600;
  color: var(--color-primary-dark);
}
.news-status.is-error { color: var(--color-danger); }

.footer__bottom {
  border-top: var(--border);
  padding-block: var(--space-5);
}
.footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.pay {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex-wrap: wrap;
  color: var(--color-text);
}
.pay__badge {
  display: inline-grid;
  place-items: center;
  height: var(--space-8);
  min-width: var(--space-12);
  padding: 0 var(--space-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  background: var(--color-white);
}
.pay__badge img { display: block; height: var(--space-5); width: auto; }
.footer__copy {
  font-size: var(--font-size-xs);
  color: var(--color-text-light);
  margin: 0;
}
.footer__copy a { color: var(--color-heading); }
.footer__copy a:hover { color: var(--color-primary-dark); }

/* ---------- Back to top ---------- */
.to-top {
  position: fixed;
  right: var(--space-6);
  bottom: var(--space-6);
  z-index: var(--z-overlay);
  width: 48px;
  height: 48px;
  border: 0;
  border-radius: 50%;
  padding: 0;
  display: grid;
  place-items: center;
  background: var(--color-primary);
  color: var(--color-white);
  box-shadow: var(--top-btn-shadow);
  cursor: pointer;
  opacity: 0;
  visibility: hidden;
  translate: 0 14px;
  transition: opacity var(--duration-normal),
              translate var(--duration-normal) var(--ease-smooth),
              background-color var(--duration-fast),
              visibility 0s var(--duration-normal);
}
.to-top.is-visible {
  opacity: 1;
  visibility: visible;
  translate: 0 0;
  transition-delay: 0s;
}
.to-top:hover { background: var(--color-accent-dark); }
.to-top .icon { width: var(--space-5); height: var(--space-5); }

/* ==========================================================================
   BÙ KHOẢNG CHO HEADER FIXED
   Chỉ bật khi có html.h26-header-on (do template header thêm vào).
   ========================================================================== */
html.h26-header-on #page { padding-top: var(--header-height); }
/* Trang chủ: hero nằm dưới header trong suốt (đúng design) */
html.h26-header-on.h26-is-home #page { padding-top: 0; }
/* Chặn scroll ngang do translate của hiệu ứng reveal (±40px ở section 06):
   overflow-x: clip không tạo scroll container nên không ảnh hưởng fixed/sticky. */
html.h26-header-on #page {
  overflow-x: hidden;   /* fallback cho trình duyệt chưa hỗ trợ clip */
  overflow-x: clip;
}
/* Bỏ margin-top 78px cũ của .page_container (được thiết kế cho header tĩnh) */
html.h26-header-on .page_container { margin-top: 0 !important; }

/* ==========================================================================
   TRANG CHỦ — TYPOGRAPHY
   Font lấy nguyên từ html/assets/css/style.css (RULE 19):
   body = DM Sans, h1–h4 = Playfair Display. Chỉ áp dụng khi cờ SiteHeaderV2 bật
   (class h26-is-home do index.tpl thêm vào <html>).
   ========================================================================== */
html.h26-is-home body {
  font-family: var(--font-body);
}
html.h26-is-home h1,
html.h26-is-home h2,
html.h26-is-home h3,
html.h26-is-home h4 {
  font-family: var(--font-heading);
}

body.is-locked { overflow: hidden; }

/* Focus ring dùng token */
.site-header a:focus-visible,
.site-header button:focus-visible,
.site-footer a:focus-visible,
.site-footer button:focus-visible,
.site-footer input:focus-visible,
.h26-actionbar a:focus-visible,
.h26-actionbar button:focus-visible {
  outline: 3px solid var(--color-accent);
  outline-offset: 3px;
  border-radius: var(--radius-sm);
}

/* ==========================================================================
   ACTION BAR — bottom nav mobile
   Hiển thị ở ≤768px (site-2026-responsive.css). Dữ liệu: _actionbar-h26.tpl.
   ========================================================================== */
.h26-actionbar {
  display: none;
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--z-header);
  height: calc(var(--actionbar-height) + var(--actionbar-safe-bottom));
  padding-bottom: var(--actionbar-safe-bottom);
  background: var(--actionbar-bg);
  border-top: var(--border);
  box-shadow: var(--actionbar-shadow);
}
.h26-actionbar__list {
  display: flex;
  height: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}
.h26-actionbar__item {
  flex: 1 1 0;
  min-width: 0;
}
.h26-actionbar__link {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--actionbar-label-gap);
  width: 100%;
  height: 100%;
  padding: 0 var(--space-1);
  border: 0;
  background: none;
  color: var(--actionbar-color);
  font-family: var(--font-body);
  font-size: var(--actionbar-label-size);
  font-weight: 600;
  line-height: var(--actionbar-label-line);
  letter-spacing: var(--actionbar-label-tracking);
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: color var(--duration-fast);
}
.h26-actionbar__link:hover,
.h26-actionbar__link:focus-visible,
.h26-actionbar__link.is-active {
  color: var(--actionbar-color-active);
}
/* Chat luôn dùng màu primary (điểm nhấn như ảnh mẫu) */
.h26-actionbar__link--chat { color: var(--actionbar-color-active); }
.h26-actionbar .icon {
  width: var(--actionbar-icon-size);
  height: var(--actionbar-icon-size);
  flex: none;
  color: inherit;
  stroke: currentColor;
  fill: none;
  stroke-width: var(--icon-stroke);
  stroke-linecap: round;
  stroke-linejoin: round;
}
.h26-actionbar__label {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Nút tròn "Tailor-Made" nhô lên trên bar */
.h26-actionbar__link--cta {
  translate: 0 var(--actionbar-cta-lift);
}
.h26-actionbar__cta {
  display: grid;
  place-items: center;
  width: var(--actionbar-cta-size);
  height: var(--actionbar-cta-size);
  border-radius: var(--radius-pill);
  background: var(--actionbar-cta-bg);
  color: var(--actionbar-cta-color);
  box-shadow: var(--actionbar-cta-shadow), 0 0 0 var(--actionbar-cta-ring) var(--actionbar-bg);
  transition: background-color var(--duration-fast), box-shadow var(--duration-fast);
}
.h26-actionbar__link--cta .icon {
  width: var(--actionbar-cta-icon-size);
  height: var(--actionbar-cta-icon-size);
}
.h26-actionbar__link--cta .h26-actionbar__label { color: var(--actionbar-cta-label); }
.h26-actionbar__link--cta:hover .h26-actionbar__cta,
.h26-actionbar__link--cta:focus-visible .h26-actionbar__cta {
  background: var(--color-accent-dark);
}