/* =========================================================
   Xanh Villa Vũng Tàu - Trang chi tiết căn hộ / villa
   Nạp file này sau style của theme (xem functions-snippet.php)
   ========================================================= */

:root{
  --xv-navy:#12305B;
  --xv-sea:#45BEE4;
  --xv-red:#EE4B3B;
  --xv-gold:#E2B24A;
  --xv-ink:#1B2430;
  --xv-muted:#6B7B8F;
  --xv-line:#E6ECF3;
  --xv-bg:#F6F9FC;
  --xv-radius:14px;
  --xv-shadow:0 10px 30px rgba(18,48,91,.10);
}

.xv-single{background:
  radial-gradient(900px 420px at 12% -80px, rgba(69,190,228,.16), transparent 60%),
  radial-gradient(760px 380px at 92% 0, rgba(226,178,74,.14), transparent 62%),
  var(--xv-bg);
  color:var(--xv-ink);font-size:15px;line-height:1.7;padding-bottom:44px;
  /* chặn trình duyệt tự "neo" khi ảnh đổi -> hết giật ngược lên */
  overflow-anchor:none}
.xv-single *{overflow-anchor:none}
.xv-btn-zalo img {
    height: 30px;
}
/* Gỡ overflow ẩn của theme để cột phải dính được */
.xv-single,.xv-single .xv-container,.xv-layout,.xv-main,.xv-side{overflow:visible}
.xv-container{max-width:1240px;margin:0 auto;padding:0 16px}
.xv-single h1,.xv-single h2,.xv-single h3{color:var(--xv-navy);font-weight:800;letter-spacing:-.01em;margin:0}
.xv-ic{width:18px;height:18px;fill:currentColor;flex:none}

/* ---------- SLIDER ---------- */
.xv-gallery{padding:18px 0 6px}
.xv-gallery-main{position:relative;border-radius:var(--xv-radius);overflow:hidden;background:#0c1c33;box-shadow:var(--xv-shadow);aspect-ratio:16/6}
.xv-gallery-main{contain:layout paint}
.xv-slide{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .5s ease;transform:scale(1.02)}
.xv-slide.is-active{opacity:1;visibility:visible;transform:scale(1)}
.xv-slide img{width:100%;height:100%;object-fit:cover;display:block}

.xv-nav{position:absolute;top:50%;transform:translateY(-50%);width:46px;height:46px;border:0;border-radius:50%;
  background:rgba(255,255,255,.9);color:var(--xv-navy);cursor:pointer;z-index:3;
  box-shadow:0 6px 18px rgba(0,0,0,.18);transition:.2s}
.xv-nav:hover{background:var(--xv-sea);color:#fff}
.xv-prev{left:14px}.xv-next{right:14px}

.xv-counter{position:absolute;right:14px;bottom:14px;z-index:3;background:rgba(18,48,91,.82);color:#fff;
  padding:5px 12px;border-radius:999px;font-size:13px;font-weight:600}
.xv-zoom-hint{position:absolute;left:14px;bottom:14px;z-index:3;background:rgba(0,0,0,.45);color:#fff;
  padding:5px 12px;border-radius:999px;font-size:12px}

.xv-thumbs{display:flex;gap:10px;overflow-x:auto;overscroll-behavior-x:contain;padding:12px 2px 6px;scrollbar-width:thin}
.xv-thumb{flex:0 0 108px;height:72px;padding:0;border:2px solid transparent;border-radius:10px;overflow:hidden;
  background:none;cursor:pointer;opacity:.7;transition:.2s}
.xv-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.xv-thumb:hover{opacity:1}
.xv-thumb.is-active{opacity:1;border-color:var(--xv-gold);box-shadow:0 4px 12px rgba(226,178,74,.35)}

/* Lightbox */
.xv-lb{position:fixed;inset:0;background:rgba(6,14,26,.94);z-index:99999;display:flex;align-items:center;justify-content:center}
.xv-lb img{max-width:92vw;max-height:86vh;border-radius:10px}
.xv-lb-close,.xv-lb-nav{position:absolute;border:0;background:rgba(255,255,255,.12);color:#fff;cursor:pointer;
  width:48px;height:48px;border-radius:50%;}
.xv-lb-close{top:20px;right:20px;    background: white;
    color: black;}
.xv-lb-close:hover, .xv-lb-nav:hover {
    background-color: var(--sun);
    color: white;
}
.xv-lb-nav.prev{left:20px;top:50%;transform:translateY(-50%)}
.xv-lb-nav.next{right:20px;top:50%;transform:translateY(-50%)}
.xv-lb-count{position:absolute;bottom:22px;color:#fff;font-size:14px;opacity:.85}

/* ---------- LAYOUT ---------- */
.xv-layout{display:grid;grid-template-columns:minmax(0,1fr) 380px;gap:28px;align-items:start;padding-top:22px}

/* ---------- HEAD ---------- */
.xv-head{margin-bottom:16px}
.xv-cats{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:10px}
.xv-badge,.xv-catsx ax{display:inline-block;background:rgba(69,190,228,.14);color:var(--xv-navy);
  border:1px solid rgba(69,190,228,.35);padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600;text-decoration:none}
.xv-title{font-size:32px;line-height:1.25; margin-bottom: 15px !important;}
.xv-address{display:flex;gap:8px;align-items:center;color:var(--navy);margin:8px 0 0;font-size:14px}

/* ---------- SPECS ---------- */
.xv-specs{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;list-style:none;margin:0 0 20px;padding:0}
.xv-spec{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--xv-line);
  border-radius:16px;padding:14px;transition:.25s}
.xv-spec:hover{transform:translateY(-3px);border-color:rgba(69,190,228,.55);box-shadow:0 14px 28px -18px rgba(18,48,91,.55)}
.xv-spec-ic{width:42px;height:42px;border-radius:12px;display:grid;place-items:center;flex:none;
  background:linear-gradient(135deg,var(--xv-navy),var(--xv-sea));color:#fff}
.xv-spec-ic svg{width:22px;height:22px;fill:#fff}
.xv-spec-txt{display:flex;flex-direction:column;min-width:0}
.xv-spec-txt small{color:var(--xv-muted);font-size:12.5px}
.xv-spec-txt b{color:var(--xv-navy);font-size:15.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- CARD ---------- */
.xv-card{background:#fff;border:1px solid var(--xv-line);border-radius:var(--xv-radius);padding:22px;margin-bottom:20px}
.xv-h2{font-size:21px;position:relative;padding-left:14px;margin-bottom:14px !important}
.xv-h2:before{content:"";position:absolute;left:0;top:4px;bottom:4px;width:5px;border-radius:4px;
  background:linear-gradient(180deg,var(--xv-gold),var(--xv-red))}
.xv-h2-center{text-align:center;padding:0;margin-bottom:22px}
.xv-h2-center:before{display:none}
.xv-h3{font-size:17px;margin-bottom:12px}
.xv-rte p{margin:0 0 12px}
.xv-rte img{border-radius:10px;max-width:100%;height:auto}

/* ---------- AMENITIES ---------- */
.xv-amenities{list-style:none;margin:0;padding:0;display:flex;grid-template-columns:repeat(3,1fr);gap:10px}
.xv-amenities li{display:flex;gap:9px;align-items:center;background:var(--xv-bg);border:1px solid var(--xv-line);
  border-radius:10px;padding:9px 12px;font-size:14.5px}
.xv-ic-check{width:17px;height:17px;fill:#fff;background:var(--xv-sea);border-radius:50%;padding:2px;flex:none}

/* ---------- TABLE ---------- */
.xv-table{width:100%;border-collapse:collapse}
.xv-table th,.xv-table td{padding:12px 14px;border-bottom:1px solid var(--xv-line);text-align:left;font-size:15px}
.xv-table th{width:200px;color:var(--xv-muted);font-weight:600}
.xv-table td{color:var(--xv-navy);font-weight:600}
.xv-table tr:last-child th,.xv-table tr:last-child td{border-bottom:0}

/* ---------- SIDEBAR STICKY ---------- */
.xv-side{position:relative;align-self:start;height:100%}
.xv-sticky{position:-webkit-sticky;position:sticky;top:100px;z-index:5;
  /*max-height:calc(100vh - 120px);*/
  
  
  /*overflow-y:auto;overscroll-behavior:contain;*/
  /*scrollbar-width:thin;*/
    
    
}
  
  
  
.xv-sticky::-webkit-scrollbar{width:6px}
.xv-sticky::-webkit-scrollbar-thumb{background:rgba(18,48,91,.18);border-radius:999px}
.xv-box{background:#fff;border:1px solid var(--xv-line);border-radius:18px;
  padding:22px;margin-bottom:16px}
.xv-box:first-child{border-top:3px solid transparent;
  background-image:linear-gradient(#fff,#fff),linear-gradient(90deg,var(--xv-sea),var(--xv-navy),var(--xv-gold));
  background-origin:border-box;background-clip:padding-box,border-box}
.xv-price{font-size:26px;font-weight:800;color:var(--xv-red);border-bottom:1px dashed var(--xv-line);padding-bottom:14px;margin-bottom:14px}
.xv-price small{font-size:14px;color:var(--xv-muted);font-weight:600}
.xv-price del{color:var(--xv-muted);font-size:16px;font-weight:500}

.xv-side-specs{list-style:none;margin:0 0 16px;padding:0}
.xv-side-specs li{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px solid var(--xv-line);font-size:14.5px}
.xv-side-specs li:last-child{border-bottom:0}
.xv-ic-wrap{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:rgba(69,190,228,.14);color:var(--xv-navy);flex:none}
.xv-ic-wrap svg{width:17px;height:17px;fill:var(--xv-navy)}
.xv-side-specs .lbl{color:var(--xv-muted); min-width: 50px;}
.xv-side-specs .val{margin-left:auto;font-weight:700;color:var(--xv-navy);text-align:right}

.xv-actions{display:grid;gap:10px}
.xv-btn{display:flex;align-items:center;justify-content:center;gap:9px;height:48px;border-radius:12px;
  font-weight:700;font-size:15.5px;text-decoration:none;border:0;cursor:pointer;transition:.2s;color:#fff}
.xv-btn:hover{transform:translateY(-2px);filter:brightness(1.05);color:#fff}
.xv-btn-call{background:linear-gradient(135deg,var(--xv-red),#ff7a5c);box-shadow:0 8px 20px rgba(238,75,59,.28)}
.xv-btn-zalo{background:#0068FF;box-shadow:0 8px 20px rgba(0,104,255,.25)}
.xv-zalo-logo{background:#fff;color:#0068FF;font-size:12px;font-weight:800;border-radius:6px;padding:2px 6px}
.xv-btn-hold{background:var(--xv-navy)}
.xv-btn-submit{width:100%;background:linear-gradient(135deg,var(--xv-gold),#f2c96b);color:#3a2a00}

.xv-form{display:grid;gap:10px}
.xv-form input,.xv-form textarea{width:100%;border:1px solid var(--xv-line);border-radius:10px;padding:11px 13px;
  font-size:15px;background:var(--xv-bg);outline:none;transition:.2s}
.xv-form input:focus,.xv-form textarea:focus{border-color:var(--xv-sea);background:#fff;box-shadow:0 0 0 3px rgba(69,190,228,.18)}

/* ---------- RELATED ---------- */
.xv-related{padding:34px 0 10px}
.xv-row{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.xv-card-item{display:block;background:#fff;border:1px solid var(--xv-line);border-radius:var(--xv-radius);
  overflow:hidden;text-decoration:none;color:inherit;transition:.25s;height:100%}
.xv-card-item:hover{transform:translateY(-5px);box-shadow:var(--xv-shadow);border-color:rgba(69,190,228,.5)}
.xv-card-img{aspect-ratio:4/3;overflow:hidden;background:#eef3f8}
.xv-card-img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.xv-card-item:hover .xv-card-img img{transform:scale(1.06)}
.xv-card-body{padding:16px}
.xv-card-body h3{font-size:17px;line-height:1.4;margin-bottom:6px}
.xv-card-addr{display:flex;gap:6px;align-items:center;color:var(--xv-muted);font-size:13.5px;margin:0 0 10px}
.xv-card-meta{list-style:none;display:flex;gap:14px;padding:0;margin:0 0 12px;color:var(--xv-navy);font-size:13.5px;font-weight:600}
.xv-card-meta li{display:flex;align-items:center;gap:6px}
.xv-card-meta svg{width:16px;height:16px;fill:var(--xv-sea)}
.xv-card-foot{display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--xv-line);padding-top:12px}
.xv-card-price{color:var(--xv-red);font-weight:800}
.xv-card-more{color:var(--xv-sea);font-weight:700;font-size:14px}

/* ---------- MOBILE BAR ---------- */
.xv-mobile-bar{display:none}

/* ---------- RESPONSIVE ---------- */
@media (max-width:1024px){
  .xv-layout{grid-template-columns:1fr}
  .xv-sticky{position:static}
  .xv-specs{grid-template-columns:repeat(2,1fr)}
  .xv-amenities{grid-template-columns:repeat(2,1fr)}
  .xv-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:640px){
  .xv-title{font-size:24px}
  .xv-gallery-main{aspect-ratio:4/3;border-radius:10px}
  .xv-specs{grid-template-columns:1fr}
  .xv-amenities{grid-template-columns:1fr}
  .xv-row{grid-template-columns:1fr}
  .xv-table th{width:140px}
  .xv-single{padding-bottom:84px}
  .xv-mobile-bar{display:grid;grid-template-columns:1fr 1fr;gap:8px;position:fixed;left:0;right:0;bottom:0;
    z-index:9999;background:#fff;padding:8px 10px;border-top:1px solid var(--xv-line);
    box-shadow:0 -6px 20px rgba(18,48,91,.12)}
  .xv-mobile-bar .xv-btn{height:44px;font-size:14.5px;border-radius:10px}
}


/* ---------- v2: tinh chỉnh giao diện ---------- */
.xv-card{box-shadow:0 14px 34px -26px rgba(18,48,91,.55);border-radius:18px}
.xv-title{letter-spacing:-.02em}
.xv-btn{letter-spacing:.2px}
.xv-btn:active{transform:translateY(0)}
.xv-amenities li{background:#fff;border:1px solid var(--xv-line);border-radius:12px;padding: 10px;}
.xv-card-item{border-radius:18px}
@media (prefers-reduced-motion:reduce){
  .xv-slide{transition:none}
  .xv-spec:hover,.xv-card-item:hover,.xv-btn:hover{transform:none}
}
@media (max-width:1024px){
  .xv-sticky{max-height:none;overflow:visible;top:auto}
}