@charset "UTF-8";
/**
 * CLAUDE — giao diện thời trang.
 *
 * Nạp sau flatsome.css và style.css của child theme. Toàn bộ khối trang chủ dựng
 * bằng element sẵn có của Flatsome/WooCommerce; file này chỉ chứa phần mà tuỳ chọn
 * Customizer và class tiện ích không diễn đạt được.
 */

/* ==========================================================================
   1. Token
   ========================================================================== */

:root {
	--cl-accent: var(--fs-color-primary, #111111);
	--cl-accent-dark: #000000;
	--cl-tan: var(--fs-color-secondary, #b39b7d);
	--cl-tan-soft: #e7ddce;
	--cl-sand: #f5f1ea;
	--cl-sand-deep: #ebe4d9;
	--cl-bg: #ffffff;
	--cl-ink: #111111;
	--cl-body: #5a5a5a;
	--cl-muted: #8c8c8c;
	--cl-line: #e7e3dd;
	--cl-line-soft: #f0ece6;
	--cl-blue: #0068ff;
	--cl-star: #e8a33d;
	--cl-card: #ffffff;
	--cl-radius: 2px;
	--cl-tracking: 0.08em;
	/* Font chữ nhấn: cùng họ với tuỳ chọn "Alternative font" trong Customizer
	   (Playfair Display) — khai báo ở đây để có sẵn biến dùng trong clamp(). */
	--cl-serif: "Playfair Display", Georgia, "Times New Roman", serif;
	--cl-check: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E");
}

body {
	background-color: var(--cl-bg);
	color: var(--cl-body);
}

/* Chữ trong nội dung dễ đọc hơn mặc định của Flatsome. */
body,
.entry-content,
p {
	line-height: 1.7;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	letter-spacing: -0.005em;
}

/* --- Nút: khối chữ nhật, chữ hoa dãn đều, không bo góc ------------------- */

.button,
button,
input[type="submit"],
input[type="button"] {
	letter-spacing: var(--cl-tracking);
	font-weight: 600;
}

.button.is-outline,
.button.is-link {
	font-weight: 600;
}

/* Nút chính: nền đen, viền đen, hover đảo màu. */
.cl-btn.button,
.button.cl-btn {
	background-color: var(--cl-ink);
	border: 1px solid var(--cl-ink);
	color: #fff;
	min-height: 0;
	line-height: 1.2;
	padding: 15px 34px;
	margin: 0;
	font-size: 0.8rem;
}

.cl-btn.button:hover,
.button.cl-btn:hover {
	background-color: transparent;
	color: var(--cl-ink);
}

/* Nút phụ: viền mảnh, nền trong. */
.cl-btn--ghost.button,
.button.cl-btn--ghost {
	background-color: transparent;
	border: 1px solid var(--cl-ink);
	color: var(--cl-ink);
}

.cl-btn--ghost.button:hover,
.button.cl-btn--ghost:hover {
	background-color: var(--cl-ink);
	color: #fff;
}

/* Bản trên nền tối. */
.cl-btn--light.button,
.button.cl-btn--light {
	background-color: #fff;
	border-color: #fff;
	color: var(--cl-ink);
}

.cl-btn--light.button:hover,
.button.cl-btn--light:hover {
	background-color: transparent;
	color: #fff;
}

/* ==========================================================================
   2. Icon chrome — file .svg + CSS mask nên ăn theo màu chữ
   ========================================================================== */

.cl-i {
	display: inline-block;
	width: 1em;
	height: 1em;
	flex: none;
	vertical-align: -0.14em;
	background-color: currentColor;
	-webkit-mask: var(--cl-icon) center/contain no-repeat;
	mask: var(--cl-icon) center/contain no-repeat;
}

.cl-i-leaf {
	--cl-icon: url("../icons/leaf.svg");
}

.cl-i-truck {
	--cl-icon: url("../icons/truck.svg");
}

.cl-i-gift {
	--cl-icon: url("../icons/gift.svg");
}

.cl-i-headset {
	--cl-icon: url("../icons/headset.svg");
}

.cl-i-pin {
	--cl-icon: url("../icons/pin.svg");
}

.cl-i-phone {
	--cl-icon: url("../icons/phone.svg");
}

.cl-i-mail {
	--cl-icon: url("../icons/mail.svg");
}

.cl-i-globe {
	--cl-icon: url("../icons/globe.svg");
}

.cl-i-arrow-right {
	--cl-icon: url("../icons/arrow-right.svg");
}

.cl-i-return {
	--cl-icon: url("../icons/return.svg");
}

.cl-i-shield {
	--cl-icon: url("../icons/shield.svg");
}

.cl-i-cart-outline {
	--cl-icon: url("../icons/cart-outline.svg");
}

.cl-i-search {
	--cl-icon: url("../icons/search.svg");
}

.cl-i-fabric {
	--cl-icon: url("../icons/fabric.svg");
}

.cl-i-design {
	--cl-icon: url("../icons/design.svg");
}

.cl-i-scissors {
	--cl-icon: url("../icons/scissors.svg");
}

.cl-i-tag {
	--cl-icon: url("../icons/tag.svg");
}

.cl-i-clock {
	--cl-icon: url("../icons/clock.svg");
}

.cl-i-bag {
	--cl-icon: url("../icons/bag.svg");
}

.cl-i-user {
	--cl-icon: url("../icons/user.svg");
}

.cl-i-heart {
	--cl-icon: url("../icons/heart.svg");
}

.cl-i-store {
	--cl-icon: url("../icons/store.svg");
}

.cl-i-ruler {
	--cl-icon: url("../icons/ruler.svg");
}

.cl-i-check {
	--cl-icon: url("../icons/check.svg");
}

.cl-i-chevron-down {
	--cl-icon: url("../icons/chevron-down.svg");
}

/* Logo Zalo nhiều màu: mask chỉ giữ kênh alpha nên phải dùng background-image. */
.cl-i-zalo {
	-webkit-mask-image: none;
	mask-image: none;
	background-color: transparent;
	background: url("../icons/zalo.svg") center/contain no-repeat;
}

/* ==========================================================================
   3. Header
   ========================================================================== */

/* --- 3.1 Thanh trên cùng ------------------------------------------------- */

#top-bar {
	font-size: 0.9em;
	letter-spacing: 0.01em;
}

/* Flatsome đặt `.nav > li.html { font-size: .75em }` nên cỡ chữ khai ở #top-bar
   bị nhân thêm 0.75 — phải trả ô HTML về 1em thì con số trên mới đúng. */
#top-bar .nav>li.html {
	font-size: .9em;
}

#top-bar .flex-col {
	min-height: 0;
}

#top-bar .cl-topbar,
#top-bar .cl-topbar a {
	color: rgba(255, 255, 255, 0.86);
}

#top-bar .cl-topbar a:hover {
	color: #fff;
	text-decoration: underline;
}

#top-bar .cl-topbar__sep {
	display: inline-block;
	margin: 0 16px;
	color: rgba(255, 255, 255, 0.32);
}

/* --- 3.2 Thanh chính ----------------------------------------------------- */

.header-main {
	border-bottom: 1px solid var(--cl-line-soft);
}

.header-wrapper.stuck .header-main {
	box-shadow: 0 1px 14px rgba(0, 0, 0, 0.06);
}

/* Logo trái, menu canh giữa phần còn lại, icon phải — Flatsome không có tuỳ chọn
   canh giữa menu ở thanh chính nên phải làm bằng CSS. */
.header-main .header-nav-main.nav-left {
	justify-content: center;
}

#logo img {
	max-height: 62px;
}

/* Khi header dính lại, function-custom-css.php ép logo cao bằng ĐÚNG chiều cao
   thanh (`.stuck #logo img{max-height:70px!important}` in ở wp_head priority 100)
   nên chữ chạm sát mép trên dưới. Hạ xuống để còn 8px thở mỗi bên — buộc dùng
   !important vì luật kia cũng !important và nằm sau file này. */
.stuck .header-main #logo img {
	max-height: 54px !important;
}

/* Trên điện thoại logo cao gần bằng cả thanh header nên dính sát mép trên dưới. */
@media (max-width: 849px) {

	.header-main #logo {
		padding: 8px 0;
	}

	/* function-custom-css.php in `.stuck #logo img{max-height:70px!important}` ở
	   wp_head priority 100 — sau file này và có !important, nên không thể thắng
	   bằng specificity. Logo 64px + padding 8px vượt thanh sticky 70px và tràn
	   xuống dưới. Đây là trường hợp buộc phải dùng !important. */
	.header-main #logo img,
	.stuck .header-main #logo img {
		max-height: 46px !important;
	}
}

/* Chỉ menu chính, KHÔNG phải .nav chung: cùng mang class "nav" còn có nhóm icon
   bên phải và thanh mobile — nới 25px ở đó là đẩy toác header điện thoại.
   Đè `.nav > li { margin: 0 7px }` của flatsome.css (0,1,1). */
.header-main .header-nav-main>li {
	margin: 0 25px;
}

.header-main .header-nav-main>li>a {
	font-size: 0.84rem;
	letter-spacing: 0.09em;
	font-weight: 500;
	color: var(--cl-ink);
}

.header-main .header-nav-main>li>a:hover,
.header-main .header-nav-main>li.current-menu-item>a,
.header-main .header-nav-main>li.current-menu-parent>a {
	color: var(--cl-ink);
}

/* Gạch chân mảnh chạy ra khi rê chuột.
   Neo theo tâm chữ (top 50% + margin-top) chứ không theo đáy hộp: chiều cao thẻ
   <a> đổi khi header dính lại (sticky shrink) nên bottom cố định sẽ trôi lên
   trôi xuống. Chỉ dùng ::after — ::before của .nav>li>a là của Flatsome. */
.header-main .header-nav-main>li>a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	margin-top: 0.72em;
	height: 1px;
	background: var(--cl-ink);
	transform: scaleX(0);
	transform-origin: center;
	transition: transform 0.28s ease;
}

/* Mục có menu con kèm mũi tên: chừa mũi tên ra khỏi gạch chân. */
.header-main .header-nav-main>li.has-dropdown>a::after {
	right: 14px;
}

.header-main .header-nav-main>li>a:hover::after,
.header-main .header-nav-main>li.current-menu-item>a::after,
.header-main .header-nav-main>li.current-menu-parent>a::after {
	transform: scaleX(1);
}

/* Nhóm icon bên phải cũng nằm trong <ul class="header-nav-main"> nên dính luôn
   25px ở trên, trong khi account/cart chỉ có 2px — ba icon lệch nhau. Chốt lại
   một giá trị chung, đặt SAU luật menu chính để thắng ở cùng hạng (0,2,1). */
.header-main .nav-right>li {
	margin: 0 4px;
}

/* --- 3.3 Nhóm icon bên phải ---------------------------------------------- */

/* Ép ba icon về cùng một hộp 22px để chúng cân nhau bất kể glyph gốc to nhỏ. */
.header-main .nav-right>li>a {
	padding-left: 10px;
	padding-right: 10px;
	color: var(--cl-ink);
}

.header-main .nav-right>li>a::after {
	display: none;
}

.header-main .nav-right .icon-search,
.header-main .nav-right .icon-user,
.header-main .nav-right .header-cart-link>i {
	font-size: 0;
	display: inline-block;
	width: 22px;
	height: 22px;
	line-height: 22px;
	vertical-align: middle;
}

.header-main .nav-right .icon-search::before,
.header-main .nav-right .icon-user::before,
.header-main .nav-right .header-cart-link>i::before {
	content: "";
	display: block;
	width: 22px;
	height: 22px;
	background-color: currentColor;
	-webkit-mask: var(--cl-icon) center/contain no-repeat;
	mask: var(--cl-icon) center/contain no-repeat;
}

.header-main .nav-right .icon-search::before {
	--cl-icon: url("../icons/search.svg");
}

.header-main .nav-right .icon-user::before {
	--cl-icon: url("../icons/user.svg");
}

.header-main .nav-right .header-cart-link>i::before {
	--cl-icon: url("../icons/bag.svg");
}

/* Bong bóng số lượng do Flatsome vẽ ở [data-icon-label]::after — không mask thẻ
   <i> (mask cắt luôn ::after) mà chỉ mask ::before ở trên. */
.header-main .nav-right [data-icon-label]::after {
	background-color: var(--cl-ink);
	color: #fff;
	font-size: 10px;
	font-weight: 600;
	min-width: 17px;
	height: 17px;
	line-height: 17px;
	top: -7px;
	right: -9px;
}

/* --- 3.4 Menu di động ---------------------------------------------------- */

.header-mobile .nav>li>a {
	color: var(--cl-ink);
}

.mfp-content .off-canvas-left .sidebar-menu,
.off-canvas-left .mfp-content {
	background-color: #fff;
}

.off-canvas .nav-sidebar.nav-vertical>li>a {
	font-size: 0.9rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	font-weight: 500;
	color: var(--cl-ink);
}

/* --- 3.5 Header theo từng cỡ màn ----------------------------------------- */

@media (max-width: 849px) {
	#logo img {
		max-height: 46px;
	}

	.header-main .nav-right .icon-search::before,
	.header-main .nav-right .icon-user::before,
	.header-main .nav-right .header-cart-link>i::before {
		width: 21px;
		height: 21px;
	}
}

/* ==========================================================================
   4. Ô tìm kiếm (lightbox ở header + widget) — cùng markup .searchform-wrapper
   ========================================================================== */

.searchform-wrapper .search-field,
.searchform-wrapper input[type="search"] {
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background: #fff;
	height: 52px;
	padding: 0 16px;
	font-size: 0.95rem;
	box-shadow: none;
}

.searchform-wrapper .search-field:focus {
	border-color: var(--cl-ink);
	box-shadow: none;
}

.searchform-wrapper .submit-button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 54px;
	min-width: 54px;
	height: 52px;
	min-height: 52px;
	margin: 0;
	padding: 0;
	background: var(--cl-ink);
	border: 1px solid var(--cl-ink);
	border-radius: 0;
	color: #fff;
	line-height: 1;
}

/* Không đặt font-size:0 lên nút: flatsome.css có .searchform .button.icon i
   {font-size:1.2em} ở (0,3,1) — cao hơn mọi cách viết gọn ở đây — nên icon sẽ
   thành 0px theo em. Cứ để nút giữ cỡ chữ gốc rồi chốt cỡ icon. */
.searchform-wrapper .submit-button.button.icon i,
.searchform-wrapper .submit-button svg {
	width: 18px;
	height: 18px;
	margin: 0;
	font-size: 18px;
	line-height: 1;
}

.searchform-wrapper .submit-button:hover {
	background: var(--cl-accent-dark);
}

.mfp-content #search-lightbox {
	background: #fff;
	padding: 42px 32px;
}

/* --- 4.1 Danh sách gợi ý của live search --------------------------------- */

/* Khung lightbox đặt cỡ chữ 1.5em, .is-large nhân thêm 1.15 → 27.6px, và danh
   sách kết quả thừa kế nguyên cỡ đó: tên sản phẩm 27.6px xuống hai dòng, padding
   khai bằng em nên cũng phình theo. Phải chốt lại font-size ngay ở gốc danh sách. */
.live-search-results {
	font-size: 0.9rem;
	line-height: 1.5;
}

.live-search-results .autocomplete-suggestions,
.autocomplete-suggestions {
	max-height: 60vh;
	overflow-y: auto;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background: #fff;
	box-shadow: 0 14px 34px rgba(17, 17, 17, 0.1);
}

.autocomplete-suggestion {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 10px 14px;
	border-bottom: 1px solid var(--cl-line-soft);
	cursor: pointer;
	transition: background-color 0.18s ease;
}

.autocomplete-suggestion:last-child {
	border-bottom: 0;
}

.autocomplete-suggestion:hover,
.autocomplete-suggestion.selected {
	background: var(--cl-sand);
}

.autocomplete-suggestion .search-image {
	flex: none;
	width: 46px;
	height: 61px;
	margin: 0;
	object-fit: cover;
	background: var(--cl-sand);
}

.autocomplete-suggestion .search-name {
	flex: 1 1 auto;
	min-width: 0;
	font-size: 0.9rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--cl-ink);
}

/* Phần khớp từ khoá được bọc <strong> — làm đậm vừa phải, không đổi màu. */
.autocomplete-suggestion .search-name strong {
	font-weight: 600;
}

/* Lightbox tìm kiếm nằm trong khung .dark của Flatsome nên .amount bị tô trắng —
   chữ trắng trên nền trắng, giá biến mất. Phải chốt màu ở chính .amount/bdi chứ
   không chỉ ở thẻ bọc. */
.autocomplete-suggestion .search-price,
.autocomplete-suggestion .search-price .amount,
.autocomplete-suggestion .search-price bdi {
	flex: none;
	margin-left: auto;
	font-size: 0.88rem;
	font-weight: 600;
	line-height: 1.4;
	white-space: nowrap;
	color: var(--cl-tan);
}

.autocomplete-suggestion .search-price del,
.autocomplete-suggestion .search-price del .amount,
.autocomplete-suggestion .search-price del bdi {
	margin-right: 6px;
	font-size: 0.78rem;
	font-weight: 400;
	color: var(--cl-muted);
}

.autocomplete-suggestion .search-price ins {
	text-decoration: none;
}

/* Dòng "không có kết quả" của Flatsome. */
.autocomplete-suggestion.no-results,
.live-search-results .no-results {
	justify-content: center;
	padding: 18px 14px;
	color: var(--cl-muted);
	cursor: default;
}

/* ==========================================================================
   5. Tiêu đề khối — tận dụng cấu trúc <b><span><b><a> của [title]
   ========================================================================== */

/* [title] tự gắn class .container nên bên trong cột sẽ thừa 15px padding và bị
   giới hạn bề ngang; gỡ cả hai rồi mới canh được theo lưới. */
.cl-title.section-title-container {
	max-width: none;
	padding: 0;
	margin: 0 0 30px;
}

.cl-title.section-title,
.cl-title .section-title {
	border: 0;
	margin: 0;
	position: relative;
	display: flex;
	align-items: center;
}

.cl-title .section-title b {
	display: none;
}

.cl-title .section-title span {
	border: 0;
	padding: 0;
	margin: 0;
	font-size: 1.55rem;
	line-height: 1.25;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-transform: uppercase;
	color: var(--cl-ink);
}

/* Liên kết "Xem tất cả": title_shortcode() in thẳng <a> làm con của <h2>, không
   có class riêng — phải nhắm qua tổ hợp con trực tiếp. */
.cl-title .section-title>a {
	margin-left: auto;
	font-size: 0.76rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	font-weight: 600;
	color: var(--cl-ink);
	border-bottom: 1px solid var(--cl-ink);
	padding-bottom: 2px;
	white-space: nowrap;
	line-height: 1.4;
}

/* Flatsome nối sẵn một icon mũi tên vào cuối link. */
.cl-title .section-title>a i {
	display: none;
}

.cl-title .section-title>a:hover {
	color: var(--cl-tan);
	border-color: var(--cl-tan);
}

/* Canh giữa: tiêu đề ở đúng giữa hàng, link vẫn nằm sát mép phải. */
.cl-title--center .section-title {
	justify-content: center;
	text-align: center;
}

.cl-title--center .section-title-main {
	margin: 0 auto;
}

.cl-title--center .section-title>a {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	margin-left: 0;
}

.cl-title--left .section-title {
	justify-content: flex-start;
}

.cl-title__sub {
	max-width: 640px;
	margin: -18px auto 32px;
	text-align: center;
	color: var(--cl-muted);
	font-size: 0.95rem;
}

.cl-title--left+.cl-title__sub {
	margin-left: 0;
	text-align: left;
}

/* Trên nền tối ([section dark]) mọi chữ của tiêu đề phải đảo sang trắng. */
.dark .cl-title .section-title span,
.dark .cl-title .section-title>a,
.dark .cl-page-hero__title .section-title span {
	color: #fff;
}

.dark .cl-title .section-title>a {
	border-color: #fff;
}

.dark .cl-title__sub,
.dark .cl-store-lead,
.dark .cl-collection-lead,
.dark .cl-step__desc {
	color: rgba(255, 255, 255, 0.78);
}

/* Nhịp dọc chung giữa các khối trang chủ. */
.cl-sec {
	padding-top: 58px;
	padding-bottom: 58px;
}

.cl-sec--tight {
	padding-top: 44px;
	padding-bottom: 44px;
}

.cl-sec--sand {
	background-color: var(--cl-sand);
}

/* ==========================================================================
   6. Banner đầu trang chủ ([ux_slider] > [ux_image])
   ========================================================================== */

/* Ảnh banner để dạng [ux_image] để chỉnh chiều cao ngay trong UX Builder bằng ô
   Height của phần tử Image (nó in padding-top % + .image-cover). Vì vậy KHÔNG
   đặt height ở đây — đặt là vô hiệu hoá luôn tuỳ chọn đó. */
.cl-hero {
	background-color: var(--cl-sand);
}

.cl-hero .img,
.cl-hero .img-inner {
	margin: 0;
}

.cl-hero .img img {
	display: block;
	width: 100%;
}

/* Chấm điều hướng: dạng tròn nhỏ, nằm trong ảnh. */
.cl-hero .flickity-page-dots {
	bottom: 22px;
}

.cl-hero .flickity-page-dots .dot {
	width: 9px;
	height: 9px;
	border: 1px solid var(--cl-ink);
	background: transparent;
	opacity: 0.55;
	margin: 0 5px;
}

.cl-hero .flickity-page-dots .dot.is-selected {
	background: var(--cl-ink);
	opacity: 1;
}

/* ==========================================================================
   7. Dải cam kết ([featured_box] — Icon Box)
   ========================================================================== */

/* Icon nét mảnh vẽ bằng stroke: Flatsome ép `.icon-box-img svg path{fill:currentColor}`
   (0,1,2) và CSS luôn thắng thuộc tính fill="none" trên thẻ, nên phải trả lại. */
.icon-box-img svg[stroke="currentColor"],
.icon-box-img svg[stroke="currentColor"] path,
.icon-box-img svg[stroke="currentColor"] circle,
.icon-box-img svg[stroke="currentColor"] rect,
.icon-box-img svg[stroke="currentColor"] polyline {
	fill: none;
	stroke: currentColor;
}

.cl-usp {
	border-bottom: 1px solid var(--cl-line-soft);
}

.cl-usp .row>.col {
	padding-bottom: 0;
	position: relative;
}

/* Vạch ngăn mảnh giữa các cột, chỉ từ máy tính bảng trở lên. */
@media (min-width: 550px) {
	.cl-usp .row>.col+.col::before {
		content: "";
		position: absolute;
		left: 0;
		top: 8px;
		bottom: 8px;
		width: 1px;
		background: var(--cl-line-soft);
	}
}

.cl-usp .icon-box {
	text-align: center;
}

.cl-usp .icon-box-img {
	margin: 0 auto 14px;
	color: var(--cl-ink);
}

.cl-usp .icon-box-img svg {
	width: 34px;
	height: 34px;
	stroke: var(--cl-ink);
}

.cl-usp .icon-box-text {
	padding: 0;
}

.cl-usp .icon-box-text h5 {
	font-size: 0.92rem;
	font-weight: 600;
	letter-spacing: 0.01em;
	color: var(--cl-ink);
	margin-bottom: 4px;
	text-transform: none;
}

.cl-usp .icon-box-text p {
	font-size: 0.86rem;
	color: var(--cl-muted);
	margin: 0;
}

/* ==========================================================================
   8. Danh mục sản phẩm ([ux_product_categories] style="normal")
   ========================================================================== */

.cl-cats .box-category .box-image {
	background: var(--cl-sand);
	overflow: hidden;
}

.cl-cats .box-category img {
	transition: transform 0.6s ease;
}

.cl-cats .box-category:hover img {
	transform: scale(1.04);
}

.cl-cats .box-text {
	padding: 16px 4px 0;
}

.cl-cats .box-text .header-title {
	font-size: 0.9rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	color: var(--cl-ink);
	margin: 0 0 5px;
}

.cl-cats .box-text .count {
	font-size: 0.82rem;
	letter-spacing: 0;
	text-transform: none;
	color: var(--cl-muted);
	margin: 0;
	opacity: 1;
}

/* ==========================================================================
   9. Vì sao chọn CLAUDE
   ========================================================================== */

.cl-why {
	background-color: var(--cl-bg);
	border-top: 1px solid var(--cl-line-soft);
}

.cl-why__figure>.col-inner {
	overflow: hidden;
}

.cl-why__list .icon-box {
	align-items: flex-start;
	margin-bottom: 26px;
}

.cl-why__list .icon-box:last-child {
	margin-bottom: 0;
}

/* Vòng tròn viền mảnh bọc icon. */
.cl-why__list .icon-box-img {
	width: 44px !important;
	height: 44px;
	border: 1px solid var(--cl-line);
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--cl-ink);
	margin: 0;
}

/* SVG là inline nên nó ngồi trên baseline của một line box cao 27px: hộp thì
   được flex căn giữa nhưng glyph lệch lên ~8px. Ép cả chuỗi về block/line-height 0. */
.cl-why__list .icon-box-img .icon,
.cl-why__list .icon-box-img .icon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.cl-why__list .icon-box-img svg {
	display: block;
	width: 21px;
	height: 21px;
	padding: 0;
	stroke: var(--cl-ink);
}

/* .icon-box-left .icon-box-text có padding-left 1rem ở specificity (0,3,0) —
   phải chọn đủ mạnh mới ghi đè được. */
.cl-why__list .icon-box.icon-box-left .icon-box-text {
	padding-left: 18px;
	flex: 1 1 auto;
}

.cl-why__list .icon-box-text h5 {
	font-size: 0.95rem;
	font-weight: 700;
	color: var(--cl-ink);
	margin: 0 0 5px;
	text-transform: none;
	letter-spacing: 0;
}

.cl-why__list .icon-box-text p {
	font-size: 0.9rem;
	color: var(--cl-body);
	margin: 0;
}

/* Thẻ chất liệu bên phải: ảnh trên, hộp chú thích nền xám bên dưới. */
.cl-why__fabric .box-image {
	overflow: hidden;
}

.cl-why__fabric .box-text {
	background: var(--cl-sand);
	padding: 20px 16px;
	text-align: center;
}

.cl-why__fabric .box-text h5,
.cl-why__fabric .box-text strong {
	display: block;
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: var(--cl-ink);
	margin: 0 0 6px;
}

.cl-why__fabric .box-text p,
.cl-why__fabric .box-text span {
	display: block;
	font-size: 0.85rem;
	color: var(--cl-body);
	margin: 0;
}

/* <strong> đã là block và có margin-bottom nên thẻ <br> đứng sau chỉ tạo thêm
   một dòng trống 23px, đẩy hai dòng chữ cách nhau tới 29px. */
.cl-why__fabric .box-text br {
	display: none;
}

/* ==========================================================================
   10. Thẻ sản phẩm (.product-small) — dùng chung cho [ux_products], trang danh
   mục và sản phẩm liên quan nên chỉ định nghĩa một lần ở đây.
   ========================================================================== */

.product-small .box-image {
	background: var(--cl-sand);
	overflow: hidden;
}

.product-small .box-image img {
	transition: transform 0.7s ease;
}

.product-small:hover .box-image img {
	transform: scale(1.05);
}

.product-small .box-text {
	padding: 15px 4px 0;
	text-align: center;
}

.product-small .name.product-title {
	font-size: 0.92rem;
	font-weight: 400;
	line-height: 1.5;
	margin: 0 0 6px;
	text-transform: none;
	letter-spacing: 0;
}

.product-small .name.product-title a {
	color: #333;
}

.product-small .name.product-title a:hover {
	color: var(--cl-ink);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.product-small .price-wrapper .price {
	display: flex;
	align-items: baseline;
	justify-content: center;
	gap: 9px;
	font-size: 0.95rem;
}

.product-small .price ins,
.product-small .price>.amount,
.product-small .price bdi {
	font-weight: 600;
	color: var(--cl-ink);
	text-decoration: none;
}

.product-small .price del,
.product-small .price del bdi {
	font-weight: 400;
	color: #a5a5a5;
	font-size: 0.88em;
	opacity: 1;
}

/* Nút chỉ hiện khi rê chuột — thiết kế giữ thẻ sạch ở trạng thái nghỉ.
   Đặt tuyệt đối với bottom:100% so với .box-text, tức nằm ngay TRÊN .box-text =
   phủ lên đáy ảnh. Nếu để trong dòng, nút hiện ra làm thẻ cao thêm và đè xuống
   hàng sản phẩm bên dưới (thấy rõ ở lưới type="row"). */
.product-small .box-text {
	position: relative;
}

.product-small .add-to-cart-button {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 100%;
	z-index: 2;
	margin: 0;
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
}

.product-small:hover .add-to-cart-button,
.product-small:focus-within .add-to-cart-button {
	opacity: 1;
	pointer-events: auto;
	transform: none;
}

.product-small .add-to-cart-button .button {
	background: var(--cl-ink);
	border-color: var(--cl-ink);
	color: #fff;
	font-size: 0.72rem;
	letter-spacing: 0.1em;
	min-height: 0;
	line-height: 1.2;
	padding: 11px 20px;
	margin: 0;
	width: 100%;
}

.product-small .add-to-cart-button .button:hover {
	background: transparent;
	color: var(--cl-ink);
}

/* Máy cảm ứng không có trạng thái hover — hiện luôn cho khỏi mất nút. */
@media (hover: none) {
	.product-small .add-to-cart-button {
		opacity: 1;
		pointer-events: auto;
		transform: none;
	}
}

/* --- Nhãn: gỡ ba offset của Flatsome rồi mới định vị được (badge-container có
   margin-top 30px, .badge có margin-left âm, .badge-inner là table-cell rộng
   hơn hộp chứa). --- */
.badge-container.absolute {
	margin: 0;
	top: 0;
	left: 0;
	height: auto;
}

.product-small .badge-container {
	top: 12px;
	left: 12px;
}

.badge-container .badge {
	height: auto;
	width: auto;
	margin: 0 6px 6px 0;
	display: inline-block;
	vertical-align: top;
}

.badge-container .badge-inner {
	display: block;
	width: auto;
	min-width: 0;
	border-radius: 0;
	padding: 6px 11px;
	font-size: 0.68rem;
	font-weight: 700;
	letter-spacing: 0.09em;
	line-height: 1;
	background: var(--cl-ink);
	color: #fff;
}

.badge-inner.cl-badge--light {
	background: var(--cl-sand-deep);
	color: var(--cl-ink);
}

.badge-inner.on-sale {
	background: var(--cl-ink);
	color: #fff;
}

/* Bỏ hẳn cụm sao rỗng trên thẻ sản phẩm — thiết kế chỉ có tên và giá. */
.product-small .box-text .star-rating {
	display: none;
}

/* Mũi tên trượt của lưới sản phẩm: nút tròn trắng đặt ĐÈ LÊN mép ảnh.
   Không dùng kiểu "outside" của Flatsome (left:-44px) vì nút rơi ra lề trang —
   trôi lơ lửng giữa khoảng trắng trên desktop và bị cắt mất nửa khi màn hẹp. */
/* Nút tròn viền mảnh, canh giữa theo phần ẢNH chứ không giữa cả thẻ: dưới ảnh
   còn tên và giá (~59px) nên top:50% sẽ rơi xuống quá thấp.
   Flatsome đặt cả top lẫn bottom 40% cho nút này — phải trả bottom về auto, nếu
   không khai báo bị ràng buộc thừa và trình duyệt tính ra vị trí khác hẳn. */
/* top:50% canh giữa theo cả THẺ, nhưng mũi tên phải canh giữa theo ẢNH — kéo lên
   đúng nửa khối tên + giá nằm dưới ảnh. Khối đó cao khác nhau tuỳ nơi (trang chủ
   tên 1 dòng, sản phẩm liên quan 2 dòng) nên tách thành một biến đặt tên. */
.cl-products.row,
.related .row-slider,
.up-sells .row-slider {
	--cl-slider-nav-shift: 52px;
}

.related .row-slider,
.up-sells .row-slider {
	--cl-slider-nav-shift: 61px;
}

.cl-products.row .flickity-prev-next-button,
.related .row-slider .flickity-prev-next-button,
.up-sells .row-slider .flickity-prev-next-button {
	top: 50%;
	bottom: auto;
	/* flatsome.css: .slider-nav-push:not(.slider-nav-reveal) .flickity-prev-next-button
	   {margin-top:-10%} — :not() tính như một class nên luật đó là (0,3,0); phải
	   viết đủ ba class mới thắng, và -10% ở đây ăn theo CHIỀU NGANG khung. */
	margin-top: calc(var(--cl-slider-nav-shift, 52px) * -1);
	/* Mũi tên vẽ bằng ::before là một khối block: nút mặc định display:block nên
	   nó dính góc trên trái, còn text-align:center không tác động tới khối block.
	   Phải chuyển nút thành flex thì mũi tên mới vào giữa vòng tròn. */
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-height: 0;
	padding: 0;
	border: 1px solid var(--cl-line);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 2px 10px rgba(17, 17, 17, 0.07);
	color: var(--cl-ink);
	opacity: 1;
	transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease;
}

/* Mũi tên gốc của Flatsome là <svg> bị kiểu "simple" ép về gần như 0 kích thước;
   thay bằng icon nét mảnh của bộ icon để chắc chắn và đồng bộ với header. */
.cl-products.row .flickity-prev-next-button svg,
.related .row-slider .flickity-prev-next-button svg,
.up-sells .row-slider .flickity-prev-next-button svg {
	display: none;
}

.cl-products.row .flickity-prev-next-button::before,
.related .row-slider .flickity-prev-next-button::before,
.up-sells .row-slider .flickity-prev-next-button::before {
	content: "";
	display: block;
	width: 17px;
	height: 17px;
	background-color: currentColor;
	-webkit-mask: url("../icons/arrow-right.svg") center/contain no-repeat;
	mask: url("../icons/arrow-right.svg") center/contain no-repeat;
}

.cl-products.row .flickity-prev-next-button.previous::before,
.related .row-slider .flickity-prev-next-button.previous::before,
.up-sells .row-slider .flickity-prev-next-button.previous::before {
	transform: rotate(180deg);
}

.cl-products.row .flickity-prev-next-button:hover,
.related .row-slider .flickity-prev-next-button:hover,
.up-sells .row-slider .flickity-prev-next-button:hover {
	background: var(--cl-ink);
	border-color: var(--cl-ink);
	color: #fff;
}

.cl-products.row .flickity-prev-next-button[disabled],
.related .row-slider .flickity-prev-next-button[disabled],
.up-sells .row-slider .flickity-prev-next-button[disabled] {
	opacity: 0.3;
}

/* Đè `.slider-nav-outside .flickity-prev-next-button.previous {left:auto;right:100%}`
   (0,2,0) của flatsome.css — bốn class ở đây là (0,4,0) nên không cần !important. */
.cl-products.row .flickity-prev-next-button.previous,
.related .row-slider .flickity-prev-next-button.previous,
.up-sells .row-slider .flickity-prev-next-button.previous {
	left: 12px;
	right: auto;
}

.cl-products.row .flickity-prev-next-button.next,
.related .row-slider .flickity-prev-next-button.next,
.up-sells .row-slider .flickity-prev-next-button.next {
	right: 12px;
	left: auto;
}

.cl-products .flickity-page-dots {
	display: none;
}

/* Mỗi .col của lưới Flatsome mang sẵn padding-bottom 30px; thẻ sản phẩm không
   cần khoảng đó vì section đã có padding riêng. */
.cl-products.row .product-small.col {
	padding-bottom: 0;
}

.cl-products.row {
	margin-bottom: 0;
}

/* ==========================================================================
   11. Phong cách cùng CLAUDE (lookbook)
   ========================================================================== */

.cl-look .box-image {
	background: var(--cl-sand);
	overflow: hidden;
}

.cl-look .box-image img {
	transition: transform 0.7s ease;
}

/* Phải bám vào chính thẻ ảnh (.box), không phải .col: cột bọc cả khối cũng là
   .col nên rê chuột bất kỳ đâu trong khối sẽ phóng to toàn bộ ảnh. */
.cl-look .box:hover .box-image img {
	transform: scale(1.05);
}

.cl-look .box-text {
	padding: 15px 4px 0;
	text-align: center;
}

.cl-look .box-text-inner,
.cl-look .box-text h5,
.cl-look .box-text p {
	font-size: 0.85rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--cl-ink);
	margin: 0;
}

/* ==========================================================================
   12. Cảm nhận khách hàng ([ux_slider] + [testimonial])
   ========================================================================== */

.cl-testi .row {
	margin-bottom: 0;
}

/* Mỗi slide là một [section_inner class="col"] mang sẵn padding ngang 30px của
   Flatsome nên hai thẻ cách nhau 60px. Không dùng `.slider > .col`: Flickity
   chuyển các ô vào .flickity-viewport > .flickity-slider ngay khi khởi tạo nên
   selector con trực tiếp ngừng khớp và luật im lặng mất tác dụng. */
.cl-testi .col {
	padding: 0 15px;
	padding-bottom: 0;
}

.cl-testi .slider {
	margin: 0 -15px;
}

.cl-testi .testimonial-box {
	position: relative;
	display: block;
	width: 100%;
	border: 1px solid var(--cl-line);
	background: #fff;
	padding: 26px 26px 26px 84px;
	/* Flickity định vị tuyệt đối từng ô nên height:100% sẽ tham chiếu vòng lại
	   chính nó và làm sập khung; chốt chiều cao tối thiểu để các thẻ đều nhau. */
	min-height: 208px;
}

.cl-testi .testimonial-image {
	position: absolute;
	left: 26px;
	top: 26px;
	width: 44px !important;
	height: 44px;
	margin: 0;
	overflow: hidden;
}

.cl-testi .icon-box-text {
	display: flex;
	flex-direction: column;
	padding: 0;
}

/* Thiết kế: tên → sao → lời nhận xét; Flatsome in sao → nhận xét → tên. */
.cl-testi .testimonial-meta {
	order: 1;
	padding: 0;
	margin: 0 0 5px;
}

.cl-testi .star-rating {
	order: 2;
	margin: 0 0 14px;
	font-size: 0.95em;
	color: var(--cl-star);
}

.cl-testi .testimonial-text {
	order: 3;
	margin-left: -58px;
}

.cl-testi .testimonial-name {
	font-size: 0.92rem;
	font-weight: 700;
	color: var(--cl-ink);
}

.cl-testi .testimonial-company,
.cl-testi .testimonial-name-divider {
	display: none;
}

.cl-testi .testimonial-text,
.cl-testi .testimonial-text p {
	font-size: 0.9rem;
	line-height: 1.85;
	color: var(--cl-body);
	/* .is-italic của Flatsome là !important nên chỉ !important mới gỡ được. */
	font-style: normal !important;
}

.cl-testi .flickity-prev-next-button {
	display: none;
}

.cl-testi .flickity-page-dots {
	position: static;
	margin-top: 26px;
}

.cl-testi .flickity-page-dots .dot {
	width: 9px;
	height: 9px;
	border: 1px solid var(--cl-ink);
	background: transparent;
	opacity: 0.5;
	margin: 0 5px;
}

.cl-testi .flickity-page-dots .dot.is-selected {
	background: var(--cl-ink);
	opacity: 1;
}

/* ==========================================================================
   13. Câu hỏi thường gặp ([accordion])
   ========================================================================== */

.cl-faq .accordion {
	border: 0;
}

.cl-faq .accordion-item {
	border: 1px solid var(--cl-line);
	margin-bottom: 14px;
	background: #fff;
}

.cl-faq .accordion-title {
	border: 0;
	padding: 17px 52px 17px 22px;
	font-size: 0.95rem;
	font-weight: 400;
	color: var(--cl-ink);
	position: relative;
	line-height: 1.5;
}

.cl-faq .accordion-title.active {
	font-weight: 600;
	background: transparent;
	color: var(--cl-ink);
}

/* Flatsome dùng .toggle chứa <i class="icon-angle-down"> — thay bằng icon nét
   mảnh của bộ icon, xoay khi mở. */
.cl-faq .accordion-title .toggle {
	position: absolute;
	right: 18px;
	top: 50%;
	left: auto;
	transform: translateY(-50%);
	margin: 0;
	opacity: 1;
	width: 18px;
	height: 18px;
	line-height: 18px;
	transition: transform 0.3s ease;
}

.cl-faq .accordion-title.active .toggle {
	transform: translateY(-50%) rotate(180deg);
}

.cl-faq .accordion-title .toggle i {
	font-size: 0;
	display: block;
	width: 18px;
	height: 18px;
}

.cl-faq .accordion-title .toggle i::before {
	content: "";
	display: block;
	width: 18px;
	height: 18px;
	background-color: var(--cl-ink);
	-webkit-mask: url("../icons/chevron-down.svg") center/contain no-repeat;
	mask: url("../icons/chevron-down.svg") center/contain no-repeat;
}

.cl-faq .accordion-inner {
	padding: 0 22px 20px;
	font-size: 0.9rem;
	line-height: 1.8;
	color: var(--cl-body);
}

.cl-faq .accordion-inner p:last-child {
	margin-bottom: 0;
}

/* ==========================================================================
   14. Đăng ký nhận tin ([cl_newsletter])
   ========================================================================== */

.cl-subscribe {
	background-color: var(--cl-sand-deep);
	overflow: hidden;
}

.cl-subscribe .row {
	margin-bottom: 0;
}

.cl-subscribe .col {
	padding-bottom: 0;
}

.cl-subscribe__title.section-title-container {
	max-width: none;
	padding: 0;
	margin: 0 0 18px;
}

.cl-subscribe__title .section-title {
	border: 0;
	margin: 0;
}

.cl-subscribe__title .section-title b {
	display: none;
}

.cl-subscribe__title .section-title span {
	border: 0;
	padding: 0;
}

.cl-subscribe__title .section-title span {
	font-family: var(--cl-serif, Georgia, "Times New Roman", serif);
	font-size: clamp(1.6rem, 2.8vw, 2.35rem);
	font-weight: 400;
	line-height: 1.18;
	letter-spacing: 0.01em;
}

.cl-subscribe__desc {
	font-size: 0.95rem;
	line-height: 1.85;
	color: #4b4b4b;
	margin: 0;
}

.cl-subscribe__figure {
	align-self: flex-end;
}

.cl-subscribe__figure .col-inner {
	margin-bottom: -1px;
}

/* Ảnh gốc là PNG nền trong suốt nên để nguyên tỉ lệ, chỉ neo xuống đáy dải. */
.cl-subscribe__figure .img,
.cl-subscribe__figure .img-inner {
	height: auto;
}

.cl-subscribe__figure img {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	object-position: bottom center;
}

.cl-newsletter__row {
	display: flex;
	max-width: 470px;
}

.cl-newsletter__field {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.cl-newsletter__field input[type="email"] {
	width: 100%;
	height: 54px;
	margin: 0;
	border: 0;
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	padding: 0 18px;
	font-size: 0.92rem;
	color: var(--cl-ink);
}

.cl-newsletter__field input[type="email"]::placeholder {
	color: #9a9a9a;
}

.cl-newsletter__field input[type="email"]:focus {
	box-shadow: inset 0 0 0 1px var(--cl-ink);
}

.cl-newsletter__submit.button {
	flex: none;
	margin: 0;
	border-radius: 0;
	background: var(--cl-ink);
	border: 1px solid var(--cl-ink);
	color: #fff;
	min-height: 54px;
	line-height: 1.2;
	padding: 0 26px;
	font-size: 0.74rem;
	letter-spacing: 0.11em;
}

.cl-newsletter__submit.button:hover {
	background: var(--cl-accent-dark);
	border-color: var(--cl-accent-dark);
}

.cl-newsletter__consent {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 14px 0 0;
	font-size: 0.8rem;
	color: #5c5c5c;
	cursor: pointer;
}

.cl-newsletter__consent input {
	margin: 2px 0 0;
	width: 15px;
	height: 15px;
	accent-color: var(--cl-ink);
	flex: none;
}

.cl-newsletter__messages:empty {
	display: none;
}

.cl-newsletter__notice {
	margin: 12px 0 0;
	font-size: 0.85rem;
	padding: 9px 14px;
}

.cl-newsletter__notice.is-ok {
	background: #e8f2ea;
	color: #23613a;
}

.cl-newsletter__notice.is-error {
	background: #f8e7e4;
	color: #96322a;
}

/* Ô bẫy spam của anti-spam.php phải ẩn hẳn với người dùng thật. */
.devvn-trap {
	position: absolute !important;
	left: -9999px !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
}

/* ==========================================================================
   14b. Lưới tin tức ([blog_posts] — dùng ở khối bài viết liên quan)
   ========================================================================== */

.cl-news .box-image {
	background: var(--cl-sand);
	overflow: hidden;
}

.cl-news .box-image img {
	transition: transform 0.7s ease;
}

.cl-news .box:hover .box-image img {
	transform: scale(1.04);
}

.cl-news .box-text {
	padding: 14px 2px 0;
}

.cl-news .post-title {
	margin: 0 0 6px;
	font-size: 0.95rem;
	font-weight: 600;
	line-height: 1.45;
	letter-spacing: 0;
	text-transform: none;
}

.cl-news .post-title a {
	color: var(--cl-ink);
}

.cl-news .post-title a:hover {
	color: var(--cl-tan);
}

.cl-news .post-meta {
	color: var(--cl-muted);
	font-size: 0.8rem;
	opacity: 1;
}

/* [blog_posts] chèn sẵn một <div class="is-divider"> dưới phần meta. */
.cl-news .is-divider {
	display: none;
}

/* ==========================================================================
   15. Footer (khối tuỳ chỉnh + thanh bản quyền)
   ========================================================================== */

.cl-footer {
	background-color: #0d0d0d;
}

.cl-footer .row {
	margin-bottom: 0;
}

.cl-footer .col {
	padding-bottom: 26px;
}

.cl-footer__logo img {
	max-width: 180px;
}

.cl-footer__about {
	font-size: 0.86rem;
	line-height: 1.85;
	color: rgba(255, 255, 255, 0.62);
	margin: 18px 0 0;
	max-width: 260px;
}

.cl-footer__heading {
	font-size: 0.78rem;
	font-weight: 600;
	line-height: 1.4;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 16px;
}

/* Link chân trang là chữ phụ: cỡ nhỏ, đậm thường, màu dịu lại cho đỡ chói
   trên nền đen — tiêu đề cột mới là phần nổi. */
.cl-footer__links .ux-menu-link__link,
.cl-footer__contact li,
.cl-footer__contact a {
	font-size: 0.88rem;
	font-weight: 400;
	line-height: 1.6;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.66);
}

.cl-footer__links .ux-menu-link__link {
	padding: 6px 0;
	transition: color 0.2s ease;
}

.cl-footer__links .ux-menu-link__link:hover,
.cl-footer__contact a:hover {
	color: #fff;
}

.cl-footer__contact ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.cl-footer__contact li {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	margin: 0 0 12px !important;
}

.cl-footer__contact li:last-child {
	margin-bottom: 0;
}

.cl-footer__contact li .cl-i {
	flex: none;
	margin-top: 0.2em;
	color: rgba(255, 255, 255, 0.5);
}

/* Cột chỉ rộng nửa hàng trên điện thoại: email dài hơn cột thì cắt bằng dấu ...
   thay vì đẩy tràn cả khối. min-width:0 là bắt buộc — mặc định của flex item là
   auto nên nó không chịu co lại và text-overflow không bao giờ có tác dụng. */
.cl-footer__contact li>a,
.cl-footer__contact li>span {
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.cl-footer__social {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 22px;
	font-size: 100%;
}

/* [follow style="plain"] chỉ in <a class="facebook"><i></i></a> — không có class
   .button.icon nào để bám, nên phải nhắm thẳng vào thẻ <a> con. */
.cl-footer__social>a {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: none;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.22);
	border-radius: 50%;
	background: transparent;
	color: #fff;
	line-height: 1;
	transition: background-color 0.25s ease, border-color 0.25s ease;
}

.cl-footer__social>a i {
	margin: 0;
	font-size: 16px;
	line-height: 1;
	color: #fff;
	transition: color 0.25s ease;
}

.cl-footer__social>a:hover {
	background: #fff;
	border-color: #fff;
}

.cl-footer__social>a:hover i {
	color: var(--cl-ink);
}

/* --- Thanh bản quyền: chữ trái, icon thanh toán phải --------------------- */

.absolute-footer {
	background-color: #0d0d0d;
	border-top: 1px solid rgba(255, 255, 255, 0.1);
	padding: 20px 0;
	font-size: 0.82rem;
}

.absolute-footer,
.absolute-footer .copyright-footer {
	color: rgba(255, 255, 255, 0.55);
}

.absolute-footer a {
	color: rgba(255, 255, 255, 0.7);
}

.absolute-footer .payment-icons {
	margin: 0;
}

.absolute-footer .payment-icons img {
	max-height: 26px;
	width: auto;
}

.absolute-footer .footer-secondary {
	padding: 0;
}

/* ==========================================================================
   16. Trang chủ — responsive
   ========================================================================== */

@media (max-width: 849px) {
	.cl-sec {
		padding-top: 42px;
		padding-bottom: 42px;
	}

	.cl-title .section-title span {
		font-size: 1.3rem;
	}

	/* Hàng ngang chỉ xuống dòng khi KHÔNG đủ chỗ; tiêu đề + link vẫn vừa 369px
	   nên nằm chung một hàng và tiêu đề bị đẩy lệch khỏi giữa. Xếp dọc để tiêu
	   đề luôn canh giữa còn link nằm hẳn hàng dưới. */
	.cl-title .section-title {
		flex-direction: column;
		align-items: flex-start;
	}

	.cl-title--center .section-title {
		align-items: center;
	}

	.cl-title .section-title>a {
		position: static;
		transform: none;
		margin: 12px 0 0;
		text-align: center;
	}

	.cl-why__list {
		margin-top: 30px;
	}

	.cl-testi .testimonial-box {
		min-height: 0;
	}
}

@media (max-width: 549px) {

	/* flatsome.css ép `.row-slider .flickity-prev-next-button { width:20px!important;
	   background-color:transparent!important; box-shadow:none!important }` nên nút
	   teo lại thành nửa vòng tròn mờ dính mép ảnh — phải đè lại bằng !important. */
	.cl-products.row .flickity-prev-next-button,
	.related .row-slider .flickity-prev-next-button,
	.up-sells .row-slider .flickity-prev-next-button {
		--cl-slider-nav-shift: 57px;
		width: 36px !important;
		height: 36px;
		background-color: rgba(255, 255, 255, 0.94) !important;
		box-shadow: 0 2px 10px rgba(17, 17, 17, 0.12) !important;
		opacity: 1;
	}

	.cl-products.row .flickity-prev-next-button::before,
	.related .row-slider .flickity-prev-next-button::before,
	.up-sells .row-slider .flickity-prev-next-button::before {
		width: 14px;
		height: 14px;
	}

	.cl-sec {
		padding-top: 34px;
		padding-bottom: 34px;
	}

	.cl-btn.button,
	.button.cl-btn {
		padding: 12px 22px;
		font-size: 0.72rem;
	}

	.cl-usp .row>.col {
		padding-bottom: 22px;
	}

	.cl-usp .icon-box-img svg {
		width: 28px;
		height: 28px;
	}

	.cl-newsletter__row {
		flex-direction: column;
	}

	.cl-newsletter__submit.button {
		width: 100%;
	}

	.cl-testi .testimonial-box {
		padding: 22px 20px 22px 76px;
	}

	.cl-testi .testimonial-image {
		left: 20px;
		top: 22px;
	}

	.cl-footer .col {
		padding-bottom: 22px;
	}

	.absolute-footer .footer-secondary,
	.absolute-footer .footer-primary {
		float: none;
		display: block;
		text-align: center;
	}

	.absolute-footer .payment-icons {
		margin-top: 14px;
	}
}

/* ==========================================================================
   17. Trang danh mục sản phẩm / trang shop
   ========================================================================== */

/* --- 17.1 Banner đầu trang ------------------------------------------------ */

.shop-page-title.cl-cat-hero {
	background-color: var(--cl-ink);
	text-shadow: none;
}

/* Ảnh nền là ảnh cửa hàng khá sáng và nhiều chi tiết; phủ một lớp tối để tiêu
   đề trắng luôn đủ tương phản. */
.cl-cat-hero .title-bg {
	background-position: center 32%;
}

.cl-cat-hero .title-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.55) 45%, rgba(10, 10, 10, 0.28) 100%);
}

.cl-cat-hero .page-title-inner {
	align-items: center;
	min-height: 260px;
	padding-top: 24px;
	padding-bottom: 24px;
	position: relative;
	z-index: 1;
}

/* .page-title-inner là con trực tiếp của .container nên chữ bị lệch 15px so với
   lưới sản phẩm bên dưới — bù lại đúng bằng padding của .col. */
.cl-cat-hero .page-title-inner>.flex-col:first-child {
	padding-left: 15px;
}

.cl-cat-hero h1.shop-page-title {
	margin: 0 0 10px;
	color: #fff;
	font-size: clamp(1.9rem, 3.4vw, 2.9rem);
	font-weight: 600;
	letter-spacing: 0.06em;
	line-height: 1.1;
	text-shadow: none;
	text-transform: uppercase;
}

.cl-cat-hero .breadcrumbs {
	margin: 0;
	color: rgba(255, 255, 255, 0.75);
	font-size: 0.82rem;
	font-weight: 400;
	letter-spacing: 0.02em;
	opacity: 1;
	text-transform: none;
}

.cl-cat-hero .breadcrumbs a,
.cl-cat-hero .breadcrumbs a:hover {
	color: rgba(255, 255, 255, 0.75);
	opacity: 1;
}

.cl-cat-hero .breadcrumbs a:hover {
	color: #fff;
	text-decoration: underline;
}

.cl-cat-hero .breadcrumbs .divider {
	margin: 0 8px;
	opacity: 0.5;
}

.cl-cat-hero__custom {
	max-width: 620px;
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.82);
}

.cl-cat-hero__custom> :last-child {
	margin-bottom: 0;
}

/* --- 17.2 Đầu vùng nội dung: tiêu đề, số kết quả, ô sắp xếp ---------------- */

.cl-shop-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 12px 20px;
	margin-bottom: 22px;
}

.cl-shop-head__title {
	display: block;
	margin: 0 0 4px;
	color: var(--cl-ink);
	font-size: 21px;
	font-weight: 700;
	letter-spacing: 0.02em;
	line-height: 1.2;
	text-transform: uppercase;
}

.cl-shop-head .woocommerce-result-count {
	margin: 0;
	color: var(--cl-muted);
	font-size: 16px;
}

/* Nút lọc (chỉ hiện ≤849) và ô sắp xếp nằm chung một cụm bên phải tiêu đề. */
.cl-shop-head__right {
	display: flex;
	align-items: center;
	gap: 10px;
}

.cl-shop-head .woocommerce-ordering {
	margin: 0;
}

.cl-shop-head .woocommerce-ordering select {
	height: 44px;
	min-width: 210px;
	margin: 0;
	padding: 0 40px 0 18px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--cl-ink);
	font-size: 16px;
	font-weight: 600;
}

/* --- 17.3 Thanh bên: thẻ danh mục ở trên, các widget lọc nối liền bên dưới - */

#shop-sidebar .widget {
	margin: 0;
	padding: 14px 20px;
	border: 1px solid var(--cl-line);
	background-color: #fff;
}

/* Thẻ 1 — widget danh mục: viền tròn đủ bốn cạnh. */
#shop-sidebar .widget:first-child {
	margin-bottom: 18px;
	padding: 18px 20px;
	border-radius: 0;
}

/* Thẻ 2 — các widget lọc nối thành một khối: chỉ còn viền ngoài, bên trong không kẻ. */
#shop-sidebar .widget:first-child~.widget {
	border-top-width: 0;
	border-bottom-width: 0;
}

#shop-sidebar .widget:first-child+.widget {
	padding-top: 18px;
	border-top-width: 1px;
	border-radius: 0;
}

#shop-sidebar .widget:first-child~.widget:last-child {
	padding-bottom: 18px;
	border-bottom-width: 1px;
	border-radius: 0;
}

/* Tiêu đề chung của thẻ lọc, nối vào widget lọc đầu tiên. */
.cl-filterbox__title {
	margin: -2px 0 14px;
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#shop-sidebar .widget-title {
	display: block;
	margin-bottom: 8px;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

#shop-sidebar .widget:first-child .widget-title {
	color: var(--cl-accent);
}

/* Gạch ngắn dưới tiêu đề widget của Flatsome: bỏ hẳn. */
#shop-sidebar .widget .is-divider {
	display: none;
}

#shop-sidebar .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

/* Danh sách danh mục: ảnh tròn + tên + số lượng. */
#shop-sidebar .product-categories li {
	margin: 0;
	border: 0;
}

#shop-sidebar .product-categories li>a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 0;
	color: var(--cl-body);
	font-size: 16px;
	font-weight: 500;
}

#shop-sidebar .product-categories li>a:hover,
#shop-sidebar .product-categories li.current-cat>a {
	color: var(--cl-accent);
}

.cl-catnav__thumb {
	width: 30px;
	height: 30px;
	flex: none;
	border-radius: 50%;
	background-color: var(--cl-sand);
	object-fit: cover;
}

.cl-catnav__name {
	flex: 1 1 auto;
}

/* flatsome-shop.css có .widget_product_categories>ul>li span{font-size:.85em;opacity:.4}
   — (0,1,3) nên phải ghi lại bằng selector đủ nặng mới sáng chữ lại được. */
#shop-sidebar .widget_product_categories>ul>li span.cl-catnav__name,
#shop-sidebar .widget_product_categories>ul>li span.count {
	opacity: 1;
	font-size: inherit;
}

#shop-sidebar .widget_product_categories>ul>li span.count {
	font-size: 13px;
}

#shop-sidebar .product-categories .count {
	flex: none;
	opacity: 1;
	color: var(--cl-muted);
	font-size: 13px;
	font-weight: 500;
}

/* Danh sách lọc: mỗi lựa chọn là một dòng có ô đánh dấu. */
#shop-sidebar .widget_layered_nav li {
	margin: 0;
	border: 0;
}

#shop-sidebar .widget_layered_nav li>a,
#shop-sidebar .widget_layered_nav li>span {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 4px 0;
	color: var(--cl-body);
	font-size: 16px;
	font-weight: 500;
}

#shop-sidebar .widget_layered_nav li>a::before {
	content: "";
	width: 17px;
	height: 17px;
	flex: none;
	border: 1px solid #d8d2c8;
	border-radius: 2px;
	background-color: #fff;
}

/* Dòng đã có ô màu thì ô đánh dấu vuông là thừa — bỏ đi, lấy chính ô màu làm
   dấu hiệu chọn. */
#shop-sidebar .widget_layered_nav li:has(.ux-swatch-widget-layered-nav-list__graphic)>a::before {
	display: none;
}

#shop-sidebar .widget_layered_nav .ux-swatch-widget-layered-nav-list__graphic {
	flex: none;
	margin-right: 10px;
	line-height: 0;
}

#shop-sidebar .widget_layered_nav .ux-swatch__color {
	display: block;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(17, 17, 17, 0.16);
	border-radius: 50%;
	background-color: var(--swatch-color);
}

#shop-sidebar .widget_layered_nav li.chosen .ux-swatch__color {
	box-shadow: 0 0 0 2px #fff, 0 0 0 3px var(--cl-ink);
}

#shop-sidebar .widget_layered_nav li>a:hover {
	color: var(--cl-accent);
}

#shop-sidebar .widget_layered_nav li>a:hover::before {
	border-color: var(--cl-accent);
}

#shop-sidebar .widget_layered_nav li.chosen>a::before {
	border-color: var(--cl-accent);
	background-color: var(--cl-accent);
	background-image: var(--cl-check);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px;
	top: 0;
	opacity: 1;
}

#shop-sidebar .widget_layered_nav li.chosen>a {
	color: var(--cl-ink);
	font-weight: 600;
}

#shop-sidebar .widget_layered_nav .count {
	flex: none;
	margin-left: auto;
	opacity: 1;
	color: var(--cl-muted);
	font-size: 13px;
	font-weight: 500;
	line-height: 1;
}

/* Nút xem thêm của danh sách lọc dài. */
.cl-filter-hidden {
	display: none !important;
}

.cl-filter-more {
	display: inline-flex;
	align-items: center;
	min-height: 0;
	margin-top: 4px;
	padding: 4px 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-accent);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.4;
	text-transform: none;
}

.cl-filter-more:hover {
	background: none;
	box-shadow: none;
	color: var(--cl-accent-dark);
}

/* Bộ lọc khoảng giá. */
#shop-sidebar .price_slider_wrapper .ui-slider {
	height: 4px;
	margin: 14px 0 18px;
	border-radius: 2px;
	background-color: #ebe4d9;
}

#shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-range {
	background-color: var(--cl-accent);
}

#shop-sidebar .price_slider_wrapper .ui-slider .ui-slider-handle {
	top: -5px;
	width: 14px;
	height: 14px;
	margin-left: -7px;
	border: 2px solid #fff;
	border-radius: 50%;
	background-color: var(--cl-accent);
	box-shadow: 0 1px 4px rgba(0, 0, 0, 0.22);
}

#shop-sidebar .price_slider_amount {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
}

#shop-sidebar .price_slider_amount .price_label {
	flex: 1 1 100%;
	order: 1;
	color: var(--cl-body);
	font-size: 16px;
	text-align: left;
}

#shop-sidebar .price_slider_amount .price_label span {
	color: var(--cl-ink);
	font-weight: 700;
}

#shop-sidebar .price_slider_amount .button {
	order: 2;
	min-height: 0;
	margin: 0 0 0 auto;
	padding: 0 20px;
	border: 0;
	border-radius: 0;
	background-color: var(--cl-accent);
	box-shadow: none;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 34px;
}

/* --- 17.4 Thanh "Đang lọc" trên lưới sản phẩm (sidebar shop-active-filters) - */

.cl-activefilters {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: -6px 0 20px;
}

.cl-activefilters .widget {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 10px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
}

.cl-activefilters .widget-title {
	margin: 0;
	color: var(--cl-muted);
	font-size: 16px;
	font-weight: 600;
	letter-spacing: 0.02em;
	text-transform: none;
}

.cl-activefilters ul {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* .widget_layered_nav_filters ul li.chosen{display:inline-block;margin-right:10px} của
   flatsome-shop.css phá bố cục flex nên phải ghi đè cả display lẫn margin. */
.cl-activefilters ul li.chosen {
	display: flex;
	margin: 0;
}

.cl-activefilters ul li.chosen a {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	padding: 0 14px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	color: var(--cl-ink);
	font-size: 13px;
	font-weight: 600;
	line-height: 32px;
	opacity: 1;
}

.cl-activefilters ul li.chosen a:hover {
	border-color: var(--cl-accent);
	color: var(--cl-accent);
}

/* Flatsome dùng chữ "x" thường làm dấu gỡ; thay bằng dấu nhân thật. */
.cl-activefilters ul li.chosen a::before {
	content: "";
	display: inline-block;
	width: 11px;
	height: 11px;
	background-color: var(--cl-accent);
	-webkit-mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center/contain no-repeat;
	mask: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3.5' stroke-linecap='round'%3E%3Cline x1='5' y1='5' x2='19' y2='19'/%3E%3Cline x1='19' y1='5' x2='5' y2='19'/%3E%3C/svg%3E") center/contain no-repeat;
	position: static;
	top: auto;
	margin: 0;
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
	opacity: 1;
}

/* --- 17.5 Phân trang ------------------------------------------------------ */

.woocommerce-pagination .page-numbers {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
	gap: 8px;
	margin: 34px 0 0;
}

.woocommerce-pagination ul.page-numbers>li {
	margin: 0;
	border: 0;
}

.woocommerce-pagination .page-number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	color: var(--cl-ink);
	font-size: 16px;
	font-weight: 600;
	transition: background-color 0.18s, border-color 0.18s, color 0.18s;
}

/* Flatsome tự tô nền đỏ khi hover — để chữ màu đỏ là mất chữ. */
.woocommerce-pagination a.page-number:hover {
	border-color: var(--cl-accent);
	background-color: var(--cl-accent);
	color: #fff;
}

.woocommerce-pagination .page-number.current {
	border-color: var(--cl-accent);
	background-color: var(--cl-accent);
	color: #fff;
}

.woocommerce-pagination .page-number.next,
.woocommerce-pagination .page-number.prev {
	border-radius: 50%;
	font-size: 16px;
}

.woocommerce-pagination .page-number.dots {
	width: auto;
	border: 0;
	background: none;
}

/* --- 17.6 Mô tả danh mục dưới lưới sản phẩm ------------------------------- */

.cl-cat-desc {
	position: relative;
	margin-top: 38px;
	padding-top: 26px;
	border-top: 1px solid var(--cl-line);
	color: var(--cl-body);
	font-size: 16px;
	line-height: 1.85;
}

.cl-cat-desc__body {
	overflow: hidden;
	transition: max-height 0.28s ease;
}

.cl-cat-desc__body> :last-child {
	margin-bottom: 0;
}

.cl-cat-desc__body h2,
.cl-cat-desc__body h3 {
	font-size: 19px;
}

.cl-cat-desc.is-collapsed::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 48px;
	left: 0;
	height: 96px;
	background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
	pointer-events: none;
}

.cl-cat-desc__toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 0;
	margin: 14px 0 0;
	padding: 0 22px;
	border: 1px solid var(--cl-accent);
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-accent);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.07em;
	line-height: 34px;
	text-transform: uppercase;
}

.cl-cat-desc__toggle:hover {
	background-color: var(--cl-accent);
	box-shadow: none;
	color: #fff;
}

/* Khoảng thở dưới vùng nội dung trước chân trang. */
.category-page-row {
	padding-bottom: 46px;
}

/* --- 17.7 Nút lọc trên máy tính bảng và điện thoại ------------------------ */

/* Nút nằm trong cụm bên phải của .cl-shop-head; padding 10px 0 của Flatsome
   ở đó chỉ làm hàng cao lên nên bỏ. */
.cl-shop-head .category-filter-row {
	display: flex;
	align-items: center;
	flex: 0 0 auto;
	margin: 0;
	padding: 0;
}

/* Chỗ template chừa cho widget "đang lọc" — widget đã chặn ở PHP, còn lại vỏ rỗng. */
.cl-shop-head .category-filter-row>.inline-block {
	display: none;
}

.cl-shop-head .category-filter-row .filter-button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 44px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.03em;
	line-height: 1;
}

.cl-shop-head .category-filter-row .filter-button:hover {
	border-color: var(--cl-accent);
	color: var(--cl-accent);
}

.cl-shop-head .category-filter-row .filter-button i {
	font-size: 16px;
	line-height: 1;
	opacity: 1;
}

/* --- 17.8 Responsive ------------------------------------------------------ */

@media (max-width: 1099px) {
	.cl-cat-hero .page-title-inner {
		min-height: 260px;
	}

	.cl-cat-hero .page-title-inner>.flex-col:first-child {
		padding-left: 80px;
	}

	.cl-cat-hero h1.shop-page-title {
		font-size: 46px;
	}
}

@media (max-width: 849px) {
	.cl-cat-hero .page-title-inner {
		min-height: 205px;
	}

	.cl-cat-hero .page-title-inner>.flex-col:first-child {
		padding-left: 0;
	}

	.cl-cat-hero h1.shop-page-title {
		font-size: 38px;
	}

	.cl-cat-hero .page-title-inner .flex-col {
		text-align: left !important;
	}
}

@media (max-width: 549px) {
	.cl-cat-hero .page-title-inner {
		min-height: 130px;
	}

	.cl-cat-hero h1.shop-page-title {
		margin-bottom: 8px;
		font-size: 30px;
	}

	.cl-cat-hero .breadcrumbs {
		font-size: 13.5px;
	}

	.cl-shop-head {
		align-items: flex-start;
		gap: 10px;
		margin-bottom: 16px;
	}

	/* Tên danh mục đã nằm trên banner rồi; hàng này chỉ giữ nút lọc + ô sắp xếp. */
	.cl-shop-head__title,
	.cl-shop-head__left {
		display: none;
	}

	.cl-shop-head__right {
		width: 100%;
	}

	.cl-shop-head .category-filter-row .filter-button {
		height: 42px;
		padding: 0 14px;
	}

	.cl-shop-head .woocommerce-ordering {
		flex: 1 1 auto;
		min-width: 0;
	}

	.cl-shop-head .woocommerce-ordering select {
		width: 100%;
		height: 42px;
		min-width: 0;
	}

	.woocommerce-pagination .page-number {
		width: 36px;
		height: 36px;
		font-size: 13.5px;
	}

	.category-page-row {
		padding-bottom: 26px;
	}
}

/* ==========================================================================
   18. Trang chi tiết sản phẩm
   ========================================================================== */

/* --- 18.1 Breadcrumb ------------------------------------------------------ */

/* .page-title-inner có min-height 60px + padding-top 20px — quá rộng cho một dòng breadcrumb. */
.single-product .product-page-title .page-title-inner {
	min-height: 0;
	padding-top: 10px;
	padding-bottom: 0;
}

/* Cột "title alt" rỗng trên trang này; trên mobile nó xuống dòng và cộng thêm padding. */
.single-product .product-page-title .page-title-inner>.flex-col:not(.flex-grow) {
	padding-top: 0;
	padding-bottom: 0;
}

/* Breadcrumb luôn gói trong đúng một hàng, dài quá thì cắt bằng dấu ba chấm. */
.single-product .woocommerce-breadcrumb {
	display: block;
	overflow: hidden;
	margin: 0 0 10px;
	color: var(--cl-muted);
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0;
	opacity: 1;
	text-overflow: ellipsis;
	text-transform: none;
	white-space: nowrap;
}

.single-product .woocommerce-breadcrumb a {
	color: var(--cl-muted);
}

.single-product .woocommerce-breadcrumb a:last-of-type,
.single-product .woocommerce-breadcrumb a:hover {
	color: var(--cl-accent);
}

.single-product .woocommerce-breadcrumb .divider {
	margin: 0 8px;
	opacity: 0.6;
}

.cl-crumb-current {
	color: var(--cl-ink);
	font-weight: 600;
}

/* flatsome-shop.css: .page-title:not(.featured-title)+main .product-main{padding-top:15px} */
.page-title:not(.featured-title)+main .product-main {
	padding-top: 0;
}

/* --- 18.2 Thư viện ảnh ---------------------------------------------------- */

/* Nhãn trên ảnh lớn: Flatsome để .badge là display:table cỡ 2.5em nên ra một ô
   vuông to; kéo về đúng dạng viên thuốc như ở lưới sản phẩm. */
.single-product .product-images .badge-container {
	top: 14px;
	left: 14px;
	margin: 0;
	font-size: 1em;
}

.single-product .product-images .badge {
	display: block;
	width: auto;
	height: auto;
	margin: 0;
}

.single-product .product-images .cl-badge.badge-inner {
	padding: 6px 14px;
	font-size: 12px;
}


.single-product .product-images {
	border-radius: 0;
	overflow: hidden;
}

/* Flatsome đặt top:40%/bottom:40% rồi để min-height:2.5em của .button quyết định
   chiều cao, nên hộp nút không bao giờ nằm giữa. Chốt height rồi kéo lên bằng
   margin-top — transform đã bị .row-slider ép !important ở mobile nên không dùng được. */
.single-product .product-images .flickity-prev-next-button {
	top: 50%;
	bottom: auto;
	width: 38px;
	height: 38px;
	min-height: 0;
	margin-top: -19px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.92);
	box-shadow: 0 3px 12px rgba(17, 17, 17, 0.12);
	color: var(--cl-accent);
	opacity: 1;
}

.single-product .product-images .flickity-prev-next-button:hover {
	background-color: var(--cl-accent);
	color: #fff;
}

/* Phải khai báo width/height bằng px (như slider tin tức): để % thì viewBox không
   được scale, path vẽ ở kích thước gốc rồi bị overflow:hidden của <svg> cắt mất. */
.single-product .product-images .flickity-prev-next-button svg {
	width: 15px;
	height: 15px !important;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

.single-product .product-images .flickity-prev-next-button .arrow,
.single-product .product-thumbnails .flickity-prev-next-button .arrow {
	fill: var(--cl-accent);
}

.single-product .product-images .flickity-prev-next-button:hover .arrow,
.single-product .product-thumbnails .flickity-prev-next-button:hover .arrow {
	fill: #fff !important;
}

/* Hàng ảnh nhỏ dưới ảnh lớn. */
.single-product .product-thumbnails a,
.single-product .product-gallery-slider+.product-thumbnails a {
	display: block;
	border-radius: 0;
	overflow: hidden;
}

.single-product .product-thumbnails .col {
	padding-bottom: 0;
}

.single-product .product-thumbnails img {
	border-radius: 0;
	transition: opacity 0.2s;
}

.single-product .product-thumbnails a:hover img,
.single-product .product-thumbnails .is-nav-selected img {
	opacity: 1;
	box-shadow: 0 0 0 2px var(--cl-accent);
}

/* Nút của hàng ảnh nhỏ: cùng kiểu tròn với ảnh lớn, chỉ nhỏ hơn.
   Dưới 550px Flatsome ép width/background/box-shadow bằng !important nên phải chọi lại. */
.single-product .product-thumbnails .flickity-prev-next-button {
	top: 50%;
	bottom: auto;
	width: 28px !important;
	height: 28px;
	min-height: 0;
	margin-top: -14px;
	border: 0;
	border-radius: 50%;
	background-color: rgba(255, 255, 255, 0.94) !important;
	box-shadow: 0 2px 8px rgba(17, 17, 17, 0.16) !important;
	color: var(--cl-accent);
	opacity: 1;
}

.single-product .product-thumbnails .flickity-prev-next-button:hover {
	background-color: var(--cl-accent) !important;
	color: #fff;
}

.single-product .product-thumbnails .flickity-prev-next-button svg {
	width: 11px;
	height: 11px !important;
	padding: 0;
	border: 0 !important;
	border-radius: 0 !important;
	background: none !important;
}

/* --- 18.3 Cột thông tin --------------------------------------------------- */

/* Giá dùng màu nhấn của thương hiệu để tách khỏi tên sản phẩm — hai dòng cùng cỡ
   và cùng sắc đen thì dính vào nhau. */
.single-product .product-info .price,
.single-product .product-info .price ins,
.single-product .product-info .price ins bdi,
.single-product .product-info .price>.amount,
.single-product .product-info .price>.amount bdi {
	color: var(--cl-tan);
}

.single-product .product-info .price del,
.single-product .product-info .price del bdi {
	color: var(--cl-muted);
	font-weight: 400;
}

.single-product .product-title.product_title {
	margin: 0 0 8px;
	color: var(--cl-accent);
	font-size: 30px;
	font-weight: 700;
	line-height: 1.25;
}

/* Đánh giá mặc định của WooCommerce/Flatsome, chỉ chỉnh nhịp dọc cho khớp cột. */
.single-product .woocommerce-product-rating {
	margin-bottom: 10px;
}

/* Chỉ nhắm .product-page-price: thẻ sản phẩm liên quan cũng có .price-wrapper. */
.single-product .product-info.summary .price-wrapper {
	margin-bottom: 10px;
}

.price.product-page-price,
.price.product-page-price .amount {
	margin: 0;
	color: var(--cl-accent);
	font-size: 28px;
	font-weight: 700;
	line-height: 1.2;
}

/* Gạch ngang được vẽ theo font của chính thẻ <del>, KHÔNG theo cỡ chữ của thẻ
   con — để font-size ở .amount thì gạch tính theo 28px trong khi chữ chỉ 18px
   nên nó nằm lệch hẳn khỏi tâm. Cỡ chữ phải đặt trên <del>. */
.price.product-page-price del {
	font-size: 18px;
}

.price.product-page-price del .amount {
	color: var(--cl-muted);
	font-size: inherit;
	font-weight: 500;
}

.single-product .product-short-description {
	margin-bottom: 16px;
	color: var(--cl-body);
	font-size: 16px;
	line-height: 1.75;
}

.single-product .product-short-description p:last-child {
	margin-bottom: 0;
}

/* Nhãn dùng chung cho "Khối lượng", "Số lượng"... */
.cl-field-label,
.single-product table.variations th.label label {
	display: inline-block;
	margin-bottom: 6px;
	color: var(--cl-ink);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
}

.ux-swatch-selected-value {
	color: var(--cl-muted);
	font-size: 15px;
	font-weight: 500;
}

/* --- 18.4 Thuộc tính (swatch của Flatsome) -------------------------------- */

/* Bảng .variations chuyển sang xếp dọc: nhãn một dòng, lựa chọn một dòng. */
.single-product table.variations,
.single-product table.variations tbody,
.single-product table.variations tr,
.single-product table.variations th,
.single-product table.variations td {
	display: block;
	width: auto;
	padding: 0;
	border: 0;
	background: none;
}

.single-product table.variations {
	margin: 0 0 8px;
}

.single-product table.variations tr+tr {
	margin-top: 12px;
}

.single-product table.variations td.value {
	position: relative;
}

.single-product .ux-swatches {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
}

.single-product .ux-swatch.ux-swatch--label {
	width: auto;
	min-width: 76px;
	height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--cl-body);
	transition: border-color 0.18s, background-color 0.18s, color 0.18s;
}

.single-product .ux-swatch.ux-swatch--label .ux-swatch__text {
	font-size: 15px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.single-product .ux-swatch.ux-swatch--label:hover {
	border-color: var(--cl-accent);
	color: var(--cl-accent);
}

.single-product .ux-swatch.ux-swatch--label.selected {
	border-color: var(--cl-accent);
	background-color: #f5f1ea;
	box-shadow: none;
	color: var(--cl-accent);
}

.single-product .reset_variations {
	position: absolute;
	top: -30px;
	right: 0;
	color: var(--cl-muted);
	font-size: 13px;
	text-transform: none;
}

.single-product .reset_variations:hover {
	color: var(--cl-accent);
}

/* --- 18.5 Số lượng và nút mua hàng ---------------------------------------- */

.single-product .single_variation_wrap,
.single-product .woocommerce-variation.single_variation {
	border: 0;
	padding-top: 0;
}

/* flatsome-shop.css: .woocommerce-variation-price{border-top:1px dashed #ddd;padding:7.5px 0} */
.woocommerce-variation-price {
	border-top: 0;
	padding: 0;
}

/* Ký hiệu tiền tệ của WooCommerce mặc định là chỉ số trên. */
.price.product-page-price .woocommerce-Price-currencySymbol {
	vertical-align: baseline;
	font-size: inherit;
}


/* flatsome-shop.css cho .woocommerce-variation-add-to-cart padding 8px 0. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
}

.single-product .cl-field-label {
	flex: 0 0 100%;
	margin-bottom: 0;
}

.cl-row-break {
	flex: 0 0 100%;
	height: 0;
}

.single-product .ux-quantity.quantity {
	display: inline-flex;
	align-items: center;
	width: auto;
	max-width: none;
	height: 46px;
	margin: 0;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	overflow: hidden;
}

/* button_radius = 25px in ra rule global co !important nen phai !important lai. */
.single-product .ux-quantity .ux-quantity__button {
	width: 44px;
	height: 44px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
	background-color: transparent;
	box-shadow: none;
	color: var(--cl-body);
	font-size: 20px;
	font-weight: 400;
	line-height: 44px;
}

.single-product .ux-quantity .ux-quantity__button:hover {
	background-color: #f5f1ea;
	color: var(--cl-accent);
}

.single-product .ux-quantity input.qty {
	width: 60px;
	height: 44px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-ink);
	font-size: 16px;
	font-weight: 600;
	text-align: center;
}

.single-product .single_add_to_cart_button.button,
.single-product .ux-buy-now-button.button {
	flex: 1 1 45%;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0 18px;
	border-radius: 0;
	box-shadow: none;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	line-height: 52px;
	text-transform: uppercase;
}

.single-product .single_add_to_cart_button.button {
	border: 1px solid var(--cl-accent);
	background-color: #fff;
	color: var(--cl-accent);
}

.single-product .single_add_to_cart_button.button::before {
	content: "";
	display: inline-block;
	width: 19px;
	height: 19px;
	margin-right: 9px;
	background-color: currentColor;
	-webkit-mask: url("../icons/cart-outline.svg") center/contain no-repeat;
	mask: url("../icons/cart-outline.svg") center/contain no-repeat;
	vertical-align: -0.25em;
}

.single-product .single_add_to_cart_button.button:hover {
	background-color: var(--cl-accent);
	box-shadow: none;
	color: #fff;
}

.single-product .ux-buy-now-button.button {
	border: 1px solid var(--cl-accent-dark);
	background-color: var(--cl-accent-dark);
	color: #fff;
}

.single-product .ux-buy-now-button.button:hover {
	background-color: var(--cl-accent);
	border-color: var(--cl-accent);
	box-shadow: none;
	color: #fff;
}

/* --- 18.6 Hai nút liên hệ nhanh (UX Block "lien-he-nhanh") ---------------- */

.cl-callrow {
	margin-top: 12px;
	margin-bottom: 0;
}

/* .button.is-outline (0,2,0) khoá nền trong suốt và viền 2px currentColor;
   thêm .cl-callrow phía trước là đủ hạng để thắng, không cần !important. */
/* Cao bằng cặp "Thêm vào giỏ / Mua ngay" ngay phía trên (54px, mobile 50px). */
.cl-callrow .button.cl-callbtn {
	display: flex;
	border-radius: 0;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: 54px;
	margin: 0;
	padding: 0 12px;
	border-width: 1.5px;
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.2;
	text-transform: none;
}

.cl-callrow .button.cl-callbtn::before {
	content: "";
	display: block;
	flex: none;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask: var(--cl-icon) center/contain no-repeat;
	mask: var(--cl-icon) center/contain no-repeat;
}

.cl-callrow .button.cl-callbtn--phone {
	--cl-icon: url("../icons/phone.svg");
	border-color: var(--cl-line);
	background-color: #fff;
	color: var(--cl-ink);
}

.cl-callrow .button.cl-callbtn--phone:hover {
	border-color: var(--cl-ink);
	background-color: var(--cl-ink);
	color: #fff;
}

.cl-callrow .button.cl-callbtn--zalo {
	border-color: var(--cl-line);
	background-color: #fff;
	color: var(--cl-ink);
}

/* Logo Zalo nhiều màu: mask chỉ giữ kênh alpha nên phải vẽ bằng background. */
.cl-callrow .button.cl-callbtn--zalo::before {
	-webkit-mask: none;
	mask: none;
	background: url("../icons/zalo.svg") center/contain no-repeat;
}

.cl-callrow .button.cl-callbtn--zalo:hover {
	border-color: var(--cl-ink);
	background-color: var(--cl-ink);
	color: #fff;
}

/* --- 18.7 Dải cam kết dưới form mua hàng (UX Block "cam-ket-san-pham") ----- */

/* flatsome.css đặt .section{padding:30px}; thuộc tính padding của shortcode chỉ
   ghi phần dọc nên 30px ngang còn nguyên, làm hai khối này thụt vào so với hàng
   nút mua hàng ngay phía trên. */
.cl-assure.section,
.cl-callrow.section {
	padding-left: 0;
	padding-right: 0;
}

.cl-assure {
	margin-top: 18px;
	padding-top: 16px;
}

/* .icon-box{padding:0 3%!important} của Flatsome buộc phải ghi đè kèm !important. */
.cl-assure .icon-box {
	align-items: center;
	flex-wrap: nowrap;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.cl-assure .icon-box-img {
	width: 42px !important;
	margin: 0;
}

.cl-assure .icon-box-img .icon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background-color: #f5f1ea;
}

.cl-assure .icon-box-img img {
	width: 21px;
	height: 21px;
	padding-top: 0;
}

/* .icon-box-left .icon-box-text{padding-left:1rem} là (0,3,0) — phải đủ hạng để thắng. */
.cl-assure .icon-box.icon-box-left .icon-box-text {
	flex: 0 1 auto;
	padding: 0 0 0 12px;
}

.cl-assure .icon-box-text h5 {
	margin: 0 0 2px;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

/* Nội dung của [featured_box] là text trần, không có <p> bao ngoài. */
.cl-assure .icon-box-text,
.cl-assure .icon-box-text p {
	margin: 0;
	color: var(--cl-muted);
	font-size: 13px;
	line-height: 1.5;
}

/* --- 18.7 Tab thông tin sản phẩm ------------------------------------------ */

/* flatsome-shop.css: .product-footer .woocommerce-tabs{border-top:1px solid #ececec} */
.product-footer .woocommerce-tabs {
	border-top: 0;
}

.woocommerce-tabs .product-tabs {
	margin: 0 0 22px;
	border-bottom: 1px solid var(--cl-line);
}

.woocommerce-tabs .product-tabs>li {
	margin: 0;
}

.woocommerce-tabs .product-tabs>li>a {
	position: relative;
	padding: 0 2px 14px;
	margin-right: 34px;
	border: 0;
	color: var(--cl-muted);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* Flatsome dat ::before o canh tren; phai tra top ve auto moi keo xuong duoi duoc. */
.woocommerce-tabs .product-tabs>li>a::before {
	content: "";
	position: absolute;
	top: auto;
	right: 0;
	bottom: -1px;
	left: 0;
	width: auto;
	height: 2px;
	background-color: transparent;
	opacity: 1;
	transform: none;
}

.woocommerce-tabs .product-tabs>li>a:hover {
	color: var(--cl-ink);
}

.woocommerce-tabs .product-tabs>li.active>a {
	color: var(--cl-accent);
}

.woocommerce-tabs .product-tabs>li.active>a::before {
	background-color: var(--cl-accent);
}

.woocommerce-tabs .tab-panels {
	color: var(--cl-body);
	font-size: 16px;
	line-height: 1.85;
}

.woocommerce-tabs .tab-panels h2,
.woocommerce-tabs .tab-panels h3 {
	font-size: 19px;
}

/* Bảng thuộc tính trong tab "Thông tin bổ sung". */
.woocommerce-product-attributes.shop_attributes {
	width: 100%;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
}

.woocommerce-product-attributes.shop_attributes th,
.woocommerce-product-attributes.shop_attributes td {
	padding: 12px 18px;
	border: 0;
	border-bottom: 1px solid var(--cl-line);
	font-size: 16px;
	text-align: left;
}

.woocommerce-product-attributes.shop_attributes tr:last-child th,
.woocommerce-product-attributes.shop_attributes tr:last-child td {
	border-bottom: 0;
}

.woocommerce-product-attributes.shop_attributes th {
	width: 40%;
	background-color: #f7f4ef;
	color: var(--cl-ink);
	font-weight: 600;
}

.woocommerce-product-attributes.shop_attributes td p {
	margin: 0;
}

/* --- 18.8 Sản phẩm liên quan ---------------------------------------------- */

/* flatsome-shop.css: .product-section{border-top:1px solid #ececec} */
.product-section {
	border-top: 0;
}

.related.product-section {
	padding-top: 0;
}

/* Tiêu đề canh giữa, cùng kiểu với tiêu đề khối ở trang chủ (.cl-title). */
.product-section-title-related {
	margin: 0 0 26px;
	padding: 0;
	color: var(--cl-ink);
	font-size: 1.35rem;
	font-weight: 600;
	letter-spacing: 0.045em;
	text-align: center;
	text-transform: uppercase;
}

/* Nút prev/next dùng chung bộ luật với slider sản phẩm trang chủ (mục 12) —
   template related.php/up-sells.php của child theme đã đổi slider_style sang
   simple + outside nên không còn kiểu "reveal" để phải gỡ. */



/* --- 18.9 Responsive ------------------------------------------------------ */

@media (max-width: 849px) {
	.single-product .product-title.product_title {
		font-size: 25px;
	}

	.price.product-page-price,
	.price.product-page-price .amount {
		font-size: 24px;
	}

	.cl-assure {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 549px) {
	.single-product .woocommerce-breadcrumb {
		margin-bottom: 16px;
		font-size: 14px;
	}

	.cl-callrow .button.cl-callbtn {
		min-height: 50px;
		gap: 6px;
		font-size: 14px;
	}

	.single-product .product-title.product_title {
		font-size: 22px;
	}

	.single-product .single_add_to_cart_button.button,
	.single-product .ux-buy-now-button.button {
		flex: 1 1 100%;
		min-width: 0;
		line-height: 48px;
	}

	/* small-nav-collapse xếp mỗi tab thành một hàng rộng hết cột: gạch chân theo <a>
	   sẽ kéo dài hết 360px. Cho <a> co lại bằng chữ và chuyển đường kẻ sang <li>. */
	.woocommerce-tabs .product-tabs {
		margin-bottom: 18px;
		border-bottom: 0;
	}

	.woocommerce-tabs .product-tabs>li {
		border-bottom: 1px solid var(--cl-line);
	}

	.woocommerce-tabs .product-tabs>li>a {
		margin-right: 0;
		padding: 11px 2px 11px 12px;
		font-size: 14px;
	}

	/* Gạch chân ngang sẽ kéo hết bề rộng hàng — đổi sang vạch dọc bên trái. */
	.woocommerce-tabs .product-tabs>li>a::before {
		top: 8px;
		right: auto;
		bottom: 8px;
		left: 0;
		width: 3px;
		height: auto;
		border-radius: 2px;
	}

	/* Khoảng cách giữa các mục trong cột thông tin, bóp thêm một nấc. */
	.single-product .product-title.product_title {
		margin-bottom: 6px;
	}

	.single-product .woocommerce-product-rating {
		margin-bottom: 8px;
	}

	.single-product .product-info.summary .price-wrapper {
		margin-bottom: 8px;
	}

	.single-product .product-short-description {
		margin-bottom: 12px;
	}

	.single-product table.variations {
		margin-bottom: 6px;
	}

	.single-product .woocommerce-variation-add-to-cart,
	.single-product form.cart:not(.variations_form) {
		gap: 8px;
	}

	.cl-assure {
		margin-top: 14px;
		padding-top: 12px;
	}

	/* Ảnh sản phẩm tràn hết bề ngang màn hình. */
	.single-product .product-images {
		margin-left: -15px;
		margin-right: -15px;
		border-radius: 0;
	}

	/* Breadcrumb: bóp sát thêm trên màn hẹp. */
	.single-product .product-page-title .page-title-inner {
		padding-top: 6px;
	}

	.single-product .woocommerce-breadcrumb {
		margin-bottom: 4px;
		font-size: 14px;
	}

	.single-product .woocommerce-breadcrumb .divider {
		margin: 0 5px;
	}

	/* Điện thoại: icon lên trên, chữ canh giữa — vẫn 2 hàng 2 cột. */
	.cl-assure .icon-box.icon-box-left {
		flex-direction: column;
		align-items: center;
		text-align: center;
	}

	.cl-assure .icon-box.icon-box-left .icon-box-text {
		padding: 8px 0 0;
	}

	.product-section-title-related {
		font-size: 1.15rem;
	}

}

/* ==========================================================================
   19. Giỏ hàng mini (off-canvas #cart-popup)
       Bọc bằng #cart-popup để thắng các rule (0,2,3) của flatsome-shop.css
       mà không phải rải !important.
   ========================================================================== */

#cart-popup .cart-popup-inner {
	padding: 22px 18px 0;
	background-color: #fff;
}

#cart-popup .cart-popup-title {
	margin-bottom: 4px;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--cl-line);
}

#cart-popup .cart-popup-title .heading-font {
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .08em;
}

#cart-popup .cart-popup-title .is-divider {
	display: none;
}

/* --- Dòng sản phẩm ------------------------------------------------------- */

#cart-popup ul.product_list_widget li {
	min-height: 0;
	padding: 14px 26px 14px 70px;
	border-bottom: 1px solid var(--cl-line);
}

#cart-popup ul.product_list_widget li:last-child {
	border-bottom: 0;
}

/* Flatsome kẻ thêm border-top xám cho li+li — chồng lên vạch của mình thành hai nét. */
#cart-popup ul.product_list_widget li+li {
	border-top: 0;
}

#cart-popup ul.product_list_widget li img {
	top: 14px;
	width: 56px;
	height: 56px;
	margin: 0;
	border: 1px solid var(--cl-line);
	border-radius: 0;
}

/* Tên sản phẩm gói đúng 2 dòng để mọi hàng cao bằng nhau. */
#cart-popup ul.product_list_widget li a:not(.remove) {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	margin-bottom: 8px;
	color: var(--cl-ink);
	font-size: 14.5px;
	font-weight: 600;
	line-height: 1.35;
	text-overflow: clip;
}

#cart-popup ul.product_list_widget li a:not(.remove):hover {
	color: var(--cl-accent);
}

/* --- Ô số lượng: cùng kiểu với trang sản phẩm, chỉ nhỏ hơn --------------- */

#cart-popup .ux-mini-cart-qty {
	margin-right: -26px;
	gap: 10px;
}

#cart-popup .ux-quantity.quantity {
	height: 30px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	overflow: hidden;
}

/* button_radius = 25px của Customizer in ra rule !important nên phải chọi lại. */
#cart-popup .ux-quantity .ux-quantity__button {
	width: 24px;
	height: 28px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
	background-color: transparent;
	box-shadow: none;
	color: var(--cl-body);
	font-size: 15px;
	font-weight: 400;
	line-height: 28px;
	text-shadow: none;
}

#cart-popup .ux-quantity .ux-quantity__button:hover {
	background-color: #f5f1ea;
	color: var(--cl-accent);
}

#cart-popup .ux-quantity input.qty {
	width: 28px;
	max-width: none;
	height: 28px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-ink);
	font-size: 13.5px;
	font-weight: 600;
	text-align: center;
}

#cart-popup .ux-mini-cart-qty .amount {
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
}

/* --- Tổng tiền và hai nút ------------------------------------------------ */

/* Vạch ngăn dùng luôn border-top của .ux-mini-cart-footer (chạy hết bề ngang
   panel), đổi màu cho hợp tông; .total tự kẻ thêm sẽ thành hai nét. */
#cart-popup .ux-mini-cart-footer {
	border-top-color: var(--cl-line);
}

#cart-popup .woocommerce-mini-cart__total {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 0 0 14px;
	padding: 18px 0 0;
	border-top: 0;
	border-bottom: 0;
}

#cart-popup .woocommerce-mini-cart__total strong {
	color: var(--cl-body);
	font-size: 15px;
	font-weight: 500;
}

#cart-popup .woocommerce-mini-cart__total .amount {
	color: var(--cl-accent);
	font-size: 19px;
	font-weight: 700;
}

#cart-popup .woocommerce-mini-cart__buttons {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 0;
	padding-bottom: 18px;
}

#cart-popup .woocommerce-mini-cart__buttons .button {
	width: 100%;
	min-height: 0;
	height: 44px;
	margin: 0;
	border: 0;
	font-size: 14px;
	letter-spacing: .04em;
	line-height: 44px;
}

#cart-popup .woocommerce-mini-cart__empty-message {
	padding: 40px 0;
	color: var(--cl-muted);
	text-align: center;
}


/* ==========================================================================
   20. Trang hệ thống cửa hàng (/cua-hang/)
   ========================================================================== */

/* --- 20.1 Banner đầu trang ----------------------------------------------- */

.cl-store-hero .banner-inner {
	padding: 0;
}

/* Màn phủ sáng dần từ trái: dưới 850px ảnh nền bị cắt hẹp nên phần hộp quà
   đỏ lọt vào ngay sau dòng chữ, không phủ thì chữ chìm hẳn. Dùng chung cho
   banner của trang đại lý và các trang giới thiệu / bộ sưu tập / liên hệ. */
@media (max-width: 849px) {

	/* Màn hẹp cắt ảnh sát vào giữa nên phải phủ đậm hơn cho chữ vẫn đọc được. */
	.cl-store-hero .banner-bg::after,
	.cl-page-hero .banner-bg::after {
		background:
			linear-gradient(100deg, rgba(10, 10, 10, 0.78) 0%, rgba(10, 10, 10, 0.66) 45%, rgba(10, 10, 10, 0.44) 100%),
			linear-gradient(180deg, rgba(10, 10, 10, 0.18) 0%, rgba(10, 10, 10, 0) 50%, rgba(10, 10, 10, 0.22) 100%);
	}
}

/* Đẩy khối chữ qua khỏi chiếc lồng đèn ở mép trái ảnh nền. */
@media (min-width: 850px) {

	.cl-store-hero .cl-store-hero__box,
	.cl-page-hero .cl-page-hero__box {
		margin-left: 90px;
	}
}

@media (min-width: 1200px) {

	.cl-store-hero .cl-store-hero__box,
	.cl-page-hero .cl-page-hero__box {
		margin-left: 140px;
	}
}

.cl-store-hero__title {
	color: #fff;
	font-weight: 700;
	letter-spacing: -0.01em;
}

.cl-store-hero__sub {
	margin-top: 10px;
	color: rgba(255, 255, 255, 0.82);
	font-weight: 400;
}

/* .cl-store-btn.button{margin:0} đứng sau trong file, cùng hạng (0,2,0) — phải
   thêm .button vào selector mới thắng được. */
.cl-store-hero .cl-store-btn.button {
	margin-top: 28px;
}

/* --- 20.2 Nút chung của trang -------------------------------------------- */

.cl-store-btn.button {
	margin: 0;
	padding: 0 30px;
	border: 0;
	background-color: var(--cl-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 46px;
}

.cl-store-btn.button:hover {
	background-color: var(--cl-accent-dark);
	box-shadow: 0 8px 20px rgba(17, 17, 17, 0.20);
}

.cl-store-btn--ghost.button {
	background-color: transparent;
	border: 1.5px solid rgba(255, 255, 255, 0.85);
	line-height: 43px;
}

.cl-store-btn--ghost.button:hover {
	background-color: #fff;
	border-color: #fff;
	color: var(--cl-accent);
	box-shadow: none;
}

/* --- 20.3 Tiêu đề mục canh trái (không có chấm + gạch) ------------------- */

.cl-store-h2.section-title-container {
	margin-bottom: 14px;
}

.cl-store-h2 .section-title-main {
	white-space: normal;
}

/* --- 20.4 Hàng thẻ "Vì sao" ---------------------------------------------- */

.cl-cardrow>.col {
	margin-bottom: 20px;
}

.cl-cardrow .col-inner {
	height: 100%;
}

/* Icon PNG mỗi cái một tỉ lệ nên cao thấp khác nhau, kéo tiêu đề trong hàng
   lệch theo — chốt chiều cao rồi để object-fit lo phần còn lại. */
.cl-cardrow .icon-box-img {
	margin-bottom: 12px;
}

.cl-cardrow .icon-box-img img {
	width: 100%;
	height: 58px;
	object-fit: contain;
	object-position: left center;
}

.cl-cardrow .icon-box-text h5 {
	margin: 0 0 6px;
	color: var(--cl-accent);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.35;
	text-transform: none;
}

.cl-cardrow .icon-box-text p {
	margin: 0;
	color: var(--cl-body);
	font-size: 14px;
	line-height: 1.5;
}

/* Email/URL dài không có chỗ ngắt, ô hẹp trên mobile là tràn ngay. */
.cl-cardrow .icon-box-text a,
.cl-cardrow .icon-box-text p {
	overflow-wrap: break-word;
}

/* --- 20.5 Ảnh minh hoạ hai cột ------------------------------------------- */

.cl-store-figure .img-inner {
	border-radius: 0;
	overflow: hidden;
	box-shadow: 0 10px 30px rgba(17, 17, 17, 0.10);
}

.cl-store-lead {
	margin-bottom: 18px;
	color: var(--cl-body);
	font-size: 16px;
	line-height: 1.75;
}

/* --- 20.6 Danh sách tích đỏ ---------------------------------------------- */

.cl-checklist ul {
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

.cl-checklist li {
	position: relative;
	margin: 0 0 12px !important;
	padding-left: 32px;
	color: var(--cl-ink);
	font-size: 16px;
	line-height: 1.5;
}

.cl-checklist li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 20px;
	border-radius: 50%;
	background-color: var(--cl-accent);
	background-image: var(--cl-check);
	background-position: center;
	background-repeat: no-repeat;
	background-size: 11px 11px;
}

/* --- 20.7 Quy trình 5 bước ----------------------------------------------- */

/* Lưới 12 cột không chia hết cho 5 — ép mỗi cột đúng 1/5 chiều ngang. */
.cl-steps>.col {
	flex-basis: 20%;
	max-width: 20%;
	padding-bottom: 0;
}

.cl-steps {
	position: relative;
}

/* .icon-box-img là block rộng đúng img_width — không auto thì nó dính mép trái. */
.cl-steps .icon-box-img {
	margin: 0 auto 14px;
}

.cl-steps .icon-box-img .icon-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 66px;
	height: 66px;
	margin: 0 auto;
	border-radius: 50%;
	background-color: #f0ece6;
}

.cl-steps .icon-box-img img {
	width: 34px;
	height: 34px;
	padding: 0;
}

.cl-steps .icon-box,
.cl-steps .icon-box-text {
	text-align: center;
}

.cl-steps .icon-box-text h5 {
	margin: 0 0 4px;
	color: var(--cl-body);
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: 0;
	text-transform: none;
}

.cl-steps .icon-box-text strong {
	display: block;
	margin-bottom: 6px;
	color: var(--cl-accent);
	font-size: 14.5px;
	font-weight: 700;
	line-height: 1.3;
}

.cl-steps .icon-box-text span {
	display: block;
	color: var(--cl-muted);
	font-size: 13px;
	line-height: 1.5;
}

.cl-steps .icon-box-text p {
	margin: 0;
}

/* Mũi tên nối hai bước: đặt trên .col (mép trái .col chính là ranh giới giữa
   hai cột, tức đúng điểm giữa hai vòng tròn) chứ không phải .col-inner. */
.cl-steps>.col {
	position: relative;
}

/* Hộp phải VUÔNG: icon có viewBox 24×24 nên mask "contain" lấy cạnh ngắn làm
   chuẩn — hộp dẹt 26×10 thu mũi tên xuống còn đúng 10px. */
.cl-steps>.col+.col::before {
	content: "";
	position: absolute;
	left: 0;
	top: 33px;
	width: 40px;
	height: 40px;
	transform: translate(-50%, -50%);
	background-color: var(--cl-accent);
	-webkit-mask: url("../icons/arrow-right.svg") center/contain no-repeat;
	mask: url("../icons/arrow-right.svg") center/contain no-repeat;
}

/* --- 20.8 Bốn ô hỗ trợ ---------------------------------------------------- */

.cl-support>.col {
	margin-bottom: 10px;
}

.cl-support .col-inner {
	height: 100%;
}

.cl-support .icon-box {
	align-items: flex-start;
	flex-wrap: nowrap;
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.cl-support .icon-box-img {
	width: 40px !important;
	margin: 0;
}

.cl-support .icon-box.icon-box-left .icon-box-text {
	flex: 1 1 auto;
	padding: 0 0 0 12px;
}

.cl-support .icon-box-text h5 {
	margin: 0 0 4px;
	color: var(--cl-accent);
	font-size: 14.5px;
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1.3;
	text-transform: none;
}

.cl-support .icon-box-text p {
	margin: 0;
	color: var(--cl-body);
	font-size: 13.5px;
	line-height: 1.5;
}

/* --- 20.9 Dải kêu gọi cuối trang ----------------------------------------- */

.cl-store-cta__title {
	color: #fff;
	font-weight: 700;
	text-transform: uppercase;
}

.cl-store-cta__sub {
	margin-top: 12px;
	margin-bottom: 22px;
	color: rgba(255, 255, 255, 0.85);
}

/* --- 20.10 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {
	.cl-steps>.col {
		flex-basis: 33.3333%;
		max-width: 33.3333%;
		margin-bottom: 22px;
	}

	.cl-steps>.col+.col::before {
		display: none;
	}

	.cl-store-figure .img-inner {
		box-shadow: 0 8px 22px rgba(17, 17, 17, 0.09);
	}
}

@media (max-width: 549px) {
	.cl-store-hero__sub {
		margin-top: 6px;
	}

	.cl-store-hero .cl-store-btn.button {
		margin-top: 20px;
	}

	.cl-store-btn.button {
		padding: 0 22px;
		font-size: 12.5px;
		line-height: 42px;
	}

	.cl-store-btn--ghost.button {
		line-height: 39px;
	}

	.cl-steps>.col {
		flex-basis: 50%;
		max-width: 50%;
		margin-bottom: 18px;
	}

	.cl-cardrow>.col {
		margin-bottom: 12px;
	}

	.cl-checklist li {
		margin-bottom: 10px;
		font-size: 15px;
	}
}


/* ==========================================================================
   21. Trang tin tức và chi tiết bài viết
   ========================================================================== */

/* --- 21.1 Tiêu đề trang -------------------------------------------------- */

.cl-blog-title.section-title-container {
	margin: 0 0 26px;
	padding-top: 28px;
}

/* --- 21.2 Thẻ bài viết trên trang danh sách ------------------------------ */

/* Bố cục "inline" của Flatsome thả ảnh bằng float; dựng lại thành lưới hai cột
   để ảnh chiếm trọn chiều cao thẻ và phần chữ không bị đẩy xuống dưới ảnh. */
#post-list article.post {
	margin-bottom: 22px;
	padding-bottom: 0;
	border-bottom: 0;
}

#post-list article.post .article-inner {
	display: grid;
	grid-template-columns: 290px minmax(0, 1fr);
	grid-template-areas:
		"img head"
		"img body"
		"img foot";
	align-content: start;
	column-gap: 24px;
	padding: 16px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	transition: box-shadow 0.25s, border-color 0.25s;
}

#post-list article.post .article-inner:hover {
	border-color: var(--cl-tan-soft);
	box-shadow: 0 10px 26px rgba(17, 17, 17, 0.08);
}

/* Flatsome khoa .entry-image-float o max-width:50% (dung cho bo cuc float);
   trong luoi thi phai mo ra, khong anh chi rong bang nua cot. */
#post-list .entry-image-float {
	grid-area: img;
	float: none;
	width: auto;
	max-width: none;
	min-height: 186px;
	margin: 0;
}

#post-list .entry-image-float a {
	display: block;
	height: 100%;
	border-radius: 0;
	overflow: hidden;
}

#post-list .entry-image-float img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.45s;
}

#post-list article.post .article-inner:hover .entry-image-float img {
	transform: scale(1.05);
}

#post-list .entry-header {
	grid-area: head;
	margin-bottom: 0;
	padding-bottom: 0;
}

header.entry-header .entry-header-text {
	padding-bottom: 0;
}

/* Flatsome đệm .entry-content 24px trên/dưới cho bố cục một cột — trong thẻ
   lưới thì thành khoảng hở lớn giữa dòng meta và đoạn mô tả. */
#post-list .entry-content {
	grid-area: body;
	padding: 0;
}

#post-list .article-inner>div.clearfix {
	display: none;
}

/* Chan the chi lap lai chuyen muc (da co o nhan tren tieu de) va mot link binh
   luan tro troi — bo han cho the gon. */
#post-list .article-inner>footer.entry-meta {
	display: none;
}

/* --- 21.3 Chữ trong thẻ bài viết ----------------------------------------- */

.entry-category.is-xsmall {
	margin: 0 0 7px;
}

.entry-category a {
	color: var(--cl-tan);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.entry-category a:hover {
	color: var(--cl-accent);
}

#post-list .entry-title {
	margin: 0 0 8px;
	font-size: 20px;
	line-height: 1.35;
}

#post-list .entry-title a {
	color: var(--cl-ink);
}

#post-list .entry-title a:hover {
	color: var(--cl-accent);
}

.entry-header .entry-divider {
	display: none;
}

.entry-header .entry-meta.uppercase {
	margin: 0 0 12px;
	color: var(--cl-muted);
	font-size: 13px;
	letter-spacing: 0;
	text-transform: none;
}

#post-list .entry-summary p {
	margin: 0 0 14px;
	color: var(--cl-body);
	font-size: 15px;
	line-height: 1.7;
}

#post-list .more-link.button {
	min-height: 0;
	margin: 0 0 4px;
	padding: 0 18px;
	border: 1px solid var(--cl-accent);
	border-radius: 0;
	background: none;
	color: var(--cl-accent);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 32px;
}

#post-list .more-link.button:hover {
	background-color: var(--cl-accent);
	border-color: var(--cl-accent);
	box-shadow: none;
	color: #fff;
}

/* --- 21.4 Thanh bên ------------------------------------------------------ */

.widget-area .widget {
	margin: 0 0 18px;
	padding: 18px 15px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
}

.widget-area .widget .widget-title,
.widget-area .widget .wp-block-heading,
.widget-area .widget .wp-block-search__label {
	display: block;
	margin: 0 0 12px;
	padding: 0;
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 1.3;
	text-transform: uppercase;
}

.widget-area .widget .is-divider {
	display: none;
}

.widget-area .widget ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.widget-area .widget li {
	margin: 0;
	padding: 8px 0;
	border-bottom: 1px solid var(--cl-line);
	line-height: 1.5;
}

.widget-area .widget li:first-child {
	padding-top: 0;
}

.widget-area .widget li:last-child {
	padding-bottom: 0;
	border-bottom: 0;
}

.widget-area .widget li a {
	color: var(--cl-ink);
	font-size: 14.5px;
}

.widget-area .widget li a:hover {
	color: var(--cl-accent);
}

/* Widget "Bài viết mới": bỏ vạch ngăn giữa các mục, ảnh cắt tròn.
   Ảnh nằm ở background của .badge-inner, đặt bằng thuộc tính style trên thẻ nên
   background-position phải !important mới đè được inline. */
.widget-area .flatsome_recent_posts li,
.widget-area .wp-block-latest-posts__list li {
	padding-bottom: 0;
	border-top: 0;
	border-bottom: 0;
}

.widget-area .recent-blog-posts {
	padding: 0;
	justify-content: space-between !important;
	align-items: center !important;
}

.widget-area .recent-blog-posts .badge,
.widget-area .recent-blog-posts .badge-inner {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	overflow: hidden;
}

.widget-area .recent-blog-posts .badge-inner {
	padding: 0;
	background-position: center !important;
}

/* Ô tìm kiếm: nút của block search cao theo cả cụm nên phải ép chiều cao lại.
   Form và input đều dính margin-bottom 1em của rule .button,button,input,... */
.widget-area form.wp-block-search {
	margin-bottom: 0;
}

.widget-area .wp-block-search__inside-wrapper {
	gap: 8px;
}

.widget-area .wp-block-search__input {
	height: 42px;
	margin-bottom: 0;
	padding: 0 14px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	font-size: 14.5px;
}

.widget-area .wp-block-search__button {
	flex: none;
	min-height: 0;
	height: 42px;
	margin: 0;
	padding: 0 18px;
	border: 0;
	border-radius: 0;
	background-color: var(--cl-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 42px;
	white-space: nowrap;
}

.widget-area .wp-block-search__button:hover {
	background-color: var(--cl-accent-dark);
}

/* Widget sản phẩm của WooCommerce trong thanh bên tin tức. */
/* Anh nam trong the <a> cung voi ten san pham nen khong flex tach ra duoc;
   giu co che anh absolute cua WooCommerce, chi doi kich thuoc. */
/* Ảnh định vị tuyệt đối ở top:12px, nên mọi dòng phải có đúng padding-top 12px.
   flatsome.css cho li:first-child padding-top 0 → dòng đầu ảnh tụt xuống 12px so
   với tên sản phẩm. */
.widget-area .product_list_widget li,
.widget-area .product_list_widget li:first-child {
	position: relative;
	display: block;
	min-height: 66px;
	padding: 12px 0 12px 66px;
}

.widget-area .product_list_widget li img {
	position: absolute;
	left: 0;
	top: 12px;
	width: 54px;
	height: 54px;
	margin: 0;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	object-fit: cover;
}

.widget-area .product_list_widget li a:not(.remove) {
	display: block;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.35;
}

.widget-area .product_list_widget .product-title {
	display: block;
	margin-bottom: 3px;
}

.widget-area .product_list_widget .star-rating {
	margin: 2px 0;
	font-size: 11px;
}

.widget-area .product_list_widget .amount {
	color: var(--cl-accent);
	font-size: 14px;
	font-weight: 700;
}

/* --- 21.5 Chi tiết bài viết ---------------------------------------------- */

.single-post .entry-content.single-page {
	font-size: 16px;
	line-height: 1.8;
}

.single-post .entry-content.single-page p {
	margin-bottom: 18px;
	color: var(--cl-body);
	font-size: 16px;
}

.single-post .entry-content.single-page h2,
.single-post .entry-content.single-page h3 {
	margin: 26px 0 10px;
	color: var(--cl-accent);
	font-size: 20px;
	line-height: 1.35;
}

.single-post .entry-title {
	color: var(--cl-ink);
	font-size: 30px;
	line-height: 1.3;
}

.single-post .blog-share {
	margin-top: 26px;
}

.single-post .blog-share .is-divider {
	display: none;
}

/* Hộp tác giả (tuỳ chọn "Blog author box" của Flatsome). */
.entry-author.author-box {
	margin: 26px 0 0;
	padding: 20px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: var(--cl-card);
}

.entry-author.author-box .blog-author-image img {
	border: 1px solid var(--cl-line);
	border-radius: 50%;
}

.entry-author.author-box .author-name {
	margin: 0 0 6px;
	padding: 0;
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
}

.entry-author.author-box .author-name a.cl-author-link {
	color: var(--cl-accent);
}

.entry-author.author-box .author-name a.cl-author-link:hover {
	color: var(--cl-accent-dark);
	text-decoration: underline;
}

.entry-author.author-box .author-desc {
	margin: 0;
	color: var(--cl-body);
	font-size: 14.5px;
	line-height: 1.7;
}

/* Dạng link chữ thường, không phải nút. display:block + fit-content để nó nằm
   riêng một dòng dưới đoạn mô tả chứ không nối đuôi câu. */
.entry-author.author-box .cl-author-btn.button {
	display: block;
	width: fit-content;
	min-height: 0;
	margin: 10px 0 0;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-accent);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1.5;
	text-decoration: underline;
	text-transform: none;
}

.entry-author.author-box .cl-author-btn.button:hover {
	background: none;
	box-shadow: none;
	color: var(--cl-accent-dark);
}

/* Hộp tác giả ở đầu trang lưu trữ tác giả.
   flatsome_before_blog nằm ngoài .row nên phải tự bọc .container, không thì
   hộp chạy hết chiều ngang màn hình. */
.cl-author-archive__wrap {
	margin-bottom: 26px;
	padding-top: 0;
}

/* .entry-author.author-box đặt margin-top 26px cho hộp ở trang bài viết — ở đây
   thừa, mà lại thiếu khoảng cách xuống danh sách bài. */
.entry-author.cl-author-archive {
	margin: 0;
}

.cl-author-archive .author-name {
	color: var(--cl-accent);
	font-size: 17px;
}

.cl-author-archive .cl-author-count {
	margin: 10px 0 0;
	color: var(--cl-muted);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.03em;
	text-transform: uppercase;
}

/* Điều hướng bài trước / bài sau. */
.navigation-post .next-prev-nav {
	margin-top: 22px;
	border-top: 1px solid var(--cl-line);
	border-bottom: 1px solid var(--cl-line);
}

/* Tiêu đề dài xuống hai dòng: giữ mũi tên thành một cột riêng canh giữa theo
   chiều dọc, chữ không chạy vòng xuống dưới mũi tên. */
.navigation-post .nav-previous>a,
.navigation-post .nav-next>a {
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 16px 14px;
	line-height: 1.5;
}

.navigation-post .nav-next>a {
	justify-content: flex-end;
	text-align: right;
}

.navigation-post .nav-previous i,
.navigation-post .nav-next i {
	flex: none;
	margin: 0;
	font-size: 18px;
}

.navigation-post a {
	color: var(--cl-body);
	font-size: 14.5px;
}

.navigation-post a:hover {
	color: var(--cl-accent);
}

/* --- 21.6 Bài viết liên quan --------------------------------------------- */

.cl-related-posts {
	margin-top: 34px;
}

.cl-related-posts__title {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 18px;
	color: var(--cl-accent);
	font-size: 19px;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cl-related-posts__title::after {
	content: "";
	flex: 1 1 auto;
	height: 1px;
	background: linear-gradient(90deg, var(--cl-tan-soft), rgba(231, 221, 206, 0.35));
}

.cl-related-posts__grid .col {
	padding-bottom: 24px;
}

/* [blog_posts] chèn sẵn một <div class="is-divider"> dưới phần meta. */
.cl-subscribe .is-divider,
.cl-related-posts__grid .is-divider {
	display: none;
}

/* --- 21.7 Responsive ----------------------------------------------------- */

@media (min-width: 850px) {
	.post-sidebar.large-3.col {
		padding-left: 0;
	}
}

@media (max-width: 849px) {
	#post-list article.post .article-inner {
		grid-template-columns: 210px minmax(0, 1fr);
		column-gap: 18px;
		padding: 14px;
	}

	#post-list .entry-image-float {
		min-height: 160px;
	}

	#post-list .entry-title {
		font-size: 18px;
	}
}

@media (max-width: 549px) {
	.cl-blog-title.section-title-container {
		margin-bottom: 18px;
		padding-top: 20px;
	}

	#post-list article.post .article-inner {
		grid-template-columns: minmax(0, 1fr);
		grid-template-areas:
			"img"
			"head"
			"body"
			"foot";
		row-gap: 14px;
		padding: 12px;
	}

	#post-list .entry-image-float {
		min-height: 0;
		aspect-ratio: 16 / 10;
	}

	#post-list .entry-title {
		font-size: 17px;
	}

	#post-list .entry-summary p {
		font-size: 14.5px;
	}

	.single-post .entry-title {
		font-size: 23px;
	}

	.entry-author.author-box {
		padding: 16px;
	}

	.cl-related-posts__title {
		font-size: 17px;
	}
}


/* ==========================================================================
   22. Giới thiệu / Bộ sưu tập / Liên hệ
       Dùng chung nhiều thành phần với trang đại lý (mục 17).
   ========================================================================== */

/* --- 22.1 Banner đầu trang ----------------------------------------------- */

.cl-page-hero .banner-inner {
	padding: 0;
}

/* Lớp phủ dạng dải chuyển mềm: đậm ở mép trái nơi đặt chữ rồi tan dần sang phải,
   thay cho một lớp đen phẳng vốn tạo ranh giới cứng giữa hai nửa ảnh. */
.cl-page-hero .banner-bg::after,
.cl-store-hero .banner-bg::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background:
		linear-gradient(100deg, rgba(10, 10, 10, 0.72) 0%, rgba(10, 10, 10, 0.6) 24%, rgba(10, 10, 10, 0.36) 50%, rgba(10, 10, 10, 0.13) 76%, rgba(10, 10, 10, 0.03) 100%),
		linear-gradient(180deg, rgba(10, 10, 10, 0.16) 0%, rgba(10, 10, 10, 0) 46%, rgba(10, 10, 10, 0.2) 100%);
}

/* [title] tự gắn .container + hai thanh <b> của kiểu "normal"; gỡ hết để tiêu
   đề nằm đúng lưới và không có gạch ngang chạy qua chữ. */
.cl-page-hero__title.section-title-container {
	max-width: none;
	padding: 0;
	margin: 0;
}

.cl-page-hero__title .section-title {
	display: block;
	border: 0;
	margin: 0;
}

.cl-page-hero__title .section-title b {
	display: none;
}

.cl-page-hero__title .section-title span {
	border: 0;
	padding: 0;
	color: #fff;
	font-size: clamp(2rem, 4vw, 3.2rem);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cl-page-hero__sub {
	margin-top: 12px;
	color: rgba(255, 255, 255, 0.82);
	font-size: 1rem;
	font-weight: 400;
	max-width: 520px;
}

/* --- 22.2 Dải con số (trang giới thiệu) ---------------------------------- */

.cl-stats .cl-stat {
	margin: 0;
}

.cl-stats .cl-stat strong {
	display: block;
	margin-bottom: 6px;
	color: var(--cl-ink);
	font-size: 2.4rem;
	font-weight: 600;
	line-height: 1.1;
	letter-spacing: -0.01em;
}

.cl-stats .cl-stat span {
	display: block;
	color: var(--cl-body);
	font-size: 0.88rem;
	line-height: 1.4;
}

/* --- 22.3 Quy trình 4 bước ----------------------------------------------- */

.cl-steps--4>.col {
	flex-basis: 25%;
	max-width: 25%;
}

/* --- 22.4 Trang bộ sưu tập ----------------------------------------------- */

.cl-collection-lead {
	max-width: 760px;
	margin: -6px 0 18px;
	color: var(--cl-body);
	font-size: 15.5px;
	line-height: 1.75;
}

.cl-collection-lead--center {
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 22px;
	text-align: center;
}

/* Thẻ bộ sưu tập: tên và mô tả nằm trong cùng một .box-text nên phải tách dòng. */
.cl-collection-card .box-text {
	padding: 16px 2px 0;
	text-align: left;
}

.cl-collection-card .box-text strong {
	display: block;
	margin-bottom: 6px;
	color: var(--cl-ink);
	font-size: 0.92rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.cl-collection-card .box-text span {
	display: block;
	color: var(--cl-body);
	font-size: 0.88rem;
	line-height: 1.65;
}

.cl-collection-card .box-image {
	background: var(--cl-sand);
	overflow: hidden;
}

.cl-collection-card .box-image img {
	transition: transform 0.7s ease;
}

.cl-collection-card:hover .box-image img {
	transform: scale(1.04);
}

.cl-collection-cta {
	justify-content: center;
}

.cl-collection-btn2.button {
	margin: 16px 0 0;
	padding: 0 26px;
	border: 1px solid var(--cl-ink);
	border-radius: 0;
	background: none;
	color: var(--cl-ink);
	font-size: 0.76rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	min-height: 0;
	line-height: 44px;
}

/* Cột mang .pb-0 để bỏ padding đáy 30px của Flatsome — desktop ba thẻ nằm cùng
   một hàng nên không cần. Xuống dưới 850px chúng xếp dọc, thiếu đúng khoảng đó
   nên nút của thẻ trên dính liền ảnh của thẻ dưới. Khoảng cách phải đặt ở phần
   tử CUỐI cột (cái nút), và phải khai SAU luật `margin:16px 0 0` ở trên: media
   query không cộng specificity nên cùng hạng (0,2,0) thì luật sau thắng. */
@media (max-width: 849px) {

	.cl-collection-btn2.button {
		margin-bottom: 34px;
	}
}

.cl-collection-btn2.button:hover {
	background-color: var(--cl-ink);
	box-shadow: none;
	color: #fff;
}

/* --- 22.5 Trang liên hệ -------------------------------------------------- */

/* Bản đồ nhúng: khung tràn hết chiều ngang, cao cố định theo màn. */
.cl-contact-map iframe {
	width: 100%;
	height: 380px;
	border: 0;
	display: block;
	filter: grayscale(1) contrast(0.96);
}

.cl-contact-map:hover iframe {
	filter: none;
}

@media (max-width: 549px) {

	.cl-contact-map iframe {
		height: 280px;
	}
}

/* Thẻ thông tin liên hệ: mỗi dòng là một [featured_box], cần khoảng cách rõ. */
.cl-cardrow .icon-box+.icon-box {
	margin-top: 18px;
	padding-top: 18px;
	border-top: 1px solid rgba(17, 17, 17, 0.08);
}


.cl-contact-note ul {
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}

.cl-contact-note li {
	position: relative;
	margin: 0 0 10px !important;
	padding-left: 16px;
	color: var(--cl-body);
	font-size: 15px;
	line-height: 1.6;
}

.cl-contact-note li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--cl-tan);
}

.cl-contact-note strong {
	color: var(--cl-ink);
}

/* --- 22.6 Form liên hệ ---------------------------------------------------- */

.cl-form {
	margin: 4px 0 0;
}

.cl-form__row {
	display: flex;
	flex-wrap: wrap;
	gap: 0 16px;
}

.cl-form__row .cl-form__field {
	flex: 1 1 200px;
	min-width: 0;
}

.cl-form__field {
	display: block;
	margin-bottom: 14px;
}

.cl-form__label {
	display: block;
	margin-bottom: 6px;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 600;
}

.cl-form__label b {
	color: var(--cl-accent);
	font-weight: 700;
}

.cl-form input[type="text"],
.cl-form input[type="tel"],
.cl-form input[type="email"],
.cl-form textarea {
	width: 100%;
	margin: 0;
	padding: 0 14px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--cl-ink);
	font-size: 15px;
}

.cl-form input[type="text"],
.cl-form input[type="tel"],
.cl-form input[type="email"] {
	height: 46px;
}

.cl-form textarea {
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.6;
	resize: vertical;
}

.cl-form input:focus,
.cl-form textarea:focus {
	border-color: var(--cl-ink);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
	outline: none;
}

/* Ô đang sai: viền đỏ + câu nhắc ngay dưới, do JS chèn vào. */
.cl-form__field.is-invalid input,
.cl-form__field.is-invalid textarea {
	border-color: var(--cl-accent);
	background-color: #f7f4ef;
}

.cl-form__field.is-invalid input:focus,
.cl-form__field.is-invalid textarea:focus {
	border-color: var(--cl-accent);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, .10);
}

.cl-form__error {
	display: block;
	margin-top: 6px;
	color: var(--cl-accent);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}

/* Ô bẫy bot — [hidden] của UA thua display của author style nên phải khoá riêng. */
.devvn-trap,
.cl-form__trap {
	display: none;
}

.cl-form__submit.button {
	min-height: 0;
	margin: 6px 0 0;
	padding: 0 32px;
	border: 0;
	background-color: var(--cl-accent);
	color: #fff;
	font-size: 13.5px;
	font-weight: 700;
	letter-spacing: 0.05em;
	line-height: 48px;
}

.cl-form__submit.button:hover {
	background-color: var(--cl-accent-dark);
	box-shadow: 0 8px 20px rgba(17, 17, 17, 0.20);
}

/* Trạng thái đang gửi AJAX: khoá nút và thêm vòng xoay. */
.cl-form.is-sending .cl-form__submit.button {
	opacity: .75;
	cursor: progress;
}

.cl-form.is-sending .cl-form__submit.button::after {
	content: "";
	display: inline-block;
	width: 14px;
	height: 14px;
	margin-left: 10px;
	border: 2px solid rgba(255, 255, 255, .45);
	border-top-color: #fff;
	border-radius: 50%;
	vertical-align: -2px;
	animation: cl-spin .7s linear infinite;
}

@keyframes cl-spin {
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.cl-form.is-sending .cl-form__submit.button::after {
		animation-duration: 2s;
	}
}

.cl-form.is-sending input,
.cl-form.is-sending textarea {
	opacity: .8;
}

.cl-form__notice {
	margin: 0 0 16px;
	padding: 12px 16px;
	border-radius: 0;
	font-size: 14.5px;
	line-height: 1.6;
}

.cl-form__notice.is-ok {
	border: 1px solid #bfe3c4;
	background-color: #f0faf1;
	color: #256b30;
}

.cl-form__notice.is-error {
	border: 1px solid #f1c9c7;
	background-color: #f5f1ea;
	color: var(--cl-accent);
}

/* --- 22.7 Responsive ----------------------------------------------------- */

@media (max-width: 849px) {
	.cl-stats .cl-stat {
		margin-bottom: 18px;
	}

	.cl-stats .cl-stat strong {
		font-size: 32px;
	}

	.cl-steps--4>.col {
		flex-basis: 50%;
		max-width: 50%;
	}
}

@media (max-width: 549px) {
	.cl-page-hero__sub {
		margin-top: 5px;
	}

	.cl-stats .cl-stat strong {
		font-size: 27px;
	}

	.cl-stats .cl-stat span {
		font-size: 13px;
	}

	.cl-collection-lead {
		margin-bottom: 14px;
		font-size: 14.5px;
	}

	.cl-form__submit.button {
		width: 100%;
		padding: 0;
	}
}


/* ==========================================================================
   23. Trang phụ trợ: nội dung đơn giản, 404
   ========================================================================== */

/* --- 23.1 Trang chính sách / điều khoản (template mặc định) -------------- */

/* Container rộng 1290px, dòng chữ dài quá tầm mắt — bó lại cho dễ đọc. */
.page-template-default .page-wrapper .col-inner {
	max-width: 820px;
	margin: 0 auto;
	padding-top: 30px;
	padding-bottom: 44px;
}

.page-template-default .page-wrapper .entry-title {
	margin-bottom: 22px;
	color: var(--cl-accent);
	font-size: 26px;
	line-height: 1.3;
}

.page-template-default .page-wrapper .col-inner h2 {
	margin: 30px 0 12px;
	color: var(--cl-ink);
	font-size: 19px;
	line-height: 1.35;
}

.page-template-default .page-wrapper .col-inner p,
.page-template-default .page-wrapper .col-inner li {
	color: var(--cl-body);
	font-size: 16px;
	line-height: 1.8;
}

.page-template-default .page-wrapper .col-inner ul {
	margin: 0 0 18px;
	padding-left: 20px;
}

.page-template-default .page-wrapper .col-inner li {
	margin-bottom: 6px;
}

/* --- 23.2 Trang 404 ------------------------------------------------------ */

/* Nội dung ngắn nên footer bị treo lửng giữa màn hình; đệm thêm cho đủ cao. */
/* Chỉ đệm dọc — .container cần giữ padding ngang 15px, nếu không .row (margin
   âm 15px) sẽ thò ra hai bên. */
.error404 #primary.content-area {
	padding-top: 56px;
	padding-bottom: 100px;
}

.error404 .error-404 .medium-3 .header-font {
	color: var(--cl-tan);
}

.error404 .error-404 h1.page-title {
	margin-bottom: 12px;
	color: var(--cl-accent);
	font-size: 27px;
	line-height: 1.3;
}

.error404 .error-404 .page-content p {
	margin-bottom: 18px;
	color: var(--cl-body);
	font-size: 16px;
}

.error404 .error-404 .searchform-wrapper .submit-button {
	border-color: var(--cl-accent);
	background-color: var(--cl-accent);
	color: #fff;
}

/* --- 23.3 Trang kết quả tìm kiếm ----------------------------------------- */

.search-results .page-wrapper>.row-main {
	padding-top: 26px;
}

/* Kết quả tìm kiếm trộn cả bài viết và sản phẩm; Flatsome in ảnh đại diện ở cỡ
   "large" nguyên bản nên ảnh sản phẩm dọc chiếm nguyên màn hình. Ép về một thẻ
   ảnh trái – chữ phải gọn gàng. */
.search-results .article-inner {
	display: grid;
	grid-template-columns: 150px 1fr;
	grid-template-areas:
		"img head"
		"img body";
	column-gap: 22px;
	align-items: start;
	padding-bottom: 26px;
	margin-bottom: 26px;
	border-bottom: 1px solid var(--cl-line-soft);
	text-align: left;
}

/* Kết quả không có ảnh đại diện thì trả về một cột, khỏi chừa ô trống. */
.search-results .article-inner:not(:has(.entry-image-float)) {
	grid-template-columns: 1fr;
	grid-template-areas:
		"head"
		"body";
}

.search-results .entry-header {
	grid-area: head;
}

.search-results .entry-content,
.search-results .entry-summary {
	grid-area: body;
}

.search-results .entry-image-float {
	grid-area: img;
	width: 150px;
	max-width: 100%;
	margin: 0;
	float: none;
	background: var(--cl-sand);
	overflow: hidden;
}

.search-results .entry-image-float img {
	display: block;
	width: 100%;
	height: 190px;
	object-fit: cover;
}

.search-results .entry-header,
.search-results .entry-content {
	text-align: left;
}

.search-results .entry-title {
	margin: 0 0 8px;
	font-size: 1.1rem;
	line-height: 1.4;
}

.search-results .from_the_blog_excerpt,
.search-results .entry-content p {
	font-size: 0.92rem;
	line-height: 1.7;
	color: var(--cl-body);
}

@media (max-width: 549px) {

	.search-results .article-inner {
		grid-template-columns: 100px 1fr;
		column-gap: 14px;
	}

	.search-results .entry-image-float {
		width: 100px;
	}

	.search-results .entry-image-float img {
		height: 128px;
	}
}

/* --- 23.4 Responsive ----------------------------------------------------- */

@media (max-width: 549px) {
	.page-template-default .page-wrapper .col-inner {
		padding-top: 22px;
		padding-bottom: 32px;
	}

	.page-template-default .page-wrapper .entry-title {
		font-size: 21px;
	}

	.page-template-default .page-wrapper .col-inner h2 {
		margin-top: 24px;
		font-size: 17px;
	}

	.error404 #primary.content-area {
		padding-top: 34px;
		padding-bottom: 60px;
	}

	.error404 .error-404 h1.page-title {
		font-size: 22px;
	}
}

/* ==========================================================================
   24. Giỏ hàng và thanh toán
       Giữ nguyên bố cục của WooCommerce/Flatsome, chỉ khoác lại tông màu.
   ========================================================================== */

/* --- 24.1 Dải bước "Giỏ hàng › Thanh toán › Hoàn tất" --------------------- */

.checkout-page-title.page-title {
	margin-bottom: 8px;
	padding: 26px 0 22px;
	border-bottom: 1px solid var(--cl-line);
	background-color: transparent;
}

.checkout-page-title .page-title-inner {
	min-height: 0;
	padding: 0;
}

.checkout-breadcrumbs {
	gap: 10px;
	font-size: 17px;
}

.checkout-breadcrumbs a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	color: var(--cl-muted);
	font-weight: 600;
}

.checkout-breadcrumbs a.current {
	color: var(--cl-accent);
}

.checkout-breadcrumbs .breadcrumb-step {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	border-radius: 50%;
	background-color: #e7e3dd;
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	line-height: 1;
}

.checkout-breadcrumbs a.current .breadcrumb-step {
	background-color: var(--cl-accent);
}

.checkout-breadcrumbs .divider {
	display: inline-flex;
	align-items: center;
	color: var(--cl-tan);
	opacity: 1;
}

.checkout-breadcrumbs .divider i {
	font-size: 15px;
	font-weight: 700;
	opacity: 1;
}

/* --- 24.2 Giỏ hàng: bảng sản phẩm ---------------------------------------- */

/* .row-divided kẻ một vạch giữa hai cột — thừa khi hai bên đã thành thẻ. */
.woocommerce-cart .row-divided>.col+.col {
	border-left: 0;
}

.woocommerce-cart table.shop_table.cart {
	margin: 0;
	border: 0;
}

.woocommerce-cart table.shop_table.cart thead th {
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cl-line);
	color: var(--cl-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.woocommerce-cart table.shop_table.cart td {
	padding: 18px 0;
	border-bottom: 1px solid var(--cl-line);
	vertical-align: middle;
}

.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
	width: 72px;
	height: 72px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	object-fit: cover;
}

.woocommerce-cart td.product-name a {
	color: var(--cl-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1.4;
}

.woocommerce-cart td.product-name a:hover {
	color: var(--cl-accent);
}

.woocommerce-cart td.product-price,
.woocommerce-cart td.product-subtotal {
	color: var(--cl-ink);
	font-size: 15px;
}

.woocommerce-cart td.product-subtotal {
	color: var(--cl-accent);
	font-weight: 700;
}

/* --- 24.3 Ô số lượng trong giỏ ------------------------------------------- */

/* input[type=button].is-form là (0,2,1) — phải kẹp element vào selector mới thắng. */
.woocommerce-cart .ux-quantity.quantity {
	height: 38px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	overflow: hidden;
}

.woocommerce-cart .ux-quantity input.ux-quantity__button {
	width: 30px;
	height: 36px;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 0 !important;
	background-color: transparent;
	box-shadow: none;
	color: var(--cl-body);
	font-size: 17px;
	font-weight: 400;
	line-height: 36px;
	text-shadow: none;
}

.woocommerce-cart .ux-quantity input.ux-quantity__button:hover {
	background-color: #f5f1ea;
	color: var(--cl-accent);
}

.woocommerce-cart .ux-quantity input.qty {
	width: 36px;
	max-width: none;
	height: 36px;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	box-shadow: none;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 600;
	text-align: center;
}

/* --- 24.4 Mã ưu đãi và nút dưới bảng ------------------------------------- */

/* .cart td ở trên là (0,4,1) — hàng actions phải đủ hạng mới bỏ được vạch kẻ. */
.woocommerce-cart table.shop_table.cart td.actions {
	padding: 22px 0 0;
	border-bottom: 0;
}

.woocommerce-cart td.actions .coupon .widget-title {
	margin: 0 0 10px;
	color: var(--cl-accent);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.woocommerce-cart td.actions .coupon input.input-text {
	height: 46px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	font-size: 15px;
}

.woocommerce-cart td.actions button[name="apply_coupon"] {
	min-width: 120px;
	min-height: 0;
	margin: 0;
	white-space: nowrap;
	border: 1px solid var(--cl-accent);
	background: none;
	color: var(--cl-accent);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 44px;
}

.woocommerce-cart td.actions button[name="apply_coupon"]:hover {
	background-color: var(--cl-accent);
	box-shadow: none;
	color: #fff;
}

.woocommerce-cart .continue-shopping .button {
	min-height: 0;
	margin: 0;
	padding: 0 22px;
	border: 1px solid var(--cl-line);
	background: none;
	color: var(--cl-body);
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 40px;
}

.woocommerce-cart .continue-shopping .button:hover {
	border-color: var(--cl-accent);
	box-shadow: none;
	color: var(--cl-accent);
}

/* --- 24.5 Ô tổng tiền của giỏ -------------------------------------------- */

.cart_totals {
	padding: 24px 24px 26px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: var(--cl-card);
}

/* Tiêu đề thật là <th> do Flatsome in ra; <h2> bị display:none. */
.cart_totals h2,
.cart_totals>table:first-child thead th {
	padding: 0 0 14px;
	border-bottom: 1px solid var(--cl-line);
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-align: left;
	text-transform: uppercase;
}

.cart_totals>table:first-child {
	margin: 0 0 4px;
	border: 0;
}

.cart_totals table.shop_table {
	margin: 0;
	border: 0;
}

.cart_totals table.shop_table th,
.cart_totals table.shop_table td {
	padding: 13px 0;
	border-bottom: 1px solid var(--cl-line);
	color: var(--cl-body);
	font-size: 15px;
	font-weight: 400;
	text-transform: none;
}

.cart_totals table.shop_table td {
	text-align: right;
}

.cart_totals tr.order-total th,
.cart_totals tr.order-total td {
	border-bottom: 0;
	color: var(--cl-ink);
	font-size: 16px;
	font-weight: 700;
}

.cart_totals tr.order-total td .amount {
	color: var(--cl-accent);
	font-size: 19px;
}

/* Hàng vận chuyển lồng nguyên một bảng con — canh phải sẽ làm xô lệch bên trong. */
.cart_totals td.shipping__inner table.shipping__table,
.cart_totals td.shipping__inner table.shipping__table th,
.cart_totals td.shipping__inner table.shipping__table td {
	padding: 0;
	border: 0;
	text-align: right;
}

.cart_totals ul.shipping__list {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cart_totals ul.shipping__list li {
	margin: 0 0 4px;
}

/* Ghi chú giao hàng dài, canh phải sẽ vỡ thành mấy dòng lởm chởm. */
.cart_totals .woocommerce-shipping-destination,
.cart_totals .shipping-calculator-button {
	display: block;
	margin-top: 6px;
	color: var(--cl-muted);
	font-size: 12.5px;
	line-height: 1.5;
	text-align: right;
}

.cart_totals .shipping-calculator-button {
	color: var(--cl-accent);
	font-weight: 600;
}

.cart_totals .wc-proceed-to-checkout {
	padding: 18px 0 0;
}

.cart_totals a.checkout-button.button {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	/* CSS sinh ra từ Customizer ghim nền nút này bằng !important nên chỉ
	   !important mới đổi được. */
	background-color: var(--cl-ink) !important;
	border: 0;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 52px;
}

.cart_totals a.checkout-button.button:hover {
	background-color: #000 !important;
}

/* --- 24.6 Thanh miễn phí vận chuyển -------------------------------------- */

/* .woocommerce-cart .ux-free-shipping (0,2,0) ép padding-bottom 30px — thừa hẳn
   một khoảng dưới thanh tiến độ, phải chọi lại bằng selector đủ hạng. */
.woocommerce-cart .ux-free-shipping,
.woocommerce-checkout .ux-free-shipping,
.ux-free-shipping {
	margin-bottom: 20px;
	padding: 14px 16px 16px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: var(--cl-card);
}

.ux-free-shipping__notice {
	color: var(--cl-body);
	font-size: 14px;
}

.ux-free-shipping__notice .amount {
	color: var(--cl-accent);
	font-weight: 700;
}

.ux-free-shipping__bar {
	height: 8px;
	margin-top: 10px;
	border-radius: 0;
	background-color: #ebe4d9;
}

.ux-free-shipping__bar-progress {
	border-radius: 0;
	background-color: var(--cl-accent);
}

/* --- 24.7 Thanh toán: cột biểu mẫu ---------------------------------------- */

/* Dải "Bạn có mã ưu đãi?" nằm ngoài cả hai cột nên phải tự thành một thanh. */
.woocommerce-checkout .woocommerce-form-coupon-toggle .woocommerce-info {
	margin: 0 0 22px;
	padding: 13px 18px;
	border: 1px dashed var(--cl-tan-soft);
	border-radius: 0;
	background-color: #faf8f4;
	color: var(--cl-body);
	font-size: 14.5px;
}

.woocommerce-checkout .woocommerce-form-coupon-toggle a.showcoupon {
	color: var(--cl-accent);
	font-weight: 700;
}

/* Form nhập mã (hiện ra khi bấm "Ấn vào đây"): Flatsome cho viền đứt 2px đỏ,
   góc vuông và đệm 30px — kéo về đúng tông thẻ của web. */
.woocommerce-checkout form.checkout_coupon {
	margin: 0 0 22px;
	padding: 18px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: var(--cl-card);
}

.woocommerce-checkout form.checkout_coupon input.input-text {
	height: 46px;
	margin: 0;
	padding: 0 20px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	font-size: 15px;
}

/* Nút mang class .expand — Flatsome ép padding ngang 0 !important, nên chốt bề
   ngang bằng min-width thay vì padding, và không cho cột co lại. */
.woocommerce-checkout form.checkout_coupon .flex-col:last-child {
	flex: 0 0 auto;
}

.woocommerce-checkout form.checkout_coupon button {
	min-width: 130px;
	min-height: 0;
	margin: 0;
	white-space: nowrap;
	border: 0;
	background-color: var(--cl-accent);
	color: #fff;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.04em;
	line-height: 46px;
}

.woocommerce-checkout form.checkout_coupon button:hover {
	background-color: var(--cl-accent-dark);
	box-shadow: none;
}

/* Flatsome kẻ border-top 2px xám phía trên tiêu đề — thừa khi đã có thẻ. */
.woocommerce-checkout .woocommerce-billing-fields {
	padding-top: 0;
	border-top: 0;
}

.woocommerce-checkout #customer_details h3 {
	margin: 0 0 18px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cl-line);
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce-checkout .woocommerce-shipping-fields,
.woocommerce-checkout .woocommerce-additional-fields {
	margin-top: 26px;
}

.woocommerce-checkout .form-row label {
	margin-bottom: 6px;
	color: var(--cl-ink);
	font-size: 14px;
	font-weight: 600;
}

.woocommerce-checkout .form-row .required {
	color: var(--cl-accent);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row .select2-container .select2-selection,
.woocommerce-checkout .form-row select {
	margin: 0;
	padding: 0 15px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
	box-shadow: none;
	color: var(--cl-ink);
	font-size: 15px;
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row .select2-container .select2-selection {
	height: 46px;
}

.woocommerce-checkout .form-row textarea {
	padding-top: 12px;
	padding-bottom: 12px;
	line-height: 1.6;
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus {
	border-color: var(--cl-ink);
	box-shadow: 0 0 0 3px rgba(17, 17, 17, 0.08);
	outline: none;
}

/* Thông báo lỗi ngay dưới ô nhập của WooCommerce — mặc định là <p> to như một
   đoạn văn; thu về dạng dòng nhắc nhỏ, kèm tô đỏ viền ô đang lỗi. */
.woocommerce-checkout .checkout-inline-error-message {
	margin: 6px 0 0;
	color: var(--cl-accent);
	font-size: 12.5px;
	font-weight: 500;
	line-height: 1.5;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid select,
.woocommerce-checkout .form-row.woocommerce-invalid textarea {
	border-color: var(--cl-accent);
}

.woocommerce-checkout .form-row.woocommerce-validated input.input-text {
	border-color: #c9e2cc;
}

/* --- 24.8 Thanh toán: cột đơn hàng --------------------------------------- */

/* checkout_layout quyết định .has-border hay .is-well — vô hiệu cả hai. */
.woocommerce-checkout .col-inner.has-border,
.woocommerce-checkout .col-inner.is-well {
	padding: 24px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: var(--cl-card);
}

.woocommerce-checkout #order_review_heading {
	margin: 0 0 16px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--cl-line);
	color: var(--cl-accent);
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table {
	margin: 0;
	border: 0;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	padding: 12px 0;
	border-bottom: 1px solid var(--cl-line);
	color: var(--cl-body);
	font-size: 14.5px;
	text-align: right;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding-top: 0;
	color: var(--cl-muted);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Bảng vận chuyển lồng bên trong cũng ăn vạch kẻ của rule trên — thừa một nét. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table .shipping__table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table .shipping__table td {
	border-bottom: 0;
}

/* Tên sản phẩm là <td>, không phải <th> — canh phải hết sẽ đẩy cả tên sang phải. */
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-name,
.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th.product-name {
	color: var(--cl-ink);
	text-align: left;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot th {
	color: var(--cl-body);
	font-weight: 400;
	text-align: left;
	text-transform: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td {
	border-bottom: 0;
	color: var(--cl-ink);
	font-size: 16px;
	font-weight: 700;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tfoot tr.order-total td .amount {
	color: var(--cl-accent);
	font-size: 19px;
}

/* --- 24.9 Phương thức thanh toán và nút đặt hàng -------------------------- */

.woocommerce-checkout ul.payment_methods {
	margin: 18px 0 0;
	padding: 0;
	border: 0;
	list-style: none;
}

.woocommerce-checkout ul.payment_methods li {
	margin: 0 0 10px;
	padding: 12px 14px;
	border: 1px solid var(--cl-line);
	border-radius: 0;
	background-color: #fff;
}

.woocommerce-checkout ul.payment_methods li,
.woocommerce-checkout ul.payment_methods li label,
.woocommerce-checkout .wc_payment_method>input {
	cursor: pointer;
}

.woocommerce-checkout ul.payment_methods li:hover {
	border-color: var(--cl-tan-soft);
}

.woocommerce-checkout .wc_payment_method>input {
	margin: 0;
}

.woocommerce-checkout ul.payment_methods li label {
	margin: 0;
	color: var(--cl-ink);
	font-size: 14.5px;
	font-weight: 600;
}

.woocommerce-checkout ul.payment_methods .payment_box {
	margin: 10px 0 0;
	padding: 10px 12px;
	border-radius: 0;
	background-color: var(--cl-bg);
	color: var(--cl-body);
	font-size: 13.5px;
}

.woocommerce-checkout ul.payment_methods .payment_box p {
	margin: 0;
}

.woocommerce-checkout .form-row.place-order {
	margin: 16px 0 0;
	padding: 0;
}

.woocommerce-checkout #place_order {
	display: block;
	width: 100%;
	min-height: 0;
	margin: 0;
	padding: 0;
	background-color: var(--cl-ink) !important;
	border: 0;
	color: #fff;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 52px;
}

.woocommerce-checkout #place_order:hover {
	background-color: #000 !important;
}

.woocommerce-checkout .woocommerce-privacy-policy-text p {
	margin: 14px 0 0;
	color: var(--cl-muted);
	font-size: 12.5px;
	line-height: 1.6;
}

.woocommerce-checkout .woocommerce-privacy-policy-text a {
	color: var(--cl-accent);
}

/* --- 24.10 Giỏ hàng trống ------------------------------------------------ */

.woocommerce-cart .cart-empty.woocommerce-info {
	border: 0;
	background: none;
	color: var(--cl-ink);
	font-size: 18px;
	font-weight: 700;
}

/* --- 24.11 Responsive ---------------------------------------------------- */

@media (max-width: 849px) {

	.cart_totals,
	.woocommerce-checkout .col-inner.has-border,
	.woocommerce-checkout .col-inner.is-well {
		margin-top: 24px;
		padding: 20px;
	}
}

@media (max-width: 549px) {
	.checkout-page-title.page-title {
		padding: 18px 0 16px;
	}

	.checkout-breadcrumbs {
		font-size: 15px;
	}

	/* shop_table_responsive đã tự dồn giá xuống dưới tên — chỉ siết lại. */
	.woocommerce-cart table.shop_table.cart td {
		padding: 14px 0;
	}

	.woocommerce-cart table.shop_table.cart td.product-thumbnail img {
		width: 60px;
		height: 60px;
	}

	.woocommerce-cart .mobile-product-price {
		color: var(--cl-accent);
		font-weight: 700;
	}

	.woocommerce-cart td.actions .coupon input.input-text,
	.woocommerce-cart td.actions button[name="apply_coupon"] {
		width: 100%;
	}

	.cart_totals,
	.woocommerce-checkout .col-inner.has-border,
	.woocommerce-checkout .col-inner.is-well {
		padding: 16px;
	}
}

/* ==========================================================================
   25. Khối nội dung riêng của các trang phụ CLAUDE
   ========================================================================== */

/* --- 25.1 Quy trình 4 bước (trang Hướng dẫn mua hàng) --------------------- */

/* Lưới 12 cột chia hết cho 4 nên chỉ cần gỡ luật 1/5 của biến thể 5 bước. */
.cl-steps--4>.col {
	flex-basis: 25%;
	max-width: 25%;
}

.cl-step__num {
	width: 46px;
	height: 46px;
	margin: 0 auto 14px;
	border: 1px solid var(--cl-line);
	border-radius: 50%;
	color: var(--cl-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 44px;
	text-align: center;
}

.cl-step__title {
	margin: 0 0 6px;
	color: var(--cl-ink);
	font-size: 0.95rem;
	font-weight: 700;
	line-height: 1.4;
}

.cl-step__desc {
	margin: 0;
	color: var(--cl-body);
	font-size: 0.88rem;
	line-height: 1.65;
}

/* --- 25.2 Bảng size ------------------------------------------------------- */

.cl-size-table h3 {
	margin: 0 0 12px;
	color: var(--cl-ink);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cl-size-table table {
	width: 100%;
	margin: 0;
	border-collapse: collapse;
	font-size: 0.9rem;
}

.cl-size-table th,
.cl-size-table td {
	padding: 11px 12px;
	border: 1px solid var(--cl-line);
	text-align: center;
}

.cl-size-table thead th {
	background: var(--cl-ink);
	border-color: var(--cl-ink);
	color: #fff;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	font-size: 0.8rem;
}

.cl-size-table tbody tr:nth-child(even) td {
	background: var(--cl-sand);
}

.cl-size-table tbody td:first-child {
	font-weight: 700;
	color: var(--cl-ink);
}

/* --- 25.3 Trang văn bản dài (chính sách, điều khoản) ---------------------- */

.cl-doc h2 {
	margin: 34px 0 12px;
	color: var(--cl-ink);
	font-size: 1.15rem;
	font-weight: 600;
	letter-spacing: 0.02em;
}

.cl-doc>.col-inner>.text>*:first-child h2,
.cl-doc h2:first-child {
	margin-top: 0;
}

.cl-doc p,
.cl-doc li {
	color: var(--cl-body);
	font-size: 0.98rem;
	line-height: 1.85;
}

.cl-doc ul {
	margin: 0 0 16px;
	padding-left: 20px;
}

.cl-doc li {
	margin-bottom: 8px;
}

.cl-doc a {
	color: var(--cl-ink);
	border-bottom: 1px solid var(--cl-line);
}

.cl-doc a:hover {
	border-color: var(--cl-ink);
}

/* --- 25.4 Thẻ địa chỉ cửa hàng ------------------------------------------- */

.cl-store-h3 strong {
	display: block;
	margin-bottom: 12px;
	color: var(--cl-ink);
	font-size: 0.95rem;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
}

.cl-store-list ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.cl-store-list li {
	position: relative;
	margin: 0 0 10px !important;
	padding-left: 18px;
	color: var(--cl-body);
	font-size: 0.92rem;
	line-height: 1.6;
}

.cl-store-list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 9px;
	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: var(--cl-tan);
}

.cl-store-note,
.cl-store-list .cl-store-note {
	margin: 16px 0 0;
	color: var(--cl-muted);
	font-size: 0.85rem;
	line-height: 1.65;
	padding-left: 0;
}

.cl-store-note::before {
	display: none;
}

.cl-store-note a {
	color: var(--cl-ink);
	border-bottom: 1px solid var(--cl-line);
}

@media (max-width: 849px) {

	.cl-steps--4>.col {
		flex-basis: 50%;
		max-width: 50%;
		margin-bottom: 26px;
	}
}