/* ============================================================
   Vinhomes Royal Island — CSS mobile-first (KHÔNG Tailwind CDN)
   File: public/assets/css/tailwind_custom.css
   ============================================================ */

/* ---------- Variables (luxury palette) ---------- */
:root {
  --brand: #0b2545;          /* navy sâu sang trọng */
  --brand-dark: #071a33;
  --brand-soft: #163a63;
  --accent: #c9a24b;         /* vàng champagne tinh tế */
  --accent-dark: #a58133;
  --accent-light: #f8f1de;
  --text: #2b2a26;           /* đen ấm */
  --muted: #7e776b;          /* xám ấm */
  --bg: #ffffff;
  --bg-alt: #faf8f3;         /* trắng ngà ấm */
  --line: #e9e1cf;           /* viền ấm */
  --danger: #b03a2e;
  --ok: #1e7e34;
  --radius: 12px;
  --shadow: 0 2px 12px rgba(11,37,69,.08);
  --shadow-lg: 0 10px 32px rgba(11,37,69,.13);
  --font: 'Be Vietnam Pro', -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-display: 'Playfair Display', Georgia, "Times New Roman", serif;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font); color: var(--text);
  font-size: 16px; line-height: 1.6; background: var(--bg);
  padding-bottom: 54px; /* chừa chỗ sticky-bar mobile */
}
@media (min-width: 900px) { body { padding-bottom: 0; } }

img { max-width: 100%; height: auto; display: block; }
a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3 { line-height: 1.32; margin: 0 0 .6em; font-family: var(--font-display); font-weight: 700; letter-spacing: .01em; color: var(--brand-dark); }
.hero h1, .zmod-hero h1, .cta-banner h2 { color: #fff; }
p { margin: 0 0 1em; }
.muted { color: var(--muted); }
.tiny { font-size: .82rem; }
.center { text-align: center; }
.link { font-weight: 600; white-space: nowrap; }

.container { width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 16px; }
.container.narrow { max-width: 760px; }
.section { padding: 40px 0; }
.section-alt { background: var(--bg-alt); }
.sec-title { font-size: 1.45rem; margin-bottom: 22px; position: relative; padding-bottom: 10px; }
.sec-title::after { content: ""; position: absolute; left: 0; bottom: 0; width: 56px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--accent-dark)); }
.sec-title.center::after { left: 50%; transform: translateX(-50%); }
.sec-title small { font-size: .85rem; font-weight: 400; font-family: var(--font); }

/* ---------- Eyebrow (dòng chữ in hoa giãn cách trên tiêu đề section) ---------- */
.eyebrow { font-size: .78rem; font-weight: 700; letter-spacing: .28em; text-transform: uppercase; color: var(--accent-dark); margin-bottom: 8px; font-family: var(--font); }
.eyebrow.light { color: var(--accent); }
.eyebrow.center { text-align: center; }

/* ---------- Header / nav ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: #fff; box-shadow: var(--shadow); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 64px; }
.logo-text { font-size: 1.05rem; color: var(--brand-dark); letter-spacing: .02em; }
.logo-text strong { color: var(--accent-dark); }
.logo img { max-height: 48px; width: auto; }
.main-nav { display: none; align-items: center; gap: 18px; }
.main-nav > a { color: var(--text); font-weight: 600; font-size: .95rem; }
.nav-drop { position: relative; }
.nav-drop > a { color: var(--text); font-weight: 600; font-size: .95rem; }
.nav-drop-list {
  display: none; position: absolute; top: 100%; left: 0; min-width: 220px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 8px 0;
}
.nav-drop:hover .nav-drop-list, .nav-drop:focus-within .nav-drop-list { display: block; }
.nav-drop-list a { display: block; padding: 8px 16px; font-size: .92rem; color: var(--text); }
.nav-drop-list a.hl { color: var(--accent-dark); font-weight: 700; border-top: 1px solid var(--line); }
.header-cta { display: flex; align-items: center; gap: 10px; }
.menu-toggle { display: inline-flex; font-size: 1.5rem; background: none; border: 0; color: var(--brand); cursor: pointer; padding: 8px; }
.mobile-drawer { display: none; flex-direction: column; border-top: 1px solid var(--line); background: #fff; max-height: 70vh; overflow: auto; }
.mobile-drawer.open { display: flex; }
.mobile-drawer a { padding: 12px 20px; border-bottom: 1px solid var(--line); color: var(--text); font-weight: 600; }
.mobile-drawer a.sub { padding-left: 36px; font-weight: 400; font-size: .93rem; }
.mobile-drawer a.sub-head { background: #f8fafc; }
@media (min-width: 900px) {
  .main-nav { display: flex; }
  .menu-toggle, .mobile-drawer { display: none; }
}

/* ---------- Sticky mobile bar ---------- */
.sticky-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 100;
  display: flex; background: #fff; border-top: 1px solid var(--line); box-shadow: 0 -2px 12px rgba(0,0,0,.1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}
.sb-item {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px;
  padding: 8px 4px; font-size: 1.15rem; color: var(--brand); font-weight: 600;
}
.sb-item span { font-size: .72rem; }
.sb-call { background: var(--accent); color: #fff; }
.sb-zalo { color: #0068ff; }
.sb-calc { color: var(--brand); }
@media (min-width: 900px) { .sticky-bar { display: none; } }

/* ---------- Hero ---------- */
.hero { background: linear-gradient(135deg, #071a33 0%, #0b2545 55%, #163a63 100%); color: #fff; padding: 60px 0; }
.hero h1 { font-size: 1.75rem; margin-bottom: 16px; letter-spacing: .015em; }
.hero h1 span { color: var(--accent); font-size: 1.12rem; display: block; margin-top: 8px; font-family: var(--font); font-weight: 600; letter-spacing: .04em; }
.hero .lead { color: #d9e4f2; max-width: 640px; }
.hero-stats { display: flex; gap: 16px; flex-wrap: wrap; margin: 20px 0; }
.hstat { background: rgba(255,255,255,.12); border-radius: var(--radius); padding: 12px 18px; text-align: center; }
.hstat strong { display: block; font-size: 1.3rem; color: #fff; }
.hstat span { font-size: .8rem; color: #c9d8e8; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-bg { background-size: cover; background-position: center; position: relative; }
.hero-bg::before { content: ''; position: absolute; inset: 0; background: rgba(8, 25, 50, .55); }
.hero-bg .container { position: relative; z-index: 1; }

/* ---------- Slider ảnh ---------- */
.vri-slider-wrap { margin: 0; }
.vri-slider { position: relative; overflow: hidden; background: var(--brand-dark); }
.vri-slide { display: none; position: relative; }
.vri-slide.is-active { display: block; }
.vri-slide img { width: 100%; height: 420px; object-fit: cover; display: block; }
.vri-slide-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.68) 0%, rgba(0,0,0,.15) 60%, rgba(0,0,0,.05) 100%); }
.vri-slide-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 0 60px; color: #fff; }
.vri-slide-cap h2 { font-size: 1.8rem; margin: 0 0 8px; color: #fff; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.vri-slide-cap p { font-size: 1.05rem; margin: 0 0 14px; color: #e8eef6; text-shadow: 0 1px 6px rgba(0,0,0,.5); }
.vri-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(0,0,0,.45); color: #fff; font-size: 1.6rem; line-height: 1; cursor: pointer; z-index: 3; display: flex; align-items: center; justify-content: center; }
.vri-nav:hover { background: rgba(0,0,0,.7); }
.vri-prev { left: 12px; }
.vri-next { right: 12px; }
.vri-dots { position: absolute; left: 0; right: 0; bottom: 16px; display: flex; gap: 8px; justify-content: center; z-index: 3; }
.vri-dot { width: 10px; height: 10px; border: 0; border-radius: 50%; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.vri-dot.is-active { background: #fff; transform: scale(1.25); }
@media (max-width: 699px) {
  .vri-slide img { height: 300px; }
  .vri-slide-cap { padding: 14px 0 52px; }
  .vri-slide-cap h2 { font-size: 1.35rem; }
  .vri-slide-cap p { font-size: .95rem; }
  .vri-nav { width: 38px; height: 38px; font-size: 1.3rem; }
}
.breadcrumb { font-size: .9rem; margin-bottom: 12px; color: #64748b; line-height: 1.6; }
.breadcrumb a { color: #1d4ed8; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: var(--radius); padding: 12px 22px;
  font-size: 1rem; font-weight: 700; cursor: pointer; line-height: 1.2;
}
.btn-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-dark) 100%); color: #fff; box-shadow: 0 4px 14px rgba(201,162,75,.35); }
.btn-primary:hover { filter: brightness(1.06); text-decoration: none; box-shadow: 0 6px 20px rgba(201,162,75,.45); }
.btn-outline { background: #fff; color: var(--brand); border: 2px solid var(--brand); }
.btn-call { background: var(--accent); color: #fff; padding: 9px 16px; font-size: .9rem; }
.btn-zalo { background: #0068ff; color: #fff; padding: 8px 14px; font-size: .9rem; }
.btn-block { width: 100%; }
.btn-lg { padding: 15px 30px; font-size: 1.1rem; }

/* ---------- Cards & grids ---------- */
.card { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 20px; }
.grid { display: grid; gap: 16px; }
.grid-2 { grid-template-columns: 1fr; }
.grid-3 { grid-template-columns: 1fr; }
.grid-4 { grid-template-columns: 1fr; }
@media (min-width: 700px) { .grid-2, .grid-3 { grid-template-columns: repeat(2, 1fr); } .grid-4 { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-4 { grid-template-columns: repeat(4, 1fr); } }
.zone-card, .post-card { padding: 0; overflow: hidden; color: inherit; display: block; }
.zone-card:hover, .post-card:hover { text-decoration: none; transform: translateY(-2px); transition: .2s; }
.zc-body { padding: 16px; }
.zc-body h3 { margin-bottom: 6px; font-size: 1.05rem; }
.policy-card { border-top: 4px solid var(--brand); }
.policy-card.hot { border-top-color: var(--accent); }
.pc-badge { display: inline-block; background: var(--brand); color: #fff; font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 20px; margin-bottom: 10px; }
.policy-card.hot .pc-badge { background: var(--accent-dark); }
.pc-big { font-size: 1.35rem; font-weight: 800; color: var(--brand-dark); margin: 8px 0; }
.countdown { font-weight: 700; color: var(--danger); }
.price strong { color: var(--brand-dark); }
.badge { display: inline-block; background: var(--bg-alt); border: 1px solid var(--line); border-radius: 20px; font-size: .75rem; padding: 2px 10px; margin-bottom: 8px; color: var(--muted); }
.cta-box { text-align: center; padding: 36px 24px; }
.policy-box { background: #fffbe6; border: 1px solid #f0d77b; }
.share-row { display: flex; gap: 12px; align-items: center; margin: 24px 0; font-weight: 600; }

/* ---------- Tables (desktop) -> cards (mobile) ---------- */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.vtable { width: 100%; border-collapse: collapse; background: #fff; font-size: .95rem; }
.vtable th, .vtable td { padding: 10px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.vtable thead th { background: var(--brand); color: #fff; font-weight: 700; white-space: nowrap; }
.vtable tbody tr:nth-child(even) { background: #fafbfd; }
@media (max-width: 699px) {
  .vtable thead { display: none; }
  .vtable, .vtable tbody, .vtable tr, .vtable td { display: block; width: 100%; }
  .vtable tr { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; background: #fff; overflow: hidden; }
  .vtable td { border: 0; border-bottom: 1px solid var(--line); padding: 8px 12px; }
  .vtable td:last-child { border-bottom: 0; }
  .vtable td::before { content: attr(data-label); display: block; font-size: .75rem; color: var(--muted); font-weight: 600; }
  .spec-table td::before { display: none; }
  .spec-table td { display: block; }
  .spec-table td:first-child { font-weight: 700; color: var(--brand-dark); }
}

/* ---------- Forms ---------- */
.field { margin-bottom: 14px; }
.field label { display: block; font-weight: 600; margin-bottom: 6px; font-size: .93rem; }
.field input[type="text"], .field input[type="tel"], .field input[type="number"],
.field input[type="date"], .field select, .field textarea {
  width: 100%; padding: 11px 12px; border: 1px solid #c9d2dc; border-radius: 8px;
  font-size: 1rem; font-family: inherit; background: #fff;
}
.field input:focus, .field select:focus, .field textarea:focus { outline: 2px solid var(--brand); border-color: var(--brand); }
.field input[type="range"] { width: 100%; accent-color: var(--brand); }
.radio { display: flex; gap: 8px; align-items: flex-start; font-weight: 400; margin: 8px 0; }
.form-msg { min-height: 1.4em; font-size: .9rem; }
.form-msg.ok { color: var(--ok); font-weight: 600; }
.form-msg.err { color: var(--danger); font-weight: 600; }
.filter-bar { display: grid; gap: 12px; grid-template-columns: 1fr; margin-bottom: 20px; }
@media (min-width: 700px) { .filter-bar { grid-template-columns: 1fr 1fr auto; align-items: end; } }

/* ---------- Modal ---------- */
.modal { display: none; position: fixed; inset: 0; z-index: 200; }
.modal.open { display: block; }
.modal-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.modal-box {
  position: relative; background: #fff; border-radius: var(--radius); max-width: 440px;
  margin: 12vh auto 0; padding: 28px 22px; box-shadow: 0 8px 40px rgba(0,0,0,.25);
  max-height: 80vh; overflow: auto; width: calc(100% - 32px);
}
.modal-x { position: absolute; top: 10px; right: 12px; background: none; border: 0; font-size: 1.2rem; cursor: pointer; }

/* ---------- Accordion ---------- */
.accordion { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: #fff; }
.acc-item + .acc-item { border-top: 1px solid var(--line); }
.acc-head {
  width: 100%; text-align: left; background: #fff; border: 0; padding: 14px 16px;
  font-size: 1rem; font-weight: 700; cursor: pointer; display: flex; justify-content: space-between; gap: 12px; align-items: center;
}
.acc-ic { color: var(--brand); font-size: 1.2rem; flex-shrink: 0; }
.acc-body { display: none; padding: 0 16px 16px; color: var(--text); }
.acc-item.open .acc-body { display: block; }
.acc-item.open .acc-ic { transform: rotate(45deg); }

/* ---------- Calculator ---------- */
.calc-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
@media (min-width: 900px) { .calc-grid { grid-template-columns: 400px 1fr; align-items: start; } }
.step-nav { display: flex; gap: 10px; justify-content: space-between; }
.calc-res-col { text-align: center; padding: 12px; border-radius: var(--radius); background: var(--bg-alt); }
.calc-res-col.hl { background: #fff7e0; border: 2px solid var(--accent); }
.calc-res-col h4 { margin: 0 0 8px; font-size: 1rem; }
.calc-res-col .big { font-size: 1.25rem; font-weight: 800; color: var(--brand-dark); }
.calc-detail-table td, .calc-detail-table th { font-size: .88rem; }

/* ---------- Compare picker ---------- */
.compare-picker { margin-bottom: 24px; }
.check-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 16px; }
.check { display: flex; gap: 8px; align-items: center; font-size: .92rem; }

/* ---------- Pagination / pills ---------- */
.pagination { display: flex; gap: 8px; justify-content: center; margin: 24px 0; flex-wrap: wrap; }
.pagination a, .pagination span {
  min-width: 38px; height: 38px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line); border-radius: 8px; background: #fff; color: var(--text); padding: 0 10px;
}
.pagination a.active { background: var(--brand); color: #fff; border-color: var(--brand); }
.cat-pills { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 20px; }
.cat-pills a { padding: 7px 16px; border: 1px solid var(--line); border-radius: 20px; font-size: .9rem; color: var(--text); }
.cat-pills a.active { background: var(--brand); color: #fff; border-color: var(--brand); }

/* ---------- Footer ---------- */
.site-footer { background: var(--brand-dark); color: #c9d8e8; margin-top: 40px; }
.footer-grid { display: grid; gap: 24px; grid-template-columns: 1fr; padding: 40px 16px 20px; }
@media (min-width: 700px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1000px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } }
.fcol h4 { color: #fff; margin-bottom: 12px; }
.fcol a { display: block; color: #c9d8e8; padding: 4px 0; font-size: .93rem; }
.fcol-zones { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 12px; }
.fcol-zones a { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fsocial { display: flex; gap: 10px; margin-top: 12px; }
.fsocial a { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; padding: 0; }
.fsocial a:hover { background: var(--accent); color: #fff; text-decoration: none; }
.fsocial-zalo span { font-size: .68rem; font-weight: 700; }
a.card { display: block; color: inherit; }
a.card:hover { text-decoration: none; }

/* ---------- Footer contact (icon + SĐT cùng một dòng) ---------- */
.fcontact-phone { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; margin: 2px 0 12px; max-width: 100%; }
.fcontact-icon { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; font-size: 1.55rem; line-height: 1; margin: 0; }
.fcontact-phone .fcontact-number { display: inline-block; flex: 0 1 auto; min-width: 0; font-size: 1.4rem; font-weight: 800; color: var(--accent); letter-spacing: .02em; text-decoration: none; line-height: 1.25; white-space: nowrap; padding: 0; }
.fcontact-phone .fcontact-number:hover { color: #fff; text-decoration: none; }
@media (max-width: 380px) {
  .fcontact-phone { gap: 8px; }
  .fcontact-icon { font-size: 1.35rem; }
  .fcontact-phone .fcontact-number { font-size: 1.22rem; }
}
.fcontact-email { margin: 0 0 14px; font-size: .93rem; color: #c9d8e8; word-break: break-word; }
.fcontact-zalo { width: 100%; justify-content: center; }

/* ---------- Page hero (ảnh riêng / gradient mặc định) ---------- */
.page-hero { background: linear-gradient(135deg, #071a33 0%, #0b2545 55%, #163a63 100%); color: #fff; padding: 52px 0; }
.page-hero h1 { color: #fff; margin: 0; font-size: 1.8rem; letter-spacing: .01em; }
.page-hero-bg { background-size: cover; background-position: center; position: relative; }
.page-hero-bg::before { content: ""; position: absolute; inset: 0; background: rgba(7,26,51,.55); }
.page-hero-bg .container { position: relative; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.15); padding: 16px 0; font-size: .82rem; }

/* ---------- Misc ---------- */
.richtext h2, .richtext h3 { margin-top: 1.2em; }
.richtext ul { padding-left: 20px; }
.richtext table { border-collapse: collapse; width: 100%; margin: 1em 0; }
.richtext th, .richtext td { border: 1px solid var(--line); padding: 8px 10px; }
.post-cover { border-radius: var(--radius); margin: 16px 0 24px; width: 100%; }
.mini-calc { max-width: 420px; margin: 0 auto; }
.quiz-opt { display: block; width: 100%; text-align: left; margin: 8px 0; }

/* ---------- Popup marketing ---------- */
.mk-popup { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 16px; }
.mk-popup[hidden] { display: none; }
.mk-popup-backdrop { position: absolute; inset: 0; background: rgba(15, 23, 42, .6); opacity: 0; transition: opacity .25s; }
.mk-popup-box { position: relative; background: #fff; border-radius: 16px; max-width: 420px; width: 100%; padding: 28px 24px 24px; text-align: center; box-shadow: 0 24px 64px rgba(2, 6, 23, .35); transform: translateY(16px) scale(.97); opacity: 0; transition: transform .25s, opacity .25s; max-height: 90vh; overflow-y: auto; }
.mk-popup.open .mk-popup-backdrop { opacity: 1; }
.mk-popup.open .mk-popup-box { transform: none; opacity: 1; }
.mk-popup-close { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f1f5f9; color: #475569; font-size: 15px; cursor: pointer; line-height: 1; }
.mk-popup-close:hover { background: #e2e8f0; }
.mk-popup-img { width: 100%; border-radius: 10px; margin-bottom: 14px; display: block; }
.mk-popup-title { font-size: 1.25rem; margin: 0 0 10px; color: var(--brand-dark, #0f2a4a); }
.mk-popup-text { color: #475569; font-size: .95rem; margin: 0 0 16px; line-height: 1.6; }
.mk-popup-btn { width: 100%; }

/* ---------- Mobile: header không vỡ, footer không tràn ---------- */
@media (max-width: 899px) {
  .header-inner { gap: 8px; }
  .logo { min-width: 0; flex: 1 1 auto; overflow: hidden; }
  .logo-text {
    display: block; white-space: nowrap; overflow: hidden;
    text-overflow: ellipsis; font-size: .95rem;
  }
  .header-cta { flex-shrink: 0; gap: 6px; }
  .header-cta .btn-call {
    flex-shrink: 0; white-space: nowrap;
    padding: 8px 10px; font-size: .85rem;
  }
  .menu-toggle { flex-shrink: 0; }
}
@media (max-width: 699px) {
  .fcol p { word-break: break-word; overflow-wrap: anywhere; }
  .fcol .btn-zalo {
    display: flex; width: 100%; justify-content: center;
    text-align: center; box-sizing: border-box;
  }
  .mobile-drawer a { overflow-wrap: anywhere; }
}

/* ---------- Zone gallery slider ---------- */
.zgal-main{position:relative;border-radius:var(--radius);overflow:hidden;background:#0f172a}
.zgal-main img{display:block;width:100%;height:auto;max-height:70vh;object-fit:contain}
.zgal-nav{position:absolute;top:50%;transform:translateY(-50%);width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.92);color:#0f172a;font-size:28px;line-height:1;cursor:pointer;box-shadow:0 2px 8px rgba(0,0,0,.25)}
.zgal-prev{left:12px}
.zgal-next{right:12px}
.zgal-nav:hover{background:#fff}
.zgal-thumbs{display:flex;gap:8px;overflow-x:auto;padding:10px 2px;-webkit-overflow-scrolling:touch;scrollbar-width:thin}
.zgal-thumb{flex:0 0 auto;border:2px solid transparent;border-radius:8px;overflow:hidden;padding:0;background:none;cursor:pointer;min-width:44px;min-height:44px}
.zgal-thumb img{display:block;width:96px;height:64px;object-fit:cover}
.zgal-thumb.active{border-color:var(--accent)}
.zgal-map img{display:block;width:100%;height:auto;border-radius:var(--radius);border:1px solid var(--line);background:#fff}

/* ============ Zone modules (.zmod-*) — mobile-first ============ */
.zmod-hero{position:relative;background:var(--brand-dark);background-size:cover;background-position:center;color:#fff;padding:56px 0 40px;overflow:hidden}
.zmod-hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,30,60,.72),rgba(10,30,60,.55))}
.zmod-hero-inner{position:relative;z-index:1}
.zmod-hero h1{color:#fff;font-size:1.7rem;margin:.4rem 0}
.zmod-hero-tag{color:#e8eef7;font-size:1.05rem;max-width:640px}
.zmod-hero-cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.btn-outline-light{display:inline-flex;align-items:center;gap:8px;border:2px solid #fff;color:#fff;border-radius:var(--radius);padding:10px 20px;font-weight:700;text-decoration:none}
.breadcrumb-light{color:#c9d8e8}
.breadcrumb-light a{color:#fff}

.zmod-nav{position:sticky;top:64px;z-index:90;background:#fff;border-bottom:1px solid var(--line);box-shadow:0 2px 8px rgba(0,0,0,.05)}
.zmod-nav-scroll{display:flex;gap:4px;overflow-x:auto;padding:10px 16px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.zmod-nav-scroll::-webkit-scrollbar{display:none}
.zmod-nav-scroll a{flex:0 0 auto;padding:8px 14px;border-radius:999px;font-size:.88rem;font-weight:600;color:var(--text);text-decoration:none;white-space:nowrap;background:#f1f5f9}
.zmod-nav-scroll a:hover{background:var(--brand);color:#fff}

.zmod-cols{display:grid;gap:20px}
@media(min-width:900px){.zmod-cols{grid-template-columns:1fr 1fr;align-items:start}}
.zmod-spec td:first-child{width:38%}
.zmod-desc{font-size:1rem;line-height:1.7}
.zmod-location{font-size:1rem;line-height:1.7;margin-bottom:16px}

.zmod-cards{display:grid;gap:14px;grid-template-columns:1fr}
@media(min-width:700px){.zmod-cards{grid-template-columns:repeat(2,1fr)}}
@media(min-width:1000px){.zmod-cards{grid-template-columns:repeat(3,1fr)}}
.zmod-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow)}
.zmod-card-icon{font-size:2rem;margin-bottom:8px}
.zmod-card h3{margin:0 0 6px;font-size:1.05rem}
.zmod-price-card{text-align:center}
.zmod-price-range{font-size:1.15rem;color:var(--brand-dark);margin:6px 0}

.zmod-amenities{display:grid;gap:10px;grid-template-columns:repeat(2,1fr)}
@media(min-width:700px){.zmod-amenities{grid-template-columns:repeat(3,1fr)}}
@media(min-width:1000px){.zmod-amenities{grid-template-columns:repeat(3,1fr)}}
.zmod-amenity{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:12px 14px;font-size:.95rem}
.zmod-amenity-icon{font-size:1.5rem;flex:0 0 auto}

.zmod-policy{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}
.zmod-policy-list{list-style:none;padding:0;margin:12px 0;display:grid;gap:8px}
.zmod-policy-list li{padding:10px 14px;background:#f8fafc;border-radius:8px;font-size:.95rem}

.zmod-cta-final{background:linear-gradient(135deg,var(--brand-dark),var(--brand));color:#fff}
.zmod-cta-final h2{color:#fff}
.zmod-cta-final .muted{color:#dbe7f5}

/* ---------- price_table_full block: bảng desktop / cards mobile ---------- */
.hide-mobile { display: none; }
.show-mobile { display: block; }
@media (min-width: 900px) {
  .hide-mobile { display: block; }
  .table-wrap.hide-mobile { display: block; }
  .show-mobile { display: none !important; }
}
.pcards-m { display: grid; gap: 10px; }
.pcard-m { background: #fff; border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: 1fr auto; gap: 4px 12px; text-decoration: none; color: inherit; align-items: center; }
.pcard-m .code { font-weight: 700; color: var(--brand-dark); font-size: 1rem; }
.pcard-m .typ { font-size: .82rem; color: var(--muted); }
.pcard-m .pr2 { font-weight: 700; color: var(--accent-dark); text-align: right; font-size: .95rem; }
.pcard-m .go { grid-column: 1 / -1; font-size: .82rem; color: var(--brand); font-weight: 600; }
.pcard-m:hover { border-color: var(--accent); text-decoration: none; }
.qna-tag { display: inline-block; font-size: .72rem; font-weight: 700; padding: 3px 10px; border-radius: 12px; background: var(--accent-light); color: var(--accent-dark); margin-bottom: 4px; }

/* ============================================================
 * COMPONENTS TỪ 9 MOCKUP ĐÃ DUYỆT (12/10/2026)
 * Mobile-first: base cho mobile, @media cho desktop.
 * Thêm mới hoàn toàn — không sửa CSS cũ bên trên.
 * ============================================================ */
.sec-title.center{text-align:center}

.site-header{position:sticky;top:0;z-index:100;background:#fff;box-shadow:var(--shadow)}

.logo-text strong{color:var(--accent-dark);font-family:var(--font-display)}

.main-nav a{color:var(--text);font-weight:500;font-size:.93rem;text-decoration:none}

.hero h1{color:#fff;font-size:2.4rem;letter-spacing:.015em;margin:10px 0 14px}

.hero h1 span{color:var(--accent);font-size:1.15rem;display:block;margin-top:10px;font-family:var(--font);font-weight:600;letter-spacing:.04em}

.hero .lead{color:#d9e4f2;max-width:640px;font-size:1.05rem}

.hstat strong{display:block;font-size:1.5rem;color:#fff;font-family:var(--font-display)}

.hstat span{font-size:.85rem;color:#b9c9dd}

.spec-table{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.spec-table td{padding:14px 18px;border-bottom:1px solid var(--line)}

.spec-table tr:last-child td{border-bottom:0}

.spec-table td:first-child{font-weight:600;color:var(--brand-dark);width:32%;background:var(--bg-alt)}

.ptable{display:none;width:100%;border-collapse:collapse;background:#fff;font-size:.93rem;box-shadow:var(--shadow);border-radius:var(--radius);overflow:hidden}

.ptable th{background:var(--brand);color:#fff;padding:12px;text-align:left;font-weight:600}

.ptable td{padding:12px;border-bottom:1px solid var(--line)}

.pcards{display:grid;gap:16px;grid-template-columns:1fr}

@media(min-width:700px){
.pcards{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1000px){
.pcards{grid-template-columns:repeat(4,1fr)}
}

.pcard{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:var(--shadow);border-top:4px solid var(--accent)}

.pcard h3{font-size:1.15rem;margin-bottom:8px}

.pcard p{font-size:.92rem;color:var(--muted)}

.pcard .pic{font-size:2rem;margin-bottom:12px}

.zgrid{display:grid;gap:16px;grid-template-columns:1fr}

@media(min-width:700px){
.zgrid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1000px){
.zgrid{grid-template-columns:repeat(3,1fr)}
}

.zcard{border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#fff}

.zcard .zimg{height:170px;background:linear-gradient(135deg,#163a63,#0b2545);display:flex;align-items:center;justify-content:center;color:#c9a24b;font-family:var(--font-display);font-size:1.3rem}

.zcard .zbody{padding:18px}

.zcard h3{font-size:1.2rem;margin-bottom:6px}

.zcard p{font-size:.9rem;color:var(--muted)}

.posts{display:grid;gap:16px;grid-template-columns:1fr}

@media(min-width:700px){
.posts{grid-template-columns:repeat(3,1fr)}
}

.post{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.post .pimg{height:140px;background:linear-gradient(135deg,#e9e1cf,#c9a24b)}

.post .pbody{padding:16px}

.post h3{font-size:1.05rem}

.faq-item{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px;padding:16px 18px}

.faq-item strong{color:var(--brand-dark)}

.cta-banner{background:linear-gradient(135deg,#071a33,#163a63);border-radius:16px;padding:44px 32px;text-align:center;color:#fff}

.cta-banner h2{color:#fff;font-size:1.7rem}

footer h4{color:#fff;font-family:var(--font-display);margin-bottom:14px}

footer a{color:#b9c9dd;text-decoration:none;font-size:.92rem}

.sec-head{margin-bottom:20px}

.sec-head h2{font-size:1.45rem;padding-bottom:10px;position:relative}

.sec-head h2::after{content:"";position:absolute;left:0;bottom:0;width:48px;height:3px;border-radius:2px;background:linear-gradient(90deg,var(--accent),var(--accent-dark))}

.sec-head p{color:var(--muted);font-size:.92rem;margin-top:6px}

.btn-dark{background:var(--brand);color:#fff}

.zhero{position:relative;min-height:420px;display:flex;align-items:flex-end;background:linear-gradient(135deg,#163a63,#0b2545);color:#fff;overflow:hidden}

.zhero-bg{position:absolute;inset:0;background:linear-gradient(135deg,#1a4a7a 0%,#0b2545 60%,#071a33 100%)}

.zhero-overlay{position:absolute;inset:0;background:linear-gradient(to top,rgba(7,26,51,.92) 0%,rgba(7,26,51,.4) 50%,rgba(7,26,51,.15) 100%)}

.zhero-inner{position:relative;padding:32px 16px;max-width:1180px;margin:0 auto;width:100%}

.crumbs{font-size:.8rem;color:#b9c9dd;margin-bottom:14px}

.crumbs a{color:#b9c9dd;text-decoration:none}

.zhero h1{color:#fff;font-size:2rem;margin-bottom:8px}

.ztag{color:var(--accent);font-size:1rem;font-weight:500;margin-bottom:16px}

.zhero-meta{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:20px}

.zpill{background:rgba(255,255,255,.14);backdrop-filter:blur(4px);border:1px solid rgba(255,255,255,.2);border-radius:30px;padding:7px 16px;font-size:.85rem;color:#fff}

.zpill strong{color:var(--accent)}

.zhero-cta{display:flex;gap:10px;flex-wrap:wrap}

.znav{position:sticky;top:0;z-index:50;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.08);overflow-x:auto}

.znav-in{display:flex;gap:4px;padding:10px 16px;max-width:1180px;margin:0 auto;overflow-x:auto;white-space:nowrap}

.znav a{padding:9px 18px;border-radius:24px;font-size:.88rem;font-weight:500;color:var(--text);text-decoration:none;flex-shrink:0}

.znav a.on,.znav a:hover{background:var(--brand);color:#fff}

.zstats{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-top:-36px;position:relative;z-index:10}

@media(min-width:700px){
.zstats{grid-template-columns:repeat(4,1fr)}
}

.zstat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:18px;text-align:center;border-top:3px solid var(--accent)}

.zstat strong{display:block;font-family:var(--font-display);font-size:1.5rem;color:var(--brand-dark)}

.zstat span{font-size:.8rem;color:var(--muted)}

.spec-grid{display:grid;gap:0;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}

.spec-row{display:grid;grid-template-columns:130px 1fr;border-bottom:1px solid var(--line)}

.spec-row:last-child{border:0}

.spec-row dt{background:var(--bg-alt);padding:13px 16px;font-weight:600;font-size:.88rem;color:var(--brand-dark)}

.spec-row dd{padding:13px 16px;font-size:.92rem}

.hl-grid{display:grid;gap:12px;grid-template-columns:1fr}

@media(min-width:700px){
.hl-grid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1000px){
.hl-grid{grid-template-columns:repeat(3,1fr)}
.hl-grid--c4{grid-template-columns:repeat(2,1fr)}
.hl-grid--c4 .hl:last-child{grid-column:auto}
}

.hl{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;border-left:4px solid var(--accent)}

.hl .ic{font-size:1.8rem;margin-bottom:10px}

.hl h3{font-size:1.05rem;margin-bottom:6px}

.hl p{font-size:.88rem;color:var(--muted)}

.pg-grid{display:grid;gap:12px;grid-template-columns:1fr}

@media(min-width:700px){
.pg-grid{grid-template-columns:repeat(3,1fr)}
}

.pg{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:22px;text-align:center;position:relative;overflow:hidden}

.pg::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;background:linear-gradient(90deg,var(--accent),var(--accent-dark))}

.pg h3{font-size:1.1rem;margin-bottom:8px}

.pg .pr{font-family:var(--font-display);font-size:1.35rem;color:var(--accent-dark);font-weight:700}

.pg .cnt{font-size:.8rem;color:var(--muted);margin:6px 0 12px}

.pcards-m{display:grid;gap:10px}

.pcard-m{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px;display:grid;grid-template-columns:1fr auto;gap:6px;align-items:center;text-decoration:none;color:inherit}

.pcard-m .code{font-weight:700;color:var(--brand-dark);font-size:1rem}

.pcard-m .typ{font-size:.82rem;color:var(--muted)}

.pcard-m .pr2{text-align:right;font-weight:700;color:var(--accent-dark)}

.pcard-m .go{grid-column:1/-1;font-size:.82rem;color:var(--brand);font-weight:600}

@media(min-width:900px){

  .pcards-m{display:none}

  .ptable{display:table;width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.92rem}

  .ptable th{background:var(--brand);color:#fff;padding:12px;text-align:left}

  .ptable td{padding:12px;border-bottom:1px solid var(--line)}

  .ptable tr:hover td{background:var(--bg-alt)}

  .ptable a{color:var(--brand);font-weight:600}
}

.gal{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

@media(min-width:700px){
.gal{grid-template-columns:repeat(3,1fr)}
}

.gal div{aspect-ratio:4/3;border-radius:12px;background:linear-gradient(135deg,#e9e1cf,#c9a24b);display:flex;align-items:center;justify-content:center;color:#7a6420;font-size:.85rem}

.zcta{background:linear-gradient(135deg,#071a33,#163a63);border-radius:18px;padding:36px 24px;text-align:center;color:#fff;margin:0 16px;max-width:1148px}

@media(min-width:1180px){
.zcta{margin:0 auto}
}

.zcta h2{color:#fff;font-size:1.5rem;margin-bottom:10px}

.zcta p{color:#b9c9dd;margin-bottom:20px;font-size:.95rem}

.zsticky{position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.1)}

.zsticky a{flex:1;text-align:center;padding:13px 8px;font-weight:600;font-size:.92rem;text-decoration:none;min-height:52px;display:flex;align-items:center;justify-content:center}

.zsticky .zs-call{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff}

.zsticky .zs-book{color:var(--brand)}

@media(min-width:900px){
.zsticky{display:none}
}

.phero{background:linear-gradient(135deg,#071a33,#163a63);color:#fff;padding:28px 0 32px}

.phero h1{color:#fff;font-size:1.9rem;margin-bottom:6px}

.psub{color:var(--accent);font-weight:500;margin-bottom:18px}

.phero-grid{display:grid;gap:20px}

@media(min-width:900px){
.phero-grid{grid-template-columns:1fr 340px;align-items:start}
}

.pimg-main{aspect-ratio:16/10;border-radius:var(--radius);background:linear-gradient(135deg,#1a4a7a,#0b2545);display:flex;align-items:center;justify-content:center;color:rgba(255,255,255,.4);font-family:var(--font-display);font-size:1.2rem}

.pcard-price{background:#fff;border-radius:var(--radius);padding:24px;box-shadow:0 8px 28px rgba(0,0,0,.2);color:var(--text)}

.pcard-price .lbl{font-size:.82rem;color:var(--muted)}

.pcard-price .pr{font-family:var(--font-display);font-size:1.9rem;color:var(--accent-dark);font-weight:800;margin:4px 0}

.pcard-price .pr-sub{font-size:.85rem;color:var(--muted);margin-bottom:16px}

.pcard-price .btn{width:100%;margin-bottom:10px}

.gthumbs{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}

.gthumbs div{aspect-ratio:1;border-radius:8px;background:linear-gradient(135deg,#e9e1cf,#c9a24b)}

.spec2{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

@media(min-width:700px){
.spec2{grid-template-columns:repeat(4,1fr)}
}

.sp{background:var(--bg-alt);border-radius:12px;padding:16px;text-align:center;border:1px solid var(--line)}

.sp .k{font-size:.78rem;color:var(--muted);text-transform:uppercase;letter-spacing:.05em}

.sp .v{font-weight:700;color:var(--brand-dark);font-size:1.05rem;margin-top:4px}

.rich{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;font-size:.95rem}

.rich p{margin-bottom:12px}

.am-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}

@media(min-width:700px){
.am-grid{grid-template-columns:repeat(3,1fr)}
}

.am{display:flex;gap:12px;align-items:flex-start;background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px 16px}

.am .ic{font-size:1.4rem;flex-shrink:0}

.am b{font-size:.92rem;display:block}

.am span{font-size:.82rem;color:var(--muted)}

.int{background:var(--bg-alt);border-radius:var(--radius);padding:22px;border:1px solid var(--line)}

.int ul{list-style:none}

.int li{padding:10px 0;border-bottom:1px dashed var(--line);font-size:.93rem;display:flex;gap:10px}

.int li:last-child{border:0}

.int li::before{content:"✓";color:var(--accent-dark);font-weight:700}

.sim-grid{display:grid;gap:12px;grid-template-columns:1fr}

@media(min-width:700px){
.sim-grid{grid-template-columns:repeat(3,1fr)}
}

.sim{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;color:inherit;display:block}

.sim .si{height:150px;background:linear-gradient(135deg,#163a63,#0b2545);display:flex;align-items:center;justify-content:center;color:var(--accent);font-family:var(--font-display)}

.sim .sb{padding:16px}

.sim h3{font-size:1.05rem;margin-bottom:4px}

.sim .sp2{color:var(--accent-dark);font-weight:700}

.psticky{position:fixed;bottom:0;left:0;right:0;z-index:90;display:flex;background:#fff;border-top:1px solid var(--line);box-shadow:0 -2px 12px rgba(0,0,0,.1)}

.psticky a{flex:1;text-align:center;padding:13px 8px;font-weight:600;font-size:.92rem;text-decoration:none;min-height:52px;display:flex;align-items:center;justify-content:center}

.psticky .ps-call{background:linear-gradient(135deg,var(--accent),var(--accent-dark));color:#fff}

.psticky .ps-lead{color:var(--brand)}

@media(min-width:900px){
.psticky{display:none}
}

.tabs{position:sticky;top:0;z-index:100;background:var(--brand-dark);padding:10px 0;overflow-x:auto}

.tabs-in{display:flex;gap:8px;max-width:1180px;margin:0 auto;padding:0 16px;overflow-x:auto}

.tab{padding:10px 20px;border-radius:24px;background:rgba(255,255,255,.1);color:#fff;border:0;font-family:var(--font);font-size:.9rem;font-weight:600;cursor:pointer;white-space:nowrap}

.tab.on{background:var(--accent);color:#fff}

.page{display:none}

.page.on{display:block}

.fcard{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:1px solid var(--line)}

.frow{margin-bottom:16px}

.frow label{display:block;font-weight:600;font-size:.9rem;margin-bottom:6px;color:var(--brand-dark)}

.frow input,.frow select,.frow textarea{width:100%;padding:12px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--font);font-size:.95rem;min-height:48px}

.frow textarea{min-height:100px;resize:vertical}

.f2{display:grid;gap:16px;grid-template-columns:1fr}

@media(min-width:700px){
.f2{grid-template-columns:1fr 1fr}
}

.cmp-wrap{overflow-x:auto}

.cmp{min-width:640px;width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);font-size:.9rem}

.cmp th{background:var(--brand);color:#fff;padding:14px}

.cmp th .zn{font-family:var(--font-display);font-size:1.1rem}

.cmp td{padding:12px 14px;border-bottom:1px solid var(--line);text-align:center}

.cmp td:first-child{text-align:left;font-weight:600;background:var(--bg-alt);white-space:nowrap}

.cmp .win{color:var(--accent-dark);font-weight:700}

.zsel{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:18px}

.zsel select{padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--font);min-height:48px;flex:1;min-width:160px}

.pfilter{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px}

.pfilter select,.pfilter input{padding:11px 14px;border:1px solid var(--line);border-radius:10px;font-family:var(--font);font-size:.9rem;min-height:48px}

.pcard .code{font-weight:700;color:var(--brand-dark)}

.pcard .meta{font-size:.82rem;color:var(--muted)}

.pcard .pr{font-weight:700;color:var(--accent-dark);text-align:right}

.pcard .go{grid-column:1/-1;font-size:.82rem;color:var(--brand);font-weight:600}

@media(min-width:900px){

  .pcards{display:none}

  .ptable{display:table;width:100%;border-collapse:collapse;background:#fff;box-shadow:var(--shadow);font-size:.92rem}

  .ptable th{background:var(--brand);color:#fff;padding:12px;text-align:left;position:sticky;top:57px}

  .ptable td{padding:12px;border-bottom:1px solid var(--line)}

  .ptable tr:hover td{background:var(--bg-alt)}

  .ptable a{color:var(--brand);font-weight:600;text-decoration:none}
}

.plan-tabs{display:flex;gap:8px;margin-bottom:18px;flex-wrap:wrap}

.plan{padding:10px 20px;border-radius:24px;border:2px solid var(--line);background:#fff;font-family:var(--font);font-weight:600;font-size:.88rem;cursor:pointer}

.plan.on{border-color:var(--accent);background:var(--accent-light);color:var(--accent-dark)}

.result{background:linear-gradient(135deg,#071a33,#163a63);border-radius:var(--radius);padding:24px;color:#fff}

.result h3{color:#fff;margin-bottom:14px}

.rrow{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid rgba(255,255,255,.12);font-size:.92rem}

.rrow:last-child{border:0}

.rrow b{color:var(--accent)}

.rrow.hl b{font-size:1.25rem}

input[type=range]{width:100%;accent-color:var(--accent-dark)}

.rval{font-weight:700;color:var(--accent-dark)}

.qna-item{background:#fff;border:1px solid var(--line);border-radius:12px;margin-bottom:12px;overflow:hidden}

.qna-q{padding:16px 18px;font-weight:600;color:var(--brand-dark);cursor:pointer;display:flex;justify-content:space-between;gap:10px}

.qna-a{padding:0 18px 16px;font-size:.92rem;color:var(--text);display:none}

.qna-item.open .qna-a{display:block}

.qna-tag{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:12px;background:var(--accent-light);color:var(--accent-dark);margin-bottom:8px}

.cats{display:flex;gap:8px;overflow-x:auto;padding:4px 0 16px;white-space:nowrap}

.cat{padding:9px 18px;border-radius:20px;border:1px solid var(--line);background:#fff;font-family:var(--font);font-size:.88rem;font-weight:500;cursor:pointer;flex-shrink:0}

.cat.on{background:var(--brand);color:#fff;border-color:var(--brand)}

.feat{display:grid;gap:16px;margin-bottom:24px}

@media(min-width:900px){
.feat{grid-template-columns:1.4fr 1fr}
}

.feat-main{position:relative;border-radius:var(--radius);overflow:hidden;min-height:300px;background:linear-gradient(135deg,#163a63,#0b2545);display:flex;align-items:flex-end;text-decoration:none}

.feat-main .fm-t{position:relative;padding:24px;color:#fff;background:linear-gradient(to top,rgba(7,26,51,.9),transparent)}

.feat-main h2{color:#fff;font-size:1.35rem;margin:8px 0}

.feat-side{display:grid;gap:12px}

.fs-item{display:flex;gap:12px;background:#fff;border:1px solid var(--line);border-radius:12px;overflow:hidden;text-decoration:none;color:inherit}

.fs-item .th{width:110px;min-height:90px;background:linear-gradient(135deg,#e9e1cf,#c9a24b);flex-shrink:0}

.fs-item .tx{padding:10px 12px 10px 0}

.fs-item h3{font-size:.95rem;margin-bottom:4px}

.fs-item .dt{font-size:.78rem;color:var(--muted)}

.pgrid{display:grid;gap:16px;grid-template-columns:1fr}

@media(min-width:700px){
.pgrid{grid-template-columns:repeat(2,1fr)}
}

@media(min-width:1000px){
.pgrid{grid-template-columns:repeat(3,1fr)}
}

.pcard .th{height:170px;background:linear-gradient(135deg,#e9e1cf,#c9a24b);display:flex;align-items:center;justify-content:center;color:#7a6420;font-size:.85rem}

.pcard .pb{padding:18px}

.pcard .ex{font-size:.88rem;color:var(--muted);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

.tag{display:inline-block;font-size:.72rem;font-weight:700;padding:4px 12px;border-radius:12px;background:var(--accent-light);color:var(--accent-dark)}

.dt{font-size:.8rem;color:var(--muted)}

.pagen{display:flex;gap:8px;justify-content:center;margin-top:28px}

.pagen a{width:44px;height:44px;display:flex;align-items:center;justify-content:center;border-radius:10px;border:1px solid var(--line);text-decoration:none;color:var(--text);font-weight:600}

.pagen a.on{background:var(--brand);color:#fff;border-color:var(--brand)}

.art-hero{background:var(--bg-alt);padding:36px 0 28px;border-bottom:1px solid var(--line)}

.art-hero h1{font-size:1.7rem;margin:10px 0 12px;max-width:800px}

@media(min-width:900px){
.art-hero h1{font-size:2.1rem}
}

.art-meta{display:flex;gap:16px;flex-wrap:wrap;font-size:.85rem;color:var(--muted)}

.art-layout{display:grid;gap:32px}

@media(min-width:1000px){
.art-layout{grid-template-columns:1fr 320px;align-items:start}
}

.art-body{font-size:1rem;line-height:1.8}

.art-body p{margin-bottom:16px}

.art-body h2{font-size:1.3rem;margin:28px 0 12px}

.art-body h3{font-size:1.1rem;margin:22px 0 10px}

.art-body img{max-width:100%;border-radius:12px;margin:16px 0}

.art-body table{width:100%;border-collapse:collapse;margin:16px 0;font-size:.92rem}

.art-body th{background:var(--brand);color:#fff;padding:10px;text-align:left}

.art-body td{padding:10px;border-bottom:1px solid var(--line)}

.art-body blockquote{border-left:4px solid var(--accent);background:var(--accent-light);padding:14px 18px;border-radius:0 10px 10px 0;margin:16px 0;font-style:italic}

.toc{background:#fff;border:1px solid var(--line);border-radius:12px;padding:18px;margin-bottom:20px}

.toc b{font-size:.92rem;display:block;margin-bottom:8px}

.toc a{display:block;font-size:.88rem;color:var(--brand);text-decoration:none;padding:4px 0}

.side-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:20px;margin-bottom:20px;position:sticky;top:70px}

.side-box h3{font-size:1.05rem;margin-bottom:12px}

.lead-box{background:linear-gradient(135deg,#071a33,#163a63);border-radius:var(--radius);padding:24px;color:#fff;text-align:center}

.lead-box h3{color:#fff;margin-bottom:8px}

.lead-box p{font-size:.88rem;color:#b9c9dd;margin-bottom:14px}

.lead-box input{width:100%;padding:12px;border-radius:10px;border:0;margin-bottom:10px;font-family:var(--font);min-height:48px}

.rel-item{display:flex;gap:10px;margin-bottom:12px;text-decoration:none;color:inherit}

.rel-item .th{width:80px;height:60px;border-radius:8px;background:linear-gradient(135deg,#e9e1cf,#c9a24b);flex-shrink:0}

.rel-item h4{font-size:.88rem;font-family:var(--font);font-weight:600}

.share{display:flex;gap:10px;margin:24px 0}

.share a{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:var(--bg-alt);border:1px solid var(--line);text-decoration:none;font-size:1.1rem}


/* Disclaimer giá ở từng section */
.price-disclaimer{background:#fff8e6;border:1px solid #f0d98c;color:#7a5c00;font-size:13px;padding:12px 16px;border-radius:10px;margin:16px 0;line-height:1.6}
@media(max-width:768px){.price-disclaimer{font-size:11px;padding:10px 12px;margin:12px 0;line-height:1.5}}
/* Disclaimer footer */
.footer-disclaimer{background:#0f2240;color:#9fb3d1;font-size:12px;padding:16px 0;border-top:1px solid rgba(255,255,255,.08)}
.footer-disclaimer p{margin:0;line-height:1.6}
.footer-disclaimer strong{color:#d4af6a}
@media(max-width:768px){.footer-disclaimer{font-size:11px;padding:12px 0}}

/* Mini slider trong cột phải phần Tổng quan */
.zmini{position:relative;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);margin-top:16px;background:#000}
.zmini-main{position:relative;aspect-ratio:16/9;overflow:hidden}
.zmini-main img{width:100%;height:100%;object-fit:cover;display:block}
.zmini-nav{position:absolute;top:50%;transform:translateY(-50%);width:34px;height:34px;border-radius:50%;border:0;background:rgba(0,0,0,.45);color:#fff;font-size:20px;line-height:1;cursor:pointer;z-index:2}
.zmini-prev{left:8px}.zmini-next{right:8px}
.zmini-nav:hover{background:rgba(0,0,0,.7)}
.zmini-dots{position:absolute;bottom:8px;left:0;right:0;display:flex;gap:6px;justify-content:center;z-index:2}
.zmini-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.5);cursor:pointer;padding:0}
.zmini-dots button.on{background:#fff}
.zmini-count{position:absolute;top:8px;right:10px;background:rgba(0,0,0,.55);color:#fff;font-size:.75rem;padding:2px 8px;border-radius:10px;z-index:2}

/* Video phân khu */
.zvideo{position:relative;aspect-ratio:16/9;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);background:#000;max-width:860px;margin:0 auto}
.zvideo iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* Tiến độ phân khu */
.zprogress{max-width:860px;margin:0 auto}

/* Lightbox xem ảnh phóng to */
.zlb{position:fixed;inset:0;z-index:9999;background:rgba(0,0,0,.92);display:none;align-items:center;justify-content:center;flex-direction:column;opacity:0;transition:opacity .25s ease}
.zlb.open{display:flex;opacity:1}
.zlb img{max-width:92vw;max-height:82vh;object-fit:contain;border-radius:8px;box-shadow:0 10px 40px rgba(0,0,0,.5);transform:scale(.96);transition:transform .25s ease}
.zlb.open img{transform:scale(1)}
.zlb-cap{color:#fff;margin-top:12px;font-size:.9rem;opacity:.85}
.zlb-close{position:absolute;top:16px;right:20px;width:44px;height:44px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:26px;cursor:pointer;line-height:1}
.zlb-close:hover{background:rgba(255,255,255,.3)}
.zlb-nav{position:absolute;top:50%;transform:translateY(-50%);width:52px;height:52px;border-radius:50%;border:0;background:rgba(255,255,255,.15);color:#fff;font-size:30px;cursor:pointer;line-height:1}
.zlb-nav:hover{background:rgba(255,255,255,.3)}
.zlb-prev{left:16px}.zlb-next{right:16px}
.zmini-main{cursor:zoom-in}
@media(max-width:700px){.zlb-nav{width:42px;height:42px;font-size:24px}.zlb-prev{left:8px}.zlb-next{right:8px}}

/* Hero slider trang chủ */
.hero-slider{position:relative;overflow:hidden;background:#071a33}
.hero-slides{position:absolute;inset:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease;transform:scale(1.02)}
.hero-slide.on{opacity:1}
.hero-overlay{position:absolute;inset:0;background:linear-gradient(180deg,rgba(7,26,51,.55) 0%,rgba(7,26,51,.35) 50%,rgba(7,26,51,.65) 100%)}
.hero-content{position:relative;z-index:2}
.hero-dots{position:absolute;bottom:18px;left:0;right:0;display:flex;gap:8px;justify-content:center;z-index:3}
.hero-dots button{width:10px;height:10px;border-radius:50%;border:0;background:rgba(255,255,255,.4);cursor:pointer;padding:0;transition:.2s}
.hero-dots button.on{background:#fff;transform:scale(1.2)}

/* Thumb đồng nhất kích thước — tránh vỡ layout khi ảnh upload kích thước khác nhau */
.card-thumb{width:100%;height:160px;object-fit:cover;display:block;background:#eef2f7}
.card-thumb--sm{height:150px}
a.card.post-card img.card-thumb{border-radius:0}
.grid .card.post-card{overflow:hidden}

/* Đánh giá khách hàng — trang chi tiết căn */
.rev-summary{font-size:1.05rem;margin:0 0 14px}
.rev-stars{color:#E8A33D;letter-spacing:2px;font-size:1.05em;white-space:nowrap}
.rev-item{border:1px solid var(--line,#e3e8ef);border-radius:12px;padding:14px 16px;margin:0 0 12px;background:#fff}
.rev-head{margin:0 0 6px;display:flex;gap:10px;align-items:baseline;flex-wrap:wrap}
.rev-date{color:var(--muted,#7a8794);font-size:.82rem;margin-left:auto}
.rev-body{margin:0;line-height:1.6}
.rev-form{margin-top:22px}
.star-input{display:inline-flex;flex-direction:row-reverse;gap:2px}
.star-input input{position:absolute;opacity:0;width:1px;height:1px}
.star-input label{font-size:1.9rem;line-height:1;color:#cbd5e1;cursor:pointer;margin:0}
.star-input label:hover,.star-input label:hover~label,.star-input input:checked~label{color:#E8A33D}
.star-input input:focus-visible+label{outline:2px solid var(--gold,#B98A2F);outline-offset:2px}

/* ===== Trang danh sách phân khu /phan-khu (mobile-first) — v2 16/10/2026 =====
   Sửa lỗi lệch hàng: header sticky cao 64px (z-index 100) —
   chips phải dính DƯỚI header (top:64px) thay vì top:0 (bị header che, tên lệch/cắt).
   Thẻ dùng flex-column, chân thẻ ghim đáy; tên/slogan/mô tả khóa số dòng để thẳng hàng. */
.zi-hero{background:linear-gradient(135deg,#0C2D4D 0%,#14507E 60%,#1B6CA8 100%);color:#fff;padding:44px 0 36px;text-align:center}
.zi-kicker{margin:0 0 8px;font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;color:#F2C063;font-weight:700}
.zi-hero h1{margin:0 0 12px;font-size:1.7rem;line-height:1.25}
.zi-sub{margin:0 auto;max-width:720px;opacity:.92;line-height:1.65;font-size:.98rem}
.zi-stats{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:22px}
.zi-stats>div{flex:1 1 calc(50% - 10px);background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:12px;padding:10px 8px;text-align:center}
.zi-stats b{display:block;font-size:1.22rem;color:#F2C063;line-height:1.2}
.zi-stats span{font-size:.8rem;opacity:.9}
.zi-chips{position:sticky;top:64px;z-index:40;display:flex;align-items:center;gap:8px;height:58px;padding:0 14px;overflow-x:auto;background:rgba(255,255,255,.97);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border-bottom:1px solid #e8edf3;scrollbar-width:none;-webkit-overflow-scrolling:touch}
.zi-chips::-webkit-scrollbar{display:none}
.zi-chips a{flex:0 0 auto;display:inline-flex;align-items:center;height:38px;padding:0 15px;line-height:1;white-space:nowrap;border:1px solid #d7e0ea;border-radius:999px;color:#0C2D4D;font-weight:600;font-size:.88rem;text-decoration:none;background:#fff}
.zi-chips a:active,.zi-chips a:hover{background:#0C2D4D;color:#fff}
.zi-grid{display:grid;grid-template-columns:1fr;gap:20px;align-items:stretch}
.zi-card{display:flex;flex-direction:column;background:#fff;border:1px solid #e8edf3;border-radius:16px;overflow:hidden;box-shadow:0 2px 10px rgba(12,45,77,.06);scroll-margin-top:134px}
.zi-media{position:relative;display:block;aspect-ratio:16/10;background:linear-gradient(135deg,#dbe7f3,#f3e3bd);overflow:hidden;flex:0 0 auto}
.zi-media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .45s ease}
.zi-card:hover .zi-media img{transform:scale(1.05)}
.zi-media-fallback{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-size:1.5rem;font-weight:800;color:#0C2D4D;opacity:.55;padding:16px;text-align:center}
.zi-num{position:absolute;top:12px;left:12px;background:rgba(12,45,77,.92);color:#F2C063;padding:4px 12px;border-radius:999px;font-size:.82rem;font-weight:800;letter-spacing:.06em;line-height:1.4}
.zi-count{position:absolute;bottom:12px;left:12px;background:rgba(255,255,255,.94);color:#0C7A4D;padding:4px 10px;border-radius:999px;font-size:.8rem;font-weight:700;line-height:1.4}
.zi-body{display:flex;flex-direction:column;flex:1;padding:18px 18px 16px}
.zi-body h2{margin:0 0 6px;font-size:1.28rem;line-height:1.3}
.zi-body h2 a{color:#0C2D4D;text-decoration:none}
.zi-tag{margin:0 0 8px;color:#B98A2F;font-weight:600;font-size:.95rem;line-height:1.5}
.zi-desc{margin:0 0 6px;color:#5b6b7d;line-height:1.6;font-size:.93rem}
.zi-foot{display:flex;justify-content:space-between;align-items:flex-end;gap:12px;margin-top:auto;padding-top:12px;border-top:1px solid #eef2f7}
.zi-price-label{display:block;font-size:.75rem;color:#8595a7;text-transform:uppercase;letter-spacing:.08em}
.zi-price b{font-size:1.12rem;color:#B45309;white-space:nowrap}
.zi-cta{flex:0 0 auto;font-weight:700;color:#0C2D4D;text-decoration:none;padding:10px 6px;white-space:nowrap}
.zi-note{margin:8px 0 0;font-size:.76rem;color:#93a3b5}
.zi-help{margin-top:36px;text-align:center;padding:30px 20px;background:#f7fafc;border:1px solid #e8edf3;border-radius:16px}
.zi-help h2{margin:0 0 10px;font-size:1.3rem;color:#0C2D4D}
.zi-help p{margin:0 auto 18px;color:#5b6b7d;max-width:560px;line-height:1.6}
.zi-help-btns{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
/* ===== Nội dung SEO dưới lưới phân khu ===== */
.zi-seo{max-width:880px;margin:48px auto 0}
.zi-seo h2{font-size:1.45rem;line-height:1.35;color:#0C2D4D;margin:36px 0 12px}
.zi-seo h2:first-child{margin-top:0}
.zi-seo h3{font-size:1.08rem;color:#0C2D4D;margin:22px 0 6px}
.zi-seo p{color:#3d4f63;line-height:1.75;margin:0 0 12px}
.zi-seo a{color:#14507E;font-weight:600}
.zi-faq{margin-top:8px}
.zi-faq>div{padding:16px 0;border-bottom:1px solid #e8edf3}
.zi-faq>div:first-child{border-top:1px solid #e8edf3}
.zi-faq h3{margin:0 0 6px}
.zi-faq p{margin:0}
@media (min-width:640px){
  .zi-grid{grid-template-columns:repeat(2,1fr)}
  .zi-hero h1{font-size:2.1rem}
  .zi-stats{flex-wrap:nowrap;max-width:720px;margin-left:auto;margin-right:auto}
  .zi-stats>div{flex:1 1 0}
  .zi-body h2{min-height:2.6em}
  .zi-tag{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:3em}
  .zi-desc{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;min-height:4.8em}
}
@media (min-width:1024px){
  .zi-grid{grid-template-columns:repeat(3,1fr)}
  .zi-hero{padding:60px 0 44px}
  .zi-hero h1{font-size:2.4rem}
  .zi-chips{justify-content:center}
}


/* ============ LANDING /nhan-bang-gia (v34 r3) ============ */
/* Toàn bộ khối .lp-* chỉ dùng cho trang /nhan-bang-gia. Thiết kế mobile-first:
   mỗi khối gọn xấp xỉ vừa 1 màn hình điện thoại, không tính header dính + thanh dính dưới. */

/* --- Hero (slide ảnh + overlay) --- */
.lp-hero{position:relative;overflow:hidden;background:linear-gradient(135deg,#0c3b4f 0%,#0e6b5c 60%,#0c4a6e 100%);color:#fff;min-height:calc(100svh - 116px);display:flex;align-items:center}
.lp-hero-slides{position:absolute;inset:0}
.lp-hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transition:opacity .8s ease}
.lp-hero-slide.on{opacity:1}
.lp-hero-overlay{position:absolute;inset:0;background:linear-gradient(200deg,rgba(4,25,35,.62) 0%,rgba(4,25,35,.42) 40%,rgba(4,25,35,.72) 100%)}
.lp-hero-content{position:relative;z-index:2;padding-top:36px;padding-bottom:52px;max-width:980px}
.lp-eyebrow{letter-spacing:.12em;text-transform:uppercase;font-size:.72rem;opacity:.85;margin:0 0 10px}
.lp-h1{font-size:2rem;line-height:1.22;margin:0 0 10px;color:#fff;text-shadow:0 1px 12px rgba(0,0,0,.45)}
.lp-sub{font-size:1rem;opacity:.94;max-width:620px;margin:0 0 18px;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.lp-stats{display:flex;gap:24px;flex-wrap:wrap;margin:0 0 20px}
.lp-stat strong{display:block;font-size:1.45rem;text-shadow:0 1px 8px rgba(0,0,0,.4)}
.lp-stat span{font-size:.82rem;opacity:.88}
.lp-hero-cta{display:flex;gap:10px;flex-wrap:wrap}
.lp-hero-dots{position:absolute;left:0;right:0;bottom:14px;z-index:2;display:flex;gap:8px;justify-content:center}
.lp-hero-dots button{width:8px;height:8px;border-radius:50%;border:0;background:rgba(255,255,255,.45);cursor:pointer;padding:0}
.lp-hero-dots button.on{background:#fff}

/* --- Chung cho các khối --- */
.lp-sec{padding-top:26px;padding-bottom:26px}
.lp-sec .sec-title{font-size:1.22rem;margin:0 0 12px}
.lp-note{margin-top:10px;font-size:.88rem}
.lp-band{background:#f7faf9}
#dang-ky{scroll-margin-top:84px} /* neo form: tránh header dính che tiêu đề */

/* --- CSBH V44 --- */
.lp-policy{margin:0 0 10px;padding-left:0;list-style:none;display:grid;gap:10px}
.lp-policy li{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:10px 12px;font-size:.93rem;line-height:1.5}

/* --- Form --- */
.lp-form .field{margin-bottom:14px}
.lp-form label{display:block;font-weight:600;margin-bottom:6px;font-size:.95rem}
.lp-form input,.lp-form select,.lp-form textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:8px;font-size:1rem;font-family:inherit;background:#fff}
.lp-form input:focus,.lp-form select:focus,.lp-form textarea:focus{outline:2px solid #0e6b5c;border-color:#0e6b5c}
.lp-row2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.lp-row2 .field{margin-bottom:14px}
.lp-row2 select{font-size:.92rem}
.ferr{color:#dc2626;font-size:.82rem;margin:4px 0 0;min-height:1.2em}
.ferr:empty{display:none}
.ferr-on{border-color:#dc2626 !important}
.lp-hp{position:absolute !important;left:-9999px;top:auto;width:1px !important;height:1px;opacity:0}
.lp-privacy{margin-top:10px;text-align:center}

/* --- Thẻ khoảng giá: kích thước CỐ ĐỊNH bằng nhau --- */
.lp-prices{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:14px}
.lp-price-card{flex:0 0 calc(50% - 5px);max-width:calc(50% - 5px);min-height:86px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;border:1px solid #e2e8f0;border-radius:10px;background:#fff;color:inherit;text-decoration:none;padding:10px 8px;text-align:center}
.lp-price-card:hover{border-color:#0e6b5c}
.lp-price-card strong{font-size:.95rem;line-height:1.25;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.lp-price-card.lp-long strong{font-size:.8rem}
.lp-price-card span{font-size:.85rem;color:#0e6b5c;font-weight:600;white-space:nowrap}

/* --- Lưới 11 phân khu (có ảnh, không giá) --- */
.lp-zone-grid{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:14px}
.lp-zone-card{flex:0 0 calc(50% - 6px);max-width:calc(50% - 6px);background:#fff;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;color:inherit;text-decoration:none;display:flex;flex-direction:column}
.lp-zone-card:hover{border-color:#0e6b5c}
.lz-img{display:block;aspect-ratio:16/9;background:#e8eef0;overflow:hidden}
.lz-img img{width:100%;height:100%;object-fit:cover;display:block}
.lz-body{display:flex;flex-direction:column;gap:4px;padding:10px 12px 12px}
.lz-body strong{font-size:.98rem;line-height:1.3}
.lz-body span{font-size:.84rem;color:#475569;line-height:1.45;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.lz-body .link{font-size:.84rem;color:#0e6b5c;font-weight:600}

/* --- Tiện ích --- */
.lp-amen{list-style:none;margin:0;padding:0;display:grid;gap:8px;grid-template-columns:1fr 1fr}
.lp-amen li{background:#fff;border:1px solid #e2e8f0;border-radius:10px;padding:9px 10px;font-size:.88rem;line-height:1.45}

/* --- FAQ --- */
.lp-faq{border:1px solid #e2e8f0;border-radius:10px;background:#fff;margin-bottom:8px}
.lp-faq summary{padding:12px 14px;cursor:pointer;font-weight:600;font-size:.95rem}
.lp-faq p{padding:0 14px 12px;margin:0;color:#334155;font-size:.92rem}

/* --- Thanh dính riêng của landing --- */
.lp-sticky{display:none;position:fixed;left:0;right:0;bottom:0;z-index:60;background:#fff;border-top:1px solid #e2e8f0;box-shadow:0 -4px 16px rgba(0,0,0,.08);transition:transform .25s ease}
.lp-sticky .sb-item{flex:1;display:flex;align-items:center;justify-content:center;padding:13px 6px;text-decoration:none;font-weight:700}
.lp-sticky .sb-item span{font-size:.85rem}
.sb-lead{background:#0e6b5c;color:#fff}
.lp-sticky.is-hidden{transform:translateY(110%)} /* ẩn khi khối form đang hiển thị */

@media (max-width:899px){
  .lp-h1{font-size:1.45rem}
  .lp-hero{min-height:calc(100svh - 116px)}
  .lp-amen{grid-template-columns:1fr}
  .lp-sticky{display:flex}
  body:has(.lp-sticky){padding-bottom:56px}
}
@media (min-width:900px){
  .lp-hero{min-height:520px;max-height:640px}
  .lp-price-card,.lp-zone-card{flex:0 0 calc(25% - 8px);max-width:calc(25% - 8px)}
  .lp-zone-grid{justify-content:center}
  .lp-amen{grid-template-columns:1fr 1fr 1fr}
}

/* ===== r4: khối form #dang-ky nổi bật (ghi đè một số rule .lp-* ở trên) ===== */
#dang-ky{position:relative;overflow:hidden;background:linear-gradient(160deg,#0b2545 0%,#071c36 60%,#041224 100%);padding-top:44px;padding-bottom:44px}
#dang-ky::before{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(620px 260px at 12% 0%,rgba(185,138,47,.18),transparent 70%),radial-gradient(540px 260px at 90% 100%,rgba(185,138,47,.12),transparent 70%)}
#dang-ky .container{position:relative;z-index:1}
#dang-ky .sec-title{color:#fff;text-align:center;font-size:1.45rem;margin:0 0 8px}
.lp-form-sub{color:rgba(255,255,255,.85);text-align:center;margin:0 0 18px;font-size:.95rem}
.lp-form{background:#fff;border-radius:18px;border:1px solid rgba(185,138,47,.35);border-top:5px solid #B98A2F;box-shadow:0 24px 60px rgba(0,0,0,.45),0 4px 14px rgba(0,0,0,.25);padding:26px 22px;max-width:560px;margin:0 auto}
.lp-form label{color:#0b2545;font-weight:700}
.lp-form input,.lp-form select,.lp-form textarea{min-height:48px;border:1.5px solid #94a3b8;border-radius:10px;padding:12px 14px}
.lp-form input:focus,.lp-form select:focus,.lp-form textarea:focus{outline:none;border-color:#B98A2F;box-shadow:0 0 0 3px rgba(185,138,47,.28)}
.lp-form .btn-primary.btn-block{display:block;width:100%;min-height:54px;font-size:1.08rem;font-weight:800;color:#0b2545;background:linear-gradient(135deg,#e3b95c 0%,#B98A2F 100%);border:0;border-radius:12px;box-shadow:0 8px 22px rgba(185,138,47,.45);margin-top:6px;cursor:pointer}
.lp-form .btn-primary.btn-block:hover{filter:brightness(1.05);box-shadow:0 10px 26px rgba(185,138,47,.55)}
.lp-form .btn-primary.btn-block:active{transform:translateY(1px)}
.lp-privacy{color:#475569}
@media (min-width:900px){
  .lp-form{padding:34px 36px}
  #dang-ky .sec-title{font-size:1.6rem}
  #dang-ky{padding-top:56px;padding-bottom:56px}
}

/* ===== v35: Landing /the-harbor-skyline (tái dùng tối đa .lp-*; chỉ thêm riêng phần cần) ===== */
#loai-can{scroll-margin-top:84px} /* neo khối loại căn */
.hb-h3{font-size:1.02rem;margin:18px 0 10px;color:#0b2545}
.hb-table{width:100%;border-collapse:collapse;font-size:.92rem;background:#fff;border-radius:12px;overflow:hidden;box-shadow:var(--shadow)}
.hb-table th,.hb-table td{padding:10px 12px;border:1px solid #e2e8f0;text-align:left;vertical-align:top}
.hb-table th{background:#f1f5f9;font-weight:600;color:#0b2545;width:36%}
.hb-units{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:14px}
.hb-unit{background:#fff;border:1px solid #e2e8f0;border-radius:12px;padding:12px 14px}
.hb-unit:hover{border-color:#0e6b5c}
.hb-unit strong{display:block;font-size:1rem}
.hb-unit .area{color:#0e6b5c;font-weight:700;font-size:.92rem}
.hb-unit .cap{font-size:.82rem;color:#475569;display:block;margin-top:4px}
.hb-unit .tag{display:inline-block;margin-top:6px;font-size:.75rem;background:#fef3c7;color:#92400e;border-radius:6px;padding:2px 8px}
.hb-note{background:#fffbeb;border:1px solid #fde68a;border-radius:10px;padding:10px 14px;font-size:.88rem;color:#92400e;margin-top:12px}
.hb-callout{background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:14px 16px;font-size:.93rem;color:#1e3a8a;margin-bottom:14px}
.hb-price-box{background:#fff;border:1px dashed #B98A2F;border-radius:12px;padding:16px;margin-bottom:6px}
.hb-timeline{list-style:none;margin:6px 0 0;padding:0}
.hb-timeline li{position:relative;padding:0 0 20px 30px;border-left:2px solid #e2e8f0;margin-left:8px}
.hb-timeline li:last-child{padding-bottom:0}
.hb-timeline li::before{content:"";position:absolute;left:-9px;top:2px;width:16px;height:16px;border-radius:50%;background:#0e6b5c;border:3px solid #fff;box-shadow:0 0 0 2px rgba(14,107,92,.25)}
.hb-timeline strong{display:block;font-size:.96rem;margin-bottom:2px}
.hb-timeline span{font-size:.89rem;color:#475569}
@media (min-width:900px){.hb-units{grid-template-columns:repeat(4,1fr)}}
/* v35 update: hero dùng <img> riêng cho The Harbor Skyline + ảnh minh họa trong bài */
img.hb-hero-slide{display:block;width:100%;height:100%;object-fit:cover;object-position:center}
.hb-img{margin:18px auto 0;max-width:960px}
.hb-img img{display:block;width:100%;height:auto;border-radius:14px;box-shadow:var(--shadow)}
.hb-img figcaption{font-size:.83rem;color:#64748b;text-align:center;margin-top:8px}