/* ============================================================
   VISANA — Homepage redesign (home 3) · page-specific styles
   extends ui_kits/website/styles.css + home2/home2.css
   tokens from colors_and_type.css
   v3 signature: search-centric hero over photo + overlapping
   gradient stat band + "Dịch vụ khác" carousel + article cards
   ============================================================ */

/* ---------- HERO 3 (search-centric, full-bleed photo) ---------- */
.hero3{position:relative;overflow:hidden;background:var(--grad-hero);color:#fff;isolation:isolate}
.hero3 .bg{position:absolute;inset:0;z-index:0}
.hero3 .bg image-slot{width:100%;height:100%;display:block}
.hero3 .scrim{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(10,22,58,.62) 0%,rgba(10,22,58,.5) 42%,rgba(10,22,58,.78) 100%);}
.hero3 .glow{position:absolute;inset:0;z-index:1;background:var(--glow-aqua);pointer-events:none}
.hero3.mode-gradient .bg{opacity:0}
.hero3.mode-gradient .scrim{background:linear-gradient(180deg,rgba(13,35,92,.18),rgba(13,35,92,.62))}
.hero3 .wrap{position:relative;z-index:2;max-width:1160px;padding:96px 28px 150px;text-align:center;
  display:flex;flex-direction:column;align-items:center}
.hero3 .kicker{display:inline-flex;align-items:center;gap:9px;font-family:var(--font-head);font-weight:600;
  letter-spacing:.26em;text-transform:uppercase;color:var(--aqua);font-size:13px;
  background:rgba(0,255,188,.1);border:1px solid rgba(0,255,188,.32);padding:8px 18px;border-radius:var(--r-pill);
  margin-bottom:26px}
.hero3 .kicker .dot{width:7px;height:7px;border-radius:50%;background:var(--aqua);box-shadow:0 0 0 4px rgba(0,255,188,.22)}
.hero3 h1{font-family:var(--font-head);font-weight:900;font-size:clamp(40px,5.8vw,76px);line-height:.98;
  letter-spacing:-.025em;max-width:18ch;text-shadow:0 2px 30px rgba(8,18,50,.35)}
.hero3 h1 .em{color:var(--aqua)}
.hero3 .sub{margin-top:24px;font-size:clamp(16px,1.6vw,19px);font-weight:300;color:rgba(255,255,255,.9);
  max-width:660px;line-height:1.55}

/* hero search */
.hero-search{margin-top:40px;width:100%;max-width:680px}
.hsearch{display:flex;align-items:center;gap:10px;background:#fff;border-radius:var(--r-pill);
  padding:9px 9px 9px 22px;box-shadow:0 24px 60px rgba(8,20,60,.4);position:relative}
.hsearch .si{color:var(--slate);flex:0 0 auto}
.hsearch input{flex:1;border:0;outline:0;font-family:var(--font-body);font-size:16px;color:var(--ink);
  background:transparent;padding:13px 4px}
.hsearch input::placeholder{color:#9aa3bd}
.hsearch .go{flex:0 0 auto;background:var(--deep-blue);color:#fff;border:0;border-radius:var(--r-pill);
  height:52px;padding:0 26px;font-family:var(--font-head);font-weight:700;font-size:15px;
  display:inline-flex;align-items:center;gap:9px;box-shadow:var(--sh-blue);transition:.16s}
.hsearch .go:hover{background:var(--blue-800)}
.hero-quick{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;margin-top:20px}
.hero-quick .lbl{font-size:13.5px;color:rgba(255,255,255,.7);align-self:center}
.hero-quick .qchip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.26);color:#fff;
  font-family:var(--font-head);font-weight:600;font-size:13.5px;padding:8px 16px;border-radius:var(--r-pill);
  transition:.16s;backdrop-filter:blur(4px)}
.hero-quick .qchip:hover{background:var(--aqua);color:var(--accent-ink);border-color:var(--aqua)}

/* ---------- OVERLAPPING STAT BAND ---------- */
.statband-wrap{position:relative;z-index:5;max-width:1160px;margin:-92px auto 0;padding:0 28px}
.statband{position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(120deg,#0E235C 0%,#1A43AD 52%,#127FA6 100%);color:#fff;
  box-shadow:0 30px 60px rgba(10,30,80,.32);
  display:grid;grid-template-columns:repeat(4,1fr);padding:38px 20px}
.statband .sb-glow{position:absolute;inset:0;background:radial-gradient(620px 320px at 88% -10%,rgba(0,255,188,.3),transparent 60%);pointer-events:none}
.statband .mk{position:absolute;left:-26px;bottom:-46px;width:190px;opacity:.1;pointer-events:none}
.sb{position:relative;text-align:center;padding:6px 18px}
.sb+.sb{border-left:1px solid rgba(255,255,255,.16)}
.sb .n{font-family:var(--font-head);font-weight:900;font-size:clamp(34px,3.6vw,48px);line-height:1;letter-spacing:-.02em}
.sb .n .pop{color:var(--aqua)}
.sb .l{font-size:13.5px;color:rgba(255,255,255,.78);margin-top:9px;line-height:1.35}

/* keep first content section clear of the overlap */
.after-statband{padding-top:64px !important}

/* ---------- DỊCH VỤ KHÁC · CAROUSEL ---------- */
.caro{position:relative}
.caro-track{display:flex;gap:22px;overflow-x:auto;scroll-snap-type:x mandatory;
  padding:6px 2px 18px;scroll-behavior:smooth;scrollbar-width:none}
.caro-track::-webkit-scrollbar{display:none}
.ocard{scroll-snap-align:start;flex:0 0 282px;background:#fff;border:1px solid var(--line);
  border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);transition:.18s ease;cursor:pointer;
  display:flex;flex-direction:column}
.ocard:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--blue-100)}
.ocard .thumb{position:relative;height:172px;overflow:hidden;background:var(--blue-50)}
.ocard .thumb image-slot{width:100%;height:100%;display:block}
.ocard .badge{position:absolute;left:14px;top:14px;display:inline-flex;align-items:center;gap:7px;
  background:rgba(255,255,255,.95);color:var(--deep-blue);font-family:var(--font-head);font-weight:700;
  font-size:12px;padding:7px 12px;border-radius:var(--r-pill);box-shadow:var(--sh-1)}
.ocard .badge svg{color:var(--teal)}
.ocard .ob{padding:18px 20px 20px;display:flex;flex-direction:column;gap:7px;flex:1}
.ocard h4{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--deep-blue);text-transform:none}
.ocard p{font-size:13.5px;color:var(--slate);line-height:1.5;margin:0;flex:1}
.ocard .more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;
  font-size:13px;color:var(--deep-blue);margin-top:4px}
.ocard:hover .more{color:var(--teal)}
.caro-ctrl{display:flex;gap:10px;justify-content:center;margin-top:10px}
.caro-ctrl button{width:46px;height:46px;border-radius:50%;background:#fff;border:1.5px solid var(--line);
  color:var(--deep-blue);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:.15s}
.caro-ctrl button:hover{background:var(--deep-blue);border-color:var(--deep-blue);color:#fff;box-shadow:var(--sh-blue)}

/* ---------- DỊCH VỤ KHÁC · GRID (tweak alternative) ---------- */
.ogrid{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.ogrid .ocard{flex:none;width:auto}

/* ---------- THÔNG TIN HỮU ÍCH · ARTICLES ---------- */
.art-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.art{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;
  box-shadow:var(--sh-2);transition:.18s ease;cursor:pointer;display:flex;flex-direction:column}
.art:hover{transform:translateY(-4px);box-shadow:var(--sh-3);border-color:var(--blue-100)}
.art .thumb{position:relative;height:184px;overflow:hidden;background:var(--blue-50)}
.art .thumb image-slot{width:100%;height:100%;display:block}
.art .cat{position:absolute;left:14px;top:14px;background:var(--aqua);color:var(--accent-ink);
  font-family:var(--font-head);font-weight:700;font-size:11.5px;letter-spacing:.04em;
  padding:6px 12px;border-radius:var(--r-pill)}
.art .ab{padding:20px 20px 22px;display:flex;flex-direction:column;gap:9px;flex:1}
.art .meta{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--slate)}
.art .meta svg{color:var(--teal)}
.art h4{font-family:var(--font-head);font-weight:800;font-size:18px;color:var(--deep-blue);
  text-transform:none;line-height:1.25}
.art p{font-size:13.5px;color:var(--slate);line-height:1.5;margin:0;flex:1}
.art .more{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-head);font-weight:700;
  font-size:13px;color:var(--deep-blue);margin-top:2px}
.art:hover .more{color:var(--teal);gap:9px}
.art-cta{text-align:center;margin-top:42px}

/* ---------- WHY · video button ---------- */
.why-video{text-align:center;margin-top:42px}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:1080px){
  .art-grid,.ogrid{grid-template-columns:1fr 1fr}
}
@media(max-width:980px){
  .hero3 .wrap{padding:72px 24px 130px}
  .statband{grid-template-columns:1fr 1fr;gap:26px 0;padding:30px 16px}
  .sb:nth-child(odd){border-left:0}
  .sb:nth-child(3),.sb:nth-child(4){border-top:1px solid rgba(255,255,255,.16);padding-top:26px}
}
@media(max-width:680px){
  .hsearch{flex-wrap:wrap;border-radius:var(--r-xl);padding:14px}
  .hsearch input{width:100%;padding:6px 4px}
  .hsearch .go{width:100%;justify-content:center}
  .statband{grid-template-columns:1fr;gap:0}
  .sb{padding:18px}
  .sb+.sb{border-left:0;border-top:1px solid rgba(255,255,255,.16)}
  .sb:nth-child(3),.sb:nth-child(4){padding-top:18px}
  .art-grid,.ogrid{grid-template-columns:1fr}
  .ocard{flex-basis:248px}
}