/* ==========================================================================
   TẦNG 0 — TOKENS
   Biến gốc của toàn site. Khai báo DUY NHẤT 1 lần tại đây.
   Mọi tầng sau chỉ được dùng var(--...), không viết giá trị cứng.
   Nguồn: DESIGN_SYSTEM_SUACHUANHATPHCM_V1
   ========================================================================== */

:root {
	/* --- Màu: nền tảng ------------------------------------------------- */
	--c-navy: #0d2137;          /* heading, nút chính, header/nav          */
	--c-navy-2: #163250;        /* hover nút chính, nền section đậm        */
	/* VAI TRÒ 2 SẮC CAM — bắt buộc phân biệt, không dùng lẫn:
	   --c-orange        : NHẬN DIỆN. Nền lớn, viền, icon, và CHỮ TRÊN NỀN TỐI.
	                       Trên nền sáng chỉ đạt 2,78:1 nên KHÔNG dùng làm chữ.
	   --c-orange-strong : ĐẠT TƯƠNG PHẢN. Chữ cam TRÊN NỀN SÁNG (5,19:1 trên
	                       trắng, 4,84:1 trên surface) và nền nút CTA (chữ trắng). */
	--c-orange: #f07b1d;        /* nhận diện: nền, viền, icon, chữ trên nền tối */
	--c-orange-strong: #b84b00; /* chữ cam trên nền sáng + nền nút CTA          */
	--c-ink: #1a2b3c;           /* chữ body                                */
	--c-muted: #5e6e82;         /* chữ phụ, caption, meta                  */
	--c-link: #1e4a72;          /* link mặc định                           */
	--c-surface: #f5f7fa;       /* nền sáng xen kẽ                         */
	--c-border: #e0e8f0;        /* viền card, input, divider               */
	--c-white: #ffffff;
	--c-footer: #070f1a;

	/* --- Màu: trạng thái ----------------------------------------------- */
	--c-success: #1e7f4f;
	--c-error: #c0392b;
	--c-warning: #b8860b;
	--c-info: var(--c-link);

	/* --- Màu: dẫn xuất trên nền tối ------------------------------------ */
	--c-on-navy: var(--c-white);
	--c-on-navy-muted: rgba(255, 255, 255, 0.78);
	--c-on-navy-border: rgba(255, 255, 255, 0.16);

	/* --- Spacing: hệ 8px ----------------------------------------------- */
	--sp-1: 4px;
	--sp-2: 8px;
	--sp-3: 12px;
	--sp-4: 16px;
	--sp-5: 24px;
	--sp-6: 32px;
	--sp-7: 40px;
	--sp-8: 48px;
	--sp-9: 64px;
	--sp-10: 80px;
	--sp-11: 96px;

	/* --- Container ------------------------------------------------------ */
	--container-max: 1240px;
	--container-narrow: 800px;
	/* GUTTER NGANG — nguồn duy nhất, chỉ .dst-container dùng.
	   Thang 3 mốc (theo chỉ dẫn chủ website 27/07): 12 (≤360) / 16 (361–767) /
	   24 (≥768). .dst-section KHÔNG có padding ngang (xem 02-layout). */
	--pad-x: 12px;             /* ≤360px */

	/* --- Nhịp section (dọc) --------------------------------------------- */
	--section-y: var(--sp-7);        /* 40px mobile                         */
	--section-y-lg: var(--sp-11);    /* hero/CTA                            */
	--section-y-sm: var(--sp-4);     /* breadcrumb, trust bar               */

	/* --- Typography: họ chữ --------------------------------------------- */
	--font-display: "Barlow Condensed", "Arial Narrow", sans-serif;
	--font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

	/* --- Typography: cỡ chữ (mobile-first) ------------------------------ */
	--fs-h1: 36px;
	--fs-h2: 30px;
	--fs-h3: 22px;
	--fs-h4: 18px;
	--fs-h5: 16px;
	--fs-h6: 14px;
	--fs-body: 16px;
	--fs-body-sm: 14px;
	--fs-caption: 12px;
	--fs-label: 14px;
	--fs-button: 16px;
	--fs-table: 14px;

	/* --- Typography: line-height ---------------------------------------- */
	--lh-h1: 1.15;
	--lh-h2: 1.2;
	--lh-h3: 1.3;
	--lh-body: 1.7;
	--lh-tight: 1.4;

	/* --- Typography: weight --------------------------------------------- */
	--fw-normal: 400;
	--fw-medium: 500;
	--fw-semibold: 600;
	--fw-bold: 700;

	/* --- Bo góc --------------------------------------------------------- */
	--r-sm: 6px;
	--r-btn: 8px;
	--r-card: 12px;
	--r-img: 12px;
	--r-pill: 999px;

	/* --- Đổ bóng (rất nhẹ) ---------------------------------------------- */
	--sh-1: 0 1px 2px rgba(13, 33, 55, 0.06);
	--sh-2: 0 4px 12px rgba(13, 33, 55, 0.08);
	--sh-3: 0 8px 24px rgba(13, 33, 55, 0.10);
	--sh-float: 0 6px 16px rgba(13, 33, 55, 0.18);

	/* --- Viền ------------------------------------------------------------ */
	--bd-1: 1px solid var(--c-border);
	--bd-strong: 1px solid var(--c-navy);

	/* --- Chuyển động ----------------------------------------------------- */
	--t-fast: 150ms ease;
	--t-base: 200ms ease;
	--t-slow: 300ms ease;

	/* --- Kích thước điều khiển ------------------------------------------- */
	--control-h: 46px;
	--control-h-sm: 38px;
	--control-h-lg: 54px;
	--tap-min: 44px;            /* vùng chạm tối thiểu (WCAG)               */

	/* --- Z-index --------------------------------------------------------- */
	--z-base: 0;
	--z-raised: 1;
	--z-sticky: 10;
	--z-header: 100;
	--z-dropdown: 200;
	--z-overlay: 900;
	--z-modal: 1000;
	--z-toast: 1100;
	--z-float: 1200;

	/* --- Opacity ---------------------------------------------------------- */
	--op-disabled: 0.5;
	--op-overlay: 0.55;
}

/* Điện thoại lớn: 361–767px — chỉ nâng gutter, chưa đổi typography. */
@media (min-width: 361px) {
	:root {
		--pad-x: 16px;
	}
}

/* Tablet: >= 768px */
@media (min-width: 768px) {
	:root {
		--fs-h1: 44px;
		--fs-h2: 34px;
		--fs-h3: 23px;
		--fs-h4: 19px;
		--fs-body: 16px;
		--pad-x: 24px;
		--section-y: var(--sp-8);   /* 48px */
	}
}

/* Desktop: >= 992px */
@media (min-width: 992px) {
	:root {
		--fs-h1: 56px;
		--fs-h2: 42px;
		--fs-h3: 24px;
		--fs-h4: 20px;
		--fs-body: 17px;
		--fs-body-sm: 15px;
		--fs-caption: 13px;
		--fs-table: 15px;
		/* --pad-x giữ 24px kế thừa từ mốc 768 — không khai lại. */
		--section-y: var(--sp-9);   /* 64px */
	}
}

/* ==========================================================================
   THANG BREAKPOINT CHÍNH THỨC — chỉ dùng 2 mốc này trong toàn bộ CSS:
     @media (min-width: 768px)   -> tablet trở lên
     @media (min-width: 992px)   -> desktop trở lên
   Viết mobile-first: mặc định là mobile, dùng min-width để mở rộng.
   (Riêng header/off-canvas do Astra quản lý ở mốc 921px — không đụng.)
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
	:root {
		--t-fast: 1ms;
		--t-base: 1ms;
		--t-slow: 1ms;
	}
}