/* ============================================================
   5S MEDIA — REMAKE · Glassmorphism + Bento
   Nền sáng + blob màu xuyên qua kính · accent teal · Montserrat
   ============================================================ */
:root{
  --bg:        #EEF0FA;
  --bg-2:      #F6F7FC;
  --ink:       #141733;
  --tx:        #1A1E3A;
  --tx-mut:    rgba(20,23,51,.62);
  --tx-faint:  rgba(20,23,51,.40);

  --teal:   #24DCC7;   --teal-d:#0F9E8C;
  --blue:   #137EE8;
  --purple: #7A4DF0;
  --red:    #FA3163;
  --orange: #FC8057;   --orange-d:#E8623A;
  --yellow: #F9D533;

  /* glass tokens */
  --g-bg:     rgba(255,255,255,.55);
  --g-bg-2:   rgba(255,255,255,.40);
  --g-brd:    rgba(255,255,255,.65);
  --g-brd-2:  rgba(255,255,255,.45);
  --g-sh:     0 18px 50px -22px rgba(31,38,90,.30);
  --g-sh-sm:  0 10px 30px -16px rgba(31,38,90,.26);
  --blur:     blur(12px) saturate(175%) brightness(1.03);

  --ri: 22px;
  --ri-sm: 16px;
  --maxw: 1340px;
  --e: cubic-bezier(.32,.72,0,1);
}
*{ box-sizing:border-box; margin:0; padding:0; }
html{ scroll-behavior:smooth; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; }
body{ font-family:'Montserrat',system-ui,sans-serif; color:var(--tx); background:var(--bg);
  font-size:15px; line-height:1.55; overflow-x:hidden; letter-spacing:-.01em; position:relative; }
img{ display:block; max-width:100%; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; }
.wrap{ width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:clamp(20px,4vw,48px); }

/* ---------- ambient color blobs (xuyên qua kính) ---------- */
.bg-mesh{ position:fixed; inset:0; z-index:-2; overflow:hidden; pointer-events:none;
  background:
    radial-gradient(60% 50% at 12% 8%,  rgba(36,220,199,.20), transparent 70%),
    radial-gradient(55% 45% at 88% 4%,  rgba(122,77,240,.22), transparent 70%),
    radial-gradient(50% 50% at 78% 60%, rgba(19,126,232,.18), transparent 72%),
    radial-gradient(50% 50% at 18% 78%, rgba(250,49,99,.12),  transparent 72%),
    linear-gradient(180deg,#F2F3FC,#EAECF8); }
.blob{ position:fixed; z-index:-1; border-radius:50%; filter:blur(70px); opacity:.55; pointer-events:none;
  will-change:transform; }
.b1{ width:46vw; height:46vw; left:8vw; top:4vw; background:radial-gradient(circle,#24DCC7,transparent 65%); opacity:.6; }
.b2{ width:42vw; height:42vw; right:6vw; top:8vw; background:radial-gradient(circle,#7A4DF0,transparent 65%); opacity:.5; }
.b3{ width:40vw; height:40vw; right:20vw; top:120vh; background:radial-gradient(circle,#137EE8,transparent 65%); opacity:.5; }
.b4{ width:36vw; height:36vw; left:16vw; top:210vh; background:radial-gradient(circle,#FA3163,transparent 68%); opacity:.36; }
@media (max-width:760px){ .blob{ filter:blur(48px); } }

/* ---------- atoms ---------- */
.eyebrow{ display:inline-flex; align-items:center; gap:9px;
  font-size:11px; font-weight:700; letter-spacing:.22em; text-transform:uppercase; color:var(--tx-mut); }
.eyebrow .d{ width:6px; height:6px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px rgba(36,220,199,.95); }
.eyebrow.on-dark{ color:rgba(255,255,255,.66); }

h2.title{ font-size:clamp(26px,3vw,42px); font-weight:300; line-height:1.08; letter-spacing:-.025em; color:var(--ink); }
.lead{ color:var(--tx-mut); font-weight:500; }
.g-teal{ background:linear-gradient(96deg,var(--teal-d),var(--blue)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.g-purple{ background:linear-gradient(96deg,var(--blue),var(--purple)); -webkit-background-clip:text; background-clip:text; color:transparent; }
.g-warm{ background:linear-gradient(96deg,var(--teal-d),var(--orange-d)); -webkit-background-clip:text; background-clip:text; color:transparent; }

/* glass utility */
.glass{ background:rgba(255,255,255,.42); backdrop-filter:blur(13px) saturate(180%) brightness(1.03); -webkit-backdrop-filter:blur(13px) saturate(180%) brightness(1.03);
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 28px 62px -28px rgba(31,38,90,.45), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -16px 30px -24px rgba(255,255,255,.4);
  border-radius:var(--ri); }
.glass-dark{ background:rgba(18,21,44,.55); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid rgba(255,255,255,.12); box-shadow:0 24px 60px -26px rgba(8,10,30,.7); border-radius:var(--ri); }

.btn{ cursor:pointer; border:none; font-weight:600; font-size:14px;
  display:inline-flex; align-items:center; gap:10px; border-radius:999px;
  transition:transform .4s var(--e), background .3s, color .3s, box-shadow .3s; }
.btn:active{ transform:scale(.97); }
.btn .ic{ width:26px; height:26px; border-radius:50%; display:grid; place-items:center; flex:none;
  transition:transform .45s var(--e); font-size:13px; }
.btn-primary{ background:linear-gradient(96deg,var(--purple),var(--blue)); color:#fff; padding:9px 9px 9px 20px;
  box-shadow:0 14px 30px -12px rgba(122,77,240,.6); }
.btn-primary .ic{ background:rgba(255,255,255,.22); color:#fff; }
.btn-primary:hover{ box-shadow:0 18px 40px -12px rgba(122,77,240,.75); transform:translateY(-2px); }
.btn-primary:hover .ic{ transform:translate(2px,-1px) scale(1.08); }
.btn-soft{ background:var(--g-bg); border:1px solid var(--g-brd); color:var(--ink); padding:9px 9px 9px 20px;
  backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); }
.btn-soft .ic{ background:rgba(20,23,51,.08); }
.btn-soft:hover{ background:rgba(255,255,255,.75); transform:translateY(-2px); }
.btn-soft:hover .ic{ transform:translate(2px,-1px) scale(1.08); }
.btn-ghost-light{ background:rgba(255,255,255,.14); border:1px solid rgba(255,255,255,.28); color:#fff; padding:9px 9px 9px 20px;
  backdrop-filter:blur(10px); }
.btn-ghost-light .ic{ background:rgba(255,255,255,.22); }
.btn-ghost-light:hover{ background:rgba(255,255,255,.24); }

.rv{ opacity:0; transform:translateY(24px); filter:blur(6px); }

/* ============================================================ HEADER (glass mega-nav) */
header.nav{ position:fixed; top:0; left:0; right:0; z-index:200;
  transition:transform .45s var(--e), background-color .3s ease, box-shadow .3s ease; }
header.nav .nav-shell, header.nav .bar, header.nav .logo-img{ transition:background-color .3s, box-shadow .3s, padding .3s, height .3s; }
/* shell canh theo gutter của hero (clamp 20/11.5vw/160) — bù 9px padding của bar để nội dung thẳng hàng hero */
.nav-shell{ width:100%; max-width:none; margin:0; padding:12px calc(clamp(20px,11.5vw,160px) - 9px); }
.bar{ position:relative; display:flex; align-items:center; justify-content:space-between; gap:18px; padding:9px; border-radius:999px;
  background:transparent; border:1px solid transparent; box-shadow:none;
  transition:background .35s, box-shadow .35s, border-color .35s, backdrop-filter .35s; }
/* scroll: thanh trắng đặc, full chiều rộng, vuông góc, không glass, sát mép trên */
header.nav.scrolled{ background-color:#fff; box-shadow:0 1px 16px -8px rgba(20,23,51,.28); }
header.nav.scrolled .nav-shell{ padding-top:7px; padding-bottom:7px; }
header.nav.scrolled .bar{ background:transparent; border-color:transparent; border-radius:0; box-shadow:none;
  backdrop-filter:none; -webkit-backdrop-filter:none; }
header.nav.scrolled .logo-img{ height:38px; }
/* trạng thái nổi trên hero (chưa scroll): không nền, chữ + logo trắng */
header.nav:not(.scrolled) .logo-img{ filter:brightness(0) invert(1); }
header.nav:not(.scrolled) .menu-link{ color:rgba(255,255,255,.82); }
header.nav:not(.scrolled) .menu-link:hover,
header.nav:not(.scrolled) .menu-item.open .menu-link,
header.nav:not(.scrolled) .menu-link.active{ color:#fff; background:rgba(255,255,255,.14); }
header.nav:not(.scrolled) .icon-btn{ color:#fff; background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
header.nav:not(.scrolled) .icon-btn:hover{ background:rgba(255,255,255,.24); }
header.nav:not(.scrolled) .burger{ background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.3); }
header.nav:not(.scrolled) .burger span,
header.nav:not(.scrolled) .burger span::before,
header.nav:not(.scrolled) .burger span::after{ background:#fff; }
/* khi scroll xuống: menu đen đậm, mục hiện tại xanh teal */
header.nav.scrolled .menu-link{ color:var(--ink); }
header.nav.scrolled .menu-item.current > .menu-link,
header.nav.scrolled .menu-item.current > .menu-link:hover{ color:var(--teal-d); background:rgba(15,158,140,.10); }
.brand{ display:flex; align-items:center; flex:none; padding-right:6px; }
.logo-img{ height:46px; width:auto; transition:filter .35s; }
.menu{ display:flex; align-items:center; gap:4px; margin-inline:auto; }
/* màn rộng: menu canh chính giữa viewport (logo trái – nút phải đẩy ra 2 mép) */
@media (min-width:1300px){ .menu{ position:static; transform:none; flex:1; justify-content:center; margin:0; } }
@media (min-width:1300px) and (max-width:1499px){ .menu{ gap:0; } .menu-link{ padding:9px 4px; font-size:13px; } .menu-link .mlink-ic{ display:none; } }
.menu-item{ position:relative; }
.menu-link{ font-size:14px; font-weight:600; color:var(--tx-mut); padding:9px 13px; border-radius:999px;
  display:inline-flex; align-items:center; gap:6px; cursor:pointer; transition:color .25s, background .25s; white-space:nowrap; }
.menu-link:hover, .menu-item.open .menu-link, .menu-link.active{ color:var(--blue); background:rgba(19,126,232,.08); }
.menu-link.active{ color:var(--blue); }
.menu-link .mlink-ic{ width:15px; height:15px; flex:none; opacity:1; color:var(--blue); }
.menu-link .chev{ width:9px; height:9px; transition:transform .3s var(--e); opacity:.6; }
.menu-item.open .menu-link .chev{ transform:rotate(180deg); }
.nav-cta{ display:flex; align-items:center; gap:10px; flex:none; }
.nav-cta .btn-primary{ padding:9px 9px 9px 18px; font-size:13.5px; }
.icon-btn{ width:42px; height:42px; border-radius:50%; display:grid; place-items:center; cursor:pointer;
  background:rgba(20,23,51,.05); border:1px solid var(--g-brd-2); color:var(--ink);
  transition:background .25s, transform .3s var(--e); flex:none; }
.icon-btn:hover{ background:rgba(20,23,51,.1); transform:rotate(8deg); }
.icon-btn svg{ width:17px; height:17px; }

/* mega panel */
.mega{ position:absolute; top:calc(100% + 14px); left:50%; transform:translateX(-50%) translateY(10px);
  background:rgba(255,255,255,.72); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur);
  border:1px solid var(--g-brd); box-shadow:0 30px 70px -24px rgba(31,38,90,.4); border-radius:20px;
  padding:14px; min-width:300px; opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .28s var(--e), transform .28s var(--e), visibility .28s; z-index:90; }
.mega::before{ content:''; position:absolute; top:-16px; left:0; right:0; height:18px; }
.menu-item.open .mega{ opacity:1; visibility:visible; pointer-events:auto; transform:translateX(-50%) translateY(0); }
.mega.two-col{ min-width:560px; }
.mega-head{ display:flex; align-items:center; gap:10px; padding:6px 12px 12px; }
.mega-head .mi{ width:34px; height:34px; border-radius:11px; display:grid; place-items:center; flex:none;
  background:linear-gradient(135deg,rgba(122,77,240,.16),rgba(19,126,232,.16)); color:var(--purple); }
.mega-head .mi svg{ width:18px; height:18px; }
.mega-head b{ font-size:11px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--tx-mut); }
.mega-list{ display:grid; gap:2px; }
.mega.two-col .mega-list{ grid-template-columns:1fr 1fr; gap:2px 8px; }
.mega-list a{ display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:11px 13px; border-radius:12px; font-size:14px; font-weight:500; color:var(--tx);
  transition:background .2s, color .2s, transform .2s; }
.mega-list a .ar{ opacity:0; transform:translateX(-4px); transition:opacity .2s, transform .2s; font-size:13px; color:var(--purple); }
.mega-list a:hover{ background:rgba(122,77,240,.08); color:var(--purple); }
.mega-list a:hover .ar{ opacity:1; transform:translateX(0); }
.mega-list a.feat{ background:linear-gradient(96deg,rgba(36,220,199,.16),rgba(19,126,232,.12)); font-weight:700; color:var(--ink); }
.mega-list a.feat b{ color:var(--teal-d); }

.burger{ display:none; width:42px; height:42px; border-radius:50%; border:1px solid var(--g-brd-2);
  background:rgba(20,23,51,.05); cursor:pointer; place-items:center; flex:none; }
.burger span{ display:block; width:18px; height:2px; background:var(--ink); border-radius:2px; position:relative; }
.burger span::before,.burger span::after{ content:''; position:absolute; left:0; width:18px; height:2px; background:var(--ink); border-radius:2px; transition:.3s var(--e); }
.burger span::before{ top:-6px; } .burger span::after{ top:6px; }

/* ============================================================ HERO */
.hero{ position:relative; min-height:100svh; overflow:hidden; }
.hero-video{ position:absolute; inset:0; z-index:0; overflow:hidden; }
.hero-video video, .hero-video img{ width:100%; height:100%; object-fit:cover; }
.hbg-slide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; z-index:0; }
.hbg-slide.on{ opacity:1; }
.hero-video::after{ content:''; position:absolute; inset:0;
  background:linear-gradient(110deg, rgba(12,14,34,.6) 0%, rgba(12,14,34,.32) 44%, rgba(12,14,34,.08) 100%); }
/* text: sát lề trái, cách mép 160px */
.hero-main{ position:absolute; left:clamp(20px,11.5vw,160px); top:50%; transform:translateY(-50%);
  /* Feedback 3 (mục 17+23): nới khối chữ hero cho dàn ngang, không bó thành ô vuông */
  max-width:min(64vw,880px); z-index:3; color:#fff; }
.hero-badge{ display:inline-flex; align-items:center; gap:9px; padding:8px 16px; border-radius:999px;
  background:rgba(255,255,255,.12); border:1px solid rgba(255,255,255,.22); backdrop-filter:blur(10px);
  font-size:11.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:#fff; }
.hero-badge .d{ width:7px; height:7px; border-radius:50%; background:var(--teal); box-shadow:0 0 10px var(--teal); }
.hero h1{ font-size:clamp(33px,3.4vw,52px); font-weight:300; line-height:1.08; letter-spacing:-.02em; margin-top:22px; }
.hero h1 b, .hero h1 strong{ font-weight:500; }
.hero h1 .g{ background:linear-gradient(96deg,var(--teal),#7FD7FF); -webkit-background-clip:text; background-clip:text; color:transparent; }
.hero p.sub{ font-size:clamp(15px,1.3vw,17px); font-weight:500; color:rgba(255,255,255,.82); line-height:1.62;
  max-width:54ch; margin-top:22px; }
.hero-cta{ display:flex; gap:12px; flex-wrap:wrap; margin-top:32px; }
/* card "Dự án mới nhất" (dark glass như web cũ) */
.vhero-pop{ position:absolute; right:clamp(20px,11.5vw,160px); bottom:clamp(24px,10vh,150px); z-index:4;
  display:flex; align-items:flex-end; gap:16px; max-width:min(40vw,400px);
  padding:22px 24px; border-radius:20px; color:#fff;
  background:rgba(10,14,34,.42); backdrop-filter:blur(18px) saturate(140%); -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:none; box-shadow:0 24px 60px -26px rgba(0,0,0,.6);
  transition:background .3s, transform .4s var(--e); }
.vhero-pop:hover{ background:rgba(10,14,34,.56); transform:translateY(-3px); }
.vhero-pop .hp-body{ flex:1; min-width:0; }
.vhero-pop small{ font-size:11px; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:var(--teal); }
.vhero-pop h4{ font-size:18px; font-weight:700; margin-top:12px; line-height:1.25; letter-spacing:-.01em; }
.vhero-pop p{ font-size:13.5px; line-height:1.5; color:rgba(255,255,255,.72); margin-top:10px; }
.vhero-pop .parr{ width:48px; height:48px; border-radius:50%; background:rgba(255,255,255,.92); color:#141733;
  display:grid; place-items:center; flex:none; font-size:18px; transition:transform .4s var(--e); }
.vhero-pop:hover .parr{ transform:translate(2px,-2px) rotate(8deg); }

/* hero visual: mockup điện thoại lòi 2/3 + slideshow lifestyle + icon social liquid bay quanh */
.hero-visual{ position:absolute; left:calc(60% - 40px); bottom:0; transform:translateX(-50%);
  width:clamp(360px,44vw,540px); height:clamp(460px,64vh,660px); z-index:2; }
.phone{ position:absolute; left:50%; bottom:-28%; transform:translateX(-50%);   /* lòi ~2/3, 1/3 dưới bị cắt */
  width:clamp(278px,24vw,348px); z-index:3; will-change:transform; }
.phone-frame{ position:relative; aspect-ratio:9/19.3; border-radius:42px; padding:11px;
  background:linear-gradient(150deg,#23263f,#0d0f1f); box-shadow:0 40px 90px -30px rgba(8,10,30,.85), inset 0 0 0 2px rgba(255,255,255,.08); }
.phone-island{ position:absolute; top:18px; left:50%; transform:translateX(-50%); width:78px; height:24px;
  background:#05060f; border-radius:999px; z-index:4; }
.phone-screen{ position:relative; width:100%; height:100%; border-radius:32px; overflow:hidden; background:#0b0d1c; }
.pslide{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0;
  transition:opacity 1.1s ease, transform 6s ease; transform:scale(1.08); }
.pslide.on{ opacity:1; transform:scale(1); }
.phone-screen::after{ content:''; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg,rgba(12,14,34,.32),transparent 30%,transparent 72%,rgba(12,14,34,.5)); }
.phone-glow{ position:absolute; left:50%; bottom:-8%; transform:translateX(-50%); width:120%; height:60%; z-index:-1;
  background:radial-gradient(closest-side,rgba(36,220,199,.5),transparent 70%); filter:blur(40px); }

.liq{ position:absolute; width:var(--sz,66px); height:var(--sz,66px); border-radius:calc(var(--sz,66px) * .32); z-index:6;
  display:grid; place-items:center; color:var(--c,#fff); will-change:transform; isolation:isolate;
  background:linear-gradient(150deg,rgba(255,255,255,.26),rgba(255,255,255,.06));
  backdrop-filter:blur(7px) saturate(185%) brightness(1.1); -webkit-backdrop-filter:blur(7px) saturate(185%) brightness(1.1);
  border:1px solid rgba(255,255,255,.42);
  box-shadow:0 18px 40px -16px rgba(31,38,90,.45), inset 0 1px 1px rgba(255,255,255,.6), inset 0 -10px 18px -10px rgba(255,255,255,.32); }
/* highlight thủy tinh */
.liq::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  background:radial-gradient(120% 80% at 25% 12%, rgba(255,255,255,.85), rgba(255,255,255,.1) 42%, transparent 60%); opacity:.9; }
.liq::after{ content:''; position:absolute; inset:1px; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 0 14px rgba(255,255,255,.32); }
.liq svg{ width:50%; height:50%; position:relative; z-index:1; filter:drop-shadow(0 1px 2px rgba(0,0,0,.18)); }
/* rải quanh iPhone, to nhỏ khác nhau, vài cái đè lên máy (z trên phone z-index:3) */
.liq.l1{ --sz:82px; top:-2%;  left:-4%; }
.liq.l2{ --sz:56px; top:-8%;  right:20%; }
.liq.l3{ --sz:94px; top:10%;  right:-8%; }
.liq.l4{ --sz:50px; top:24%;  left:2%; }
.liq.l5{ --sz:66px; top:46%;  right:-4%; }
.liq.l6{ --sz:56px; bottom:30%; left:-8%; }
.liq.l7{ --sz:76px; bottom:8%;  right:-2%; }
.liq.l8{ --sz:46px; bottom:2%;  left:16%; }
.liq.l9{ --sz:42px; top:58%;  left:16%; }
.liq.l10{ --sz:62px; top:8%;  left:24%; }
.liq.l11{ --sz:52px; bottom:22%; right:20%; }
@media (max-width:1080px){
  .hero{ min-height:auto; padding:120px 0 56px; }
  .hero-main{ position:static; transform:none; left:auto; max-width:680px;
    padding-inline:clamp(20px,5vw,48px); margin:0 auto; }
  .hero-visual{ position:relative; left:auto; bottom:auto; transform:none; margin:36px auto 0;
    width:clamp(280px,82vw,420px); height:clamp(380px,92vw,470px); }
  .phone{ bottom:-22%; }
  .vhero-pop{ position:static; right:auto; bottom:auto; margin:30px auto 0; max-width:520px; }
}
@media (max-width:480px){ .liq{ width:54px; height:54px; border-radius:18px; } }

/* ============================================================ SECTION shell */
.sec{ padding-block:clamp(64px,7vw,110px); position:relative; }
.sec-head{ max-width:680px; margin-bottom:clamp(34px,4vw,56px); }
.sec-head.center{ margin-inline:auto; text-align:center; }
.sec-head .title{ margin-top:16px; }
.sec-head .lead{ margin-top:14px; font-size:16px; }

/* ============================================================ STORY bento (white glass blur) */
.story-bento{ position:relative; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:clamp(158px,15vw,194px); gap:16px; }
.story-bento .cell{ border-radius:var(--ri); padding:26px; position:relative; overflow:hidden;
  display:flex; flex-direction:column; color:var(--ink); isolation:isolate; border:none;
  background:rgba(255,255,255,.4);
  backdrop-filter:blur(14px) saturate(185%) brightness(1.04); -webkit-backdrop-filter:blur(14px) saturate(185%) brightness(1.04);
  box-shadow:0 30px 66px -30px rgba(31,38,90,.5), inset 0 1px 1px rgba(255,255,255,.7), inset 0 -18px 32px -24px rgba(255,255,255,.45);
  transition:transform .4s var(--e), background .4s, box-shadow .4s, filter .4s, color .3s; }
.story-bento .cell::before{ content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0;
  background:linear-gradient(150deg, rgba(255,255,255,.7), rgba(255,255,255,.08) 38%, transparent 66%); opacity:.85; transition:opacity .4s; }
.story-bento .cell > *{ position:relative; z-index:1; }
/* placement (mosaic giống ảnh tham chiếu) */
.cell-lead{ grid-column:1; grid-row:1 / span 2; }
.cell-red{  grid-column:2 / span 2; grid-row:1; }
.cell-teal{ grid-column:2; grid-row:2; }
.cell-yellow{ grid-column:3; grid-row:2; }
.cell-orange{ grid-column:1 / span 2; grid-row:3; }
.cell-blue{ grid-column:3; grid-row:3; }
/* tất cả box: trắng kính (blur) — số mang màu brand cho điểm nhấn */
/* box "1000 dự án" — xanh đen, vẫn glass */
/* Feedback 3 (mục 24): ô "213+" trước là gradient TÍM -> làm khối bento bị rối
   (tím + xanh + đen cùng lúc). Về glass trắng trung tính, số xanh brand để cả
   khối chỉ còn 1 tông nhấn XANH (tỉ lệ ~75 sáng / 25 nhấn). */
.story-bento .cell-yellow{ background:rgba(255,255,255,.4); color:var(--ink); }
.cell-yellow b{ color:var(--blue) !important; }
.cell-yellow span{ color:var(--ink); }
/* box "9 giải pháp" — xanh logo */
/* Feedback 3 (mục 32): ô "5 giá trị cốt lõi" → nền TRẮNG, pills mang 5 màu nhận diện */
.story-bento .cell-orange{ background:rgba(255,255,255,.4); color:var(--ink); }
.cell-orange .o-text *{ color:var(--ink) !important; }
/* content — title + số: font light */
.cell .eyebrow{ color:var(--tx-mut); }
.cell-lead h3{ font-size:clamp(17px,1.8vw,24px); font-weight:700; letter-spacing:-.02em; line-height:1.25; margin-top:14px; }
.cell-lead p{ color:var(--tx-mut); font-weight:500; margin-top:14px; font-size:14.5px; line-height:1.6; }
.cell-lead .btn{ margin-top:auto; align-self:flex-start; }
.story-lead-img{ width:calc(100% + 52px); margin:-26px -26px 16px -26px; height:clamp(120px,11vw,180px); object-fit:cover; border-radius:var(--ri) var(--ri) 0 0; display:none; flex-shrink:0; }
/* cell-lead dạng thuần ảnh */
/* Feedback 3 (mục 32): ô ảnh trái → nền TRẮNG + ảnh mẫu (vòng tròn xanh/teal), hiện đủ bố cục */
.story-bento .cell-lead-img{ padding:0; background:#fff; display:block; }
.story-bento .cell-lead-img .story-lead-img{ position:absolute; inset:0; width:100%; height:100%; margin:0; border-radius:inherit; object-fit:cover; display:block; z-index:1; }
.story-bento .cell-lead-img::before{ display:none; }
.story-bento .cell-lead-img:hover{ background:#fff !important; box-shadow:0 44px 100px -30px rgba(31,38,90,.4) !important; }
.story-bento .cell-lead-img:hover .story-lead-img{ transform:scale(1.03); }
.story-bento .cell-lead-img .story-lead-img{ transition:transform .6s var(--e); }
/* Mục 3 (task #281): ô "Câu chuyện 5S" dạng ảnh lãnh đạo + quote — overlay đáy khi có nội dung quote */
.story-bento .cell-lead-quote .story-lead-img{ filter:brightness(.7); }
.story-bento .cell-lead-quote .lead-quote{ position:absolute; z-index:2; inset:auto 0 0 0; padding:20px 22px 22px;
  background:linear-gradient(0deg,rgba(10,12,30,.88) 0%,rgba(10,12,30,.55) 55%,rgba(10,12,30,0) 100%); color:#fff; }
.lead-quote .lq-mark{ display:block; font-size:34px; line-height:1; font-weight:800; color:var(--teal); margin-bottom:4px; }
.lead-quote .lq-text{ font-size:14.5px; font-weight:600; line-height:1.5; letter-spacing:-.01em; color:#fff; }
.lead-quote .lq-who{ display:flex; align-items:baseline; gap:8px; margin-top:10px; }
.lead-quote .lq-who b{ font-size:13.5px; font-weight:700; color:#fff; }
.lead-quote .lq-who span{ font-size:11.5px; color:rgba(255,255,255,.72); }
.cell-lead .ss{ display:flex; flex-wrap:wrap; gap:6px; margin-top:16px; }
.cell-lead .ss span{ font-size:11px; font-weight:700; letter-spacing:.04em; padding:5px 11px; border-radius:999px;
  background:rgba(122,77,240,.16); color:var(--purple); }
.cell-stat{ justify-content:flex-end; }
.cell-stat b{ font-size:clamp(40px,4.8vw,64px); font-weight:300; letter-spacing:-.03em; line-height:.9; display:block; color:var(--ink); }
.cell-teal b{ color:var(--teal-d); } .cell-yellow b{ color:var(--orange-d); } .cell-blue b{ color:var(--blue); }
/* Feedback 3 (mục 26/32): ô "2014 Được thành lập" — nền XANH BRAND #011abd (xanh background) */
.story-bento .cell-teal{ background:#011abd; backdrop-filter:none; -webkit-backdrop-filter:none;
  box-shadow:0 30px 66px -30px rgba(1,26,189,.5); color:#fff; }
.story-bento .cell-teal::before{ display:none; }
.story-bento .cell-teal b{ color:#fff !important; }
.story-bento .cell-teal span{ color:rgba(255,255,255,.92); }
.cell-stat span{ display:block; margin-top:12px; font-size:clamp(17px,1.8vw,24px); font-weight:700; letter-spacing:-.02em; opacity:.92; line-height:1.18; }
/* Feedback 4 (mục 10): text Tầm nhìn (Growth Builder...) BỎ bold -> weight thường */
.cell-red .big-line{ font-size:clamp(17px,1.8vw,24px); font-weight:500; letter-spacing:-.02em; line-height:1.35; margin-top:14px; color:var(--ink); }

/* orange — text canh giữa, bên phải là tag dạng viên thuốc xếp chồng */
.story-bento .cell-orange{ flex-direction:row; align-items:center; justify-content:space-between; gap:22px; text-align:left; overflow:visible; }
.cell-orange .o-text{ flex:1; min-width:0; }
.cell-orange .o-grid{ display:flex; align-items:center; gap:18px; }
.cell-orange .o-grid b{ font-weight:300 !important;
  background:linear-gradient(120deg,#0d99fa,#35e9da,#e914ef,#ff7639,#ffed38);
  -webkit-background-clip:text; background-clip:text; color:transparent !important; }
.pill-stack{ flex:none; align-self:flex-end; position:relative; width:clamp(240px,26vw,330px); height:clamp(300px,30vw,380px); }
/* Feedback 3 (mục 21): ô "5 giá trị cốt lõi" chỉ có 5 viên -> physics rơi lệch/lộn xộn.
   TẮT physics (home.js) + xếp chip TĨNH gọn: flex-wrap, canh giữa, không đè absolute. */
.story-bento .cell-orange .pill-stack{
  height:auto; align-self:center;
  display:flex; flex-wrap:wrap; gap:10px; justify-content:center; align-content:center;
}
.story-bento .cell-orange .pill-stack .ptag{
  position:static !important; transform:none !important; opacity:1 !important;
  left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
  font-size:13px !important; padding:9px 17px !important; box-shadow:0 6px 16px -8px rgba(0,0,0,.35);
}
.pill-stack .ptag{ position:absolute; padding:7px 13px; border-radius:999px; font-size:9px; font-weight:700; white-space:nowrap;
  color:#fff; box-shadow:0 14px 28px -10px rgba(0,0,0,.5); transition:transform .35s var(--e); transform-origin:center; }
/* 9 viên thuốc: zigzag trái-phải, cách đều ~11% để không overlap khi fallback CSS */
/* Feedback 3 (mục 24): gom pill về bộ tông lạnh 3 màu brand (xanh/teal/tím),
   bỏ đỏ–cam–vàng cho đỡ rối; giữ nguyên vị trí & z-index. */
/* Feedback 3 (mục 24): pills về 1 TÔNG XANH (bỏ teal & tím), giữ 1 viên trắng
   làm điểm nhấn -> đồng bộ với ô "5 giá trị" xanh, bớt rối. */
/* Feedback 3 (mục 32): 5 pills = 5 màu nhận diện (Strategy·Standard·Synergy·Speed·Success) */
.pill-stack .ptag.t1{ top:-14px;  right:8%;  transform:none; background:#0d99fa; z-index:9; }              /* Strategy */
.pill-stack .ptag.t2{ top:9%;     left:3%;   transform:none; background:#35e9da; color:#063a34; z-index:8; } /* Standard */
.pill-stack .ptag.t3{ top:21%;    right:4%;  transform:none; background:#e914ef; z-index:7; }              /* Synergy */
.pill-stack .ptag.t4{ top:33%;    left:2%;   transform:none; background:#ff7639; z-index:6; }              /* Speed */
.pill-stack .ptag.t5{ top:45%;    right:3%;  transform:none; background:#ffed38; color:#4a3d00; z-index:5; } /* Success */
.pill-stack .ptag.t6{ top:57%;    left:0;    transform:none; background:#7A4DF0; z-index:10; }
.pill-stack .ptag.t7{ top:69%;    right:6%;  transform:none; background:#35e9da; color:#063a34; z-index:4; }
.pill-stack .ptag.t8{ top:80%;    left:4%;   transform:none; background:#137EE8; z-index:3; }
.pill-stack .ptag.t9{ bottom:-8px;right:10%; transform:none; background:#7A4DF0; z-index:2; }

/* bento cell hover - doi mau o manh hon (muc 3) — solid color flip */
.story-bento .cell:hover{ transform:translateY(-8px) scale(1.028); }
/* Feedback 3 (mục 32): ô trắng → hover mỗi ô 1 MÀU NHẬN DIỆN khác nhau (giống trang dự án đổi màu) */
.story-bento .cell-yellow:hover{ background:#0d99fa !important; color:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 52px 120px -28px rgba(13,153,250,.6) !important; }   /* Strategy */
.story-bento .cell-red:hover{ background:#e914ef !important; color:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 52px 120px -28px rgba(233,20,239,.5) !important; }      /* Synergy */
.story-bento .cell-blue:hover{ background:#35e9da !important; color:#063a34 !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 52px 120px -28px rgba(53,233,218,.55) !important; } /* Standard - teal, chữ tối */
.story-bento .cell-lead:hover{ background:#137EE8 !important; color:#fff !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !important; box-shadow:0 52px 120px -28px rgba(19,126,232,.72) !important; }
.story-bento .cell-yellow:hover *,.story-bento .cell-red:hover *{ color:#fff !important; }
.story-bento .cell-blue:hover *{ color:#063a34 !important; }
.story-bento .cell-lead:hover h3,.story-bento .cell-lead:hover p,.story-bento .cell-lead:hover .eyebrow{ color:rgba(255,255,255,.9) !important; }
.story-bento .cell-lead:hover::before,.story-bento .cell-red:hover::before,.story-bento .cell-yellow:hover::before,.story-bento .cell-blue:hover::before{ opacity:0; }
/* ô 2014 (đã xanh đậm) hover → xanh sáng hơn; ô 5-giá-trị (trắng) chỉ nhấc nhẹ giữ nền trắng */
.story-bento .cell-teal:hover{ background:#0a2fe0 !important; transform:translateY(-8px) scale(1.028); box-shadow:0 52px 120px -26px rgba(1,26,189,.6) !important; }
.story-bento .cell-orange:hover{ transform:translateY(-8px) scale(1.028); box-shadow:0 52px 120px -30px rgba(31,38,90,.4) !important; }

/* ============================================================ CLIENTS marquee (full-width, no box) */
.clients{ padding-block:clamp(48px,5vw,72px); }
.clients .chead{ text-align:center; margin-bottom:clamp(26px,3vw,40px); }
.clients .chead h2{ font-size:clamp(22px,2.4vw,32px); font-weight:300; letter-spacing:-.02em; color:var(--ink); }
.clients .chead h2 em{ font-style:normal; color:var(--blue); }
.clients .chead p{ margin-top:10px; color:var(--tx-mut); font-weight:500; font-size:15px; }
.ctabs{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin-bottom:clamp(28px,3.2vw,44px); padding-inline:16px; }
.ctab{ border:1px solid var(--g-brd-2); cursor:pointer; font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px;
  background:rgba(255,255,255,.5); backdrop-filter:var(--blur); -webkit-backdrop-filter:var(--blur); color:var(--tx-mut);
  transition:background .25s, color .25s, border-color .25s; }
.ctab:hover{ color:var(--ink); background:rgba(255,255,255,.8); }
.ctab.on{ background:linear-gradient(96deg,var(--purple),var(--blue)); color:#fff; border-color:transparent; }
/* fade 2 mép (không dùng mask trên .lrow để mix-blend-mode tách nền hoạt động) */
.cli-rows{ position:relative; }
.cli-rows::before,.cli-rows::after{ content:''; position:absolute; top:0; bottom:0; width:8%; z-index:3; pointer-events:none; }
.cli-rows::before{ left:0;  background:linear-gradient(90deg,#edeff9,rgba(237,239,249,0)); }
.cli-rows::after{  right:0; background:linear-gradient(270deg,#edeff9,rgba(237,239,249,0)); }
.lrow{ overflow:hidden; }
.lrow + .lrow{ margin-top:clamp(16px,2vw,28px); }
.ltrack{ display:flex; align-items:center; width:max-content; animation:mq var(--dur,46s) linear infinite; }
.lrow[data-dir="r"] .ltrack{ animation-direction:reverse; }
.lrow:hover .ltrack{ animation-play-state:paused; }
.litem{ flex:none; display:grid; place-items:center; padding-inline:clamp(24px,2.8vw,52px); }
/* logo đã tách nền (PNG trong suốt) — grayscale mặc định, hover ra màu thật */
.litem img{ height:clamp(30px,3.4vw,46px); width:auto; max-width:160px; object-fit:contain;
  filter:grayscale(1); opacity:.7;
  transition:filter .35s, opacity .35s, transform .35s var(--e); }
.litem:hover img{ filter:grayscale(0); opacity:1; transform:scale(1.06); }
@keyframes mq{ to{ transform:translateX(-50%); } }

/* ============================================================ SERVICES (khối + ảnh + mô tả ngắn) */
/* Dịch vụ — card landscape solid, nghiêng & đè chéo ascending, title ngang canh giữa, nút pill xanh */
.svc-grid{ display:flex; justify-content:center; align-items:center; flex-wrap:nowrap; padding:84px clamp(80px,7vw,110px) 40px clamp(0px,3vw,40px); }
#services{ padding-bottom:clamp(18px,2vw,34px); }
/* Feedback 4 (mục 1 - chốt): MẶC ĐỊNH thẻ nền TRẮNG kính mờ, chữ tối. HOVER mới hiện
   nền gradient tương ứng (ảnh gán ở biến --hb, đổ vào lớp .svc::before). */
.svc{ flex:none; width:clamp(180px,22vw,300px); height:clamp(112px,11.5vw,158px); border-radius:22px;
  background:rgba(255,255,255,.62); color:#14172E; position:relative; cursor:pointer; overflow:hidden;
  margin-inline:clamp(-52px,-4.2vw,-36px); transform:rotate(-24deg); transform-origin:center;
  display:flex; align-items:stretch; padding:20px;
  backdrop-filter:blur(14px) saturate(150%) brightness(1.04); -webkit-backdrop-filter:blur(14px) saturate(150%) brightness(1.04);
  box-shadow:0 30px 60px -26px rgba(20,23,46,.45); transition:transform .5s var(--e), box-shadow .5s;
  scroll-snap-align:start; }
.svc:first-child{ margin-left:0; } .svc:last-child{ margin-right:0; }
/* Lớp nền gradient: nằm dưới nội dung, mờ 0 khi nghỉ, hiện dần khi hover.
   Ảnh nền theo từng thẻ (đường dẫn tương đối theo FILE CSS này = template/assets/css/pages/). */
.svc::before{ content:""; position:absolute; inset:0; border-radius:inherit; z-index:0; pointer-events:none;
  background-size:cover; background-position:center;
  opacity:0; transition:opacity .5s var(--e); }
.svc.sb1::before{ background-image:var(--svc-custom-bg,url(../../img/svc-bg-1.jpg)); }  /* box1: xanh -> vàng */
.svc.sb2::before{ background-image:var(--svc-custom-bg,url(../../img/svc-bg-2.jpg)); }  /* box2: teal -> trắng -> hồng */
.svc.sb3::before{ background-image:var(--svc-custom-bg,url(../../img/svc-bg-3.jpg)); }  /* box3: xanh - teal - trắng */
.svc.sb4::before{ background-image:var(--svc-custom-bg,url(../../img/svc-bg-4.jpg?v=2)); }  /* box4: cam -> hồng tím (?v=2 bust cache ảnh cũ) */
.svc.sb5::before{ background-image:var(--svc-custom-bg,url(../../img/svc-bg-5.jpg?v=2)); }  /* box5: vàng -> coral (?v=2 bust cache ảnh cũ) */
.svc:hover::before{ opacity:1; }
.svc:hover{ transform:rotate(-10deg) translateY(-22px) scale(1.04); z-index:30;
  box-shadow:0 52px 92px -30px rgba(20,23,46,.5); }
/* Chữ luôn tối, thêm quầng sáng nhẹ để nổi trên nền gradient khi hover */
.svc:hover .svc-in{ text-shadow:0 1px 10px rgba(255,255,255,.75); }
.svc .svc-btn .ic{ background:#137EE8; color:#fff; box-shadow:0 8px 18px -8px rgba(19,126,232,.7); }
.svc-dots{ bottom:20px !important; }
.svc-dots .swiper-pagination-bullet{ background:var(--purple); opacity:.3; }
.svc-dots .swiper-pagination-bullet-active{ opacity:1; }
.svc .svc-in{ position:relative; z-index:2; flex:1; display:flex; flex-direction:column; justify-content:space-between; align-items:flex-start; text-align:left; }
.svc h4{ max-width:60%; font-size:clamp(13px,1.4vw,18px); font-weight:800; line-height:1.22; letter-spacing:-.015em; color:#14172E; }
/* nút: icon tròn xanh brand (mũi tên giữa) + text, không nền */
.svc .svc-btn{ position:relative; display:inline-flex; align-items:center; gap:10px; background:none; padding:0; box-shadow:none;
  font-weight:700; font-size:13px; letter-spacing:.01em; color:#14172E; }
.svc .svc-btn .bt{ position:relative; z-index:1; transition:transform .55s var(--e), opacity .4s ease; }
.svc .svc-btn .ic{ position:relative; z-index:2; width:34px; height:34px; border-radius:50%; background:#137EE8; color:#fff; flex:none;
  display:grid; place-items:center; font-size:15px; box-shadow:0 8px 18px -8px rgba(19,126,232,.7); transition:transform .55s var(--e); }
/* hover: mũi tên chạy sang phải, text trượt sang trái về đúng chỗ mũi tên lúc chưa hover */
.svc:hover .svc-btn .ic{ transform:translateX(var(--run,44px)); }
.svc:hover .svc-btn .bt{ transform:translateX(calc(-1 * var(--run2,44px))); }

/* nút icon + text dùng chung (cùng style với section dịch vụ): Tìm hiểu thêm / Xem thêm */
.run-btn{ position:relative; display:inline-flex; align-items:center; gap:10px; background:none; padding:0;
  font-weight:700; font-size:13px; letter-spacing:.01em; color:var(--ink); cursor:pointer; }
.run-btn .bt{ position:relative; z-index:1; transition:transform .55s var(--e); }
.run-btn .ic{ position:relative; z-index:2; width:34px; height:34px; border-radius:50%; background:var(--blue); color:#fff; flex:none;
  display:grid; place-items:center; font-size:15px; box-shadow:0 8px 18px -8px rgba(19,126,232,.7); transition:transform .55s var(--e); }
.run-btn:hover .ic, .post:hover .run-btn .ic, .sol-post:hover .run-btn .ic{ transform:translateX(var(--run,44px)); }
.run-btn:hover .bt, .post:hover .run-btn .bt, .sol-post:hover .run-btn .bt{ transform:translateX(calc(-1 * var(--run2,44px))); }

/* ============================================================ 9 GIẢI PHÁP (article marquee full-width) */
.sol{ position:relative; }
#solutions{ margin-top:clamp(20px,3vw,52px); }
#solutions .sec-head{ max-width:none; }
#solutions .sec-head .title{ white-space:nowrap; }
@media (max-width:1024px){ #solutions .sec-head .title{ white-space:normal; } }
.sol-strip{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.sol-track{ display:flex; gap:18px; width:max-content; padding:18px 9px 30px; animation:mq var(--d,64s) linear infinite; }
.sol-strip:hover .sol-track{ animation-play-state:paused; }
.sol-post{ flex:none; width:clamp(278px,23vw,360px); border-radius:var(--ri); overflow:hidden; padding:13px;
  display:flex; flex-direction:column; background:rgba(255,255,255,.42);
  backdrop-filter:blur(13px) saturate(180%) brightness(1.03); -webkit-backdrop-filter:blur(13px) saturate(180%) brightness(1.03);
  border:2px solid rgba(255,255,255,.5);
  box-shadow:0 20px 46px -26px rgba(31,38,90,.42), inset 0 1px 1px rgba(255,255,255,.7);
  transition:transform .4s var(--e), box-shadow .4s; }
/* Feedback 3 (mục 29): hover ĐỔI QUA NHIỀU MÀU (gradient 5 màu nhận diện chảy động) */
.sol-post:hover{ transform:translateY(-8px) scale(1.028); border-color:rgba(122,77,240,.3);
  background:linear-gradient(120deg, rgba(13,153,250,.30), rgba(53,233,218,.26), rgba(233,20,239,.22), rgba(255,118,57,.26), rgba(255,237,56,.30), rgba(13,153,250,.30)), #ffffff;
  background-size:230% 100%, auto; animation:dvColorFlow 3.6s linear infinite;
  box-shadow:0 36px 90px -18px rgba(122,77,240,.5), inset 0 1px 1px rgba(255,255,255,.95); }
.sol-post:hover h4{ color:#7A4DF0; }
.sol-post .im{ aspect-ratio:16/10; border-radius:var(--ri-sm); overflow:hidden; }
.sol-post .im img{ width:100%; height:100%; object-fit:cover; transition:transform .8s var(--e); }
.sol-post:hover .im img{ transform:scale(1.05); }
.sol-post h4{ font-size:16px; font-weight:700; letter-spacing:-.015em; color:var(--ink); margin:14px 6px 0; line-height:1.3; }
.sol-post p{ font-size:13px; color:var(--tx-mut); line-height:1.55; font-weight:500; margin:9px 6px 0; }
.sol-post .slink{ margin:16px 6px 4px; }

/* ============================================================ PROJECTS marquee */
.pstrip{ overflow:hidden; -webkit-mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 4%,#000 96%,transparent); }
.ptrack{ display:flex; gap:16px; width:max-content; animation:mq var(--d,72s) linear infinite; }
.pstrip:hover .ptrack{ animation-play-state:paused; }
.pblock{ display:flex; flex-direction:column; gap:16px; height:clamp(320px,36vw,430px); flex:none; }
.pblock.b-tall{ width:clamp(230px,22vw,320px); }
.pblock.b-stack{ width:clamp(270px,26vw,370px); }
.pblock.b-wide{ width:clamp(380px,36vw,540px); }
.proj{ position:relative; border-radius:var(--ri-sm); overflow:hidden; flex:1; display:block; min-height:0;
  border:1px solid var(--g-brd-2); }
.proj img{ width:100%; height:100%; object-fit:cover; transition:transform .9s var(--e); }
.proj:hover img{ transform:scale(1.06); }
.proj::after{ content:""; position:absolute; inset:0; background:linear-gradient(185deg,transparent 36%,rgba(12,14,34,.88)); }
.proj .m{ position:absolute; inset:auto 0 0 0; z-index:2; padding:18px; color:#fff; }
.proj .cat{ font-size:10px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.proj .m h4{ font-size:15px; font-weight:700; letter-spacing:-.015em; margin-top:5px; line-height:1.22; }
.proj .pill{ position:absolute; top:13px; left:13px; z-index:2; font-size:10px; font-weight:700; letter-spacing:.05em; color:#fff;
  padding:5px 12px; border-radius:999px; background:rgba(12,14,34,.4); backdrop-filter:blur(8px); border:1px solid rgba(255,255,255,.18); }

/* ============================================================ TESTIMONIALS */
.voices-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; }
.q{ padding:26px; border-radius:var(--ri); display:flex; flex-direction:column; }
.q .qm{ font-size:46px; line-height:.5; font-weight:800; color:var(--ac,var(--teal-d)); height:26px; }
.q p{ font-size:15px; font-weight:500; line-height:1.55; color:var(--tx); margin:18px 0 auto; }
.q .who{ display:flex; align-items:center; gap:12px; margin-top:24px; }
.q .who img{ width:42px; height:42px; border-radius:50%; object-fit:cover; }
.q .who b{ display:block; font-size:13.5px; font-weight:700; color:var(--ink); }
.q .who span{ font-size:12px; color:var(--tx-faint); }

/* ============================================================ NEWS */
/* NEWS LIST — danh sach theo ngay (trang chu) */
.news-list { display:flex; flex-direction:column; }
.news-list-item {
  display:flex; align-items:center; gap:20px;
  padding:15px 12px;
  border-bottom:1px solid rgba(20,23,51,.09);
  text-decoration:none;
  transition:background .2s, padding-left .2s;
  border-radius:8px;
}
.news-list-item:first-child { border-top:1px solid rgba(20,23,51,.09); }
.news-list-item:hover { background:rgba(20,23,51,.035); padding-left:18px; }
.nli-date {
  font-size:12px; font-weight:600; color:var(--tx-faint);
  white-space:nowrap; min-width:116px; flex-shrink:0;
}
.nli-tag {
  display:inline-block; font-size:10px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase;
  padding:3px 10px; border-radius:3px;
  white-space:nowrap; flex-shrink:0; min-width:120px; text-align:center;
}
.nli-tag.tag-5snews    { background:rgba(0,163,137,.13); color:#00735f; }
.nli-tag.tag-marketing { background:rgba(230,60,60,.11);  color:#b82222; }
.nli-tag.tag-ai        { background:rgba(60,120,240,.12); color:#2456b8; }
.nli-tag.tag-brand     { background:rgba(140,60,220,.11); color:#6d28c4; }
.nli-tag.tag-default   { background:rgba(20,23,51,.08);   color:var(--tx-mut); }
.nli-title {
  font-size:15px; font-weight:500; color:var(--ink);
  line-height:1.35; flex:1; transition:color .2s;
}
.news-list-item:hover .nli-title { color:var(--blue); }

/* ============================================================ CTA */
.cta-band{ position:relative; overflow:hidden; text-align:center; padding:clamp(48px,6vw,84px) clamp(24px,4vw,64px);
  border-radius:clamp(24px,3vw,36px); }
.cta-band h2{ font-size:clamp(26px,3.2vw,46px); font-weight:300; letter-spacing:-.03em; line-height:1.06; color:var(--ink); }
.cta-band h2 .g-warm{ font-weight:500; }
.cta-band p{ color:var(--tx-mut); max-width:52ch; margin:20px auto 32px; font-size:16px; font-weight:500; }
.cta-band .cta-row{ display:flex; gap:12px; justify-content:center; flex-wrap:wrap; margin-top:32px; }

/* ============================================================ FOOTER (3 cột: brand · nav+CTA · liên hệ+form) */
footer{ margin-top:clamp(40px,5vw,80px); background:rgba(20,23,51,.035); }
.foot-inner{ padding:0 clamp(20px,11.5vw,160px) clamp(22px,2.4vw,34px); }
.foot-rule{ height:3px; background:var(--red); margin-bottom:clamp(26px,3vw,40px); }
.foot-top{ display:grid; grid-template-columns:1.15fr 1.35fr 1fr; align-items:start; gap:clamp(28px,3vw,56px); }
.foot-top .fcol{ min-width:0; }
.fcol-brand{ display:flex; flex-direction:column; gap:16px; }
.foot-logo{ display:inline-block; }
.foot-logo img{ height:44px; width:auto; display:block; }
.foot-intro{ font-size:13.5px; line-height:1.7; color:var(--tx-mut); max-width:340px; font-weight:500; }
.fcol-nav{ padding-left:clamp(0px,1.4vw,28px); border-left:1px solid rgba(20,23,51,.14); }
.fnav-grid{ list-style:none; display:grid; grid-template-columns:1fr 1fr; grid-template-rows:repeat(4, 46px); grid-auto-flow:column; column-gap:44px; row-gap:0; margin:0; padding:0; align-items:center; }
.fnav-grid li{ list-style:none; display:flex; align-items:center; }
.fnav-grid a{ font-size:14.5px; color:var(--ink); font-weight:600; transition:color .2s; }
.fnav-grid a:hover{ color:var(--purple); }
.fnav-grid .fcta{ display:inline-flex; align-items:center; padding:9px 18px; border-radius:999px;
  background:rgba(250,49,99,.10); color:var(--red); font-weight:700; font-size:13.5px; width:fit-content; }
.fnav-grid .fcta:hover{ background:var(--red); color:#fff; }
.fcol-contact{ padding-left:clamp(0px,1.4vw,28px); border-left:1px solid rgba(20,23,51,.14); display:flex; flex-direction:column; gap:18px; }
footer h5{ font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tx-faint); margin-bottom:12px; font-weight:700; }
.fcol-contact .fblock{ display:flex; flex-direction:column; gap:6px; }
.fcol-contact p{ font-size:13.5px; color:var(--tx-mut); line-height:1.8; margin:0; }
.fcol-contact a{ color:var(--ink); font-weight:600; transition:color .2s; }
.fcol-contact a:hover{ color:var(--purple); }
.foot-nl{ display:flex; gap:8px; margin-top:10px; max-width:320px; }
.foot-nl input{ flex:1; min-width:0; font-family:inherit; font-size:13px; padding:11px 15px; border-radius:999px;
  border:1px solid var(--g-brd-2); background:rgba(255,255,255,.7); color:var(--ink); outline:none; }
.foot-nl input::placeholder{ color:var(--tx-faint); }
.foot-nl .btn{ padding:10px 18px; }
.socials{ display:flex; gap:10px; margin-top:4px; }
.socials a{ width:36px; height:36px; border-radius:50%; display:grid; place-items:center; background:rgba(20,23,51,.06);
  color:var(--tx-mut); transition:background .25s, color .25s, transform .3s var(--e); }
.socials a:hover{ background:linear-gradient(135deg,var(--purple),var(--blue)); color:#fff; transform:translateY(-3px); }
.socials a svg{ width:16px; height:16px; }
.foot-b{ display:flex; justify-content:space-between; align-items:center; gap:18px; flex-wrap:wrap;
  margin-top:clamp(26px,2.6vw,38px); padding-top:20px; border-top:1px solid rgba(20,23,51,.1); font-size:12.5px; color:var(--tx-faint); }
.foot-b .lang b{ color:var(--tx-mut); }



/* ============================================================ RESPONSIVE */
@media (max-width:1080px){
  .story-bento{ grid-template-columns:repeat(2,1fr); grid-auto-rows:auto; }
  .story-bento .cell{ grid-column:auto !important; grid-row:auto !important; min-height:160px; }
  .cell-lead,.cell-red,.cell-orange{ grid-column:1 / -1 !important; }
  .svc-grid{ flex-wrap:wrap; gap:14px; padding:24px 0; }
  .svc{ margin-inline:0 !important; transform:none !important; width:clamp(150px,30vw,240px); height:clamp(140px,26vw,180px); scroll-snap-align:start; scroll-snap-stop:always; }
  html:has(#services){ scroll-snap-type:y proximity; }
  .svc:hover{ transform:translateY(-10px) !important; }
  .foot-top{ grid-template-columns:1fr 1fr; gap:32px 40px; }
  .fcol-nav, .fcol-contact{ border-left:none; padding-left:0; }
  .fcol-brand{ grid-column:1 / -1; }
}
@media (max-width:1299px){
  .menu, .nav-cta .btn-primary span.lbl{ display:none; }
  .burger{ display:grid; }
  .news-grid{ grid-template-columns:1fr; }
  .menu.mobile-open{ display:grid; position:absolute; top:calc(100% + 8px); left:0; right:0; margin:0 clamp(14px,3vw,28px);
    background:rgba(255,255,255,.85); backdrop-filter:var(--blur); border:1px solid var(--g-brd); border-radius:20px;
    padding:12px; gap:2px; box-shadow:var(--g-sh); }
  .menu.mobile-open .menu-item{ width:100%; }
  .menu.mobile-open .menu-link{ width:100%; justify-content:space-between; }
  .menu.mobile-open .mega{ position:static; transform:none; opacity:1; visibility:visible; pointer-events:auto;
    box-shadow:none; border:none; background:transparent; min-width:0; padding:0 8px 8px; backdrop-filter:none; }
  .menu.mobile-open .mega.two-col{ min-width:0; }
  .menu.mobile-open .mega.two-col .mega-list{ grid-template-columns:1fr; }
  .menu.mobile-open .mega-head{ display:none; }
  .menu.mobile-open .menu-item:not(.open) .mega{ display:none; }
}
@media (max-width:767px){
  .voices-grid{ grid-template-columns:1fr; }
  /* voices swiper mobile — t289-m4 */
  .voices-swiper{ padding-bottom:44px; }
  .voices-dots .swiper-pagination-bullet{ background:var(--purple); opacity:.3; }
  .voices-dots .swiper-pagination-bullet-active{ opacity:1; }

  /* "9 giải pháp": physics đã bị tắt ở mobile (home.js) -> pill hiển thị dạng
     CHIP xếp gọn, wrap nhiều dòng, KHÔNG tràn/không bị cắt như bản physics. */
  .story-bento .cell-orange{ flex-direction:column; align-items:stretch; overflow:hidden; }
  .story-bento .cell-orange .pill-stack{
    position:static; width:100%; height:auto; margin-top:14px; align-self:auto;
    display:flex; flex-wrap:wrap; gap:8px; justify-content:center;
  }
  .story-bento .cell-orange .pill-stack .ptag{
    position:static !important; transform:none !important; opacity:1 !important;
    left:auto !important; top:auto !important; right:auto !important; bottom:auto !important;
    margin:0 !important; font-size:11px !important; padding:6px 12px !important; line-height:1.1;
  }
}
@media (max-width:620px){
  /* Hero CTA mobile: 2 nút thu nhỏ, dạng chip cạnh nhau ở góc phải như thông báo nhanh */
  .hero-cta{ display:flex !important; flex-direction:row !important; flex-wrap:nowrap !important; justify-content:flex-end !important; align-items:center; gap:8px; margin-top:24px; margin-left:auto; }
  .hero-cta .btn{ padding:7px 7px 7px 14px !important; font-size:12.5px !important; gap:6px !important; box-shadow:0 8px 22px -12px rgba(19,126,232,.5); }
  .hero-cta .btn .ic{ width:22px !important; height:22px !important; font-size:11px !important; }
  .hero-cta .btn .lbl{ font-size:12px; }
  /* Bento Grid "Về 5S Media" mobile */
  .story-bento{ display:grid; grid-template-columns:2fr 1fr; grid-auto-rows:auto; gap:18px; }
  .story-bento .cell{ grid-column:auto !important; grid-row:auto !important; min-height:0; border-radius:20px; padding:18px; }
  .story-bento .cell-lead{ grid-column:1 / -1 !important; order:1; min-height:200px; }
  .story-bento .cell-lead-img{ min-height:200px; padding:0; }
  .story-bento .cell-red{ grid-column:1 / -1 !important; order:2; padding:22px; }
  .story-bento .cell-teal{ grid-column:1 / -1 !important; order:3; padding:20px 22px; min-height:110px; display:flex; flex-direction:row; align-items:center; justify-content:space-between; gap:14px; }
  .story-bento .cell-teal b{ font-size:clamp(28px,8vw,38px) !important; line-height:1; }
  .story-bento .cell-teal span{ font-size:12.5px !important; line-height:1.3; margin-top:0; text-align:right; }
  .story-bento .cell-yellow{ grid-column:1 !important; order:4; aspect-ratio:auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:18px; min-height:110px; }
  .story-bento .cell-blue{ grid-column:2 !important; order:4; aspect-ratio:auto; display:flex; flex-direction:column; justify-content:center; align-items:flex-start; padding:18px; min-height:110px; }
  .story-bento .cell-yellow b, .story-bento .cell-blue b{ font-size:clamp(24px,6.5vw,32px) !important; line-height:1; }
  .story-bento .cell-yellow span, .story-bento .cell-blue span{ font-size:11.5px !important; line-height:1.3; margin-top:4px; }
  /* order + full-width; KHÔNG max-height (trước đây 355px cắt mất hàng chip cuối).
     Layout pill dạng chip kế thừa từ block @media(max-width:767px) ở trên. */
  .story-bento .cell-orange{ grid-column:1 / -1 !important; order:5; min-height:0; padding:20px; }
  .story-bento .cell-orange .o-text{ margin-bottom:12px; }
  .story-bento .cell-orange .o-grid{ display:flex; align-items:center; gap:14px; }
  .foot-top{ grid-template-columns:1fr; }
  .svc-grid{ flex-direction:column; align-items:stretch; padding:16px 0; scroll-snap-type:y proximity; }
  .svc{ width:100% !important; height:auto; min-height:140px; margin-inline:0 !important; scroll-snap-align:start; scroll-snap-stop:always; }
  .svc h4{ max-width:80%; font-size:11.5px; line-height:1.2; }
  .svc .svc-btn .ic{ width:27px; height:27px; font-size:13px; }
}
@media (prefers-reduced-motion:reduce){
  *{ animation-duration:.001s !important; transition:none !important; }
  .rv{ opacity:1; transform:none; filter:none; }
  .ltrack,.ptrack{ animation:none !important; }
}


/* FC-START floating contact + back-to-top */
.float-cta{ position:fixed; right:20px; bottom:20px; z-index:160; display:flex; flex-direction:column; gap:12px; }
.fc-btn{ width:52px; height:52px; border-radius:50%; display:grid; place-items:center; color:#fff; font-weight:700;
  border:0; padding:0; cursor:pointer; background:transparent; -webkit-tap-highlight-color:transparent;
  box-shadow:0 10px 26px -8px rgba(0,0,0,.45); transition:transform .35s var(--e), box-shadow .35s var(--e), opacity .3s, visibility .3s; }
.fc-btn:hover{ transform:scale(1.08) translateY(-2px); box-shadow:0 16px 34px -10px rgba(0,0,0,.55); }
.fc-btn:active{ transform:scale(.96); }
.fc-btn svg{ width:25px; height:25px; display:block; }
.fc-btn .fc-lbl{ font-size:12.5px; letter-spacing:.2px; }
.float-cta .zalo{ background:#0068FF; }
.float-cta .mess{ background:radial-gradient(circle at 30% 110%, #009DFF 0%, #2A7FFF 32%, #7C44F0 66%, #FF5C87 100%); }
.float-cta .hotline{ background:#16C784; }
.float-cta .hotline svg{ width:24px; height:24px; }
.float-cta .totop{ background:rgba(20,23,51,.85); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:none; }
.float-cta .totop.show{ display:grid; animation:fcPop .32s var(--e); }
@keyframes fcPop{ from{ opacity:0; transform:scale(.55) translateY(8px); } to{ opacity:1; transform:none; } }
@media (max-width:600px){ .float-cta{ right:14px; bottom:14px; gap:10px; } .fc-btn{ width:48px; height:48px; } }

/* NEWS MOBILE: tiêu đề full-width bên dưới date+tag — t289-m2 */
@media (max-width:768px){
  .news-list-item{
    display:flex;
    flex-wrap:wrap;
    align-items:center;
    gap:4px 10px;
  }
  .nli-date{ flex:0 0 auto; min-width:0; }
  .nli-tag{ flex:0 0 auto; min-width:0; }
  .nli-title{ flex:0 0 100%; font-size:14px; margin-top:2px; }
}
/* FC-END */

/* hide drawer globally — show only via JS + fixed-position in mobile breakpoint */
.m-drawer-overlay,.m-drawer{ display:none; }
/* === MOBILE BENTO DRAWER (t294-m1) === */
@media (max-width:1299px){
  .m-drawer-overlay{
    display:none; position:fixed; inset:0; z-index:300;
    background:rgba(20,23,51,.45); backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    opacity:0; transition:opacity .35s;
  }
  .m-drawer-overlay.is-open{ display:block; animation:mdOverlayIn .35s forwards; }
  @keyframes mdOverlayIn{ to{ opacity:1; } }
  .m-drawer{
    position:fixed; top:0; right:0; bottom:0; z-index:301;
    width:min(88vw,360px);
    background:rgba(255,255,255,.95); backdrop-filter:blur(20px) saturate(180%);
    -webkit-backdrop-filter:blur(20px) saturate(180%);
    border-left:1px solid var(--g-brd);
    box-shadow:-24px 0 60px -10px rgba(20,23,51,.18);
    transform:translateX(110%);
    transition:transform .38s cubic-bezier(.32,0,.15,1);
    display:flex; flex-direction:column;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .m-drawer.is-open{ transform:translateX(0); }
  .m-drawer-head{
    display:flex; align-items:center; justify-content:space-between;
    padding:18px 18px 14px; border-bottom:1px solid var(--g-brd); flex:none;
  }
  .m-drawer-logo{ height:30px; }
  .m-drawer-close{
    width:36px; height:36px; border-radius:50%;
    border:1px solid var(--g-brd-2); background:transparent;
    cursor:pointer; display:grid; place-items:center;
    color:var(--ink); transition:background .2s;
    -webkit-tap-highlight-color:transparent;
  }
  .m-drawer-close:hover{ background:var(--g-bg); }
  .m-drawer-close svg{ width:16px; height:16px; }
  .m-bento{
    display:grid; grid-template-columns:1fr 1fr;
    gap:10px; padding:16px; flex:1; align-content:start;
  }
  .m-bento-card{
    display:flex; flex-direction:column; align-items:center; justify-content:center;
    gap:9px; text-decoration:none;
    background:rgba(245,247,252,.9); border:1px solid var(--g-brd);
    border-radius:16px; padding:20px 12px; min-height:108px;
    color:var(--ink); font-weight:600; font-size:13px; text-align:center;
    transition:background .2s, transform .18s, box-shadow .18s;
    -webkit-tap-highlight-color:transparent;
  }
  .m-bento-card:hover{ background:#fff; transform:translateY(-2px); box-shadow:0 8px 24px -6px rgba(20,23,51,.12); }
  .m-bento-card:active{ transform:scale(.96); }
  .m-bento-card svg{ width:26px; height:26px; color:var(--blue); flex:none; }
  .m-bento-cta{
    grid-column:1/-1; display:flex; align-items:center; justify-content:center; gap:10px;
    text-decoration:none; background:var(--blue); color:#fff; font-weight:700; font-size:14px;
    border-radius:14px; padding:15px 20px;
    transition:background .2s, box-shadow .2s, transform .15s;
    -webkit-tap-highlight-color:transparent;
  }
  .m-bento-cta svg{ color:#fff; width:20px; height:20px; flex:none; }
  .m-bento-cta:hover{ background:#0f6bcc; box-shadow:0 10px 28px -8px rgba(19,126,232,.45); }
  .m-bento-cta:active{ transform:scale(.98); }
}


.lrow,.sol-strip,.pstrip{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:pan-y;}

/* VP-57: 3 hàng logo khách hàng ở clients, 1 hàng cho partners; litem width 6/desktop, 3/mobile */
#partners .cli-rows .lrow:not(:first-child){ display:none !important; }
.cli-rows .litem{ flex-basis:calc(100vw / 6) !important; max-width:calc(100vw / 6) !important; padding-inline:clamp(8px,1.5vw,20px) !important; }
@media(max-width:820px){
  /* "logo bị dính nhau" ở mobile: rule trên chỉ ép BỀ RỘNG Ô (flex-basis), còn ảnh vẫn
     width:auto theo tỉ lệ gốc (.litem img mặc định). Logo dạng chữ nằm ngang (ORACLE,
     temenos, Panasonic) ở chiều cao cố định tự nhiên rộng hơn ô ~130px trên điện thoại,
     và .litem không có overflow:hidden nên ảnh tràn thẳng đè lên logo bên cạnh.
     Bản sửa đầu (giữ display:grid, cho img height:100%) hoá ra ĐỔI SANG LỖI KHÁC: đo
     trực tiếp trên trình duyệt thấy height:100% trên <img> không resolve về chiều cao
     khung — .litem có display:grid;place-items:center (item KHÔNG stretch), nên containing
     block để tính % chiều cao của item không xác định -> browser coi như height:auto,
     ảnh giữ nguyên tỉ lệ gốc và VẪN cao hơn khung -> vẫn tràn/cắt (logo 2 dòng như Hitachi
     bị cắt mất "Inspire the Next"). Đây là cạm bẫy CSS Grid quen thuộc: item không stretch
     thì containing block cho % không chắc là definite, dù bản thân container đã có
     height cố định.
     Đổi hẳn .litem sang display:flex — flexbox không dính cạm bẫy này, item lấy đúng
     chiều cao hàng, ảnh giữ nguyên tỉ lệ. Đã đo lại: mọi logo (kể cả Hitachi 2 dòng, tỉ lệ
     rộng như Oracle/temenos) đúng 30px cao, bề rộng tự co theo tỉ lệ, không tràn không cắt. */
  .cli-rows .litem{
    flex-basis:calc(100vw / 3) !important; max-width:calc(100vw / 3) !important;
    display:flex !important; align-items:center !important; justify-content:center !important;
    height:clamp(30px,3.4vw,46px) !important;
    overflow:hidden;
  }
  .cli-rows .litem img{
    height:100% !important; width:auto !important; max-width:100% !important;
    object-fit:contain !important;
  }
}

/* VP-67: nới rộng tiêu đề "Về 5S Media" trên trang chủ về 2 hàng */
#intro .sec-head{ max-width:1200px !important; }

/* Feedback 3 (mục 10): dải nền brand cho CTA (đồng bộ trang chủ & About), CTA rõ ràng hơn */
.cta-band{ background:linear-gradient(135deg,rgba(19,126,232,.09),rgba(122,77,240,.11)); border:1px solid rgba(20,23,51,.07); }

/* ============================================================
   FEEDBACK 6
   ============================================================ */

/* (mục 2) Mobile: "ô có câu quote vẫn để hình vuông đảm bảo hiển thị hình ảnh đầy đủ".
   Đo ở 420px: ô 365x200 (tỉ lệ 1.82) trong khi ảnh gốc 2398x2560 (tỉ lệ 0.94, gần vuông)
   -> object-fit:cover cắt mất ~45% chiều cao. Ô vuông thì ảnh 0.94 chỉ mất ~6%. */
@media(max-width:820px){
  .story-bento .cell-lead-img{
    aspect-ratio:1 / 1;
    height:auto !important;
    min-height:0 !important;
  }
}

/* (mục 3) Mobile: "lướt giải pháp và dự án không mượt, cần cải thiện độ nhạy và tốc độ".
   Nguyên nhân KHÔNG phải chậm mà là mất hẳn cuộn ngang của hệ điều hành:
     overflow-x:hidden      -> không có vùng cuộn
     touch-action:pan-y     -> khai báo "chỉ vuốt dọc"
     initDrag() preventDefault ngay pointerdown, kéo bằng transform, KHÔNG có quán tính
   Nhả tay là dừng phắt rồi marquee chạy tiếp -> cảm giác đơ.
   Trả về cuộn native: quán tính/fling do OS lo, luôn mượt hơn mô phỏng bằng JS.
   Chỉ áp cho thiết bị cảm ứng -> desktop giữ nguyên marquee tự chạy. */
@media (max-width:820px), (hover:none) and (pointer:coarse){
  .sol-strip,.pstrip{
    overflow-x:auto !important;
    overflow-y:hidden;
    touch-action:pan-x pan-y !important;
    -webkit-overflow-scrolling:touch;
    overscroll-behavior-x:contain;
    scroll-snap-type:x proximity;
    scroll-padding-inline:16px;
    cursor:auto !important;
    scrollbar-width:none;
    /* mask 2 mép của bản desktop làm thẻ đầu/cuối bị mờ khi cuộn tay -> bỏ */
    -webkit-mask-image:none !important; mask-image:none !important;
  }
  .sol-strip::-webkit-scrollbar,.pstrip::-webkit-scrollbar{ width:0; height:0; display:none; }
  .sol-track,.ptrack{
    animation:none !important;
    transform:none !important;
    width:max-content !important;
    scroll-snap-align:none;
  }
  .sol-track > *,.ptrack > *{ scroll-snap-align:start; }
  /* chừa lề để thẻ đầu/cuối không dính sát mép màn hình */
  .sol-track{ padding-inline:16px !important; }
  .ptrack{ padding-inline:16px !important; }
}