/**
 * Hệ biến giao diện dùng chung toàn website.
 *
 * Mục tiêu khi nhân bản website:
 * - Đổi bảng màu tại file này, không sửa rải rác từng module.
 * - Module chỉ dùng biến ngữ nghĩa: nền, viền, chữ, hover, điểm nhấn.
 * - Không khóa màu thương hiệu trực tiếp trong CSS chức năng mới.
 */
:root {
	/* =========================
	 * 1. Bảng màu thương hiệu
	 * ========================= */
	--v247-accent: #0d9258;
	--v247-accent-hover: #08764a;
	--v247-accent-soft: #e8f3ed;
	--v247-accent-soft-strong: #dcece3;

	/* Chữ: heading không còn xanh đậm toàn site, chỉ dùng xanh làm điểm nhấn/hover. */
	--v247-text: #46534d;
	--v247-text-muted: #6d7872;
	--v247-heading-primary: #555555;
	--v247-heading-text: #555555;
	--v247-heading-muted: #68736d;
	--v247-heading-hover: var(--v247-accent);
	--v247-heading-hero: #ffffff;
	--v247-link-color: #59675f;
	--v247-link-hover: var(--v247-accent);

	/* =========================
	 * 2. Nền, khối, viền, control
	 * ========================= */
	--v247-site-surface-default: #ffffff;
	--v247-site-surface-soft: #f5f8f6;
	--v247-site-surface: var(--v247-site-surface-default);

	--v247-panel-bg: #f3f6f4;
	--v247-panel-header-bg: #f7f9f8;
	--v247-panel-border: #d8e2dc;
	--v247-panel-divider: #e4eae6;
	--v247-panel-shadow: 0 4px 14px rgba(70, 83, 77, 0.025);
	--v247-panel-shadow-hover: 0 8px 20px rgba(70, 83, 77, 0.055);
	--v247-panel-radius: 14px;

	--v247-control-bg: #fafcfb;
	--v247-control-border: #d8e2dc;
	--v247-control-border-hover: #c7d5cd;
	--v247-control-text: #59655f;
	--v247-control-radius: 8px;

	/* =========================
	 * 3. Header
	 * ========================= */
	--v247-header-top-bg: #fbfcfb;
	--v247-header-nav-bg: #edf3ee;
	--v247-header-border: #e4ece7;
	--v247-header-control-bg: #f5f8f6;
	--v247-header-shadow: rgba(20, 69, 49, 0);

	--v247-header-logo-row-height: 60px;
	--v247-header-logo-max-height: 52px;
	--v247-header-search-height: 36px;
	--v247-header-control-size: 36px;
	--v247-header-menu-icon-size: 32px;
	--v247-header-menu-font-size: 14px;
	--v247-header-menu-link-pad-y: 5px;
	--v247-header-search-pad-y: 10px;
	--v247-header-right-pad-y: 11px;
	--v247-header-control-text-pad-y: 7px;
	--v247-mobile-header-offset: 61px;

	/* =========================
	 * 4. Typography
	 * ========================= */
	--v247-font-family: Montserrat, sans-serif;
	--v247-h1-commerce: 26px;
	--v247-h1-article: 30px;
	/* H1 noi dung mobile dung chung cho WooCommerce + bai viet. */
	--v247-h1-content-mobile: 20px;
	--v247-h1-commerce-mobile: var(--v247-h1-content-mobile);
	--v247-h1-article-mobile: var(--v247-h1-content-mobile);
	--v247-h1-home: 38px;
	--v247-h1-home-mobile: 23px;
	--v247-h2: 24px;
	--v247-h2-mobile: 19px;
	--v247-h3: 20px;
	--v247-h3-mobile: 17px;
	--v247-h4: 18px;
	--v247-h4-mobile: 16px;
	--v247-h5: 16px;
	--v247-h5-mobile: 15px;
	--v247-h6: 14px;
	--v247-h6-mobile: 14px;
	--v247-home-section-title: 22px;
	--v247-home-section-title-mobile: 18px;
	--v247-heading-weight: 600;
	--v247-heading-transition: color 0.18s ease;

	/* =========================
	 * 5. Breadcrumb
	 * ========================= */
	--v247-breadcrumb-text: #6d7872;
	--v247-breadcrumb-hover: var(--v247-accent);
	--v247-breadcrumb-hero: #ffffff;
	--v247-breadcrumb-hero-hover: #e2f2e9;
	--v247-breadcrumb-font-size: 14px;
	--v247-breadcrumb-font-size-mobile: 11px;

	/* =========================
	 * 6. Hero/khối nhận diện lớn
	 * Chỉ cần đổi ba màu này để đổi tông Hero toàn site.
	 * ========================= */
	--v247-hero-start: #2d6651;
	--v247-hero-mid: #2f8a65;
	--v247-hero-end: #62b28e;

	/* =========================
	 * 7. Footer
	 * ========================= */
	--v247-footer-bg: #eef3f0;
	--v247-footer-menu-bg: #f7faf8;
	--v247-footer-menu-border: #d7e1db;

	/* Tên tương thích cũ. */
	--v247-site-card: var(--v247-panel-bg);
}

/*
 * Tông nền xanh-xám nhạt chỉ cho các khu vực nội dung đã thống nhất.
 * Giỏ hàng/Thanh toán giữ nền mặc định để không đổi ngoài phạm vi.
 */
body.home,
body.woocommerce-shop,
body.post-type-archive-product,
body.tax-product_cat,
body.tax-product_tag,
body.single-product,
body.blog,
body.single-post,
body.category,
body.tag,
body.author,
body.date {
	--v247-site-surface: var(--v247-site-surface-soft);
}