/* ==========================================================================
   PHỞ HÀ NỘI — GIAO DIỆN
   Bảng màu lấy từ card visit: đỏ sơn, đỏ rượu vang, vàng đồng, cam lửa,
   nền giấy kem, nâu nét vẽ.
   ========================================================================== */

/* --- 1. Biến màu, font, khoảng cách ------------------------------------- */
:root{
  /* Màu */
  --son-do:      #A11B1B;
  --son-do-sang: #C22C28;
  --do-ruou:     #5E0E12;
  --vang-dong:   #E3A008;
  --vang-sang:   #F6C445;
  --cam-lua:     #DD6B20;
  --giay:        #FBF3E3;
  --giay-dam:    #F4E7CD;
  --giay-trang:  #FFFCF6;
  --nau-net:     #8A6141;
  --muc:         #241A15;
  --muc-nhat:    #5D4A3D;
  --xanh-mo:     #2F7D4F;

  /* Font */
  --font-tieu-de: 'Lora', 'Times New Roman', Georgia, serif;
  --font-chu:     'Be Vietnam Pro', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;

  /* Khoảng cách & hình khối */
  --khung-rong: 1160px;
  --le: clamp(20px, 5vw, 40px);
  --bo-goc: 14px;
  --bong: 0 18px 40px -24px rgba(36, 26, 21, .45);
  --bong-cao: 0 26px 60px -30px rgba(36, 26, 21, .6);
  --cao-header: 72px;
}

/* --- 2. Nền tảng -------------------------------------------------------- */
*,*::before,*::after{ box-sizing: border-box; }

html{ scroll-behavior: smooth; scroll-padding-top: calc(var(--cao-header) + 16px); }

body{
  margin: 0;
  background: var(--giay);
  color: var(--muc);
  font-family: var(--font-chu);
  font-size: 17px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img{ max-width: 100%; height: auto; display: block; }
[hidden]{ display: none !important; }
a{ color: var(--son-do); }

h1,h2,h3{
  font-family: var(--font-tieu-de);
  font-weight: 600;
  line-height: 1.15;
  margin: 0;
  letter-spacing: -0.01em;
}

p{ margin: 0 0 1em; }

:focus-visible{
  outline: 3px solid var(--vang-dong);
  outline-offset: 3px;
  border-radius: 4px;
}

.khung{
  width: 100%;
  max-width: var(--khung-rong);
  margin-inline: auto;
  padding-inline: var(--le);
}

.an-di{
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.bo-qua{
  position: absolute; left: 50%; top: 0;
  /* đẩy lên đúng bằng chiều cao của chính nó -> không lộ dù chữ xuống 2 dòng */
  transform: translate(-50%, -100%);
  background: var(--son-do); color: #fff;
  padding: 10px 20px; border-radius: 0 0 10px 10px;
  z-index: 300; text-decoration: none; font-weight: 600;
  white-space: nowrap;
  transition: transform .2s;
}
.bo-qua:focus{ transform: translate(-50%, 0); }

.giua{ text-align: center; }

/* --- 3. Nút ------------------------------------------------------------- */
.nut{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 54px;
  padding: 14px 30px;
  border: 2px solid transparent;
  border-radius: 999px;
  font-family: var(--font-chu);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  transition: transform .18s ease, background-color .18s ease, color .18s ease, box-shadow .18s ease;
}
.nut:hover{ transform: translateY(-2px); }
.nut:active{ transform: translateY(0); }

.nut--do{ background: var(--son-do); color: #fff; box-shadow: 0 10px 24px -14px rgba(161,27,27,.9); }
.nut--do:hover{ background: var(--do-ruou); box-shadow: 0 16px 30px -14px rgba(94,14,18,.9); }

.nut--vien{ background: transparent; border-color: var(--son-do); color: var(--son-do); }
.nut--vien:hover{ background: var(--son-do); color: #fff; }

.nut--vang{ background: var(--vang-dong); color: var(--muc); }
.nut--vang:hover{ background: var(--vang-sang); }

.nut--rong{ width: 100%; }
.nut--nho{ min-height: 42px; padding: 8px 18px; font-size: .93rem; }

/* Biểu tượng nhỏ */
.i-dt,.i-td,.i-cd{
  width: 19px; height: 19px; flex: none;
  background-color: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}
.i-dt{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8c1.4 2.8 3.8 5.2 6.6 6.6l2.2-2.2c.3-.3.7-.4 1-.2 1.2.4 2.4.6 3.6.6.6 0 1 .4 1 1V20c0 .6-.4 1-1 1C10.7 21 3 13.3 3 4c0-.6.4-1 1-1h3.5c.6 0 1 .4 1 1 0 1.3.2 2.5.6 3.6.1.4 0 .8-.2 1l-2.3 2.2z'/%3E%3C/svg%3E");
}
.i-td{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M4 6h16v2H4zM4 11h16v2H4zM4 16h16v2H4z'/%3E%3C/svg%3E");
}
.i-cd{
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E");
}

/* --- 4. Thanh điều hướng ------------------------------------------------ */
.dieu-huong{
  position: sticky; top: 0; z-index: 120;
  background: rgba(251, 243, 227, .93);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid rgba(138, 97, 65, .25);
}
.dieu-huong__trong{
  display: flex; align-items: center; gap: clamp(8px, 1.4vw, 18px);
  min-height: var(--cao-header);
}

.thuong-hieu{
  display: flex; align-items: center; gap: 10px;
  text-decoration: none; margin-right: auto;
}
.thuong-hieu__logo{ height: clamp(32px, 4.6vw, 44px); width: auto; }
.thuong-hieu__chu{
  font-family: var(--font-tieu-de);
  font-weight: 700;
  font-size: 1.42rem;
  color: var(--son-do);
  letter-spacing: -0.015em;
  white-space: nowrap;
}

.menu__ds{
  display: flex; align-items: center; gap: 2px;
  list-style: none; margin: 0; padding: 0;
}
.menu__ds a{
  display: block;
  white-space: nowrap;   /* chặn "Trang chủ" bị tách thành 2 dòng */
  padding: 8px 13px;
  color: var(--muc-nhat);
  font-size: .93rem;
  font-weight: 500;
  text-decoration: none;
  border-radius: 8px;
  position: relative;
  transition: color .18s;
}
.menu__ds a::after{
  content: ''; position: absolute; left: 13px; right: 13px; bottom: 3px;
  height: 2px; background: var(--vang-dong);
  transform: scaleX(0); transform-origin: left;
  transition: transform .22s ease;
}
.menu__ds a:hover{ color: var(--son-do); }
.menu__ds a:hover::after,
.menu__ds a.dang-xem::after{ transform: scaleX(1); }
.menu__ds a.dang-xem{ color: var(--son-do); font-weight: 600; }

.nut-menu{
  display: none;
  width: 46px; height: 46px;
  border: 1px solid rgba(138,97,65,.35);
  border-radius: 10px;
  background: transparent;
  cursor: pointer;
  padding: 12px 11px;
}
.nut-menu span{
  display: block; height: 2px; background: var(--son-do); border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}
.nut-menu span + span{ margin-top: 5px; }
.nut-menu[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.nut-menu[aria-expanded="true"] span:nth-child(2){ opacity: 0; }
.nut-menu[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }
/* --- Nút đổi ngôn ngữ -------------------------------------------------- */
.ngon-ngu{
  display: flex; gap: 2px;
  border: 1px solid rgba(161,27,27,.4);
  border-radius: 8px;
  overflow: hidden;
  flex: none;
}
.ngon-ngu__nut{
  border: 0; background: transparent;
  padding: 6px 10px;
  font-family: var(--font-chu);
  font-size: .78rem; font-weight: 700;
  letter-spacing: .08em;
  color: var(--son-do);
  cursor: pointer;
  transition: background-color .15s, color .15s;
}
.ngon-ngu__nut:hover{ background: rgba(161,27,27,.08); }
.ngon-ngu__nut.dang-chon{
  background: var(--son-do);
  color: #fff;
}


/* --- 5. Dải nét vẽ Hà Nội (điểm nhấn chính của trang) ------------------- */
.duong-chan-troi{
  height: clamp(84px, 12vw, 150px);
  background: url('../images/decor/ha-noi-skyline.svg') center bottom / auto 100% repeat-x;
  opacity: .34;
  pointer-events: none;
}

/* --- 6. Hero ------------------------------------------------------------ */
.hero{
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-top: clamp(40px, 7vw, 76px);
  background: var(--giay);
}
/* Card visit (đã xoá logo) làm nền — xem mục "Nền hero" cuối file để chỉnh */
.hero::before{
  content: '';
  position: absolute; inset: 0;
  z-index: -2;
  background: url('../images/decor/nen-card-visit.jpg') 50% 78% / cover no-repeat;
  filter: saturate(1.18) contrast(1.05);
  opacity: 1;
  pointer-events: none;
}
.hero::after{
  content: '';
  position: absolute; inset: 0;
  z-index: -1;
  background:
    linear-gradient(95deg,
      rgba(251,243,227,.97) 0%,
      rgba(251,243,227,.94) 42%,
      rgba(251,243,227,.62) 55%,
      rgba(251,243,227,.12) 68%,
      transparent 78%),
    linear-gradient(to bottom, transparent 84%, var(--giay) 100%);
  pointer-events: none;
}

/* ── Nền hero theo từng cỡ màn hình ─────────────────────────────────────
   Card visit là ảnh NGANG (tỉ lệ 2.09). Màn càng hẹp, cover càng phóng to
   và cắt mất hai bên, nên phải đổi vị trí cắt + độ đậm lớp phủ.          */

/* Màn hẹp: bố cục 1 cột, chữ đè thẳng lên nền -> phủ dọc, đậm ở trên */
@media (max-width: 900px){
  .hero::before{
    background-position: 74% 72%;   /* cắt vào mâm món ăn, giữ trọn bát */
    opacity: .85;
  }
  .hero::after{
    background: linear-gradient(to bottom,
      rgba(251,243,227,.94) 0%,
      rgba(251,243,227,.90) 52%,
      rgba(251,243,227,.66) 80%,
      var(--giay) 100%);
  }
}

/* Điện thoại nhỏ: phủ thêm chút nữa vì chữ chiếm gần hết bề ngang */
@media (max-width: 560px){
  .hero::before{ opacity: .78; }
}
.hero__trong{ position: relative; z-index: 1; }
.hero .duong-chan-troi{ position: relative; z-index: 1; }
.hero__trong{
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: min(72vh, 620px);
  padding-block: clamp(20px, 4vw, 50px);
}
.hero__chu{ max-width: 620px; }

.nhan-nho{
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 14px;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--cam-lua);
}
.nhan-nho::before{
  content: ''; width: 30px; height: 2px; flex: none;
  background: var(--vang-dong);
}

.hero__ten{
  margin: 0 0 4px;
  max-width: min(520px, 100%);
}
.hero__ten img{ width: 100%; }
.hero__slogan{
  font-family: var(--font-tieu-de);
  font-style: italic;
  font-size: clamp(1.15rem, 2.6vw, 1.6rem);
  color: var(--do-ruou);
  margin: 18px 0 0;
  padding-top: 18px;
  border-top: 2px solid var(--vang-dong);
  display: inline-block;
}
.hero__mo-ta{
  max-width: 46ch;
  margin: 14px 0 30px;
  color: var(--muc-nhat);
}

.hero__nut{ display: flex; flex-wrap: wrap; gap: 12px; }

.hero__thong-tin{
  display: flex; flex-wrap: wrap; gap: 12px 40px;
  margin: 32px 0 0;
  padding-top: 24px;
  border-top: 1px solid rgba(138,97,65,.28);
}
.hero__thong-tin dt{
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--nau-net); margin-bottom: 3px;
}
.hero__thong-tin dd{ margin: 0; font-weight: 500; }

.trang-thai{
  display: inline-flex; align-items: center; gap: 9px;
  margin: 20px 0 0;
  padding: 8px 16px 8px 12px;
  background: var(--giay-trang);
  border: 1px solid rgba(138,97,65,.3);
  border-radius: 999px;
  font-size: .9rem; font-weight: 600;
}
.trang-thai__cham{
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--muc-nhat); flex: none;
}
.trang-thai.mo .trang-thai__cham{
  background: var(--xanh-mo);
  box-shadow: 0 0 0 4px rgba(47,125,79,.18);
}
.trang-thai.dong .trang-thai__cham{ background: var(--son-do); }
.trang-thai--toi{
  background: rgba(255,255,255,.1);
  border-color: rgba(246,196,69,.4);
  color: var(--giay);
}


/* --- 7. Khung phần chung ------------------------------------------------ */
.phan{ padding-block: clamp(60px, 8.5vw, 108px); }
.phan--kem{ background: var(--giay-dam); }
.phan--do{
  background: var(--do-ruou);
  color: var(--giay);
  background-image: radial-gradient(700px 420px at 85% 0%, rgba(227,160,8,.16), transparent 65%);
}
.phan--do h2,
.phan--do .tieu-de-phan h2{ color: var(--vang-sang); }
.phan--do .nhan-nho{ color: var(--vang-dong); }

.tieu-de-phan{ margin-bottom: clamp(30px, 4vw, 52px); max-width: 62ch; }
.tieu-de-phan--giua{ margin-inline: auto; text-align: center; }
.tieu-de-phan--giua .nhan-nho{ justify-content: center; }
.tieu-de-phan h2{
  font-size: clamp(1.85rem, 4.4vw, 2.9rem);
  color: var(--do-ruou);
}
.tieu-de-phan__phu{
  margin: 12px 0 0;
  color: var(--muc-nhat);
}
.phan--do .tieu-de-phan__phu{ color: rgba(251,243,227,.8); }

/* --- 8. Giới thiệu ------------------------------------------------------ */
.gioi-thieu__trong{
  display: grid;
  grid-template-columns: 1fr .92fr;
  gap: clamp(30px, 5vw, 66px);
  align-items: center;
}
.chu-lon{
  font-family: var(--font-tieu-de);
  font-size: clamp(1.2rem, 2.4vw, 1.48rem);
  line-height: 1.5;
  color: var(--do-ruou);
}
.gioi-thieu__chu p{ color: var(--muc-nhat); }
.gioi-thieu__chu .chu-lon{ color: var(--do-ruou); }

.diem-nhan{
  list-style: none; margin: 30px 0 0; padding: 0;
  border-top: 1px solid rgba(138,97,65,.3);
}
.diem-nhan li{
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  padding: 14px 0;
  border-bottom: 1px solid rgba(138,97,65,.3);
  font-weight: 500;
}
.diem-nhan span{
  min-width: 92px;
  font-size: .7rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--cam-lua);
  align-self: center;
}

.the-card-visit{
  margin: 0;
  transform: rotate(-1.2deg);
}
.the-card-visit img{
  /* KHÔNG dùng flex ở đây — flex mặc định stretch sẽ kéo méo ảnh dọc */
  width: auto;
  height: auto;
  max-width: 100%;
  max-height: 640px;
  margin-inline: auto;
  border-radius: 10px;
  border: 8px solid var(--giay-trang);
  box-shadow: var(--bong-cao);
}

/* --- 9. Thực đơn -------------------------------------------------------- */
.thuc-don__tab{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: 26px;
}
.thuc-don__tab button{
  min-height: 44px;
  padding: 9px 22px;
  border: 2px solid rgba(161,27,27,.35);
  background: transparent;
  border-radius: 999px;
  font-family: var(--font-chu);
  font-size: .93rem; font-weight: 600;
  color: var(--son-do);
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s;
}
.thuc-don__tab button[aria-selected="true"]{
  background: var(--son-do); border-color: var(--son-do); color: #fff;
}

.thuc-don__khung{
  max-width: 920px; margin-inline: auto;
  padding: 12px;
  background: var(--giay-trang);
  border: 1px solid rgba(138,97,65,.28);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
}

/* --- Bộ lọc nhóm món --------------------------------------------------- */
.mon-loc{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;
  margin-bottom: clamp(24px, 3vw, 36px);
}
.mon-loc__nut{
  display: inline-flex; align-items: center; gap: 7px;
  min-height: 44px; padding: 9px 18px;
  border: 2px solid rgba(161,27,27,.3);
  background: var(--giay-trang);
  border-radius: 999px;
  font-family: var(--font-chu);
  font-size: .92rem; font-weight: 600;
  color: var(--son-do);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color .18s, color .18s, border-color .18s, transform .18s;
}
.mon-loc__nut:hover{ border-color: var(--son-do); transform: translateY(-2px); }
.mon-loc__nut.dang-chon{
  background: var(--son-do); border-color: var(--son-do); color: #fff;
}
.mon-loc__so{
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 22px; height: 22px; padding: 0 6px;
  background: rgba(161,27,27,.1);
  border-radius: 999px;
  font-size: .76rem; font-weight: 700;
}
.mon-loc__nut.dang-chon .mon-loc__so{ background: rgba(255,255,255,.24); color: #fff; }

/* --- Lưới món ăn: mỗi món một ảnh ------------------------------------- */
.mon-luoi{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(215px, 1fr));
  gap: 20px;
}
.mon{
  display: flex; flex-direction: column;
  padding: 0; border: 0;
  background: var(--giay-trang);
  border-radius: 16px;
  overflow: hidden;
  box-shadow: var(--bong);
  cursor: zoom-in;
  text-align: left;
  font-family: var(--font-chu);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mon:hover{ transform: translateY(-4px); box-shadow: var(--bong-cao); }
.mon.khong-bam{ cursor: default; box-shadow: none; }
.mon.khong-bam:hover{ transform: none; }

.mon__anh{
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--giay-dam);
}
.mon__anh img{ width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.mon:hover .mon__anh img{ transform: scale(1.06); }
.mon__anh .anh-trong{ border: 0; border-radius: 0; min-height: 100%; }

.mon__chu{
  padding: 14px 16px 16px;
  border-top: 3px solid var(--vang-dong);
  display: flex; flex-direction: column; gap: 3px;
  flex: 1;
}
.mon__ten{
  font-family: var(--font-tieu-de);
  font-size: 1.06rem; font-weight: 600;
  color: var(--do-ruou);
  line-height: 1.25;
}
.mon__ten-phu{
  font-size: .82rem;
  color: var(--nau-net);
  font-style: italic;
}
.mon__ghi-chu{
  display: inline-block;
  margin-top: 4px;
  padding: 3px 9px;
  background: rgba(161,27,27,.08);
  border-radius: 6px;
  font-size: .74rem; font-weight: 600;
  color: var(--son-do);
}
.mon__gia{
  margin-top: auto; padding-top: 8px;
  font-weight: 700; font-size: 1rem;
  color: var(--son-do);
}
.thuc-don__khung button.anh-bam{
  display: block; width: 100%; padding: 0; border: 0; background: none; cursor: zoom-in;
  border-radius: 8px; overflow: hidden;
}
.thuc-don__khung img{ width: 100%; height: auto; border-radius: 8px; }

.thuc-don__nut{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin-top: 30px;
}

/* --- 10. Khung ảnh chưa có (trạng thái rỗng) ---------------------------- */
.anh-trong{
  display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 8px;
  width: 100%; height: 100%; min-height: 200px;
  padding: 26px 18px;
  text-align: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 12px, rgba(138,97,65,.05) 12px 24px),
    var(--giay-dam);
  border: 2px dashed rgba(138,97,65,.45);
  border-radius: 10px;
  color: var(--nau-net);
}
.anh-trong svg{ width: 38px; height: 38px; opacity: .65; }
.anh-trong b{
  font-size: .95rem; font-weight: 600; color: var(--muc-nhat);
}
.anh-trong code{
  font-size: .78rem;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(138,97,65,.3);
  border-radius: 6px;
  padding: 3px 9px;
  word-break: break-all;
}

/* --- 11. Thư viện ảnh --------------------------------------------------- */
.gallery{
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
  gap: 16px;
}
.gallery__o{
  position: relative;
  padding: 0; border: 0; background: none;
  aspect-ratio: 4 / 3;
  border-radius: 12px;
  overflow: hidden;
  cursor: zoom-in;
  box-shadow: var(--bong);
}
.gallery__o img{
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .5s ease;
}
.gallery__o:hover img{ transform: scale(1.05); }
.gallery__o::after{
  content: '';
  position: absolute; inset: 0;
  border: 2px solid rgba(227,160,8,0);
  border-radius: 12px;
  transition: border-color .2s;
}
.gallery__o:hover::after{ border-color: var(--vang-dong); }
.gallery__o.khong-bam{ cursor: default; box-shadow: none; }
.gallery__o.khong-bam::after{ display: none; }

@media (min-width: 760px){
  .gallery__o--to{ grid-column: span 2; aspect-ratio: 16 / 10; }
}

/* --- 12. Đánh giá ------------------------------------------------------- */
.danh-gia__ds{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 18px;
  margin-bottom: 32px;
}
.danh-gia__ds:empty{ display: none; margin: 0; }

.the-danh-gia{
  padding: 26px;
  background: var(--giay-trang);
  border: 1px solid rgba(138,97,65,.28);
  border-radius: var(--bo-goc);
  box-shadow: var(--bong);
}
.the-danh-gia__sao{ color: var(--vang-dong); letter-spacing: .12em; margin-bottom: 10px; }
.the-danh-gia__noi-dung{
  font-family: var(--font-tieu-de);
  font-style: italic;
  color: var(--muc);
}
.the-danh-gia__ten{
  margin: 0;
  font-size: .84rem; font-weight: 600;
  letter-spacing: .08em; text-transform: uppercase;
  color: var(--nau-net);
}
.the-danh-gia__nguon{
  display: block;
  font-size: .74rem; font-weight: 500;
  letter-spacing: .06em; text-transform: none;
  color: var(--muc-nhat); opacity: .8;
}

.danh-gia__trong{
  max-width: 54ch; margin: 0 auto 28px;
  text-align: center; color: var(--muc-nhat);
}

/* --- 13. Địa chỉ & bản đồ ----------------------------------------------- */
.dia-chi__trong{
  display: grid;
  grid-template-columns: .82fr 1.18fr;
  gap: clamp(28px, 4vw, 52px);
  align-items: start;
}
.dia-chi__dong{
  font-family: var(--font-tieu-de);
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 22px;
}
.dia-chi__tieu-de{
  margin: 34px 0 12px;
  font-size: 1.1rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--vang-sang);
}

.bang-gio{ width: 100%; border-collapse: collapse; }
.bang-gio td{
  padding: 11px 0;
  border-bottom: 1px solid rgba(246,196,69,.22);
  font-size: .97rem;
}
.bang-gio td:last-child{ text-align: right; font-weight: 500; }
.bang-gio tr.hom-nay td{ color: var(--vang-sang); font-weight: 700; }
.bang-gio tr.nghi td{ color: rgba(251,243,227,.62); }
.bang-gio tr.nghi td:last-child{
  color: var(--vang-sang);
  font-weight: 700;
  letter-spacing: .04em;
}

.dia-chi__ban-do{
  position: relative;
  height: clamp(340px, 46vw, 480px);   /* giữ chiều cao cả khi chưa tải bản đồ */
  border-radius: var(--bo-goc);
  overflow: hidden;
  border: 3px solid var(--vang-dong);
  box-shadow: var(--bong-cao);
  background: var(--giay-dam);
}
.ban-do-cho{
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background:
    linear-gradient(135deg, rgba(161,27,27,.05), rgba(227,160,8,.08)),
    repeating-linear-gradient(45deg, rgba(138,97,65,.04) 0 12px, transparent 12px 24px),
    var(--giay-dam);
  text-align: center; padding: 24px;
}
.ban-do-cho__giua{ max-width: 340px; }
.ban-do-cho svg{ width: 44px; height: 44px; color: var(--son-do); margin-bottom: 12px; }
.ban-do-cho__chu{ font-family: var(--font-tieu-de); font-size: 1.15rem; font-weight: 600; color: var(--do-ruou); margin: 0 0 6px; }
.ban-do-cho__phu{ font-size: .86rem; color: var(--nau-net); margin: 0 0 16px; line-height: 1.5; }

.dia-chi__ban-do iframe{
  display: block; width: 100%; height: 100%; border: 0;
}

/* --- 14. Liên hệ -------------------------------------------------------- */
.lien-he__the{
  max-width: 720px; margin-inline: auto;
  padding: clamp(30px, 5vw, 52px);
  text-align: center;
  background: var(--giay-trang);
  border: 2px solid var(--vang-dong);
  border-radius: 24px;
  box-shadow: var(--bong-cao);
}
.lien-he__sdt{
  display: inline-block;
  font-family: var(--font-tieu-de);
  font-size: clamp(1.7rem, 5.5vw, 2.6rem);
  font-weight: 700;
  color: var(--son-do);
  text-decoration: none;
  letter-spacing: -0.01em;
}
.lien-he__sdt:hover{ color: var(--do-ruou); }
.lien-he__nut{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px;
  margin: 26px 0 0;
}
.lien-he__ds{
  display: flex; flex-wrap: wrap; justify-content: center; gap: 18px 44px;
  margin: 30px 0 0; padding-top: 26px;
  border-top: 1px solid rgba(138,97,65,.28);
  text-align: left;
}
.lien-he__ds dt{
  font-size: .7rem; font-weight: 600; letter-spacing: .14em;
  text-transform: uppercase; color: var(--cam-lua); margin-bottom: 3px;
}
.lien-he__ds dd{ margin: 0; font-weight: 500; }

/* --- 15. Chân trang ----------------------------------------------------- */
.chan-trang{
  background: var(--do-ruou);
  border-top: 3px solid var(--vang-dong);
  color: rgba(251,243,227,.86);
  padding-bottom: 16px;
}
.chan-trang__trong{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 34px;
  padding-block: clamp(34px, 5vw, 56px);
}
.chan-trang__ten{
  font-family: var(--font-tieu-de);
  font-size: 1.7rem; font-weight: 700;
  color: var(--vang-sang);
  margin: 0 0 6px;
}
.chan-trang__slogan{ font-style: italic; font-family: var(--font-tieu-de); }
.chan-trang__tieu-de{
  font-family: var(--font-chu);
  font-size: .72rem; font-weight: 600;
  letter-spacing: .16em; text-transform: uppercase;
  color: var(--vang-dong);
  margin: 0 0 10px;
}
.chan-trang__cot p + .chan-trang__tieu-de{ margin-top: 22px; }
.chan-trang strong{ color: var(--vang-sang); }
.lien-ket-vang{
  color: var(--vang-sang);
  text-decoration: none;
  border-bottom: 1px solid rgba(246,196,69,.45);
}
.lien-ket-vang:hover{ border-bottom-color: var(--vang-sang); }

.chan-trang__ban-quyen{
  padding-top: 18px;
  border-top: 1px solid rgba(246,196,69,.2);
  font-size: .85rem;
  color: rgba(251,243,227,.6);
}
.chan-trang__ban-quyen p{ margin: 0; }

/* --- 16. Thanh hành động trên điện thoại -------------------------------- */
.thanh-mobile{
  display: none;
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 130;
  grid-template-columns: repeat(3, 1fr);
  background: var(--son-do);
  border-top: 2px solid var(--vang-dong);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -8px 24px -14px rgba(0,0,0,.6);
}
.thanh-mobile a{
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: 62px;
  color: #fff; text-decoration: none;
  font-size: .78rem; font-weight: 600;
}
.thanh-mobile a + a{ border-left: 1px solid rgba(255,255,255,.2); }
.thanh-mobile a:active{ background: var(--do-ruou); }

/* --- 17. Xem ảnh cỡ lớn ------------------------------------------------- */
.lightbox{
  position: fixed; inset: 0; z-index: 200;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  background: rgba(20, 12, 9, .94);
  padding: 56px 16px 22px;
}
.lightbox[hidden]{ display: none; }
.lightbox__trong{
  flex: 1; width: 100%;
  display: flex; align-items: center; justify-content: center;
  overflow: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
}
.lightbox__trong img{
  max-width: 100%; max-height: 100%;
  object-fit: contain;
  border-radius: 6px;
  cursor: zoom-in;
}
.lightbox__trong.phong-to{ align-items: flex-start; }
.lightbox__trong.phong-to img{
  max-width: none; max-height: none;
  width: 190%; cursor: zoom-out;
}
.lightbox__chu{
  margin: 12px 0 0; color: rgba(251,243,227,.75);
  font-size: .88rem; text-align: center;
}
.lightbox button{
  position: absolute;
  border: 1px solid rgba(246,196,69,.4);
  background: rgba(251,243,227,.1);
  color: var(--giay);
  border-radius: 50%;
  width: 46px; height: 46px;
  font-size: 1.7rem; line-height: 1;
  cursor: pointer;
  transition: background-color .18s;
}
.lightbox button:hover{ background: rgba(251,243,227,.25); }
.lightbox__dong{ top: 14px; right: 14px; }
.lightbox__truoc{ left: 12px; top: 50%; transform: translateY(-50%); }
.lightbox__sau{ right: 12px; top: 50%; transform: translateY(-50%); }
.lightbox button[hidden]{ display: none; }
.lightbox__loi{
  color: var(--giay);
  font-size: 1rem;
  text-align: center;
  padding: 40px 20px;
}

body.khoa-cuon{ overflow: hidden; }

/* --- 18. Màn hình vừa & nhỏ --------------------------------------------- */
@media (max-width: 1000px){
  .menu{
    position: absolute; left: 0; right: 0; top: 100%;
    background: var(--giay);
    border-bottom: 1px solid rgba(138,97,65,.25);
    box-shadow: var(--bong);
    display: none;
  }
  .menu.mo{ display: block; }
  .menu__ds{ flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--le) 18px; }
  .menu__ds a{ padding: 14px 4px; font-size: 1.02rem; border-bottom: 1px solid rgba(138,97,65,.16); }
  .menu__ds a::after{ display: none; }
  .nut-menu{ display: block; }
  .dieu-huong__trong{ position: relative; }
}

@media (max-width: 900px){
  .hero__trong{ grid-template-columns: 1fr; }
  .gioi-thieu__trong,
  .dia-chi__trong{ grid-template-columns: 1fr; }
  .the-card-visit{ max-width: 540px; margin-inline: auto; transform: none; }
}

@media (max-width: 760px){
  body{ font-size: 16px; padding-bottom: 66px; }
  .thanh-mobile{ display: grid; }
  .dieu-huong__goi{ display: none; }
  .ngon-ngu{ margin-left: auto; }
  .hero{ padding-top: 26px; }
  .thuc-don__khung{ padding: 8px; }
  .lien-he__ds{ flex-direction: column; gap: 16px; text-align: center; }
  .hero__nut .nut,
  .thuc-don__nut .nut,
  .lien-he__nut .nut{ flex: 1 1 240px; }
  .lightbox__truoc,
  .lightbox__sau{ top: auto; bottom: 14px; transform: none; }
}

/* --- 19. Hiệu ứng xuất hiện --------------------------------------------- */
.hien-dan{
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .7s ease, transform .7s ease;
}
.hien-dan.da-hien{ opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *,*::before,*::after{
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .hien-dan{ opacity: 1; transform: none; }
}

@media print{
  .dieu-huong,.thanh-mobile,.lightbox,.duong-chan-troi{ display: none !important; }
  body{ background: #fff; padding: 0; }
}