/* ══════════════════════════════════════
   SINGLE DỰ ÁN STYLES
══════════════════════════════════════ */

/* ══ GALLERY ══ */
.hero-gallery { display:grid; gap:8px; border-radius:14px; overflow:hidden; grid-template-columns: 1fr; }
@media(min-width:768px) {
  .hero-gallery { grid-template-columns: 3fr 1fr; grid-template-rows: 1fr 1fr; height:420px; }
  .hero-gallery .main-img { grid-row: 1 / 3; height:100%; }
  .hero-gallery .sub-img { height:100%; }
}
.hero-gallery img { width:100%; height:100%; object-fit:cover; display:block; transition:transform .35s; cursor:pointer; }
.hero-gallery img:hover { transform:scale(1.03); }
.gallery-overlay-btn { position:absolute; bottom:12px; right:12px; background:rgba(0,0,0,.55); color:#fff; font-size:12px; font-weight:600; padding:6px 14px; border-radius:8px; cursor:pointer; display:flex; align-items:center; gap:6px; transition:background .2s; border:none; }
.gallery-overlay-btn:hover { background:rgba(0,0,0,.75); }
.img-count-badge { position:absolute; bottom:12px; left:12px; background:rgba(0,0,0,.5); color:#fff; font-size:11px; font-weight:600; padding:3px 10px; border-radius:20px; display:flex; align-items:center; gap:5px; }

/* ══ ANCHOR NAV ══ */
.anchor-nav { background:#fff; border-bottom:2px solid #f0f0f0; position:sticky; top:60px; z-index:40; }
.anchor-nav a { display:inline-block; padding:14px 18px; font-size:13.5px; font-weight:600; color:#6b7280; border-bottom:3px solid transparent; transition:all .2s; white-space:nowrap; text-decoration:none; }
.anchor-nav a:hover { color:var(--color-primary, #1a6b2f); }
.anchor-nav a.active { color:var(--color-primary, #1a6b2f); border-bottom-color:var(--color-primary, #1a6b2f); }
.anchor-nav-wrap { overflow-x:auto; display:flex; scrollbar-width:none; }
.anchor-nav-wrap::-webkit-scrollbar { display:none; }

/* ══ SECTION ══ */
.da-sec-heading { font-size:clamp(17px,2.5vw,22px); font-weight:800; color:var(--color-primary, #1a6b2f); margin-bottom:14px; }
.sec-block { background:#fff; border-radius:16px; padding:24px; box-shadow:0 2px 10px rgba(0,0,0,.05); }

/* ══ OVERVIEW STATS ══ */
.ov-stat { display:flex; align-items:flex-start; gap:12px; }
.ov-stat-icon { width:38px; height:38px; border-radius:10px; background:var(--color-primary-light, #e8f5ec); display:flex; align-items:center; justify-content:center; font-size:16px; color:var(--color-primary, #1a6b2f); flex-shrink:0; }
.ov-label { font-size:11px; color:#9ca3af; }
.ov-value { font-size:13.5px; font-weight:700; color:#111827; margin-top:2px; }

/* ══ BUTTONS ══ */
.btn-green { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:11px 22px; background:var(--color-primary, #1a6b2f); color:#fff; border-radius:10px; font-weight:700; font-size:13.5px; transition:background .2s; cursor:pointer; border:none; text-decoration:none; }
.btn-green:hover { background:var(--color-primary-dark, #145524); }
.btn-border { display:inline-flex; align-items:center; justify-content:center; gap:7px; padding:10px 22px; border:1.5px solid var(--color-primary, #1a6b2f); color:var(--color-primary, #1a6b2f); border-radius:10px; font-weight:600; font-size:13.5px; background:#fff; transition:background .2s; cursor:pointer; text-decoration:none; }
.btn-border:hover { background:var(--color-primary-light, #e8f5ec); }

/* ══ VIDEO THUMBNAIL ══ */
.video-thumb { position:relative; border-radius:12px; overflow:hidden; cursor:pointer; }
.video-thumb img { width:100%; height:200px; object-fit:cover; display:block; transition:transform .3s; }
@media(min-width:1024px) { .video-thumb img { height:220px; } }
.video-thumb:hover img { transform:scale(1.04); }
.play-btn { position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(0,0,0,.28); }
.play-circle { width:56px; height:56px; background:rgba(255,255,255,.9); border-radius:50%; display:flex; align-items:center; justify-content:center; box-shadow:0 4px 16px rgba(0,0,0,.2); transition:transform .2s; }
.video-thumb:hover .play-circle { transform:scale(1.1); }

/* ══ REGISTER FORM ══ */
.reg-form input { width:100%; border:1.5px solid #e5e7eb; border-radius:9px; padding:10px 14px; font-size:13px; outline:none; transition:border-color .2s; font-family:inherit; }
.reg-form input:focus { border-color:var(--color-primary, #1a6b2f); }
.reg-form input::placeholder { color:#aab; }

/* ══ AMENITY IMG GRID ══ */
.amenity-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media(min-width:640px) { .amenity-grid { grid-template-columns:repeat(3,1fr); } }
@media(min-width:1024px) { .amenity-grid { grid-template-columns:repeat(5,1fr); } }
.amenity-img-card { border-radius:10px; overflow:hidden; position:relative; cursor:pointer; }
.amenity-img-card img { width:100%; height:120px; object-fit:cover; display:block; transition:transform .3s; }
.amenity-img-card:hover img { transform:scale(1.06); }
.amenity-img-label { position:absolute; bottom:0; left:0; right:0; background:linear-gradient(transparent,rgba(0,0,0,.65)); padding:20px 10px 8px; }
.amenity-img-label .name { font-size:12px; font-weight:700; color:#fff; }
.amenity-img-label .sub  { font-size:10px; color:rgba(255,255,255,.8); }

/* ══ FLOOR PLAN ══ */
.fp-card { background:#fff; border:1.5px solid #e5e7eb; border-radius:12px; overflow:hidden; text-align:center; cursor:pointer; transition:border-color .25s, box-shadow .25s; }
.fp-card:hover { border-color:var(--color-primary, #1a6b2f); box-shadow:0 4px 18px rgba(26,107,47,.13); }
.fp-card img { width:100%; height:130px; object-fit:cover; display:block; }
@media(min-width:768px) { .fp-card img { height:150px; } }
.fp-card-label { padding:10px 8px; }
.fp-card-label .type { font-size:12px; font-weight:700; color:#111827; }
.fp-card-label .size { font-size:11px; color:#9ca3af; margin-top:2px; }

/* ══ TIMELINE ══ */
.timeline { display:flex; align-items:flex-start; gap:0; position:relative; }
.tl-item { flex:1; display:flex; flex-direction:column; align-items:center; position:relative; min-width:100px; }
.tl-icon { width:44px; height:44px; border-radius:50%; background:var(--color-primary-light, #e8f5ec); border:2.5px solid #d1fae5; display:flex; align-items:center; justify-content:center; font-size:17px; color:var(--color-primary, #1a6b2f); z-index:1; position:relative; transition:all .2s; }
.tl-item.done .tl-icon { background:var(--color-primary, #1a6b2f); color:#fff; border-color:var(--color-primary, #1a6b2f); }
.tl-item.active .tl-icon { background:var(--color-primary, #1a6b2f); color:#fff; border-color:var(--color-primary, #1a6b2f); box-shadow:0 0 0 5px rgba(26,107,47,.15); }
.tl-line { position:absolute; top:22px; left:50%; right:-50%; height:2.5px; background:#e5e7eb; z-index:0; }
.tl-item.done .tl-line { background:var(--color-primary, #1a6b2f); }
.tl-item:last-child .tl-line { display:none; }
.tl-label { font-size:12px; font-weight:700; color:#374151; margin-top:8px; text-align:center; }
.tl-date  { font-size:11px; color:#9ca3af; margin-top:3px; text-align:center; }

/* ══ LOAN CALCULATOR ══ */
.loan-calculator { display:grid; grid-template-columns:1fr; overflow:hidden; border:1px solid #eef0f4; border-radius:8px; background:#fff; }
.loan-form-panel { padding:26px 22px; background:#fff; }
.loan-result-panel { padding:26px 22px; background:#f4f5f9; }
.loan-control { margin-bottom:22px; }
.loan-control label { display:block; color:#6b7280; font-size:16px; font-weight:500; margin-bottom:12px; }
.loan-input-row { display:grid; grid-template-columns:minmax(0,1fr) 96px; gap:18px; align-items:center; }
.loan-input-row input[type="number"], .loan-input-row select { width:100%; height:48px; border:1px solid #e0e4ea; border-radius:6px; color:#111827; font-size:16px; font-weight:500; padding:0 14px; outline:none; background:#fff; transition:border-color .2s, box-shadow .2s; }
.loan-input-row select { appearance:none; background-image:linear-gradient(45deg,transparent 50%,#6b7280 50%),linear-gradient(135deg,#6b7280 50%,transparent 50%); background-position:calc(100% - 16px) 20px,calc(100% - 11px) 20px; background-size:5px 5px,5px 5px; background-repeat:no-repeat; }
.loan-input-row input[type="number"]:focus, .loan-input-row select:focus { border-color:var(--color-primary, #1a6b2f); box-shadow:0 0 0 3px rgba(26,107,47,.1); }
.loan-input-row input[type="range"] { width:100%; height:8px; accent-color:#4b5563; cursor:pointer; }
.loan-input-row input[type="range"]::-webkit-slider-runnable-track { height:7px; background:linear-gradient(90deg,#4b5563 var(--range-progress,50%),#e5e7eb var(--range-progress,50%)); border-radius:999px; }
.loan-input-row input[type="range"]::-webkit-slider-thumb { appearance:none; width:28px; height:28px; border-radius:50%; background:#fff; border:5px solid #4b5563; margin-top:-10px; box-shadow:0 2px 6px rgba(17,24,39,.2); }
.loan-input-row input[type="range"]::-moz-range-track { height:7px; background:#e5e7eb; border-radius:999px; }
.loan-input-row input[type="range"]::-moz-range-thumb { width:20px; height:20px; border-radius:50%; background:#fff; border:5px solid #4b5563; box-shadow:0 2px 6px rgba(17,24,39,.2); }
.loan-payment-types { display:grid; grid-template-columns:1fr 1fr; gap:18px; margin:10px 0 28px; }
.loan-payment-types label { display:flex; align-items:flex-start; gap:12px; color:#6b7280; font-size:15px; line-height:1.35; cursor:pointer; }
.loan-payment-types input { width:18px; height:18px; margin-top:1px; accent-color:#111827; flex-shrink:0; }
.loan-calc-button, .loan-download-button { width:100%; height:52px; border-radius:7px; font-size:16px; font-weight:800; cursor:pointer; transition:background .2s, border-color .2s, color .2s; }
.loan-calc-button { background:#fff; border:1.5px solid #a3a8b1; color:#1f2937; }
.loan-calc-button:hover { border-color:var(--color-primary, #1a6b2f); color:var(--color-primary, #1a6b2f); background:var(--color-primary-light, #e8f5ec); }
.loan-result-panel h3 { font-size:28px; font-weight:900; color:#1f2937; margin:0; }
.loan-result-divider { height:1px; background:#cfd3db; margin:24px 0; }
.loan-result-main { display:grid; grid-template-columns:163px minmax(0,1fr); gap:34px; align-items:center; }
.loan-chart { --loan-down:25%; --loan-principal:55%; width:190px; aspect-ratio:1; border-radius:50%; background:conic-gradient(#6b7bd8 0 var(--loan-down), #46b8c6 var(--loan-down) var(--loan-principal), #d862aa var(--loan-principal) 100%); display:grid; place-items:center; position:relative; }
.loan-chart::before { content:""; position:absolute; inset:14px; border-radius:50%; background:#f4f5f9; }
.loan-chart-inner { position:relative; z-index:1; text-align:center; color:#1f2937; font-weight:900; }
.loan-chart-inner span { display:block; font-size:34px; line-height:1; }
.loan-chart-inner small { display:block; font-size:22px; font-weight:600; margin-top:8px; }
.loan-summary { display:grid; gap:22px; }
.loan-summary span { display:block; color:#1f2937; font-size:16px; font-weight:600; margin-bottom:4px; }
.loan-summary strong { display:block; font-size:16px; font-weight:800; word-break:break-word; }
.loan-color-down { color:#6b7bd8; }
.loan-color-principal { color:#46b8c6; }
.loan-color-interest { color:#d862aa; }
.loan-monthly-row { display:flex; align-items:center; justify-content:space-between; gap:18px; }
.loan-monthly-row span { color:#6b7280; font-size:18px; font-weight:800; line-height:1.25; }
.loan-monthly-row strong { color:#111827; font-size:25px; font-weight:900; line-height:1; text-align:right; }
.loan-download-button { display:flex; align-items:center; justify-content:center; gap:12px; border:none; background:#cf2029; color:#fff; }
.loan-download-button:hover { background:#b91c1c; }
.loan-guide-link { display:flex; align-items:center; justify-content:center; gap:10px; color:#1f2937; font-size:17px; font-weight:800; text-decoration:none; margin-top:22px; }
.loan-guide-link:hover { color:var(--color-primary, #1a6b2f); }
@media(min-width:900px) {
  .loan-calculator { grid-template-columns:minmax(0,1fr) minmax(360px,.95fr); }
  .loan-form-panel, .loan-result-panel { padding:38px; }
}
@media(max-width:767px) {
  .loan-input-row { grid-template-columns:1fr; gap:10px; }
  .loan-payment-types { grid-template-columns:1fr; gap:12px; }
  .loan-result-main { grid-template-columns:1fr; gap:20px; justify-items:center; }
  .loan-summary { width:100%; grid-template-columns:1fr; }
  .loan-monthly-row { align-items:flex-start; flex-direction:column; }
  .loan-monthly-row strong { text-align:left; font-size:28px; }
}

/* ══ SIDEBAR CARD ══ */
.da-sidebar-card { background:#fff; border-radius:14px; border:1px solid #e5e7eb; overflow:hidden; }

/* ══ LIGHTBOX ══ */
#da-lightbox { display:none; position:fixed; inset:0; background:rgba(0,0,0,.92); z-index:9999; align-items:center; justify-content:center; }
#da-lightbox.show { display:flex; }
#da-lightbox img { max-width:90vw; max-height:88vh; object-fit:contain; border-radius:8px; }
#da-lightbox-close { position:absolute; top:18px; right:22px; color:#fff; font-size:28px; cursor:pointer; background:none; border:none; }
#da-lightbox-prev, #da-lightbox-next { position:absolute; top:50%; transform:translateY(-50%); color:#fff; font-size:24px; background:rgba(255,255,255,.12); border:none; cursor:pointer; width:44px; height:44px; border-radius:50%; display:flex; align-items:center; justify-content:center; transition:background .2s; }
#da-lightbox-prev { left:16px; }
#da-lightbox-next { right:16px; }
#da-lightbox-prev:hover, #da-lightbox-next:hover { background:rgba(255,255,255,.25); }

/* ══ MOBILE CTA ══ */
.da-mobile-cta { position:fixed; bottom:0; left:0; right:0; z-index:90; background:#fff; border-top:1px solid #e5e7eb; padding:10px 16px 14px; display:flex; gap:10px; }
@media(min-width:1024px) { .da-mobile-cta { display:none; } }

/* ══ FADE ══ */
.fade-up { opacity:0; transform:translateY(20px); transition:opacity .45s ease, transform .45s ease; }
.fade-up.visible { opacity:1; transform:translateY(0); }

/* ══ LEAFLET MAP ══ */
#du-an-map { border-radius: 12px; }