/* ==========================================================================
   Theme — True Sea Moss
   Nền mint + dải teal gradient, nút cam gradient, nhãn dạng pill, card bo
   tròn lớn, sóng chia section. Chỉ đổi giao diện: mọi class/data-* mà
   theme.js dùng vẫn giữ nguyên.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root {
  /* palette */
  --teal:         #20575c;   /* chữ nhấn trong tiêu đề, icon                 */
  --teal-light:   #398c90;
  --teal-grad:    linear-gradient(90deg, #398c90 0%, #21585d 100%);
  --teal-grad-r:  linear-gradient(90deg, #21585d 0%, #398c90 100%);
  --ink:          #253937;   /* tiêu đề                                       */
  --ink-soft:     rgba(37, 57, 55, .85);

  --mint:         #ddf1ef;   /* hero, ingredients, Q&A, card review          */
  --light:        #fafafa;   /* nền chính                                     */
  --header-bg:    #f8f8f8;
  --white:        #fff;

  --orange-grad:  linear-gradient(90deg, #ff934f 0%, #ff7340 100%);
  --orange:       #ff7340;
  --star:         #ff7a45;

  /* giữ tên biến cũ để chỗ nào còn dùng vẫn chạy */
  --brand:        var(--teal);

  /* type */
  --font:         'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-head:    'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* layout */
  --page-width:   1440px;
  --gutter:       68px;
  --radius:       24px;
  --radius-lg:    40px;
  --header-h:     80px;

  --shadow-header: rgba(33, 35, 38, .1) 0 10px 10px -10px;

  /* icon tick tròn dùng cho dòng "30-Day Money Back Guarantee" */
  --icon-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='%2320575c'/%3E%3Cpath d='M6 10.5l2.5 2.5L14 7.5' stroke='%23fff' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  /* sóng: phần tô màu nền section phía trên/dưới */
  --wave-top:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 0H1440V44C1200 72 960 76 720 56C480 36 240 6 0 34Z' fill='%23fafafa'/%3E%3C/svg%3E");
  --wave-bottom: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 80' preserveAspectRatio='none'%3E%3Cpath d='M0 80V22C240 4 480 2 720 20C960 38 1200 56 1440 40V80Z' fill='%23fafafa'/%3E%3C/svg%3E");
}

/* --------------------------------------------------------------------------
   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: 1.6;
  color: var(--ink-soft);
  background: var(--light);
  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-family: var(--font-head); font-weight: 800; }
p { margin: 0 0 1em; }

:focus-visible {
  outline: 3px solid var(--orange);
  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); }
}

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

/* Tiêu đề section: chữ đậm, phần <em> đổi sang màu teal (không nghiêng) */
.section-heading {
  color: var(--ink);
  text-align: center;
  font-family: var(--font-head);
  font-size: 48px;
  font-weight: 800;
  line-height: 1.2;
}
.section-heading p { margin: 0; }
.section-heading em { font-style: normal; color: var(--teal); }

@media (max-width: 749px) {
  .section-heading { font-size: 32px; }
}

/* Nhãn pill phía trên tiêu đề */
.pill,
.image-with-blocks .block-caption p,
.premium-ingredient .premium-ingredient-subheading {
  display: inline-block;
  padding: 6px 16px;
  border-radius: 999px;
  background: var(--teal-grad-r);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 800;
  line-height: 1.4;
  text-transform: uppercase;
}

/* 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;
}

/* Dòng có tick tròn: "30-Day Money Back Guarantee", "FREE Shipping!" */
.guarantee-text,
.main-banner__caption {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.guarantee-text::before,
.main-banner__caption::before {
  content: '';
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  background: var(--icon-check) center / contain no-repeat;
}

/* --------------------------------------------------------------------------
   4. Nút — cam gradient, chữ hoa đậm, mũi tên ›
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 22px 32px;
  border: 2px solid var(--orange);
  border-radius: 16px;
  background: var(--orange-grad);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  text-transform: uppercase;
  text-align: center;
  transition: filter .2s ease, transform .2s ease, box-shadow .2s ease;
}
.btn::after {
  content: '';
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-top: 2.5px solid currentColor;
  border-right: 2.5px solid currentColor;
  transform: rotate(45deg);
}
.btn:hover  { filter: brightness(1.05); box-shadow: 0 10px 24px -10px rgba(255, 115, 64, .7); }
.btn:active { transform: translateY(1px); }

.btn--wide { min-width: min(400px, 100%); }
.btn--full { display: flex; width: 100%; }

@media (max-width: 749px) {
  .btn { font-size: 17px; padding: 20px 24px; }
}

/* --------------------------------------------------------------------------
   5. Header
   Desktop: logo trái, menu ngang + icon phải. Mobile: nút ☰ mở drawer.
   Sticky "on-scroll-up" do theme.js gắn .is-stuck / .is-hidden.
   -------------------------------------------------------------------------- */
.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(--header-bg);
  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: flex;
  align-items: center;
  gap: 24px;
  min-height: var(--header-h);
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 10px var(--gutter);
}

/* Thứ tự hiển thị khác thứ tự DOM: logo → menu → icon */
.header__logo        { order: -1; margin-right: auto; }
.header__logo img    { width: 120px; height: auto; }
.header__nav         { order: 0; display: flex; gap: 4px; }
.header__group       { order: 1; display: flex; align-items: center; gap: 22px; }
.header__group--end  { order: 2; }

.header__nav a {
  padding: 10px 14px;
  color: #4b4b4b;
  font-size: 16px;
  line-height: 1;
  transition: color .2s ease;
}
.header__nav a:hover { color: var(--teal); }

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

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

/* Desktop đã có menu ngang → ẩn nút ☰ */
@media (min-width: 990px) {
  .header__icon[data-drawer-open] { display: none; }
}
@media (max-width: 989px) {
  .header__nav { display: none; }
}
@media (max-width: 749px) {
  :root { --header-h: 68px; }
  .site-header__inner { padding: 10px 20px; gap: 16px; }
  .header__logo img { width: 104px; }
  .header__group { gap: 16px; }
}

/* Drawer menu (nút ☰) */
.menu-drawer {
  position: fixed;
  inset: 0 auto 0 0;
  width: min(360px, 88vw);
  z-index: 60;
  background: var(--teal-grad-r);
  color: 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;
  padding: 12px 16px;
  border-radius: 16px;
  background: var(--light);
}
.menu-drawer__head img { width: 110px; }
.menu-drawer__close { width: 18px; height: 18px; color: var(--ink); }

.menu-drawer__menu a {
  display: block;
  padding: 13px 4px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 18px;
  font-weight: 700;
  border-bottom: 1px solid rgba(255, 255, 255, .15);
}
.menu-drawer__menu a:hover { opacity: .8; }

.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; }

/* --------------------------------------------------------------------------
   6. Hero — nền mint, chữ trái, ảnh bo tròn phải
   -------------------------------------------------------------------------- */
.hero { background: var(--mint); }

.main-banner { padding: 56px 0 72px; }

.main-banner-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
}
.main-banner-text-item { order: -1; }   /* DOM: ảnh trước → đẩy chữ sang trái */

.main-banner-media img { width: 100%; height: auto; }
.main-banner-media .hero-img--mobile { display: none; }

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

.main-banner__heading {
  margin: 0 0 24px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 64px;
  font-weight: 800;
  line-height: 1.15;
}
.main-banner__heading em { font-style: normal; color: var(--teal); }
.main-banner__text {
  margin-bottom: 24px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.45;
}
.main-banner__text p { margin: 0; }

.main-banner__html { margin-bottom: 32px; }
.main-banner__review { display: flex; align-items: center; gap: 14px; }
.main-banner__review .stars { display: flex; gap: 6px; }
.main-banner__review svg { width: 18px; height: 18px; fill: var(--star); }
.main-banner__review span {
  color: var(--ink);
  font-size: 18px;
  line-height: 1;
}

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

.main-banner__caption {
  width: min(400px, 100%);
  margin: 0;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.4;
}

@media (max-width: 1199px) {
  .main-banner__heading { font-size: 48px; }
}
@media (max-width: 989px) {
  .main-banner { padding: 32px 0 48px; }
  .main-banner-grid { grid-template-columns: 1fr; gap: 32px; }
  .main-banner-content { max-width: none; }
}
@media (max-width: 749px) {
  .main-banner-media .hero-img--desktop { display: none; }
  .main-banner-media .hero-img--mobile  { display: block; }
  .main-banner__heading { font-size: 36px; margin-bottom: 16px; }
  .main-banner__text { font-size: 16px; margin-bottom: 18px; }
  .main-banner__html { margin-bottom: 22px; }
  .main-banner__review span { font-size: 16px; }
  .main-banner-content .btn { width: 100%; }
  .main-banner__caption { width: 100%; font-size: 16px; }
}

/* --------------------------------------------------------------------------
   7. Unlike Anything You've Tried Before — dải teal gradient + sóng đáy
   -------------------------------------------------------------------------- */
.unlike-any-other {
  position: relative;
  background: var(--teal-grad);
  color: var(--white);
  padding: 72px 0 140px;
}
.unlike-any-other::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: -1px;
  height: 72px;
  background: var(--wave-bottom) center / 100% 100% no-repeat;
  pointer-events: none;
}

.unlike-any-other-header { margin-bottom: 48px; }
.unlike-any-other .section-heading { color: var(--white); }

/* Số cột tự theo số block trong config */
.unlike-any-other .block-wrapper {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: 1fr;
  gap: 32px;
  max-width: 1160px;
  margin: 0 auto;
  text-align: center;
}
.unlike-any-other .numbers {
  margin-bottom: 16px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 56px;
  font-weight: 800;
  line-height: 1;
}
.unlike-any-other .numbers img { width: 64px; height: 64px; margin: 0 auto; }
.unlike-any-other .block-title {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.unlike-any-other .block-text {
  margin-top: 8px;
  color: rgba(255, 255, 255, .85);
  font-size: 16px;
  line-height: 1.4;
}

@media (max-width: 989px) {
  .unlike-any-other .block-wrapper { grid-auto-flow: row; grid-template-columns: 1fr 1fr; }
  .unlike-any-other .numbers { font-size: 44px; }
}
@media (max-width: 749px) {
  .unlike-any-other { padding: 56px 0 96px; }
  .unlike-any-other::after { height: 40px; }
  .unlike-any-other-header { margin-bottom: 32px; }
  .unlike-any-other .block-wrapper {
    display: flex;
    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 rgba(255, 255, 255, .5);
    border-radius: var(--radius);
    background: rgba(255, 255, 255, .06);
  }
  .unlike-any-other .block-slider-wrapper { padding: 32px 20px; }
  .unlike-any-other .numbers { font-size: 38px; }
}

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

.image-with-blocks .image-with-block-wrapper {
  display: flex;
  gap: 40px 48px;
  align-items: center;
}
.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 .image-wrapper .media { border-radius: var(--radius-lg); }

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

.image-with-blocks .block-caption { margin: 0 0 -8px; }
.image-with-blocks .section-heading { text-align: left; }
.image-with-blocks .block-content p { font-size: 17px; line-height: 1.55; }

.image-with-blocks .text-block-wrapper {
  display: grid;
  gap: 20px;
  grid-template-columns: 1fr 1fr;
}
.image-with-blocks .text-block {
  padding: 28px 32px;
  background: var(--mint);
  border-radius: var(--radius);
}
.image-with-blocks .text-block h3 {
  margin: 0 0 8px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 700;
  line-height: 1.2;
  text-transform: uppercase;
}
.image-with-blocks .text-block p { font-size: 16px; line-height: 1.5; }

/* Dải chứng nhận: nền teal, icon trong vòng tròn trắng */
.image-with-blocks .block-icon-with-text-wrapper {
  display: flex;
  gap: 12px;
  justify-content: space-around;
  padding: 24px 16px;
  border-radius: var(--radius);
  background: var(--teal-grad);
}
.image-with-blocks .icon-with-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  row-gap: 10px;
}
.image-with-blocks .icon-with-text .icon-img {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
}
.image-with-blocks .icon-with-text .icon-img img { width: 100%; height: 100%; object-fit: contain; }
.image-with-blocks .icon-with-text .text {
  color: var(--white);
  font-family: var(--font-head);
  font-size: 14px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-transform: uppercase;
}

@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 .image-wrapper .media { border-radius: var(--radius); }
  .image-with-blocks .block-wrapper > * + * { margin-top: 20px; }
  .image-with-blocks .block-icon-with-text-wrapper { flex-wrap: wrap; row-gap: 18px; }
  .image-with-blocks .icon-with-text { flex: 0 0 28%; }
  .image-with-blocks .icon-with-text .icon-img { width: 44px; height: 44px; }
  .image-with-blocks .icon-with-text .text { font-size: 12px; }
}
@media (max-width: 575px) {
  .image-with-blocks .text-block-wrapper { grid-template-columns: 1fr; }
  .image-with-blocks .text-block { padding: 22px 24px; }
}

/* --------------------------------------------------------------------------
   9. Premium Ingredients — nền mint, sóng đỉnh, card trắng
   -------------------------------------------------------------------------- */
.premium-ingredient {
  position: relative;
  background: var(--mint);
}
@media (min-width: 768px) {
  .premium-ingredient.section { padding-top: 140px; }
}
.premium-ingredient::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 72px;
  background: var(--wave-top) center / 100% 100% no-repeat;
  pointer-events: none;
}

.premium-ingredient .premium-ingredient-header { text-align: center; }
.premium-ingredient .premium-ingredient-subheading { margin-bottom: 16px; }
.premium-ingredient .section-heading { margin: 0 0 16px; }
.premium-ingredient .premium-ingredient-content {
  max-width: 560px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
}
.premium-ingredient .premium-ingredient-content p { margin: 0; }

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

/* grid-auto-flow: column — data/ingredients.php đã xếp sẵn thứ tự theo cột */
.premium-ingredient .ingredient-grid {
  display: grid;
  grid-template-rows: repeat(2, auto);
  grid-auto-flow: column;
  grid-auto-columns: calc((100% - 48px) / 3);
  gap: 24px;
  align-items: stretch;
}

.premium-ingredient .premium-ingredient-item {
  display: flex;
  gap: 12px;
  height: 100%;
  padding: 28px 0 28px 28px;
  border-radius: var(--radius);
  background: var(--light);
  scroll-snap-align: start;
}
.premium-ingredient .premium-ingredient-info,
.premium-ingredient .ingredient-img { flex: 1; }

.premium-ingredient .ingredient-subtitle {
  margin-bottom: 6px;
  color: var(--teal-light);
  font-family: var(--font-head);
  font-size: 13px;
  font-weight: 700;
  line-height: 1.3;
  text-transform: uppercase;
}
.premium-ingredient .ingredient-name {
  margin-bottom: 8px;
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
}
.premium-ingredient .ingredient-info {
  color: var(--ink-soft);
  font-size: 15px;
  line-height: 1.45;
}
.premium-ingredient .ingredient-info p { margin: 0; }

.premium-ingredient .ingredient-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.premium-ingredient .premium-ingredient-button { margin-top: 48px; text-align: center; }
.premium-ingredient .premium-ingredient-button .btn { min-width: min(400px, 100%); }
.premium-ingredient .guarantee-text {
  margin-top: 14px;
  color: var(--ink);
  font-size: 18px;
  line-height: 1.4;
}

@media (max-width: 1100px) {
  .premium-ingredient .ingredient-grid { grid-auto-columns: calc((100% - 24px) / 2); }
}
@media (max-width: 749px) {
  .premium-ingredient::before { height: 40px; }
  .premium-ingredient.section { padding-top: 80px; }
  .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 {
    padding: 0;
    scroll-snap-align: center;
  }
  .premium-ingredient .premium-ingredient-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px 0 24px 24px;
  }
  .premium-ingredient .premium-ingredient-button .btn { width: 100%; }
  .premium-ingredient .guarantee-text { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   10. Review tabs — "We're Seeing Stars"
   -------------------------------------------------------------------------- */
.review-tab {
  background: var(--light);
  padding: 56px 0;
}
@media (min-width: 768px) {
  .review-tab { padding: 88px 0; }
}

.review-tab .review-tab-header { margin-bottom: 32px; padding: 0 20px; }
.review-tab .review-tab-header .section-heading { margin: 0; }

.review-tab .review-tab-bar-wrapper {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
}
.review-tab .tab-bar-block {
  display: flex;
  align-items: center;
  gap: 12px;
  width: min(320px, 50%);
  padding: 16px 22px;
  border: 2px solid var(--teal);
  border-radius: 999px;
  background: var(--light);
  cursor: pointer;
  transition: background .3s ease, color .3s ease;
}
.review-tab .tab-bar-block.active { background: var(--teal-grad-r); border-color: transparent; }

.review-tab .tab-count {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--teal);
  color: var(--white);
  font-family: var(--font-head);
  font-size: 15px;
  font-weight: 800;
  line-height: 1;
  transition: background .3s ease, color .3s ease;
}
.review-tab .tab-bar-block.active .tab-count { background: var(--white); color: var(--teal); }

.review-tab .tab-title {
  flex: 1;
  color: var(--teal);
  font-family: var(--font-head);
  font-size: 17px;
  font-weight: 700;
  line-height: 1.2;
  text-align: left;
  text-transform: uppercase;
}
.review-tab .tab-bar-block.active .tab-title { color: var(--white); }

.review-tab .tab-arrow {
  width: 15px;
  height: 15px;
  display: flex;
  align-items: center;
  color: var(--teal);
  transform: rotate(270deg);
  transition: .4s;
}
.review-tab .tab-arrow .icon { width: 15px; height: 11px; }
.review-tab .tab-bar-block.active .tab-arrow { color: var(--white); transform: rotate(90deg); }

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

.review-tab .review-content-wrapper { position: relative; }
/* dải mờ hai mép, đổ về màu nền section */
.review-tab .review-content-wrapper::before,
.review-tab .review-content-wrapper::after {
  content: '';
  position: absolute;
  z-index: 9;
  bottom: 0;
  width: 22%;
  height: 100%;
  pointer-events: none;
}
.review-tab .review-content-wrapper::before {
  left: 0;
  background-image: linear-gradient(to right, var(--light) 15%, rgba(250, 250, 250, 0));
}
.review-tab .review-content-wrapper::after {
  right: 0;
  background-image: linear-gradient(to left, var(--light) 15%, rgba(250, 250, 250, 0));
}

/* Carousel: KHÔNG thêm padding ngang cho track — theme.js căn giữa bằng
   scrollLeft dựa trên đúng flex-basis này. */
.review-tab .review-slider {
  --per: 1.9;
  display: flex;
  gap: 24px;
  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% - 24px * (var(--per) - 1)) / var(--per));
  scroll-snap-align: center;
  display: flex;
  flex-direction: column;
  height: auto;
}

.review-tab .review-content-inner {
  display: flex;
  gap: 32px;
  height: 100%;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--mint);
}

.review-tab .review-content-image {
  position: relative;
  width: 300px;
  flex-shrink: 0;
}
/* Khối vuông quyết định chiều cao tối thiểu của card; ảnh absolute phủ kín */
.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);
}

.review-tab .review-content-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  width: 100%;
  text-align: center;
}
.review-tab .review-info-wrapper { display: flex; flex-direction: column; align-items: center; gap: 20px; }

.review-tab .review-rating { display: flex; align-items: center; gap: 2px; }
.review-tab .review-rating span { color: var(--star); font-size: 24px; 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-family: var(--font-head);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
}
.review-tab .review-title::before { content: '\201C'; }
.review-tab .review-title::after  { content: '\201D'; }
.review-tab .review-detail {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.6;
}
.review-tab .review-detail p { margin: 0; }

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

/* Pill "Verified Buyer" — tick vẽ bằng CSS */
.review-tab .review-verification {
  position: relative;
  padding: 6px 16px 6px 40px;
  border-radius: 999px;
  background: var(--light);
  color: var(--ink);
  font-size: 17px;
  line-height: 24px;
}
.review-tab .review-verification::before {
  content: '';
  position: absolute;
  top: 8px;
  left: 14px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--teal);
}
.review-tab .review-verification::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 21px;
  width: 6px;
  height: 10px;
  transform: rotate(45deg);
  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-verification { font-size: 15px; }
}
@media (max-width: 749px) {
  .review-tab .review-tab-bar-wrapper { gap: 10px; }
  .review-tab .tab-bar-block { width: 100%; padding: 12px 14px; gap: 8px; }
  .review-tab .tab-title { font-size: 14px; }
  .review-tab .review-content-wrapper::before,
  .review-tab .review-content-wrapper::after { display: none; }
  .review-tab .review-content-inner { flex-direction: column; gap: 20px; padding: 20px; border-radius: var(--radius); }
  .review-tab .review-content-image { width: 100%; }
  .review-tab .review-content-image img { border-radius: 16px; }
  .review-tab .review-info-wrapper { gap: 16px; }
  .review-tab .review-detail { font-size: 16px; }
}

/* --------------------------------------------------------------------------
   11. Us vs. Them
   -------------------------------------------------------------------------- */
.custom-image-section { padding: 24px 0 56px; background: var(--light); }
@media (min-width: 768px) {
  .custom-image-section { padding: 32px 0 88px; }
}
.custom-image-section .page-width { max-width: 1100px; }

.custom-image-section .section-sub-heading {
  max-width: 560px;
  margin: 16px auto 32px;
  color: var(--ink);
  font-size: 17px;
  line-height: 1.5;
  text-align: center;
}
.custom-image-section .section-sub-heading p { margin: 0; }

.custom-image-section .image-with-block-wrapper {
  max-width: 860px;
  margin: 0 auto;
  padding: 32px;
  border-radius: var(--radius-lg);
  background: var(--mint);
}
.custom-image-section .media { background: transparent; border-radius: 0; }
.custom-image-section .media img { object-fit: contain; }
.custom-image-section .mobile-image { display: none; }

@media (max-width: 749px) {
  .custom-image-section .image-with-block-wrapper { padding: 16px; border-radius: var(--radius); }
  .custom-image-section .desktop-image { display: none; }
  .custom-image-section .mobile-image  { display: block; }
}

/* --------------------------------------------------------------------------
   12. Community — khối mint bo tròn lớn (kiểu "Daily Routine, Made Easy")
   -------------------------------------------------------------------------- */
.grid-images-with-blocks {
  background: var(--light);
  padding: 0 0 56px;
}
@media (min-width: 768px) {
  .grid-images-with-blocks { padding: 0 0 88px; }
}

.grid-images-with-blocks .image-with-block-wrapper {
  display: flex;
  gap: 40px 56px;
  align-items: center;
  padding: 48px;
  border-radius: var(--radius-lg);
  background: var(--mint);
}
.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: 16px;
}
.grid-images-with-blocks .block-wrapper { flex: 1; }
.grid-images-with-blocks .block-wrapper > * + * { margin-top: 24px; }

.grid-images-with-blocks .section-heading { text-align: left; }
.grid-images-with-blocks .block-content {
  color: var(--ink);
  font-size: 17px;
  line-height: 1.55;
}
.grid-images-with-blocks .block-content p { margin: 0; }
.grid-images-with-blocks .button-wrapper .btn { min-width: min(400px, 100%); }

/* Hàng icon dưới cùng — chỉ chiếm chỗ khi config có dữ liệu */
.grid-images-with-blocks .footer-text-blocks {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px 30px;
  text-align: center;
}
.grid-images-with-blocks .footer-text-blocks:has(*) { margin-top: 48px; }
.grid-images-with-blocks .footer-icon-with-text {
  color: var(--ink);
  font-family: var(--font-head);
  font-size: 16px;
  font-weight: 700;
  text-transform: uppercase;
}
.grid-images-with-blocks .footer-icon-with-text img { height: 72px; width: 72px; margin: 10px auto 0; }

@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; }
  .grid-images-with-blocks .footer-text-blocks { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 749px) {
  .grid-images-with-blocks .image-with-block-wrapper { padding: 24px 20px; border-radius: var(--radius); }
  .grid-images-with-blocks .image-wrapper { gap: 10px; }
  .grid-images-with-blocks .media { border-radius: 16px; }
  .grid-images-with-blocks .button-wrapper .btn { width: 100%; }
}
@media (max-width: 575px) {
  .grid-images-with-blocks .footer-text-blocks { grid-template-columns: 1fr; gap: 15px; }
}

/* --------------------------------------------------------------------------
   13. Q&A — nền mint, sóng đỉnh, card trắng bo tròn
   -------------------------------------------------------------------------- */
.q-and-a-section {
  position: relative;
  background: var(--mint);
}
@media (min-width: 768px) {
  .q-and-a-section.section { padding-top: 140px; }
}
.q-and-a-section::before {
  content: '';
  position: absolute;
  left: 0; right: 0; top: -1px;
  height: 72px;
  background: var(--wave-top) center / 100% 100% no-repeat;
  pointer-events: none;
}

.q-and-a-section .section-heading { margin-bottom: 16px; }
.q-and-a-section .q-and-a-section-subheading {
  max-width: 620px;
  margin: 0 auto;
  color: var(--ink);
  font-size: 17px;
  text-align: center;
}

.q-and-a-section .block-wrapper {
  column-count: 2;
  column-gap: 48px;
  margin-top: 48px;
}
.q-and-a-section .block {
  display: flex;
  align-items: center;
  margin-bottom: 24px;
  padding: 28px 32px;
  border-radius: var(--radius);
  background: var(--light);
  break-inside: avoid;
}
.q-and-a-section .q-and-a-qrapper { position: relative; width: 100%; }

.q-and-a-section .question {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  width: 100%;
  padding-right: 44px;
  color: var(--teal);
  font-family: var(--font-head);
  font-size: 19px;
  font-weight: 500;
  line-height: 1.35;
  text-align: left;
  cursor: pointer;
}

/* Đóng: max-height 0. Mở: theme.js gán max-height = scrollHeight */
.q-and-a-section .answer {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  padding: 0 32px 0 0;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.6;
  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: 12px; }
.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 {
  position: absolute;
  top: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border: 1.5px solid var(--teal);
  border-radius: 6px;
  color: var(--teal);
}
.q-and-a-section .q-a-icon .icon-plus,
.q-and-a-section .q-a-icon .icon-minus { height: 12px; width: 12px; }
.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::before { height: 40px; }
  .q-and-a-section.section { padding-top: 80px; }
  .q-and-a-section .q-and-a-section-subheading { font-size: 16px; }
  .q-and-a-section .block-wrapper { column-count: 1; margin-top: 32px; }
  .q-and-a-section .block { margin-bottom: 14px; padding: 22px 20px; border-radius: 20px; }
  .q-and-a-section .question { font-size: 17px; padding-right: 36px; }
  .q-and-a-section .answer { padding-right: 0; }
}

/* --------------------------------------------------------------------------
   14. Footer — teal gradient, link trắng gạch chân
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--teal-grad-r);
  color: var(--white);
  padding: 72px 0 0;
}

.site-footer__top { padding-bottom: 48px; }
.site-footer__blocks {
  display: flex;
  flex-wrap: wrap;
  gap: 40px 96px;
}
.site-footer__block { min-width: 200px; }

.site-footer__heading {
  margin: 0 0 14px;
  color: var(--white);
  font-family: var(--font-head);
  font-size: 22px;
  font-weight: 800;
  line-height: 1.3;
}
.site-footer__block a {
  display: inline-block;
  color: var(--white);
  font-size: 17px;
  line-height: 32px;
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: opacity .2s ease;
}
.site-footer__block a:hover { opacity: .75; }

.site-footer__bottom {
  border-top: 1px solid rgba(255, 255, 255, .35);
  padding: 28px 0 36px;
}
.site-footer__bottom-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.site-footer__note {
  max-width: 560px;
  color: rgba(255, 255, 255, .85);
  font-size: 13px;
  line-height: 1.5;
}

.list-payment {
  display: flex;
  flex-wrap: wrap;
  margin: -4px;
}
.list-payment li { display: flex; padding: 4px; }
.list-payment img { width: 38px; height: 24px; border-radius: 4px; background: var(--white); }

@media (max-width: 749px) {
  .site-footer { padding: 48px 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, .5);
  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 {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  margin-bottom: 10px;
  border-radius: 50%;
  background: var(--white);
  color: var(--teal);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
}
.modal__image {
  overflow-y: auto;
  max-height: calc(100vh - 80px);
  max-width: 820px;
  width: 100%;
  margin: 0 auto;
}
.modal__image img { border-radius: var(--radius); }

/* Cookie consent — <dialog>, trình duyệt lo 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(20, 45, 47, .55); }
.cookie-dialog:focus { outline: none; }

.cookie-card {
  padding: 36px 32px 32px;
  border-radius: var(--radius);
  background: var(--light);
  text-align: left;
  box-shadow: rgba(20, 45, 47, .3) 0 24px 48px -20px;
}
.cookie-card h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-size: 28px;
  font-weight: 800;
  line-height: 1.2;
}
.cookie-card p {
  margin: 0 0 24px;
  color: var(--ink);
  font-size: 16px;
  line-height: 1.55;
}
.cookie-card a { color: var(--teal); text-decoration: underline; }
.cookie-card__actions { display: flex; gap: 12px; flex-wrap: wrap; }
.cookie-card__actions .btn { flex: 1; padding: 18px 20px; font-size: 16px; }
.cookie-card__actions .btn::after { display: none; }
.btn--ghost {
  background: transparent;
  border-color: var(--teal);
  color: var(--teal);
}
.btn--ghost:hover { background: var(--teal); color: var(--white); box-shadow: none; }

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

/* --------------------------------------------------------------------------
   16. Hiện dần khi cuộn tới
   -------------------------------------------------------------------------- */
.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; }
}