/* 2/3 · Riêng dự án The Sailing: thẻ căn, mặt bằng tương tác, chính sách, cho thuê, pháp lý */
/* ===== The Sailing Quy Nhơn: brand tokens (navy · gold · sea) ===== */
:root{
  --bg:#F4F6F9; --surface:#FFFFFF; --line:#DCE2EB; --fg:#13213A; --muted:#556179;
  --clay:#1E3D72; --clay-2:#2D5899; --sea:#0B6E8A; --sea-soft:#E2F0F5; --gold:#B88A3E;
  --band:#0D2141; --band-fg:#EEF3FA; --band-muted:#AEBFD8;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0A1322; --surface:#101C31; --line:#22314B; --fg:#E5ECF6; --muted:#9DAEC6;
  --clay:#3F6FBF; --clay-2:#6B95DA; --sea:#5FC0DA; --sea-soft:#10303B; --gold:#D9B26A;
  --band:#071528; --band-fg:#EEF3FA; --band-muted:#A6B8D2; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0A1322; --surface:#101C31; --line:#22314B; --fg:#E5ECF6; --muted:#9DAEC6;
  --clay:#3F6FBF; --clay-2:#6B95DA; --sea:#5FC0DA; --sea-soft:#10303B; --gold:#D9B26A;
  --band:#071528; --band-fg:#EEF3FA; --band-muted:#A6B8D2; color-scheme:dark}
body{margin:0}
.brand{flex-direction:row;align-items:center;gap:10px}
.brand img{width:40px;height:40px;object-fit:contain}
.brand span{display:flex;flex-direction:column;line-height:1.1}
.brand b{font-size:1.45rem}
.sub{font-size:.85rem;color:var(--muted)}
.zoom-tag{background:rgba(10,24,48,.72)}
.strip figure::after{background:rgba(10,24,48,.6)}
.strip figure,.strip figure.p,.pz .zv{background:#EEF2F7}
.strip figure.p{aspect-ratio:2400/1350}
.strip figure.p figcaption{background:linear-gradient(transparent,rgba(10,24,48,.75))}
.vid{background:#0b1830}
.ud-lay img{background:#fff}
dialog.ud::backdrop{background:rgba(6,14,28,.66)}
.unit[data-unit]:hover{box-shadow:0 10px 28px -14px rgba(13,33,65,.45)}
.ud-main::after,.zl::after{background:rgba(10,24,48,.65)}
.zc button{color:#13213A}
.lg-pages,.ho-orig{background:#3b4658}
.plogo{height:56px}
.plogo img{height:46px;max-width:190px}
.partners div{align-content:start}
/* hero */
.hero-img img{object-position:50% 55%}
/* unit cards */
.units{grid-template-columns:repeat(4,minmax(0,1fr))}
.unit .tw{display:grid;grid-template-columns:auto 1fr;gap:4px 12px;font-size:.88rem;margin:4px 0 0}
.unit .tw dt{color:var(--muted)}
.unit .tw dd{margin:0;text-align:right;font-weight:600}
.unit .tw .h{grid-column:1/-1;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--clay);font-weight:700;margin-top:6px;border-top:1px solid var(--line);padding-top:8px}
@media (max-width:980px){.units{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.units{grid-template-columns:minmax(0,1fr)}}
.styles{margin-top:clamp(32px,4vw,48px)}
.styles .int3{margin-top:14px}
/* interactive plan */
.vp-head .ud-tabs{flex-wrap:wrap}
.vp-grid{grid-template-columns:minmax(0,1.55fr) minmax(0,1fr)}
@media (max-width:1000px){.vp-grid{grid-template-columns:minmax(0,1fr)}}
.aer{background:#fff;cursor:zoom-in}
.hs{width:3.1%;min-width:22px;border:2px solid rgba(30,61,114,.35);background:rgba(255,255,255,.15)}
.hs.av{border-color:#0B6E8A;background:rgba(11,110,138,.22)}
.hs.av::after{content:"";position:absolute;right:-3px;top:-3px;width:9px;height:9px;border-radius:50%;background:#16A34A;border:2px solid #fff}
.hs:hover,.hs:focus-visible{border-color:var(--gold);box-shadow:0 0 0 3px rgba(184,138,62,.5)}
.hs.on{border-color:#fff;background:rgba(184,138,62,.35)}
.legend .p1{background:#CDBBE3}.legend .p2{background:#B5E2D4}.legend .p3{background:#F3B5CB}
.legend .av{background:#16A34A;border-radius:50%!important}
.pill.p1{background:#7B5BA6}.pill.p2{background:#1F8A70}.pill.p3{background:#B9476E}
.vp-panel{display:flex;flex-direction:column}
.vp-lay{all:unset;box-sizing:border-box;position:relative;display:block;cursor:zoom-in;background:#fff;border-bottom:1px solid var(--line);aspect-ratio:4/3.4}
.vp-lay img{width:100%;height:100%;object-fit:contain;display:block}
.vp-info{grid-template-columns:1fr!important}
.vp-info dl{grid-column:auto!important}
.vp-avail{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.vp-avail>b{font-size:.9rem}
#vpAv{display:flex;flex-wrap:wrap;gap:6px}
#vpAv button{font:600 .82rem var(--body);padding:7px 10px;border-radius:8px;border:1px solid var(--line);background:var(--bg);color:var(--fg);cursor:pointer;min-height:40px;display:grid;line-height:1.2;text-align:left}
#vpAv button small{font-weight:500;color:var(--muted);font-size:.74rem}
#vpAv button:hover{border-color:var(--clay);color:var(--clay)}
#vpAv p{font-size:.85rem;color:var(--muted);margin:0}
/* policy */
.cs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:clamp(28px,4vw,40px)}
.cs-col{background:var(--surface);border:1px solid var(--line);border-top:3px solid var(--clay);border-radius:var(--r);padding:clamp(16px,2.4vw,24px)}
.cs-col .cs-key{grid-template-columns:1fr}
.cs-loan{grid-column:1/-1;display:grid;grid-template-columns:150px minmax(0,1fr);gap:10px 20px;background:var(--sea-soft);border-radius:var(--r);padding:clamp(16px,2.4vw,24px);font-size:.93rem}
.cs-loan b{color:var(--sea)}
@media (max-width:860px){.cs2{grid-template-columns:minmax(0,1fr)}.cs-loan{grid-template-columns:minmax(0,1fr);gap:4px}.cs-loan span{margin-bottom:10px}}
.pc-unit{margin-top:12px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--line);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pc-unit div{background:var(--bg);padding:10px 12px;display:grid;gap:2px}
.pc-unit span{font-size:.74rem;color:var(--muted)}
.pc-unit b{font-size:.92rem}
@media (max-width:560px){.pc-unit{grid-template-columns:1fr 1fr}}
optgroup{font-weight:700}
/* rental */
.rc-in{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr;gap:12px}
.rc-in label{color:var(--band-fg);font-weight:600}
.rent input,.rent select{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.25);color:#fff}
.rent select option{color:#13213A}
.rc-occ button[aria-pressed="true"]{color:#0D2141}
@media (max-width:860px){.rc-in{grid-template-columns:1fr 1fr}.rc-in label:first-child{grid-column:1/-1}}
/* real */
.rs-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:14px;align-items:stretch}
.rs-photo{height:100%;min-height:220px;border-radius:16px}
@media (max-width:860px){.rs-grid{grid-template-columns:minmax(0,1fr)}.rs-photo{aspect-ratio:16/10;height:auto}}
.visit{margin-top:clamp(28px,4vw,40px);display:flex;flex-wrap:wrap;gap:16px;align-items:center;justify-content:space-between;padding:clamp(18px,3vw,28px);border-radius:var(--r);background:var(--band);color:var(--band-fg)}
.visit .eyebrow{color:var(--gold)}
.visit h3{margin-top:6px;max-width:34ch}
/* legal */
.legal{background:var(--surface)}
.lg-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.lg-card{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:96px minmax(0,1fr);gap:14px;align-items:center;padding:12px;border:1px solid var(--line);border-radius:14px;background:var(--bg);transition:border-color .2s,transform .2s}
.lg-card:hover,.lg-card:focus-visible{border-color:var(--clay);transform:translateY(-2px)}
.lg-card img{width:96px;height:124px;object-fit:cover;object-position:top;border-radius:6px;border:1px solid var(--line);background:#fff}
.lg-card b{display:block;font-size:.98rem;line-height:1.35}
.lg-card small{display:block;color:var(--muted);font-size:.8rem;margin-top:4px}
.lg-card em{display:inline-block;margin-top:8px;font-size:.8rem;font-weight:700;color:var(--clay)}
@media (max-width:980px){.lg-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:600px){.lg-cards{grid-template-columns:minmax(0,1fr)}}
/* contact */
.phone{text-decoration:none}
#copyPhone{color:var(--clay);padding:8px 14px;background:none}
.findy{display:grid;gap:10px;padding:18px;border:1px solid var(--line);border-radius:var(--r);background:var(--bg)}
.findy img{width:100%;max-width:420px;height:auto}
.findy p{font-size:.92rem;color:var(--muted)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .findy img,:root:not([data-theme="light"]) .plogo img,:root:not([data-theme="light"]) .ft-logo{background:#fff;border-radius:8px;padding:6px 10px}}
:root[data-theme="dark"] .findy img,:root[data-theme="dark"] .plogo img,:root[data-theme="dark"] .ft-logo{background:#fff;border-radius:8px;padding:6px 10px}
footer .ft-logo{width:min(420px,100%);height:auto;background:#fff;border-radius:8px;padding:8px 12px;box-sizing:border-box}
footer a{color:var(--band-fg)}
.mbar .btn-line{color:var(--clay)}
@media (max-width:520px){.brand small{display:none}.brand b{font-size:1.25rem}.brand img{width:34px;height:34px}.top .wrap{gap:10px}.hot{padding:8px 12px;font-size:.82rem}}
@media (max-width:760px){.pc-t td:nth-child(2){white-space:normal!important}.pc-t:not(.loan) th:nth-child(3),.pc-t:not(.loan) td:nth-child(3){width:14%}}