/* ==========================================================================
   0. VARIABLES & RESET
   ========================================================================== */
:root{
	--combo-black:#111111;
	--combo-cream:#faf6ef;
	--combo-orange:#eda23d;
	--combo-orange-dark:#d98f2c;
	--combo-text:#1c1c1c;
	--combo-text-muted:#666666;
	--combo-white:#ffffff;
	--combo-border:#e7e2d8;
	--combo-radius:2px;
	--combo-container:1320px;
	--combo-font: 'Be Vietnam Pro', 'Segoe UI', Arial, sans-serif;
}

*,*::before,*::after{ box-sizing:border-box; }
body{
	margin:0;
	font-family:var(--combo-font);
	color:var(--combo-text);
	background:var(--combo-cream);
	line-height:1.5;
}
a{ text-decoration:none; color:inherit; }
ul{ list-style:none; margin:0; padding:0; }
img{ max-width:100%; display:block; }
h1,h2,h3,h4{ margin:0 0 .5em; font-weight:800; }
button{ font-family:inherit; cursor:pointer; }

.combo-container{ max-width:var(--combo-container); margin:0 auto; padding:0 24px; }
.combo-container--narrow{ max-width:1100px; margin:40px auto; padding:0 24px; }

.combo-btn{
	display:inline-block;
	padding:14px 30px;
	font-weight:700;
	font-size:13px;
	letter-spacing:.03em;
	text-transform:uppercase;
	border-radius:var(--combo-radius);
	transition:.2s;
}
.combo-btn--white{ background:var(--combo-white); color:var(--combo-black); }
.combo-btn--white:hover{ background:var(--combo-orange); color:var(--combo-white); }
.combo-btn--dark{ background:var(--combo-black); color:var(--combo-white); }
.combo-btn--dark:hover{ background:var(--combo-orange); }
.combo-btn--outline{ background:transparent; border:1px solid var(--combo-black); color:var(--combo-black); }

/* ==========================================================================
   1. HEADER / MENU
   ========================================================================== */
.combo-header{
	display:flex;
	align-items:center;
	gap:30px;
	background:var(--combo-white);
	padding:14px 40px;
	border-bottom:1px solid var(--combo-border);
}
.combo-header__logo{ display:flex; align-items:center; flex-shrink:0; }
.combo-header__logo img{ max-height:48px; width:auto; }
.combo-header__logo-text{ font-weight:800; font-size:20px; letter-spacing:.05em; color:var(--combo-text); }

.combo-header__search{
	display:flex;
	align-items:center;
	background:#efeeec;
	border-radius:6px;
	overflow:hidden;
	width:260px;
	flex-shrink:0;
}
.combo-header__search input{
	flex:1; border:0; background:transparent; padding:10px 14px; font-size:14px; outline:none;
}
.combo-header__search button{
	border:0; background:transparent; padding:0 14px; display:flex; align-items:center; color:var(--combo-orange);
}

.combo-header__nav{ flex:1; display:flex; align-items:stretch; justify-content:flex-end; background:transparent; }

.combo-menu{ display:flex; align-items:stretch; gap:6px; }
.combo-menu > li{ position:relative; display:flex; align-items:center; }
.combo-menu > li > a{
	display:flex; align-items:center; gap:6px;
	padding:0 18px;
	color:var(--combo-text);
	font-size:14px;
	font-weight:700;
	letter-spacing:.02em;
	text-transform:uppercase;
	height:100%;
}
.combo-menu > li:hover > a,
.combo-menu > li.current-menu-item > a{ color:var(--combo-orange); }
.combo-menu .menu-arrow{ display:inline-flex; opacity:.8; }

/* dropdown cấp 1 */
.combo-menu .sub-menu.level-1{
	position:absolute; top:100%; left:0; min-width:260px;
	background:var(--combo-white);
	box-shadow:0 12px 30px rgba(0,0,0,.15);
	padding:10px 0;
	display:none;
	z-index:50;
}
.combo-menu > li:hover > .sub-menu.level-1{ display:block; }
.combo-menu .sub-menu.level-1 > li{ position:relative; }
.combo-menu .sub-menu.level-1 > li > a{
	display:flex; align-items:center; justify-content:space-between;
	padding:12px 24px;
	color:var(--combo-text);
	font-size:14px;
	font-weight:500;
	text-transform:none;
}
.combo-menu .sub-menu.level-1 > li:hover > a{ color:var(--combo-orange); background:#faf9f6; }

/* dropdown cấp 2 (flyout ngang) */
.combo-menu .sub-menu.level-2{
	position:absolute; top:0; left:100%; min-width:220px;
	background:var(--combo-white);
	box-shadow:0 12px 30px rgba(0,0,0,.15);
	padding:10px 0;
	display:none;
}
.combo-menu .sub-menu.level-1 > li:hover > .sub-menu.level-2{ display:block; }
.combo-menu .sub-menu.level-2.open-left{ left:auto; right:100%; }
.combo-menu .sub-menu.level-2 > li > a{
	display:block; padding:12px 24px; font-size:14px; color:var(--combo-text); text-transform:none;
	white-space:nowrap;
}
.combo-menu .sub-menu.level-2 > li:hover > a{ color:var(--combo-orange); background:#faf9f6; }

.combo-header__burger{ display:none; background:none; border:0; padding:0 20px; }
.combo-header__burger span{ display:block; width:24px; height:2px; background:var(--combo-text); margin:5px 0; }

/* ==========================================================================
   2. HERO / BANNER SLIDER
   ========================================================================== */
.combo-hero{ position:relative; overflow:hidden; }
.combo-hero__slider{ position:relative; height:640px; }
.combo-hero__slide{
	position:absolute; inset:0;
	background-size:cover; background-position:center;
	opacity:0; visibility:hidden; transition:opacity .6s ease;
}
.combo-hero__slide.is-active{ opacity:1; visibility:visible; }
.combo-hero__overlay{ position:absolute; inset:0; background:linear-gradient(90deg, rgba(0,0,0,.55) 0%, rgba(0,0,0,.15) 60%); }
.combo-hero__content{ position:relative; z-index:2; max-width:900px; padding:0 80px; height:100%; display:flex; flex-direction:column; justify-content:center; }
.combo-hero__content h1{
	color:var(--combo-white);
	font-size:56px;
	line-height:1.15;
	font-weight:800;
	white-space:pre-line;
	margin-bottom:30px;
}
.combo-hero__social{
	position:absolute; left:24px; top:50%; transform:translateY(-50%);
	z-index:3; display:flex; flex-direction:column; align-items:center; gap:18px;
}
.combo-hero__social a{ color:#fff; opacity:.8; }
.combo-hero__social a:hover{ opacity:1; color:var(--combo-orange); }
.combo-hero__share-label{ writing-mode:vertical-rl; color:#fff; font-size:11px; letter-spacing:.15em; margin-top:10px; }

.combo-hero__dots{ position:absolute; right:40px; bottom:24px; display:flex; gap:8px; z-index:3; }

/* ==========================================================================
   3. CTA BAR
   ========================================================================== */
.combo-cta-bar{
	background:var(--combo-orange);
	display:flex; align-items:center; justify-content:space-between; gap:24px;
	padding:36px 60px;
	flex-wrap:wrap;
}
.combo-cta-bar__label{ display:block; color:#fff; font-size:14px; margin-bottom:8px; }
.combo-cta-bar__text h3{ color:#fff; font-size:26px; max-width:640px; margin:0; }

/* ==========================================================================
   4. SECTION HEADING DÙNG CHUNG
   ========================================================================== */
.combo-section-heading{ text-align:center; padding:70px 24px 40px; }
.combo-section-heading__label{
	display:block; color:var(--combo-text-muted); letter-spacing:.15em; font-size:13px; font-weight:700; margin-bottom:12px;
}
.combo-section-heading h2{ font-size:42px; margin:0; }
.combo-section-heading h2 strong{ text-decoration:underline; text-decoration-color:var(--combo-orange); text-decoration-thickness:4px; text-underline-offset:8px; }

/* ==========================================================================
   5. PRODUCT GRID (COMBO / CONCEPT)
   ========================================================================== */
.combo-product-section{ max-width:var(--combo-container); margin:0 auto; padding:0 24px 60px; }
.combo-product-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:28px; }
.combo-product-grid--3col{ grid-template-columns:repeat(3,1fr); }

.combo-product-card{ display:block; color:inherit; }
.combo-product-card__image{ position:relative; border-radius:var(--combo-radius); overflow:hidden; aspect-ratio:4/3; background:#eee; }
.combo-product-card__image img{ width:100%; height:100%; object-fit:cover; }
.combo-badge-sale{
	position:absolute; top:14px; right:14px;
	background:var(--combo-orange); color:#fff; font-size:12px; font-weight:700;
	padding:6px 12px; border-radius:3px;
}
.combo-product-card__cat{ display:block; color:var(--combo-orange); font-size:14px; margin:16px 0 6px; }
.combo-product-card__title{ font-size:19px; font-weight:700; margin:0 0 8px; }
.combo-product-card__price{ font-size:15px; }
.combo-product-card__price del{ color:#999; margin-right:8px; }
.combo-product-card__price ins{ text-decoration:underline; font-weight:700; }
.combo-price-row--second{ display:block; margin-top:4px; }

/* ==========================================================================
   6. SHOP LAYOUT (archive + taxonomy sản phẩm)
   ========================================================================== */
.combo-shop-layout{ display:grid; grid-template-columns:1fr 340px; gap:50px; padding:40px 24px 80px; }
.combo-archive__title{ font-size:32px; margin:16px 0 4px; }
.combo-archive__count{ color:var(--combo-text-muted); margin-bottom:24px; }
.combo-breadcrumb, nav.woocommerce-breadcrumb{ font-size:13px; color:var(--combo-text-muted); padding-top:20px; }
.combo-breadcrumb a, nav.woocommerce-breadcrumb a{ color:var(--combo-text-muted); }

.combo-widget{ background:#fff; border:1px solid var(--combo-border); border-radius:var(--combo-radius); padding:24px; margin-bottom:24px; }
.combo-widget .widget-title{ font-size:18px; margin-bottom:16px; }
.combo-radio{ display:flex; align-items:center; gap:10px; margin-bottom:14px; cursor:pointer; font-size:15px; }
.combo-radio__dot{ width:18px; height:18px; border-radius:50%; border:2px solid #ccc; display:inline-block; }
.combo-radio__dot[data-color="go"]{ background:#b98a4f; border-color:#b98a4f; }
.combo-radio__dot[data-color="den"]{ background:#111; border-color:#111; }
.combo-radio__dot[data-color="trang"]{ background:#fff; }

.combo-search-form{ display:flex; }
.combo-search-form input{ flex:1; border:1px solid var(--combo-border); padding:12px 14px; border-radius:3px 0 0 3px; }
.combo-search-form button{ background:var(--combo-orange); color:#fff; border:0; padding:0 20px; border-radius:0 3px 3px 0; font-weight:700; }

.combo-widget--categories ul li{ border-bottom:1px solid var(--combo-border); }
.combo-widget--categories ul li a{ display:block; padding:12px 0; font-size:15px; }
.combo-widget--categories ul li a:hover{ color:var(--combo-orange); }

/* ==========================================================================
   7. SINGLE PRODUCT
   ========================================================================== */
.combo-single-product__top{ display:grid; grid-template-columns:1.2fr 1fr; gap:60px; padding:20px 0 40px; }
.combo-single-product__gallery img{ border-radius:var(--combo-radius); }
.combo-single-product__title{ font-size:32px; }
.combo-single-product__price{ font-size:24px; font-weight:700; margin-bottom:20px; }
.combo-single-product__price del{ color:#999; font-size:18px; margin-right:10px; }
.combo-single-product__bottom{ display:grid; grid-template-columns:1fr 380px; gap:60px; padding-bottom:80px; }
.combo-single-product__tabs .wc-tabs{ display:flex; gap:30px; border-bottom:2px solid var(--combo-border); padding:0; margin-bottom:24px; }
.combo-single-product__tabs .wc-tabs li{ list-style:none; }
.combo-single-product__tabs .wc-tabs li a{ display:inline-block; padding:12px 4px; font-weight:700; color:var(--combo-text-muted); border-bottom:3px solid transparent; }
.combo-single-product__tabs .wc-tabs li.active a{ color:var(--combo-text); border-color:var(--combo-orange); }
.combo-related-grid{ display:grid; grid-template-columns:1fr; gap:20px; }
.combo-related-grid .combo-product-card__title{ font-size:15px; }

/* ==========================================================================
   8. DỰ ÁN / PORTFOLIO SECTION
   ========================================================================== */
.combo-project-section{ padding:70px 0 100px; }
.combo-project-section__inner{ max-width:var(--combo-container); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:320px 1fr; gap:50px; }
.combo-project-filter{ border-left:2px solid var(--combo-black); padding-left:24px; }
.combo-project-filter .combo-section-heading__label{ padding:0; text-align:left; display:block; margin-bottom:8px; }
.combo-project-filter h2{ font-size:34px; margin-bottom:30px; }
.combo-project-filter__list li{ padding:10px 0; color:var(--combo-text-muted); cursor:pointer; font-size:15px; }
.combo-project-filter__list li.active,
.combo-project-filter__list li:hover{ color:var(--combo-black); font-weight:700; }
.combo-project-filter__list sup{ margin-left:4px; }
.combo-project-filter__nav{ display:flex; gap:12px; margin-top:30px; }

.combo-project-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:2px; }
.combo-project-card{
	position:relative; display:block; aspect-ratio:4/3;
	background-size:cover; background-position:center;
	color:#fff;
}
.combo-project-card::after{ content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(0,0,0,.75) 0%, rgba(0,0,0,0) 45%); }
.combo-project-card__plus{
	position:absolute; top:20px; right:20px; z-index:2;
	width:40px; height:40px; background:#fff; color:var(--combo-orange);
	display:flex; align-items:center; justify-content:center; font-size:22px; font-weight:300;
}
.combo-project-card__overlay{ position:absolute; left:24px; bottom:20px; z-index:2; }
.combo-project-card__label{ font-size:12px; letter-spacing:.1em; text-transform:uppercase; border-bottom:2px solid var(--combo-orange); padding-bottom:6px; display:inline-block; }
.combo-project-card__overlay h3{ font-size:20px; margin:8px 0 0; }
.combo-project-card[hidden]{ display:none; }

/* ==========================================================================
   9. BLOG / KINH NGHIỆM
   ========================================================================== */
.combo-blog-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:24px; }
.combo-blog-card__image{ aspect-ratio:4/3; overflow:hidden; border-radius:var(--combo-radius); margin-bottom:14px; }
.combo-blog-card__image img{ width:100%; height:100%; object-fit:cover; }

/* ==========================================================================
   9b. BLOG SECTION "TIN TỨC MỚI NHẤT" (trang chủ)
   ========================================================================== */
.combo-blog-section{ max-width:var(--combo-container); margin:0 auto; padding:0 24px 80px; }
.combo-blog-news-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:28px; }
.combo-blog-news-card{ display:flex; flex-direction:column; }
.combo-blog-news-card__image{ display:block; aspect-ratio:4/3; overflow:hidden; border-radius:var(--combo-radius); margin-bottom:20px; }
.combo-blog-news-card__image img{ width:100%; height:100%; object-fit:cover; transition:.3s; }
.combo-blog-news-card:hover .combo-blog-news-card__image img{ transform:scale(1.05); }
.combo-blog-news-card__author{ display:flex; align-items:center; gap:8px; color:var(--combo-text-muted); font-size:14px; margin-bottom:12px; }
.combo-blog-news-card__author .dashicons{ background:#f3ede1; color:var(--combo-orange); border-radius:50%; padding:4px; width:26px; height:26px; font-size:18px; }
.combo-blog-news-card__body h3{ font-size:20px; margin:0 0 12px; }
.combo-blog-news-card__body h3 a:hover{ color:var(--combo-orange); }
.combo-blog-news-card__body p{ color:var(--combo-text-muted); font-size:15px; margin:0 0 18px; }
.combo-blog-news-card__more{ display:flex; align-items:center; justify-content:space-between; padding-top:16px; border-top:1px solid var(--combo-border); font-weight:700; font-size:13px; letter-spacing:.05em; }
.combo-blog-news-card__more:hover{ color:var(--combo-orange); }
.combo-blog-news-card__more span{ transition:.2s; }
.combo-blog-news-card__more:hover span{ transform:translateX(4px); }

@media (max-width: 782px){
	.combo-blog-news-grid{ grid-template-columns:1fr; }
}

/* ==========================================================================
   9c. CONTACT FORM 7 - style đồng bộ giao diện site
   ========================================================================== */
.wpcf7-form{ max-width:640px; }
.wpcf7-form p{ margin:0 0 20px; }
.wpcf7-form label{ display:block; font-weight:700; font-size:14px; margin-bottom:8px; color:var(--combo-text); }
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form select,
.wpcf7-form textarea{
	width:100%;
	padding:13px 16px;
	border:1px solid var(--combo-border);
	border-radius:6px;
	font-family:var(--combo-font);
	font-size:15px;
	color:var(--combo-text);
	background:#fff;
	transition:.2s;
}
.wpcf7-form textarea{ min-height:140px; resize:vertical; }
.wpcf7-form input:focus,
.wpcf7-form select:focus,
.wpcf7-form textarea:focus{
	outline:none;
	border-color:var(--combo-orange);
	box-shadow:0 0 0 3px rgba(237,162,61,.15);
}
.wpcf7-form input[type="submit"]{
	background:var(--combo-black);
	color:#fff;
	border:0;
	padding:14px 36px;
	font-weight:700;
	font-size:13px;
	letter-spacing:.03em;
	text-transform:uppercase;
	border-radius:var(--combo-radius);
	cursor:pointer;
	transition:.2s;
}
.wpcf7-form input[type="submit"]:hover{ background:var(--combo-orange); }
.wpcf7-form input[type="submit"]:disabled{ opacity:.6; cursor:not-allowed; }
.wpcf7-spinner{ margin-left:12px; }
.wpcf7-not-valid-tip{ color:#e0432c; font-size:13px; margin-top:6px; display:block; }
.wpcf7-not-valid{ border-color:#e0432c !important; }
.wpcf7 form.sent .wpcf7-response-output{ border:1px solid #4caf50; background:#f0fdf4; color:#2e7d32; }
.wpcf7 form.invalid .wpcf7-response-output,
.wpcf7 form.failed .wpcf7-response-output{ border:1px solid #e0432c; background:#fef2f0; color:#c0392b; }
.wpcf7-response-output{ padding:14px 18px; border-radius:6px; margin-top:20px !important; font-size:14px; }

/* ==========================================================================
   10. FOOTER
   ========================================================================== */
.combo-footer{ position:relative; background:#1c1c1c; color:#c9c9c9; overflow:hidden; padding:70px 0 40px; }
.combo-footer__inner{ max-width:var(--combo-container); margin:0 auto; padding:0 24px; display:grid; grid-template-columns:1.3fr 1fr 1.3fr 1.3fr; gap:40px; position:relative; z-index:2; }
.combo-footer h4{ color:#fff; font-size:20px; margin-bottom:20px; }
.combo-footer__social{ display:flex; gap:12px; margin-bottom:24px; }
.combo-footer__social a{ width:38px; height:38px; border-radius:50%; background:#2c2c2c; display:flex; align-items:center; justify-content:center; color:#fff; }
.combo-footer__hotline, .combo-footer__email{ margin:6px 0; font-weight:700; color:#fff; }
.combo-footer__policy-links{ margin-top:20px; }
.combo-footer__policy-links li{ margin-bottom:10px; }
.combo-footer__menu li{ margin-bottom:14px; }
.combo-footer__menu--spaced{ margin-top:20px; }
.combo-footer__place{ margin-bottom:20px; }
.combo-footer__place-img{ aspect-ratio:16/10; background:#333; border-radius:var(--combo-radius); margin-bottom:10px; background-size:cover; background-position:center; }
.combo-footer__place-addr{ color:#fff; margin:0 0 4px; }
.combo-footer__place-desc{ font-size:13px; color:#999; margin:0; }
.combo-footer__pattern{ position:absolute; left:-40px; bottom:-40px; width:220px; height:220px; opacity:.08; background:repeating-linear-gradient(45deg,#fff 0 2px,transparent 2px 14px); z-index:1; }

/* ==========================================================================
   11. RESPONSIVE
   ========================================================================== */
@media (max-width: 1024px){
	.combo-product-grid{ grid-template-columns:repeat(2,1fr); }
	.combo-shop-layout, .combo-project-section__inner, .combo-single-product__top, .combo-single-product__bottom{ grid-template-columns:1fr; }
	.combo-footer__inner{ grid-template-columns:1fr 1fr; }
	.combo-project-grid{ grid-template-columns:1fr; }
}
@media (max-width: 782px){
	.combo-header__search{ width:160px; }
	.combo-header__nav{ display:none; }
	.combo-header__burger{ display:block; }
	.combo-hero__content h1{ font-size:34px; }
	.combo-hero__content{ padding:0 30px; }
	.combo-product-grid{ grid-template-columns:1fr; }
	.combo-blog-grid{ grid-template-columns:1fr; }
	.combo-footer__inner{ grid-template-columns:1fr; }
}