/* ==========================================================================
   Saiko – bổ sung giao diện (nạp sau main.css). Không sửa file gốc của theme.
   1. Thẻ sản phẩm: viền + bo góc + thông số (toàn site)
   2. Trang collection: chip lọc nhanh, thanh Bộ lọc/Sắp xếp dính, tag đang lọc
   3. Bộ lọc: lựa chọn dạng chip có số lượng; mobile = bảng trượt từ dưới lên
   …
   0. Token bộ quy chuẩn giao diện + 27–29 (chữ, bo góc, nút): xem docs/DESIGN_SYSTEM.md (UI-01).
      Sửa giao diện về sau: dùng token, không viết cỡ chữ / bo góc / màu nút mới.
   30. Viết hoa: viết thường kiểu câu toàn site, bỏ IN HOA của theme gốc (UI-02, docs/VIET_HOA.md).
   33. Chữ: chỉ 2 màu (chữ chính --sk-ink, chữ nhạt --sk-muted), giãn dòng 1.5 / 1.4, câu hỏi FAQ 600 (TYPO-01).
   ========================================================================== */

/* ---------- 0. Token (UI-01, Hai duyệt 07/10/2026) ---------- */
:root {
	/* Màu: chỉ đặt tên cho màu đang dùng, không đổi bảng màu */
	--sk-red: #d22630;          /* nền nút Chính, giá, viền + chữ nút Phụ. Chữ trắng 5.17:1 */
	--sk-red-hover: #b01f28;    /* hover nút Chính, chữ trắng 6.83:1 */
	--sk-red-text: #a81e27;     /* chữ đỏ trên nền hồng: 6.36:1 trên #fbecec */
	--sk-red-tint: #fbecec;     /* nền nhãn −%, hộp ưu đãi, hover nút Phụ */
	--sk-ink: #2b2a29;          /* chữ chính 14.33:1 */
	--sk-muted: #666;           /* chữ phụ 5.74:1 */
	--sk-line: #e6e2dd;         /* viền thẻ, kẻ */
	--sk-disabled-bg: #efedeb;
	--sk-disabled-text: #8a8580;
	--sk-focus: #2b2a29;        /* vòng focus bàn phím */
	/* tên cũ, giữ cho các mục bên dưới */
	--sk-soft: var(--sk-red-tint);
	--sk-accent: var(--sk-red);
	--sk-accent-text: var(--sk-red-text);

	/* Thang chữ 6 cỡ */
	--fs-xs: 12px;   /* chú thích: breadcrumb, chip thông số, nhãn, giá gạch thẻ SP, mã SP, nhãn thanh dính đáy */
	--fs-sm: 14px;   /* nội dung, tên SP trên thẻ, ô nhập, mô tả ngắn */
	--fs-md: 16px;   /* nút, giá trên thẻ, giá gạch trang SP, tiêu đề nhỏ */
	--fs-lg: 20px;   /* tiêu đề section + H1 (mobile), H2 nội dung mobile, H3 nội dung desktop */
	--fs-xl: 24px;   /* tiêu đề section + H1 (desktop), H2 nội dung desktop */
	--fs-2xl: 24px;  /* giá lớn trang SP */
	--fs-title: var(--fs-lg);  /* tiêu đề section: 20 mobile / 24 desktop */
	--fs-h1: var(--fs-lg);     /* H1 trang: 20 mobile / 24 desktop */

	/* Bo góc 2 mức (+ tròn 50% cho nút icon vuông) */
	--r: 8px;          /* thẻ, nút, ô nhập, hộp, ảnh trong thẻ */
	--r-pill: 999px;   /* chip, nhãn */

	/* Nút */
	--btn-h: 44px;     /* tối thiểu (vùng bấm) */
	--btn-h-lg: 48px;  /* nút hành động chính của trang: Mua ngay, Thanh toán */
}
@media (min-width: 992px) {
	:root {
		--fs-title: var(--fs-xl);
		--fs-h1: var(--fs-xl);
	}
}

/* ---------- 1. Thẻ sản phẩm ---------- */
.item_product_main {
	border: 1px solid var(--sk-line);
	border-radius: var(--r); /* 10 → 8px (UI-01) */
	overflow: hidden;
	height: 100%;
}
.product-col {
	border: 0;
	margin: 0;
	padding: 5px;
}
.item_product_main .sk-specs {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	margin: 2px 0 6px;
}
.item_product_main .sk-specs span {
	font-size: var(--fs-xs);
	line-height: 18px;
	background: #f2f2f2;
	color: var(--sk-ink);
	border-radius: var(--r-pill); /* chip: pill (UI-01) */
	padding: 0 8px;
}

/* ---------- 2. Collection ---------- */
.sk-quick {
	display: flex;
	gap: 8px;
	overflow-x: auto;
	padding: 10px 0 4px;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
}
.sk-quick::-webkit-scrollbar { display: none; }
.sk-chip {
	flex: none;
	min-height: 44px;
	padding: 0 14px;
	border-radius: 22px;
	border: 1px solid var(--sk-line);
	background: #fff;
	color: var(--sk-ink);
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 14px;
	cursor: pointer;
}
.sk-chip small { color: var(--sk-muted); font-size: 12px; }
.sk-chip[aria-pressed="true"] { background: #222; border-color: #222; color: #fff; }
.sk-chip[aria-pressed="true"] small { color: #ddd; }
.sk-chip:disabled { opacity: .35; cursor: not-allowed; }

/* thanh Bộ lọc / Sắp xếp dính */
.sk-bar {
	position: sticky;
	top: var(--sk-top, 0px);
	z-index: 30;
	background: #fff;
	padding: 8px 0;
	margin-bottom: 4px;
	border-bottom: 1px solid var(--sk-line);
}
.sk-bar-row {
	display: flex !important;
	align-items: center !important;
	gap: 8px;
}
.sk-bar .sortPagiBar { flex: 1; min-width: 0; }
.sk-bar #open-filters {
	order: -1;
	flex: 1;
	min-height: 44px;
	border: 1px solid var(--sk-line);
	border-radius: 8px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: var(--sk-ink);
}
.sk-bar #open-filters.d-block { display: flex !important; }
@media (min-width: 1200px) { .sk-bar #open-filters.d-block { display: none !important; } }
.sk-badge {
	background: var(--sk-accent);
	color: #fff;
	border-radius: 10px;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	font-size: 12px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.sk-badge:empty { display: none; }
@media (max-width: 1023px) {
	.sk-bar .sort-cate #sort-by { padding-bottom: 0; }
	.sk-bar .sort-cate #sort-by > label { display: none; }
	.sk-bar .sort-cate #sort-by > ul { margin-left: 0 !important; width: 100%; }
	.sk-bar .sort-cate li { width: 100%; font-size: 14px; }
	.sk-bar .sort-cate #sort-by > ul > li { line-height: 42px; min-height: 44px; border-radius: 8px; }
	.sk-bar .sort-cate #sort-by > ul > li .fas { top: 15px; }
	.sk-bar .sort-cate #sort-by li > ul { width: calc(100% + 2px); top: 42px; }
	.sk-bar .sort-cate #sort-by li > ul li a { display: block; min-height: 44px; line-height: 44px; }
}

/* tag đang lọc */
.filter-container__selected-filter-list ul { display: flex; flex-wrap: wrap; gap: 6px; }
.filter-container__selected-filter-item {
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 18px;
	background: var(--sk-soft);
}
.filter-container__selected-filter-item:after { content: none; }
.filter-container__selected-filter-item a {
	display: inline-flex;
	align-items: center;
	min-height: 36px;
	padding: 0 12px;
	color: var(--sk-accent-text);
	font-size: 13px;
}
.filter-container__selected-filter-item.sk-clear { background: none; }
.filter-container__selected-filter-item.sk-clear a { color: var(--sk-muted); text-decoration: underline; }

/* ---------- 3. Bộ lọc: chip + số lượng (mọi kích thước) ---------- */
.dqdt-sidebar .aside-content ul { display: flex; flex-wrap: wrap; gap: 8px; }
.dqdt-sidebar .aside-content .filter-item--check-box { clear: none; }
.dqdt-sidebar .aside-content .custom-checkbox {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 44px;
	margin: 0;
	padding: 0 12px;
	border: 1px solid var(--sk-line);
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 1.2;
	cursor: pointer;
}
.dqdt-sidebar .aside-content .custom-checkbox .fa { display: none; }
.dqdt-sidebar .aside-content .custom-checkbox input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.dqdt-sidebar .aside-content .custom-checkbox[data-count]::after {
	content: "(" attr(data-count) ")";
	color: var(--sk-muted);
	font-size: 12px;
}
.dqdt-sidebar .aside-content .custom-checkbox:focus-within { outline: 2px solid var(--sk-accent); outline-offset: 1px; }
.dqdt-sidebar .filter-item.sk-on .custom-checkbox {
	border-color: var(--sk-accent);
	background: var(--sk-soft);
	color: var(--sk-accent-text);
	font-weight: 600;
}
.dqdt-sidebar .filter-item.sk-on .custom-checkbox::after { color: var(--sk-accent-text); }
.dqdt-sidebar .filter-item.sk-zero { opacity: .35; pointer-events: none; }
.dqdt-sidebar .filter-item.sk-zero .custom-checkbox { text-decoration: line-through; }
.dqdt-sidebar .sk-g { display: none; }
/* lựa chọn không có SP nào trong collection, hoặc loại trùng tên */
.dqdt-sidebar .filter-item.sk-dead:not(.sk-on),
.dqdt-sidebar .filter-item.sk-dup:not(.sk-on) { display: none !important; }
/* nhóm thông số: ẩn giá trị không có hàng, nhóm dài có "Xem thêm" */
.dqdt-sidebar .sk-spec .filter-item.sk-zero:not(.sk-on) { display: none; }
.dqdt-sidebar .sk-spec:not(.sk-more) .filter-item.sk-extra { display: none !important; }
.dqdt-sidebar .sk-more-btn {
	margin-top: 8px;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	color: var(--sk-accent-text);
	font-size: 14px;
	text-decoration: underline;
	cursor: pointer;
}
/* tiêu đề nhóm bấm để gập/mở */
.dqdt-sidebar aside.aside-item .aside-title { cursor: pointer; position: relative; padding-right: 28px; }
.dqdt-sidebar aside.aside-item .aside-title::after {
	content: "";
	position: absolute;
	right: 6px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: translateY(-70%) rotate(45deg);
	transition: transform .2s;
}
.dqdt-sidebar aside.aside-item.sk-closed .aside-title::after { transform: translateY(-30%) rotate(-45deg); }
.dqdt-sidebar aside.aside-item.sk-closed .aside-content { display: none; }
.dqdt-sidebar aside.aside-item .aside-title h2 { margin-bottom: 10px; }
.dqdt-sidebar .sk-sel { font-weight: 400; color: var(--sk-accent-text); font-size: 13px; margin-left: 6px; }

/* ---------- Mobile/tablet: bảng trượt từ dưới lên ---------- */
.sk-sheet-head, .sk-sheet-foot { display: none; }
@media (max-width: 1024px) {
	.dqdt-sidebar.sidebar {
		position: fixed !important;
		left: 0 !important;
		right: 0 !important;
		top: auto !important;
		bottom: 0;
		width: 100% !important;
		max-width: 100%;
		height: auto !important;
		max-height: 88vh;
		margin: 0;
		padding: 0 !important;
		border-radius: 16px 16px 0 0;
		background: #fff;
		display: flex;
		flex-direction: column;
		overflow: hidden !important;
		opacity: 1;
		visibility: hidden;
		transform: translateY(100%);
		transition: transform .25s ease, visibility 0s linear .25s;
		z-index: 10000 !important;
	}
	.dqdt-sidebar.sidebar.openf {
		visibility: visible;
		transform: none;
		transition: transform .25s ease;
	}
	.dqdt-sidebar .wrap_background_aside {
		flex: 1;
		min-height: 0;
		overflow-y: auto;
		overscroll-behavior: contain;
		padding: 0 16px 8px;
	}
	.dqdt-sidebar .filter-container > button.open-filters { display: none !important; }
	.dqdt-sidebar .aside-content { overflow: visible; max-height: none; }
	.dqdt-sidebar .overflow-item:not(.show) { display: block; }
	.dqdt-sidebar .filter-item-toggle { display: none !important; }
	.sk-sheet-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 4px 4px 4px 16px;
		border-bottom: 1px solid var(--sk-line);
		flex: none;
	}
	.sk-sheet-head h2 { margin: 0; font-size: 17px; font-weight: 700; }
	.sk-sheet-head .sk-close {
		width: 44px;
		height: 44px;
		border: 0;
		background: none;
		display: flex;
		align-items: center;
		justify-content: center;
		color: inherit;
	}
	.sk-sheet-foot {
		display: flex;
		gap: 10px;
		flex: none;
		padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
		border-top: 1px solid var(--sk-line);
		background: #fff;
	}
	.sk-sheet-foot button {
		min-height: 48px;
		border-radius: 8px;
		font-weight: 600;
		font-size: 15px;
		cursor: pointer;
	}
	.sk-sheet-foot .sk-reset { flex: 0 0 38%; border: 1px solid var(--sk-line); background: #fff; color: inherit; }
	.sk-sheet-foot .sk-go { flex: 1; border: 0; background: var(--sk-accent); color: #fff; }
	.sk-sheet-foot .sk-go:disabled { opacity: .5; }
}

/* Mô tả SP: khi đã bấm "Xem thêm", nút "Thu gọn" nằm dưới nội dung.
   Gốc (product-style.css) để absolute + bottom: 2% → khối cao 8000px thì nút bị đẩy lên ~170px, đè chữ. */
.ega-pro__seemore.show {
	position: relative;
	bottom: auto;
	left: auto;
	width: 100%;
}

/* ---------- 4. Độ đậm chữ menu (theo phân cấp, tham khảo bluestone.com.vn) ----------
   Thanh menu desktop (nền trắng từ 07/10/2026, mục 25): chữ #2b2a29 giữ 500 cho rõ cạnh nút đỏ.
   "Danh mục sản phẩm" giữ 700 (thẻ <strong>). Link phụ trong menu mobile giữ 400. */
.subheader .navigation--horizontal nav .list-group-child > li > a,
.subheader-right ul li a span {
	font-weight: 500;
}
/* Danh mục cấp 1 có icon (menu mobile + dropdown desktop) */
.navigation .list-group-item .menu-item__link {
	font-weight: 500;
}
#mobile-menu .navigation .list-group-item .menu-item__link {
	font-size: 15px;
}
#mobile-menu .user-menu a {
	font-weight: 500;
}

/* ---------- 5. Header dính không làm giật trang khi cuộn ----------
   main.js bọc .header_menu bằng .header-placeholder (giữ đúng chiều cao header gốc).
   Header dính dùng fixed để việc co lại không đẩy nội dung bên dưới. */
.header-placeholder {
	overflow-anchor: none;
}
.header_menu.active {
	position: fixed;
}

/* ---------- 6. Menu mobile full màn hình (tham khảo bluestone.com.vn, toshiba-lifestyle.com/vn) ----------
   Gốc (main.css): khung 300px, phần còn lại là lớp phủ tối → trên điện thoại nhìn chật.
   Điện thoại: phủ hết chiều ngang, có nút X đóng (vì không còn lớp phủ để bấm ra ngoài).
   Tablet (≥ 576px): khung 420px, vẫn bấm lớp phủ để đóng. Menu con cũng mở rộng theo khung. */
@media (max-width: 1024px) {
	/* Cột: thanh Tài khoản – thân cuộn – thanh Gọi điện/Nhắn tin. Gốc để thanh đáy absolute
	   đè lên link cuối và thân menu không cuộn được. */
	#mobile-menu {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 420px;
		padding-bottom: 0;
		overflow: hidden;
		transition: left .25s ease, opacity .25s ease;
	}
	#mobile-menu .mobile-menu-body {
		flex: 1 1 auto;
		min-height: 0;
		max-height: none;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
	}
	#mobile-menu .mobile-menu-body nav,
	#mobile-menu .mobile-menu-body .navigation {
		height: auto;
		overflow: visible;
	}
	#mobile-menu .mobile-menu-footer {
		position: static;
		flex: 0 0 auto;
	}
	/* Menu con phủ đúng vùng thân menu (giữa thanh Tài khoản và thanh Gọi điện), không dùng fixed:
	   fixed bên trong vùng cuộn bị iOS Safari xếp dưới thanh Tài khoản. Khi mở, thân menu khoá cuộn
	   (main.js thêm .submenu-open, đưa thân về đầu) → chỉ menu con cuộn, không giật. */
	#mobile-menu .mobile-menu-body {
		position: relative;
	}
	#mobile-menu.submenu-open .mobile-menu-body {
		overflow: hidden;
	}
	#mobile-menu .navigation .menu-item.active .submenu {
		position: absolute;
		top: 0 !important;
		right: 0;
		bottom: 0;
		left: 0;
		width: auto;
		max-width: none;
		height: auto;
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background: #fff;
	}
	/* Bootstrap cho li.active z-index 2 (trong flex → lớp riêng), thấp hơn thanh Tài khoản dính ở trên
	   → thanh "‹ Quay lại" của menu con bị che. Nâng lên trên thanh đó. */
	#mobile-menu .navigation .menu-item.active {
		z-index: 4;
	}
	#mobile-menu .user-menu {
		flex: 0 0 auto;
		position: relative;
		z-index: 3;
		padding: 12px 8px 12px 16px;
	}
	#mobile-menu .user-menu .media-body {
		flex: 1 1 auto;
	}
	#mobile-menu .mobile-menu-close {
		flex: 0 0 44px;
		width: 44px;
		height: 44px;
		display: flex;
		align-items: center;
		justify-content: center;
		align-self: center;
		padding: 0;
		border: 0;
		background: transparent;
		color: inherit;
		font-size: 22px;
		cursor: pointer;
	}
	/* Bố cục 3 nhóm, nhìn thoáng (tham khảo maximize-evolutions.myshopify.com):
	   ngăn dòng bằng khoảng trắng thay cho vạch kẻ, icon trong ô nền nhạt cách chữ 14px. */
	#mobile-menu .mobile-menu-title {
		display: flex;
		align-items: center;
		margin: 0;
		padding: 20px 16px 8px;
		font-size: var(--fs-md); /* 17 → 16 (UI-01) */
		font-weight: 700;
		color: var(--sk-ink);
	}
	#mobile-menu .mobile-menu-title .fas {
		width: 20px;
		margin-right: 10px;
		font-size: var(--fs-md);
		text-align: center;
	}
	/* Tiêu đề nhóm 2 nằm trong main-nav-template (dùng chung cho menu desktop) → chỉ hiện trong menu mobile.
	   Thay vạch <hr> gốc bằng viền trên của tiêu đề. */
	#mobile-menu .navigation > li:has(> hr) {
		display: none !important;
	}
	#mobile-menu .mobile-menu-title--sub {
		margin-top: 12px;
		border-top: 1px solid #eee;
	}
	/* Nhóm 1: danh mục sản phẩm — dòng 56px */
	#mobile-menu .navigation > .list-group-item {
		padding: 8px 16px;
	}
	#mobile-menu .navigation .list-group-item .menu-item__link {
		display: grid;
		align-items: center;
		grid-template-columns: 40px 1fr 24px;
		grid-column-gap: 14px;
		font-size: 16px;
		font-weight: 500;
		color: var(--sk-ink);
	}
	#mobile-menu .navigation .list-group-item > a > img {
		box-sizing: border-box;
		width: 40px;
		height: 40px;
		padding: 7px;
		background: #f4f5f7;
		border-radius: 10px;
	}
	#mobile-menu [data-toggle-submenu] {
		width: 24px;
		height: 40px;
		color: var(--sk-muted);
	}
	/* Nhóm 2: link phụ (Giới thiệu, Blog…, li.d-xl-none trong main-nav-template) — bỏ icon giữ chỗ,
	   thẳng lề 16px với tiêu đề, chữ nhẹ hơn danh mục */
	#mobile-menu .navigation > .d-xl-none {
		padding: 2px 16px;
	}
	#mobile-menu .navigation > .d-xl-none .menu-item__link {
		grid-template-columns: 1fr 24px;
		grid-column-gap: 0;
		min-height: 44px;
		font-weight: 400;
		color: var(--sk-ink);
	}
	#mobile-menu .navigation > .d-xl-none .menu-item__link > .icon {
		display: none;
	}
	#mobile-menu .navigation > .d-xl-none .menu-item__link span {
		grid-column: 1;
	}
	/* Menu con */
	/* Thanh "‹ Quay lại" dính ở đầu khi cuộn menu con (-14px = padding-top của .submenu) */
	#mobile-menu .toggle-submenu {
		position: sticky;
		top: -14px;
		z-index: 1;
		min-height: 48px;
		display: flex;
		align-items: center;
		cursor: pointer;
	}
	#mobile-menu .submenu__all {
		display: flex;
		align-items: center;
		gap: 8px;
		min-height: 44px;
		margin-top: -8px;
		font-size: 15px;
		font-weight: 600;
		color: var(--primary-color);
	}
	#mobile-menu .submenu__all .fas {
		font-size: 13px;
	}
	#mobile-menu .submenu__item--main {
		margin-top: 12px;
		font-size: 16px;
		font-weight: 700;
	}
	#mobile-menu .submenu__item .link {
		display: flex;
		align-items: center;
		min-height: 44px;
		font-size: 15px;
		color: var(--sk-ink);
	}
	#mobile-menu .submenu__item--main .link {
		font-weight: 700;
		color: var(--sk-ink);
	}
	#mobile-menu .mobile-menu-footer a {
		display: flex;
		align-items: center;
		justify-content: center;
		min-height: 44px;
	}
}
/* 100vw/100dvh thay vì 100%: nếu trang có phần tử tràn ngang, khung fixed lớn hơn màn hình
   → 100% đẩy nút X ra ngoài mép phải và thanh "Gọi điện / Nhắn tin" xuống dưới mép màn.
   Gốc tràn đã sửa ở mục 7; giữ 100vw để phòng phần tử mới gây tràn lại. */
.navigation > .mobile-menu-title,
.navigation .submenu__all {
	display: none;
}
#mobile-menu .navigation > .mobile-menu-title {
	display: flex;
}
@media (max-width: 575px) {
	#mobile-menu {
		width: 100vw;
		max-width: none;
		height: 100vh;
		height: 100dvh;
	}
}

/* ---------- 7. Không tràn ngang trên mobile ----------
   Trang rộng hơn màn hình (375px → 432px) làm kéo ngang được và khung fixed tính sai kích thước.
   Sửa gốc từng phần tử, không dùng overflow-x:hidden trên html/body (hỏng header dính). */

/* Dropdown giỏ hàng mini (400px, right -55px) chỉ mở khi hover ở ≥1024px (main.css),
   nhưng vẫn chiếm chỗ lúc ẩn → dưới 1024px bỏ hẳn khỏi layout. */
@media (max-width: 1023px) {
	.top-cart-content {
		display: none;
	}
}

/* Banner trang chủ kiểu fullWidth: .row margin -12px trong .container-fluid p-0 tràn phải 12px.
   Bỏ margin âm của row và padding của cột → ảnh vẫn tràn sát 2 mép như cũ. */
.custom-spacing > .container-fluid.p-0 > .row {
	margin-left: 0;
	margin-right: 0;
}
.custom-spacing > .container-fluid.p-0 > .row > .home-banner-group.fullWidth {
	padding-left: 0;
	padding-right: 0;
}

/* ---------- 8. Trang SP: phân cấp chữ khung thông tin + vùng bấm ≥ 44px ----------
   Gốc (product-infor-style.css): tên 19.2–20px, giá 20px, chữ nút 13px → mọi chữ gần cùng cỡ.
   Phân cấp mới (tham khảo bluestone.com.vn): giá lớn nhất > tên > nội dung.
   Độ đậm: 700 giá + nút · 600 tên + nhãn · 400 còn lại. Chưa đổi màu (làm sau). */
.details-product .details-pro .title-product {
	font-size: var(--fs-h1);
	font-weight: 600;
	line-height: 1.3;
}
.details-product .details-pro .group-status {
	display: inline;
	font-size: 12px; /* thông tin tra cứu: nhỏ + xám như breadcrumb */
}
/* "So sánh" nằm cùng dòng với Thương hiệu · Mã SP, tự xuống dòng khi hết chỗ */
.details-product .details-pro .pd-compare-product-add {
	display: inline-flex !important; /* thắng .d-block !important của Bootstrap */
	align-items: center;
	margin-top: 0 !important;
	margin-left: 4px;
	font-size: 12px;
}
.details-product .details-pro .price-box {
	row-gap: 4px;
}
.details-product .details-pro .product-price {
	font-size: var(--fs-2xl);
	font-weight: 600;
	line-height: 1.2;
}
.details-product .details-pro .product-price-old {
	font-size: 14px;
}
.details-product .price-box .label_product {
	margin-left: 6px;
	font-size: 12px;
	padding: 2px 6px;
	line-height: 1.4;
}
.details-product .details-pro .save-price {
	font-size: 13px;
	font-weight: 400;
}
.details-product .details-pro .swatch .header,
.details-product .details-pro .soluong label {
	font-weight: 600;
}
.details-product .details-pro .button_actions .btn,
.details-product .details-pro .button_actions .btn span:nth-child(1) {
	font-size: var(--fs-md);
}

/* Vùng bấm: nút biến thể, nút ± số lượng */
.details-product .details-pro .swatch-element label {
	height: auto;
	min-height: 44px;
	padding: 0 14px;
}
.details-product .details-pro .input_number_product {
	height: 44px;
}
.details-product .details-pro button.btn.btn_num,
.details-product .details-pro .prd_quantity {
	height: 44px;
}
.details-product .details-pro button.btn.btn_num {
	width: 44px;
}
/* Link chữ nhỏ: nới vùng bấm bằng lớp trong suốt, không làm cao dòng chữ.
   Link "Saiko" trong dòng Thương hiệu không nới: sát "So sánh", hai vùng sẽ chồng nhau. */
.details-product .details-pro .pd-compare-product-add,
.details-product .details-pro .product-hotline a,
.coupon_item .coupon_info_toggle,
.coupon_item .coupon_footer .btn {
	position: relative;
}
/* "So sánh" chỉ nới xuống dưới (phía trên là dòng Thương hiệu) */
.details-product .details-pro .pd-compare-product-add::after {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 44px;
}
.details-product .details-pro .product-hotline a::after,
.coupon_item .coupon_info_toggle::after,
.coupon_item .coupon_footer .btn::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	right: 0;
	min-height: 44px;
	height: 100%;
	transform: translateY(-50%);
}

/* desktop: tên 26 → 24px (--fs-h1), giá 32 → 28px, giá gạch 18 → 16px theo thang chữ (UI-01) */

/* ---------- 9. Trang SP: màu khung thông tin ----------
   Đỏ chỉ còn cho giá + MUA NGAY. Còn lại 3 màu chữ: chính (--text-color), phụ (--sk-muted #666),
   nhấn nhẹ = nền --sk-soft + chữ --sk-accent-text. !important chỉ ở chỗ gốc đã dùng !important. */
.details-product .details-pro .group-status .first_status {
	color: var(--sk-muted);
}
/* Link Saiko + mã SP: gốc xanh #007bff (tương phản 3.98, chưa đạt AA) → cùng xám với cả dòng,
   "Saiko" giữ gạch chân mảnh màu nhạt để vẫn nhận ra là link */
.details-product .details-pro .status_name,
.details-product .details-pro .status_name a {
	color: var(--sk-muted) !important;
}
.details-product .details-pro .status_name a {
	text-decoration: underline;
	text-decoration-color: #bbb;
	text-underline-offset: 2px;
}
.details-product .details-pro .pd-compare-product-add.text-primary {
	color: var(--sk-muted) !important;
}
.details-product .details-pro .product-price-old {
	color: var(--sk-muted) !important;
}
.details-product .price-box .label_product {
	background: var(--sk-soft);
	color: var(--sk-accent-text);
}
.details-product .details-pro .save-price {
	color: #15803d; /* PRD-12: Tiết kiệm xanh (chữ #15803d trên trắng 5.0:1) */
}
.details-product .details-pro .save-price span {
	color: #15803d;
	font-weight: 600;
}
/* Hộp ưu đãi: bỏ viền nét đứt nâu + tiêu đề nền đỏ đặc */
.details-product .details-pro .product-promotion {
	border: 1px solid var(--sk-line);
	border-radius: var(--r) !important; /* thắng .rounded-sm !important của Bootstrap */
}
.details-product .details-pro .product-promotion__heading {
	background-color: var(--sk-soft);
	color: var(--sk-accent-text);
}
/* icon hộp quà là ảnh PNG trắng → lọc sang đỏ đậm cho thấy trên nền hồng nhạt */
.details-product .details-pro .product-promotion__heading img {
	filter: brightness(0) saturate(100%) invert(17%) sepia(63%) saturate(4300%) hue-rotate(345deg) brightness(88%);
}
.details-product .details-pro .product-promotion ul {
	color: var(--text-color);
}
.details-product .details-pro .swatch .header,
.details-product .details-pro .soluong label {
	color: var(--text-color);
}
/* Biến thể đang chọn: giữ viền đỏ báo trạng thái, chữ về màu chính */
.details-product .details-pro .swatch .swatch-element input:checked + label {
	color: var(--text-color);
	font-weight: 600;
}
.details-product .details-pro button.btn.btn_num {
	color: var(--text-color);
}
.details-product .details-pro .product-hotline a {
	color: var(--text-color);
	text-decoration: underline;
	text-underline-offset: 2px;
}
/* THÊM VÀO GIỎ: trước nền xám #e7e7e7 (01/10) → nút Phụ viền đỏ ở mục 29 (Hai duyệt 07/10/2026, UI-01).
   Màu gốc lấy từ cài đặt Admin (cta_addtocart_bg/color) → đổi trong Admin không còn tác dụng ở trang SP. */

/* Toàn site: breadcrumb mục cuối (#bfbfbf, 1.75) và chữ phụ mã giảm giá (#828282, 3.84) chưa đạt AA */
.breadcrumb .text-neutral-100 {
	color: var(--sk-muted);
}
/* thêm "body" vì coupon.css nạp sau file này với selector cùng độ mạnh */
body .coupon_item .coupon_body .coupon_desc,
body .coupon_item .coupon_body .coupon_date p {
	color: var(--sk-muted);
}

/* ---------- 10. Breadcrumb toàn site: 12px, 1 dòng, mục dài cắt "…" ----------
   Gốc 14px, flex-wrap → tên SP dài xuống 2 dòng (cao 50px) ngay đầu trang mobile.
   Tham khảo bluestone.com.vn (12px, 1 dòng), maximize-evolutions (11.3px, 1 dòng có tên SP).
   Hết chỗ thì chỉ mục cuối (tên trang hiện tại) co lại + cắt "…"; danh mục giữ nguyên, tối đa 60% chiều rộng.
   Nội dung đầy đủ vẫn nằm trong HTML (schema BreadcrumbList cho Google). */
.breadcrumb-list .breadcrumb {
	flex-wrap: nowrap !important; /* thắng .flex-wrap !important của Bootstrap */
	font-size: 12px;
	white-space: nowrap;
	overflow: hidden;
}
.breadcrumb-list .breadcrumb > li {
	min-width: 0;
	flex-shrink: 0;
	max-width: 60%; /* danh mục tên rất dài mới cắt, vẫn chừa chỗ cho mục cuối */
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
}
.breadcrumb-list .breadcrumb > li:last-child {
	flex-shrink: 1;
	max-width: none;
}

/* ---------- 11. Trang SP: nút chia sẻ (UX-07, UX-35) ----------
   1 icon tròn ở góc trên phải ảnh chính (kiểu Shopee) thay hàng nút dưới ảnh → không tốn chiều cao.
   Vùng bấm 44px, hình tròn đen mờ 36px + icon trắng (kiểu Shopee, cùng độ mờ mũi tên ảnh mục 15)
   để tem/logo góc ảnh vẫn nhìn xuyên qua. Máy tính: menu nhỏ Facebook / Chép link. */
.product-detail-left .large-image {
	position: relative;
}
.share-fab {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 3;
}
.share-fab__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: transparent;
	color: #fff;
	cursor: pointer;
}
.share-fab__btn::before {
	content: "";
	position: absolute;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.4);
}
.share-fab__btn svg {
	position: relative;
}
.share-fab__btn:hover::before {
	background: rgba(0, 0, 0, 0.55);
}
.share-fab__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: -2px;
	border-radius: 50%;
}
.share-fab__menu {
	position: absolute;
	top: 46px;
	right: 4px;
	min-width: 180px;
	padding: 6px 0;
	background: #fff;
	border-radius: 8px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.16);
}
.share-fab__menu[hidden] {
	display: none;
}
.share-fab__item {
	display: flex;
	align-items: center;
	gap: 10px;
	width: 100%;
	min-height: 44px;
	padding: 0 16px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--sk-ink);
	text-align: left;
	cursor: pointer;
}
.share-fab__item:hover,
.share-fab__item:focus-visible {
	background: #f3f3f3;
	color: var(--sk-ink);
	text-decoration: none;
}
.share-fab__url {
	display: block;
	width: calc(100% - 24px);
	margin: 4px 12px 6px;
	padding: 6px 8px;
	font-size: 13px;
	border: 1px solid #ccc;
	border-radius: 4px;
}
.share-fab__url[hidden] {
	display: none;
}

/* ---------- 12. Heading trong nội dung soạn thảo (UX-42) ----------
   Áp cho: mô tả SP, bài blog, trang nội dung, mô tả collection, quickview, lookbook.
   Bootstrap để h3 = 28px trong khi chữ thân 14px → heading to gấp đôi, lề trên 0 nên dính đoạn trước.
   Lề trên lớn hơn lề dưới để heading đi liền với đoạn nó mở đầu. */
.rte h2, .content-page h2 { font-size: var(--fs-xl); line-height: 1.35; font-weight: 700; margin: 28px 0 10px; }
.rte h3, .content-page h3 { font-size: var(--fs-lg); line-height: 1.4;  font-weight: 700; margin: 24px 0 8px; }
.rte h4, .content-page h4 { font-size: var(--fs-md); line-height: 1.45; font-weight: 600; margin: 20px 0 6px; }
/* chỉ heading nằm ngay đầu khối; heading trong <div> trình soạn thảo tự bọc vẫn giữ lề trên */
.rte > h2:first-child, .rte > h3:first-child, .rte > h4:first-child,
.content-page > h2:first-child, .content-page > h3:first-child, .content-page > h4:first-child { margin-top: 0; }

@media (max-width: 767px) {
	/* thang chữ UI-01 (Hai duyệt 07/10): 20/16/16 mobile — trước 20/17/15 */
	.rte h2, .content-page h2 { font-size: var(--fs-lg); }
	.rte h3, .content-page h3 { font-size: var(--fs-md); }
	.rte h4, .content-page h4 { font-size: var(--fs-md); }
}

/* ---------- 13. Footer: tiêu đề theo "Màu chữ footer" (NAV-10) ----------
   main.css ép .custom-footer-bg .title-menu = #fff vì cài đặt ẩn footer_bg_overlay (#ad2b2b) bật class này,
   trong khi nền thật lấy "Màu nền footer" (#fff) → tiêu đề trắng trên trắng, không chỉnh được trong Admin.
   Giờ mọi màu footer đi theo 2 ô "Màu nền footer" / "Màu chữ footer". */
.custom-footer-bg { background-color: var(--footer-bg); }
.custom-footer-bg .title-menu,
.footer .copyright .title-menu { color: var(--footer-color); }

/* ---------- 14. Trang SP: ảnh chính tràn 2 mép trên mobile (tham khảo bluestone.com.vn) ----------
   Khung ảnh rộng 351px, cách mép 12px mỗi bên + 16px trắng phía trên → tràn đủ 375px, sát breadcrumb.
   Hàng ảnh nhỏ, nút chia sẻ vẫn giữ lề 12px. */
@media (max-width: 991.98px) {
    .product-detail-left.product-images {
        padding-top: 0;
    }
    .product-detail-left .large-image {
        margin-left: -12px;
        margin-right: -12px;
    }
}

/* ---------- 15. Trang SP: mũi tên ảnh chính sát mép, nền mờ (tham khảo bluestone.com.vn) ----------
   Thay hình tròn trắng đặc 44px che ảnh bằng dải 32x48px đen mờ sát mép, mũi tên trắng.
   Vùng bấm vẫn 44x48px: 12px phía trong trong suốt (background-clip: content-box). */
#gallery_1 .slick-arrow,
#gallery_1 .slick-arrow:not(.slick-disabled):hover {
    width: 44px;
    height: 48px;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    background: rgba(0, 0, 0, 0.4);
    background-clip: content-box;
    opacity: 1;
}
#gallery_1 .slick-arrow.slick-prev { left: 0; padding: 0 12px 0 0; }
#gallery_1 .slick-arrow.slick-next { right: 0; padding: 0 0 0 12px; }
#gallery_1 .slick-arrow:not(.slick-disabled):hover { background-color: rgba(0, 0, 0, 0.55); }
#gallery_1 .slick-arrow:before {
    width: 100%;
    height: 48px;
    line-height: 48px;
    font-size: 20px;
    color: #fff;
}
#gallery_1 .slick-arrow:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }

/* ---------- 16. Bảng gợi ý khi bấm ô tìm — mobile + desktop (tham khảo bluestone.com.vn, Shopee, vuanem.com) ----------
   Gốc: từ khoá (cài đặt filter_search_list) hiện 1 dòng chữ 12px dưới ô tìm, bị cắt, vùng bấm ~18px.
   Nay: ẩn dòng đó; bấm vào ô tìm còn trống → xổ bảng ngay dưới ô gồm "Tìm kiếm gần đây" (chip, nút Xoá lịch sử),
   "Sản phẩm bạn vừa xem" (cuộn ngang) và "Xu hướng tìm kiếm" (chip 44px nền xám), nút X góc phải.
   Gõ chữ thì bảng đóng để nhường chỗ cho gợi ý EGA Smart Search. Mở/đóng, điền nội dung: main.js initSearchPanel().
   Mobile (< 992px): bảng tràn 2 mép. Desktop: bảng thẳng hàng với ô tìm. */
#search-header .search-dropdow {
	display: none;
}
#search-header.is-trending-open .search-dropdow {
	display: block;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	z-index: 1001;
	margin-top: 8px;
	padding: 16px;
	background: #fff;
	border-radius: 0 0 8px 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
	max-height: 70vh;
	overflow-y: auto;
}
#search-header .search-trending__title {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 12px;
	font-size: 16px;
	font-weight: 600;
	color: var(--sk-ink);
}
/* Icon đỏ thương hiệu trước tiêu đề từng phần (tham khảo vuanem.com) */
#search-header .search-panel__title-icon {
	flex: 0 0 20px;
	fill: none;
	stroke: var(--primary-color, #d22630);
	stroke-width: 2;
	stroke-linecap: round;
	stroke-linejoin: round;
}
#search-header .search-dropdow .search__list {
	display: flex !important;
	flex-wrap: wrap;
	white-space: normal;
	overflow: visible;
	gap: 8px;
}
#search-header .search-dropdow .search__list > li {
	display: block;
	margin: 0 !important;
	max-width: 100%;
}
/* Chip trơn nền xám (kiểu vuanem.com) nhưng dùng màu Saiko: nền = ô tìm kiếm #f1f1f1,
   bấm = #e7e7e7 (nút Thêm vào giỏ), chữ #333. Vùng bấm vẫn 44px. */
#search-header .search-dropdow .search__list a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	max-width: 100%;
	padding: 8px 16px;
	border: 0;
	border-radius: 22px;
	background: #f1f1f1;
	font-size: 15px;
	line-height: 1.3;
	color: var(--sk-ink);
}
#search-header .search-trending__text {
	display: inline-block;
}
#search-header .search-trending__text::first-letter {
	text-transform: uppercase;
}
#search-header .search-dropdow .search__list a:active,
#search-header .search-dropdow .search__list a:hover {
	background: #e7e7e7;
	color: var(--sk-ink);
}
/* Tìm kiếm gần đây */
/* Mỗi phần cách nhau bằng 1 đường kẻ mảnh */
#search-header .search-recent,
#search-header .search-viewed {
	margin-bottom: 16px;
	padding-bottom: 16px;
	border-bottom: 1px solid #eee;
}
#search-header .search-panel__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin: -12px 0 0;
	padding-right: 40px; /* nhường góc phải cho nút X */
}
/* Nút X đóng bảng: góc trên phải, vùng bấm 44px, icon nét 20px màu chữ phụ */
#search-header .search-panel__close {
	position: absolute;
	top: 4px;
	right: 4px;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--sk-muted, #666);
}
#search-header .search-panel__close:active,
#search-header .search-panel__close:hover {
	background: #f1f1f1;
	color: var(--sk-ink, #2b2a29);
}
#search-header .search-panel__close:focus-visible {
	outline: 2px solid var(--sk-focus, #2b2a29);
	outline-offset: -2px;
}
#search-header .search-panel__close svg {
	fill: none;
	stroke: currentColor;
	stroke-width: 2;
	stroke-linecap: round;
}
#search-header .search-panel__head .search-trending__title {
	margin: 0;
}
#search-header .search-recent__clear {
	min-width: 44px;
	min-height: 44px;
	padding: 0 4px;
	border: 0;
	background: none;
	font-size: 14px;
	color: var(--sk-muted);
}
/* Sản phẩm bạn vừa xem: hàng cuộn ngang, tràn sát 2 mép bảng */
#search-header .search-viewed__list {
	display: flex;
	gap: 12px;
	margin: 0 -16px;
	padding: 0 16px 4px;
	overflow-x: auto;
	scroll-snap-type: x proximity;
	scroll-padding: 0 16px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
#search-header .search-viewed__list::-webkit-scrollbar {
	display: none;
}
#search-header .search-viewed__item {
	flex: 0 0 104px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	color: var(--sk-ink);
	scroll-snap-align: start;
}
#search-header .search-viewed__item img {
	width: 104px;
	height: 104px;
	object-fit: contain;
	border: 1px solid #eee;
	border-radius: 8px;
	background: #fff;
}
#search-header .search-viewed__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 1.4;
}
#search-header .search-viewed__price {
	font-size: 14px;
	font-weight: 600;
	color: var(--price-color, #d0021b);
}
@media (max-width: 991.98px) {
	/* iOS Safari tự phóng to trang khi ô nhập có chữ < 16px (gốc 12px) */
	#search-header .custom-input-group .input-group-field {
		font-size: 16px;
	}
	/* Bảng kết quả EGA khi đang gõ: cùng khung với bảng gợi ý — tràn 2 mép, cách ô tìm 8px,
	   bo 2 góc dưới, bóng đổ xuống, cao tối đa 70vh. Gốc: fixed, rộng 345px, lệch phải 12px.
	   top do script EGA tự đặt theo mép dưới ô tìm (kể cả khi header dính). */
	.ega-sm-wrapper {
		left: 0 !important;
		right: 0 !important;
		width: 100% !important;
		max-width: none !important;
		margin-top: 8px !important;
		border-radius: 0 0 8px 8px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
	}
	.ega-sm-wrapper .ega-sm-results {
		max-height: calc(70vh - 122px) !important;
	}
	/* Header dính: ô tìm hẹp cạnh logo → bảng lấy khung .header_menu (fixed), trải hết ngang dưới header. */
	.header_menu.active #search-header.is-trending-open {
		position: static;
	}
	.header_menu.active #search-header.is-trending-open .search-dropdow {
		margin-top: 0;
		border-top: 1px solid #eee;
	}
}
/* Desktop: bảng thẳng hàng 2 mép ô tìm (#search-header có padding-right 12px), bo đủ 4 góc.
   Bảng EGA khi gõ: rộng bằng ô tìm (--sk-search-w do main.js đo; EGA tự canh mép phải theo ô tìm),
   cách ô 8px như bảng gợi ý (gốc 390px, cách 12px). */
@media (min-width: 992px) {
	#search-header.is-trending-open .search-dropdow {
		right: 12px;
		border-radius: 8px;
		max-height: min(70vh, 600px);
	}
	.ega-sm-wrapper {
		width: var(--sk-search-w, 390px) !important;
		max-width: none !important;
		margin-top: 8px !important;
		border-radius: 8px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15) !important;
	}
}

/* ---------- 17. Trang SP mobile: hàng ảnh nhỏ gọn, tên + giá lên màn hình đầu (tham khảo Hyper theme) ----------
   7 ảnh nhỏ 44px cách nhau 6px (slidesToShow 7 trong product.liquid; BlueStone 41px, Vua Nệm 42px, giữ 44px cho
   đủ vùng bấm), ảnh chính → ảnh nhỏ 12px, ảnh nhỏ → tên SP 16px;
   bỏ dải xám giữa khối ảnh và khối thông tin. !important vì đè class tiện ích Bootstrap (pb-3, py-3, mt-3).
   375px: tên SP 805 → 709 (ảnh nhỏ 60px) → 672 (44px, 08/10). Desktop giữ nguyên. */
@media (max-width: 991.98px) {
	.product-detail-left .large-image {
		padding-bottom: 0 !important;
	}
	.product-detail-left .slickthumb_relative_product_1 {
		margin: 12px 0 0 !important;
		padding: 0 !important;
	}
	.product-detail-left.product-images {
		padding-bottom: 0 !important;
	}
	.details-product .details-pro {
		margin-top: 0 !important;
		padding-top: 16px !important;
	}
	#gallery_02 .item.slick-slide.slick-slide {
		height: var(--btn-h);
		margin: 0 3px;
		border-radius: var(--r);
	}
}

/* ---------- 18. Header mobile: logo nằm đúng giữa màn hình (NAV-12, tham khảo vuanem.com, bluestone.com.vn) ----------
   header.liquid: 2 cột bên luôn col-3 (trước col-2 | col-6 | col-4 khi bật so sánh SP → logo lệch trái ~31px ở 375px).
   Cột phải hẹp lại → không cho icon so sánh / giỏ hàng bị bóp ở màn 320px. */
@media (max-width: 991.98px) {
	.mid-header ul.header-right > li {
		flex-shrink: 0;
	}
	/* Header dính: logo ẩn, ô tìm (main.css: 50%) nằm giữa 2 cột col-3 → trống bên trái, sát icon bên phải.
	   2 cột bên co theo icon, ô tìm giãn hết phần còn lại, cách icon 12px. */
	.header_menu.active .mid-header .row > .header-right,
	.header_menu.active .mid-header .row > div:last-child {
		flex: 0 0 auto;
		width: auto;
		max-width: none;
	}
	.header_menu.active #search-header {
		flex: 1 1 0;
		max-width: none;
		min-width: 0;
		padding-right: 12px;
	}
}

/* ---------- 19. Header: icon nét mảnh, chấm số gọn (NAV-13, tham khảo vuanem.com) ----------
   header-right.liquid: giỏ hàng + so sánh là SVG nét 1,75px (trước: PNG tô đặc + icon nét đậm lật ngược).
   Chấm giỏ hàng luôn hiện (kể cả 0), tròn 18px chữ đậm ở góc icon; chấm so sánh chỉ hiện khi đã chọn SP. */
.mid-header .header-icon {
	width: 24px;
	height: 24px;
	fill: none;
	stroke: currentColor;
	stroke-width: 1.75;
	stroke-linecap: round;
	stroke-linejoin: round;
	transform: none;
	display: block;
}
.mid-header .mini-cart > a .count_item,
.mid-header .compare-product__header-count {
	min-width: 18px;
	width: auto;
	height: 18px;
	padding: 0 4px;
	border-radius: 9px;
	font-size: 11px;
	font-weight: 700;
	line-height: 18px;
	text-align: center;
	top: -9px;
	left: 12px;
	right: auto;
}
/* main.css dùng var(--color-white) nhưng biến này không có → số kế thừa màu chữ tối của header */
.mid-header .compare-product__header-count {
	color: #fff;
}
.mid-header .compare-product__header-count:empty {
	display: none !important;
}
/* main.css ≥768px bọc giỏ hàng trong khung viền đỏ 24px → bỏ, cho giống icon "Đăng nhập" bên cạnh */
.mid-header .mini-cart > a {
	border: 0;
	border-radius: 0;
}
@media (max-width: 991.98px) {
	.mid-header .header-right .header-icon {
		color: #3d3c3b;
	}
	.mid-header .toggle-nav {
		height: 18px;
	}
	.mid-header .toggle-nav .bar {
		height: 2px;
		border-radius: 2px;
	}
}

/* ---------- 20. Trang bài viết blog (BLG-01, BLG-02, UX-64) ----------
   Link trong bài trùng màu chữ, không gạch chân → khách không thấy link sang SP/collection.
   H1 lặp tiêu đề trong nội dung: KHÔNG ẩn bằng CSS (Hai 06/10) — do bài chép tiêu đề vào nội dung, sửa ở bài.
   Chữ thân bài 14px/21px → 16px/1.65 cho bài dài đọc trên điện thoại. */
.article-main .rte a:not(.btn) {
	color: var(--primary-color, #d22630); /* 5.2:1 trên nền trắng */
	text-decoration: underline;
	text-underline-offset: 2px;
	font-weight: 500;
}
.article-main .rte p,
.article-main .rte li { font-size: 16px; line-height: 1.65; }
.article-main .rte figcaption { font-size: 13px; }
/* mục lục: khung viền, thu gọn thành 1 hàng bấm mở (JS đóng sẵn ở mobile), vùng bấm ≥ 44px */
.article-main .toc-wrapper { border: 1px solid #e5e5e5; border-radius: 8px; padding: 0 12px; margin-bottom: 20px; }
.article-main .toc-wrapper .toc-title.active { justify-content: space-between; min-height: 44px; margin-bottom: 0 !important; font-size: 16px; }
.article-main .toc-wrapper .js-toc { padding-bottom: 12px; }
/* icon fa-angle-right của mục lục không hiển thị (theme không nạp FontAwesome ở đây) → mũi tên bằng CSS */
.article-main .toc-wrapper .toc-title i { display: none; }
.article-main .toc-wrapper .toc-title.active::after {
	content: ""; width: 8px; height: 8px; margin: -4px 4px 0 0;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); transition: transform .2s;
}
.article-main .toc-wrapper .toc-title.active.open::after { transform: rotate(-135deg); margin-top: 4px; }

/* ---------- 21. Bài viết: thẻ SP trong bài, thanh mục lục dính (BLG-03, BLG-06, BLOG-04) ----------
   Tham khảo dienmayxanh.com/kinh-nghiem-hay: SP có giá ngay trong mục bài nhắc tới, thanh "đang đọc" dính trên đầu.
   Snippet: saiko-article-products.liquid (tag bài "sp:<handle>", "dm:<handle collection>"). */
.sk-art-products { margin: 20px 0; }
.sk-art-product {
	display: flex; gap: 12px; align-items: center; max-width: 560px;
	margin: 16px 0 24px; padding: 12px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff;
}
.sk-art-product__img { flex: 0 0 104px; }
.sk-art-product__img img { display: block; width: 104px; height: 104px; object-fit: contain; border-radius: 6px; margin: 0 !important; }
.sk-art-product__body { flex: 1; min-width: 0; }
/* thắng màu link đỏ + gạch chân của mục 20 */
.article-main .rte .sk-art-product a,
.article-main .sk-art-product a { color: #2b2a29; text-decoration: none; font-weight: inherit; }
.article-main .sk-art-product .sk-art-product__name { display: block; font-size: 15px; line-height: 1.4; font-weight: 600; }
.sk-art-product .sk-specs { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0 0; }
.sk-art-product .sk-specs span { font-size: 12px; line-height: 1.4; padding: 1px 6px; border-radius: 4px; background: #f2f2f2; color: var(--sk-ink); }
.sk-art-product__price { margin-top: 6px; display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px; }
.sk-art-product__price .price { font-size: 17px; font-weight: 700; color: var(--price-color, #d0021b); }
.sk-art-product__price .compare-price { font-size: 13px; color: var(--sk-muted); }
.sk-art-product__oos { font-size: 13px; color: var(--sk-muted); margin-top: 2px; }
.article-main .rte .sk-art-product a.sk-art-product__btn,
.article-main .sk-art-product a.sk-art-product__btn {
	display: inline-flex; align-items: center; min-height: 44px; margin-top: 8px; padding: 0 16px;
	border-radius: 8px; background: var(--primary-color, #d22630); color: #fff; font-size: 14px; font-weight: 600;
}

.sk-toc-bar { display: none; }
@media (max-width: 991px) {
	.sk-toc-bar {
		position: fixed; left: 0; right: 0; z-index: 1001; width: 100%;
		display: flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px;
		background: #fff; border: 0; border-bottom: 1px solid #e5e5e5; box-shadow: 0 2px 6px rgba(0,0,0,.06);
		font-size: 15px; font-weight: 600; color: #2b2a29; text-align: left;
	}
	.sk-toc-bar[hidden] { display: none; }
	.sk-toc-bar__title { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
	.sk-toc-bar::after {
		content: ""; flex: 0 0 8px; height: 8px; margin: -4px 2px 0 0;
		border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s;
	}
	.sk-toc-bar[aria-expanded="true"]::after { transform: rotate(-135deg); margin-top: 4px; }
	/* nút mục lục nổi bên trái (đè chữ) → bỏ; khung mục lục thả xuống ngay dưới thanh */
	.fixed-toc { top: 0 !important; transform: none; }
	.fixed-toc > .toc-toggle-btn { display: none !important; }
	.fixed-toc .fixed-toc-content {
		position: fixed; top: var(--sk-toc-top, 100px) !important; left: 0; right: 0; width: auto; max-height: 60vh;
		border: 0; border-bottom: 1px solid #e5e5e5; border-radius: 0 0 12px 12px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
		font-size: 15px; transform: translateY(-8px); opacity: 0; visibility: hidden;
		transition: opacity .2s, transform .2s, visibility .2s;
	}
	.fixed-toc.open .fixed-toc-content { transform: none; opacity: 1; visibility: visible; }
	.fixed-toc .fixed-toc-content .toc-title { display: none; }
	.fixed-toc .fixed-toc-content li.toc-list-item { padding: 4px 0; }
	.fixed-toc .fixed-toc-content li.toc-list-item + li.toc-list-item { margin-top: 0; }
}

/* ---------- 22. Bài viết: mục lục + hộp "Xem thêm" theo màu thương hiệu, dải SP danh mục (BLOG-04) ----------
   Tham khảo bluestone.com.vn/blogs: mục lục viền + nền màu thương hiệu, blockquote "Xem thêm" nổi bật,
   dải SP vuốt ngang theo chủ đề bài. Người viết: nút "Trích dẫn" trong trình soạn thảo → hộp hồng;
   đoạn bắt đầu "Xem thêm:" có link cũng tự thành hộp (JS thêm class .sk-note). */
.article-main .toc-wrapper { border-color: var(--primary-color, #d22630); background: var(--sk-soft, #fdecee); }
.article-main .toc-wrapper .toc-list li::before { color: var(--primary-color, #d22630); font-weight: 600; }
/* link mục lục theme để --link-color xanh #2f80ed (!important): trên nền hồng chỉ 3.39:1, trên trắng 3.7:1 → chữ đậm 12.5:1 */
.article-main .toc-wrapper a.toc-link,
.fixed-toc .fixed-toc-content a.toc-link { color: #2b2a29 !important; }
.article-main .toc-wrapper a.toc-link.is-active-link,
.fixed-toc .fixed-toc-content a.toc-link.is-active-link { color: var(--primary-color, #d22630) !important; font-weight: 600 !important; }

.article-main .rte blockquote,
.article-main .rte p.sk-note {
	margin: 20px 0; padding: 12px 16px; border: 0; border-left: 4px solid var(--primary-color, #d22630);
	border-radius: 0 8px 8px 0; background: var(--sk-soft, #fdecee); font-style: normal;
}
.article-main .rte blockquote p:last-child { margin-bottom: 0; }
.article-main .rte blockquote a,
.article-main .rte p.sk-note a { font-weight: 600; }

.sk-art-col { margin: 24px 0; }
.sk-art-col__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.sk-art-col__title { margin: 0; font-size: 17px; font-weight: 700; }
.article-main a.sk-art-col__all,
.sk-art-col .sk-art-col__all {
	display: inline-flex; align-items: center; min-height: 44px; flex: 0 0 auto;
	color: var(--primary-color, #d22630); font-weight: 600; text-decoration: none;
}
.sk-art-col__list {
	display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px;
	-webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.article-main .rte a.sk-art-col__item,
.sk-art-col a.sk-art-col__item {
	flex: 0 0 44%; max-width: 200px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 4px;
	padding: 8px; border: 1px solid #e5e5e5; border-radius: 10px; background: #fff;
	color: #2b2a29; text-decoration: none; font-weight: 400;
}
.sk-art-col__img { position: relative; display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f7f7f7; }
.sk-art-col__img img { width: 100%; height: 100%; object-fit: contain; margin: 0 !important; }
.sk-art-col__off {
	position: absolute; top: 6px; left: 6px; padding: 1px 6px; border-radius: 4px;
	background: var(--primary-color, #d22630); color: #fff; font-size: 12px; font-weight: 700;
}
.sk-art-col__name {
	font-size: 14px; line-height: 1.4; min-height: 2.8em;
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.sk-art-col__prices { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 6px; }
.sk-art-col__price { font-size: 15px; font-weight: 700; color: var(--price-color, #d0021b); }
.sk-art-col__cmp { font-size: 12px; color: var(--sk-muted); }
.sk-art-col__oos { font-size: 12px; color: var(--sk-muted); }
@media (min-width: 768px) {
	.article-main .rte a.sk-art-col__item, .sk-art-col a.sk-art-col__item { flex-basis: 23%; }
}

/* ---------- 23. Danh sách bài viết: thẻ cao bằng nhau (tham khảo bluestone.com.vn/blogs/vao-bep) ----------
   Snippet blog_list_item (trang blog, tìm kiếm, khối blog trang chủ). Trước: ảnh giữ tỉ lệ gốc căn giữa trong khung 3:2
   (hở trắng, mỗi thẻ một cỡ), tiêu đề 1–5 dòng, đoạn trích dài ngắn khác nhau → thẻ lệch 360–418px trên mobile. */
.blogwp.sk-card {
	display: flex; flex-direction: column; height: calc(100% - 16px); margin-bottom: 16px;
	border: 1px solid #ececec; border-radius: 10px; overflow: hidden; background: #fff;
}
.blogwp.sk-card .image-blog { display: block; overflow: hidden; background: #f4f4f4; }
.blogwp.sk-card .sk-card__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.blogwp.sk-card .content_blog { display: flex; flex-direction: column; flex: 1; padding: 10px 12px 12px; margin: 0; }
.blogwp.sk-card h3 { margin: 0 0 6px; }
.blogwp.sk-card h3 a.link {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 2.8em; font-size: 15px; line-height: 1.4; font-weight: 700; color: #2b2a29; filter: none;
}
.blogwp.sk-card .sk-card__excerpt {
	display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	min-height: 3em; margin: 0 0 8px; font-size: 14px; line-height: 1.5; color: var(--sk-muted); text-align: left;
}
.blogwp.sk-card .sk-card__date { margin-top: auto; font-size: 12px; color: var(--sk-muted); }
/* blog-article-style.css `.content-blog .blogwp .card-body p { color: var(--text-secondary-color) }` (0,3,1) thắng
   → đoạn trích chỉ 3.23:1; tăng độ ưu tiên để màu chữ nhạt --sk-muted #666 (5.74:1) có hiệu lực */
.content-blog .blogwp.sk-card .card-body p.sk-card__excerpt,
.blogwp.sk-card .card-body p.sk-card__excerpt { color: var(--sk-muted); }
/* Phân trang danh sách blog: ô 26px → 44px; nút ‹ › dùng icon FontAwesome không được nạp (trống 0×0) → ký tự */
.pageinate-page-blog .pagination { float: none !important; justify-content: center; flex-wrap: wrap; gap: 6px; }
.pageinate-page-blog .pagination .page-link {
	display: flex; align-items: center; justify-content: center; min-width: 44px; height: 44px; padding: 0 10px;
	margin: 0 !important; border-radius: 8px !important; font-size: 15px;
}
.pageinate-page-blog .pagination .fa-angle-left::before { content: "‹"; }
.pageinate-page-blog .pagination .fa-angle-right::before { content: "›"; }
.pageinate-page-blog .pagination .fa-angle-left,
.pageinate-page-blog .pagination .fa-angle-right { font-style: normal; font-size: 22px; line-height: 1; }
@media (max-width: 400px) {
	/* 8 ô (‹ 1 2 3 … 10 ›) vừa 1 hàng ở 375px: rộng 38px, cao giữ 44px */
	.pageinate-page-blog .pagination { gap: 4px; }
	.pageinate-page-blog .pagination .page-link { min-width: 38px; padding: 0 6px; }
}
@media (max-width: 767px) {
	/* 2 cột mobile: thu khe giữa 30 → 12px cho thẻ rộng hơn (164 → 176px) */
	.content-blog > .row { margin-left: -6px; margin-right: -6px; }
	.content-blog > .row > [class*="col-"] { padding-left: 6px; padding-right: 6px; }
	.blogwp.sk-card h3 a.link { font-size: 14px; }
	.blogwp.sk-card .sk-card__excerpt { font-size: 13px; }
	.blogwp.sk-card .content_blog { padding: 8px 10px 10px; }
}

/* ---------- 24. Bớt đỏ: nút + thẻ SP đỏ, nhãn −% nền hồng chữ đỏ đậm (UX-23, Hai duyệt 07/10/2026) ----------
   Nút tròn thẻ SP (+ thêm giỏ, và "Tùy chọn" icon giỏ của SP nhiều biến thể — Hai chọn đồng bộ): gốc lấy var(--buynow-bg)
   = nâu #8b7046 (color_buynow, dùng chung nút Mua ngay) → chỉ đổi nút tròn của thẻ SP, không đổi cài đặt.
   Nhãn −%: nền đỏ đặc → nền hồng #fbecec, chữ #a81e27 (6.36:1), áp cả thẻ SP lẫn trang SP / thanh thêm giỏ dính. */
.item_product_main button.product-item-btn {
	background: #d22630;
	color: #fff;
}
.item_product_main .label_product {
	background: #fbecec;
}
.item_product_main .label_product .label_wrapper {
	color: #a81e27;
	font-weight: 700;
}
.details-product .price-box .label_product,
#ega-sticky-addcart .label_product {
	background: #fbecec;
	color: #a81e27;
	font-weight: 700;
}

/* ---------- 25. Bớt đỏ: thanh menu (subheader) nền trắng, chỉ nút "Danh mục sản phẩm" đỏ (Hai duyệt 07/10/2026) ----------
   Gốc: nền var(--subheader-background) = đỏ (subheader_bg), chữ trắng, hover nền #555.
   Kẻ trên/dưới bằng box-shadow inset để thanh giữ nguyên cao 50px (nút danh mục + dropdown trang chủ không xê dịch).
   Nút danh mục: cả trang chủ (.nav-index) lẫn trang khác; chỉ tô chữ/icon của chính nút, không đụng dropdown bên trong. */
.subheader {
	background: #fff;
	color: #2b2a29;
	box-shadow: inset 0 1px 0 #e6e2dd, inset 0 -1px 0 #e6e2dd;
}
.subheader .navigation--horizontal nav .list-group-child > li > a,
.subheader-right ul li a span {
	color: #2b2a29;
}
.subheader-right ul li a svg {
	fill: #2b2a29;
}
/* Hover: chữ đỏ + gạch chân đỏ 2px (Hai chọn 07/10/2026), cả "Kiểm tra đơn hàng" */
.subheader .navigation--horizontal nav .list-group-child > li > a:hover {
	background-color: transparent;
	color: #d22630;
}
.subheader .navigation--horizontal nav .list-group-child > li > a:hover span,
.subheader-right ul li a:hover span {
	color: #d22630;
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}
.subheader .toogle-nav-wrapper {
	background: #d22630;
	color: #fff;
}
.subheader .toogle-nav-wrapper > strong {
	color: #fff;
}
.subheader .toogle-nav-wrapper .icon-bar .bar {
	background: #fff;
}

/* ---------- 26. Danh sách blog: hàng nút danh mục dưới tiêu đề (mobile/tablet) ----------
   Trước: danh mục chỉ ở sidebar, trên mobile nằm cuối trang (sau 6 thẻ + phân trang). Dùng lại .sk-quick/.sk-chip (mục 2). */
.sk-blog-cats { margin: -4px 0 12px; padding-top: 0; }
.sk-blog-cats .sk-chip { text-decoration: none; }
.sk-blog-cats .sk-chip[aria-current="page"] { background: #222; border-color: #222; color: #fff; }

/* ---------- 27. Chữ: về thang 6 cỡ (UI-01, Hai duyệt 07/10/2026) ----------
   Trước: 13–17 cỡ khác nhau. Tiêu đề section trang chủ 18px mobile / 28px desktop, trang SP 20px → 20/24px.
   Cách viết hoa giữ nguyên (chưa chốt, docs/VIET_HOA.md). Cỡ trang SP + heading soạn thảo: sửa thẳng ở mục 8, 12. */
.heading-bar__title,
.heading-bar__title a { font-size: var(--fs-title); }
.title_module.heading-bar { font-size: var(--fs-md); }
.title_page,
.collection-title { font-size: var(--fs-h1); }
/* chú thích 10 / 11 / 11.2 / 13px → 12 */
.item_product_main .compare-price { font-size: var(--fs-xs); }
.crbtn__title { font-size: var(--fs-xs) !important; } /* thanh dính đáy (app cr-button, CSS nạp ngoài theme) 10px; trang SP đã 12px (product-style.css) */
#mobile-menu .user-menu small { font-size: var(--fs-xs); } /* "Đăng nhập" trong <small> 11.2px */
/* 13 / 13.5 / 15px → 14 */
.text-secondary,
body .coupon_item .coupon_body .coupon_desc,
.coupon_item .coupon_body .coupon_title,
.section_store .sub-title { font-size: var(--fs-sm); }
/* 18 / 19px → 16 (tiêu đề menu mobile 17px: sửa ở mục 6) */
.title-menu,
h4.title-menu { font-size: var(--fs-md); }

/* ---------- 28. Bo góc: 8px cho khối/nút/ô nhập, pill cho chip/nhãn (UI-01, Hai duyệt 07/10/2026) ----------
   Trước: 0, 2, 3, 3.2, 4, 8, 10, 12, 27.5px, 99999px. Tròn 50% chỉ còn ở nút icon vuông (+, Lên đầu trang, ✕).
   Thẻ danh mục dạng story trang chủ (~24px) bo trong ảnh, CSS không đổi được. Nút chữ: mục 29. */
.item_product_main img,
.coupon_item .coupon_body,
.details-product .product-images,
.rounded-sm { border-radius: var(--r) !important; }
#advanced-searchform input,
#advanced-searchform select,
.newsletter-input,
textarea#note { border-radius: var(--r); }
/* ô tìm header + nút kính lúp dính liền: bo 2 góc ngoài, nút giữ nền đỏ */
.header .input-group-field.auto-search { border-radius: var(--r) 0 0 var(--r); }
.header .search-header button.btn { border-radius: 0 var(--r) var(--r) 0; }
/* chip & nhãn: tab danh mục trang chủ, nhãn −% / Mới */
.label_product,
li.ega-small.tab-link,
.tab-link { border-radius: var(--r-pill) !important; }

/* ---------- 29. Nút 3 cấp: Chính · Phụ · Link chữ (UI-01, Hai duyệt 07/10/2026) ----------
   Chung: cao ≥ 44px (Mua ngay, Thanh toán 48px), bo 8px, chữ 16px đậm 600. Mỗi khối chỉ 1 nút Chính.
   Không đổi viết hoa (chưa chốt, docs/VIET_HOA.md). Không đổi: nút kính lúp, Danh mục sản phẩm, Lên đầu trang, FREE SHIP.
   Nút Thanh toán (--cta-color) và --buynow-bg lấy giá trị ẩn color_checkout / color_buynow (nâu #8b7046, KHÔNG có ô
   trong Admin) → ép về đỏ bằng code (Hai chọn 07/10). Ô Admin "Màu nút thêm vào giỏ" hết tác dụng ở trang SP
   (docs/CAI_DAT_THEME_LUU_Y.md). */
:root {
	--cta-color: var(--sk-red);
	--buynow-bg: var(--sk-red);
}
.btn-main,
.button_actions .btn,
.btn-proceed-checkout-mobile,
.section_store .btn,
#advanced-searchform button[type=submit],
.coupon_item .coupon_footer .btn,
.newsletter-form button,
a.btn.btn-icon {
	min-height: var(--btn-h);
	border-radius: var(--r) !important;
	font-size: var(--fs-md);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	transition: background-color .15s, color .15s, border-color .15s;
}

/* Chính: nền đỏ, chữ trắng (5.17:1); hover #b01f28 (6.83:1) */
.button_actions .btn.buynow,
.btn-proceed-checkout-mobile,
#advanced-searchform button[type=submit],
.newsletter-form button {
	background: var(--sk-red);
	border: 1px solid var(--sk-red);
	color: #fff;
}
.button_actions .btn.buynow:hover,
.btn-proceed-checkout-mobile:hover,
#advanced-searchform button[type=submit]:hover,
.newsletter-form button:hover {
	background: var(--sk-red-hover);
	border-color: var(--sk-red-hover);
	color: #fff;
	filter: none;
}
.button_actions .btn.buynow,
.btn-proceed-checkout-mobile { min-height: var(--btn-h-lg); }
/* Thanh toán (giỏ): trước nâu, mobile pill 186×32 / desktop 37px bo 4px → đỏ, 48px; mobile full ngang (UX-52) */
.cart-cta .btn-proceed-checkout-mobile {
	width: 100%;
	padding: 0 16px;
	justify-content: space-between;
	box-shadow: none;
}
.cart-cta div:has(> .btn-proceed-checkout-mobile) { flex: 1 1 100%; }

/* Popup "Thêm vào giỏ thành công": Thanh toán là nút Chính, Xem giỏ hàng là Phụ.
   Gốc ngược: Thanh toán viền (.btn-main), Xem giỏ hàng nền --cta-color (quickviews-popup-cart.css) — sau khi
   --cta-color thành đỏ thì cả 2 nút cùng đỏ đặc. Khi giỏ chưa đủ giá trị tối thiểu (không có nút Thanh toán)
   Xem giỏ hàng giữ nền đỏ. */
#popupCartModal a.btn-main[href="/checkout"] {
	background: var(--sk-red);
	border: 1px solid var(--sk-red);
	color: #fff;
}
#popupCartModal a.btn-main[href="/checkout"]:hover {
	background: var(--sk-red-hover);
	border-color: var(--sk-red-hover);
	color: #fff;
}
#popupCartModal a[href="/checkout"] ~ .checkout_button {
	background: #fff;
	border: 1.5px solid var(--sk-red);
	color: var(--sk-red);
}
#popupCartModal a[href="/checkout"] ~ .checkout_button:hover {
	background: var(--sk-red-tint);
	color: var(--sk-red-text);
	filter: none;
}

/* Phụ: nền trắng, viền 1.5px đỏ, chữ đỏ (5.17:1); hover nền hồng chữ #a81e27 (6.36:1).
   Xem tất cả, Xem địa chỉ cửa hàng, Thêm vào giỏ (cạnh Mua ngay), Sao chép (trước pill đỏ đặc) */
.btn-main:not(.btn-main--primary),
.details-product .details-pro .button_actions .btn-cart,
.coupon_item .coupon_footer .btn {
	background: #fff;
	border: 1.5px solid var(--sk-red);
	color: var(--sk-red);
}
.btn-main:not(.btn-main--primary):hover,
.details-product .details-pro .button_actions .btn-cart:hover,
.coupon_item .coupon_footer .btn:hover {
	background: var(--sk-red-tint);
	border-color: var(--sk-red);
	color: var(--sk-red-text);
	filter: none;
}

/* Link chữ: "Xem thêm" mô tả SP / collection (trước nền xám #e5e6ed) → chữ chính gạch chân, hover đỏ */
a.btn.btn-icon:not(.btn-main) {
	background: transparent;
	border: 0;
	color: var(--sk-ink);
	font-weight: 600;
	text-decoration: underline;
	text-underline-offset: 4px;
}
a.btn.btn-icon:not(.btn-main):hover { color: var(--sk-red); }

/* Trạng thái chung */
.btn:focus-visible,
button:focus-visible,
a:focus-visible {
	outline: 2px solid var(--sk-focus);
	outline-offset: 2px;
	box-shadow: none;
}
/* khoá (vd nút Hết hàng). Trừ lúc đang thêm giỏ (.is-adding): nút giữ màu, mờ 0.6 như cũ (cartBtnBusy) */
.btn:disabled:not(.is-adding),
.btn.disabled:not(.is-adding) {
	background: var(--sk-disabled-bg) !important;
	border-color: var(--sk-disabled-bg) !important;
	color: var(--sk-disabled-text) !important;
	cursor: not-allowed;
	opacity: 1;
}

/* Nút icon tròn + / Tùy chọn trên thẻ SP (gốc position:absolute, 28–30px): giữ cỡ nhìn thấy, vùng bấm 44px (UX-31) */
.item_product_main button.product-item-btn::after {
	content: "";
	position: absolute;
	inset: -8px;
}

/* ---------- 30. Viết hoa: viết thường kiểu câu toàn site (UI-02, Hai chốt hướng 1 ngày 08/10/2026) ----------
   Bỏ text-transform IN HOA / hoa mỗi chữ của theme gốc, chữ hiện đúng như gõ. Quy tắc: docs/VIET_HOA.md.
   Giữ IN HOA: mã giảm giá, nhãn "HSD:", chữ trong ảnh banner. Chữ gõ IN HOA trong ô Admin thì sửa trong Admin. */
.button_actions .btn span,
.button_actions .btn span:nth-child(1),
.button_actions .btn:only-child,
.button_actions .btn.is-full,
.quick-view-product .button_actions .btn-cart span:first-child, /* product-infor-style.css: nút trang SP, thanh dính, xem nhanh */
.title_page,                                                       /* main.css: H1 trang nội dung, blog, liên hệ, collection… */
.title-head,                                                       /* main.css: tiêu đề nhóm lọc, sidebar blog, liên hệ, tìm kiếm */
.section_search_by_vehicle .vehicle-search-box-form button,        /* main.css: nút "Tìm kiếm" form trang chủ (capitalize) */
#mobile-menu .toggle-submenu,                                      /* main.css: tiêu đề menu con mobile */
body .coupon_item .coupon_body .coupon_title {                     /* coupon.css nạp sau file này → thêm body cho thắng */
	text-transform: none;
}

/* ---------- 32. Bài công thức: hộp tóm tắt món + hộp "Dụng cụ dùng trong bài" (tham khảo dienmayxanh.com/vao-bep) ----------
   Tóm tắt: shortcode [congthuc …] (snippets/shortcode-congthuc.liquid), JS dời lên trên mục lục.
   Dụng cụ: part 'tools' của saiko-article-products (tag dm:), JS dời xuống dưới danh sách nguyên liệu.
   Theo quy chuẩn mục 27–29: chữ --fs-xs/sm/md, bo --r, nút cao --btn-h, 1 nút Chính mỗi khối. */
.sk-recipe-sum { margin: 4px 0 16px; padding: 12px; border-radius: var(--r, 8px); background: var(--sk-soft, #fdecee); }
.sk-recipe-sum__stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(72px, 1fr)); gap: 8px; margin: 0 0 12px; }
.sk-recipe-sum__stats > div { text-align: center; }
.sk-recipe-sum__stats dt { font-size: var(--fs-xs, 12px); font-weight: 400; color: var(--sk-muted); margin: 0; }
.sk-recipe-sum__stats dd { font-size: var(--fs-md, 16px); font-weight: 700; color: #2b2a29; margin: 2px 0 0; }
.sk-recipe-sum__actions { display: flex; gap: 8px; }
.sk-recipe-sum__actions a {
	flex: 1; display: inline-flex; align-items: center; justify-content: center; min-height: var(--btn-h, 44px);
	border-radius: var(--r, 8px); border: 1px solid var(--sk-red, #d22630); background: #fff; color: var(--sk-red, #d22630);
	font-size: var(--fs-md, 16px); font-weight: 600; text-decoration: none;
}
.sk-recipe-sum__actions a.is-main { background: var(--sk-red, #d22630); color: #fff; }

.sk-recipe-tools { margin: 16px 0 24px; padding: 12px; border: 1px solid #e5e5e5; border-radius: var(--r, 8px); background: #fff; }
.sk-recipe-tools[hidden] { display: none; }
.sk-recipe-tools__title { margin: 0 0 10px; font-size: var(--fs-md, 16px); font-weight: 700; }
.sk-recipe-tools__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.article-main .rte a.sk-recipe-tools__item,
.sk-recipe-tools a.sk-recipe-tools__item {
	display: flex; flex-direction: column; gap: 4px; color: #2b2a29; text-decoration: none; font-weight: 400;
}
.sk-recipe-tools__item img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; margin: 0 !important;
	border-radius: var(--r, 8px); background: #f7f7f7; }
.sk-recipe-tools__name { font-size: var(--fs-sm, 14px); line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.sk-recipe-tools__price { font-size: var(--fs-sm, 14px); font-weight: 700; color: var(--price-color, #d0021b); }
.article-main .rte a.sk-recipe-tools__all,
.sk-recipe-tools a.sk-recipe-tools__all {
	display: inline-flex; align-items: center; min-height: var(--btn-h, 44px); margin-top: 4px;
	color: var(--sk-red, #d22630); font-size: var(--fs-md, 16px); font-weight: 600; text-decoration: none;
}
/* Ảnh đầu bài viết: luôn rộng hết khung (mobile tràn ngang, desktop tối đa 760px, căn giữa).
   Sửa lỗi 06/10: srcset grande/1024/1280w làm ảnh gốc nhỏ (bài 2021, gốc 600px — Haravan trả cùng 1 ảnh 600px cho mọi cỡ)
   bị trình duyệt hiểu là 1024–1280px → co còn 220px (mobile) / 421px (desktop) với class w-auto. */
.article-main .article-details > img {
	width: 100% !important; max-width: 760px; height: auto; max-height: none !important; border-radius: var(--r, 8px);
}

/* ---------- 33. Chữ: 2 màu + giãn dòng (TYPO-01, Hai chốt 10/10/2026) ----------
   Chữ chính = --sk-ink #2B2A29; chữ nhạt (phụ, ngày, chú thích, giá gạch, đoạn trích) = --sk-muted #666.
   Đoạn văn / đoạn trích line-height 1.5; tên SP, tên bài (tối đa 2 dòng) 1.4. Không canh đều (text-align: left).
   Phần màu do ô Admin quyết (footer_color, coupon_text_color, flashsale_*...) KHÔNG ghi đè ở đây — xem báo cáo TYPO-01.
   Không đụng --text-secondary-color: biến này còn dùng cho trạng thái hover của header/giỏ hàng (main.css). */
.text-muted, .text-secondary { color: var(--sk-muted) !important; }   /* bootstrap #6c757d: ngày bài viết, mô tả cam kết, chữ phụ trang tài khoản */
.item_product_main .compare-price,
.section_lookbook .lookbooks-container .lookbooks-banner__photo .popover-product .popover--price .compare-price { color: var(--sk-muted); }   /* giá gạch (trước #8F8F8F: 3.2:1) */
.blogwp .lead { color: var(--sk-muted); line-height: 1.5; text-align: left; }   /* đoạn trích bài ở trang chủ / danh sách media (trước #8F8F8F, lh 1.3) */
.content-blog .blogwp .card-body p { color: var(--sk-muted); }
.blogwp.media h3, .blogwp.media h3 a.link,
.section_blog .blogwp.media h3, .section_blog .blogwp.media h3 a.link { line-height: 1.4; }   /* tên bài 14px: 1.3 → 1.4 (a.link trang chủ cắt 2 dòng bằng line-clamp, không có chiều cao cố định) */
.section_collections .item h3 a { line-height: 1.4; }   /* tên danh mục trang chủ, tối đa 2 dòng: 1.2 → 1.4 */
.title-product-cart-mobile .product-name, .title-product-cart-mobile .product-name a { line-height: 1.4; }   /* tên SP trong giỏ mobile: 1.3 → 1.4 */
.section_faq .btn { color: var(--sk-ink); font-weight: 600; }   /* câu hỏi FAQ trang chủ: #000/700 → ink/600 */
.policies-item .media-body strong { color: var(--sk-ink); }   /* tiêu đề khối cam kết trang chủ: #000 → ink (giữ 700) */
@media (min-width: 1024px) {
	.sort-cate .content_ul li a { color: var(--sk-muted); }   /* sắp xếp collection desktop: #898989 (3.4:1) → muted; hover/active vẫn đỏ (collection-style.css) */
}