/* Hủ Tiếu Mì Hoành Thánh 44 — site overrides */

/* Tiếng Việt: không tách giữa từ (template gốc dùng word-break: break-all) */
html,
body,
body *,
.wn-hero,
.wn-hero__title,
.wn-hero__sub,
.Contents p,
.Contents h2,
.wn-menu,
.wn-menu__item,
.wn-menu__lead,
.wn-menu-signature p {
  word-break: normal !important;
  overflow-wrap: break-word !important;
  hyphens: none !important;
}

/* Bỏ sidebar trống — mở rộng vùng đọc chữ */
.Navi,
.Navi[data-v-7bf6b253] {
  display: none !important;
}

.index .inner,
.index .inner[data-v-5d4c3f90] {
  padding-left: 0 !important;
}

.Footer,
.Footer[data-v-f3cc5816] {
  padding-left: 5.33vw !important;
  background: url("image/footer.jpg") center/cover no-repeat !important;
}

@media screen and (min-width: 813px) {
  .Footer,
  .Footer[data-v-f3cc5816] {
    padding-left: 120px !important;
    min-height: 650px;
  }
}

.Footer .logo img,
.Footer .logo[data-v-f3cc5816] img {
  width: 100%;
  height: auto;
  display: block;
}

.Footer .logo[data-v-f3cc5816] {
  width: 32vw !important;
  max-width: 168px;
}

@media screen and (min-width: 813px) {
  .Footer .logo[data-v-f3cc5816] {
    width: 152px !important;
  }
}

.Footer .link a,
.Footer .link a[data-v-f3cc5816] {
  font-size: 15px !important;
}

@media screen and (min-width: 813px) {
  .Footer .link a,
  .Footer .link a[data-v-f3cc5816] {
    font-size: 16px !important;
  }
}

.Footer .copy,
.Footer .copy[data-v-f3cc5816] {
  font-size: 11px !important;
}

@media screen and (min-width: 813px) {
  .Footer .copy,
  .Footer .copy[data-v-f3cc5816] {
    font-size: 12px !important;
  }
}

.Footer .top .text,
.Footer .top .text[data-v-f3cc5816] {
  font-size: 13px !important;
}

@media screen and (min-width: 813px) {
  .Footer .top .text,
  .Footer .top .text[data-v-f3cc5816] {
    font-size: 14px !important;
  }
}

body,
html,
button,
input,
textarea,
select,
p,
dd,
dt,
span,
a,
li {
  font-family: "Be Vietnam Pro", "Segoe UI", sans-serif !important;
}

.u-fontFamily-shippori,
.u-fontFamily-zen,
.u-fontFamily-base,
.Navi .pcNavi .wrap a,
.Footer .link a,
.Footer .top .text,
.Contents .data h1,
.Contents #about h2,
.Contents #tensyu h2,
h1,
h2,
h3,
.wn-menu__title,
.wn-social-head p {
  font-family: "Cormorant Garamond", "Be Vietnam Pro", serif !important;
  letter-spacing: 0.02em;
}

.wn-hero {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 14vw 6vw 24vw;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.55) 72%, rgba(0, 0, 0, 0.72) 100%);
}

@media screen and (min-width: 813px) {
  .wn-hero {
    padding: 0 8% 80px 8%;
    max-width: 820px;
    margin-left: auto;
    margin-right: auto;
  }
}

.wn-hero__eyebrow {
  color: #f5f0ea;
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  margin-bottom: 12px;
}

.wn-hero__title {
  color: #fff;
  font-family: "Cormorant Garamond", "Be Vietnam Pro", serif !important;
  font-size: clamp(22px, 5.6vw, 36px);
  line-height: 1.32;
  font-weight: 600;
  margin-bottom: 14px;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
  text-wrap: pretty;
  max-width: min(100%, 640px);
}

.wn-hero__sub {
  color: rgba(255, 255, 255, 0.92);
  font-size: clamp(13px, 3.4vw, 16px);
  line-height: 1.75;
  max-width: 42ch;
  margin-bottom: 18px;
  text-wrap: pretty;
}

.wn-hero__cta {
  pointer-events: auto;
  display: inline-flex;
  align-self: flex-start;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 999px;
  background: #a60030;
  color: #fff !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
}

.Kv .news {
  z-index: 6;
  left: 6vw !important;
  right: 6vw !important;
  word-break: normal !important;
}

.wn-menu {
  background: #f3f0eb;
  padding: 16vw 5.33vw;
}

@media screen and (min-width: 813px) {
  .wn-menu {
    padding: 80px 8.4%;
  }
}

.wn-menu__eyebrow {
  font-size: 12px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #888;
}

.wn-menu__title {
  font-family: "Cormorant Garamond", "Be Vietnam Pro", serif !important;
  font-size: clamp(24px, 5vw, 34px);
  margin: 10px 0 12px;
}

.wn-menu__lead {
  color: #666;
  font-size: 14px;
  line-height: 1.7;
  max-width: 52ch;
  margin-bottom: 28px;
}

.wn-menu__signature {
  margin-bottom: 32px;
}

.wn-menu__signature-title {
  font-family: "Cormorant Garamond", "Be Vietnam Pro", serif !important;
  font-size: 20px;
  margin: 0 0 16px;
  color: #444;
}

.wn-menu__signature-grid {
  display: grid;
  gap: 16px;
}

@media screen and (min-width: 813px) {
  .wn-menu__signature-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 24px;
  }
}

.wn-menu-signature {
  background: #fff;
  border: 1px solid rgba(68, 68, 68, 0.12);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.wn-menu-signature__media {
  margin: 0;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: #ececec;
}

.wn-menu-signature__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.wn-menu-signature__body {
  padding: 18px 18px 20px;
  flex: 1;
}

.wn-menu-signature__badge {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: #a60030;
  margin-bottom: 8px;
}

.wn-menu-signature h3 {
  font-size: 15px;
  line-height: 1.5;
  margin-bottom: 8px;
}

.wn-menu-signature p {
  color: #555;
  font-size: 13px;
  line-height: 1.75;
}

.wn-menu__boards {
  display: grid;
  gap: 20px;
}

@media screen and (min-width: 900px) {
  .wn-menu__boards {
    grid-template-columns: 1.15fr 1fr;
    gap: 24px;
  }
}

.wn-menu__panel {
  position: relative;
  background: #fff;
  border: 2px solid #a60030;
  border-radius: 6px;
  padding: 22px 18px 26px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.07);
}

.wn-menu__panel::before {
  content: "";
  position: absolute;
  inset: 7px;
  border: 1px solid rgba(30, 79, 163, 0.55);
  border-radius: 3px;
  pointer-events: none;
}

.wn-menu__panel-kicker {
  position: relative;
  z-index: 1;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #888;
  text-align: center;
  margin-bottom: 4px;
}

.wn-menu__panel-title {
  position: relative;
  z-index: 1;
  font-family: "Cormorant Garamond", "Be Vietnam Pro", serif !important;
  color: #a60030;
  text-align: center;
  font-size: clamp(28px, 6vw, 40px);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin: 0 0 18px;
  line-height: 1.1;
}

.wn-menu__panel--extra .wn-menu__panel-title {
  font-size: clamp(22px, 4.5vw, 30px);
}

.wn-menu__list {
  position: relative;
  z-index: 1;
  list-style: none;
  margin: 0;
  padding: 0;
}

.wn-menu__item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(16px, 1fr) auto;
  gap: 8px;
  align-items: end;
  padding: 8px 0;
  border-bottom: 1px dashed rgba(0, 0, 0, 0.08);
  font-size: 14px;
  line-height: 1.45;
}

@media screen and (min-width: 813px) {
  .wn-menu__item {
    font-size: 15px;
  }
}

.wn-menu__item:last-child {
  border-bottom: 0;
}

.wn-menu__name {
  font-weight: 500;
}

.wn-menu__dots {
  border-bottom: 1px dotted rgba(0, 0, 0, 0.28);
  margin-bottom: 3px;
}

.wn-menu__price {
  font-weight: 600;
  white-space: nowrap;
  color: #333;
}

.wn-menu__item--red .wn-menu__name {
  color: #a60030;
}

.wn-menu__item--blue .wn-menu__name {
  color: #1e4fa3;
}

.wn-menu__item--green .wn-menu__name {
  color: #2d6a3e;
}

#tensyu .sign,
#tensyu .inner h1 {
  display: none;
}

#reservation {
  display: none !important;
}

#takeOut,
.bg_w.data.last:has(#takeOut) {
  display: none !important;
}

.Contents #shop dl dd .tabelog,
.Contents #shop dl dd .link[href="#"] {
  text-decoration: none !important;
}

/* Khoảng cách Liên hệ ↔ Bản đồ */
.Contents #shop.section[data-v-42061ef9] {
  padding-bottom: 8vw !important;
}

@media screen and (min-width: 813px) {
  .Contents #shop.section[data-v-42061ef9] {
    padding-bottom: 52px !important;
  }
}

/* Bản đồ full-width + nút Xem bản đồ bên dưới */
.Contents #map.wn-map[data-v-42061ef9],
.Contents #map[data-v-42061ef9] {
  width: 100% !important;
  background-color: #f5f5f5 !important;
  height: auto !important;
  margin-top: 5.5vw !important;
  padding: 0 !important;
}

@media screen and (min-width: 813px) {
  .Contents #map.wn-map[data-v-42061ef9],
  .Contents #map[data-v-42061ef9] {
    margin-top: 44px !important;
  }
}

.Contents #map .inner[data-v-42061ef9] {
  width: 100% !important;
  height: 50.4vw !important;
  min-height: 280px;
  display: block;
  overflow: hidden;
}

@media screen and (min-width: 813px) {
  .Contents #map .inner[data-v-42061ef9] {
    height: 460px !important;
  }
}

.Contents #map iframe {
  width: 100% !important;
  height: 100% !important;
  display: block;
  border: 0;
}

.wn-map-btn-wrap {
  margin: 0;
  padding: 18px 16px 22px;
  text-align: center;
  background: #f5f5f5;
}

.wn-map-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 10px 28px;
  border: 1px solid rgba(68, 68, 68, 0.35);
  border-radius: 999px;
  color: #444 !important;
  font-size: 13px;
  letter-spacing: 0.06em;
  background: #fff;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

@media (hover: hover) {
  .wn-map-btn:hover {
    background: #a60030;
    border-color: #a60030;
    color: #fff !important;
  }
}

/* Ẩn mọi khối mạng xã hội còn sót */
.sns,
.Contents #shop dl dd .sns,
.Footer .sns {
  display: none !important;
}

.site-topnav {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1200;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 8px 10px;
  padding: 8px 12px 10px;
  background: rgba(185, 171, 157, 0.92);
  backdrop-filter: blur(8px);
}

.site-topnav__brand {
  grid-column: 1;
  grid-row: 1;
}

.site-topnav__actions {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  flex-wrap: nowrap;
  min-width: 0;
}

.site-lang {
  display: inline-flex;
  gap: 4px;
  flex-shrink: 0;
}

.site-lang__btn {
  border: 1px solid rgba(68, 68, 68, 0.35);
  background: rgba(255, 255, 255, 0.65);
  color: #444;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.08em;
  padding: 5px 8px;
  border-radius: 999px;
  cursor: pointer;
  line-height: 1;
}

.site-lang__btn.is-active {
  background: #a60030;
  border-color: #a60030;
  color: #fff;
}

.site-topnav__links {
  grid-column: 1 / -1;
  grid-row: 2;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 4px;
  justify-items: center;
  align-items: center;
  width: 100%;
}

.site-topnav__links a {
  display: block;
  width: 100%;
  text-align: center;
  line-height: 1.25;
  padding: 4px 2px;
  font-size: 10px;
  letter-spacing: 0.04em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.site-topnav a {
  color: #444;
  font-size: 11px;
  letter-spacing: 0.06em;
}

.site-topnav__cta {
  background: #a60030;
  color: #fff !important;
  padding: 7px 12px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 10px;
  line-height: 1.2;
  white-space: nowrap;
  flex-shrink: 0;
  writing-mode: horizontal-tb;
}

@media screen and (min-width: 813px) {
  .site-topnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 12px 28px;
    gap: 8px 12px;
  }

  .site-topnav__brand,
  .site-topnav__actions,
  .site-topnav__links {
    grid-column: unset;
    grid-row: unset;
  }

  .site-topnav__links {
    order: 3;
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px 12px;
  }

  .site-topnav__links a {
    display: inline;
    width: auto;
    padding: 0;
    font-size: 13px;
    letter-spacing: 0.06em;
    overflow: visible;
    text-overflow: unset;
  }

  .site-lang__btn {
    font-size: 11px;
    padding: 6px 10px;
  }

  .site-topnav__cta {
    font-size: 13px;
    padding: 8px 14px;
  }

  .site-topnav a {
    font-size: 13px;
  }
}

.site-topnav__brand {
  flex-shrink: 0;
  line-height: 0;
}

.site-topnav__brand img {
  display: block;
  width: auto;
  height: 38px;
}

@media screen and (min-width: 813px) {
  .site-topnav__brand img {
    height: 46px;
  }
}

/* Static mode: no Nuxt boot scripts */
.Loading,
.Yuge,
.wn-yuge,
.Kv #container {
  display: none !important;
}

.Kv.wn-kv {
  width: 100% !important;
  min-height: 72vh !important;
  height: auto !important;
  position: relative !important;
  overflow: hidden;
  background: #2a2520 !important;
}

@media screen and (max-width: 812px) {
  .Kv.wn-kv {
    min-height: 78vh !important;
  }
}

.wn-kv__video {
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}

.wn-kv__video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

.index {
  overflow: visible !important;
  background-color: #b9ab9d !important;
  padding-top: 108px;
}

@media screen and (min-width: 813px) {
  .index {
    padding-top: 52px;
  }
}

.wn-hero {
  min-height: 72vh;
}

#about,
#tensyu,
#menu,
#news,
#shop,
#takeOut {
  scroll-margin-top: 88px;
}

@media screen and (min-width: 813px) {
  #about,
  #tensyu,
  #menu,
  #news,
  #shop,
  #takeOut {
    scroll-margin-top: 72px;
  }
}

.pillar-3 {
  margin-top: 20vw;
}

@media screen and (min-width: 813px) {
  .pillar-3 {
    margin-top: 60px;
  }
}

/* Canh tiêu đề TakeOut thẳng hàng */
#takeOut.section {
  padding-left: 5.33vw !important;
  padding-right: 5.33vw !important;
}

@media screen and (min-width: 813px) {
  #takeOut.section {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
}


/* ═══════════════════════════════════════════════════════════
   PHẦN CÂU CHUYỆN (#about) — Editorial split layout
   ═══════════════════════════════════════════════════════════ */

.Contents #about[data-v-42061ef9] {
  height: auto !important;
  min-height: 0 !important;
  display: block !important;
  background: #f9f6f2;
  padding: 18vw 6vw !important;
  flex-direction: unset !important;
  flex-wrap: unset !important;
  justify-content: unset !important;
  align-items: unset !important;
}

@media screen and (min-width: 813px) {
  .Contents #about[data-v-42061ef9] {
    padding: 110px 8.4% !important;
  }
}

/* Reset h1 logo góc */
.Contents #about h1[data-v-42061ef9] {
  display: none !important;
}

/* Inner wrapper — desktop: 3 cột: tiêu đề | đường kẻ | nội dung */
.Contents #about .inner[data-v-42061ef9] {
  position: relative !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  padding-top: 0 !important;
  max-width: 920px;
  margin: 0 auto;
}

@media screen and (min-width: 813px) {
  .Contents #about .inner[data-v-42061ef9] {
    display: grid !important;
    grid-template-columns: 1fr 1px 1fr;
    column-gap: 64px;
    align-items: start;
  }
}

/* Eyebrow label "CÂU CHUYỆN" */
.Contents #about .inner[data-v-42061ef9]::before {
  content: "CAU CHUYEN";
  display: block;
  font-family: "Be Vietnam Pro", sans-serif;
  font-size: 10px;
  letter-spacing: 0.24em;
  color: #a60030;
  margin-bottom: 20px;
}

@media screen and (min-width: 813px) {
  .Contents #about .inner[data-v-42061ef9]::before {
    grid-column: 1 / -1;
    margin-bottom: 36px;
  }
}

/* Đường kẻ phân cách dọc — chỉ desktop */
@media screen and (min-width: 813px) {
  .Contents #about .inner[data-v-42061ef9]::after {
    content: "";
    display: block;
    grid-column: 2;
    grid-row: 2;
    width: 1px;
    background: rgba(42, 37, 32, 0.14);
    align-self: stretch;
  }
}

/* H2 tiêu đề — cột trái, sticky khi scroll */
.Contents #about h2[data-v-42061ef9] {
  font-size: clamp(22px, 5.2vw, 38px) !important;
  line-height: 1.28 !important;
  color: #2a2520;
  margin-bottom: 20px !important;
}

@media screen and (min-width: 813px) {
  .Contents #about h2[data-v-42061ef9] {
    grid-column: 1;
    grid-row: 2;
    margin-bottom: 0 !important;
    position: sticky;
    top: 90px;
    align-self: start;
  }
}

/* Đoạn văn — cột phải */
.Contents #about p.text[data-v-42061ef9] {
  font-size: clamp(14px, 3.6vw, 15.5px) !important;
  line-height: 2 !important;
  color: #4a4440;
  margin-top: 0 !important;
}

@media screen and (min-width: 813px) {
  .Contents #about p.text[data-v-42061ef9] {
    grid-column: 3;
    grid-row: 2;
  }
}

/* Dấu ngoặc kép trang trí */
.Contents #about p.text[data-v-42061ef9]::before {
  content: open-quote;
  display: block;
  font-family: "Cormorant Garamond", serif;
  font-size: 72px;
  line-height: 0.65;
  color: #a60030;
  opacity: 0.32;
  margin-bottom: 10px;
  quotes: "\201C" "\201D";
}


/* ═══════════════════════════════════════════════════════════
   PHẦN TIN TỨC / ANH (#photo) — Dark editorial photo grid
   ═══════════════════════════════════════════════════════════ */

.Contents #photo[data-v-42061ef9] {
  position: relative !important;
  height: auto !important;
  display: flex !important;
  flex-direction: column !important;
  background: #2a2520;
  padding: 14vw 6vw 16vw !important;
}

@media screen and (min-width: 813px) {
  .Contents #photo[data-v-42061ef9] {
    padding: 80px 8.4% 96px !important;
  }
}

/* Heading "Tin tức" — static, không còn absolute */
.wn-social-head {
  position: static !important;
  top: auto !important;
  left: auto !important;
  z-index: auto !important;
  color: #f5f0ea !important;
  order: -1;
  margin-bottom: 9vw;
}

@media screen and (min-width: 813px) {
  .wn-social-head {
    display: flex;
    align-items: baseline;
    gap: 24px;
    margin-bottom: 44px;
  }
}

.wn-social-head p {
  font-size: clamp(22px, 5vw, 34px) !important;
  color: #f5f0ea !important;
  font-weight: 600;
  line-height: 1.2;
}

.wn-social-head span {
  font-size: 12px !important;
  color: rgba(245, 240, 234, 0.55) !important;
  letter-spacing: 0.06em;
  margin-top: 6px;
  display: block;
}

@media screen and (min-width: 813px) {
  .wn-social-head span {
    margin-top: 0;
    display: inline;
  }
}

/* Grid wrapper — mobile ưu tiên hiện trọn món; desktop bất đối xứng */
.wn-photo-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: auto;
  gap: 12px;
  width: 100%;
  align-items: stretch;
}

/* Mobile: hero → sườn nổi bật → cặp đôi → topping */
.wn-photo-grid > .wn-photo-item--1 {
  grid-column: 1 / -1;
  grid-row: 1;
  aspect-ratio: 16 / 10;
  --off-y: 0px;
  --obj-pos: center 42%;
}

.wn-photo-grid > .wn-photo-item--3 {
  grid-column: 1 / -1;
  grid-row: 2;
  aspect-ratio: 4 / 3;
  --off-y: 0px;
  --obj-pos: center 38%;
}

.wn-photo-grid > .wn-photo-item--2 {
  grid-column: 1 / 2;
  grid-row: 3;
  aspect-ratio: 4 / 5;
  --off-y: 0px;
  --obj-pos: center 35%;
}

.wn-photo-grid > .wn-photo-item--5 {
  grid-column: 2 / 3;
  grid-row: 3;
  aspect-ratio: 4 / 5;
  --off-y: 0px;
  --obj-pos: center 40%;
}

.wn-photo-grid > .wn-photo-item--4 {
  grid-column: 1 / -1;
  grid-row: 4;
  aspect-ratio: 16 / 9;
  --off-y: 0px;
  --obj-pos: center 45%;
}

@media screen and (min-width: 813px) {
  .wn-photo-grid {
    grid-template-columns: repeat(12, minmax(0, 1fr));
    grid-auto-rows: 72px;
    gap: 16px;
  }

  .wn-photo-grid > .wn-photo-item--1 {
    grid-column: 1 / 8;
    grid-row: span 5;
    aspect-ratio: auto;
    --off-y: 0px;
    --obj-pos: center center;
  }

  .wn-photo-grid > .wn-photo-item--2 {
    grid-column: 8 / 13;
    grid-row: span 6;
    aspect-ratio: auto;
    --off-y: 14px;
    --obj-pos: center 35%;
  }

  .wn-photo-grid > .wn-photo-item--3 {
    grid-column: 1 / 5;
    grid-row: span 4;
    aspect-ratio: auto;
    --off-y: -10px;
    --obj-pos: center 38%;
  }

  .wn-photo-grid > .wn-photo-item--4 {
    grid-column: 5 / 8;
    grid-row: span 3;
    aspect-ratio: auto;
    --off-y: 8px;
    --obj-pos: center 45%;
  }

  .wn-photo-grid > .wn-photo-item--5 {
    grid-column: 8 / 13;
    grid-row: span 4;
    aspect-ratio: auto;
    --off-y: -6px;
    --obj-pos: center 40%;
  }
}

/* Fallback: nếu JS chưa wrap — các item trực tiếp dưới #photo */
.Contents #photo[data-v-42061ef9] > .item[data-v-42061ef9] {
  position: static !important;
  width: auto !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
}

/* Mỗi item ảnh trong grid */
.Contents #photo .wn-photo-grid .item[data-v-42061ef9] {
  position: relative !important;
  width: 100% !important;
  height: 100% !important;
  min-height: 0;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  overflow: hidden;
  border-radius: 10px;
  aspect-ratio: auto !important;
  background: #1a1714;
  box-shadow: 0 16px 44px rgba(0, 0, 0, 0.28);
}

@media screen and (max-width: 812px) {
  .Contents #photo .wn-photo-grid .item[data-v-42061ef9] {
    height: auto !important;
  }
}

/* Reveal + offset nhẹ giữ bất đối xứng khi scroll vào */
.Contents #photo .wn-photo-item {
  opacity: 0;
  transform: translateY(calc(20px + var(--off-y, 0px))) scale(0.985);
  transition:
    transform 750ms cubic-bezier(0.2, 0.8, 0.2, 1),
    opacity 750ms ease;
  transition-delay: var(--d, 0ms);
  will-change: transform, opacity;
}

.Contents #photo .wn-photo-item.wn-inview {
  opacity: 1;
  transform: translateY(var(--off-y, 0px)) scale(1);
}

/* img bên trong item */
.Contents #photo .item[data-v-42061ef9] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: var(--obj-pos, center center);
  display: block;
  border-radius: 10px;
  transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (hover: hover) {
  .Contents #photo .wn-photo-item:hover img {
    transform: scale(1.06);
  }

  .Contents #photo .wn-photo-item:hover {
    transform: translateY(calc(var(--off-y, 0px) - 4px)) scale(1);
    box-shadow: 0 22px 52px rgba(0, 0, 0, 0.34);
  }
}