/* Load after hai-yen-ivory-gold.css. Photographic src/srcset remain unchanged.
   Tích hợp vào theme 1.6.2 (assets/ivory/08-transition-luxury/). Bản gốc: output/hai-yen-style-decor-2026-10-26/08-transition-luxury. */
@media (min-width:761px) {
 .hy-ivory .hero__media { left:32%; }
 /* Căn ảnh vào giữa vùng nhìn thấy: khung ảnh bắt đầu ở 32% nhưng ảnh chỉ lộ ra sau đường cong (khoảng 34–47%),
    nên tâm vùng nhìn thấy (~70%) lệch phải so với tâm khung (66%). Phóng nhẹ ảnh từ mép trái để kéo tâm ảnh sang phải.
    Từng trang chỉnh thêm bằng tham số zoom / zoom_y của template-parts/hero.php. Không đổi file ảnh. */
 .hy-ivory .hero__media img { transform-origin:0 var(--hero-oy,50%); transform:scale(var(--hero-zoom,1.12)); }
 .hy-ivory .hero::before {
  inset:0 auto 0 0; width:54%;
  background:url('./hai-yen-transition-hero-cong-s-la-vang-hoan-chinh.svg') left center/100% 100% no-repeat;
 }
 /* Variant: keep the same geometry, add only a narrow live glass strip. */
 @supports ((backdrop-filter:blur(3px)) or (-webkit-backdrop-filter:blur(3px))) {
  .hy-ivory .hero.hy-transition-glass::after {
   content:''; position:absolute; inset:0 auto 0 0; width:54%; z-index:-1;
   pointer-events:none; background:rgba(255,252,243,.12);
   -webkit-backdrop-filter:blur(3px); backdrop-filter:blur(3px);
   -webkit-mask:url('./hai-yen-transition-mat-na-dai-kinh-mo.svg') left center/100% 100% no-repeat;
   mask:url('./hai-yen-transition-mat-na-dai-kinh-mo.svg') left center/100% 100% no-repeat;
  }
 }
 /* Optional comparison with a plain, unembellished curve. */
 .hy-ivory .hero.hy-transition-plain::before {
  background-image:url('./hai-yen-transition-panel-kem-cong-s-trai.svg');
 }
}
@media (min-width:761px) and (max-width:1100px) {
 .hy-ivory .hero::before,.hy-ivory .hero.hy-transition-glass::after { width:63%; }
 .hy-ivory .hero__media { left:34%; }
 .hy-ivory .hero__content { padding-left:52px; }
 .hy-ivory .hero__content > *,.hy-ivory .hero__content > .hero__title { max-width:44%; }
}
@media (max-width:760px) {
 .hy-ivory .hero__media::before {
  content:''; position:absolute; inset:-1px 0 auto; height:36px; z-index:1;
  pointer-events:none;
  background:url('./hai-yen-transition-mobile-cong-ngang-mem.svg') top center/100% 100% no-repeat;
 }
}

/* ---------------------------------------------------------------------------
   Theme 1.6.2: chừa chỗ cho chữ theo đường cong (đo 26/10/2026).
   Bản gốc đặt nền kem = 54% bề ngang trang. Nhưng chữ nằm trong khung giữa rộng 1200px, nên ở màn hình
   rộng hoặc trang có đoạn mô tả dài, nút và chữ phía dưới chạm/đè lên đường cong (đo được tới 110px).
   Đường cong lùi sâu nhất về trái ở khoảng 64–66% bề rộng hình nền, nên tính bề rộng nền kem theo vị trí
   khung chữ: nền = (lề trái khung chữ + bề rộng cột chữ + 28px khoảng thở) / 0,66.
   --------------------------------------------------------------------------- */
@media (min-width:761px) {
 .hy-ivory .hero {
  --hy-l: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --hy-cw: 400px;
  --hy-panel: calc((var(--hy-l) + var(--hy-cw) + 28px) / .66);
  min-height: clamp(500px, 42vw, 680px);
 }
 .hy-ivory .hero::before,.hy-ivory .hero.hy-transition-glass::after { width:var(--hy-panel); }
 /* Ảnh bắt đầu trước điểm lõm nhất của đường cong (≈64% bề rộng nền) để không hở mép. */
 .hy-ivory .hero__media { left:calc(var(--hy-panel) * .6); }
 .hy-ivory .hero__content { padding-left:var(--gutter); }
 .hy-ivory .hero__content > * { max-width:var(--hy-cw); }
 /* Tiêu đề nằm ở đoạn giữa, nơi đường cong lồi xa nhất: cho rộng hơn. */
 .hy-ivory .hero__content > .hero__title { max-width:calc(var(--hy-cw) + 60px); }
 /* Tâm ảnh vào giữa vùng ảnh nhìn thấy (sau đường cong). */
 .hy-ivory .hero__media img { transform:scale(var(--hero-zoom,1.16)); }
 .hy-ivory .hero--compact { min-height:clamp(380px, 30vw, 460px); }
}
/* Màn hình rộng: ảnh đầu trang cao hơn nên khối chữ chỉ chiếm phần giữa, nơi đường cong còn xa về bên phải;
   chia cho 0,72 để nền kem không lấn quá rộng, ảnh khách sạn lộ ra nhiều hơn. */
@media (min-width:1500px) {
 .hy-ivory .hero { --hy-panel: calc((var(--hy-l) + var(--hy-cw) + 28px) / .72); }
}
@media (min-width:761px) and (max-width:1100px) {
 .hy-ivory .hero { --hy-cw:340px; }
 .hy-ivory .hero::before,.hy-ivory .hero.hy-transition-glass::after { width:var(--hy-panel); }
 .hy-ivory .hero__media { left:calc(var(--hy-panel) * .6); }
 .hy-ivory .hero__content { padding-left:var(--gutter); }
 .hy-ivory .hero__content > *,.hy-ivory .hero__content > .hero__title { max-width:var(--hy-cw); }
}

/* ---------------------------------------------------------------------------
   Theme 1.9.0: đầu trang "toàn cảnh" (.hero--full, trang Giới thiệu) theo ảnh mẫu 28/10/2026.
   - Cao gần bằng màn hình; ảnh hiện trọn chiều cao (thấy cả mái lẫn chân đế), căn giữa vùng ảnh sau đường cong.
   - Ảnh khách sạn rộng (tỷ lệ 3:2, tòa nhà chiếm ~19–80% bề ngang ảnh, rộng 0,906 × chiều cao ảnh): chiều cao đầu
     trang giới hạn sao cho cả tòa nhà nằm gọn giữa đỉnh đường cong và mép phải (chừa ~35px mỗi bên).
   - Đường cong (hình 1000×1000 kéo theo nền kem): mép ở 76% bề rộng nền ở trên, lồi nhất 86,2% (cao 44%),
     81% ở cao 65%, thấp nhất 65,2% gần chân; nét vàng nằm trong mép 1,2%.
     Nền kem rộng 53% như ảnh mẫu, nới thêm nếu hàng nút (đáy đặt ở 66% chiều cao) cần chỗ.
   - Các biến tính bằng vw (không dùng %) để dùng được cả trong chiều cao.
   - Chữ thẳng hàng với logo (khung 1280px của đầu trang), cỡ chữ theo ảnh mẫu ở bề ngang 1672px.
   --------------------------------------------------------------------------- */
@media (min-width:1024px) {
 .hy-ivory .hero--full {
  --hy-l: max(var(--gutter), calc((100vw - 1280px) / 2));
  --hy-cw: clamp(360px, 29vw, 485px);
  --hy-row: clamp(360px, 28.6vw, 480px); /* bề ngang hàng hai nút */
  --hy-panel: max(53vw, calc((var(--hy-l) + var(--hy-row) + 40px) / .8));
  --hy-z: 1.04;
  --hy-h: clamp(46vw, calc(100svh - var(--header-h) - 1px), min(54vw, calc((100vw - var(--hy-panel) * .862 - 70px) / .942)));
  height: var(--hy-h); min-height: 0;
 }
 .hy-ivory .hero--full .hero__media { left:0; }
 .hy-ivory .hero--full .hero__media img {
  position:absolute; top:calc((1 - var(--hy-z)) * 60%);
  /* Tâm ảnh vào giữa vùng từ đỉnh đường cong tới mép phải; không lùi quá điểm lõm nhất của đường cong (để không hở mép). */
  left:min(calc(var(--hy-panel) * .64), calc((100% + var(--hy-panel) * .862) / 2 - var(--hy-h) * var(--hy-z) * .75));
  width:auto; height:calc(var(--hy-z) * 100%); max-width:none; min-width:calc(100% - var(--hy-panel) * .64);
  transform:none; object-fit:cover; object-position:center;
 }
 .hy-ivory .hero--full .hero__content { max-width:calc(1280px + var(--gutter) * 2); padding:0 var(--gutter) calc(var(--hy-h) * .34); align-self:flex-end; }
 .hy-ivory .hero--full .hero__content > * { max-width:var(--hy-cw); }
 .hy-ivory .hero--full .hero__content > .hero__title { max-width:calc(var(--hy-cw) + 80px); }
 .hy-ivory .hero--full .breadcrumb { margin-bottom:clamp(24px, 2.6vw, 44px); font-size:clamp(13px, .9vw, 15px); }
 .hy-ivory .hero--full .breadcrumb [aria-current] { color:#b9852f; font-weight:500; }
 .hy-ivory .hero--full .hero__title { font-size:clamp(56px, 5.7vw, 96px); font-weight:600; line-height:1; letter-spacing:-.005em; }
 .hy-ivory .hero--full .hero__title .text-gold { color:#bf8a36; font-weight:500; }
 .hy-ivory .hero--full .hero__subtitle {
  margin-top:clamp(14px, 1vw, 18px); padding-top:clamp(24px, 1.9vw, 32px); max-width:min(calc(var(--hy-cw) + 50px), 19.5em);
  font-family:var(--font-display); font-size:clamp(20px, 1.68vw, 28px); font-weight:500; line-height:1.3; color:var(--ink);
 }
 .hy-ivory .hero--full .hero__subtitle::before { width:clamp(40px, 3.1vw, 54px); height:2px; background:#cfa65c; }
 .hy-ivory .hero--full .btn-row { gap:16px; margin-top:clamp(24px, 2vw, 34px); max-width:none; flex-wrap:nowrap; }
 .hy-ivory .hero--full .btn {
  min-height:clamp(50px, 3.65vw, 62px); padding-inline:clamp(20px, 1.8vw, 30px); gap:14px;
  font-size:clamp(12px, 1vw, 16.5px); font-weight:600; letter-spacing:.08em;
 }
 .hy-ivory .hero--full .btn:not(.btn--outline) { box-shadow:0 12px 26px -14px rgba(150, 100, 20, .75); }
 .hy-ivory .hero--full .btn--outline { border-color:#c9b48d; background:rgba(255, 253, 247, .45); }
 .hy-ivory .hero--full .btn .icon--sm { width:clamp(18px, 1.3vw, 22px); height:clamp(18px, 1.3vw, 22px); stroke-width:1.8; }
}
/* 1024–1199px: đầu trang chỉ cao ~500px (giới hạn để thấy trọn tòa nhà), thu nhỏ chữ để khối chữ không sát đầu trang. */
@media (min-width:1024px) and (max-width:1199px) {
 .hy-ivory .hero--full .breadcrumb { margin-bottom:22px; }
 .hy-ivory .hero--full .hero__title { font-size:5.2vw; }
 .hy-ivory .hero--full .hero__subtitle { margin-top:12px; padding-top:22px; font-size:19px; }
 .hy-ivory .hero--full .btn-row { margin-top:22px; }
 .hy-ivory .hero--full .btn { min-height:46px; }
}
/* Màn hình hẹp hơn 1024px: xếp chữ trên, ảnh dưới với đúng tỷ lệ ảnh (3:2) để thấy trọn tòa nhà. */
@media (max-width:1023px) {
 .hy-ivory .hero--full { display:flex; flex-direction:column; align-items:stretch; min-height:0; }
 .hy-ivory .hero--full::before,.hy-ivory .hero--full.hy-transition-glass::after { display:none; }
 .hy-ivory .hero--full .hero__media { position:relative; inset:auto; left:0; z-index:0; order:2; width:100%; aspect-ratio:3/2; }
 .hy-ivory .hero--full .hero__media img { position:absolute; inset:0; width:100%; height:100%; transform:none; object-position:center; }
 .hy-ivory .hero--full .hero__media::before {
  content:''; position:absolute; inset:-1px 0 auto; height:36px; z-index:1; pointer-events:none;
  background:url('./hai-yen-transition-mobile-cong-ngang-mem.svg') top center/100% 100% no-repeat;
 }
 .hy-ivory .hero--full .hero__content { padding:40px var(--gutter) 36px; background:url('../01-la-va-duong-net/hai-yen-la-net-vang-canh-phai.svg') right bottom/90px auto no-repeat; }
 .hy-ivory .hero--full .hero__content > *,.hy-ivory .hero--full .hero__content > .hero__title { max-width:100%; }
 .hy-ivory .hero--full .hero__title { font-size:clamp(43px, 6.6vw, 60px); font-weight:600; }
 .hy-ivory .hero--full .hero__title .text-gold { color:#bf8a36; font-weight:500; }
 .hy-ivory .hero--full .hero__subtitle { max-width:calc(100% - 65px); font-family:var(--font-display); font-size:clamp(20px, 2.6vw, 24px); font-weight:500; line-height:1.3; color:var(--ink); text-wrap:balance; }
 .hy-ivory .hero--full .btn--outline { background:rgba(252, 249, 242, .88); } /* che nhánh lá trang trí phía sau nút */
}
@media (min-width:761px) and (max-width:1023px) {
 .hy-ivory .hero--full .btn { min-height:50px; padding-inline:24px; font-size:13px; }
}