/* ============================================================================
   TAN PHAT — final overrides (loaded last, wins all conflicts)
   Fixes:
   1. Hero cards overlapping (old absolute positioning)
   2. Why-Us features showing 4 cols instead of 3
   3. WooCommerce product cards collapsing to narrow vertical strips
   4. Single-product gallery taking full width / summary missing
   5. Customer logos grid showing 8 cols
   6. Featured-products section under-using width
   ========================================================================= */

/* -------- 1. HERO ---------------------------------------------------------- */
.hero .hero-visual{
	position:relative !important;
	height:auto !important;
	max-width:none !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	gap:18px !important;
}
.hero .hero-visual .hero-card{
	position:static !important;
	top:auto !important; left:auto !important; right:auto !important; bottom:auto !important;
	width:auto !important; height:auto !important;
	background:rgba(255,255,255,.07);
	-webkit-backdrop-filter:blur(8px);
	backdrop-filter:blur(8px);
	border:1px solid rgba(255,255,255,.15);
	border-radius:14px;
	padding:24px;
	color:#fff;
	box-shadow:none;
	display:block;
}
.hero .hero-visual .hero-card.big{ grid-column:1 / -1; }

/* Hero video card — 16:9 responsive iframe (kept for YouTube/landscape) */
.hero .hero-visual .hero-card.hero-video{
	padding:0 !important;
	overflow:hidden !important;
	background:#000 !important;
	border:1px solid rgba(255,255,255,.15) !important;
}
.hero .hero-visual .hero-video-frame{
	position:relative !important;
	width:100% !important;
	aspect-ratio:16 / 9;
	overflow:hidden;
	border-radius:14px;
}
@supports not (aspect-ratio: 16 / 9){
	.hero .hero-visual .hero-video-frame{
		padding-top:56.25%; /* 16:9 */
		height:0;
	}
}
.hero .hero-visual .hero-video-frame iframe{
	position:absolute !important;
	inset:0 !important;
	top:0 !important; left:0 !important;
	width:100% !important;
	height:100% !important;
	border:0 !important;
	display:block !important;
}

/* Hero REEL card — 9:16 vertical (Facebook Reel / Shorts), centered in wide card */
.hero .hero-visual .hero-card.hero-reel{
	padding:18px !important;
	background:rgba(0,0,0,.35) !important;
	border:1px solid rgba(255,255,255,.15) !important;
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	overflow:hidden !important;
}
.hero .hero-visual .hero-reel-frame{
	position:relative !important;
	aspect-ratio:9 / 16;
	height:560px;
	max-height:70vh;
	max-width:100%;
	width:auto !important;
	overflow:hidden !important;
	border-radius:14px !important;
	background:#000;
	box-shadow:0 12px 32px rgba(0,0,0,.35);
}
@supports not (aspect-ratio: 9 / 16){
	.hero .hero-visual .hero-reel-frame{
		width:315px;  /* 9 */
		height:560px; /* 16 */
	}
}
.hero .hero-visual .hero-reel-frame iframe{
	position:absolute !important;
	inset:0 !important;
	top:0 !important; left:0 !important;
	width:100% !important;
	height:100% !important;
	border:0 !important;
	display:block !important;
	background:#000;
}
@media (max-width:768px){
	.hero .hero-visual .hero-reel-frame{
		height:480px;
	}
}
@media (max-width:480px){
	.hero .hero-visual .hero-reel-frame{
		height:400px;
	}
}
.hero .hero-visual .hero-card .hero-card-icon{
	font-size:38px; line-height:1; margin-bottom:10px;
}
.hero .hero-visual .hero-card h3{
	margin:0 0 8px; font-size:20px; font-weight:800; color:#fff;
}
.hero .hero-visual .hero-card h4{
	margin:0; font-size:15px; font-weight:700; color:#fff;
}
.hero .hero-visual .hero-card p{
	margin:0; color:rgba(255,255,255,.75); font-size:14px;
}

/* -------- 2. FEATURES (3 cols, never 4) ----------------------------------- */
.section-light .features,
section .features{
	display:grid !important;
	grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
	gap:24px !important;
}
@media (max-width:1024px){
	.section-light .features,
	section .features{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
	.section-light .features,
	section .features{ grid-template-columns:1fr !important; }
}

/* -------- 3. WOOCOMMERCE PRODUCT GRID ------------------------------------- */
/* Override WooCommerce's inline width="22%" + .columns-N float layout */
.woocommerce ul.products,
ul.products,
.shop-main ul.products,
.related ul.products,
.upsells ul.products{
	display:grid !important;
	grid-template-columns:repeat(4, minmax(0,1fr)) !important;
	gap:20px !important;
	margin:0 0 24px !important;
	padding:0 !important;
	list-style:none !important;
	float:none !important;
	clear:both !important;
}
/* CRITICAL: kill clearfix pseudo-elements that become grid items and create empty cells */
.woocommerce ul.products::before,
.woocommerce ul.products::after,
ul.products::before,
ul.products::after,
.related ul.products::before,
.related ul.products::after,
.upsells ul.products::before,
.upsells ul.products::after,
.shop-main ul.products::before,
.shop-main ul.products::after{
	display:none !important;
	content:none !important;
}
.woocommerce ul.products li.product,
.woocommerce-page ul.products li.product,
.woocommerce ul.products li.product.first,
.woocommerce ul.products li.product.last,
.woocommerce ul.products li.product:nth-child(2n),
.woocommerce ul.products li.product:nth-child(3n+1),
.woocommerce ul.products li.product:nth-child(4n+1),
.woocommerce ul.products li.product:nth-child(5n+1),
ul.products li.product,
.product-card{
	width:auto !important;
	max-width:none !important;
	min-width:0 !important;
	margin:0 !important;
	padding:0 !important;
	float:none !important;
	clear:none !important;
	display:flex !important;
	flex-direction:column !important;
	background:#fff !important;
	border:1px solid #e7eaee !important;
	border-radius:12px !important;
	overflow:hidden !important;
	box-shadow:none !important;
}
/* Card image */
.woocommerce ul.products li.product .product-card-img,
ul.products li.product .product-card-img{
	display:block !important;
	width:100% !important;
	aspect-ratio:4/3 !important;
	background:linear-gradient(135deg,#eef2f7,#e0e5ec) !important;
	overflow:hidden !important;
	margin:0 !important;
}
.woocommerce ul.products li.product .product-card-img img,
ul.products li.product .product-card-img img{
	width:100% !important; height:100% !important;
	object-fit:cover !important; display:block !important;
	max-width:none !important;
}
/* Card body */
.product-card-body{
	padding:14px 16px 8px !important;
	flex:1 0 auto;
}
.product-card-body .product-cat{
	display:inline-block !important;
	font-size:11px; font-weight:700;
	color:var(--orange) !important;
	text-transform:uppercase; letter-spacing:1px;
	margin:0 0 6px !important;
	white-space:normal;
	word-break:normal;
	overflow-wrap:break-word;
	line-height:1.3;
}
.product-card-body .product-cat a{ color:inherit; text-decoration:none; }
.product-card-body h3,
.product-card-body .woocommerce-loop-product__title{
	font-size:15px !important; line-height:1.4 !important;
	color:var(--navy) !important; font-weight:700 !important;
	margin:0 0 6px !important;
	word-break:normal !important;
	overflow-wrap:break-word !important;
}
.product-card-body .product-sku{
	display:block; font-size:12px; color:var(--steel); margin-bottom:6px;
}
.product-card-price,
.product-card .price{
	font-size:17px; font-weight:800; color:var(--orange); margin-top:6px;
}
.product-card-foot{
	display:flex !important; gap:8px; padding:0 16px 16px !important;
	margin-top:auto;
}
.product-card-foot a, .product-card-foot .button{
	flex:1; display:inline-flex; align-items:center; justify-content:center;
	padding:10px 12px; border-radius:8px;
	font-size:13px; font-weight:700; text-decoration:none;
	white-space:nowrap;
}
.product-card-foot .button{ background:var(--navy); color:#fff; border:0; }
.product-card-foot .btn-quote{ background:rgba(233,30,99,.1); color:var(--orange-dark); }
.product-card-foot .button:hover{ background:var(--navy-light, #133653); color:#fff; }
.product-card-foot .btn-quote:hover{ background:rgba(233,30,99,.18); }

/* Sale badge */
.woocommerce ul.products li.product .onsale,
.product-card .badge-sale{
	position:absolute; top:10px; left:10px;
	background:var(--orange); color:#fff;
	padding:4px 10px; border-radius:4px;
	font-size:11px; font-weight:700; letter-spacing:.5px;
	margin:0 !important; min-height:0; min-width:0; line-height:1.4;
}

/* Responsive */
@media (max-width:1024px){
	.woocommerce ul.products,
	ul.products,
	.shop-main ul.products{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; }
}
@media (max-width:768px){
	.woocommerce ul.products,
	ul.products,
	.shop-main ul.products{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:480px){
	.woocommerce ul.products,
	ul.products,
	.shop-main ul.products{ grid-template-columns:1fr !important; }
}

/* -------- 4. SHOP ARCHIVE (sidebar + main) -------------------------------- */
.shop-section .shop-wrap,
.shop-archive .shop-layout{
	display:grid !important;
	grid-template-columns:280px 1fr !important;
	gap:32px !important;
	align-items:start !important;
}
@media (max-width:1024px){
	.shop-section .shop-wrap,
	.shop-archive .shop-layout{ grid-template-columns:1fr !important; }
}
.shop-archive .shop-main{ min-width:0; }

/* -------- 5. SINGLE PRODUCT (gallery + summary 2-col) --------------------- */
/* Neutralize WooCommerce default float layout on .product wrapper */
.woocommerce div.product,
.woocommerce-page div.product,
.single-product-layout,
.tp-product-single .product,
.tp-product-single div.product{
	display:block !important;
	float:none !important;
	width:100% !important;
	max-width:none !important;
}
/* Kill WooCommerce's default "div.product div.images { width:48%; float:left }"
   and "div.product div.summary { width:48%; float:right }" rules */
.woocommerce div.product div.images,
.woocommerce-page div.product div.images,
.tp-product-single div.product div.images{
	width:100% !important; float:none !important; margin:0 !important;
}
.woocommerce div.product div.summary,
.woocommerce-page div.product div.summary,
.tp-product-single div.product div.summary{
	width:100% !important; float:none !important; margin:0 !important; clear:none !important;
}
/* Now lay out our 2-col grid */
.single-product-grid{
	display:grid !important;
	grid-template-columns:1fr 1fr !important;
	gap:48px !important;
	align-items:start !important;
	margin-bottom:30px !important;
	clear:both !important;
}
.single-product-grid::before,
.single-product-grid::after{ display:none !important; content:none !important; }
@media (max-width:1024px){
	.single-product-grid{ grid-template-columns:1fr !important; gap:30px !important; }
}
/* Force gallery + summary to flow inside our grid cells */
.single-product-grid > .single-product-gallery,
.single-product-grid > .single-product-gallery .woocommerce-product-gallery,
.single-product-grid > .single-product-gallery div.images{
	width:100% !important; max-width:100% !important; float:none !important; margin:0 !important; padding:0 !important;
}
.single-product-grid > .single-product-summary,
.single-product-grid > .single-product-summary.summary,
.single-product-grid > .summary{
	width:100% !important; max-width:100% !important; float:none !important; margin:0 !important; padding:0 !important;
}
/* Gallery image — let it shrink to cell, never overflow */
.single-product-grid .woocommerce-product-gallery__image img,
.single-product-grid .woocommerce-product-gallery img{
	width:100% !important; height:auto !important; max-width:100% !important;
	display:block !important;
}
/* Tabs after grid — full width, clear floats */
.single-product-tabs{
	clear:both !important;
	width:100% !important;
	margin-top:40px !important;
}

/* Related/upsell — fix the vertical-text squish on related products */
.related.products,
.upsells.products{
	display:block !important;
	margin-top:60px !important;
	clear:both !important;
}
.related.products > h2,
.upsells.products > h2{
	font-size:24px; color:var(--navy); margin:0 0 24px;
	padding-bottom:12px; border-bottom:2px solid var(--orange);
	display:inline-block;
}

/* -------- 6. LOGOS GRID (max 6 cols on home) ------------------------------ */
.logos-grid{
	display:grid !important;
	grid-template-columns:repeat(6, minmax(0,1fr)) !important;
	gap:16px !important;
}
@media (max-width:1024px){
	.logos-grid{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
	.logos-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
/* Logo card — flex center, grayscale, hover color */
.logos-grid .logo-card{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	min-height:96px !important;
	padding:18px !important;
	background:#fff;
	border:1px solid #e7eaee;
	border-radius:12px;
	transition:transform .25s ease, box-shadow .25s ease;
}
.logos-grid .logo-card:hover{
	transform:translateY(-2px);
	box-shadow:0 8px 24px rgba(45,27,94,.08);
}
.logos-grid .logo-card img{
	max-width:100% !important;
	max-height:60px !important;
	width:auto !important;
	height:auto !important;
	object-fit:contain !important;
	display:block !important;
	filter:grayscale(100%);
	opacity:.75;
	transition:filter .25s ease, opacity .25s ease;
}
.logos-grid .logo-card:hover img{
	filter:grayscale(0%);
	opacity:1;
}

/* -------- 7. NEWS GRID (home: 3 cols; archive: 2 cols) -------------------- */
.tp-home .news-grid,
section .news-grid{
	display:grid !important;
	grid-template-columns:repeat(3, minmax(0,1fr)) !important;
	gap:24px !important;
}
.news-main .news-grid{
	grid-template-columns:repeat(2, minmax(0,1fr)) !important;
}
@media (max-width:1024px){
	.tp-home .news-grid,
	section .news-grid,
	.news-main .news-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; }
}
@media (max-width:640px){
	.tp-home .news-grid,
	section .news-grid,
	.news-main .news-grid{ grid-template-columns:1fr !important; }
}

/* -------- 8. CAT GRID (home: 3 cols) -------------------------------------- */
.cat-grid{
	display:grid !important;
	grid-template-columns:repeat(3, minmax(0,1fr)) !important;
	gap:24px !important;
}
@media (max-width:1024px){ .cat-grid{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
@media (max-width:640px){ .cat-grid{ grid-template-columns:1fr !important; } }

/* Cat card — make sure body text shows below the image (was being hidden) */
.cat-card{
	display:flex !important;
	flex-direction:column !important;
	background:#fff !important;
	border:1px solid #e7eaee !important;
	border-radius:12px !important;
	overflow:hidden !important;
	aspect-ratio:auto !important;
	height:auto !important;
	position:relative !important;
	color:inherit !important;
	text-decoration:none !important;
	cursor:pointer;
	transition:transform .2s, box-shadow .2s !important;
}
.cat-card::before, .cat-card::after{ display:none !important; content:none !important; }
.cat-card:hover{ transform:translateY(-4px); box-shadow:0 14px 32px rgba(45,27,94,.10); }
.cat-card .cat-card-img{
	display:block !important;
	width:100% !important;
	height:auto !important;
	aspect-ratio:4/3 !important;
	flex:0 0 auto !important;
}
.cat-card .cat-card-img.placeholder{
	display:flex !important;
	align-items:center !important;
	justify-content:center !important;
	font-size:60px !important;
	color:rgba(45,27,94,.25) !important;
}
.cat-card .cat-card-body{
	display:block !important;
	padding:18px 22px 22px !important;
	flex:1 1 auto !important;
	background:#fff !important;
	color:var(--text) !important;
	position:relative !important;
	z-index:2 !important;
	opacity:1 !important;
	visibility:visible !important;
}
.cat-card .cat-card-body h3{
	display:block !important;
	font-size:19px !important;
	color:var(--navy) !important;
	margin:0 0 8px !important;
	font-weight:800 !important;
	opacity:1 !important;
}
.cat-card .cat-card-body p{
	display:block !important;
	color:#5a6675 !important;
	font-size:14px !important;
	margin:0 0 10px !important;
	opacity:1 !important;
}
.cat-card .cat-link{
	display:inline-block !important;
	color:var(--orange) !important;
	font-weight:700 !important;
	font-size:14px !important;
	opacity:1 !important;
}

/* -------- 9. CTA banner — remove duplicate cog watermark, simplify -------- */
.cta-banner{
	background:linear-gradient(135deg,var(--orange) 0%,var(--orange-dark) 100%);
	color:#fff;
	padding:32px 40px;
	border-radius:14px;
	display:flex; align-items:center; justify-content:space-between;
	gap:24px; flex-wrap:wrap;
	position:relative;
	overflow:hidden;
}
.cta-banner::after{ display:none !important; } /* hide any decorative cog */
.cta-banner h3{ color:#fff; margin:0 0 6px; font-size:22px; }
.cta-banner p{ color:rgba(255,255,255,.92); margin:0; font-size:15px; }
.cta-banner .btn{
	background:#fff; color:var(--orange-dark);
	padding:14px 26px; border-radius:8px; font-weight:800;
	text-decoration:none; white-space:nowrap;
	display:inline-flex; align-items:center; gap:8px;
}
.cta-banner .btn:hover{ background:#fff5ee; }

/* -------- 10. NEWS layout sidebar split ----------------------------------- */
.news-layout{
	display:grid !important;
	grid-template-columns:1fr 320px !important;
	gap:36px !important;
	align-items:start !important;
}
@media (max-width:1024px){
	.news-layout{ grid-template-columns:1fr !important; }
}

/* -------- 11. Misc — make text-orange visible, btn-ghost spacing --------- */
.text-orange{ color:var(--orange) !important; }
.btn-ghost{
	background:transparent !important; color:#fff !important;
	border:2px solid rgba(255,255,255,.4) !important;
}
.btn-ghost:hover{ background:rgba(255,255,255,.1) !important; }

/* ============================================================================
   12. NUCLEAR — body-prefixed overrides for single product layout.
   Beats any plugin / WooCommerce stylesheet specificity.
   ========================================================================= */
body.tp-product-single .woocommerce-notices-wrapper{ width:100% !important; clear:both !important; }
body.tp-product-single div.product,
body.tp-product-single .single-product-layout{
	display:block !important;
	float:none !important;
	width:100% !important;
	max-width:none !important;
	overflow:visible !important;
}
body.tp-product-single div.product > div.images,
body.tp-product-single div.product > .woocommerce-product-gallery,
body.tp-product-single .single-product-grid > .single-product-gallery,
body.tp-product-single .single-product-grid > .single-product-gallery > *,
body.tp-product-single .single-product-gallery,
body.tp-product-single .single-product-gallery > *{
	width:100% !important;
	max-width:100% !important;
	float:none !important;
	margin:0 !important;
	box-sizing:border-box !important;
}
body.tp-product-single div.product > div.summary,
body.tp-product-single div.product > .summary,
body.tp-product-single .single-product-grid > .single-product-summary,
body.tp-product-single .single-product-grid > .summary,
body.tp-product-single .single-product-summary{
	width:100% !important;
	max-width:100% !important;
	float:none !important;
	margin:0 !important;
	clear:none !important;
	box-sizing:border-box !important;
}
body.tp-product-single .single-product-grid{
	display:grid !important;
	grid-template-columns:minmax(0,1fr) minmax(0,1fr) !important;
	gap:48px !important;
	align-items:start !important;
	width:100% !important;
	max-width:100% !important;
	float:none !important;
	clear:both !important;
	margin:0 0 30px 0 !important;
}
@media (max-width:1024px){
	body.tp-product-single .single-product-grid{
		grid-template-columns:minmax(0,1fr) !important;
		gap:30px !important;
	}
}
body.tp-product-single .single-product-tabs,
body.tp-product-single .woocommerce-tabs,
body.tp-product-single .related.products,
body.tp-product-single .upsells.products{
	clear:both !important;
	width:100% !important;
	max-width:100% !important;
	float:none !important;
	display:block !important;
	margin-top:40px !important;
}
/* WooCommerce gallery thumbnails — keep them as horizontal strip below main image */
body.tp-product-single .flex-control-thumbs{
	display:grid !important;
	grid-template-columns:repeat(4,minmax(0,1fr)) !important;
	gap:8px !important;
	margin:12px 0 0 0 !important;
	padding:0 !important;
	list-style:none !important;
}
body.tp-product-single .flex-control-thumbs li{
	width:auto !important; float:none !important; margin:0 !important;
}
body.tp-product-single .flex-control-thumbs img{
	width:100% !important; height:auto !important; display:block !important;
	border:1px solid #e7eaee; border-radius:6px;
}
body.tp-product-single .woocommerce-product-gallery__image img,
body.tp-product-single .woocommerce-product-gallery img.wp-post-image{
	width:100% !important; height:auto !important; display:block !important;
	max-width:100% !important;
	border-radius:8px;
}
/* Related products inside single page — force 4-col grid, full width */
body.tp-product-single .related.products ul.products,
body.tp-product-single .upsells.products ul.products{
	display:grid !important;
	grid-template-columns:repeat(4,minmax(0,1fr)) !important;
	gap:20px !important;
	width:100% !important;
	float:none !important;
	clear:both !important;
}
@media (max-width:1024px){
	body.tp-product-single .related.products ul.products,
	body.tp-product-single .upsells.products ul.products{
		grid-template-columns:repeat(2,minmax(0,1fr)) !important;
	}
}
@media (max-width:640px){
	body.tp-product-single .related.products ul.products,
	body.tp-product-single .upsells.products ul.products{
		grid-template-columns:minmax(0,1fr) !important;
	}
}

/* ============================================================================
   13. HEADER — logo only (no TP placeholder, no .logo-text), and fix the
       wp_nav_menu submenu (.sub-menu) showing always-on instead of on-hover.
   ========================================================================= */

/* Header custom logo — keep it simple, just the image */
.header .custom-logo-link{
	display:flex !important;
	align-items:center !important;
	flex-shrink:0 !important;
	line-height:0 !important;
}
.header .custom-logo{
	width:auto !important;
	height:60px !important;
	max-height:60px !important;
	max-width:280px !important;
	object-fit:contain !important;
	border-radius:0 !important;
	background:transparent !important;
	padding:0 !important;
	display:block !important;
}
.header .logo-fallback{
	display:flex !important;
	align-items:center !important;
	flex-shrink:0 !important;
}
.header .logo-fallback .logo-img{
	height:60px !important;
	width:auto !important;
	max-width:280px !important;
	object-fit:contain !important;
	display:block !important;
}

/* WordPress nav: .sub-menu must be hidden by default and only show on hover */
.nav .sub-menu,
.nav ul.sub-menu,
.nav li ul.sub-menu{
	position:absolute !important;
	top:100% !important;
	left:0 !important;
	background:#fff !important;
	min-width:240px !important;
	box-shadow:var(--shadow-md) !important;
	border-radius:8px !important;
	padding:8px !important;
	list-style:none !important;
	opacity:0 !important;
	visibility:hidden !important;
	transform:translateY(8px) !important;
	transition:opacity .2s ease, transform .2s ease, visibility .2s ease !important;
	border-top:3px solid var(--orange) !important;
	margin:0 !important;
	z-index:120 !important;
	display:block !important;
	pointer-events:none !important;
}
.nav li.menu-item-has-children{ position:relative !important; }
.nav li.menu-item-has-children:hover > .sub-menu,
.nav li.menu-item-has-children:focus-within > .sub-menu,
.nav li:hover > .sub-menu,
.nav li:focus-within > .sub-menu{
	opacity:1 !important;
	visibility:visible !important;
	transform:translateY(0) !important;
	pointer-events:auto !important;
}
.nav .sub-menu li{ list-style:none !important; }
.nav .sub-menu li a{
	display:block !important;
	padding:10px 14px !important;
	border-radius:4px !important;
	font-size:14px !important;
	color:var(--navy) !important;
	text-decoration:none !important;
	white-space:nowrap !important;
}
.nav .sub-menu li a:hover{
	background:var(--light) !important;
	color:var(--orange) !important;
	padding-left:18px !important;
}
.nav li.menu-item-has-children > a::after{
	content:'▾';
	margin-left:6px;
	font-size:10px;
	opacity:.6;
}