/*
Theme Name: VINA Light
Theme URI: https://gianphoicaocaphp.com
Author: Claude Code
Description: Giao diện WooCommerce nhẹ, dựng lại theo thiết kế hiện tại của gianphoicaocaphp.com. Không phụ thuộc Elementor hay Woodmart.
Version: 1.1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: vina-light
*/

/* ==========================================================================
   1. Biến & nền tảng
   ========================================================================== */
:root {
	--g1: #64ab3c;
	--g2: #4c9f1d;
	--g-active: #3c8d21;
	--dark: #0c562e;
	--price: #f33;
	--bg: #f6f6f6;
	--text: #333;
	--head: #242424;
	--muted: #777;
	--line: #e5e5e5;
	--radius: 10px;
	--shadow: 0 0 4px rgba(0, 0, 0, .12);
	--font: Arial, Helvetica, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
	margin: 0;
	background: #fff;
	color: var(--text);
	font: 15px/24px var(--font);
	-webkit-font-smoothing: antialiased;
}
img, svg, video { max-width: 100%; height: auto; }
img { border: 0; vertical-align: middle; }
a { color: inherit; text-decoration: none; }
a:hover { color: var(--dark); }
ul, ol { margin: 0 0 20px; padding-left: 20px; }
h1, h2, h3, h4, h5, h6 { margin: 0 0 15px; color: var(--head); font-weight: 500; line-height: 1.4; }
p { margin: 0 0 20px; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
.screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; }
.skip-link:focus { clip: auto; width: auto; height: auto; background: #fff; padding: 10px 14px; z-index: 100000; top: 6px; left: 6px; }
.container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 15px; }
.site-main { display: flow-root; background: #fff; min-height: 50vh; }
.vi { display: inline-block; vertical-align: middle; flex: none; }

/* Nút */
.btn-primary, .button, button.button, input[type="submit"], .woocommerce-button, a.button {
	display: inline-flex; align-items: center; justify-content: center;
	min-height: 42px; padding: 5px 20px; border: 0; border-radius: 5px;
	background: var(--dark); color: #fff; font-size: 13px; font-weight: 700; line-height: 1.2;
	text-transform: capitalize; transition: background .2s;
}
body .btn-primary, body .button, body a.button, body button.button, body input[type="submit"] { color: #fff; }
.btn-primary:hover, .button:hover, button.button:hover, input[type="submit"]:hover, a.button:hover { background: #0a4526; color: #fff; }
.button.disabled, .button:disabled { opacity: .5; cursor: not-allowed; }
.btn-more {
	display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 5px 14px;
	border: 0; border-radius: 5px; background: #f3f3f3; color: #3e3e3e; font-size: 12px; font-weight: 700;
}
.btn-more:hover { background: #ebebeb; }
.btn-more .vi { transition: transform .2s; }
.is-open .btn-more .vi { transform: rotate(180deg); }

/* ==========================================================================
   2. Header
   ========================================================================== */
.site-header { position: relative; z-index: 50; background: #fff; }
.hd-top {
	height: 140px;
	background-image: linear-gradient(90deg, rgba(255,255,255,.48), rgba(247,252,247,.62) 48%, rgba(255,255,255,.26)), url("assets/images/header-bg-vina-v2.webp");
	background-position: center 43%;
	background-size: cover;
}
.hd-top-in { display: flex; align-items: center; height: 100%; gap: 40px; }
.hd-logo { flex: none; display: flex; flex-direction: column; align-items: flex-start; color: var(--dark); }
.hd-logo:hover { color: var(--dark); }
.hd-logo img { display: block; width: 190px; height: auto; }
.hd-burger, .hd-mobile-right { display: none; }

/* Ô tìm kiếm chiếm phần giữa, margin auto chia đều khoảng trống hai bên. */
.hd-search { position: relative; flex: 1 1 auto; max-width: 560px; min-width: 310px; margin: 0 auto; }
.hd-search-leading {
	position: absolute; left: 19px; top: 50%; z-index: 2; display: flex; color: #a7abb4;
	transform: translateY(-50%); pointer-events: none;
}
.hd-search input[type="search"] {
	display: block; width: 100%; height: 50px; padding: 0 66px 0 52px;
	border: 1px solid #70ad5b; border-radius: 35px; background: rgba(255,255,255,.92);
	font-size: 14px; color: #333; outline: 0; -webkit-appearance: none; appearance: none;
}
.hd-search input[type="search"]::placeholder { color: #8b8f98; }
.hd-search input[type="search"]:focus { border-color: var(--dark); box-shadow: 0 0 0 3px rgba(12, 86, 46, .12); }
.hd-search button {
	position: absolute; top: 4px; right: 4px; width: 42px; height: 42px; padding: 0;
	border: 0; border-radius: 50%; background: var(--dark); color: #fff;
	display: flex; align-items: center; justify-content: center;
}
.search-results {
	position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 70;
	background: #fff; border-radius: var(--radius); box-shadow: 0 6px 24px rgba(0, 0, 0, .18);
	max-height: 70vh; overflow: auto;
}
.search-results[hidden] { display: none; }
.search-results a { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border-bottom: 1px solid #f0f0f0; }
.search-results a:hover { background: #f7faf4; }
.search-results img { width: 46px; height: 46px; object-fit: cover; border-radius: 6px; flex: none; }
.search-results .sr-title { flex: 1; font-size: 14px; line-height: 1.35; color: #333; }
.search-results .sr-price { font-size: 13px; font-weight: 700; color: var(--price); white-space: nowrap; }
.search-results .sr-empty { padding: 14px; color: var(--muted); font-size: 14px; }

.hd-info { display: flex; align-items: center; flex: none; }
.hd-info-item { display: flex; align-items: center; gap: 9px; min-height: 48px; padding: 0 14px; border-left: 1px solid rgba(12,86,46,.15); white-space: nowrap; }
.hd-info-item:first-child { border-left: 0; padding-left: 0; }
.hd-info-item:last-child { padding-right: 0; }
.hd-info-icon { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; color: #075a32; flex: none; }
.hd-info-icon-gold { background: #fff0a9; color: #d19900; }
.hd-info-icon-green { background: #dff3c6; color: #178530; }
.hd-info-icon-mint { background: #dff5e6; color: #075a32; }
.hd-info-copy { display: flex; flex-direction: column; text-transform: uppercase; line-height: 1.2; }
.hd-info-copy strong { color: #164f34; font-size: 11px; font-weight: 800; }
.hd-info-copy small { margin-top: 5px; color: #6d7179; font-size: 9px; font-weight: 700; }

.hd-bar {
	height: 56px; border-radius: 0 0 16px 16px;
	background: linear-gradient(90deg, #48ac2a 0%, #299733 51%, #006238 100%);
}
.hd-bar-in { display: flex; align-items: center; height: 100%; gap: 10px; }

.hd-cats { position: relative; flex: none; width: 260px; height: 56px; }
.hd-cats-btn {
	display: flex; align-items: center; gap: 12px; width: 100%; height: 56px; padding: 0 20px;
	border: 0; border-radius: 17px 0 0 0; background: #07552f; color: #fff; font-size: 14px; font-weight: 800; text-transform: uppercase; text-align: left;
}
.hd-cats-btn .vi-menu { width: 24px; height: 24px; }
.hd-cats-btn span { flex: 1; }
.hd-cats-btn .vi-chevron { transition: transform .2s; }
.hd-cats.is-open .hd-cats-btn .vi-chevron { transform: rotate(180deg); }
.hd-cats-drop {
	position: absolute; top: 100%; left: 0; width: 100%; z-index: 60;
	background: #fff; box-shadow: 0 8px 24px rgba(0, 0, 0, .18); border-radius: 0 0 var(--radius) var(--radius);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s;
}
.hd-cats.is-open .hd-cats-drop, .hd-cats:hover .hd-cats-drop, .hd-cats:focus-within .hd-cats-drop { opacity: 1; visibility: visible; transform: none; }
.cat-menu { list-style: none; margin: 0; padding: 6px 0; }
.cat-menu li { position: relative; margin: 0; }
.cat-menu a { display: block; padding: 10px 18px; font-size: 14px; line-height: 20px; color: #333; border-bottom: 1px solid #f1f1f1; }
.cat-menu li:last-child > a { border-bottom: 0; }
.cat-menu a:hover { background: #f4f9ef; color: var(--dark); }
.cat-menu .sub-menu { list-style: none; margin: 0; padding: 0 0 0 14px; }

.hd-nav { flex: 1 1 auto; min-width: 0; padding: 0 4px; }
.main-nav { display: flex; flex-wrap: nowrap; align-items: center; justify-content: space-evenly; list-style: none; margin: 0; padding: 0; }
.main-nav > li { position: relative; display: flex; justify-content: center; flex: 1 1 auto; margin: 0; }
.main-nav > li:not(:last-child)::after { content: ""; position: absolute; right: 0; top: 11px; width: 1px; height: 18px; background: rgba(255,255,255,.48); }
.main-nav > li > a {
	display: flex; align-items: center; justify-content: center; height: 40px; padding: 0 17px; border-radius: 35px;
	color: #fff; font-size: 14px; font-weight: 800; line-height: 1; text-transform: capitalize; white-space: nowrap;
}
.main-nav > li > a:hover { color: #fff; background: rgba(0, 0, 0, .12); }
.main-nav > li.current-menu-item > a, .main-nav > li.current_page_item > a, .main-nav > li.current-menu-ancestor > a { background: var(--g-active); color: #fff; }
.main-nav .sub-menu {
	position: absolute; top: 100%; left: 0; min-width: 210px; z-index: 60; list-style: none; margin: 0; padding: 6px 0;
	background: #fff; border-radius: var(--radius); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
	opacity: 0; visibility: hidden; transform: translateY(8px); transition: .2s;
}
.main-nav li:hover > .sub-menu, .main-nav li:focus-within > .sub-menu { opacity: 1; visibility: visible; transform: none; }
.main-nav .sub-menu a { display: block; padding: 9px 16px; font-size: 14px; color: #333; }
.main-nav .sub-menu a:hover { background: #f4f9ef; }

.hd-bar-right { flex: 0 0 80px; display: flex; align-items: center; justify-content: flex-end; margin-left: auto; }
.hd-cart { display: flex; align-items: center; justify-content: center; width: 76px; height: 44px; border: 1px solid rgba(192,231,169,.75); border-radius: 28px; color: #fff; }
.hd-cart:hover { color: #fff; background: rgba(255,255,255,.08); }
.hd-cart-icon { position: relative; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; color: #fff; }
.hd-cart-count {
	position: absolute; top: -8px; right: 7px; width: 22px; height: 22px; border: 2px solid rgba(255,255,255,.55); border-radius: 50%;
	background: #f4484d; color: #fff; font-size: 11px; line-height: 18px; text-align: center;
}
.hd-cart-total { display: none; }

/* Ngăn kéo (menu mobile + giỏ hàng) */
.drawer {
	position: fixed; top: 0; bottom: 0; z-index: 1001; width: 340px; max-width: 88vw;
	background: #fff; display: flex; flex-direction: column; transition: transform .3s;
	box-shadow: 0 0 30px rgba(0, 0, 0, .25);
}
.drawer-left { left: 0; transform: translateX(-105%); }
.drawer-right { right: 0; transform: translateX(105%); }
.drawer.is-open { transform: none; }
.drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 16px 18px; border-bottom: 1px solid var(--line); font-size: 16px; text-transform: uppercase; }
.drawer-head button { border: 0; background: none; padding: 4px; display: flex; }
.drawer-body { flex: 1; overflow: auto; padding: 8px 0 20px; }
.drawer-sub { padding: 14px 18px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.cat-menu-m a { padding: 12px 18px; }
.drawer-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .45); opacity: 0; visibility: hidden; transition: .3s; }
body.drawer-open .drawer-overlay { opacity: 1; visibility: visible; }
body.drawer-open { overflow: hidden; }
.drawer .woocommerce-mini-cart { list-style: none; margin: 0; padding: 0 18px; }
.drawer .woocommerce-mini-cart-item { position: relative; display: block; min-height: 74px; padding: 12px 24px 12px 70px; border-bottom: 1px solid var(--line); font-size: 14px; line-height: 1.4; }
.drawer .woocommerce-mini-cart-item img { position: absolute; left: 0; top: 12px; width: 56px; height: 56px; object-fit: cover; border-radius: 6px; }
.drawer .woocommerce-mini-cart-item a:not(.remove) { font-weight: 600; display: block; }
.drawer .woocommerce-mini-cart-item .remove { position: absolute; right: 0; top: 12px; font-size: 20px; line-height: 1; color: #999; }
.drawer .woocommerce-mini-cart__total { padding: 14px 18px 4px; display: flex; justify-content: space-between; font-size: 15px; }
.drawer .woocommerce-mini-cart__buttons { display: grid; gap: 10px; padding: 8px 18px; margin: 0; }
.drawer .woocommerce-mini-cart__buttons .button { width: 100%; }
.drawer .woocommerce-mini-cart__empty-message { padding: 30px 18px; text-align: center; color: var(--muted); }

/* ==========================================================================
   3. Thành phần dùng chung
   ========================================================================== */
.price, .price .amount { color: var(--price); font-weight: 700; }
.price { display: block; font-size: 15px; line-height: 21px; }
.price del { color: #aaa; font-weight: 400; margin-right: 6px; }
.price del .amount { color: #aaa; font-weight: 400; }
.price ins { background: none; text-decoration: none; }
.price-contact { color: var(--price); font-weight: 700; }
.woocommerce-Price-currencySymbol { font-size: .82em; text-decoration: underline; margin-right: 1px; }

.sec-title { display: flex; align-items: baseline; justify-content: space-between; gap: 20px; margin-bottom: 20px; }
.sec-title h2 { margin: 0; font-size: 26px; line-height: 36px; font-weight: 800; color: var(--head); }
.sec-title a { color: inherit; }
.sec-title-sm h2 { font-size: 20px; line-height: 20px; }
.sec-title-sm { margin-bottom: 20px; }
.home-tape { margin-top: 30px; }
.home-tape + .home-tape { margin-top: 30px; }
.home-sec { margin-top: 20px; }

.breadcrumbs, .rank-math-breadcrumb, .woocommerce-breadcrumb { margin: 20px 0 20px; font-size: 15px; line-height: 24px; color: var(--muted); }
.breadcrumbs p { margin: 0; }
.rank-math-breadcrumb a, .woocommerce-breadcrumb a { color: var(--muted); }
.breadcrumbs .separator { padding: 0 8px; }
.breadcrumbs .last { color: var(--text); }
.shop-wrap .breadcrumbs .last, .single-product-wrap .breadcrumbs .last { font-weight: 700; color: var(--head); }
.breadcrumbs a:hover { color: var(--dark); }
.page-wrap { padding-bottom: 50px; }
.page-wrap .breadcrumbs { margin-top: 40px; }
.shop-wrap .breadcrumbs, .single-product-wrap .breadcrumbs { margin-top: 20px; }
.page-title { margin: 0 0 40px; font-size: 30px; line-height: 40px; font-weight: 800; color: var(--head); text-transform: uppercase; }

/* Carousel (cuộn ngang, không cần thư viện) */
.carousel { position: relative; }
.carousel-track {
	display: flex; gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	scroll-padding: 0 4px; scrollbar-width: none; -ms-overflow-style: none; padding: 4px 4px 8px; margin: -4px -4px -8px;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-item { flex: 0 0 calc((100% - 80px) / 5); min-width: 0; scroll-snap-align: start; }
.cats-track .carousel-item { flex-basis: calc((100% - 120px) / 7); }
.news-track .carousel-item { flex-basis: calc((100% - 60px) / 4); }
.partner-track { gap: 30px; }
.partner-track .carousel-item { flex-basis: calc((100% - 150px) / 6); }
.car-btn {
	position: absolute; top: 50%; z-index: 5; width: 40px; height: 40px; margin-top: -20px; padding: 0;
	border: 0; border-radius: 50%; background: #fff; color: #333; box-shadow: 0 2px 10px rgba(0, 0, 0, .22);
	display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s;
}
.car-prev { left: -12px; }
.car-next { right: -12px; }
.carousel:hover .car-btn { opacity: 1; }
.car-btn:hover { background: var(--dark); color: #fff; }
.car-btn[disabled] { display: none; }

/* Thẻ sản phẩm */
.product-card { position: relative; height: 100%; background: #fff; border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.pc-img { position: relative; display: block; height: 220px; overflow: hidden; background: #fff; }
.pc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.product-card:hover .pc-img img { transform: scale(1.04); }
.pc-body { flex: 1; padding: 14px 15px; }
.pc-title { margin: 0 0 6px; font-size: 15px; line-height: 21px; font-weight: 500; min-height: 42px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pc-title a { color: #333; }
.pc-title a:hover { color: var(--dark); }
.pc-add {
	position: absolute; top: 10px; right: 10px; z-index: 2; width: 38px; height: 38px; border-radius: 50%;
	background: #fff; color: var(--dark); box-shadow: 0 1px 6px rgba(0, 0, 0, .2);
	display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity .2s, background .2s, color .2s;
}
.product-card:hover .pc-add, .pc-add:focus, .pc-add.loading, .pc-add.added { opacity: 1; }
.pc-add:hover { background: var(--dark); color: #fff; }
.pc-add.loading { pointer-events: none; animation: vina-pulse .8s infinite; }
@keyframes vina-pulse { 50% { opacity: .4; } }

/* Biến thể không nền / dạng danh sách */
.pc-plain { background: transparent; box-shadow: none; border-radius: 0; overflow: visible; }
.pc-plain .pc-img { height: 190px; border-radius: var(--radius); }
.pc-plain .pc-body { padding: 10px 0 0; text-align: center; }
.pc-plain .price { display: none; }
.pc-plain .pc-title { min-height: 0; }
.pc-list { flex-direction: row; align-items: center; gap: 15px; padding: 15px; box-shadow: none; min-height: 110px; }
.pc-list .pc-img { flex: none; width: 80px; height: 80px; border-radius: 6px; }
.pc-list .pc-body { padding: 0; }
.pc-list .pc-add { display: none; }

/* Thu gọn / mở rộng */
.collapse-body { position: relative; max-height: 150px; overflow: hidden; transition: max-height .35s; }
.collapse-body::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 70px; background: linear-gradient(rgba(255, 255, 255, 0), #fff); pointer-events: none; transition: opacity .2s; }
.is-open .collapse-body { max-height: none; }
.is-open .collapse-body::after { opacity: 0; }
.collapse-more { text-align: center; padding: 10px 0 19px; }
.about-card, .term-card { background: #fff; border-radius: var(--radius); padding: 29px 20px 0; }
.about-content h3 { margin: 0 0 14px; font-size: 24px; line-height: 1.35; font-weight: 800; }
.about-content h3:not(:first-child) { font-size: 20px; margin-top: 20px; }
.about-content p, .about-content li { font-size: 16px; line-height: 25px; }
.about-card .collapse-body { max-height: 170px; }
.about-card.is-open .collapse-body { max-height: none; }
.collapse-left { text-align: left; }
.about-content blockquote { margin: 0 0 20px; padding-left: 20px; border-left: 3px solid var(--dark); }
.term-card { margin-bottom: 20px; }
.term-desc h1 { font-size: 28px; line-height: 39px; font-weight: 500; margin: 0 0 20px; }
.term-desc p { margin-bottom: 15px; }

/* ==========================================================================
   4. Trang chủ
   ========================================================================== */
.home-wrap { padding-top: 20px; padding-bottom: 0; }
.home-wrap > .container:first-child { margin-top: 0; }
.home-wrap { position: relative; background: #fff; }
.home-wrap::before { content: ""; position: absolute; left: 0; right: 0; top: -20px; height: 20px; background: #fff; }
.home-hero { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.hero-slide { position: relative; height: 460px; border-radius: var(--radius); overflow: hidden; background: #fefefe; }
.hero-slide > img { width: 100%; height: 100%; object-fit: cover; }
.hero-caption { position: absolute; left: 88px; top: 255px; max-width: 500px; padding: 10px; border-radius: var(--radius); background: rgba(0, 0, 0, .35); color: #fff; }
.hero-caption p { margin: 0 0 10px; font-size: 22px; line-height: 30px; font-weight: 700; }
.hero-caption p:last-child { margin: 0; }
.hero-caption .hero-h1 { margin: 0 0 10px; font-size: 22px; line-height: 30px; font-weight: 700; color: #fff; }
.hero-side { display: grid; grid-template-rows: 278px 162px; gap: 20px; min-width: 0; }
.hero-banner, .hero-small a { display: block; border-radius: var(--radius); overflow: hidden; background: #fff; border: 1px solid rgba(0, 0, 0, .06); }
.hero-banner img, .hero-small img { width: 100%; height: 100%; object-fit: cover; }
.hero-small { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }

.cat-item { display: block; text-align: center; color: #333; }
.cat-img { display: block; aspect-ratio: 1; border-radius: var(--radius); overflow: hidden; background: #fff; }
.cat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .35s; }
.cat-item:hover .cat-img img { transform: scale(1.05); }
.cat-name { display: block; margin-top: 10px; font-size: 16px; line-height: 25px; }

.sail { display: grid; grid-template-columns: 339px 1fr; gap: 20px; align-items: start; }
.sail-banners { display: grid; gap: 20px; }
.sail-banners a { display: block; border-radius: var(--radius); overflow: hidden; }
.sail-banners a:first-child { height: 360px; }
.sail-banners a:last-child { height: 340px; }
.sail-banners img { width: 100%; height: 100%; object-fit: cover; }
.sail-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

.tape-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }

/* Lưới dự án / bài viết đều nhau: ảnh cùng tỉ lệ 4:3, tiêu đề tối đa 2 dòng. */
.proj-grid, .posts-masonry { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 30px 24px; align-items: stretch; }
.proj-grid .post-card-img, .posts-masonry .post-card-img { aspect-ratio: 4 / 3; }
.proj-grid .post-card-img img, .posts-masonry .post-card-img img { height: 100%; object-fit: cover; }
.proj-grid .post-card-title, .posts-masonry .post-card-title { margin-top: 12px; font-size: 16px; line-height: 23px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* Thẻ trắng có viền cho dự án / bài viết (không đổ bóng). */
.pcard-box { display: flex; flex-direction: column; height: 100%; background: #fff; border: 1px solid #e4ebe6; border-radius: 12px; overflow: hidden; transition: border-color .2s; }
.pcard-box:hover { border-color: #2c9a45; }
.pcard-box .post-card-img { border-radius: 0; }
.pcard-box .post-card-body { display: flex; flex-direction: column; flex: 1; padding: 14px 16px 16px; }
.pcard-box .post-card-label { align-self: flex-start; font-size: 11px; line-height: 16px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: #2c9a45; }
.pcard-box .post-card-title { margin: 6px 0 14px; font-size: 16px; line-height: 23px; font-weight: 700; min-height: 46px; }
.pcard-box .post-card-title a { color: #0f3f25; }
.pcard-box:hover .post-card-title a { color: #2c9a45; }
.pcard-box .post-card-more { margin-top: auto; font-size: 13px; font-weight: 600; color: #0d5836; }
.pcard-box .post-card-more span { display: inline-block; transition: transform .2s; }
.pcard-box:hover .post-card-more span { transform: translateX(3px); }
.post-card-img { display: block; border-radius: var(--radius); overflow: hidden; background: #eee; }
.post-card-img img { width: 100%; height: auto; display: block; transition: transform .35s; }
.post-card:hover .post-card-img img { transform: scale(1.03); }
.post-card-title { margin: 15px 0 0; font-size: 18px; line-height: 25px; font-weight: 400; }
.post-card-title a { color: #333; }
.post-card-date { display: none; }

.home-news { margin-top: 20px; padding: 20px 0 30px; background: #f0f0f0; }
.pcard-news { background: #fff; border-radius: var(--radius); overflow: hidden; height: 100%; }
.pcard-news .post-card-img { border-radius: 0; height: 260px; }
.pcard-news .post-card-img img { height: 100%; object-fit: cover; }
.pcard-news .post-card-body { display: flex; flex-direction: column-reverse; padding: 25px 25px 30px; }
.pcard-news .post-card-date { display: block; margin-bottom: 8px; font-size: 13px; color: #8d8d8d; }
.pcard-news .post-card-title { margin: 0; font-size: 16px; line-height: 22px; font-weight: 400; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

.home-partners { margin-top: 0; padding: 40px 0 40px; background: #a1cb8a; color: #fff; }
.partners-title { margin: 0 0 20px; font-size: 30px; line-height: 40px; font-weight: 400; color: #fff; }
.partners-text { margin: 0 0 40px; font-size: 16px; line-height: 25px; color: #fff; }
.partner { display: block; height: 110px; padding: 8px; border-radius: var(--radius); background: #fff; }
.partner img { width: 100%; height: 100%; object-fit: contain; }

/* ==========================================================================
   5. Danh mục sản phẩm
   ========================================================================== */
.shop-layout { display: grid; grid-template-columns: 260px 1fr; gap: 30px; align-items: start; }
.shop-layout:not(:has(.shop-sidebar)) { grid-template-columns: 1fr; }
.shop-sidebar { background: #fff; border-radius: var(--radius); padding: 15px; }
.widget { margin-bottom: 20px; }
.widget:last-child { margin-bottom: 0; }
.widget-title { margin: 0 0 20px; font-size: 16px; line-height: 22px; font-weight: 500; text-transform: capitalize; }
.shop-heading { margin: 10px 0 20px; font-size: 24px; line-height: 34px; font-weight: 400; }
.products-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.no-results { padding: 40px 0; text-align: center; color: var(--muted); }

.widget_price_filter .price_slider { position: relative; height: 4px; margin: 6px 6px 18px; border-radius: 4px; background: #e1e1e1; }
.widget_price_filter .ui-slider-range { position: absolute; height: 100%; background: var(--dark); }
.widget_price_filter .ui-slider-handle { position: absolute; top: -6px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: var(--dark); cursor: pointer; outline: 0; }
.widget_price_filter .price_slider_amount input[type="text"] { display: none; }
.widget_price_filter .price_slider_amount { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 13px; }
.widget_price_filter .price_slider_amount .button { min-height: 32px; padding: 4px 14px; background: #dbe9f9; color: var(--dark); border-radius: 5px; }
.widget_price_filter .price_slider_amount .button:hover { background: var(--dark); color: #fff; }
.widget_price_filter .price_label { color: var(--muted); }

.pagination, .woocommerce-pagination { margin-top: 30px; }
.pagination ul, .woocommerce-pagination ul { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; list-style: none; margin: 0; padding: 0; }
.pagination a, .pagination span, .woocommerce-pagination a, .woocommerce-pagination span {
	display: flex; align-items: center; justify-content: center; min-width: 38px; height: 38px; padding: 0 10px;
	border-radius: 5px; background: #fff; box-shadow: var(--shadow); font-size: 14px;
}
.pagination .current, .woocommerce-pagination .current { background: var(--dark); color: #fff; }

/* ==========================================================================
   6. Trang sản phẩm
   ========================================================================== */
.product-top { background: #fff; padding-bottom: 20px; }
.product-top .breadcrumbs { margin-top: 20px; }
.product-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.product-gallery { min-width: 0; }
.woocommerce-product-gallery { position: relative; margin: 0; opacity: 1 !important; }
.woocommerce-product-gallery__wrapper { margin: 0; }
.woocommerce-product-gallery__image img { width: 100%; height: auto; display: block; border-radius: var(--radius); }
.woocommerce-product-gallery__trigger { position: absolute; top: 12px; right: 12px; z-index: 5; width: 38px; height: 38px; border-radius: 50%; background: #fff; box-shadow: 0 1px 6px rgba(0, 0, 0, .2); font-size: 0; display: flex; align-items: center; justify-content: center; }
.woocommerce-product-gallery__trigger::before { content: ""; width: 14px; height: 14px; border: 2px solid #333; border-radius: 50%; }
.flex-control-thumbs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; list-style: none; margin: 10px 0 0; padding: 0; }
.flex-control-thumbs li { margin: 0; }
.flex-control-thumbs img { width: 100%; border-radius: 6px; opacity: .6; cursor: pointer; }
.flex-control-thumbs img.flex-active, .flex-control-thumbs img:hover { opacity: 1; }

.product_title { margin: 0 0 20px; font-size: 28px; line-height: 34px; font-weight: 400; color: #333; }
.woocommerce-product-details__short-description { margin: 0 0 20px; padding: 10px 10px 1px; border-radius: var(--radius); background: #f6fff6; font-size: 16px; line-height: 24px; }
.woocommerce-product-details__short-description ul { margin-bottom: 10px; padding-left: 30px; }
.woocommerce-product-details__short-description li { margin-bottom: 10px; }
.product-summary > .price, .product-summary p.price { margin: 0 0 20px; font-size: 32px; line-height: 40px; }
.product-summary .price .amount { font-weight: 700; }
form.cart { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 20px; }
form.cart.variations_form { display: block; }
.quantity { display: inline-flex; align-items: stretch; height: 42px; border: 1px solid #e9e9e9; border-radius: 5px; background: #fff; overflow: hidden; }
.quantity input.qty { width: 40px; border: 0; border-left: 1px solid #e9e9e9; border-right: 1px solid #e9e9e9; text-align: center; font-size: 15px; padding: 0; background: #fff; -moz-appearance: textfield; }
.quantity input.qty::-webkit-outer-spin-button, .quantity input.qty::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.quantity .minus, .quantity .plus { width: 22px; border: 0; background: #fff; padding: 0; font-size: 14px; color: #333; }
.quantity .minus:hover, .quantity .plus:hover { background: #f3f3f3; }
.single_add_to_cart_button { flex: 1; min-height: 42px; }
.variations { margin-bottom: 14px; }
.variations td, .variations th { padding: 4px 8px 4px 0; text-align: left; vertical-align: middle; }
.variations select { height: 40px; padding: 0 10px; border: 1px solid #ddd; border-radius: 5px; background: #fff; min-width: 180px; }
.woocommerce-variation-add-to-cart { display: flex; gap: 10px; align-items: center; margin-top: 10px; }

.quick-order { margin: 0 0 20px; padding: 15px; border: 1px solid #e1e1e1; border-radius: var(--radius); }
.quick-order-title { margin: 0 0 15px; font-size: 18px; line-height: 26px; text-transform: uppercase; color: #333; }
.quick-order-btns { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.qo-btn { display: flex; align-items: center; justify-content: center; gap: 10px; height: 48px; padding: 0 8px; border-radius: var(--radius); font-size: 18px; color: #333; white-space: nowrap; }
.qo-call { background: #fff3f2; }
.qo-zalo { background: #edf4fb; }
.qo-ms { background: #deeeff; }
.qo-ic { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; flex: none; }
.qo-call .qo-ic { background: #f00; color: #fff; }
.qo-zalo-ic { background: #0180c7; color: #fff; font-size: 11px; font-weight: 700; }
.qo-ms-ic { background: #0a7cff; color: #fff; }
.share-links { display: flex; align-items: center; gap: 12px; margin: 0; font-size: 14px; font-weight: 700; color: #333; }
.share-links a { color: #777; display: flex; }
.share-links a:hover { color: var(--dark); }

.product-desc-sec { margin-top: 20px; }
.product-desc { padding: 20px; border-radius: var(--radius); background: #fff; }
.product-desc-title { margin: 0 0 20px; font-size: 22px; line-height: 30px; font-weight: 800; text-transform: uppercase; }
/* Chuẩn chữ cho mô tả sản phẩm: một cỡ chữ, một màu; bỏ qua định dạng gõ tay dán từ nơi khác. */
.product-desc .entry-content { font-size: 15px; line-height: 1.75; color: #494b55; }
.product-desc .entry-content p { margin: 0 0 14px; }
.product-desc .entry-content h2 {
	position: relative; margin: 32px 0 16px; padding-bottom: 10px;
	font-size: 20px; line-height: 1.35; font-weight: 800; color: #0f3f25; text-transform: none;
}
.product-desc .entry-content h2::after { content: ""; position: absolute; left: 0; bottom: 0; width: 36px; height: 2px; background: #ffbe16; }
.product-desc .entry-content h3, .product-desc .entry-content h4, .product-desc .entry-content h5, .product-desc .entry-content h6 {
	margin: 24px 0 10px; font-size: 17px; line-height: 1.4; font-weight: 700; color: #0f3f25; text-transform: none;
}
.product-desc .entry-content > :first-child { margin-top: 0; }
.product-desc .entry-content [style] { font-size: inherit !important; font-family: inherit !important; color: inherit !important; background: none !important; text-align: left !important; }
.product-desc .entry-content mark { background: none; color: inherit; }
.product-desc .entry-content em, .product-desc .entry-content i { font-style: normal; }
.product-desc .entry-content u { text-decoration: none; }
.product-desc .entry-content strong, .product-desc .entry-content b { font-weight: 700; color: #2f3136; }
.product-desc .entry-content ul, .product-desc .entry-content ol { margin: 0 0 16px; padding-left: 22px; }
.product-desc .entry-content li { margin-bottom: 6px; }
.product-desc .entry-content a { color: #0d5836; font-weight: 600; }
/* Ảnh sản phẩm đã có ở gallery, không hiển thị lại trong mô tả. */
.product-desc .entry-content img, .product-desc .entry-content .wp-caption, .product-desc .entry-content figure:has(img) { display: none; }
.product-desc .entry-content iframe { display: block; width: 100%; max-width: 760px; height: auto; aspect-ratio: 16 / 9; margin: 0 0 16px; border: 0; border-radius: 8px; }
.product-desc .entry-content table { font-size: 14px; }
.product-desc .entry-content table th { background: #f2f9f5; color: #0f3f25; }
.related-sec { margin-top: 30px; }
/* Khoảng trống giữa nội dung trang sản phẩm và footer, giống .page-wrap. */
.single-product-wrap { padding-bottom: 50px; }

/* Nội dung bài viết / mô tả */
.entry-content { overflow-wrap: break-word; }
.entry-content > *:last-child { margin-bottom: 0; }
.entry-content h2 { font-size: 24px; line-height: 34px; margin: 28px 0 16px; }
.entry-content h3 { font-size: 20px; line-height: 28px; margin: 22px 0 14px; }
.entry-content img, .entry-content video { height: auto; border-radius: 6px; }
.entry-content table { width: 100%; border: 0; border-collapse: collapse; margin-bottom: 20px; font-size: 15px; }
.entry-content table th, .entry-content table td { padding: 10px 12px; border: 0; border-bottom: 1px solid #ebebeb; text-align: left; vertical-align: top; }
.table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-bottom: 20px; }
.table-responsive table { margin-bottom: 0; }
.entry-content table th { font-weight: 700; width: 24%; }
.entry-content a { color: inherit; text-decoration: none; }
.entry-content a:hover { color: var(--dark); text-decoration: underline; }
.entry-content blockquote { margin: 0 0 20px; padding: 10px 0 10px 20px; border-left: 3px solid var(--dark); }
.entry-content .alignleft { float: left; margin: 0 20px 10px 0; }
.entry-content .alignright { float: right; margin: 0 0 10px 20px; }
.entry-content .aligncenter { display: block; margin: 0 auto 20px; }
/* Ảnh chèn từ trình soạn thảo cũ thường dính liền chữ phía sau: cho ảnh (không float) đứng riêng một dòng. */
.entry-content img[class*="wp-image-"]:not(.alignleft):not(.alignright) { display: block; margin-bottom: 15px; }
.wp-caption { max-width: 100%; }
.wp-caption-text, figcaption { font-size: 13px; color: var(--muted); text-align: center; }

/* ==========================================================================
   7. Bài viết & danh sách tin
   ========================================================================== */

.post-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 45px; align-items: start; }
.post-title { margin: 0 0 12px; font-size: 32px; line-height: 40px; font-weight: 800; }
.post-meta { margin-bottom: 14px; font-size: 14px; color: #555; }
.post-meta .vi { margin-right: 6px; color: #333; }
.share-circles { display: flex; gap: 8px; margin: 0 0 25px; }
.sc { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; color: #fff; }
.sc-facebook { background: #3b5998; }
.sc-x { background: #000; }
.sc-linkedin { background: #0077b5; }
.sc-telegram { background: #2ca5e0; }
.sc:hover { color: #fff; opacity: .85; }
.post-article .entry-content { font-size: 15px; }
.post-sidebar .widget-title { font-size: 20px; font-weight: 800; margin-bottom: 15px; }
.side-post { display: block; margin-bottom: 20px; }
.side-post-img { display: block; border-radius: 4px; overflow: hidden; }
.side-post-img img { width: 100%; height: auto; }
.side-post-title { display: block; margin-top: 12px; font-size: 14px; line-height: 20px; font-weight: 700; color: #111; }
.archive-desc { margin: -20px 0 30px; }

.not-found { padding: 80px 15px; text-align: center; }
.not-found h1 { font-size: 90px; line-height: 1; margin-bottom: 10px; color: var(--dark); }

/* Trang Liên hệ */
.contact-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 0; margin-top: 30px; }
.contact-left { padding-right: 40px; border-right: 1px solid var(--line); }
.contact-right { padding-left: 50px; }
.contact-right p, .contact-right li { margin-bottom: 20px; }
.contact-right ul, .contact-right ol { padding-left: 17px; }
.contact-right blockquote { margin: 0; padding: 0 0 0 30px; border-left: 3px solid var(--dark); font-size: 16px; line-height: 26px; }
.contact-info { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 30px; margin: 0 0 20px; padding: 0 10px; }
.ci-item { display: flex; align-items: center; gap: 20px; }
.ci-item img { flex: none; }
.ci-text { font-size: 15px; line-height: 26px; }
.contact-page .elementor-widget-form { padding: 0 10px; }
@media (max-width: 849px) {
	.contact-cols { grid-template-columns: 1fr; }
	.contact-left { padding-right: 0; border-right: 0; }
	.contact-right { padding: 30px 0 0; }
	.contact-info { grid-template-columns: 1fr; padding: 0; }
}

/* Trang tĩnh */
.page-article .entry-content { font-size: 15px; }
.is-shop-page .entry-content { background: transparent; }

/* ==========================================================================
   8. Giỏ hàng, thanh toán, tài khoản
   ========================================================================== */
.cart-empty-box { max-width: 820px; margin: 0 auto; padding: 90px 0 100px; text-align: center; }
.cart-empty-title { margin: 20px 0 15px; font-size: 44px; line-height: 56px; font-weight: 400; }
.cart-empty-text { max-width: 540px; margin: 0 auto 30px; font-size: 17px; line-height: 26px; }
.cart-empty-box .btn-primary { min-height: 48px; padding: 0 28px; font-size: 14px; }
.vina-shop-page .woocommerce-cart-form, .vina-shop-page .cart-collaterals, .vina-shop-page .woocommerce-checkout { margin-bottom: 30px; }
table.shop_table { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--radius); overflow: hidden; margin-bottom: 20px; font-size: 15px; }
table.shop_table th, table.shop_table td { padding: 14px 16px; border-bottom: 1px solid #eee; text-align: left; vertical-align: middle; }
table.shop_table thead th { font-size: 13px; text-transform: uppercase; background: #fafafa; }
table.shop_table .product-thumbnail img { width: 70px; height: 70px; object-fit: cover; border-radius: 6px; }
table.shop_table .product-remove a { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background: #eee; font-size: 18px; line-height: 1; color: #777; }
table.shop_table .product-remove a:hover { background: var(--price); color: #fff; }
table.shop_table .actions { text-align: right; }
table.shop_table .coupon .button, table.shop_table .actions .button { white-space: nowrap; }
table.shop_table.cart { table-layout: auto; }
table.shop_table .product-remove { width: 50px; }
table.shop_table .product-thumbnail { width: 100px; }
table.shop_table .product-name { width: 38%; }
table.shop_table .product-quantity { width: 120px; }
.woocommerce-cart .woocommerce { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 0 30px; align-items: start; }
.woocommerce-cart .woocommerce > .woocommerce-notices-wrapper { grid-column: 1 / -1; }
.woocommerce-cart .cart-collaterals { display: block; }
.woocommerce-cart .cart_totals { width: 100%; padding: 20px; }
.cart_totals table.shop_table { box-shadow: none; }
.cart_totals th { width: 38%; white-space: nowrap; }
table.shop_table .coupon { float: left; display: flex; gap: 10px; }
.cart-collaterals { display: flex; justify-content: flex-end; }
.cart_totals { width: 420px; max-width: 100%; padding: 20px; background: #fff; border-radius: var(--radius); }
@media (max-width: 1024px) { .woocommerce-cart .woocommerce { grid-template-columns: 1fr; } }
.cart_totals h2 { font-size: 20px; }
.cart_totals .wc-proceed-to-checkout .button { width: 100%; min-height: 48px; font-size: 14px; }
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 20px; margin-bottom: 20px; }
.woocommerce-billing-fields, .woocommerce-shipping-fields, .woocommerce-additional-fields, #order_review, .woocommerce-checkout-review-order { padding: 20px; background: #fff; border-radius: var(--radius); margin-bottom: 20px; }
form.checkout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 520px); grid-template-rows: auto 1fr; column-gap: 30px; align-items: start; }
form.checkout #customer_details { grid-column: 1; }
form.checkout #order_review_heading, form.checkout #order_review { grid-column: 2; }
form.checkout #order_review_heading { margin: 0 0 15px; font-size: 20px; }
form.checkout #customer_details { grid-row: 1 / span 2; }
.form-row { margin-bottom: 14px; }
.form-row label { display: block; margin-bottom: 6px; font-size: 14px; font-weight: 700; }
.form-row .required { color: var(--price); text-decoration: none; }
input[type="text"], input[type="email"], input[type="tel"], input[type="password"], input[type="number"], input[type="search"], select, textarea {
	width: 100%; min-height: 42px; padding: 8px 12px; border: 1px solid #ddd; border-radius: 5px; background: #fff; font-size: 14px; outline: 0;
}
textarea { min-height: 110px; resize: vertical; }
input:focus, select:focus, textarea:focus { border-color: var(--dark); }
#payment { background: #fff; border-radius: var(--radius); }
#payment ul.payment_methods { list-style: none; margin: 0; padding: 0; }
#payment .payment_methods li { padding: 14px 0; border-bottom: 1px solid #eee; }
#payment .payment_box { margin-top: 10px; padding: 12px 14px; background: #f6fff6; border-radius: 6px; font-size: 14px; }
#place_order { width: 100%; min-height: 50px; font-size: 14px; }
.woocommerce-message, .woocommerce-info, .woocommerce-error { list-style: none; margin: 0 0 20px; padding: 14px 18px; border-left: 4px solid var(--dark); border-radius: 6px; background: #fff; font-size: 14px; display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.woocommerce-error { border-color: var(--price); display: block; }
.woocommerce-info { border-color: #3a8bdc; }
.woocommerce-message .button, .woocommerce-info .button { order: 2; }
.woocommerce-MyAccount-navigation ul { list-style: none; padding: 0; margin: 0 0 20px; display: flex; flex-wrap: wrap; gap: 8px; }
.woocommerce-MyAccount-navigation a { display: block; padding: 8px 14px; border-radius: 5px; background: #fff; }
.woocommerce-MyAccount-navigation .is-active a { background: var(--dark); color: #fff; }

/* ==========================================================================
   9. Footer
   ========================================================================== */
.site-footer { background: #fff; border-top: 1px solid var(--line); }
.ft-grid { display: grid; grid-template-columns: 445fr 302fr 322fr 301fr; padding-top: 30px; padding-bottom: 30px; }
.ft-about { padding-right: 60px; }
.ft-logo img { display: block; width: 193px; height: auto; margin-bottom: 18px; }
.ft-contact { list-style: none; margin: 0; padding: 0; }
.ft-contact li { display: flex; align-items: flex-start; gap: 8px; margin: 0 0 12px; font-size: 16px; line-height: 25px; }
.ft-contact .vi { margin-top: 5px; color: #111; }
.ft-contact strong { color: #111; }
.ft-title { margin: 0 0 22px; font-size: 18px; line-height: 26px; font-weight: 400; text-transform: uppercase; color: #333; }
.ft-links { list-style: none; margin: 0; padding: 0; }
.ft-links li { margin: 0; }
.ft-links a { display: block; padding: 8px 0; font-size: 15px; line-height: 19px; color: #333; }
.ft-links a:hover { color: var(--dark); }
.ft-social { display: flex; gap: 6px; }
.soc { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 3px; color: #fff; }
.soc-yt { background: #cd201f; }
.soc-tt { background: #6b7280; }
.soc:hover { color: #fff; opacity: .85; }
.ft-copy { border-top: 1px solid var(--line); padding: 20px 0; text-align: center; font-size: 14px; }

/* ==========================================================================
   10. Responsive
   ========================================================================== */
@media (max-width: 1199px) {
	.hd-info-item:nth-child(3) { display: none; }
	.hd-top-in { gap: 28px; }
	.hd-logo img { width: 180px; }
	.hd-search { max-width: 400px; min-width: 285px; }
	.hero-caption { left: 40px; max-width: 420px; }
	.cats-track .carousel-item { flex-basis: calc((100% - 80px) / 5); }
	.partner-track .carousel-item { flex-basis: calc((100% - 90px) / 4); }
	.carousel-item { flex-basis: calc((100% - 60px) / 4); }
	.news-track .carousel-item { flex-basis: calc((100% - 40px) / 3); }
	.sail { grid-template-columns: 260px 1fr; }
	.sail-grid, .tape-grid { grid-template-columns: repeat(3, 1fr); }
	.proj-grid, .posts-masonry { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.products-grid { grid-template-columns: repeat(3, 1fr); }
	.ft-grid { grid-template-columns: 1fr 1fr; gap: 30px; }
}

@media (max-width: 1024px) {
	.hd-info { display: none; }
	.hd-search { max-width: 560px; }
	.shop-layout { grid-template-columns: 1fr; }
	.shop-sidebar { display: none; }
	.post-layout { grid-template-columns: 1fr; }
	.post-sidebar { display: none; }
	form.checkout { grid-template-columns: 1fr; }
	form.checkout #customer_details, form.checkout #order_review_heading, form.checkout #order_review { grid-column: 1; grid-row: auto; }
}

@media (max-width: 849px) {
	body { font-size: 14px; }
	.hd-top { height: 64px; position: relative; background: linear-gradient(90deg, #4dab2d, #19883a); }
	.hd-top-in { justify-content: space-between; gap: 10px; }
	.hd-mobile-right { display: flex; align-items: center; }
	.hd-cart-m { position: relative; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: #fff; }
	.hd-cart-m .hd-cart-count { top: 2px; right: 0; }
	.hd-burger, .hd-search-toggle { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; padding: 0; border: 0; background: none; color: #fff; }
	.hd-logo { flex: 0 0 150px; width: 150px; margin: 0 auto; }
	.hd-logo img { width: 150px; }
	.hd-search { display: none; position: absolute; left: 15px; right: 15px; top: 66px; z-index: 40; max-width: none; min-width: 0; }
	.hd-search.is-open { display: block; }
	.hd-bar { display: none; }

	.sec-title h2 { font-size: 20px; line-height: 28px; }
	.page-title { font-size: 24px; line-height: 32px; margin-bottom: 25px; }
	.home-hero { grid-template-columns: 1fr; gap: 20px; }
	.hero-slide { height: 300px; }
	.hero-caption { left: 18px; right: 18px; top: 75px; max-width: none; }
	.hero-caption p, .hero-caption .hero-h1 { font-size: 18px; line-height: 22px; }
	.hero-side { grid-template-rows: auto; }
	.hero-banner { height: 126px; }
	.hero-small { display: none; }
	.home-sec { margin-top: 15px; }

	.carousel-track, .cats-track { gap: 10px; }
	.carousel-item, .cats-track .carousel-item { flex-basis: calc((100% - 10px) / 2); }
	.news-track .carousel-item { flex-basis: 82%; }
	.partner-track { gap: 12px; }
	.partner-track .carousel-item { flex-basis: calc((100% - 12px) / 2); }
	.car-btn { display: none; }
	.cat-name { font-size: 18px; }
	.pc-img { height: 160px; }
	.pc-add { opacity: 1; top: 10px; right: 10px; }
	.about-card, .term-card { padding: 20px 20px 0; }
	.about-content h3 { font-size: 22px; }
	.sail { grid-template-columns: 1fr; }
	.sail-banners { display: none; }
	.sail-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.tape-grid { grid-template-columns: 1fr; gap: 10px; }
	.proj-grid, .posts-masonry { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 12px; }
	.proj-grid .post-card-title, .posts-masonry .post-card-title { font-size: 14px; line-height: 20px; margin-top: 8px; }
	.pcard-box .post-card-body { padding: 10px 10px 12px; }
	.pcard-box .post-card-label { font-size: 10px; }
	.pcard-box .post-card-title { margin: 4px 0 10px; font-size: 14px; line-height: 20px; min-height: 40px; }
	.pcard-box .post-card-more { font-size: 12px; }
	.post-card-title { font-size: 15px; line-height: 21px; }
	.home-partners { padding: 30px 0; }
	.partners-title { font-size: 24px; }

	.products-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
	.term-desc h1 { font-size: 22px; line-height: 30px; }
	.shop-heading { font-size: 20px; }

	.product-cols { grid-template-columns: 1fr; }
	.product_title { font-size: 22px; line-height: 30px; }
	.quick-order-btns { grid-template-columns: 1fr; }
	.post-title { font-size: 24px; line-height: 32px; }
	.cart-empty-title { font-size: 28px; line-height: 36px; }
	table.shop_table { font-size: 14px; }
	table.shop_table th, table.shop_table td { padding: 10px; }
	.ft-grid { grid-template-columns: 1fr; gap: 10px; }
	.ft-contact li { font-size: 15px; }
	.cart_totals { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

/* ==========================================================================
   11. Tương thích plugin & CSS tùy chỉnh chuyển từ Woodmart
   ========================================================================== */
/* LiteSpeed lazy load: ảnh hiện dần khi tải xong. */
img[data-lazyloaded] { opacity: 0; }
img.litespeed-loaded { transition: opacity .5s linear .2s; opacity: 1; }


/* Màu giá toàn site. */
.amount { color: #f33; }
.price del, .price del .amount { color: #5b5b5b; }

/* Ẩn giao diện plugin nút liên hệ cũ (nếu còn bật) – đã thay bằng nút của theme. */
#ws247-aio-ct-button-hl, #ws247-aio-ct-button-show-all-container { display: none !important; }

/* Form liên hệ Elementor (trang Liên hệ). */
.elementor-element-df4a936 #form-field-tel { width: 190px; }
.elementor-element-df4a936 .e-form__buttons { width: 68px !important; }
.elementor-element-df4a936 .elementor-labels-above { flex-wrap: inherit !important; }
.elementor-element-3e3eea0 { --flex-wrap: unset !important; }
#pp-advanced-tabs-content-4251 .e-con.e-flex { --flex-wrap: unset !important; }

/* Bảng trong mô tả sản phẩm cuộn ngang trên điện thoại. */
@media (max-width: 849px) {
	.product-desc .table-responsive table { min-width: 640px; }
	.product-desc .table-responsive th, .product-desc .table-responsive td { min-width: 110px; white-space: normal; }
	.product-desc .entry-content h2 { font-size: 18px; }
	.product-desc .entry-content h3, .product-desc .entry-content h4, .product-desc .entry-content h5, .product-desc .entry-content h6 { font-size: 16px; }
}

/* ==========================================================================
   12. Nút liên hệ nổi (Zalo / Messenger / Gọi điện)
   ========================================================================== */
.vcontact { --zalo: #0068ff; --msg: linear-gradient(135deg, #00c6ff 0%, #0a7cff 45%, #a033ff 100%); --call: #0c562e; }
.vcontact svg { display: block; width: 100%; height: 100%; }

/* Cột nút bên phải (máy tính) */
.vfab { position: fixed; right: 22px; bottom: 112px; z-index: 900; display: flex; flex-direction: column; gap: 14px; }
.vfab-btn { position: relative; display: block; width: 54px; height: 54px; border-radius: 50%; color: #fff; text-decoration: none; transition: transform .2s ease, box-shadow .2s ease; }
.vfab-btn:hover, .vfab-btn:focus-visible { transform: translateY(-2px) scale(1.06); color: #fff; }
.vfab-btn:focus-visible { outline: 3px solid rgba(12, 86, 46, .35); outline-offset: 3px; }
.vfab-ic { position: relative; z-index: 1; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; border-radius: 50%; border: 3px solid #fff; }
.vfab-zalo .vfab-ic { background: var(--zalo); box-shadow: 0 6px 18px rgba(0, 104, 255, .38); padding: 5px; }
.vfab-messenger .vfab-ic { background: var(--msg); box-shadow: 0 6px 18px rgba(10, 124, 255, .38); padding: 8px; }
.vfab-phone .vfab-ic { background: var(--call); box-shadow: 0 6px 18px rgba(12, 86, 46, .42); padding: 15px; }
.vfab-phone .vfab-ic svg { animation: vina-ring 2.4s ease-in-out infinite; transform-origin: 50% 50%; }
.vfab-phone::before, .vfab-phone::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(12, 86, 46, .35); animation: vina-pulse-ring 2.4s ease-out infinite; }
.vfab-phone::after { animation-delay: 1.2s; }
.vfab-label {
	position: absolute; right: calc(100% + 12px); top: 50%; padding: 7px 12px; border-radius: 8px;
	background: #1f2a24; color: #fff; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .18); opacity: 0; visibility: hidden; transform: translate(6px, -50%);
	transition: opacity .2s ease, transform .2s ease, visibility .2s; pointer-events: none;
}
.vfab-label::after { content: ""; position: absolute; left: 100%; top: 50%; margin-top: -5px; border: 5px solid transparent; border-left-color: #1f2a24; }
.vfab-btn:hover .vfab-label, .vfab-btn:focus-visible .vfab-label { opacity: 1; visibility: visible; transform: translate(0, -50%); }

/* Thanh liên hệ đáy màn hình (điện thoại) */
.vbar { display: none; }

@keyframes vina-pulse-ring { 0% { transform: scale(1); opacity: .7; } 100% { transform: scale(1.75); opacity: 0; } }
@keyframes vina-ring { 0%, 50%, 100% { transform: rotate(0); } 5%, 15%, 25% { transform: rotate(-14deg); } 10%, 20% { transform: rotate(14deg); } }

@media (max-width: 849px) {
	.vfab { display: none; }
	body { padding-bottom: calc(62px + env(safe-area-inset-bottom)); }
	.vbar {
		position: fixed; left: 0; right: 0; bottom: 0; z-index: 900; display: grid; grid-template-columns: repeat(3, 1fr);
		gap: 8px; padding: 8px 10px calc(8px + env(safe-area-inset-bottom)); background: #fff;
		border-top: 1px solid #e8ece9; box-shadow: 0 -6px 20px rgba(0, 0, 0, .08);
	}
	.vbar-btn { display: flex; align-items: center; justify-content: center; gap: 7px; height: 46px; border-radius: 12px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
	.vbar-btn:hover, .vbar-btn:active { color: #fff; filter: brightness(1.05); }
	.vbar-ic { flex: none; width: 24px; height: 24px; }
	.vbar-phone { background: var(--call); }
	.vbar-phone .vbar-ic { width: 18px; height: 18px; animation: vina-ring 2.4s ease-in-out infinite; }
	.vbar-zalo { background: var(--zalo); }
	.vbar-zalo .vbar-ic { width: 28px; height: 28px; }
	.vbar-messenger { background: var(--msg); }
	.drawer { padding-bottom: 0; }
}

@media (prefers-reduced-motion: reduce) {
	.vfab-phone::before, .vfab-phone::after { display: none; }
}