/* =========================================================================
   tokens.css – Biến thiết kế dùng chung (Design tokens) – VNTRIP TMS
   -------------------------------------------------------------------------
   Màu & font đã chốt 12/11/2026 (DESIGN_SYSTEM.md):
     Vàng #FCB913 · Navy #24243A · Trắng #FFFFFF · Xám sáng #F5F6F8 · Be Vietnam Pro
   Muốn đổi màu/khoảng cách toàn website: sửa ở đây, không sửa từng file khác.
   Màu cũng được khai báo trong Elementor (Site Settings → Global Colors) ở Giai đoạn 2
   để chỉnh trực quan; hai nơi phải giữ cùng giá trị.
   ========================================================================= */

:root {
	/* Màu thương hiệu */
	--vt-yellow: #FCB913;
	--vt-dark: #24243A;
	--vt-white: #FFFFFF;
	--vt-gray: #F5F6F8;

	/* Màu bổ trợ (chữ, viền) – theo DESIGN_SYSTEM.md mục 2.2 */
	--vt-text: #262626;
	--vt-text-2: #686875;
	--vt-border: #E5E7EB;
	--vt-dark-2: #1B1B2C;      /* nền tối đậm hơn (khung laptop, thanh trên cùng) */

	/* Chữ */
	--vt-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Bo góc */
	--vt-r-input: 8px;
	--vt-r-btn: 10px;
	--vt-r-card: 16px;
	--vt-r-lg: 24px;

	/* Đổ bóng */
	--vt-sh-1: 0 1px 2px rgba(36, 36, 58, .06);
	--vt-sh-2: 0 8px 24px rgba(36, 36, 58, .08);
	--vt-sh-y: 0 6px 18px rgba(252, 185, 19, .25);

	/* Bố cục */
	--vt-container: 1240px;
	--vt-gutter: 20px;
	--vt-header-h: 72px;       /* chiều cao header khi cuộn – dùng để bù khi bấm menu anchor */

	/* Chuyển động */
	--vt-ease: cubic-bezier(.2, .7, .2, 1);
}

@media (min-width: 768px) {
	:root { --vt-gutter: 32px; }
}

/* -------------------------------------------------------------------------
   Nối với Màu chung của Elementor (Elementor → Site Settings → Global Colors).
   Elementor gắn các biến --e-global-color-* lên <body> (class elementor-kit-*),
   nên ở đây đọc lại chúng trên <body>. Đổi màu trong Elementor → toàn bộ CSS
   của child theme đổi theo. Nếu Elementor chưa nạp, dùng giá trị mặc định ở :root.
     primary   = Navy #24243A        secondary = Vàng thương hiệu #FCB913
     text      = Chữ nội dung #262626 accent   = Vàng – nút CTA #FCB913
     vtwhite   = Trắng               vtgray   = Xám sáng
     vttext2   = Chữ phụ             vtborder = Viền      vtdark2 = Navy đậm
   ------------------------------------------------------------------------- */
body.vt-site {
	--vt-dark: var(--e-global-color-primary, #24243A);
	--vt-yellow: var(--e-global-color-secondary, #FCB913);
	--vt-text: var(--e-global-color-text, #262626);
	--vt-white: var(--e-global-color-vtwhite, #FFFFFF);
	--vt-gray: var(--e-global-color-vtgray, #F5F6F8);
	--vt-text-2: var(--e-global-color-vttext2, #686875);
	--vt-border: var(--e-global-color-vtborder, #E5E7EB);
	--vt-dark-2: var(--e-global-color-vtdark2, #1B1B2C);
}