/* =========================================================
 * PCCC Thái Tuấn — main.css
 * Chỉ THÊM/OVERRIDE những gì cần (không động vào wireframe-base.css).
 * Mobile-first @media min-width.
 * ========================================================= */

/* FIX: Ẩn 2 đường gạch chéo X của .ph.img khi có ảnh thật bên trong
   (CSS wireframe gốc luôn vẽ X làm placeholder, nhưng khi upload ảnh
   thật thì X không cần nữa, gây cảm giác "ảnh bị gạch") */
.ph.img:has(img),
.ph.img:has(picture),
.ph.img:has(svg) {
	background: transparent !important;
	color: transparent !important;
}
.ph.img:has(img)::before,
.ph.img:has(img)::after,
.ph.img:has(picture)::before,
.ph.img:has(picture)::after,
.ph.img:has(svg)::before,
.ph.img:has(svg)::after {
	display: none !important;
	background: none !important;
}
/* Ảnh fill toàn bộ ô .ph.img */
.ph.img img,
.ph.img picture,
.ph.img picture > img,
.ph.img .wp-post-image,
.ph.img a img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* ------- Reset & body ------- */
html, body { margin:0; padding:0; }
body.pccc-body {
	background:#f0eee9;
	color:var(--ink, #0B0B0B);
	font-family:'Inter', system-ui, sans-serif;
	-webkit-font-smoothing:antialiased;
	font-size:14px;
	line-height:1.45;
}
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; }

/* WordPress admin bar không che sticky bar */
body.admin-bar .pccc-stickybar { bottom:0; }

/* Padding bottom toàn site để sticky bar không che nội dung (mobile) */
body.pccc-body { padding-bottom:64px; }

/* ========================================================
 *  HEADER — show/hide theo viewport + STICKY khi cuộn
 * ======================================================== */
.pccc-d-head { display:none; }
.m-head {
	display:flex !important;
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:900;
	background:#fff;
	gap:10px;
	padding:10px 12px;
	height:60px;
	box-shadow:0 1px 0 rgba(0,0,0,.04);
}
/* Đẩy nội dung xuống dưới header fixed */
body.pccc-body { padding-top:60px; }

/* Khi có WP admin bar */
body.admin-bar .m-head { top:46px; }
@media screen and (min-width:783px) {
	body.admin-bar .m-head { top:32px; }
}

@media (min-width: 1024px) {
	.pccc-d-head {
		display:flex !important;
		position:fixed;
		top:0; left:0; right:0;
		z-index:900;
		background:#fff;
		box-shadow:0 1px 0 rgba(0,0,0,.04);
	}
	body.admin-bar .pccc-d-head { top:32px; }
	body.pccc-body { padding-top:78px; }
	.m-head { display:none !important; }
	body.pccc-body { padding-bottom:0; }
	.pccc-stickybar { display:none; }
	.pccc-m-foot { display:none; }
	.pccc-d-foot { display:block; }
}

@media (max-width: 1023.98px) {
	.pccc-d-foot { display:none; }
	.pccc-m-foot { display:flex; }
}

/* ========================================================
 *  MOBILE SEARCH BAR (pill rounded full width)
 * ======================================================== */
.m-head .m-searchbar {
	flex:1 1 auto;
	min-width:0;
	height:40px;
	display:flex; align-items:center;
	background:#fff;
	border:1.5px solid #d8d4cb;
	border-radius:999px;
	padding:0 4px 0 14px;
	color:#9a9690;
	cursor:pointer;
	font-family:inherit; font-size:13px;
	text-align:left;
	overflow:hidden;
	transition:border-color .15s;
}
.m-head .m-searchbar:hover { border-color:var(--ink); }
.m-head .m-searchbar__text {
	flex:1; min-width:0;
	white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-head .m-searchbar__btn {
	flex:0 0 auto;
	width:34px; height:34px;
	background:var(--red); color:#fff;
	border-radius:999px;
	display:flex; align-items:center; justify-content:center;
	margin-left:6px;
}
.m-head .m-searchbar:hover .m-searchbar__btn { background:#9E1229; }

/* Mobile head: shrink ham button to fit */
.m-head .ham { flex:0 0 auto; width:40px; height:40px; }
.m-head .ham span { width:16px; }

/* Logo mobile (logo-sq override để giữ wireframe style + a-tag) */
.m-head .logo-sq {
	background:var(--red); color:#fff;
	font-weight:900; font-size:14px;
	padding:8px 10px; line-height:1; letter-spacing:-.02em;
	display:flex; flex-direction:column; align-items:center; gap:2px;
	text-decoration:none;
}
.m-head .logo-sq .sub { font-size:6px; letter-spacing:.08em; opacity:.95; font-weight:800; }

/* ========================================================
 *  DESKTOP HEADER — bố cục giữa logo / menu / search / hotline
 * ======================================================== */
.pccc-d-head {
	gap:24px;
	padding:18px 32px;
}
.pccc-d-head .logo-mini { gap:12px; text-decoration:none; }
.pccc-d-head .logo-mini .mark { font-size:20px; padding:6px 9px; }
.pccc-d-head .logo-mini .tt { font-size:13px; line-height:.95; }
.pccc-d-head nav ul { display:flex; gap:24px; list-style:none; margin:0; padding:0; }
.pccc-d-head nav a {
	font-family:'JetBrains Mono', monospace;
	font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#333;
	padding:6px 0; border-bottom:2px solid transparent;
}
.pccc-d-head nav .current-menu-item > a,
.pccc-d-head nav a.active { color:var(--red); font-weight:700; border-bottom-color:var(--red); }
.pccc-d-head .pccc-d-search { flex:1 1 auto; max-width:360px; }
.pccc-d-head .cta { display:flex; align-items:center; gap:14px; }
.pccc-d-head .hotline {
	color:var(--red); font-weight:700;
	font-family:'JetBrains Mono', monospace;
	font-size:13px; letter-spacing:.06em;
	text-decoration:none;
}

/* ========================================================
 *  SEARCH BAR (pill rounded, button đỏ)
 * ======================================================== */
.pccc-search-form {
	position:relative;
	display:flex; align-items:center;
	background:#fff;
	border:1.5px solid #d8d4cb;
	border-radius:999px;
	overflow:hidden;
	height:44px;
	box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.pccc-search-input {
	flex:1; min-width:0;
	border:0; outline:0; background:transparent;
	padding:0 16px;
	font-family:inherit; font-size:14px; color:var(--ink);
	height:100%;
}
.pccc-search-input::placeholder { color:#9a9690; }
.pccc-search-btn {
	flex:0 0 auto;
	height:100%; padding:0 18px;
	background:var(--red); color:#fff;
	border:0; border-radius:999px;
	display:flex; align-items:center; justify-content:center;
	margin:3px;
	transition:background .15s;
}
.pccc-search-btn:hover { background:#9E1229; }

/* Autocomplete dropdown (desktop) */
.pccc-autocomplete {
	position:absolute; top:calc(100% + 6px); left:0; right:0;
	background:#fff; border:1.5px solid var(--ink);
	max-height:420px; overflow:auto;
	z-index:1000;
	box-shadow:0 8px 24px rgba(0,0,0,.12);
}
.pccc-autocomplete[hidden] { display:none; }
.pccc-autocomplete a.ac-item {
	display:grid; grid-template-columns:48px 1fr; gap:12px;
	padding:10px 12px; border-bottom:1px solid #eee;
	color:var(--ink); text-decoration:none;
	transition:background .12s;
}
.pccc-autocomplete a.ac-item:hover { background:var(--bone, #F5F2EC); }
.pccc-autocomplete a.ac-item:last-child { border-bottom:0; }
.pccc-autocomplete .ac-thumb {
	width:48px; height:48px; background:var(--box, #EAE7DF);
	border:1.5px solid var(--ink);
	background-size:cover; background-position:center;
}
.pccc-autocomplete .ac-info { display:flex; flex-direction:column; gap:2px; min-width:0; }
.pccc-autocomplete .ac-title { font-weight:700; font-size:13px; line-height:1.3; }
.pccc-autocomplete .ac-meta {
	font-family:'JetBrains Mono', monospace;
	font-size:10px; letter-spacing:.1em; color:#666;
}
.pccc-autocomplete mark { background:#ffe9b3; padding:0 2px; color:var(--ink); }
.pccc-autocomplete .ac-empty {
	padding:20px; text-align:center; color:#888;
	font-family:'JetBrains Mono', monospace; font-size:11px; letter-spacing:.12em;
}

/* ========================================================
 *  MOBILE MENU OVERLAY
 * ======================================================== */
.pccc-menu-overlay {
	position:fixed; inset:0;
	z-index:1100;
	background:rgba(0,0,0,.5);
	overflow-y:auto;
	-webkit-overflow-scrolling:touch;
	animation:pccc-fade .18s ease-out;
}
.pccc-menu-overlay[hidden] { display:none; }
.pccc-menu-overlay .m-menu {
	min-height:100%;
}
.pccc-menu-overlay .m-menu li a { color:inherit; text-decoration:none; }

/* ========================================================
 *  SEARCH OVERLAY (mobile full-screen)
 * ======================================================== */
.pccc-search-overlay {
	position:fixed; inset:0;
	z-index:1200;
	background:#fff;
	display:flex; flex-direction:column;
	animation:pccc-slide-down .2s ease-out;
}
.pccc-search-overlay[hidden] { display:none; }
.pccc-search-overlay__head {
	display:flex; align-items:center; gap:8px;
	padding:14px 16px;
	border-bottom:1.5px solid var(--ink);
	background:#fff;
}
.pccc-search-form-big {
	flex:1; display:flex; align-items:center;
	border:1.5px solid #d8d4cb; border-radius:999px;
	background:#fff; height:48px; overflow:hidden;
}
.pccc-search-form-big input {
	flex:1; min-width:0;
	border:0; outline:0; background:transparent;
	padding:0 18px; font-size:15px; color:var(--ink);
	height:100%;
}
.pccc-search-form-big input::placeholder { color:#9a9690; }
.pccc-search-form-big button {
	flex:0 0 auto;
	height:42px; padding:0 18px; margin:3px;
	background:var(--red); color:#fff;
	border:0; border-radius:999px;
	display:flex; align-items:center; justify-content:center;
}
.pccc-search-close {
	width:44px; height:44px;
	background:transparent; border:0;
	font-size:20px; color:var(--ink);
}
.pccc-search-results { flex:1; overflow:auto; padding:8px 0; }
.pccc-search-hint {
	padding:24px 16px; color:#888; text-align:center;
	font-size:13px; line-height:1.6;
}
.pccc-search-results a.ac-item {
	display:grid; grid-template-columns:60px 1fr; gap:12px;
	padding:14px 16px; border-bottom:1px solid #eee;
	color:var(--ink); text-decoration:none;
}
.pccc-search-results .ac-thumb {
	width:60px; height:60px; background:var(--box, #EAE7DF);
	border:1.5px solid var(--ink);
	background-size:cover; background-position:center;
}
.pccc-search-results .ac-title { font-weight:800; font-size:14px; line-height:1.3; }
.pccc-search-results .ac-meta {
	font-family:'JetBrains Mono', monospace;
	font-size:10px; letter-spacing:.1em; color:#666; margin-top:3px;
}
.pccc-search-results mark { background:#ffe9b3; padding:0 2px; color:var(--ink); }

/* ========================================================
 *  STICKY BOTTOM BAR — đảm bảo hiện đúng + safe-area
 *  (override .m-stickybar wireframe vì wireframe dùng position:absolute trong artboard)
 * ======================================================== */
.pccc-stickybar.m-stickybar {
	position:fixed !important;
	left:0; right:0; bottom:0;
	z-index:1000;
	padding-bottom:env(safe-area-inset-bottom);
}
.pccc-stickybar .bar-btn { text-decoration:none; }
.pccc-stickybar svg { display:block; }

/* ========================================================
 *  WP CORE OVERRIDES
 * ======================================================== */
/* Mark từ search highlight (toàn site) */
mark { background:#ffe9b3; color:inherit; padding:0 2px; }

/* Wrapper cho main page width (desktop) */
@media (min-width: 1024px) {
	.pccc-main { max-width:1280px; margin:0 auto; padding:0 32px; }
}

/* Animations */
@keyframes pccc-fade { from { opacity:0 } to { opacity:1 } }
@keyframes pccc-slide-down { from { transform:translateY(-12px); opacity:0 } to { transform:translateY(0); opacity:1 } }

/* Lock scroll khi overlay mở */
body.pccc-no-scroll { overflow:hidden; }

/* ========================================================
 *  COMPONENT FIXES — links bên trong card phải kế thừa style
 * ======================================================== */
.m-cats .cat,
.m-prod,
.m-grid2 .card,
.m-news-item h4 a,
.m-feature {
	color:inherit; text-decoration:none;
}
a.m-news-item, a.m-prod, a.m-cat, .m-cats a.cat {
	color:inherit; text-decoration:none;
}

/* Wireframe gốc dùng `<a>` trên `.row` contact list — đảm bảo kế thừa */
.m-contact-list a.row { color:inherit; text-decoration:none; }
.m-contact-list a.row:hover { background:var(--bone, #F5F2EC); }

/* Filter chips desktop khi click chuyển link */
.m-filterbar .chip { cursor:pointer; }

/* Image trong placeholder (ảnh thật) — fill khung */
.ph.img img { width:100%; height:100%; object-fit:cover; display:block; }
.ph img      { width:100%; height:100%; object-fit:cover; display:block; }

/* Hide WP admin bar offset shouldn't affect sticky on mobile */
@media screen and (max-width:782px) {
	body.admin-bar { padding-top:46px; }
}
@media screen and (min-width:783px) {
	body.admin-bar { padding-top:32px; }
}

/* Featured news image fill */
.m-feature { background-size:cover; background-position:center; text-decoration:none; color:inherit; }
.m-feature .overlay h3 { color:#fff; margin:4px 0 0; }

/* Make sure logo-sq link looks right */
a.logo-sq { text-decoration:none; }

/* Fix tab body hidden attribute */
.m-tabbody[hidden] { display:none; }

/* Form submit button (when fallback HTML form) */
.m-form button.btn.solid { border:0; cursor:pointer; }

/* Footer mobile hotline anchor (giữ style của wireframe khi là link) */
.m-foot a.hotline { color:inherit; text-decoration:none; }
.m-foot a.hotline:hover { background:#9E1229; }

/* Search trigger mobile — icon button rõ ràng */
.m-head .m-search-trigger svg { display:block; }
.m-head .m-search-trigger:focus-visible { outline:2px solid var(--red); outline-offset:2px; }
.m-head .ham:focus-visible { outline:2px solid var(--red); outline-offset:2px; }

/* Hamburger menu items khi dùng walker WP — link inside li */
.m-menu li a { display:flex; flex:1; color:inherit; text-decoration:none; }

/* Map iframe responsive */
.m-map iframe { width:100%; height:100%; border:0; }

/* ========================================================
 *  FIX: spec table — đổi sang 1 cột, mỗi spec 1 dòng riêng
 *  (wireframe gốc là 2 cột nhưng chỉ phù hợp khi tên+giá trị siêu ngắn,
 *   thực tế thông số dài bị dính chữ → fix mobile-friendly)
 * ======================================================== */
.m-spec {
	display:flex !important;
	flex-direction:column;
	gap:0;
}
.m-spec .r {
	display:flex;
	justify-content:space-between;
	gap:16px;
	padding:12px 0;
	border-bottom:1px solid #eee;
	font-size:13.5px;
}
.m-spec .r:last-child { border-bottom:0; }
.m-spec .r .k { color:#666; flex:0 0 auto; }
.m-spec .r .v { font-weight:700; text-align:right; }