:root{ --brand:#c5a05f; --ink:#0c1124;
 /* thử Be Vietnam Pro trước, sau đó fallback sang Montserrat/Inter */
  --hero-font: 'Be Vietnam Pro', 'Montserrat', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; }
.hero-carousel{
  --h: 480px;                   /* fallback nếu không set inline */
  position:relative; width:100%; overflow:hidden; background:#0b0f1e;
}

.hero-title{
  font-family: var(--hero-font);
  font-weight: 900;              /* 800–900 */
  text-transform: uppercase;     /* giống ảnh */
  letter-spacing: .04em;         /* nới nhẹ khoảng cách chữ */
  line-height: 1.05;             /* tiêu đề nén dày */
  color: #fff;                   /* chữ trắng trên banner */
  /* tùy chọn: mượt chữ */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* nếu muốn đúng “độ nặng” như ảnh hơn, thử 800 */
.hero-title.is-800 { font-weight: 800; }


.hero-slides{ position:relative; height:var(--h); }
.hero-slide{ position:absolute; inset:0; opacity:0; pointer-events:none; transition:opacity .6s ease; }
.hero-slide.is-active{ opacity:1; pointer-events:auto; z-index:1; }
.hero-slide img{ width:100%; height:100%; object-fit:cover; display:block; user-select:none; -webkit-user-drag:none; }

/* lớp làm tối + gradient nhẹ giống mẫu */
.hero-overlay{ 
  position:absolute; 
  inset:0;
  background:
    linear-gradient(180deg, rgba(12,17,36,.15) 0%, rgba(12,17,36,.35) 55%, rgba(12,17,36,.58) 100%),
    rgba(12,17,36,.25);
}

/* caption giữa ảnh */
.hero-cap{
  position:absolute; 
  left:50%; 
  top:50%; 
  transform:translate(-50%,-50%);
  width:min(1000px, 90vw); 
  text-align:center; 
  color:#fff;
  text-shadow:0 2px 14px rgba(0,0,0,.45);
}

.hero-cap h1{
  margin:0 0 12px; 
  text-transform:uppercase;
  font-weight:800; 
  letter-spacing:.06em;
  font-size:clamp(26px, 5vw, 52px);
  line-height:1.16;
}
.hero-cap p{
  margin:0 auto 18px; 
  max-width:820px;
  font-size:clamp(13px, 1.6vw, 18px); 
  line-height:1.6; opacity:.95;
}
.hero-btn{
  display:inline-block; 
  padding:.9rem 1.4rem; 
  border-radius:6px;
  background:var(--brand); 
  color:#231a0d; 
  text-decoration:none; 
  font-weight:800;
  letter-spacing:.03em; 
  box-shadow:0 6px 18px rgba(0,0,0,.25);
  transition:transform .18s ease, filter .18s ease;
}
.hero-btn:hover{ 
  filter:brightness(1.06); 
  transform:translateY(-1px); 
}

.hero-btn:active{ 
  transform:translateY(0); 
}

/* arrows */
.hero-arrow{
  position:absolute; 
  top:50%; 
  translate:0 -50%;
  width:44px; 
  height:44px; 
  border-radius:999px; 
  border:none; 
  cursor:pointer;
  display:grid; 
  place-items:center; 
  color:#fff; 
  font-size:20px; 
  line-height:1;
  background:rgba(12,17,36,.62); 
  transition:background .2s, transform .2s ease; 
  z-index:3; transform: translateY(-50%);
}

.hero-arrow.prev{ 
  left:14px; } 
  .hero-arrow.next{ 
    right:14px; }
.hero-arrow:hover{ 
  background:rgba(12,17,36,.85); 
  transform:translateY(-50%) scale(1.05); }
.hero-arrow:active{ 
  transform:translateY(-50%) scale(.97); }

/* dots */
.hero-dots{ position:absolute; 
  left:50%; bottom:14px; 
  translate:-50% 0; 
  display:flex; 
  gap:10px; 
  z-index:3; }
.hero-dots button{
  width:10px; height:10px; 
  border-radius:999px; 
  border:1px solid rgba(255,255,255,.85);
  background:transparent; cursor:pointer; padding:0;
  transition:background .2s, transform .2s, border-color .2s;
}
.hero-dots button:is(:hover,:focus){ 
  transform:scale(1.15); 
  border-color:#fff; }
.hero-dots button.is-active{ 
  background:var(--brand); 
  border-color:var(--brand); }


/* ===== Promo Card dưới banner ===== */
.promo { 
  --h: 320px; 
  --w: min(980px, 94vw);
  --radius: 8px;
  width: var(--w);
  margin: 40px auto;
  display: grid;
  grid-template-columns: 1fr 1fr;     /* trái hình – phải nội dung */
  border: 3px solid var(--brand);
  border-radius: var(--radius);
  background: #fff;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
  align-items: stretch;
  /* grid-auto-rows: 1fr;  */
  grid-auto-rows:auto; 
}

/* Cột trái: hình + CTA + mũi tên */
.promo-media{ 
  isolation:isolate; 
  height: 100%; 
  position:relative;
  min-height:260px;        /* chiều cao tối thiểu ảnh */
  min-height: var(--h);
}

.promo-slide{ 
  position:absolute; 
  inset:0;
opacity:0; 
pointer-events:none; 
transition:opacity .45s ease; }
.promo-slide img{ 
  width:100%; 
  height:100%; 
  object-fit:cover; 
  display:block; }

.promo-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* làm tối nửa dưới để chữ nổi bật */
.promo-slide::after{
  content:"";
  position:absolute; inset:0;
  background: linear-gradient(180deg, rgba(12,17,36,0) 40%, rgba(12,17,36,.55) 100%);
  pointer-events:none;
}

.promo-cap{
  position:absolute; left:16px; right:16px; bottom:16px;
  color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.45);
}
.promo-cap__title{
  margin:0 0 4px;
  font-weight:800; letter-spacing:.04em;
  font-size:clamp(16px, 2.2vw, 20px);
}
.promo-cap__desc{
  margin:0 0 8px;
  font-size:clamp(13px, 1.6vw, 14px);
  opacity:.95;
}
.promo-cap__btn{
  display:inline-block;
  padding:.5rem .9rem;
  border-radius:6px;
  background:var(--brand);
  color:#231a0d; text-decoration:none; font-weight:800;
  letter-spacing:.02em;
  box-shadow:0 6px 18px rgba(0,0,0,.18);
  transition:filter .18s ease, transform .18s ease;
}
.promo-cap__btn:hover{ filter:brightness(1.06); transform:translateY(-1px); }
.promo-cap__btn:active{ transform:translateY(0); }

/* mũi tên chuyển hình (nếu bạn dùng) */
.promo-arrow{
  position: absolute; top: 50%;
  transform: translateY(-50%);
  width: 40px; height: 40px; border-radius: 999px;
  border: 2px solid var(--brand);
  background: rgba(255,255,255,.8);
  color: var(--brand); font-size: 18px; line-height: 1;
  display: grid; place-items: center; cursor: pointer;
  transition: filter .2s ease, box-shadow .2s ease;
  z-index: 2;
}
.promo-arrow:hover{ filter: brightness(1.03); box-shadow: 0 4px 16px rgba(0,0,0,.15); }
.promo-arrow.prev{ left: 10px; }
.promo-arrow.next{ right: 10px; }

/* Cột phải: nội dung */
.promo-content{ 
  place-items: center;
  text-align: center; 
  padding: 24px 28px 0px;       /* giảm đáy (trước bạn để 8px/12px) */
  display: flex;                /* flex dễ kiểm soát khoảng trống */
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding:24px 28px 30px;   /* đáy thấp lại */ 
  min-height: var(--h);
}

.promo-content > *{ margin: 0; } 

/* Nếu các nút đang có margin dưới, chuyển về 0 */
.promo-line{ 
    margin-top: 6px;
    margin-bottom: 0; }     /* hoặc chỉ giữ margin-top: 6px */

.promo-title{
  margin: 0;
  font-weight: 800;
  letter-spacing: .04em;
  color: var(--ink);
  font-size: clamp(18px, 2.2vw, 22px);
  text-transform: none;
}
.promo-note{
  margin: 0;
  color: #8c8f97;
  font-size: clamp(13px, 1.6vw, 14px);
  line-height: 1.5;
}
.promo-divider{
  width: 120px; height: 2px; margin: 4px auto;
  background: rgba(197,160,95,.6);
}
.promo-addr{
  margin: 0; color: #7d8088;
  font-size: 13px; line-height: 1.5;
}
.promo-line{
  display: block;
  width: min(280px, 88%);
  margin: 6px auto 0;
  padding: .55rem .8rem;
  border: 2px solid var(--brand);
  border-radius: 6px;
  background: #fff;
  color: #7a6a47;
  text-decoration: none;
  font-weight: 700;
  letter-spacing: .02em;
  transition: background .18s ease, color .18s ease, transform .18s ease;
  margin-top:6px; margin-bottom:0;
}
.promo-line:hover{ background: var(--brand); color: #241a0e; transform: translateY(-1px); }
/* responsive */

/* Dùng cho mọi carousel */
.hero-slide, .promo-slide, .slide{
  position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .45s ease;
}
.hero-slide.is-active,
.promo-slide.is-active,
.slide.is-active{ opacity:1; pointer-events:auto; z-index:1; }

/* Ảnh bên trong */
.promo-slide img{ width:100%; height:100%; 
    object-fit:cover; display:block; }

/* Mũi tên không “nhảy” khi hover */
.hero-arrow, .promo-arrow, .c-prev, .c-next{
  top:50%; transform:translateY(-50%);
  transition:background .2s ease;
}
.hero-arrow:hover, .promo-arrow:hover{ background:rgba(12,17,36,.85); }

figure.promo-media { margin: 0; position: relative; }

/* Figure trong grid không có margin mặc định */
figure.promo-media { margin: 0; }

/* Đặt dots nằm đè lên ảnh, không chiếm chỗ layout */
.promo-dots{
  position:absolute; 
  left:50%; 
  bottom:12px;
  transform:translateX(-50%);
  display:flex; gap:10px;
  gap:10px;
  z-index:3;
}

.promo-dots button{
  width:10px; height:10px; border-radius:999px;
  border:1px solid rgba(255,255,255,.85);
  background:transparent; padding:0; cursor:pointer;
  transition:background .2s, transform .2s, border-color .2s;
}
.promo-dots button:is(:hover,:focus){ transform:scale(1.15); border-color:#fff; }
.promo-dots button.is-active{ background:var(--brand); border-color:var(--brand); }

/* Box thứ 2 đảo chiều: chữ bên trái, ảnh bên phải */
.promo--flip .promo-content{ order:1; }
.promo--flip .promo-media{   order:2; }

/* khoảng cách giữa các box */
.promo + .promo{ margin-top: 28px; }

/* figure trong grid không có margin mặc định */
figure.promo-media{ margin:0; }

.promo-band{
  --band-bg: transparent;
  background: var(--band-bg);
  padding: 36px 0;
  position: relative;
  left: 50%; right: 50%; width: 100vw;
  margin-left: -50vw; margin-right: -50vw;
}
.promo-band__inner{ max-width:1200px; margin:0 auto; padding:0 ; }
.promo-band--dark{ --band-bg:#3b3f48; }  /* màu riêng box 2 */


/* ===== Gallery ===== */
.gallery{ padding: 24px 0 36px; }
.sec-title{
  margin: 0 0 18px;
  text-align: center;
  color: var(--brand);
  font-weight: 900;
  letter-spacing: .06em;
  font-size: clamp(20px,3.4vw,32px);
  text-transform: uppercase;
}

.gal{ position: relative; max-width: 1200px; margin: 0 auto; padding: 0 12px; }
.gal-track{
  --gap: 20px;
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 3*var(--gap)) / 4); /* 4 cột/khung nhìn */
  gap: var(--gap);
  overflow: auto hidden;
  scroll-behavior: smooth;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;          /* tránh che bởi thanh scroll trên 1 số OS */
  overflow: auto hidden;          /* vẫn cuộn ngang */
  -ms-overflow-style: none;       /* IE/Edge cũ */
  scrollbar-width: none;          /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.gal-track::-webkit-scrollbar{  width: 0;
  height: 0; }
.gal-track::-webkit-scrollbar-track{ background:transparent; }

.gal-item{
  display:block; border-radius:6px; overflow:hidden;
  aspect-ratio: 4/3; background:#eef1f6;
  scroll-snap-align: start;
  border:2px solid rgba(197,160,95,.5);
  transition:transform .2s ease, box-shadow .2s ease;
}
.gal-item:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(0,0,0,.12); }
.gal-item img{ width:100%; height:100%; object-fit:cover; display:block; }

.gal-arrow{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:999px;
  border:2px solid var(--brand);
  background:rgba(255,255,255,.9);
  color:var(--brand); font-size:18px; line-height:1;
  display:grid; place-items:center; cursor:pointer;
  transition:filter .18s ease, box-shadow .18s ease;
  z-index: 2;
}
.gal-arrow:hover{ filter:brightness(1.03); box-shadow:0 6px 18px rgba(0,0,0,.18); }
.gal-arrow.prev{ left: 4px; }
.gal-arrow.next{ right: 4px; }

/* Breakpoints: 3 cột tablet, 2 cột mobile */
@media (max-width: 1024px){
  .gal-track{ grid-auto-columns: calc((100% - 2*var(--gap)) / 3); }
}
@media (max-width: 680px){
  .gal-track{ grid-auto-columns: calc((100% - 1*var(--gap)) / 2); }
}

/* ===== Lightbox ===== */
.lb{
  position:fixed; inset:0; display:none; place-items:center;
  background:rgba(0,0,0,.85); z-index:2000;
}
.lb.open{ display:grid; }
.lb img{ max-width:min(96vw,1200px); max-height:90vh; border-radius:10px; box-shadow:0 10px 40px rgba(0,0,0,.5); }
.lb-close{
  position:absolute; top:12px; right:14px;
  width:40px; height:40px; border-radius:999px; border:none; cursor:pointer;
  background:#fff; color:#222; font-size:18px; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}


@media (max-width:880px){
  .hero-carousel{ --h: 340px; }
  .hero-cap{ left:50%; top:55%; transform:translate(-50%,-50%); }
  .hero-arrow{ width:38px; height:38px; font-size:18px; }
  .hero-dots{ bottom:10px; gap:8px; }
    .promo{ grid-template-columns: 1fr; --w: min(560px, 94vw); margin: 24px auto; }
  .promo-media{ min-height: 200px; }
  .promo-arrow{ width: 36px; height: 36px; font-size: 16px; }
  .promo-content{ gap: 10px; }
  .promo-line{ width: 100%; }

    .promo-media{ min-height:200px; }
  .promo-cap{ left:12px; right:12px; bottom:12px; }
  .promo-cap__title{ font-size:16px; }
  .promo-cap__desc{ font-size:12.5px; }
  .promo-cap__btn{ padding:.45rem .75rem; font-size:13px; }
}

/* Slide layering đã có, nhưng thêm cho chắc */
.promo-slide{ opacity:0; pointer-events:none; transition:opacity .45s ease; }
.promo-slide.is-active{ opacity:1; pointer-events:auto; z-index:1; }

/* Mũi tên không “nhảy” khi hover */
.promo-arrow{ top:50%; transform:translateY(-50%); transition:background .2s ease; }
.promo-arrow:hover{ background:rgba(12,17,36,.85); }