:root{
  --primary:#15803d;
  --primary-contrast:#ffffff;
  --font-be-vietnam-pro: "Be Vietnam Pro", ui-sans-serif, system-ui, -apple-system,
                         "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans",
                         "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
  --header-h-mobile: 84px;
  --header-h-desktop: 88px;
  --accent-orange: #FFA250;
}

html, body{
  font-family: var(--font-be-vietnam-pro);
}

html { scroll-behavior: smooth; }

:root { --anchor-offset: var(--header-h-desktop); }
@media (max-width:1023.98px){
  :root { --anchor-offset: var(--header-h-mobile); }
}
section[id] { scroll-margin-top: var(--anchor-offset); }

/* ===== Header base ===== */
.site-header{
  position: fixed;
  inset: 0 auto auto 0;
  width: 100%;
  z-index: 4000; /* cao hơn mọi thứ khác (1002, 2000, ...) */
}
@media (min-width:1024px){
  .site-header{ background:transparent; backdrop-filter:none; }
}
.site-header--active{
  background:#fff;
  backdrop-filter: blur(10px);
}

.site-header__inner{
  display:flex; align-items:center; justify-content:space-between;
  padding:15px 16px;
  max-width:1440px; margin:0 auto;
}
@media (min-width:1280px){ .site-header__inner{ padding:15px 140px; } }

/* Logo */
.site-logo{
  margin:0; font-size:30px; font-weight:600; text-transform:uppercase;
  color:var(--primary);
}
@media (min-width:1024px){
  .site-header:not(.site-header--active) .site-logo{ color:#fff; }
}

/* Nav desktop */
.site-nav{ display:flex; align-items:center; gap:16px; }
.site-menu{ display:none; list-style:none; gap:32px; margin:0; padding:0; }
.site-menu a{ text-decoration:none; text-transform:capitalize; line-height:1; }
@media (min-width:1024px){
  .site-menu{ display:flex; }
  .site-header:not(.site-header--active) .site-menu{ color:#fff; }
  .site-header--active .site-menu{ color:var(--primary); }
  .site-menu a{ color:inherit; }
}

/* Buttons desktop */
.site-header .btn{
  display:none;
  align-items:center; justify-content:center; height:44px;
  padding:0 25px; border-radius:999px; font-weight:700; line-height:1; text-decoration:none;
}
@media (min-width:1024px){
  .site-header .btn{ display:flex; }
}
.btn-primary{
  background:var(--primary); color:var(--primary-contrast); border:none;
}
.site-header:not(.site-header--active) .btn-primary{
  background:#fff; color:var(--primary);
}
.btn-primary:hover{ filter:brightness(0.95); }

.btn-outline{
  border:1px solid var(--primary); color:var(--primary); background:transparent;
}
.site-header:not(.site-header--active) .btn-outline{
  border-color:#fff; color:#fff;
}
.btn-outline:hover{ background:#DDF0D2; color:var(--primary); }

/* Hamburger (mobile) */
.hamburger{
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px; border-radius:6px; background:#DDF0D2; color:#000; border:0;
}
@media (min-width:1024px){ .hamburger{ display:none; } }

/* Overlay + slide menu (mobile) */
.header-overlay{
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.5);
  backdrop-filter: blur(4px);
  z-index: 3998;
}
.mobile-menu{
  position: fixed;
  left: 16px;
  right: 16px;
  top: var(--header-h-mobile); /* đồng bộ chiều cao header mobile */
  z-index: 3999;              /* trên overlay */
  margin: 0;
  padding: 24px;
  list-style: none;
  background: rgba(24,24,27,.95);
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
.mobile-menu li{ padding:8px 16px; }
.mobile-menu a{ color:#fff; opacity:.6; text-decoration:none; font-weight:500; font-size:18px; display:block; }
.mobile-menu a:hover{ opacity:1; }

.overlay{
  position:fixed; inset:0; z-index:3997;
  background:rgba(0,0,0,.55); backdrop-filter:blur(4px);
  display:none;
}
.overlay.is-open{ display:block; }

/* CTA trong menu mobile */
.mobile-actions{
  display: grid;
  gap: 12px;
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid rgba(255,255,255,.10);
}

.mobile-actions .mobile-btn{
  display: grid;
  place-items: center;
  height: 52px;
  padding: 0 18px; 
  line-height: 1;
  box-sizing: border-box;
  border-radius: 9999px;
}
.mobile-actions .mobile-btn > *{
  line-height: 1;
}
.mobile-btn:active{ transform: translateY(1px); }

/* Primary (Download app) */
.mobile-btn--primary{
  color: #fff;
  background: linear-gradient(180deg, #2A7E3D 0%, #206E1B 100%);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow:
    0 8px 20px rgba(32,110,27,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
}
.mobile-btn--primary:hover{ filter: brightness(1.02); }
.mobile-btn--primary:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(21,128,61,.35),
    0 8px 20px rgba(32,110,27,.35),
    inset 0 1px 0 rgba(255,255,255,.15);
}

/* Outline (I'm a Doctor) */
.mobile-btn--outline{
  color: #fff;
  background: rgba(255,255,255,.02);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.mobile-btn--outline:hover{
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
}
.mobile-btn--outline:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,.25);
}

/* Optional: icon trong nút */
.mobile-menu .mobile-btn .icon{
  width: 18px; height: 18px; display: inline-flex; margin-right: 10px;
}

@media (prefers-reduced-motion: reduce){
  .mobile-btn{ transition: none; }
}


@keyframes slideDown{
  from{ transform:translateY(-8px); opacity:0; }
  to{ transform:translateY(0); opacity:1; }
}
@media (min-width:1024px){
  .header-overlay, .mobile-menu{ display:none !important; }
}

/* ===== HERO BANNER ===== */
.hero-banner-container { width: 100%; height:100vh; position:relative; overflow:hidden; }
.hero-banner-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  z-index: 1;
}
@media (min-width: 1536px) { /* 2xl */
  .hero-banner-image { object-fit: fill; }
}
.hero-banner-waterfall { z-index: 0; }

/* Action buttons */
.action-buttons-container{
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  gap: 1.5rem;
  bottom: 174px;
}
@media (min-width: 768px){
  .action-buttons-container{ bottom: 102px; }
}
.button-wrapper{ padding: 1px; border: 1px dashed; }
.vision-button-wrapper{ border-color: #F9A006; }
.mission-button-wrapper{ border-color: #52A56A; }

.hero-button{
  height: max-content; border-radius: 0; padding: 0.75rem 2rem;
  backdrop-filter: blur(10px); border: 2px solid; text-transform: uppercase;
  font-size: 0.875rem; line-height: 140%; cursor: pointer; transition: background-color .2s;
}
@media (min-width: 768px){
  .hero-button{ padding-left: 59px; padding-right: 59px; font-size: 1rem; font-weight: 700; }
}
.vision-button{ background:#1E1B10; border-color:#C6934A; color:#FAF8BA; }
.vision-button:hover{ background:#1E1B10; opacity:.9; }
.mission-button{ background:#101E12; color:#BAFAC8; border-image: linear-gradient(to top,#1C391A,#206E1B) 1; }
.mission-button:hover{ background:#101E12; opacity:.9; }

/* Bottom bar */
.bottom-bar{
  position: absolute; width:100%; bottom:0; z-index:1;
  background: rgba(0,0,0,.5); backdrop-filter: blur(6px);
  user-select: none; padding-top:.75rem; padding-bottom:2rem;
}
@media (min-width:768px){ .bottom-bar{ padding:0 2rem; } }

.bottom-bar-content{
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.75rem; padding:.75rem; position:relative;
}
@media (min-width:768px){
  .bottom-bar-content{ flex-direction:row; gap:2.5rem; padding:.75rem; }
}

/* ===== Volume controls – icon trần, luôn nổi trên overlay ===== */
.volume-control-desktop,
.volume-control-mobile{
  -webkit-appearance: none;
  appearance: none;
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  padding: 0;
  margin: 0;
  line-height: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #C6934A;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Loại bỏ viền focus Firefox */
.volume-control-desktop::-moz-focus-inner,
.volume-control-mobile::-moz-focus-inner{ border:0; padding:0; }

/* Kích thước icon */
.volume-control-desktop svg{ width:40px; height:40px; display:block; }
.volume-control-mobile  svg{ width:24px; height:24px; display:block; }

/* Ép fill SVG dùng currentColor */
.volume-control-desktop svg [fill],
.volume-control-mobile  svg [fill]{ fill: currentColor !important; }

/* Vị trí & lớp phủ */
.volume-control-desktop{ display:none; }
@media (min-width:768px){
  .volume-control-desktop{
    display:block; position:absolute; top:50%; transform:translateY(-50%);
    left:2.5rem; z-index:1002; /* cao hơn header-overlay (1000) & header (1001) */
  }
}
.volume-control-mobile{
  position:absolute;
  top: calc(var(--header-h-mobile) + 20px); /* luôn nằm dưới header */
  right:.75rem;
  z-index:1002; /* nổi trên overlay/menu/hero */
}
@media (min-width:768px){ .volume-control-mobile{ display:none; } }

/* Email form */
.email-prompt{ font-size:.875rem; color:#C6934A; line-height:100%; text-align:center; }
.email-form{
  display:flex; border:1px solid #C6934A; border-radius:6px; overflow:hidden;
  height:50px; width:100%;
}
@media (min-width:768px){ .email-form{ width:248px; } }
.email-input{
  background:transparent; border:none; outline:none; box-shadow:none;
  padding:.875rem; height:fit-content; font-size:.875rem; width:100%; color:#fff;
}
.email-input::placeholder{ color:#a1a1aa; }
.submit-button{
  background:#C6934A; border-radius:0; width:50px; height:50px; border:none;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.submit-button:hover{ background:#C6934A; opacity:.9; }

/* Modal */
.modal-overlay{
  position:fixed; inset:0; z-index:50; background:transparent;
  display:flex; align-items:center; justify-content:center;
}
.modal-content{
  position:relative; padding:1.5rem 1rem; width:350px;
  background: rgba(0,0,0,.3); backdrop-filter: blur(5.6px);
  box-shadow: 0 0 10px 0 rgba(0,0,0,.6);
  border:1px solid rgba(255,255,255,.1);
}
@media (min-width:768px){
  .modal-content{ padding:2.5rem 2rem; width:516px; }
}
.modal-close-button{
  position:absolute; top:.75rem; right:.625rem; cursor:pointer; background:none; border:none;
}
.modal-title{
  font-size:2rem; font-weight:700; color:#C6934A; text-transform:uppercase; line-height:140%; text-align:center;
}
@media (min-width:768px){ .modal-title{ font-size:3rem; } }
.modal-body{
  font-size:1rem; font-weight:300; line-height:140%; text-align:center; margin-top:1.5rem; color:#fff;
}
@media (min-width:768px){
  .modal-body{ font-size:1.5rem; }
}


/* ===== Schedule Section ===== */
/* phủ nền trắng full width */
.schedule{ background:#fff; width:100%; }

/* KHỐI NỘI DUNG GIỮ MAX-WIDTH 1440PX */
.schedule-inner{
  display:flex; flex-direction:column;
  align-items:center; justify-content:center;
  gap:24px;
  padding:60px 16px;
  max-width:1440px; margin:0 auto;
}
@media (min-width:1024px){
  .schedule-inner{ flex-direction:row; gap:134px; padding:80px 0; }
}

/* Giữ nguyên các class cũ bạn đã có */
.schedule-left{ width:100%; max-width:528px; padding-top:62px; text-align:center; }
@media (min-width:1024px){ .schedule-left{ padding-top:0; text-align:left; } }

.schedule-title-lg{ display:none; font-size:56px; font-weight:700; line-height:1; color:var(--primary); }
@media (min-width:1024px){ .schedule-title-lg{ display:block; } }

.schedule-title-sm{ display:block; font-size:32px; font-weight:700; line-height:1; color:var(--primary); }
.schedule-title-sm span{ font-weight:400; }
@media (min-width:1024px){ .schedule-title-sm{ display:none; } }

.schedule-desc{ margin-top:21px; font-size:16px; line-height:1; color:#757575; }

.schedule-btn{
  display:inline-flex; align-items:center; justify-content:center;
  margin-top:40px; width:244px; height:60px; border-radius:9999px;
  background:var(--primary); color:#fff; font-weight:700; text-decoration:none;
}
.schedule-btn:hover{ filter:brightness(.95); }
@media (min-width:1024px){ .schedule-btn{ margin-top:37px; } }

.schedule-img{ width:395px; height:429px; object-fit:cover; object-position:center; }
@media (min-width:768px){ .schedule-img{ width:618px; height:672px; } }



/* ===== SERVICES ===== */
.services{
  background:#DDF0D2;
  padding:100px 0;
  width:100%;
}
.services__container{
  max-width:1440px;
  margin:0 auto;
  padding:0 16px;
}
@media (min-width:768px){
  .services__container{ padding:0; }
}

/* Tag headline */
.services__tag{
  display:flex; align-items:center; gap:12px;
  justify-content:center;
  color:#15803d; /* primary */
  margin:0 auto;
  max-width:730px;
}
.services__tag-icon{ width:18px; height:18px; }
.services__tag-text{
  font-size:14px; font-weight:700; text-transform:uppercase; line-height:22px; letter-spacing:.1em;
}

/* Title + sub */
.services__title{
  margin-top:8px; margin-bottom:16px;
  font-size:32px; font-weight:600; line-height:48px; color:#031E2D; text-align:center;
}
@media (min-width:768px){ .services__title{ font-size:40px; } }

.services__subtitle{
  font-size:16px; line-height:24px; color:#131313; text-align:center;
  max-width:730px; margin:0 auto;
}

/* Grid */
.services__grid{
  display:grid;
  grid-template-columns:1fr;
  gap:32px;
  justify-content:center; align-items:start;
  width:fit-content; margin:64px auto 0; padding:0; list-style:none;
}
@media (min-width:1024px){
  .services__grid{ grid-template-columns: repeat(2, 1fr); }
}
@media (min-width:1280px){
  .services__grid{ grid-template-columns: repeat(3, 1fr); }
}

/* Card */
.service-card{
  width:100%;
  height:440px;
  max-width:416px;
  background:#FBFFF9;
  border-radius:24px;
  padding:40px;
  transition: background .25s ease, color .25s ease;
  box-shadow: 0 20px 40px rgba(0,0,0,.06);
  cursor:pointer; overflow:hidden;
}
@media (min-width:1024px){
  .service-card{ border-radius:24px; }
}
.service-card:hover{ background:#206E1B; }

.service-card__icon{
  width:80px; height:80px; border-radius:999px;
  background:#DDF0D2; display:flex; align-items:center; justify-content:center;
  transition: background .25s ease;
}
.service-card:hover .service-card__icon{ background:#fff; }
.service-card__icon i{ font-size:32px; color:#031E2D; }
.service-card:hover .service-card__icon i{ color:#206E1B; }

.service-card__title{
  margin-top:32px; color:#031E2D; font-weight:500; font-size:24px; line-height:32px;
  transition: color .25s ease;
}
.service-card__desc{
  margin-top:16px; color:#8A8A8A; font-size:16px; line-height:24px;
  transition: color .25s ease;
}
.service-card:hover .service-card__title,
.service-card:hover .service-card__desc{ color:#fff; }

/* CTA card */
.service-cta{
  width:100%; max-width:416px; height:440px;
  border:2px solid #fff; background:rgba(255,255,255,.4);
  border-radius:24px; 
  display: inline-flex !important;
  flex-direction:column;
  align-items:center; justify-content:center;
}
.service-cta__title{
  color:#15803d; font-size:24px; font-weight:500; line-height:32px; margin-bottom:32px;
}
.service-cta__btn{
  border-color:#15803d !important; color:#15803d;
  background:transparent; border-radius:9999px;
  padding:20px 32px; height:64px; gap:24px;
  transition:all .25s ease;
}
.service-cta__btn span { font-weight:700; font-size:16px; }
.service-cta__btn:hover{
  background:#15803d !important; color:#fff !important;
}
.service-cta__btn i{ font-size:16px; }


/* ===== HOW IT WORKS ===== */
.howit{ background:#fff; padding:100px 0; width:100%; }
.howit__inner{
  max-width:1440px; margin:0 auto;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:32px; padding:0 11px;
}
@media (min-width:1024px){
  .howit__inner{ flex-direction:row; gap:172px; padding:0; }
}
.howit__left{ width:100%; max-width:588px; }
.howit__tag{ display:flex; align-items:center; gap:12px; color:#15803d; justify-content:flex-start; }
@media (max-width:1023.98px){ .howit__tag{ justify-content:center; } }
.howit__tag-icon{ width:18px; height:18px; }
.howit__tag-text{ font-size:14px; font-weight:700; line-height:22px; text-transform:uppercase; letter-spacing:.1em; }

.howit__text{ display:flex; flex-direction:column; gap:16px; min-height:200px; margin-top:16px; }
.howit__title{
  font-weight:700; line-height:1; color:#15803d;
  font-size:32px; min-height:64px; width:350px; text-align:center; margin:0 auto;
}
.howit__desc{
  font-size:16px; line-height:24px; color:#131313; opacity:.8;
  width:350px; text-align:center; margin:0 auto;
}
@media (min-width:768px){
  .howit__title{ font-size:56.8px; width:588px; text-align:left; margin:0; }
  .howit__desc{ width:588px; text-align:left; margin:0; }
}

/* dots (mobile) */
.howit__dots{ display:flex; gap:8px; align-items:center; justify-content:center; margin-top:-8px; }
@media (min-width:768px){ .howit__dots{ display:none; } }
.howit__dot{ width:12px; height:12px; border-radius:999px; border:1px solid #DEDEDE; }
.howit__dot.is-active{ background:#DDF0D2; border-color:#DDF0D2; }

/* desktop phone */
.howit__phone{ display:none; }
@media (min-width:768px){
  .howit__phone--desktop{
    display:block; width:360px; height:779px; object-fit:cover; object-position:center;
    border-bottom-left-radius:2rem; border-bottom-right-radius:2rem;
    filter: drop-shadow(0 4px 20px rgba(0,0,0,.25));
  }
}

/* mobile carousel */
/* ============== HOW IT WORKS ============== */
.howit{
  background:#fff;
  padding:100px 0;
  width:100%;
  overflow-x:hidden; /* tránh scroll ngang */
}

.howit__inner{
  max-width:1440px;
  margin:0 auto;
  padding:0 11px; /* giống max-md:px-[11px] */
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:32px; /* md:gap-10 */
}
@media (min-width:1024px){ /* lg */
  .howit__inner{
    flex-direction:row;
    gap:40px;
  }
}
@media (min-width:1280px){ /* xl */
  .howit__inner{ gap:64px; }
}
@media (min-width:1536px){ /* 2xl */
  .howit__inner{ gap:172px; }
}

/* left caption block */
.howit__left{ width:100%; max-width:588px; }
.howit__tag{
  display:flex; align-items:center; gap:12px;
  color:var(--primary); justify-content:flex-start;
}
@media (max-width:1023.98px){
  .howit__tag{ justify-content:center; }
}
.howit__tag-icon{ width:18px; height:18px; }
.howit__tag-text{
  font-size:14px; font-weight:700; line-height:22px;
  text-transform:uppercase; letter-spacing:.1em;
}

.howit__text{ display:flex; flex-direction:column; gap:16px; min-height:200px; margin-top:16px; }
.howit__title{
  color:var(--primary); font-weight:700; line-height:1;
  width:350px; font-size:32px; margin-top:8px; min-height:64px; text-align:center;
}
@media (min-width:768px){
  .howit__title{ width:588px; font-size:56.8px; min-height:72px; text-align:left; }
}
.howit__desc{
  color:#131313; opacity:.8;
  width:350px; margin:0 auto; text-align:center;
  font-size:16px; line-height:24px;
}
@media (min-width:768px){
  .howit__desc{ width:588px; margin:0; text-align:left; }
}

/* dots (mobile only) */
.howit__dots{
  display:flex; align-items:center; justify-content:center;
  gap:8px; margin-top:-16px; list-style:none; padding:0;
}
@media (min-width:768px){ .howit__dots{ display:none; } }
.howit__dot{
  width:12px; height:12px; border-radius:999px;
  border:1px solid #DEDEDE; background:transparent;
}
.howit__dot.is-active{ background:#DDF0D2; border-color:#DDF0D2; }

/* desktop phone image */
.howit__phone{ display:block; object-fit:cover; object-position:center; }
.howit__phone--desktop{
  width:360px; height:779px; border-bottom-left-radius:2rem; border-bottom-right-radius:2rem;
  filter: drop-shadow(0 4px 20px rgba(0,0,0,.25));
  display:none;
}
@media (min-width:768px){
  .howit__phone--desktop{ display:block; }
}

/* --- Mobile Carousel --- */
.howit__carousel{
  position:relative; width:100%; max-width:320px; margin:0 auto; display:block;
  touch-action:pan-y; user-select:none; -webkit-tap-highlight-color:transparent;
}
@media (min-width:768px){ .howit__carousel{ display:none; } }

.howit__viewport{ overflow:hidden; width:100%; }
.howit__track{
  display:flex; will-change:transform; transition:transform .35s ease-in-out;
}
.howit__slide{
  flex:0 0 100%;
  display:flex; align-items:center; justify-content:center;
}
.howit__slide-img{
  width:280px; height:606px; object-fit:cover; display:block; border-radius:25px;
  box-shadow:0 4px 20px rgba(0,0,0,.15);
}

/* nav buttons */
.howit__nav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:32px; height:32px; border-radius:999px; background:transparent; border:0;
  color:#131313; display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.howit__nav:disabled{ opacity:.4; cursor:not-allowed; }
.howit__nav--prev{ left:-25px; }
.howit__nav--next{ right:-25px; }

/* --- Desktop chips --- */
.howit__chips{
  display:none;
  grid-template-columns:repeat(4, 1fr);
  gap:24px; justify-content:center; align-items:center;
  width:fit-content; margin:60px auto 0; padding:0; list-style:none;
}
@media (min-width:768px){
  .howit__chips{ display:grid; }
}
.howit__chip{
  display: grid;
  grid-template-columns: 1fr 20px;
  align-items: center;
  gap: 16px;
  height: 56px;
  padding: 0 12px;
  border-radius: 12px;
  width: 262px;
}
.howit__chip:hover{ background:rgba(0,0,0,.05); }
.howit__chip--active{
  background:#DDF0D2; color:var(--primary); pointer-events:none;
}
.howit__chip-text{
  font-size: 16px;
  line-height: 1;
  margin: 0;
}

.howit__chip-arrow{
  width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  font-size: 14px;
  line-height: 1;
}


/* ===== Testimonials ===== */
.testimonials{
  background: var(--primary);
  padding: 100px 0;
  width: 100%;
}
.testimonials__container{
  max-width: 1440px; margin: 0 auto;
  padding: 0 16px;
}

/* Tag headline */
.testimonials__tag{
  display:flex; align-items:center; gap:12px; justify-content:center;
  color: var(--accent-orange);
}
.testimonials__tag-icon{ width:18px; height:18px; }
.testimonials__tag-text{
  font-size:14px; font-weight:700; text-transform:uppercase; line-height:22px; letter-spacing:.1em;
}

/* Title + sub */
.testimonials__title{
  margin-top:8px; margin-bottom:16px;
  font-size:32px; font-weight:600; line-height:48px; color:#fff; text-align:center;
}
@media (min-width:768px){ .testimonials__title{ font-size:40px; } }

.testimonials__subtitle{
  font-size:16px; line-height:24px; color:#FAFAFA; text-align:center;
  max-width:730px; margin:0 auto;
}

/* List */
.testimonials__list{
  display:flex; align-items:center; justify-content:center; flex-wrap:wrap;
  gap:64px; /* ~ 16 on mobile, 64 desktop */
  margin-top:40px;
}
@media (min-width:768px){ .testimonials__list{ margin-top:64px; gap:64px; } }

.testimonial{
  width: min(395px, 100%);
}

.testimonial__head{
  display:flex; align-items:center; gap:8px;
}
.testimonial__avatar{
  width:88px; height:88px; object-fit:cover; border-radius:16px;
}
.testimonial__who{
  display:flex; flex-direction:column; gap:8px; margin-left:8px; flex:1;
}
.testimonial__name{
  color:#fff; font-size:24px; line-height:32px; font-weight:600;
}
.testimonial__country{
  color:#FAFAFA; font-size:16px; line-height:24px; font-weight:400;
}
.testimonial__quote{
  width:48px; height:48px; border-radius:999px; background:#FFA250;
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  color:#FAFAFA; font-size:18px;
}

.testimonial__text{
  color:#FAFAFA; font-size:16px; line-height:24px; margin:16px 0;
}
@media (min-width:768px){ .testimonial__text{ margin:32px 0; } }

.testimonial__stars{
  width:84px; height:14px; display:block;
}

/* ===== Booking section ===== */
.booking{
  background:#DDF0D2;
  padding:100px 0;
  width:100%;
  text-align:center;
}
.booking__title{
  font-size:40px; /* gần với text-5xl trên Tailwind mobile */
  line-height:1;
  color:#1C391A;
  font-weight:400;
}
@media (min-width:768px){ .booking__title{ font-size:48px; } }

.booking__stores{
  display:none;
  justify-content:center;
  gap:16px;
  margin-top:42px;
}
@media (min-width:768px){ .booking__stores{ display:flex; } }

.booking__store-btn{
  border-radius:9999px;
  height:auto;
  padding:21px 32px;
  gap:12px;
  text-transform:uppercase;
  letter-spacing:1.6px;
  font-weight:700;
}

.booking__icon{ width:23px; height:28px; color:#fff; }
.booking__store-text{ line-height:1; }

.booking__mobile{
  display:flex;
  justify-content:center;
  margin-top:42px;
}
@media (min-width:768px){ .booking__mobile{ display:none; } }

.booking__mobile-btn{
  width:244px; height:60px;
  border-radius:9999px;
  padding:20px 63px;
  font-weight:700;
}

/* ===== Footer ===== */
.site-footer{
  background:#fff;
  padding:24px 0; /* py-6 */
}
@media (max-width:767px){
  .site-footer{ padding-left:32px; padding-right:32px; } /* max-md:px-8 */
}
.site-footer__container{
  max-width:1440px; margin:0 auto;
}

.site-footer__logo{
  border:1px dashed #000; padding:11px 26px;
  width:fit-content; margin:0 auto;
}
.site-footer__logo p{
  font-size:14px; font-weight:700; line-height:28px; color:#000;
}

.site-footer__desc{
  color:#8A8A8A; line-height:28px;
  margin-top:24px; margin-bottom:15px;
  width:350px; max-width:100%; text-align:center; margin-left:auto; margin-right:auto;
}
@media (min-width:768px){ .site-footer__desc{ width:571px; } }

/* form */
.site-footer__form{
  width:100%; max-width:572px; margin:0 auto;
  display:flex; border:1.5px solid #E7E8F2; border-radius:6px; overflow:hidden;
}
.site-footer__input{
  flex:1; border:none; outline:none; box-shadow:none; height:50px; padding:0 14px;
  color:#0A142F; font-size:14px;
}
.site-footer__input::placeholder{ color:#9aa0a6; }
.site-footer__submit{
  width:50px; height:50px; border:none; background:var(--primary, #206E1B);
  display:flex; align-items:center; justify-content:center; cursor:pointer;
}
.site-footer__submit:hover{ filter:brightness(.95); }

/* bottom row */
.site-footer__bottom{
  display:flex; flex-direction:column; align-items:center; gap:32px;
  width:fit-content; margin:24px auto 0;
}
@media (min-width:768px){
  .site-footer__bottom{ flex-direction:row; gap:100px; }
}
.site-footer__socials{ width:135px; height:35px; display:block; }

.site-footer__links{
  display:flex; align-items:center; gap:36px; list-style:none; margin:0; padding:0;
  font-size:14px; font-weight:700; line-height:28px; color:#000;
}
.site-footer__links a{ color:inherit; text-decoration:none; }
.site-footer__links a:hover{ text-decoration:underline; }

/* a11y helper */
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ================== HOOON Login UI Styles ================== */
.ha-auth{
  /* ===== Design tokens ===== */
  --cta: #007AFF;
  --cta-border: #409CFF;
  --cta-hover: #004DC8;
  --header-h-mobile: 84px;
  --header-h-desktop: 88px;
  --benefits-bg: #1D1D1F;
  --card-bg: #000;
  --blue: #0058D6;

  /* ===== Map sang hệ biến cục bộ của màn hình login ===== */
  --ha-bg: var(--benefits-bg);       /* nền ngoài */
  --ha-card: var(--card-bg);         /* nền card */
  --ha-text: #F5F5F7;                /* chữ chính (Apple-ish) */
  --ha-muted: #A1A1A6;               /* chữ phụ/placeholder */
  --ha-input: #0D0D0F;               /* nền input (đen hơi nhạt hơn card) */
  --ha-border: #2A2A2E;              /* viền input/card */
  --ha-ring: var(--cta-border);      /* viền focus xanh */
  --ha-primary: var(--cta);          /* nút chính */
  --ha-primary-hover: var(--cta-hover);
  --ha-danger: #FF453A;              /* lỗi – Apple Red */
  --ha-radius: 12px;
  --ha-shadow: 0 12px 40px rgba(0,0,0,.45), 0 6px 18px rgba(0,0,0,.35);

  background: var(--ha-bg);
  min-height: 100dvh;                 /* chuẩn mobile viewport */
  display: flex;
  align-items: center;                 /* center theo trục dọc */
  justify-content: center;             /* center theo trục ngang */
  padding: clamp(16px, 4vh, 48px) 16px;/* padding linh hoạt, tránh đụng mép */
  overflow: auto;                      /* nếu form cao hơn, cho phép cuộn */
  font-family: inherit;
}
.ha-auth *, .ha-auth *::before, .ha-auth *::after{ box-sizing: border-box; }
.ha-auth input, .ha-auth button { font: inherit; }
/* Giới hạn chiều rộng, tự co trên mobile */
.ha-container{
  width: min(520px, 100%);
}
/* ====== Layout ====== */
.ha-container{ max-width: 520px; margin: 0 auto; }
.ha-brand{ display:flex; align-items:center; justify-content:center; gap:10px; margin:8px 0 18px; }
.ha-brand__text{ font-weight:800; font-size:28px; color:#fff; letter-spacing:.02em; }

.ha-card{
  background: var(--ha-card);
  border: 1px solid var(--ha-border);
  border-radius: 14px;
  box-shadow: var(--ha-shadow);
  padding: 24px 24px 20px;
}
.ha-card__header{ text-align:center; margin-bottom:14px; }
.ha-title{ margin:0 0 6px; color:#fff; font-size:22px; font-weight:800; }
.ha-desc{ margin:0; color:var(--ha-muted); font-size:20px; }

/* ====== Alert ====== */
.ha-alert{ border-radius:10px; padding:10px 12px; font-size:14px; margin-bottom:12px; }
.ha-alert--error{ background:#3b0d0d; border:1px solid #7f1d1d; color:#fecaca; }

/* ====== Form ====== */
.ha-form{ display:grid; gap:14px; }
.ha-field{ display:grid; gap:8px; }
.ha-label{ color:#fff; font-size:16px; font-weight:700; }
.ha-req{ color:var(--ha-danger); }
.ha-error{ font-size:13px; color:var(--ha-danger); }

/* input wrapper (không đụng bootstrap) */
.ha-inputWrap{
  height: 46px;
  display: flex;
  align-items: center;
  padding: 0 12px;
  background: var(--ha-input);
  border: 1px solid var(--ha-border);
  border-radius: 10px;
}
.ha-inputWrap:focus-within{ border-color: var(--ha-ring); }

/* input thật */
.ha-input{
  width: 100%;
  height: 44px;
  border: 0 !important;         
  outline: none !important;      
  background: transparent !important;
  color: var(--ha-text);
  font-size: 14px;
  line-height: 44px;
  padding: 0 !important;        
  box-shadow: none !important;   
  border-radius: 0;   
}
.ha-input::placeholder{ color: var(--ha-muted); font-weight:400; }
.ha-inputWrap--invalid{ border-color: var(--ha-danger) !important; }

/* Autofill Chrome/Edge */
.ha-input:-webkit-autofill,
.ha-input:-webkit-autofill:hover,
.ha-input:-webkit-autofill:focus{
  -webkit-text-fill-color: var(--ha-text);
  box-shadow: 0 0 0px 1000px var(--ha-input) inset;
  transition: background-color 9999s ease-in-out 0s;
  caret-color: var(--ha-text);
}

/* Row & checkbox */
.ha-row{ display:flex; align-items:center; justify-content:space-between; margin-top:2px; }
.ha-check{ display:inline-flex; gap:8px; align-items:center; color:var(--ha-text); font-size:14px; }
.ha-check__box{ width:16px; height:16px; accent-color: var(--ha-primary); }

/* Button riêng */
.ha-btn{
  display:inline-flex; align-items:center; justify-content:center;
  height:46px; padding:0 14px; width:auto;
  border-radius:10px; border:1px solid transparent;
  font-weight:700; cursor:pointer; text-decoration:none;
}
.ha-btn--block{ width:100%; }
.ha-btn--primary{ 
  background: var(--ha-primary); 
  color:#fff; 
  border-color: var(--ha-primary);
}
.ha-btn--primary:hover{ 
  background: var(--ha-primary-hover);
  border-color: var(--ha-primary-hover);
}
.ha-btn[disabled]{ opacity:.75; cursor:not-allowed; }
/* ================= Password Toggle Styles ================= */
.ha-inputWrap--password {
  position: relative;
  padding-right: 44px; /* Để chừa chỗ cho nút toggle */
}

.ha-password-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--ha-muted);
  cursor: pointer;
  padding: 2px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  transition: color 0.2s ease;
}

.ha-password-toggle:hover {
  color: var(--ha-text);
}

.ha-password-toggle:focus {
  outline: none;
  color: var(--ha-ring);
}

.ha-eye-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}