/*
Theme Name: VietHome Theme
Theme URI: https://viethomeaz.vn/
Author: Đội phát triển phần mềm AI (Juno)
Author URI: https://viethomeaz.vn/
Description: Theme giao diện public cho nền tảng website nội thất VietHome AZ. Bảng màu: nền trắng kem ấm, nâu gỗ, vàng đồng. Responsive mobile-first, chuẩn SEO, tương thích plugin viethome-platform (shortcode, chatbot, nút liên hệ nổi do plugin chèn). Text domain: viethome-theme.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: viethome-theme
Tags: interior, business, responsive, custom-menu, featured-images, translation-ready
*/

/* ============================================================
   1. BIẾN MÀU & RESET
   ============================================================ */
:root {
	--vh-bg: #FAF8F4;
	--vh-bg-soft: #F1ECE3;
	--vh-card: #FFFFFF;
	--vh-text: #1E1C18;
	--vh-muted: #57534E;
	--vh-primary: #7C4A2D;      /* nâu gỗ */
	--vh-primary-hover: #A9713F; /* nâu gỗ sáng */
	--vh-accent: #C9A227;        /* vàng đồng */
	--vh-green: #3E5C4B;
	--vh-border: #E7E0D5;
	--vh-ok: #15803D;
	--vh-warn: #D97706;
	--vh-info: #2563EB;
	--vh-danger: #DC2626;
	--vh-radius: 10px;
	--vh-font: "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	background: var(--vh-bg);
	color: var(--vh-text);
	font-family: var(--vh-font);
	font-size: 16px;
	line-height: 1.65;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--vh-primary); text-decoration: none; }
a:hover { color: var(--vh-primary-hover); }
h1, h2, h3, h4 { line-height: 1.3; margin: 0 0 .6em; color: var(--vh-text); }
p { margin: 0 0 1em; }
.vh-container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 20px; }
.vh-section { padding: 56px 0; }
.vh-section-alt { background: var(--vh-bg-soft); }
.vh-section-title { text-align: center; font-size: 1.9rem; margin-bottom: .4em; }
.vh-section-sub { text-align: center; color: var(--vh-muted); max-width: 720px; margin: 0 auto 2em; }
.screen-reader-text {
	border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
	height: 1px; margin: -1px; overflow: hidden; padding: 0;
	position: absolute; width: 1px; word-wrap: normal !important;
}

/* ============================================================
   2. NÚT BẤM
   ============================================================ */
.vh-btn {
	display: inline-block; padding: 13px 30px; border-radius: var(--vh-radius);
	font-weight: 600; font-size: 1rem; border: 2px solid var(--vh-primary);
	background: var(--vh-primary); color: #fff; cursor: pointer;
	transition: background .2s, transform .15s;
}
.vh-btn:hover { background: var(--vh-primary-hover); border-color: var(--vh-primary-hover); color: #fff; transform: translateY(-1px); }
.vh-btn-outline { background: transparent; color: var(--vh-primary); }
.vh-btn-outline:hover { background: var(--vh-primary); color: #fff; }
.vh-btn-gold { background: var(--vh-accent); border-color: var(--vh-accent); color: #1E1C18; }
.vh-btn-gold:hover { background: #d9b43a; border-color: #d9b43a; color: #1E1C18; }

/* ============================================================
   3. HEADER (sticky)
   ============================================================ */
.vh-header {
	position: sticky; top: 0; z-index: 900;
	background: rgba(250,248,244,.97);
	border-bottom: 1px solid var(--vh-border);
	transition: box-shadow .2s;
}
.vh-header.is-scrolled { box-shadow: 0 4px 18px rgba(30,28,24,.08); }
.vh-header-inner { display: flex; align-items: center; gap: 18px; padding: 12px 0; }
.vh-brand { display: flex; align-items: center; gap: 12px; margin-right: auto; }
.vh-brand img { height: 44px; width: auto; }
.vh-brand-name { font-size: 1.25rem; font-weight: 700; color: var(--vh-text); line-height: 1.2; }
.vh-brand-tagline { font-size: .8rem; color: var(--vh-muted); display: block; }
.vh-nav ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; }
.vh-nav a { display: block; padding: 10px 14px; color: var(--vh-text); font-weight: 500; border-radius: 8px; }
.vh-nav a:hover { background: var(--vh-bg-soft); color: var(--vh-primary); }
.vh-nav .current-menu-item > a { color: var(--vh-primary); font-weight: 700; }
.vh-header .vh-btn { padding: 10px 22px; font-size: .95rem; white-space: nowrap; }
.vh-menu-toggle {
	display: none; background: none; border: 1px solid var(--vh-border);
	border-radius: 8px; padding: 8px 12px; font-size: 1.2rem; cursor: pointer; color: var(--vh-text);
}

/* ============================================================
   4. HERO
   ============================================================ */
.vh-hero { position: relative; min-height: 62vh; display: flex; align-items: center; color: #fff; overflow: hidden; background: var(--vh-text); }
.vh-hero-bg { position: absolute; inset: 0; }
.vh-hero-bg img { width: 100%; height: 100%; object-fit: cover; opacity: .85; }
.vh-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(30,28,24,.72) 0%, rgba(30,28,24,.25) 60%, rgba(30,28,24,.05) 100%); }
.vh-hero-content { position: relative; z-index: 2; max-width: 640px; padding: 70px 0; }
.vh-hero h1 { color: #fff; font-size: 2.6rem; margin-bottom: .4em; }
.vh-hero p { color: #f3ede2; font-size: 1.12rem; margin-bottom: 1.4em; }
.vh-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }

/* ============================================================
   5. TRUST BAR / THỐNG KÊ
   ============================================================ */
.vh-trust { background: var(--vh-card); border-bottom: 1px solid var(--vh-border); }
.vh-trust-inner { display: flex; gap: 30px; justify-content: center; flex-wrap: wrap; padding: 22px 0; }
.vh-trust-item { text-align: center; }
.vh-trust-num { font-size: 1.6rem; font-weight: 700; color: var(--vh-primary); }
.vh-trust-label { font-size: .88rem; color: var(--vh-muted); }

/* ============================================================
   6. LƯỚI DỊCH VỤ / DỰ ÁN / BÀI VIẾT
   ============================================================ */
.vh-grid { display: grid; gap: 24px; }
.vh-grid-3 { grid-template-columns: repeat(3, 1fr); }
.vh-grid-2 { grid-template-columns: repeat(2, 1fr); }
.vh-card {
	background: var(--vh-card); border: 1px solid var(--vh-border);
	border-radius: var(--vh-radius); overflow: hidden;
	transition: transform .18s, box-shadow .18s;
}
.vh-card:hover { transform: translateY(-3px); box-shadow: 0 12px 28px rgba(30,28,24,.10); }
.vh-card-img { aspect-ratio: 4/3; overflow: hidden; background: var(--vh-bg-soft); }
.vh-card-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.vh-card:hover .vh-card-img img { transform: scale(1.05); }
.vh-card-body { padding: 18px 20px 22px; }
.vh-card-body h3 { font-size: 1.1rem; margin-bottom: .4em; }
.vh-card-body h3 a { color: var(--vh-text); }
.vh-card-body h3 a:hover { color: var(--vh-primary); }
.vh-card-meta { font-size: .82rem; color: var(--vh-muted); margin-bottom: .6em; }
.vh-badge {
	display: inline-block; font-size: .75rem; font-weight: 600; letter-spacing: .03em;
	background: var(--vh-accent); color: #1E1C18; padding: 3px 10px; border-radius: 20px; margin-bottom: 8px;
}
.vh-card .vh-btn { margin-top: 10px; padding: 9px 20px; font-size: .9rem; }
.vh-read-more { font-weight: 600; }

/* ============================================================
   7. QUY TRÌNH 4 BƯỚC
   ============================================================ */
.vh-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; counter-reset: vh-step; }
.vh-step { background: var(--vh-card); border: 1px solid var(--vh-border); border-radius: var(--vh-radius); padding: 26px 20px; text-align: center; position: relative; }
.vh-step-num {
	width: 46px; height: 46px; border-radius: 50%; background: var(--vh-primary); color: #fff;
	font-weight: 700; font-size: 1.2rem; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 12px;
}
.vh-step h3 { font-size: 1.05rem; }
.vh-step p { font-size: .92rem; color: var(--vh-muted); margin: 0; }

/* ============================================================
   8. FORM CHUNG (form liên hệ / đặt lịch trong theme)
   ============================================================ */
.vh-form { background: var(--vh-card); border: 1px solid var(--vh-border); border-radius: var(--vh-radius); padding: 30px; }
.vh-form-row { margin-bottom: 16px; }
.vh-form-row label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .95rem; }
.vh-form-row input[type="text"],
.vh-form-row input[type="tel"],
.vh-form-row input[type="email"],
.vh-form-row input[type="date"],
.vh-form-row select,
.vh-form-row textarea {
	width: 100%; padding: 11px 14px; border: 1px solid var(--vh-border); border-radius: 8px;
	font-size: 1rem; font-family: inherit; background: #fff; color: var(--vh-text);
}
.vh-form-row input:focus, .vh-form-row select:focus, .vh-form-row textarea:focus {
	outline: none; border-color: var(--vh-primary); box-shadow: 0 0 0 3px rgba(124,74,45,.12);
}
.vh-form-note { font-size: .85rem; color: var(--vh-muted); }
.vh-form-msg { padding: 12px 16px; border-radius: 8px; margin-bottom: 16px; font-size: .95rem; }
.vh-form-msg.ok { background: #e6f4ea; color: var(--vh-ok); border: 1px solid #bfe3c9; }
.vh-form-msg.err { background: #fdecec; color: var(--vh-danger); border: 1px solid #f5c6c6; }

/* ============================================================
   9. DỰ ÁN: CHI TIẾT & LỌC
   ============================================================ */
.vh-project-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 24px 0; }
.vh-project-gallery a { display: block; border-radius: var(--vh-radius); overflow: hidden; border: 1px solid var(--vh-border); }
.vh-project-gallery img { width: 100%; height: 200px; object-fit: cover; cursor: zoom-in; }
.vh-project-gallery a:first-child { grid-column: span 3; }
.vh-project-gallery a:first-child img { height: 380px; }
.vh-filters { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 30px; align-items: end; }
.vh-filters .vh-form-row { margin: 0; min-width: 200px; }
.vh-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(20,18,15,.92); display: none; align-items: center; justify-content: center; padding: 30px; }
.vh-lightbox.open { display: flex; }
.vh-lightbox img { max-width: 92vw; max-height: 88vh; border-radius: 8px; }
.vh-lightbox-close { position: absolute; top: 18px; right: 24px; color: #fff; font-size: 2rem; background: none; border: none; cursor: pointer; }

/* ============================================================
   10. NỘI DUNG BÀI VIẾT / PHÂN TRANG / BREADCRUMB
   ============================================================ */
.vh-entry-content h2 { margin-top: 1.6em; font-size: 1.5rem; }
.vh-entry-content h3 { margin-top: 1.3em; font-size: 1.25rem; }
.vh-entry-content ul, .vh-entry-content ol { margin: 0 0 1em 1.4em; }
.vh-entry-content blockquote { border-left: 4px solid var(--vh-accent); margin: 1.4em 0; padding: .6em 1.2em; background: var(--vh-bg-soft); border-radius: 0 8px 8px 0; }
.vh-entry-content table { width: 100%; border-collapse: collapse; margin: 1.2em 0; }
.vh-entry-content th, .vh-entry-content td { border: 1px solid var(--vh-border); padding: 10px 12px; text-align: left; }
.vh-entry-content th { background: var(--vh-bg-soft); }
.vh-pagination { display: flex; gap: 8px; justify-content: center; margin: 40px 0 10px; }
.vh-pagination a, .vh-pagination span { display: inline-block; padding: 9px 16px; border: 1px solid var(--vh-border); border-radius: 8px; background: var(--vh-card); color: var(--vh-text); }
.vh-pagination .current { background: var(--vh-primary); border-color: var(--vh-primary); color: #fff; font-weight: 700; }
.vh-breadcrumb { font-size: .85rem; color: var(--vh-muted); margin-bottom: 18px; }
.vh-two-col { display: grid; grid-template-columns: 2fr 1fr; gap: 40px; }
.vh-sidebar .vh-widget { background: var(--vh-card); border: 1px solid var(--vh-border); border-radius: var(--vh-radius); padding: 22px; margin-bottom: 24px; }
.vh-sidebar .vh-widget h3 { font-size: 1.05rem; border-bottom: 2px solid var(--vh-accent); padding-bottom: 8px; }
.vh-sidebar ul { list-style: none; margin: 0; padding: 0; }
.vh-sidebar li { padding: 7px 0; border-bottom: 1px dashed var(--vh-border); font-size: .93rem; }
.vh-sidebar li:last-child { border: none; }

/* ============================================================
   11. CHI NHÁNH
   ============================================================ */
.vh-branch-group { margin-bottom: 34px; }
.vh-branch-group > h3 { font-size: 1.3rem; color: var(--vh-primary); border-bottom: 2px solid var(--vh-accent); padding-bottom: 8px; }
.vh-branch-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.vh-branch { background: var(--vh-card); border: 1px solid var(--vh-border); border-radius: var(--vh-radius); padding: 20px; }
.vh-branch h4 { margin-bottom: .3em; }
.vh-branch p { margin: 0 0 .4em; font-size: .93rem; color: var(--vh-muted); }

/* ============================================================
   12. FOOTER
   ============================================================ */
.vh-footer { background: #231f1a; color: #d9d2c5; margin-top: 60px; }
.vh-footer-inner { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 34px; padding: 54px 0 34px; }
.vh-footer h3 { color: #fff; font-size: 1.05rem; margin-bottom: 14px; }
.vh-footer a { color: #d9d2c5; }
.vh-footer a:hover { color: var(--vh-accent); }
.vh-footer ul { list-style: none; margin: 0; padding: 0; }
.vh-footer li { padding: 5px 0; font-size: .93rem; }
.vh-footer-bottom { border-top: 1px solid #3a342c; padding: 18px 0; font-size: .85rem; text-align: center; color: #a89f8f; }

/* ============================================================
   13. MOBILE-FIRST RESPONSIVE
   ============================================================ */
@media (max-width: 980px) {
	.vh-grid-3 { grid-template-columns: repeat(2, 1fr); }
	.vh-steps { grid-template-columns: repeat(2, 1fr); }
	.vh-two-col { grid-template-columns: 1fr; }
	.vh-footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 760px) {
	.vh-menu-toggle { display: inline-block; }
	.vh-nav { display: none; width: 100%; order: 4; }
	.vh-nav.open { display: block; }
	.vh-nav ul { flex-direction: column; padding: 10px 0; }
	.vh-header .vh-btn { display: none; }
	.vh-header-cta-mobile { display: block !important; margin: 10px 0 4px; text-align: center; }
	.vh-hero h1 { font-size: 1.9rem; }
	.vh-hero { min-height: 52vh; }
	.vh-grid-3, .vh-grid-2 { grid-template-columns: 1fr; }
	.vh-steps { grid-template-columns: 1fr; }
	.vh-project-gallery { grid-template-columns: repeat(2, 1fr); }
	.vh-project-gallery a:first-child { grid-column: span 2; }
	.vh-project-gallery a:first-child img { height: 240px; }
	.vh-project-gallery img { height: 150px; }
	.vh-footer-inner { grid-template-columns: 1fr; }
	.vh-branch-list { grid-template-columns: 1fr; }
	.vh-section { padding: 40px 0; }
	.vh-section-title { font-size: 1.55rem; }
}