/*
Theme Name: Palm City — SMReal Edition
Theme URI: https://smreal.com.vn
Author: SMReal
Description: Theme WordPress độc lập cho website giới thiệu dự án Palm City. Toàn bộ nội dung, hình ảnh, số liệu, thư viện mặt bằng và form đăng ký tư vấn đều chỉnh sửa trực tiếp tại menu "Cấu hình Palm City" trong wp-admin — không cần sửa code.
Version: 1.3.0
Requires PHP: 7.4
Text Domain: palmcity
*/

/* ============================================================
   1. RESET & TOKENS
   ============================================================ */
:root{
	--pc-ink: #0E3B35;
	--pc-ink-light: #15534B;
	--pc-paper: #FBF8F2;
	--pc-sand: #ECE3D0;
	--pc-gold: #B68A4E;
	--pc-gold-light: #D6AD73;
	--pc-palm: #4F7F68;
	--pc-charcoal: #202623;
	--pc-white: #FFFFFF;
	--pc-line: rgba(14,59,53,0.12);

	--font-display: 'Fraunces', Georgia, serif;
	--font-body: 'Be Vietnam Pro', -apple-system, BlinkMacSystemFont, sans-serif;
	--font-util: 'Space Grotesk', var(--font-body);

	--pc-radius: 18px;
	--pc-container: 1180px;
}

*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
	margin:0;
	font-family: var(--font-body);
	color: var(--pc-charcoal);
	background: var(--pc-paper);
	line-height: 1.65;
	font-size: 16px;
	-webkit-font-smoothing: antialiased;
}
img{ max-width:100%; display:block; }
a{ color: inherit; text-decoration:none; }
ul{ margin:0; padding:0; list-style:none; }
button{ font-family: inherit; cursor:pointer; }
h1,h2,h3,h4{ font-family: var(--font-display); color: var(--pc-ink); margin:0 0 .4em; font-weight:500; line-height:1.15; }
:focus-visible{ outline: 3px solid var(--pc-gold); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce){
	*{ animation-duration:0.001ms !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}

/* ============================================================
   2. LAYOUT HELPERS
   ============================================================ */
.pc-container{ max-width: var(--pc-container); margin:0 auto; padding:0 24px; }
.pc-container--narrow{ max-width: 760px; }
.pc-section{ padding: 88px 0; }
.pc-section--alt{ background: var(--pc-sand); }
.pc-center-text{ text-align:center; }
.pc-grid-2{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items:center; }
.pc-grid-2--reverse{ direction: rtl; }
.pc-grid-2--reverse > *{ direction: ltr; }
.pc-col{ min-width:0; }
.pc-prose p{ margin: 0 0 1.1em; color: var(--pc-charcoal); }
.pc-prose p:last-child{ margin-bottom:0; }
.pc-lead-paragraph{ font-size: 1.15rem; }
.pc-link-more{ display:inline-block; margin-top:8px; font-weight:600; color: var(--pc-palm); border-bottom: 1px solid currentColor; padding-bottom:2px; }
.pc-link-more:hover{ color: var(--pc-gold); }
.pc-rounded-img{ border-radius: var(--pc-radius); width:100%; height:auto; object-fit:cover; }
.pc-full-img{ max-height: 520px; object-fit:cover; width:100%; }

.pc-section-head{ margin-bottom: 36px; }
.pc-align-left{ text-align:left; }
.pc-align-center{ text-align:center; }
.pc-eyebrow{ display:inline-block; font-family: var(--font-util); font-size:.78rem; letter-spacing:.14em; font-weight:600; color: var(--pc-gold); text-transform:uppercase; margin-bottom:10px; }
.pc-eyebrow--light{ color: var(--pc-gold-light); }
.pc-heading{ font-size: clamp(1.6rem, 2.4vw, 2.2rem); }

/* placeholder used whenever an image option hasn't been set yet */
.pc-placeholder{
	background: linear-gradient(135deg, var(--pc-ink) 0%, var(--pc-palm) 100%);
	border-radius: var(--pc-radius);
	min-height: 220px;
	display:flex; align-items:center; justify-content:center;
	color: rgba(255,255,255,.85);
	font-size: .85rem; text-align:center; padding: 20px;
}

/* ============================================================
   3. SCROLL PROGRESS BAR (signature element — echoes "Tiến độ")
   ============================================================ */
.pc-scroll-progress{
	position: fixed; top:0; left:0; height: 3px; width:0%;
	background: linear-gradient(90deg, var(--pc-gold), var(--pc-gold-light));
	z-index: 9999; transition: width .08s linear;
}

/* ============================================================
   4. HEADER / NAV
   ============================================================ */
.pc-header{
	position: sticky; top:0; z-index: 500;
	background: rgba(251,248,242,0.92);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--pc-line);
}
.pc-header-inner{
	max-width: var(--pc-container); margin:0 auto; padding: 14px 24px;
	display:flex; align-items:center; justify-content:space-between; gap: 24px;
}
.pc-logo img{ height: 46px; width:auto; }
.pc-logo-text{ font-family: var(--font-display); font-size: 1.5rem; color: var(--pc-ink); font-weight:600; }
.pc-logo-text--light{ color: var(--pc-paper); }
.pc-nav-links{ display:flex; gap: 28px; }
.pc-nav-links a{
	font-size:.86rem; font-weight:600; letter-spacing:.04em; text-transform:uppercase;
	color: var(--pc-ink); position:relative; padding: 6px 0;
}
.pc-nav-links a::after{
	content:''; position:absolute; left:0; bottom:0; width:0; height:2px; background: var(--pc-gold);
	transition: width .25s ease;
}
.pc-nav-links a:hover::after{ width:100%; }
.pc-header-actions{ display:flex; align-items:center; gap:18px; }
.pc-hotline{ text-align:right; line-height:1.2; }
.pc-hotline-label{ display:block; font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color: var(--pc-palm); }
.pc-hotline-number{ display:block; font-family: var(--font-util); font-weight:600; color: var(--pc-ink); font-size:1.05rem; }
.pc-burger{ display:none; flex-direction:column; gap:5px; background:none; border:0; padding:6px; }
.pc-burger span{ width:24px; height:2px; background: var(--pc-ink); display:block; }
.pc-mobile-nav{ display:none; flex-direction:column; gap:18px; padding: 18px 24px 26px; border-top:1px solid var(--pc-line); }
.pc-mobile-nav-links{ display:flex; flex-direction:column; gap:14px; }
.pc-mobile-nav-links a{ font-weight:600; text-transform:uppercase; font-size:.9rem; letter-spacing:.03em; }
.pc-header.is-open .pc-mobile-nav{ display:flex; }

@media (max-width: 980px){
	.pc-nav{ display:none; }
	.pc-hotline{ display:none; }
	.pc-burger{ display:flex; }
}

/* ============================================================
   5. BUTTONS & FORMS
   ============================================================ */
.pc-btn{
	display:inline-flex; align-items:center; justify-content:center; gap:8px;
	font-family: var(--font-util); font-weight:600; letter-spacing:.03em; text-transform:uppercase;
	font-size:.85rem; padding: 14px 28px; border-radius: 999px; border: 1.5px solid transparent;
	transition: transform .2s ease, box-shadow .2s ease, background .2s ease;
}
.pc-btn--gold{ background: var(--pc-gold); color: var(--pc-white); box-shadow: 0 8px 20px -8px rgba(182,138,78,.7); }
.pc-btn--gold:hover{ transform: translateY(-2px); background: var(--pc-gold-light); }
.pc-btn--ghost{ border-color: rgba(255,255,255,.6); color: var(--pc-white); }
.pc-btn--ghost:hover{ background: rgba(255,255,255,.12); }
.pc-btn--block{ width:100%; }
.pc-btn:disabled{ opacity:.72; cursor:wait; transform:none; }

.pc-form{ display:flex; flex-direction:column; gap:14px; }
.pc-form-row input, .pc-form-row select{
	width:100%; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--pc-line);
	font-family: var(--font-body); font-size:.95rem; background: var(--pc-white); color: var(--pc-charcoal);
}
.pc-form-row input:focus, .pc-form-row select:focus{ border-color: var(--pc-gold); }
.pc-honeypot{ position:absolute !important; left:-9999px !important; width:1px !important; height:1px !important; opacity:0 !important; pointer-events:none !important; }
.pc-consent{ display:flex; align-items:flex-start; gap:10px; font-size:.82rem; line-height:1.45; color: rgba(32,38,35,.78); }
.pc-consent input{ margin-top:3px; flex:0 0 auto; accent-color: var(--pc-gold); }
.pc-consent a{ color: var(--pc-palm); font-weight:600; border-bottom:1px solid currentColor; }
.pc-form-msg{ min-height: 1.4em; font-size:.88rem; margin:0; }
.pc-form-msg.is-success{ color: var(--pc-palm); font-weight:600; }
.pc-form-msg.is-error{ color: #B5453B; font-weight:600; }
.pc-btn-loading{ display:none; width:14px; height:14px; border-radius:50%; border:2px solid rgba(255,255,255,.5); border-top-color:#fff; }
.is-loading .pc-btn-loading{ display:inline-block; animation: pc-spin .7s linear infinite; }
.is-loading .pc-btn-label{ opacity:.6; }
@keyframes pc-spin{ to{ transform: rotate(360deg); } }

.pc-lead-form--card{
	background: var(--pc-white); border-radius: var(--pc-radius); padding: 32px;
	box-shadow: 0 24px 50px -28px rgba(14,59,53,.35); border: 1px solid var(--pc-line);
}

/* ============================================================
   6. HERO
   ============================================================ */
.pc-hero{
	position: relative; min-height: 86vh; display:flex; align-items:center;
	background-color: var(--pc-ink); background-size: cover; background-position: center;
	color: var(--pc-white); overflow:hidden;
}
.pc-hero-overlay{
	position:absolute; inset:0;
	background: linear-gradient(180deg, rgba(14,59,53,.55) 0%, rgba(14,59,53,.78) 100%);
}
.pc-hero-content{ position:relative; z-index:2; max-width: var(--pc-container); margin: 0 auto; padding: 0 24px; }
.pc-hero-title{ font-size: clamp(2.6rem, 6vw, 4.6rem); color: var(--pc-white); margin: 0 0 .3em; letter-spacing:.01em; }
.pc-hero-desc{ max-width: 640px; font-size: 1.1rem; color: rgba(255,255,255,.88); margin-bottom: 28px; }
.pc-hero-actions{ display:flex; gap:16px; flex-wrap:wrap; }

/* signature river-curve divider at the foot of the hero */
.pc-river-curve{
	position:absolute; left:0; right:0; bottom:-1px; height: 90px; z-index:3;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 90' preserveAspectRatio='none'%3E%3Cpath d='M0,40 C240,90 480,0 720,30 C960,60 1200,10 1440,50 L1440,90 L0,90 Z' fill='%23FBF8F2'/%3E%3C/svg%3E");
	background-size: 100% 100%; background-repeat: no-repeat;
}

/* ============================================================
   7. STATS STRIP
   ============================================================ */
.pc-stats{ background: var(--pc-ink); padding: 28px 0; }
.pc-stats-inner{
	max-width: var(--pc-container); margin:0 auto; padding: 0 24px;
	display:grid; grid-template-columns: repeat(4, 1fr); gap: 24px; text-align:center;
}
.pc-stat-value{ display:block; font-family: var(--font-util); font-size: clamp(1.5rem,3vw,2.1rem); font-weight:600; color: var(--pc-gold-light); }
.pc-stat-label{ display:block; font-size:.78rem; color: rgba(255,255,255,.75); margin-top:4px; letter-spacing:.03em; }
@media (max-width: 760px){ .pc-stats-inner{ grid-template-columns: repeat(2,1fr); } }

/* ============================================================
   8. TABLE
   ============================================================ */
.pc-info-table{ width:100%; border-collapse: collapse; margin-top: 16px; }
.pc-info-table th, .pc-info-table td{ text-align:left; padding: 14px 18px; border-bottom: 1px solid var(--pc-line); vertical-align:top; }
.pc-info-table th{ width: 240px; font-family: var(--font-body); font-weight:600; color: var(--pc-ink); }
@media (max-width: 700px){
	.pc-info-table, .pc-info-table tbody, .pc-info-table tr, .pc-info-table th, .pc-info-table td{ display:block; width:100%; }
	.pc-info-table th{ border-bottom:0; padding-bottom:4px; }
	.pc-info-table td{ padding-top:0; }
}

/* ============================================================
   9. CARDS / GRIDS
   ============================================================ */
.pc-cards-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 20px; }
.pc-cards-2{ display:grid; grid-template-columns: repeat(2,1fr); gap: 24px; margin-top: 20px; }
.pc-card{ background: var(--pc-white); border-radius: var(--pc-radius); padding: 28px; border: 1px solid var(--pc-line); }
.pc-card--bordered{ background: transparent; border: 1.5px solid var(--pc-line); }
.pc-card h3{ font-size: 1.15rem; margin-bottom: .5em; }
.pc-card p{ margin:0; color: var(--pc-charcoal); }
@media (max-width: 900px){ .pc-cards-3, .pc-cards-2{ grid-template-columns: 1fr; } }

.pc-gallery-3{ display:grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top:20px; }
.pc-gallery-item img{ border-radius: var(--pc-radius); width:100%; aspect-ratio: 4/3; object-fit:cover; }
.pc-gallery-item figcaption{ margin-top:10px; font-size:.88rem; color: var(--pc-ink); font-weight:600; text-align:center; }
@media (max-width: 900px){ .pc-gallery-3{ grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px){ .pc-gallery-3{ grid-template-columns: 1fr; } }

.pc-news-card{ background: var(--pc-white); border-radius: var(--pc-radius); overflow:hidden; border: 1px solid var(--pc-line); display:block; }
.pc-news-thumb{ aspect-ratio: 16/10; overflow:hidden; }
.pc-news-thumb img{ width:100%; height:100%; object-fit:cover; }
.pc-news-card h3{ font-size: 1.05rem; margin: 18px 20px 6px; }
.pc-news-card p{ margin: 0 20px 20px; font-size:.92rem; color: var(--pc-charcoal); }

/* ============================================================
   10. CTA SECTIONS
   ============================================================ */
.pc-cta-section{ background: var(--pc-ink); padding: 72px 0; color: var(--pc-white); }
.pc-cta-section--final{ background: linear-gradient(135deg, var(--pc-ink), var(--pc-ink-light)); }
.pc-cta-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: 48px; align-items:center; }
.pc-cta-copy h2{ color: var(--pc-white); }
.pc-cta-copy p{ color: rgba(255,255,255,.82); }
@media (max-width: 900px){ .pc-cta-grid{ grid-template-columns: 1fr; } }

/* ============================================================
   11. PAGE HERO (sub pages)
   ============================================================ */
.pc-page-hero{
	min-height: 46vh; display:flex; align-items:center; position:relative;
	background-color: var(--pc-ink); background-size: cover; background-position:center; color:#fff;
}
.pc-page-hero--plain{ background: linear-gradient(135deg, var(--pc-ink), var(--pc-ink-light)); min-height: 32vh; }
.pc-page-hero-content{ position:relative; z-index:2; max-width: var(--pc-container); margin:0 auto; padding: 60px 24px; }
.pc-page-hero h1{ color:#fff; font-size: clamp(2rem,4vw,2.8rem); margin:0; }
.pc-post-meta{ color: rgba(255,255,255,.75); margin-top:6px; }

/* ============================================================
   12. TRAVEL LIST / TIMELINE
   ============================================================ */
.pc-travel-list{ display:flex; flex-direction:column; gap:14px; margin-top:20px; }
.pc-travel-list li{ display:flex; gap:18px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--pc-line); }
.pc-travel-time{ font-family: var(--font-util); font-weight:600; color: var(--pc-gold); min-width: 92px; }
.pc-travel-dest{ color: var(--pc-charcoal); }

.pc-timeline{ position:relative; padding-left: 36px; }
.pc-timeline::before{ content:''; position:absolute; left:13px; top:6px; bottom:6px; width:2px; background: var(--pc-line); }
.pc-timeline-item{ position:relative; padding-bottom: 40px; }
.pc-timeline-item:last-child{ padding-bottom:0; }
.pc-timeline-marker{
	position:absolute; left:-36px; top:0; width:28px; height:28px; border-radius:50%;
	background: var(--pc-gold); color:#fff; display:flex; align-items:center; justify-content:center;
	font-family: var(--font-util); font-size:.8rem; font-weight:600;
}
.pc-timeline-date{ display:block; font-family: var(--font-util); font-size:.78rem; letter-spacing:.06em; color: var(--pc-palm); text-transform:uppercase; margin-bottom:4px; }
.pc-timeline-body img{ margin-top: 14px; max-width: 420px; }

/* ============================================================
   13. LIGHTBOX
   ============================================================ */
.pc-lightbox{
	position: fixed; inset:0; background: rgba(14,20,18,.92); z-index: 2000;
	display:flex; align-items:center; justify-content:center; padding: 40px;
}
.pc-lightbox[hidden]{ display:none; }
.pc-lightbox img{ max-width: 100%; max-height: 100%; border-radius: 10px; }
.pc-lightbox-close{ position:absolute; top:24px; right:28px; background:none; border:0; color:#fff; font-size:2.2rem; line-height:1; }

/* ============================================================
   14. CONTACT PAGE
   ============================================================ */
.pc-contact-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 56px; }
.pc-contact-list{ margin-top: 28px; display:flex; flex-direction:column; gap:16px; }
.pc-contact-list li{ display:flex; flex-direction:column; gap:2px; padding-bottom:14px; border-bottom:1px solid var(--pc-line); }
.pc-contact-list strong{ font-size:.78rem; text-transform:uppercase; letter-spacing:.06em; color: var(--pc-palm); }
.pc-contact-form-wrap{ background: var(--pc-white); border-radius: var(--pc-radius); padding: 32px; border:1px solid var(--pc-line); }
@media (max-width: 900px){ .pc-contact-grid{ grid-template-columns:1fr; } }

/* ============================================================
   15. FOOTER & FLOATING BUTTONS
   ============================================================ */
.pc-footer{ background: var(--pc-ink); color: rgba(255,255,255,.85); padding-top: 64px; }
.pc-footer-top{ max-width: var(--pc-container); margin:0 auto; padding: 0 24px 40px; display:grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 40px; }
.pc-footer-logo{ height: 44px; margin-bottom: 14px; }
.pc-footer-brand .pc-tagline{ color: rgba(255,255,255,.7); max-width: 320px; }
.pc-footer-col h4{ color: var(--pc-gold-light); font-family: var(--font-util); font-size:.85rem; letter-spacing:.06em; text-transform:uppercase; margin-bottom:14px; }
.pc-footer-list{ display:flex; flex-direction:column; gap:10px; font-size:.92rem; }
.pc-footer-list a:hover{ color: var(--pc-gold-light); }
.pc-footer-bottom{ border-top: 1px solid rgba(255,255,255,.12); padding: 22px 24px 28px; max-width: var(--pc-container); margin:0 auto; font-size:.8rem; color: rgba(255,255,255,.6); }
.pc-disclaimer{ margin: 0 0 10px; }
.pc-copyright{ margin:0; }
@media (max-width: 900px){ .pc-footer-top{ grid-template-columns: 1fr; } }

.pc-floating-actions{ position: fixed; right: 22px; bottom: 22px; z-index: 800; display:flex; flex-direction:column; gap:12px; }
.pc-fab{ width:52px; height:52px; border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow: 0 10px 24px -10px rgba(0,0,0,.4); }
.pc-fab--zalo{ background:#0068FF; color:#fff; }
.pc-fab--phone{ background: var(--pc-gold); color:#fff; }

/* ============================================================
   16. MISC PAGE GRIDS reuse
   ============================================================ */
@media (max-width: 900px){
	.pc-grid-2{ grid-template-columns: 1fr; gap: 28px; }
	.pc-section{ padding: 56px 0; }
}