/* ============================================================
   PERDAYS Probiotic 360° - Landing page CUỘN DỌC (không scroll-snap)
   Dựng cho MOBILE trước. Khung tối đa 480px, căn giữa trên máy lớn.
   Toàn bộ ảnh đã gắn xong; danh sách ở cuối file.
   Luật [data-anh] bên dưới là hệ thống ô chờ ảnh, hiện không còn phần tử
   nào dùng - giữ lại phòng khi thêm section mới.
   ============================================================ */
:root{
  --xanh:#1E4FBF;          /* xanh thương hiệu */
  --xanh-dam:#123A94;
  --xanh-nhat:#EFF5FC;     /* nền hero */
  --xanh-pastel:#CFECFF;
  --do:#CE0410;            /* đỏ khuyến mãi */
  --do-dam:#940112;
  --vang:#F5DFA0;
  --muc:#111827;
  --xam:#5B6472;
  --vien:#E3EAF5;
  --khung:480px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
/* <button> KHÔNG tự kế thừa font -> rơi về font hệ thống, vỡ dấu tiếng Việt
   chồng tầng (Ặ, Ậ, Ữ). Ép kế thừa cho mọi control. */
button,input,textarea,select{font-family:inherit;}

html{scroll-behavior:smooth;}
body{
  background:#DDE6F3;
  color:var(--muc);
  font-family:"Montserrat",-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  -webkit-font-smoothing:antialiased;
  line-height:1.5;
  padding-bottom:78px;              /* chừa chỗ cho thanh dính đáy */
}
.wrap{max-width:var(--khung);margin:0 auto;background:#fff;overflow:hidden;}
img{max-width:100%;height:auto;display:block;}

/* ---------- Ô CHỜ ẢNH ----------
   Mọi phần tử có [data-anh] là chỗ sẽ gắn ảnh. Hiện tại vẽ khung đứt nét
   kèm TÊN FILE cần giao, để bạn biết cần tách ảnh nào. */
[data-anh]{
  position:relative;
  background:linear-gradient(135deg,#F2F6FC,#E4EDF9);
  border:1.5px dashed #9DB4D8;
  border-radius:12px;
  min-height:120px;
}
[data-anh]::after{
  content:"⬒ " attr(data-anh);
  position:absolute;left:8px;bottom:8px;
  font-size:10.5px;font-weight:600;color:#5C7BAE;
  background:rgba(255,255,255,.86);border-radius:6px;padding:3px 7px;
  pointer-events:none;
}

/* ---------- Khối chung ---------- */
.sec{padding:34px 18px;}
.tt{font-size:26px;font-weight:800;line-height:1.2;letter-spacing:-.3px;text-align:center;}
.tt .l1{display:block;font-weight:400;}
.tt .l2{display:block;font-weight:800;}
.tt .xanh{color:var(--xanh);}
.tt em{font-style:normal;color:var(--xanh);}
.tt-trang{color:#fff;}
.tt-nho{font-size:21px;font-weight:800;}

.nut{
  display:block;width:100%;border:none;border-radius:999px;
  padding:16px;font-size:17px;font-weight:800;letter-spacing:.4px;color:#fff;
  background:linear-gradient(135deg,var(--xanh-dam),var(--xanh));
  cursor:pointer;box-shadow:0 10px 24px rgba(30,79,191,.34);
  transition:transform .14s;
}
.nut:active{transform:scale(.985);}

/* ---------- 1. HERO ---------- */
/* Ảnh nền chạy theo dòng bình thường (giữ đúng tỉ lệ nhờ width/height trên thẻ
   <img>), phần chữ đặt tuyệt đối bám MÉP TRÊN. Bám mép trên nên dù ảnh cao bao
   nhiêu chữ cũng không trôi. Đo được vùng trống ở đỉnh ảnh chiếm ~36% chiều cao
   (~380px khi khung rộng 480px), thừa chỗ cho logo + tiêu đề + mô tả. */
.hero{padding:0;}
.anh-hero{position:relative;background:#F4F8FD;}
.hero-bg{width:100%;}
/* Ảnh nền đã cắt bớt 60px dải trắng ở đỉnh (960x2081 -> 960x2021), nên khoảng
   trống phía trên hoa tiết chỉ còn khoảng 48% bề ngang. Khối chữ cao sẵn ~53%
   bề ngang, vì vậy padding trên chỉ nới được chừng này; nới thêm nữa là dòng
   mô tả rơi xuống mái nhà hát Sydney. */
.hero-txt{
  position:absolute;left:0;top:0;width:100%;
  padding:40px 20px 0;text-align:center;
}
/* Cỡ chữ co theo bề ngang máy: máy 360px không bị chữ tràn xuống đè lên mây. */
.logo{width:clamp(104px,27vw,132px);margin:0 auto 18px;}
.hero h1{font-size:0;}
.hero .d1{display:block;font-size:clamp(23px,6.4vw,29px);font-weight:400;line-height:1.15;letter-spacing:-.5px;}
.hero .d2{display:block;font-size:clamp(25px,7vw,32px);font-weight:800;line-height:1.12;color:var(--xanh);margin-top:2px;}
.hero-sub{margin-top:14px;font-size:clamp(13px,3.4vw,15px);line-height:1.5;color:#2B3646;}

/* ---------- 2. KHUYẾN MÃI ----------
   Ảnh section 2 có dải VẢI ĐỎ mờ dần sang trong suốt ở đỉnh và đáy. Muốn dải
   vải rủ đè lên section 1 và section 3 thì phải làm hai việc:
     1. kéo âm hai đầu section để nó chồm sang hàng xóm
     2. nền đỏ CHỈ phủ phần ảnh đục, chừa hai dải vải trong suốt

   Số đo lấy từ chính file ảnh (960x2480, tỉ lệ cao/rộng 2,5833):
     vải trên = 229px = 9,23% chiều cao ảnh
     vải dưới = 146px = 5,89% chiều cao ảnh
   margin và padding tính % theo BỀ NGANG khung, nên phải nhân tỉ lệ:
     9,23% x 2,5833 = 23,85%      5,89% x 2,5833 = 15,21%
   Đổi ảnh khác tỉ lệ thì phải đo lại cả bốn con số này. */
.km{
  position:relative;z-index:3;padding:0;
  margin-top:-23.85%;
  margin-bottom:-15.21%;
  /* Phần chồm sang hàng xóm chỉ để trang trí, không được nuốt thao tác chạm
     của hai section bị đè. Trong section này không còn nút bấm nào. */
  pointer-events:none;
}
.km-in{position:relative;}
/* top/bottom ở đây tính % theo CHIỀU CAO .km-in, mà .km-in cao đúng bằng ảnh. */
.km-in::before{
  content:"";position:absolute;left:0;right:0;top:9.23%;bottom:5.89%;
  background:linear-gradient(180deg,#B40919 0%,#A30017 13%,#8F0018 60%,#8B0A14 100%);
}
.km-anh{position:relative;width:100%;}

/* ---------- 3. ĐỒNG HÀNH MỌI GIAI ĐOẠN + PHÙ HỢP KHI MẸ ĐANG GẶP ----------
   Ba lớp cùng nằm trong MỘT ô lưới nên chồng lên nhau, và chiều cao section
   luôn bằng lớp cao nhất. Nhờ vậy thẻ trắng có dài ra vì chữ hay vì máy hẹp
   thì section tự cao thêm, không bao giờ tràn khỏi ảnh.
   Số đo lấy từ ảnh 960x2081 (tỉ lệ cao/rộng 2,1677):
     vùng trống ở đỉnh ảnh   = 28,8% chiều cao, thừa chỗ đặt tiêu đề
     đỉnh thẻ trắng          = 56,1% chiều cao ảnh
   margin tính % theo BỀ NGANG nên phải nhân tỉ lệ: 56,1% x 2,1677 = 121,6% */
.gd{
  display:grid;grid-template-columns:minmax(0,1fr);padding:0;
  background:#FCFDFF;      /* đúng màu mép dưới ảnh, nối liền nếu thẻ dài hơn ảnh */
}
.gd>*{grid-area:1/1;align-self:start;}
.gd-bg{width:100%;}
/* Đo từ bản demo là 15,6% (tính theo bề ngang, từ ĐỈNH ẢNH), đã nhích lên 13%
   theo yêu cầu. Đừng hạ dưới 12%: dải vải section 2 đè xuống 15,21% và phần
   đuôi vải vẫn còn mờ, kéo lên quá sẽ có vệt đỏ vắt ngang dòng đầu tiêu đề. */
.gd-txt{
  z-index:2;text-align:center;
  padding:13% 14px 0;
}
/* Cỡ chữ đo từ bản demo: dòng "PROBIOTIC 360°" chiếm 86,4% bề ngang khung.
   Bản dựng trước chỉ được 65,4% nên phải phóng lên khoảng 1,32 lần. */
.gd-txt .l1{font-weight:800;font-size:clamp(30px,8.7vw,36px);line-height:1.1;}
.gd-txt .l2{font-weight:400;font-size:clamp(25px,7.4vw,30px);line-height:1.15;margin-top:6px;}
/* Montserrat rộng ngang hơn font cũ nên dòng này bị rớt chữ "SINH" xuống một
   mình. Bỏ giãn chữ và ép một dòng để gom lại trên máy 360px. */
.gd-pill{
  display:inline-block;margin-top:16px;background:#fff;color:var(--muc);
  font-size:clamp(11px,3.3vw,13px);font-weight:800;letter-spacing:0;
  border-radius:999px;padding:11px 14px;white-space:nowrap;
}
/* Đo từ bản demo là 133,7% (tính theo bề ngang, từ ĐỈNH ẢNH, tức 61,7% chiều
   cao ảnh), đã hạ xuống 139% theo yêu cầu.
   Mốc này đo bằng ĐỈNH ĐẦU MASCOT nằm trong ảnh, KHÔNG đo theo chỗ bắt đầu
   thấy màu xanh - chỗ đó đã bị dải vải section 2 đè lên nên lệch 13%.
   Đừng hạ quá 140%: thẻ cao khoảng 77% bề ngang, cộng lại sẽ vượt đáy ảnh. */
.the{
  z-index:2;
  margin:139% 14px 0;background:rgba(255,255,255,.94);border-radius:20px;
  padding:26px 15px 24px;box-shadow:0 10px 30px rgba(30,79,191,.12);
}
/* Bản demo để tiêu đề này trên MỘT dòng, chiếm 84,7% bề ngang khung. Cỡ chữ
   phải vừa đủ nhỏ để không rớt chữ "GẶP" xuống dòng riêng ở máy 390px.
   text-wrap:balance chỉ là lưới đỡ cho máy quá hẹp. */
.tt-the{font-size:clamp(15px,4.1vw,17px);font-weight:800;text-align:center;line-height:1.3;
        margin-bottom:18px;letter-spacing:-.3px;text-wrap:balance;}
.ds{list-style:none;}
.ds li{position:relative;padding:0 0 15px 36px;}
.ds li:last-child{padding-bottom:0;}
/* Ngôi sao bốn cánh xanh NHẠT như bản demo, không phải xanh thương hiệu đậm. */
.ds li::before{
  content:"";position:absolute;left:4px;top:2px;width:22px;height:22px;
  background:linear-gradient(150deg,#BFDDF7,#8FC2EE);
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
}
/* Co theo bề ngang máy: dòng dài nhất "Muốn chăm sóc hệ vi sinh đường ruột"
   phải nằm gọn một dòng như bản demo, không rớt riêng chữ "ruột". */
/* Đo trong trình duyệt ở khung 360px: chỗ trống 267px, dòng dài nhất cần 270px
   khi để 14px. Nên mức nhỏ nhất phải là 13,5px thì mới đủ chỗ. */
.ds b{display:block;font-size:clamp(13.5px,3.8vw,15.5px);font-weight:700;line-height:1.35;
       letter-spacing:-.2px;}
.ds span{display:block;font-size:14.5px;color:#3A4453;line-height:1.35;}

/* ---------- 4. CHỈ VỚI 1 VIÊN + 3 ĐIỂM KHÁC BIỆT ----------
   Lại là một nền chung, xếp chồng bằng grid như section 3.
   Số đo lấy từ bản demo, quy về % BỀ NGANG khung, tính từ ĐỈNH ẢNH
   (ảnh 960x2079, tỉ lệ cao/rộng 2,1656 -> đáy ảnh ở 216,6%):
     6,9%   tiêu đề "CHỈ VỚI"
     136,6% tiêu đề "3 ĐIỂM KHÁC BIỆT"
     150,5% đỉnh thẻ đầu tiên, mỗi thẻ cao ~17,9%, cách nhau ~2,7%
     thẻ nằm ngang từ 12,7% đến 87,1% -> lề hai bên 12,8% */
.vien{
  display:grid;grid-template-columns:minmax(0,1fr);padding:0;
  background:#6BA3E0;          /* đúng màu mép dưới ảnh, đỡ nếu chữ dài hơn ảnh */
}
.vien>*{grid-area:1/1;align-self:start;}
.v4-bg{width:100%;}
.v4-tren{z-index:2;padding:6.9% 18px 0;text-align:center;}
.vien .l1{font-size:clamp(26px,7.4vw,31px);line-height:1.15;}
.vien .l2{font-size:clamp(28px,8vw,34px);line-height:1.15;}
.vien-pill{
  display:inline-block;margin:12px 0 16px;
  background:linear-gradient(90deg,var(--xanh),#4E86E8);color:#fff;
  font-size:clamp(11.5px,3.4vw,14px);font-weight:800;border-radius:8px;padding:9px 14px;
  white-space:nowrap;
}
.vien-p{font-size:clamp(13px,3.6vw,14.5px);line-height:1.6;color:#2B3646;text-align:justify;}

.v4-duoi{z-index:2;margin-top:135%;}
/* Đo trên demo: cụm tiêu đề này rộng 57,6% khung, KHÔNG dùng cỡ 26px cứng của
   .tt vì như thế rộng tới 76% khung, to hơn demo và đẩy 3 thẻ tụt xuống quá đáy ảnh. */
.tt-kb{color:#123A94;margin-bottom:2.2%;font-size:clamp(18px,5.5vw,26px);line-height:1.2;}
.kb-ds{display:flex;flex-direction:column;margin:0 12.8%;}
/* KHÔNG dùng gap:% ở đây. Với flex CỘT, gap phần trăm quy chiếu theo CHIỀU CAO
   container, mà chiều cao này tự co theo nội dung nên phần trăm ra 0 -> ba thẻ
   dính liền nhau. margin-top phần trăm thì quy chiếu theo BỀ NGANG, đúng ý.
   3,63% của .kb-ds (rộng 74,4% khung) = 2,7% bề ngang khung, đúng như demo. */
.kb-i + .kb-i{margin-top:3.63%;}
.kb-i{
  display:flex;align-items:center;gap:2%;
  background:rgba(255,255,255,.93);border-radius:999px;
  padding:2.5% 3% 2.5% 2%;
}
/* Vòng tròn trắng ôm icon. Đo trên demo: đường kính 15,2% bề ngang khung,
   mà .kb-i chỉ rộng 74,4% khung nên quy ra 20,4% của thẻ. */
.kb-ic{
  width:20.4%;flex:0 0 auto;aspect-ratio:1;border-radius:50%;background:#fff;
  display:grid;place-items:center;
}
.kb-ic img{width:76%;height:auto;}
/* Bản demo để phần mô tả gọn trong HAI dòng. Cỡ chữ dưới đây chọn để giữ đúng
   hai dòng đó ở khung 360-480px, đừng tăng lên. */
.kb-txt b{display:block;font-size:clamp(11px,3.2vw,13.5px);font-weight:800;
          color:#1E7BC8;letter-spacing:0;}
.kb-txt span{display:block;font-size:clamp(10px,2.85vw,12.5px);line-height:1.4;
             color:#26303D;margin-top:2px;}

/* ---------- 5. TIÊU CHUẨN ----------
   Ảnh nền xếp chồng dưới nội dung như section 3 và 4, để mascot cầm cúp ở đáy
   ảnh vẫn hiện đủ. Vùng trắng ở đỉnh ảnh chiếm 140% bề ngang, thừa chỗ cho
   tiêu đề và 3 thẻ. */
.tc{
  display:grid;grid-template-columns:minmax(0,1fr);padding:0;
  background:#BFDAF4;          /* đúng màu mép dưới ảnh */
}
.tc>*{grid-area:1/1;align-self:start;}
.tc-bg{width:100%;}
.tc-in{z-index:2;padding:34px 18px 0;}
.tc .tt{margin-bottom:18px;}
.tc-ds{display:flex;flex-direction:column;gap:14px;}
.tc-i{display:flex;align-items:center;gap:12px;border-radius:18px;padding:16px;}
.xanh-nen{background:linear-gradient(135deg,#4E86E8,var(--xanh));color:#fff;}
.tc-txt{flex:1;}
.tc-txt b{display:block;font-size:clamp(16px,4.9vw,19px);font-weight:800;margin-bottom:4px;}
.tc-txt span{display:block;font-size:clamp(12.5px,3.5vw,13.5px);line-height:1.45;opacity:.96;}
.tc-huy{width:clamp(76px,23vw,100px);height:auto;flex:0 0 auto;}

/* ---------- 6. CHUYÊN GIA ----------
   Ảnh nền chỉ có nền xanh và dãy núi ở đáy, mọi chữ đều dựng bằng code.
   Xếp chồng như các section trước để dãy núi ở đáy ảnh hiện đủ. */
.cg{
  display:grid;grid-template-columns:minmax(0,1fr);padding:0;
  background:#E8EEF5;          /* đúng màu mép dưới ảnh */
  text-align:center;
}
.cg>*{grid-area:1/1;align-self:start;}
.cg-bg{width:100%;}
.cg-in{z-index:2;padding:6% 18px 0;}
.cg-trich{
  margin:5.5% auto 0;max-width:88%;
  font-size:clamp(12.5px,3.5vw,14.5px);line-height:1.55;color:#1F2C3D;
}
.cg-pill{
  display:inline-block;margin:12px 0 18px;
  background:linear-gradient(90deg,#5B8FEB,var(--xanh));color:#fff;
  font-size:13px;font-weight:800;line-height:1.4;border-radius:8px;padding:10px 16px;
}
/* Video là Shorts dọc 9:16. Giữ đúng tỉ lệ đó cho cả ảnh bìa lẫn iframe thì
   lúc bấm phát khung không bị nhảy. Bó hẹp bề ngang để khối không quá cao. */
.video{
  position:relative;width:min(74%,300px);margin:0 auto;
  aspect-ratio:9/16;border-radius:18px;overflow:hidden;cursor:pointer;
  background:#0B1220;box-shadow:0 12px 34px rgba(30,79,191,.18);
}
.video-ph{width:100%;height:100%;object-fit:cover;}
.video iframe{width:100%;height:100%;border:0;display:block;}
.play{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2;
  width:64px;height:64px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(255,255,255,.92);box-shadow:0 8px 24px rgba(0,0,0,.25);
}
.play::before{
  content:"";position:absolute;left:53%;top:50%;transform:translate(-50%,-50%);
  border-left:18px solid var(--xanh);border-top:11px solid transparent;border-bottom:11px solid transparent;
}

/* ---------- Khối số liệu (nằm trong section 7) ---------- */
.cn .l1{font-size:clamp(20px,5.9vw,24px);font-weight:800;}
.cn .l2{font-size:clamp(25px,7.4vw,30px);}
/* Khối này phải nằm GỌN trong khoảng trời trống phía trên lọ sản phẩm.
   Cỡ chữ để nhỏ hơn bản đầu vì khối cũ cao tới 50% bề ngang, thò xuống đè lọ.
   Sửa cỡ chữ ở đây thì phải kiểm lại đáy khối, xem ghi chú .sl-i bên dưới. */
.sl-ds{margin-top:3%;display:flex;flex-direction:column;gap:10px;text-align:left;}
/* Đáy khối số liệu phải nằm TRÊN đỉnh lọ sản phẩm. Tăng mấy cỡ chữ này lên là
   khối dài ra và thò xuống đè lọ - đo lại rồi hãy đổi. */
.sl-i b{display:block;font-size:clamp(13px,3.8vw,15px);font-weight:800;line-height:1.15;}
.sl-i em{font-style:normal;font-size:clamp(26px,7.6vw,34px);font-weight:900;
         color:var(--xanh);letter-spacing:-1px;line-height:1.1;}
.sl-i span{display:block;font-size:clamp(10.5px,3vw,12.5px);font-weight:700;
           letter-spacing:.3px;color:#26303D;margin-top:1px;}

/* ---------- 7. SỐ LIỆU + CẢM NHẬN ----------
   Ảnh nền có lọ và cúp ở khoảng 38%..109% bề ngang. Tiêu đề và số liệu đặt
   trên trời ở đỉnh, băng thẻ đặt xuống vùng bậc thang phía dưới.
   Số đo từ bản demo, tính theo % BỀ NGANG từ đỉnh ảnh:
     10%  tiêu đề "MẸ BẦU ĐANG NÓI GÌ VỀ"
     118% tiêu đề "CẢM NHẬN THỰC TẾ TỪ MẸ BẦU"
     128% đỉnh băng thẻ */
.cn{
  display:grid;grid-template-columns:minmax(0,1fr);padding:0;
  background:#E4F0FB;          /* đúng màu mép dưới ảnh */
}
.cn>*{grid-area:1/1;align-self:start;}
.cn-bg{width:100%;}
.cn-in{z-index:2;padding:10% 18px 0;text-align:center;}
.cn-duoi{z-index:2;margin-top:118%;}
.cn .tt-nho{margin-bottom:2.6%;}

.cn-bang{overflow:hidden;}
/* KHÔNG đặt will-change ở đây. Ở LP Folate và DHA, will-change rải hàng loạt
   làm iPhone giật nặng. translate3d đã đủ để trình duyệt tách lớp. */
.cn-track{display:flex;gap:12px;padding:0 12px;}
/* Thẻ nới rộng hẳn so với bản đầu (195px -> ~245px). Thẻ hẹp khiến mỗi dòng
   chỉ chứa 4-5 chữ, ngắt vụn và rất khó đọc; rộng thêm là cách hiệu quả nhất.
   Ảnh hạ từ vuông xuống 5:4 để thẻ không cao quá sau khi nới ngang. */
.cn-i{
  flex:0 0 auto;width:clamp(210px,62vw,262px);
  background:#fff;border-radius:18px;overflow:hidden;
  box-shadow:0 10px 26px rgba(30,79,191,.15);
}
.cn-anh{width:100%;aspect-ratio:5/4;object-fit:cover;display:block;}
.cn-noi{padding:12px 14px 14px;}
/* Tên để màu xám nhạt hơn phần đánh giá, để mắt đọc nội dung trước, tên sau. */
.cn-dau{display:flex;align-items:center;gap:8px;margin-bottom:7px;}
.cn-sao{font-size:12px;color:#F5A623;letter-spacing:1.5px;line-height:1;}
.cn-ten{font-size:12.5px;font-weight:800;color:#7A8494;line-height:1;}
/* Đánh giá dài ngắn rất lệch nhau (1 đến 8 dòng). Trong băng chạy ngang mà thẻ
   cao thấp khác nhau thì hàng rất rối, nên ghim CỨNG 4 dòng: dài hơn thì cắt và
   thêm dấu ba chấm, ngắn hơn thì vẫn giữ đủ chỗ. Nhờ vậy mọi thẻ bằng nhau. */
/* Lớp ngoài ghim cứng 4 dòng để mọi thẻ cao bằng nhau, lớp trong căn giữa dọc.
   Không đặt min-height thẳng lên .cn-txt: nó dùng display:-webkit-box cho việc
   cắt dòng, mà kiểu hiển thị đó không căn giữa dọc được. */
.cn-o{
  min-height:calc(4 * 1.55 * clamp(12.5px,3.5vw,13.5px));
  display:flex;align-items:center;
}
.cn-txt{
  font-size:clamp(12.5px,3.5vw,13.5px);line-height:1.55;color:#26303D;
  display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;
  overflow:hidden;
}

/* ---------- 11. FAQ ---------- */
.faq{background:linear-gradient(180deg,#EAF3FD,#DCEAFB);}
.faq .tt{margin-bottom:18px;}
.faq-ds{display:flex;flex-direction:column;gap:12px;}
.faq-i{background:rgba(255,255,255,.92);border-radius:18px;padding:18px;}
.faq-h{font-size:15.5px;font-weight:800;color:var(--xanh);line-height:1.35;margin-bottom:10px;}
.faq-a{font-size:14.5px;line-height:1.55;color:#2B3646;text-align:justify;}
.nguon{margin-top:18px;font-size:11.5px;line-height:1.5;color:#5B6472;text-align:justify;}
.khuyen-cao{margin-top:14px;font-size:12.5px;line-height:1.5;color:#4A5566;text-align:center;}

/* ---------- 12. CHÍNH SÁCH ---------- */
.cs{background:linear-gradient(180deg,#DCEAFB,#EFF5FC);}
.cs .tt{margin-bottom:18px;}
.cs-ds{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.cs-i{border-radius:18px;padding:14px;display:flex;flex-direction:column;gap:6px;min-height:160px;}
.cs-i.dam{background:linear-gradient(160deg,#4E86E8,var(--xanh));color:#fff;}
.cs-i.nhat{background:#fff;}
/* Icon 3D đã trong suốt sẵn nên không cần khung nền phía sau. */
.cs-ic{width:auto;height:64px;align-self:center;object-fit:contain;}
.cs-t{margin-top:auto;}
.cs-t b{display:block;font-size:clamp(15px,4.4vw,17px);font-weight:800;line-height:1.2;}
.cs-t span{display:block;font-size:clamp(11.5px,3.3vw,12.5px);line-height:1.35;margin-top:2px;}
.luu-y{margin-top:14px;background:rgba(255,255,255,.92);border-radius:18px;padding:16px;
       display:flex;gap:12px;align-items:center;}
.ly-ic{width:44px;height:auto;flex:0 0 auto;}
.luu-y p{font-size:clamp(12.5px,3.6vw,13.5px);line-height:1.45;}

/* ---------- 8. CHỐT ----------
   Cụm chữ nổi “LÊN TIẾNG” và hai thanh CHỦ ĐỘNG BỔ SUNG / NGAY HÔM NAY nằm
   trong MỘT ảnh, nên ở đây chỉ còn hai dòng chữ thường phía trên. */
.chot{padding:0;}
.anh-chot{padding:34px 16px 30px;text-align:center;
          background:linear-gradient(180deg,#EAF3FD,#D6E7FA);}
.chot-tt{font-size:clamp(21px,6.2vw,26px);font-weight:900;line-height:1.22;letter-spacing:-.3px;}
/* Dải tia sáng ở đỉnh ảnh chiếm 28% chiều cao ảnh nhưng CHÍNH GIỮA thì trống
   (tia nằm hai bên mép), nên nhìn như một khoảng hở lớn dưới dòng chữ.
   Kéo âm lên để bù đúng khoảng trống đó; chữ vẫn không chạm tia vì tia ở xa mép. */
.chot-chu{width:100%;margin-top:-5%;}

/* ---------- POPUP ĐẶT HÀNG ---------- */
.modal{
  position:fixed;inset:0;z-index:60;display:none;
  align-items:flex-end;justify-content:center;
}
.modal.mo{display:flex;}
.modal-nen{position:absolute;inset:0;background:rgba(12,24,48,.55);}
/* KHÔNG dùng backdrop-filter: blur trên lớp phủ toàn màn -> iOS giật nặng. */
.tam{
  position:relative;z-index:2;width:100%;max-width:var(--khung);
  max-height:92vh;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:#fff;border-radius:22px 22px 0 0;
  padding:22px 18px calc(26px + env(safe-area-inset-bottom));
  animation:len .3s cubic-bezier(.22,1,.36,1);
}
@keyframes len{ from{transform:translateY(100%);} to{transform:translateY(0);} }
.dong{
  position:absolute;top:12px;right:14px;z-index:3;
  width:34px;height:34px;border:none;border-radius:50%;cursor:pointer;
  background:#EEF3FA;color:#5B6472;font-size:24px;line-height:1;
}
/* Khoá cuộn nền khi popup mở, và giấu thanh dính đáy cho khỏi chồng lên */
body.mo-popup{overflow:hidden;}
body.mo-popup .day{opacity:0;pointer-events:none;}


/* ---------- FORM ĐẶT HÀNG ---------- */
.dh{background:#fff;}
.dh-tt{font-size:19px;font-weight:800;text-align:center;padding-right:34px;}
.dh-tt b{color:var(--xanh);}
.dh-sub{font-size:12.5px;color:var(--xam);text-align:center;margin-top:4px;}
.dh-han{
  font-size:12px;color:var(--do);text-align:center;margin-top:8px;
  background:#FFF1F2;border:1px solid #FBD5D8;border-radius:999px;padding:6px 12px;
}
.dh-han b{font-weight:800;}

.goi{display:flex;flex-direction:column;gap:10px;margin:18px 0 6px;}
.goi-i{
  border:2px solid var(--vien);border-radius:16px;padding:13px 14px;cursor:pointer;
  display:flex;align-items:center;gap:12px;transition:border-color .16s,background .16s;
  position:relative;
}
.goi-i.chon{border-color:var(--xanh);background:#F3F8FF;}
.goi-r{width:20px;height:20px;border-radius:50%;border:2px solid #C4D2E6;flex:0 0 auto;position:relative;}
.goi-i.chon .goi-r{border-color:var(--xanh);}
.goi-i.chon .goi-r::after{content:"";position:absolute;inset:3px;border-radius:50%;background:var(--xanh);}
.goi-n{flex:1;}
.goi-n b{display:block;font-size:15px;font-weight:700;}
.goi-n s{font-size:12.5px;color:#9AA5B4;}
.goi-n em{font-style:normal;font-size:12.5px;color:#1C9E63;font-weight:700;margin-left:6px;}
.goi-g{font-size:17px;font-weight:800;color:var(--xanh);white-space:nowrap;}
.goi-tag{
  position:absolute;top:-9px;right:12px;background:var(--do);color:#fff;
  font-size:10.5px;font-weight:800;border-radius:999px;padding:3px 9px;letter-spacing:.3px;
}

.q-tt{font-size:14px;font-weight:700;margin:16px 0 8px;}
.gdo{display:flex;flex-wrap:wrap;gap:8px;}
/* Mỗi mốc một màu riêng, do app.js gắn vào hai biến --c và --n.
   Có giá trị dự phòng để lỡ thiếu màu thì chip vẫn hiện bình thường. */
.gdo-i{
  --c:var(--xam); --n:#F0F2F5;
  border:1.5px solid var(--n);border-radius:999px;padding:8px 13px;
  background:var(--n);color:var(--c);
  font-size:12.5px;font-weight:700;cursor:pointer;
  -webkit-user-select:none;user-select:none;
  transition:border-color .16s,background .16s,color .16s;
}
/* Chọn rồi thì tô đặc bằng chính màu đó, chữ trắng. Mọi mã màu trong
   GIAI_DOAN đều đã chọn đủ tối để chữ trắng đọc rõ. */
.gdo-i.chon{background:var(--c);border-color:var(--c);color:#fff;}

.o{
  width:100%;border:1.5px solid var(--vien);border-radius:12px;
  padding:13px 14px;font-size:16px;   /* 16px: iOS không tự phóng to khi bấm vào */
  color:var(--muc);background:#fff;outline:none;margin-top:10px;
  transition:border-color .18s,box-shadow .18s;
}
.o::placeholder{color:#A9B4C4;}
.o:focus{border-color:var(--xanh);box-shadow:0 0 0 3px rgba(30,79,191,.13);}
.loi{color:#D93636;font-size:13px;min-height:18px;margin:8px 0 0;font-weight:600;}
.tong{display:flex;justify-content:space-between;align-items:baseline;margin-top:10px;
       font-size:15px;font-weight:700;}
.tong b{font-size:22px;color:var(--xanh);}
.tiet-kiem{font-size:12.5px;color:#1C9E63;font-weight:700;text-align:right;min-height:18px;}
.nut-gui{margin-top:12px;}
.cam-ket{font-size:11.5px;color:var(--xam);text-align:center;margin-top:10px;}

.xong{display:none;text-align:center;padding:10px 0;}
.xong.hien{display:block;}
.tick{width:58px;height:58px;margin:0 auto 12px;border-radius:50%;background:#1C9E63;color:#fff;
      display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:800;}
.xong-tt{font-size:20px;font-weight:800;}
.xong-sub{font-size:14px;color:var(--xam);margin-top:6px;}
.xong-nut{display:flex;gap:10px;margin-top:16px;}
/* Nút gọi trước đây mang class "goi", trùng đúng tên với .goi của DANH SÁCH GÓI
   (chữ "gói" và "gọi" bỏ dấu là một). Nó ăn nguyên display:flex-column và
   margin 18px của khối kia nên bị tụt xuống, lệch hẳn so với nút Zalo.
   Đổi thành .dt. Đặt tên class bỏ dấu thì phải để ý mấy cặp đồng âm như vậy. */
.x-nut{
  flex:1;padding:13px 8px;border-radius:12px;text-decoration:none;font-size:14px;
  font-weight:700;text-align:center;line-height:1.2;
  display:flex;align-items:center;justify-content:center;   /* hai nút cao bằng nhau */
  border:1.5px solid transparent;                            /* để viền không làm lệch chiều cao */
}
.x-nut.zalo{background:#0068FF;color:#fff;}
.x-nut.dt{background:#fff;color:var(--xanh-dam);border-color:var(--xanh);}

/* ---------- CHÂN TRANG ---------- */
.ft{padding:24px 18px 28px;text-align:center;background:#F5F8FC;border-top:1px solid var(--vien);}
.ft-logo{width:96px;margin:0 auto 10px;}
.ft-ten{font-size:13px;font-weight:800;letter-spacing:.4px;}
.ft-sub{font-size:11.5px;color:var(--xam);margin-top:3px;}
.ft-lh{font-size:13px;margin-top:6px;}
.ft-lh a{color:var(--xanh);font-weight:700;text-decoration:none;}
.ft-cc{font-size:10.5px;color:#8A94A3;margin-top:12px;line-height:1.5;}

/* ---------- THANH DÍNH ĐÁY ---------- */
.day{
  position:fixed;left:50%;bottom:0;transform:translateX(-50%);
  width:100%;max-width:var(--khung);z-index:40;
  background:rgba(255,255,255,.97);border-top:1px solid var(--vien);
  box-shadow:0 -6px 20px rgba(20,40,80,.1);
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  display:flex;align-items:center;gap:12px;
  transition:transform .28s ease,opacity .28s ease;
}
.day.an{transform:translateX(-50%) translateY(110%);opacity:0;pointer-events:none;}
.day-gia{line-height:1.15;}
.day-gia s{display:block;font-size:11.5px;color:#9AA5B4;}
.day-gia b{display:block;font-size:18px;font-weight:800;color:var(--do);}
.nut-day{flex:1;padding:14px;font-size:15.5px;}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  *{animation:none!important;transition:none!important;}
}

/* ============================================================
   ĐÃ GẮN XONG
   ------------------------------------------------------------
   section1-bg.webp   section 1, gồm luôn 2 huy hiệu đường huyết
                      và tiêu hóa nên đã bỏ khối .hai-huy dựng tay
   section2.webp      section 2, gồm cả 2/9, giảm 30%, giá và combo
                      nên đã bỏ các khối .km-dip .km-29 .km-giam
                      .km-goc .km-con .km-gia .km-combo dựng tay
   section3-bg.webp   nền chung cho section 3 VÀ 4 (bản demo để hai
                      phần trên cùng một nền xanh), nên hai section
                      cũ .gd và .ph đã gộp làm một
   section4-bg.webp   nền chung cho "CHỈ VỚI 1 VIÊN MỖI NGÀY" VÀ
                      "3 ĐIỂM KHÁC BIỆT", nên hai section cũ
                      .vien và .kb cũng đã gộp làm một
   icon-4-1/2/3.webp  3 icon trong thẻ khác biệt
   section5-bg.webp   nền section tiêu chuẩn, mascot cầm cúp ở đáy;
                      giữ nguyên bố cục cũ, chỉ lót nền và gắn huy chương
   huy-tga / huy-gmp / huy-made-in-aus.webp   3 huy chương vàng
   thumb-video-chuyen-gia.webp  ảnh bìa video, cắt từ chính Shorts
                      YouTube JcBFuZaHdfk, giữ đúng 9:16
   section6-bg.webp   nền section chuyên gia; ảnh chỉ có nền xanh và
                      dãy núi ở đáy, mọi chữ đều dựng bằng code
   section7-bg.webp   nền chung cho khối SỐ LIỆU và băng ĐÁNH GIÁ (bản
                      demo để chung một nền), nên hai section cũ
                      .sl và .cn đã gộp làm một
   dg-1..8.webp       8 ảnh khách chụp thật, dùng trong băng đánh giá
   ic-xe-tai / ic-huy-chuong / ic-tai-nghe / ic-voucher.webp
                      4 icon 3D của khối chính sách đặt hàng
   ic-canh-bao.webp   icon tam giác của ô LƯU Ý
   chot-chu.webp      CHỈ có dải tia sáng + hai thanh CHỦ ĐỘNG BỔ SUNG /
                      NGAY HÔM NAY. Cụm “LÊN TIẾNG” không nằm trong ảnh,
                      vẫn là chữ HTML ở .chot-tt
   logo-perdays.webp  logo PERDAYS, dùng ở hero và chân trang

   share.jpg      ảnh chia sẻ 1200x630 cho og:image. Xuất từ share.png,
                  để JPG chứ KHÔNG để WebP vì Zalo hay bỏ qua WebP
   favicon.webp   icon trên tab trình duyệt
   apple-touch-icon.png  bản PNG 180x180 cho iOS, vì iOS không đọc
                  WebP cho apple-touch-icon
   ------------------------------------------------------------
   ĐỦ ẢNH. Không còn ô chờ nào trong trang.
   ============================================================ */