/* =====================================================================
   BASE — dùng chung TOÀN SITE (luôn tải)
   Chứa design token (:root) — nguồn DUY NHẤT của màu + font. Mọi file CSS khác dùng var(--gv-*),
   không viết mã hex/tên font trực tiếp. Đổi màu thương hiệu = sửa ở đây một lần.
   ===================================================================== */
:root {
	/* Font (Inter + Material Symbols được nhúng bằng functions.php) */
	--gv-font: 'Inter', sans-serif;
	--gv-font-icon: 'Material Symbols Outlined';

	/* Thương hiệu */
	--gv-primary: #1D62C1;        /* nút, nhấn chính, header (xanh dương) */
	--gv-primary-dark: #124A9C;   /* hover nút, nền đậm */
	--gv-accent: #0F4FA8;         /* link nhấn, hover, chữ xanh đậm */
	--gv-primary-soft: #EAF2FF;   /* nền xanh nhạt (chip, hover) */
	--gv-primary-line: #BFD7F8;   /* viền xanh nhạt */

	/* Giá + khuyến mãi (đỏ) và điểm nhấn vàng */
	--gv-price: #D70018;          /* giá bán, tổng tiền */
	--gv-price-soft: #FFF1F1;     /* nền nhãn % giảm */
	--gv-yellow: #FFD400;         /* điểm nhấn: nhãn, tiêu đề khuyến mãi, badge giỏ */
	--gv-yellow-soft: #FFF8D6;
	--gv-on-yellow: #4A3B00;      /* chữ trên nền vàng */

	/* Chữ */
	--gv-text: #171717;           /* tiêu đề */
	--gv-ink: #262626;
	--gv-text-2: #404040;         /* nội dung */
	--gv-text-3: #525252;         /* mô tả phụ */
	--gv-muted: #737373;          /* chú thích */
	--gv-muted-2: #A3A3A3;        /* mờ nhất, placeholder */
	--gv-link: #155DFC;

	/* Nền + viền */
	--gv-white: #FFFFFF;
	--gv-bg: #F5F5F5;             /* nền xám nhạt khối */
	--gv-border: #ECECEC;         /* viền thẻ */
	--gv-border-2: #E5E5E5;       /* viền ô nhập, nút */
	--gv-border-3: #D4D4D4;       /* viền đậm (checkbox) */
	--gv-border-soft: #F0F0F0;    /* đường kẻ mảnh */

	/* Trạng thái */
	--gv-success: #16A34A;
	--gv-warn: #EA580C;
	--gv-warn-soft: #FFF7ED;
}

/* Font đồng nhất: ép Inter cho toàn bộ chữ (Flatsome đặt font riêng cho heading/nút/ô nhập) */
body, h1, h2, h3, h4, h5, h6, .button, button, input, select, textarea, .nav > li > a { font-family: var(--gv-font); }

/* Icon Google Material Symbols (font nhúng bằng functions.php).
   Dùng qua helper PHP gv_icon('memory') hoặc <span class="gv-ico material-symbols-outlined">memory</span> */
.gv-ico { font-family: var(--gv-font-icon); font-weight: normal; font-style: normal; font-size: 16px; line-height: 1; letter-spacing: normal; text-transform: none; display: inline-block; white-space: nowrap; font-feature-settings: 'liga'; -webkit-font-smoothing: antialiased; vertical-align: middle; color: var(--gv-muted); }

/* ---- Danh sách danh mục con: shortcode [child_cat parent_id="ID"] (inc/home-sections.php) ----
   Dạng nút bấm, một hàng, cuộn ngang khi dài (ẩn thanh cuộn, kéo/vuốt để xem thêm). */
.gv-child-cats { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start !important; gap: 8px; margin: 0; padding: 2px 0 6px; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-end; }
.gv-child-cats::-webkit-scrollbar { display: none; }
.gv-child-cats li { flex: none; margin: 0; padding: 0; }
.gv-child-cats a { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 0 16px; border: 1px solid transparent; border-radius: 99px; background: var(--gv-bg); color: var(--gv-text-2); font-size: 12px; font-weight: 500; line-height: 1; white-space: nowrap; transition: border-color .15s, color .15s, background .15s, transform .1s; }
.gv-child-cats a:hover { border-color: var(--gv-primary); background: var(--gv-primary-soft); color: var(--gv-accent); }
.gv-child-cats a:active { transform: translateY(1px); }
.gv-child-cats a.is-active { border-color: var(--gv-primary); background: var(--gv-primary); color: var(--gv-white); }
/* style="text": chữ in hoa trên thanh menu, không viền */
.gv-child-cats--text { gap: 4px 22px; }
.gv-child-cats--text a { min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: none; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; }
.gv-child-cats--text a:hover { background: none; }
.gv-child-cats--text a.is-active { background: none; color: var(--gv-accent); }