/* ============================================================
   VISANA — Homepage redesign (home 2) · page-specific styles
   extends ui_kits/website/styles.css; tokens from colors_and_type.css
   ============================================================ */

/* ---------- HERO (two-column, premium) ---------- */
.home-hero{position:relative;overflow:hidden;background:var(--grad-hero);color:#fff}
.home-hero .glow{position:absolute;inset:0;background:var(--glow-aqua);pointer-events:none}
.home-hero .blob{position:absolute;right:-4%;bottom:-26%;width:340px;height:600px;background:linear-gradient(180deg,#16b89a,#1A43AD);border-radius:180px 180px 0 0;transform:rotate(-12deg);opacity:.4;filter:blur(1px);pointer-events:none}
.home-hero .wrap{position:relative;z-index:3;display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center;padding:70px 28px 84px;max-width:1160px}
.home-hero .kicker{font-family:var(--font-head);font-weight:600;letter-spacing:.28em;text-transform:uppercase;color:var(--aqua);font-size:13px;margin-bottom:18px}
.home-hero h1{font-family:var(--font-head);font-weight:900;font-size:clamp(40px,5.6vw,72px);line-height:.98;letter-spacing:-.02em}
.home-hero h1 .em{color:var(--aqua)}
.home-hero .sub{margin-top:22px;font-size:18px;font-weight:300;color:rgba(255,255,255,.88);max-width:520px;line-height:1.55}
.home-hero .chips{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}
.home-hero .chips .lbl{font-size:13px;color:rgba(255,255,255,.6);align-self:center;margin-right:2px}
.home-hero .actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}
.home-hero .micro{display:flex;align-items:center;gap:16px;margin-top:26px;font-size:13px;color:rgba(255,255,255,.7)}
.home-hero .micro .mi{display:flex;align-items:center;gap:7px}
.home-hero .micro svg{color:var(--aqua)}

/* hero visual stack */
.hero-visual{position:relative;justify-self:center;width:100%;max-width:440px}
.hero-visual .frame{position:relative;border-radius:24px;overflow:hidden;box-shadow:0 30px 60px rgba(8,20,60,.45);border:1px solid rgba(255,255,255,.18)}
.hero-visual image-slot{width:100%;height:430px;display:block}
.hero-visual .approved{position:absolute;top:18px;left:18px;display:flex;align-items:center;gap:9px;background:rgba(255,255,255,.94);border-radius:var(--r-pill);padding:8px 15px 8px 9px;box-shadow:var(--sh-2)}
.hero-visual .approved .d{width:30px;height:30px;border-radius:50%;background:var(--mint);color:var(--teal);display:flex;align-items:center;justify-content:center}
.hero-visual .approved .t{font-family:var(--font-head);font-weight:800;font-size:13px;color:var(--deep-blue);line-height:1}
.hero-visual .approved .t span{display:block;font-weight:500;font-size:11px;color:var(--slate);margin-top:2px}
.hero-visual .floatstat{position:absolute;right:-14px;bottom:-18px;background:#fff;border-radius:var(--r-lg);padding:16px 20px;box-shadow:var(--sh-3);text-align:center;border:1px solid var(--line)}
.hero-visual .floatstat .n{font-family:var(--font-head);font-weight:900;font-size:30px;color:var(--deep-blue);line-height:1;letter-spacing:-.02em}
.hero-visual .floatstat .n .pop{color:var(--teal)}
.hero-visual .floatstat .l{font-size:11.5px;color:var(--slate);margin-top:5px}

/* ---------- SECTION INTRO (left-aligned variant) ---------- */
.sec-head.left{text-align:left;margin-bottom:34px;max-width:680px}
.sec-head.left .sec-rule{margin-left:0}
.sec-head.left p{margin-left:0}

/* ---------- OTHER SERVICES (richer cards) ---------- */
.osvc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.osvc{display:flex;align-items:center;gap:13px;background:#fff;border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;transition:.16s;color:var(--ink)}
.osvc:hover{border-color:var(--deep-blue);box-shadow:var(--sh-2);transform:translateY(-2px)}
.osvc .ic{width:42px;height:42px;border-radius:11px;background:var(--blue-50);color:var(--deep-blue);display:flex;align-items:center;justify-content:center;flex:0 0 auto;transition:.16s}
.osvc:hover .ic{background:var(--deep-blue);color:#fff}
.osvc .t{font-family:var(--font-head);font-weight:600;font-size:13.5px;line-height:1.25}

/* ---------- PARTNERS STRIP ---------- */
.partners{padding:52px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:#fff}
.partners .pt-lbl{text-align:center;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--slate);margin-bottom:30px}
.partners .strip{display:grid;grid-template-columns:repeat(6,1fr);gap:22px;align-items:center}
.partners .plogo{height:54px;border-radius:var(--r-md);background:var(--paper);border:1px solid var(--line);display:block;width:100%}
.partners .plogo::part(empty){opacity:.5}

/* ---------- TESTIMONIALS (carousel) ---------- */
.tst2{position:relative;max-width:920px;margin:0 auto}
.tst2-track{overflow:hidden}
.tst2-row{display:flex;transition:transform .4s cubic-bezier(.4,0,.2,1)}
.tst2-card{flex:0 0 100%;padding:0 8px}
.tst2-inner{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);padding:40px 44px;box-shadow:var(--sh-2);text-align:center}
.tst2-inner .mark{color:var(--blue-100);margin:0 auto 10px}
.tst2-inner .stars{display:flex;gap:4px;justify-content:center;color:var(--goldenrod);margin-bottom:18px}
.tst2-inner .q{font-family:var(--font-head);font-weight:500;font-size:clamp(19px,2.3vw,25px);line-height:1.4;color:var(--ink);letter-spacing:-.01em;max-width:680px;margin:0 auto 24px}
.tst2-inner .who{display:flex;align-items:center;justify-content:center;gap:13px}
.tst2-inner .who image-slot{width:54px;height:54px;flex:0 0 auto}
.tst2-inner .who .nm{font-family:var(--font-head);font-weight:800;font-size:16px;color:var(--deep-blue)}
.tst2-inner .who .rl{font-size:13px;color:var(--teal);font-weight:600}
.tst2-nav{display:flex;align-items:center;justify-content:center;gap:18px;margin-top:26px}
.tst2-arrow{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}
.tst2-arrow:hover{background:var(--deep-blue);border-color:var(--deep-blue);color:#fff;box-shadow:var(--sh-blue)}
.tst2-dots{display:flex;gap:8px}
.tst2-dot{width:9px;height:9px;border-radius:50%;background:var(--blue-100);border:0;cursor:pointer;padding:0;transition:.15s}
.tst2-dot.on{background:var(--deep-blue);width:26px;border-radius:9px}

/* ---------- OFFICES ---------- */
.off-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}
.off{background:#fff;border:1px solid var(--line);border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh-2);display:flex;flex-direction:column}
.off image-slot{width:100%;height:200px;display:block}
.off .ob{padding:24px 26px 26px}
.off .tag{display:inline-flex;align-items:center;gap:7px;font-family:var(--font-head);font-weight:700;font-size:12px;letter-spacing:.06em;text-transform:uppercase;color:var(--teal);background:var(--mint);padding:5px 13px;border-radius:var(--r-pill);margin-bottom:12px}
.off h3{font-family:var(--font-head);font-weight:800;font-size:21px;color:var(--deep-blue);text-transform:none;margin-bottom:10px}
.off .line{display:flex;gap:10px;align-items:flex-start;font-size:14px;color:#374063;padding:5px 0;line-height:1.5}
.off .line svg{color:var(--deep-blue);flex:0 0 auto;margin-top:2px}
.off .obtn{margin-top:16px}

/* ---------- FOOTER country grid ---------- */
.ftr .country-cols{columns:2;column-gap:24px}
.ftr .country-cols a{padding:4px 0}

/* ---------- FLOATING CONTACT (reused look) ---------- */
.floats{position:fixed;right:18px;bottom:20px;z-index:80;display:flex;flex-direction:column;gap:12px}
.float{width:54px;height:54px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;box-shadow:0 8px 22px rgba(14,35,92,.3);border:0;cursor:pointer;position:relative;transition:transform .15s}
.float:hover{transform:scale(1.08)}
.float.call{background:var(--deep-blue)}
.float.zalo{background:#0068FF}
.float.msg{background:linear-gradient(135deg,#9B27FF,#0078FF,#00C6FF)}
.float .ping{position:absolute;inset:0;border-radius:50%;border:2px solid currentColor;animation:ping 1.8s ease-out infinite;opacity:0}
@keyframes ping{0%{transform:scale(1);opacity:.55}100%{transform:scale(1.5);opacity:0}}
.float .zl{font-family:var(--font-head);font-weight:900;font-size:15px;letter-spacing:-.02em}
.float .lab{position:absolute;right:64px;top:50%;transform:translateY(-50%);background:var(--ink);color:#fff;font-family:var(--font-head);font-weight:600;font-size:12.5px;padding:6px 12px;border-radius:var(--r-pill);white-space:nowrap;opacity:0;pointer-events:none;transition:.15s}
.float:hover .lab{opacity:1}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media(max-width:980px){
  .home-hero .wrap{grid-template-columns:1fr;gap:40px;padding:48px 24px 64px}
  .hero-visual{max-width:380px}
  .osvc-grid{grid-template-columns:1fr 1fr 1fr}
  .off-grid{grid-template-columns:1fr}
  .partners .strip{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:680px){
  .osvc-grid{grid-template-columns:1fr 1fr}
  .partners .strip{grid-template-columns:1fr 1fr}
  .tst2-inner{padding:30px 22px}
  .ftr .country-cols{columns:2}
  .floats{right:14px;bottom:16px}
  .float{width:48px;height:48px}
  .home-hero .micro{flex-wrap:wrap;gap:10px 16px}
}