/* video-can.css — trang chọn căn bằng video.
   Tách file riêng thay vì nhét vào mht.css: chỉ một trang dùng, mà mht.css thì
   mọi trang đều tải. */

.vc-luoi {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
    gap: 22px;
    margin: 26px 0 34px;
}

.vc-the {
    background: #fff;
    border: 1px solid #e3e9ef;
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(12, 20, 28, .06);
    display: flex;
    flex-direction: column;
}

/* Khung 16:9 cố định. Không đặt tỉ lệ thì trước lúc video tải xong khung cao
   0px, cả lưới nhảy giật khi từng video về — và Google chấm điểm chỗ đó. */
.vc-khung { position: relative; aspect-ratio: 16 / 9; background: #0d1b26; }
.vc-video { display: block; width: 100%; height: 100%; object-fit: cover; background: #0d1b26; }

.vc-soc {
    position: absolute; top: 10px; left: 10px;
    background: #e84038; color: #fff;
    font: 800 13px/1 inherit; padding: 6px 10px; border-radius: 6px;
    box-shadow: 0 3px 10px rgba(232, 64, 56, .4);
    pointer-events: none;                 /* đừng che nút play của video */
}
.vc-so-video {
    position: absolute; top: 10px; right: 10px;
    background: rgba(12, 20, 28, .72); color: #fff;
    font: 700 12px/1 inherit; padding: 5px 9px; border-radius: 20px;
    pointer-events: none;
}

.vc-than { padding: 14px 16px 16px; display: flex; flex-direction: column; flex: 1; }
.vc-ten { margin: 0 0 8px; font-size: 16.5px; line-height: 1.35; }
.vc-ten a { color: #12212e; text-decoration: none; }
.vc-ten a:hover { color: #0d8fb8; }

.vc-meta { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 13px; }
.vc-meta span {
    font-size: 12.5px; color: #4c6172;
    background: #f2f6f9; border-radius: 20px; padding: 4px 10px;
}

.vc-duoi { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.vc-gia b { font-size: 18px; color: #12212e; }
.vc-gia s { font-size: 13px; color: #93a2ae; margin-right: 5px; }
.vc-gia span { font-size: 12.5px; color: #7b8794; }

.vc-nut {
    flex: none; text-decoration: none;
    background: #0d8fb8; color: #fff; font-weight: 700; font-size: 13.5px;
    padding: 9px 15px; border-radius: 8px;
}
.vc-nut:hover { background: #0a7699; color: #fff; }

.vc-cta {
    text-align: center; padding: 26px 20px 30px;
    background: linear-gradient(135deg, #12212e, #1d3448);
    border-radius: 16px; color: #fff; margin-bottom: 34px;
}
.vc-cta h2 { margin: 0 0 7px; font-size: 21px; color: #fff; }
.vc-cta p { margin: 0 0 15px; font-size: 14.5px; color: rgba(255, 255, 255, .82); }
.vc-cta-nut {
    display: inline-block; text-decoration: none;
    background: #e6c987; color: #12212e; font-weight: 800; font-size: 14.5px;
    padding: 11px 22px; border-radius: 9px;
}
.vc-cta-nut:hover { filter: brightness(1.06); color: #12212e; }

@media (max-width: 640px) {
    .vc-luoi { grid-template-columns: 1fr; gap: 16px; }
    .vc-ten { font-size: 15.5px; }
}


/* Dải dẫn sang trang video, đặt ở đầu trang thuê villa. Để chung file này vì
   cả hai chỗ chỉ phục vụ một tính năng. */
.tv-video-loi {
    display: flex; align-items: center; gap: 13px;
    margin: 18px 0 4px; padding: 13px 17px;
    background: linear-gradient(100deg, #12212e, #1d3448);
    border-radius: 12px; color: #fff; text-decoration: none;
}
.tv-video-loi:hover { color: #fff; filter: brightness(1.09); }
.tv-video-ic { font-size: 25px; flex: none; }
.tv-video-chu { flex: 1; min-width: 0; }
.tv-video-chu b { display: block; font-size: 15.5px; }
.tv-video-chu span { display: block; margin-top: 2px; font-size: 12.5px; color: rgba(255,255,255,.8); }
.tv-video-mui { flex: none; font-size: 19px; color: #e6c987; }
@media (max-width: 640px) { .tv-video-chu span { font-size: 12px; } }