/* =========================================================
   S01 – HERO (màn hình đầu tiên)   #hero
   Gồm: tiêu đề + khung giá + 2 nút | box visual 3 nền tảng | dải cam kết
   ========================================================= */
#hero{position:relative;overflow:hidden;color:var(--ink);padding:64px 0 56px;
  background:radial-gradient(700px 460px at 78% 55%,rgba(18,198,79,.18),transparent 65%),linear-gradient(180deg,#fff 0%,var(--g-50) 100%)}
#hero::before{content:"";position:absolute;inset:0;background-image:linear-gradient(rgba(9,142,80,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(9,142,80,.06) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);mask-image:linear-gradient(180deg,transparent,#000 30%,#000 70%,transparent);pointer-events:none}
#hero .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:minmax(0,1.12fr) minmax(0,1fr);gap:36px;align-items:center}
#hero .hero-grid > div:first-child{min-width:0;container-type:inline-size}

/* --- Cột chữ --- */
/* Tiêu đề viết hoa: "GIẢI PHÁP" to nhất, dòng 2 nhỏ hơn (.58em) để vừa 1 dòng */
#hero h1{font-size:clamp(44px,5.4vw,68px);font-weight:800;line-height:1.02;letter-spacing:-.02em;text-transform:uppercase;margin-bottom:18px}
#hero h1 span{display:block;max-width:100%;font-size:min(6cqi,.58em);letter-spacing:-.01em;line-height:1.3;padding-top:.08em;background:linear-gradient(90deg,var(--g-800),var(--g-500));-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.06em;white-space:nowrap;overflow-wrap:normal}
#hero .sub{font-size:clamp(17px,1.6vw,20px);font-weight:500;color:var(--muted);max-width:580px;margin-bottom:28px;line-height:1.5}
#hero .sub b{color:var(--ink);font-weight:700}
#hero .sub .nw{white-space:nowrap} /* giữ từng cụm liền nhau, dấu "-" không rơi xuống đầu dòng */
/* Máy tính & tablet: cả câu mô tả nằm trên 1 dòng (chữ tự co theo bề ngang) */
@media (min-width:601px){#hero p.sub{white-space:nowrap;font-size:clamp(14px,1.15vw,18.5px)}}
#hero .hero-ctas{display:flex;gap:14px;flex-wrap:wrap}

/* --- Khung giá nổi bật --- */
#hero .hook{position:relative;display:flex;align-items:stretch;max-width:540px;margin-bottom:30px;border-radius:14px;overflow:hidden;background:var(--grad);color:#fff;box-shadow:0 18px 40px rgba(9,142,80,.3),0 0 0 4px rgba(18,198,79,.12)}
#hero .hook::after{content:"";position:absolute;top:-40%;left:-30%;width:30%;height:180%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.28),transparent);transform:rotate(18deg);animation:hero-shine 3.6s ease-in-out infinite}
@keyframes hero-shine{0%,55%{left:-30%}100%{left:130%}}
#hero .hook-price{padding:16px 22px;background:rgba(0,0,0,.14);display:flex;flex-direction:column;justify-content:center;line-height:1.05}
#hero .hook-price small{font-size:13px;font-weight:600;opacity:.9;text-transform:uppercase;letter-spacing:.08em}
#hero .hook-price b{font-size:clamp(30px,3.2vw,38px);font-weight:800;letter-spacing:-.02em;margin:4px 0 2px}
#hero .hook-price em{font-style:normal;font-size:15px;font-weight:600;opacity:.95}
#hero .hook-plat{flex:1;padding:16px 20px;display:flex;flex-direction:column;justify-content:center;gap:10px}
#hero .hook-plat p{font-size:16px;font-weight:500;line-height:1.35}
#hero .hook-plat p b{font-weight:800;color:#FFF3B0}
#hero .hook-ic{display:flex;gap:8px}
#hero .hook-ic span{width:36px;height:36px;border-radius:10px;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.3);display:grid;place-items:center}

/* --- Box visual 3 nền tảng --- */
#hero .pv{position:relative}
#hero .pv-stage{position:relative;aspect-ratio:1.25/1}
#hero .pv-stage::before{content:"";position:absolute;left:6%;right:6%;bottom:4%;height:22%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,198,79,.45),rgba(18,198,79,.12) 60%,transparent);filter:blur(2px)}
#hero .pv-stage::after{content:"";position:absolute;left:12%;right:12%;bottom:9%;height:12%;border-radius:50%;border:2px solid rgba(13,170,81,.45);box-shadow:0 0 30px rgba(18,198,79,.35),inset 0 0 20px rgba(18,198,79,.25)}
/* Khiên bản quyền phía sau (lơ lửng + sóng lan tỏa) */
#hero .pv-shield{position:absolute;left:31%;top:0;width:38%;aspect-ratio:200/232;z-index:1;animation:hero-float 5s ease-in-out infinite}
#hero .pv-shield svg{position:relative;z-index:2;width:100%;height:100%;filter:drop-shadow(0 18px 28px rgba(9,142,80,.35)) drop-shadow(0 0 22px rgba(18,198,79,.45))}
#hero .pv-shield::before{content:"";position:absolute;inset:-35%;border-radius:50%;background:radial-gradient(closest-side,rgba(18,198,79,.35),rgba(18,198,79,.08) 60%,transparent);z-index:0}
#hero .pv-shield .ring{position:absolute;left:50%;top:48%;width:120%;aspect-ratio:1;border-radius:50%;border:2px solid rgba(18,198,79,.55);transform:translate(-50%,-50%) scale(.6);opacity:0;animation:hero-ring 3.6s ease-out infinite;z-index:0}
#hero .pv-shield .r2{animation-delay:1.2s}
#hero .pv-shield .r3{animation-delay:2.4s}
@keyframes hero-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}
@keyframes hero-ring{0%{transform:translate(-50%,-50%) scale(.55);opacity:.8}100%{transform:translate(-50%,-50%) scale(1.35);opacity:0}}
/* Vòm bảo vệ bao quanh thiết bị + tia quét chạy dọc vòm */
#hero .pv-dome{position:absolute;left:-2%;bottom:5%;width:104%;height:80%;z-index:3;pointer-events:none;overflow:visible}
#hero .pv-dome .dome-scan{animation:hero-scan 4s linear infinite;filter:drop-shadow(0 0 6px #12C64F)}
@keyframes hero-scan{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}


/* 3 thiết bị (ảnh nền trong suốt) */
#hero .dev{position:absolute;transition:transform .5s cubic-bezier(.2,.9,.25,1.2),opacity .45s,filter .45s;cursor:pointer;z-index:2}
#hero .dev img{width:100%;display:block;filter:drop-shadow(0 16px 24px rgba(3,40,28,.22));transition:filter .45s}
#hero .dev.dim{opacity:.6;filter:saturate(.55)}
#hero .dev.dim:hover{opacity:.9}
#hero .dev.on{z-index:4;transform:var(--on-t)}
#hero .dev.on img{filter:drop-shadow(0 0 2px var(--g-500)) drop-shadow(0 0 22px rgba(18,198,79,.7)) drop-shadow(0 26px 30px rgba(3,95,70,.35)) brightness(1.05)}
#hero .dev.on.pop{animation:hero-pop .55s cubic-bezier(.2,.9,.25,1.3)}
@keyframes hero-pop{0%{transform:scale(.94)}60%{transform:var(--on-t) scale(1.04)}100%{transform:var(--on-t)}}
#hero .dev-pc{left:20%;top:36%;width:60%;--on-t:scale(1.06) translateY(-3px)}
#hero .dev-web{right:1%;bottom:4%;width:36%;--on-t:scale(1.18) translate(-6%,-6%)}
#hero .dev-mb{left:5%;bottom:4%;width:15%;--on-t:scale(1.22) translate(10%,-8%)}
#hero .pv-tabs{position:relative;z-index:5;display:flex;width:max-content;margin:4px auto 0;gap:4px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:4px;box-shadow:0 10px 26px rgba(9,142,80,.12)}
#hero .pv-tabs button{font:inherit;display:flex;align-items:center;gap:7px;justify-content:center;padding:8px 18px;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:13.5px;font-weight:600;cursor:pointer;transition:background .2s,color .2s;text-align:left;line-height:1.3}
#hero .pv-tabs button svg{flex:0 0 18px}
#hero .pv-tabs button.on{background:var(--grad);color:#fff}
#hero .pv-tabs button:not(.on):hover{background:var(--g-50);color:var(--g-700)}

/* --- Dải cam kết dưới hero --- */
#hero .hero-trust{position:relative;z-index:3;display:grid;grid-template-columns:repeat(3,1fr);margin:56px 0 0;padding:10px;border-radius:18px;
  background:linear-gradient(120deg,#FFFFFF 0%,#F1FFF6 50%,#E3FFEE 100%);border:1px solid var(--g-300);box-shadow:0 22px 44px rgba(9,142,80,.14),inset 0 1px 0 #fff}
#hero .hero-trust .tb{display:flex;align-items:center;justify-content:center;gap:16px;padding:14px 22px;border-radius:12px;position:relative;transition:background .2s}
#hero .hero-trust .tb:hover{background:rgba(255,255,255,.8)}
#hero .hero-trust .tb + .tb::before{content:"";position:absolute;left:0;top:18%;bottom:18%;width:1px;background:linear-gradient(transparent,var(--g-300),transparent)}
#hero .hero-trust .tb-ic{flex:0 0 60px;height:60px;border-radius:16px;display:grid;place-items:center;background:linear-gradient(145deg,#FFFFFF,#E6F8EE);box-shadow:0 8px 18px rgba(9,142,80,.18),inset 0 -3px 0 rgba(9,142,80,.08)}
#hero .hero-trust .tb-ic svg{width:44px;height:44px}
#hero .hero-trust b{display:block;font-size:15px;font-weight:800;line-height:1.3;text-transform:uppercase;color:var(--g-900);letter-spacing:.01em}
#hero .hero-trust span{display:block;font-size:13px;line-height:1.45;color:var(--muted);margin-top:4px}

/* ---------------------------------------------------------
   MÁY TÍNH (>1000px): cả Hero + dải cam kết gói gọn trong 1 màn hình.
   Chữ, khoảng cách và hình tự co theo chiều cao màn hình (vh).
   --------------------------------------------------------- */
@media (min-width:1001px){
  /* Hero cao đúng 1 màn hình: phần trên chiếm hết chỗ trống, dải cam kết bám đáy màn hình */
  #hero{min-height:calc(100vh - 72px);display:flex;flex-direction:column;padding:clamp(10px,2vh,28px) 0 clamp(8px,1.4vh,14px)}
  #hero > .wrap{width:100%;flex:1;display:flex;flex-direction:column;min-height:0}
  #hero .hero-grid{flex:1;min-height:0;gap:clamp(24px,3vw,56px)}
  /* Phần trên to hơn: tiêu đề, mô tả, khung giá, nút */
  #hero h1{font-size:clamp(46px,min(4.6vw,11vh),82px);margin-bottom:clamp(10px,1.8vh,20px)}
  #hero h1 span{font-size:min(6cqi,.56em)}
  #hero .sub{font-size:clamp(17px,min(1.6vw,2.9vh),24px);max-width:none;margin-bottom:clamp(14px,3vh,34px)}
  #hero .hook{max-width:640px;margin-bottom:clamp(16px,3.2vh,36px)}
  #hero .hook-price{padding:clamp(10px,2vh,20px) 26px}
  #hero .hook-price small{font-size:clamp(12px,1.7vh,15px)}
  #hero .hook-price b{font-size:clamp(30px,min(3.4vw,6vh),50px)}
  #hero .hook-price em{font-size:clamp(14px,2vh,18px)}
  #hero .hook-plat{padding:clamp(10px,2vh,20px) 24px;gap:10px}
  #hero .hook-plat p{font-size:clamp(15px,min(1.15vw,2.3vh),19px)}
  #hero .hook-plat p b{white-space:nowrap}
  #hero .hook-ic span{width:clamp(34px,5vh,42px);height:clamp(34px,5vh,42px)}
  #hero .hero-ctas .btn{font-size:clamp(15px,2.1vh,18px);padding:clamp(11px,2vh,17px) 32px}
  /* Hình bên phải: to theo chiều cao còn lại (trừ header, tab, dải cam kết) */
  #hero .pv-stage{width:min(100%,calc((100vh - 72px - 200px) * 1.25));margin:0 auto}
  #hero .pv-tabs button{padding:7px 16px}
  /* Dải cam kết: 3 ô chia đều, nội dung căn giữa từng ô, dính đáy màn hình */
  #hero .hero-trust{margin-top:auto;padding:4px;border-radius:14px}
  #hero .hero-trust .tb{gap:12px;padding:clamp(6px,1.1vh,10px) 16px}
  #hero .hero-trust .tb-ic{flex:0 0 40px;height:40px;border-radius:11px}
  #hero .hero-trust .tb-ic svg{width:29px;height:29px}
  #hero .hero-trust b{font-size:13px;line-height:1.25}
  #hero .hero-trust span{font-size:12px;line-height:1.35;margin-top:2px}
}

@media (max-width:1000px){
  #hero .hero-grid{grid-template-columns:1fr;gap:36px}
  #hero .pv{max-width:620px;margin:0 auto;width:100%}
  /* Tablet: vẫn 3 cột, icon nằm trên chữ, căn giữa */
  #hero .hero-trust .tb{flex-direction:column;text-align:center;gap:10px;padding:14px 12px}
  #hero .hero-trust b,#hero .hero-trust span{text-wrap:balance}
}
@media (max-width:600px){
  #hero{padding-top:56px}
  #hero h1{font-size:clamp(36px,11vw,44px)}
  #hero h1 span{font-size:min(6cqi,.52em)}
  #hero .hero-ctas .btn{width:100%;justify-content:center}
  #hero .hook{flex-direction:column}
  #hero .hook-price{flex-direction:row;align-items:baseline;gap:8px}
  #hero .pv-tabs button{padding:7px 14px;font-size:12.5px}
  #hero .hero-trust{margin-top:40px;grid-template-columns:1fr}
  #hero .hero-trust .tb{flex-direction:row;justify-content:flex-start;text-align:left;gap:16px;padding:12px}
  #hero .hero-trust .tb + .tb::before{left:18%;right:18%;top:0;bottom:auto;width:auto;height:1px;background:linear-gradient(90deg,transparent,var(--g-300),transparent)}
  #hero .hero-trust .tb-ic{flex-basis:52px;height:52px}
  #hero .hero-trust .tb-ic svg{width:38px;height:38px}
  #hero .hero-trust b{font-size:13.5px}

}

/* ---------------------------------------------------------
   [THỬ NGHIỆM] CỜ VIỆT NAM kiểu lụa đỏ bay, mép sóng (góc phải trên Hero).
   Muốn gỡ: xóa đoạn này + khối .hero-flag/.hero-star trong index.html.
   Bản cũ: landing-v2/_ban-cu-truoc-co-moi/
   --------------------------------------------------------- */
/* Lụa đỏ: phủ góc phải trên, mờ dần sang trái để không đè tiêu đề */
#hero .hero-flag{position:absolute;right:0;top:0;width:64%;height:58%;z-index:0;pointer-events:none;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 38%);mask-image:linear-gradient(90deg,transparent 0,#000 38%)}
#hero .hero-flag svg{display:block;width:100%;height:100%;overflow:visible}
/* Ngôi sao vàng trên nền lụa */
#hero .hero-star{position:absolute;right:7%;top:6%;width:clamp(80px,8vw,140px);aspect-ratio:400/380;z-index:1;pointer-events:none;transform:rotate(-10deg);filter:drop-shadow(0 6px 10px rgba(90,10,10,.35));animation:hero-star 6s ease-in-out infinite}
#hero .hero-star svg{display:block;width:100%;height:100%}
@keyframes hero-star{0%,100%{transform:rotate(-10deg) translateY(0)}50%{transform:rotate(-7deg) translateY(-5px)}}
@media (max-width:1000px){
  /* Điện thoại/tablet: thành dải cờ mỏng trên cùng, đẩy tiêu đề xuống dưới dải */
  #hero{padding-top:118px}
  #hero .hero-flag{width:100%;height:110px;-webkit-mask-image:none;mask-image:none}
  #hero .hero-star{top:14px;right:6%;width:54px}
}

/* ---------------------------------------------------------
   ĐIỆN THOẠI (≤600px): giá to hơn + màn hình đầu chỉ có chữ, giá, 2 nút.
   Khiên & thiết bị bắt đầu từ màn hình thứ 2. Bản máy tính không đổi.
   --------------------------------------------------------- */
@media (max-width:600px){
  /* Giá: "CHỈ TỪ" ở trên, "149.250đ /tháng" to ở dưới */
  #hero .hook-price{flex-wrap:wrap;justify-content:center;align-items:baseline;column-gap:8px;padding:18px 16px 16px}
  #hero .hook-price small{flex-basis:100%;text-align:center;font-size:15px;letter-spacing:.12em;margin-bottom:4px}
  #hero .hook-price b{font-size:clamp(44px,13.5vw,56px);margin:0;line-height:1}
  #hero .hook-price em{font-size:20px}
  /* Cột chữ cao đúng 1 màn hình (trừ menu 64px + khoảng trên của Hero) → khiên sang màn hình sau */
  /* Nội dung bám sát dưới dải cờ (không để khoảng trắng phía trên) */
  #hero .hero-grid > div:first-child{min-height:calc(100svh - 64px - 56px);display:flex;flex-direction:column;justify-content:flex-start;padding-bottom:12px}
  #hero:has(.hero-flag){padding-top:96px}
  #hero:has(.hero-flag) .hero-grid > div:first-child{min-height:calc(100svh - 64px - 96px)}
  /* Hotline ngay dưới 2 nút */
  #hero .hero-hotline{display:flex;align-items:center;justify-content:flex-start;gap:8px;margin:14px 64px 0 0;padding:11px 14px;border-radius:12px;background:#fff;border:1px dashed var(--g-300);color:var(--ink);font-size:15px;box-shadow:0 6px 16px rgba(9,142,80,.08)}
  #hero .hero-hotline svg{color:var(--g-700);flex:none}
  #hero .hero-hotline b{color:var(--g-700);font-weight:800;white-space:nowrap}
}
/* Máy tính/tablet: không hiện dòng hotline trong Hero */
@media (min-width:601px){#hero .hero-hotline{display:none}}

/* ---------------------------------------------------------
   KHUNG GIÁ BẢN B (.hook-v2): bỏ phần "3 nền tảng + icon", giá to & nổi bật.
   Quay về bản A: chép lại 2 file trong _backup/hero-gia_A-ban-cu/
   --------------------------------------------------------- */
#hero .hook-v2{display:inline-flex;max-width:none;border-radius:18px;box-shadow:0 22px 48px rgba(9,142,80,.36),0 0 0 5px rgba(18,198,79,.14)}
#hero .hook-v2 .hook-price{background:none;padding:18px 34px 16px;line-height:1}
#hero .hook-v2 .hook-price small{font-size:14px;letter-spacing:.14em}
#hero .hook-v2 .hp-row{display:flex;align-items:baseline;gap:10px;margin:6px 0 10px}
#hero .hook-v2 .hook-price b{font-size:clamp(46px,5vw,64px);margin:0;line-height:1;color:#FFE680;text-shadow:0 3px 14px rgba(0,60,30,.35)}
#hero .hook-v2 .hook-price em{font-size:20px}
#hero .hook-v2 .hp-plat{display:block;padding-top:10px;border-top:1px solid rgba(255,255,255,.25);font-size:14px;font-weight:500;opacity:.92;line-height:1.3}
@media (min-width:1001px){
  #hero .hook-v2 .hook-price{padding:clamp(14px,2.2vh,22px) 36px clamp(12px,2vh,18px)}
  #hero .hook-v2 .hook-price small{font-size:clamp(12px,1.7vh,15px)}
  #hero .hook-v2 .hook-price b{font-size:clamp(48px,min(4.8vw,9vh),78px)}
  #hero .hook-v2 .hook-price em{font-size:clamp(17px,2.4vh,22px)}
  #hero .hook-v2 .hp-plat{font-size:clamp(13px,1.8vh,15px)}
}
@media (max-width:600px){
  #hero .hook-v2{display:flex}
  #hero .hook-v2 .hook-price{width:100%;align-items:center;text-align:center;padding:18px 16px 14px}
  #hero .hook-v2 .hook-price small{margin-bottom:0}
  #hero .hook-v2 .hp-row{justify-content:center;margin:4px 0 10px}
  #hero .hook-v2 .hook-price b{font-size:clamp(46px,14vw,58px)}
  #hero .hook-v2 .hp-plat{width:100%;font-size:13.5px}
}