:root{
  --header-bg: #000000B2; /* #000 with 70% opacity */
  --header-border: #1A191E;
  --cta: #007AFF;
  --cta-border: #409CFF;
  --cta-hover: #004DC8;
  --header-h-mobile: 84px;   /* trước mình dùng 84 */
  --header-h-desktop: 66px;  /* và 88 trên desktop */
  --benefits-bg: #1D1D1F;
  --card-bg: #000;
  --blue: #0058D6;
  --text: #fff;
  --muted: rgba(255,255,255,.6);
  --r-md: 24px;
  --r-lg: 48px;
  scrollbar-width: none; /* Firefox */
  -ms-overflow-style: none;  /* IE and Edge */
}

h1, h2, h3, h4, h5, h6, p, a, li, span, div, input, button, label, textarea {
  font-family: "League Spartan" !important;
}

html, body {
  font-family: "League Spartan";
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, .brand {
  font-weight: 700;
}

/* Header base */
.header-app{
  position: fixed; top: 0; left: 0; right: 0;
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  z-index: 1001;
  font-family: "League Spartan", sans-serif;
  height: 56px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-app__container{
  max-width: 1200px;
  width: 100%;
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100%;
}

/* Desktop nav */
.nav-desktop{ display: none; gap: 20px; list-style: none; margin: 0; padding: 0; }
.nav-desktop a{ color: rgba(255,255,255,.6); text-decoration: none; font-size: 16px; }
.nav-desktop a:hover{ color: #fff; }

/* CTA desktop */
.cta{
  display: none;
  border-radius: 100px;
  background: var(--cta); 
  border: 1px solid var(--cta-border);
  color: #fff; 
  font-weight: 600; 
  text-decoration: none; 
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0px;
  height: 32px;
  width: 144px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
}
.cta:hover{ 
  background: var(--cta-hover); 
  color: #fff;
  text-decoration: none;
}

/* Burger mobile */
.burger{ padding: 5px; background: #1A191E; border: 0; border-radius: 5px; color: #fff; }
.burger svg{ width: 29px; height: 29px; }

/* Mobile overlay + menu */
.overlay{
  display: none; position: fixed; inset: 0;
  background: rgba(0,0,0,.5);
  z-index: 1000;
  pointer-events:auto;
}
.mobile-menu{
  display: none !important;
  position:fixed; left:0; right:0;
  top: var(--header-h-mobile);
  margin:0 16px; padding:24px;
  background: rgba(24,24,27,.95); color:#fff;
  border-radius:12px; box-shadow:0 20px 50px rgba(0,0,0,.5);
  z-index:1002; pointer-events:auto;
  list-style:none; display:flex; flex-direction:column; gap:12px;
}
@media (min-width:768px){ .mobile-menu{ top: var(--header-h-desktop); } }
.mobile-menu li{ padding: 8px 16px; }
.mobile-menu a{
  color:#cfd2da; opacity:.7; text-decoration:none;
  font-weight:500; font-size:18px; display:block;
  transition:opacity .2s ease, transform .2s ease;
}
.mobile-menu a:hover,
.mobile-menu a:focus-visible,
.mobile-menu a:active{
  opacity:1; transform:translateX(2px); color:#fff;
}
.mobile-menu.show{
  display: flex !important;
}
.overlay.show{
  display: block !important;
}

/* Chừa khoảng cho header fixed */
.main-with-header{ padding-top: 84px; }

/* Breakpoint desktop ~ md (>=768px) */
@media (min-width: 768px){
  .nav-desktop{ display: flex; }
  .burger{ display: none; }
  .brand{ position: absolute; left: 50%; transform: translateX(-50%); }
  .header-app__container{ padding: 16px 0; }
  .header-app{ border-bottom-color: 1px solid rgba(26, 25, 30, 1); }
}
@media (max-width: 767px){
  .cta{ display: none; }
}

/* Body bg đen cho giống thiết kế */
body{ background: #000; }

/* ===== HERO ===== */
.hero { 
  position: relative; 
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #000;
  margin-top: calc(var(--header-h-desktop) + 0px);

  /* Thêm background cho desktop */
  background-image: url('../imgs/bg-banner.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;
}

@media (max-width: 767px) {
  .hero {
    background-image: none;
  }
}

.hero__head{
  position: relative;
  z-index: 10;
  width: 100%;
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 16px;
  padding-top: 40px;
}
@media (min-width:768px){
  .hero__head { 
    padding-top: 60px;
  }
}

.hero__textwrap { 
  text-align: center; 
  margin-bottom: 32px;
}

.hero__title{
  color: #fff; 
  text-align: center; 
  font-weight: 500;
  font-size: 32px;  
  line-height: 100%;
  letter-spacing: -0.02em;
  margin-bottom: 16px;
}
@media (min-width:768px) { 
  .hero__title { 
    font-size: 92px;
    margin-bottom: 24px;
  } 
}

.hero__subtitle{
  color: rgba(255, 255, 255, 0.4);
  text-align: center; 
  line-height: 120%; 
  font-weight: 400;
  font-size: 18px;
  letter-spacing: 0px;
  margin: 0;
}
@media (min-width:768px) { 
  .hero__subtitle { font-size: 24px; } 
}

/* CTA button */
.btn-primary {
  border-radius: 100px;
  background: var(--cta); 
  border: 1px solid var(--cta-border);
  color: #fff; 
  font-weight: 600; 
  text-decoration: none; 
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0px;
  height: 32px;
  width: 144px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  transition: all 0.3s ease;
}
.btn-primary:hover { 
  background: var(--cta-hover); 
  color: #fff; 
  text-decoration: none; 
}

.hero__cta {
  position: relative;
  z-index: 10;
  display: flex;
  justify-content: center;
  width: 100%;
  align-items: center;
  text-align: center;
  /* margin-bottom: 32px; */
}
@media (min-width: 768px) {
  .hero__cta { 
    margin-bottom: 40px;
  }
}

/* Ảnh hero desktop - responsive scaling */
/* Sử dụng background-image thay vì img tag */
/* .hero__image { 
  display: none;
  position: relative;
  width: 100%;
  height: 60vh;
  background-image: url('https://s3.chocho.global/chocho/landing-pages/banner.png');
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  margin: 0 auto;
  max-width: 1920px;
}

@media (min-width: 768px) { 
  .hero__image { 
    display: block;
  }
} */

/* Ảnh hero mobile - responsive scaling */
.hero__image-mobile { 
  display: block; 
  width: 100%; 
  position: relative;
  height: auto;
  max-height: 45vh;
  min-height: 200px;
  margin-bottom: 32px;
  overflow: hidden;
}
.hero__image-mobile img {
  display: block; 
  width: 100%; 
  height: 100%;
  object-fit: cover;
  object-position: center center;
  transition: transform 0.3s ease;
}

/* Mobile breakpoints */
@media (max-width: 375px) {
  .hero__image-mobile {
    max-height: 40vh;
    min-height: 180px;
  }
}

@media (min-width: 376px) and (max-width: 767px) {
  .hero__image-mobile {
    max-height: 48vh;
    min-height: 220px;
  }
}

@media (min-width: 768px) { 
  .hero__image-mobile { display: none; } 
}

/* Toggle desktop/mobile */
.only-desktop { display: none; }
.only-mobile { display: block; }
@media (min-width: 768px) {
  .only-desktop { display: block; }
  .only-mobile { display: none; }
}

/* Fallback cho browsers không hỗ trợ object-fit */
@supports not (object-fit: cover) {
  .hero__image img,
  .hero__image-mobile img {
    width: 100%;
    height: auto;
    min-height: 100%;
  }
}

/* ===== Stories inside Hero (Full Screen Section) ===== */
.stories {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 16px;
  margin-top: 0;
  scroll-margin-top: var(--header-h-mobile);
}
@media (min-width: 768px) {
  .stories {
    padding: 100px 48px;
    scroll-margin-top: var(--header-h-desktop);
  }
}

.stories__inner{
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* khoảng cách MẶC ĐỊNH giữa các phần tử con */
  --stories-gap: 18px;
  gap: var(--stories-gap);
}
.stories__p,
.stories__heading,
.stories__pa{
  margin: 0 !important;
}
@media (max-width: 767px){
  .stories__inner{ --stories-gap: 16px; }  /* mobile */
}
@media (min-width: 768px){
  .stories__inner{ --stories-gap: 24px; }  /* desktop */
}

/* nếu vẫn thấy “gần” do font đậm của heading, tăng khoảng riêng cho heading: */
.stories__heading{ margin-block: 4px !important; } /* tuỳ chọn */
@media (min-width: 768px) {
  .stories__inner { gap: 40px; }
}

.stories__heading {
  display: inline-block;
  line-height: 86%;
  font-weight: 600;
  font-size: 92px;
  color: #fff;
  margin: 0;
  width: 928px;
  height: 79px;
}
@media (min-width: 768px) {
  .stories__heading {
    font-size: 92px;
    line-height: 86%;
  }
}

.stories__p {
  color: rgba(255, 255, 255, 0.6);
  font-size: 32px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0;
  max-width: 100%;
  text-align: center;
}

@media (max-width: 767px) {
  .stories__p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 24px;
    font-weight: 400;
    line-height: 120%;
    letter-spacing: 0px;
    margin: 0;
    max-width: 100%;
    text-align: center;
  }

  .stories__p strong {
    font-weight: 700;
  }
}

@media (min-width: 768px) {
  .stories__p {
    font-size: 32px;
    line-height: 120%;
    max-width: 682px;
    max-height: 38px;
  }
}

.stories__pa {
  font-size: 24px;
  line-height: 120%;
  letter-spacing: 0px;
  font-weight: 500;
  font-style: medium;
  text-align: center;
  width: 800px;
  height: 116px;
}

.stories__p strong {
  color: #fff;
  font-weight: 700;
}

.stories__sub_p {
  color: #fff;
  font-size: 18px;
  line-height: 130%;
  margin: 0;
  font-weight: 400;
}
@media (min-width: 768px) {
  .stories__sub_p {
    font-size: 40px;
    line-height: 120%;
  }
}

.stories__pa {
  color: rgba(255, 255, 255, 0.6);
  font-size: 16px;
  font-weight: 400;
  line-height: 140%;
  letter-spacing: 0px;
  margin: 0 0 32px 0;
  max-width: 100%;
  width: 800px;
  height: 116px;
  text-align: center;
  font-size: 24px; 
  font-weight: 500;

}
@media (min-width: 768px) {
  .stories__pa {
    line-height: 120%;
    max-width: 800px;
    margin: 0 0 40px 0;
  }
}

/* Button Star - SVG và Video chồng lên nhau */
.btn-star {
  position: relative;
  width: 200px;
  height: 98px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent;
  border: none;
  margin-top: 40px;
}

.btn-star video {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  mix-blend-mode: screen;
}

/* Responsive cho mobile */
@media (max-width: 767px) {
  .stories__heading{
    line-height: 120%;
    max-width: 203px;
    height: 68px;
    font-weight: 600;
    line-height: 1.2;
    color: #fff ;
    font-size: 40px;
  }
  .stories__pa {
    line-height: 120%;
    max-width: 318px;
    height: 216px;
    font-weight: 500;
    line-height: 1.2;
    color: #86868B;
    font-size: 20px;
    padding-top: 20px;
  }
  .btn-star {
    width: 180px;
    height: 90px;
    margin-top: 55px;
  }

  #stories_popup.is-open .btn-star {
    width: 180px !important;
    height: 88px !important;
  }
}

@media (max-width: 767px){
  /* Hero không cộng margin-top nữa */
  .hero{ 
    margin-top: 0 !important;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .hero__title {
    font-size: 28px; /* Có thể điều chỉnh size cho mobile */
  }
  
  .hero__title::before {
    content: "Give and Get\A";
    white-space: pre-line;
  }
  
  .hero__title::after {
    content: "Free Stuff with chocho";
    white-space: pre-line;
  }
  
  /* Ẩn text gốc trên mobile */
  .hero__title {
    font-size: 0; /* Ẩn text gốc */
  }
  
  .hero__title::before,
  .hero__title::after {
    font-size: 28px; /* Hiển thị lại text */
    line-height: 100%;
    font-weight: 500;
  }
  .hero__head{ padding-top: 0; margin-bottom: 8px; }
  .hero__image-mobile{ max-height: 38vh; margin: 6px auto; }
  .hero__cta.hero__cta--mt{ margin-top: 6px; }

  /* Stories: giảm padding trên để không dư khúc đầu */
  .stories{
    min-height: calc(100dvh - 0px);
    display: grid; place-items: center;
    padding: 16px 16px 20px;      /* trước là 60px */
  }
  .stories__inner{ gap: 16px; }
}

/* Scroll-snap cho trải nghiệm từng màn */
@media (max-width: 767px){
  main{ scroll-snap-type: y mandatory; overscroll-behavior-y: contain; }
  .snap{ scroll-snap-align: start; scroll-snap-stop: always; }
}
/* Breakpoint cho mobile */
.only-mobile { display: block; }
.only-desktop { display: none; }
@media (min-width: 768px) {
  .only-mobile { display: none; }
  .only-desktop { display: block; }
}

.is-hidden{ display:none !important; }
.btn-star--disabled{
  cursor: default;
  pointer-events: none;
}
/* Vision Card */
.vision-card{
  box-sizing:border-box;
  width: 1200px;
  margin:24px auto 0;
  background:#000;
  border:1px solid rgba(181,217,255,.3);
  box-shadow:inset 0 0 12px #B5D9FF;
  border-radius:32px;
  padding:clamp(48px,8vw,100px) 0;
  display:none;
}
.vision-card[hidden]{ display:none !important; }
.vision-card:not([hidden]){ display:block; animation:visionIn .45s ease both; }
@keyframes visionIn{ from{opacity:0; transform:translateY(12px)} to{opacity:1; transform:none} }

.vision-card__inner{ margin:0 auto; padding:0 20px; text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px; }
.vision-card__eyebrow{ margin:0; color:#0058D6; font-weight:700; font-size: 32px; line-height: 1.2; height: 38px; }
.vision-card__title{ margin:0; color:#fff; font-weight:600; line-height:1.05; font-size:92px; line-height: 86%; width: 590px; height: 158px;}
.vision-card__mission {
  color: #0058D6;
  font-weight: 600;
  font-size: 64px;
  line-height: 86%;
  width: 87px;
  height: 38px;
}
/* Glow giống btn-star, không click */
.vision-card__glow{ position:relative; width:210px; height:98px; margin:12px auto 4px; pointer-events:none; }
.vision-card__glow video{ width:100%; height:100%; }

.vision-card__body{ font-size:24px; max-width:800px; line-height: 1.2;}
.vision-card__body p{ margin:0; color:#86868B; font-weight:500; }
.vision-card__body strong{ color:#fff; font-weight:700; }

.mission-quote {
  color: #86868B
}

.mission-list {
  list-style: none;
  padding: 0;
  margin: 16px 0px;
  text-align: left;
  max-width: 591px;
  margin-left: auto;
  margin-right: auto;
}

.mission-list li {
  color: #86868B;
}

.mission-conclusion {
  height: 174px;
}

.vision-card__body-1{ font-size:24px; max-width:800px; line-height: 1.2; margin-top: 16px; color: #86868B; font-weight: 500;}
.vision-card__body-1 strong{ color:#fff; font-weight:700; }
.vision-card__body-1 ul{ list-style: none; padding: 0; margin: 0; text-align: center; margin-top:16px;}
.vision-card__body-1 h2 {
  font-size: 40px;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}
.healing-intro,
.healing-action,
.healing-dash,
.healing-description {
    display: inline;
}
.healing-list {
  height: 319px;
}

.vision-card__body-2{ font-size:24px; max-width:800px; line-height: 1.2; margin-top: 16px; color: #86868B; font-weight: 500;}
.future-question {
  color: #fff;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  text-align: center;
}
.future-intro {
  color: #fff;
  font-weight: 400;
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  margin-top: 32px;
}
.future-points {
  text-align: right;
  margin-top: 16px;
  height: 435px;
}
.future-points p {
  color: #86868B;
}

.future-points strong {
  color: #fff;
  font-weight: 700;
}

.vision-card__body-3 {
  font-size:24px; max-width:800px; line-height: 1.2; margin-top: 16px; color: #86868B; font-weight: 500;
}
.our-role-title {
  color: #fff;
  font-weight: 700;
  font-size: 40px;
  line-height: 1.2;
  text-align: center;
}
.vision-card__body-3 strong {
  color: #fff;
  font-weight: 700;
}
.vision-card__body-3 p {
  color: #86868B;
}

.role-section-1 {
  text-align: center;
  margin-top: 16px;
  
}
.role-section-2 {
  margin-top: 40px;
  text-align: center;
  color: #86868B;
}

.our-role-title-mobile {
  font-size: 24px;
  line-height: 1.2;
  text-align: center;
  color: #fff;
}

.vision-card__body-3-mobile {
  font-size: 18px;
  line-height: 1.2;
  font-weight: 500;
  color: #86868B;
  text-align: center;
  letter-spacing: -0.5px;
}

.role-content-mobile-1 {
  text-align: center;
  margin-top: 16px;
  font-size: 18px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.role-content-mobile-1 p {
  color: #86868B;
}

.role-content-mobile-2 {
  text-align: center;
  font-size: 18px;
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.role-content-mobile-2 p {
  color: #86868B;
}

.role-content-mobile-2 strong, 
.role-content-mobile-1 strong {
  color: #fff;
  font-weight: 700;
}

.vision-card__body-0 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

.vision-card__body-0-title {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

.vision-card__body-0-content {
  color: #86868B;
  font-weight: 500;
  font-size: 24px;
}

.vision-card__body-0-content p {
  color: #86868B;
  font-size: 24px;
}

.vision-card__body-0-content strong {
  color: #fff;
  font-weight: 700;
}

.vision-card__body-0-content-p {
  margin-top: 15px;
}

/* responsive nhỏ hơn trên mobile cho cân */
@media (max-width: 767px){
  .vision-card{
    width: 366px;          /* an toàn mép trái/phải */
    margin-left:auto; margin-right:auto;
  }

  .vision-card__inner{
    width: 100%;
    padding: 0 16px;                   /* box size gọn hơn */
    margin-inline: auto;               /* canh giữa */
    box-sizing: border-box;
  }

  .vision-card__eyebrow,
  .vision-card__title,
  .vision-card__body{
    width: auto; height: auto;         /* xoá kích thước cứng */
    max-width: 100%;
    margin-left:auto; margin-right:auto;
    text-align: center;
  }

  .vision-card__eyebrow{
    font-size: 16px; line-height: 1.2;
    font-weight: 700;
    padding-left: 10px;
  }

  .vision-card__title{
    font-size: 46px; line-height: 86%; /* thoáng hơn 86% */
  }
  .vision-card__mission {
    font-size: 32px;
    line-height: 86%;
    font-weight: 600;
  }

  .vision-card__body, .vision-card__body-1, .vision-card__body-2, .vision-card__body-3{
    max-width: 320px;
    font-size: 18px; line-height: 1.2; /* dễ đọc hơn */
    overflow-wrap: anywhere;           /* tránh tràn chữ */
  }

  .vision-card__body-0 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  .vision-card__body-0-title {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  .vision-card__body-0-content {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }

  .vision-card__body-0-content p {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }

  .vision-card__glow{ 
    width: 200px; height: 120px;
    margin: -20px auto -20px;
  }

  .mission-list li {
    font-size: 16px;
    text-indent: -1em;
    padding-left: 1em;
  }

  .mission-conclusion {
    height: 154px;
  }

  .vision-card__body-1 h2 {
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
  }
  
  .vision-card__body-1 .healing-list {
    gap: 16px;
    text-align: left;
    font-size: 18px;
    display: flex;
    flex-direction: column;
  }

  .healing-list {
    height: 500px;
  }

  .healing-intro {
      display: block;
    }
    
  .healing-action,
  .healing-dash {
    display: inline;
  }
  
  .healing-description {
    display: block;
  }

  .healing-action strong {
    color: #fff;
    font-weight: 500;
  }

  .future-question {
    font-size: 24px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
  }

  .future-intro {
    font-size: 18px;
    line-height: 1.2;
    text-align: center;
    color: #fff;
  }

  .future-points {
    text-align: right;
    font-size: 18px;
    height: 374px;
  }
}

/* ===== BENEFITS SECTION ===== */
:root{
  --blue:#2B66F6;
  --bg:#000;
  --card:#2C2B30;
  --muted:#86868B;
  --white:#fff;
}

.benefits{background:var(--bg);padding:80px 0;min-height:100vh}
.benefits__container{max-width:1440px;
  margin:0 auto;
  padding:0 16px}
@media (min-width:1280px){.benefits__container{padding:0}}

.benefits__title{
  font-size:64px;color:#fff;margin:0 0 32px;text-align:center;line-height:1;font-weight:500
}
@media (min-width:768px){.benefits__title{font-size:64px;margin-bottom:60px}}

.benefits__grid{display:flex;gap:8px;flex-wrap:wrap;align-items:center;justify-content:center}
@media (min-width:768px){.benefits__grid{gap:16px}}
@media (min-width:1280px){.benefits__grid{flex-wrap:nowrap;gap:20px}}

.benefits__col{display:flex;flex-direction:column;gap:8px;order:2}
@media (min-width:768px){
  .benefits__col{flex-direction:row;justify-content:space-between;gap:24px}
}
@media (min-width:1280px){
  .benefits__col{flex-direction:column;order:initial}
}
.benefits__col--left{order:2}
@media (min-width:768px){.benefits__col--left{order:1}}
.benefits__col--right{order:3}
@media (min-width:768px){.benefits__col--right{order:2}}
@media (min-width:1280px){.benefits__col--right{order:3}}

.benefits__center{
  max-width:432px;height:max-content;background:rgba(0, 88, 214, 1);
  border-radius:32px;position:relative;flex-shrink:0;order:1;margin:0
}
@media (min-width:768px){
  .benefits__center{height:632px;border-radius:32px;order:3}
}
@media (min-width:1280px){.benefits__center{order:2}}

.benefits__center-text{padding:24px 32px 0;margin-bottom:24px}
@media (min-width:768px){.benefits__center-text{padding:52px 32px 0;}}
.benefits__center-title{color:#fff;font-weight:600;font-size:24px;line-height:1.2;text-align:center;margin:0 0 8px}
@media (min-width:768px){.benefits__center-title{font-size:48px;text-align:left}}
.benefits__center-desc{color:#fff;font-size:20px;line-height:1.2;text-align:center;margin:0;font-weight: 500;}
@media (min-width:768px){.benefits__center-desc{font-size:20px;text-align:left}}

.benefits__phone{
  height:auto;
  width:auto;
  object-fit:contain;
  position:relative;
  padding-top: 36px;
  padding-left: 32px;
  border-right-width: 32px;
  padding-right: 32px;
}
@media (min-width:768px){
  .benefits__phone{position:absolute;bottom:0;left:50%;transform:translateX(-50%);padding:0}
}

/* ===== Benefit Cards ===== */
.benefit-card{width:360px;height:304px;background:var(--card);border-radius:32px}
@media (min-width:768px){.benefit-card{height:304px;border-radius:32px}}
.benefit-card__inner{display:flex;flex-direction:column;justify-content:center;padding:32px}
.benefit-card__icon{
  width:40px;height:40px;background:var(--blue);border-radius:10px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;flex-shrink:0
}
@media (min-width:768px){.benefit-card__icon{width:80px;height:80px;border-radius:24px;margin-bottom:40px}}
.benefit-card__title{color:#fff;font-weight:600;font-size:32px;line-height:1.2;margin:0 0 6px}
@media (min-width:768px){.benefit-card__title{font-size:32px}}
.benefit-card__desc{color:var(--muted);font-size:20px;line-height:1.2;font-weight:500;margin:0; width: 296px; height: 48px;}

/* ===== MOBILE CAROUSEL ===== */
.benefits__carousel{display:none}
@media (max-width:767px){
  .benefits {
    padding: 80px 32px 0; 
  }
  .benefits__container {
    padding: 0;
    max-width: 100%;
  }
  .benefits__grid {
    width:100%;
    padding: 0px;
  }
  .benefits__center-desc {
    font-size:18px;
    line-height: 1.2;
    font-weight: 500;
    margin: 0;
    width: 286px;
    height: 44px;
  }
  .benefits__title {
    font-size: 32px;
    font-weight: 500;
  }
 .benefits__center {
    border-radius: 24px;
    width: 100%;
    max-width: 100%;
    margin: 0; /* Không margin để full width */
  }
  .benefits__phone {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0 !important; /* Reset padding */
    margin: 0 auto !important;
    width: 100%;
    height: auto;
  }

   .benefits__phone svg {
    width: 254px;
    height: 350px;
    object-fit: contain;
    display: block;
    margin: 0 auto;
  }
  /* Ẩn 2 cột – giữ center + carousel */
  .benefits__col{display:none}
  .benefits__carousel{
    display:block;
    position:relative;
    margin-top:60px;
    padding-bottom:56px; /* chừa chỗ cho dots + arrows */
  }

  .benefits__track{
    display:flex; gap:20px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 0px 8px; scroll-padding-left:24px;
  }
  .benefits__track::-webkit-scrollbar{display:none}

  .benefit-card__desc {
    width: 200px;
    font-size: 18px;
  }

  /* Kích thước card mobile + snap */
  .benefit-card{width:264px;height:280px;border-radius:24px;flex:0 0 auto;scroll-snap-align:start}
  .benefit-card__inner{padding:32px}
  .benefit-card__icon{width:48px;height:48px;border-radius:14px;margin-bottom:16px}
  .benefit-card__title{font-size:20px; font-weight: 600; line-height: 1.2; margin-top: 32px;}

  /* Dots bên trái */
  .benefits__dots{
    position:absolute; left:120px; bottom:20px;
    display:flex; align-items:center; gap:10px;
  }
  .benefits__dots button{
    width:8px; height:8px; border-radius:50%;
    background:#2e2e33; opacity:.6; border:0; padding:0;
  }
  .benefits__dots button.is-active{
    background:#2B66F6; opacity:1;
  }

  /* Arrows bên phải */
  .benefits__arrows{
    position:absolute; right:24px; bottom:4px;
    display:flex; gap:12px;
  }
.benefits__arrow {
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  background: transparent; /* Thay đổi từ #1c1c20 */
  border: 0; 
  color: #fff;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px; 
  line-height: 1; 
  padding: 0; 
  margin: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.benefits__arrow--prev {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Enable.svg');
}

.benefits__arrow--next {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Enable.svg');
}

.benefits__arrow--prev:hover {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Hover.svg');
}

.benefits__arrow--next:hover {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Hover.svg');
}

.benefits__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.benefits__arrow--prev:disabled {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Disable.svg');
}

.benefits__arrow--next:disabled {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Disable.svg');
}

/* Ẩn text arrows trong benefits */
.benefits__arrow::before {
  display: none;
}
}
@media (max-width:767px){
  .benefits__arrows, .benefits__dots{ z-index: 2; } /* nổi trên track */
  .benefits__track{ position: relative; z-index: 1; }
}
@media (max-width: 767px){
  .benefit-card__icon{ width:48px; height:48px; }
  .benefit-card__icon svg{ width:24px; height:24px; display:block; }
}

/* Desktop / tablet */
@media (min-width: 768px){
  .benefit-card__icon{ width:80px; height:80px; border-radius:24px; }
  .benefit-card__icon svg{ width:40px; height:40px; display:block; }
}

/* Nếu muốn icon nhận màu theo CSS thay vì fill cứng trong SVG */
.benefit-card__icon{ color:#fff; }
.benefit-card__icon svg [fill]:not([fill="none"]){ fill: currentColor; }

/* ===== DOWNLOAD SECTION ===== */
.download {
  background: #000;
  position: relative;
  z-index: 10;
}

.download__container {
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 70px;
}
@media (max-width: 767px) {
  .download__container { padding: 0 16px; }
}

.download__title {
  font-size: 32px;
  color: #fff;
  margin-top: 100px;
  margin-bottom: 32px;
  line-height: 1.2;
  text-align: center;
  font-weight: 500;
}
@media (min-width: 768px) {
  .download__title {
    font-size: 64px;
    line-height: 1;
  }
}

.download__title-br {
  display: block;
}
@media (min-width: 768px) {
  .download__title-br { display: none; }
}

.download__content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.download__glass {
  display: flex;
  justify-content: center;
  margin-bottom: 60px;
}

.download__glass-btn {
  width: 100%;
  max-width: 334px;
  height: 60px;
  background: rgba(255, 255, 255, 0.05);
  border: 0.5px solid rgba(255, 255, 255, 0.1);
  border-radius: 30px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 19px 32px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.download__glass-btn:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.2);
}

.download__video-icon {
  width: 24px;
  height: 24px;
  color: rgba(255, 255, 255, 0.6);
  flex-shrink: 0;
}

.download__glass-text {
  font-size: 18px;
  color: rgba(255, 255, 255, 0.6);
  line-height: 1;
  margin: 0;
}

.download__buttons {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 40px;
}
@media (min-width: 768px) {
  .download__buttons { 
    flex-direction: row;
    margin-top: 80px;
  }
}
@media (max-width: 767px) {
  .download__buttons {
    display: none;
  }
}

.download__btn {
  width: 100%;
  max-width: 300px;
  height: fit-content;
  padding: 16px 44px;
  border-radius: 30px;
  border: 1px solid #0058D6;
  background: transparent;
  color: #fff;
  text-decoration: none;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}
@media (min-width: 768px) {
  .download__btn { width: 200px; }
}
.download__btn:hover {
  background: rgba(0, 88, 214, 1);
  color: #fff !important;
  text-decoration: none;
}

.download__btn:hover .download__btn-text {
  color: #fff !important;
}

.download__btn:hover .download__btn-icon {
  color: #fff !important;
}

.download__btn:hover .download__btn-icon svg {
  fill: #fff !important;
}

.download__btn-content {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.download__btn-icon {
  width: 23px;
  height: 28px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.download__btn-icon svg {
  width: 100%;
  height: 100%;
}

.download__btn-text {
  line-height: 16px;
  font-weight: 700;
  text-transform: uppercase;
}

/* ===== FEATURES SECTION ===== */
/* ===== Container + title ===== */
.features{background:#000;padding-top:100px; min-height:100vh}
.features__container {
  max-width: 1200px; 
  margin: 0 auto;
  padding: 0 16px;
}
@media (min-width: 1280px) {
  .features__container {
    padding: 0;  /* Giống benefits */
  }
}

.features__title{margin:0 0 60px;color:#fff;font-weight:500;text-align:left;font-size:64px}
@media (min-width:768px){.features__title{font-size:64px}}

/* ===== 3-column layout: [prev] [panel] [next] ===== */
.fx-layout{
  position: relative;
  align-items:center;
  justify-content:center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap:16px;
}

/* ===== arrows OUTSIDE ===== */
.fx-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  background: transparent; /* Thay đổi từ #1c1c20 */
  border: 0; 
  color: #fff;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px; 
  line-height: 1; 
  padding: 0; 
  margin: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.fx-arrow--prev {
  left: -60px;
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Enable.svg');
}

.fx-arrow--next {
  right: -60px;
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Enable.svg');
}

.fx-arrow--prev:hover {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Hover.svg');
}

.fx-arrow--next:hover {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Hover.svg');
}

.fx-arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.fx-arrow--prev:disabled {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Disable.svg');
}

.fx-arrow--next:disabled {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Disable.svg');
}

/* Mobile arrows - features__arrow */
.features__arrow {
  width: 40px; 
  height: 40px; 
  border-radius: 50%;
  background: transparent; /* Thay đổi từ #1c1c20 */
  border: 0; 
  color: #fff;
  display: flex; 
  align-items: center; 
  justify-content: center; 
  font-size: 20px; 
  line-height: 1; 
  padding: 0; 
  margin: 0;
  cursor: pointer;
  transition: all 0.3s ease;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.features__arrow--prev {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Enable.svg');
}

.features__arrow--next {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Enable.svg');
}

.features__arrow--prev:hover {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Hover.svg');
}

.features__arrow--next:hover {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Hover.svg');
}

.features__arrow:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

.features__arrow--prev:disabled {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Left%20Disable.svg');
}

.features__arrow--next:disabled {
  background-image: url('https://s3.chocho.global/chocho/landing-pages/Right%20Disable.svg');
}

/* Ẩn text arrows (❮ và ❯) */
.fx-arrow::before,
.features__arrow::before {
  display: none;
}

@media (max-width: 767px) {
  .fx-layout {
    display: none; /* Hide desktop layout on mobile */
  }
  .fx-arrow {
    width: 34px;
    height: 34px;
    font-size: 18px;
  }
  
  .fx-arrow--prev {
    left: -50px; /* Điều chỉnh cho mobile */
  }
  
  .fx-arrow--next {
    right: -50px; /* Điều chỉnh cho mobile */
  }
}

/* ===== panel INSIDE (vignette + bo góc) ===== */
.fx-panel{
  position: relative;
  height: 632px;
  border-radius: 24px;
  overflow: hidden;
  background: url('https://s3.chocho.global/chocho/landing-pages/bg-feature.png') no-repeat center;
  max-width: 1200px; /* Giới hạn chiều rộng tối đa */
  width: 100%;
}
@media (min-width:992px){.fx-panel{height:632px;}}
@media (max-width:767px){.fx-panel{height:auto;min-height:440px}}

/* ===== Mobile Carousel ===== */
.features__carousel{display:none}

@media (max-width:767px){
  .features__title {
    font-size: 32px;
    font-weight: 500;
    text-align: left;
    margin-bottom: 16px;
    padding-left: 15px
  }
  
  /* Hide desktop layout */
  .fx-layout{display:none}
  
  /* Show mobile carousel */
  .features__carousel{
    display:block;
    position:relative;
    margin-top:40px;
    padding-bottom:56px; /* chừa chỗ cho dots + arrows */
  }

  .features__track{
    display:flex; gap:16px;
    overflow-x:auto; scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    padding:0 15px 8px; scroll-padding-left:24px;
  }
  .features__track::-webkit-scrollbar{display:none}

  /* Feature cards for mobile - mô phỏng app interface */
  .feature-card{
    width:264px;height:512px;border-radius:24px;flex:0 0 auto;scroll-snap-align:start;
    position: relative;
    overflow: hidden;
    background: #000;
  }
  
  .feature-card__image{
    position: absolute;
    top: 0;
    left: 0;
    width: 264px;
    height: 348px;
    object-fit: cover;
    z-index: 1;
  }
  
  .feature-card__overlay{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to bottom, rgba(0,0,0,0.3) 0%, rgba(0,0,0,0.7) 100%);
    z-index: 2;
  }
  
.feature-card__content{
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.4) 50%, transparent 100%);
  padding: 0px 16px;
  z-index: 2;
  width: 264px;
}

.feature-card__title{
  color: #fff;
  font-weight: 600;
  font-size: 24px;
  line-height: 1.2;
  margin: 0 0 8px 0;
  width: 232px;
  height: 44px;
}

.feature-card__desc{
  color: rgba(134, 134, 139, 0.6);
  font-size: 18px;
  line-height: 1.2;
  padding-top: 5px;
  font-weight: 500;
  width: 232px;
  height: 88px;
}
  
  .feature-card__user{
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
  }
  
  .feature-card__avatar{
    width: 40px;
    height: 40px;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255,255,255,0.3);
  }
  
  .feature-card__username{
    color: #fff;
    font-weight: 600;
    font-size: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  
  .feature-card__verified{
    width: 16px;
    height: 16px;
    background: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 10px;
    font-weight: bold;
  }
  
  .feature-card__caption{
    color: #fff;
    font-size: 16px;
    line-height: 1.4;
    margin-bottom: auto;
    padding-top: 20px;
  }
  
  .feature-card__interactions{
    position: absolute;
    right: 20px;
    bottom: 120px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    align-items: center;
  }
  
  .feature-card__interaction{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: #fff;
    text-decoration: none;
  }
  
  .feature-card__icon{
    width: 32px;
    height: 32px;
    background: rgba(255,255,255,0.2);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
  }
  
  .feature-card__count{
    font-size: 12px;
    font-weight: 600;
  }
  
  .feature-card__nav{
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0,0,0,0.8);
    padding: 12px 20px;
    display: flex;
    justify-content: space-around;
    align-items: center;
  }
  
  .feature-card__nav-item{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    color: rgba(255,255,255,0.6);
    font-size: 10px;
    text-decoration: none;
  }
  
  .feature-card__nav-item.active{
    color: #fff;
  }
  
  .feature-card__nav-plus{
    width: 40px;
    height: 40px;
    background: #007AFF;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 20px;
    font-weight: bold;
  }

  /* Dots bên trái */
  .features__dots{
    position:absolute; left:120px; bottom:0px;
    display:flex; align-items:center; gap:10px;
  }
  .features__dots button{
    width:8px; height:8px; border-radius:50%;
    background:#2e2e33; opacity:.6; border:0; padding:0;
  }
  .features__dots button.is-active{
    background:#2B66F6; opacity:1;
  }

  /* Arrows bên phải */
  .features__arrows{
    position:absolute; right:24px; bottom:-15px;
    display:flex; gap:12px;
  }
  .features__arrow:disabled{
    opacity:.35;
  }
}

@media (max-width:767px){
  .features__arrows, .features__dots{ z-index: 2; }
  .features__track{ position: relative; z-index: 1; }
}

/* swiper full panel */
.fx-slider{position:relative;width:100%;height:100%}

/* content inside slide */
.fx-content{
  height:100%;width:100%;
  padding:47px 100px;
  display:flex;align-items:center;justify-content:space-between;gap:24px;
}
@media (min-width:992px){.fx-content{padding:47px 100px;gap:120px}}
@media (max-width:767px){
  .fx-content{flex-direction:column;justify-content:center;text-align:center;gap:20px;padding:28px 80px}
}

/* text */
.fx-text{z-index:1;max-width:552px}
.fx-h3{margin:0 0 10px;color:#fff;font-weight:600;line-height:1.15;font-size:26px}
.fx-desc{margin:0;color:rgba(255,255,255,.7);font-size:14px;line-height:1.5}
@media (min-width:992px){.fx-h3{font-size:62px}.fx-desc{font-size:24px}}

/* phone image dạt về mép phải, “lọt” bo góc */
.fx-phone{position:relative;flex:0 0 auto}
.fx-phone img{
  width:248px;height:538px;object-fit:cover;display:block;
  transform: translateX(8px); /* hơi lấn ra mép phải */
  border-radius:24px; /* giúp viền ăn theo bo góc panel */
}
@media (min-width:992px){.fx-phone img{width:240px;height:520px;transform:translateX(12px)}}
@media (max-width:767px){.fx-phone img{width:200px;height:430px;transform:none;margin:0 auto}}

/* dots INSIDE panel, giữa phía dưới */
.fx-dots.swiper-pagination-bullets{
  position:absolute;left:50%;bottom:16px;transform:translateX(-50%);z-index:5
}
.fx-dots .swiper-pagination-bullet{
  width:8px;height:8px;border-radius:999px;background:rgba(255,255,255,.35);opacity:1;margin:0 5px !important
}
.fx-dots .swiper-pagination-bullet-active{background:#2B66F6}

/* ===== CONTACT SECTION ===== */
.contact__container {
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
}

.contact__image {
  width: 100%;
  display: block;
}

.contact__image-img {
  width: 100vw;
  height: 345px;
  object-fit: cover;
}

@media (max-width: 767px) {
  .contact__image {
    display: none;
  }
}

/* ===== MOBILE DOWNLOAD BUTTON ===== */
.mobile-download {
  display: none;
  width: 100%;
  align-items: center;
  justify-content: center;
  margin-top: 40px;
}

.mobile-download__btn {
  display: inline-flex;
  border-radius: 100px;
  background: var(--cta); 
  border: 1px solid var(--cta-border);
  color: #fff; 
  font-weight: 600; 
  text-decoration: none; 
  font-size: 15px;
  line-height: 1.2;
  letter-spacing: 0px;
  height: 32px;
  width: 138px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  text-align: center;
  transition: all 0.3s ease;
}

.mobile-download__btn:hover{ 
  background: var(--cta-hover); 
  color: #fff;
  text-decoration: none;
}

.mobile-download__text {
  font-weight: 600;
  font-size: 15px;
  line-height: 1.2;
}

/* Show mobile download on mobile */
@media (max-width: 767px) {
  .mobile-download {
    display: flex;
  }
}

/* Hide mobile download on desktop */
@media (min-width: 768px) {
  .mobile-download {
    display: none;
  }
}

/* ===== CHOCHO TEXT SECTION ===== */
.chocho-text {
  background: #000;
  padding: 50px 0;
  display: block; /* Hiện trên mobile */
}
@media (min-width: 768px) {
  .chocho-text { display: none; } /* Ẩn trên desktop/laptop */
}

.chocho-text__container {
  width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chocho-text__svg {
  width: 100vw;
  height: 163px;
  display: block;
}

.footer {
  background: #000 !important;
  padding: 32px 16px 32px 16px !important;
}
@media (min-width: 768px) {
  .footer {
    padding: 60px 240px 32px 240px !important;
  }
}

.footer__container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
}
@media (min-width: 768px) {
  .footer__container {
    flex-direction: row;
  }
}

.footer__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.15em;
  color: #fff;
  margin-bottom: 24px;
  order: 1;
  text-transform: lowercase;
}
@media (min-width: 768px) {
  .footer__title {
    margin-bottom: 0;
  }
}

.footer__contact {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  order: 3;
  margin-bottom: 12px;
  margin: 0;
}
@media (min-width: 768px) {
  .footer__contact {
    order: 2;
    margin-bottom: 0;
  }
}

.footer__terms {
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);
  order: 4;
  margin: 0;
}
@media (min-width: 768px) {
  .footer__terms {
    order: 3;
  }
}

.footer__social {
  display: flex;
  gap: 8px;
  order: 2;
  margin-bottom: 24px;
  list-style: none;
  padding: 0;
  margin: 0 0 24px 0;
}
@media (min-width: 768px) {
  .footer__social {
    order: 4;
    margin-bottom: 0;
  }
}

.footer__social li {
  display: flex;
  align-items: center;
  justify-content: center;
}

.footer__social svg {
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: opacity 0.3s ease;
}

.footer__social svg:hover {
  opacity: 0.8;
}


/* Kích thước & layout cho slider */
.features__slider {
  position: relative;
  overflow: hidden;
  min-height: 100vh; /* giữ vibe full-screen */
}

/* Mỗi slide full area, canh giữa nội dung */
.swiper-slide {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Gỡ style cũ nếu từng dùng absolute/opacity cho item */
.features__item,
.features__item--active { all: unset; }

/* Pagination (dots) */
.features__pagination.swiper-pagination-bullets {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
}
.features__pagination .swiper-pagination-bullet {
  width: 12px; height: 12px; border-radius: 50%;
  background: rgba(255,255,255,0.3); opacity: 1;
  margin: 0 6px !important;
}
.features__pagination .swiper-pagination-bullet:hover {
  background: rgba(255,255,255,0.6);
}
.features__pagination .swiper-pagination-bullet-active {
  background: #007AFF;
}

/* Arrows */
.features__nav-btn {
  color: #fff;
  --swiper-navigation-size: 28px;
}
.swiper-button-prev, .swiper-button-next {
  width: 44px; height: 44px; border-radius: 9999px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.1);
}
.swiper-button-prev:hover, .swiper-button-next:hover {
  background: rgba(255,255,255,0.16);
}

/* Cuộn mượt + tự trừ chiều cao header khi nhảy tới anchor */
html{
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h-desktop) - 35px);
}
@media (max-width: 767px){
  html{ scroll-padding-top: calc(var(--header-h-mobile) - 12px); }
}

/* Khi mở menu mobile, khóa cuộn */
.no-scroll{ overflow: hidden; }

/* Overlay mặc định ẩn */
.overlay{ display:none; position:fixed; inset:0; background:rgba(0,0,0,.5); z-index:1000; }
.overlay.show{ display:block !important; }

/* Mobile menu show (giữ style bạn đang dùng) */
.mobile-menu.show{ display:flex !important; }

.version-number {
  font-size: 16px;
  font-weight: 500;
  color: rgb(255, 255, 255);
}

.nav-desktop a.is-active,
.mobile-menu a.is-active { color:#fff; font-weight:700; }




.ha-auth{
  /* ===== Design tokens bạn đưa ===== */
  --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;
}


/* ===== OUR STORY SECTION ===== */
.our-story {
  position: relative;
  width: 100%;
  min-height: 100vh;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
}

.our-story__inner {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
}

.our-story__eyebrow {
  margin: 0;
  color: #0058D6;
  font-weight: 700;
  font-size: 32px;
  line-height: 1.2;
}

.our-story__title {
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 86%;
  font-size: 92px;
}

.our-story__body {
  margin: 0;
  color: #86868B;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
}

.our-story__body strong {
  color: #fff;
  font-weight: 700;
}

/* --- Read more pill button --- */
.our-story__btn.btn-read-more{
  /* size */
  --h: 44px;
  height: var(--h);
  padding: 7px 61.5px;
  border-radius: 999px;

  /* type */
  color:#fff;
  font-weight:600;
  font-size:16px;
  letter-spacing:.2px;

  /* FILL (Figma: #171717 20% + White 5%) */
  background:
    /* White 5% overlay */
    linear-gradient(0deg, rgba(255,255,255,.05), rgba(255,255,255,.05)),
    /* base 171717 @20% */
    rgba(23,23,23,.20);

  /* Glass effect */
  backdrop-filter: saturate(140%) blur(4px);

  /* hairline base (fallback if gradient border not supported) */
  border: .5px solid rgba(255,255,255,.18);

  /* depth */
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.10),
    inset 0 -10px 18px rgba(0,0,0,.55),
    0 12px 28px rgba(0,0,0,.45);

  position: relative;
  isolation:isolate;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease;
}

/* STROKE 0.5px — Linear gradient White 100% → White 53% @20% */
.our-story__btn.btn-read-more::after{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  padding:.5px;                         /* stroke weight: 0.5px */
  background:
    linear-gradient(180deg,
      rgba(255,255,255,1) 0%,
      rgba(255,255,255,.53) 100%);
  opacity:.20;                           /* stroke opacity 20% */
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
          mask-composite: exclude;       /* keep only the ring */
  pointer-events:none;
}

/* subtle highlight on top like pill gloss */
.our-story__btn.btn-read-more::before{
  content:"";
  position:absolute; inset:0;
  border-radius:inherit;
  background: linear-gradient(180deg, rgba(255,255,255,.16), rgba(255,255,255,0) 40%);
  mix-blend-mode:screen;
  pointer-events:none;
}

/* hover / active / focus */
.our-story__btn.btn-read-more:hover{
  transform: translateY(-1px);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.14),
    inset 0 -12px 20px rgba(0,0,0,.55),
    0 16px 32px rgba(0,0,0,.55);
}
.our-story__btn.btn-read-more:active{
  transform: translateY(0);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.08),
    inset 0 -6px 12px rgba(0,0,0,.6),
    0 8px 18px rgba(0,0,0,.45);
}
.our-story__btn.btn-read-more:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.22),
    0 0 0 6px rgba(0,88,214,.35);
}



/* Mobile responsive */
@media (max-width: 767px) {
  .our-story {
    padding: 40px 16px;
    min-height: 80vh;
  }

  .our-story__inner {
    gap: 16px;
    padding: 0 16px;
  }

  .our-story__eyebrow {
    font-size: 16px;
  }

  .our-story__title {
    font-size: 32px;
  }

  .our-story__body {
    font-size: 16px;
    text-align: center;
    max-width: 100%;
  }
}


/* ===== STORIES POPUP ===== */
.stories-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  box-sizing: border-box;
}

.stories-popup__overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.stories-popup__content {
  position: relative;
  background: #1a1a1a;
  border-radius: 16px;
  max-width: 800px;
  width: 100%;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.1);
  overflow: hidden;
}

.stories-popup__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 24px 32px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  flex-shrink: 0;
}

.stories-popup__title {
  margin: 0;
  color: #fff;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.2;
}

.stories-popup__close {
  background: none;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  padding: 8px;
  border-radius: 8px;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.stories-popup__close:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.1);
}

.stories-popup__body {
  padding: 32px;
  overflow-y: auto;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.3) transparent;
}

.stories-popup__body::-webkit-scrollbar {
  width: 6px;
}

.stories-popup__body::-webkit-scrollbar-track {
  background: transparent;
}

.stories-popup__body::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.3);
  border-radius: 3px;
}

.stories-popup__body::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.5);
}

.stories-pa {
  color: rgba(255, 255, 255, 0.8);
  font-size: 16px;
  line-height: 1.6;
  margin: 0 0 20px 0;
  font-weight: 400;
}

.stories-pa:last-child {
  margin-bottom: 0;
}

.stories-pa strong {
  color: #fff;
  font-weight: 600;
}

/* Mobile responsive */
@media (max-width: 767px) {
  .stories-popup {
    padding: 16px;
  }
  
  .stories-popup__content {
    max-height: 85vh;
    border-radius: 12px;
  }
  
  .stories-popup__header {
    padding: 20px 24px;
  }
  
  .stories-popup__title {
    font-size: 20px;
  }
  
  .stories-popup__body {
    padding: 24px;
  }
  
  .stories-pa {
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 16px;
  }
}

/* Tablet */
@media (min-width: 768px) and (max-width: 1023px) {
  .stories-popup__content {
    max-width: 700px;
  }
  
  .stories-popup__title {
    font-size: 22px;
  }
  
  .stories-pa {
    font-size: 16px;
  }
}

/* Animation */
.stories-popup {
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.stories-popup[style*="block"] {
  opacity: 1;
  visibility: visible;
}

.stories-popup__content {
  transform: scale(0.9) translateY(20px);
  transition: transform 0.3s ease;
}

.stories-popup[style*="block"] .stories-popup__content {
  transform: scale(1) translateY(0);
}

/* Overlay mờ nền (nằm dưới modal) */
.story-overlay{
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(2px);
  z-index: 1000;           /* overlay dưới modal */
}

/* Initial state cho popup */
#stories_popup .vision-card__inner{
  box-shadow: none;
  transition: box-shadow 0.3s ease, border-color 0.3s ease;
}

/* Khi mở: thêm class .is-open để biến thành modal fixed */
#stories_popup.is-open {
  position: fixed;
  top: 50%; /* Thay vì inset: 0 */
  left: 50%; /* Thay vì inset: 0 */
  transform: translate(-50%, -50%); /* Căn giữa hoàn hảo */ 
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 0px !important;
  z-index: 1002;
  width: 1200px;
  max-height: min(90dvh, 920px);
  background: #000;
  border: 1px solid rgba(181, 217, 255, .3);
  border-radius: 24px;
  box-shadow: inset 0 0 12px #B5D9FF !important;
}

/* Panel bên trong (tái dùng style vision-card__inner, thêm khung modal) */
#stories_popup.is-open .vision-card__inner{
  position: relative;
  /* background: #000; */
  /* border: 1px solid rgba(181, 217, 255, .3); */
  /* border-radius: 24px; */
  /* box-shadow: inset 0 0 12px #B5D9FF !important; */
  width: 1200px;
  max-height: min(80vh, 730px);
  /* padding: clamp(48px, 8vw, 100px) 0; */
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  display: flex !important;
  flex-direction: column;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#stories_popup.is-open .vision-card__inner::before,
#stories_popup.is-open .vision-card__inner::after{
  content: "";
  display: block;
  flex: 0 0 auto;
  position: sticky;
  z-index: 1;           /* dưới nút close, trên nền */
  background: transparent;
  pointer-events: none; /* không chặn click */
}

#stories_popup.is-open .vision-card__title{
  font-size: 80px;
  line-height: 1;
  margin:0; 
  color:#fff;
  font-weight:600;
  line-height:1.00;
  height: 176px;
  width: 100%;
}

#stories_popup.is-open .vision-card__title strong{
  font-size: 92px;
}


#stories_popup.is-open .btn-star{
  position: relative;
  width: 210px;
  height: 68.6px;
  margin: 24px auto -30px;
  pointer-events: none;
}

#stories_popup.is-open .btn-star video{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  mix-blend-mode: screen;
}

#stories_popup.is-open .vision-card__body{
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  margin-top: -24px;
  display: flex;
  flex-direction: column;
  gap: 30px;
}
#stories_popup.is-open .vision-card__body strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body .vision-card__body-content {
  text-align: center;
}

/* Đảm bảo content bên trong có thể scroll */
#stories_popup.is-open .vision-card__inner > * {
    flex-shrink: 0; /* Ngăn content bị shrink */
}

#stories_popup.is-open .vision-card__body-1 {
  margin-top: 60px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#stories_popup.is-open .vision-card__body-1 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

#stories_popup.is-open .vision-card__body-1 strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body-1 p {
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-2 {
  margin-top: 60px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
}

#stories_popup.is-open .vision-card__body-2 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

#stories_popup.is-open .vision-card__body-2 strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body-2 p {
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-3 {
  margin-top: 60px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

#stories_popup.is-open .vision-card__body-3 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

.vision-card__body-3 .today-list {
  list-style-type: disc;
  padding: 0;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  text-align: left;
}

.vision-card__body-3 .today-list li {
  color: #86868B;
  font-weight: 500;
}

#stories_popup.is-open .vision-card__body-4 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

#stories_popup.is-open .vision-card__body-4 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

.vision-card__body-4 .today-list {
  padding: 0;
  max-width: 800px;
  margin-left: -25px;
  margin-right: auto;
  text-align: left;
}


.vision-card__body-4 .today-list li {
  color: #86868B;
  font-weight: 500;
}

#stories_popup.is-open .vision-card__body-4 strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body-5 {
  margin-top: 60px;
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

#stories_popup.is-open .vision-card__body-5 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

#stories_popup.is-open .vision-card__body-5 strong {
  color: #fff;
  font-weight: 700;
}
.vision-card__body-5 .reasons-list {
    list-style: decimal;
    counter-reset: reason-counter;
    list-style-position: outside; 
    padding: 0;
    margin: 0;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

.vision-card__body-5 .reasons-list li::marker{
  font-weight: 700;                /* số đậm */
  color: #fff;                     /* màu số */
  font-size: 24px;                 /* kích thước số ngang h3 */
}

.vision-card__body-5 .reason-item h3 {
  font-size: 24px;
  font-weight: 700;
  color: #fff;
}

.vision-card__body-5 .reason-item p {
  font-size: 24px;
  font-weight: 500;
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-6 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

#stories_popup.is-open .vision-card__body-6 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

#stories_popup.is-open .vision-card__body-6 strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body-6 p {
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-7 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

#stories_popup.is-open .vision-card__body-7 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

#stories_popup.is-open .vision-card__body-7 strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body-7 p {
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-7 .vision-quote {
  font-size: 24px;
  font-weight: 500;
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-7 .vision-quote { text-align:center; }

/* Khối chứa 2 dòng – phải là block full width và canh giữa */
.vision-line{
  display:block;
  width:360px;
  text-align:center;
  margin-left:-20px;
}

/* Giữ cụm “But it was born” không bị tách từ */
.nowrap{
  white-space:nowrap;
  display:inline-block;
}

#stories_popup.is-open .vision-card__body-7 .vision-quote .nowrap {
  white-space: nowrap;        /* không cho xuống dòng */
  display: inline-block;      /* giữ khối gọn để căn giữa đẹp */
}

#stories_popup.is-open .vision-card__body-8 {
  font-size: 24px;
  line-height: 1.2;
  font-weight: 500;
  max-width: 800px;
  text-align: center;
  color: #86868B;
  display: flex;
  flex-direction: column;
  gap: 30px;
  margin-top: 60px;
}

#stories_popup.is-open .vision-card__body-8 h2 {
  color: #fff;
  font-weight: 700;
  font-size: 24px;
}

#stories_popup.is-open .vision-card__body-8 strong {
  color: #fff;
  font-weight: 700;
}

#stories_popup.is-open .vision-card__body-8 p {
  color: #86868B;
}

#stories_popup.is-open .vision-card__body-8 .vision-quote {
  font-size: 24px;
  font-weight: 500;
  color: #86868B;
}

/* Khóa scroll nền khi mở popup */
.no-scroll{ overflow: hidden; }
/* Mobile: bắt buộc cuộn phần body khi dài */
@media (max-width: 767px){
  #stories_popup.is-open {
    width: 366px;
    max-height: 72vh; /* Giảm height trên mobile */
    border-radius: 16px;
    box-shadow: inset 0 0 12px #B5D9FF !important;
    padding-top: 50px;
    padding-bottom: 50px;
    padding-left: 0px;
    padding-right: 0px;
  }
  #stories_popup.is-open .vision-card__body{
    max-width: 320px;
    font-size: 18px; line-height: 1.2; /* dễ đọc hơn */
    overflow-wrap: anywhere;           /* tránh tràn chữ */
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__inner {
    width: 366px;
    max-height: 59vh; /* Giảm height trên mobile */
    overflow-y: auto !important;
    overflow-x: hidden;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  #stories_popup.is-open .vision-card__eyebrow{
    font-size: 24px;
    line-height: 1;
    margin:0; 
    color:#0058D6;
    font-weight:700;
    line-height:1.2;
    height: 29px;
    width: 100%;
  }

  #stories_popup.is-open .vision-card__title{
    font-size: 28px;
    line-height: 1;
    margin:0; 
    color:#fff;
    font-weight:600;
    line-height:1.00;
    height: 62px;
    width: 100%;
  }

  #stories_popup.is-open .vision-card__title strong{
    font-size: 32px;
  }

  #stories_popup.is-open .vision-card__body{
    font-size: 18px;
    text-align: center;
    max-width: 320px;
  }

  #stories_popup.is-open .vision-card__body-1 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-1 h2 {
    font-size: 18px;
    font-weight: 700;
  }

  #stories_popup.is-open .vision-card__body-1 .today-paragraph {
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-2 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-2 h2 {
    font-size: 18px;
    font-weight: 700;
  }

   #stories_popup.is-open .vision-card__body-2 .today-paragraph {
     color: #86868B;
   }

   /* Mobile: xuống dòng cho "of love –" */
   .love-break {
     display: inline;
   }

  .vision-card__body-2 .today-paragraph br {
    display: none;
  }

  .vision-card__body-2 .today-paragraph .mline {
    display: block;
  }

   
   @media (max-width: 767px) {
     .love-break {
       display: block;
       margin-top: 0;
     }
     
     .love-break strong {
       font-weight: 700;
     }
   }

  #stories_popup.is-open .vision-card__body-3 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-3 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  #stories_popup.is-open .vision-card__body-3 .today-list {
    padding-left: 20px;
  }

  #stories_popup.is-open .vision-card__body-3 .today-list li {
    color: #86868B;
    font-weight: 500;
    color: 18px;
  }

  #stories_popup.is-open .vision-card__body-4 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  #stories_popup.is-open .vision-card__body-4{
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-4 .today-list {
    padding-left: 0px;
    margin: 0;
  }

  #stories_popup.is-open .vision-card__body-4 .today-list li {
    color: #86868B;
    font-weight: 500;
    color: 18px;
  }

  #stories_popup.is-open .vision-card__body-5 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-5 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

    #stories_popup.is-open .vision-card__body-5 h3 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    line-height: 1.2;
  }


  #stories_popup.is-open .vision-card__body-5 .reasons-list {
    padding: 0;
    margin-left: 25px;  
  }

  #stories_popup.is-open .vision-card__body-5 .reasons-list li::marker{
    font-size: 18px;
  }
  
  #stories_popup.is-open .vision-card__body-5 .reasons-list p {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-6 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-6 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  #stories_popup.is-open .vision-card__body-6 .vision-quote {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-7 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-7 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  #stories_popup.is-open .vision-card__body-7 .vision-quote {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-8 {
    font-size: 18px;
    line-height: 1.2;
    font-weight: 500;
    max-width: 320px;
    text-align: center;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-8 h2 {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  #stories_popup.is-open .vision-card__body-8 .vision-quote {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }

  #stories_popup.is-open .vision-card__body-8 strong {
    font-size: 18px;
    font-weight: 700;
    color: #fff;
  }

  #stories_popup.is-open .vision-card__body-8 p {
    font-size: 18px;
    font-weight: 500;
    color: #86868B;
  }
}


.vision-card__title-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin: 0 auto;
  max-width: 100%;
}

.vision-card__title-top {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 16px;
  margin-bottom: 8px;
}

.vision-card__title-top-left h2 {
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 86%;
  font-size: 92px;
  width: auto;
  height: auto;
  margin-left: -20px;
}

.vision-card__title-top-right {
  display: flex;
  align-items: flex-end;
  margin-left: -4px;
}

.vision-card__mission {
  color: #0058D6;
  font-weight: 600;
  font-size: 64px;
  line-height: 86%;
  width: auto;
  height: auto;
}

.vision-card__title-bottom h2 {
  margin: 0;
  color: #fff;
  font-weight: 600;
  line-height: 86%;
  font-size: 92px;
  width: auto;
  height: auto;
}

/* Mobile Styles */
@media (max-width: 767px) {
  .vision-card__title-wrap {
    width: auto;
    height: auto;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .vision-card__title-top {
    flex-direction: row;
    align-items: baseline;
    gap: 6px;
    margin-bottom: 4px;
  }

  .vision-card__title-top-left h2 {
    font-size: 46px;
    line-height: 86%;
    width: auto;
    height: auto;
    padding-left: 13px;
  }

  .vision-card__mission {
    font-size: 32px;
    line-height: 86%;
  }

  .vision-card__title-bottom h2 {
    font-size: 46px;
    line-height: 86%;
    width: auto;
    height: auto;
  }

  .vision-card__close {
    top: 14px !important;
    right: 14px !important;
    width: 32px !important;
    height: 32px !important;
    z-index: 1002 !important;
    background: transparent !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-weight: 300 !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
    font-size: 18px !important;
    color: #fff !important;
    border: none !important;
    position: fixed !important;
  }
  
  .vision-card__close:hover {
    color: rgba(255, 255, 255, 0.7);
    transform: scale(1.2);
  }

  .vision-card__close:active {
    transform: scale(0.95);
  }

  .vision-card__close svg {
    width: 18px !important;
    height: 18px !important;
    color: white !important;
    fill: white !important;
  }

  #stories_popup.is-open .btn-star {
    margin: 40px auto -40px !important;
  }
}
/* ...existing code... */

.footer_copyright {
  box-sizing: border-box !important;
  padding: 16px 0 !important;
  width: 100% !important;
  margin: 0 auto !important;
  border-top: 1px solid #2C2B30 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}
.footer_copyright-text {
  color:#FFFFFF99; font-size: 16px; font-weight: 400;
}

@media (min-width: 767px) {
  .footer_copyright.only-mobile { display: none !important}
  .footer_copyright.only-desktop { display: flex !important}
}

@media (max-width: 767px) {
  .footer_copyright.only-mobile { display: block !important;
    box-sizing: border-box; height: 68px;
    padding: 10px 0px !important;
  }
  .footer_copyright.only-desktop { display: none !important}
  .footer_copyright-text { font-size: 14px !important; text-align: center;}
}