/* ShanYen density pass: roughly 90% of the original display scale.
   Content text and tap targets remain readable; layout widths and section
   geometry are tuned directly, so browser zoom and horizontal scrolling stay normal. */

@media (min-width: 901px) {
  .wrap { width: min(100% - 64px, 1200px); }
  .site-header .header-inner { width: min(100% - 64px, 1320px); }
}

html { scroll-padding-top: 86px; }
.header-inner { height: 75px; gap: 28px; }
.brand-link img { width: 120px; height: 63px; }
.header-cta { white-space: nowrap; }
.button { min-height: 48px; padding-inline: 23px; }
.button-small { min-height: 40px; }
.section { padding-block: 100px; }
.section-head { gap: 36px; margin-bottom: 38px; }
.section-head h2 { font-size: clamp(34px, 3.6vw, 52px); }
.footer-cta-inner { grid-template-columns: 78px 1fr auto; gap: 25px; padding-block: 30px; }
.footer-cta-mark { width: 68px; height: 68px; }
.footer-cta-mark img { width: 58px; height: 58px; }
.footer-cta h2 { font-size: 25px; }
.footer-main { gap: 46px; padding-block: 58px; }
.footer-brand img { width: 134px; height: 72px; }
.footer-bottom { padding: 16px 0 22px; }

/* Trang chủ */
.hero { padding-top: 19px; }
.hero-stage { min-height: 558px; }
.hero-content { max-width: 690px; padding: 81px 0 95px 7.8%; }
.hero h1 { font-size: clamp(43px, 4.8vw, 68px); }
.hero-subline { font-size: 16px; }
.hero-three { margin-bottom: 30px; }
.gifts-section { padding-top: 104px; padding-bottom: 90px; }
.gift-visual { min-height: 510px; padding: 16px; }
.gift-story { padding: 34px clamp(23px, 3vw, 49px); }
.gift-kicker { margin-top: 42px; }
.gift-story h3 { font-size: clamp(34px, 3vw, 45px); }
.gallery-tabs button { min-height: 50px; }
.finder-section { padding-block: 99px; }
.finder-intro h2 { font-size: clamp(42px, 4.2vw, 61px); }
.finder-form { padding: 38px 43px 33px; }
.finder-form-head h3 { font-size: 23px; }
.tea-grid { gap: 19px; }
.tea-image { height: 270px; }
.tea-info h3 { font-size: 22px; }
.promise-section { padding: 100px 0 106px; }
.promise-top { gap: 45px; margin-bottom: 47px; }
.promise-top h2 { font-size: clamp(40px, 4.3vw, 61px); }
.promise-card, .promise-card + .promise-card { min-height: 333px; padding: 28px 28px 39px; border-radius: 26px; }
.promise-card h3 { font-size: clamp(27px, 2.2vw, 33px); }
.promise-card:hover, .promise-card:focus-visible { transform: translateY(-8px); }
.enterprise-section { padding-block: 95px; }
.enterprise-intro h2 { font-size: clamp(40px, 4.1vw, 59px); }
.enterprise-stage, .enterprise-stage-inner { min-height: 550px; }
.enterprise-film { top: 122px; height: 297px; }
.film-frame { height: 297px; flex-basis: 284px; }
.film-frame--ritual { flex-basis: 356px; }
.film-frame--box, .film-frame--pour { flex-basis: 302px; }
.film-frame--tag { flex-basis: 288px; }
.film-frame--art { flex-basis: 248px; }
.film-frame--bag { flex-basis: 270px; }
.film-frame--gift { flex-basis: 329px; }
.enterprise-stage .contact-form { width: min(100%, 500px); padding: 35px 32px 34px 50px; }
.enterprise-stage .contact-form h3 { font-size: 33px; }

/* Quà tặng Trà */
.gift-page .section { padding-block: 90px; }
.gift-page-hero { min-height: 567px; margin-top: 14px; }
.gift-page-hero-copy { padding: 63px 32px 68px 6%; }
.gift-page-hero h1 { font-size: clamp(42px, 4.05vw, 58px); }
.gift-page-hero-copy > p:not(.eyebrow) { margin: 21px 0 23px; font-size: 16px; }
.gift-page-hero-note { margin-top: 52px; }
.gift-page-section-head { margin-bottom: 32px; }
.gift-page-section-head h2 { font-size: clamp(36px, 3.8vw, 52px); }
.gift-page-cards { gap: 14px; }
.gift-page-card-image { height: 280px; }
.gift-page-card h3 { font-size: 18px; }
.gift-page-gallery-stage, .gift-page-gallery-images { min-height: 558px; }
.gift-page-gallery-copy { padding: 38px 29px; }
.gift-page-gallery-copy h3 { margin-top: 42px; font-size: clamp(33px, 2.9vw, 45px); }
.gift-page-business-image { height: 472px; }
.gift-page-business-copy h2 { font-size: clamp(37px, 3.8vw, 52px); }

/* Quà trà Doanh nghiệp */
.business-page .section { padding-block: 86px; }
.business-hero { min-height: 585px; margin-top: 19px; }
.business-hero-copy { padding: 68px 43px 85px 68px; }
.business-hero h1 { font-size: clamp(44px, 4.25vw, 75px); }
.business-hero-copy > p:not(.eyebrow) { margin: 22px 0 25px; font-size: 16px; }
.business-section-heading { margin-bottom: 30px; }
.business-section-heading h2 { font-size: clamp(33px, 3.6vw, 50px); }
.business-gift { flex-basis: clamp(245px, 23.5vw, 310px); }
.business-gift-image { height: 290px; }
.business-gift-copy h3 { font-size: 19px; }
.business-solution-visual { height: 515px; }
.business-solution-copy h2 { font-size: clamp(35px, 3.5vw, 51px); }
.business-guide-art { height: 585px; }
.business-guide-choice h2 { font-size: clamp(36px, 3.5vw, 49px); }
.business-guide-grid a { min-height: 72px; }
.business-table thead img { height: 95px; }
.business-table tbody th, .business-table tbody td { padding-block: 15px; }
.business-faq summary { padding-block: 19px; }
.business-consult.enterprise-section { padding-block: 95px; }
.business-consult-layout h2 { font-size: clamp(36px, 3.6vw, 52px); }
@media (max-width: 1360px) {
  .desktop-nav, .header-cta { display: none; }
  .menu-toggle { display: block; }
  .header-actions { margin-left: auto; }
}

/* Câu chuyện trà */
.story-hero { min-height: 510px; margin-top: 19px; }
.story-hero-content { padding: 70px 40px 74px 68px; }
.story-hero h1 { font-size: clamp(44px, 4.4vw, 67px); }
.story-hero-lead { margin: 21px 0 30px; font-size: 16px; }
.region-picker { padding-top: 71px; padding-bottom: 68px; }
.region-picker-head { margin-bottom: 34px; }
.region-picker h2 { font-size: clamp(31px, 3.1vw, 43px); }
.region-quick-nav { gap: 17px; padding-block: 26px; }
.region-quick-nav .region-thumb { width: 75px; height: 75px; }
.region-quick-nav strong { font-size: 16px; }
.region-story { padding-block: 66px 70px; }
.region-copy h2 { font-size: clamp(35px, 3.25vw, 47px); }
.region-media { height: 275px; }
.region-stories-end { padding: 40px 0 62px; }

/* Về ShanYen */
.about-hero { min-height: min(648px, calc(100svh - 100px)); margin-top: 16px; }
.about-hero-content { padding: 90px 6.6% 104px; }
.about-hero h1 { font-size: clamp(50px, 4.7vw, 68px); }
.about-hero-content > p:not(.eyebrow) { font-size: 17px; }
.about-intro { padding-top: 115px; padding-bottom: 120px; }
.about-intro h2 { font-size: clamp(42px, 4.2vw, 60px); }
.about-intro-images { min-height: 530px; }
.about-manifesto-inner { padding-block: 93px 99px; }
.about-manifesto p { font-size: clamp(28px, 2.9vw, 43px); }
.about-journey { padding-top: 113px; padding-bottom: 108px; }
.about-section-lead { margin-bottom: 52px; }
.about-section-lead h2 { font-size: clamp(39px, 4vw, 56px); }
.about-chapter { padding-block: 67px; gap: clamp(45px, 7.2vw, 112px); }
.about-chapter-media { height: clamp(280px, 31vw, 419px); }
.about-chapter-copy h3 { font-size: clamp(32px, 3.15vw, 47px); }
.about-values { padding-block: 99px 106px; }
.about-values h2 { font-size: clamp(40px, 3.6vw, 52px); }
.about-values-grid { gap: 40px; margin-top: 54px; }
.about-values-grid span { margin-bottom: 56px; }
.about-symbol { padding-block: 112px; }
.about-symbol-art { min-height: 459px; }
.about-symbol-copy h2 { font-size: clamp(38px, 3.6vw, 52px); }
.about-ending { min-height: 437px; margin-bottom: 65px; }
.about-ending-copy { padding: 68px 7% 72px; }
.about-ending h2 { font-size: clamp(44px, 4.5vw, 60px); }

/* Chi tiết set quà */
.gift-detail-page .section { padding-block: 85px; }
.detail-product { padding-top: 22px; padding-bottom: 74px; }
.detail-breadcrumb { margin-bottom: 24px; }
.detail-product-layout { gap: clamp(32px, 3.8vw, 63px); }
.detail-gallery { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
.detail-thumbs button { width: 68px; height: 68px; }
.detail-main-figure { min-height: 594px; }
.detail-main-figure img { height: 594px; }
.detail-product-copy h1 { font-size: clamp(45px, 4.05vw, 62px); }
.detail-product-copy { padding-top: 10px; }
.detail-description { margin-block: 17px 18px; }
.detail-highlights > div { padding-block: 10px; }
.detail-confirmation { margin-block: 11px 15px; }
.detail-features-intro h2 { font-size: clamp(37px, 3.6vw, 52px); }
.detail-feature-card img { height: 261px; }
.detail-story { min-height: 405px; }
.detail-story-inner { padding-block: 69px; }
.detail-story h2 { font-size: clamp(40px, 4.05vw, 58px); }
.detail-business h2 { font-size: clamp(37px, 3.8vw, 53px); }
.detail-faq h2 { font-size: clamp(39px, 3.7vw, 52px); }
.detail-related h2 { font-size: clamp(36px, 3.6vw, 49px); }
.detail-related-card img { height: 225px; }

@media (max-width: 900px) {
  .header-inner { height: 66px; }
  .brand-link img { width: 104px; height: 53px; }
  .section, .gift-page .section, .business-page .section, .gift-detail-page .section { padding-block: 74px; }
  .enterprise-stage, .enterprise-stage-inner { min-height: 0; }
  .story-hero-content { padding: 57px 43px 75px; }
  .region-media { height: 297px; }
  .about-intro-images { min-height: 486px; }
  .about-symbol-art { min-height: 423px; }
  .detail-main-figure { min-height: 522px; }
  .detail-main-figure img { height: 522px; }
}

@media (max-width: 660px) {
  html { scroll-padding-top: 72px; }
  .wrap { width: min(100% - 32px, 1200px); }
  .header-inner { height: 66px; }
  .brand-link img { width: 102px; height: 52px; }
  .button, .button-small { min-height: 44px; }
  .section, .gift-page .section, .gift-detail-page .section { padding-block: 64px; }
  .business-page .section { padding-block: 52px; }
  .section-head { margin-bottom: 25px; }
  .section-head h2 { font-size: 34px; }
  .footer-cta-inner { grid-template-columns: 54px 1fr; gap: 13px; padding-block: 25px; }
  .footer-cta-mark { width: 52px; height: 52px; }
  .footer-cta-mark img { width: 47px; height: 47px; }
  .footer-cta h2 { font-size: 21px; }
  .footer-main { padding-block: 41px; }

  .hero-stage { min-height: 585px; }
  .hero-content { padding: 162px 21px 85px; }
  .hero h1 { font-size: clamp(31px, 8.1vw, 36px); }
  .hero-subline { font-size: 13px; }
  .hero-three { margin-bottom: 26px; }
  .gifts-section { padding-block: 65px; }
  .gift-visual { min-height: 0; grid-template-rows: minmax(260px, 61vw) 78px; padding: 8px; }
  .gift-story { padding: 26px 21px 28px; }
  .gift-story h3 { font-size: clamp(35px, 10vw, 43px); }
  .gift-kicker { margin-top: 24px; }
  .gallery-tabs button { min-height: 48px; }
  .finder-section { padding-block: 66px; }
  .finder-intro h2 { font-size: 39px; }
  .finder-form { padding: 23px; }
  .tea-image { height: 203px; }
  .tea-info h3 { font-size: 18px; }
  .promise-section { padding-block: 68px; }
  .promise-top { margin-bottom: 30px; }
  .promise-top h2 { font-size: 40px; }
  .promise-card, .promise-card + .promise-card { min-height: 248px; padding: 23px 23px 35px; }
  .promise-card h3 { font-size: 28px; }
  .enterprise-section { padding-block: 66px; }
  .enterprise-intro h2 { font-size: 40px; }
  .enterprise-stage { padding-top: 186px; }
  .enterprise-film, .film-frame, .film-frame--ritual, .film-frame--box, .film-frame--tag, .film-frame--art, .film-frame--bag, .film-frame--gift, .film-frame--pour { height: 207px; }
  .film-frame, .film-frame--box, .film-frame--tag, .film-frame--art, .film-frame--bag, .film-frame--gift, .film-frame--pour { flex-basis: 239px; }
  .film-frame--ritual { flex-basis: 270px; }
  .enterprise-stage .contact-form { width: 100%; padding: 39px 18px 24px; }
  .enterprise-stage .contact-form h3 { font-size: 30px; }

  .gift-page-hero { min-height: 0; }
  .gift-page-hero-media { height: 239px; }
  .gift-page-hero-copy { padding: 26px 20px 29px; }
  .gift-page-hero h1 { font-size: clamp(34px, 8.6vw, 42px); }
  .gift-page-hero-copy > p:not(.eyebrow) { font-size: 14px; }
  .gift-page-hero-note { margin-top: 25px; }
  .gift-page-section-head h2 { font-size: 36px; }
  .gift-page-card-image { height: 243px; }
  .gift-page-gallery-images { grid-template-rows: repeat(3, 135px); }
  .gift-page-gallery-stage, .gift-page-gallery-images { min-height: 0; }
  .gift-page-gallery-copy h3 { font-size: 34px; }
  .gift-page-business-image { height: 243px; }
  .gift-page-business-copy h2 { font-size: 36px; }
  .gift-page-consult-layout > div > img { height: 162px; }
  .gift-page-form { padding: 26px 20px; }
  .gift-page-form h3 { font-size: 27px; }

  .business-hero { min-height: 0; }
  .business-hero-media { height: 243px; }
  .business-hero-copy { padding: 26px 18px 23px; }
  .business-hero h1 { font-size: clamp(36px, 9vw, 44px); }
  .business-hero-benefits { padding-bottom: 14px; }
  .business-solution-visual { height: 225px; }
  .business-solution-copy h2 { font-size: 33px; }
  .business-custom-grid figure > div { height: 130px; }
  .business-gift-image { height: 220px; }
  .business-guide-art { height: 239px; }
  .business-guide-choice h2 { font-size: 36px; }
  .business-guide-grid a { min-height: 70px; }
  .business-consult.enterprise-section { padding-block: 65px; }

  .story-hero { min-height: 562px; }
  .story-hero-content { padding: 42px 22px 72px; }
  .story-hero h1 { font-size: clamp(39px, 9.5vw, 53px); }
  .story-hero-lead { font-size: 14px; }
  .region-picker { padding-block: 55px 50px; }
  .region-picker h2 { font-size: 34px; }
  .region-quick-nav { padding-block: 20px 22px; }
  .region-quick-nav .region-thumb { width: clamp(48px, 14.5vw, 62px); height: clamp(48px, 14.5vw, 62px); }
  .region-story { padding-block: 47px 52px; }
  .region-copy h2 { font-size: 36px; }
  .region-media { grid-template-rows: 239px 112px; height: auto; }
  .region-media-has-product { grid-template-rows: 239px 124px 138px; }

  .about-hero { min-height: 621px; }
  .about-hero-content { padding: 49px 22px 105px; }
  .about-hero h1 { font-size: clamp(39px, 9vw, 56px); }
  .about-intro, .about-journey, .about-values, .about-symbol { padding-block: 72px 74px; }
  .about-intro h2 { font-size: 39px; }
  .about-intro-images { min-height: 387px; }
  .about-manifesto-inner { padding-block: 71px 77px; }
  .about-manifesto p { font-size: 27px; }
  .about-section-lead h2, .about-values h2, .about-symbol-copy h2 { font-size: 37px; }
  .about-chapter { gap: 24px; padding-block: 40px; }
  .about-chapter-media { height: 270px; }
  .about-chapter-copy h3 { font-size: 33px; }
  .about-values-grid { gap: 28px; margin-top: 34px; }
  .about-values-grid span { margin-bottom: 21px; }
  .about-values-grid h3 { font-size: 27px; }
  .about-symbol-art { min-height: 324px; }
  .about-ending { min-height: 468px; margin-bottom: 32px; }
  .about-ending-copy { padding: 31px 23px 34px; }
  .about-ending h2 { font-size: 41px; }

  .detail-product { padding-top: 15px; padding-bottom: 58px; }
  .detail-thumbs button { width: 58px; height: 58px; }
  .detail-main-figure { min-height: 324px; }
  .detail-main-figure img { height: 324px; }
  .detail-product-copy h1 { font-size: clamp(39px, 9vw, 50px); }
  .detail-features-intro h2, .detail-business h2, .detail-faq h2 { font-size: 37px; }
  .detail-feature-card img { height: 167px; }
  .detail-story-inner { padding-block: 63px; }
  .detail-story h2 { font-size: 39px; }
  .detail-related-card img { height: 149px; }
}
.shyl-switcher{display:inline-flex;align-items:center;gap:.35rem;white-space:nowrap;font-size:.75rem;letter-spacing:.08em;font-weight:700;color:#51634a}
.shyl-switcher a{color:inherit;text-decoration:none;padding:.35rem .2rem}
.shyl-switcher a[aria-current="page"]{color:#20491f;border-bottom:1px solid currentColor}
.shyl-switcher a:focus-visible{outline:2px solid #20491f;outline-offset:2px}
/* Preserve the authored hero crop while allowing the browser to prioritize the image. */
img.hero-image { display:block;position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 49%;background-image:none; }
@media (max-width: 660px) { img.hero-image { object-position:55% center; } }
/* Defer layout and painting of sections several screens below the mobile hero.
   Their measured intrinsic heights keep anchor positions stable until revealed. */
@supports (content-visibility: auto) {
  @media (max-width: 660px) {
    body.home .finder-section { content-visibility:auto; contain-intrinsic-size:auto 906px; }
    body.home .teas-section { content-visibility:auto; contain-intrinsic-size:auto 1741px; }
    body.home .promise-section { content-visibility:auto; contain-intrinsic-size:auto 1185px; }
    body.home .enterprise-section { content-visibility:auto; contain-intrinsic-size:auto 1327px; }
    body.home .site-footer { content-visibility:auto; contain-intrinsic-size:auto 1165px; }
    body.home .promise-section:not(.media-ready)::before,
    body.home .site-footer:not(.media-ready)::before { background-image:none; }
  }
}