/* ==========================================================================
   Elavate — theme
   Design token & số đo trích từ elavate.com (Shopify, theme "Live Theme With
   Listicles"). Mọi giá trị dưới đây là giá trị thật lấy bằng getComputedStyle
   hoặc chép từ CSS gốc của theme — không ước lượng.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette */
  --brand:        #52c8f0;   /* eyebrow, số lớn, sao, tab active, viền card   */
  --brand-btn:    #46b5e4;   /* nền nút — KHÁC --brand một chút, đúng bản gốc */
  --brand-btn-tx: #fdfbf7;
  --ink:          #2e2a39;   /* tiêu đề + phần lớn body copy                  */
  --ink-soft:     rgba(46, 42, 57, .75);

  --cream:        #fff3ec;   /* hero, premium ingredients, community          */
  --cream-header: #fff5eb;   /* thanh header lúc chưa cuộn                    */
  --ice:          #f2f8fc;   /* "Unlike…" + review tabs                       */
  --paper:        #fdfbf7;   /* Q&A                                           */
  --stone:        #f8f6f3;   /* card FLAVOUR / FEELING                        */
  --footer-bg:    #e5f2f9;
  --white:        #fff;

  --qa-card:      #f9f1e9;
  --qa-question:  #a3452c;
  --qa-answer:    #533a2d;

  --verified:     #007dc0;
  --verified-bg:  rgba(0, 125, 192, .05);
  --gold:         #dbb21d;   /* chỉ dùng cho 5 sao ở hero                     */

  --footer-link:  #8a8e99;
  --footer-note:  #9ca2ac;

  /* type — Poppins là font duy nhất của theme */
  --font: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* layout */
  --page-width:  1360px;
  --gutter:      50px;       /* ≥750px; dưới đó còn 20px                      */
  --radius:      10px;       /* card, media                                   */
  --radius-btn:  2px;
  --header-h:    104px;

  --shadow-card:   rgba(149, 157, 165, .2) 0 8px 10px;
  --shadow-header: rgba(33, 35, 38, .1) 0 10px 10px -10px;
}

/* --------------------------------------------------------------------------
   2. Reset
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 20px);
}

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 28.8px;
  color: var(--ink-soft);
  background: var(--white);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; height: auto; display: block; border: 0; }
a   { color: inherit; text-decoration: none; }
ul, ol { list-style: none; margin: 0; padding: 0; }
button { font: inherit; color: inherit; border: 0; background: none; cursor: pointer; }

h1, h2, h3, h4, h5, h6 { margin: 0; font-weight: 600; }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 3px;
  border-radius: 4px;
}

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

.icon { display: block; width: 100%; height: 100%; }

/* --------------------------------------------------------------------------
   3. Layout helper
   -------------------------------------------------------------------------- */
.page-width {
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 0 20px;
}

@media (min-width: 750px) {
  .page-width { padding: 0 var(--gutter); }
}

/* Nhịp dọc chuẩn của theme: 80px desktop / 50px mobile.
   Section nào lệch khỏi nhịp này sẽ tự khai lại ở phần của nó. */
.section { padding: 50px 0; }

@media (min-width: 768px) {
  .section { padding: 80px 0; }
}

/* Tiêu đề section dùng chung */
.section-heading {
  color: var(--ink);
  text-align: center;
  font-size: 35px;
  font-weight: 600;
  line-height: 40px;
}
.section-heading p { margin: 0; }
/* <em> chỉ IN NGHIÊNG ở mặc định. Riêng section "Your Morning Ritual" mới
   tô xanh — xem .image-with-blocks .section-heading em bên dưới. */

/* Khung ảnh giữ tỉ lệ: --ratio là padding-bottom tính bằng % */
.media {
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: var(--radius);
  padding-bottom: var(--ratio, 100%);
}
.media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius);
}

/* --------------------------------------------------------------------------
   4. Nút
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 9px 20px;
  border-radius: var(--radius-btn);
  background: var(--brand-btn);
  color: var(--brand-btn-tx);
  font-size: 18px;
  font-weight: 600;
  line-height: normal;
  letter-spacing: .9px;
  text-transform: uppercase;
  text-align: center;
  transition: background .2s ease, transform .2s ease;
}
.btn:hover  { background: #35a5d6; }
.btn:active { transform: translateY(1px); }

.btn--wide { padding: 9px 32px; }
.btn--full { display: flex; width: 100%; }

/* --------------------------------------------------------------------------
   5. Header
   Sticky kiểu "on-scroll-up": cuộn xuống thì trốn lên trên, cuộn lên thì hiện
   lại. Lúc dính vào mép thì đổi nền cream → trắng và thêm bóng.
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 30;
  transition: top .25s ease;
}
.site-header.is-hidden { top: calc(-1 * var(--header-h)); }

.site-header__bar {
  background: var(--cream-header);
  transition: background .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck .site-header__bar {
  background: var(--white);
  box-shadow: var(--shadow-header);
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  min-height: var(--header-h);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 24px 50px;
}

.header__group        { display: flex; align-items: center; gap: 14px; }
.header__group--end   { justify-content: flex-end; }

.header__icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--ink);
  position: relative;
}
.header__icon > span:first-child { width: 18px; height: 18px; }
.header__icon .icon-text {
  font-size: 10px;
  line-height: 1;
  font-weight: 400;
  text-transform: capitalize;
}
.header__icon .icon-cart { width: 22px; height: 22px; }

.header__cart-count {
  position: absolute;
  top: -4px; right: -8px;
  min-width: 16px; height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--brand);
  color: var(--white);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
}

.header__logo { justify-self: center; }
.header__logo img { width: 150px; height: auto; }

/* Drawer menu (nút ☰) */
.menu-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, 88vw);
  z-index: 60;
  background: var(--white);
  padding: 24px;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.4, 0, .2, 1);
  overflow-y: auto;
}
.menu-drawer[data-open='true'] { transform: none; }

.menu-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 32px;
}
.menu-drawer__head img { width: 130px; }
.menu-drawer__close { width: 18px; height: 18px; color: var(--ink); }

.menu-drawer__menu a {
  display: block;
  padding: 12px 0;
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
}
.menu-drawer__menu a:hover { color: var(--brand); }

.drawer-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  visibility: hidden;
  transition: opacity .3s ease, visibility .3s ease;
}
.drawer-backdrop[data-open='true'] { opacity: 1; visibility: visible; }

@media (max-width: 749px) {
  .site-header__inner { padding: 16px 20px; min-height: 76px; }
  :root { --header-h: 76px; }
  .header__logo img { width: 120px; }
}

/* --------------------------------------------------------------------------
   6. Hero
   -------------------------------------------------------------------------- */
.hero { background: var(--cream); }

.main-banner { padding: 30px 0; }

/* row-reverse: ảnh đứng trước trong DOM nhưng hiển thị bên PHẢI */
.main-banner-grid {
  display: flex;
  flex-flow: row-reverse wrap;
  align-items: flex-start;
}

/* width 50% + flex-grow: 1 → phần dư do margin âm được chia đều,
   mỗi cột thành 765px trong khung 1260px. Đúng như bản gốc. */
.main-banner-grid > .grid__item {
  width: 50%;
  max-width: 100%;
  flex-grow: 1;
  position: relative;
}
.main-banner-grid > .main-banner-text-item {
  margin-right: -270px;
  margin-top: 80px;
}

.main-banner-media { display: flex; align-items: center; justify-content: center; }
.main-banner-media img { transform: scale(1.1); }
.main-banner-media .hero-img--mobile { display: none; }

.main-banner-content {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  max-width: 608px;
  width: 100%;
}

.main-banner__heading {
  margin: 0 0 15px;
  padding: 0;
  color: var(--ink);
  font-size: 46px;
  font-weight: 600;
  line-height: 60px;
}
.main-banner__text {
  margin-bottom: 18px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 31px;
}
.main-banner__text p { margin: 0; }

.main-banner__html { margin-bottom: 22px; }
.main-banner__review { display: flex; align-items: center; }
.main-banner__review .stars { display: flex; }
.main-banner__review svg { margin-right: 3px; }
.main-banner__review span {
  margin-left: 17px;
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
}

.main-banner-content .btn { margin-bottom: 14px; }

.main-banner__caption {
  margin: 0;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 27px;
}

@media (max-width: 1199px) {
  .main-banner__heading { font-size: 35px; line-height: 50px; }
  .main-banner-media img { transform: scale(1.19); }
  .main-banner-grid > .main-banner-text-item { margin-right: -150px; margin-top: 0; }
}

@media (max-width: 989px) {
  .main-banner { padding: 0 0 30px; }
  .main-banner-grid { flex-direction: column-reverse; row-gap: 36px; }
  .main-banner-grid > .grid__item { width: 100%; }
  .main-banner-grid > .main-banner-media-item { margin-top: -120px; }
  .main-banner-grid > .main-banner-text-item { margin-right: 0; }
  .main-banner-media img { transform: scale(1.12); }
  .main-banner-content { max-width: none; }
}

@media (max-width: 749px) {
  .main-banner { padding: 13px 0 15px; }
  .main-banner-media img { transform: scale(1.07); }
  .main-banner-grid > .main-banner-media-item { margin-top: -110px; }
  .main-banner-media .hero-img--desktop { display: none; }
  .main-banner-media .hero-img--mobile  { display: block; }
  .main-banner__heading { font-size: 25px; line-height: 35px; margin: 0 0 10px; }
  .main-banner__text { font-size: 14px; line-height: 26px; margin-bottom: 20px; }
  .main-banner__html { margin-bottom: 12px; }
  .main-banner__review span { font-size: 14px; margin-left: 8px; }
  .main-banner-content .btn { margin-bottom: 8px; }
  .main-banner__caption { font-size: 14px; }
}

@media (max-width: 480px) {
  .main-banner-grid > .main-banner-media-item { margin-top: -80px; }
  .main-banner-media img { transform: scale(1.11); }
}

/* --------------------------------------------------------------------------
   7. Unlike Anything You've Tried Before
   Desktop: 3 cột tĩnh. ≤749px: carousel vuốt ngang, card có viền.
   -------------------------------------------------------------------------- */
.unlike-any-other {
  background: var(--ice);
  padding: 50px 0 26px;
}
@media (min-width: 768px) {
  .unlike-any-other { padding: 80px 0 40px; }
}

.unlike-any-other-header { margin-bottom: 60px; }
.unlike-any-other-header .section-heading p { margin: 0; }

.unlike-any-other .block-wrapper {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  text-align: center;
}
.unlike-any-other .numbers {
  font-size: 60px;
  color: var(--brand);
  font-weight: 400;
  line-height: 1;
  margin-bottom: 16px;
}
.unlike-any-other .block-title {
  font-weight: 500;
  color: var(--ink);
  font-size: 18px;
  line-height: normal;
}
.unlike-any-other .block-text {
  font-size: 16px;
  color: var(--ink);
  line-height: normal;
  margin-top: 10px;
}

@media (max-width: 989px) {
  .unlike-any-other .numbers { font-size: 45px; }
}

@media (max-width: 749px) {
  .unlike-any-other-header { margin-bottom: 40px; }
  .unlike-any-other .block-wrapper {
    display: flex;
    grid-template-columns: none;
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }
  .unlike-any-other .block-wrapper::-webkit-scrollbar { display: none; }
  .unlike-any-other .block {
    flex: 0 0 82%;
    scroll-snap-align: center;
    border: 2px solid var(--brand);
    border-radius: var(--radius);
    height: auto;
  }
  .unlike-any-other .block-slider-wrapper { padding: 40px 20px; }
  .unlike-any-other .numbers { font-size: 38px; }
}

/* --------------------------------------------------------------------------
   8. Image with blocks — "Your Morning Ritual, Elavated"
   -------------------------------------------------------------------------- */
.image-with-blocks p { margin: 0; color: var(--ink); }

.image-with-blocks .image-with-block-wrapper {
  display: flex;
  gap: 30px 60px;
}
.image-with-blocks .image-with-block-wrapper.image-left  { flex-direction: row; }
.image-with-blocks .image-with-block-wrapper.image-right { flex-direction: row-reverse; }

.image-with-blocks .image-wrapper,
.image-with-blocks .block-wrapper { flex: 1; width: 100%; }

.image-with-blocks .block-wrapper > * + * { margin-top: 30px; }

.image-with-blocks .block-caption {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: normal;
  color: var(--brand);
  font-weight: 500;
}
.image-with-blocks .section-heading { text-align: left; }
.image-with-blocks .section-heading em { color: var(--brand); }

.image-with-blocks .text-block-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
.image-with-blocks .text-block {
  padding: 20px;
  background: var(--stone);
  border-radius: var(--radius);
}
.image-with-blocks .text-block h6 {
  margin: 0 0 12px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1;
  color: var(--ink);
  text-transform: uppercase;
}
.image-with-blocks .text-block p { margin: 0; font-size: 14px; line-height: 24px; }

.image-with-blocks .block-icon-with-text-wrapper {
  display: flex;
  gap: 20px;
  justify-content: space-between;
}
.image-with-blocks .icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 5px;
}
.image-with-blocks .icon-with-text .icon-img { height: 50px; width: 50px; }
.image-with-blocks .icon-with-text .icon-img img { width: auto; height: auto; }
.image-with-blocks .icon-with-text .text {
  text-align: center;
  font-size: 14px;
  line-height: 1.3;
  color: var(--ink);
  text-transform: uppercase;
  font-weight: 500;
}

@media (max-width: 989px) {
  .image-with-blocks .image-with-block-wrapper.image-left  { flex-direction: column; }
  .image-with-blocks .image-with-block-wrapper.image-right { flex-direction: column-reverse; }
}
@media (max-width: 749px) {
  .image-with-blocks .block-wrapper > * + * { margin-top: 20px; }
  .image-with-blocks .icon-with-text .text { font-size: 12px; }
  .image-with-blocks .icon-with-text .icon-img { height: 40px; width: 40px; }
}
@media (max-width: 575px) {
  .image-with-blocks .text-block-wrapper { grid-template-columns: 1fr; }
}

/* --------------------------------------------------------------------------
   9. Premium Ingredients
   Lưới 3 hàng × 4 cột, kéo ngang; desktop nhìn thấy 3 cột.
   -------------------------------------------------------------------------- */
.premium-ingredient { background: var(--cream); }

.premium-ingredient .premium-ingredient-subheading {
  text-align: center;
  color: var(--brand);
  font-size: 18px;
  font-weight: 500;
  line-height: 24px;
  margin-bottom: 20px;
  text-transform: uppercase;
}
.premium-ingredient .section-heading { margin: 0 0 20px; }
.premium-ingredient .premium-ingredient-content {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 28px;
}
.premium-ingredient .premium-ingredient-content p { margin: 0; }

.premium-ingredient .premium-ingredient-inner {
  margin-top: 30px;
  padding: 20px;
  overflow-x: auto;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
.premium-ingredient .premium-ingredient-inner::-webkit-scrollbar { display: none; }

/* grid-auto-flow: column → đổ theo cột; data/ingredients.php đã xếp sẵn
   thứ tự cột để kết quả trùng khít bản gốc (vốn đổ theo hàng). */
.premium-ingredient .ingredient-grid {
  display: grid;
  grid-template-rows: repeat(3, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  align-items: stretch;
}

.premium-ingredient .premium-ingredient-item {
  background-color: var(--white);
  border-radius: var(--radius);
  padding: 20px 0 20px 20px;
  box-shadow: var(--shadow-card);
  display: flex;
  gap: 10px;
  height: 100%;
  scroll-snap-align: start;
}
.premium-ingredient .premium-ingredient-info,
.premium-ingredient .ingredient-img { flex: 1; }

.premium-ingredient .ingredient-subtitle {
  color: var(--brand);
  font-size: 14px;
  font-weight: 400;
  line-height: 18px;
  margin-bottom: 10px;
  text-transform: uppercase;
}
.premium-ingredient .ingredient-name {
  color: var(--ink);
  font-size: 18px;
  font-weight: 500;
  line-height: 28px;
  margin-bottom: 10px;
}
.premium-ingredient .ingredient-info {
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}
.premium-ingredient .ingredient-info p { margin: 0; }

.premium-ingredient .ingredient-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0 var(--radius) var(--radius) 0;
}

.premium-ingredient .premium-ingredient-button { margin-top: 30px; text-align: center; }
.premium-ingredient .guarantee-text {
  text-align: center;
  margin-top: 15px;
  color: var(--ink);
  font-size: 14px;
  font-weight: 400;
  line-height: 21px;
}

@media (max-width: 1100px) {
  .premium-ingredient .ingredient-grid { grid-auto-columns: calc((100% - 24px) / 2); }
}

@media (max-width: 749px) {
  .premium-ingredient .premium-ingredient-inner {
    margin-left: -20px;
    margin-right: -20px;
    padding: 0 20px;
    scroll-snap-type: x mandatory;
  }
  .premium-ingredient .ingredient-grid {
    grid-template-rows: none;
    grid-auto-columns: 82%;
  }
  .premium-ingredient .premium-ingredient-item {
    box-shadow: none;
    border: 2px solid var(--brand);
    padding: 0;
    scroll-snap-align: center;
  }
  .premium-ingredient .premium-ingredient-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 20px 0 20px 20px;
  }
}

/* --------------------------------------------------------------------------
   10. Review tabs
   -------------------------------------------------------------------------- */
.review-tab {
  background: var(--ice);
  padding: 26px 0 50px;
}
@media (min-width: 768px) {
  .review-tab { padding: 40px 0 80px; }
}

.review-tab .review-tab-header { margin-bottom: 30px; }
.review-tab .review-tab-header .section-heading { margin: 0; }

.review-tab .review-tab-bar-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
}
.review-tab .tab-bar-block {
  width: calc(100% / 3 - 14px);
  background-color: var(--white);
  padding: 20px;
  border-radius: var(--radius);
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  transition: background-color .3s ease;
}
.review-tab .tab-bar-block.active { background-color: var(--brand); }

.review-tab .tab-count {
  background-color: var(--brand);
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--white);
  font-size: 16px;
  font-weight: 600;
  line-height: normal;
  transition: background-color .3s ease, color .3s ease;
}
.review-tab .tab-bar-block.active .tab-count {
  color: var(--brand);
  background-color: var(--white);
}

.review-tab .tab-title {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  flex: 1;
}
.review-tab .tab-bar-block.active .tab-title { color: var(--white); }

/* Ô 15×28.8px: 28.8px chính là line-height của body ở bản gốc (svg nằm trong
   một div thường). Giữ nguyên con số đó thì chiều cao cả tab mới khớp 146px. */
.review-tab .tab-arrow {
  width: 15px;
  height: 28.8px;
  display: flex;
  align-items: center;
  color: var(--ink);
  transform: rotate(270deg);   /* mũi tên chỉ LÊN khi tab đóng  */
  transition: .5s;
}
.review-tab .tab-arrow .icon { width: 15px; height: 11px; }
.review-tab .tab-bar-block.active .tab-arrow {
  color: var(--white);
  transform: rotate(90deg);    /* chỉ XUỐNG khi tab đang mở     */
}

.review-tab .review-content-block { margin-top: 30px; }
.review-tab .review-content-block[hidden] { display: none; }

.review-tab .review-content-wrapper { position: relative; }
/* dải trắng mờ hai mép để card cắt ngang trông mềm hơn */
.review-tab .review-content-wrapper::before,
.review-tab .review-content-wrapper::after {
  content: '';
  position: absolute;
  z-index: 9;
  bottom: 0;
  width: 25%;
  height: 100%;
  pointer-events: none;
}
/* Bản gốc đổ về TRẮNG chứ không phải màu nền section — nhờ vậy hai card cắt
   ngang ở mép chìm hẳn đi, tạo dải trắng nằm đè lên nền xanh nhạt. */
.review-tab .review-content-wrapper::before {
  left: 0;
  background-image: linear-gradient(to right, var(--white) 20%, transparent);
}
.review-tab .review-content-wrapper::after {
  right: 0;
  background-image: linear-gradient(to left, var(--white) 20%, transparent);
}

/* Carousel: 1.9 card/khung ở ≥1400px, card giữa căn chính giữa.
   KHÔNG đặt padding ngang ở đây — flex-basis dưới dùng 100%, mà 100% lại tính
   theo content-box của chính track; có padding là cả hai lệch nhau. Việc căn
   giữa do theme.js lo bằng scrollLeft, cộng với bản sao slide ở hai mép. */
.review-tab .review-slider {
  --per: 1.9;
  display: flex;
  gap: 15px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.review-tab .review-slider::-webkit-scrollbar { display: none; }

.review-tab .review-content-item {
  flex: 0 0 calc((100% - 15px * (var(--per) - 1)) / var(--per));
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  height: auto;
}

.review-tab .review-content-inner {
  border: 2px solid var(--brand);
  border-radius: var(--radius);
  display: flex;
  height: 100%;
  background: var(--white);
}

.review-tab .review-content-image {
  width: 300px;
  flex-shrink: 0;
  position: relative;
}
.review-tab .review-content-image::before {
  content: '';
  position: absolute;
  z-index: 2;
  bottom: 0;
  right: -1px;
  width: 40%;
  height: 100%;
  pointer-events: none;
  background-image: linear-gradient(to left, var(--white) 10%, transparent);
}
/* Khối vuông 300×300 này là thứ quyết định chiều cao TỐI THIỂU của card
   (bản gốc: padding-bottom:100% trên một div static). Ảnh bên trong lại
   position:absolute neo vào .review-content-image, nên khi phần chữ dài hơn
   300px thì ảnh vẫn giãn theo cho kín card. */
.review-tab .review-content-media {
  position: static;
  padding-bottom: 100%;
}
.review-tab .review-content-image img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: var(--radius) 0 0 var(--radius);
}

.review-tab .review-content-info {
  width: 100%;
  display: flex;
  padding: 20px;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  background: var(--white);
  border-radius: 0 var(--radius) var(--radius) 0;
}
.review-tab .review-info-wrapper { display: flex; flex-direction: column; gap: 25px; }

.review-tab .review-rating { display: flex; align-items: center; }
.review-tab .review-rating span { color: var(--brand); font-size: 25px; line-height: 1; }

.review-tab .review-card-content { display: flex; flex-direction: column; width: 100%; gap: 10px; }
.review-tab .review-title {
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: normal;
  text-transform: uppercase;
}
.review-tab .review-detail {
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.review-tab .review-detail p { margin: 0; }

.review-tab .review-card-user {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.review-tab .review-author {
  color: var(--ink);
  font-size: 18px;
  font-weight: 600;
  line-height: 24px;
}

/* Pill "Verified Buyer" — dấu tick vẽ hoàn toàn bằng CSS */
.review-tab .review-verification {
  color: var(--verified);
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  background-color: var(--verified-bg);
  padding: 5px 20px 5px 35px;
  border-radius: 30px;
  position: relative;
}
.review-tab .review-verification::before {
  content: '';
  position: absolute;
  background: var(--brand);
  height: 20px;
  width: 20px;
  top: 7px;
  left: 10px;
  border-radius: 50%;
}
.review-tab .review-verification::after {
  content: '';
  position: absolute;
  top: 11px;
  left: 17px;
  height: 10px;
  width: 6px;
  transform: rotate(48deg) scale(1);
  border-bottom: 2px solid var(--white);
  border-right: 2px solid var(--white);
}

@media (max-width: 1399px) { .review-tab .review-slider { --per: 1.5; } }
@media (max-width: 1199px) { .review-tab .review-slider { --per: 1.3; } }
@media (max-width: 989px) {
  .review-tab .review-slider { --per: 1.2; }
  .review-tab .review-title { font-size: 20px; }
  .review-tab .review-author { font-size: 16px; }
  .review-tab .review-verification { font-size: 14px; }
}
@media (max-width: 749px) {
  .review-tab .review-tab-header { max-width: 400px; width: 100%; margin: 0 auto 30px; }
  .review-tab .review-tab-bar-wrapper { gap: 10px; text-align: center; align-items: stretch; }
  .review-tab .tab-title { font-size: 14px; line-height: 18px; }
  .review-tab .tab-bar-block { width: 100%; padding: 16px 10px 10px; }
  .review-tab .review-content-wrapper::before,
  .review-tab .review-content-wrapper::after { display: none; }
  .review-tab .review-content-inner { flex-direction: column; }
  /* .review-content-media đã lo tỉ lệ vuông rồi, ở đây chỉ cần nới rộng. */
  .review-tab .review-content-image { width: 100%; }
  .review-tab .review-content-image::before {
    width: 100%;
    height: 40%;
    right: auto;
    bottom: -1px;
    background-image: linear-gradient(0deg, var(--white), transparent);
  }
  .review-tab .review-content-image img { border-radius: var(--radius) var(--radius) 0 0; }
  .review-tab .review-content-info { border-radius: 0 0 var(--radius) var(--radius); height: 100%; }
  .review-tab .review-info-wrapper { gap: 20px; }
}

/* --------------------------------------------------------------------------
   11. Us vs. Them
   -------------------------------------------------------------------------- */
.custom-image-section { padding: 50px 0; }
@media (min-width: 768px) {
  .custom-image-section { padding: 80px 0 44px; }
}
.custom-image-section .page-width { max-width: 1100px; }

.custom-image-section .expert-review-header .section-heading p { margin: 0; }
.custom-image-section .section-sub-heading {
  text-align: center;
  font-size: 16px;
  line-height: 28.8px;
  color: var(--ink-soft);
  margin-bottom: 20px;
}
.custom-image-section .section-sub-heading p { margin: 0; }

/* Ảnh bảng so sánh hẹp hơn cột chữ: 800px, căn giữa. */
.custom-image-section .image-with-block-wrapper { max-width: 800px; margin: 0 auto; }
.custom-image-section .media { background: transparent; }
.custom-image-section .media img { object-fit: contain; }
.custom-image-section .mobile-image { display: none; }

@media (max-width: 749px) {
  .custom-image-section .desktop-image { display: none; }
  .custom-image-section .mobile-image  { display: block; }
}

/* --------------------------------------------------------------------------
   12. Grid images with blocks — community
   -------------------------------------------------------------------------- */
.grid-images-with-blocks {
  background: var(--cream);
  padding: 12px 0 8px;
}
@media (min-width: 768px) {
  .grid-images-with-blocks { padding: 80px 0; }
}

.grid-images-with-blocks .image-with-block-wrapper {
  display: flex;
  gap: 30px 60px;
  align-items: center;
}
.grid-images-with-blocks .image-with-block-wrapper.image-right { flex-direction: row-reverse; }

.grid-images-with-blocks .image-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  flex: 1;
  gap: 15px;
}
.grid-images-with-blocks .block-wrapper { flex: 1; }
.grid-images-with-blocks .block-wrapper > * + * { margin-top: 20px; }

.grid-images-with-blocks .section-heading { text-align: left; }
.grid-images-with-blocks .section-heading p { margin: 0; }
.grid-images-with-blocks .block-content {
  color: var(--ink);
  font-size: 16px;
  font-weight: 400;
  line-height: normal;
}
.grid-images-with-blocks .block-content p { margin: 0; }

/* Hàng "icon + chữ" dưới cùng. Trang chủ bản gốc để trống hoàn toàn, nhưng
   margin-top của nó vẫn tính → section cao thêm đúng 80px. Giữ lại cho khớp,
   và để sẵn chỗ nếu sau này cần thêm icon. */
.grid-images-with-blocks .footer-text-blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 30px;
  justify-content: center;
  text-align: center;
  margin-top: 80px;
}
.grid-images-with-blocks .footer-icon-with-text {
  color: var(--ink);
  font-size: 16px;
  font-weight: 500;
  line-height: normal;
  text-transform: uppercase;
}
.grid-images-with-blocks .footer-icon-with-text img { height: 80px; width: 80px; margin-top: 10px; }

@media (max-width: 989px) {
  .grid-images-with-blocks .footer-text-blocks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 749px) {
  .grid-images-with-blocks .footer-text-blocks { margin-top: 50px; }
  .grid-images-with-blocks .footer-icon-with-text img { height: 60px; width: 60px; }
}
@media (max-width: 575px) {
  .grid-images-with-blocks .footer-text-blocks { grid-template-columns: 1fr; gap: 15px; }
}

@media (max-width: 989px) {
  .grid-images-with-blocks .image-wrapper { width: 100%; }
  .grid-images-with-blocks .image-with-block-wrapper.image-right { flex-direction: column-reverse; }
}

/* --------------------------------------------------------------------------
   13. Q&A
   -------------------------------------------------------------------------- */
.q-and-a-section { background: var(--paper); }

.q-and-a-section .section-heading { margin-bottom: 30px; font-size: 45px; line-height: 1.2; }
.q-and-a-section .q-and-a-section-subheading {
  text-align: center;
  font-size: 18px;
  line-height: normal;
  font-weight: 400;
  color: var(--ink);
  max-width: 620px;
  margin: 0 auto;
}

.q-and-a-section .block-wrapper {
  display: block;
  column-count: 2;
  gap: 30px;
  margin-top: 60px;
}
.q-and-a-section .block {
  background: var(--qa-card);
  border-radius: var(--radius);
  padding: 20px 25px;
  margin-bottom: 30px;
  display: flex;
  align-items: center;
  gap: 10px;
  break-inside: avoid;
}
.q-and-a-section .q-and-a-qrapper { position: relative; width: 100%; }

.q-and-a-section .question {
  font-size: 18px;
  line-height: normal;
  font-weight: 500;
  color: var(--qa-question);
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  cursor: pointer;
  gap: 10px;
  padding-right: 40px;
  width: 100%;
  text-align: left;
}

/* Đóng: max-height 0. Mở: JS gán max-height = scrollHeight → chạy mượt. */
.q-and-a-section .answer {
  font-size: 14px;
  line-height: normal;
  color: var(--qa-answer);
  font-weight: 400;
  padding: 0 40px 0 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  will-change: max-height;
  transition: max-height .25s ease-out, opacity .25s ease-out, padding-top .25s ease-out;
}
.q-and-a-section .block.active .answer { opacity: 1; padding-top: 8px; }
.q-and-a-section .answer p:first-child { margin-top: 0; }
.q-and-a-section .answer p:last-child  { margin-bottom: 0; }

.q-and-a-section .q-a-icon {
  flex-shrink: 0;
  height: 25px;
  width: 25px;
  display: flex;
  border: 1px solid var(--qa-question);
  color: var(--qa-question);
  border-radius: 50%;
  justify-content: center;
  align-items: center;
  transition: .3s;
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.q-and-a-section .q-a-icon .icon-plus,
.q-and-a-section .q-a-icon .icon-minus { height: 16px; width: 16px; }
.q-and-a-section .q-a-icon .icon-minus { display: none; }
.q-and-a-section .block.active .q-a-icon .icon-plus  { display: none; }
.q-and-a-section .block.active .q-a-icon .icon-minus { display: block; }

@media (max-width: 749px) {
  .q-and-a-section .section-heading { font-size: 40px; }
  .q-and-a-section .q-and-a-section-subheading { font-size: 16px; }
  .q-and-a-section .block-wrapper { column-count: 1; margin-top: 30px; }
  .q-and-a-section .block { margin-bottom: 15px; }
  .q-and-a-section .question { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   14. Footer
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--footer-bg);
  padding: 72px 0 0;
}

.site-footer__top { padding-bottom: 60px; }
.site-footer__blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 60px 92px;
}
.site-footer__block { flex: 1; min-width: 200px; }

.site-footer__heading {
  color: var(--ink);
  font-size: 16px;
  font-weight: 600;
  line-height: 25px;
  margin: 0 0 18px;
}
.site-footer__block a {
  display: inline-block;
  color: var(--footer-link);
  font-size: 16px;
  font-weight: 500;
  line-height: 40px;
  transition: color .2s ease;
}
.site-footer__block a:hover { color: var(--ink); }

.site-footer__bottom {
  border-top: 1px solid rgba(46, 42, 57, .08);
  padding: 30px 0;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__note {
  max-width: 500px;
  color: var(--footer-note);
  font-size: 12px;
  font-weight: 500;
  line-height: normal;
}

.list-payment {
  display: flex;
  flex-wrap: wrap;
  margin: -5px;
}
.list-payment li { display: flex; padding: 5px; }
.list-payment img { width: 38px; height: 24px; }

@media (max-width: 749px) {
  .site-footer { padding: 40px 0 0; }
  .site-footer__blocks { gap: 32px; }
  .site-footer__block { flex: 1 1 100%; }
  .site-footer__bottom-inner { justify-content: center; text-align: center; }
  .site-footer__note { max-width: none; }
  .list-payment { justify-content: center; }
}

/* --------------------------------------------------------------------------
   15. Modal (bảng dinh dưỡng + cookie consent)
   -------------------------------------------------------------------------- */
.modal {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: none;
  background: rgba(0, 0, 0, .4);
  overflow: auto;
}
.modal[data-open='true'] { display: block; }

.modal__panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  padding: 20px;
  text-align: center;
}
.modal__figure {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  max-width: max-content;
  margin: 0 auto;
}
.modal__close {
  color: var(--white);
  font-size: 20px;
  font-weight: 400;
  border: 1px solid var(--white);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 10px;
  cursor: pointer;
  line-height: 1;
}
.modal__image {
  overflow-y: auto;
  max-height: calc(100vh - 40px);
  max-width: 500px;
  width: 100%;
  margin: 0 auto;
}
.modal__image img { border-radius: var(--radius); }

/* Cookie consent — dùng <dialog> nên trình duyệt lo phần overlay + focus trap */
.cookie-dialog {
  width: min(520px, calc(100vw - 32px));
  max-width: none;
  padding: 0;
  border: 0;
  border-radius: var(--radius);
  background: transparent;
  overflow: visible;
}
.cookie-dialog::backdrop { background: rgba(0, 0, 0, .45); }
.cookie-dialog:focus { outline: none; }

.cookie-card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 32px;
  text-align: left;
  box-shadow: rgba(33, 35, 38, .2) 0 20px 40px -20px;
}
.cookie-card h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 24px;
  font-weight: 600;
  line-height: 1.3;
}
.cookie-card p {
  margin: 0 0 20px;
  color: var(--ink);
  font-size: 14px;
  line-height: 24px;
}
.cookie-card a { color: var(--verified); text-decoration: underline; }
.cookie-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-card__actions .btn { flex: 1; }
.btn--ghost {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn--ghost:hover { background: var(--ink); color: var(--white); }

@media (max-width: 575px) {
  .cookie-card { padding: 24px; }
  .cookie-card__actions .btn { flex: 1 1 100%; }
}

/* --------------------------------------------------------------------------
   16. Hiện dần khi cuộn tới (bản gốc dùng IntersectionObserver của Dawn)
   -------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .6s cubic-bezier(0, 0, .3, 1), transform .6s cubic-bezier(0, 0, .3, 1);
}
.reveal.is-in { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}