/*!
Theme Name: architect
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: architect
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

architect is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.io/normalize.css/
*/

/*--------------------------------------------------------------
>>> TABLE OF CONTENTS:
----------------------------------------------------------------
# Generic
	- Normalize
	- Box sizing
# Base
	- Typography
	- Elements
	- Links
	- Forms
## Layouts
# Components
	- Navigation
	- Posts and pages
	- Comments
	- Widgets
	- Media
	- Captions
	- Galleries
# plugins
	- Jetpack infinite scroll
# Utilities
	- Accessibility
	- Alignments

--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Generic
--------------------------------------------------------------*/

/* Normalize
--------------------------------------------- */

/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */

/* Document
	 ========================================================================== */

/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in iOS.
 */
html {
	line-height: 1.15;
	-webkit-text-size-adjust: 100%;
}

/* Sections
	 ========================================================================== */

/**
 * Remove the margin in all browsers.
 */
body {
	margin: 0;
}

/**
 * Render the `main` element consistently in IE.
 */
main {
	display: block;
}

/**
 * Correct the font size and margin on `h1` elements within `section` and
 * `article` contexts in Chrome, Firefox, and Safari.
 */
h1 {
	font-size: 2em;
	margin: 0.67em 0;
}

/* Grouping content
	 ========================================================================== */

/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge and IE.
 */
hr {
	box-sizing: content-box;
	height: 0;
	overflow: visible;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
	font-family: monospace, monospace;
	font-size: 1em;
}

/* Text-level semantics
	 ========================================================================== */

/**
 * Remove the gray background on active links in IE 10.
 */
a {
	background-color: transparent;
}

/**
 * 1. Remove the bottom border in Chrome 57-
 * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
 */
abbr[title] {
	border-bottom: none;
	text-decoration: underline;
	text-decoration: underline dotted;
}

/**
 * Add the correct font weight in Chrome, Edge, and Safari.
 */
b,
strong {
	font-weight: bolder;
}

/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
	font-family: monospace, monospace;
	font-size: 1em;
}

/**
 * Add the correct font size in all browsers.
 */
small {
	font-size: 80%;
}

/**
 * Prevent `sub` and `sup` elements from affecting the line height in
 * all browsers.
 */
sub,
sup {
	font-size: 75%;
	line-height: 0;
	position: relative;
	vertical-align: baseline;
}

sub {
	bottom: -0.25em;
}

sup {
	top: -0.5em;
}

/* Embedded content
	 ========================================================================== */

/**
 * Remove the border on images inside links in IE 10.
 */
img {
	border-style: none;
}

/* Forms
	 ========================================================================== */

/**
 * 1. Change the font styles in all browsers.
 * 2. Remove the margin in Firefox and Safari.
 */
button,
input,
optgroup,
select,
textarea {
	font-family: inherit;
	font-size: 100%;
	line-height: 1.15;
	margin: 0;
}

/**
 * Show the overflow in IE.
 * 1. Show the overflow in Edge.
 */
button,
input {
	overflow: visible;
}

/**
 * Remove the inheritance of text transform in Edge, Firefox, and IE.
 * 1. Remove the inheritance of text transform in Firefox.
 */
button,
select {
	text-transform: none;
}

/**
 * Correct the inability to style clickable types in iOS and Safari.
 */
button,
[type="button"],
[type="reset"],
[type="submit"] {
	-webkit-appearance: button;
}

/**
 * Remove the inner border and padding in Firefox.
 */
button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner {
	border-style: none;
	padding: 0;
}

/**
 * Restore the focus styles unset by the previous rule.
 */
button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring {
	outline: 1px dotted ButtonText;
}

/**
 * Correct the padding in Firefox.
 */
fieldset {
	padding: 0.35em 0.75em 0.625em;
}

/**
 * 1. Correct the text wrapping in Edge and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 * 3. Remove the padding so developers are not caught out when they zero out
 *		`fieldset` elements in all browsers.
 */
legend {
	box-sizing: border-box;
	color: inherit;
	display: table;
	max-width: 100%;
	padding: 0;
	white-space: normal;
}

/**
 * Add the correct vertical alignment in Chrome, Firefox, and Opera.
 */
progress {
	vertical-align: baseline;
}

/**
 * Remove the default vertical scrollbar in IE 10+.
 */
textarea {
	overflow: auto;
}

/**
 * 1. Add the correct box sizing in IE 10.
 * 2. Remove the padding in IE 10.
 */
[type="checkbox"],
[type="radio"] {
	box-sizing: border-box;
	padding: 0;
}

/**
 * Correct the cursor style of increment and decrement buttons in Chrome.
 */
[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button {
	height: auto;
}

/**
 * 1. Correct the odd appearance in Chrome and Safari.
 * 2. Correct the outline style in Safari.
 */
[type="search"] {
	-webkit-appearance: textfield;
	outline-offset: -2px;
}

/**
 * Remove the inner padding in Chrome and Safari on macOS.
 */
[type="search"]::-webkit-search-decoration {
	-webkit-appearance: none;
}

/**
 * 1. Correct the inability to style clickable types in iOS and Safari.
 * 2. Change font properties to `inherit` in Safari.
 */
::-webkit-file-upload-button {
	-webkit-appearance: button;
	font: inherit;
}

/* Interactive
	 ========================================================================== */

/*
 * Add the correct display in Edge, IE 10+, and Firefox.
 */
details {
	display: block;
}

/*
 * Add the correct display in all browsers.
 */
summary {
	display: list-item;
}

/* Misc
	 ========================================================================== */

/**
 * Add the correct display in IE 10+.
 */
template {
	display: none;
}

/**
 * Add the correct display in IE 10.
 */
[hidden] {
	display: none;
}

/* Box sizing
--------------------------------------------- */

/* Inherit box-sizing to more easily change it's value on a component level.
@link http://css-tricks.com/inheriting-box-sizing-probably-slightly-better-best-practice/ */
*,
*::before,
*::after {
	box-sizing: inherit;
}

html {
	box-sizing: border-box;
}

/*--------------------------------------------------------------
# Base
--------------------------------------------------------------*/

/* Typography
--------------------------------------------- */
body,
button,
input,
select,
optgroup,
textarea {
	color: #404040;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
	font-size: 1rem;
	line-height: 1.5;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	clear: both;
}

p {
	margin-bottom: 1.5em;
}

dfn,
cite,
em,
i {
	font-style: italic;
}

blockquote {
	margin: 0 1.5em;
}

address {
	margin: 0 0 1.5em;
}

pre {
	background: #eee;
	font-family: "Courier 10 Pitch", courier, monospace;
	line-height: 1.6;
	margin-bottom: 1.6em;
	max-width: 100%;
	overflow: auto;
	padding: 1.6em;
}

code,
kbd,
tt,
var {
	font-family: monaco, consolas, "Andale Mono", "DejaVu Sans Mono", monospace;
}

abbr,
acronym {
	border-bottom: 1px dotted #666;
	cursor: help;
}

mark,
ins {
	background: #fff9c0;
	text-decoration: none;
}

big {
	font-size: 125%;
}

/* Elements
--------------------------------------------- */
body {
	background: #fff;
}

hr {
	background-color: #ccc;
	border: 0;
	height: 1px;
	margin-bottom: 1.5em;
}

ul,
ol {
	margin: 0 0 1.5em 3em;
}

ul {
	list-style: disc;
}

ol {
	list-style: decimal;
}

li > ul,
li > ol {
	margin-bottom: 0;
	margin-left: 1.5em;
}

dt {
	font-weight: 700;
}

dd {
	margin: 0 1.5em 1.5em;
}

/* Make sure embeds and iframes fit their containers. */
embed,
iframe,
object {
	max-width: 100%;
}

img {
	height: auto;
	max-width: 100%;
}

figure {
	margin: 1em 0;
}

table {
	margin: 0 0 1.5em;
	width: 100%;
}

/* Links
--------------------------------------------- */
a {
	color: #4169e1;
}


a:hover,
a:focus,
a:active {
	color: #191970;
}

a:focus {
	outline: thin dotted;
}

a:hover,
a:active {
	outline: 0;
}

/* Forms
--------------------------------------------- */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
	border: 1px solid;
	border-color: #ccc #ccc #bbb;
	border-radius: 3px;
	background: #e6e6e6;
	color: rgba(0, 0, 0, 0.8);
	line-height: 1;
	padding: 0.6em 1em 0.4em;
}

button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover {
	border-color: #ccc #bbb #aaa;
}

button:active,
button:focus,
input[type="button"]:active,
input[type="button"]:focus,
input[type="reset"]:active,
input[type="reset"]:focus,
input[type="submit"]:active,
input[type="submit"]:focus {
	border-color: #aaa #bbb #bbb;
}

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="range"],
input[type="date"],
input[type="month"],
input[type="week"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="color"],
textarea {
	color: #666;
	border: 1px solid #ccc;
	border-radius: 3px;
	padding: 3px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="number"]:focus,
input[type="tel"]:focus,
input[type="range"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="week"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="color"]:focus,
textarea:focus {
	color: #111;
}

select {
	border: 1px solid #ccc;
}

textarea {
	width: 100%;
}

/*--------------------------------------------------------------
# Layouts
--------------------------------------------------------------*/

/*--------------------------------------------------------------
# Components
--------------------------------------------------------------*/

/* Navigation
--------------------------------------------- */
.main-navigation {
	display: block;
	width: 100%;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

.main-navigation ul li:hover > ul,
.main-navigation ul li.focus > ul {
	left: auto;
}

.main-navigation li {
	position: relative;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
}

@media screen and (min-width: 37.5em) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
	}
}

.site-main .comment-navigation,
.site-main
.posts-navigation,
.site-main
.post-navigation {
	margin: 0 0 1.5em;
}

.comment-navigation .nav-links,
.posts-navigation .nav-links,
.post-navigation .nav-links {
	display: flex;
}

.comment-navigation .nav-previous,
.posts-navigation .nav-previous,
.post-navigation .nav-previous {
	flex: 1 0 50%;
}

.comment-navigation .nav-next,
.posts-navigation .nav-next,
.post-navigation .nav-next {
	text-align: end;
	flex: 1 0 50%;
}

/* Posts and pages
--------------------------------------------- */
.sticky {
	display: block;
}



.updated:not(.published) {
	display: none;
}

.page-content,
.entry-content,
.entry-summary {
	margin: 1.5em 0 0;
}

.page-links {
	clear: both;
	margin: 0 0 1.5em;
}

/* Comments
--------------------------------------------- */
.comment-content a {
	word-wrap: break-word;
}

.bypostauthor {
	display: block;
}

/* Widgets
--------------------------------------------- */
.widget {
	margin: 0 0 1.5em;
}

.widget select {
	max-width: 100%;
}

/* Media
--------------------------------------------- */
.page-content .wp-smiley,
.entry-content .wp-smiley,
.comment-content .wp-smiley {
	border: none;
	margin-bottom: 0;
	margin-top: 0;
	padding: 0;
}

/* Make sure logo link wraps around logo image. */
.custom-logo-link {
	display: inline-block;
}

/* Captions
--------------------------------------------- */
.wp-caption {
	margin-bottom: 1.5em;
	max-width: 100%;
}

.wp-caption img[class*="wp-image-"] {
	display: block;
	margin-left: auto;
	margin-right: auto;
}

.wp-caption .wp-caption-text {
	margin: 0.8075em 0;
}

.wp-caption-text {
	text-align: center;
}

/* Galleries
--------------------------------------------- */
.gallery {
	margin-bottom: 1.5em;
	display: grid;
	grid-gap: 1.5em;
}

.gallery-item {
	display: inline-block;
	text-align: center;
	width: 100%;
}

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

.gallery-columns-3 {
	grid-template-columns: repeat(3, 1fr);
}

.gallery-columns-4 {
	grid-template-columns: repeat(4, 1fr);
}

.gallery-columns-5 {
	grid-template-columns: repeat(5, 1fr);
}

.gallery-columns-6 {
	grid-template-columns: repeat(6, 1fr);
}

.gallery-columns-7 {
	grid-template-columns: repeat(7, 1fr);
}

.gallery-columns-8 {
	grid-template-columns: repeat(8, 1fr);
}

.gallery-columns-9 {
	grid-template-columns: repeat(9, 1fr);
}

.gallery-caption {
	display: block;
}

/*--------------------------------------------------------------
# Plugins
--------------------------------------------------------------*/

/* Jetpack infinite scroll
--------------------------------------------- */

/* Hide the Posts Navigation and the Footer when Infinite Scroll is in use. */
.infinite-scroll .posts-navigation,
.infinite-scroll.neverending .site-footer {
	display: none;
}

/* Re-display the Theme Footer when Infinite Scroll has reached its end. */
.infinity-end.neverending .site-footer {
	display: block;
}

/*--------------------------------------------------------------
# Utilities
--------------------------------------------------------------*/

/* Accessibility
--------------------------------------------- */

/* Text meant only for screen readers. */
.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.screen-reader-text:focus {
	background-color: #f1f1f1;
	border-radius: 3px;
	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
	clip: auto !important;
	clip-path: none;
	color: #21759b;
	display: block;
	font-size: 0.875rem;
	font-weight: 700;
	height: auto;
	left: 5px;
	line-height: normal;
	padding: 15px 23px 14px;
	text-decoration: none;
	top: 5px;
	width: auto;
	z-index: 100000;
}

/* Do not show the outline on the skip link target. */
#primary[tabindex="-1"]:focus {
	outline: 0;
}

/* Alignments
--------------------------------------------- */
.alignleft {

	/*rtl:ignore*/
	float: left;

	/*rtl:ignore*/
	margin-right: 1.5em;
	margin-bottom: 1.5em;
}

.alignright {

	/*rtl:ignore*/
	float: right;

	/*rtl:ignore*/
	margin-left: 1.5em;
	margin-bottom: 1.5em;
}

.aligncenter {
	clear: both;
	display: block;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: 1.5em;
}
/* --- TÙY CHỈNH GIÁ SẢN PHẨM --- */
.custom-price-wrapper p.price {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
}
.custom-price-wrapper p.price del {
    color: #9ca3af;
    font-size: 1.1rem;
    font-weight: 500;
}
.custom-price-wrapper p.price ins {
    text-decoration: none;
    color: #111827; /* Đen đậm */
    font-size: 1.8rem;
    font-weight: 900;
}

/* --- TÙY CHỈNH NÚT GIỎ HÀNG & MUA NGAY --- */
.custom-add-to-cart form.cart {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: center;
}
.custom-add-to-cart .quantity {
    display: flex;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    height: 46px;
}
.custom-add-to-cart .quantity input.qty {
    width: 50px;
    border: none;
    text-align: center;
    font-weight: bold;
    -moz-appearance: textfield;
}
.custom-add-to-cart button.single_add_to_cart_button {
    background-color: #1a3c34; /* Màu xanh đen sang trọng */
    color: #fff;
    border: none;
    height: 46px;
    padding: 0 25px;
    border-radius: 8px;
    font-weight: bold;
    text-transform: uppercase;
    font-size: 13px;
    cursor: pointer;
    transition: 0.3s;
}
.custom-add-to-cart button.single_add_to_cart_button:hover {
    background-color: #111;
}

/* --- TÙY CHỈNH TABS MÔ TẢ --- */
.custom-woo-tabs ul.tabs {
    display: flex;
    justify-content: center;
    gap: 30px;
    padding: 0;
    margin: 0 0 30px 0;
    list-style: none;
    border-bottom: 2px solid #f3f4f6;
}
.custom-woo-tabs ul.tabs li {
    margin: 0;
}
.custom-woo-tabs ul.tabs li a {
    color: #6b7280;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 14px;
    padding: 10px 0;
    display: block;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
}
.custom-woo-tabs ul.tabs li.active a {
    color: #111;
    border-color: #111; /* Đường gạch dưới màu đen */
}

/* --- SẢN PHẨM TƯƠNG TỰ (GRID SẠCH) --- */
.custom-related-products ul.products {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.custom-related-products ul.products li.product {
    margin: 0;
    text-align: center;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 15px;
    transition: 0.3s;
}
.custom-related-products ul.products li.product:hover {
    box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1);
}
.custom-related-products ul.products li.product img {
    border-radius: 8px;
    margin-bottom: 15px;
}
.custom-related-products ul.products li.product h2 {
    font-size: 15px;
    font-weight: 700;
    color: #111;
    margin-bottom: 10px;
}
.custom-related-products ul.products li.product .price {
    color: #111;
    font-weight: bold;
}
.custom-related-products ul.products li.product .button {
    display: inline-block;
    background: #111;
    color: #fff;
    padding: 8px 20px;
    border-radius: 99px;
    font-size: 12px;
    text-transform: uppercase;
    margin-top: 15px;
}

@media (max-width: 768px) {
    .custom-related-products ul.products { grid-template-columns: repeat(2, 1fr); }
    .custom-woo-tabs ul.tabs { flex-direction: column; text-align: center; }
}
/* --- SỬA LỖI ẢNH GALLERY BỊ LỆCH --- */
.custom-product-gallery .woocommerce-product-gallery__image {
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #f3f4f6;
    margin-bottom: 15px;
}
.custom-product-gallery .flex-control-nav.flex-control-thumbs {
    display: flex !important;
    gap: 10px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.custom-product-gallery .flex-control-nav.flex-control-thumbs li {
    width: 25% !important; /* Chia đều 4 ảnh nhỏ */
    float: none !important;
}
.custom-product-gallery .flex-control-nav.flex-control-thumbs img {
    border-radius: 8px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: 0.3s;
    height: 100%;
    object-fit: cover;
}
.custom-product-gallery .flex-control-nav.flex-control-thumbs img.flex-active {
    border-color: #1a3c34;
    opacity: 0.8;
}

/* --- TÙY CHỈNH NÚT ADD TO CART BỊ XẤU --- */
.custom-add-to-cart form.cart { display: flex; gap: 15px; align-items: center; margin-bottom: 0; }
.custom-add-to-cart .quantity input.qty {
    width: 60px; height: 46px; border: 1px solid #e5e7eb; border-radius: 8px; text-align: center; font-weight: bold; background: #f9fafb;
}
.custom-add-to-cart button.single_add_to_cart_button {
    background-color: #1a3c34; color: #fff; border: none; height: 46px; padding: 0 30px; border-radius: 8px; font-weight: bold; text-transform: uppercase; font-size: 14px; cursor: pointer; transition: 0.3s;
}
.custom-add-to-cart button.single_add_to_cart_button:hover { background-color: #111; transform: translateY(-2px); }

/* --- ÉP LẠI TABS DESCRIPTION KHÔNG BỊ VỠ --- */
.custom-woo-tabs ul.tabs {
    display: flex; border-bottom: 2px solid #e5e7eb; margin: 0 0 30px 0; padding: 0; list-style: none; gap: 30px;
}
.custom-woo-tabs ul.tabs li a {
    color: #6b7280; font-weight: bold; text-transform: uppercase; font-size: 15px; padding: 10px 0; display: block; text-decoration: none; border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.custom-woo-tabs ul.tabs li.active a { color: #1a3c34; border-color: #1a3c34; }
.custom-woo-tabs h2 { display: none; } /* Ẩn cái chữ Description to đùng lặp lại bên trong */
.custom-woo-tabs .panel { color: #4b5563; line-height: 1.8; }

/* --- ÉP SẢN PHẨM LIÊN QUAN THÀNH DẠNG GRID GỌN GÀNG --- */
.custom-related-products ul.products { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; padding: 0; margin: 0; list-style: none; }
.custom-related-products ul.products::before, .custom-related-products ul.products::after { display: none; } /* Xoá các khoảng trắng ảo của Woo */
.custom-related-products li.product { text-align: center; margin: 0; width: 100% !important; border: 1px solid #f3f4f6; border-radius: 12px; padding: 16px; background: #fff; transition: 0.3s; position: relative; }
.custom-related-products li.product:hover { box-shadow: 0 10px 20px rgba(0,0,0,0.05); transform: translateY(-5px); border-color: #e5e7eb; }
.custom-related-products li.product img { border-radius: 8px; margin-bottom: 15px; width: 100%; height: auto; }
.custom-related-products li.product .woocommerce-loop-product__title { font-size: 15px; font-weight: 700; color: #111; margin-bottom: 10px; }
.custom-related-products li.product .price { color: #f97316; font-weight: 900; font-size: 16px; display: block; margin-bottom: 15px; }
.custom-related-products li.product .button { background: #1a3c34; color: #fff; padding: 8px 24px; border-radius: 99px; font-size: 12px; font-weight: bold; text-transform: uppercase; text-decoration: none; display: inline-block; transition: 0.3s;}
.custom-related-products li.product .button:hover { background: #111; }
.custom-related-products li.product .onsale { position: absolute; top: 10px; left: 10px; background: #bf3f3f; color: #fff; padding: 4px 10px; border-radius: 99px; font-size: 11px; font-weight: bold; z-index: 10; }

@media (max-width: 768px) {
    .custom-related-products ul.products { grid-template-columns: repeat(2, 1fr); }
    .custom-add-to-cart form.cart { flex-direction: column; align-items: stretch; }
    .custom-add-to-cart button.single_add_to_cart_button { width: 100%; }
}
/* =======================================================
   1. TÙY CHỈNH GIÁ TIỀN (CHUẨN HÌNH 2)
   ======================================================= */
.custom-price-wrapper p.price {
    display: flex;
    align-items: center;
    gap: 15px;
    margin: 0;
}
.custom-price-wrapper p.price del {
    color: #888888;
    font-size: 24px;
    font-weight: 400;
}
.custom-price-wrapper p.price ins {
    text-decoration: none;
}
/* Giá mới to, đen, đậm */
.custom-price-wrapper p.price ins .amount,
.custom-price-wrapper p.price > .amount {
    color: #000000;
    font-size: 32px;
    font-weight: 900;
}

/* =======================================================
   2. KHU VỰC NÚT BẤM VÀ SỐ LƯỢNG
   ======================================================= */
.custom-add-to-cart form.cart {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
}

/* Khu vực bao quanh Ô số lượng */
.custom-qty-wrapper {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-right: 15px;
    margin-bottom: 10px;
}
.custom-qty-wrapper .qty-label {
    font-size: 18px;
    font-weight: 800;
    color: #333;
}

/* Nút cộng trừ và ô nhập số */
.custom-add-to-cart .quantity {
    display: flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    overflow: hidden;
    height: 48px;
    background: #fff;
}
.custom-add-to-cart .quantity input.qty {
    width: 50px;
    height: 100%;
    border: none !important;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    padding: 0;
    -moz-appearance: textfield; /* Ẩn mũi tên mặc định firefox */
}
.custom-add-to-cart .quantity input.qty::-webkit-outer-spin-button,
.custom-add-to-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none; /* Ẩn mũi tên mặc định chrome */
}
.qty-btn {
    width: 40px;
    height: 100%;
    background: transparent;
    border: none;
    font-size: 18px;
    font-weight: bold;
    color: #555;
    cursor: pointer;
    transition: 0.2s;
}
.qty-btn:hover { background: #f3f4f6; color: #000; }

/* =======================================================
   3. NÚT THÊM VÀO GIỎ HÀNG VÀ MUA NGAY
   ======================================================= */
.custom-add-to-cart button.single_add_to_cart_button,
.custom-add-to-cart button.single_buy_now_button {
    height: 48px;
    padding: 0 30px;
    border-radius: 8px;
    font-weight: 800;
    text-transform: uppercase;
    font-size: 14px;
    cursor: pointer;
    transition: 0.3s;
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 10px;
}

/* Nút Thêm vào giỏ hàng (Xanh đen + Icon Cart) */
.custom-add-to-cart button.single_add_to_cart_button {
    background-color: #213a30; 
    color: #fff;
    gap: 10px;
}
.custom-add-to-cart button.single_add_to_cart_button::before {
    content: '\f07a'; /* Icon giỏ hàng FontAwesome */
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    font-size: 16px;
}
.custom-add-to-cart button.single_add_to_cart_button:hover { background-color: #111; }

/* Nút Mua Ngay (Đen tuyền) */
.custom-add-to-cart button.single_buy_now_button {
    background-color: #000;
    color: #fff;
}
.custom-add-to-cart button.single_buy_now_button:hover { background-color: #f97316; }
/* Ẩn thanh cuộn của khung Carousel nhưng vẫn cho phép vuốt */
.hide-scroll {
    -ms-overflow-style: none;  /* IE and Edge */
    scrollbar-width: none;  /* Firefox */
}
.hide-scroll::-webkit-scrollbar {
    display: none; /* Chrome, Safari and Opera */
}
/* Ép cụm số lượng chiếm 100% để đẩy nút xuống hàng */
.custom-qty-wrapper {
    flex: 0 0 100%;
    margin-bottom: 15px; /* Tạo khoảng cách với các nút bên dưới */
}

/* Căn chỉnh 2 nút nằm cạnh nhau ở hàng dưới */
.custom-add-to-cart form.cart {
    display: flex;
    flex-wrap: wrap; /* Cho phép rớt dòng */
    align-items: center;
    gap: 15px;
}
.swiper-pagination-bullet { background: #d1d5db; opacity: 1; width: 10px; height: 10px; }
.swiper-pagination-bullet-active { background: #1a3c34; width: 20px; border-radius: 10px; }
/* --- RESPONSIVE CHO MOBILE (NÚT BẤM SẢN PHẨM) --- */
@media (max-width: 767px) {
    /* Ép chữ nút nhỏ lại và padding gọn gàng hơn */
    .custom-related-products a.custom-rel-btn,
    .custom-recent-products a.custom-rel-btn {
        font-size: 10px !important; /* Chữ nhỏ lại */
        padding: 8px 10px !important; /* Thu gọn chiều cao và chiều ngang */
        letter-spacing: 0.5px; /* Khoảng cách chữ gọn lại */
        white-space: nowrap; /* Tuyệt đối KHÔNG cho chữ rớt dòng */
        overflow: hidden; 
        text-overflow: ellipsis; /* Nếu lỡ chữ dài quá thì hiện dấu ... */
    }

    /* Thu nhỏ giá tiền một chút cho cân đối */
    .custom-related-products .text-\[\#f97316\],
    .custom-recent-products .text-\[\#f97316\] {
        font-size: 14px !important;
        margin-bottom: 10px !important;
    }
    
    /* Thu nhỏ tên sản phẩm */
    .custom-related-products h3,
    .custom-recent-products h3 {
        font-size: 13px !important;
        line-height: 1.4 !important;
    }
}
/* =======================================================
   TÙY CHỈNH HIỂN THỊ GIÁ TIỀN (Sản phẩm liên quan & Vừa xem)
   ======================================================= */

/* 1. Giá gốc (Giá cũ bị gạch ngang) -> Màu đen, size nhỏ */
.custom-related-products del,
.custom-recent-products del {
    color: #111111 !important; /* Chuyển sang màu đen */
    font-size: 13px !important; /* Size nhỏ hơn */
    font-weight: 500 !important; /* Chữ mỏng hơn giá chính một chút */
    display: inline-block;
    margin-right: 8px; /* Tạo khoảng cách với giá bán bên cạnh */
    opacity: 0.7; /* Hơi mờ đi một chút để tôn giá bán lên (bạn có thể xóa dòng này nếu muốn đen đậm) */
}

/* 2. Giá bán hiện tại -> Bỏ màu nền, to và nổi bật */
.custom-related-products ins,
.custom-recent-products ins {
    background: transparent !important; /* Bỏ hoàn toàn màu nền mặc định */
    background-color: transparent !important;
    text-decoration: none !important; /* Xóa đường gạch chân (nếu có) của thẻ ins */
    font-size: 16px !important; /* Size to hơn giá cũ */
    font-weight: 900 !important; /* In đậm nét chữ */
    display: inline-block;
}

/* Fix trên mobile: Ép size chữ cân đối lại không bị vỡ */
@media (max-width: 767px) {
    .custom-related-products del,
    .custom-recent-products del {
        font-size: 11px !important;
    }
    .custom-related-products ins,
    .custom-recent-products ins {
        font-size: 14px !important;
    }
}
/* Ép tất cả các thẻ con bên trong thẻ INS của sản phẩm chính phải mất màu nền */
.single-product .summary .price ins,
.single-product .summary .price ins *,
.single-product .price ins,
.single-product .price ins * {
    background: none !important;
    background-color: transparent !important;
    box-shadow: none !important; /* Xóa bỏ đổ bóng nếu có */
    text-decoration: none !important; /* Xóa gạch chân mặc định */
}

/* Tùy chỉnh màu sắc chữ cho giá đã giảm ở sản phẩm chính (Nếu cần đồng bộ màu cam) */
.single-product .summary .price ins .amount {
    color: #f97316 !important; /* Bạn có thể đổi mã màu tùy ý ở đây */
}

/* Tùy chỉnh giá gốc cũ (del) ở sản phẩm chính cho nhỏ lại và có màu đen */
.single-product .summary .price del,
.single-product .summary .price del * {
    color: #111111 !important; /* Chuyển về màu đen */
    font-size: 0.8em !important; /* Thu nhỏ lại bằng 80% giá bán */
    font-weight: 500 !important;
    opacity: 0.6; /* Làm mờ nhẹ */
}

/* =======================================================
   HOÀN THIỆN GIAO DIỆN TRANG GIỎ HÀNG (CART PAGE)
   ======================================================= */

/* --- 1. BẢNG SẢN PHẨM (CỘT TRÁI) --- */
/* Xóa viền khung mặc định của WooCommerce */
.woocommerce-cart-form table.shop_table {
    border: none !important;
    border-radius: 0;
    margin-bottom: 0;
}
/* Tiêu đề cột (Sản phẩm, Giá, Số lượng...) */
.woocommerce-cart-form table.shop_table th {
    border-top: none !important;
    border-bottom: 2px solid #f3f4f6 !important;
    padding: 16px 0;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 13px;
    color: #111111;
}
/* Các hàng sản phẩm */
.woocommerce-cart-form table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 24px 0;
    vertical-align: middle;
}
/* Xóa viền dòng cuối cùng cho sạch sẽ */
.woocommerce-cart-form table.shop_table tr.woocommerce-cart-form__cart-item:last-child td {
    border-bottom: none !important;
}

/* Nút Xóa (Thùng rác đỏ viền tròn) */
.woocommerce-cart-form a.remove {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 36px !important;
    height: 36px !important;
    border-radius: 50% !important;
    border: 1px solid #fca5a5 !important; /* Viền đỏ nhạt */
    color: #ef4444 !important; /* Chữ đỏ */
    background: transparent !important;
    font-size: 14px !important;
    font-weight: normal;
    text-decoration: none !important;
    transition: all 0.3s ease;
}
.woocommerce-cart-form a.remove:hover {
    background-color: #ef4444 !important;
    color: #ffffff !important;
}

/* Căn chỉnh bộ bấm số lượng [-] 1 [+] */
.woocommerce-cart-form__contents .quantity {
    display: inline-flex;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background: #fff;
    overflow: hidden;
    height: 40px;
}
.woocommerce-cart-form__contents .quantity input.qty {
    width: 45px !important;
    height: 100% !important;
    border: none !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding: 0 !important;
    color: #111;
    -moz-appearance: textfield;
    background: transparent;
}
/* Ẩn mũi tên lên xuống mặc định của input số */
.woocommerce-cart-form__contents .quantity input::-webkit-outer-spin-button,
.woocommerce-cart-form__contents .quantity input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
/* =======================================================
   ĐẶC TRỊ GIAO DIỆN TRANG GIỎ HÀNG 
   ======================================================= */

/* --- 1. TẠO HÌNH BỘ BẤM SỐ LƯỢNG [-] 1 [+] --- */
.woocommerce-cart-form__contents .quantity {
    display: inline-flex !important;
    align-items: center;
    border: 1px solid #e5e7eb;
    border-radius: 4px;
    background: #fff;
    height: 40px;
    width: 110px;
    justify-content: space-between;
}
.woocommerce-cart-form__contents .quantity input.qty {
    width: 40px !important;
    height: 100% !important;
    border: none !important;
    border-left: 1px solid #e5e7eb !important;
    border-right: 1px solid #e5e7eb !important;
    text-align: center;
    font-weight: bold;
    font-size: 15px;
    padding: 0 !important;
    margin: 0 !important;
    color: #111;
}
.woocommerce-cart-form__contents .quantity .qty-btn {
    width: 35px;
    height: 100%;
    background: transparent !important;
    border: none !important;
    color: #6b7280;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
}
.woocommerce-cart-form__contents .quantity .qty-btn:hover {
    background: #f3f4f6 !important;
    color: #111;
}

/* --- 2. ÉP MÀU NÚT "TIẾN HÀNH THANH TOÁN" (XÓA MÀU TÍM) --- */
.wc-proceed-to-checkout a.checkout-button {
    background-color: var(--theme-primary, #1a3b32) !important; /* Ép lấy màu xanh rêu */
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 16px !important;
    border-radius: 6px !important;
    text-align: center !important;
    display: block !important;
    width: 100% !important;
    font-size: 15px !important;
    border: none !important;
}
.wc-proceed-to-checkout a.checkout-button:hover {
    filter: brightness(0.85);
}

/* --- 3. FIX NÚT CẬP NHẬT GIỎ HÀNG (Màu vàng đồng) --- */
.woocommerce-cart-form .actions button[name="update_cart"] {
    background-color: transparent !important;
    border: 1px solid var(--theme-secondary, #c19b67) !important;
    color: var(--theme-secondary, #c19b67) !important;
    padding: 12px 24px !important;
    border-radius: 4px !important;
    font-weight: bold !important;
    opacity: 1 !important; /* Xóa mờ mặc định của Woo */
}
.woocommerce-cart-form .actions button[name="update_cart"]:hover {
    background-color: var(--theme-secondary, #c19b67) !important;
    color: #fff !important;
}

/* --- 4. CHỈNH KHOẢNG CÁCH VÀ CHỮ TRONG BẢNG TỔNG TIỀN --- */
.cart_totals h2 {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111 !important;
    border-bottom: 2px solid #f3f4f6 !important;
    padding-bottom: 16px !important;
    margin-bottom: 16px !important;
    text-transform: uppercase !important;
}
.cart_totals table { width: 100% !important; }
.cart_totals table th {
    text-align: left !important;
    padding: 16px 0 !important;
    font-weight: normal !important;
    color: #4b5563 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
.cart_totals table td {
    text-align: right !important;
    padding: 16px 0 !important;
    font-weight: bold !important;
    color: #111 !important;
    border-bottom: 1px solid #f3f4f6 !important;
}
/* Hàng TỔNG TIỀN */
.cart_totals table tr.order-total th {
    font-size: 18px !important;
    font-weight: 800 !important;
    color: #111 !important;
    border-bottom: none !important;
}
.cart_totals table tr.order-total td,
.cart_totals table tr.order-total td .amount {
    font-size: 22px !important;
    color: var(--theme-secondary, #c19b67) !important; /* Ép lấy màu Vàng đồng */
    font-weight: 900 !important;
    border-bottom: none !important;
}

/* --- 5. ẨN CÁC KHỐI TRỐNG THỪA THÃI (Cross-sells) --- */
.cross-sells { display: none !important; }
/* 1. Đẩy toàn bộ khu vực Giỏ hàng cách xa Header cho thoáng */
.woocommerce-cart .woocommerce {
    margin-top: 40px !important;
    margin-bottom: 60px !important;
}

/* 2. Chỉnh lại khoảng cách giữa Nút Xóa, Hình ảnh và Tên Sản phẩm */
.woocommerce-cart-form table.shop_table td.product-remove {
    padding-right: 20px !important;
    width: 60px !important; /* Cố định không gian cho nút xóa */
}
.woocommerce-cart-form table.shop_table td.product-thumbnail {
    padding-right: 24px !important;
    width: 110px !important; /* Cố định không gian cho hình ảnh */
}
.woocommerce .cart-collaterals .cart_totals, .woocommerce-page .cart-collaterals .cart_totals
{
    float: right;
    width: 100% !important;
}
/* =======================================================
   XÓA KHUNG VIỀN MẶC ĐỊNH CỦA BẢNG TỔNG TIỀN
   ======================================================= */

/* Phá vỡ toàn bộ viền bảng, viền cột, viền hàng do theme/Woo ép vào */
.woocommerce-cart .cart-collaterals .cart_totals table,
.woocommerce-cart .cart-collaterals .cart_totals table tbody,
.woocommerce-cart .cart-collaterals .cart_totals table tr,
.woocommerce-cart .cart-collaterals .cart_totals table th,
.woocommerce-cart .cart-collaterals .cart_totals table td {
    border: none !important;
    background: transparent !important;
}

/* Chỉ kẻ đúng 1 đường phân cách mỏng nhẹ ở dưới cùng của hàng "Tạm tính" */
.woocommerce-cart .cart-collaterals .cart_totals table tr.cart-subtotal th,
.woocommerce-cart .cart-collaterals .cart_totals table tr.cart-subtotal td {
    border-bottom: 1px solid #f3f4f6 !important; 
}

/* Nếu bạn muốn bỏ luôn cả viền bao ngoài cùng của khối (nếu có) thì dùng cái này */
.cart-collaterals.border {
    border: none !important;
}
/* =======================================================
   BẢN FIX CUỐI CÙNG: TRANG THANH TOÁN (CLASSIC CHECKOUT)
   ======================================================= */

/* --- 1. ÉP CỘT TRÁI THÀNH 1 CỘT DỌC ĐỒNG NHẤT --- */
/* Mặc định Woo chia cột trái làm 2, ta ép nó xếp chồng lên nhau */
.woocommerce-checkout #customer_details {
    display: flex;
    flex-direction: column;
}
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout #customer_details .col-2 {
    width: 100% !important;
    max-width: 100% !important;
    float: none !important;
    padding: 0 !important;
    margin-bottom: 40px;
}

/* --- 2. BỐ CỤC 2 CỘT CHÍNH (TRÁI - PHẢI) TỶ LỆ CHUẨN --- */
@media (min-width: 1024px) {
    form.woocommerce-checkout {
        display: flex;
        flex-wrap: nowrap;
        gap: 50px;
        align-items: flex-start;
        margin-top: 30px;
    }
    #customer_details {
        width: 55% !important; /* Cột trái chiếm 55% */
    }
    .checkout-right-col {
        width: 45% !important; /* Cột phải chiếm 45% */
        background: #ffffff;
        border: 1px solid #f3f4f6;
        border-radius: 12px;
        padding: 32px;
        box-shadow: 0 4px 24px rgba(0,0,0,0.04);
        position: sticky;
        top: 100px; /* Trượt hóa đơn theo màn hình */
    }
}

/* --- 3. LÀM ĐẸP KHU VỰC MÃ ƯU ĐÃI (COUPON) GIỐNG ẢNH --- */
.woocommerce-form-coupon-toggle .woocommerce-info {
    background: #f9fafb !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    padding: 16px 24px !important;
    color: #4b5563 !important;
    margin-bottom: 20px !important;
    border-top: none !important;
    font-size: 15px;
}
.woocommerce-form-coupon-toggle .woocommerce-info::before { display: none !important; }
.woocommerce-form-coupon-toggle .woocommerce-info a {
    color: #3b82f6 !important;
    font-weight: 600;
    text-decoration: none;
}
/* Form nhập mã */
form.checkout_coupon {
    background: #fff;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px;
    padding: 24px !important;
    margin-bottom: 40px !important;
    display: flex !important;
    flex-wrap: wrap;
    gap: 16px;
}
form.checkout_coupon p { margin: 0 !important; width: 100%; }
form.checkout_coupon p.form-row-first {
    flex-grow: 1;
    width: auto !important;
}
form.checkout_coupon p.form-row-last {
    width: 150px !important;
}
form.checkout_coupon input.input-text {
    width: 100% !important;
    padding: 14px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 6px !important;
}
form.checkout_coupon button.button {
    width: 100% !important;
    background-color: var(--theme-primary, #1a3b32) !important;
    color: #fff !important;
    padding: 14px 24px !important;
    border-radius: 6px !important;
    text-transform: uppercase;
    font-weight: bold;
}

/* --- 4. CĂN CHỈNH TIÊU ĐỀ (CÓ GẠCH VÀNG) --- */
.woocommerce-checkout h3 {
    font-size: 18px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: #111;
    padding-left: 12px;
    border-left: 3px solid var(--theme-secondary, #c19b67) !important;
    margin-bottom: 24px !important;
    margin-top: 0 !important;
    border-bottom: none !important;
}

/* --- 5. LÀM ĐẸP Ô NHẬP THÔNG TIN --- */
.woocommerce-checkout .form-row { margin-bottom: 20px; }
.woocommerce-checkout .form-row label {
    font-weight: 600;
    color: #374151;
    font-size: 14px;
    margin-bottom: 8px;
    display: block;
}
.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row textarea {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    background-color: #fff;
    color: #111;
    font-size: 15px;
    box-shadow: none;
    transition: 0.3s ease;
}
.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row textarea:focus {
    border-color: var(--theme-primary, #1a3b32);
    outline: none;
}

/* --- 6. BẢNG HÓA ĐƠN TRONG CARD BÊN PHẢI --- */
#order_review table.shop_table {
    border: none !important;
    width: 100%;
    margin-bottom: 24px;
}
#order_review table.shop_table th,
#order_review table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 16px 0 !important;
}
#order_review table.shop_table th { text-align: left; color: #4b5563; font-weight: normal; }
#order_review table.shop_table td { text-align: right; font-weight: bold; color: #111; }

#order_review table.shop_table tr.order-total th {
    font-size: 18px;
    font-weight: 800;
    color: #111;
    border-bottom: none !important;
}
#order_review table.shop_table tr.order-total td,
#order_review table.shop_table tr.order-total td .amount {
    font-size: 22px;
    color: var(--theme-secondary, #c19b67) !important;
    font-weight: 800;
    border-bottom: none !important;
}

/* --- 7. NÚT ĐẶT HÀNG KHỔNG LỒ (ĐÃ FIX MÀU ĐEN THÀNH XANH RÊU) --- */
#payment { background: transparent !important; }
#payment ul.payment_methods {
    border-bottom: none !important;
    padding: 0 !important;
    border-top: 1px solid #f3f4f6 !important;
    padding-top: 20px !important;
}
#payment #place_order {
    background-color: var(--theme-primary, #1a3b32) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 18px !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    width: 100% !important;
    margin-top: 20px !important;
    border: none !important;
}
#payment #place_order:hover { filter: brightness(0.85); }
/* =======================================================
   CANH LỀ TRÁI PHẢI TRANG THANH TOÁN (TẠO CONTAINER)
   ======================================================= */

body.woocommerce-checkout .woocommerce {
    max-width: 1200px !important; /* Chiều rộng chuẩn khớp với Header của bạn */
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Đẩy toàn bộ nội dung xuống một chút cho cách xa thanh Menu */
body.woocommerce-checkout .woocommerce-form-coupon-toggle {
    margin-top: 40px !important;
}
/* =======================================================
   CĂN CHỈNH TRÁI/PHẢI CHO BẢNG SẢN PHẨM TRANG THANH TOÁN
   ======================================================= */

/* Cột Tên sản phẩm (Product) -> Căn lề trái hoàn toàn */
#order_review table.shop_table th.product-name,
#order_review table.shop_table td.product-name {
    text-align: left !important;
}

/* Cột Giá tiền (Subtotal) -> Căn lề phải hoàn toàn */
#order_review table.shop_table th.product-total,
#order_review table.shop_table td.product-total {
    text-align: right !important;
}

/* Fix lỗi padding mặc định của Woo khiến chữ không sát lề */
#order_review table.shop_table td.product-name {
    padding-left: 0 !important; 
}
#order_review table.shop_table td.product-total {
    padding-right: 0 !important;
}
/* =======================================================
   CHỐNG PHÓNG TO SẢN PHẨM VỪA XEM / SẢN PHẨM TƯƠNG TỰ
   ======================================================= */

/* Ép tất cả các danh sách sản phẩm hiển thị dạng Lưới chia cột cố định */
.woocommerce ul.products:not(.swiper-wrapper),
.woocommerce section.related.products ul.products,
.woocommerce section.up-sells ul.products,
.custom-recent-products ul.products,
.recently-viewed ul.products {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important; /* Máy tính: Luôn ép 4 cột bằng nhau */
    gap: 24px !important;
}

/* Hủy bỏ lệnh Float và tự động giãn rộng của WooCommerce */
.woocommerce ul.products:not(.swiper-wrapper) li.product,
.woocommerce section.related.products ul.products li.product,
.woocommerce section.up-sells ul.products li.product,
.custom-recent-products ul.products li.product {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    float: none !important;
    clear: none !important; /* Xóa lệnh rớt dòng lộn xộn của Woo */
}

/* Đảm bảo khung hình ảnh bên trong luôn vuông vức, không bị vỡ */
.woocommerce ul.products li.product img {
    width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
}

/* --- CĂN CHỈNH ĐẸP MẮT CHO IPAD --- */
@media (max-width: 1024px) {
    .woocommerce ul.products:not(.swiper-wrapper),
    .woocommerce section.related.products ul.products,
    .custom-recent-products ul.products {
        grid-template-columns: repeat(3, 1fr) !important; /* Tablet: Luôn ép 3 cột */
        gap: 20px !important;
    }
}

/* --- CĂN CHỈNH ĐẸP MẮT CHO ĐIỆN THOẠI --- */
@media (max-width: 768px) {
    .woocommerce ul.products:not(.swiper-wrapper),
    .woocommerce section.related.products ul.products,
    .custom-recent-products ul.products {
        grid-template-columns: repeat(2, 1fr) !important; /* Mobile: Luôn ép 2 cột */
        gap: 12px !important;
    }
}
/* =======================================================
   LỘT XÁC TRANG TÀI KHOẢN (MY ACCOUNT)
   ======================================================= */

/* --- 1. ÉP KHUNG CHUẨN CHO TOÀN BỘ TRANG --- */
body.woocommerce-account .woocommerce {
    max-width: 1200px !important;
    margin: 40px auto 60px auto !important;
    padding: 0 20px !important;
}

/* ==========================================
   TRẠNG THÁI 1: CHƯA ĐĂNG NHẬP (FORM ĐĂNG NHẬP/ĐĂNG KÝ)
   ========================================== */

/* Chia đôi màn hình cho Form Đăng nhập & Đăng ký */
.woocommerce-account .u-columns.col2-set {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
    justify-content: center;
}
.woocommerce-account .u-columns .u-column1,
.woocommerce-account .u-columns .u-column2 {
    width: 100%;
    flex: 1;
    min-width: 320px;
    max-width: 500px;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 16px;
    padding: 40px;
    box-shadow: 0 4px 24px rgba(0,0,0,0.03);
}

/* Tiêu đề Form */
.woocommerce-account .u-columns h2 {
    font-size: 22px !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    color: #111;
    padding-left: 14px;
    border-left: 4px solid var(--theme-secondary, #c19b67) !important; /* Gạch viền vàng đồng */
    margin-bottom: 30px !important;
    margin-top: 0 !important;
}

/* Ô nhập liệu (Input) */
.woocommerce-account .woocommerce-form-login .form-row,
.woocommerce-account .woocommerce-form-register .form-row {
    margin-bottom: 20px;
}
.woocommerce-account .woocommerce-form-login label,
.woocommerce-account .woocommerce-form-register label {
    font-weight: 600;
    color: #374151;
    margin-bottom: 8px;
    display: block;
}
.woocommerce-account .woocommerce-form-login input.input-text,
.woocommerce-account .woocommerce-form-register input.input-text {
    width: 100%;
    padding: 14px 16px;
    border: 1px solid #e5e7eb;
    border-radius: 8px;
    background-color: #fff;
    color: #111;
    font-size: 15px;
    transition: 0.3s ease;
}
.woocommerce-account .woocommerce-form-login input.input-text:focus,
.woocommerce-account .woocommerce-form-register input.input-text:focus {
    border-color: var(--theme-primary, #1a3b32);
    outline: none;
    box-shadow: 0 0 0 3px rgba(26, 59, 50, 0.1);
}

/* Nút Đăng nhập / Đăng ký */
.woocommerce-account .woocommerce-form-login button[name="login"],
.woocommerce-account .woocommerce-form-register button[name="register"] {
    background-color: var(--theme-primary, #1a3b32) !important;
    color: #ffffff !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    padding: 16px !important;
    border-radius: 8px !important;
    font-size: 16px !important;
    width: 100% !important;
    border: none !important;
    margin-top: 10px;
    transition: 0.3s ease;
}
.woocommerce-account .woocommerce-form-login button[name="login"]:hover,
.woocommerce-account .woocommerce-form-register button[name="register"]:hover {
    filter: brightness(0.85);
}

/* ==========================================
   TRẠNG THÁI 2: ĐÃ ĐĂNG NHẬP (DASHBOARD)
   ========================================== */

/* Bố cục chia cột: Menu Trái - Nội dung Phải */
@media (min-width: 768px) {
    .woocommerce-account .woocommerce-MyAccount-navigation {
        float: left;
        width: 25%;
    }
    .woocommerce-account .woocommerce-MyAccount-content {
        float: right;
        width: 70%;
    }
}

/* --- Menu Điều hướng (Sidebar Trái) --- */
.woocommerce-MyAccount-navigation ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
}
.woocommerce-MyAccount-navigation ul li {
    border-bottom: 1px solid #f3f4f6;
    margin: 0 !important;
}
.woocommerce-MyAccount-navigation ul li:last-child {
    border-bottom: none;
}
.woocommerce-MyAccount-navigation ul li a {
    display: block;
    padding: 16px 24px;
    color: #4b5563;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    font-size: 15px;
}
/* Hiệu ứng rê chuột và Tab đang chọn */
.woocommerce-MyAccount-navigation ul li a:hover {
    background: #f9fafb;
    color: var(--theme-primary, #1a3b32);
    padding-left: 28px; /* Hiệu ứng thụt lề nhẹ khi hover */
}
.woocommerce-MyAccount-navigation ul li.is-active a {
    background: #f9fafb;
    color: var(--theme-primary, #1a3b32);
    border-left: 4px solid var(--theme-primary, #1a3b32);
    padding-left: 24px;
}

/* --- Khung Nội dung chính (Cột Phải) --- */
.woocommerce-MyAccount-content {
    background: #ffffff;
    border: 1px solid #f3f4f6;
    border-radius: 12px;
    padding: 32px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.02);
    color: #374151;
    line-height: 1.6;
}

/* Làm đẹp thẻ Thông báo (Notice) */
.woocommerce-MyAccount-content .woocommerce-message,
.woocommerce-MyAccount-content .woocommerce-info {
    background: #f9fafb !important;
    border-top: none !important;
    border-left: 4px solid var(--theme-primary, #1a3b32) !important;
    border-radius: 8px;
    color: #111 !important;
}
.woocommerce-MyAccount-content .woocommerce-message::before,
.woocommerce-MyAccount-content .woocommerce-info::before {
    color: var(--theme-primary, #1a3b32) !important;
}

/* Làm đẹp bảng Đơn hàng (Orders Table) */
.woocommerce-MyAccount-content table.shop_table {
    border: none !important;
    width: 100%;
}
.woocommerce-MyAccount-content table.shop_table th {
    background: #f9fafb;
    border: none !important;
    padding: 16px !important;
    color: #111;
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
}
.woocommerce-MyAccount-content table.shop_table td {
    border-top: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    padding: 16px !important;
    vertical-align: middle;
}
/* Nút Xem đơn hàng */
.woocommerce-MyAccount-content table.shop_table .button {
    background: transparent !important;
    border: 1px solid var(--theme-primary, #1a3b32) !important;
    color: var(--theme-primary, #1a3b32) !important;
    border-radius: 6px !important;
    padding: 8px 16px !important;
    font-weight: bold;
}
.woocommerce-MyAccount-content table.shop_table .button:hover {
    background: var(--theme-primary, #1a3b32) !important;
    color: #fff !important;
}

/* ==========================================
   MOBILE RESPONSIVE
   ========================================== */
@media (max-width: 767px) {
    .woocommerce-MyAccount-navigation {
        margin-bottom: 30px;
    }
    .woocommerce-account .u-columns.col2-set {
        flex-direction: column;
    }
    .woocommerce-account .u-columns .u-column1,
    .woocommerce-account .u-columns .u-column2 {
        padding: 24px;
    }
    .woocommerce-MyAccount-content {
        padding: 24px 16px;
    }
    /* Biến menu dọc thành ngang vuốt được trên mobile */
    .woocommerce-MyAccount-navigation ul {
        display: flex;
        overflow-x: auto;
        white-space: nowrap;
        border-radius: 8px;
    }
    .woocommerce-MyAccount-navigation ul li {
        border-bottom: none;
        border-right: 1px solid #f3f4f6;
    }
    .woocommerce-MyAccount-navigation ul li.is-active a {
        border-left: none;
        border-bottom: 3px solid var(--theme-primary, #1a3b32);
        padding-left: 20px;
    }
}
/* =======================================================
   TRANG SHOP: CĂN CHỈNH SỐ CỘT & LAYOUT GRID / MASONRY
   ======================================================= */

/* Dọn dẹp khoảng trống rác của Woo */
.woocommerce ul.products::before, 
.woocommerce ul.products::after { display: none !important; }
.woocommerce ul.products li.product {
    width: 100% !important; max-width: 100% !important;
    margin: 0 !important; clear: none !important; float: none !important;
}

/* -----------------------------------------
   TRẠNG THÁI 1: LƯỚI CHUẨN ĐỒNG ĐỀU (GRID) 
   ----------------------------------------- */
body.shop-layout-grid .woocommerce ul.products {
    display: grid !important;
    grid-template-columns: repeat(var(--shop-cols-pc, 4), 1fr) !important;
    gap: 30px !important;
}

/* -----------------------------------------
   TRẠNG THÁI 2: XẾP GẠCH SO LE (MASONRY) 
   ----------------------------------------- */
body.shop-layout-masonry .woocommerce ul.products {
    display: block !important;
    column-count: var(--shop-cols-pc, 4) !important;
    column-gap: 30px !important;
}
body.shop-layout-masonry .woocommerce ul.products li.product {
    break-inside: avoid !important; /* Chống cắt đôi card sản phẩm */
    page-break-inside: avoid;
    margin-bottom: 30px !important;
    display: inline-block;
}

/* -----------------------------------------
   RESPONSIVE CHO TABLET VÀ MOBILE
   ----------------------------------------- */
@media (max-width: 1024px) {
    body.shop-layout-grid .woocommerce ul.products { 
        grid-template-columns: repeat(var(--shop-cols-tb, 3), 1fr) !important; gap: 20px !important; 
    }
    body.shop-layout-masonry .woocommerce ul.products { 
        column-count: var(--shop-cols-tb, 3) !important; column-gap: 20px !important; 
    }
    body.shop-layout-masonry .woocommerce ul.products li.product { margin-bottom: 20px !important; }
}

@media (max-width: 768px) {
    body.shop-layout-grid .woocommerce ul.products { 
        grid-template-columns: repeat(var(--shop-cols-mb, 2), 1fr) !important; gap: 12px !important; 
    }
    body.shop-layout-masonry .woocommerce ul.products { 
        column-count: var(--shop-cols-mb, 2) !important; column-gap: 12px !important; 
    }
    body.shop-layout-masonry .woocommerce ul.products li.product { margin-bottom: 12px !important; }
}

/* -----------------------------------------
   ĐẢO CHIỀU SIDEBAR (TRÁI/PHẢI)
   ----------------------------------------- */
/* Áp dụng nếu theme của bạn đang dùng cấu trúc Flex cho wrapper chính */
body.shop-sidebar-right .content-area {
    display: flex; flex-direction: row; gap: 30px;
}
body.shop-sidebar-left .content-area {
    display: flex; flex-direction: row-reverse; gap: 30px;
}
body.shop-sidebar-none .content-area {
    display: block; width: 100%;
}
/* =======================================================
   ẨN CHỮ VIEW CART (XEM GIỎ HÀNG) MẶC ĐỊNH SAU KHI CLICK
   ======================================================= */
a.added_to_cart.wc-forward {
    display: none !important;
}
/* =======================================================
   LỘT XÁC TOÀN DIỆN WIDGET BỘ LỌC WOOCOMMERCE
   ======================================================= */

/* --- 1. WIDGET DANH MỤC SẢN PHẨM --- */
.widget_product_categories ul {
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}
.widget_product_categories ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px dashed #e5e7eb;
    margin: 0 !important;
    transition: all 0.3s ease;
}
.widget_product_categories ul li:last-child {
    border-bottom: none;
}
.widget_product_categories ul li a {
    color: #4b5563;
    font-weight: 500;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}
/* Hiệu ứng trượt ngang nhẹ khi hover */
.widget_product_categories ul li:hover a {
    color: var(--theme-primary, #1a3b32);
    transform: translateX(6px); 
}
/* Biến số đếm (Count) thành dạng viên thuốc (Pill) */
.widget_product_categories ul li .count {
    background-color: #f3f4f6;
    color: #6b7280;
    font-size: 12px;
    font-weight: bold;
    padding: 2px 10px;
    border-radius: 99px;
}
.widget_product_categories ul li:hover .count {
    background-color: var(--theme-primary, #1a3b32);
    color: #ffffff;
}

/* --- 2. WIDGET LỌC THEO GIÁ (PRICE SLIDER) --- */
/* Làm thanh trượt mỏng lại và đổi màu */
.widget_price_filter .ui-slider {
    height: 6px !important;
    background-color: #e5e7eb !important;
    border: none !important;
    border-radius: 10px !important;
    margin-top: 15px;
}
.widget_price_filter .ui-slider .ui-slider-range {
    background-color: var(--theme-primary, #1a3b32) !important;
}
/* Làm cục tròn (Handle) to ra, viền dày, đổ bóng */
.widget_price_filter .ui-slider .ui-slider-handle {
    width: 20px !important;
    height: 20px !important;
    background: #ffffff !important;
    border: 3px solid var(--theme-primary, #1a3b32) !important;
    border-radius: 50% !important;
    top: -7px !important;
    box-shadow: 0 2px 6px rgba(0,0,0,0.15) !important;
    cursor: pointer !important;
    outline: none !important;
}
/* Nút "Lọc" (Filter) và chữ giá tiền */
.widget_price_filter .price_slider_amount {
    display: flex;
    flex-direction: row-reverse; /* Đảo ngược: Chữ bên trái, Nút bên phải */
    justify-content: space-between;
    align-items: center;
    margin-top: 24px;
}
.widget_price_filter .price_slider_amount .button {
    background: #f3f4f6 !important;
    color: #111827 !important;
    font-weight: bold !important;
    border-radius: 8px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
    text-transform: uppercase;
    transition: 0.3s ease;
}
.widget_price_filter .price_slider_amount .button:hover {
    background: var(--theme-primary, #1a3b32) !important;
    color: #fff !important;
}
.widget_price_filter .price_label {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
}

/* --- 3. WIDGET LỌC THUỘC TÍNH (THƯƠNG HIỆU, SIZE) --- */
/* Ép danh sách nằm ngang (Flex) và biến thành dạng Nút bấm (Tag/Pill) */
.widget_layered_nav ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 !important;
}
.widget_layered_nav ul li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}
.widget_layered_nav ul li a {
    display: block !important;
    padding: 8px 16px !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #4b5563 !important;
    text-decoration: none !important;
    transition: all 0.3s ease !important;
    background: #fff;
}
/* Ẩn số đếm trong dạng Tag cho đỡ rối mắt */
.widget_layered_nav ul li .count {
    display: none !important; 
}
/* Trạng thái Hover hoặc Đang chọn (Active) */
.widget_layered_nav ul li a:hover,
.widget_layered_nav ul li.chosen a {
    border-color: var(--theme-primary, #1a3b32) !important;
    background-color: var(--theme-primary, #1a3b32) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 10px rgba(26, 59, 50, 0.2);
}
/* =======================================================
   GIAO DIỆN LỌC GIÁ: BẢN PREMIUM MINIMALIST (NÂNG CẤP)
   ======================================================= */
.leo-custom-price-ranges {
    display: flex;
    flex-direction: column;
    gap: 12px; /* Tăng khoảng cách cho thoáng mắt */
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
}

.leo-custom-price-ranges li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Khung Nút Bấm Cơ Bản */
.leo-custom-price-ranges li a {
    display: flex;
    align-items: center;
    padding: 14px 18px;
    border-radius: 12px; /* Bo góc mềm mại chuẩn UI hiện đại */
    background: #ffffff;
    color: #4b5563;
    text-decoration: none;
    font-size: 14px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Chuyển động siêu mượt */
}

/* Hiệu ứng Rê chuột (Hover): Nổi khối 3D */
.leo-custom-price-ranges li:hover a {
    border-color: #d1d5db;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.04);
    transform: translateY(-2px); /* Nảy nhẹ lên */
    color: #111827;
}

/* Vẽ hình tròn Radio Button (Khung viền) */
.leo-custom-price-ranges li a::before {
    content: '';
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid #d1d5db;
    margin-right: 14px;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out;
    flex-shrink: 0;
    box-sizing: border-box;
}

/* =========================================
   TRẠNG THÁI ĐANG ĐƯỢC CHỌN (ACTIVE)
   ========================================= */
.leo-custom-price-ranges li.is-active a {
    border-color: var(--theme-primary, #1a3b32);
    background: #ffffff; 
    color: var(--theme-primary, #1a3b32);
    font-weight: 700;
    box-shadow: 0 4px 14px rgba(26, 59, 50, 0.1); /* Đổ bóng theo màu chủ đạo */
}

/* Đổi màu và biến hình chấm Radio khi Active */
.leo-custom-price-ranges li.is-active a::before {
    border-color: var(--theme-primary, #1a3b32);
    border-width: 6px; /* Thủ thuật ép viền dày lên tạo thành chấm tròn giữa siêu mượt */
}
/* =======================================================
   LÀM ĐẸP THANH PHÂN TRANG (PAGINATION) CHO TIN TỨC
   ======================================================= */
.page-numbers {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: 8px;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

.page-numbers li {
    margin: 0 !important;
    padding: 0 !important;
}

/* Định dạng chung cho nút */
.page-numbers li a, 
.page-numbers li span.current {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 12px;
    border-radius: 8px; /* Bo góc */
    font-size: 15px;
    font-weight: 600;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

/* Trạng thái bình thường */
.page-numbers li a {
    background-color: #f3f4f6; /* Nền xám nhạt */
    color: #4b5563;
}

/* Trạng thái Rê chuột (Hover) */
.page-numbers li a:hover {
    background-color: var(--theme-primary, #1a3b32); /* Đổi sang màu chủ đạo */
    color: #ffffff;
    transform: translateY(-2px);
}

/* Trạng thái Trang hiện tại (Active) */
.page-numbers li span.current {
    background-color: var(--theme-primary, #1a3b32);
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(26, 59, 50, 0.2);
}

/* Dấu ba chấm (...) */
.page-numbers li span.dots {
    background: transparent;
    color: #9ca3af;
    min-width: auto;
}