/*
Theme Name: Căn Hộ BCONS Tam Hiệp
Theme URI: https://chungcubconstamhiep.com
Author: DonaWeb
Author URI: https://donaweb.vn
Description: Theme WordPress một trang (landing page) cho dự án căn hộ / bất động sản, mô phỏng theo cấu trúc canhobconstamhiep.com — đầy đủ các phần: Hero, Tổng quan, Vị trí, Tiện ích, Mặt bằng, Nhà mẫu, Giá bán, Công cụ tài chính, Pháp lý, Chủ đầu tư, Tiến độ, Tin tức, Đăng ký tư vấn. Toàn bộ nội dung dự án được biên tập trong inc/content-data.php và Customizer để dễ dàng tái sử dụng cho các dự án khác.
Version: 1.0.1
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: canho-landing
*/

/* ==========================================================================
   0. DESIGN TOKENS
   Signature idea: một "đường vân lá" (leaf-vein path) mảnh chạy xuyên các
   section, đại diện cho mạch xanh công viên nội khu kết nối với các mạch
   giao thông của đô thị — lặp lại như một sợi chỉ đỏ (xanh) xuyên suốt trang.
   ========================================================================== */
:root{
  --ink:#07130f;          /* nền tối chủ đạo, đồng bộ theme-color gốc */
  --forest:#0f2b22;       /* xanh rừng đậm - section tối phụ */
  --emerald:#1f6f54;      /* xanh lá - accent chính, gắn với "Central Park" */
  --emerald-light:#3f9c7c;
  --gold:#c9a227;         /* vàng đồng - accent cao cấp cho giá / CTA */
  --gold-light:#e4c766;
  --cream:#f6f4ec;        /* nền sáng chủ đạo */
  --paper:#fffdf8;
  --line:#e4ddc9;
  --ink-soft:#3a423e;
  --text-onlight:#1c211d;
  --text-onlight-soft:#5b635d;
  --text-ondark:#f3f1e8;
  --text-ondark-soft:#b9c2ba;

  --font-display:'Playfair Display', 'Be Vietnam Pro', serif;
  --font-body:'Be Vietnam Pro', 'Segoe UI', sans-serif;

  --radius-lg:28px;
  --radius-md:16px;
  --radius-sm:10px;
  --shadow-soft:0 20px 60px -20px rgba(7,19,15,0.35);
  --shadow-card:0 12px 30px -12px rgba(7,19,15,0.18);
  --container:1180px;
  --section-pad:clamp(64px,10vw,120px);
}

/* ==========================================================================
   1. RESET
   ========================================================================== */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-body);
  color:var(--text-onlight);
  background:var(--cream);
  font-size:16px;
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
ul{list-style:none;margin:0;padding:0;}
h1,h2,h3,h4,p,figure{margin:0;}
button{font-family:inherit;cursor:pointer;}
input,select,textarea{font-family:inherit;font-size:1rem;}
.container{max-width:var(--container);margin:0 auto;padding:0 24px;}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:0.01ms !important;animation-iteration-count:1 !important;transition-duration:0.01ms !important;scroll-behavior:auto !important;}
}

/* ==========================================================================
   2. TYPOGRAPHY
   ========================================================================== */
.eyebrow{
  display:inline-flex;align-items:center;gap:10px;
  font-family:var(--font-body);font-weight:600;font-size:0.78rem;
  letter-spacing:0.18em;text-transform:uppercase;color:var(--emerald);
}
.eyebrow::before{content:'';width:22px;height:1px;background:var(--gold);}
.section-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:38px;
  line-height:1.2;
  color:var(--text-onlight);
  margin-top:14px;
  max-width:720px;
}
.section-lede{
  margin-top:16px;
  max-width:640px;
  color:var(--text-onlight-soft);
  font-size:1.05rem;
}
.section-head{margin-bottom:48px;}
.on-dark .section-title{color:var(--text-ondark);}
.on-dark .section-lede{color:var(--text-ondark-soft);}
.on-dark .eyebrow{color:var(--gold-light);}
.on-dark .eyebrow::before{background:var(--emerald-light);}

/* ==========================================================================
   3. VEIN DIVIDER (signature motif)
   ========================================================================== */
.vein-divider{width:100%;height:46px;overflow:hidden;line-height:0;}
.vein-divider svg{width:100%;height:100%;display:block;}
.vein-divider.to-dark path{stroke:var(--emerald);}
.vein-divider.to-light path{stroke:var(--gold);}

/* ==========================================================================
   4. HEADER / NAV
   ========================================================================== */
.site-header{
  position:sticky;top:0;z-index:100;
  background:#fff;
  backdrop-filter:blur(10px);
  border-bottom:1px solid rgba(255,255,255,0.08);
}
.site-header .container{
  display:flex;align-items:center;justify-content:space-between;
  height:76px;
}
.brand{display:flex;align-items:center;gap:10px;color:var(--text-ondark);}
.brand{
	display:flex;
	align-items:center;
	flex-shrink:0;
	gap:10px;
	color:var(--text-ondark);
	text-decoration:none;
	max-width:240px;
}

.brand .site-logo{
	display:block;
	width:auto !important;
	height:48px !important;
	max-width:220px !important;
	object-fit:contain;
	object-position:left center;
}

.brand-name{
	font-family:var(--font-display);
	font-size:1.15rem;
	font-weight:700;
	letter-spacing:0.02em;
	line-height:1.2;
}

.brand-name span{
	color:var(--gold-light);
}
.primary-nav{display:flex;align-items:center;gap:2px;}
.primary-nav a{
  padding:10px 16px;font-size:0.92rem;font-weight:500;
  color:#000!important;border-radius:999px;transition:.2s;
}
.primary-nav a:hover,.primary-nav a.is-active{color:#000;background:var(--gold-light);}
.header-cta{display:flex;align-items:center;gap:14px;}
.header-hotline{color:var(--text-ondark);font-weight:600;font-size:0.92rem;display:none;align-items:center;gap:8px;}
.header-hotline svg{width:16px;height:16px;stroke:var(--gold-light);}
.nav-toggle{display:none;background:none;border:0;color:var(--text-ondark);width:40px;height:40px;}
.nav-toggle svg{width:24px;height:24px;}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:13px 26px;border-radius:999px;font-weight:600;font-size:0.92rem;
  border:1px solid transparent;transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn:hover{transform:translateY(-2px);}
.btn-gold{background:linear-gradient(135deg,var(--gold-light),var(--gold));color:var(--ink);box-shadow:0 12px 24px -10px rgba(201,162,39,0.6);}
.btn-outline-dark{border-color:rgba(255,255,255,0.35);color:var(--text-ondark);}
.btn-outline-dark:hover{border-color:var(--gold-light);}
.btn-line{border-color:var(--ink);color:var(--ink);}
.btn-block{width:100%;}

/* ==========================================================================
   5. HERO
   ========================================================================== */
.hero{
  position:relative;background:radial-gradient(120% 100% at 15% 0%,#12332a 0%,var(--ink) 62%);
  color:var(--text-ondark);overflow:hidden;
  padding:64px 0 0;
}
.hero .vein-bg{position:absolute;inset:0;opacity:0.5;pointer-events:none;}
.hero .vein-bg svg{width:100%;height:100%;}
.hero-address{
  display:inline-flex;align-items:center;gap:8px;
  font-size:0.82rem;color:var(--text-ondark-soft);
  border:1px solid rgba(255,255,255,0.18);padding:7px 16px;border-radius:999px;
  position:relative;z-index:1;
}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:end;padding:32px 0 0;}
.hero-title{
  font-family:var(--font-display);font-weight:700;
  font-size:55px;line-height:1.08;margin-top:22px;
}
.hero-title em{font-style:normal;color:var(--gold-light);}
.hero-desc{margin-top:22px;max-width:520px;color:var(--text-ondark-soft);font-size:1.08rem;}
.hero-actions{margin-top:32px;display:flex;flex-wrap:wrap;gap:14px;}
.hero-stats{
  position:relative;z-index:1;
  display:grid;grid-template-columns:repeat(3,1fr);
  border-top:1px solid rgba(255,255,255,0.12);margin-top:56px;
}
.hero-stats div{padding:26px 24px;border-right:1px solid rgba(255,255,255,0.12);}
.hero-stats div:last-child{border-right:none;}
.hero-stats strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--gold-light);}
.hero-stats span{font-size:0.85rem;color:var(--text-ondark-soft);}
.hero-media{position:relative;z-index:1;border-radius:var(--radius-lg) var(--radius-lg) 0 0;overflow:hidden;box-shadow:var(--shadow-soft);}
.hero-media img{height:420px;width:100%;object-fit:cover;}

/* ==========================================================================
   6. SECTION BASE
   ========================================================================== */
.section{padding:var(--section-pad) 0;}
.section.on-dark{background:var(--forest);color:var(--text-ondark);}
.section.on-ink{background:var(--ink);color:var(--text-ondark);}
.reveal{opacity:0;transform:translateY(22px);transition:opacity .7s ease, transform .7s ease;}
.reveal.is-visible{opacity:1;transform:none;}

/* Tổng quan */
.overview-grid{display:grid;grid-template-columns:1.1fr 0.9fr;gap:56px;align-items:center;}
.overview-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.overview-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:38px;}
.overview-stats div{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:20px 16px;}
.overview-stats strong{display:block;font-family:var(--font-display);font-size:1.6rem;color:var(--emerald);}
.overview-stats span{font-size:12px;color:var(--text-onlight-soft);}
.info-table{margin-top:18px;border-top:1px solid var(--line);}
.info-table div{display:flex;justify-content:space-between;gap:24px;padding:14px 0;border-bottom:1px solid var(--line);font-size:0.95rem;}
.info-table dt{color:var(--text-onlight-soft);}
.info-table dd{margin:0;font-weight:600;text-align:right;}

/* Vị trí */
.location-grid{display:grid;grid-template-columns:0.95fr 1.05fr;gap:56px;align-items:start;}
.location-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);}
.location-address{margin-top:18px;color:var(--gold-light);font-weight:600;}
.location-list{margin-top:8px;}
.location-list li{
  display:flex;gap:18px;align-items:baseline;padding:18px 0;
  border-bottom:1px solid rgba(255,255,255,0.12);
}
.location-time{font-family:var(--font-display);color:var(--gold-light);font-size:1.1rem;min-width:64px;}
.location-desc{color:var(--text-ondark-soft);}

/* Tiện ích */
.amenity-feature{display:grid;grid-template-columns:1fr 1fr;gap:0;border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);background:var(--paper);margin-bottom:40px;}
.amenity-feature img{height:100%;min-height:280px;object-fit:cover;}
.amenity-feature-text{padding:40px;align-self:center;}
.amenity-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.amenity-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px 22px;transition:transform .2s ease, box-shadow .2s ease;}
.amenity-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-card);}
.amenity-icon{width:42px;height:42px;border-radius:50%;background:var(--emerald);color:#fff;display:flex;align-items:center;justify-content:center;margin-bottom:16px;}
.amenity-icon svg{width:20px;height:20px;}
.amenity-card h3{font-family:var(--font-display);font-size:1.05rem;margin-bottom:8px;}
.amenity-card p{font-size:0.9rem;color:var(--text-onlight-soft);}

/* Mặt bằng */
.plan-tabs{display:flex;flex-wrap:wrap;gap:12px;margin-top:8px;}
.plan-tab{
  padding:12px 22px;border-radius:999px;border:1px solid var(--line);
  background:var(--paper);font-weight:600;font-size:0.9rem;color:var(--text-onlight-soft);
}
.plan-tab.is-active{background:var(--ink);border-color:var(--ink);color:var(--text-ondark);}
.plan-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-top:40px;}
.plan-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.plan-specs{margin-top:24px;display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.plan-specs div{border-top:1px solid var(--line);padding-top:10px;}
.plan-specs span{display:block;font-size:0.8rem;color:var(--text-onlight-soft);}
.plan-specs strong{font-family:var(--font-display);font-size:1.1rem;}

/* Nhà mẫu */
.showroom-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center;}
.showroom-media{border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-card);}
.showroom-list{margin-top:26px;}
.showroom-list li{display:flex;gap:14px;padding:12px 0;border-bottom:1px dashed var(--line);}
.showroom-list li::before{content:'';flex:0 0 8px;height:8px;border-radius:50%;background:var(--gold);margin-top:8px;}

/* Giá bán */
.price-highlight{
  display:flex;flex-wrap:wrap;gap:24px;align-items:baseline;justify-content:space-between;
  background:linear-gradient(120deg,var(--forest),var(--ink));
  color:var(--text-ondark);border-radius:var(--radius-lg);padding:36px 40px;margin-bottom:36px;
}
.price-highlight strong{font-family:var(--font-display);font-size:2rem;color:var(--gold-light);}
.price-table{width:100%;border-collapse:collapse;background:var(--paper);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);}
.price-table th,.price-table td{padding:16px 20px;text-align:left;border-bottom:1px solid var(--line);}
.price-table th{background:var(--ink);color:var(--text-ondark);font-size:0.82rem;text-transform:uppercase;letter-spacing:0.06em;}
.price-table tr:last-child td{border-bottom:none;}
.price-note{margin-top:16px;font-size:0.85rem;color:var(--text-onlight-soft);}
.policy-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:44px;}
.policy-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:22px 24px;font-size:0.95rem;display:flex;gap:14px;}
.policy-card svg{width:20px;height:20px;flex:0 0 20px;color:var(--emerald);margin-top:2px;}

/* Công cụ tài chính */
.finance-card{background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:40px;display:grid;grid-template-columns:1fr 1fr;gap:48px;}
.finance-field{margin-bottom:26px;}
.finance-field label{display:flex;justify-content:space-between;font-size:0.88rem;font-weight:600;color:var(--text-onlight-soft);margin-bottom:10px;}
.finance-field output{color:var(--emerald);font-family:var(--font-display);font-weight:700;}
.finance-field input[type=range]{width:100%;accent-color:var(--emerald);}
.finance-presets{display:flex;gap:8px;margin-top:8px;}
.finance-presets button{
  flex:1;padding:8px;border-radius:8px;border:1px solid var(--line);background:var(--cream);
  font-size:0.8rem;color:var(--text-onlight-soft);
}
.finance-presets button.is-active{background:var(--emerald);color:#fff;border-color:var(--emerald);}
.finance-result{background:var(--ink);color:var(--text-ondark);border-radius:var(--radius-md);padding:30px;}
.finance-result .label{font-size:0.8rem;color:var(--text-ondark-soft);text-transform:uppercase;letter-spacing:0.06em;}
.finance-result .big{font-family:var(--font-display);font-size:2.2rem;color:var(--gold-light);margin:8px 0 24px;}
.finance-breakdown{display:flex;justify-content:space-between;border-top:1px solid rgba(255,255,255,0.15);padding-top:16px;font-size:0.88rem;}
.finance-disclaimer{margin-top:18px;font-size:0.78rem;color:var(--text-onlight-soft);}

/* Pháp lý / Chủ đầu tư */
.legal-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;}
.legal-card{background:var(--paper);border:1px solid var(--line);border-radius:var(--radius-md);padding:26px;}
.legal-card .num{font-family:var(--font-display);color:var(--gold);font-size:1.5rem;}
.legal-card h3{font-family:var(--font-display);margin:10px 0 8px;font-size:1.05rem;color:#000;}
.legal-card p{font-size:0.9rem;color:var(--text-onlight-soft);}
.investor-box{display:grid;grid-template-columns:0.4fr 0.6fr;gap:48px;align-items:center;background:var(--paper);border-radius:var(--radius-lg);box-shadow:var(--shadow-card);padding:40px;}
.investor-box img{border-radius:var(--radius-md);}

/* Tiến độ */
.timeline{position:relative;margin-top:20px;padding-left:36px;}
.timeline::before{content:'';position:absolute;left:9px;top:6px;bottom:6px;width:2px;background:rgba(255,255,255,0.18);}
.timeline li{position:relative;padding-bottom:40px;}
.timeline li::before{content:'';position:absolute;left:-36px;top:4px;width:20px;height:20px;border-radius:50%;background:var(--gold-light);border:4px solid var(--forest);}
.timeline .date{color:var(--gold-light);font-weight:600;font-size:0.85rem;letter-spacing:0.04em;text-transform:uppercase;}
.timeline h3{font-family:var(--font-display);font-size:1.2rem;margin:6px 0;}
.timeline p{color:var(--text-ondark-soft);max-width:520px;}

/* Tin tức */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;}
.news-card{background:var(--paper);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-card);}
.news-card img{height:190px;width:100%;object-fit:cover;}
.news-card .body{padding:22px;}
.news-cat{font-size:0.75rem;color:var(--emerald);font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.news-date{font-size:0.75rem;color:var(--text-onlight-soft);}
.news-card h3{font-family:var(--font-display);font-size:1.08rem;margin:10px 0;line-height:1.3;}
.news-more{margin-top:10px;font-size:0.85rem;font-weight:600;color:var(--ink);}

/* Đăng ký tư vấn */
.contact-grid{display:grid;grid-template-columns:0.85fr 1.15fr;gap:56px;}
.contact-info-item{display:flex;gap:14px;padding:18px 0;border-bottom:1px solid rgba(255,255,255,0.12);}
.contact-info-item svg{width:20px;height:20px;color:var(--gold-light);flex:0 0 20px;}
.contact-form{background:var(--paper);border-radius:var(--radius-lg);padding:36px;box-shadow:var(--shadow-soft);color:var(--text-onlight);}
.form-row{margin-bottom:18px;}
.form-row label{display:block;font-size:0.86rem;font-weight:600;margin-bottom:8px;}
.form-row input,.form-row select,.form-row textarea{
  width:100%;padding:13px 16px;border-radius:var(--radius-sm);border:1px solid var(--line);background:var(--cream);
}
.form-note{font-size:0.78rem;color:var(--text-onlight-soft);margin-top:14px;}
.form-success{background:#e5f3ec;border:1px solid var(--emerald);color:var(--forest);padding:14px 18px;border-radius:var(--radius-sm);margin-bottom:18px;font-size:0.9rem;}

/* ==========================================================================
   7. FOOTER
   ========================================================================== */
.site-footer{background:var(--ink);color:var(--text-ondark-soft);padding:70px 0 26px;}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,0.1);}
.footer-brand p{margin-top:16px;font-size:0.9rem;line-height:1.7;}
.footer-col h4{color:var(--text-ondark);font-family:var(--font-display);font-size:1rem;margin-bottom:16px;}
.footer-col li{padding:6px 0;font-size:0.9rem;}
.footer-col a:hover{color:var(--gold-light);}
.footer-bottom{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;padding-top:24px;font-size:0.8rem;}
.footer-sticky-cta{
  position:fixed;bottom:0;left:0;right:0;z-index:90;background:var(--ink);
  border-top:1px solid rgba(255,255,255,0.15);display:none;
  padding:12px 16px;gap:10px;
}
.footer-sticky-cta a{flex:1;text-align:center;}

/* ==========================================================================
   8. RESPONSIVE
   ========================================================================== */
@media (max-width:1024px){
  .overview-stats,.amenity-grid,.legal-grid{grid-template-columns:repeat(2,1fr);}
  .hero-grid,.location-grid,.showroom-grid,.plan-grid,.contact-grid,.investor-box,.finance-card,.amenity-feature{grid-template-columns:1fr;}
  .hero-media img{height:300px;}
  .news-grid{grid-template-columns:repeat(2,1fr);}
  .footer-grid{grid-template-columns:1fr 1fr;}
}
@media (max-width:820px){
  .primary-nav,.header-hotline{display:none;}
  .nav-toggle{display:inline-flex;align-items:center;justify-content:center;}
  .hero-stats{grid-template-columns:1fr;}
  .hero-stats div{border-right:none;border-bottom:1px solid rgba(255,255,255,0.12);}
  .footer-sticky-cta{display:flex;}
  body{padding-bottom:64px;}
}
@media (max-width:640px){
  .overview-stats,.amenity-grid,.legal-grid,.news-grid,.footer-grid,.policy-grid,.plan-specs{grid-template-columns:1fr;}
  .price-highlight{flex-direction:column;align-items:flex-start;}
  .price-table{display:block;overflow-x:auto;}
}

/* Mobile nav panel */
.mobile-nav{
  position:fixed;inset:0;background:var(--ink);z-index:200;
  display:flex;flex-direction:column;padding:24px;transform:translateX(100%);
  transition:transform .3s ease;
}
.mobile-nav.is-open{transform:translateX(0);}
.mobile-nav-top{display:flex;justify-content:space-between;align-items:center;}
.mobile-nav ul{margin-top:32px;}
.mobile-nav a{display:block;padding:14px 0;font-size:1.15rem;color:var(--text-ondark);border-bottom:1px solid rgba(255,255,255,0.1);}
.mobile-nav-close{background:none;border:0;color:var(--text-ondark);width:36px;height:36px;}
@media (max-width: 991px){
	.brand{
		max-width:180px;
	}
	.brand .site-logo{
		height:40px !important;
		max-width:170px !important;
	}
}
@media (max-width: 575px){
	.brand{
		max-width:155px;
	}
	.brand .site-logo{
		height:36px !important;
		max-width:150px !important;
	}

}