/* ============================================================
   mega-menu.css — Full-width mega-menu dropdowns
   Loaded on all pages after common.css.
   Panels dùng position:fixed trong root stacking context (z-index cao), tránh bị page content đè lên.
   ============================================================ */

/* ---- Biến bổ sung cho concept 3 (concept3.css không có sẵn) ---- */
:root{
  --terracotta:#CA9178;
  --terracotta-deep:#9A4F37;
  --sand:#F0EBE2;
  --font-display:'Cormorant Garamond', Georgia, serif;
}

/* ---- Panel ---- */
.mega-panel {
  position: fixed;
  top: var(--mega-top, 132px);
  left: 0;
  right: 0;
  z-index: 9000;
  background: rgba(251,246,236,.98);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  border-top: 1px solid var(--line);
  box-shadow: 0 40px 80px -24px rgba(42,39,36,.28), 0 1px 0 var(--line);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s .25s;
  pointer-events: none;
}
.mega-panel.is-open {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
  transition: opacity .25s var(--ease), transform .25s var(--ease), visibility 0s 0s;
  pointer-events: auto;
}

/* ---- Hover bridge (BO 09/2026) ----
   Truoc day co mot dai trong suot cao 48px (.mega-panel::before, bottom:100%)
   de giu hover khi re chuot qua khoang ho giua muc nav va panel.
   Nhung panel co z-index 9000 nen dai nay PHU LEN 18px duoi cua cac muc nav
   => menu dang mo thi rat kho hover sang muc khac (feedback 09/2026).
   Da bo han: panel la con cua #hdr nen header.mouseleave khong ban khi chuot
   di tu muc nav xuong panel, khong can bridge nua.
   Them: thanh nav duoc nang len tren panel de khong bao gio bi che. */
#hdr .nav {
  position: relative;
  z-index: 9001;
}

/* ---- Inner 30/70 split ---- */
.mega-inner {
  display: grid;
  grid-template-columns: 30fr 70fr;
  grid-template-rows: minmax(0, 1fr);
  min-height: 400px;
  max-height: calc(100vh - var(--mega-top, 132px));
  /* FB 05/09/26: panel la position:fixed — noi dung tran ra ngoai max-height se
     KHONG the cuon toi duoc (item cuoi bi che). overflow:hidden + min-height:0 o
     con giup .mega-grid-wrap{overflow-y:auto} thuc su co chieu cao de cuon. */
  overflow: hidden;
}

/* ---- Featured banner (left 30%) ---- */
.mega-feat {
  position: relative;
  overflow: hidden;
}
.mega-feat > a {
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  height: 100%;
  text-decoration: none;
  color: #fff;
  padding: 38px 34px;
  position: relative;
}
.mega-feat-img {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.mega-feat-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.04);
  transition: transform 600ms cubic-bezier(.33,1,.68,1);
}
.mega-feat-img::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, rgba(42,39,36,.18) 0%, rgba(42,39,36,.72) 100%);
  transition: opacity .5s var(--ease);
}
.mega-feat > a:hover .mega-feat-img img { transform: scale(1.1); }
.mega-feat > a:hover .mega-feat-img::after { opacity: .85; }
.mega-feat-body {
  position: relative;
  z-index: 1;
  transition: transform .3s var(--ease);
}
.mega-feat > a:hover .mega-feat-body { transform: translateY(-2px); }
.mega-feat-body .eyebrow { color: rgba(255,246,228,.76); margin-bottom: 10px; font-size: .6rem; }
.mega-feat-body h3 {
  font-family: var(--font-display);
  font-size: 1.38rem;
  font-weight: 400;
  color: #fff;
  line-height: 1.35;
  margin: 0;
}
.mega-feat-body p {
  margin: 12px 0 22px;
  font-size: .85rem;
  color: rgba(255,246,228,.8);
  line-height: 1.65;
}
.mega-feat-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .64rem;
  letter-spacing: .2em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracotta);
  text-decoration: none;
}
.mega-feat-cta svg { transition: transform .3s var(--ease); }
.mega-feat > a:hover .mega-feat-cta svg { transform: translateX(4px); }

/* ---- Grid wrap (right 70%) ---- */
.mega-grid-wrap {
  padding: 32px 44px 36px 40px;
  overflow-y: auto;
  min-height: 0;
}
.mega-grid { display: grid; gap: 24px 28px; }
.mega-grid.cols-2 { grid-template-columns: repeat(2,1fr); }
.mega-grid.cols-3 { grid-template-columns: repeat(3,1fr); }

/* ---- Card ---- */
.mega-card { display: flex; flex-direction: column; }
.mega-card-ph {
  aspect-ratio: 16/10;
  border-radius: 5px;
  overflow: hidden;
  background: var(--sand);
  margin-bottom: 11px;
  flex-shrink: 0;
}
.mega-card-ph img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1);
  transition: transform 600ms cubic-bezier(.33,1,.68,1);
  display: block;
}
.mega-card:hover .mega-card-ph img { transform: scale(1.08); }
.mega-card-title {
  font-size: .63rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--ink);
  margin-bottom: 5px;
  transition: color .2s var(--ease);
}
.mega-card:hover .mega-card-title { color: var(--terracotta-deep); }
.mega-card-desc {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 13px;
}
.mega-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: auto;
}
.mega-card-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: .62rem;
  letter-spacing: .13em;
  text-transform: uppercase;
  font-weight: 600;
  color: var(--terracotta-deep);
  text-decoration: none;
  opacity: .9;
}
.mega-card-link svg { transition: transform .25s var(--ease); }
.mega-card:hover .mega-card-link svg { transform: translateX(4px); }

/* Booking CTA — Lưu trú only */
.mega-card-book {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .58rem;
  letter-spacing: .11em;
  text-transform: uppercase;
  font-weight: 500;
  border: 0.5px solid rgba(154,79,55,.5);
  color: var(--terracotta-deep);
  border-radius: 30px;
  padding: 4px 12px;
  text-decoration: none;
  transition: background .2s var(--ease), color .2s var(--ease), border-color .2s var(--ease);
  white-space: nowrap;
  opacity: .85;
}
.mega-card-book:hover {
  background: var(--terracotta-deep);
  color: #fff;
  border-color: var(--terracotta-deep);
  opacity: 1;
}

/* ---- Nav trigger chevron ---- */
header nav ul li.has-mega > a {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.mm-chev {
  display: inline-block;
  width: 7px;
  height: 7px;
  border-right: 1.3px solid currentColor;
  border-bottom: 1.3px solid currentColor;
  transform: rotate(45deg) translateY(-1px);
  opacity: .6;
  transition: transform .3s var(--ease), opacity .3s var(--ease);
  flex-shrink: 0;
}
header nav ul li.has-mega.is-open > a .mm-chev {
  transform: rotate(-135deg) translateY(2px);
  opacity: 1;
}
header nav ul li.has-mega.is-open > a,
header nav ul li.has-mega > a:hover { color: var(--terracotta) !important; }
header.scrolled nav ul li.has-mega.is-open > a,
header.scrolled nav ul li.has-mega > a:hover { color: var(--terracotta-deep) !important; }

/* ============================================================
   Drawer mobile 2 cap (<=820px)

   Mega panel dung cho hover chuot, khong dung lai duoc trong drawer: no la con
   position:fixed cua #hdr, grid 30/70 cung, max-height tinh theo --mega-top.
   Nen mega panel van bi tat, con drawer dung node rieng (.mdr-*) do
   mega-menu.js dung tu CHINH window.SENNA_MEGA — mot nguon du lieu duy nhat.

   Moc 820px PHAI khop voi moc chuyen burger o concept3.css. Truoc day de 980px
   nen trong dai 821-980px nav desktop van hien nhung panel bi an cung va burger
   chua xuat hien => bam vao menu cha khong ra gi.
   ============================================================ */

/* Node cua drawer chi ton tai o mobile — tren desktop chung nam trong .menu that
   (thanh nav ngang) nen phai tat han, khong chi an bang visibility. */
.mdr-head, .mdr-foot, .mdr-lang, .mdr-l2 { display: none; }

@media(max-width:820px) {
  .mega-panel { display: none !important; }

  /* Chevron cua desktop tro xuong; o day tro sang phai = "co cap 2".
     Viet ca bien .is-open vi mot cham co the sinh mouseenter tong hop lam
     desktop gan .is-open (quy tac o dong 248 se lat mui ten len tren). */
  header nav ul li.has-mega > a .mm-chev,
  header nav ul li.has-mega.is-open > a .mm-chev {
    display: inline-block;
    width: 8px; height: 8px;
    transform: rotate(-45deg);
    opacity: .45;
    flex-shrink: 0;
  }
  header nav ul li.has-mega > a { justify-content: space-between; }

  /* ---- Dau drawer ---- */
  .mdr-head {
    display: flex; align-items: center;
    padding: 0 26px;
    /* --mega-top = chieu cao header that (mega-menu.js updateTop). Hang dau tien
       nho hon moc nay thi se nam duoi nut X. */
    min-height: var(--mega-top, 106px);
    flex-shrink: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .mdr-logo { height: 42px; width: auto; object-fit: contain; display: block; filter: none; }

  /* ---- Cap 1 truot sang trai khi mo cap 2 ---- */
  .nav.has-menu .menu.is-l2 ul {
    transform: translateX(-24%);
    opacity: 0;
    visibility: hidden;
    transition: transform .36s var(--ease), opacity .36s var(--ease), visibility 0s .36s;
  }

  /* ---- Panel cap 2 ---- */
  .mdr-l2 {
    display: flex;
    flex-direction: column;
    position: absolute;
    left: 0; right: 0;
    top: var(--mdr-head-h, 0px);
    bottom: var(--mdr-foot-h, 0px);
    background: rgba(251,250,247,.98);
    transform: translateX(100%);
    visibility: hidden;
    transition: transform .36s var(--ease), visibility 0s .36s;
  }
  .mdr-l2.is-active {
    transform: translateX(0);
    visibility: visible;
    transition: transform .36s var(--ease), visibility 0s 0s;
  }

  .mdr-back {
    display: flex; align-items: center; gap: 10px;
    width: 100%;
    padding: 15px 26px;
    min-height: 52px;
    flex-shrink: 0;
    border: 0; border-bottom: 1px solid var(--line-soft);
    background: transparent;
    color: var(--ink-soft);
    font: inherit;
    text-align: left;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
  }
  .mdr-back:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px; }
  .mdr-back-ic {
    width: 8px; height: 8px;
    border-left: 1.3px solid currentColor;
    border-bottom: 1.3px solid currentColor;
    transform: rotate(45deg);
    flex-shrink: 0;
    opacity: .6;
  }
  .mdr-back-lb {
    font-family: var(--sans);
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 500;
  }

  .mdr-scroll {
    flex: 1; min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* ---- The featured: cung la duong vao trang cha ---- */
  .mdr-feat {
    position: relative;
    display: flex; flex-direction: column; justify-content: flex-end;
    min-height: 208px;
    padding: 22px 26px;
    text-decoration: none;
    color: #fff;
    overflow: hidden;
  }
  .mdr-feat-img { position: absolute; inset: 0; }
  .mdr-feat-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mdr-feat-img::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(160deg, rgba(42,39,36,.16) 0%, rgba(42,39,36,.78) 100%);
  }
  .mdr-feat-body { position: relative; z-index: 1; }
  .mdr-feat-body .eyebrow { color: rgba(255,246,228,.76); font-size: .58rem; margin-bottom: 8px; }
  .mdr-feat-body h3 {
    font-family: var(--font-display);
    font-size: 1.32rem; font-weight: 400; line-height: 1.32;
    color: #fff; margin: 0;
  }
  .mdr-feat-cta {
    display: inline-flex; align-items: center; gap: 6px;
    margin-top: 14px;
    font-family: var(--sans);
    font-size: .62rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
    color: var(--terracotta);
  }

  /* ---- Danh sach muc con ---- */
  .mdr-items { padding: 4px 0 10px; }
  .mdr-item {
    display: flex; align-items: center; gap: 14px;
    padding: 13px 26px;
    text-decoration: none;
    border-bottom: 1px solid var(--line-soft);
  }
  .mdr-item:last-child { border-bottom: 0; }
  .mdr-item-ph {
    width: 88px; height: 62px;
    flex-shrink: 0;
    border-radius: 4px;
    overflow: hidden;
    background: var(--sand);
  }
  .mdr-item-ph img { width: 100%; height: 100%; object-fit: cover; display: block; }
  .mdr-item-txt { min-width: 0; }
  .mdr-item-title {
    font-family: var(--sans);
    font-size: .63rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600;
    color: var(--ink);
    margin-bottom: 4px;
  }
  .mdr-item-desc {
    font-family: var(--sans);
    font-size: .8rem; line-height: 1.5;
    color: var(--muted);
  }

  /* ---- Hang chon ngon ngu ----
     Hai link phang chu khong phai dropdown: ban desktop can dropdown vi header het
     cho, con o day da la mot tam phu toan man hinh — mo them mot lop nua de chon
     giua hai muc la thua mot buoc. */
  .mdr-lang {
    display: flex; align-items: center; gap: 8px;
    flex-shrink: 0;
    padding: 12px 26px;
    border-top: 1px solid var(--line-soft);
  }
  .mdr-lang-lb {
    font-family: var(--sans);
    font-size: .58rem; letter-spacing: .2em; text-transform: uppercase;
    color: var(--muted);
    margin-right: 4px;
  }
  .mdr-lang-item {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 32px; padding: 0 12px;
    border: 1px solid var(--line-soft);
    border-radius: 30px;
    font-family: var(--sans);
    font-size: .6rem; letter-spacing: .14em; text-transform: uppercase;
    color: var(--ink-soft);
    text-decoration: none;
    transition: .25s var(--ease);
  }
  .mdr-lang-item:hover { color: var(--ink); border-color: var(--line); }
  .mdr-lang-item.is-active {
    background: var(--ink); border-color: var(--ink); color: #fff;
  }

  /* ---- Chan drawer ---- */
  .mdr-foot {
    display: flex; align-items: center; justify-content: space-between; gap: 14px;
    flex-shrink: 0;
    padding: 14px 26px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--greige);
  }
  .mdr-tel {
    display: inline-flex; align-items: center; gap: 8px;
    font-family: var(--sans);
    font-size: .78rem; letter-spacing: .04em;
    color: var(--ink);
    text-decoration: none;
    white-space: nowrap;
  }
  .mdr-tel-ic {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: var(--terracotta-deep);
    flex-shrink: 0;
  }
  .mdr-book {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 12px 22px;
    min-height: 44px;
    font-family: var(--sans);
    font-size: .6rem; letter-spacing: .2em; text-transform: uppercase; font-weight: 600;
    color: #fff;
    background: var(--ink);
    border-radius: 30px;
    text-decoration: none;
    white-space: nowrap;
  }
}

/* Man rat hep: anh nho lai de tieu de con cho xuong dong tu te. */
@media(max-width:380px) {
  .mdr-item-ph { width: 68px; height: 50px; }
  .mdr-item { padding-left: 20px; padding-right: 20px; }
  .mdr-feat, .mdr-back, .mdr-foot, .mdr-head { padding-left: 20px; padding-right: 20px; }
  .nav .menu ul a { padding-left: 20px; padding-right: 20px; }
}

/* ---- Reduced motion ---- */
@media(prefers-reduced-motion:reduce) {
  .mega-panel {
    transition: opacity .1s, visibility 0s !important;
    transform: none !important;
  }
  .mega-feat-img img, .mega-card-ph img, .mega-feat-body,
  .mega-feat-cta svg, .mega-card-link svg {
    transition: none !important;
    transform: none !important;
  }

  /* Drawer mobile: bo hoan toan cu truot, chi doi visibility. transform:none
     KHONG dung duoc cho .mdr-l2 — panel se nam de len cap 1 ngay ca khi dong,
     nen giu transform va chi bo transition. */
  @media(max-width:820px) {
    .nav.has-menu .menu.is-l2 ul,
    .mdr-l2, .mdr-l2.is-active {
      transition: none !important;
    }
  }
}

/* ---- Man hinh thap: nen panel de du 2 hang the ma khong phai cuon ---- */
@media(max-height:900px){
  .mega-grid-wrap{padding:22px 40px 24px 36px}
  .mega-grid{gap:18px 24px}
  .mega-card-ph{margin-bottom:9px}
  .mega-feat-body{padding:26px 28px}
}
@media(max-height:760px){
  .mega-inner{min-height:0}
  .mega-grid-wrap{padding:18px 34px 20px 30px}
  .mega-grid{gap:14px 20px}
  .mega-card-ph{aspect-ratio:16/9;margin-bottom:7px}
  .mega-card-desc{display:none}
  .mega-feat-body p{display:none}
}