/* Pinata Theme — giao diện toàn site pinata.vn đồng bộ với Pinata Dock.
 *
 * Cùng một ngôn ngữ với thanh đáy: màu kẹo, tua giấy nhún, nút kẹo có "đế" 3D,
 * thẻ treo lắc như pinata. Chỉ phủ lên Flatsome 3.14, không sửa file nào của theme mẹ.
 *
 * Phạm vi:
 *   #wrapper ...    → mọi thứ trong trang (header, nội dung, footer). Dùng id để thắng
 *                     khối <style id="custom-css"> mà Flatsome in SAU file này.
 *   .pt-theme ...   → class gắn vào <body>, cho phần nằm ngoài #wrapper (menu trượt, lớp phủ).
 * Thanh đáy (#pd-root) nằm ngoài #wrapper nên không bị file này đụng tới, trừ khối
 * "Đồng bộ màu với thanh đáy" ở cuối mục 1.
 */

/* ============================================================
 * 1. Token — đổi màu ở đây là đổi cả site lẫn thanh đáy
 * ============================================================ */
:root {
	--pt-accent: #a16695;        /* màu thương hiệu (trùng --primary-color của Flatsome) */
	--pt-accent-ink: #7f4a74;    /* chữ màu thương hiệu, đủ tương phản trên nền trắng */
	--pt-accent-deep: #5b3354;   /* "đế" của nút chính */
	--pt-ink: #2a1b26;
	--pt-text: #4a3a44;          /* chữ thân bài */
	--pt-muted: #6f5d68;
	--pt-line: #eadde4;
	--pt-line-strong: #d9c6d1;
	--pt-soft: #f8f1f5;
	--pt-ground: #fbf6f8;
	--pt-surface: #fff;
	--pt-ok: #2e8b57;
	--pt-error: #c2334f;
	--pt-zalo: #0a68ff;

	/* Màu kẹo: đậm để làm tua, chấm, đế nút — nhạt để làm nền thẻ */
	--pt-c-pink: #e8577b;   --pt-t-pink: #fde4ea;   --pt-d-pink: #c9446a;
	--pt-c-yellow: #f2b33d; --pt-t-yellow: #fdf1d6; --pt-d-yellow: #c98f1f;
	--pt-c-teal: #3db7a4;   --pt-t-teal: #dcf3ef;   --pt-d-teal: #2b8f80;
	--pt-c-orange: #f07f3c; --pt-t-orange: #fde7da; --pt-d-orange: #c9622a;
	--pt-c-mauve: #a16695;  --pt-t-mauve: #f3e6ef;  --pt-d-mauve: #7f4a74;

	--pt-font: "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

	/* Dải 3 màu kẹo (giống mép thẻ "Đang xem" trên thanh đáy) */
	--pt-stripe: linear-gradient(90deg, var(--pt-c-yellow) 0 33.3%, var(--pt-c-teal) 0 66.6%, var(--pt-c-pink) 0);
	--pt-focus: 0 0 0 4px rgba(161, 102, 149, .22);
	--pt-ease: cubic-bezier(.2, .8, .2, 1);
	--pt-spring: cubic-bezier(.34, 1.35, .64, 1);

	/* Thanh đáy: chiều cao + vùng an toàn, để các thứ nổi khác né ra */
	--pt-dock-clear: calc(64px + max(10px, env(safe-area-inset-bottom, 0px)) + 16px);
}

/* Đồng bộ màu với thanh đáy: thanh đáy đọc màu từ token ở trên */
#pd-root.pd-root {
	--pd-accent: var(--pt-accent);
	--pd-accent-ink: var(--pt-accent-ink);
	--pd-accent-deep: var(--pt-accent-deep);
	--pd-ink: var(--pt-ink);
	--pd-muted: var(--pt-muted);
	--pd-line: var(--pt-line);
	--pd-line-strong: var(--pt-line-strong);
	--pd-soft: var(--pt-soft);
	--pd-c-pink: var(--pt-c-pink);     --pd-t-pink: var(--pt-t-pink);
	--pd-c-yellow: var(--pt-c-yellow); --pd-t-yellow: var(--pt-t-yellow);
	--pd-c-teal: var(--pt-c-teal);     --pd-t-teal: var(--pt-t-teal);
	--pd-c-orange: var(--pt-c-orange); --pd-t-orange: var(--pt-t-orange);
	--pd-c-mauve: var(--pt-c-mauve);   --pd-t-mauve: var(--pt-t-mauve);
	font-family: var(--pt-font);
}

/* ============================================================
 * 2. Chữ
 * ============================================================ */
.pt-theme {
	font-family: var(--pt-font);
	color: var(--pt-text);
	-webkit-tap-highlight-color: rgba(161, 102, 149, .14);
}
.pt-theme :is(h1, h2, h3, h4, h5, h6, .heading-font, .alt-font):not(.dark *) {
	font-family: var(--pt-font);
	font-weight: 800;
	letter-spacing: -.01em;
	color: var(--pt-ink);
	text-wrap: balance;
}
.pt-theme :is(.nav > li > a, .mobile-sidebar-levels-2 .nav > li > ul > li > a) { font-family: var(--pt-font); }
.pt-theme ::selection { background: var(--pt-t-pink); color: var(--pt-ink); }
.pt-theme :is(a, button, input, select, textarea, summary):focus-visible {
	outline: 2px solid var(--pt-accent-ink);
	outline-offset: 2px;
}

#wrapper :is(.entry-content, .product-short-description, .term-description, .woocommerce-product-details__short-description) a:not(.button) {
	color: var(--pt-accent-ink);
	font-weight: 600;
	text-decoration: underline;
	text-decoration-color: var(--pt-line-strong);
	text-underline-offset: 3px;
}
#wrapper :is(.entry-content, .product-short-description) a:not(.button):hover { text-decoration-color: var(--pt-accent); }

#wrapper blockquote {
	padding: 14px 18px;
	color: var(--pt-ink);
	background: var(--pt-t-yellow);
	border: 0;
	border-radius: 18px 18px 18px 6px;
}

/* Vạch ngắn dưới tiêu đề → dải kẹo 3 màu */
#wrapper .is-divider {
	height: 4px;
	max-width: 48px;
	background: var(--pt-stripe);
	border-radius: 4px;
	opacity: 1;
}
#wrapper .section-title b { height: 3px; background: var(--pt-stripe); opacity: 1; }
#wrapper .section-title-main { font-weight: 800; letter-spacing: -.01em; }

/* ============================================================
 * 3. Header
 * ============================================================ */
#wrapper .header-top {
	color: #f3e6ef;
	background: var(--pt-stripe) 0 100% / 100% 3px no-repeat, var(--pt-ink);
}
#wrapper .header-top :is(strong, .nav > li > a, .icon) { color: #f3e6ef; }
#wrapper .header-top strong { font-weight: 700; letter-spacing: .08em; }

#wrapper .header-main { background-color: var(--pt-surface); }
#wrapper .header-main .nav > li > a { color: var(--pt-ink); }
#wrapper .header-main .nav > li > a:hover { color: var(--pt-accent-ink); }
#wrapper .header-bottom { background-color: var(--pt-soft); }
#wrapper .stuck .header-main { box-shadow: 0 10px 24px -16px rgba(42, 27, 38, .45); }

/* Tua giấy nhún một lớp dưới chân header */
#header::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 6px;
	pointer-events: none;
	background: conic-gradient(from -45deg at bottom, var(--pt-line) 90deg, #0000 0) 0 0 / 12px 6px repeat-x;
}

/* Số trong giỏ hàng: viên kẹo */
#wrapper .cart-icon strong {
	color: var(--pt-accent-ink);
	border-color: var(--pt-accent-ink);
	border-radius: 6px 6px 8px 8px;
}
#wrapper .cart-icon strong::after { border-color: var(--pt-accent-ink); }
#wrapper :is(.current-dropdown .cart-icon strong, .cart-icon:hover strong) { color: #fff; background: var(--pt-accent-ink); }

/* Menu thả xuống trên máy tính */
#wrapper .nav-dropdown {
	padding: 8px;
	border: 2px solid var(--pt-line);
	border-radius: 16px;
	box-shadow: 0 18px 34px -18px rgba(42, 27, 38, .45);
}
#wrapper .nav-dropdown li > a {
	border-radius: 10px;
	color: var(--pt-ink);
	transition: background .15s, color .15s;
}
#wrapper .nav-dropdown li > a:hover { color: var(--pt-accent-ink); background: var(--pt-t-mauve); }

/* ============================================================
 * 4. Menu trượt trên điện thoại (nằm ngoài #wrapper)
 * ============================================================ */
.pt-theme .mfp-bg { background: #2a1424; }
.pt-theme :is(.off-canvas .mfp-content, .mobile-sidebar) { background: var(--pt-ground); }
.pt-theme .mobile-sidebar .sidebar-menu { padding-top: 0; }
/* Dải tua 3 tầng ở mép trên, như mép bảng trượt của thanh đáy */
.pt-theme .mobile-sidebar .sidebar-menu::before {
	content: "";
	display: block;
	height: 22px;
	margin-bottom: 14px;
	background:
		conic-gradient(from -45deg at bottom, var(--pt-c-pink) 90deg, #0000 0) 0 4px / 12px 6px repeat-x,
		linear-gradient(var(--pt-c-pink), var(--pt-c-pink)) 0 0 / 100% 4px no-repeat,
		conic-gradient(from -45deg at bottom, var(--pt-c-yellow) 90deg, #0000 0) 6px 10px / 12px 6px repeat-x,
		linear-gradient(var(--pt-c-yellow), var(--pt-c-yellow)) 0 0 / 100% 10px no-repeat,
		conic-gradient(from -45deg at bottom, var(--pt-c-teal) 90deg, #0000 0) 0 16px / 12px 6px repeat-x,
		linear-gradient(var(--pt-c-teal), var(--pt-c-teal)) 0 0 / 100% 16px no-repeat;
}
.pt-theme .nav-sidebar.nav-vertical > li + li { border-top: 1px solid var(--pt-line); }
.pt-theme .nav-sidebar.nav-vertical > li:nth-child(5n+1) { --t: var(--pt-c-pink); }
.pt-theme .nav-sidebar.nav-vertical > li:nth-child(5n+2) { --t: var(--pt-c-yellow); }
.pt-theme .nav-sidebar.nav-vertical > li:nth-child(5n+3) { --t: var(--pt-c-teal); }
.pt-theme .nav-sidebar.nav-vertical > li:nth-child(5n+4) { --t: var(--pt-c-orange); }
.pt-theme .nav-sidebar.nav-vertical > li:nth-child(5n)   { --t: var(--pt-c-mauve); }
.pt-theme .nav-sidebar.nav-vertical > li > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px;
	font-size: 15.5px;
	font-weight: 700;
	text-transform: none;
	color: var(--pt-ink);
}
.pt-theme .nav-sidebar.nav-vertical > li.menu-item > a::before {
	content: "";
	flex: none;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--t);
	box-shadow: 0 0 0 3px #fff;
}
.pt-theme .nav-sidebar :is(.current-menu-item, .current-menu-ancestor) > a { color: var(--pt-accent-ink); }
.pt-theme .nav-sidebar .sub-menu a { font-weight: 500; text-transform: none; color: var(--pt-muted); }
.pt-theme .nav-sidebar .toggle { color: var(--pt-muted); }
.pt-theme .mobile-sidebar .aws-container .aws-search-field {
	height: 50px;
	font-size: 16px;
	border: 2px solid var(--pt-line-strong);
	border-radius: 16px;
	box-shadow: 0 3px 0 var(--pt-line);
}

/* ============================================================
 * 5. Nút — kẹo có đế, nhấn là lún xuống
 * ============================================================ */
#wrapper :is(.button, button[type="submit"], input[type="submit"], input[type="button"]):not(.icon):not(.is-form):not(.is-link):not(.plain) {
	min-height: 48px;
	padding: 0 20px;
	font-family: var(--pt-font);
	font-weight: 800;
	letter-spacing: .01em;
	text-transform: none;
	border-radius: 16px;
	transition: transform .1s, box-shadow .1s, background-color .15s, filter .15s;
}

/* Nút chính: màu thương hiệu, vân giấy nhún, đế đậm */
#wrapper :is(.button.primary:not(.is-outline), .button.alt, .single_add_to_cart_button, .checkout-button, button[type="submit"], input[type="submit"]):not(.icon):not(.is-form):not(.is-link) {
	color: #fff;
	background:
		repeating-linear-gradient(180deg, rgba(255, 255, 255, .08) 0 2px, transparent 2px 5px),
		var(--pt-accent-ink);
	border: 0;
	box-shadow: 0 4px 0 var(--pt-accent-deep), 0 12px 20px -12px rgba(91, 51, 84, .7);
}
/* Nút phụ ("Đặt hàng" trên header): màu vàng như vòng nút Đặt làm */
#wrapper .button.secondary:not(.is-outline):not(.icon) {
	color: var(--pt-ink);
	background: var(--pt-c-yellow);
	border: 0;
	box-shadow: 0 4px 0 var(--pt-d-yellow);
}
#wrapper .button.is-outline:not(.icon) {
	color: var(--pt-ink);
	background: var(--pt-surface);
	border: 2px solid var(--pt-line-strong);
	box-shadow: 0 3px 0 var(--pt-line);
}
#wrapper .button.is-outline:not(.icon):hover { color: var(--pt-accent-ink); background: var(--pt-t-mauve); border-color: var(--pt-accent); }
@media (hover: hover) {
	#wrapper :is(.button, button[type="submit"], input[type="submit"], input[type="button"]):not(.icon):not(.is-form):not(.is-outline):hover { filter: brightness(1.08); }
}
#wrapper :is(.button, button[type="submit"], input[type="submit"], input[type="button"]):not(.icon):not(.is-form):not(.is-link):not(.plain):active {
	transform: translateY(3px);
	box-shadow: 0 1px 0 var(--pt-accent-deep);
}
#wrapper .button.secondary:not(.is-outline):not(.icon):active { box-shadow: 0 1px 0 var(--pt-d-yellow); }
#wrapper .button.is-outline:not(.icon):active { box-shadow: 0 0 0 var(--pt-line); }
#wrapper :is(.button, button[type="submit"], input[type="submit"], input[type="button"]):not(.icon):focus-visible { outline: 3px solid var(--pt-c-yellow); outline-offset: 3px; }
#wrapper :is(.button, button[type="submit"], input[type="submit"], input[type="button"])[disabled] { opacity: .55; transform: none; }

/* Nút tròn chỉ có icon (chia sẻ, mũi tên…) */
#wrapper .button.icon.circle.is-outline {
	color: var(--pt-ink);
	background: var(--pt-surface);
	border: 2px solid var(--pt-line);
	box-shadow: 0 3px 0 var(--pt-line);
}
#wrapper .button.icon.circle.is-outline:hover { color: #fff; background: var(--pt-accent-ink); border-color: var(--pt-accent-ink); }

/* ============================================================
 * 6. Ô nhập liệu — giống form Đặt làm trên thanh đáy
 * ============================================================ */
#wrapper :is(input[type="text"], input[type="email"], input[type="tel"], input[type="url"], input[type="password"], input[type="search"], input[type="date"], input[type="number"], textarea, select):not(.qty):not(.aws-search-field) {
	min-height: 48px;
	padding-inline: 14px;
	font-family: var(--pt-font);
	font-size: 16px; /* dưới 16px thì iPhone tự phóng to trang khi gõ */
	color: var(--pt-ink);
	background-color: var(--pt-surface);
	border: 2px solid var(--pt-line-strong);
	border-radius: 14px;
	box-shadow: 0 3px 0 var(--pt-line);
	transition: border-color .15s, box-shadow .15s;
}
#wrapper textarea:not(.aws-search-field) { padding-block: 12px; }
#wrapper select { padding-right: 2.4em; }
#wrapper :is(input, textarea, select):not(.qty):not(.aws-search-field):focus {
	outline: 0;
	border-color: var(--pt-accent);
	box-shadow: var(--pt-focus);
}
#wrapper :is(input, textarea)::placeholder { color: #a3929c; }
#wrapper label { color: var(--pt-ink); font-weight: 700; }

/* Contact Form 7 ở các trang (trang Liên hệ…) */
#wrapper .wpcf7 .wpcf7-submit { float: none; width: 100%; }
#wrapper .wpcf7 .wpcf7-not-valid { border-color: var(--pt-error); background-color: #fff6f8; }
#wrapper .wpcf7 span.wpcf7-not-valid-tip {
	margin-top: 6px;
	padding: 0;
	font-size: 12.5px;
	font-weight: 600;
	color: var(--pt-error);
	background: none;
}
#wrapper .wpcf7 form .wpcf7-response-output {
	margin: 14px 0 0;
	padding: 10px 14px;
	font-weight: 600;
	color: var(--pt-ink);
	background: var(--pt-t-yellow);
	border: 0;
	border-radius: 14px;
}
#wrapper .wpcf7 form:is(.invalid, .failed, .spam, .unaccepted) .wpcf7-response-output { color: var(--pt-error); background: var(--pt-t-pink); }
#wrapper .wpcf7 form.sent .wpcf7-response-output { color: var(--pt-ok); background: var(--pt-t-teal); }

/* Thông báo WooCommerce */
#wrapper :is(.woocommerce-message, .woocommerce-info, .woocommerce-error) {
	padding: 12px 16px;
	color: var(--pt-ink);
	background: var(--pt-t-teal);
	border: 0;
	border-radius: 16px;
}
#wrapper .woocommerce-info { background: var(--pt-t-yellow); }
#wrapper .woocommerce-error { color: var(--pt-error); background: var(--pt-t-pink); }

/* ============================================================
 * 7. Thẻ sản phẩm — mỗi thẻ là một pinata nhỏ treo trên dây
 * ============================================================ */
#wrapper .product-small.col:nth-child(5n+1) { --t: var(--pt-c-pink);   --tt: var(--pt-t-pink); }
#wrapper .product-small.col:nth-child(5n+2) { --t: var(--pt-c-yellow); --tt: var(--pt-t-yellow); }
#wrapper .product-small.col:nth-child(5n+3) { --t: var(--pt-c-teal);   --tt: var(--pt-t-teal); }
#wrapper .product-small.col:nth-child(5n+4) { --t: var(--pt-c-orange); --tt: var(--pt-t-orange); }
#wrapper .product-small.col:nth-child(5n)   { --t: var(--pt-c-mauve);  --tt: var(--pt-t-mauve); }

#wrapper .box.product-small {
	position: relative;
	padding: 6px;
	background: var(--tt, var(--pt-soft));
	border-radius: 18px 18px 6px 6px;
	transform-origin: 50% -30px; /* điểm treo phía trên, như sợi dây pinata */
	transition: transform .35s var(--pt-spring);
}
/* tua giấy dưới chân thẻ */
#wrapper .box.product-small::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 6px;
	background: conic-gradient(from -45deg at bottom, var(--tt, var(--pt-soft)) 90deg, #0000 0) 0 0 / 12px 6px repeat-x;
}
#wrapper .box.product-small .box-image { overflow: hidden; background: var(--pt-surface); border-radius: 14px; }
#wrapper .box.product-small .box-text { padding: 10px 6px 6px; }
#wrapper .box.product-small .product-cat {
	font-size: 10.5px;
	font-weight: 600;
	letter-spacing: .08em;
	color: var(--pt-muted);
	opacity: 1;
}
#wrapper .box.product-small .product-title { margin: 2px 0 4px; font-size: 14.5px; font-weight: 700; line-height: 1.3; }
#wrapper .box.product-small .product-title a { color: var(--pt-ink); }
#wrapper .box.product-small:active { animation: pt-swing .7s ease-out; }
@media (hover: hover) {
	#wrapper .box.product-small:hover { transform: rotate(-1.5deg); }
}

/* Giá */
#wrapper .price { font-variant-numeric: tabular-nums; color: var(--pt-accent-ink); }
#wrapper .price .amount { font-weight: 800; color: var(--pt-accent-ink); }
#wrapper .price del { opacity: 1; margin-right: 6px; }
#wrapper .price del .amount { font-weight: 500; font-size: .86em; color: var(--pt-muted); }
#wrapper .price ins { text-decoration: none; }
#wrapper .star-rating span::before { color: var(--pt-c-yellow); }

/* Nhãn "Giảm giá!" — viên kẹo hồng nghiêng */
#wrapper .badge-container .badge-inner {
	font-weight: 800;
	color: #fff;
	background: var(--pt-c-pink);
	box-shadow: 0 0 0 3px #fff, 0 8px 14px -8px rgba(201, 68, 106, .9);
	transform: rotate(-10deg);
}
#wrapper .badge-container .badge-inner.new { background: var(--pt-c-teal); }

/* ============================================================
 * 8. Trang sản phẩm
 * ============================================================ */
#wrapper .breadcrumbs {
	font-size: 11.5px;
	font-weight: 600;
	letter-spacing: .06em;
	color: var(--pt-muted);
}
#wrapper .breadcrumbs a { color: var(--pt-accent-ink); }
#wrapper .breadcrumbs .separator { color: var(--pt-line-strong); }
#wrapper .breadcrumbs .last { color: var(--pt-ink); }

#wrapper .product-gallery-slider,
#wrapper .product-gallery .woocommerce-product-gallery__image { border-radius: 20px; overflow: hidden; }
#wrapper .product-thumbnails a { overflow: hidden; border: 2px solid transparent; border-radius: 12px; }
#wrapper .product-thumbnails .is-nav-selected a { border-color: var(--pt-accent); }

#wrapper .product-info .product-title { font-size: clamp(24px, 6vw, 32px); font-weight: 800; line-height: 1.15; letter-spacing: -.02em; }

/* Giá trên trang sản phẩm: thẻ vàng, như giá trong thẻ "Đang xem" của thanh đáy */
#wrapper .product-info .product-page-price {
	display: inline-block;
	margin: 4px 0 16px;
	padding: 8px 16px;
	font-size: 24px;
	line-height: 1.3;
	background: var(--pt-t-yellow);
	border-radius: 16px 16px 16px 4px;
}

/* Mô tả ngắn: chấm kẹo thay dấu đầu dòng */
#wrapper .product-short-description { color: var(--pt-text); }
#wrapper .product-short-description ul { margin-left: 0; list-style: none; }
#wrapper .product-short-description ul > li {
	position: relative;
	margin: 0 0 8px;
	padding-left: 24px;
	list-style: none;
}
#wrapper .product-short-description ul > li::before {
	content: "";
	position: absolute;
	left: 2px;
	top: .5em;
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--t, var(--pt-c-pink));
}
#wrapper .product-short-description ul > li:nth-child(5n+2) { --t: var(--pt-c-yellow); }
#wrapper .product-short-description ul > li:nth-child(5n+3) { --t: var(--pt-c-teal); }
#wrapper .product-short-description ul > li:nth-child(5n+4) { --t: var(--pt-c-orange); }
#wrapper .product-short-description ul > li:nth-child(5n)   { --t: var(--pt-c-mauve); }
#wrapper .product-short-description li > p { margin-bottom: 0; }

/* Số lượng + Thêm vào giỏ: một hàng, nút giỏ kéo dài */
#wrapper form.cart:not(.variations_form),
#wrapper .woocommerce-variation-add-to-cart { display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px; }
#wrapper .quantity {
	height: 52px;
	margin: 0;
	overflow: hidden;
	background: var(--pt-surface);
	border: 2px solid var(--pt-line-strong);
	border-radius: 16px;
	box-shadow: 0 3px 0 var(--pt-line);
}
#wrapper .quantity :is(input.qty, .button.is-form) {
	height: 100%;
	min-height: 0;
	margin: 0;
	font-size: 17px;
	font-weight: 700;
	color: var(--pt-ink);
	background: none;
	border: 0;
	box-shadow: none;
}
#wrapper .quantity .button.is-form { width: 40px; padding: 0; }
#wrapper .quantity .button.is-form:active { background: var(--pt-soft); }
#wrapper .single_add_to_cart_button { flex: 1 1 180px; height: 52px; margin: 0; font-size: 16px; }

#wrapper .product_meta > span {
	display: block;
	padding: 8px 0;
	font-size: 13px;
	color: var(--pt-muted);
	border-top: 1px dashed var(--pt-line);
}
#wrapper .product_meta a {
	display: inline-block;
	margin: 2px 2px 2px 4px;
	padding: 2px 10px;
	font-weight: 600;
	color: var(--pt-accent-ink);
	background: var(--pt-soft);
	border-radius: 999px;
}

/* Tab Mô tả / Thông tin bổ sung */
#wrapper .product-tabs > li > a {
	font-size: 15px;
	font-weight: 700;
	text-transform: none;
	letter-spacing: 0;
	color: var(--pt-muted);
}
#wrapper .product-tabs > li.active > a { color: var(--pt-ink); }
#wrapper .product-tabs.nav-line > li > a::before { height: 4px; background: var(--pt-stripe); border-radius: 4px; }

/* Bảng thông số */
#wrapper .entry-content table,
#wrapper table.shop_attributes {
	border-collapse: separate;
	border-spacing: 0;
	overflow: hidden;
	border: 2px solid var(--pt-line);
	border-radius: 16px;
}
#wrapper :is(.entry-content table, table.shop_attributes) :is(td, th) {
	padding: 10px 14px;
	color: var(--pt-text);
	border-color: var(--pt-line);
}
#wrapper .entry-content table thead td,
#wrapper table.shop_attributes th { color: var(--pt-ink); background: var(--pt-t-yellow); }
#wrapper .entry-content table tbody tr:nth-child(even) td { background: var(--pt-soft); }
#wrapper :is(.entry-content table, table.shop_attributes) tr:last-child :is(td, th) { border-bottom: 0; }

/* "Sản phẩm tương tự" */
#wrapper .product-section-title {
	font-size: 19px;
	font-weight: 800;
	text-transform: none;
	letter-spacing: -.01em;
	color: var(--pt-ink);
}
#wrapper .product-section-title::after {
	content: "";
	display: block;
	width: 48px;
	height: 4px;
	margin-top: 8px;
	background: var(--pt-stripe);
	border-radius: 4px;
}

/* ============================================================
 * 9. Danh mục, phân trang, blog
 * ============================================================ */
#wrapper .term-description {
	margin-bottom: 20px;
	padding: 14px 16px;
	color: var(--pt-ink);
	background: var(--pt-t-yellow);
	border-radius: 18px 18px 18px 6px;
}
#wrapper .term-description p:last-child { margin-bottom: 0; }

/* Danh mục ở cột bên (máy tính): chip */
#wrapper .widget-title { font-size: 12px; font-weight: 700; letter-spacing: .08em; color: var(--pt-muted); }
#wrapper .product-categories { display: flex; flex-wrap: wrap; gap: 8px; }
#wrapper .product-categories > li { margin: 0; border: 0; }
#wrapper .product-categories > li > a {
	display: inline-block;
	padding: 6px 12px;
	font-size: 14px;
	font-weight: 600;
	color: var(--pt-ink);
	background: var(--pt-soft);
	border-radius: 999px;
}
#wrapper .product-categories > li > a:hover { background: var(--pt-t-mauve); }
#wrapper .product-categories > .current-cat > a { color: #fff; background: var(--pt-ink); }

#wrapper .nav-pagination > li > :is(a, span) {
	min-width: 42px;
	height: 42px;
	line-height: 38px;
	font-weight: 700;
	color: var(--pt-ink);
	background: var(--pt-surface);
	border: 2px solid var(--pt-line);
	border-radius: 14px;
	box-shadow: 0 3px 0 var(--pt-line);
}
#wrapper .nav-pagination > li > a:hover { color: var(--pt-accent-ink); background: var(--pt-t-mauve); border-color: var(--pt-accent); }
#wrapper .nav-pagination > li > .current { color: #fff; background: var(--pt-ink); border-color: var(--pt-ink); box-shadow: 0 3px 0 #000; }

#wrapper .box-blog-post .box-image { overflow: hidden; border-radius: 16px; }
#wrapper .box-blog-post .post-title { font-weight: 800; color: var(--pt-ink); }
#wrapper .box-blog-post .from_the_blog_excerpt { color: var(--pt-muted); }
/* Ngày đăng: ô mực, số vàng */
#wrapper .post-date .badge-inner {
	color: #fff;
	background: var(--pt-ink);
	border: 0;
	border-radius: 14px 14px 4px 4px;
	box-shadow: inset 0 3px 0 var(--pt-c-yellow);
}
#wrapper .post-date .post-date-day { color: var(--pt-c-yellow); font-weight: 800; }

/* Khối chữ trên banner trang chủ */
#wrapper .banner .text-box-content { border-radius: 20px 20px 20px 6px; }
#wrapper .banner h6 { font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--pt-accent-ink); }

/* ============================================================
 * 10. Footer — như một bảng trượt của thanh đáy đã mở
 * ============================================================ */
#footer { position: relative; margin-top: 32px; color: #d9c6d1; }
#footer > .is-divider { display: none; }
#footer::before {
	content: "";
	display: block;
	height: 22px;
	background:
		conic-gradient(from -45deg at bottom, var(--pt-c-pink) 90deg, #0000 0) 0 4px / 12px 6px repeat-x,
		linear-gradient(var(--pt-c-pink), var(--pt-c-pink)) 0 0 / 100% 4px no-repeat,
		conic-gradient(from -45deg at bottom, var(--pt-c-yellow) 90deg, #0000 0) 6px 10px / 12px 6px repeat-x,
		linear-gradient(var(--pt-c-yellow), var(--pt-c-yellow)) 0 0 / 100% 10px no-repeat,
		conic-gradient(from -45deg at bottom, var(--pt-c-teal) 90deg, #0000 0) 0 16px / 12px 6px repeat-x,
		linear-gradient(var(--pt-c-teal), var(--pt-c-teal)) 0 0 / 100% 16px no-repeat,
		var(--pt-ink);
}
#wrapper #footer :is(.section, .section-bg) { background-color: var(--pt-ink); }
#footer :is(h1, h2, h3, h4, h5, h6) { font-family: var(--pt-font); font-weight: 800; color: #fff; }
#footer :is(p, li, span) { color: #d9c6d1; }
#footer a { color: #f3e6ef; }
#footer a:hover { color: var(--pt-c-yellow); }
#footer li.bullet-arrow::before { color: var(--pt-c-yellow); }
#footer .social-icons .icon.button.circle {
	color: #fff;
	background: rgba(255, 255, 255, .08);
	border-color: transparent;
	box-shadow: none;
}
#footer .social-icons .icon.button.circle:hover { background: var(--pt-c-pink); }
#wrapper .absolute-footer { color: #b6a2ae; background-color: #1f141c; }
#wrapper .absolute-footer a { color: #f3e6ef; }

/* ============================================================
 * 11. Né thanh đáy trên điện thoại
 * ============================================================ */
@media (max-width: 767px) {
	/* Popup "Ai đó vừa mua…" của WooCommerce Notification */
	.pt-theme #message-purchased { bottom: var(--pt-dock-clear) !important; border-radius: 16px; }
	.pt-theme .back-to-top { bottom: var(--pt-dock-clear) !important; }
}

/* ============================================================
 * 12. Chuyển động
 * ============================================================ */
@keyframes pt-swing {
	0% { transform: rotate(0); }
	20% { transform: rotate(4deg); }
	45% { transform: rotate(-3deg); }
	70% { transform: rotate(1.5deg); }
	100% { transform: rotate(0); }
}
@media (prefers-reduced-motion: reduce) {
	.pt-theme *, .pt-theme *::before, .pt-theme *::after { transition: none !important; animation: none !important; }
	#wrapper .box.product-small:hover { transform: none; }
}