:root {
    /* ==========================================
     Màu sắc chung (Global Colors)
     ========================================== */

    /* 1. Màu Thương Hiệu (Primary & Accent) */
    --color-primary: 20, 112, 120; /* Teal / Xanh mòng két #147078 */
    --color-primary-hover: 26, 118, 166; /* Blue teal đậm hơn #1a76a6 */
    --color-primary-dark: 13, 77, 83; /* Teal tối #0d4d53 */
    --color-primary-dark-hover: 21, 125, 132; /* Teal tối hover #157D84 */
    --color-accent: 255, 184, 0; /* Yellow / Vàng #ffb800 */
    --color-accent-hover: 229, 160, 0; /* Vàng đậm khi hover #e5a000 */
    --color-bg: 237, 246, 238;

    /* 2. Màu cơ bản (Basic) */
    --color-white: 253, 253, 253;
    --color-transparent: transparent;

    /* 3. Gradient nền (Hero section) */
    --color-hero-grad-start: 20, 112, 120;
    --color-hero-grad-end: 190, 223, 226;

    /* Ảnh nền hero (override từ Customizer → uploads/astra-child/hero-vars.css) */
    --astra-hero-primary: url("/wp-content/uploads/2026/01/THY05330-1536x1025-1.jpg");
    --astra-hero-secondary: url("/wp-content/uploads/2026/01/THY05643-1536x1025-1.jpg");

    /* 4. Background */
    --color-bg-hover: 240, 240, 240;
    --color-bg-section: 240, 244, 248;
    --color-bg-card: 241, 245, 249;

    /* 5. Border */
    --color-border-light: 229, 231, 235;
    --color-border-dashed: 203, 213, 225;

    /* 6. Text */
    --color-text-body: 71, 85, 105;
    --color-text-muted: 100, 116, 139;
    --color-text-light: 148, 163, 184;
    --color-text-dark: 15, 23, 42; /* Chữ tối #0f172a */

    /* 7. Shadow */
    --shadow-primary-glow: 0 4px 16px rgba(20, 112, 120, 0.1);
    --shadow-btn-hover: 0 4px 12px rgba(0, 0, 0, 0.15);
    --shadow-card-sm: 0 2px 8px rgba(0, 0, 0, 0.08);
    --shadow-card-md: 0 2px 8px rgba(0, 0, 0, 0.1);
    --shadow-card-hover: 0 4px 16px rgba(0, 0, 0, 0.12);
    --shadow-focus-ring: 0 0 0 3px rgba(20, 112, 120, 0.2);

    /* ==========================================
     Semantic Colors (RGB — dùng với rgb(var(...)))
     ========================================== */

    /* 8. Status */
    --color-success: 144, 169, 85; /* Xanh lá #43a047 */
    --color-success-dark: 19, 42, 19; /* Xanh lá đậm #2e7d32 */
    --color-danger: 229, 57, 53; /* Đỏ #e53935 */
    --color-warning: 251, 208, 124; /* Vàng cam #ffa000 */
    --color-info: 66, 165, 245; /* Xanh info #42a5f5 */

    /* 9. Price colors */
    --color-price: 29, 78, 216; /* Xanh đậm giá vé #1d4ed8 */
    --color-price-discount: 220, 38, 38; /* Đỏ giá khuyến mãi #dc2626 */
    --color-price-original: 107, 114, 128; /* Xám gạch giá gốc #6b7280 */
    --color-price-secondary: 230, 81, 0; /* Cam giá tổng #e65100 */

    /* ==========================================
     Neutral Gray Scale (RGB)
     ========================================== */

    /* 10. Gray scale (slate-based) */
    --color-gray-100: 248, 249, 250; /* #f8f9fa — nền nhẹ */
    --color-gray-200: 233, 236, 239; /* #e9ecef — viền nhẹ */
    --color-gray-300: 222, 226, 230; /* #dee2e6 — viền rõ */
    --color-gray-400: 206, 212, 218; /* #ced4da — border input */
    --color-gray-500: 173, 181, 189; /* #adb5bd — placeholder */
    --color-gray-600: 108, 117, 125; /* #6c757d — text phụ */
    --color-gray-700: 73, 80, 87; /* #495057 — text label */
    --color-gray-800: 52, 58, 64; /* #343a40 — text chính */
    --color-gray-900: 33, 37, 41; /* #212529 — text tối nhất */

    /* ==========================================
     Typography
     ========================================== */

    /* 11. Font family */
    --font-sans:
        -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu,
        sans-serif;
    --font-mono: "Courier New", Courier, monospace;

    /* ==========================================
     Border Radius
     ========================================== */
    --radius-xs: 4px;
    --radius-sm: 6px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 24px;
    --radius-full: 9999px;

    /* ==========================================
     Spacing (4px base scale)
     ========================================== */
    --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-24: 96px;

    /* ==========================================
     Transitions
     ========================================== */
    --duration-fast: 0.2s;
    --duration-base: 0.3s;
    --easing-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --transition-base: all var(--duration-base) var(--easing-standard);

    /* ==========================================
     Design Tokens (Extracted System)
     ========================================== */

    /* -------- Colors -------- */
    /* Keep only values not already defined above (L2-L64), in RGB tuple format */

    /* Accent extension */
    --color-accent-hover-strong: 215, 159, 18; /* #d79f12 */

    /* Surface extension */
    --color-surface-muted: 248, 250, 252; /* #f8fafc */
    --color-surface-soft: 255, 247, 237; /* #fff7ed */

    /* Border extension */
    --color-border-strong: 209, 213, 219; /* #d1d5db */

    /* Text extension */
    --color-text-secondary: 51, 65, 85; /* #334155 */
    --color-text-tertiary: 71, 85, 105; /* #475569 */

    /* Feedback extension */
    --color-feedback-success: 16, 185, 129; /* #10b981 */
    --color-feedback-error: 234, 67, 53; /* #ea4335 */
    --color-feedback-warning: 245, 158, 11; /* #f59e0b */
    --color-feedback-info: 37, 99, 235; /* #2563eb */

    /* Overlay */
    --color-overlay-40: rgba(15, 23, 42, 0.4);
    --color-overlay-60: rgba(15, 23, 42, 0.6);

    /* -------- Typography -------- */
    /* Font size scale */
    --text-xs: 12px;
    --text-sm: 13px;
    --text-base: 14px;
    --text-md: 15px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 22px;
    --text-4xl: 24px;
    --text-5xl: 28px;

    /* Font weight scale */
    --font-weight-regular: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    --font-weight-extrabold: 800;

    /* Line-height scale */
    --line-height-tight: 1.2;
    --line-height-snug: 1.4;
    --line-height-normal: 1.6;
    --line-height-relaxed: 1.8;

    /* -------- Spacing -------- */
    /* Semantic aliases over 4px base scale */
    --space-2xs: var(--space-1);
    --space-xs: var(--space-2);
    --space-sm: var(--space-3);
    --space-md: var(--space-4);
    --space-lg: var(--space-5);
    --space-xl: var(--space-6);
    --space-2xl: var(--space-8);
    --space-3xl: var(--space-10);
    --space-4xl: var(--space-12);
    --space-5xl: var(--space-16);
    --space-6xl: var(--space-24);
}
body,
button,
input,
select,
textarea,
.ast-button,
.ast-custom-button {
    font-family: "Google Sans Flex", sans-serif !important;
    font-weight: 400;
    font-size: 16px !important;
    font-size: 1rem !important;
    line-height: var(--ast-body-line-height, 1.65) !important;
}