/**
 * DESIGN TOKENS — Gợi Ý Tốt
 *
 * Rút ra từ bộ mockup đã duyệt (Homepage V2, Category V2, Golden Product Review).
 * 🔴 Claude Code KHÔNG được tự đổi bảng màu / typography. Muốn đổi phải có spec mới.
 *
 * Nguyên tắc phân vai màu:
 *   --gyt-brand   xanh lá  = bản sắc Gợi Ý Tốt, hành động NỘI BỘ (xem đánh giá, xem hướng dẫn)
 *   --gyt-cta     cam      = hành động THƯƠNG MẠI duy nhất (sang Shopee)
 * Không dùng lẫn. Đây là thứ giữ cho site trông như trang review độc lập,
 * không phải storefront (yêu cầu Trust ở cả 5 spec).
 */

:root {
	/* ---------- Màu thương hiệu ----------
	   ĐO TRỰC TIẾP trên golden mockup Product Review:
	     ô điểm 8.5/10      #158d55
	     nút "Xem mẫu khác" #168853
	     hộp Đánh giá nhanh #f1f9f5
	   Đừng đoán màu — mở file mockup ra đo lại nếu cần đổi. */
	--gyt-brand:          #158d55;
	--gyt-brand-dark:     #0c7043;
	/* Nền hộp đo trên mockup là #f1f9f5, nhưng ở mockup nó đọc ra XANH RÕ hơn
	   nhờ viền xanh bao quanh. Đậm thêm một nấc để cùng cảm giác. */
	--gyt-brand-light:    #cbe8d8;
	--gyt-brand-tint:     #e9f6ef;

	/* Màu riêng của file logo (FIle-Du-An/logo.png) — đo từ chính file ảnh.
	   Logo đậm hơn xanh thương hiệu; giữ riêng để không kéo cả bảng màu tối theo. */
	--gyt-logo-deep:      #034e40;
	--gyt-logo-accent:    #77c791;

	/* ---------- CTA thương mại (Shopee) ----------
	   Đo trên mockup: nút chính #fd4b20, nút sidebar #fd4e22 */
	--gyt-cta:            #fd4b20;
	--gyt-cta-dark:       #e13a12;
	--gyt-cta-tint:       #fff1ed;

	/* 🔴 GIÁ dùng màu ĐỎ RIÊNG, KHÔNG dùng chung với cam của nút.
	   Đo trên mockup: chữ giá #ff0000, badge giảm giá #fe0000.
	   Dùng lẫn hai màu này là sai mockup. */
	--gyt-price:          #fa1414;

	/* ---------- Chữ ----------
	   Đo trên mockup: tiêu đề và thân bài GẦN ĐEN (#000219),
	   còn mô tả ngắn / chú thích là XANH XÁM (#7f8aa0) — không phải xám trung tính. */
	--gyt-text:           #0b0f1a;
	--gyt-text-soft:      #3d4756;
	--gyt-text-muted:     #71809a;
	--gyt-text-faint:     #8f9bad;

	/* ---------- Nền ----------
	   Đo mockup: nền NGOÀI nội dung là #f4fafd (xanh rất nhạt), không phải trắng.
	   Chính nó làm các panel trắng nổi lên và tách bạch — bỏ đi là trang dính liền. */
	--gyt-bg:             #ffffff;
	--gyt-bg-page:        #f4f8fb;
	--gyt-bg-soft:        #f9fafb;
	--gyt-bg-section:     #f7faf8;

	/* ---------- Viền ---------- */
	--gyt-border:         #e5e7eb;
	--gyt-border-soft:    #f3f4f6;

	/* ---------- Trạng thái ---------- */
	--gyt-positive:       #16a34a;
	--gyt-negative:       #dc2626;
	--gyt-warning:        #d97706;
	--gyt-star:           #f59e0b;

	/* ---------- Bo góc ---------- */
	--gyt-radius-sm:      6px;
	--gyt-radius:         10px;
	--gyt-radius-lg:      14px;
	--gyt-radius-pill:    999px;

	/* ---------- Đổ bóng (rất nhẹ — mockup dùng viền là chính) ---------- */
	--gyt-shadow-sm:      0 1px 2px rgba(17, 24, 39, .05);
	--gyt-shadow:         0 2px 8px rgba(17, 24, 39, .06);
	--gyt-shadow-lg:      0 8px 24px rgba(17, 24, 39, .08);

	/* ---------- Khoảng cách ---------- */
	--gyt-space-1:        4px;
	--gyt-space-2:        8px;
	--gyt-space-3:        12px;
	--gyt-space-4:        16px;
	--gyt-space-5:        20px;
	--gyt-space-6:        24px;
	--gyt-space-8:        32px;
	--gyt-space-10:       40px;
	--gyt-space-12:       48px;
	--gyt-space-16:       64px;

	/* ---------- Chữ ---------- */
	--gyt-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--gyt-text-xs:        12px;
	--gyt-text-sm:        13px;
	--gyt-text-base:      15px;
	--gyt-text-md:        16px;
	--gyt-text-lg:        18px;
	--gyt-text-xl:        20px;
	--gyt-text-2xl:       24px;
	--gyt-text-3xl:       30px;
	--gyt-text-4xl:       38px;

	--gyt-leading-tight:  1.25;
	--gyt-leading:        1.6;
	--gyt-leading-loose:  1.75;

	/* ---------- Bố cục ---------- */
	/* Mockup vẽ ở khổ 1024 với cột chính 687 (67%) + sidebar 311.
	   Ở khổ desktop thật, 1200 làm cột chính chỉ còn ~830 — đọc như blog.
	   1320 đưa cột chính lên ~950, sidebar giữ nguyên tỉ lệ 26%. */
	--gyt-container:      1320px;
	/**
	 * 🔴 ĐO DÒNG CHỮ (measure) — bề rộng TỐI ĐA của một đoạn văn chạy dài.
	 *
	 * Cột main của bố cục hybrid rộng 928px (xem `.gyt-bg__grid`). Đoạn văn chạy trọn 928
	 * thì mỗi dòng ~110 ký tự, mắt trượt dòng khi xuống hàng. 840 ≈ 95–100 ký tự.
	 *
	 * Chỉ bó ĐOẠN VĂN, TUYỆT ĐỐI không bó khối chứa: ảnh · video · FAQ · bảng · thẻ sản phẩm ·
	 * hộp xử lý lỗi · tiêu đề mục vẫn chạy trọn 928 nên MÉP SECTION không đổi (anh Khai 13/09).
	 */
	--gyt-measure:        840px;
	--gyt-container-narrow: 780px;
	--gyt-sidebar:        320px;
	--gyt-gutter:         20px;

	/* Chiều cao thanh CTA dính ở mobile — dùng để chừa chỗ cuối trang */
	--gyt-sticky-h:       64px;

	/* ---------- Vùng chạm ---------- */
	/* Buying Guide §13 / Comparison §8: tối thiểu 44px */
	--gyt-tap-min:        44px;
}