:root {
   --bg: #f7f3ea;
   --surface: #ffffff;
   --text: #1f2026;
   --muted: #777777;
   --line: #e9e3d8;
   --brand: #201916;
   --brand-soft: #e7dcc5;
   --shadow: 0 24px 60px rgba(24, 28, 27, 0.14);
   --radius: 24px;
   --container: min(1400px, calc(100% - 48px));
   --header-height: 84px;
   --topbar-height: 44px;
   --font: "Montserrat", "Segoe UI", Arial, Helvetica, sans-serif;
 }
 * {
   box-sizing: border-box;
 }
  html {
    /* Optimize scroll performance: disable smooth scrolling on touch devices to prevent touch gesture conflicts */
    scroll-behavior: auto;
  }

  @media (hover: hover) and (pointer: fine) {
    html {
      /* Enable smooth scrolling only on desktop devices with mice/trackpads */
      scroll-behavior: smooth;
    }
  }
 body {
   margin: 0;
   font-family: var(--font);
   color: var(--text);
   background-color: #f7f3ea; /* Solid background color matching --bg to prevent striping/staircase rendering on slow load */
   background-image: radial-gradient(circle at top left, rgba(32, 25, 22, 0.06), transparent 28%);
   background-repeat: no-repeat;
 }
 a {
   color: inherit;
   text-decoration: none;
 }
 img {
   display: block;
   max-width: 100%;
 }
  button {
    font: inherit;
    color: inherit;
  }

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

  .newsletter-popup {
    position: fixed;
    inset: 0;
    z-index: 10020;
    display: grid;
    place-items: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
  }

  .newsletter-popup.is-open {
    opacity: 1;
    pointer-events: auto;
  }

  .newsletter-popup__overlay {
    position: absolute;
    inset: 0;
    background: rgba(12, 20, 16, 0.58);
    backdrop-filter: blur(4px);
  }

  .newsletter-popup__dialog {
    position: relative;
    width: min(860px, 100%);
    display: grid;
    grid-template-columns: minmax(0, 1.03fr) minmax(320px, 0.97fr);
    overflow: hidden;
    border-radius: 10px;
    background: #ffffff;
    box-shadow: 0 28px 80px rgba(12, 20, 16, 0.3);
    transform: translateY(12px) scale(0.98);
    transition: transform 0.22s ease;
  }

  .newsletter-popup.is-open .newsletter-popup__dialog {
    transform: translateY(0) scale(1);
  }

  .newsletter-popup__dialog--banner {
    width: min(680px, 100%);
    grid-template-columns: 1fr;
    background: transparent;
  }

  .newsletter-popup__close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.92);
    color: #253025;
    font-size: 24px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 8px 24px rgba(12, 20, 16, 0.16);
  }

  .newsletter-popup__media {
    min-height: 430px;
    display: block;
    background: #eef3e9;
  }

  .newsletter-popup__dialog--banner .newsletter-popup__media {
    min-height: auto;
    border-radius: 10px;
    overflow: hidden;
  }

  .newsletter-popup__media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .newsletter-popup__dialog--banner .newsletter-popup__media img {
    height: auto;
  }

  .newsletter-popup__content {
    display: grid;
    align-content: center;
    gap: 14px;
    padding: 42px;
  }

  .newsletter-popup__main {
    display: grid;
    gap: 14px;
  }

  .newsletter-popup__eyebrow {
    width: max-content;
    max-width: 100%;
    padding: 6px 12px;
    border: 1px solid rgba(200, 166, 106, 0.38);
    background: rgba(200, 166, 106, 0.08);
    color: #b99a4b;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
  }

  .newsletter-popup__content h2 {
    margin: 0;
    color: #253025;
    font-size: 30px;
    line-height: 1.12;
    font-weight: 900;
  }

  .newsletter-popup__content p {
    margin: 0;
    color: #657260;
    font-size: 15px;
    line-height: 1.7;
  }

  .newsletter-popup__form {
    display: grid;
    gap: 10px;
    margin-top: 6px;
  }

  .newsletter-popup__content form {
    margin: 0;
  }

  .newsletter-popup__form input {
    width: 100%;
    min-height: 48px;
    padding: 0 14px;
    border: 1px solid #e4dccb;
    background: #ffffff;
    color: #253025;
    font: inherit;
    outline: 0;
    transition: border-color 180ms ease;
  }

  .newsletter-popup__form input:focus {
    border-color: #b99a4b;
  }

  .newsletter-popup__form button {
    min-height: 48px;
    border: 0;
    border-radius: 2px;
    background: #201916;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 180ms ease;
  }

  .newsletter-popup__form button:hover,
  .newsletter-popup__form button:focus {
    background: #b99a4b;
  }

  .newsletter-popup__note {
    color: #8a9584;
    font-size: 12px;
    line-height: 1.5;
  }

  .newsletter-popup__success {
    display: grid;
    justify-items: start;
    gap: 14px;
  }

  .newsletter-popup__success[hidden] {
    display: none;
  }

  .newsletter-popup__success-icon {
    width: 48px;
    height: 48px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: #201916;
    color: #ffffff;
    font-size: 24px;
    font-weight: 900;
  }

  .newsletter-popup__success button {
    min-height: 44px;
    padding: 0 22px;
    border: 0;
    border-radius: 2px;
    background: #201916;
    color: #ffffff;
    font-size: 13px;
    font-weight: 900;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 180ms ease;
  }

  .newsletter-popup__success button:hover,
  .newsletter-popup__success button:focus {
    background: #b99a4b;
  }

  .recent-purchase-toast {
    position: fixed;
    left: 18px;
    bottom: 18px;
    z-index: 10010;
    width: min(360px, calc(100vw - 28px));
    opacity: 0;
    pointer-events: none;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.22s ease;
  }

  .recent-purchase-toast.is-open {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0);
  }

  .recent-purchase-toast__link {
    min-height: 86px;
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    gap: 12px;
    padding: 10px 38px 10px 10px;
    border: 1px solid rgba(223, 232, 217, 0.95);
    background: rgba(255, 255, 255, 0.97);
    box-shadow: 0 14px 38px rgba(20, 30, 18, 0.16);
    color: #253025;
  }

  .recent-purchase-toast__image {
    width: 78px;
    height: 66px;
    display: block;
    overflow: hidden;
    background: #f4efe8;
  }

  .recent-purchase-toast__image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .recent-purchase-toast__body {
    min-width: 0;
    display: grid;
    align-content: center;
    gap: 4px;
  }

  .recent-purchase-toast__body strong {
    overflow: hidden;
    color: #253025;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recent-purchase-toast__body span {
    overflow: hidden;
    color: #4f5b4a;
    font-size: 13px;
    line-height: 1.35;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .recent-purchase-toast__body em {
    width: max-content;
    margin-top: 2px;
    padding: 6px 10px;
    background: #b99a4b;
    color: #ffffff;
    font-size: 12px;
    line-height: 1;
    font-style: normal;
    font-weight: 900;
  }

  .recent-purchase-toast__close {
    position: absolute;
    top: 6px;
    right: 7px;
    z-index: 2;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border: 0;
    background: transparent;
    color: #7b8576;
    font-size: 19px;
    line-height: 1;
    cursor: pointer;
  }

  .recent-purchase-toast__close:hover {
    color: #253025;
  }

  .floating-contact {
    position: fixed;
    right: 18px;
    bottom: 18px;
    z-index: 10015;
    display: grid;
    justify-items: end;
    gap: 10px;
  }

  .floating-contact__panel {
    width: min(300px, calc(100vw - 28px));
    overflow: hidden;
    border: 1px solid rgba(223, 232, 217, 0.95);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.98);
    box-shadow: 0 18px 46px rgba(20, 30, 18, 0.18);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(10px) scale(0.98);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s ease;
  }

  .floating-contact.is-open .floating-contact__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
  }

  .floating-contact__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 13px 14px;
    background: #201916;
    color: #ffffff;
  }

  .floating-contact__head strong {
    min-width: 0;
    overflow: hidden;
    font-size: 14px;
    line-height: 1.25;
    font-weight: 900;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .floating-contact__close {
    width: 26px;
    height: 26px;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
  }

  .floating-contact__list {
    display: grid;
    padding: 8px;
  }

  .floating-contact__item {
    min-height: 48px;
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    color: #253025;
    font-size: 14px;
    font-weight: 800;
    transition: background 0.18s ease, transform 0.18s ease;
  }

  .floating-contact__item:hover {
    background: #f5f9f1;
    transform: translateX(-2px);
  }

  .floating-contact__icon {
    width: 36px;
    height: 36px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    color: #ffffff;
    font-size: 12px;
    font-weight: 900;
    line-height: 1;
  }

  .floating-contact__icon svg,
  .floating-contact__toggle-icon svg {
    width: 18px;
    height: 18px;
    fill: currentColor;
  }

  .floating-contact__icon--phone {
    background: #201916;
  }

  .floating-contact__icon--zalo {
    background: #0a8fed;
    font-size: 10px;
  }

  .floating-contact__icon--facebook {
    background: #1877f2;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 23px;
  }

  .floating-contact__icon--instagram {
    background: linear-gradient(135deg, #f9ce34 0%, #ee2a7b 48%, #6228d7 100%);
    font-size: 21px;
  }

  .floating-contact__icon--youtube {
    background: #b99a4b;
    font-size: 15px;
  }

  .floating-contact__toggle {
    min-height: 52px;
    display: inline-grid;
    grid-template-columns: 32px minmax(0, auto);
    align-items: center;
    gap: 9px;
    padding: 9px 16px 9px 10px;
    border: 0;
    border-radius: 999px;
    background: #201916;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(185, 154, 75, 0.28);
    font-size: 14px;
    font-weight: 900;
    cursor: pointer;
  }

  .floating-contact__toggle-icon {
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.18);
  }

  .back-to-top {
    position: fixed;
    right: 18px;
    bottom: 84px;
    z-index: 10019;
    width: 46px;
    height: 46px;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: #201916;
    color: #ffffff;
    box-shadow: 0 14px 34px rgba(32, 25, 22, 0.2);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(8px);
    transition: opacity 0.18s ease, transform 0.18s ease, background 0.18s ease, visibility 0.18s ease;
  }

  .back-to-top.is-visible {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0);
  }

  .back-to-top:hover {
    background: #201916;
  }

  .back-to-top svg {
    width: 20px;
    height: 20px;
    fill: currentColor;
  }

  @media (max-width: 767px) {
    .newsletter-popup {
      padding: 16px;
    }

    .newsletter-popup__dialog {
      max-height: calc(100vh - 32px);
      grid-template-columns: 1fr;
      overflow-y: auto;
    }

    .newsletter-popup__media {
      min-height: 230px;
    }

    .newsletter-popup__content {
      padding: 26px 20px 22px;
    }

    .newsletter-popup__content h2 {
      font-size: 24px;
    }

    .recent-purchase-toast {
      left: 12px;
      bottom: 12px;
      width: calc(100vw - 24px);
    }

    .recent-purchase-toast__link {
      grid-template-columns: 64px minmax(0, 1fr);
      gap: 10px;
      min-height: 76px;
      padding: 9px 34px 9px 9px;
    }

    .recent-purchase-toast__image {
      width: 64px;
      height: 58px;
    }

    .recent-purchase-toast__body strong {
      font-size: 13px;
    }

    .recent-purchase-toast__body span {
      font-size: 12px;
    }

    .floating-contact {
      right: 12px;
      bottom: 12px;
    }

    .floating-contact__panel {
      width: min(292px, calc(100vw - 24px));
    }

    .floating-contact__toggle {
      width: 48px;
      height: 48px;
      min-height: 48px;
      grid-template-columns: 1fr;
      gap: 0;
      padding: 8px;
      font-size: 0;
      border: 2px solid #111111;
    }

    .floating-contact__toggle > span:not(.floating-contact__toggle-icon) {
      display: none;
    }

    .back-to-top {
      right: 12px;
      bottom: 76px;
      width: 42px;
      height: 42px;
    }
  }

  .hero {
   width: var(--container);
   margin: 0 auto;
   min-height: calc(100vh - var(--topbar-height) - var(--header-height));
   display: grid;
   align-items: center;
   padding: 48px 0 72px;
 }
 .hero__panel {
   border-radius: 34px;
   padding: clamp(28px, 5vw, 56px);
   background:
     linear-gradient(130deg, rgba(32, 25, 22, 0.98) 0%, rgba(46, 71, 64, 0.9) 48%, rgba(215, 199, 170, 0.85) 100%);
   color: #fcfaf5;
   box-shadow: 0 24px 64px rgba(32, 25, 22, 0.16);
   min-height: 420px;
   display: grid;
   align-content: end;
   gap: 18px;
 }
 .hero__eyebrow {
   width: max-content;
   padding: 10px 18px;
   border-radius: 999px;
   background: rgba(240, 228, 202, 0.22);
   border: 1px solid rgba(255, 255, 255, 0.12);
   font-size: 14px;
   font-weight: 600;
 }
 .hero__title {
   margin: 0;
   max-width: 620px;
   font-size: clamp(38px, 6vw, 78px);
   line-height: 0.96;
   letter-spacing: -0.05em;
 }
 .hero__text {
   max-width: 560px;
   margin: 0;
   font-size: 18px;
   line-height: 1.65;
   color: rgba(255, 255, 255, 0.84);
 }
 @media (max-width: 980px) {
   :root {
     --container: min(100% - 32px, 1000px);
     --header-height: 76px;
   }
 }
 @media (max-width: 640px) {
   :root {
     --container: calc(100% - 20px);
   }
   .hero {
     padding: 22px 0 44px;
   }
   .hero__panel {
     min-height: 320px;
     border-radius: 24px;
   }
    .hero__text {
      font-size: 16px;
    }
  }

  /* GPU Hardware Acceleration for fixed/animated elements to eliminate scroll stutter */
  .site-header,
  .back-to-top,
  .floating-contact,
  .recent-purchase-toast,
  .slick-track,
  .slick-slide {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    perspective: 1000px;
    will-change: transform;
  }