/*
Theme Name: ChicLoom (Flatsome Child)
Theme URI: https://chicloom.shop
Description: Flatsome Child Theme cho ChicLoom - phong cách lấy cảm hứng từ NextShirt (nền kem nhạt, logo tím lavender, CTA cam, sale đỏ, subscribe xanh lá)
Author: ChicLoom
Template: flatsome
Version: 1.0.0
*/

/* =========================================================
   1. BIẾN MÀU SẮC / FONT DÙNG CHUNG TOÀN THEME
   ========================================================= */
:root {
	--cl-accent: #111111;       /* Đen - logo, gạch chân menu active */
	--cl-accent-dark: #000000;
	--cl-cta: #e21b1b;          /* Đỏ - nút CTA chính (Shop Now...) */
	--cl-cta-hover: #b91414;
	--cl-sale: #e21b1b;         /* Đỏ - giá sale, badge Sale/-XX% (đồng bộ với CTA, kiểu Homage) */
	--cl-subscribe: #111111;    /* Đen - nút Subscribe footer (Homage dùng nút đen/trắng, không dùng xanh lá) */
	--cl-subscribe-hover: #333333;
	--cl-text: #111111;
	--cl-text-muted: #6b6b6b;
	--cl-bg-hero: #111111;      /* Nền đen cho hero banner (ảnh full-bleed + overlay tối, chữ trắng) */
	--cl-hero-text: #ffffff;
	--cl-border: #e5e5e5;
	--cl-font-heading: 'Montserrat', 'Helvetica Neue', sans-serif; /* Đồng bộ với Typography > Headlines trong Customizer */
	--cl-font-body: 'Montserrat', 'Helvetica Neue', sans-serif;
}

body.chicloom-site {
	color: var(--cl-text);
	font-family: var(--cl-font-body);
}

/* =========================================================
   2. HEADER / LOGO / MENU (MEGA MENU)
   ========================================================= */

/* Logo chữ (nếu dùng logo dạng text qua Customizer > Site Identity) */
.chicloom-site #logo,
.chicloom-site .header-logo a {
	font-family: var(--cl-font-heading);
	font-weight: 300;
	letter-spacing: 2px;
	color: var(--cl-accent) !important;
}
.chicloom-site #logo strong,
.chicloom-site .header-logo a strong {
	font-weight: 800;
	color: var(--cl-text) !important;
}

/* Menu chính */
.chicloom-site .nav-top-link,
.chicloom-site #header nav.nav > li > a {
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	font-size: 13px;
	color: var(--cl-text);
	transition: color .2s ease;
}

/* Ép Main Menu canh giữa header (thay vì bị dồn sang trái cạnh Logo) */
.chicloom-site .header-main .flex-grow {
	display: flex;
	justify-content: center;
}
.chicloom-site .header-main .header-nav.nav-left {
	justify-content: center;
}
.chicloom-site #header nav.nav > li > a:hover,
.chicloom-site #header nav.nav > li.current > a {
	color: var(--cl-accent);
}

/* Gạch chân dưới menu item đang active/hover, giống thanh tím dưới "CLOTHING" trong ảnh mẫu */
.chicloom-site #header nav.nav > li > a {
	border-bottom: 2px solid transparent;
	padding-bottom: 4px;
}
.chicloom-site #header nav.nav > li:hover > a,
.chicloom-site #header nav.nav > li.current > a {
	border-bottom-color: var(--cl-accent);
}

/* Mega menu dropdown */
.chicloom-site .mega-menu-column,
.chicloom-site .sub-menu {
	border-top: 3px solid var(--cl-accent);
}
.chicloom-site .sub-menu li a {
	font-size: 14px;
	color: var(--cl-text);
	padding: 8px 15px;
}
.chicloom-site .sub-menu li a:hover {
	color: var(--cl-accent);
	background: rgba(17,17,17,0.06);
}

/* Tắt gạch ngang chia dòng giữa các item trong dropdown menu con
   (khớp đúng selector gốc Flatsome: .nav-dropdown.nav-dropdown-default li>a) */
.chicloom-site .nav-dropdown.nav-dropdown-default li > a,
.chicloom-site .nav-dropdown-default .nav-column li > a,
.chicloom-site .sub-menu li,
.chicloom-site .nav-dropdown li,
.chicloom-site .sub-menu li a,
.chicloom-site .nav-dropdown li a {
	border-bottom: none !important;
	border-top: none !important;
	box-shadow: none !important;
}
.chicloom-site .sub-menu li::before,
.chicloom-site .sub-menu li::after,
.chicloom-site .nav-dropdown li::before,
.chicloom-site .nav-dropdown li::after {
	display: none !important;
	background: none !important;
	height: 0 !important;
	border: none !important;
}

/* --- FIX: Flatsome tự chia nhiều cột từ cấp menu thứ 3 (VD: Hat > Snapback/Baseball Cap...) ---
   CSS dưới đây ép cấp 3 trở đi hiển thị dạng flyout dọc 1 cột, hover vào mới xổ ra bên cạnh */
@media (min-width: 850px) {
	#header .nav-dropdown ul.sub-menu {
		position: absolute;
		left: 100%;
		top: 0;
		background: #fff;
		width: 220px;
		padding: 0;
		display: none !important;
		box-shadow: 1px 1px 15px rgba(0,0,0,.15);
		border-top: 3px solid var(--cl-accent);
	}
	#header .nav-dropdown ul.sub-menu a {
		white-space: normal;
		margin: 0;
		padding: 10px 15px;
		border: 0;
		font-weight: 400;
	}
	#header .nav-dropdown li:hover > ul.sub-menu {
		display: block !important;
	}
	#header .nav-dropdown li {
		white-space: normal;
		width: 100%;
		display: block;
		position: relative;
	}
	#header .nav-dropdown li.menu-item-has-children > a:after {
		content: "\203A";
		float: right;
		margin-left: 8px;
	}
}

/* Nút Login/Register kiểu bo góc viền đen như ảnh mẫu */
.chicloom-site .header-extras a.button-login,
.chicloom-site a.icon-account-outline {
	border: 1px solid var(--cl-text);
	border-radius: 30px;
	padding: 8px 18px;
	font-weight: 700;
	font-size: 13px;
}

/* Ô Search Form dạng chữ nhật cố định trên header, giống Homage */
.chicloom-site .header .searchform,
.chicloom-site .header .search-form,
.chicloom-site .header form.searchform {
	background: #f2f2f2;
	border-radius: 6px;
	border: none;
	overflow: hidden;
}
.chicloom-site .header .searchform input.search-field,
.chicloom-site .header .search-form input[type="search"] {
	background: transparent;
	border: none;
	font-size: 14px;
	padding: 8px 14px;
	color: var(--cl-text);
}
.chicloom-site .header .searchform button.search-submit,
.chicloom-site .header .search-form button[type="submit"] {
	background: transparent;
	border: none;
	color: var(--cl-text);
	padding: 8px 14px;
}

/* =========================================================
   3. HERO BANNER TRANG CHỦ
   Gắn class "chicloom-hero" vào Banner/Row (UX Builder > Extra class)
   ========================================================= */
.chicloom-hero {
	position: relative;
}

/* FIX lỗi gốc của Flatsome: height:100% trên ảnh banner không tính được % vì container cha
   chỉ có padding-top (không có height trực tiếp) -> ảnh bị co về 0px. Ép cả 3 tầng lồng nhau
   (banner-inner -> banner-bg -> img) dùng inset:0 tuyệt đối, không dùng % ở tầng nào để tránh
   lặp lại lỗi dây chuyền. */
.chicloom-hero .banner-inner {
	position: absolute !important;
	inset: 0 !important;
}
.chicloom-hero .banner-layers {
	position: relative !important;
	z-index: 6 !important;
}
.chicloom-hero .banner-bg {
	position: absolute !important;
	inset: 0 !important;
}
.chicloom-hero .banner-bg img,
.chicloom-hero .banner-bg picture,
.chicloom-hero .banner-bg video {
	position: absolute !important;
	inset: 0 !important;
	object-fit: cover !important;
}
/* Overlay tối nhẹ ở TRÊN và DƯỚI ảnh (giữa trong suốt) để chữ trắng luôn nổi bật, kiểu Homage */
.chicloom-hero:before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0,0,0,.7) 0%,
		rgba(0,0,0,.15) 25%,
		rgba(0,0,0,.15) 55%,
		rgba(0,0,0,.8) 100%
	);
	z-index: 5;
	pointer-events: none;
}
.chicloom-hero .banner-inner h1,
.chicloom-hero h1 {
	font-family: var(--cl-font-heading);
	font-weight: 900;
	font-size: 56px;
	line-height: 1.05;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--cl-hero-text);
	text-shadow: 0 2px 12px rgba(0,0,0,.45);
	margin: 0;
}
/* Phòng hờ: nếu HTML dán vào có bọc thẻ <p>, xóa margin mặc định của trình duyệt để không bị đội khoảng cách */
.chicloom-hero .banner-layers p {
	margin: 0 !important;
}
.chicloom-hero .cl-cta-btn,
.chicloom-hero a.button {
	background: #ffffff !important;
	color: var(--cl-text) !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1 !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	border-radius: 0 !important;
	padding: 6px 16px !important;
	min-height: 0 !important;
	height: auto !important;
	border: none !important;
	transition: background .2s ease;
}
.chicloom-hero .cl-cta-btn:hover,
.chicloom-hero a.button:hover {
	background: #e5e5e5 !important;
}

/* Eyebrow text nhỏ phía trên headline (VD: "NEW ARRIVALS") */
.chicloom-hero .cl-hero-eyebrow {
	display: block;
	font-family: var(--cl-font-body);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #ffffff;
	opacity: .85;
	margin: 0 !important;
	padding: 0 !important;
	text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* Subtitle phía dưới headline (VD: "Your go-to, every time.") */
.chicloom-hero .cl-hero-subtitle {
	display: block;
	font-family: var(--cl-font-body);
	font-weight: 400;
	font-size: 18px;
	color: #ffffff;
	opacity: .9;
	margin: 6px 0 0 0 !important;
	padding: 0 !important;
	text-shadow: 0 1px 8px rgba(0,0,0,.4);
}

/* Đã gỡ phần ép margin/gap toàn bộ children - gây phá vỡ cơ chế canh giữa dọc (vertical centering)
   dùng margin:auto của Flatsome, khiến khối chữ bị đẩy lệch vị trí. Chỉ chỉnh riêng 2 class
   cl-hero-eyebrow / cl-hero-subtitle ở trên là đủ để giảm khoảng cách. */

/* =========================================================
   4. KHỐI "BROWSE COLLECTION" (grid danh mục lớn)
   Gắn class "chicloom-browse" cho Row/Section trong UX Builder
   ========================================================= */
.chicloom-browse .section-title,
.chicloom-browse h2 {
	text-align: center;
	font-family: var(--cl-font-heading);
	color: var(--cl-text);
	font-size: 20px;
	letter-spacing: 3px;
	text-transform: uppercase;
	position: relative;
	margin-bottom: 40px;
}
.chicloom-browse .section-title:before,
.chicloom-browse .section-title:after {
	content: "";
	display: inline-block;
	width: 60px;
	height: 1px;
	background: var(--cl-border);
	vertical-align: middle;
	margin: 0 15px;
}

.chicloom-browse .cl-category-tile {
	position: relative;
	margin-bottom: 60px;
}
.chicloom-browse .cl-category-tile img {
	width: 100%;
	display: block;
}
.chicloom-browse .cl-category-tile .cl-cat-name {
	font-family: var(--cl-font-heading);
	font-weight: 900;
	font-size: 34px;
	text-transform: uppercase;
	color: var(--cl-text);
	margin-top: 18px;
	display: inline-block;
}
.chicloom-browse .cl-category-tile .cl-cat-go {
	float: right;
	font-weight: 700;
	font-style: italic;
	text-decoration: underline;
	margin-top: 30px;
	color: var(--cl-text);
}

/* =========================================================
   5. LƯỚI SẢN PHẨM WOOCOMMERCE (shop / category page)
   ========================================================= */
.chicloom-site ul.products li.product {
	position: relative;
}
.chicloom-site ul.products li.product .onsale {
	background: var(--cl-sale);
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	border-radius: 0;
	top: 10px;
	right: 10px;
	left: auto;
	min-height: auto;
	min-width: auto;
	padding: 5px 10px;
	line-height: 1;
}
.chicloom-site ul.products li.product .product-category-label {
	text-transform: uppercase;
	font-size: 11px;
	color: var(--cl-text-muted);
	letter-spacing: 1px;
}
.chicloom-site ul.products li.product .product-title,
.chicloom-site ul.products li.product h3 {
	font-weight: 700;
	font-size: 15px;
	color: var(--cl-text);
	margin-top: 4px;
}
.chicloom-site ul.products li.product .price del {
	color: var(--cl-text-muted);
	opacity: .7;
}
.chicloom-site ul.products li.product .price ins {
	text-decoration: none;
	color: var(--cl-sale);
	font-weight: 800;
}

/* Nút "Show next" (load more) */
.chicloom-site .load-more-button,
.chicloom-site a.woocommerce-loop-more {
	border: 1px solid var(--cl-border);
	border-radius: 30px;
	padding: 10px 26px;
	font-weight: 700;
	background: #fff;
}
.chicloom-site .load-more-button:hover {
	border-color: var(--cl-accent);
	color: var(--cl-accent);
}

/* =========================================================
   6. SIDEBAR FILTER (màu / giá / collection)
   ========================================================= */
.chicloom-site .widget-title,
.chicloom-site .sidebar h4 {
	font-family: var(--cl-font-heading);
	font-weight: 800;
	text-transform: lowercase;
	font-size: 18px;
	border-bottom: 2px solid var(--cl-accent);
	display: inline-block;
	padding-bottom: 6px;
	margin-bottom: 16px;
}
.chicloom-site .price_slider_amount .button,
.chicloom-site input[type="submit"].filter-button {
	background: var(--cl-cta) !important;
	color: var(--cl-text) !important;
	border-radius: 0;
	font-weight: 700;
	border: none;
}
.chicloom-site .price_slider .ui-slider-range,
.chicloom-site .price_slider .ui-slider-handle {
	background: var(--cl-accent) !important;
	border-color: var(--cl-accent) !important;
}
.chicloom-site .woocommerce-widget-layered-nav-list__item a,
.chicloom-site .widget_layered_nav li label {
	font-size: 14px;
	color: var(--cl-text);
}

/* =========================================================
   7. FOOTER (4 cột: giới thiệu / support / policies / mailing list)
   ========================================================= */
.chicloom-site #footer {
	background: #ffffff;
	border-top: 1px solid var(--cl-border);
}
.chicloom-site #footer .footer-widgets .widget-title,
.chicloom-site #footer .footer-widgets .widgettitle,
.chicloom-site #footer .widget-title,
.chicloom-site #footer .widgettitle,
.chicloom-site #footer h2,
.chicloom-site #footer h3,
.chicloom-site #footer h4 {
	font-weight: 700 !important;
	font-size: 14px !important;
	color: var(--cl-text) !important;
	text-transform: none !important;
	border-bottom: none !important;
	margin-bottom: 16px !important;
}
.chicloom-site #footer a,
.chicloom-site #footer p,
.chicloom-site #footer li {
	color: var(--cl-text-muted);
	font-size: 13px !important;
	line-height: 1.9;
}
.chicloom-site #footer a:hover {
	color: var(--cl-accent);
}

/* Dọn sạch danh sách menu (Our Policy, Support...) - bỏ bullet, bỏ thụt lề mặc định */
.chicloom-site #footer .footer-widgets ul {
	list-style: none;
	margin: 0;
	padding: 0;
}
.chicloom-site #footer .footer-widgets ul li {
	margin: 0 0 10px 0;
	padding: 0;
}
.chicloom-site #footer .footer-widgets ul li:last-child {
	margin-bottom: 0;
}

/* Khối giới thiệu (cột 1 footer) - đảm bảo cân đối, không tràn dòng khi cột hẹp */
.chicloom-site #footer .cl-footer-about {
	max-width: 100%;
	box-sizing: border-box;
}
.chicloom-site #footer .cl-footer-about h4 {
	margin-bottom: 12px;
}
.chicloom-site #footer .cl-footer-about p {
	font-size: 13px;
	line-height: 1.7;
	color: var(--cl-text-muted);
	margin: 0 0 10px 0;
	word-wrap: break-word;
	overflow-wrap: break-word;
}
.chicloom-site #footer .cl-footer-about a {
	color: var(--cl-text);
	white-space: nowrap;
}

/* Ô nhập email + nút Subscribe */
.chicloom-site #footer .cl-newsletter-form {
	display: flex;
	align-items: stretch;
	gap: 0;
}
.chicloom-site #footer .cl-newsletter-form input[type="email"] {
	flex: 1;
	border: 1px solid var(--cl-border) !important;
	padding: 10px 14px !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	border-radius: 0 !important;
	height: auto !important;
	box-sizing: border-box;
}
.chicloom-site #footer .cl-newsletter-form button,
.chicloom-site #footer input[type="submit"].cl-subscribe-btn {
	background: var(--cl-subscribe) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 13px !important;
	line-height: 1.4 !important;
	border: none !important;
	padding: 10px 18px !important;
	border-radius: 0 !important;
	min-height: 0 !important;
	height: auto !important;
	cursor: pointer;
	white-space: nowrap;
	transition: background .2s ease;
}
.chicloom-site #footer .cl-newsletter-form button:hover,
.chicloom-site #footer input[type="submit"].cl-subscribe-btn:hover {
	background: var(--cl-subscribe-hover);
}

.chicloom-site #footer .cl-copyright {
	border-top: 1px solid var(--cl-border);
	padding-top: 20px;
	margin-top: 30px;
	font-size: 13px;
	color: var(--cl-text-muted);
}

/* =========================================================
   8. FAN CENTRAL (dải icon logo các brand/collection yêu thích)
   Gắn class "chicloom-fan-central" cho Row trong UX Builder
   ========================================================= */
.chicloom-fan-central {
	background: #ffffff;
	padding: 50px 20px;
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.chicloom-fan-central .section-title,
.chicloom-fan-central h2 {
	font-family: var(--cl-font-heading);
	font-weight: 900;
	font-size: 32px;
	margin-bottom: 6px;
	text-align: left;
}
.chicloom-fan-central .section-subtitle {
	color: var(--cl-text);
	font-size: 15px;
	margin-bottom: 30px;
	text-align: left;
}
.chicloom-fan-central .cl-fan-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
	gap: 12px;
}
@media (max-width: 650px) {
	.chicloom-fan-central .cl-fan-grid {
		grid-template-columns: repeat(4, 1fr);
		gap: 8px;
	}
}
.chicloom-fan-central .cl-fan-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 3 / 2;
	background: #f2f2f2;
	border-radius: 4px;
	transition: background .2s ease;
}
.chicloom-fan-central .cl-fan-icon:hover {
	background: #e8e8e8;
}
.chicloom-fan-central .cl-fan-icon img {
	max-width: 75%;
	max-height: 65%;
	object-fit: contain;
}
.chicloom-fan-central .cl-fan-icon a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}

/* =========================================================
   9. FEATURED COLLECTIONS (khối ảnh lớn theo chủ đề)
   Gắn class "chicloom-featured" cho Row, mỗi ô "cl-featured-item"
   ========================================================= */
.chicloom-featured .cl-featured-item {
	position: relative;
	overflow: hidden;
	margin-bottom: 20px;
}
.chicloom-featured .cl-featured-item img {
	width: 100%;
	display: block;
	transition: transform .4s ease;
}
.chicloom-featured .cl-featured-item:hover img {
	transform: scale(1.05);
}
.chicloom-featured .cl-featured-caption {
	position: absolute;
	left: 24px;
	bottom: 24px;
	color: #fff;
	text-shadow: 0 1px 6px rgba(0,0,0,.4);
}
.chicloom-featured .cl-featured-caption .cl-featured-title {
	font-family: var(--cl-font-heading);
	font-weight: 800;
	font-size: 26px;
	display: block;
}
.chicloom-featured .cl-featured-caption .cl-featured-cta {
	display: inline-block;
	margin-top: 10px;
	background: var(--cl-cta);
	color: var(--cl-text);
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	padding: 8px 18px;
}

/* =========================================================
   10. WEEKLY BEST SELLERS (carousel sản phẩm)
   Gắn class "chicloom-bestseller" cho Row chứa product carousel
   ========================================================= */
.chicloom-bestseller .section-title,
.chicloom-bestseller h2 {
	font-family: var(--cl-font-heading);
	font-weight: 800;
	font-size: 24px;
	text-align: center;
	margin-bottom: 30px;
}
.chicloom-bestseller ul.products li.product {
	text-align: left;
}
.chicloom-bestseller .flickity-prev-next-button,
.chicloom-bestseller .slider-arrow {
	background: #fff;
	border: 1px solid var(--cl-border);
	color: var(--cl-text);
}
.chicloom-bestseller .flickity-prev-next-button:hover {
	border-color: var(--cl-accent);
	color: var(--cl-accent);
}

/* =========================================================
   11. RESPONSIVE (mobile) - đảm bảo hero/grid không vỡ layout
   ========================================================= */
@media (max-width: 768px) {
	.chicloom-hero h1 { font-size: 34px; }
	.chicloom-browse .cl-category-tile .cl-cat-name { font-size: 24px; }
}

/* =========================================================
   9. PRODUCT ADDON (Acowebs) - Chuyển Radio "Style" + Select "Size"
   thành dạng nút bấm phẳng, trải hàng ngang giống Homage
   ========================================================= */

/* Tiêu đề field (Style, Size) */
.wcpa_field_wrap .wcpa_field_label {
	font-weight: 700 !important;
	font-size: 13px !important;
	text-transform: uppercase;
	letter-spacing: .5px;
	color: var(--cl-text) !important;
	display: block;
	margin-bottom: 8px !important;
	border: none !important;
	padding: 0 !important;
}

/* Đảm bảo khung ngoài field (fieldset/div) chiếm đủ 100% chiều rộng cột thông tin sản phẩm
   (khớp lề phải với hàng Quantity/Add to Cart) - áp dụng mọi kích thước màn hình */
.wcpa_field_wrap {
	width: 100% !important;
	box-sizing: border-box !important;
}
.wcpa_field_wrap .wcpa_group_field {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 6px;
	width: 100%;
}
.wcpa_field_wrap .wcpa_radio {
	margin: 0 !important;
	flex: 1 1 0;
}

/* Ẩn input radio gốc + ẩn luôn chấm tròn custom của Acowebs */
.wcpa_field_wrap .wcpa_radio input[type="radio"] {
	position: absolute;
	opacity: 0;
	width: 0;
	height: 0;
}
.wcpa_field_wrap .wcpa_radio_custom {
	display: none !important;
}

/* Label -> nút bấm chữ nhật phẳng, tự co giãn theo khung cha */
.wcpa_field_wrap .wcpa_radio label {
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-width: 78px;
	height: 40px;
	padding: 0 6px;
	border: 1px solid var(--cl-border);
	background: #fff;
	color: var(--cl-text);
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	border-radius: 0;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	margin: 0 !important;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	box-sizing: border-box;
}
.wcpa_field_wrap .wcpa_radio label:hover {
	border-color: var(--cl-text);
}

/* Trạng thái được chọn */
.wcpa_field_wrap .wcpa_radio label:has(input:checked) {
	background: var(--cl-text) !important;
	color: #fff !important;
	border-color: var(--cl-text) !important;
}

/* --- SIZE (select gốc) --- */
/* Ẩn select gốc đi (vẫn tồn tại trong DOM để Acowebs xử lý giá/logic, chỉ ẩn hình ảnh) */
.wcpa_field_wrap select.wcpa_field {
	position: absolute;
	opacity: 0;
	pointer-events: none;
	height: 0;
	width: 0;
}

/* Khối nút bấm Size do JS tự sinh ra - LUÔN 1 hàng, tự co giãn đều */
.cl-size-buttons {
	display: flex !important;
	flex-wrap: nowrap !important;
	gap: 4px !important;
	margin-top: 8px !important;
	width: 100% !important;
}
.cl-size-buttons button {
	flex: 1 1 0 !important;
	min-width: 40px !important;
	height: 40px !important;
	line-height: 40px !important;
	padding: 0 4px !important;
	margin: 0 !important;
	border: 1px solid var(--cl-border) !important;
	background: #fff !important;
	color: var(--cl-text) !important;
	font-size: 11px !important;
	font-weight: 600 !important;
	cursor: pointer !important;
	border-radius: 0 !important;
	transition: border-color .15s ease, background .15s ease, color .15s ease;
	white-space: nowrap !important;
	box-sizing: border-box !important;
	text-align: center !important;
	display: inline-block !important;
	overflow: visible !important;
	vertical-align: middle !important;
}

/* Mobile/tablet nhỏ (<=768px): khung field rộng full = ảnh sản phẩm -> nút cũng to hơn tương ứng */
@media (max-width: 768px) {
	.cl-size-buttons button {
		font-size: 12px !important;
		min-width: 56px !important;
		height: 46px !important;
		line-height: 46px !important;
		padding: 0 6px !important;
	}
	.wcpa_field_wrap .wcpa_radio label {
		font-size: 13px !important;
		min-width: 100px !important;
		height: 46px !important;
		padding: 0 8px;
	}
}

/* Màn hình rất hẹp (<=480px): giảm bớt so với tier 768px để tránh tràn ngang */
@media (max-width: 480px) {
	.cl-size-buttons button {
		font-size: 10px !important;
		min-width: 36px !important;
		height: 40px !important;
		line-height: 40px !important;
		padding: 0 2px !important;
	}
	.wcpa_field_wrap .wcpa_radio label {
		font-size: 11px !important;
		min-width: 70px !important;
		height: 40px !important;
		padding: 0 4px;
	}
}
.cl-size-buttons button:hover {
	border-color: var(--cl-text);
}
.cl-size-buttons button.is-selected {
	background: var(--cl-text) !important;
	color: #fff !important;
	border-color: var(--cl-text) !important;
}

/* Nút Add to Cart / PayPal bị khóa khi chưa chọn đủ Style + Size */
.single_add_to_cart_button.cl-locked {
	opacity: .4 !important;
	cursor: not-allowed !important;
	pointer-events: none;
}

/* Nút Add to Cart tự giãn lấp đầy phần còn lại trong hàng (cạnh ô số lượng) */
form.cart {
	display: flex !important;
	flex-wrap: wrap !important;
	align-items: stretch !important;
	gap: 10px;
}
form.cart .quantity {
	flex: 0 0 auto;
}
form.cart .single_add_to_cart_button {
	flex: 1 1 auto !important;
	width: auto !important;
}
/* === Quick View: ẩn form mua, thêm nút View Full Product === */
.product-quick-view-container form.cart,
.product-quick-view-container .ux-quantity {
    display: none !important;
}
.cl-view-full-product {
    display: block;
    width: 100%;
    text-align: center;
    padding: 14px 20px;
    margin-top: 16px;
    background: #cf2e2e;
    color: #fff !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .5px;
    text-decoration: none;
    transition: opacity .2s;
}
.cl-view-full-product:hover { opacity: .85; color: #fff !important; }
/* ===== COLOR SWATCH (cl-color-swatch) — ô màu đầy, chữ dưới, cao = Size ===== */

/* Ẩn radio + custom dot gốc */
.cl-color-swatch .wcpa_radio input[type="radio"],
.cl-color-swatch .wcpa_radio_custom {
    position:absolute !important; opacity:0 !important;
    width:0 !important; height:0 !important; margin:0 !important; pointer-events:none !important;
}

/* Vùng option -> 1 hàng, chia đều */
.cl-color-swatch .wcpa_field.wcpa_group_field {
    display:flex !important; gap:8px !important; width:100% !important; flex-wrap:nowrap !important;
}
.cl-color-swatch .wcpa_radio { flex:1 1 0 !important; min-width:0 !important; margin:0 !important; }

/* Label = cột: ô màu trên, chữ dưới */
.cl-color-swatch .wcpa_radio > label {
    display:flex !important; flex-direction:column !important; align-items:center !important;
    gap:5px !important; margin:0 !important; padding:0 !important;
    font-size:11px !important; font-weight:400 !important; cursor:pointer !important;
    text-align:center !important; line-height:1.2 !important;
}

/* Ô màu đầy, cao 40px = Size */
.cl-color-swatch .wcpa_radio > label::before {
    content:"" !important; display:block !important;
    width:100% !important; height:40px !important;
    border-radius:4px !important; border:1px solid #ddd !important;
    background:#ccc; box-sizing:border-box !important;
}

/* Trạng thái chọn: viền đậm ô màu + chữ đậm */
.cl-color-swatch .wcpa_radio > label:has(input:checked)::before {
    border:2px solid #111 !important;
}
.cl-color-swatch .wcpa_radio > label:has(input:checked) { font-weight:500 !important; }

/* ---- Gán màu theo value (Tee + Gildan) ---- */
.cl-color-swatch .wcpa_radio > label:has(input[value="Black"])::before { background:#1a1a1a !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="White"])::before { background:#f4f2ea !important; border-color:#ccc !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="Blue Jean"])::before { background:#6d8aa6 !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="Pepper"])::before { background:#4b4b4b !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="Ivory"])::before { background:#e9e2ce !important; border-color:#ccc !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="Navy"])::before { background:#1f2a44 !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="Dark Heather"])::before { background:#3f3f42 !important; }
.cl-color-swatch .wcpa_radio > label:has(input[value="Sand"])::before { background:#d9cbb0 !important; border-color:#ccc !important; }

/* ---- Responsive: giữ 1 hàng, ô cao theo Size ---- */
@media (max-width:768px) {
    .cl-color-swatch .wcpa_radio > label::before { height:46px !important; }
    .cl-color-swatch .wcpa_radio > label { font-size:10px !important; }
}
@media (max-width:480px) {
    .cl-color-swatch .wcpa_radio > label::before { height:44px !important; }
}
/* ===== FIX: chỉ ô màu được chọn đổi viền, KHÔNG bôi đen label/chữ ===== */

/* Chặn mọi style "selected" mặc định của Acowebs lên label */
.cl-color-swatch .wcpa_radio > label,
.cl-color-swatch .wcpa_radio > label:has(input:checked) {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    padding: 0 !important;
}

/* Chữ tên màu: luôn nền trong suốt, màu chữ thường, nằm ngoài ô */
.cl-color-swatch .wcpa_radio > label,
.cl-color-swatch .wcpa_radio.wcpa-selected > label,
.cl-color-swatch .wcpa_radio > label:has(input:checked) {
    background-color: transparent !important;
}

/* Khi CHỌN: chỉ ô màu (::before) hiện viền đậm + hiệu ứng nháy */
.cl-color-swatch .wcpa_radio > label:has(input:checked)::before {
    border: 2px solid #111 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111 !important;
    animation: cl-swatch-pop .2s ease !important;
}

@keyframes cl-swatch-pop {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.06); }
    100% { transform: scale(1); }
}

/* Chữ đậm nhẹ khi chọn (tùy, cho biết đang chọn) — KHÔNG đổi nền */
.cl-color-swatch .wcpa_radio > label:has(input:checked) {
    font-weight: 500 !important;
}
/* Chặn nền đen mặc định của Acowebs khi chọn (class wcpa_selected) */
.cl-color-swatch .wcpa_radio.wcpa_selected label,
.cl-color-swatch .wcpa_radio.wcpa_selected > label {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* Khi chọn: ô màu viền đậm + nháy, tên màu đậm */
.cl-color-swatch .wcpa_radio.wcpa_selected > label::before {
    border: 2px solid #111 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111 !important;
}
.cl-color-swatch .wcpa_radio.wcpa_selected > label {
    font-weight: 600 !important;
    color: #111 !important;
}
/* Ép ô màu cao đúng 40px = ô Size */
.cl-color-swatch .wcpa_radio > label::before {
    height: 40px !important;
    min-height: 40px !important;
    line-height: 40px !important;
}
.cl-color-swatch .wcpa_radio_custom { display: none !important; }
/* Sửa: bỏ line-height làm khuất chữ; chữ tên màu về bình thường */
.cl-color-swatch .wcpa_radio > label {
    line-height: 1.2 !important;
    height: auto !important;
}
.cl-color-swatch .wcpa_radio > label::before {
    line-height: normal !important;
}
/* Mobile: cho ô màu xuống nhiều hàng, chữ đủ chỗ */
@media (max-width: 480px) {
    .cl-color-swatch .wcpa_field.wcpa_group_field {
        flex-wrap: wrap !important;
    }
    .cl-color-swatch .wcpa_radio {
        flex: 1 1 30% !important;
        min-width: 30% !important;
    }
    .cl-color-swatch .wcpa_radio > label {
        height: auto !important;
        line-height: 1.2 !important;
    }
    .cl-color-swatch .wcpa_radio > label::before {
        height: 44px !important;
        min-height: 44px !important;
    }
}
/* Mobile: sửa tràn/gối ô màu — để flex tự co, trừ gap đúng */
@media (max-width: 480px) {
    .cl-color-swatch .wcpa_field.wcpa_group_field {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .cl-color-swatch .wcpa_radio {
        flex: 1 1 calc(33.333% - 6px) !important;
        min-width: calc(33.333% - 6px) !important;
        max-width: calc(33.333% - 6px) !important;
        box-sizing: border-box !important;
    }
    .cl-color-swatch .wcpa_radio > label,
    .cl-color-swatch .wcpa_radio > label::before {
        box-sizing: border-box !important;
        max-width: 100% !important;
    }
}
/* Tạo khe hở giữa ô màu để viền chọn không bị đè */
.cl-color-swatch .wcpa_field.wcpa_group_field {
    gap: 12px !important;
}
.cl-color-swatch .wcpa_radio > label::before {
    width: 90% !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
/* Ẩn select gốc của variation */
.cl-hidden-select { position:absolute!important; opacity:0!important; width:0!important; height:0!important; pointer-events:none!important; }

/* Nút Style/Size */
.cl-var-buttons { display:flex; flex-wrap:wrap; gap:8px; }
.cl-var-btn {
    flex:1 1 auto; min-width:64px; height:40px; padding:0 14px;
    border:1px solid #ddd; border-radius:4px; background:#fff;
    font-size:12px; font-weight:500; cursor:pointer; transition:border-color .15s;
}
.cl-var-btn:hover { border-color:#999; }
.cl-var-btn.cl-selected { border:2px solid #111; font-weight:600; }
.cl-var-btn.cl-disabled { opacity:.35; cursor:not-allowed; text-decoration:line-through; }

/* Nút Add-to-cart khóa */
.single_add_to_cart_button.cl-locked { opacity:.55; cursor:not-allowed; }

/* Ẩn nhãn "Choose an option" mặc định của bảng variations */
.variations .label label { font-weight:600; font-size:12px; text-transform:uppercase; }
/* === Variation buttons: chia đều hàng, gọn === */
.cl-var-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.cl-var-btn {
    flex: 1 1 calc(33.333% - 8px);
    min-width: calc(33.333% - 8px);
    max-width: 100%;
    height: 40px;
    padding: 0 8px;
    box-sizing: border-box;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* CLEAR: tách rõ, đưa xuống dưới, màu đỏ rõ */
.reset_variations {
    display: inline-block !important;
    margin-top: 10px;
    font-size: 11px;
    color: #cf2e2e !important;
    text-decoration: underline;
    text-transform: uppercase;
    letter-spacing: .5px;
    visibility: visible !important;
}
/* Ẩn nút Clear (dùng toggle click thay thế) */
.reset_variations { display: none !important; }

/* Ép table variations thành block để nút chia đều */
.variations, .variations tbody, .variations tr,
.variations th.label, .variations td.value { display: block; width: 100%; }
.variations tr { margin-bottom: 12px; }
.variations th.label { padding-bottom: 4px; }

/* Nút variation chia đều hàng */
.cl-var-buttons { display: flex; flex-wrap: wrap; gap: 6px; width: 100%; }
.cl-var-btn {
    height: 40px; box-sizing: border-box;
    white-space: nowrap; font-size: 12px;
}
/* Style: 3 nút / hàng */
#pa_style ~ .cl-var-buttons .cl-var-btn {
    flex: 1 1 calc(33.333% - 6px);
    max-width: calc(33.333% - 6px);
    padding: 0 6px;
}
/* Size: 6 nút / hàng */
#pa_size ~ .cl-var-buttons .cl-var-btn {
    flex: 1 1 calc(16.666% - 6px);
    max-width: calc(16.666% - 6px);
    padding: 0 2px;
}
/* Color: 1 option -> full width */
#pa_color ~ .cl-var-buttons .cl-var-btn { flex: 1 1 100%; }
/* Nhắm nút theo hàng thứ tự trong table.variations */
/* Hàng 1 = Style, hàng 2 = Color, hàng 3 = Size */

/* Mặc định mọi nút */
.cl-var-btn { flex: 0 1 auto; }

/* Style (hàng 1): 3 nút/hàng */
.variations tr:nth-of-type(1) .cl-var-btn {
    flex: 1 1 calc(33.333% - 6px) !important;
    max-width: calc(33.333% - 6px) !important;
    padding: 0 6px !important;
}
/* Color (hàng 2): full width */
.variations tr:nth-of-type(2) .cl-var-btn {
    flex: 1 1 100% !important;
}
/* Size (hàng 3): 6 nút/hàng */
.variations tr:nth-of-type(3) .cl-var-btn {
    flex: 1 1 calc(16.666% - 6px) !important;
    max-width: calc(16.666% - 6px) !important;
    padding: 0 2px !important;
    font-size: 11px !important;
}
/* PHÁ table variations triệt để */
form.variations_form table.variations,
form.variations_form table.variations tbody,
form.variations_form table.variations tr,
form.variations_form table.variations td.value {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
}
form.variations_form table.variations th.label {
    display: block !important;
    width: 100% !important;
    text-align: left !important;
    padding: 0 0 4px 0 !important;
}

/* Container nút: full width */
.cl-var-buttons {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
    width: 100% !important;
    max-width: 100% !important;
}

/* Style + Color + Size: mọi nút mặc định */
.cl-var-btn {
    height: 40px !important;
    box-sizing: border-box !important;
    white-space: nowrap !important;
    margin: 0 !important;
}

/* Style (tr 1): 3 nút/hàng */
.variations tr:nth-of-type(1) .cl-var-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
}
/* Color (tr 2): full */
.variations tr:nth-of-type(2) .cl-var-btn {
    flex: 1 1 100% !important;
}
/* Size (tr 3): 6 nút/hàng */
.variations tr:nth-of-type(3) .cl-var-btn {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    font-size: 11px !important;
    padding: 0 2px !important;
}
/* === Color swatch cho variation === */
/* Nút màu: ô màu đầy + tên dưới, giống swatch cũ */
.variations tr:nth-of-type(2) .cl-var-btn {
    position: relative !important;
    height: auto !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 5px !important;
    font-size: 11px !important;
    flex: 0 1 auto !important;
    min-width: 90px !important;
    max-width: 120px !important;
}
/* Ô màu (::before) */
.variations tr:nth-of-type(2) .cl-var-btn::before {
    content: "" !important;
    display: block !important;
    width: 100% !important;
    height: 40px !important;
    border-radius: 4px !important;
    border: 1px solid #ddd !important;
    background: #ccc;
    box-sizing: border-box !important;
}
/* Chọn: viền đậm ô màu, tên đậm */
.variations tr:nth-of-type(2) .cl-var-btn.cl-selected::before {
    border: 2px solid #111 !important;
    box-shadow: 0 0 0 2px #fff, 0 0 0 3px #111 !important;
}
.variations tr:nth-of-type(2) .cl-var-btn.cl-selected {
    font-weight: 600 !important;
}

/* Map màu theo data-color (slug variation, viết thường) */
.cl-var-btn[data-color="black"]::before { background:#1a1a1a !important; }
.cl-var-btn[data-color="white"]::before { background:#f4f2ea !important; border-color:#ccc !important; }
.cl-var-btn[data-color="charcoal"]::before { background:#4b4b4b !important; }
.cl-var-btn[data-color="navy"]::before { background:#1f2a44 !important; }
.cl-var-btn[data-color="red"]::before { background:#c0392b !important; }
.cl-var-btn[data-color="royal-blue"]::before { background:#2c4a9e !important; }
.cl-var-btn[data-color="gold"]::before { background:#d4a017 !important; }
.cl-var-btn[data-color="orange"]::before { background:#e07b2c !important; }
.cl-var-btn[data-color="purple"]::before { background:#5b3a8e !important; }
.cl-var-btn[data-color="forest-green"]::before { background:#2c4a34 !important; }
.cl-var-btn[data-color="sport-grey"]::before { background:#a8a9ad !important; }
.cl-var-btn[data-color="maroon"]::before { background:#6d2530 !important; }
/* Ô màu: cố định 1/6 hàng, không giãn */
.variations tr:nth-of-type(2) .cl-var-btn {
    flex: 0 0 calc(16.666% - 6px) !important;
    max-width: calc(16.666% - 6px) !important;
    min-width: 0 !important;
    text-decoration: none !important;   /* bỏ underline chữ */
    border-bottom: 0 !important;         /* bỏ gạch chân nếu có */
}

/* Trạng thái chọn: viền đậm quanh ô, KHÔNG gạch chân */
.variations tr:nth-of-type(2) .cl-var-btn.cl-selected::before {
    border: 2px solid #111 !important;
    box-shadow: none !important;   /* bỏ box-shadow tạo cảm giác gạch */
    outline: 2px solid #111 !important;
    outline-offset: 1px !important;
}
.variations tr:nth-of-type(2) .cl-var-btn.cl-selected {
    text-decoration: none !important;
    font-weight: 600 !important;
}

/* Mobile: 1/4 hàng */
@media (max-width: 480px) {
    .variations tr:nth-of-type(2) .cl-var-btn {
        flex: 0 0 calc(25% - 6px) !important;
        max-width: calc(25% - 6px) !important;
    }
}
/* Tên màu: 1 dòng, thu nhỏ vừa ô, không cắt */
.variations tr:nth-of-type(2) .cl-var-btn {
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 9px !important;
    letter-spacing: -0.2px !important;
    text-align: center !important;
    line-height: 1.2 !important;
}