/* ==========================================================================
   DVP — KHỐI MÀU + PILL  (03/09/2026)
   Sếp chốt 03/09: "mỗi khối 1 màu riêng" (thay quyết định 13/08 gán màu theo
   HÃNG), Pill cho dải ngành hàng trang chủ + dãy danh mục con trang con.

   ĐƯỜNG LUI: xoá đúng 1 dòng nạp file này trong `layouts/theme.bwt` là về
   nguyên trạng. File này chỉ ĐÈ màu/bo góc/bóng, không đổi kích thước khối,
   không đổi bố cục, không đụng JS.

   ⚠ RÀNG BUỘC ĐÃ TRẢ HỌC PHÍ (đọc lịch sử 4 vòng trong dvp-trang-chu.css):
   Bản 3 dùng màu rực, độ sáng lệch nhau 5 lần -> Sếp chê "đột".
   Bản 4 dùng màu đằm CÙNG khoảng độ sáng -> Sếp chốt.
   => 8 bộ dưới đây do máy `cong-cu/sinh-mau-khoi.mjs --dam=0.70` sinh ra:
      KHOÁ độ sáng L theo đúng bộ DVP đang chạy, CHỈ XOAY SẮC (hue).
      Sửa tay một mã ở đây là phá luật đó — sửa trong máy sinh rồi chép lại.
   ⚠ `--h-nen` LUÔN khai bằng điểm SÁNG NHẤT của gradient để bài kiểm tương
      phản đo đúng trường hợp xấu nhất, không thể xanh giả.
   ========================================================================== */

/* ==========================================================================
   PHẦN A — KHỐI MÀU: biển chữ đầu mỗi khối hàng
   Sanneng (carbon) và Contra (đỏ mận) GIỮ NGUYÊN bộ nhận diện hãng —
   `data-hang` vẫn còn trên thẻ, 2 khối đó không có luật `data-khoi` nào ở đây.
   Chấm vàng #ffd27a giữ nguyên cho cả 8 khối: đó là sợi chỉ nhận diện ĐVP
   xuyên suốt trang. Màu đổi để PHÂN VÙNG, chấm vàng để NHẬN DIỆN.
   ========================================================================== */

/* ⚠ Sắc 30 (gạch nung), KHÔNG phải 55 (cam). Vì độ sáng bị KHOÁ thấp cho đằm,
   sắc 55 ra #6c4427 — mắt đọc thành NÂU SÔ-CÔ-LA: sai tín hiệu cho khối khuyến
   mãi, lại gần trùng khối Trung Thu (#624a27) cũng nâu. Ở nền tối thì cam-vàng
   TRƯỢT thành nâu; phải xoay về phía đỏ mới giữ được nghĩa "nóng / giảm giá". */
.dvp-bien[data-khoi="hang-khuyen-mai"] {                    /* gạch nung */
	--h-nen: #823126;
	--h-anh: linear-gradient(110deg, #5e2119 0%, #762b21 52%, #823126 100%);
	--h-vien: #a0473b; --h-vien-re: #c36759; --h-rgb: 254, 172, 158; --h-bong: 94, 33, 25;
	--h-nhan: #ffd27a;
	--h-phu: #ece7e6;
}

.dvp-bien[data-khoi="pha-che-nguyen-lieu"] {                /* lam */
	--h-nen: #2a5373;
	--h-anh: linear-gradient(110deg, #1c3a53 0%, #254a68 52%, #2a5373 100%);
	--h-vien: #3f6b8f; --h-vien-re: #5e8ab0; --h-rgb: 142, 203, 255; --h-bong: 28, 58, 83;
	--h-nhan: #ffd27a;
	--h-phu: #e6e9ec;
}

.dvp-bien[data-khoi="pha-che-dung-cu"] {                    /* lục bảo */
	--h-nen: #2c5756;
	--h-anh: linear-gradient(110deg, #1d3e3d 0%, #264f4d 52%, #2c5756 100%);
	--h-vien: #42706e; --h-vien-re: #618f8d; --h-rgb: 95, 219, 214; --h-bong: 29, 62, 61;
	--h-nhan: #ffd27a;
	--h-phu: #ddeceb;
}

.dvp-bien[data-khoi="pha-che-may-moc"] {                    /* tím */
	--h-nen: #5d3394;
	--h-anh: linear-gradient(110deg, #42236b 0%, #542d87 52%, #5d3394 100%);
	--h-vien: #764ab3; --h-vien-re: #9173c2; --h-rgb: 206, 181, 255; --h-bong: 66, 35, 107;
	--h-nhan: #ffd27a;
	--h-phu: #e9e8ec;
}

.dvp-bien[data-khoi="lam-banh-nguyen-lieu"] {               /* lá */
	--h-nen: #2c5b37;
	--h-anh: linear-gradient(110deg, #1e4026 0%, #265231 52%, #2c5b37 100%);
	--h-vien: #41744d; --h-vien-re: #60946b; --h-rgb: 143, 216, 158; --h-bong: 30, 64, 38;
	--h-nhan: #ffd27a;
	--h-phu: #e1ece2;
}

.dvp-bien[data-khoi="lam-banh-dung-cu"] {                   /* dương */
	--h-nen: #274e88;
	--h-anh: linear-gradient(110deg, #1a3762 0%, #22467b 52%, #274e88 100%);
	--h-vien: #3c66a5; --h-vien-re: #5e86c2; --h-rgb: 160, 198, 255; --h-bong: 26, 55, 98;
	--h-nhan: #ffd27a;
	--h-phu: #e6e8ec;
}

/* Máy móc CỐ Ý xịt bão hoà (hệ số 0,42 trong máy sinh) -> mắt đọc ra XÁM THÉP
   chứ không phải "thêm một khối xanh nữa". Hai sắc buộc phải gần nhau thì phân
   biệt bằng ĐỘ BÃO HOÀ. */
.dvp-bien[data-khoi="lam-banh-may-moc"] {                   /* thép */
	--h-nen: #425256;
	--h-anh: linear-gradient(110deg, #2e3a3d 0%, #3b4a4e 52%, #425256 100%);
	--h-vien: #586a6e; --h-vien-re: #77898e; --h-rgb: 163, 204, 215; --h-bong: 46, 58, 61;
	--h-nhan: #ffd27a;
	--h-phu: #e6e9ea;
}

.dvp-bien[data-khoi="trung-thu"] {                          /* hổ phách */
	--h-nen: #624a27;
	--h-anh: linear-gradient(110deg, #46341b 0%, #584222 52%, #624a27 100%);
	--h-vien: #7b613c; --h-vien-re: #9c805a; --h-rgb: 238, 186, 112; --h-bong: 70, 52, 27;
	--h-nhan: #ffd27a;
	--h-phu: #ece8e2;
}


/* ==========================================================================
   PHẦN B — PILL: dải điều hướng ngành hàng trang chủ
   CHỈ THAY DA: giữ lưới 5 cột, giữ min-height 44px vùng chạm, giữ con số thật,
   giữ mọi class. Đổi đúng 3 thứ: bo góc tròn viên · con số mang màu khối ·
   bóng + viền khi rê chuột ăn theo màu khối.
   ⚠ Không đổi padding: bo góc 999px trên ô cao 44px chỉ ăn vào mép trên/dưới,
      giữa thân ô mép trái vẫn ở x=0 — con số 21px cách mép cong ~9px, dư chỗ.
      Đổi padding là đổi bố cục, ngoài phạm vi việc này.
   ========================================================================== */

.dvp-dh .dvp-dh__o {
	--o: #045864;                     /* rơi về teal ĐVP nếu khối chưa khai màu */
	border-radius: 999px;
}

.dvp-dh .dvp-dh__o .dvp-dh__so { color: var(--o); }

.dvp-dh .dvp-dh__o:hover,
.dvp-dh .dvp-dh__o:focus-visible {
	border-color: var(--o);
	box-shadow: 0 10px 20px -10px var(--o);
}

/* Rê chuột: con số ĐẬM thêm chứ không đổi sang màu khác — trước đây đổi sang
   #a86500 (màu giá bán) là đúng khi cả 10 ô cùng teal; nay mỗi ô một màu thì
   đổi màu lúc rê làm mất luôn dấu hiệu phân vùng vừa dựng. */
.dvp-dh .dvp-dh__o:hover .dvp-dh__so { color: var(--o); filter: brightness(.82); }

.dvp-dh .dvp-dh__o:focus-visible { outline-color: var(--o); }

.dvp-dh .dvp-dh__o[data-khoi="hang-khuyen-mai"]      { --o: #823126; }
/* ⚠ #594d3c chứ KHÔNG phải #7a6a52. Đo tại chỗ: bản cũ chỉ 5,24 trong khi 9 ô
   kia nằm gọn dải 7,9–10,6 — vẫn qua ngưỡng AA 4,5 nên MÁY IM, nhưng nhìn một
   hàng 10 ô thì con số Sanneng nhợt hẳn ra, đúng thứ Sếp bắt ngay. Ngưỡng
   tương phản chỉ nói "đọc được", không nói "đều". #594d3c = 8,23, về đúng dải,
   vẫn là tông carbon của Sanneng. Đo lại bằng `thu-khoi-mau-pill.js` (dòng
   "dải Pill: … chênh N×") nếu đổi màu khối này. */
.dvp-dh .dvp-dh__o[data-khoi="hang-sanneng"]         { --o: #594d3c; }  /* carbon Sanneng */
.dvp-dh .dvp-dh__o[data-khoi="pha-che-nguyen-lieu"]  { --o: #2a5373; }
.dvp-dh .dvp-dh__o[data-khoi="pha-che-dung-cu"]      { --o: #2c5756; }
.dvp-dh .dvp-dh__o[data-khoi="pha-che-may-moc"]      { --o: #5d3394; }
.dvp-dh .dvp-dh__o[data-khoi="lam-banh-nguyen-lieu"] { --o: #2c5b37; }
.dvp-dh .dvp-dh__o[data-khoi="lam-banh-dung-cu"]     { --o: #274e88; }
.dvp-dh .dvp-dh__o[data-khoi="lam-banh-may-moc"]     { --o: #425256; }
.dvp-dh .dvp-dh__o[data-khoi="the-power-contra"]     { --o: #7d1024; }  /* đỏ mận Contra */
.dvp-dh .dvp-dh__o[data-khoi="trung-thu"]            { --o: #624a27; }


/* ==========================================================================
   PHẦN C — PILL trang con
   MỘT màu teal ĐVP cho cả cụm, KHÔNG chia 10 màu như trang chủ.
   Lý do: màu để PHÂN VÙNG giữa các KHỐI khác nhau. Dãy danh mục con là MỘT
   vùng — tô 10 màu trong một danh sách là trang trí, phạm luật "mỗi khung
   nhìn tối đa 1 màu nhấn" của Sếp.
   ========================================================================== */

/* --- C1. Dãy danh mục con (cột trái trang danh mục + cột trái trang tin) --- */
/* Chỉ cấp 1 thành viên nén; cấp 2/3 trong dropdown giữ nguyên kiểu chữ thường,
   nếu không danh sách 52 mục lọc sẽ thành 52 viên thuốc — rối hơn trước. */
.aside-item .navbar-pills.nav-category > li.nav-item > a.nav-link {
	display: block;
	padding: 6px 30px 6px 14px;
	border: 1px solid #e4ded2;
	border-radius: 999px;
	background: #fff;
	color: #263238;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.aside-item .navbar-pills.nav-category > li.nav-item + li.nav-item { margin-top: 6px; }

.aside-item .navbar-pills.nav-category > li.nav-item > a.nav-link:hover,
.aside-item .navbar-pills.nav-category > li.nav-item > a.nav-link:focus {
	transform: translateY(-2px);
	border-color: #067686;
	box-shadow: 0 10px 20px -10px #045864;
	background: #fff;
	color: #045864;
}

.aside-item .navbar-pills.nav-category > li.nav-item.active > a.nav-link {
	background: linear-gradient(145deg, #0a5965, #073f48);
	border-color: #073f48;
	color: #fff;
	font-weight: 700;
}

/* Dấu + mở nhánh nằm ĐÈ trên viên thuốc — kéo vào trong mép cong 4px cho khỏi
   dính vành, và cho nó mang màu chữ của viên (trắng khi viên đang chọn). */
.aside-item .navbar-pills.nav-category > li.nav-item > .Collapsible__Plus { right: 12px; }
.aside-item .navbar-pills.nav-category > li.nav-item.active > .Collapsible__Plus { color: #fff; }

/* --- C2. Thanh "Xếp theo" trang danh mục --- */
/* Nằm ngay cạnh dãy danh mục con; để vuông kế bên viên tròn là lệch nếp. */
.sort-cate .sort-cate-left ul li.btn-quick-sort > a {
	display: inline-block;
	padding: 4px 12px;
	border: 1px solid #e4ded2;
	border-radius: 999px;
	background: #fff;
	color: #263238;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.sort-cate .sort-cate-left ul li.btn-quick-sort > a:hover,
.sort-cate .sort-cate-left ul li.btn-quick-sort > a:focus {
	transform: translateY(-2px);
	border-color: #067686;
	box-shadow: 0 10px 20px -10px #045864;
	color: #045864;
}

.sort-cate .sort-cate-left ul li.btn-quick-sort.active > a,
.sort-cate .sort-cate-left ul li.btn-quick-sort.current > a {
	background: linear-gradient(145deg, #0a5965, #073f48);
	border-color: #073f48;
	color: #fff;
	font-weight: 700;
}

/* --- C3. Tab trang chi tiết sản phẩm (Mô tả · Giới thiệu) --- */
/* JS `main.js` bám class `.current` trên <li> — giữ nguyên, chỉ đổi da.
   ⚠ KHAY TAB NÀY NỀN TỐI (navy #2d3049), khác hẳn hai dãy Pill ở trên vốn nằm
     trên nền trắng. Bản đầu bê nguyên công thức "nền trắng + viền nhạt" xuống
     đây thì chữ tab KHÔNG hoạt (vốn màu trắng để nổi trên navy) nằm trên viên
     thuốc trắng => TRẮNG TRÊN TRẮNG, tab "Giới thiệu" biến mất hẳn. Bài kiểm
     tương phản chỉ đo biển khối nên IM LẶNG — mắt bắt được, máy thì không.
   => Trên nền tối, viên thuốc phải NGƯỢC LẠI: nền trong suốt + viền trắng mờ,
     chữ giữ trắng. Vẫn đúng hình viên thuốc, vẫn giữ nền khay như cũ. */
.product-tab .tabs-title > li.tab-link {
	margin-right: 8px;
	padding: 6px 16px;
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 999px;
	background: transparent;
	transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease, color .18s ease;
}

.product-tab .tabs-title > li.tab-link:hover {
	transform: translateY(-2px);
	border-color: rgba(255, 255, 255, .68);
	background: rgba(255, 255, 255, .08);
	box-shadow: 0 10px 20px -10px rgba(0, 0, 0, .55);
}

.product-tab .tabs-title > li.tab-link.current {
	background: linear-gradient(145deg, #0d8a9c, #076e7e);
	border-color: #0d8a9c;
}

.product-tab .tabs-title > li.tab-link.current > span,
.product-tab .tabs-title > li.tab-link.current > h3 { color: #fff; font-weight: 700; }

/* Gạch chân trắng của tab đang chọn (nếp cũ) nằm THÒ ra trong lòng viên thuốc,
   nhìn như một vệt lỗi. Viên thuốc đã tự nói "đang chọn" rồi nên bỏ gạch chân.
   ⚠ Gạch chân KHÔNG phải `::after` của <li> (đã đo hụt một lần) — nó là
     `border-bottom: 4px solid #fff` trên thẻ <span> BÊN TRONG. Đo bằng
     `kiem-thu/soi-gach-chan-tab.js` chứ đừng đoán theo tên class.
   ⚠ Chỉ cho border TRONG SUỐT, KHÔNG đặt `border:0`: bỏ hẳn 4px là viên thuốc
     tụt 4px, phép đo xê dịch bố cục đang 0 sẽ hoá khác 0. Giữ chỗ, giấu màu. */
.product-tab .tabs-title > li.tab-link.current > span { border-bottom-color: transparent; }


@media (prefers-reduced-motion: reduce) {
	.aside-item .navbar-pills.nav-category > li.nav-item > a.nav-link,
	.sort-cate .sort-cate-left ul li.btn-quick-sort > a,
	.product-tab .tabs-title > li.tab-link { transition: none; }
	.aside-item .navbar-pills.nav-category > li.nav-item > a.nav-link:hover,
	.sort-cate .sort-cate-left ul li.btn-quick-sort > a:hover,
	.product-tab .tabs-title > li.tab-link:hover { transform: none; }
}