@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&display=swap');

:root{
  --font-sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
  --font-heading: "Roboto", "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

  --c-primary: #2ecc40;
  --c-text: #333;
  --c-text-light: #555;
  --c-muted: #d7dee6;
  --c-panel: #fff;
  --c-shadow: rgba(0,0,0,.08);

  --radius-lg: 16px;
  --radius-md: 12px;

  --wrap-w: min(1200px, 92vw);
}

html, body{
  font-family: var(--font-sans);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  color: var(--c-text);
}

.page-room .container{ width: var(--wrap-w); margin: 0 auto; }

.page-room .s-title{
  font-family: var(--font-heading);
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 800;
  margin: 18px auto 26px;
  text-align: center;
  color: var(--c-primary);
}
.s-hero-slider{
  width: 100%;
  padding: 0 0 30px;
  background: #fff;
}
.s-hero-slider .slider{
  position: relative;       
  width: 100%;
  overflow: hidden;
  border-radius: 0;       
}
.s-hero-slider .slider-track{
  display: flex;
  transition: transform .6s cubic-bezier(.22,.61,.36,1);
  will-change: transform;
}
.s-hero-slider .slide{
  flex: 0 0 100%;
  position: relative;
}
.s-hero-slider .slide-inner{
  position: relative;
  width: 100%;
  height: clamp(340px, 65vh, 700px);
}
.s-hero-slider .slide-media,
.s-hero-slider .slide-media img{
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; display: block;
}
.s-hero-slider .slide-inner::after{
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,.45) 60%, rgba(0,0,0,.35) 100%);
}

/* Text overlay (centered) */
.s-hero-slider .slide-content{
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; color: #fff;
  padding: clamp(16px, 3vw, 48px);
}
.s-hero-slider .slide-title{
  font-family: var(--font-heading);
  font-size: clamp(28px, 5vw, 60px);
  line-height: 1.1;
  margin: 0 0 10px;
  font-weight: 800;
  color: #fff;
}
.s-hero-slider .slide-wysiwyg{
  font-size: clamp(16px, 1.4vw, 22px);
  line-height: 1.7;
  opacity: .96;
}
.s-hero-slider .slide-wysiwyg p{ margin: 0 0 10px; }

.s-hero-slider .nav{
  position: absolute; top: 50%; transform: translateY(-50%);
  z-index: 3;
  width: 44px; height: 44px; border-radius: 50%;
  background: #fff; color: #111; border: none;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  display: grid; place-items: center; cursor: pointer;
  transition: all .2s ease;
}
.s-hero-slider .nav:hover{ background: var(--c-primary); color: #fff; }
.s-hero-slider .nav.prev{ left: 16px; }
.s-hero-slider .nav.next{ right: 16px; }

.s-hero-slider .dots{
  position: absolute;
  left: 50%; transform: translateX(-50%);
  bottom: 14px;
  z-index: 3;
  display: flex; gap: 10px;
  align-items: center; justify-content: center;
}
.s-hero-slider .dot{
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--c-muted); border: none; cursor: pointer;
  transition: transform .15s ease, background .2s ease;
}
.s-hero-slider .dot.active{
  background: var(--c-primary);
  transform: scale(1.2);
}

@media (max-width: 768px){
  .s-hero-slider .slide-title{ font-size: clamp(22px, 7vw, 38px); }
}
/* ================= Session 2: Image + WYSIWYG ================= */
.s-img-content{
  background: var(--s2-bg, #fff);
}
.s-img-content .section-heading{
  text-align:center;
  margin-bottom: 22px;
}
.s-img-content .s-title{
  margin: 0 0 12px;
  color:#000;   /* tiêu đề đen như hình */
}

/* --- Decorative lines + dots --- */
.heading-deco{
  display:flex; align-items:center; justify-content:center;
  gap: 14px;
}
.heading-deco .line{
  height: 4px; width: 110px; background: #ffb21a; border-radius: 4px;
}
.heading-deco .dots{ display:flex; align-items:center; gap: 10px; }
.heading-deco .dot{
  width: 8px; height: 8px; border-radius: 50%;
  background:#d7d7d7;
}
.heading-deco .dot-primary{ background:#ffb21a; }   /* chấm giữa màu vàng */
.heading-deco .dot-gray{ background:#d7d7d7; }

/* --- 2 columns --- */
.s-img-content .wrap{
  display:grid; grid-template-columns: 1.05fr 1fr;
  gap: clamp(18px, 3vw, 40px);
  align-items:center;
}
.s-img-content.image-right .wrap{ grid-template-columns: 1fr 1.05fr; }
.s-img-content.image-right .media{ order:2; } 
.s-img-content.image-right .content{ order:1; }

.s-img-content .media{
  border-radius: 12px; overflow:hidden;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  background:#f7f9fb;
}
.s-img-content .media img{
  width:100%; height:100%; display:block; object-fit:cover;
}

.s-img-content .content{
  color:#111; line-height:1.75; font-size:16px;
}
.s-img-content .content p{ margin:0 0 12px; }

@media (max-width: 900px){
  .s-img-content .wrap{ grid-template-columns:1fr; }
  .s-img-content.image-right .media, 
  .s-img-content.image-right .content{ order: initial; }
  .heading-deco .line{ width: 90px; }
}
/* ================= Session 3: Room List ================= */
.s-room-list{
  background: var(--s3-bg, #fff);
}
.s-room-list .section-heading{ text-align:center; margin-bottom: 24px; }
.s-room-list .s-title{ margin:0 0 10px; color:#000; }
.s-room-list .heading-deco{
  display:flex; align-items:center; justify-content:center; gap:14px;
}
.s-room-list .heading-deco .line{ height:4px; width:110px; background:#ffb21a; border-radius:4px; }
.s-room-list .heading-deco .dots{ display:flex; gap:10px; }
.s-room-list .heading-deco .dot{ width:8px; height:8px; border-radius:50%; background:#d7d7d7; }
.s-room-list .heading-deco .dot-primary{ background:#ffb21a; }

/* Grid */
.s-room-list .room-grid{
  display:grid; grid-template-columns: repeat(var(--cols,3), 1fr);
  gap: 28px;
}
@media (max-width: 1100px){ .s-room-list .room-grid{ grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .s-room-list .room-grid{ grid-template-columns: 1fr; } }

/* Card */
.room-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  display:flex; flex-direction:column;
  transition: transform .18s ease, box-shadow .18s ease;
}
.room-card:hover{ transform: translateY(-4px); box-shadow: 0 16px 34px rgba(0,0,0,.12); }

.room-card .thumb{ display:block; aspect-ratio: 16/9; overflow:hidden; }
.room-card .thumb img{ width:100%; height:100%; object-fit:cover; display:block; transition: transform .4s ease; }
.room-card:hover .thumb img{ transform: scale(1.03); }

.room-card .card-body{ padding:14px 16px 18px; text-align:center; }
.room-card .room-title{ font-size:18px; margin:0 0 6px; font-weight:800; }
.room-card .room-title a{ color:#111; text-decoration:none; }
.room-card .room-title a:hover{ color:#2ecc40; }
.room-card .room-meta{ font-size:13px; color:#607080; margin-bottom:8px; }
.room-card .room-excerpt{ color:#333; font-size:14px; line-height:1.6; min-height: 42px; margin-bottom:12px; }

/* Buttons */
.s-room-list .btn-more,
.s-room-list .btn-outline{
  display:inline-block; padding:8px 14px; border-radius:10px;
  font-weight:700; text-decoration:none; transition:all .2s ease;
}
.s-room-list .btn-more{ background:#2ecc40; color:#fff; }
.s-room-list .btn-more:hover{ filter:brightness(.95); }
.s-room-list .more-wrap{ text-align:center; margin-top:26px; }
.s-room-list .btn-outline{ border:2px solid #2ecc40; color:#2ecc40; background:transparent; }
.s-room-list .btn-outline:hover{ background:#2ecc40; color:#fff; }

.s-room-list .no-posts{ text-align:center; color:#607080; }
/* --- Utilities line --- */
.room-card .room-cats{
  font-size:13px; color:#607080; margin-bottom:6px;
}

.room-card .room-utils{
  margin: 6px 0 12px;
  font-size:14px; line-height:1.6; text-align:center;
}
.room-card .room-utils .label{ color:#111; font-weight:600; }
.room-card .room-utils .items{ color:#19a74a; font-weight:700; }
.room-card .room-utils .more{ color:#8a95a1; font-weight:600; }

/* ================= Session 4: Room Tabs ================= */
.s-room-tabs{ padding: 50px 0 60px; background:#fff; }
.s-room-tabs .section-heading{text-align:center; margin-bottom:18px;}
.s-room-tabs .heading-deco{display:flex; justify-content:center; align-items:center; gap:14px;}
.s-room-tabs .heading-deco .line{width:110px; height:4px; background:#ffb21a; border-radius:4px;}
.s-room-tabs .heading-deco .dots{display:flex; gap:10px;}
.s-room-tabs .heading-deco .dot{width:8px;height:8px;border-radius:50%;background:#d7d7d7;}
.s-room-tabs .heading-deco .dot-primary{background:#ffb21a;}

.s-room-tabs .rtabs-nav{
  display:flex; flex-wrap:wrap; gap:10px;
  justify-content:center; margin:10px 0 20px;
}
.s-room-tabs .rtab-btn{
  padding:10px 16px; border:1px solid #e6e8ec; background:#fff; color:#333;
  border-radius:8px; cursor:pointer; font-weight:700; transition:.2s;
}
.s-room-tabs .rtab-btn:hover{ background:#f6f8fb; }
.s-room-tabs .rtab-btn.active{ border-color:#2ecc40; color:#2ecc40; box-shadow:0 4px 14px rgba(46,204,64,.15); }

.s-room-tabs .rtab-panel{ display:none; }
.s-room-tabs .rtab-panel.active{ display:block; }

.s-room-tabs .room-grid{
  display:grid; grid-template-columns: repeat(var(--cols,3),1fr);
  gap: 28px;
}
@media (max-width:1100px){ .s-room-tabs .room-grid{ grid-template-columns:repeat(2,1fr);} }
@media (max-width:640px){ .s-room-tabs .room-grid{ grid-template-columns:1fr; } }

.s-room-tabs .room-card{
  background:#fff; border-radius:14px; overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.08);
  display:flex; flex-direction:column; transition:.18s;
}
.s-room-tabs .room-card:hover{ transform:translateY(-4px); box-shadow:0 16px 34px rgba(0,0,0,.12); }
.s-room-tabs .room-card .thumb{ display:block; aspect-ratio:16/9; overflow:hidden; }
.s-room-tabs .room-card .thumb img{ width:100%; height:100%; object-fit:cover; transition:transform .4s; display:block; }
.s-room-tabs .room-card:hover .thumb img{ transform:scale(1.03); }
.s-room-tabs .card-body{ padding:12px 14px 16px; text-align:center; }
.s-room-tabs .room-title{ font-size:16px; margin:0 0 6px; font-weight:800; }
.s-room-tabs .room-title a{ color:#111; text-decoration:none; }
.s-room-tabs .room-title a:hover{ color:#2ecc40; }
.s-room-tabs .room-price{ font-size:14px; color:#111; }
.s-room-tabs .room-price strong{ color:#d81921; } /* đỏ như ảnh mẫu */
.s-room-tabs .tab-min{ text-align:center; margin-top:14px; font-weight:700; }
/* ================= Session 5: Feature Cards (Refactor) ================= */
.s-feature-cards{
padding: 20px 0 20px;
  background:#fff;
}
.s-feature-cards .section-heading{
  text-align:center;
  margin-bottom: 20px;
}
.s-feature-cards .s-title{
  margin: 0 0 10px;
  color:#2ecc40;                /* tiêu đề xanh như ảnh */
}
.s-feature-cards .heading-deco{
  display:flex; justify-content:center; align-items:center; gap:14px;
}
.s-feature-cards .heading-deco .line{ width:110px; height:4px; background:#ffb21a; border-radius:4px; }
.s-feature-cards .heading-deco .dots{ display:flex; gap:10px; }
.s-feature-cards .heading-deco .dot{ width:8px;height:8px;border-radius:50%; background:#d7d7d7; }
.s-feature-cards .heading-deco .dot-primary{ background:#ffb21a; }

/* Grid cards */
.s-feature-cards .fc-grid{
  width: var(--wrap-w, min(1200px,92vw));
  margin: 0 auto;
  display:grid;
  grid-template-columns: repeat(var(--f-cols,3), 1fr);
  gap: clamp(18px, 3vw, 28px);
}
@media (max-width:1100px){ .s-feature-cards .fc-grid{ grid-template-columns: repeat(2,1fr); } }
@media (max-width:640px){  .s-feature-cards .fc-grid{ grid-template-columns: 1fr; } }

/* Card frame */
.fc-card{
  position:relative;
  overflow:hidden;
  border-radius:12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.08);
  background:#f6f8fa;
  transition: transform .18s ease, box-shadow .18s ease;
}
.fc-card:hover{ transform: translateY(-4px); box-shadow: 0 18px 40px rgba(0,0,0,.12); }

/* Image – giữ tỉ lệ đồng đều */
.fc-img{
  width:100%;
  display:block;
  height:auto;
  aspect-ratio: 16 / 9;   /* FIX: chiều cao đồng đều */
  object-fit: cover;
  transition: transform .5s ease;
}
.fc-card:hover .fc-img{ transform: scale(1.03); }

/* Overlay block (inside image) */
.fc-overlay{
  position:absolute;
  left: clamp(14px, 2vw, 24px);
  right: clamp(14px, 2vw, 24px);
  bottom: clamp(14px, 2vw, 24px);
  background: var(--f-ov, rgba(191,245,184,.85));   /* xanh nhạt có alpha */
  border-radius: var(--f-radius, 12px);
  padding: clamp(12px, 2vw, 18px);
  color:#0d0d0d;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}

/* Overlay text */
.fc-title{
  font-weight: 800;
  font-size: clamp(16px, 1.7vw, 18px);
  margin: 0 0 8px;
  color:#0b0b0b;
}
.fc-content{
  font-size: 14px;
  line-height: 1.7;
  color:#1b1b1b;
}
.fc-content p{ margin: 0 0 8px; }

/* Nếu muốn overlay cao hơn một chút trên mobile */
@media (max-width:640px){
  .fc-overlay{ bottom: clamp(8px, 3vw, 16px); }
}


/* ================= Session 6: CF7 on top of background box (refactor, mobile-safe) ================= */

/* Khung section + tiêu đề */
.s-contact-cf7.box-mode{ background:#fff; }
.s-contact-cf7 .section-heading{ text-align:center; margin-bottom:18px; }
.s-contact-cf7 .heading-deco{ display:flex; justify-content:center; align-items:center; gap:12px; }
.s-contact-cf7 .heading-deco .line{ width:110px; height:4px; background:#ffb21a; border-radius:4px; }
.s-contact-cf7 .heading-deco .dots{ display:flex; gap:10px; }
.s-contact-cf7 .heading-deco .dot{ width:8px; height:8px; border-radius:50%; background:#d7d7d7; }
.s-contact-cf7 .heading-deco .dot-primary{ background:#ffb21a; }

/* BG-BOX: ảnh nền, bo góc, không cắt nội dung */
.s-contact-cf7 .s6-bgbox{
  position:relative;
  width:100%;
  /* KHÔNG cố định height -> không che CF7 khi có lỗi/response */
  height:auto;
  min-height:clamp(360px, 52vw, 680px);
  border-radius:14px;
  background-image:var(--bg-img);
  background-size:cover;
  background-position:center;
  box-shadow:0 16px 40px rgba(0,0,0,.12);
  overflow:visible;                   /* cho phép form/response tràn tự nhiên */
}

/* Lớp overlay tối */
.s-contact-cf7 .s6-bgbox::after{
  content:"";
  position:absolute; inset:0;
  background:var(--overlay, rgba(0,0,0,.25));
  z-index:0;                          /* nền dưới */
}

/* Bên trong box: canh form trái/phải theo class */
.s-contact-cf7 .s6-inner{
  position:relative; z-index:1;       /* trên overlay */
  display:flex; align-items:center;
  justify-content:flex-end;           /* mặc định form bên phải */
  padding:clamp(16px, 3vw, 28px);
  min-height:inherit;
}
.s-contact-cf7.align-left .s6-inner{ justify-content:flex-start; }
.s-contact-cf7.align-right .s6-inner{ justify-content:flex-end; }

/* Panel chứa CF7 */
.s-contact-cf7 .form-panel{
  position:relative; z-index:1;       /* trên overlay */
  width:min(var(--panel-w, 560px), 92vw);
  background:var(--panel-bg, rgba(255,255,255,.92));
  border-radius:10px;
  box-shadow:0 14px 36px rgba(0,0,0,.18);
  padding:clamp(14px, 2vw, 20px);
}

/* Box-mode: đẩy panel xuống một chút */
.s-contact-cf7.box-mode .form-panel{ margin-top:var(--form-offset, 60px); }

/* Mobile: đặt form giữa, giảm offset, vẫn không cắt nội dung */
@media (max-width: 768px){
  .s-contact-cf7 .s6-inner{ justify-content:center; }
  .s-contact-cf7.box-mode .form-panel{ margin-top:16px; }
  .s-contact-cf7 .s6-bgbox{ min-height:clamp(380px, 70vw, 520px); }
}

/* CF7 messages/tips: khoảng cách & bo góc đẹp hơn */
.s-contact-cf7 .wpcf7-response-output{
  margin-top:12px; padding:10px 12px;
  border-radius:6px;
}
.s-contact-cf7 .wpcf7-not-valid-tip{
  margin-top:6px; font-size:13px;
}




/* ============= Session 7: News Slider (page-based, smooth) ============= */
.s-news-slider{ padding: 46px 0 60px; background:#fff; }
.s-news-slider .section-heading{ text-align:center; margin-bottom: 20px; }
.s-news-slider .heading-deco{ display:flex; justify-content:center; align-items:center; gap:14px; }
.s-news-slider .heading-deco .line{ width:110px; height:4px; background:#ffb21a; border-radius:4px; }
.s-news-slider .heading-deco .dots{ display:flex; gap:10px; }
.s-news-slider .heading-deco .dot{ width:8px;height:8px;border-radius:50%; background:#d7d7d7; }
.s-news-slider .heading-deco .dot-primary{ background:#ffb21a; }

.s-news-slider .nslider{ position:relative; overflow:hidden; }
.s-news-slider .ntrack{
  display:flex;
  width:100%;
  will-change: transform;
  transition: transform .6s cubic-bezier(.22,.61,.36,1); /* mượt */
}
.s-news-slider .npage{
  flex: 0 0 100%;          /* mỗi page chiếm 100% bề ngang */
  display: grid;           /* lưới bên trong page */
  grid-template-columns: repeat(3, 1fr);  /* default desktop: 3 bài */
  gap: 22px;
  padding: 2px;           /* tránh clipping shadow */
}

/* Tablet & Mobile: đổi số cột của PAGE (không ảnh hưởng transform) */
@media (max-width: 1100px){
  .s-news-slider .npage{ grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px){
  .s-news-slider .npage{ grid-template-columns: 1fr; }
}

/* Card */
.s-news-slider .nslide{
  background:#fff; border:1px solid #eef2f5; border-radius:12px; overflow:hidden;
  box-shadow:0 10px 30px rgba(0,0,0,.06);
  display:flex; flex-direction:column;
  min-width: 0; /* fix text overflow in grid */
}
.s-news-slider .nthumb{ display:block; aspect-ratio:16/9; overflow:hidden; }
.s-news-slider .nthumb img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .4s ease; }
.s-news-slider .nslide:hover .nthumb img{ transform:scale(1.03); }
.s-news-slider .nbody{ padding:14px 16px 18px; }
.s-news-slider .ntitle{ font-size:18px; font-weight:800; margin:0 0 8px; }
.s-news-slider .ntitle a{ color:#111; text-decoration:none; }
.s-news-slider .ntitle a:hover{ color:#2ecc40; }
.s-news-slider .nexcerpt{ font-size:14px; color:#444; line-height:1.7; }

/* arrows */
.s-news-slider .nnav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:42px;height:42px; border-radius:50%;
  background:#fff; border:1px solid #e6e8ec; color:#111;
  box-shadow:0 8px 20px rgba(0,0,0,.12);
  display:grid; place-items:center; cursor:pointer;
  transition:.2s; z-index:3;
}
.s-news-slider .nnav:hover{ background:#2ecc40; color:#fff; border-color:transparent; }
.s-news-slider .nnav.prev{ left:-8px; }
.s-news-slider .nnav.next{ right:-8px; }
@media (max-width: 640px){
  .s-news-slider .nnav.prev{ left:6px; } .s-news-slider .nnav.next{ right:6px; }
}