/* ===== Trang chủ ===== */
/* Thanh đầu trang trong suốt nằm ĐÈ lên banner (kéo banner lên sau lưng nó) */
.tm-home .site-header { margin-bottom: calc(-1px - var(--header-h)); }
/* Máy tính: lớp kem rất nhạt sau chữ menu để không lẫn vào tóc / đèn trong ảnh (vẫn nhìn xuyên được) */
@media (orientation: landscape) { .tm-home .site-header:not(.is-scrolled) { background: linear-gradient(to bottom, rgba(253, 252, 246, .55), rgba(253, 252, 246, 0)) border-box no-repeat; } }
/* Banner đầu trang: phủ kín màn hình (19/10 bỏ thanh thông báo; đầu trang trong suốt đè lên, dính khi cuộn).
   "Sân khấu" giữ đúng tỉ lệ ảnh rồi phủ khung (như object-fit: cover, đo bằng cqw/cqh của khung) để nút "Xem bộ sưu tập"
   đặt theo toạ độ ẢNH — máy nào cũng nằm đúng khoảng trống dưới logo in trong ảnh. */
.banner { position: relative; height: 100vh; height: 100svh; min-height: 420px; overflow: hidden; background: #ece4d8; container-type: size; }
.banner__link, .banner__stage, .banner picture { display: block; }
.banner__link { height: 100%; }
.banner__stage { position: absolute; left: 50%; top: 50%; aspect-ratio: 16 / 9; transform: translate(-50%, -50%); width: max(100cqw, calc(100cqh * 16 / 9)); }
.banner picture, .banner__stage img { width: 100%; height: 100%; }
.banner__stage img { display: block; object-fit: cover; }
.banner__cta { position: absolute; left: 36.8%; top: 56%; transform: translateX(-50%); white-space: nowrap; box-shadow: 0 10px 30px -12px rgba(41, 69, 106, .45); }
.banner__link:hover .banner__cta { background: var(--navy-ink); border-color: var(--navy-ink); }
.banner__link:focus-visible { outline: 2px solid var(--sky-deep); outline-offset: -6px; }
/* Màn dọc (điện thoại, máy tính bảng dựng đứng): ảnh dọc, giữ mép TRÊN (chữ Grand Opening), nút canh giữa ở đáy */
@media (orientation: portrait) {
  .banner { min-height: 0; }
  /* Ảnh dọc có logo in sẵn ngay mép trên, trùng chỗ logo của thanh đầu trang → khi còn ở đầu trang chỉ để logo trong ảnh */
  .tm-home .site-header .logo { transition: opacity .35s; }
  .tm-home .site-header:not(.is-scrolled) .logo { opacity: 0; pointer-events: none; }
  .banner__stage { top: 0; transform: translateX(-50%); aspect-ratio: 4500 / 9750; width: max(100cqw, calc(100cqh * 4500 / 9750)); }
  /* Ảnh dọc có thể dài hơn khung (bị cắt đáy) → nút đặt theo KHUNG (cq = kích thước khung banner), canh giữa đáy (chủ shop 19/10).
     Sân khấu canh giữa khung nên 50% của sân khấu = giữa màn hình. */
  .banner__cta { left: 50%; top: calc(100cqh - 28px); transform: translate(-50%, -100%); }
}

/* Mới về: chữ trái + băng sản phẩm trượt phải */
.arrivals { display: grid; grid-template-columns: minmax(240px, 3fr) 9fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.arrivals__text { display: grid; gap: 16px; justify-items: start; }
.arrivals__text p { margin: 0; color: var(--muted); max-width: 30ch; }
.rail { position: relative; min-width: 0; }
.rail__track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 3 * 20px) / 3.35); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: 6px; overscroll-behavior-x: contain; }
.rail__track::-webkit-scrollbar { display: none; }
.rail__track > * { scroll-snap-align: start; }
.rail__nav { display: flex; gap: 8px; align-items: center; }
.rail__nav .icon-btn { border: 1px solid var(--line); background: var(--ivory); }
.rail__progress { height: 2px; background: var(--line); margin-top: 22px; position: relative; overflow: hidden; }
.rail__progress span { position: absolute; left: 0; top: 0; bottom: 0; background: var(--navy); width: 30%; transition: transform .3s var(--ease), width .3s; }

/* Danh mục chia đôi xen kẽ (chữ ký của Manito) */
.split { display: grid; grid-template-columns: 1fr 1fr; min-height: clamp(560px, 70vw, 820px); }
.split__panel { display: grid; place-content: center; justify-items: center; gap: 22px; text-align: center; padding: 56px 32px; }
.split__panel p { margin: 0; color: var(--muted); max-width: 34ch; }
.split__panel .arch { width: clamp(200px, 22vw, 300px); aspect-ratio: 3 / 4; }
.split__big { position: relative; overflow: hidden; }
.split__big img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s var(--ease); }
.split:hover .split__big img { transform: scale(1.025); }
.split--flip .split__big { order: -1; }
.split__cap { position: absolute; left: 24px; bottom: 22px; font: 500 11.5px/1 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--ivory); background: rgba(41, 69, 106, .55); padding: 9px 12px; }

/* Câu chuyện Maison */
.story { display: grid; grid-template-columns: .9fr 1.1fr; gap: clamp(32px, 7vw, 120px); align-items: center; }
.story__art { position: relative; }
.story__art .arch { aspect-ratio: 3 / 4.3; box-shadow: 0 30px 60px -40px rgba(41, 69, 106, .45); }
.story__art .stamp { position: absolute; right: -18px; bottom: 36px; width: 104px; height: 104px; border-radius: 50%; background: var(--ivory); display: grid; place-items: center; box-shadow: 0 10px 30px -14px rgba(41, 69, 106, .4); }
.story__art .stamp img { width: 70px; }
.story__copy { display: grid; gap: 22px; }
.story__copy p { margin: 0; max-width: 54ch; }
.story__quote { font: italic 400 18.5px/1.5 var(--f-serif); color: var(--navy); border-left: 1px solid var(--sky); padding-left: 20px; }
.values { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 28px; margin-top: 6px; }
.values div { display: grid; grid-template-columns: 14px 1fr; gap: 12px; }
.values svg { width: 12px; height: 12px; fill: var(--sky); margin-top: 7px; }
.values b { font: 500 12.5px/1.5 var(--f-display); letter-spacing: .12em; text-transform: uppercase; color: var(--navy); display: block; }
.values span { font-size: 14px; color: var(--muted); }

/* Điều Maison chăm chút (như Discover More) */
.care { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(20px, 3vw, 40px); }
.care article { display: grid; gap: 16px; align-content: start; }
.care figure { margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 2px; }
.care figure img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease); }
.care article:hover img { transform: scale(1.03); }
.care h3 { font: 400 26px/1.2 var(--f-brand); color: var(--navy); margin: 4px 0 0; }
.care p { margin: 0; color: var(--muted); }

@media (max-width: 960px) {
  .story__art .arch { aspect-ratio: 4 / 5; }
  .story__art { max-width: 360px !important; }
  .arrivals { grid-template-columns: 1fr; }
  .arrivals__text { justify-items: center; text-align: center; }
  .rail__track { grid-auto-columns: 62%; gap: 14px; }
  .split { grid-template-columns: 1fr; min-height: 0; }
  .split__big { aspect-ratio: 4 / 5; order: -1; }
  .split__panel { padding: 36px var(--gutter) 48px; gap: 16px; }
  .split__panel .arch { display: none; }
  .story { grid-template-columns: 1fr; }
  .story__art { max-width: 420px; margin-inline: auto; width: 100%; }
  .story__art .stamp { right: 0; }
  .care { grid-template-columns: 1fr; }
  .care article { grid-template-columns: 120px 1fr; gap: 0 18px; }
  .care figure { grid-row: span 3; aspect-ratio: 3 / 4; }
}
@media (max-width: 520px) { .values { grid-template-columns: 1fr; } }