.khung_room
{
  padding-top: 3.5em;
}
    /* Scope CSS riêng với tiền tố hhv- */
    :root {
      --hhv-bg-cream: #F5EFE6;
      --hhv-card-bg: #3E3B32;
      --hhv-text-gold: #C5A059;
      --hhv-btn-gold: #C5A059;
      --hhv-text-white: #FFFFFF;
      --hhv-radius: 20px;
    }

    .hhv-section-wrapper {
      background-color: var(--hhv-bg-cream);
      padding: 30px 0;
/*      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;*/
    }

    .hhv-main-container {
      max-width: 1280px;
      margin: 0 auto;
/*      padding: 0 20px;*/
    }

    .hhv-block-group {
      margin-bottom: 50px;
      position: relative;
      padding-top: 2em;
    }

    /* 1. ITEM TIÊU ĐỀ LỚN (Được làm thành 1 Card ngang hàng trong Carousel) */
    .hhv-title-card {
      background: linear-gradient(135deg, #2A2823 0%, #3E3B32 100%);
      border-radius: var(--hhv-radius);
      height: 540px; /* Bằng đúng chiều cao trung bình của Card phòng */
      padding: 35px 25px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      color: var(--hhv-text-white);
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      border: 1px solid rgba(197, 160, 89, 0.3);
      position: relative;
      overflow: hidden;

          background-size: cover;
    background-repeat: no-repeat;
      
    }

    .hhv-title-card::before {
      content: '';
      position: absolute;
      top: -50px;
      right: -50px;
      width: 180px;
      height: 180px;
      background: rgba(197, 160, 89, 0.1);
      border-radius: 50%;
    }

    .hhv-title-badge {
      font-size: 13px;
      text-transform: uppercase;
      letter-spacing: 2px;
      color: var(--hhv-text-gold);
      font-weight: 700;
    }

    .hhv-title-heading {
      font-size: 28px;
      font-weight: 700;
      line-height: 1.3;
      margin: 15px 0;
      color: #FFF;
      text-shadow: 0 0 10px #000;
    }

    .hhv-title-desc {
      font-size: 14px;
      color: #A3A099;
      line-height: 1.5;
    }

    .hhv-title-action {
      display: inline-flex;
      align-items: center;
      gap: 10px;
      color: var(--hhv-text-gold);
      font-weight: 600;
      text-decoration: none;
      font-size: 15px;
      transition: gap 0.3s ease;
    }

    .hhv-title-action:hover {
      gap: 15px;
      color: #cbb397;
    }

    /* 2. CARD PHÒNG CON */
    .hhv-room-card {
      background-color: var(--hhv-card-bg);
      border-radius: var(--hhv-radius);
      overflow: hidden;
      box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
      color: var(--hhv-text-white);
      position: relative;
      transition: transform 0.3s ease;
      height: 540px;
      display: flex;
      flex-direction: column;

    }

    .hhv-room-card:hover {
      transform: translateY(-6px);
    }

    .hhv-thumb-box {
      position: relative;
      width: 100%;
      height: 430px;
      overflow: hidden;
      flex-shrink: 0;
    }

    .hhv-thumb-box img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .hhv-badge-contact {
      position: absolute;
      top: 15px;
      left: 15px;
      background: #FFFFFF;
      color: #9C7132;
      font-weight: 600;
      font-size: 13px;
      padding: 6px 14px;
      border-radius: 8px;
      text-decoration: none;
      z-index: 2;
    }

    .hhv-btn-book {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #FFFFFF;
      color: #7D521B;
      font-weight: 700;
      font-size: 13px;
      padding: 6px 18px 6px 8px;
      border-radius: 30px;
      text-decoration: none;
      display: flex;
      align-items: center;
      gap: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
      z-index: 2;
      white-space: nowrap;
    }

    .hhv-btn-book .hhv-icon-arrow {
      width: 28px;
      height: 28px;
      background-color: var(--hhv-btn-gold);
      color: #FFF;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 12px;
    }

    .hhv-thumb-box::after {
      content: '';
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 40%;
      background: linear-gradient(to top, var(--hhv-card-bg), transparent);
    }

    .hhv-card-body {
      padding: 20px;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      flex-grow: 1;
    }

    .hhv-room-title {
      font-size: 20px;
      font-weight: 600;
      color: #ECEAE4;
      margin-bottom: 8px;
    }

    .hhv-room-loc {
      display: flex;
      align-items: center;
      gap: 6px;
      color: #A3A099;
      font-size: 13px;
      margin-bottom: 15px;
    }

    .hhv-feature-list {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 15px;
    }

    .hhv-feature-chip {
      background: rgba(255, 255, 255, 0.08);
      border-radius: 6px;
      padding: 5px 10px;
      font-size: 12px;
      color: #C0BD8;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .hhv-stars {
      color: var(--hhv-text-gold);
      font-size: 13px;
      display: flex;
      gap: 4px;
    }

    /* Tùy chỉnh Nút chuyển Slider của Owl Carousel */
    .hhv-block-group .owl-theme .owl-nav {
      position: absolute;
      top: -53px;
      right: 0;
      margin: 0;
    }

    .hhv-block-group .owl-theme .owl-nav [class*='owl-'] {
      background: var(--hhv-card-bg) !important;
      color: #FFF !important;
      border-radius: 50% !important;
      width: 32px;
      height: 32px;
      line-height: 30px !important;
      padding: 0 !important;
      margin: 0 10px;
    }

    .hhv-block-group .owl-theme .owl-nav [class*='owl-']:hover {
      background: var(--hhv-btn-gold) !important;
    }



/* Bổ sung style cho Card tiêu đề bọc thẻ <a> */
.hhv-title-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}

/* Hiệu ứng phóng to nhẹ nền card cha khi hover */
.hhv-title-card {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.hhv-title-card-link:hover .hhv-title-card {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
}

/* Thẻ link bọc hình ảnh sản phẩm con */
.hhv-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.hhv-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

/* Zoom ảnh phòng khi di chuột vào card */
.hhv-room-card:hover .hhv-thumb-link img {
/*  transform: scale(1.08);*/
}

/* Style link cho tiêu đề sản phẩm con */
.hhv-title-link {
  color: #ECEAE4;
  text-decoration: none;
  transition: color 0.3s ease;
  display: inline-block;
}

.hhv-title-link:hover {
  color: var(--hhv-text-gold, #c5a059);
}




    /* Đảm bảo thẻ a bao phủ toàn bộ vùng chứa ảnh */
.hhv-thumb-link {
  display: block;
  width: 100%;
  height: 100%;
}

.hhv-thumb-link img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}



/* Khung chứa tổng */
.total_anhreview {
  width: 100%;
/*  margin: 20px 0;*/
}

/* Chia 5 cột trên PC */
#list_anhreview {
  display: grid;
  grid-template-columns: repeat(5, 1fr); /* 5 cột bằng nhau */
  gap: 15px; /* Khoảng cách giữa các hình */
}

/* Đảm bảo khung ảnh và thẻ a nhận full width */
.items_anhreview {
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08);
}

.items_anhreview a {
  display: block;
  width: 100%;
  height: 366px;
/*  height: 100%;*/


   /* Độ cao khung ảnh trên PC */
  position: relative;
  overflow: hidden;
}

.items_anhreview a img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.3s ease;
}

/* Hiệu ứng hover phóng nhẹ hình */
.items_anhreview:hover img {
  transform: scale(1.05);
}

/* Responsive: Xuống Mobile chuyển thành 1 cột */
@media (max-width: 768px) {
  #list_anhreview {
    grid-template-columns: repeat(1, 1fr); /* 1 cột duy nhất */
    gap: 12px;
  }
  
  .items_anhreview a {
    height: 400px; /* Chiều cao ảnh phù hợp hơn trên màn hình đứng mobile */
  }
}