/*
Theme Name: Kính Thuốc Tuấn Hà
Theme URI: https://kinhthuoctuanha.com/
Description: Child theme của Flatsome cho Kính Thuốc Tuấn Hà
Author: Jason
Author URI: https://kinhthuoctuanha.com/
Template: flatsome
Version: 1.0.0
Text Domain: kinhthuoctuanha
*/

/*************** ADD CUSTOM CSS HERE.   ***************/




/* Hiệu ứng ánh sáng cho sản phẩm */
.product-small .box-image:hover::before{
   -webkit-animation:shine 1.2s;animation:shine 1.2s
}
@-webkit-keyframes shine{
   100%{left:125%}
}
@keyframes shine{
   100%{left:125%}
}
.product-small .box-image::before{
  position:absolute;
  top:0;
  left:-75%;
  z-index:2;
  display:block;
  content:'';
  width:50%;
  height:100%;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
  background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
  -webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}
/* Hiệu ứng ánh sáng cho sản phẩm */

/* Hiệu ứng ánh sáng cho bài viết */
.post-item .box-image:hover::before{
  -webkit-animation:shine .75s;
  animation:shine .75s
}

@-webkit-keyframes shine{
  100%{left:125%}
}

@keyframes shine{
  100%{left:125%}
}

.post-item .box-image::before{
  position:absolute;
  top:0;
  left:-75%;
  z-index:2;
  display:block;
  content:'';
  width:50%;
  height:100%;
  background:-webkit-linear-gradient(left,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
  background:linear-gradient(to right,rgba(255,255,255,0) 0,rgba(255,255,255,.3) 100%);
  -webkit-transform:skewX(-25deg);transform:skewX(-25deg)
}
/* Hiệu ứng ánh sáng cho bài viết */

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/

}
/*************** CHÂN TRANG, theo Footer.tsx của bản Next.js ***************/

#footer,
.footer-wrapper,
#footer .footer-1,
#footer .footer-2,
#footer .absolute-footer {
	background-color: #003459;
}

#footer,
#footer p,
#footer li {
	color: rgba(219, 234, 254, 0.7);
}

#footer ul.th-foot-list,
#footer ul.th-foot-list li {
	list-style: none !important;
	margin-left: 0;
	padding-left: 0;
}

#footer .th-foot-col {
	color: rgba(219, 234, 254, 0.7);
	font-size: 14px;
	line-height: 1.7;
}

#footer .th-foot-col p {
	margin-bottom: 8px;
}

#footer .th-foot-col strong {
	color: #fff;
	font-weight: 600;
}

#footer .th-foot-title {
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	display: inline-block;
	padding-bottom: 16px;
	margin-bottom: 20px;
	border-bottom: 1px solid rgba(59, 130, 246, 0.3);
}

#footer .th-foot-sub {
	color: #93c5fd;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	margin-bottom: 24px;
}

#footer .th-foot-sub-2 {
	margin-top: 28px;
}

#footer .th-foot-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

#footer .th-foot-list li {
	margin-bottom: 10px;
}

#footer .th-foot-col a {
	color: rgba(219, 234, 254, 0.7);
	transition: color 0.2s ease;
}

#footer .th-foot-col a:hover {
	color: #fff;
}

#footer .th-foot-meta {
	margin-top: 18px;
	font-size: 13px;
}

#footer .absolute-footer {
	background-color: #003459;
	color: #fff;
	border-top: 1px solid rgba(59, 130, 246, 0.3);
}

#footer .absolute-footer a {
	color: #fff;
}

@media (max-width: 849px) {
	#footer .th-foot-col {
		margin-bottom: 28px;
	}
	#footer .th-foot-title {
		font-size: 18px;
	}
}

/*************** KHỐI TRANG CHỦ, theo page.tsx và các component home ***************/

.th-sec { overflow: hidden; }

.th-h2 {
	font-size: 30px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.015em;
	color: #0F172A;
	margin-bottom: 16px;
	line-height: 1.25;
}

.th-h2.th-center { text-align: center; margin-bottom: 36px; }
.th-h2.th-blue2 { color: #003366; }
.th-accent { color: #003459; }

.th-badge {
	display: inline-block;
	background: #E0E7FF;
	color: #003459;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	padding: 6px 14px;
	border-radius: 999px;
	margin-bottom: 14px;
}

.th-lead { color: #4b5563; font-size: 16px; line-height: 1.75; margin-bottom: 20px; }

.th-feature { list-style: none; margin: 0 0 24px; padding: 0; }
.th-feature li {
	position: relative;
	padding-left: 26px;
	margin-bottom: 14px;
	color: #4b5563;
	font-size: 15px;
	line-height: 1.6;
}
.th-feature li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 6px;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: #00A8E8;
	box-shadow: 0 0 0 4px rgba(0, 168, 232, 0.15);
}
.th-feature li strong { color: #0F172A; font-weight: 700; }

.th-round img, img.th-round { border-radius: 10px; }

/* Khối 3, bốn cam kết */
.th-sec-usp { border-top: 1px solid rgba(243, 244, 246, 0.8); border-bottom: 1px solid rgba(243, 244, 246, 0.8); }
.th-usp-icon { width: 56px; height: auto; margin: 0 auto 12px; display: block; }
.th-usp-title {
	color: #003459;
	font-size: 15px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.025em;
	margin-bottom: 8px;
}
.th-usp-desc { color: #4b5563; font-size: 13px; line-height: 1.6; margin: 0; }

/* Khối 6 và 8, banner xen kẽ */
.th-banner-link { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.th-banner-link img { width: 100%; height: auto; display: block; transition: transform 0.4s ease; }
.th-banner-link:hover img { transform: scale(1.04); }
.th-banner-overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(to top, rgba(0, 52, 89, 0.72), rgba(0, 52, 89, 0.12) 60%, transparent);
	color: #fff;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 20px;
}
.th-banner-overlay strong { font-size: 19px; font-weight: 700; line-height: 1.3; }
.th-banner-overlay em { font-style: normal; font-size: 13px; opacity: 0.85; margin-top: 4px; }
.th-banner-overlay u { text-decoration: none; font-size: 13px; font-weight: 700; margin-top: 10px; border-bottom: 1px solid rgba(255, 255, 255, 0.6); align-self: flex-start; }

/* Khối 12 và 13 */
.th-logo-col img, .th-cert-col img { width: 100%; height: auto; border-radius: 8px; display: block; }
.th-logo-col { margin-bottom: 20px; }
.th-cert-col { margin-bottom: 28px; }

@media (max-width: 849px) {
	.th-h2 { font-size: 22px; }
	.th-banner-overlay strong { font-size: 16px; }
	.th-usp-icon { width: 46px; }
}

/*************** LƯỚI SẢN PHẨM CÓ TAB và ĐẾM NGƯỢC ***************/

.th-sub { color: #4b5563; font-size: 15px; margin-top: -8px; margin-bottom: 22px; }
.th-center { text-align: center; }

.th-tabs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	margin-bottom: 24px;
}

.th-tab {
	background: #fff;
	border: 1px solid #e5e7eb;
	color: #4b5563;
	font-size: 13px;
	font-weight: 600;
	padding: 8px 16px;
	border-radius: 999px;
	cursor: pointer;
	transition: all 0.2s ease;
	line-height: 1.2;
}

.th-tab:hover { border-color: #00A8E8; color: #003459; }

.th-tab.is-active {
	background: #003459;
	border-color: #003459;
	color: #fff;
}

.th-grid-wrap { position: relative; min-height: 80px; }
.th-grid-wrap.is-loading { opacity: 0.45; pointer-events: none; }
.th-grid-wrap.is-loading::after {
	content: "";
	position: absolute;
	top: 24px;
	left: 50%;
	width: 26px;
	height: 26px;
	margin-left: -13px;
	border: 3px solid #e5e7eb;
	border-top-color: #003459;
	border-radius: 50%;
	animation: th-spin 0.7s linear infinite;
}

@keyframes th-spin { to { transform: rotate(360deg); } }

.th-product-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 850px) {
	.th-product-grid { grid-template-columns: repeat(4, 1fr); gap: 24px; }
}

/* Thẻ sản phẩm, theo ProductCard.tsx */
.th-product-grid .product-small {
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.3s ease, transform 0.3s ease;
	width: 100%;
	padding: 0;
	margin: 0;
}

.th-product-grid .product-small:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.th-product-grid .product-small .box-text { padding: 12px 12px 16px; }
.th-product-grid .product-small .name a { color: #0F172A; font-weight: 600; font-size: 14px; }
.th-product-grid .product-small .name a:hover { color: #00A8E8; }
.th-product-grid .price ins, .th-product-grid .price > .amount { color: #003459; font-weight: 700; }
.th-product-grid .price del { color: #a7a7a7; font-weight: 400; }

.th-grid-empty {
	text-align: center;
	color: #6b7280;
	font-size: 14px;
	padding: 28px 0;
}

.th-more { text-align: center; margin-top: 26px; }

/* Đếm ngược flash sale */
.th-sec-flash { background: linear-gradient(135deg, #f9fafb 0%, #f3f4f6 100%); }

.th-flash-head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 16px;
	margin-bottom: 24px;
}

.th-flash-title { margin: 0; color: #003459; }

.th-countdown { display: flex; align-items: center; gap: 6px; }
.th-cd-label { color: #4b5563; font-size: 13px; margin-right: 4px; }
.th-cd-unit { display: flex; flex-direction: column; align-items: center; }
.th-cd-unit b {
	background: #003459;
	color: #fff;
	font-size: 18px;
	font-weight: 700;
	padding: 6px 10px;
	border-radius: 6px;
	min-width: 40px;
	text-align: center;
	line-height: 1.2;
}
.th-cd-unit i { font-style: normal; font-size: 10px; color: #6b7280; margin-top: 4px; text-transform: uppercase; }
.th-cd-sep { color: #003459; font-weight: 700; align-self: flex-start; margin-top: 6px; }

/*************** LƯỚI DANH MỤC VÀ THƯƠNG HIỆU ***************/

.th-cat-grid { margin: 24px 0 8px; }

.th-cat-list {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 12px;
}

@media (min-width: 550px) { .th-cat-list { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 850px) { .th-cat-list { grid-template-columns: repeat(var(--th-cols, 6), 1fr); gap: 16px; } }

.th-cat-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	gap: 4px;
	padding: 18px 10px;
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 8px;
	transition: all 0.25s ease;
	min-height: 96px;
}

.th-cat-item:hover {
	border-color: #00A8E8;
	box-shadow: 0 10px 15px -3px rgba(0, 52, 89, 0.1);
	transform: translateY(-2px);
}

.th-cat-img img { max-height: 44px; width: auto; margin-bottom: 6px; }
.th-cat-name { color: #003459; font-weight: 700; font-size: 13px; line-height: 1.3; }
.th-cat-count { color: #6b7280; font-size: 11px; }

/*************** DANH BẠ THƯƠNG HIỆU A tới Z ***************/

.th-brand-dir { max-width: 1200px; margin: 0 auto; padding: 8px 0 24px; }

.th-brand-nav {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
	margin-bottom: 36px;
	padding-bottom: 22px;
	border-bottom: 1px solid #f0f0f0;
}

.th-brand-all {
	padding: 7px 15px;
	font-size: 13px;
	font-weight: 700;
	border: 2px solid #003459;
	color: #003459;
	background: #fff;
	border-radius: 6px;
}

.th-brand-all:hover { background: #003459; color: #fff; }

.th-brand-letter {
	width: 34px;
	height: 34px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 13px;
	font-weight: 700;
	border: 1px solid #e0e0e0;
	color: #444;
	background: #fff;
	border-radius: 6px;
	transition: all 0.2s ease;
}

.th-brand-letter:hover { border-color: #003459; color: #003459; }

.th-brand-letter.is-off {
	border-color: #eaeaea;
	color: #ccc;
	background: #f5f5f5;
	cursor: not-allowed;
}

.th-brand-row {
	display: flex;
	margin-bottom: 35px;
	border-bottom: 1px solid #f3f4f6;
	padding-bottom: 25px;
	scroll-margin-top: 90px;
}

.th-brand-letter-col { width: 80px; flex-shrink: 0; }
.th-brand-letter-col h2 { font-size: 32px; font-weight: 800; color: #003459; margin: 0; line-height: 1; }

.th-brand-cards {
	flex-grow: 1;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(175px, 1fr));
	gap: 15px;
}

.th-brand-card {
	height: 130px;
	background: #fff;
	border: 1px solid #eaeaea;
	border-radius: 8px;
	padding: 10px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 2px 5px rgba(0, 0, 0, 0.02);
	transition: all 0.25s ease;
}

.th-brand-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 5px 12px rgba(0, 52, 89, 0.12);
	border-color: #003459;
}

.th-brand-logo {
	width: 100%;
	height: 74px;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
}

.th-brand-logo img {
	max-height: 50px;
	max-width: 100%;
	width: auto;
	object-fit: contain;
	transition: transform .2s ease;
}

.th-brand-initial {
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background: #f3f4f6;
	color: #9ca3af;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 700;
	font-size: 16px;
}

.th-brand-meta {
	text-align: center;
	width: 100%;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-size: 12px;
	margin-top: auto;
	padding-top: 5px;
}

.th-brand-meta b { color: #333; font-weight: 600; }
.th-brand-meta i { color: #999; font-style: normal; font-size: 10.5px; margin-left: 2px; }

@media (max-width: 768px) {
	.th-brand-row { flex-direction: column; gap: 15px; margin-bottom: 25px; padding-bottom: 15px; }
	.th-brand-letter-col { width: 100%; }
}

/*************** KHỐI ĐÁNH GIÁ KHÁCH HÀNG ***************/

.th-sec-tt { background-color: #f0f4f8; }

.th-tt-col { margin-bottom: 20px; }

.th-tt-card {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	padding: 24px 22px;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(0, 52, 89, 0.05);
	transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.th-tt-card:hover {
	box-shadow: 0 12px 20px -6px rgba(0, 52, 89, 0.15);
	transform: translateY(-2px);
}

.th-tt-stars {
	color: #eab308;
	font-size: 16px;
	letter-spacing: 2px;
	margin-bottom: 12px;
	line-height: 1;
}

.th-tt-text {
	color: #4b5563;
	font-size: 14px;
	line-height: 1.75;
	margin: 0 0 18px;
	flex-grow: 1;
}

.th-tt-who {
	border-top: 1px solid #f3f4f6;
	padding-top: 14px;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.th-tt-who b { color: #003459; font-weight: 700; font-size: 14px; }
.th-tt-who span { color: #6b7280; font-size: 12px; }

@media (max-width: 849px) {
	.th-tt-card { padding: 18px 16px; }
}

/*************** TAB TRANG SẢN PHẨM ***************/

.th-tab-noi-dung { color: #4b5563; font-size: 15px; line-height: 1.8; }
.th-tab-noi-dung p { margin-bottom: 12px; }
.th-tab-noi-dung ul { margin: 0 0 14px 18px; }
.th-tab-noi-dung li { margin-bottom: 8px; }
.th-tab-noi-dung strong { color: #0F172A; }
.th-tab-cam-ket p:first-child { color: #003459; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }

/*************** TRANG CHI TIẾT SẢN PHẨM, theo [slug]/page.tsx ***************/

.single-product .product-main { padding-top: 18px; }
.single-product .product-main > .row { max-width: 1280px; margin: 0 auto; }

/* Lưới 12 cột: ảnh 7, thông tin 5 */
@media (min-width: 850px) {
	.single-product .product-main .product-gallery { flex-basis: 58.333%; max-width: 58.333%; padding-right: 32px; }
	.single-product .product-main .product-info { flex-basis: 41.667%; max-width: 41.667%; }
	.single-product .product-main .product-info.summary.entry-summary {
		position: -webkit-sticky;
		position: sticky !important;
		top: 96px;
		align-self: flex-start;
	}
}

.th-sp-breadcrumb {
	max-width: 1280px;
	margin: 0 auto 14px;
	padding: 0 4px;
	font-size: 13px;
	color: #6b7280;
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	align-items: center;
}

.th-sp-breadcrumb a { color: #6b7280; }
.th-sp-breadcrumb a:hover { color: #003366; }
.th-sp-breadcrumb strong { color: #101418; font-weight: 600; }
.th-sp-breadcrumb span { color: #d1d5db; }

.th-sp-brand {
	color: #6b7280;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	margin-bottom: 6px;
}

.th-sp-brand a { color: inherit; }
.th-sp-brand a:hover { color: #003366; }

.single-product .product-info h1.product-title,
.single-product .product-info .product-title.product_title {
	color: #003366 !important;
	font-size: 24px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 10px;
}

@media (min-width: 550px) {
	.single-product .product-info h1.product-title,
	.single-product .product-info .product-title.product_title { font-size: 30px; }
}

@media (min-width: 850px) {
	.single-product .product-info h1.product-title,
	.single-product .product-info .product-title.product_title { font-size: 36px; }
}

.single-product .product-info .price,
.single-product .product-info .price ins,
.single-product .product-info .price > .amount {
	color: #101418;
	font-size: 24px;
	font-weight: 600;
	text-decoration: none;
}

.single-product .product-info .price del,
.single-product .product-info .price del .amount {
	color: #9ca3af;
	font-size: 14px;
	font-weight: 500;
	text-decoration: line-through;
}

.th-sp-tin {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px;
	margin: 10px 0 16px;
	padding-top: 12px;
	border-top: 1px solid #f3f4f6;
	font-size: 13px;
}

.th-sp-baohanh { color: #003366; font-weight: 600; }
.th-sp-baohanh::before { content: "\2713"; margin-right: 6px; font-weight: 700; }
.th-sp-luotxem { color: #9ca3af; }

/* Hàng nút mua: ô số lượng, Thêm vào giỏ, Mua ngay nằm cùng một hàng.
   Sản phẩm có biến thể thì WooCommerce bọc trong .woocommerce-variation-add-to-cart,
   sản phẩm đơn thì nằm thẳng trong form.cart. */
.single-product .woocommerce-variation-add-to-cart,
.single-product form.cart:not(.variations_form) {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: 8px;
}

.single-product .woocommerce-variation-add-to-cart .quantity,
.single-product form.cart:not(.variations_form) .quantity {
	flex: 0 0 auto;
	margin: 0;
	width: auto;
}

/* Hai nút co giãn theo chữ bên trong. Dùng flex:1 1 0 chia đều sẽ làm nhãn dài
   như "THÊM VÀO GIỎ HÀNG" bị cắt mất chữ ở cột hẹp, nên để basis auto. */
.single-product .single_add_to_cart_button,
.single-product .ux-buy-now-button {
	flex: 1 1 auto;
	margin: 0 !important;
	white-space: nowrap;
	/* Cột thông tin sản phẩm chỉ rộng khoảng 460px ở màn 1440, mà ô số lượng cộng
	   hai nhãn nút cần 488px nếu để cỡ chữ 13px. Hạ xuống 12px và bớt đệm để cả
	   hàng lọt vừa, thay vì đẩy Mua ngay xuống dòng dưới. */
	padding-left: 10px;
	padding-right: 10px;
	font-size: 12px;
	letter-spacing: 0.02em;
}

@media (max-width: 549px) {
	.single-product .woocommerce-variation-add-to-cart,
	.single-product form.cart:not(.variations_form) { flex-wrap: wrap; }
	.single-product .single_add_to_cart_button,
	.single-product .ux-buy-now-button { flex: 1 1 100%; }
}

/* Nút mua */
.single-product .single_add_to_cart_button,
.single-product .product-info .button.primary:not(.ux-buy-now-button) {
	height: 48px;
	line-height: 48px;
	padding: 0 10px;
	border-radius: 8px;
	background-color: #003366;
	border-color: #003366;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 6px -1px rgba(0, 51, 102, 0.2);
}

.single-product .single_add_to_cart_button:hover { background-color: #002852; border-color: #002852; }

/* Mua ngay: cùng dáng nút nhưng màu đỏ cho tách khỏi Thêm vào giỏ.
   Tách riêng khỏi quy tắc .button.primary ở trên nên không bị đè về màu xanh. */
.single-product .ux-buy-now-button,
.single-product .product-info .button.primary.ux-buy-now-button {
	height: 48px;
	line-height: 48px;
	padding: 0 10px;
	border-radius: 8px;
	background-color: #dc2626;
	border-color: #dc2626;
	color: #fff;
	font-weight: 700;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	box-shadow: 0 4px 6px -1px rgba(220, 38, 38, 0.25);
}

.single-product .ux-buy-now-button:hover,
.single-product .product-info .button.primary.ux-buy-now-button:hover {
	background-color: #b91c1c;
	border-color: #b91c1c;
	color: #fff;
}

/* Ô chọn biến thể */
.single-product .variations select,
.single-product .variations .ux-swatch {
	border-radius: 8px;
}

.single-product .ux-swatch.selected,
.single-product .ux-swatch:hover {
	border-color: #003366;
	background-color: #003366;
	color: #fff;
	box-shadow: 0 4px 6px -1px rgba(0, 51, 102, 0.18);
}

/* Tab.
   Trước đây chỗ này chỉ đặt color: #003366 cho tab đang mở. Flatsome cho tab đang
   mở nền xanh đậm, thành chữ xanh trên nền xanh nên nhãn biến mất khi bấm vào.
   Nay đặt luôn cả nền lẫn màu chữ ở cùng một chỗ để hai thứ không thể lệch nhau,
   bất kể theme cha dùng kiểu tab nào. */
.single-product .product-tabs > li > a { font-weight: 700; font-size: 13px; letter-spacing: 0.04em; }

.single-product .product-tabs > li.active > a,
.single-product .product-tabs > li.active > a:hover {
	background-color: #003366;
	border-color: #003366;
	color: #fff;
}

@media (max-width: 849px) {
	.th-sp-breadcrumb { font-size: 12px; }
	.single-product .product-main .product-gallery { padding-right: 0; }
}

/*************** TRANG DANH MỤC, theo san-pham/page.tsx ***************/

.tax-product_cat .shop-container,
.post-type-archive-product .shop-container { max-width: 1440px; margin: 0 auto; }

.tax-product_cat .page-title-inner,
.post-type-archive-product .page-title-inner { max-width: 1440px; }

.tax-product_cat .shop-page-title .page-title-inner h1,
.post-type-archive-product .shop-page-title .page-title-inner h1 {
	color: #111318;
	font-size: 22px;
	font-weight: 700;
}

.woocommerce-result-count { color: #9ca3af; font-size: 12px; text-transform: uppercase; letter-spacing: 0.05em; }
.woocommerce-ordering select { font-size: 14px; color: #374151; border-color: #e5e7eb; border-radius: 8px; }

/* Thẻ sản phẩm trong lưới danh mục, dùng lại spec của ProductCard.tsx */
.shop-container .product-small.col .col-inner {
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.shop-container .product-small.col .col-inner:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.shop-container .product-small .box-text { padding: 12px 12px 16px; }
.shop-container .product-small .name a { color: #0F172A; font-weight: 600; font-size: 14px; }
.shop-container .product-small .name a:hover { color: #00A8E8; }
.shop-container .price ins, .shop-container .price > .amount { color: #003459; font-weight: 700; }
.shop-container .price del { color: #a7a7a7; font-weight: 400; }

/* Cột lọc bên trái rộng 260px như bản gốc */
@media (min-width: 850px) {
	.category-page-row > .col.large-3 {
		flex-basis: 260px;
		max-width: 260px;
		width: 260px;
	}
	.category-page-row > .col.large-9 {
		flex-basis: calc(100% - 260px);
		max-width: calc(100% - 260px);
	}
	#shop-sidebar.sidebar-inner {
		position: sticky;
		top: 112px;
		max-height: calc(100vh - 140px);
		overflow-y: auto;
		padding-right: 8px;
	}
}

#shop-sidebar .widget-title {
	color: #003366;
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

#shop-sidebar .is-divider { background-color: #003366; height: 2px; }
#shop-sidebar .widget { margin-bottom: 26px; }
#shop-sidebar ul li { font-size: 14px; padding: 5px 0; border: 0; }
#shop-sidebar ul li a { color: #374151; }
#shop-sidebar ul li a:hover { color: #003366; }
#shop-sidebar ul li .count { color: #9ca3af; font-size: 12px; }
#shop-sidebar .current-cat > a { color: #003366; font-weight: 700; }

/*************** KHÔI PHỤC PHẦN KẾ THỪA MÀU CỦA TAILWIND ***************/
/*
 * Tailwind để h1 tới h6 và thẻ a kế thừa màu từ phần tử cha.
 * Flatsome chèn CSS nội tuyến đặt màu thẳng cho h1 tới h6 và a, làm hỏng
 * các khối có nền tối dùng text-white ở cha, chữ chìm vào nền.
 * Dùng :where() để độ ưu tiên bằng 0, các class text-* của Tailwind trong
 * tuanha-pages.css nạp sau vẫn thắng.
 */
.th-next :where(h1, h2, h3, h4, h5, h6) {
	color: inherit;
}

.th-next :where(a) {
	color: inherit;
	text-decoration: inherit;
}

.th-next :where(strong, b) {
	color: inherit;
}

/*************** HIỆU ỨNG HIỆN DẦN CỦA BẢN NEXT.JS ***************/
/*
 * Bản gốc đặt sẵn opacity:0 kèm transform cho các khối, rồi JS phía trình duyệt
 * mới cho hiện lên khi cuộn tới. WordPress không chạy đoạn JS đó nên các khối
 * ẩn vĩnh viễn. Đưa chúng về trạng thái đã hiện.
 */
.th-next [style*="opacity:0"],
.th-next [style*="opacity: 0"] {
	opacity: 1 !important;
	transform: none !important;
}

/*************** THẺ SẢN PHẨM, theo ProductCard.tsx ***************/

/* height:100% của .th-card chỉ ăn khi cả chuỗi cột cũng kéo cao theo hàng.
   Thiếu mấy dòng này thì thẻ nào nội dung dài hơn sẽ cao hơn hẳn, thấy rõ ở
   sản phẩm hai giá như tròng kính. */
/* Hàng lưới nào đặt align-items khác stretch (canh giữa, canh trên) sẽ không kéo
   cột cao bằng nhau, thẻ ít chữ hơn bị thấp và tụt xuống giữa hàng. Ép lại đúng
   hàng có thẻ của mình, không đụng .row khác của Flatsome. */
.row:has(> .th-card-col) { align-items: stretch; }
.th-card-col { display: flex; align-self: stretch; }
.th-card-col .col-inner {
	display: flex;
	flex-direction: column;
	width: 100%;
	background: transparent;
	border: 0;
	box-shadow: none;
}

.th-card {
	display: flex;
	flex-direction: column;
	flex: 1;
	height: 100%;
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 8px;
	overflow: hidden;
	transition: box-shadow 0.3s ease;
}

.th-card:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
}

.th-card-img {
	position: relative;
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: #f8f9fa;
}

/* Bản Next.js dùng object-cover vì ảnh bên đó đã chuẩn vuông. Kho ảnh của site
   này trộn ảnh sản phẩm vuông với ảnh banner ngang của tròng kính, cover sẽ cắt
   mất hai mép banner cùng phần chữ trên đó. Dùng contain để giữ trọn ảnh, phần
   thừa để lộ nền #f8f9fa của khung. */
.th-card-img img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	transition: transform 0.5s ease;
}

.th-card:hover .th-card-img img { transform: scale(1.05); }

.th-card-badges {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 10;
	display: flex;
	flex-direction: column;
	gap: 6px;
	align-items: flex-start;
}

.th-badge {
	display: inline-block;
	color: #fff;
	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	padding: 4px 10px;
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.th-b-red { background: #dc2626; }
.th-b-orange { background: #f57f17; }
.th-b-navy { background: #003366; }
.th-b-amber { background: #ff7a00; }
.th-b-black { background: #1a1a1a; }

.th-card-sale {
	position: absolute;
	top: 12px;
	right: 12px;
	z-index: 10;
	border: 1px solid rgba(0, 51, 102, 0.2);
	color: #003366;
	font-size: 10px;
	font-weight: 500;
	letter-spacing: 0.03em;
	padding: 4px 8px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	border-radius: 4px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.th-card-body {
	display: flex;
	flex-direction: column;
	flex-grow: 1;
	padding: 16px;
}

@media (min-width: 850px) { .th-card-body { padding: 20px; } }

.th-card-name {
	font-size: 14px;
	font-weight: 600;
	line-height: 1.375;
	margin: 0;
	min-height: 2.5rem;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.th-card-name a { color: #1a1a1a; }
.th-card-name a:hover { color: #003366; }

@media (min-width: 850px) {
	.th-card-name { font-size: 15px; min-height: 2.75rem; }
}

.th-card-warranty {
	display: flex;
	align-items: center;
	gap: 6px;
	margin-top: 8px;
	padding: 2px 0;
	color: #6b7280;
	font-size: 10px;
}

@media (min-width: 850px) { .th-card-warranty { font-size: 11px; } }

.th-card-warranty svg { width: 14px; height: 14px; color: #003366; flex-shrink: 0; }

.th-card-spacer { flex-grow: 1; }

/* Phải là block, không được flex cột.
   Template in thẳng get_price_html() của WooCommerce, chuỗi này KHÔNG có thẻ
   .price bọc ngoài (thẻ đó do template loop/price.php của Woo thêm). Nên với
   khoảng giá, hai thẻ .amount và dấu gạch giữa chúng trở thành ba flex item
   riêng và xếp thành ba dòng, đúng hiện tượng số - số nằm tách dòng. Để block
   thì chúng chảy inline bình thường, còn <del> đã được đặt display:block nên
   vẫn tự xuống dòng riêng.
   min-height giữ giá đơn và khoảng giá chiếm đúng một khoảng như nhau, nên thẻ
   cao bằng nhau ngay cả khi lưới không kéo giãn được (ví dụ hàng dùng float). */
.th-card-price {
	display: block;
	padding-top: 8px;
	/* Đủ chỗ cho cả trường hợp cao nhất là hàng giá gạch cộng hàng giá bán, nên
	   giá đơn, khoảng giá và giá đang giảm đều chiếm đúng một khoảng như nhau.
	   Nhờ vậy thẻ cao bằng nhau kể cả khi hàng lưới không kéo giãn được. */
	min-height: 50px;
}

/* 48px chứ không phải 44px: ngay tại mốc 850px lưới nhảy sang bốn cột nên thẻ
   hẹp nhất, khoảng giá tràn thành hai dòng và khối cao 47px. Lấy sàn cao hơn
   mức đó thì mọi biến thể giá đều bằng nhau. */
@media (min-width: 850px) { .th-card-price { min-height: 48px; } }

.th-card-price .price,
.th-card-price ins,
.th-card-price > .amount {
	color: #003366;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
	text-decoration: none;
	line-height: 1.3;
}

@media (min-width: 850px) {
	.th-card-price .price,
	.th-card-price ins,
	.th-card-price > .amount { font-size: 20px; }
}

/* Khoảng giá dài gần gấp đôi giá đơn, giữ cỡ chữ gốc thì tràn xuống dòng.
   Thu nhỏ để nằm gọn một dòng như các thẻ còn lại. Phải kể cả ins, vì biến thể
   đang giảm giá bọc khoảng giá trong <ins> và đó lại là chuỗi dài nhất. */
.th-card-price-khoang .price,
.th-card-price-khoang ins,
.th-card-price-khoang > .amount,
.th-card-price-khoang ins .amount {
	font-size: 15px;
	white-space: nowrap;
}

/* Giữ 15px cả ở desktop, không tăng lên 16px. Ở lưới bốn cột hẹp nhất, chỗ trống
   trong thẻ chỉ 179px mà chuỗi dài nhất "8.830.000đ – 11.030.000đ" cần 182px ở
   16px và 171px ở 15px. Nhích lên 16px là nó tràn xuống dòng thứ hai. */

.th-card-price del,
.th-card-price del .amount {
	display: block;
	color: #9ca3af;
	font-size: 12px;
	font-weight: 400;
	text-decoration: line-through;
}

@media (min-width: 850px) { .th-card-price del { font-size: 13px; } }

.th-card-actions {
	display: flex;
	align-items: center;
	gap: 10px;
	padding-top: 12px;
}

.th-card-buy {
	flex: 1;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	background: #003366;
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	padding: 0 16px;
	border-radius: 15px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

@media (min-width: 850px) { .th-card-buy { font-size: 12px; } }

.th-card-buy:hover { background: #002855; color: #fff; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1); }
.th-card-buy:active { transform: scale(0.98); }
.th-card-buy svg { width: 16px; height: 16px; flex-shrink: 0; }

.th-card-plus {
	width: 40px;
	height: 40px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f3f4f6;
	border-radius: 50%;
	color: #4b5563;
	transition: background 0.2s ease;
}

.th-card-plus:hover { background: #e5e7eb; color: #4b5563; }
.th-card-plus:active { transform: scale(0.95); }
.th-card-plus svg { width: 20px; height: 20px; }
.th-card-plus.loading svg { opacity: 0.4; }

/*************** GIỎ HÀNG TRƯỢT, theo CartDrawer.tsx ***************/

#cart-popup .cart-popup-title,
#cart-popup .widget_shopping_cart > .widget-title { display: none; }

#cart-popup .cart-popup-inner { padding: 0 !important; background: #f5f7f8; }
#cart-popup { background: #f5f7f8; }

.th-cart {
	display: flex;
	flex-direction: column;
	min-height: 100%;
	background: #f5f7f8;
	font-size: 14px;
}

.th-cart-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	background: #fff;
	padding: 12px 16px;
	border-bottom: 1px solid #f0f2f5;
	position: sticky;
	top: 0;
	z-index: 10;
}

.th-cart-close {
	width: 32px;
	height: 32px;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	background: transparent;
	border-radius: 50%;
	color: #111418;
	cursor: pointer;
	padding: 0;
}

.th-cart-close:hover { background: #f3f4f6; }
.th-cart-close svg { width: 20px; height: 20px; }

.th-cart-title {
	color: #111418;
	font-size: 18px;
	font-weight: 700;
	letter-spacing: -0.015em;
	margin: 0;
	line-height: 1.2;
}

.th-cart-view { color: #0b73da; font-size: 14px; font-weight: 600; letter-spacing: 0.015em; }
.th-cart-view:hover { color: #0959ab; }

.th-cart-list { padding: 0; }

.th-cart-item {
	display: flex;
	gap: 16px;
	background: #fff;
	padding: 16px;
	margin-bottom: 8px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.th-cart-thumb {
	flex-shrink: 0;
	width: 80px;
	height: 80px;
	border-radius: 8px;
	overflow: hidden;
	background: #f3f4f6;
	display: block;
}

.th-cart-thumb img { width: 100%; height: 100%; object-fit: cover; }

.th-cart-info {
	display: flex;
	flex-direction: column;
	flex: 1;
	min-height: 80px;
	min-width: 0;
}

.th-cart-name {
	color: #111418;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.th-cart-name:hover { color: #0b73da; }
.th-cart-cat { color: #60758a; font-size: 12px; font-weight: 500; margin-top: 4px; }

.th-cart-info .variation,
.th-cart-info dl.variation { margin: 4px 0 0; font-size: 12px; color: #60758a; }
.th-cart-info .variation dt, .th-cart-info .variation dd { display: inline; margin: 0; }

.th-cart-row {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	margin-top: auto;
	padding-top: 8px;
	gap: 8px;
}

.th-cart-price { color: #0b73da; font-size: 16px; font-weight: 700; }
.th-cart-price del { display: none; }

.th-cart-qty {
	display: flex;
	align-items: center;
	gap: 2px;
	background: #f0f2f5;
	border-radius: 8px;
	padding: 2px;
	flex-shrink: 0;
}

.th-qty-btn {
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 0;
	border-radius: 6px;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06);
	color: #111418;
	cursor: pointer;
	padding: 0;
}

.th-qty-btn:hover { background: #f9fafb; }
.th-qty-btn.dang-chay { opacity: 0.45; pointer-events: none; }
.th-qty-btn svg { width: 14px; height: 14px; }
.th-qty-so { width: 32px; text-align: center; font-size: 14px; font-weight: 600; color: #111418; }

.th-cart-sum { background: #fff; padding: 16px; margin-bottom: 16px; }

.th-cart-line {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 8px 0;
}

.th-cart-line--dashed { border-bottom: 1px dashed #e5e7eb; padding-bottom: 12px; }
.th-cart-line span { color: #60758a; font-size: 14px; font-weight: 400; }
.th-cart-line b { color: #111418; font-size: 14px; font-weight: 500; text-align: right; }
.th-cart-free { color: #0b73da !important; }

.th-cart-foot {
	margin-top: auto;
	position: sticky;
	bottom: 0;
	background: #fff;
	border-top: 1px solid #f0f2f5;
	padding: 16px 16px 24px;
	box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.05);
	z-index: 5;
}

.th-cart-total {
	display: flex;
	flex-direction: column;
	margin-bottom: 12px;
}

.th-cart-total span { color: #60758a; font-size: 12px; font-weight: 500; }
.th-cart-total b { color: #111418; font-size: 20px; font-weight: 700; }

.th-cart-checkout {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	height: 48px;
	background: #0b73da;
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	border-radius: 10px;
	transition: background 0.2s ease;
}

.th-cart-checkout:hover { background: #0959ab; color: #fff; }
.th-cart-checkout svg { width: 20px; height: 20px; }

.th-cart-empty { text-align: center; padding: 56px 24px; }
.th-cart-empty-icon {
	display: inline-flex;
	width: 96px;
	height: 96px;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
	background: #fff;
	border: 1px solid #f1f5f9;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
	margin-bottom: 24px;
}
.th-cart-empty-icon svg { width: 48px; height: 48px; color: #cbd5e1; }
.th-cart-empty h3 { color: #111418; font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.th-cart-empty p { color: #60758a; font-size: 14px; margin-bottom: 24px; }

/*************** CỘT LỌC, theo cột lọc inline trong san-pham/page.tsx ***************/
/* Số đo lấy từ lớp Tailwind của bản gốc: cột 260px, dính top-28, nhóm cách nhau 24px,
   nhãn nhóm 12px in hoa giãn chữ, các mục thụt vào 24px. */

/* Số đo dưới đây tính cả viền, không phụ thuộc reset của theme cha. */
.th-loc,
.th-loc * { box-sizing: border-box; }

.th-loc {
	width: 260px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	position: sticky;
	top: 112px;
	align-self: flex-start;
	max-height: calc(100vh - 140px);
	overflow-y: auto;
	padding-right: 16px;
}

.th-loc-dau { display: block; }
.th-loc-tieu-de { color: #111318; font-size: 18px; font-weight: 700; margin: 0 0 4px; }
/* Khoảng cách xuống nhóm lọc đầu tiên do gap của .th-loc lo, để thêm
   margin dưới ở đây là thành 48px trong khi bản gốc chỉ 24px. */
.th-loc-phu { color: #6b7280; font-size: 14px; margin: 0; }

.th-loc-than { display: flex; flex-direction: column; gap: 24px; }
.th-loc-nhom { display: flex; flex-direction: column; gap: 12px; }

.th-loc-nhan {
	display: flex;
	align-items: center;
	gap: 8px;
	color: #003366;
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
}
.th-loc-icon { font-size: 16px; width: 16px; height: 16px; line-height: 16px; }

.th-loc-hop { display: flex; flex-direction: column; gap: 10px; margin-left: 24px; }
.th-loc-cuon { max-height: 200px; overflow-y: auto; }

.th-loc-dong {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 14px;
	color: #374151;
	cursor: pointer;
	margin: 0;
}
.th-loc-dong:hover { color: #003366; }
.th-loc-dong input { width: 16px; height: 16px; margin: 0; accent-color: #003366; }

/* Kiểu dáng: nút bật tắt xếp hai cột, ô chọn thật thì giấu đi */
.th-loc-luoi-nut {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-left: 24px;
}
.th-loc-nut {
	display: block;
	margin: 0;
	padding: 8px 12px;
	font-size: 12px;
	text-align: center;
	color: #374151;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	cursor: pointer;
	transition: all 0.2s;
}
.th-loc-nut:hover { border-color: #003366; color: #003366; }
.th-loc-nut.is-chon { background: #003366; border-color: #003366; color: #fff; }
.th-loc-nut input { position: absolute; opacity: 0; width: 0; height: 0; }

/* Màu sắc: chấm tròn sáu cột */
.th-loc-luoi-mau {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 8px;
	margin-left: 24px;
}
.th-loc-mau { display: block; margin: 0; cursor: pointer; line-height: 0; }
.th-loc-mau input { position: absolute; opacity: 0; width: 0; height: 0; }
.th-loc-cham {
	display: block;
	width: 36px;
	height: 36px;
	border-radius: 50%;
	border: 2px solid #d1d5db;
	transition: all 0.2s;
}
.th-loc-mau:hover .th-loc-cham { border-color: #9ca3af; }
.th-loc-mau.is-chon .th-loc-cham {
	border-color: #003366;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px #003366;
}

.th-loc-ap-dung {
	width: 100%;
	padding: 12px;
	font-size: 14px;
	font-weight: 500;
	color: #fff;
	background: #003366;
	border: 0;
	border-radius: 12px;
	cursor: pointer;
}
/* Có JS thì lọc ngay khi bấm, nút này thành thừa */
.th-loc-co-js .th-loc-ap-dung { display: none; }

.th-loc-xoa {
	display: block;
	width: 100%;
	margin-top: auto;
	padding: 12px;
	font-size: 14px;
	font-weight: 500;
	text-align: center;
	color: #374151;
	border: 1px solid #e5e7eb;
	border-radius: 12px;
}
.th-loc-xoa:hover { background: #f9fafb; color: #374151; }

/* Bản gốc giấu cột này dưới lg và đổi sang ngăn kéo riêng cho di động.
   Ngăn kéo chưa port, nên ở đây cho cột chạy theo chiều ngang trang. */
@media only screen and (max-width: 1024px) {
	.th-loc {
		width: 100%;
		position: static;
		max-height: none;
		overflow: visible;
		padding-right: 0;
		margin-bottom: 24px;
	}
	.th-loc-cuon { max-height: 160px; }
}

/*************** TRANG TIN TỨC, theo tin-tuc/page.tsx và BlogCard.tsx ***************/
/* Số đo lấy từ lớp Tailwind bản gốc: khung 1280px, lưới 1/2/4 cột cách nhau 24px,
   thẻ bo 20px, ảnh tỉ lệ 4:3, tiêu đề tối đa 2 dòng, tóm tắt đúng 1 dòng. */

.th-tt { max-width: 1280px; margin: 0 auto; padding: 0 16px; }
.th-tt * { box-sizing: border-box; }

.th-tt-dau { text-align: center; padding: 48px 0; }
.th-tt-h1 { color: #111827; font-size: 30px; font-weight: 700; margin: 0 0 12px; }
.th-tt-sub { color: #4b5563; font-size: 16px; max-width: 42rem; margin: 0 auto; }

@media (min-width: 850px) { .th-tt-h1 { font-size: 36px; } }

/* Dải nút lọc chuyên mục */
.th-tt-loc {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-bottom: 40px;
}

.th-tt-pill {
	display: inline-block;
	padding: 8px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 9999px;
	background: #fff;
	color: #4b5563;
	font-size: 14px;
	font-weight: 500;
	transition: background-color 0.2s, color 0.2s;
}
.th-tt-pill:hover { background: #f9fafb; color: #4b5563; }
.th-tt-pill.is-chon,
.th-tt-pill.is-chon:hover { background: #003459; border-color: #003459; color: #fff; }

/* Lưới bài viết */
.th-tt-luoi { display: grid; grid-template-columns: 1fr; gap: 24px; }

@media (min-width: 640px) { .th-tt-luoi { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .th-tt-luoi { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

.th-tt-card {
	display: flex;
	flex-direction: column;
	height: 100%;
	background: #fff;
	border-radius: 20px;
	overflow: hidden;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
	transition: box-shadow 0.3s ease, transform 0.3s ease;
}
.th-tt-card:hover {
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
	transform: translateY(-4px);
}

.th-tt-anh {
	position: relative;
	display: block;
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background: #f1f5f9;
}
.th-tt-anh img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.th-tt-card:hover .th-tt-anh img { transform: scale(1.05); }

.th-tt-noimg {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	background: linear-gradient(135deg, rgba(0, 52, 89, 0.08), rgba(0, 122, 179, 0.08));
}
.th-tt-noimg svg { width: 64px; height: 64px; color: #d1d5db; }

.th-tt-nhan {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 2;
	padding: 4px 12px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, 0.9);
	backdrop-filter: blur(4px);
	color: #003459;
	font-size: 12px;
	font-weight: 500;
}

.th-tt-than { display: flex; flex-direction: column; flex: 1; padding: 20px; }
.th-tt-ngay { color: #9ca3af; font-size: 12px; margin-bottom: 8px; }

/* Tiêu đề bó đúng 2 dòng, đặt min-height để thẻ tiêu đề ngắn không thấp hơn. */
.th-tt-ten {
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
	min-height: 2.8em;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.th-tt-ten a { color: #111827; }
.th-tt-card:hover .th-tt-ten a { color: #003459; }

.th-tt-tomtat {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
	line-height: 1.5;
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.th-tt-doctiep { margin-top: auto; padding-top: 16px; }
.th-tt-doctiep a {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	color: #003459;
	font-size: 14px;
	font-weight: 500;
	transition: gap 0.2s ease;
}
.th-tt-card:hover .th-tt-doctiep a { gap: 8px; }
.th-tt-doctiep svg { width: 16px; height: 16px; }

/* Khối trống khi chưa có bài */
.th-tt-trong { text-align: center; padding: 80px 0; }
.th-tt-trong-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 96px;
	height: 96px;
	margin: 0 auto 24px;
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}
.th-tt-trong-icon svg { width: 48px; height: 48px; color: #d1d5db; }
.th-tt-trong h2 { color: #111827; font-size: 24px; font-weight: 700; margin: 0 0 8px; }
.th-tt-trong p { color: #4b5563; margin: 0; }

/* Chuyển trang */
.th-tt-phantrang {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 48px;
}
.th-tt-so { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }

.th-tt-nut {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	padding: 8px 16px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	font-weight: 500;
}
.th-tt-nut:hover { background: #f9fafb; color: #374151; }
.th-tt-nut.is-tat { background: #f3f4f6; color: #9ca3af; cursor: not-allowed; }
.th-tt-nut svg { width: 16px; height: 16px; flex-shrink: 0; }

.th-tt-o {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	background: #fff;
	color: #374151;
	font-size: 14px;
	font-weight: 500;
}
.th-tt-o:hover { background: #f9fafb; color: #374151; }
.th-tt-o.is-chon { background: #003459; border-color: #003459; color: #fff; }

.th-tt-dem { text-align: center; color: #6b7280; font-size: 14px; margin-top: 24px; }

/*************** MENU THẢ XUỐNG THƯƠNG HIỆU, theo HeaderClient.tsx ***************/

.th-mega-drop {
	width: 760px !important;
	max-width: calc(100vw - 40px);
	padding: 16px !important;
}

.th-mega-li { list-style: none; }

.th-mega-luoi {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
	max-height: 420px;
	overflow-y: auto;
	padding-right: 8px;
}

.th-mega-o {
	display: flex;
	align-items: center;
	justify-content: center;
	height: 70px;
	padding: 0 12px;
	background: #fff;
	border: 1px solid #e5e7eb;
	overflow: hidden;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.th-mega-o:hover {
	border-color: #003459;
	box-shadow: 0 1px 3px rgba(0, 52, 89, .12);
}

.th-mega-o img {
	max-width: 100%;
	max-height: 50px;
	width: auto;
	object-fit: contain;
	transition: transform .2s ease;
}

.th-mega-ten {
	font-size: 12px;
	font-weight: 700;
	color: #1f2937;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: .03em;
	line-height: 1.3;
}

.th-mega-o:hover .th-mega-ten { color: #003459; }

.th-mega-them {
	flex-direction: column;
	gap: 4px;
	background: linear-gradient(to bottom right, #f9fafb, #f3f4f6);
}

.th-mega-so { font-size: 10px; color: #6b7280; }
.th-mega-them:hover .th-mega-so { color: #003459; }

/*************** KHỐI TIN TỨC TRÊN TRANG CHỦ, theo HomeNews.tsx ***************/

.th-sec-news.th-tt { background: #f8fafc; border-top: 1px solid #f3f4f6; }

.th-tt-h1-nho {
	font-size: 28px;
	font-weight: 700;
	color: #003459;
	text-transform: uppercase;
	text-align: center;
	letter-spacing: -.02em;
	margin: 0 0 32px;
}

.th-tt-xemtatca { margin-top: 28px; text-align: center; }

.th-tt-xemtatca a {
	display: inline-block;
	padding: 10px 26px;
	border: 1px solid #003459;
	border-radius: 8px;
	color: #003459;
	font-weight: 600;
	font-size: 14px;
	transition: background .2s ease, color .2s ease;
}

.th-tt-xemtatca a:hover { background: #003459; color: #fff; }

@media (max-width: 767px) {
	.th-tt-h1-nho { font-size: 22px; margin-bottom: 22px; }
}

/*************** DẢI BANNER XEN GIỮA KHỐI SẢN PHẨM, theo page.tsx ***************/

.th-bnx-sec { padding: 32px 0 40px; background: #fff; }

.th-bnx-luoi {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 16px;
}

.th-bnx-o {
	position: relative;
	display: block;
	height: 192px;
	border-radius: 8px;
	overflow: hidden;
}

.th-bnx-anh {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s ease;
}

.th-bnx-o:hover .th-bnx-anh { transform: scale(1.05); }

.th-bnx-phu-lop {
	position: absolute;
	inset: 0;
	background: linear-gradient(to right, rgba(0, 0, 0, .6), rgba(0, 0, 0, .4), transparent);
}

.th-bnx-chu {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px;
	color: #fff;
}

.th-bnx-ten {
	font-size: 22px;
	font-weight: 700;
	line-height: 1.25;
	margin-bottom: 4px;
	text-shadow: 0 2px 6px rgba(0, 0, 0, .45);
}

.th-bnx-sub {
	font-size: 15px;
	font-style: normal;
	font-weight: 500;
	color: rgba(255, 255, 255, .9);
	margin-bottom: 12px;
	text-shadow: 0 1px 4px rgba(0, 0, 0, .4);
}

.th-bnx-cta {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 14px;
	font-weight: 500;
	color: rgba(255, 255, 255, .8);
	transition: gap .2s ease, color .2s ease;
}

.th-bnx-cta svg { width: 16px; height: 16px; }

.th-bnx-o:hover .th-bnx-cta { gap: 8px; color: #fff; }

@media (max-width: 849px) {
	.th-bnx-luoi { grid-template-columns: 1fr; }
	.th-bnx-o { height: 144px; }
	.th-bnx-ten { font-size: 20px; }
	.th-bnx-sub { font-size: 14px; }
}

/*************** GIỎ HÀNG, THANH TOÁN, ĐẶT HÀNG THÀNH CÔNG ***************

Chỉ CSS, không ghi đè mẫu WooCommerce. Lý do: thêm cổng thanh toán hay trường
mới thì WooCommerce vẫn tự vẽ ra và các luật dưới đây ăn theo, không phải sửa
lại. Ghi đè mẫu sẽ khoá cứng bố cục và mỗi lần WooCommerce đổi mẫu lại phải dò.

Mọi luật đóng khung trong class của thẻ body nên không rò sang trang khác.
Màu lấy từ bản Next.js: giỏ hàng dùng #0b73da, thanh toán dùng #1173d4.
**************************************************************************/

.woocommerce-cart .page-wrapper,
.woocommerce-checkout .page-wrapper,
.woocommerce-order-received .page-wrapper {
	background: #f9fafb;
	padding-top: 32px;
	padding-bottom: 56px;
}

/* ---------- Khung thẻ trắng dùng chung ---------- */

.woocommerce-cart .cart-sidebar,
.woocommerce-checkout .checkout-sidebar,
.woocommerce-cart .woocommerce-cart-form,
.woocommerce-checkout #customer_details {
	background: #fff;
	border: 1px solid #f3f4f6;
	border-radius: 16px;
	padding: 24px;
	box-shadow: 0 10px 24px rgba(148, 163, 184, .12);
}

/* Cột trái và cột phải của Flatsome vốn có vạch ngăn, bỏ đi vì đã có viền thẻ */
.woocommerce-cart .row-divided > .col + .col { border-left: 0; }

/* ---------- Giỏ hàng: bảng thành danh sách thẻ ---------- */

.woocommerce-cart table.shop_table.cart { border: 0; margin: 0; }
.woocommerce-cart table.shop_table.cart thead { display: none; }

/* Bốn ô chi tiết của WooCommerce nằm cùng cấp với ô ảnh, không lồng nhau được,
   nên xếp bằng lưới có vùng đặt tên. Cách này giữ nguyên thứ tự thẻ trong DOM. */
.woocommerce-cart table.shop_table.cart tr.cart_item {
	display: grid;
	grid-template-columns: 140px minmax(0, 1fr) auto;
	grid-template-areas:
		"anh ten  xoa"
		"anh gia  gia"
		"anh so-luong tong";
	column-gap: 20px;
	row-gap: 10px;
	align-items: start;
	padding: 20px 0;
	border-bottom: 1px solid #f1f5f9;
}

.woocommerce-cart table.shop_table.cart tr.cart_item td {
	border: 0;
	padding: 0;
	background: none;
}

.woocommerce-cart td.product-thumbnail {
	grid-area: anh;
	width: 140px;
}

/* Bám theo độ ưu tiên của Flatsome, theme cha ghim chiều ngang ảnh ở 90px */
.woocommerce-cart table.shop_table td.product-thumbnail img {
	width: 140px;
	max-width: 140px;
	height: 140px;
	object-fit: cover;
	border-radius: 12px;
	background: #f1f5f9;
}

.woocommerce-cart td.product-name {
	grid-area: ten;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.woocommerce-cart td.product-name > a {
	font-size: 18px;
	font-weight: 700;
	color: #0f172a;
	line-height: 1.3;
}

.woocommerce-cart td.product-name > a:hover { color: #0b73da; }

/* Dòng thuộc tính biến thể, ví dụ chiết suất hoặc màu */
.woocommerce-cart td.product-name .variation,
.woocommerce-cart td.product-name dl.variation {
	margin: 0;
	font-size: 14px;
	color: #64748b;
}

.woocommerce-cart td.product-name .variation dt,
.woocommerce-cart td.product-name .variation dd {
	display: inline;
	margin: 0;
	font-weight: 400;
}

.woocommerce-cart td.product-name .variation dd + dt::before { content: " \2022  "; }

/* Giá đơn vị nằm cùng khối chi tiết, chữ nhỏ màu xám */
.woocommerce-cart td.product-price {
	grid-area: gia;
	font-size: 14px;
	color: #64748b;
}

.woocommerce-cart td.product-quantity {
	grid-area: so-luong;
	justify-self: start;
	align-self: end;
}

.woocommerce-cart td.product-subtotal {
	grid-area: tong;
	justify-self: end;
	align-self: end;
	font-size: 20px;
	font-weight: 700;
	color: #0b73da;
	white-space: nowrap;
}

/* Nút tăng giảm số lượng */
.woocommerce-cart .ux-quantity.quantity {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	overflow: hidden;
	height: 36px;
	background: #fff;
}

.woocommerce-cart .ux-quantity input.qty {
	border: 0;
	width: 40px;
	font-weight: 600;
	color: #0f172a;
	background: transparent;
}

.woocommerce-cart .ux-quantity .ux-quantity__button {
	border: 0;
	width: 36px;
	color: #64748b;
	background: transparent;
}

.woocommerce-cart .ux-quantity .ux-quantity__button:hover { background: #f8fafc; }

/* Nút xoá món, bản gốc là chữ Xóa màu xám chuyển đỏ khi rê chuột */
.woocommerce-cart td.product-remove {
	grid-area: xoa;
	justify-self: end;
	align-self: start;
}

.woocommerce-cart td.product-remove a.remove {
	width: auto;
	height: auto;
	font-size: 22px;
	line-height: 1;
	color: #94a3b8;
	background: none;
}

.woocommerce-cart td.product-remove a.remove:hover { color: #ef4444; background: none; }

.woocommerce-cart td.actions { padding-top: 20px; border: 0; }

.woocommerce-cart .button-continue-shopping {
	border: 0;
	padding: 0;
	font-size: 14px;
	font-weight: 500;
	color: #475569;
	background: none;
	box-shadow: none;
}

.woocommerce-cart .button-continue-shopping:hover { color: #0b73da; background: none; }

/* ---------- Cột tóm tắt đơn hàng ---------- */

.woocommerce-cart .cart-sidebar { position: sticky; top: 96px; }

.woocommerce-cart .cart_totals > h2,
.woocommerce-cart .cart_totals h2 {
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
	margin: 0 0 20px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-cart .cart_totals table { border: 0; margin: 0; }
.woocommerce-cart .cart_totals table th,
.woocommerce-cart .cart_totals table td {
	border: 0;
	padding: 8px 0;
	font-size: 14px;
	background: none;
}

.woocommerce-cart .cart_totals table th { font-weight: 400; color: #475569; }
.woocommerce-cart .cart_totals table td { text-align: right; font-weight: 500; color: #0f172a; }

.woocommerce-cart .cart_totals tr.order-total th,
.woocommerce-cart .cart_totals tr.order-total td {
	padding-top: 18px;
	border-top: 1px solid #f1f5f9;
}

.woocommerce-cart .cart_totals tr.order-total th { font-size: 16px; font-weight: 700; color: #0f172a; }

.woocommerce-cart .cart_totals tr.order-total td .amount {
	font-size: 24px;
	font-weight: 800;
	color: #0b73da;
	letter-spacing: -.02em;
}

/* Phí vận chuyển bằng 0 thì WooCommerce ghi Miễn phí, tô xanh lá như bản gốc */
.woocommerce-cart .cart_totals tr.shipping td { color: #16a34a; }

.woocommerce-cart .wc-proceed-to-checkout { padding: 20px 0 0; }

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 48px;
	margin: 0;
	border-radius: 8px;
	font-size: 15px;
	font-weight: 700;
	color: #fff;
	background: #0b73da;
	box-shadow: 0 4px 10px rgba(11, 115, 218, .25);
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover { background: #0a63bd; }

.woocommerce-cart .ux-cart-coupon {
	margin-top: 20px;
	padding-top: 20px;
	border-top: 1px solid #f1f5f9;
}

/* ---------- Thanh toán ---------- */

.woocommerce-checkout #customer_details h3,
.woocommerce-checkout #order_review_heading {
	font-size: 20px;
	font-weight: 700;
	color: #111418;
	margin: 0 0 20px;
	text-transform: none;
	letter-spacing: 0;
}

.woocommerce-checkout .checkout-sidebar { position: sticky; top: 96px; }

.woocommerce-checkout p.form-row { margin-bottom: 16px; }

.woocommerce-checkout p.form-row label {
	font-size: 14px;
	font-weight: 500;
	color: #111418;
	margin-bottom: 8px;
}

.woocommerce-checkout p.form-row input.input-text,
.woocommerce-checkout p.form-row textarea,
.woocommerce-checkout p.form-row select,
.woocommerce-checkout .select2-container .select2-selection--single {
	height: 46px;
	border: 1px solid #dbe0e6;
	border-radius: 10px;
	padding: 0 14px;
	font-size: 15px;
	color: #111418;
	background-color: #fff;
	box-shadow: none;
}

.woocommerce-checkout p.form-row textarea { height: auto; padding: 12px 14px; }

.woocommerce-checkout p.form-row input.input-text:focus,
.woocommerce-checkout p.form-row textarea:focus,
.woocommerce-checkout p.form-row select:focus {
	border-color: #1173d4;
	box-shadow: 0 0 0 3px rgba(17, 115, 212, .12);
}

.woocommerce-checkout .required { color: #ef4444; }

/* Bảng đơn hàng bên phải */
.woocommerce-checkout table.woocommerce-checkout-review-order-table { border: 0; margin: 0; }

.woocommerce-checkout table.woocommerce-checkout-review-order-table th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table td {
	border: 0;
	padding: 10px 0;
	font-size: 14px;
	background: none;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table thead th {
	padding-bottom: 14px;
	border-bottom: 1px solid #f0f2f4;
	font-size: 13px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.cart_item td { color: #111418; }
.woocommerce-checkout table.woocommerce-checkout-review-order-table td.product-total { text-align: right; font-weight: 600; }

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total th,
.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td {
	padding-top: 16px;
	border-top: 1px solid #f0f2f4;
	font-size: 16px;
	font-weight: 700;
	color: #111418;
}

.woocommerce-checkout table.woocommerce-checkout-review-order-table tr.order-total td .amount {
	font-size: 22px;
	font-weight: 800;
	color: #1173d4;
}

/* Phương thức thanh toán: mỗi lựa chọn là một thẻ có viền, cái đang chọn tô sáng.
   Viết theo li.wc_payment_method nên thêm cổng nào cũng tự có kiểu này. */
.woocommerce-checkout #payment {
	margin-top: 24px;
	padding-top: 24px;
	border-top: 1px solid #f0f2f4;
	background: none;
	border-radius: 0;
}

.woocommerce-checkout #payment ul.payment_methods {
	padding: 0;
	border: 0;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method {
	margin: 0;
	padding: 16px;
	border: 1px solid #dbe0e6;
	border-radius: 12px;
	background: #fff;
	transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:hover { border-color: #9ca3af; }

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method:has(input:checked) {
	border-color: #1173d4;
	background: rgba(17, 115, 212, .05);
	box-shadow: 0 0 0 1px #1173d4;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method label {
	font-size: 15px;
	font-weight: 700;
	color: #111418;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box {
	margin: 10px 0 0;
	padding: 0;
	font-size: 14px;
	color: #64748b;
	background: none;
}

.woocommerce-checkout #payment ul.payment_methods li.wc_payment_method .payment_box::before { display: none; }

.woocommerce-checkout #payment .form-row.place-order { padding: 20px 0 0; margin: 0; }

.woocommerce-checkout #payment #place_order {
	display: block;
	width: 100%;
	height: 52px;
	margin: 0;
	border-radius: 10px;
	font-size: 16px;
	font-weight: 700;
	color: #fff;
	background: #1173d4;
	box-shadow: 0 4px 12px rgba(17, 115, 212, .28);
}

.woocommerce-checkout #payment #place_order:hover { background: #0f66bb; }

/* ---------- Đặt hàng thành công ---------- */

/* Flatsome xếp hai cột: cột 7 là bảng chi tiết đơn, cột 5 là lời cảm ơn, và
   bảng chi tiết đứng trước trong DOM. Bản gốc chỉ có một thẻ ở giữa với lời
   cảm ơn lên đầu. Ở đây bỏ khung thẻ khỏi thẻ bọc ngoài, cho hai cột xếp dọc,
   đảo thứ tự bằng order, rồi đặt khung thẻ lên từng cột. */

/* Kèm .row để thắng lề âm mà Flatsome đặt cho mọi hàng, nếu không thẻ sẽ
   lệch trái 15px và không căn giữa được. */
.woocommerce-order-received .woocommerce-order.row {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 100%;
	max-width: 620px;
	margin-left: auto;
	margin-right: auto;
	padding: 0;
	background: none;
	box-shadow: none;
	border-radius: 0;
}

.woocommerce-order-received .woocommerce-order > .col {
	width: 100%;
	max-width: 100%;
	flex: 0 0 auto;
	padding: 0;
	margin: 0;
}

/* Lời cảm ơn lên trước, đúng thứ tự bản gốc */
.woocommerce-order-received .woocommerce-order > .large-5 { order: -1; }
.woocommerce-order-received .woocommerce-order > .large-7 { order: 1; }

.woocommerce-order-received .woocommerce-order .is-well,
.woocommerce-order-received .woocommerce-order > .large-7.col {
	padding: 32px 28px;
	border: 0;
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 16px 40px rgba(148, 163, 184, .18);
}

.woocommerce-order-received .woocommerce-order .is-well { text-align: center; }

/* Vòng tròn xanh có dấu tích, vẽ bằng ::before nên không cần sửa mẫu */
.woocommerce-order-received .woocommerce-thankyou-order-received {
	position: relative;
	margin: 0 0 24px;
	padding: 96px 0 0;
	font-size: 22px;
	font-weight: 700;
	line-height: 1.35;
	color: #111827;
	background: none;
	border: 0;
}

.woocommerce-order-received .woocommerce-thankyou-order-received::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	transform: translateX(-50%);
	width: 80px;
	height: 80px;
	border-radius: 50%;
	background: #dcfce7 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2316a34a' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 11.08V12a10 10 0 1 1-5.93-9.14'/%3E%3Cpolyline points='22 4 12 14.01 9 11.01'/%3E%3C/svg%3E") center / 40px 40px no-repeat;
}

/* Khối mã đơn hàng, bản gốc là một ô nền xám bo góc */
.woocommerce-order-received ul.woocommerce-order-overview,
.woocommerce-order-received .woocommerce-order-overview {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 18px 20px;
	border: 0;
	border-radius: 12px;
	background: #f9fafb;
	text-align: left;
	list-style: none;
}

.woocommerce-order-received .woocommerce-order-overview li {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 12px;
	float: none;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	color: #6b7280;
	text-transform: none;
}

.woocommerce-order-received .woocommerce-order-overview li strong {
	font-size: 15px;
	font-weight: 700;
	color: #111827;
	text-align: right;
}

/* Cột bảng chi tiết đơn, canh trái vì là bảng */
.woocommerce-order-received .woocommerce-order > .large-7.col { text-align: left; }

.woocommerce-order-received .woocommerce-order h2 {
	margin: 0 0 16px;
	font-size: 17px;
	font-weight: 700;
	color: #111827;
	text-transform: none;
	letter-spacing: 0;
	text-align: left;
}

.woocommerce-order-received .woocommerce-order section + section { margin-top: 28px; }

.woocommerce-order-received table.woocommerce-table--order-details { border: 0; margin: 0; }

.woocommerce-order-received table.woocommerce-table--order-details th,
.woocommerce-order-received table.woocommerce-table--order-details td {
	padding: 10px 0;
	border: 0;
	border-bottom: 1px solid #f1f5f9;
	font-size: 14px;
	background: none;
}

.woocommerce-order-received table.woocommerce-table--order-details thead th {
	font-size: 12px;
	font-weight: 600;
	color: #64748b;
	text-transform: uppercase;
	letter-spacing: .04em;
}

.woocommerce-order-received table.woocommerce-table--order-details td.woocommerce-table__product-total,
.woocommerce-order-received table.woocommerce-table--order-details tfoot td { text-align: right; }

.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child th,
.woocommerce-order-received table.woocommerce-table--order-details tfoot tr:last-child td {
	border-bottom: 0;
	font-size: 16px;
	font-weight: 700;
	color: #111827;
}

.woocommerce-order-received .woocommerce-customer-details address {
	padding: 16px 18px;
	border: 0;
	border-radius: 12px;
	background: #f9fafb;
	font-style: normal;
	font-size: 14px;
	color: #475569;
	line-height: 1.7;
}

/* ---------- Điện thoại ---------- */

@media (max-width: 849px) {
	.woocommerce-cart .cart-sidebar,
	.woocommerce-checkout .checkout-sidebar,
	.woocommerce-cart .woocommerce-cart-form,
	.woocommerce-checkout #customer_details {
		padding: 18px;
		border-radius: 12px;
	}

	.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 90px minmax(0, 1fr) auto;
		column-gap: 14px;
		row-gap: 8px;
		padding: 16px 0;
	}

	.woocommerce-cart td.product-thumbnail { width: 90px; }

	.woocommerce-cart table.shop_table td.product-thumbnail img {
		width: 90px;
		max-width: 90px;
		height: 90px;
		border-radius: 10px;
	}
	.woocommerce-cart td.product-name > a { font-size: 16px; }
	.woocommerce-cart td.product-subtotal { font-size: 18px; }

	/* Ở khổ hẹp Flatsome giấu ô giá và ô thành tiền rồi thay bằng một dòng giá
	   riêng. Ở đây bỏ dòng thay thế đó, kéo ô thành tiền hiện lại, và giấu giá
	   đơn vị cho gọn, đúng như thẻ giỏ hàng của bản gốc. */
	.woocommerce-cart .mobile-product-price { display: none; }

	.woocommerce-cart table.shop_table.cart tr.cart_item td.product-subtotal { display: block; }
	.woocommerce-cart table.shop_table.cart tr.cart_item td.product-price { display: none; }

	/* Cột thành tiền kéo theo bề ngang của cả cột ba nên tên sản phẩm bị ép
	   xuống năm dòng. Cho thành tiền ra hàng riêng, tên lấy lại chỗ. */
	.woocommerce-cart table.shop_table.cart tr.cart_item {
		grid-template-columns: 90px minmax(0, 1fr) 22px;
		grid-template-areas:
			"anh ten      xoa"
			"anh so-luong xoa"
			"tong tong    tong";
	}

	.woocommerce-cart td.product-subtotal {
		justify-self: end;
		padding-top: 4px;
	}

	/* Bảng đã thành lưới nên không cần khung cuộn ngang của Flatsome nữa */
	.woocommerce-cart .cart-wrapper { overflow: visible; }

	.woocommerce-cart .cart-sidebar,
	.woocommerce-checkout .checkout-sidebar { position: static; }

	.woocommerce-order-received .woocommerce-order .is-well,
	.woocommerce-order-received .woocommerce-order > .large-7.col { padding: 24px 18px; }
	.woocommerce-order-received .woocommerce-thankyou-order-received { font-size: 19px; }
}

/*************** NÚT LIÊN HỆ NỔI, thay phần ft-navi của Foxtool ***************

Máy tính: cột dọc bên phải, cách đáy 234px, giống vị trí cũ.
Điện thoại: thanh ngang dưới đáy, nút gọi tròn nhô lên ở giữa.
Màu lấy từ cài đặt cũ: nền #15448a, nút gọi #b80606.
****************************************************************************/

.th-lhn-cot,
.th-lhn-thanh { --th-lhn-nen: #15448a; --th-lhn-goi: #b80606; }

/* ---------- Cột dọc, máy tính ---------- */

.th-lhn-cot {
	position: fixed;
	right: 30px;
	bottom: 234px;
	z-index: 998;
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 10px 6px;
	border-radius: 50px;
	background: rgba(255, 255, 255, .92);
	box-shadow: 0 6px 20px rgba(15, 23, 42, .14);
	backdrop-filter: blur(4px);
}

.th-lhn-o {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	width: 62px;
	padding: 6px 2px;
	border-radius: 14px;
	color: #334155;
	text-decoration: none;
	transition: background .2s ease, transform .2s ease;
}

.th-lhn-o:hover {
	background: #eff4fb;
	color: var(--th-lhn-nen);
	transform: translateY(-1px);
}

.th-lhn-o .th-lhn-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
}

.th-lhn-o .th-lhn-icon svg { width: 100%; height: 100%; }

.th-lhn-o .th-lhn-ten {
	font-size: 11px;
	font-weight: 500;
	line-height: 1.2;
	text-align: center;
}

/* Thanh ngang chỉ dành cho điện thoại */
.th-lhn-thanh { display: none; }

/* ---------- Thanh ngang, điện thoại ---------- */

@media (max-width: 849px) {
	.th-lhn-cot { display: none; }

	.th-lhn-thanh {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 998;
		display: flex;
		align-items: flex-end;
		justify-content: space-around;
		height: 58px;
		padding: 0 4px;
		background: #fff;
		box-shadow: 0 -2px 14px rgba(15, 23, 42, .12);
	}

	.th-lhn-m {
		display: flex;
		flex: 1;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		gap: 2px;
		height: 58px;
		color: var(--th-lhn-nen);
		text-decoration: none;
	}

	.th-lhn-m .th-lhn-icon {
		display: flex;
		align-items: center;
		justify-content: center;
		width: 24px;
		height: 24px;
	}

	.th-lhn-m .th-lhn-icon svg { width: 100%; height: 100%; }

	.th-lhn-m .th-lhn-ten {
		font-size: 10px;
		font-weight: 500;
		line-height: 1.1;
		text-align: center;
	}

	/* Nút gọi tròn nhô lên giữa thanh */
	.th-lhn-giua {
		flex: 0 0 62px;
		justify-content: flex-start;
		height: 58px;
		margin-top: -22px;
	}

	.th-lhn-giua .th-lhn-icon {
		width: 54px;
		height: 54px;
		border: 4px solid #fff;
		border-radius: 50%;
		background: var(--th-lhn-goi);
		box-shadow: 0 4px 12px rgba(184, 6, 6, .32);
	}

	.th-lhn-giua .th-lhn-icon svg { width: 26px; height: 26px; }
	.th-lhn-giua .th-lhn-icon svg path { fill: #fff; }

	.th-lhn-giua .th-lhn-ten {
		margin-top: 2px;
		padding: 1px 8px;
		border-radius: 8px;
		color: #fff;
		background: var(--th-lhn-goi);
	}

	/* Chừa chỗ cho thanh, tránh che nội dung và nút thanh toán */
	body { padding-bottom: 58px; }
}

/* Icon Zalo lấy từ Foxtool vẽ nét trắng, vốn nằm trên nền xanh. Dựng lại nền đó,
   nếu không thì trắng trên trắng và không thấy gì. */
.th-lhn-zalo .th-lhn-icon {
	border-radius: 50%;
	background: #0068ff;
}

.th-lhn-zalo .th-lhn-icon svg { padding: 3px; }

.th-lhn-messenger .th-lhn-icon svg path { fill: #0084ff; }

@media (max-width: 849px) {
	.th-lhn-zalo .th-lhn-icon svg { padding: 2px; }
}