:root {
      /* brand orange sampled from the official Wicell logo */
      --o: #F57D22;
      --o-dk: #D9660E;
      --o-lt: #FEF2E8;
      --o-mid: #FBC79B;
      /* ink */
      --k: #0C0C0C;
      --k2: #171717;
      --k3: #242424;
      --k4: #333333;
      --t1: #111318;
      --t2: #3E434D;
      --t3: #6A707C;
      --t4: #9AA0AB;
      /* light surfaces — Ruijie-style airy neutrals */
      --w: #FFFFFF;
      --s1: #FAFBFC;
      --s2: #F3F5F8;
      --s3: #EAEEF3;
      --ln: #E6E9EE;
      --ln2: #D5DAE2;
      --r: 8px;
      --rl: 14px;
      --rx: 22px;
      --rp: 999px;
      --max: 1360px;
      --hdr: 74px;
    }

    * {
      box-sizing: border-box
    }

    html {
      scroll-behavior: smooth
    }

    body {
      margin: 0;
      background: var(--w);
      color: var(--t2);
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 17px;
      line-height: 1.65;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden
    }

    h1,
    h2,
    h3,
    h4,
    h5 {
      margin: 0 0 .5em;
      color: var(--t1);
      font-weight: 700;
      line-height: 1.16;
      letter-spacing: -.028em
    }

    h1 {
      font-size: clamp(38px, 5vw, 60px);
      letter-spacing: -.04em;
      line-height: 1.08
    }

    h2 {
      font-size: clamp(27px, 3.3vw, 40px);
      letter-spacing: -.033em
    }

    h3 {
      font-size: clamp(20px, 2vw, 25px)
    }

    h4 {
      font-size: 18px;
      letter-spacing: -.018em
    }

    p {
      margin: 0 0 1em
    }

    a {
      color: inherit;
      text-decoration: none;
      cursor: pointer
    }

    img {
      max-width: 100%;
      display: block
    }

    .mono {
      font-family: "Be Vietnam Pro", sans-serif
    }

    .wrap {
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 40px
    }

    @media(max-width:700px) {
      .wrap {
        padding: 0 20px
      }
    }

    .sec {
      padding: 104px 0;
      position: relative
    }

    @media(max-width:860px) {
      .sec {
        padding: 66px 0
      }
    }

    .s-w {
      background: var(--w)
    }

    .s-1 {
      background: var(--s1)
    }

    .s-2 {
      background: linear-gradient(180deg, var(--s1) 0%, var(--s2) 50%, var(--s1) 100%)
    }

    .s-3 {
      background: linear-gradient(180deg, var(--w) 0%, var(--s2) 100%)
    }

    .s-4 {
      background: linear-gradient(180deg, var(--s2) 0%, var(--w) 100%)
    }

    .eyeb {
      display: block;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .19em;
      text-transform: uppercase;
      color: var(--o);
      margin-bottom: 15px
    }

    .lede {
      font-size: clamp(16px, 1.3vw, 18.5px);
      color: var(--t3);
      max-width: 62ch;
      font-weight: 400
    }

    .head {
      max-width: 740px;
      margin-bottom: 52px
    }

    .head.c {
      margin-left: auto;
      margin-right: auto;
      text-align: center
    }

    .ctr {
      text-align: center
    }

    /* buttons */
    .btn {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 9px;
      font-family: inherit;
      font-weight: 600;
      font-size: 15px;
      padding: 13px 30px;
      border-radius: var(--rp);
      border: 1.5px solid transparent;
      cursor: pointer;
      transition: .18s;
      white-space: nowrap;
      line-height: 1.2
    }

    .b-o {
      background: var(--o);
      color: #fff
    }

    .b-o:hover {
      background: var(--o-dk);
      box-shadow: 0 8px 22px rgba(245, 125, 34, .32)
    }

    .b-k {
      background: var(--k);
      color: #fff
    }

    .b-k:hover {
      background: var(--k3)
    }

    .b-g {
      background: transparent;
      color: var(--t1);
      border-color: var(--ln2)
    }

    .b-g:hover {
      border-color: var(--k);
      background: var(--k);
      color: #fff
    }

    .b-w {
      background: #fff;
      color: var(--k)
    }

    .b-w:hover {
      background: var(--s2)
    }

    .b-wg {
      background: transparent;
      color: #fff;
      border-color: rgba(255, 255, 255, .45)
    }

    .b-wg:hover {
      background: #fff;
      color: var(--k);
      border-color: #fff
    }

    .b-sm {
      padding: 9px 20px;
      font-size: 13.5px
    }

    .b-lg {
      padding: 16px 36px;
      font-size: 16px
    }

    .lk {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14.5px;
      font-weight: 600;
      color: var(--o);
      transition: .16s
    }

    .lk:hover {
      gap: 12px
    }

    :focus-visible {
      outline: 2.5px solid var(--o);
      outline-offset: 3px;
      border-radius: 3px
    }

    .tg {
      display: inline-block;
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .09em;
      text-transform: uppercase;
      padding: 4px 10px;
      border-radius: var(--rp);
      line-height: 1.6
    }

    .g-new {
      background: var(--o);
      color: #fff
    }

    .g-soft {
      background: var(--o-lt);
      color: var(--o-dk)
    }

    .g-ln {
      background: transparent;
      color: var(--t3);
      border: 1px solid var(--ln2)
    }

    .g-fill {
      background: var(--s2);
      color: var(--t2)
    }

    /* ================= TOP BAR + HEADER ================= */
    .tb {
      background: var(--k);
      color: #8D8D8D;
      font-size: 13px
    }

    .tb .wrap {
      display: flex;
      align-items: center;
      gap: 24px;
      height: 40px
    }

    .tb a:hover {
      color: #fff
    }

    .tb .sp {
      flex: 1
    }

    @media(max-width:980px) {
      .tb .hs {
        display: none
      }
    }

    .lang {
      display: inline-flex;
      border: 1px solid #333;
      border-radius: var(--rp);
      overflow: hidden
    }

    .lang button {
      background: none;
      border: 0;
      color: #8D8D8D;
      font-family: inherit;
      font-size: 11.5px;
      font-weight: 600;
      padding: 4px 13px;
      cursor: pointer;
      letter-spacing: .04em;
      transition: background 0.2s ease, color 0.2s ease;
      /* Giúp màu đổi mượt hơn */
    }

    .lang button.on {
      background: var(--o);
      color: #fff
    }

    .hdr {
      position: sticky;
      top: 0;
      z-index: 900;
      background: var(--k)
    }

    @media(max-width:1025px) {
      .hdr .wrap {
        padding-left: 12px;
        padding-right: 12px;
      }

      .hdr .rt {
        margin-left: auto;
        display: flex;
        align-items: center;
        gap: 8px;
        flex-shrink: 0;
      }

      .hdr .rt .bgr {
        order: 1;
        display: flex !important;
        width: 40px;
        height: 40px;
        min-width: 40px;
        min-height: 40px;
        padding: 0;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        color: var(--t2);
        background: transparent;
        border: 0;
      }

      .hdr .rt .bgr svg {
        width: 24px;
        height: 24px;
        display: block;
      }

      .hdr .rt .lang {
        order: 2;
        display: inline-flex !important;
        align-items: center;
        flex-shrink: 0;
      }

      .hdr .rt .lang button {
        min-height: 40px;
        padding: 7px 11px;
        font-size: 12px;
      }
    }

    .hdr .wrap {
      display: flex;
      align-items: center;
      height: var(--hdr);
      gap: 0
    }

    .brand {
      font-size: 23px;
      font-weight: 800;
      letter-spacing: -.05em;
      color: #fff;
      margin-right: auto;
      flex-shrink: 0
    }

    .brand i {
      color: var(--o);
      font-style: normal
    }

    .brand .blogo {
      display: block;
      height: 70px;
      width: auto;
      object-fit: contain;
      max-width: 100%;
      flex-shrink: 0
    }

    nav.nv {
      display: flex;
      height: 100%
    }

    nav.nv>div {
      display: flex;
      align-items: center;
      height: 100%;
      position: static
    }

    nav.nv {
      gap: 2px
    }

    nav.nv .top {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      height: 100%;
      padding: 0 20px;
      font-size: 15.5px;
      font-weight: 600;
      letter-spacing: .05em;
      text-transform: uppercase;
      color: #DCDCDC;
      position: relative;
      white-space: nowrap
    }

    nav.nv>div.open .top,
    nav.nv .top:hover {
      color: #fff
    }

    nav.nv .top svg {
      transition: transform .2s;
      opacity: .7;
      flex-shrink: 0
    }

    nav.nv>div.open .top svg {
      transform: rotate(180deg);
      opacity: 1;
      color: var(--o)
    }

    nav.nv .top:after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: 0;
      height: 2px;
      background: var(--o);
      transform: scaleX(0);
      transition: transform .22s
    }

    @media(max-width:1440px) {
      nav.nv .top {
        padding: 0 15px;
        font-size: 14.5px;
        letter-spacing: .04em
      }
    }

    @media(max-width:1320px) {
      nav.nv .top {
        padding: 0 11px;
        font-size: 13.5px;
        letter-spacing: .03em;
        gap: 6px
      }
    }

    nav.nv>div.open .top:after {
      transform: scaleX(1)
    }

    .hdr .rt {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-left: auto
    }

    .ib {
      width: 36px;
      height: 36px;
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #B5B5B5;
      border: 0;
      background: none;
      cursor: pointer
    }

    .ib:hover {
      background: #222;
      color: #fff
    }

    .langbtn {
      display: flex;
      align-items: center;
      gap: 9px;
      background: none;
      border: 0;
      cursor: pointer;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 500;
      color: #DCDCDC;
      padding: 8px 10px;
      border-radius: var(--rp)
    }

    .langbtn svg {
      color: #B5B5B5
    }

    .langbtn:hover {
      color: #fff
    }

    .langbtn:hover svg {
      color: var(--o)
    }

    @media(max-width:1025px) {

      nav.nv,
      .hdr .rt .dk {
        display: none
      }
    }

    .bgr {
      display: none
    }

    @media(max-width:1025px) {
      .bgr {
        display: flex
      }
    }

    /* ---- two-pane mega flyout (matches the project site) ---- */
    .mega {
      position: absolute;
      left: 0;
      right: 0;
      top: 100%;
      display: none;
      background: #000000;
      box-shadow: 0 30px 60px rgba(0, 0, 0, .35);
      /* header is sticky, so the flyout is anchored to the viewport: cap it there and let
     the panes scroll internally instead of being clipped off-screen */
      max-height: calc(100vh - var(--hdr));
      overflow: hidden
    }

    nav.nv>div.open .mega {
      display: block;
      animation: mgIn .2s ease
    }

    @keyframes mgIn {
      from {
        opacity: 0;
        transform: translateY(-6px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    /* left column keeps its inner text aligned with the page container on any screen width */
    .mega-in {
      display: grid;
      grid-template-columns: calc(360px + max(0px, (100vw - var(--max))/2)) 1fr;
      min-height: min(470px, calc(100vh - var(--hdr) - 12px))
    }

    .mleft {
      padding: 16px 0;
      background: #000000;
      padding-left: max(0px, calc((100vw - var(--max))/2));
      overflow-y: auto;
      overscroll-behavior: contain
    }

    .mcat {
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 19px 30px;
      font-size: 16.5px;
      font-weight: 500;
      color: #D8D8D8;
      cursor: pointer;
      position: relative
    }

    .mcat svg.ic {
      width: 20px;
      height: 20px;
      color: #A2A2A2;
      flex-shrink: 0
    }

    .mcat svg.cv {
      width: 15px;
      height: 15px;
      margin-left: auto;
      color: #6E6E6E
    }

    .mcat:hover,
    .mcat.on {
      background: #111111;
      color: var(--o)
    }

    .mcat:hover svg.ic,
    .mcat.on svg.ic,
    .mcat:hover svg.cv,
    .mcat.on svg.cv {
      color: var(--o)
    }

    /* Right pane sits on a flat charcoal. The light wash on the outer edge is NOT a CSS
   gradient — it is the category photo's own white backdrop bleeding in through the mask. */
    .mright {
      position: relative;
      padding: 34px 44px 34px 52px;
      overflow: hidden;
      background: #000000
    }

    /* animated orange "network" dots — drawn on canvas, sits above the flat
       #2F2F2F background and below the photo/ghost + text content */
    canvas.mega-net {
      position: absolute;
      inset: 0;
      z-index: 0;
      pointer-events: none;
      opacity: .8
    }

    .mghost {
      position: absolute;
      right: -4%;
      top: 50%;
      transform: translateY(-50%);
      width: 64%;
      height: 100%;
      pointer-events: none;
      z-index: 1
    }

    .mghost img {
      width: 100%;
      height: 100%;
      object-fit: contain;
      object-position: center right;
      opacity: .78;
      filter: grayscale(.18) contrast(.94);
      -webkit-mask-image: radial-gradient(ellipse 132% 82% at 78% 50%, #000 0 44%, rgba(0, 0, 0, .55) 72%, transparent 96%);
      mask-image: radial-gradient(ellipse 132% 82% at 78% 50%, #000 0 44%, rgba(0, 0, 0, .55) 72%, transparent 96%)
    }

    .mghost .halo {
      position: absolute;
      right: 16%;
      top: 50%;
      width: 480px;
      height: 480px;
      border-radius: 50%;
      z-index: -1;
      transform: translateY(-50%);
      background: radial-gradient(circle, rgba(255, 255, 255, .10) 52%, transparent 71%)
    }

    /* labels always read above the photo, as in the reference */
    .mpane {
      z-index: 3
    }

    @media(max-width:1400px) {
      .mghost {
        width: 56%;
        opacity: .9
      }
    }

    /* ---- product & editorial imagery ---- */
    .pimg {
      width: 100%;
      height: 100%;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .cover {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .ncard .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .ncard:hover .im img {
      transform: scale(1.04)
    }

    .ncard .im.pad {
      padding: 22px;
      background: #fff;
      border: 1px solid var(--ln)
    }

    .ncard .im.pad img {
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .split .rt img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: .45;
      filter: grayscale(.4)
    }

    .pgal img {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
      mix-blend-mode: multiply;
      position: relative;
      z-index: 2
    }

    .pthumbs img {
      max-width: 80%;
      max-height: 80%;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .pcell .im img {
      max-width: 100%;
      max-height: 100%;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .mpane {
      display: none;
      position: relative;
      z-index: 2
    }

    .mpane.on {
      display: block;
      max-height: calc(100vh - var(--hdr) - 76px);
      overflow-y: auto;
      overscroll-behavior: contain;
      padding-right: 14px;
      scrollbar-width: thin;
      scrollbar-color: #5A5A5A transparent
    }

    .mpane.on::-webkit-scrollbar {
      width: 6px
    }

    .mpane.on::-webkit-scrollbar-thumb {
      background: #5A5A5A;
      border-radius: 3px
    }

    .mpane.on::-webkit-scrollbar-thumb:hover {
      background: var(--o)
    }

    .mpane.on::-webkit-scrollbar-track {
      background: transparent
    }

    /* hint that the list continues below the fold */
    .mright:after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 34px;
      z-index: 4;
      pointer-events: none;
      background: linear-gradient(180deg, rgba(47, 47, 47, 0), #2F2F2F 86%);
      opacity: 0;
      transition: opacity .2s
    }

    .mright.more:after {
      opacity: 1
    }

    .mpane h5 {
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .2em;
      text-transform: uppercase;
      color: #fff;
      margin: 0;
      padding-bottom: 16px;
      border-bottom: 1px solid rgba(255, 255, 255, .28);
      max-width: 290px
    }

    /* single column, no separators — matches the reference menu */
    .mlinks {
      display: block;
      margin-top: 10px;
      max-width: 440px
    }

    .mlinks a {
      display: block;
      padding: 14px 0;
      font-size: 16.5px;
      font-weight: 400;
      color: #EDEDED;
      letter-spacing: -.01em
    }

    .mlinks a:hover {
      color: var(--o);
      padding-left: 8px
    }

    /* nhiều nhóm thiết bị đứng cạnh nhau trong cùng một pane */
    .mcols {
      display: grid;
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 30px 40px;
      max-width: 1040px;
      align-items: start
    }

    .mcols h5 {
      max-width: none
    }

    .mcols .mlinks {
      max-width: none
    }

    .mcols .mlinks a {
      font-size: 15.5px;
      padding: 12px 0
    }

    @media(max-width:1400px) {
      .mcols {
        gap: 24px 30px;
        max-width: 860px
      }

      .mcols .mlinks a {
        font-size: 15px;
        padding: 11px 0
      }
    }

    @media(max-width:1200px) {
      .mcols {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        max-width: 570px
      }
    }

    .mfoot {
      margin-top: 18px
    }

    .mfoot .lk {
      color: var(--o);
      font-size: 14.5px;
      font-weight: 600
    }

    /* mobile drawer */
    .mdr {
      position: fixed;
      inset: 0;
      z-index: 950;
      background: #fff;
      transform: translateX(100%);
      transition: transform .26s cubic-bezier(.3, .8, .3, 1);
      overflow-y: auto
    }

    .mdr.on {
      transform: none
    }

    @media(min-width:1201px) {
      .mdr {
        display: none
      }
    }

    .mdrh {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 14px 20px;
      border-bottom: 1px solid var(--ln);
      position: sticky;
      top: 0;
      background: #fff
    }

    .mdrh .brand {
      color: var(--k);
      margin: 0
    }

    /* ===== MOBILE MENU ACCORDION ===== */
    .mdrg {
      border-bottom: 1px solid var(--ln);
      padding: 0;
      background: #fff;
    }

    .mdrg-toggle {
      width: 100%;
      min-height: 72px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 16px;
      padding: 18px 20px;
      border: 0;
      background: transparent;
      color: var(--t1);
      font: inherit;
      font-size: 17px;
      font-weight: 700;
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .mdrg-toggle:hover {
      color: var(--o);
    }

    .mdrg-toggle:focus-visible {
      outline: 2px solid var(--o);
      outline-offset: -2px;
    }

    .mdrg-toggle .mdr-chev {
      width: 18px;
      height: 18px;
      flex: 0 0 18px;
      color: #9AA0AB;
      transition: transform .22s ease, color .18s ease;
    }

    .mdrg.open .mdrg-toggle {
      color: var(--t1);
    }

    .mdrg.open .mdr-chev {
      transform: rotate(180deg);
      color: var(--o);
    }

    .mdrg-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .28s ease;
    }

    .mdrg-body-inner {
      min-height: 0;
      overflow: hidden;
      padding: 0 20px;
      transition: padding .28s ease;
    }

    .mdrg.open .mdrg-body {
      grid-template-rows: 1fr;
    }

    .mdrg.open .mdrg-body-inner {
      padding: 0 20px 18px;
    }

    .mdrg-body a {
      display: block;
      padding: 10px 0;
      font-size: 15.5px;
      font-weight: 600;
      color: var(--t2);
      line-height: 1.45;
    }

    .mdrg-body a:first-child {
      padding-top: 2px;
    }

    .mdrg-body a:hover {
      color: var(--o);
    }

    .mdr-subhead {
      display: block;
      padding: 14px 0 6px;
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--t1);
      border-top: 1px solid var(--ln);
      margin-top: 8px;
    }

    .mdrg-body a:first-child + .mdr-subhead,
    .mdrg-body-inner > .mdr-subhead:first-child {
      border-top: 0;
      margin-top: 0;
      padding-top: 2px;
    }

    /* ===== Nested sub-accordion inside a drawer group — e.g. splitting
       "Công nghệ Wi-Fi" into Quản lý Wi-Fi / Công nghệ Wi-Fi / Giám sát &
       Bảo mật, same grouping as the desktop mega menu, each collapsible on
       its own (tap to drop down, tap again to collapse). ===== */
    .mdrsub {
      border-top: 1px solid var(--ln);
      margin-top: 6px;
      padding-top: 2px;
    }

    .mdrg-body-inner > .mdrsub:first-child {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    .mdrsub-toggle {
      width: 100%;
      min-height: 48px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
      padding: 12px 0;
      border: 0;
      background: transparent;
      font: inherit;
      font-size: 12.5px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .04em;
      color: var(--t1);
      text-align: left;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
    }

    .mdrsub-toggle:focus-visible {
      outline: 2px solid var(--o);
      outline-offset: -2px;
    }

    .mdr-chev-sm {
      width: 15px;
      height: 15px;
      flex: 0 0 15px;
      color: var(--o);
      opacity: .85;
      transition: transform .22s ease;
    }

    .mdrsub.open > .mdrsub-toggle .mdr-chev-sm {
      transform: rotate(180deg);
    }

    .mdrsub-body {
      display: grid;
      grid-template-rows: 0fr;
      transition: grid-template-rows .26s ease;
    }

    .mdrsub.open > .mdrsub-body {
      grid-template-rows: 1fr;
    }

    .mdrsub-body-inner {
      min-height: 0;
      overflow: hidden;
    }

    .mdrsub.open > .mdrsub-body > .mdrsub-body-inner {
      padding-bottom: 8px;
    }

    .mdrsub-body a {
      display: block;
      padding: 9px 0 9px 2px;
      font-size: 15px;
      font-weight: 600;
      color: var(--t2);
      line-height: 1.4;
    }

    .mdrsub-body a:first-child {
      padding-top: 1px;
    }

    .mdrsub-body a:hover {
      color: var(--o);
    }

    /* a .mdrsub nested one level deeper (e.g. Quản lý Wi-Fi đám mây / Công
       nghệ Wi-Fi / Giám sát & Bảo mật inside the "Công nghệ Wi-Fi" wrapper,
       or Hạ tầng & Giao thông / Công cộng & Sự kiện / Doanh nghiệp & Dịch vụ
       inside the "Wireless" wrapper) gets a touch of extra indent so the
       hierarchy reads clearly, and doesn't need its own top divider. */
    .mdrsub-body-inner>.mdrsub:first-child {
      border-top: 0;
      margin-top: 0;
      padding-top: 0;
    }

    .mdrsub-body-inner .mdrsub-toggle {
      padding-left: 14px;
      font-size: 11.5px;
    }

    .mdrsub-body-inner .mdrsub-body a {
      padding-left: 14px;
    }

    @media(max-width:420px) {
      .mdrg-toggle {
        min-height: 66px;
        padding: 16px 18px;
        font-size: 16px;
      }

      .mdrg-body-inner {
        padding-left: 18px;
        padding-right: 18px;
      }

      .mdrg.open .mdrg-body-inner {
        padding-left: 18px;
        padding-right: 18px;
        padding-bottom: 16px;
      }

      .mdrg-body a {
        font-size: 15px;
      }
    }

    /* ================= HERO — dark, fading smoothly into light ================= */
    /* ===== HERO — light, product-led. Same construction Ruijie and EnGenius use:
   white stage, dark type on the left, product floating on the right with a real
   contact shadow. The product PNGs are shot on white, so on a white stage the
   backdrop simply disappears — no masking, no halo, no grey mush. ===== */
    .hero {
      position: relative;
      min-height: clamp(540px, 74vh, 780px);
      display: flex;
      align-items: center;
      overflow: hidden;
      background: radial-gradient(1100px 720px at 72% 44%, #FFFFFF 0%, #FAFBFD 42%, #EEF2F7 100%)
    }

    .hero-bg {
      position: absolute;
      inset: 0;
      z-index: 0
    }

    .hero-bg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center
    }

    .hero-bg::after {
      content: '';
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(255, 255, 255, .96) 0%, rgba(255, 255, 255, .88) 38%, rgba(255, 255, 255, .55) 68%, rgba(255, 255, 255, .28) 100%)
    }

    .hero>.wrap,
    .hero .warm {
      z-index: 1
    }

    .hero .warm {
      position: absolute;
      right: 2%;
      top: 50%;
      transform: translateY(-50%);
      width: min(760px, 52%);
      aspect-ratio: 1;
      border-radius: 50%;
      pointer-events: none;
      background: radial-gradient(circle, rgba(245, 125, 34, .11) 0%, rgba(245, 125, 34, .035) 46%, transparent 70%)
    }

    .hero .hairline {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 1px;
      background: var(--ln);
      z-index: 4
    }

    /* no z-index here on purpose — it would create a stacking context and break the
   multiply blend that knocks the white backdrop out of the product photo */
    .hero>.wrap {
      position: relative;
      width: 100%
    }

    .hgrid {
      width: 100%;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 48px;
      align-items: center;
      padding: 60px 0 72px
    }

    @media(max-width:980px) {
      .hgrid {
        grid-template-columns: 1fr;
        gap: 26px;
        padding: 52px 0 60px
      }
    }

    .hero h1 {
      color: var(--t1);
      max-width: 15ch;
      margin-bottom: 22px
    }

    .hero .sub {
      font-size: clamp(16px, 1.45vw, 19.5px);
      color: var(--t3);
      max-width: 50ch;
      margin-bottom: 36px
    }

    .hero .btns {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .hvis {
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 400px
    }

    /* multiply knocks the white studio backdrop out of the PNG — white becomes the stage,
   the product keeps its own baked-in shading. No drop-shadow: the file is an opaque
   rectangle, so drop-shadow would cast a box, not the product silhouette. */
    .hvis img {
      width: 100%;
      max-width: 660px;
      mix-blend-mode: multiply
    }

    @media(max-width:980px) {
      .hvis {
        min-height: 290px
      }

      .hvis img {
        max-width: 440px
      }
    }

    /* ================= SHOWCASE — Ruijie-style light product cards ================= */
    .pshow {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px
    }

    @media(max-width:980px) {
      .pshow {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:640px) {
      .pshow {
        grid-template-columns: 1fr
      }
    }

    .pcell {
      background: var(--s2);
      border-radius: var(--rx);
      padding: 40px 34px 34px;
      text-align: center;
      transition: .24s;
      border: 1px solid transparent;
      display: flex;
      flex-direction: column
    }

    .pcell:hover {
      background: #fff;
      border-color: var(--ln);
      box-shadow: 0 18px 46px rgba(17, 19, 24, .09);
      transform: translateY(-4px)
    }

    .pcell .im {
      height: 190px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 26px
    }

    .pcell .sku {
      font-size: 19px;
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.02em;
      margin-bottom: 10px
    }

    .pcell p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0 0 20px;
      line-height: 1.62
    }

    .pcell .lk {
      margin-top: auto;
      justify-content: center
    }

    .pcell.wide {
      grid-column: span 1;
      background: linear-gradient(150deg, #F3F5F8, #E7ECF3);
      text-align: left;
      justify-content: center
    }

    .pcell.wide h3 {
      margin-bottom: 12px
    }

    /* ---- tabbed "Khám phá những thiết bị mới" showcase ---- */
    .bpills {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 12px;
      margin-bottom: 40px
    }

    .bpill {
      font-family: inherit;
      font-size: 15px;
      font-weight: 500;
      color: var(--t3);
      background: none;
      cursor: pointer;
      border: 1px solid var(--ln);
      border-radius: 999px;
      padding: 11px 22px;
      transition: .2s;
      white-space: nowrap
    }

    .bpill:hover {
      color: var(--t1);
      border-color: #BFC6D1
    }

    .bpill.on {
      color: var(--o);
      border-color: var(--o);
      box-shadow: 0 0 0 1px var(--o) inset
    }

    .bstage {
      position: relative
    }

    .bpanel {
      display: none;
      grid-template-columns: minmax(300px, 38%) 1fr;
      gap: 48px;
      align-items: center;
      background: none;
      border: 0;
      border-radius: 0;
      padding: 8px 0 0;
      min-height: 360px
    }

    .bpanel.on {
      display: grid;
      animation: bpIn .32s ease
    }

    @keyframes bpIn {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .bpanel .bl h3 {
      font-size: clamp(24px, 2.5vw, 32px);
      letter-spacing: -.02em;
      margin: 0 0 22px;
      padding-bottom: 22px;
      border-bottom: 1px solid #DDE2E9
    }

    .blist {
      list-style: none;
      margin: 0 0 30px;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 22px
    }

    .blist li {
      display: flex;
      align-items: flex-start;
      gap: 16px;
      font-size: 15.5px;
      line-height: 1.6;
      color: var(--t2)
    }

    .blist .bi {
      width: 30px;
      height: 30px;
      flex-shrink: 0;
      color: var(--t3);
      stroke-width: 1.4;
      margin-top: -2px
    }

    .bpanel .br {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 100%;
      min-height: 0
    }

    .bpanel .br img {
      max-width: 100%;
      max-height: 380px;
      object-fit: contain;
      background: transparent;
      mix-blend-mode: multiply
    }

    @media(max-width:900px) {
      .bpanel {
        grid-template-columns: 1fr;
        padding: 8px 0;
        gap: 28px;
        min-height: 0
      }

      .bpanel .br {
        order: -1;
        min-height: 220px
      }

      .bpanel .br img {
        max-height: 260px
      }

      .bpill {
        font-size: 14px;
        padding: 9px 17px
      }
    }

    /* ---- customer logo wall ---- */
    .ltabs {
      display: flex;
      flex-wrap: wrap;
      justify-content: center;
      gap: 6px;
      margin-bottom: 44px;
      border-bottom: 1px solid var(--ln)
    }

    .ltab {
      font-family: inherit;
      font-size: 15px;
      font-weight: 500;
      color: var(--t3);
      background: none;
      border: 0;
      cursor: pointer;
      padding: 13px 20px;
      position: relative;
      transition: .18s;
      white-space: nowrap
    }

    .ltab:hover {
      color: var(--t1)
    }

    .ltab.on {
      color: var(--o);
      font-weight: 600
    }

    .ltab:after {
      content: "";
      position: absolute;
      left: 12px;
      right: 12px;
      bottom: -1px;
      height: 2px;
      background: var(--o);
      transform: scaleX(0);
      transition: transform .2s
    }

    .ltab.on:after {
      transform: scaleX(1)
    }

    .lwall {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(156px, 1fr));
      gap: 8px;
      align-items: center;
      justify-items: center
    }

    .lgo {
      height: 86px;
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      text-align: center;
      padding: 8px 10px;
      line-height: 1.2;
      transition: transform .2s
    }

    .lgo:hover {
      transform: scale(1.05)
    }

    .lgo span {
      font-size: 16px;
      font-weight: 800;
      letter-spacing: -.02em
    }

    .lgo.v2 span {
      font-size: 13px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    .lgo.v3 span {
      font-family: Georgia, "Times New Roman", serif;
      font-size: 16px;
      font-weight: 700;
      letter-spacing: .01em
    }

    .lgo.v4 span {
      font-size: 12.5px;
      font-weight: 500;
      letter-spacing: .18em;
      text-transform: uppercase
    }

    .lgo.v5 span {
      font-size: 18px;
      font-weight: 800;
      letter-spacing: -.045em;
      text-transform: lowercase
    }

    @media(max-width:640px) {
      .lwall {
        grid-template-columns: repeat(auto-fill, minmax(126px, 1fr))
      }

      .lgo {
        height: 70px
      }

      .lgo span {
        font-size: 14.5px
      }

      .ltabs {
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap
      }

      .ltab {
        font-size: 14px;
        padding: 12px 14px
      }
    }

    /* ================= ECOSYSTEM (light) ================= */
    .two {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 70px;
      align-items: center
    }

    @media(max-width:960px) {
      .two {
        grid-template-columns: 1fr;
        gap: 40px
      }
    }

    .elist {
      list-style: none;
      padding: 0;
      margin: 32px 0 0;
      border-top: 1px solid var(--ln)
    }

    .elist li a {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 18px 0;
      border-bottom: 1px solid var(--ln);
      font-size: 16.5px;
      font-weight: 600;
      color: var(--t1);
      transition: .16s
    }

    .elist li a:hover {
      color: var(--o);
      padding-left: 9px
    }

    .elist li a svg {
      color: var(--t4)
    }

    .elist li a:hover svg {
      color: var(--o)
    }

    .dgm {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: 20px;
      padding: 30px;
      box-shadow:
        0 4px 6px rgba(17, 19, 24, .04),
        0 12px 28px rgba(17, 19, 24, .08),
        0 28px 56px rgba(17, 19, 24, .10);
      transform: translateY(0);
      transition: transform .25s ease, box-shadow .25s ease;
    }
    .dgm:hover {
      transform: translateY(-6px);
      box-shadow:
        0 8px 12px rgba(17, 19, 24, .05),
        0 20px 40px rgba(17, 19, 24, .12),
        0 36px 72px rgba(17, 19, 24, .14);
    }

    /* ================= SOLUTION CARDS (Cambium-style bordered) ================= */
    .g3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px
    }

    .g4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px
    }

    .g2 {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px
    }

    @media(max-width:1050px) {
      .g4 {
        grid-template-columns: 1fr 1fr
      }

      .g3 {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:640px) {

      .g2,
      .g3,
      .g4 {
        grid-template-columns: 1fr
      }
    }

    .scard {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      overflow: hidden;
      transition: .24s;
      display: flex;
      flex-direction: column
    }

    .scard:hover {
      border-color: var(--o-mid);
      box-shadow: 0 18px 44px rgba(17, 19, 24, .09);
      transform: translateY(-4px)
    }

    .scard .im {
      height: 196px;
      position: relative;
      overflow: hidden;
      background: linear-gradient(150deg, #20242B, #0F1216)
    }

    .scard .im img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .scard:hover .im img {
      transform: scale(1.05)
    }

    .scard .im:after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(12, 14, 18, .20), rgba(12, 14, 18, .62)), radial-gradient(420px 300px at 68% 26%, rgba(245, 125, 34, .30), transparent 66%)
    }

    .scard .im svg {
      position: relative;
      z-index: 2;
      margin: auto;
      height: 100%;
      display: block;
      padding: 26px 0
    }

    .scard .bd {
      padding: 26px 26px 28px;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .scard .ey {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--o);
      margin-bottom: 9px
    }

    .scard h4 {
      font-size: 19px;
      margin-bottom: 9px
    }

    .scard p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0 0 18px
    }

    .scard .lk {
      margin-top: auto
    }

    /* service split — light */
    .split {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 0;
      border-radius: var(--rx);
      overflow: hidden;
      border: 1px solid var(--ln);
      background: #fff
    }

    @media(max-width:880px) {
      .split {
        grid-template-columns: 1fr
      }
    }

    .split .lf {
      padding: 56px 50px
    }

    .split .rt {
      background: linear-gradient(150deg, #1B1E23, #0C0E11);
      position: relative;
      min-height: 360px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .split .rt:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(400px 320px at 50% 46%, rgba(245, 125, 34, .30), transparent 70%)
    }

    .ck {
      list-style: none;
      padding: 0;
      margin: 24px 0 32px
    }

    .ck li {
      position: relative;
      padding-left: 30px;
      margin-bottom: 13px;
      font-size: 15.5px;
      color: var(--t2)
    }

    .ck li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 15px;
      height: 8px;
      border-left: 2px solid var(--o);
      border-bottom: 2px solid var(--o);
      transform: rotate(-45deg)
    }

    .ck2 {
      list-style: none;
      padding: 0;
      margin: 0;
      columns: 2;
      column-gap: 44px
    }

    @media(max-width:700px) {
      .ck2 {
        columns: 1
      }
    }

    .ck2 li {
      padding-left: 30px;
      position: relative;
      margin-bottom: 14px;
      break-inside: avoid;
      font-size: 15.5px
    }

    .ck2 li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 8px;
      width: 15px;
      height: 8px;
      border-left: 2px solid var(--o);
      border-bottom: 2px solid var(--o);
      transform: rotate(-45deg)
    }

    .ncard {
      display: block;
      transition: .18s
    }

    .ncard .im {
      background: var(--s2);
      border-radius: var(--rl);
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      overflow: hidden;
      transition: .2s
    }

    .ncard:hover .im {
      background: var(--s3)
    }

    .ncard .mt {
      display: flex;
      gap: 12px;
      font-size: 12px;
      color: var(--t4);
      margin-bottom: 9px
    }

    .ncard .mt b {
      color: var(--o);
      font-weight: 600
    }

    .ncard h4 {
      font-size: 17px;
      line-height: 1.42;
      margin: 0
    }

    .ncard:hover h4 {
      color: var(--o)
    }

    .svc {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      padding: 34px;
      transition: .22s;
      height: 100%
    }

    .svc:hover {
      border-color: var(--o-mid);
      box-shadow: 0 16px 40px rgba(17, 19, 24, .07);
      transform: translateY(-3px)
    }

    .svc .n {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 12.5px;
      color: var(--o);
      letter-spacing: .1em;
      margin-bottom: 18px
    }

    .svc h4 {
      font-size: 19px;
      margin-bottom: 10px
    }

    .svc p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0
    }

    .svc .im {
      display: block;
      margin: -34px -34px 22px;
      height: 184px;
      overflow: hidden;
      border-radius: var(--rx) var(--rx) 0 0;
      background: #eef1f5
    }

    .svc .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
      transition: transform .5s
    }

    .svc:hover .im img {
      transform: scale(1.05)
    }

    .svc-link {
      cursor: pointer
    }

    .svc-link .lk {
      margin-top: 14px;
      display: inline-flex
    }

    .svsec {
      margin-top: 44px
    }

    .svsec:first-child {
      margin-top: 0
    }

    .svsec h3 {
      font-size: 22px;
      margin: 0 0 14px;
      color: var(--k)
    }

    .svsec h4 {
      font-size: 15.5px;
      margin: 22px 0 10px;
      color: var(--o);
      font-weight: 700
    }

    .svsec p {
      font-size: 15px;
      line-height: 1.75;
      color: var(--t2);
      margin: 0 0 12px;
      max-width: 74ch
    }

    @media(min-width:760px) {
      .svsec .ck {
        columns: 2;
        column-gap: 44px
      }

      .svsec .ck li {
        break-inside: avoid
      }
    }

    .chal {
      border-top: 2px solid var(--k);
      padding-top: 22px
    }

    .chal h4 {
      font-size: 18px;
      margin-bottom: 9px
    }

    .chal p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0
    }

    .stepn {
      display: flex;
      gap: 22px;
      padding: 26px 0;
      border-bottom: 1px solid var(--ln)
    }

    .stepn .no {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 13px;
      color: var(--o);
      width: 36px;
      flex-shrink: 0;
      padding-top: 3px
    }

    .stepn h4 {
      margin-bottom: 6px
    }

    .stepn p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0
    }

    .qt {
      background: linear-gradient(150deg, #1B1E23, #0C0E11);
      border-radius: var(--rx);
      padding: 58px;
      position: relative;
      overflow: hidden
    }

    .qt:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(600px 380px at 80% 20%, rgba(245, 125, 34, .20), transparent 66%)
    }

    .qt>* {
      position: relative;
      z-index: 2
    }

    .qt p {
      font-size: clamp(18px, 2vw, 25px);
      line-height: 1.5;
      color: #fff;
      font-weight: 500;
      letter-spacing: -.02em;
      margin-bottom: 24px
    }

    .qt .w {
      color: #9DA2AA;
      font-size: 14px
    }

    .qt .w b {
      display: block;
      color: #fff;
      font-size: 15px
    }

    /* ================= FOOTER — framed dark panel, Witek-style layout ================= */
    .footshell {
      background: var(--k);
      padding: 0
    }

    footer {
      position: relative;
      overflow: hidden;
      max-width: none;
      margin: 0;
      background: var(--k);
      color: #9295B5;
      font-size: 14.5px;
      padding: 56px 0 0;
      border-radius: 0;
      box-shadow: none
    }

    footer:before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 110px;
      pointer-events: none;
      background: linear-gradient(180deg, #41464E 0%, #22252A 42%, rgba(12, 12, 12, 0) 100%);
      opacity: .85
    }

    footer .wrap,
    footer .fbot {
      position: relative;
      z-index: 2
    }

    .fg {
      display: grid;
      grid-template-columns: 1.6fr 1.15fr 0.85fr 0.85fr 0.85fr;
      gap: 24px;
      /* Giảm nhẹ gap giúp 3 cột cuối không bị gãy dòng chữ quá sớm */
      padding-bottom: 46px;
    }

    @media(max-width:1240px) {
      .fg {
        grid-template-columns: 1.4fr 1fr .85fr .85fr .85fr;
        gap: 16px;
        /* Giảm gap để dành không gian cho chữ */
      }
    }

    /* Dành cho tablet đứng và màn hình dưới 900px mới vỡ thành 2 cột */
    @media(max-width: 900px) {
      .fg {
        grid-template-columns: 1fr 1fr;
        gap: 24px;
      }
    }

    @media(max-width: 560px) {
      .fg {
        grid-template-columns: 1fr;
        /* Dồn thành 1 cột duy nhất */
        gap: 20px;
        /* Thu gọn khoảng cách giữa các khối */
      }

      /* Reset lại vị trí cố định để các phần tử xếp hàng dọc tự nhiên */
      .fg>div:nth-child(6) {
        grid-column: auto;
        grid-row: auto;
      }

      .fmap {
        grid-column: auto;
        grid-row: auto;
        margin-top: 0;
      }



    }

    .fbrand {
      font-size: 26px;
      font-weight: 800;
      letter-spacing: -.05em;
      color: #fff;
      margin-bottom: 0
    }

    .fbrand i {
      color: var(--o);
      font-style: normal
    }

    .fbrand .flogo {
      display: block;
      height: 80px;
      width: auto
    }

    footer h5 {
      color: #fff;
      font-size: 13.5px;
      font-weight: 700;
      margin: 0 0 18px;
      letter-spacing: .06em;
      text-transform: uppercase
    }

    footer ul {
      list-style: none;
      margin: 0;
      padding: 0
    }

    footer li {
      margin-bottom: 12px
    }

    footer li a {
      color: #B3B5D1;
      font-size: 14.5px
    }

    footer a:hover {
      color: var(--o)
    }

    /* Danh sách liên hệ dạng icon (thay cho .fc / .fc b / .fc p / .fc address cũ) */
    .fcontact {
      list-style: none;
      margin: 0px 0 0;
      padding: 0;
      display: grid;
      gap: 0px
    }

    .fcontact li {
      display: flex;
      align-items: flex-start;
      gap: 12px;
      font-size: 14.5px;
      line-height: 1.65;
      color: #B3B5D1
    }

    .fcontact .ico {
      flex-shrink: 0;
      width: 18px;
      height: 18px;
      margin-top: 2px;
      color: var(--o)
    }

    .fcontact .ico svg {
      width: 100%;
      height: 100%;
      display: block
    }

    .fcontact a {
      color: #B3B5D1
    }

    .fcontact a:hover {
      color: var(--o)
    }

    .ffollow {
      display: flex;
      flex-direction: column;
      gap: 12px
    }

    .ffollow a {
      display: flex;
      align-items: center;
      gap: 13px;
      color: #C7C9E2;
      font-size: 14.5px
    }

    .ffollow .ico {
      width: 36px;
      height: 36px;
      border-radius: 9px;
      background: rgba(255, 255, 255, .08);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      flex-shrink: 0
    }

    .ffollow a:hover .ico {
      background: var(--o)
    }

    .ffollow a:hover {
      color: #fff
    }

    .fbot {
      border-top: 1px solid rgba(255, 255, 255, .08);
      padding: 18px 0;
      display: flex;
      align-items: center;
      gap: 26px;
      flex-wrap: wrap;
      font-size: 13px;
      color: #7B7EA0
    }

    .fsoc {
      margin-left: auto;
      display: flex;
      gap: 10px
    }

    .fsoc a {
      width: 36px;
      height: 36px;
      border: 1px solid rgba(255, 255, 255, .12);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
      color: #9295B5
    }

    .fsoc a:hover {
      background: var(--o);
      border-color: var(--o);
      color: #fff
    }

    /* ================= DỊCH VỤ — bố cục theo file phần_dịch_vụ, màu/kiểu chữ đồng bộ Wicell ================= */
    .dvhero {
      position: relative;
      overflow: hidden;
      isolation: isolate;
      background: var(--k);
    }

    .dvhero-photo {
      position: absolute;
      inset: 0;
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      z-index: -2;
    }

    .dvhero:before {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(100deg, rgba(255, 255, 255, .92) 0%, rgba(255, 255, 255, .82) 36%, rgba(255, 255, 255, .58) 68%, rgba(255, 255, 255, .32) 100%);
      z-index: -1;
    }

    .dvhero-inner {
      position: relative;
      max-width: var(--max);
      margin: 0 auto;
      padding: 70px 40px 84px;
    }

    .dvhero .bc {
      font-size: 13.5px;
      color: var(--t3);
      margin-bottom: 18px;
    }

    .dvhero .bc b {
      color: var(--o-dk);
      font-weight: 600;
    }

    .dvhero .bc a:hover {
      color: var(--t1);
    }

    .dv-eyebrow {
      font-size: 13px;
      font-weight: 700;
      color: var(--o-dk);
      letter-spacing: .06em;
      text-transform: uppercase;
      margin-bottom: 14px;
    }

    .dvhero h1 {
      font-size: clamp(34px, 5vw, 54px);
      font-weight: 800;
      line-height: 1.1;
      max-width: 18ch;
      color: var(--t1);
      margin-bottom: 20px;
    }

    .dvhero p.dvdesc {
      max-width: 60ch;
      font-size: 16px;
      color: var(--t2);
      margin-bottom: 32px;
    }

    .dvbtn-row {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
    }

    .dvbtn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      padding: 14px 26px;
      border-radius: var(--rp);
      font-size: 14.5px;
      font-weight: 700;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: transform .18s ease, background .18s ease, border-color .18s ease;
    }

    .dvbtn:hover {
      transform: translateY(-2px);
    }

    .dvbtn-solid {
      background: var(--o);
      color: #fff;
    }

    .dvbtn-solid:hover {
      background: var(--o-dk);
    }

    .dvbtn-outline {
      border-color: rgba(17, 19, 24, .28);
      color: var(--t1);
      background: transparent;
    }

    .dvbtn-outline:hover {
      border-color: var(--t1);
      background: var(--s2);
    }

    @media(max-width:700px) {
      .dvhero-inner {
        padding: 56px 20px 64px;
      }
    }

    /* GROWTH — khối giới thiệu 2 cột */
    .dvgrowth {
      padding: 80px 0 66px;
      background: var(--w);
    }

    .dvgrowth-grid {
      display: grid;
      grid-template-columns: .85fr 1.15fr;
      gap: 56px;
      align-items: start;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 40px;
    }

    .dvgrowth h2 {
      font-size: clamp(26px, 3.2vw, 34px);
      margin-bottom: 14px;
    }

    .dvgrowth .sub {
      font-size: 15px;
      font-weight: 600;
      color: var(--o-dk);
    }

    .dvgrowth-right p {
      font-size: 15.5px;
      color: var(--t3);
      margin-bottom: 14px;
    }

    .dvgrowth-right p:last-child {
      margin-bottom: 0;
    }

    .dvgrowth-right img {
      width: 100%;
      border-radius: var(--rx);
      display: block;
    }

    @media(max-width:820px) {
      .dvgrowth-grid {
        grid-template-columns: 1fr;
        gap: 22px;
        padding: 0 20px;
      }
    }

    /* STRATEGY SLIDER — quy trình / nội dung theo bước */
    .dvstrategy {
      padding: 52px 0 40px;
      background: var(--s2);
      overflow: hidden;
      position: relative;
    }

    .dvstrategy-wrap {
      position: relative;
      max-width: var(--max);
      margin: 0 auto;
      padding: 0 64px;
    }

    .dvslide {
      display: none;
      animation: dvIn .42s ease both;
    }

    .dvslide.is-active {
      display: block;
    }

    @keyframes dvIn {
      from {
        opacity: 0;
        transform: translateX(24px)
      }

      to {
        opacity: 1;
        transform: translateX(0)
      }
    }

    .dvslide-grid {
      display: grid;
      grid-template-columns: 1.15fr .85fr;
      gap: 40px;
      align-items: start;
      min-height: 170px;
    }

    .dvslide-title {
      grid-column: 2;
      grid-row: 1;
    }

    .dvslide-content {
      grid-column: 1;
      grid-row: 1;
    }

    .dvslide-title h3 {
      font-size: clamp(22px, 2.6vw, 28px);
      font-weight: 700;
      line-height: 1.2;
      margin: 4px 0 10px;
      color: var(--t1);
    }

    .dvslide-title .sub {
      font-size: 14.5px;
      font-weight: 600;
      color: var(--o-dk);
      line-height: 1.45;
    }

    .dvslide-index {
      font-size: 12px;
      font-weight: 800;
      letter-spacing: .08em;
      color: var(--o);
    }

    .dvslide-content p {
      font-size: 15px;
      color: var(--t3);
      line-height: 1.65;
      margin: 0 0 16px;
    }

    .dvslide-content h4 {
      font-size: 14.5px;
      font-weight: 700;
      color: var(--t1);
      margin: 0 0 10px;
    }

    .dvchips {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 0 0 6px;
      padding: 0;
      list-style: none;
    }

    .dvchips span,
    .dvchips li {
      display: inline-flex;
      align-items: center;
      min-height: 34px;
      padding: 6px 12px;
      border: 1px solid var(--ln);
      border-radius: var(--rp);
      background: #fff;
      color: var(--t1);
      font-size: 12.5px;
      font-weight: 600;
    }

    .dvarrow {
      position: absolute;
      top: 40%;
      transform: translateY(-50%);
      width: 44px;
      height: 44px;
      border: none;
      border-radius: 50%;
      background: transparent;
      color: var(--t1);
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: transform .18s ease, background .18s ease, color .18s ease;
      z-index: 2;
    }

    .dvarrow:hover {
      transform: translateY(-50%) scale(1.06);
      background: var(--o);
      color: #fff;
    }

    .dvarrow.prev {
      left: 8px;
    }

    .dvarrow.next {
      right: 8px;
    }

    .dvnav {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
    }

    .dvdots {
      display: flex;
      align-items: center;
      gap: 8px;
    }

    .dvdot {
      width: 8px;
      height: 8px;
      padding: 0;
      border: 0;
      border-radius: 50%;
      background: var(--ln2);
      cursor: pointer;
      transition: .2s ease;
    }

    .dvdot.active {
      width: 25px;
      border-radius: var(--rp);
      background: var(--o);
    }

    @media(max-width:820px) {
      .dvstrategy {
        padding: 40px 0 32px;
      }

      .dvstrategy-wrap {
        padding: 0 20px;
      }

      .dvslide-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        min-height: 0;
      }

      .dvslide-title,
      .dvslide-content {
        grid-column: auto;
        grid-row: auto;
      }

      .dvslide-title h3 {
        font-size: 23px;
      }

      .dvslide-content p {
        font-size: 14.5px;
      }

      .dvnav {
        gap: 20px;
      }

      .dvarrow {
        position: static;
        transform: none;
        width: 40px;
        height: 40px;
      }

      .dvarrow:hover {
        transform: translateY(-2px);
      }
    }

    /* OTHERS — lưới dịch vụ / dịch vụ liên quan */
    .dvothers {
      padding: 76px 0 96px;
      background: #fff;
    }

    .dvothers h2 {
      text-align: center;
      font-size: clamp(24px, 3.2vw, 32px);
      font-weight: 700;
      margin-bottom: 40px;
      color: var(--t1);
    }

    .dvgrid3 {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      margin-bottom: 44px;
    }

    .dvcard {
      border-radius: var(--rx);
      overflow: hidden;
      background: #fff;
      border: 1px solid var(--ln);
      display: block;
      transition: box-shadow .2s ease, transform .2s ease;
    }

    .dvcard:hover {
      transform: translateY(-4px);
      box-shadow: 0 18px 36px -20px rgba(17, 19, 24, .22);
    }

    .dvcard .imw {
      height: 190px;
      overflow: hidden;
      background: var(--s2);
    }

    .dvcard .imw img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }

    .dvcard .bd {
      padding: 20px 22px 24px;
    }

    .dvcard h4 {
      font-size: 15.5px;
      font-weight: 700;
      margin-bottom: 12px;
      color: var(--t1);
    }

    .dvcard .lk {
      color: var(--o-dk);
      background: transparent;
      border: none;
      padding: 0;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 600;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      gap: 4px;
      transition: opacity .18s ease;
    }

    .dvcard .lk:hover {
      opacity: .75;
    }

    .dvctr {
      display: flex;
      justify-content: center;
    }

    @media(max-width:1180px) and (min-width:901px) {
      .dvgrid3 {
        grid-template-columns: repeat(3, 1fr);
      }
    }

    @media(max-width:900px) {
      .dvgrid3 {
        grid-template-columns: 1fr;
      }
    }

    /* ================= ROUTER + inner pages ================= */
    .page {
      display: none
    }

    .page.active {
      display: block
    }

    /* product/solution hero — dark photo band fading into light */
    .phero {
      position: relative;
      background: var(--k);
      color: #fff;
      padding: 74px 0 128px;
      overflow: hidden
    }

    .phero .bgi {
      position: absolute;
      inset: 0;
      background: radial-gradient(900px 520px at 76% 24%, rgba(245, 125, 34, .24), transparent 62%),
        linear-gradient(160deg, #15171A 0%, #0B0C0E 60%, #17120E 100%)
    }

    /* nền riêng cho hero "Trung tâm tải về" */
    .phero-support .bgi {
      background-image: url("../img/khong-dung-tai-ve.jpg");
      background-size: cover;
      background-position: center;
    }

    .phero-support .bgi::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(90deg, rgba(11, 12, 14, .78) 0%, rgba(11, 12, 14, .5) 42%, rgba(11, 12, 14, .18) 100%)
    }

    .phero .grid {
      position: absolute;
      inset: 0;
      opacity: .35;
      background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
      background-size: 64px 64px
    }

    .phero .fade {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 170px;
      background: linear-gradient(180deg, rgba(11, 12, 14, 0), rgba(120, 118, 116, .42) 66%, var(--s1) 100%)
    }

    .phero .wrap {
      position: relative;
      z-index: 3
    }

    .phero .bc {
      font-size: 13.5px;
      color: #9AA0AB;
      margin-bottom: 26px
    }

    .phero .bc a:hover {
      color: #fff
    }

    .phero .bc b {
      color: var(--o);
      font-weight: 600
    }

    .phero h1 {
      color: #fff;
      font-size: clamp(34px, 4.6vw, 58px);
      max-width: 16ch
    }

    .phero p {
      color: #B7BBC1;
      font-size: 17.5px;
      max-width: 58ch;
      margin: 20px 0 0
    }

    /* ---- product listing header, matching wicellnetwork.vn ---- */
    .plhead {
      text-align: center;
      padding: 46px 0 8px
    }

    .plhead h1 {
      font-size: clamp(26px, 3.2vw, 38px);
      letter-spacing: .03em;
      text-transform: uppercase;
      display: inline-flex;
      align-items: center;
      gap: 16px;
      margin: 0
    }

    .plhead h1 svg {
      display: none;
      color: var(--t3);
      width: 26px;
      height: 26px
    }

    .plhead .rule {
      width: 165px;
      height: 2px;
      background: linear-gradient(90deg,
          transparent,
          #ff7a00 20%,
          #ff7a00 80%,
          transparent);
      margin: 7px auto 0;
    }

    .plhead p {
      max-width: 70ch;
      margin: 18px auto 0;
    }

    /* ---- product rows ---- */
    .prow {
      display: grid;
      grid-template-columns: 160px 1fr;
      gap: 32px;
      padding: 26px 0;
      border-bottom: 1px solid var(--ln);
      align-items: flex-start
    }

    @media(max-width:640px) {
      .prow {
        grid-template-columns: 110px 1fr;
        gap: 18px
      }
    }

    .prow .pim {
      display: flex;
      align-items: center;
      justify-content: center;
      min-height: 120px
    }

    .prow .pim img {
      max-width: 100%;
      max-height: 160px;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .psku {
      display: inline-block;
      font-size: 21px;
      font-weight: 600;
      color: var(--o);
      letter-spacing: -.02em;
      margin-bottom: 9px
    }

    .psku:hover {
      color: var(--o-dk)
    }

    .plines {
      font-size: 15px;
      line-height: 1.8;
      color: var(--t2)
    }

    @media(min-width:1025px) {
      .psku {
        display: inline-block;
        font-size: 24px;
        font-weight: 600;
        color: var(--o);
        letter-spacing: -.02em;
        margin-bottom: 9px
      }

      .plines {
        font-size: 20px;
        line-height: 1.8;
        color: var(--t2)
      }
    }





    .plines b {
      font-weight: 600;
      color: var(--t1)
    }

    /* ---- product listing: sidebar tree + horizontal rows ---- */
    .plist {
      display: grid;
      grid-template-columns: 300px 1fr;
      gap: 44px;
      padding: 44px 0 100px;
      align-items: start;
      background: var(--s1)
    }

    @media(max-width:1000px) {
      .plist {
        grid-template-columns: 1fr;
        gap: 26px
      }
    }

    .ptree {
      background: #fff;
      border: 0;
      border-radius: 0;
      padding: 0;
      position: sticky;
      top: calc(var(--hdr) + 20px);
      box-shadow: none
    }

    .ptree>h4 {
      color: var(--t1);
      font-size: 19px;
      font-weight: 700;
      padding: 0 2px 14px;
      margin: 0;
      border-bottom: 2px solid var(--o)
    }

    @media(max-width:1000px) {
      .ptree {
        position: static;
      }
    }

    .trow {
      display: flex;
      align-items: center;
      gap: 13px;
      padding: 13px 2px;
      font-size: 15px;
      font-weight: 600;
      color: var(--t1);
      cursor: pointer;
      border-bottom: 1px solid var(--ln)
    }

    .trow:hover {
      color: var(--o)
    }

    .trow svg.ic {
      width: 18px;
      height: 18px;
      color: var(--t4);
      flex-shrink: 0
    }

    .trow:hover svg.ic {
      color: var(--o)
    }

    .trow svg.cv {
      width: 15px;
      height: 15px;
      margin-left: auto;
      color: var(--t4);
      transition: transform .2s
    }

    .tgrp.open .trow svg.cv {
      transform: rotate(180deg)
    }

    .tgrp.open .trow {
      color: var(--o)
    }

    .tgrp.open .trow svg.ic {
      color: var(--o)
    }

    .tsub {
      display: none
    }

    .tgrp.open .tsub {
      display: block
    }

    .tsub a {
      display: block;
      padding: 10px 2px 10px 24px;
      font-size: 14px;
      color: var(--t3);
      border-bottom: 1px solid var(--ln)
    }

    .tsub a:hover {
      color: var(--o)
    }

    .tsub a.on {
      color: var(--o);
      font-weight: 600
    }

    .tgrp:last-child .trow {
      border-bottom: 1px solid var(--ln)
    }

    .catstrip {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 0 4px;
      font-size: 14.5px;
      color: var(--t3);
      margin-bottom: 26px
    }

    .catstrip a {
      padding: 5px 10px;
      border-radius: var(--rp)
    }

    .catstrip a:hover {
      color: var(--o);
      background: var(--o-lt)
    }

    .catstrip a.on {
      color: var(--o);
      font-weight: 600
    }

    .catstrip i {
      color: var(--ln2);
      font-style: normal
    }

    .pbar {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 18px;
      flex-wrap: wrap;
      margin-bottom: 26px
    }

    .pbar h2 {
      margin: 0 0 4px;
      font-size: 32px
    }

    .pbar .cnt {
      font-size: 14.5px;
      color: var(--t3)
    }

    .sortw {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 14px;
      color: var(--t3)
    }

    select.srt {
      font-family: inherit;
      font-size: 14px;
      padding: 9px 16px;
      border: 1px solid var(--ln2);
      border-radius: var(--rp);
      background: #fff;
      color: var(--t1);
      cursor: pointer
    }

    .emptyx {
      background: #fff;
      border: 1px dashed var(--ln2);
      border-radius: var(--rx);
      padding: 70px 24px;
      text-align: center;
      color: var(--t3)
    }

    /* ---- product detail ---- */
    .pd {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 58px;
      padding: 52px 0 56px
    }

    @media(max-width:900px) {
      .pd {
        grid-template-columns: 1fr;
        gap: 30px
      }
    }

    .pgal {
      background: linear-gradient(160deg, #fff, var(--s2));
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      aspect-ratio: 1/.9;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .pthumbs {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-top: 14px
    }

    .pthumbs div {
      background: var(--s2);
      border: 1.5px solid transparent;
      border-radius: var(--r);
      height: 76px;
      display: flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      color: var(--t4)
    }

    .pthumbs div.on,
    .pthumbs div:hover {
      border-color: var(--o)
    }

    .pdsku {
      font-size: clamp(30px, 3.6vw, 44px);
      font-weight: 700;
      color: var(--t1);
      letter-spacing: -.035em;
      margin: 16px 0 10px
    }

    .kspec {
      border-top: 1px solid var(--ln);
      margin: 26px 0
    }

    .kspec div {
      display: flex;
      justify-content: space-between;
      gap: 16px;
      padding: 13px 0;
      border-bottom: 1px solid var(--ln);
      font-size: 14.5px
    }

    .kspec span:first-child {
      color: var(--t3)
    }

    .kspec span:last-child {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      color: var(--t1)
    }

    .tabs {
      border-bottom: 1px solid var(--ln);
      display: flex;
      position: sticky;
      top: var(--hdr);
      background: #fff;
      z-index: 80;
      overflow-x: auto
    }

    .tabs button {
      background: none;
      border: 0;
      border-bottom: 2px solid transparent;
      font-family: inherit;
      font-size: 14px;
      font-weight: 600;
      color: var(--t3);
      padding: 18px 22px;
      cursor: pointer;
      white-space: nowrap;
      margin-bottom: -1px
    }

    .tabs button:first-child {
      padding-left: 0
    }

    .tabs button.on {
      color: var(--t1);
      border-bottom-color: var(--o)
    }

    .tp {
      display: none;
      padding: 50px 0 80px
    }

    .tp.on {
      display: block
    }

    table.spec {
      width: 100%;
      border-collapse: collapse;
      font-size: 14.5px;
      max-width: 820px
    }

    table.spec th {
      text-align: left;
      background: var(--k);
      color: #fff;
      padding: 12px 18px;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase
    }

    table.spec td {
      padding: 13px 18px;
      border-bottom: 1px solid var(--ln)
    }

    table.spec td:first-child {
      color: var(--t3);
      width: 44%
    }

    table.spec td:last-child {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      color: var(--t1)
    }

    table.spec tr:hover td {
      background: var(--s1)
    }

    .feat {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 60px;
      align-items: center;
      margin-bottom: 76px
    }

    .feat:nth-child(even) .fv {
      order: 2
    }

    @media(max-width:860px) {
      .feat {
        grid-template-columns: 1fr;
        gap: 26px
      }

      .feat .fv {
        order: 0 !important
      }
    }

    .fv {
      background: linear-gradient(150deg, #1B1E23, #0C0E11);
      border-radius: var(--rx);
      aspect-ratio: 4/3;
      display: flex;
      align-items: center;
      justify-content: center;
      position: relative;
      overflow: hidden
    }

    .fv:after {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(360px 300px at 50% 50%, rgba(245, 125, 34, .26), transparent 70%)
    }

    .fv svg {
      position: relative;
      z-index: 2
    }

    .dlr {
      display: flex;
      align-items: center;
      gap: 18px;
      padding: 17px 0;
      border-bottom: 1px solid var(--ln)
    }

    .dlr .ft {
      width: 44px;
      height: 44px;
      border-radius: var(--r);
      background: var(--s2);
      color: var(--t2);
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 10.5px;
      font-weight: 700;
      flex-shrink: 0
    }

    .dlr .in {
      flex: 1;
      min-width: 0
    }

    .dlr .in b {
      display: block;
      font-size: 15px;
      color: var(--t1);
      font-weight: 600
    }

    .dlr .in small {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 12px;
      color: var(--t4)
    }

    .dlb {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 38px;
      height: 38px;
      border-radius: 50%;
      border: 1.5px solid var(--ln2);
      color: var(--t2)
    }

    .dlb:hover {
      background: var(--o);
      border-color: var(--o);
      color: #fff
    }

    /* ---- support ---- */
    .sup {
      display: grid;
      grid-template-columns: 290px 1fr;
      gap: 48px;
      padding: 44px 0 100px;
      align-items: start;
      background: var(--s1)
    }

    @media(max-width:960px) {
      .sup {
        grid-template-columns: 1fr;
        gap: 28px
      }
    }

    .supq {
      display: flex;
      gap: 10px;
      margin-bottom: 26px;
      flex-wrap: wrap
    }

    .supq input {
      flex: 1;
      min-width: 220px;
      border: 1px solid var(--ln2);
      border-radius: var(--rp);
      padding: 13px 22px;
      font-family: inherit;
      font-size: 14.5px;
      outline: none;
      background: #fff
    }

    .supq input:focus {
      border-color: var(--o)
    }

    .dtabs {
      display: flex;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 24px
    }

    .dtabs button {
      font-family: inherit;
      font-size: 13.5px;
      font-weight: 600;
      padding: 9px 20px;
      border-radius: var(--rp);
      border: 1.5px solid var(--ln2);
      background: #fff;
      color: var(--t2);
      cursor: pointer
    }

    .dtabs button.on {
      background: var(--o);
      border-color: var(--o);
      color: #fff
    }

    .docwrap {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      padding: 8px 26px 22px
    }

    table.docs {
      width: 100%;
      border-collapse: collapse;
      font-size: 14.5px
    }

    table.docs th {
      text-align: left;
      font-size: 11px;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t3);
      padding: 16px 12px;
      border-bottom: 2px solid var(--k)
    }

    table.docs th:last-child,
    table.docs td:last-child {
      text-align: right
    }

    table.docs td {
      padding: 16px 12px;
      border-bottom: 1px solid var(--ln)
    }

    table.docs tr:hover td {
      background: var(--s1)
    }

    table.docs .nm {
      font-weight: 600;
      color: var(--t1)
    }

    table.docs .dt {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      color: var(--t3);
      font-size: 13.5px
    }

    .pager {
      display: flex;
      gap: 8px;
      justify-content: center;
      margin-top: 32px
    }

    .pager button {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--ln2);
      background: #fff;
      font-family: inherit;
      font-weight: 600;
      font-size: 14px;
      color: var(--t2);
      cursor: pointer
    }

    .pager button.on {
      background: var(--k);
      border-color: var(--k);
      color: #fff
    }

    .flw {
      stroke-dasharray: 5 7;
      animation: fl 2.4s linear infinite
    }

    @keyframes fl {
      to {
        stroke-dashoffset: -24
      }
    }

    .rv {
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s cubic-bezier(.2, .7, .3, 1), transform .6s cubic-bezier(.2, .7, .3, 1)
    }

    .rv.in {
      opacity: 1;
      transform: none
    }

    /* Reveal safety: Home content must never stay permanently invisible
       if an observer callback is interrupted. */
    #page-home .rv {
      will-change: opacity, transform;
    }

    @media(prefers-reduced-motion:reduce) {
      .flw {
        animation: none
      }

      .rv {
        opacity: 1;
        transform: none;
        transition: none
      }
    }

    /* ============================================================================
   SOLUTIONS HUB (#page-solutions)
   Layout language taken from the Cisco industry-solutions template:
   airy white page, light-weight headings, alternating 40/60 photo-and-copy
   blocks with no card chrome, square-cornered bordered card grids, small
   outlined pill CTAs, and a split "get started" block with a vertical rule.
   Wicell's own palette and type are kept throughout.
   ========================================================================== */

    /* shared type for this page — lighter than the rest of the site, as Cisco is */
    #page-solutions h1,
    #page-solutions h2 {
      font-weight: 500;
      letter-spacing: -.028em
    }

    #page-solutions h2 {
      font-size: clamp(26px, 3vw, 37px)
    }

    #page-solutions .sec {
      padding: 96px 0
    }

    @media(max-width:860px) {
      #page-solutions .sec {
        padding: 60px 0
      }
    }

    /* --- 1. light photographic hero --- */
    .chero {
      position: relative;
      min-height: 0;
      display: flex;
      align-items: flex-start;
      overflow: hidden;
      background: #fff;
      border-bottom: 1px solid var(--ln);
      padding: 20px 0 22px;
    }

    .chero>img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 72% 50%
    }

    .chero:before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(93deg, rgba(255, 255, 255, .97) 0%, rgba(255, 255, 255, .94) 26%, rgba(255, 255, 255, .62) 48%, rgba(255, 255, 255, .05) 70%, rgba(255, 255, 255, 0) 100%)
    }

    .chero>.wrap {
      position: relative;
      z-index: 4;
      width: 100%;
      padding-top: 8px
    }

    .sbc {
      background: #fff;
      border-bottom: 1px solid var(--ln);
      font-size: 12.5px;
      color: var(--t4)
    }

    .sbc .wrap {
      display: flex;
      gap: 9px;
      align-items: center;
      height: 40px
    }

    .sbc a {
      color: var(--t4)
    }

    .sbc a:hover {
      color: var(--o)
    }

    .sbc b {
      color: var(--t2);
      font-weight: 500
    }

    .sbc span {
      opacity: .5
    }

    .chero h1 {
      color: var(--t1);
      max-width: 13ch;
      font-size: clamp(32px, 4.4vw, 54px);
      line-height: 1.1;
      margin-bottom: 14px
    }

    .chero .sub {
      font-size: 15px;
      color: var(--o-dk);
      max-width: 44ch;
      margin: 0 0 30px;
      font-weight: 500
    }

    .chero .btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      align-items: center
    }

    .chero .play {
      width: 24px;
      height: 24px;
      border-radius: 50%;
      background: rgba(255, 255, 255, .22);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      margin-right: -4px
    }

    .chero .play svg {
      width: 11px;
      height: 11px;
      margin-left: 1.5px
    }

    @media(max-width:820px) {
      .chero {
        min-height: 0;
        padding: 18px 0 20px;
      }

      .chero:before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9))
      }

      .chero h1 {
        max-width: none
      }
    }

    /* --- 2. alternating photo / copy block, no card chrome (Cisco's core unit) --- */
    .zz {
      display: grid;
      grid-template-columns: .42fr .58fr;
      gap: 70px;
      align-items: center
    }

    .zz.rev {
      grid-template-columns: .58fr .42fr
    }

    .zz.rev .ph {
      order: 2
    }

    .zz .ph {
      position: relative;
      aspect-ratio: 3/2;
      overflow: hidden;
      background: var(--s2)
    }

    .zz .ph img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .zz .bd h2 {
      margin-bottom: 18px;
      max-width: 16ch
    }

    .zz .bd p {
      font-size: 14.5px;
      color: var(--t3);
      max-width: 54ch;
      line-height: 1.75
    }

    .zz .bd .btn {
      margin-top: 12px
    }

    @media(max-width:900px) {

      .zz,
      .zz.rev {
        grid-template-columns: 1fr;
        gap: 30px
      }

      .zz.rev .ph {
        order: 0
      }

      .zz .bd h2 {
        max-width: none
      }
    }

    /* --- 3. centred section head --- */
    .chead {
      text-align: center;
      max-width: 760px;
      margin: 0 auto 46px
    }

    .chead h2 {
      margin-bottom: 14px
    }

    .chead p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0
    }

    /* --- 4. outlined pill CTA --- */
    .b-ol {
      background: transparent;
      color: var(--o-dk);
      border-color: var(--o);
      padding: 10px 26px;
      font-size: 14px;
      font-weight: 500
    }

    .b-ol:hover {
      background: var(--o);
      color: #fff;
      border-color: var(--o)
    }

    .b-dk {
      background: var(--k);
      color: #fff;
      padding: 10px 24px;
      font-size: 14px;
      font-weight: 500
    }

    .b-dk:hover {
      background: var(--k3)
    }

    /* --- 5. story cards: square corners, thin border, photo on top --- */
    .cstory {
      background: #fff;
      border: 1px solid var(--ln);
      display: flex;
      flex-direction: column;
      transition: .2s
    }

    .cstory:hover {
      border-color: var(--ln2);
      box-shadow: 0 14px 34px rgba(17, 19, 24, .08)
    }

    .cstory .im {
      aspect-ratio: 16/10;
      overflow: hidden;
      background: linear-gradient(150deg, #20242B, #0F1216)
    }

    .cstory .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .cstory:hover .im img {
      transform: scale(1.04)
    }

    .cstory .bd {
      padding: 24px 26px 28px;
      flex: 1;
      display: flex;
      flex-direction: column
    }

    .cstory .ey {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--t4);
      margin-bottom: 10px
    }

    .cstory h4 {
      font-size: 17px;
      font-weight: 600;
      line-height: 1.35;
      margin-bottom: 11px
    }

    .cstory:hover h4 {
      color: var(--o-dk)
    }

    .cstory p {
      font-size: 13.5px;
      color: var(--t3);
      margin: 0 0 18px;
      line-height: 1.7
    }

    .cstory .lk {
      margin-top: auto;
      font-size: 13.5px
    }

    /* --- 6. sub-vertical cards: large line-art icon, square corners --- */
    .vcell {
      background: #fff;
      border: 1px solid var(--ln);
      padding: 30px 26px 28px;
      display: flex;
      flex-direction: column;
      transition: .2s;
      height: 100%
    }

    .vcell:hover {
      border-color: var(--ln2);
      box-shadow: 0 14px 34px rgba(17, 19, 24, .08)
    }

    .vcell .ic {
      margin-bottom: 26px;
      height: 42px;
      display: flex;
      align-items: center
    }

    .vcell .ic svg {
      width: 42px;
      height: 42px;
      color: var(--t2);
      stroke-width: 1.15
    }

    .vcell h4 {
      font-size: 16.5px;
      font-weight: 600;
      margin-bottom: 9px
    }

    .vcell p {
      font-size: 13.5px;
      color: var(--t3);
      margin: 0 0 18px;
      line-height: 1.7
    }

    .vcell .lk {
      margin-top: auto;
      font-size: 13.5px
    }

    /* --- 7. "get started" split: heading left, link grid right, vertical rule --- */
    .getst {
      display: grid;
      grid-template-columns: .32fr .68fr;
      gap: 0;
      align-items: start
    }

    .getst h2 {
      max-width: 9ch
    }

    .getst .gr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 38px 54px;
      border-left: 1px solid var(--ln);
      padding-left: 58px
    }

    .getst .gr h4 {
      font-size: 15.5px;
      font-weight: 600;
      margin-bottom: 7px
    }

    .getst .gr p {
      font-size: 13.5px;
      color: var(--t3);
      margin: 0 0 12px;
      line-height: 1.65
    }

    .getst .gr .lk {
      font-size: 13.5px
    }

    @media(max-width:900px) {
      .getst {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .getst h2 {
        max-width: none
      }

      .getst .gr {
        border-left: 0;
        padding-left: 0;
        gap: 30px 36px
      }
    }

    @media(max-width:560px) {
      .getst .gr {
        grid-template-columns: 1fr
      }
    }

    /* --- 8. solution explorer, revealed by the "solve today" CTA --- */
    .expl {
      display: none;
      margin-top: 52px
    }

    .expl.on {
      display: block;
      animation: exIn .32s ease
    }

    @keyframes exIn {
      from {
        opacity: 0;
        transform: translateY(10px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    .pick {
      display: grid;
      grid-template-columns: 318px 1fr;
      background: #fff;
      border: 1px solid var(--ln)
    }

    .pick .rail {
      background: var(--s1);
      border-right: 1px solid var(--ln);
      padding: 10px 0
    }

    .ptab {
      display: flex;
      align-items: center;
      gap: 14px;
      width: 100%;
      text-align: left;
      background: none;
      border: 0;
      font-family: inherit;
      font-size: 15px;
      font-weight: 500;
      color: var(--t2);
      padding: 16px 24px;
      cursor: pointer;
      position: relative;
      line-height: 1.4;
      transition: .16s
    }

    .ptab svg {
      width: 19px;
      height: 19px;
      color: var(--t4);
      flex-shrink: 0
    }

    .ptab:before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 3px;
      background: var(--o);
      transform: scaleY(0);
      transition: transform .2s
    }

    .ptab:hover {
      color: var(--t1);
      background: #fff
    }

    .ptab.on {
      background: #fff;
      color: var(--o-dk);
      font-weight: 600
    }

    .ptab.on:before {
      transform: scaleY(1)
    }

    .ptab.on svg {
      color: var(--o)
    }

    .ppan {
      display: none;
      padding: 42px 46px
    }

    .ppan.on {
      display: block;
      animation: exIn .3s ease
    }

    .ppan h3 {
      font-size: 22px;
      font-weight: 600;
      margin: 14px 0 12px
    }

    .ppan>p {
      font-size: 14.5px;
      color: var(--t3);
      max-width: 62ch;
      line-height: 1.75
    }

    .pgrid {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0 42px;
      margin: 28px 0;
      border-top: 1px solid var(--ln);
      padding-top: 24px
    }

    .pgrid h5 {
      font-size: 10.5px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--t4);
      margin: 0 0 12px
    }

    .pgrid ul {
      list-style: none;
      margin: 0 0 20px;
      padding: 0
    }

    .pgrid li {
      font-size: 14px;
      color: var(--t2);
      padding: 7px 0 7px 24px;
      position: relative
    }

    .pgrid li:before {
      content: "";
      position: absolute;
      left: 2px;
      top: 15px;
      width: 9px;
      height: 2px;
      background: var(--o)
    }

    .pgrid .sku {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 12.5px;
      color: var(--t3)
    }

    @media(max-width:1050px) {
      .pick {
        grid-template-columns: 1fr
      }

      .pick .rail {
        display: flex;
        overflow-x: auto;
        border-right: 0;
        border-bottom: 1px solid var(--ln);
        padding: 0
      }

      .ptab {
        white-space: nowrap;
        padding: 15px 20px
      }

      .ptab:before {
        top: auto;
        bottom: 0;
        left: 0;
        right: 0;
        width: auto;
        height: 3px;
        transform: scaleX(0)
      }

      .ptab.on:before {
        transform: scaleX(1)
      }

      .ppan {
        padding: 30px 22px
      }
    }

    @media(max-width:640px) {
      .pgrid {
        grid-template-columns: 1fr;
        gap: 0
      }
    }

    .note {
      font-size: 12.5px;
      color: var(--t4);
      margin-top: 22px
    }


    /* ---- solution detail template ---- */
    #page-soldetail h1,
    #page-soldetail h2 {
      font-weight: 500;
      letter-spacing: -.028em
    }

    #page-soldetail h2 {
      font-size: clamp(26px, 3vw, 37px)
    }

    #page-soldetail .sec {
      padding: 96px 0
    }

    @media(max-width:860px) {
      #page-soldetail .sec {
        padding: 60px 0
      }
    }

    #page-soldetail .chero h1 {
      max-width: 17ch
    }

    #page-soldetail .chero .sub {
      color: var(--t3);
      font-weight: 400;
      font-size: 16px;
      max-width: 52ch
    }

    #page-soldetail .eyeb {
      margin-bottom: 8px;
      display: inline-block;
    }

    /* ---- solution hero: simplified to match the Công nghệ detail-page style
       (plain white background, no photo, no eyebrow badge, no CTA buttons —
       just a clean bold title + one description paragraph). Applies to every
       solution automatically since chi-tiet.html is the shared template. ---- */
    #page-soldetail .chero {
      background: #fff;
      padding: 56px 0 48px;
    }

    #page-soldetail .chero:before,
    #page-soldetail .chero>img.bg,
    #page-soldetail .chero .eyeb,
    #page-soldetail .chero .btns {
      display: none;
    }

    #page-soldetail .chero h1 {
      font-size: clamp(26px, 3.2vw, 38px);
      font-weight: 800;
      letter-spacing: -.02em;
      max-width: 26ch;
      margin-bottom: 10px;
    }

    #page-soldetail .chero .sub {
      margin-bottom: 0;
    }

    @media(max-width:820px) {
      #page-soldetail .chero {
        padding: 26px 0 24px;
      }
    }

    /* --- banner các trang Công nghệ: dùng chung kiểu với trang Giải pháp --- */
    #page-techdetail .chero h1,
    #page-techwifi .chero h1,
    #page-techcam .chero h1,
    #page-techiot .chero h1,
    #page-tech .chero h1 {
      max-width: 17ch;
      font-weight: 500;
      letter-spacing: -.028em
    }

    #page-techdetail .chero .sub,
    #page-techwifi .chero .sub,
    #page-techcam .chero .sub,
    #page-techiot .chero .sub,
    #page-tech .chero .sub {
      color: var(--t3);
      font-weight: 400;
      font-size: 16px;
      line-height: 1.8;
      max-width: 56ch;
      margin-bottom: 0
    }

    #page-techdetail .chero .eyeb,
    #page-techwifi .chero .eyeb,
    #page-techcam .chero .eyeb,
    #page-techiot .chero .eyeb,
    #page-tech .chero .eyeb {
      margin-bottom: 18px
    }

    .chalc {
      background: #fff;
      border: 1px solid var(--ln);
      border-top: 2px solid var(--k);
      padding: 28px 26px 26px
    }

    .chalc h4 {
      font-size: 17px;
      font-weight: 600;
      margin-bottom: 10px
    }

    .chalc p {
      font-size: 13.5px;
      color: var(--t3);
      margin: 0;
      line-height: 1.72
    }

    .stepc {
      background: #fff;
      border: 1px solid var(--ln);
      padding: 28px 24px 26px;
      height: 100%
    }

    .stepc .n {
      display: block;
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 12.5px;
      letter-spacing: .1em;
      color: var(--o);
      margin-bottom: 18px
    }

    .stepc h4 {
      font-size: 16.5px;
      font-weight: 600;
      margin-bottom: 8px
    }

    .stepc p {
      font-size: 13.5px;
      color: var(--t3);
      margin: 0;
      line-height: 1.7
    }

    .capsp {
      display: grid;
      grid-template-columns: .36fr .64fr;
      gap: 0;
      align-items: start
    }

    .capsp>div:first-child {
      padding-right: 44px
    }

    .capsp h2 {
      max-width: 12ch;
      margin-bottom: 22px
    }

    .capsp .ck2 {
      border-left: 1px solid var(--ln);
      padding-left: 56px;
      columns: 2;
      column-gap: 44px
    }

    .capsp .ck2 li {
      font-size: 14.5px;
      color: var(--t2)
    }

    @media(max-width:900px) {
      .capsp {
        grid-template-columns: 1fr;
        gap: 28px
      }

      .capsp>div:first-child {
        padding-right: 0
      }

      .capsp h2 {
        max-width: none
      }

      .capsp .ck2 {
        border-left: 0;
        padding-left: 0;
        columns: 1
      }
    }

    #page-soldetail .pshow {
      grid-template-columns: repeat(4, 1fr);
      gap: 22px
    }

    #page-soldetail .pcell {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: 0;
      padding: 30px 24px 26px
    }

    #page-soldetail .pcell:hover {
      border-color: var(--ln2);
      box-shadow: 0 14px 34px rgba(17, 19, 24, .08);
      transform: none
    }

    #page-soldetail .pcell .im {
      height: 150px;
      margin-bottom: 20px
    }

    #page-soldetail .pcell .sku {
      font-size: 16px
    }

    #page-soldetail .pcell p {
      font-size: 13px
    }


    /* ============================================================================
   CÔNG NGHỆ WI-FI — trang danh mục (#page-techwifi) và trang chi tiết
   (#page-techdetail). Bố cục theo trang giải pháp của Ruijie: banner ảnh,
   khối thách thức 3 cột, khối giải pháp ảnh + chữ, khối lợi ích, khối tính
   năng dạng tab, sản phẩm liên quan, tài nguyên liên quan.
   ========================================================================== */
    #page-techwifi h1,
    #page-techwifi h2,
    #page-techdetail h1,
    #page-techdetail h2 {
      font-weight: 500;
      letter-spacing: -.028em
    }

    #page-techdetail h2 {
      font-size: clamp(25px, 2.8vw, 35px)
    }

    #page-techwifi .sec,
    #page-techdetail .sec {
      padding: 88px 0
    }

    @media(max-width:860px) {

      #page-techwifi .sec,
      #page-techdetail .sec {
        padding: 56px 0
      }
    }

    /* --- banner --- */
    .thero {
      position: relative;
      background: linear-gradient(105deg, #101216 0%, #171A1F 46%, #20242B 100%);
      color: #fff;
      overflow: hidden
    }

    .thero:before {
      content: "";
      position: absolute;
      right: -6%;
      top: -30%;
      width: 62%;
      height: 170%;
      background: radial-gradient(circle at 50% 50%, rgba(245, 125, 34, .20), transparent 62%);
      pointer-events: none
    }

    .thero .wrap {
      position: relative;
      z-index: 2;
      display: grid;
      grid-template-columns: 1.02fr .98fr;
      gap: 56px;
      align-items: center;
      padding: 64px 40px 68px
    }

    .thero .eyeb {
      color: var(--o);
      margin-bottom: 16px
    }

    .thero h1 {
      color: #fff;
      font-size: clamp(28px, 3.6vw, 46px);
      line-height: 1.12;
      margin-bottom: 18px
    }

    .thero p {
      color: #B7BBC1;
      font-size: 15.5px;
      line-height: 1.8;
      max-width: 58ch;
      margin: 0 0 30px
    }

    .thero .btns {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    .thero .shot {
      position: relative;
      border: 1px solid rgba(255, 255, 255, .12);
      background: #fff;
      aspect-ratio: 16/10;
      overflow: hidden;
      padding: 14px
    }

    .thero .shot img {
      position: absolute;
      inset: 14px;
      width: calc(100% - 28px);
      height: calc(100% - 28px);
      object-fit: contain
    }

    @media(max-width:940px) {
      .thero .wrap {
        grid-template-columns: 1fr;
        gap: 30px;
        padding: 44px 20px 50px
      }
    }

    /* --- trang sản phẩm: bám theo bố cục trang gốc wicellnetwork.vn --- */
    .pdtop {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 56px;
      align-items: start;
      padding: 40px 0 8px
    }

    @media(max-width:900px) {
      .pdtop {
        grid-template-columns: 1fr;
        gap: 26px;
        padding-top: 26px
      }
    }

    .pdshot {
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 10px
    }

    .pdshot img {
      max-width: 100%;
      max-height: 460px;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .pdtitle {
      color: var(--o);
      font-size: clamp(24px, 2.7vw, 31px);
      font-weight: 600;
      letter-spacing: -.02em;
      margin: 0 0 12px
    }

    .pdsub2 {
      color: var(--o-dk);
      font-size: 17px;
      font-weight: 600;
      line-height: 1.55;
      margin: 0 0 16px
    }

    .pdx ul.disc {
      list-style: disc;
      padding-left: 20px;
      margin: 0 0 18px
    }

    .pdx ul.disc li {
      font-size: 14px;
      color: var(--t2);
      line-height: 1.7;
      padding: 2px 0
    }

    .pdxh {
      color: var(--t2);
      font-size: 14.5px;
      font-weight: 500;
      margin: 0 0 8px
    }

    .pdcta {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
      margin-top: 24px
    }

    .pills {
      display: flex;
      gap: 14px;
      justify-content: center;
      flex-wrap: wrap;
      margin: 40px 0 0;
      padding-bottom: 26px;
      position: relative;
    }

    .pills::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: linear-gradient(90deg,
          transparent,
          #ff7a00 20%,
          #ff7a00 80%,
          transparent);
    }

    .pill {
      border: 1px solid var(--o);
      color: var(--o-dk);
      background: #fff;
      border-radius: var(--rp);
      padding: 9px 30px;
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 500;
      cursor: pointer;
      transition: .16s
    }

    .pill:hover {
      background: var(--o-lt)
    }

    .pill.on {
      background: var(--o);
      color: #fff
    }

    .pdbody {
      padding-top: 30px;
      padding-bottom: 56px
    }

    .pdpan {
      display: none
    }

    .pdpan.on {
      display: block;
      animation: fpIn .25s ease
    }

    .pdlead p {
      font-size: 14.5px;
      color: var(--t2);
      line-height: 1.95;
      margin: 0 0 1em;
      text-align: justify
    }

    .pdgh {
      color: var(--o);
      font-size: 15.5px;
      font-weight: 700;
      margin: 34px 0 6px
    }

    .pdpan>.pdgh:first-child {
      margin-top: 0
    }

    .pdlead+.pdgh {
      margin-top: 26px
    }

    .pdrow {
      padding: 13px 2px;
      border-bottom: 1px solid var(--ln);
      font-size: 14px;
      color: var(--t2);
      line-height: 1.7
    }

    .pdrow span {
      display: block
    }

    .pdrow span+span {
      color: var(--t3)
    }

    .pdrow a {
      color: var(--t2)
    }

    .pdrow a:hover {
      color: var(--o)
    }

    .pdrel-h {
      font-size: 19px;
      font-weight: 600;
      color: var(--t1);
      margin: 0 0 6px;
      padding-bottom: 12px;
      position: relative;
      display: inline-block
    }

    .pdrel-h:after {
      content: "";
      position: absolute;
      left: 0;
      bottom: 0;
      width: 100%;
      height: 2px;
      background: var(--o)
    }

    .pdrel {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 22px;
      margin-top: 26px
    }

    @media(max-width:900px) {
      .pdrel {
        grid-template-columns: 1fr 1fr
      }
    }

    .pdrc {
      border: 1px solid transparent;
      background: var(--s1);
      padding: 18px 14px 16px;
      text-align: center;
      display: flex;
      flex-direction: column;
      gap: 12px;
      transition: .2s
    }

    .pdrc:hover {
      border-color: var(--o-mid);
      background: #fff;
      box-shadow: 0 12px 30px rgba(17, 19, 24, .08)
    }

    .pdrc.on {
      border-color: var(--ln2);
      background: #fff
    }

    .pdrc .im {
      height: 130px;
      display: flex;
      align-items: center;
      justify-content: center
    }

    .pdrc .im img {
      max-width: 100%;
      max-height: 130px;
      object-fit: contain;
      mix-blend-mode: multiply
    }

    .pdrc .nm {
      font-size: 13.5px;
      color: var(--t2);
      font-weight: 500
    }

    .pdrc:hover .nm {
      color: var(--o-dk)
    }

    /* --- trang sản phẩm (cũ) --- */
    #page-detail h1,
    #page-detail h2 {
      font-weight: 500;
      letter-spacing: -.028em
    }

    .pdsub {
      font-size: 16px;
      color: var(--t2);
      line-height: 1.7;
      margin: 0 0 22px;
      max-width: 52ch;
      font-weight: 500
    }

    .pdh5 {
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--o-dk);
      margin: 0 0 12px
    }

    .pdh4 {
      font-size: 17px;
      font-weight: 600;
      margin: 34px 0 14px
    }

    .pdh4:first-child {
      margin-top: 0
    }

    .kbul {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .kbul li {
      position: relative;
      padding: 7px 0 7px 24px;
      font-size: 14.5px;
      color: var(--t2);
      line-height: 1.7
    }

    .kbul li:before {
      content: "";
      position: absolute;
      left: 2px;
      top: 16px;
      width: 9px;
      height: 2px;
      background: var(--o);
      border-radius: 2px
    }

    .kbul li b {
      font-weight: 600;
      color: var(--t1)
    }

    .flist li b {
      font-weight: 600;
      color: var(--t1)
    }

    .pdnote {
      margin-top: 30px;
      padding: 16px 20px;
      background: var(--s1);
      border-left: 3px solid var(--o-mid);
      font-size: 13.5px;
      color: var(--t3);
      line-height: 1.75
    }

    /* --- thẻ "điểm nổi bật" trên trang giải pháp --- */
    .hlcard {
      background: #fff;
      border: 1px solid var(--ln);
      padding: 30px 30px 28px;
      transition: .2s;
      height: 100%
    }

    .hlcard:hover {
      border-color: var(--o-mid);
      box-shadow: 0 14px 34px rgba(17, 19, 24, .07)
    }

    .hlcard .n {
      display: block;
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
      font-size: 13px;
      letter-spacing: .1em;
      color: var(--o);
      margin-bottom: 16px
    }

    .hlcard h4 {
      font-size: 17.5px;
      font-weight: 600;
      line-height: 1.4;
      margin-bottom: 14px
    }

    .hlcard .tprose p {
      font-size: 14.5px;
      line-height: 1.8;
      color: var(--t3);
      max-width: none
    }

    .hlcard .flist {
      columns: 1
    }

    .hlcard .flist>li {
      font-size: 14.5px;
      color: var(--t3)
    }

    /* --- bảng dòng sản phẩm chuyên dụng --- */
    .serpanel {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 0;
      border: 1px solid var(--ln);
      background: #fff
    }

    .serpanel .sercol {
      padding: 26px 26px 28px;
      border-right: 1px solid var(--ln)
    }

    .serpanel .sercol:last-child {
      border-right: 0
    }

    .serpanel h5 {
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .13em;
      text-transform: uppercase;
      color: var(--o-dk);
      margin: 0 0 12px;
      line-height: 1.5
    }

    .serpanel p {
      font-size: 13.5px;
      color: var(--t2);
      margin: 0;
      line-height: 1.8;
      font-family: "Be Vietnam Pro", sans-serif
    }

    @media(max-width:960px) {
      .serpanel {
        grid-template-columns: 1fr 1fr
      }

      .serpanel .sercol:nth-child(2n) {
        border-right: 0
      }

      .serpanel .sercol:nth-child(-n+2) {
        border-bottom: 1px solid var(--ln)
      }
    }

    @media(max-width:560px) {
      .serpanel {
        grid-template-columns: 1fr
      }

      .serpanel .sercol {
        border-right: 0;
        border-bottom: 1px solid var(--ln)
      }
    }

    /* --- mục lục ngang, dính ngay dưới header --- */
    .anav {
      position: sticky;
      top: var(--hdr);
      z-index: 80;
      background: #fff;
      border-bottom: 1px solid var(--ln)
    }

    .anav .wrap {
      display: flex;
      gap: 2px;
      overflow-x: auto;
      scrollbar-width: none;
      -ms-overflow-style: none
    }

    .anav .wrap::-webkit-scrollbar {
      display: none
    }

    .anav a {
      position: relative;
      white-space: nowrap;
      padding: 17px 17px;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--t3);
      transition: color .16s;
      flex-shrink: 0
    }

    .anav a:hover {
      color: var(--t1)
    }

    .anav a.on {
      color: var(--t1);
      font-weight: 700
    }

    .anav a:after {
      content: "";
      position: absolute;
      left: 17px;
      right: 17px;
      bottom: 0;
      height: 3px;
      background: var(--o);
      transform: scaleX(0);
      transition: transform .2s
    }

    .anav a.on:after {
      transform: scaleX(1)
    }

    @media(max-width:700px) {
      .anav a {
        padding: 15px 13px;
        font-size: 13.5px
      }
    }

    /* --- danh mục 16 công nghệ --- */
    .tgrid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 24px
    }

    @media(max-width:1050px) {
      .tgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {
      .tgrid {
        grid-template-columns: 1fr
      }
    }

    .tcard {
      background: #fff;
      border: 1px solid var(--ln);
      display: flex;
      flex-direction: column;
      transition: .2s
    }

    .tcard:hover {
      border-color: var(--o-mid);
      box-shadow: 0 16px 38px rgba(17, 19, 24, .1);
      transform: translateY(-3px)
    }

    .tcard .im {
      aspect-ratio: 16/10;
      overflow: hidden;
      background: var(--s2)
    }

    .tcard .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .tcard:hover .im img {
      transform: scale(1.05)
    }

    .tcard .bd {
      padding: 20px 20px 22px;
      display: flex;
      flex-direction: column;
      flex: 1
    }

    .tcard h4 {
      font-size: 15px;
      font-weight: 600;
      line-height: 1.4;
      margin: 0 0 10px;
      text-transform: uppercase;
      letter-spacing: .01em
    }

    .tcard:hover h4 {
      color: var(--o-dk)
    }

    .tcard p {
      font-size: 13px;
      color: var(--t3);
      margin: 0 0 16px;
      line-height: 1.65;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .tcard .lk {
      margin-top: auto;
      font-size: 13px
    }

    /* --- khối lợi ích --- */
    .bencard {
      background: #fff;
      border: 1px solid var(--ln);
      padding: 30px 26px 28px;
      height: 100%;
      transition: .2s
    }

    .bencard:hover {
      border-color: var(--o-mid);
      box-shadow: 0 14px 34px rgba(17, 19, 24, .07)
    }

    .bencard .ic {
      width: 44px;
      height: 44px;
      border-radius: 50%;
      background: var(--o-lt);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px
    }

    .bencard .ic svg {
      width: 21px;
      height: 21px;
      color: var(--o-dk)
    }

    .bencard p {
      font-size: 14.5px;
      color: var(--t2);
      margin: 0;
      line-height: 1.75
    }

    /* --- khối tính năng dạng tab --- */
    .ftabs {
      display: flex;
      gap: 4px;
      flex-wrap: wrap;
      border-bottom: 1px solid var(--ln);
      margin-bottom: 38px
    }

    .ftab {
      font-family: inherit;
      font-size: 14.5px;
      font-weight: 500;
      color: var(--t3);
      background: none;
      border: 0;
      padding: 14px 22px;
      cursor: pointer;
      position: relative;
      white-space: nowrap;
      transition: .16s
    }

    .ftab:hover {
      color: var(--t1)
    }

    .ftab.on {
      color: var(--o-dk);
      font-weight: 600
    }

    .ftab:after {
      content: "";
      position: absolute;
      left: 14px;
      right: 14px;
      bottom: -1px;
      height: 2px;
      background: var(--o);
      transform: scaleX(0);
      transition: transform .22s
    }

    .ftab.on:after {
      transform: scaleX(1)
    }

    .fpan {
      display: none
    }

    .fpan.on {
      display: block;
      animation: fpIn .3s ease
    }

    @keyframes fpIn {
      from {
        opacity: 0;
        transform: translateY(8px)
      }

      to {
        opacity: 1;
        transform: none
      }
    }

    @media(max-width:760px) {
      .ftabs {
        overflow-x: auto;
        flex-wrap: nowrap
      }
    }

    /* --- danh sách nội dung (dùng chung cho mọi khối) --- */
    .flist {
      list-style: none;
      margin: 0;
      padding: 0;
      columns: 2;
      column-gap: 52px
    }

    .flist.one {
      columns: 1;
      max-width: 80ch
    }

    @media(max-width:820px) {
      .flist {
        columns: 1
      }
    }

    .flist>li {
      position: relative;
      padding: 0 0 14px 26px;
      margin-bottom: 2px;
      font-size: 14.5px;
      color: var(--t2);
      line-height: 1.75;
      break-inside: avoid
    }

    .flist>li:before {
      content: "";
      position: absolute;
      left: 2px;
      top: 11px;
      width: 10px;
      height: 2px;
      background: var(--o);
      border-radius: 2px
    }

    .flist li.sub {
      padding-left: 48px;
      color: var(--t3);
      font-size: 14px
    }

    .flist li.sub:before {
      left: 26px;
      width: 6px;
      background: var(--ln2)
    }

    .tprose p {
      font-size: 15px;
      color: var(--t2);
      line-height: 1.85;
      max-width: 80ch;
      margin: 0 0 1.1em
    }

    .tprose p:last-child {
      margin-bottom: 0
    }

    /* khung chờ cho mục chưa có nội dung — giữ đủ bốn mục trên thanh mục lục */
    .tdph {
      max-width: 900px;
      margin: 0 auto;
      border: 1px dashed var(--ln2);
      border-radius: var(--rl);
      background: var(--s1);
      padding: 46px 30px;
      text-align: center;
      font-size: 15.5px;
      color: var(--t4)
    }

    .tfig {
      margin: 26px 0 0;
      border: 1px solid var(--ln);
      background: var(--s1);
      padding: 16px;
      transition: border-color .2s, box-shadow .2s
    }

    .tfig img {
      width: 100%;
      height: auto;
      display: block
    }

    .tprose+.tfig,
    .flist+.tfig {
      margin-top: 26px
    }

    .tfig:hover {
      border-color: var(--ln2);
      box-shadow: 0 14px 32px rgba(17, 19, 24, .07)
    }

    /* nhiều ảnh minh hoạ cùng một mục xếp thành dải thay vì chồng dọc từng khối */
    .tgal {
      display: grid;
      grid-template-columns: repeat(var(--gcols, 2), 1fr);
      gap: 16px;
      margin: 26px 0 0
    }

    .tgal .tfig {
      margin: 0;
      display: flex;
      align-items: center
    }

    .tgal-2 {
      --gcols: 2
    }

    .tgal-3 {
      --gcols: 3
    }

    @media(max-width:700px) {
      .tgal-2 {
        --gcols: 2
      }

      .tgal-3 {
        --gcols: 2
      }
    }

    @media(max-width:480px) {
      .tgal {
        --gcols: 1 !important
      }
    }

    /* --- dải ứng dụng / lưu ý --- */
    .nstrip {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 0;
      border-top: 2px solid var(--k);
      background: #fff
    }

    .nstrip>div {
      padding: 32px 36px 34px;
      border-right: 1px solid var(--ln)
    }

    .nstrip>div:last-child {
      border-right: 0
    }

    .nstrip.solo {
      grid-template-columns: 1fr
    }

    .nstrip h4 {
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .15em;
      text-transform: uppercase;
      color: var(--o-dk);
      margin-bottom: 14px
    }

    .nstrip p {
      font-size: 14.5px;
      color: var(--t2);
      margin: 0 0 .8em;
      line-height: 1.8
    }

    .nstrip p:last-child {
      margin-bottom: 0
    }

    .nstrip .flist {
      columns: 1
    }

    @media(max-width:760px) {
      .nstrip {
        grid-template-columns: 1fr
      }

      .nstrip>div {
        border-right: 0;
        border-bottom: 1px solid var(--ln)
      }
    }

    /* --- lưới sản phẩm trên trang công nghệ --- */
    #page-techdetail .pshow {
      grid-template-columns: repeat(4, 1fr);
      gap: 22px
    }

    #page-techdetail .pcell {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: 0;
      padding: 28px 22px 24px
    }

    #page-techdetail .pcell:hover {
      border-color: var(--ln2);
      box-shadow: 0 14px 34px rgba(17, 19, 24, .08);
      transform: none
    }

    #page-techdetail .pcell .im {
      height: 140px;
      margin-bottom: 18px
    }

    #page-techdetail .pcell .sku {
      font-size: 15.5px
    }

    #page-techdetail .pcell p {
      font-size: 12.5px
    }

    @media(max-width:1050px) {
      #page-techdetail .pshow {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {
      #page-techdetail .pshow {
        grid-template-columns: 1fr
      }
    }

    @media(max-width:1050px) {
      #page-soldetail .pshow {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:600px) {
      #page-soldetail .pshow {
        grid-template-columns: 1fr
      }
    }


    .note {
      position: fixed;
      left: 16px;
      bottom: 16px;
      z-index: 870;
      background: #fff;
      border: 1px solid var(--ln2);
      color: var(--t3);
      font-size: 11.5px;
      font-weight: 600;
      padding: 8px 16px;
      border-radius: var(--rp);
      box-shadow: 0 6px 20px rgba(17, 19, 24, .09)
    }

    @media(max-width:760px) {
      .note {
        display: none
      }
    }

    html,
    body {
      width: 100%;
      max-width: 100%;
      overflow-x: visible;
    }

    *,
    *::before,
    *::after {
      box-sizing: border-box;
    }

    @media(max-width:640px) {

      html,
      body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
      }

      img,
      video,
      iframe,
      svg {
        max-width: 100%;
      }
    }

    /* ============================================================ */
    /* ============ NEWSROOM (trang Tin tức + bài viết) =========== */
    /* ============================================================ */

    /* nút Tin tức trên thanh nav: chỉ bấm, không mega menu */
    nav.nv>div.nomega .top:hover:after {
      transform: scaleX(1)
    }

    /* ---------- masthead ---------- */
    .nrtop {
      position: relative;
      background: #000000;
      color: #fff;
      padding: 66px 0 58px;
      overflow: hidden
    }

    .nrtop .bgi {
      position: absolute;
      inset: 0;
      background: #000000
    }

    .nrtop .grid {
      position: absolute;
      inset: 0;
      opacity: .3;
      background-image: linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
      background-size: 64px 64px
    }

    .nrtop .wrap {
      position: relative;
      z-index: 3
    }

    .nrtop .bc {
      font-size: 13.5px;
      color: #9AA0AB;
      margin-bottom: 22px
    }

    .nrtop .bc a {
      cursor: pointer
    }

    .nrtop .bc a:hover {
      color: #fff
    }

    .nrtop .bc b {
      color: var(--o);
      font-weight: 600
    }

    .nrmast {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 40px;
      flex-wrap: wrap
    }

    .nrtop h1 {
      color: #fff;
      font-size: clamp(32px, 4.2vw, 54px);
      margin: 0;
      line-height: 1.06;
      letter-spacing: -.02em
    }

    .nrtop h1 span {
      color: var(--o)
    }

    .nrtop .sub {
      color: #B7BBC1;
      font-size: 16.5px;
      max-width: 54ch;
      margin: 16px 0 0
    }

    .nrsearch {
      display: flex;
      align-items: center;
      gap: 10px;
      background: rgba(255, 255, 255, .07);
      border: 1px solid rgba(255, 255, 255, .16);
      border-radius: var(--rp);
      padding: 0 8px 0 18px;
      height: 50px;
      min-width: 320px;
      transition: .18s
    }

    .nrsearch:focus-within {
      border-color: var(--o);
      background: rgba(255, 255, 255, .1)
    }

    .nrsearch svg {
      color: #9AA0AB;
      flex-shrink: 0
    }

    .nrsearch input {
      flex: 1;
      background: none;
      border: 0;
      outline: 0;
      color: #fff;
      font-family: inherit;
      font-size: 15px;
      height: 100%
    }

    .nrsearch input::placeholder {
      color: #7C828C
    }

    @media(max-width:700px) {
      .nrsearch {
        min-width: 100%
      }
    }

    /* ---------- ribbon lọc chuyên mục ---------- */
    .nrrib {
      position: sticky;
      top: var(--hdr);
      z-index: 40;
      background: rgba(255, 255, 255, .92);
      backdrop-filter: saturate(180%) blur(12px);
      border-bottom: 1px solid var(--ln)
    }

    .nrrib .wrap {
      display: flex;
      align-items: center;
      gap: 8px;
      overflow-x: auto;
      scrollbar-width: none;
      padding-top: 12px;
      padding-bottom: 12px
    }

    .nrrib .wrap::-webkit-scrollbar {
      display: none
    }

    .nrchip {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
      padding: 9px 18px;
      border-radius: var(--rp);
      border: 1px solid var(--ln2);
      background: #fff;
      color: var(--t2);
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: .16s;
      white-space: nowrap
    }

    .nrchip svg {
      width: 15px;
      height: 15px;
      opacity: .7
    }

    .nrchip:hover {
      border-color: var(--o-mid);
      color: var(--t1)
    }

    .nrchip.on {
      background: var(--k);
      border-color: var(--k);
      color: #fff
    }

    .nrchip.on svg {
      color: var(--o);
      opacity: 1
    }

    /* ---------- bài nổi bật (lead) ---------- */
    .nrsec {
      padding: 62px 0
    }

    .nrsec.tight {
      padding-top: 54px
    }

    @media(max-width:860px) {
      .nrsec {
        padding: 42px 0
      }
    }

    .nrlead {
      display: grid;
      grid-template-columns: 1.32fr 1fr;
      gap: 44px;
      align-items: center;
      cursor: pointer
    }

    @media(max-width:940px) {
      .nrlead {
        grid-template-columns: 1fr;
        gap: 26px
      }
    }

    .nrlead .im {
      position: relative;
      border-radius: var(--rx);
      overflow: hidden;
      background: var(--s2);
      aspect-ratio: 16/10
    }

    .nrlead .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .6s
    }

    .nrlead:hover .im img {
      transform: scale(1.035)
    }

    .nrlead .tag {
      position: absolute;
      left: 18px;
      top: 18px;
      z-index: 2;
      background: var(--o);
      color: #fff;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .12em;
      text-transform: uppercase;
      padding: 7px 14px;
      border-radius: var(--rp)
    }

    .nrlead h2 {
      font-size: clamp(26px, 2.7vw, 40px);
      line-height: 1.17;
      margin: 0 0 18px;
      letter-spacing: -.015em
    }

    .nrlead:hover h2 {
      color: var(--o)
    }

    .nrlead p {
      color: var(--t3);
      font-size: 16.5px;
      margin: 0 0 24px;
      max-width: 46ch
    }

    .nrmeta {
      display: flex;
      align-items: center;
      gap: 10px;
      font-size: 13px;
      color: var(--t4);
      margin-bottom: 14px
    }

    .nrmeta b {
      color: var(--o);
      font-weight: 600;
      letter-spacing: .08em;
      text-transform: uppercase;
      font-size: 12px
    }

    .nrmeta i {
      font-style: normal;
      opacity: .5
    }

    .nrlink {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      color: var(--t1);
      font-weight: 600;
      font-size: 15px
    }

    .nrlink svg {
      transition: transform .2s
    }

    .nrlead:hover .nrlink,
    .nrlink:hover {
      color: var(--o)
    }

    .nrlead:hover .nrlink svg,
    .nrlink:hover svg {
      transform: translateX(4px)
    }

    /* ---------- 2 bài phụ cạnh lead ---------- */
    .nrsub {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 26px;
      margin-top: 46px;
      padding-top: 42px;
      border-top: 1px solid var(--ln)
    }

    @media(max-width:800px) {
      .nrsub {
        grid-template-columns: 1fr
      }
    }

    .nrow {
      display: grid;
      grid-template-columns: 172px 1fr;
      gap: 20px;
      align-items: center;
      cursor: pointer
    }

    .nrow .im {
      border-radius: var(--rl);
      overflow: hidden;
      background: var(--s2);
      aspect-ratio: 4/3
    }

    .nrow .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .nrow:hover .im img {
      transform: scale(1.05)
    }

    .nrow h4 {
      font-size: 17px;
      line-height: 1.42;
      margin: 0
    }

    .nrow:hover h4 {
      color: var(--o)
    }

    @media(max-width:520px) {
      .nrow {
        grid-template-columns: 120px 1fr;
        gap: 14px
      }
    }

    /* ---------- tiêu đề section kiểu newsroom ---------- */
    .nrhd {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 24px;
      margin-bottom: 30px;
      padding-bottom: 16px;
      border-bottom: 2px solid var(--k)
    }

    .nrhd h3 {
      font-size: clamp(20px, 1.9vw, 27px);
      margin: 0;
      letter-spacing: -.01em
    }

    .nrhd .all {
      display: inline-flex;
      align-items: center;
      gap: 7px;
      font-size: 14px;
      font-weight: 600;
      color: var(--o);
      cursor: pointer;
      white-space: nowrap
    }

    .nrhd .all:hover {
      color: var(--o-dk)
    }

    /* ---------- thẻ tin ---------- */
    .nrgrid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px 26px
    }

    @media(max-width:1050px) {
      .nrgrid {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:640px) {
      .nrgrid {
        grid-template-columns: 1fr
      }
    }

    .nc {
      display: flex;
      flex-direction: column;
      cursor: pointer
    }

    .nc .im {
      position: relative;
      border-radius: var(--rl);
      overflow: hidden;
      background: var(--s2);
      aspect-ratio: 16/10;
      margin-bottom: 18px
    }

    .nc .im img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      transition: transform .5s
    }

    .nc:hover .im img {
      transform: scale(1.05)
    }

    .nc .im.pad {
      background: #fff;
      border: 1px solid var(--ln)
    }

    .nc .im.pad img {
      object-fit: contain;
      padding: 20px;
      mix-blend-mode: multiply
    }

    .nc h4 {
      font-size: 18px;
      line-height: 1.4;
      margin: 0 0 10px;
      letter-spacing: -.005em
    }

    .nc:hover h4 {
      color: var(--o)
    }

    .nc p {
      font-size: 14.5px;
      color: var(--t3);
      margin: 0;
      line-height: 1.6
    }

    /* ---------- dải "không có kết quả" ---------- */
    .nrempty {
      text-align: center;
      padding: 70px 20px;
      color: var(--t3);
      border: 1px dashed var(--ln2);
      border-radius: var(--rx);
      background: var(--s1)
    }

    /* ---------- CTA cuối trang ---------- */
    .nrcta {
      position: relative;
      overflow: hidden;
      background: var(--k);
      color: #fff;
      border-radius: var(--rx);
      padding: 56px 54px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 34px;
      flex-wrap: wrap
    }

    .nrcta:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(600px 320px at 88% 10%, rgba(245, 125, 34, .3), transparent 64%)
    }

    .nrcta>* {
      position: relative;
      z-index: 2
    }

    .nrcta h3 {
      color: #fff;
      font-size: clamp(22px, 2.2vw, 31px);
      margin: 0 0 10px
    }

    .nrcta p {
      color: #B7BBC1;
      margin: 0;
      max-width: 52ch;
      font-size: 15.5px
    }

    @media(max-width:700px) {
      .nrcta {
        padding: 38px 26px
      }
    }

    /* ============================================================ */
    /* ============ TRANG BÀI VIẾT (article detail) =============== */
    /* ============================================================ */
    #page-article {
      background: #fff
    }

    .arhead {
      padding: 46px 0 34px;
      border-bottom: 1px solid var(--ln)
    }

    .arwrap {
      max-width: 1000px;
      margin: 0 auto;
      padding: 0 40px
    }

    @media(max-width:700px) {
      .arwrap {
        padding: 0 20px
      }
    }

    .arbc {
      font-size: 13.5px;
      color: var(--t4);
      margin-bottom: 26px
    }

    .arbc a {
      cursor: pointer;
      color: var(--t3)
    }

    .arbc a:hover {
      color: var(--o)
    }

    .arcat {
      display: inline-block;
      font-size: 11.5px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--o);
      background: var(--o-lt);
      border-radius: var(--rp);
      padding: 6px 15px;
      margin-bottom: 20px
    }

    .arhead h1 {
      font-size: clamp(29px, 3.8vw, 47px);
      line-height: 1.12;
      letter-spacing: -.022em;
      margin: 0 0 22px;
      max-width: 20ch
    }

    .armeta {
      display: flex;
      align-items: center;
      gap: 18px;
      flex-wrap: wrap;
      font-size: 14px;
      color: var(--t3)
    }

    .armeta .it {
      display: inline-flex;
      align-items: center;
      gap: 7px
    }

    .armeta svg {
      width: 15px;
      height: 15px;
      opacity: .55
    }

    .armeta .sp {
      width: 1px;
      height: 15px;
      background: var(--ln2)
    }

    .arshare {
      display: flex;
      gap: 8px;
      margin-left: auto
    }

    .arshare a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--ln2);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--t3);
      transition: .16s;
      cursor: pointer
    }

    .arshare a:hover {
      background: var(--k);
      border-color: var(--k);
      color: #fff
    }

    .arhero {
      margin: 40px auto 0;
      max-width: 1100px;
      padding: 0 40px
    }

    @media(max-width:700px) {
      .arhero {
        padding: 0 20px;
        margin-top: 26px
      }
    }

    .arhero .fr {
      border-radius: var(--rx);
      overflow: hidden;
      background: var(--s2);
      aspect-ratio: 16/9
    }

    .arhero img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .arbody {
      max-width: 760px;
      margin: 0 auto;
      padding: 54px 40px 0;
      font-size: 17.5px;
      line-height: 1.85;
      color: var(--t2)
    }

    @media(max-width:700px) {
      .arbody {
        padding: 38px 20px 0;
        font-size: 16.5px
      }
    }

    .arbody>p {
      margin: 0 0 26px
    }

    .arbody .lead {
      font-size: 20px;
      line-height: 1.68;
      color: var(--t1);
      font-weight: 500;
      margin-bottom: 34px
    }

    .arbody h2 {
      font-size: clamp(23px, 2.2vw, 30px);
      line-height: 1.26;
      letter-spacing: -.015em;
      margin: 52px 0 18px
    }

    .arbody h3 {
      font-size: 20px;
      margin: 38px 0 12px
    }

    .arbody ul,
    .arbody ol {
      margin: 0 0 28px;
      padding-left: 22px
    }

    .arbody li {
      margin-bottom: 11px
    }

    .arbody li::marker {
      color: var(--o)
    }

    .arbody figure {
      margin: 38px 0
    }

    .arbody figure .fr {
      border-radius: var(--rl);
      overflow: hidden;
      background: var(--s2)
    }

    .arbody figure img {
      width: 100%;
      display: block
    }

    .arbody figcaption {
      font-size: 13.5px;
      color: var(--t4);
      margin-top: 12px;
      text-align: center
    }

    .arbody blockquote {
      margin: 38px 0;
      padding: 4px 0 4px 26px;
      border-left: 3px solid var(--o);
      font-size: 20px;
      line-height: 1.6;
      color: var(--t1);
      font-weight: 500
    }

    .arkey {
      background: var(--s1);
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      padding: 30px 32px;
      margin: 38px 0
    }

    .arkey b {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--o);
      margin-bottom: 14px
    }

    .arkey ul {
      margin: 0;
      padding-left: 20px
    }

    .arkey li {
      font-size: 16px;
      margin-bottom: 9px
    }

    .arkey li:last-child {
      margin-bottom: 0
    }

    .arspec {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr));
      gap: 1px;
      background: var(--ln);
      border: 1px solid var(--ln);
      border-radius: var(--rl);
      overflow: hidden;
      margin: 20px 0;
    }

    /* Chỉ áp dụng cho các thẻ div con trực tiếp */
    .arspec>div {
      background: var(--bg-card, #ffffff);
      padding: 22px 20px;
    }

    .arspec .n {
      font-size: 26px;
      font-weight: 700;
      color: var(--o);
      line-height: 1.1;
      letter-spacing: -0.02em;
    }

    .arspec .l {
      font-size: 13px;
      color: var(--t3);
      margin-top: 7px;
      line-height: 1.45;
    }

    .artags {
      max-width: 760px;
      margin: 46px auto 0;
      padding: 26px 40px 0;
      border-top: 1px solid var(--ln);
      display: flex;
      align-items: center;
      gap: 9px;
      flex-wrap: wrap
    }

    @media(max-width:700px) {
      .artags {
        padding: 24px 20px 0
      }
    }

    .artag {
      font-size: 13px;
      font-weight: 600;
      color: var(--t3);
      background: var(--s2);
      border-radius: var(--rp);
      padding: 7px 15px
    }

    .arrel {
      background: var(--s1);
      border-top: 1px solid var(--ln);
      margin-top: 70px;
      padding: 68px 0 90px
    }

    .arback {
      max-width: 760px;
      margin: 34px auto 0;
      padding: 0 40px
    }

    @media(max-width:700px) {
      .arback {
        padding: 0 20px
      }
    }

    /* ============================================================ */
    /* ===== NEWS ARTICLE HERO — đồng bộ bố cục với trang Công nghệ */
    /* Giữ nguyên toàn bộ nội dung bài viết bên dưới. Chỉ thay đổi  */
    /* phần mở đầu: breadcrumb → category → title/lead/meta + ảnh. */
    /* ============================================================ */
    /* ===== ARTICLE DETAIL HERO — full-bleed like technology pages ===== */
    #page-article .arhero-band {
      position: relative;
      min-height: clamp(420px, 44vw, 560px);
      display: flex;
      align-items: center;
      overflow: hidden;
      background: var(--s2);
      border-bottom: 1px solid var(--ln);
    }

    #page-article .arhero-band>img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 72% 50%;
      display: block;
    }

    #page-article .arhero-band::before {
      content: "";
      position: absolute;
      inset: 0;
      z-index: 2;
      background: linear-gradient(93deg,
          rgba(255, 255, 255, .97) 0%,
          rgba(255, 255, 255, .94) 26%,
          rgba(255, 255, 255, .62) 48%,
          rgba(255, 255, 255, .08) 70%,
          rgba(255, 255, 255, 0) 100%);
    }

    #page-article .arhero-band>.wrap {
      position: relative;
      z-index: 4;
      width: 100%;
      padding-top: 28px;
      padding-bottom: 36px;
    }

    #page-article .arhero-band .eyeb {
      display: block;
      font-size: 13px;
      font-weight: 600;
      letter-spacing: .19em;
      text-transform: uppercase;
      color: var(--o);
      margin-bottom: 16px;
    }

    #page-article .arhero-band h1 {
      color: var(--t1);
      max-width: 16ch;
      font-size: clamp(32px, 4.2vw, 54px);
      line-height: 1.08;
      letter-spacing: -.035em;
      margin: 0 0 18px;
    }

    #page-article .arhero-band .arlead {
      max-width: 46ch;
      margin: 0 0 26px;
      color: var(--t3);
      font-size: clamp(15.5px, 1.2vw, 17.5px);
      line-height: 1.7;
      font-weight: 400;
    }

    #page-article .arhero-band .armeta {
      display: flex;
      align-items: center;
      gap: 14px;
      flex-wrap: wrap;
      font-size: 13.5px;
      color: var(--t3);
    }

    #page-article .arhero-band .armeta .it {
      display: inline-flex;
      align-items: center;
      gap: 7px;
    }

    #page-article .arhero-band .armeta svg {
      width: 15px;
      height: 15px;
      opacity: .55;
    }

    #page-article .arhero-band .armeta .sp {
      width: 1px;
      height: 15px;
      background: var(--ln2);
    }

    #page-article .arhero-band .arshare {
      display: flex;
      gap: 8px;
      margin-left: 4px;
    }

    #page-article .arhero-band .arshare a {
      width: 34px;
      height: 34px;
      border-radius: 50%;
      border: 1px solid var(--ln2);
      background: rgba(255, 255, 255, .72);
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--t3);
      transition: .16s;
      cursor: pointer;
    }

    #page-article .arhero-band .arshare a:hover {
      background: var(--k);
      border-color: var(--k);
      color: #fff;
    }

    /* Body under hero — light polish only */
    #page-article .arbody {
      max-width: 760px;
      margin: 0 auto;
      padding: 48px 40px 0;
      font-size: 17.5px;
      line-height: 1.85;
      color: var(--t2);
    }

    #page-article .arbody>p {
      margin: 0 0 22px;
    }

    #page-article .arbody .lead {
      font-size: 19.5px;
      line-height: 1.68;
      color: var(--t1);
      font-weight: 500;
      margin-bottom: 30px;
    }

    #page-article .arbody h2 {
      margin: 44px 0 16px;
    }

    #page-article .artags {
      max-width: 760px;
      margin: 40px auto 0;
      padding: 22px 40px 0;
    }

    #page-article .arback {
      max-width: 760px;
      margin: 28px auto 0;
      padding: 0 40px 8px;
    }

    #page-article .arrel {
      margin-top: 56px;
      padding: 56px 0 80px;
    }

    @media(max-width:820px) {
      #page-article .arhero-band {
        min-height: 0;
        padding: 36px 0 40px;
      }

      #page-article .arhero-band::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .9));
      }

      #page-article .arhero-band h1 {
        max-width: none;
        font-size: clamp(28px, 7.5vw, 40px);
      }

      #page-article .arhero-band .arlead {
        max-width: none;
        font-size: 15.5px;
      }

      #page-article .arhero-band>.wrap {
        padding-top: 8px;
        padding-bottom: 8px;
      }
    }

    @media(max-width:700px) {
      #page-article .arbody {
        padding: 34px 20px 0;
        font-size: 16.5px;
      }

      #page-article .artags {
        padding: 20px 20px 0;
      }

      #page-article .arback {
        padding: 0 20px 4px;
      }

      #page-article .arrel {
        margin-top: 44px;
        padding: 44px 0 64px;
      }
    }


    /* ============================================================ */
    /* ====== GIỚI THIỆU · LIÊN HỆ · PHÁP LÝ (kiểu witekco) ======= */
    /* ============================================================ */

    /* --- hero có 2 nút hành động --- */
    .pheroc {
      display: flex;
      gap: 14px;
      flex-wrap: wrap;
      margin-top: 34px
    }

    /* --- dải số liệu --- */
    .stats {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--ln);
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      overflow: hidden
    }

    @media(max-width:820px) {
      .stats {
        grid-template-columns: 1fr 1fr
      }
    }

    .stats>div {
      background: #fff;
      padding: 34px 28px;
      text-align: center
    }

    .stats .n {
      font-size: clamp(30px, 3.2vw, 44px);
      font-weight: 800;
      letter-spacing: -.03em;
      color: var(--o);
      line-height: 1
    }

    .stats .l {
      font-size: 13.5px;
      color: var(--t3);
      margin-top: 10px;
      line-height: 1.5
    }

    /* --- khối 2 cột chữ + ảnh --- */
    .abgrid {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 54px;
      align-items: center
    }

    @media(max-width:940px) {
      .abgrid {
        grid-template-columns: 1fr;
        gap: 32px
      }
    }

    .abgrid .fr {
      border-radius: var(--rx);
      overflow: hidden;
      background: var(--s2);
      aspect-ratio: 4/3
    }

    .abgrid .fr img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .abul {
      list-style: none;
      margin: 24px 0 0;
      padding: 0
    }

    .abul li {
      position: relative;
      padding-left: 32px;
      margin-bottom: 14px;
      font-size: 15.5px;
      color: var(--t2);
      line-height: 1.65
    }

    .abul li:before {
      content: "";
      position: absolute;
      left: 0;
      top: 7px;
      width: 18px;
      height: 10px;
      border-left: 2.5px solid var(--o);
      border-bottom: 2.5px solid var(--o);
      transform: rotate(-45deg)
    }

    /* --- bảng so sánh --- */
    .cmp {
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      overflow: hidden;
      background: #fff
    }

    .cmp table {
      width: 100%;
      border-collapse: collapse
    }

    .cmp th,
    .cmp td {
      padding: 18px 22px;
      text-align: left;
      font-size: 15px;
      border-bottom: 1px solid var(--ln);
      vertical-align: top
    }

    .cmp thead th {
      background: var(--k);
      color: #fff;
      font-size: 13px;
      letter-spacing: .1em;
      text-transform: uppercase;
      font-weight: 700;
      border-bottom: 0
    }

    .cmp thead th:last-child {
      color: var(--o)
    }

    .cmp tbody tr:last-child td {
      border-bottom: 0
    }

    .cmp td:first-child {
      font-weight: 600;
      color: var(--t1);
      width: 26%
    }

    .cmp td:nth-child(2) {
      color: var(--t3)
    }

    .cmp td:last-child {
      color: var(--t1);
      background: var(--o-lt)
    }

    .cmpw {
      overflow-x: auto
    }

    @media(max-width:700px) {
      .cmp table {
        min-width: 640px
      }
    }

    /* --- 4 bước quy trình --- */
    .steps4 {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--ln);
      border: 1px solid var(--ln)
    }

    @media(max-width:900px) {
      .steps4 {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .steps4 {
        grid-template-columns: 1fr
      }
    }

    .steps4>div {
      background: #fff;
      padding: 30px 26px 28px
    }

    .steps4 .n {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 34px;
      height: 34px;
      border-radius: 50%;
      background: var(--k);
      color: #fff;
      font-size: 14px;
      font-weight: 700;
      margin-bottom: 18px
    }

    .steps4 h4 {
      font-size: 16.5px;
      margin: 0 0 9px
    }

    .steps4 p {
      font-size: 14px;
      color: var(--t3);
      margin: 0;
      line-height: 1.62
    }

    /* --- bảng thông tin pháp nhân --- */
    .infotbl {
      border: 1px solid var(--ln);
      border-radius: var(--rl);
      overflow: hidden;
      background: #fff
    }

    .infotbl div {
      display: grid;
      grid-template-columns: 210px 1fr;
      border-bottom: 1px solid var(--ln)
    }

    .infotbl div:last-child {
      border-bottom: 0
    }

    .infotbl b {
      padding: 15px 22px;
      background: var(--s1);
      font-size: 14px;
      font-weight: 600;
      color: var(--t2);
      border-right: 1px solid var(--ln)
    }

    .infotbl span {
      padding: 15px 22px;
      font-size: 15px;
      color: var(--t1)
    }

    @media(max-width:600px) {
      .infotbl div {
        grid-template-columns: 1fr
      }

      .infotbl b {
        border-right: 0;
        border-bottom: 1px solid var(--ln)
      }
    }

    /* --- dải CTA gọi / Zalo --- */
    .ctacall {
      position: relative;
      overflow: hidden;
      background: var(--k);
      border-radius: var(--rx);
      color: #fff;
      padding: 52px 50px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 30px;
      flex-wrap: wrap
    }

    .ctacall:before {
      content: "";
      position: absolute;
      inset: 0;
      background: radial-gradient(620px 320px at 86% 12%, rgba(245, 125, 34, .3), transparent 64%)
    }

    .ctacall>* {
      position: relative;
      z-index: 2
    }

    .ctacall h3 {
      color: #fff;
      font-size: clamp(22px, 2.2vw, 31px);
      margin: 0 0 10px
    }

    .ctacall p {
      color: #B7BBC1;
      margin: 0;
      max-width: 52ch;
      font-size: 15.5px
    }

    .ctacall .bt {
      display: flex;
      gap: 12px;
      flex-wrap: wrap
    }

    @media(max-width:700px) {
      .ctacall {
        padding: 36px 26px
      }
    }

    /* --- trang pháp lý --- */
    .lgwrap {
      display: grid;
      grid-template-columns: 264px 1fr;
      gap: 56px;
      align-items: start
    }

    @media(max-width:940px) {
      .lgwrap {
        grid-template-columns: 1fr;
        gap: 30px
      }
    }

    .lgtoc {
      position: sticky;
      top: calc(var(--hdr) + 24px);
      border-left: 2px solid var(--ln)
    }

    @media(max-width:940px) {
      .lgtoc {
        position: static;
        border-left: 0;
        border-top: 2px solid var(--ln)
      }
    }

    .lgtoc b {
      display: block;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      color: var(--t4);
      padding: 0 0 12px 20px
    }

    .lgtoc a {
      display: block;
      padding: 10px 20px;
      font-size: 14.5px;
      color: var(--t3);
      cursor: pointer;
      margin-left: -2px;
      border-left: 2px solid transparent;
      transition: .16s
    }

    .lgtoc a:hover,
    .lgtoc a.on {
      color: var(--o);
      border-left-color: var(--o);
      font-weight: 600
    }

    .lgsec {
      scroll-margin-top: calc(var(--hdr) + 24px);
      padding-bottom: 46px;
      margin-bottom: 46px;
      border-bottom: 1px solid var(--ln)
    }

    .lgsec:last-child {
      border-bottom: 0;
      margin-bottom: 0;
      padding-bottom: 0
    }

    .lgsec>.num {
      display: block;
      font-size: 12.5px;
      font-weight: 700;
      letter-spacing: .14em;
      color: var(--o);
      margin-bottom: 12px
    }

    .lgsec h2 {
      font-size: clamp(23px, 2.1vw, 30px);
      margin: 0 0 18px;
      letter-spacing: -.015em
    }

    .lgsec h3 {
      font-size: 18px;
      margin: 30px 0 10px
    }

    .lgsec p {
      font-size: 16px;
      line-height: 1.8;
      color: var(--t2);
      margin: 0 0 16px;
      max-width: 68ch
    }

    .lgsec ul {
      margin: 0 0 18px;
      padding-left: 22px;
      max-width: 68ch
    }

    .lgsec li {
      font-size: 15.5px;
      line-height: 1.75;
      margin-bottom: 9px;
      color: var(--t2)
    }

    .lgsec li::marker {
      color: var(--o)
    }

    .lgnote {
      background: var(--s1);
      border: 1px solid var(--ln);
      border-left: 3px solid var(--o);
      border-radius: 0 var(--rl) var(--rl) 0;
      padding: 20px 24px;
      font-size: 15px;
      color: var(--t2);
      margin: 22px 0
    }

    /* --- kênh hỗ trợ trên trang Hỗ trợ --- */
    .sphub {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 1px;
      background: var(--ln);
      border: 1px solid var(--ln);
      border-radius: var(--rx);
      overflow: hidden
    }

    @media(max-width:960px) {
      .sphub {
        grid-template-columns: 1fr 1fr
      }
    }

    @media(max-width:560px) {
      .sphub {
        grid-template-columns: 1fr
      }
    }

    .sphub a {
      background: #fff;
      padding: 30px 26px 28px;
      display: block;
      cursor: pointer;
      transition: .18s
    }

    .sphub a:hover {
      background: var(--s1)
    }

    .sphub .ic {
      width: 42px;
      height: 42px;
      border-radius: 12px;
      background: var(--o-lt);
      color: var(--o);
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 18px
    }

    .sphub h4 {
      font-size: 16.5px;
      margin: 0 0 8px
    }

    .sphub a:hover h4 {
      color: var(--o)
    }

    .sphub p {
      font-size: 13.8px;
      color: var(--t3);
      margin: 0;
      line-height: 1.6
    }



    /* ============================================================ */
    /* ================ TRANG LIÊN HỆ (Wicell) ==================== */
    /* ============================================================ */

    /* --- dải hero tối có hoạ tiết chấm --- */
    .lhhero {
      position: relative;
      overflow: hidden;
      background: #000000;
      padding: 54px 0 62px
    }

    .lhhero:before {
      content: "";
      position: absolute;
      inset: 0;
      background-image: radial-gradient(rgba(255, 255, 255, .12) 1px, transparent 1px);
      background-size: 22px 22px;
      opacity: .35
    }

    .lhhero:after {
      content: none;
    }

    .lhhero .wrap {
      position: relative;
      z-index: 2
    }

    .lhbc {
      font-size: 14px;
      color: #A9AEB6;
      margin-bottom: 18px
    }

    .lhbc a {
      cursor: pointer
    }

    .lhbc a:hover {
      color: #fff
    }

    .lhbc b {
      color: #fff;
      font-weight: 600
    }

    .lhbc span {
      opacity: .45;
      margin: 0 6px
    }

    .lhhero h1 {
      color: #fff;
      font-size: clamp(32px, 4.4vw, 52px);
      font-weight: 700;
      letter-spacing: -.03em;
      line-height: 1.08;
      margin: 0 0 20px
    }

    .lhhero p {
      color: #C9CDD3;
      font-size: 17px;
      line-height: 1.75;
      max-width: 58ch;
      margin: 0
    }

    /* --- ba thẻ kênh liên hệ --- */
    .lhcards {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px
    }

    @media(max-width:900px) {
      .lhcards {
        grid-template-columns: 1fr
      }
    }

    .lhcard {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: var(--rl);
      padding: 42px 30px 38px;
      text-align: center;
      transition: .2s
    }

    .lhcard:hover {
      border-color: var(--o-mid);
      box-shadow: 0 18px 44px rgba(17, 19, 24, .07)
    }

    .lhcard .ic {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 46px;
      height: 46px;
      margin: 0 auto 20px;
      color: var(--k)
    }

    .lhcard .ic svg {
      width: 34px;
      height: 34px
    }

    .lhcard h4 {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin: 0 0 16px
    }

    .lhcard .big {
      display: block;
      font-size: 26px;
      font-weight: 700;
      letter-spacing: -.02em;
      color: var(--o-dk);
      line-height: 1.3
    }

    .lhcard .big:hover {
      color: var(--o)
    }

    .lhcard .lk {
      display: block;
      font-size: 18px;
      font-weight: 700;
      color: var(--o);
      letter-spacing: -.01em;
      line-height: 1.5;
      word-break: break-word
    }

    .lhcard .lk:hover {
      color: var(--o-dk);
      text-decoration: underline
    }

    .lhcard .sub2 {
      display: block;
      font-size: 18px;
      font-weight: 600;
      color: var(--t2);
      line-height: 1.5;
      margin-top: 2px
    }

    .lhcard .d {
      font-size: 14.5px;
      line-height: 1.65;
      color: var(--t3);
      margin: 16px 0 0
    }

    /* --- ảnh trái, chữ phải --- */
    .lhsplit {
      display: grid;
      grid-template-columns: 1.05fr .95fr;
      gap: 60px;
      align-items: center
    }

    @media(max-width:900px) {
      .lhsplit {
        grid-template-columns: 1fr;
        gap: 30px
      }
    }

    .lhsplit .fr {
      border-radius: var(--rl);
      overflow: hidden;
      background: var(--s2);
      aspect-ratio: 3/2
    }

    .lhsplit .fr img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .lhsplit h2 {
      font-size: clamp(26px, 2.7vw, 36px);
      font-weight: 700;
      letter-spacing: -.028em;
      margin: 0 0 18px
    }

    .lhsplit p {
      font-size: 16.5px;
      line-height: 1.8;
      color: var(--t3);
      margin: 0 0 30px;
      max-width: 46ch
    }

    .lhsplit .bt {
      display: flex;
      gap: 14px;
      flex-wrap: wrap
    }

    .lhsplit .btn svg {
      width: 17px;
      height: 17px
    }

    /* --- khối THÔNG TIN --- */
    .lhsec {
      padding: 92px 0
    }

    @media(max-width:860px) {
      .lhsec {
        padding: 58px 0
      }
    }

    .lhhead {
      text-align: center;
      max-width: 74ch;
      margin: 0 auto 44px
    }

    .lhhead .eyeb {
      color: var(--o)
    }

    .lhhead h2 {
      font-size: clamp(27px, 3vw, 39px);
      font-weight: 700;
      letter-spacing: -.03em;
      margin: 0 0 16px
    }

    .lhhead p {
      font-size: 16px;
      line-height: 1.78;
      color: var(--t3);
      margin: 0
    }

    .lhinfo {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 26px;
      align-items: start
    }

    @media(max-width:980px) {
      .lhinfo {
        grid-template-columns: 1fr
      }
    }

    .lhbox {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: var(--rl);
      padding: 32px 30px 30px;
      height: 100%
    }

    .lhplain {
      list-style: none;
      margin: 20px 0 0;
      padding: 0
    }

    .lhplain>li {
      display: flex;
      align-items: flex-start;
      gap: 14px;
      padding: 14px 0;
      border-bottom: 1px solid var(--ln)
    }

    .lhplain>li:last-child {
      border-bottom: 0
    }

    .lhplain>li>svg {
      flex: none;
      color: var(--o);
      margin-top: 2px
    }

    .lhplain>li>span {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 15px;
      line-height: 1.5
    }

    .lhplain>li>span>b {
      font-weight: 600;
      color: var(--t1)
    }

    .lhplain>li>span>a {
      color: var(--t2);
      font-weight: 500
    }

    .lhplain>li>span>a:hover {
      color: var(--o);
      text-decoration: underline
    }

    /* --- QR liên hệ nhanh: Zalo / Viber / WhatsApp --- */
    .lhqr {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 14px;
      margin: 24px 0 0
    }

    @media(max-width:520px) {
      .lhqr {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px
      }
    }

    .lhqrcard {
      background: #fff;
      border: 1px solid var(--ln);
      border-radius: var(--rl);
      padding: 14px 10px 16px;
      text-align: center;
      transition: border-color .15s, box-shadow .15s
    }

    .lhqrcard:hover {
      border-color: var(--o);
      box-shadow: 0 8px 22px rgba(245, 125, 34, .12)
    }

    .lhqrimg {
      width: 100%;
      aspect-ratio: 1/1;
      border-radius: calc(var(--rl) - 6px);
      overflow: hidden;
      background: var(--s1);
      margin-bottom: 10px
    }

    .lhqrimg img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block
    }

    .lhqrinfo {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      color: var(--o);
      font-size: 14px;
      font-weight: 700
    }

    .lhqrlink {
      display: block;
      margin-top: 3px;
      font-size: 13px;
      font-weight: 500;
      color: var(--t2)
    }

    .lhqrlink:hover {
      color: var(--o);
      text-decoration: underline
    }

    .lhbox h3 {
      font-size: 21px;
      font-weight: 700;
      letter-spacing: -.02em;
      margin: 0 0 22px
    }

    .lhrow {
      display: grid;
      grid-template-columns: 108px 1fr;
      gap: 18px;
      padding: 15px 0;
      border-bottom: 1px solid var(--ln);
      font-size: 15px;
      line-height: 1.55
    }

    .lhrow:last-child {
      border-bottom: 0;
      padding-bottom: 0
    }

    .lhrow>b {
      font-weight: 600;
      color: var(--t1)
    }

    .lhrow>span {
      color: var(--t2)
    }

    .lhrow a {
      color: var(--o);
      font-weight: 600;
      display: block
    }

    .lhrow a:hover {
      text-decoration: underline
    }

    .lhprose p {
      font-size: 15px;
      line-height: 1.72;
      color: var(--t2);
      margin: 0 0 18px
    }

    .lhprose p:last-child {
      margin-bottom: 0
    }

    .lhprose b {
      color: var(--t1);
      font-weight: 700
    }

    /* --- khối VỊ TRÍ --- */
    .lhaddr {
      text-align: center;
      font-size: 17px;
      color: var(--t3);
      margin: -28px 0 36px
    }

    .lhmap {
      border: 1px solid var(--ln);
      border-radius: var(--rl);
      overflow: hidden;
      background: var(--s2)
    }

    .lhmap iframe {
      display: block;
      width: 100%;
      height: 520px;
      border: 0
    }

    @media(max-width:700px) {
      .lhmap iframe {
        height: 360px
      }
    }

    .lhmapbtn {
      text-align: center;
      margin-top: 30px
    }

    /* ============================================================ */
    /* ===============  TRANG CÔNG NGHỆ — GIAO DIỆN MỚI  =========== */
    /* Skin tối, điểm nhấn amber/violet, tiêu đề Space Grotesk, thẻ  */
    /* bo góc — theo đúng phong cách trang mẫu "AI Cloud-Managed    */
    /* Controllerless". Chỉ áp dụng phạm vi cho #page-techdetail và */
    /* #page-techwifi nên không ảnh hưởng các trang khác của site.  */
    /* Nội dung (JS renderTech / renderTechList) giữ nguyên 100%,   */
    /* chỉ đổi phần trình bày.                                      */
    /* ============================================================ */
    #page-techdetail,
    #page-techwifi {
      --tk-bg: #0A0C16;
      --tk-panel: #10142A;
      --tk-panel-2: #151A34;
      --tk-line: rgba(255, 255, 255, .09);
      --tk-amber: #F2A93B;
      --tk-amber-soft: rgba(242, 169, 59, .14);
      --tk-violet: #8B7CF6;
      --tk-violet-soft: rgba(139, 124, 246, .16);
      --tk-text: #F4F5FA;
      --tk-dim: rgba(244, 245, 250, .68);
      --tk-dim2: rgba(244, 245, 250, .46);
      background: var(--tk-bg)
    }

    #page-techdetail h1,
    #page-techdetail h2,
    #page-techdetail h3,
    #page-techdetail h4,
    #page-techwifi h1,
    #page-techwifi h2,
    #page-techwifi h3,
    #page-techwifi h4 {
      font-family: 'Space Grotesk', 'Be Vietnam Pro', sans-serif;
      letter-spacing: -.01em
    }

    /* dải section xen kẽ tối/đậm hơn thay cho trắng/xám */
    #page-techdetail .sec.s-w,
    #page-techwifi .sec.s-w {
      background: var(--tk-bg)
    }

    #page-techdetail .sec.s-1,
    #page-techdetail .sec.s-2,
    #page-techdetail .sec.s-3,
    #page-techdetail .sec.s-4,
    #page-techwifi .sec.s-1,
    #page-techwifi .sec.s-2,
    #page-techwifi .sec.s-3,
    #page-techwifi .sec.s-4 {
      background: var(--tk-panel)
    }

    /* breadcrumb */
    #page-techdetail .sbc,
    #page-techwifi .sbc {
      background: var(--tk-bg);
      border-bottom: 1px solid var(--tk-line);
      color: var(--tk-dim2)
    }

    #page-techdetail .sbc a,
    #page-techwifi .sbc a {
      color: var(--tk-dim2)
    }

    #page-techdetail .sbc a:hover,
    #page-techwifi .sbc a:hover {
      color: var(--tk-amber)
    }

    #page-techdetail .sbc b,
    #page-techwifi .sbc b {
      color: var(--tk-text)
    }

    /* hero: nền tối phía sau, giữ khối phủ sáng để chữ dễ đọc trên ảnh */
    #page-techdetail .chero,
    #page-techwifi .chero {
      background: var(--tk-panel);
      border-bottom: 1px solid var(--tk-line)
    }

    #page-techdetail .chero:before,
    #page-techwifi .chero:before {
      background: linear-gradient(93deg, rgba(247, 244, 236, .97) 0%, rgba(247, 244, 236, .93) 28%, rgba(247, 244, 236, .58) 50%, rgba(247, 244, 236, .06) 74%, rgba(247, 244, 236, 0) 100%)
    }

    #page-techdetail .eyeb,
    #page-techwifi .eyeb {
      color: var(--tk-amber)
    }

    /* mục lục ngang dính (section tabs), viền dưới amber khi active */
    #page-techdetail .anav {
      background: rgba(253, 254, 255, 0.92);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      border-bottom: 1px solid var(--tk-line)
    }

    #page-techdetail .anav a {
      color: var(--tk-dim)
    }

    #page-techdetail .anav a:hover {
      color: var(--tk-text)
    }

    #page-techdetail .anav a.on {
      color: var(--tk-text)
    }

    #page-techdetail .anav a:after {
      background: var(--tk-amber)
    }

    /* tiêu đề khối căn giữa: thêm gạch nhấn amber phía trên, giống kicker của mẫu */
    #page-techdetail .chead h2,
    #page-techwifi .chead h2 {
      color: var(--tk-text);
      position: relative
    }

    #page-techdetail .chead h2:before,
    #page-techwifi .chead h2:before {
      content: "";
      display: block;
      width: 34px;
      height: 3px;
      border-radius: 2px;
      background: var(--tk-amber);
      margin: 0 auto 18px
    }

    #page-techdetail .chead p,
    #page-techwifi .chead p {
      color: var(--tk-dim)
    }

    /* tổng quan / giải pháp: khối ảnh bo góc kiểu "glow-frame" của mẫu */
    #page-techdetail .zz .ph {
      border-radius: 14px;
      overflow: hidden;
      border: 1px solid var(--tk-line);
      background: var(--tk-panel-2)
    }

    #page-techdetail .zz .bd h2 {
      color: var(--tk-text)
    }

    #page-techdetail .zz .bd p {
      color: var(--tk-dim)
    }

    #page-techdetail .tfig {
      background: var(--tk-panel-2);
      border: 1px solid var(--tk-line);
      border-radius: 14px;
      padding: 10px
    }

    #page-techdetail .tfig img {
      border-radius: 8px
    }

    #page-techdetail .tprose p {
      color: var(--tk-dim)
    }

    /* danh sách gạch đầu dòng: chấm tròn amber, giống feature-list tick của mẫu */
    #page-techdetail .flist>li {
      color: var(--tk-dim)
    }

    #page-techdetail .flist>li:before {
      width: 6px;
      height: 6px;
      top: 9px;
      border-radius: 50%;
      background: var(--tk-amber)
    }

    #page-techdetail .flist li.sub {
      color: var(--tk-dim2)
    }

    #page-techdetail .flist li.sub:before {
      background: var(--tk-violet)
    }

    /* thách thức: thẻ nền tối, viền amber phía trên, nhấc lên khi hover */
    #page-techdetail .chalc {
      background: var(--tk-panel);
      border: 1px solid var(--tk-line);
      border-top: 2px solid var(--tk-amber);
      border-radius: 12px;
      transition: transform .15s ease, border-color .15s ease
    }

    #page-techdetail .chalc:hover {
      transform: translateY(-3px);
      border-color: rgba(242, 169, 59, .4)
    }

    #page-techdetail .chalc h4 {
      color: var(--tk-text)
    }

    #page-techdetail .chalc p {
      color: var(--tk-dim)
    }

    /* lợi ích: thẻ bo góc, icon trong khối tròn violet */
    #page-techdetail .bencard {
      background: var(--tk-panel);
      border: 1px solid var(--tk-line);
      border-radius: 12px;
      box-shadow: none;
      transition: transform .15s ease, border-color .15s ease
    }

    #page-techdetail .bencard:hover {
      transform: translateY(-3px);
      border-color: var(--o);
      box-shadow: none
    }

    #page-techdetail .bencard .ic {
      background: var(--tk-violet-soft);
      border-radius: 10px
    }

    #page-techdetail .bencard .ic svg {
      color: var(--tk-violet)
    }

    #page-techdetail .bencard p {
      color: var(--tk-dim)
    }

    /* tính năng dạng tab */
    #page-techdetail .ftabs {
      border-bottom: 1px solid var(--tk-line)
    }

    #page-techdetail .ftab {
      color: var(--tk-dim)
    }

    #page-techdetail .ftab:hover {
      color: var(--tk-text)
    }

    #page-techdetail .ftab.on {
      color: var(--tk-amber)
    }

    #page-techdetail .ftab:after {
      background: var(--tk-amber)
    }

    /* dải ứng dụng / lưu ý */
    #page-techdetail .nstrip {
      background: var(--tk-panel);
      border-top: 2px solid var(--tk-amber);
      border-radius: 12px;
      overflow: hidden
    }

    #page-techdetail .nstrip>div {
      border-right: 1px solid var(--tk-line)
    }

    #page-techdetail .nstrip h4 {
      color: var(--tk-amber)
    }

    #page-techdetail .nstrip p {
      color: var(--tk-dim)
    }

    /* thiết bị áp dụng công nghệ này */
    #page-techdetail .pcell {
      background: var(--tk-panel);
      border: 1px solid var(--tk-line);
      border-radius: 12px;
      box-shadow: none
    }

    #page-techdetail .pcell:hover {
      background: var(--tk-panel-2);
      border-color: var(--tk-line);
      box-shadow: none;
      transform: translateY(-3px)
    }

    #page-techdetail .pcell .sku {
      color: var(--tk-text)
    }

    #page-techdetail .pcell p {
      color: var(--tk-dim)
    }

    /* công nghệ liên quan + danh mục 16 công nghệ: thẻ tối, bo góc, nhấc lên khi hover */
    #page-techdetail .tcard,
    #page-techwifi .tcard {
      background: var(--tk-panel);
      border: 1px solid var(--tk-line);
      border-radius: 12px;
      overflow: hidden
    }

    #page-techdetail .tcard:hover,
    #page-techwifi .tcard:hover {
      border-color: var(--o);
      box-shadow: none;
      transform: translateY(-3px)
    }

    #page-techdetail .tcard .im,
    #page-techwifi .tcard .im {
      background: var(--tk-panel-2)
    }

    #page-techdetail .tcard h4,
    #page-techwifi .tcard h4 {
      color: var(--tk-text);
      text-transform: none;
      letter-spacing: normal;
      font-weight: 600
    }

    #page-techdetail .tcard:hover h4,
    #page-techwifi .tcard:hover h4 {
      color: var(--tk-amber)
    }

    #page-techdetail .tcard p,
    #page-techwifi .tcard p {
      color: var(--tk-dim)
    }

    #page-techdetail .tcard .lk,
    #page-techwifi .tcard .lk {
      color: var(--tk-amber)
    }

    /* nút bấm & liên kết trong phạm vi trang công nghệ */
    #page-techdetail .lk,
    #page-techwifi .lk {
      color: var(--tk-amber)
    }

    #page-techdetail .btn.b-ol,
    #page-techwifi .btn.b-ol {
      color: var(--tk-amber);
      border-color: var(--tk-amber);
      background: transparent
    }

    #page-techdetail .btn.b-ol:hover,
    #page-techwifi .btn.b-ol:hover {
      background: var(--tk-amber);
      color: #1A1300;
      border-color: var(--tk-amber)
    }

    /* =========================================================
   WICELL PRODUCT TYPOGRAPHY
   Đồng bộ cỡ chữ trang Sản phẩm + Chi tiết sản phẩm
   theo tỷ lệ chữ của trang Wireless chính thức.
   Không tác động Header / Footer / các trang khác.
   ========================================================= */

    /* ---------- PRODUCT LISTING ---------- */
    #page-products {
      font-size: 15px;
    }

    #page-products .plhead h1 {
      font-size: clamp(26px, 3.2vw, 38px);
      line-height: 1.16;
    }

    #page-products .ptree>h4 {
      font-size: 19px;
      line-height: 1.3;
    }

    #page-products .trow {
      font-size: 15px;
      line-height: 1.45;
    }

    #page-products .tsub a {
      font-size: 14px;
      line-height: 1.5;
    }

    #page-products .prow {
      font-size: 15px;
    }

    #page-products .psku {
      font-size: 21px;
      line-height: 1.25;
    }

    #page-products .plines {
      font-size: 15px;
      line-height: 1.8;
    }

    #page-products .plines b {
      font-size: inherit;
    }

    #page-products .emptyx {
      font-size: 15px;
      line-height: 1.7;
    }

    #page-products .emptyx b {
      font-size: 16px;
    }

    /* ---------- PRODUCT DETAIL — official Wicell reference scale ---------- */
    /* Applied to ALL products rendered inside #page-detail.
   Reference: official M6-G252-PA15IN product page.
   Header/footer and product listing are not changed. */
    #page-detail,
    #page-detail * {
      font-family: inherit;
    }

    #page-detail {
      font-size: 15px !important;
      line-height: 1.65 !important;
    }

    /* Breadcrumb */
    #page-detail .sbc .wrap {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }

    #page-detail .sbc a,
    #page-detail .sbc span,
    #page-detail .sbc b {
      font-size: 13px !important;
    }

    /* Product name */
    #page-detail .pdtitle {
      font-size: 34px !important;
      line-height: 1.18 !important;
      font-weight: 600 !important;
      letter-spacing: -.025em !important;
      margin: 0 0 10px !important;
    }

    /* Product subtitle */
    #page-detail .pdsub2 {
      font-size: 18px !important;
      line-height: 1.5 !important;
      font-weight: 600 !important;
      margin: 0 0 17px !important;
    }

    /* Main feature bullets */
    #page-detail ul.disc,
    #page-detail ul.disc li {
      font-size: 15px !important;
      line-height: 1.65 !important;
    }

    #page-detail ul.disc li {
      padding: 2px 0 !important;
    }

    /* "Chức năng" label */
    #page-detail .pdxh {
      font-size: 15px !important;
      line-height: 1.4 !important;
      font-weight: 600 !important;
      margin: 0 0 8px !important;
    }

    /* Product tabs */
    #page-detail .pills {
      gap: 16px !important;
    }

    #page-detail .pill {
      font-size: 17px !important;
      line-height: 1.3 !important;
      font-weight: 500 !important;
      padding: 13px 36px !important;
    }

    /* Description / body */
    #page-detail .pdlead p,
    #page-detail .ppan>p {
      font-size: 15px !important;
      line-height: 1.8 !important;
    }

    /* Section headings inside product detail */
    #page-detail .pdgh,
    #page-detail .ppan h3 {
      font-size: 18px !important;
      line-height: 1.35 !important;
      font-weight: 600 !important;
    }

    /* Specification / feature rows */
    #page-detail .pdrow {
      font-size: 15px !important;
      line-height: 1.7 !important;
    }

    #page-detail .pdrow span,
    #page-detail .pdrow a {
      font-size: 15px !important;
    }

    /* Legacy / alternate generated product-detail structures */
    #page-detail .pdsub {
      font-size: 16px !important;
      line-height: 1.7 !important;
    }

    #page-detail .pdh5 {
      font-size: 12px !important;
      line-height: 1.4 !important;
    }

    #page-detail .pdh4 {
      font-size: 18px !important;
      line-height: 1.35 !important;
    }

    #page-detail .kbul li,
    #page-detail .flist>li {
      font-size: 15px !important;
      line-height: 1.7 !important;
    }

    #page-detail .kbul li b,
    #page-detail .flist li b {
      font-size: inherit !important;
    }

    #page-detail .pdnote,
    #page-detail .note {
      font-size: 14px !important;
      line-height: 1.7 !important;
    }

    /* Technology / specification grids */
    #page-detail .pgrid h5 {
      font-size: 12px !important;
      line-height: 1.4 !important;
    }

    #page-detail .pgrid li {
      font-size: 15px !important;
      line-height: 1.65 !important;
    }

    #page-detail .pgrid .sku {
      font-size: 13px !important;
      line-height: 1.5 !important;
    }

    /* Related products */
    #page-detail .pdrel-h {
      font-size: 22px !important;
      line-height: 1.3 !important;
      font-weight: 600 !important;
    }

    #page-detail .pdrc .nm {
      font-size: 15px !important;
      line-height: 1.4 !important;
    }

    /* Keep the official-like hierarchy on smaller screens */
    @media(max-width:900px) {
      #page-detail .pdtitle {
        font-size: 30px !important;
      }
    }

    @media(max-width:640px) {
      #page-detail .pdtitle {
        font-size: 27px !important;
      }

      #page-detail .pdsub2 {
        font-size: 17px !important;
      }

      #page-detail ul.disc,
      #page-detail ul.disc li,
      #page-detail .pdlead p,
      #page-detail .ppan>p,
      #page-detail .pdrow,
      #page-detail .pdrow span,
      #page-detail .pdrow a,
      #page-detail .kbul li,
      #page-detail .flist>li,
      #page-detail .pgrid li {
        font-size: 15px !important;
      }

      #page-detail .pdgh,
      #page-detail .ppan h3,
      #page-detail .pdh4 {
        font-size: 17px !important;
      }

      #page-detail .pill {
        font-size: 14px !important;
        padding: 8px 22px !important;
      }

      #page-detail .pdrel-h {
        font-size: 20px !important;
      }
    }

    @media(max-width:420px) {
      #page-detail .pdtitle {
        font-size: 25px !important;
      }

      #page-detail .pdsub2 {
        font-size: 16px !important;
      }

      #page-detail ul.disc,
      #page-detail ul.disc li,
      #page-detail .pdlead p,
      #page-detail .ppan>p,
      #page-detail .pdrow,
      #page-detail .pdrow span,
      #page-detail .pdrow a,
      #page-detail .kbul li,
      #page-detail .flist>li,
      #page-detail .pgrid li {
        font-size: 14px !important;
      }
    }

    /* Global typography: BE VIETNAM PRO */
    body.wicell-theme {
      font-family: "Be Vietnam Pro", sans-serif;
    }

    /* Đồng bộ căn trái nội dung bài viết trên tất cả trang Công nghệ.
   Công nghệ Wi-Fi đang dùng bố cục nội dung trái; Camera, IoT và
   Nền tảng Wicell Cloud được đưa về cùng cách trình bày. */
    #page-techcam .chead,
    #page-techiot .chead {
      text-align: left;
      max-width: 760px;
      margin-left: 0;
      margin-right: auto;
    }

    #page-techcam .chead h2,
    #page-techiot .chead h2,
    #page-techcam .chead p,
    #page-techiot .chead p {
      text-align: left;
    }

    #page-techcam .chead h2:before,
    #page-techiot .chead h2:before {
      margin-left: 0;
      margin-right: auto;
    }

    /* Các thẻ bài viết luôn đọc theo trục trái, không căn giữa */
    #page-techcam .tcard .bd,
    #page-techiot .tcard .bd {
      text-align: left;
    }

    #page-techcam .tcard .lk,
    #page-techiot .tcard .lk {
      justify-content: flex-start;
    }

    /* Nền tảng Wicell Cloud: giữ toàn bộ nội dung bài viết theo cùng trục trái */
    #page-tech .tl-wrap,
    #page-tech .tl-hero-content,
    #page-tech .tl-overview .tl-row,
    #page-tech .tl-solution .tl-row {
      text-align: left;
    }

    #page-tech .tl-kicker,
    #page-tech .tl-hero h1,
    #page-tech .tl-hero p,
    #page-tech .tl-overview h2,
    #page-tech .tl-solution h2,
    #page-tech .tl-solution p,
    #page-tech .tl-benefits>.tl-wrap>.tl-kicker,
    #page-tech .tl-benefits>.tl-wrap>h2,
    #page-tech .tl-related>.tl-wrap>.tl-kicker,
    #page-tech .tl-related>.tl-wrap>h2 {
      text-align: left;
    }

    #page-tech .tl-benefits>.tl-wrap>h2,
    #page-tech .tl-related>.tl-wrap>h2 {
      margin-left: 0 !important;
      margin-right: auto !important;
    }

    /* Đồng bộ trang Công nghệ: dùng cùng trục trái với trang Công nghệ Wi‑Fi. */
    #page-tech .tl-wrap {
      max-width: var(--max) !important;
      margin-left: auto !important;
      margin-right: auto !important;
      padding-left: 40px !important;
      padding-right: 40px !important;
      text-align: left !important;
    }

    #page-tech .tl-hero-content,
    #page-tech .tl-kicker,
    #page-tech .tl-hero h1,
    #page-tech .tl-hero p,
    #page-tech .tl-overview h2,
    #page-tech .tl-solution h2,
    #page-tech .tl-solution p,
    #page-tech .tl-benefits>.tl-wrap>.tl-kicker,
    #page-tech .tl-benefits>.tl-wrap>h2,
    #page-tech .tl-related>.tl-wrap>.tl-kicker,
    #page-tech .tl-related>.tl-wrap>h2,
    #page-tech .tl-tbody,
    #page-tech .tl-tbody h3,
    #page-tech .tl-tbody p {
      text-align: left !important;
    }

    #page-tech .tl-benefits>.tl-wrap>h2,
    #page-tech .tl-related>.tl-wrap>h2 {
      margin-left: 0 !important;
      margin-right: auto !important;
    }

    @media (max-width: 700px) {
      #page-tech .tl-wrap {
        padding-left: 20px !important;
        padding-right: 20px !important;
      }
    }

    /* Camera / IoT / Wi‑Fi category article headers all follow the same left axis. */
    #page-techwifi .chead,
    #page-techcam .chead,
    #page-techiot .chead,
    #page-techdetail .chead {
      text-align: left !important;
      margin-left: 0 !important;
      margin-right: auto !important;
    }

    #page-techwifi .chead h2,
    #page-techwifi .chead p,
    #page-techcam .chead h2,
    #page-techcam .chead p,
    #page-techiot .chead h2,
    #page-techiot .chead p,
    #page-techdetail .chead h2,
    #page-techdetail .chead p {
      text-align: left !important;
    }

    #page-techwifi .chead h2:before,
    #page-techcam .chead h2:before,
    #page-techiot .chead h2:before,
    #page-techdetail .chead h2:before {
      margin-left: 0 !important;
      margin-right: auto !important;
    }

    /* ================================================================
   WICELL SOLUTIONS — REDESIGN
   Visual language: giống trang Công nghệ Wicell + bố cục editorial
   của file phần_giải_pháp. Không thay đổi dữ liệu, nội dung, ảnh,
   slug, điều hướng hoặc logic render của trang Giải pháp.
   ================================================================ */

    #page-solutions,
    #page-soldetail {
      --sol-bg: var(--w);
      --sol-soft: var(--s1);
      --sol-soft2: var(--s2);
      --sol-line: var(--ln);
      --sol-line2: var(--ln2);
      --sol-text: var(--t1);
      --sol-muted: var(--t3);
      --sol-orange: var(--o);
      --sol-orange-dark: var(--o-dk);
      --sol-orange-soft: var(--o-lt);
      background: var(--sol-bg) !important;
      color: var(--sol-muted) !important;
      font-family: "Be Vietnam Pro", sans-serif !important;
    }

    #page-solutions *,
    #page-soldetail * {
      font-family: "Be Vietnam Pro", sans-serif !important;
    }

    /* ---------- page rhythm / alternating backgrounds ---------- */
    #page-solutions .sec,
    #page-soldetail .sec {
      position: relative;
      padding: 96px 0;
    }

    #page-solutions .sec.s-w,
    #page-soldetail .sec.s-w {
      background: var(--w) !important;
    }

    #page-solutions .sec.s-1,
    #page-soldetail .sec.s-1 {
      background: var(--s1) !important;
    }

    #page-solutions .sec.s-2,
    #page-soldetail .sec.s-2 {
      background: var(--s2) !important;
    }

    #page-solutions .sec.s-w::before,
    #page-soldetail .sec.s-w::before,
    #page-solutions .sec.s-1::before,
    #page-soldetail .sec.s-1::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      background: linear-gradient(90deg, transparent, var(--sol-line), transparent);
    }

    /* ---------- breadcrumb ---------- */
    #page-solutions .sbc,
    #page-soldetail .sbc {
      background: rgba(255, 255, 255, .96) !important;
      border-bottom: 1px solid var(--sol-line) !important;
      backdrop-filter: blur(10px);
    }

    #page-solutions .sbc .wrap,
    #page-soldetail .sbc .wrap {
      height: 42px;
    }

    #page-solutions .sbc a,
    #page-soldetail .sbc a {
      color: var(--t4) !important;
      transition: color .18s ease;
    }

    #page-solutions .sbc a:hover,
    #page-soldetail .sbc a:hover {
      color: var(--sol-orange) !important;
    }

    #page-solutions .sbc b,
    #page-soldetail .sbc b {
      color: var(--sol-text) !important;
      font-weight: 600;
    }

    /* ---------- hero: editorial / technology style ---------- */
    /* Hero gọn: ảnh full nền, khung thấp vừa nội dung */
    #page-solutions .chero,
    #page-soldetail .chero {
      min-height: 260px !important;
      max-height: 340px !important;
      height: auto !important;
      background: #fff !important;
      border-bottom: 1px solid var(--sol-line);
      isolation: isolate;
      padding: 28px 0 32px !important;
      align-items: center;
      position: relative;
      overflow: hidden;
    }

    #page-solutions .chero>img.bg,
    #page-soldetail .chero>img.bg {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: 72% 50%;
      filter: saturate(.85) contrast(.98);
      opacity: 1;
    }

    #page-solutions .chero::before,
    #page-soldetail .chero::before {
      background: linear-gradient(90deg,
          rgba(255, 255, 255, .98) 0%,
          rgba(255, 255, 255, .95) 32%,
          rgba(255, 255, 255, .7) 52%,
          rgba(255, 255, 255, .25) 72%,
          transparent 100%) !important;
      z-index: 2;
    }

    #page-solutions .chero::after,
    #page-soldetail .chero::after {
      display: none;
    }

    #page-solutions .chero>.wrap,
    #page-soldetail .chero>.wrap {
      z-index: 5;
      padding-top: 0;
      padding-bottom: 0;
    }

    #page-solutions .chero h1,
    #page-soldetail .chero h1 {
      width: min(55vw, 680px) !important;
      max-width: min(55vw, 680px) !important;
      color: var(--sol-text) !important;
      font-size: clamp(24px, 2.8vw, 34px) !important;
      font-weight: 700;
      line-height: 1.2;
      letter-spacing: -.03em;
      margin: 0 0 8px;
      text-align: left;
    }

    #page-solutions .chero .sub,
    #page-soldetail .chero .sub {
      width: min(55vw, 560px);
      max-width: min(55vw, 560px);
      color: var(--sol-muted) !important;
      font-size: 14px !important;
      line-height: 1.55;
      font-weight: 400;
      margin: 0 0 14px;
      text-align: left;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    #page-soldetail .chero .eyeb {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      color: var(--sol-orange) !important;
      font-size: 12px;
      font-weight: 700;
      letter-spacing: .16em;
      text-transform: uppercase;
      margin-bottom: 17px;
    }

    #page-soldetail .chero .eyeb::before {
      content: "";
      width: 28px;
      height: 2px;
      background: var(--sol-orange);
    }

    #page-solutions .chero .btns,
    #page-soldetail .chero .btns {
      justify-content: flex-start;
    }

    #page-solutions .chero .btn,
    #page-soldetail .chero .btn {
      min-height: 46px;
      border-radius: 999px;
      font-size: 14px;
      font-weight: 600;
      padding: 12px 23px;
    }

    #page-solutions .chero .b-o,
    #page-soldetail .chero .b-o {
      background: var(--sol-orange) !important;
      color: #fff !important;
      border: 1px solid var(--sol-orange) !important;
      box-shadow: 0 12px 28px rgba(245, 125, 34, .20);
    }

    #page-solutions .chero .b-o:hover,
    #page-soldetail .chero .b-o:hover {
      background: var(--sol-orange-dark) !important;
    }

    #page-solutions .chero .b-dk,
    #page-soldetail .chero .b-dk {
      background: var(--k) !important;
      color: #fff !important;
      border: 1px solid var(--k) !important;
    }

    #page-solutions .chero .b-dk:hover,
    #page-soldetail .chero .b-dk:hover {
      background: var(--k3) !important;
    }

    /* ---------- section headings: left editorial axis ---------- */
    #page-solutions .chead,
    #page-soldetail .chead {
      max-width: 760px;
      margin: 0 0 46px;
      text-align: left !important;
    }

    #page-solutions .chead h2,
    #page-soldetail .chead h2 {
      position: relative;
      display: block;
      width: fit-content;
      max-width: 100%;
      color: var(--sol-text) !important;
      font-size: clamp(28px, 3.1vw, 42px);
      font-weight: 600;
      line-height: 1.16;
      letter-spacing: -.035em;
      margin: 0 0 14px;
    }

    #page-solutions .chead h2::before,
    #page-soldetail .chead h2::before {
      content: "";
      display: block;
      width: 44px;
      height: 3px;
      background: var(--sol-orange);
      margin: 0 0 15px;
      border-radius: 99px;
    }

    #page-solutions .chead p,
    #page-soldetail .chead p {
      max-width: 68ch;
      color: var(--sol-muted) !important;
      font-size: 15px;
      line-height: 1.8;
      text-align: left !important;
    }

    /* ---------- hub: Why Wicell split block ---------- */
    #page-solutions .zz {
      grid-template-columns: minmax(0, .52fr) minmax(0, .48fr);
      gap: 74px;
      align-items: center;
    }

    #page-solutions .zz .ph,
    #page-soldetail .zz .ph {
      aspect-ratio: 16/10;
      background: var(--s2);
      border: 1px solid var(--sol-line);
      overflow: hidden;
      box-shadow: 0 22px 55px rgba(17, 19, 24, .08);
    }

    #page-solutions .zz .ph::after,
    #page-soldetail .zz .ph::after {
      content: "";
      position: absolute;
      inset: 0;
      border: 1px solid rgba(245, 125, 34, .18);
      pointer-events: none;
    }

    #page-solutions .zz .ph img,
    #page-soldetail .zz .ph img {
      transition: transform .6s cubic-bezier(.2, .7, .2, 1), filter .4s ease;
    }

    #page-solutions .zz:hover .ph img,
    #page-soldetail .zz:hover .ph img {
      transform: scale(1.035);
      filter: saturate(1.03);
    }

    #page-solutions .zz .bd h2,
    #page-soldetail .zz .bd h2 {
      color: var(--sol-text) !important;
      font-size: clamp(28px, 3vw, 40px);
      line-height: 1.15;
      letter-spacing: -.035em;
      font-weight: 600;
      max-width: 17ch;
      margin-bottom: 18px;
    }

    #page-solutions .zz .bd p,
    #page-soldetail .zz .bd p,
    #page-solutions .zz .bd .tprose p,
    #page-soldetail .zz .bd .tprose p {
      color: var(--sol-muted) !important;
      font-size: 15px;
      line-height: 1.82;
      max-width: 60ch;
    }

    /* ---------- solution category cards ---------- */
    #page-solutions #slCats {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    #page-solutions #slCats .tcard {
      min-height: 100%;
    }

    /* ---------- all solution cards: stronger editorial tiles ---------- */
    #page-solutions #slGrid,
    #page-soldetail #sdRel {
      grid-template-columns: repeat(3, minmax(0, 1fr));
      gap: 22px;
    }

    #page-solutions #slGrid .tcard,
    #page-solutions #slCats .tcard,
    #page-soldetail #sdRel .tcard {
      position: relative;
      background: var(--w) !important;
      border: 1px solid var(--sol-line) !important;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 7px 24px rgba(17, 19, 24, .035);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    #page-solutions #slGrid .tcard::before,
    #page-solutions #slCats .tcard::before,
    #page-soldetail #sdRel .tcard::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 3px;
      background: var(--sol-orange);
      transform: scaleX(0);
      transform-origin: left;
      transition: transform .3s ease;
      z-index: 4;
    }

    #page-solutions #slGrid .tcard:hover,
    #page-solutions #slCats .tcard:hover,
    #page-soldetail #sdRel .tcard:hover {
      transform: translateY(-6px);
      border-color: var(--o-mid) !important;
      box-shadow: 0 18px 42px rgba(17, 19, 24, .10);
    }

    #page-solutions #slGrid .tcard:hover::before,
    #page-solutions #slCats .tcard:hover::before,
    #page-soldetail #sdRel .tcard:hover::before {
      transform: scaleX(1);
    }

    #page-solutions #slGrid .tcard .im,
    #page-solutions #slCats .tcard .im,
    #page-soldetail #sdRel .tcard .im {
      aspect-ratio: 16/9;
      height: auto;
      background: var(--s2);
    }

    #page-solutions #slGrid .tcard .im img,
    #page-solutions #slCats .tcard .im img,
    #page-soldetail #sdRel .tcard .im img {
      transition: transform .55s ease;
    }

    #page-solutions #slGrid .tcard:hover .im img,
    #page-solutions #slCats .tcard:hover .im img,
    #page-soldetail #sdRel .tcard:hover .im img {
      transform: scale(1.045);
    }

    #page-solutions #slGrid .tcard .bd,
    #page-solutions #slCats .tcard .bd,
    #page-soldetail #sdRel .tcard .bd {
      position: relative;
      padding: 23px 23px 24px;
      text-align: left !important;
    }

    #page-solutions #slGrid .tcard .bd::before,
    #page-soldetail #sdRel .tcard .bd::before {
      counter-increment: solution-card;
      content: counter(solution-card, decimal-leading-zero);
      position: absolute;
      right: 20px;
      top: 20px;
      color: var(--o);
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .12em;
    }

    #page-solutions #slGrid {
      counter-reset: solution-card;
    }

    #page-solutions #slGrid .tcard h4,
    #page-solutions #slCats .tcard h4,
    #page-soldetail #sdRel .tcard h4 {
      color: var(--sol-text) !important;
      font-size: 18px;
      line-height: 1.35;
      font-weight: 600;
      letter-spacing: -.02em;
      margin: 0 36px 9px 0;
      text-align: left !important;
    }

    #page-solutions #slGrid .tcard p,
    #page-solutions #slCats .tcard p,
    #page-soldetail #sdRel .tcard p {
      color: var(--sol-muted) !important;
      font-size: 13.5px;
      line-height: 1.72;
      margin: 0 0 17px;
      text-align: left !important;
    }

    #page-solutions #slGrid .tcard .lk,
    #page-solutions #slCats .tcard .lk,
    #page-soldetail #sdRel .tcard .lk {
      display: inline-flex;
      color: var(--sol-orange-dark) !important;
      font-size: 13px;
      font-weight: 600;
      justify-content: flex-start;
      gap: 7px;
    }

    #page-solutions #slGrid .tcard:hover .lk,
    #page-solutions #slCats .tcard:hover .lk,
    #page-soldetail #sdRel .tcard:hover .lk {
      gap: 11px;
    }

    /* ---------- detail page: sticky section navigation ---------- */
    #page-soldetail #sdNav {
      position: sticky;
      top: var(--hdr);
      z-index: 80;
      background: rgba(255, 255, 255, .94) !important;
      border-bottom: 1px solid var(--sol-line) !important;
      backdrop-filter: blur(12px);
    }

    #page-soldetail #sdNav .wrap {
      max-width: var(--max);
    }

    #page-soldetail #sdNav a {
      position: relative;
      color: var(--t3) !important;
      font-size: 13px;
      font-weight: 600;
      padding: 15px 18px;
      white-space: nowrap;
    }

    #page-soldetail #sdNav a:hover,
    #page-soldetail #sdNav a.on {
      color: var(--sol-text) !important;
    }

    #page-soldetail #sdNav a.on::after {
      content: "";
      position: absolute;
      left: 15px;
      right: 15px;
      bottom: -1px;
      height: 2px;
      background: var(--sol-orange);
    }

    /* ---------- detail overview: make it a hero-like editorial block ---------- */
    #page-soldetail #sdOverSec {
      padding-top: 100px;
    }

    #page-soldetail #sdOver {
      grid-template-columns: minmax(0, .54fr) minmax(0, .46fr);
      gap: 76px;
    }

    #page-soldetail #sdOver .bd {
      padding-right: 10px;
    }

    #page-soldetail #sdOver .bd h2 {
      max-width: 15ch;
    }

    #page-soldetail #sdOver .tprose:first-of-type p {
      font-size: 16px;
      color: var(--t2) !important;
    }

    #page-soldetail #sdOver .flist,
    #page-soldetail #sdHigh .flist {
      list-style: none;
      padding: 0;
      margin: 18px 0 0;
    }

    #page-soldetail #sdOver .flist li,
    #page-soldetail #sdHigh .flist li {
      position: relative;
      padding: 8px 0 8px 25px;
      color: var(--sol-muted);
      font-size: 14.5px;
      line-height: 1.72;
    }

    #page-soldetail #sdOver .flist li::before,
    #page-soldetail #sdHigh .flist li::before {
      content: "";
      position: absolute;
      left: 0;
      top: 16px;
      width: 7px;
      height: 7px;
      border-radius: 50%;
      background: var(--sol-orange);
      box-shadow: 0 0 0 4px var(--sol-orange-soft);
    }

    /* ---------- highlights: numbered solution modules ---------- */
    #page-soldetail #sdHighSec {
      padding-top: 104px;
      padding-bottom: 104px;
    }

    #page-soldetail #sdHigh {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      gap: 22px;
    }

    #page-soldetail #sdHigh .hlcard {
      position: relative;
      min-height: 230px;
      background: var(--w) !important;
      border: 1px solid var(--sol-line) !important;
      border-radius: 12px;
      padding: 31px 31px 29px;
      overflow: hidden;
      box-shadow: 0 7px 24px rgba(17, 19, 24, .035);
      transition: transform .28s ease, border-color .28s ease, box-shadow .28s ease;
    }

    #page-soldetail #sdHigh .hlcard::after {
      content: "";
      position: absolute;
      width: 170px;
      height: 170px;
      right: -85px;
      top: -85px;
      border-radius: 50%;
      border: 1px solid rgba(245, 125, 34, .14);
    }

    #page-soldetail #sdHigh .hlcard:hover {
      transform: translateY(-4px);
      border-color: var(--o-mid) !important;
      box-shadow: 0 18px 42px rgba(17, 19, 24, .09);
    }

    #page-soldetail #sdHigh .hlcard .n {
      display: flex;
      align-items: center;
      gap: 10px;
      color: var(--sol-orange) !important;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .15em;
      margin-bottom: 22px;
    }

    #page-soldetail #sdHigh .hlcard .n::after {
      content: "";
      width: 34px;
      height: 1px;
      background: var(--o-mid);
    }

    #page-soldetail #sdHigh .hlcard h4 {
      color: var(--sol-text) !important;
      font-size: 19px;
      line-height: 1.38;
      font-weight: 600;
      letter-spacing: -.02em;
      margin-bottom: 14px;
    }

    #page-soldetail #sdHigh .hlcard .tprose p,
    #page-soldetail #sdHigh .hlcard .flist li {
      color: var(--sol-muted) !important;
      font-size: 14px;
      line-height: 1.8;
    }

    /* ---------- product area ---------- */
    #page-soldetail #sdProdSec {
      padding-top: 100px;
    }

    #page-soldetail #sdSeries {
      border: 1px solid var(--sol-line) !important;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 8px 28px rgba(17, 19, 24, .035);
    }

    #page-soldetail #sdSeries .sercol {
      background: var(--w) !important;
      padding: 25px 24px 27px;
      border-color: var(--sol-line) !important;
    }

    #page-soldetail #sdSeries .sercol:nth-child(2n) {
      background: var(--s1) !important;
    }

    #page-soldetail #sdSeries h5 {
      color: var(--sol-orange-dark) !important;
      font-size: 11px;
      font-weight: 700;
      letter-spacing: .14em;
      text-transform: uppercase;
      margin-bottom: 10px;
    }

    #page-soldetail #sdSeries p {
      color: var(--sol-muted) !important;
      font-size: 13.5px;
      line-height: 1.75;
      margin: 0;
    }

    #page-soldetail #sdProds {
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 18px;
    }

    #page-soldetail #sdProds .pcell {
      background: var(--w) !important;
      border: 1px solid var(--sol-line) !important;
      border-radius: 12px !important;
      padding: 23px 20px 22px !important;
      box-shadow: 0 7px 24px rgba(17, 19, 24, .035);
    }

    #page-soldetail #sdProds .pcell:hover {
      border-color: var(--o-mid) !important;
      box-shadow: 0 15px 34px rgba(17, 19, 24, .09) !important;
      transform: translateY(-3px) !important;
    }

    #page-soldetail #sdProds .pcell .im {
      height: 150px;
    }

    #page-soldetail #sdProds .pcell .sku {
      color: var(--sol-text);
      font-weight: 600;
    }

    #page-soldetail #sdProds .pcell p {
      color: var(--sol-muted);
    }

    /* ---------- related section ---------- */
    #page-soldetail #sdRelSec {
      padding-top: 96px;
    }

    /* ---------- bottom CTA: same architecture as reference solution file ---------- */
    #page-solutions .getst,
    #page-soldetail .getst {
      position: relative;
      background: var(--s1);
      border: 1px solid var(--sol-line);
      border-radius: 14px;
      padding: 48px 48px 50px;
      overflow: hidden;
    }

    #page-solutions .getst::before,
    #page-soldetail .getst::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--sol-orange);
    }

    #page-solutions .getst .gl h2,
    #page-soldetail .getst .gl h2 {
      color: var(--sol-text) !important;
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 600;
      letter-spacing: -.035em;
    }

    #page-solutions .getst .gr,
    #page-soldetail .getst .gr {
      border-left: 1px solid var(--sol-line) !important;
    }

    #page-solutions .getst .gr>div,
    #page-soldetail .getst .gr>div {
      padding: 4px 0;
    }

    #page-solutions .getst .gr h4,
    #page-soldetail .getst .gr h4 {
      color: var(--sol-text) !important;
      font-size: 15.5px;
      font-weight: 600;
      margin-bottom: 7px;
    }

    #page-solutions .getst .gr p,
    #page-soldetail .getst .gr p {
      color: var(--sol-muted) !important;
      font-size: 13.5px;
      line-height: 1.75;
    }

    #page-solutions .getst .lk,
    #page-soldetail .getst .lk {
      color: var(--sol-orange-dark) !important;
      font-weight: 600;
    }

    /* ---------- buttons outside hero ---------- */
    #page-solutions .b-ol,
    #page-soldetail .b-ol {
      color: var(--sol-orange-dark) !important;
      background: transparent !important;
      border-color: var(--sol-orange) !important;
      border-radius: 999px;
    }

    #page-solutions .b-ol:hover,
    #page-soldetail .b-ol:hover {
      background: var(--sol-orange) !important;
      color: #fff !important;
    }

    /* ---------- reveal animation: subtle, not flashy ---------- */
    #page-solutions .rv,
    #page-soldetail .rv {
      transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
    }

    /* ---------- mobile ---------- */
    @media(max-width:1050px) {

      #page-solutions #slCats,
      #page-solutions #slGrid,
      #page-soldetail #sdRel {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #page-soldetail #sdProds {
        grid-template-columns: repeat(2, minmax(0, 1fr));
      }

      #page-solutions .zz,
      #page-soldetail #sdOver {
        gap: 46px;
      }
    }

    @media(max-width:900px) {

      #page-solutions .chero,
      #page-soldetail .chero {
        min-height: 0 !important;
        max-height: none !important;
        padding: 16px 0 18px !important;
      }
      #page-solutions .chero>img.bg,
      #page-soldetail .chero>img.bg {
        width: 100%;
        height: 100%;
        inset: 0;
        opacity: 1;
        object-position: center;
      }

      #page-solutions .chero::before,
      #page-soldetail .chero::before {
        background: linear-gradient(180deg, rgba(255, 255, 255, .97), rgba(255, 255, 255, .90)) !important;
      }

      #page-solutions .chero::after,
      #page-soldetail .chero::after {
        opacity: .35;
        mask-image: none;
      }

      #page-solutions .chero h1,
      #page-soldetail .chero h1,
      #page-solutions .chero .sub,
      #page-soldetail .chero .sub {
        width: 100% !important;
        max-width: 100% !important;
      }

      #page-solutions .zz,
      #page-soldetail #sdOver {
        grid-template-columns: 1fr;
        gap: 34px;
      }

      #page-solutions .zz.rev .ph,
      #page-soldetail #sdOver .ph {
        order: 0;
      }

      #page-solutions .zz .bd h2,
      #page-soldetail #sdOver .bd h2 {
        max-width: none;
      }

      #page-solutions .getst,
      #page-soldetail .getst {
        padding: 38px 32px 40px;
      }
    }

    /* ---------- "Bắt đầu ngay" trên trang Dịch vụ: cùng thiết kế card như trang Giải pháp ---------- */
    #page-svcdetail .getst {
      position: relative;
      background: var(--s1);
      border: 1px solid var(--ln);
      border-radius: 14px;
      padding: 48px 48px 50px;
      overflow: hidden;
    }

    #page-svcdetail .getst::before {
      content: "";
      position: absolute;
      left: 0;
      top: 0;
      bottom: 0;
      width: 4px;
      background: var(--o);
    }

    #page-svcdetail .getst .gl h2 {
      color: var(--t1) !important;
      font-size: clamp(28px, 3vw, 40px);
      font-weight: 600;
      letter-spacing: -.035em;
    }

    #page-svcdetail .getst .gr {
      border-left: 1px solid var(--ln) !important;
    }

    #page-svcdetail .getst .gr>div {
      padding: 4px 0;
    }

    #page-svcdetail .getst .gr h4 {
      color: var(--t1) !important;
      font-size: 15.5px;
      font-weight: 600;
      margin-bottom: 7px;
    }

    #page-svcdetail .getst .gr p {
      color: var(--t3) !important;
      font-size: 13.5px;
      line-height: 1.75;
    }

    #page-svcdetail .getst .lk {
      color: var(--o-dk) !important;
      font-weight: 600;
    }

    @media(max-width:900px) {
      #page-svcdetail .getst {
        padding: 38px 32px 40px;
      }
    }

    @media(max-width:640px) {
      #page-svcdetail .getst {
        padding: 32px 22px 34px;
      }

      #page-svcdetail .getst .gr {
        grid-template-columns: 1fr;
        border-left: 0 !important;
        padding-left: 0;
        gap: 26px;
      }

      #page-svcdetail .getst::before {
        width: 3px;
      }
    }

    @media(max-width:640px) {

      #page-solutions .sec,
      #page-soldetail .sec {
        padding: 64px 0;
      }

      #page-solutions .chead,
      #page-soldetail .chead {
        margin-bottom: 32px;
      }

      #page-solutions .chead h2,
      #page-soldetail .chead h2 {
        font-size: 28px;
      }

      #page-solutions #slCats,
      #page-solutions #slGrid,
      #page-soldetail #sdHigh,
      #page-soldetail #sdRel,
      #page-soldetail #sdProds {
        grid-template-columns: 1fr;
      }

      #page-soldetail #sdNav .wrap {
        padding-left: 14px;
        padding-right: 14px;
      }

      #page-soldetail #sdNav a {
        padding: 13px 14px;
        font-size: 12.5px;
      }

      #page-solutions #slGrid .tcard .bd,
      #page-solutions #slCats .tcard .bd,
      #page-soldetail #sdRel .tcard .bd {
        padding: 21px 20px 22px;
      }

      #page-soldetail #sdHigh .hlcard {
        min-height: 0;
        padding: 26px 23px 24px;
      }

      #page-soldetail #sdSeries {
        grid-template-columns: 1fr;
      }

      #page-solutions .getst,
      #page-soldetail .getst {
        padding: 32px 22px 34px;
      }

      #page-solutions .getst .gr,
      #page-soldetail .getst .gr {
        grid-template-columns: 1fr;
        border-left: 0 !important;
        padding-left: 0;
        gap: 26px;
      }

      #page-solutions .getst::before,
      #page-soldetail .getst::before {
        width: 3px;
      }
    }

    /* ===== Solutions: compact 4-card layout ===== */
    @media (min-width: 901px) {

      #page-solutions #slGrid,
      #page-solutions #slCats {
        grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
        gap: 18px !important;
      }

      #page-solutions #slGrid .tcard .bd,
      #page-solutions #slCats .tcard .bd,
      #page-soldetail #sdRel .tcard .bd {
        padding: 17px 16px 18px !important;
      }

      #page-solutions #slGrid .tcard h4,
      #page-solutions #slCats .tcard h4,
      #page-soldetail #sdRel .tcard h4 {
        font-size: 15px !important;
        line-height: 1.4 !important;
        margin: 0 24px 7px 0 !important;
      }

      #page-solutions #slGrid .tcard p,
      #page-solutions #slCats .tcard p,
      #page-soldetail #sdRel .tcard p {
        font-size: 12px !important;
        line-height: 1.6 !important;
        margin-bottom: 12px !important;
      }

      #page-solutions #slGrid .tcard .lk,
      #page-solutions #slCats .tcard .lk,
      #page-soldetail #sdRel .tcard .lk {
        font-size: 11.5px !important;
      }
    }

    /* ===== Product title: smaller ===== */
    #page-detail .pdtitle {
      font-size: 28px !important;
      line-height: 1.2 !important;
    }

    @media(max-width:900px) {
      #page-detail .pdtitle {
        font-size: 26px !important;
      }
    }

    @media(max-width:640px) {
      #page-detail .pdtitle {
        font-size: 24px !important;
      }
    }

    @media(max-width:420px) {
      #page-detail .pdtitle {
        font-size: 22px !important;
      }
    }

    /* K: thu nhỏ tiêu đề + mô tả banner trang Giải pháp và Công nghệ */
    #page-solutions .chero h1,
    #page-soldetail .chero h1,
    #page-techdetail .chero h1,
    #page-techwifi .chero h1,
    #page-techcam .chero h1,
    #page-techiot .chero h1,
    #page-tech .chero h1 {
      font-size: clamp(32px, 3.8vw, 50px) !important;
      line-height: 1.08 !important;
    }

    #page-solutions .chero .sub,
    #page-soldetail .chero .sub,
    #page-techdetail .chero .sub,
    #page-techwifi .chero .sub,
    #page-techcam .chero .sub,
    #page-techiot .chero .sub,
    #page-tech .chero .sub {
      font-size: 15px !important;
      line-height: 1.7 !important;
    }

        /* ================= TECH PAGE — dark redesign, scoped to #page-tech ================= */
        #page-tech {
          --tl-bg: #0A0C16;
          --tl-panel: #10142A;
          --tl-panel2: #151A34;
          --tl-line: rgba(255, 255, 255, .09);
          --tl-amber: #F2A93B;
          --tl-amber-soft: rgba(242, 169, 59, .14);
          --tl-violet: #8B7CF6;
          --tl-violet-soft: rgba(139, 124, 246, .16);
          --tl-text: #F4F5FA;
          --tl-dim: rgba(244, 245, 250, .64);
          --tl-dim2: rgba(244, 245, 250, .42);
          background: var(--tl-bg);
          color: var(--tl-text);
        }

        #page-tech .tl-font {
          font-family: 'Space Grotesk', 'Be Vietnam Pro', sans-serif;
          letter-spacing: -0.01em;
        }

        #page-tech .tl-wrap {
          max-width: 1200px;
          margin: 0 auto;
          padding: 0 32px;
        }

        @media (max-width:640px) {
          #page-tech .tl-wrap {
            padding: 0 20px;
          }
        }

        #page-tech .tl-sec {
          padding: 88px 0;
        }

        #page-tech .tl-kicker {
          font-family: 'Space Grotesk', sans-serif;
          font-size: 13px;
          font-weight: 600;
          letter-spacing: .02em;
          color: var(--tl-amber);
          margin-bottom: 12px;
        }

        /* ---- breadcrumb (kept from site, restyled dark) ---- */
        #page-tech .sbc {
          background: var(--tl-bg);
          border-bottom: 1px solid var(--tl-line);
        }

        #page-tech .sbc .wrap {
          color: var(--tl-dim2);
          font-size: 13px;
          padding: 14px 32px;
        }

        #page-tech .sbc a {
          color: var(--tl-dim);
        }

        #page-tech .sbc b {
          color: var(--tl-text);
          font-weight: 600;
        }

        /* ---- hero ---- */
        #page-tech .tl-hero {
          position: relative;
          min-height: 460px;
          display: flex;
          align-items: center;
          padding: 64px 0;
          overflow: hidden;
        }

        #page-tech .tl-hero-bg {
          position: absolute;
          inset: 0;
          z-index: 0;
          background: var(--tl-panel);
        }

        #page-tech .tl-hero-bg img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
          opacity: .55;
        }

        #page-tech .tl-hero-overlay {
          position: absolute;
          inset: 0;
          z-index: 1;
          background: linear-gradient(90deg, rgba(10, 12, 22, .97) 0%, rgba(10, 12, 22, .88) 38%, rgba(10, 12, 22, .5) 68%, rgba(10, 12, 22, .18) 100%);
        }

        #page-tech .tl-hero-content {
          position: relative;
          z-index: 2;
          max-width: 620px;
        }

        #page-tech .tl-hero h1 {
          font-size: clamp(30px, 4.2vw, 46px);
          line-height: 1.1;
          margin: 12px 0 18px;
        }

        #page-tech .tl-hero p.tl-lead {
          font-size: 16px;
          color: var(--tl-dim);
          max-width: 520px;
        }

        /* ---- sticky section tabs ---- */
        #page-tech .tl-tabs {
          position: sticky;
          top: 0;
          z-index: 40;
          background: rgba(10, 12, 22, .92);
          backdrop-filter: blur(10px);
          border-bottom: 1px solid var(--tl-line);
          border-top: 1px solid var(--tl-line);
        }

        #page-tech .tl-tabs .tl-wrap {
          display: flex;
          gap: 8px;
          overflow-x: auto;
          padding: 6px 32px;
        }

        #page-tech .tl-tabs a {
          flex: none;
          font-size: 13.5px;
          font-weight: 500;
          padding: 12px 16px;
          color: var(--tl-dim);
          border-bottom: 2px solid transparent;
          white-space: nowrap;
        }

        #page-tech .tl-tabs a:hover {
          color: var(--tl-text);
        }

        #page-tech .tl-tabs a.active {
          color: var(--tl-text);
          border-color: var(--tl-amber);
        }

        /* ---- glow frame image wrapper ---- */
        #page-tech .tl-frame {
          border-radius: 14px;
          padding: 8px;
        }

        #page-tech .tl-frame img {
          width: 100%;
          height: auto;
          border-radius: 8px;
          display: block;
        }

        /* ---- tổng quan ---- */
        #page-tech .tl-overview .tl-row {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 64px;
          align-items: center;
        }

        @media (max-width:920px) {
          #page-tech .tl-overview .tl-row {
            grid-template-columns: 1fr;
          }
        }

        #page-tech .tl-overview h2 {
          font-size: clamp(24px, 3vw, 32px);
          margin-bottom: 20px;
        }

        #page-tech .tl-flist {
          display: grid;
          gap: 16px;
          list-style: none;
          padding: 0;
          margin: 0;
        }

        #page-tech .tl-flist li {
          display: flex;
          gap: 12px;
          font-size: 15px;
          color: var(--tl-dim);
          align-items: flex-start;
        }

        #page-tech .tl-tick {
          flex: none;
          width: 18px;
          height: 18px;
          border-radius: 50%;
          background: var(--tl-amber-soft);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-top: 2px;
        }

        #page-tech .tl-tick i {
          width: 6px;
          height: 6px;
          border-radius: 50%;
          background: var(--tl-amber);
          display: block;
        }

        /* ---- giải pháp ---- */
        #page-tech .tl-solution {
          background: var(--tl-panel);
        }

        #page-tech .tl-solution .tl-row {
          display: grid;
          grid-template-columns: .9fr 1.1fr;
          gap: 64px;
          align-items: center;
        }

        @media (max-width:920px) {
          #page-tech .tl-solution .tl-row {
            grid-template-columns: 1fr;
          }
        }

        #page-tech .tl-solution h2 {
          font-size: clamp(24px, 3vw, 32px);
          margin-bottom: 18px;
        }

        #page-tech .tl-solution p {
          color: var(--tl-dim);
          font-size: 15px;
          margin-bottom: 16px;
          max-width: 560px;
        }

        #page-tech .tl-solution-banner {
          margin-top: 56px;
          border-radius: 14px;
          overflow: hidden;
        }

        #page-tech .tl-solution-banner img {
          width: 100%;
          height: auto;
          display: block;
          max-height: 460px;
          object-fit: cover;
        }

        /* ---- lợi ích ---- */
        #page-tech .tl-benefits-grid {
          display: grid;
          grid-template-columns: repeat(3, 1fr);
          gap: 22px;
        }

        @media (max-width:900px) {
          #page-tech .tl-benefits-grid {
            grid-template-columns: repeat(2, 1fr);
          }
        }

        @media (max-width:600px) {
          #page-tech .tl-benefits-grid {
            grid-template-columns: 1fr;
          }
        }

        #page-tech .tl-benefit-card {
          background: var(--tl-panel);
          border: 1px solid var(--tl-line);
          border-radius: 12px;
          padding: 28px 26px;
          transition: border-color .15s ease, transform .15s ease;
        }

        #page-tech .tl-benefit-card:hover {
          border-color: rgba(242, 169, 59, .4);
          transform: translateY(-3px);
        }

        #page-tech .tl-benefit-icon {
          width: 44px;
          height: 44px;
          border-radius: 10px;
          background: var(--tl-violet-soft);
          display: flex;
          align-items: center;
          justify-content: center;
          margin-bottom: 18px;
          color: var(--tl-violet);
        }

        #page-tech .tl-benefit-card h3 {
          font-size: 16.5px;
          margin-bottom: 8px;
        }

        #page-tech .tl-benefit-card p {
          font-size: 14px;
          color: var(--tl-dim);
          margin: 0;
        }

        /* ---- công nghệ liên quan ---- */
        #page-tech .tl-related {
          background: var(--tl-panel);
        }

        #page-tech .tl-related-grid {
          display: grid;
          grid-template-columns: repeat(4, 1fr);
          gap: 22px;
        }

        @media (max-width:920px) {
          #page-tech .tl-related-grid {
            grid-template-columns: 1fr 1fr;
          }
        }

        @media (max-width:560px) {
          #page-tech .tl-related-grid {
            grid-template-columns: 1fr;
          }
        }

        #page-tech .tl-tcard {
          background: var(--tl-bg);
          border: 1px solid var(--tl-line);
          border-radius: 12px;
          overflow: hidden;
          display: flex;
          flex-direction: column;
          transition: transform .15s ease, border-color .15s ease;
          cursor: pointer;
        }

        #page-tech .tl-tcard:hover {
          transform: translateY(-3px);
          border-color: rgba(139, 124, 246, .4);
        }

        #page-tech .tl-tthumb {
          aspect-ratio: 16/11;
          position: relative;
        }

        #page-tech .tl-tthumb img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          display: block;
        }

        #page-tech .tl-tbody {
          padding: 20px 20px 22px;
          display: flex;
          flex-direction: column;
          flex: 1;
        }

        #page-tech .tl-tbody h3 {
          font-size: 15px;
          margin: 0 0 8px;
        }

        #page-tech .tl-tbody p {
          font-size: 13px;
          color: var(--tl-dim);
          margin: 0 0 16px;
        }

        #page-tech .tl-more {
          margin-top: auto;
          font-size: 13px;
          font-weight: 600;
          color: var(--tl-amber);
          display: inline-flex;
          gap: 6px;
          align-items: center;
        }

        #page-tech .tl-tcard:hover .tl-arrow {
          transform: translateX(3px);
        }

        #page-tech .tl-arrow {
          transition: transform .15s ease;
        }

        /* ---- CTA strip ---- */
        #page-tech .tl-cta {
          text-align: center;
          padding: 72px 0;
          background: radial-gradient(700px 300px at 50% 0%, rgba(139, 124, 246, .16), transparent 70%), var(--tl-bg);
          border-top: 1px solid var(--tl-line);
        }

        #page-tech .tl-cta h2 {
          font-size: clamp(22px, 2.8vw, 28px);
          margin-bottom: 24px;
        }

        #page-tech .tl-btn {
          display: inline-flex;
          align-items: center;
          gap: 8px;
          padding: 13px 26px;
          font-size: 14.5px;
          font-weight: 600;
          border-radius: 8px;
          background: var(--tl-amber);
          color: #1A1300;
          cursor: pointer;
        }

    /* Support docs — icon-only download button */
    #page-support .dlb {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 40px;
      height: 40px;
      padding: 0;
      border-radius: 12px;
      border: 0;
      background: #1a1d22;
      color: #fff;
      transition: .16s;
      box-shadow: 0 2px 8px rgba(12, 14, 18, .18);
    }

    #page-support .dlb:hover {
      background: var(--o);
      color: #fff;
      transform: translateY(-1px);
      box-shadow: 0 6px 16px rgba(245, 125, 34, .35);
    }

    #page-support .dlb svg {
      display: block;
      flex-shrink: 0;
    }

    #page-support .dlb.off {
      opacity: .35;
      pointer-events: none;
      filter: grayscale(1);
    }

    #page-support .doccat {
      display: inline-block;
      margin-left: 10px;
      font-size: 11.5px;
      font-weight: 600;
      color: var(--t4);
      background: var(--s2);
      border-radius: var(--rp);
      padding: 3px 10px;
      vertical-align: middle;
    }

    #page-support .nm b {
      font-weight: 600;
      color: var(--t1);
    }

    #page-support table.docs td:last-child {
      text-align: center;
      width: 72px;
    }

    /* ============================================================
   WICELL BRAND COLOR SKIN — technology pages
   Đồng bộ màu công nghệ với hệ màu chung của website Wicell.
   Không thay đổi nội dung/bố cục/chức năng.
   ============================================================ */
    #page-tech,
    #page-techdetail,
    #page-techwifi {
      --tl-bg: var(--s1);
      --tl-panel: var(--s2);
      --tl-panel2: var(--w);
      --tl-line: var(--ln);
      --tl-amber: var(--o);
      --tl-amber-soft: var(--o-lt);
      --tl-violet: var(--o);
      --tl-violet-soft: var(--o-lt);
      --tl-text: var(--t1);
      --tl-dim: var(--t3);
      --tl-dim2: var(--t4);
      --tk-bg: var(--s1);
      --tk-panel: var(--s2);
      --tk-panel-2: var(--w);
      --tk-line: var(--ln);
      --tk-amber: var(--o);
      --tk-amber-soft: var(--o-lt);
      --tk-violet: var(--o);
      --tk-violet-soft: var(--o-lt);
      --tk-text: var(--t1);
      --tk-dim: var(--t3);
      --tk-dim2: var(--t4);
      background: var(--s1) !important;
      color: var(--t2) !important;
    }

    /* Main technology page */
    #page-tech .tl-hero-bg {
      background: var(--s2);
    }

    #page-tech .tl-hero-bg img {
      opacity: .68;
    }

    #page-tech .tl-hero-overlay {
      background: linear-gradient(90deg,
          rgba(255, 255, 255, .97) 0%,
          rgba(255, 255, 255, .91) 38%,
          rgba(255, 255, 255, .58) 68%,
          rgba(255, 255, 255, .18) 100%);
    }

    #page-tech .tl-tabs {
      background: rgba(255, 255, 255, .94);
      border-color: var(--ln);
    }

    #page-tech .tl-tabs a:hover {
      color: var(--t1);
    }

    #page-tech .tl-tabs a.active {
      color: var(--t1);
      border-color: var(--o);
    }

    #page-tech .tl-solution,
    #page-tech .tl-related {
      background: var(--s2);
    }

    #page-tech .tl-benefit-card,
    #page-tech .tl-tcard {
      background: var(--w);
      border-color: var(--ln);
    }

    #page-tech .tl-benefit-card:hover,
    #page-tech .tl-tcard:hover {
      border-color: var(--o-mid);
    }

    #page-tech .tl-benefit-icon {
      color: var(--o);
      background: var(--o-lt);
    }

    #page-tech .tl-tick {
      background: var(--o-lt);
    }

    #page-tech .tl-tick i {
      background: var(--o);
    }

    #page-tech .tl-more,
    #page-tech .tl-kicker {
      color: var(--o);
    }

    #page-tech .tl-cta {
      background: radial-gradient(700px 300px at 50% 0%, rgba(245, 125, 34, .12), transparent 70%), var(--s1);
      border-top-color: var(--ln);
    }

    #page-tech .tl-btn {
      background: var(--o);
      color: #fff;
    }

    #page-tech .tl-btn:hover {
      background: var(--o-dk);
    }

    /* Technology list/detail pages */
    #page-techdetail .sec.s-w,
    #page-techwifi .sec.s-w {
      background: var(--s1) !important;
    }

    #page-techdetail .sec.s-1,
    #page-techdetail .sec.s-2,
    #page-techdetail .sec.s-3,
    #page-techdetail .sec.s-4,
    #page-techwifi .sec.s-1,
    #page-techwifi .sec.s-2,
    #page-techwifi .sec.s-3,
    #page-techwifi .sec.s-4 {
      background: var(--s2) !important;
    }

    #page-techdetail .sbc,
    #page-techwifi .sbc {
      background: var(--s1) !important;
      border-color: var(--ln) !important;
    }

    #page-techdetail .sbc a,
    #page-techwifi .sbc a {
      color: var(--o) !important;
    }

    #page-techdetail .sbc b,
    #page-techwifi .sbc b {
      color: var(--t1) !important;
    }

    #page-techdetail .chero,
    #page-techwifi .chero {
      background: var(--s2) !important;
    }

    #page-techdetail .chero::after,
    #page-techwifi .chero::after {
      background: linear-gradient(90deg, rgba(255, 255, 255, .96), rgba(255, 255, 255, .72), rgba(255, 255, 255, .12)) !important;
    }

    #page-techdetail .chero h1,
    #page-techwifi .chero h1,
    #page-techdetail h1,
    #page-techdetail h2,
    #page-techdetail h3,
    #page-techdetail h4,
    #page-techwifi h1,
    #page-techwifi h2,
    #page-techwifi h3,
    #page-techwifi h4 {
      color: var(--t1);
    }

    #page-techdetail .eyeb,
    #page-techwifi .eyeb,
    #page-techdetail .kicker,
    #page-techwifi .kicker {
      color: var(--o) !important;
    }

    #page-techdetail .sec,
    #page-techwifi .sec {
      color: var(--t2);
    }

    #page-techdetail .card,
    #page-techwifi .card,
    #page-techdetail .tech-card,
    #page-techwifi .tech-card {
      background: var(--w);
      border-color: var(--ln);
    }

    #page-techdetail a,
    #page-techwifi a {
      color: inherit;
    }

    #page-techdetail .accent,
    #page-techwifi .accent {
      color: var(--o) !important;
    }

    #page-techdetail .btn,
    #page-techwifi .btn {
      background: var(--o);
      color: #fff;
      border-color: var(--o);
    }

    #page-techdetail .btn:hover,
    #page-techwifi .btn:hover {
      background: var(--o-dk);
      border-color: var(--o-dk);
    }

    /* Camera / IoT landing pages reuse the site's normal neutral surfaces. */
    #page-techcam,
    #page-techiot {
      background: var(--w);
      color: var(--t2);
    }

    #page-techcam .chero,
    #page-techiot .chero {
      background: var(--s2);
    }

    #page-techcam .chero .eyeb,
    #page-techiot .chero .eyeb {
      color: var(--o);
    }

    #page-techcam .chero h1,
    #page-techiot .chero h1 {
      color: var(--t1);
    }

    #page-techcam .sec,
    #page-techiot .sec {
      color: var(--t2);
    }

    #page-techcam .sec.s-w,
    #page-techiot .sec.s-w {
      background: var(--s1);
    }

    #page-techcam .sec.s-1,
    #page-techcam .sec.s-2,
    #page-techcam .sec.s-3,
    #page-techcam .sec.s-4,
    #page-techiot .sec.s-1,
    #page-techiot .sec.s-2,
    #page-techiot .sec.s-3,
    #page-techiot .sec.s-4 {
      background: var(--s2);
    }

    #page-solutions #slGrid .tcard .bd::before,
    #page-solutions #slCats .tcard .bd::before,
    #page-soldetail #sdRel .tcard .bd::before {
      content: none !important;
      display: none !important;
    }

    /* ============================================================
   WICELL MOBILE UX — tối ưu trải nghiệm thiết bị cảm ứng
   Breakpoint chính: ≤1025px (khớp nút hamburger), ≤700, ≤480
   ============================================================ */

    /* ---- safe area + scroll ---- */
    html {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
      scroll-padding-top: calc(var(--hdr) + 12px);
    }

    body {
      overflow-x: hidden;
      -webkit-tap-highlight-color: rgba(245, 125, 34, .12);
    }

    body.mdr-open {
      overflow: hidden !important;
      touch-action: none;
    }

    /* ---- sticky header compact on mobile ---- */
    @media (max-width: 1025px) {
      :root {
        --hdr: 64px;
      }

      .tb {
        display: none;
      }

      /* top utility bar chiếm chiều cao, ít dùng trên mobile */
      .hdr {
        position: sticky;
        top: 0;
        z-index: 900;
        padding-top: env(safe-area-inset-top, 0);
        background: var(--k);
        box-shadow: 0 1px 0 rgba(255, 255, 255, .06);
      }

      .hdr .wrap {
        height: var(--hdr);
        padding-left: max(12px, env(safe-area-inset-left, 0));
        padding-right: max(12px, env(safe-area-inset-right, 0));
      }

      .brand .blogo {
        height: 48px !important;
        max-width: min(160px, 48vw);
      }

      .hdr .rt .bgr {
        width: 44px;
        height: 44px;
        min-width: 44px;
        min-height: 44px;
        color: #fff !important;
        border-radius: 12px;
      }

      .hdr .rt .bgr:active {
        background: rgba(255, 255, 255, .1);
      }

      .hdr .rt .lang {
        border-color: rgba(255, 255, 255, .2);
      }

      .hdr .rt .lang button {
        min-height: 40px;
        min-width: 40px;
        color: #B5B5B5;
      }

      .hdr .rt .lang button.on {
        background: var(--o);
        color: #fff;
      }
    }

    /* ---- drawer backdrop ---- */
    .mdr-backdrop {
      position: fixed;
      inset: 0;
      z-index: 940;
      background: rgba(12, 12, 12, .48);
      opacity: 0;
      pointer-events: none;
      transition: opacity .22s ease;
      -webkit-backdrop-filter: blur(2px);
      backdrop-filter: blur(2px);
    }

    .mdr-backdrop.on {
      opacity: 1;
      pointer-events: auto;
    }

    .mdr-backdrop[hidden] {
      display: none !important;
    }

    /* ---- drawer panel ---- */
    .mdr {
      z-index: 950;
      width: min(100%, 420px);
      margin-left: auto;
      padding-top: env(safe-area-inset-top, 0);
      padding-bottom: env(safe-area-inset-bottom, 0);
      box-shadow: -12px 0 40px rgba(0, 0, 0, .18);
      overscroll-behavior: contain;
      -webkit-overflow-scrolling: touch;
    }

    @media (min-width: 1026px) {

      .mdr,
      .mdr-backdrop {
        display: none !important;
      }
    }

    .mdrh {
      padding: 12px 16px;
      padding-left: max(16px, env(safe-area-inset-left, 0));
      padding-right: max(16px, env(safe-area-inset-right, 0));
      min-height: 60px;
      z-index: 2;
      box-shadow: 0 1px 0 var(--ln);
    }

    .mdrh .blogo {
      height: 44px !important;
    }

    .mdrh .ib {
      width: 44px;
      height: 44px;
      min-width: 44px;
      border-radius: 12px;
      font-size: 28px !important;
      line-height: 1 !important;
    }

    /* accordion groups */
    .mdrg-toggle {
      min-height: 56px;
      padding: 14px 20px;
      font-size: 16px;
    }

    .mdrg-body a {
      min-height: 48px;
      display: flex;
      align-items: center;
      padding: 12px 4px 12px 8px;
      font-size: 15.5px;
      border-radius: 10px;
      -webkit-tap-highlight-color: transparent;
    }

    .mdrg-body a:active {
      background: var(--o-lt);
      color: var(--o-dk);
    }

    /* direct links (Tin tức / Liên hệ) */
    .mdr-link {
      display: flex;
      align-items: center;
      min-height: 56px;
      padding: 14px 20px;
      font-size: 16px;
      font-weight: 700;
      color: var(--t1);
      border-bottom: 1px solid var(--ln);
      -webkit-tap-highlight-color: transparent;
    }

    .mdr-link:active {
      color: var(--o);
      background: var(--s1);
    }

    /* sticky CTA in drawer */
    .mdr-foot {
      position: sticky;
      bottom: 0;
      padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0));
      background: linear-gradient(180deg, rgba(255, 255, 255, 0), #fff 28%);
      border-bottom: 0;
    }

    .mdr-foot .btn {
      min-height: 48px;
      font-size: 15px;
      box-shadow: 0 8px 24px rgba(245, 125, 34, .28);
    }

    /* ---- global touch targets & type ---- */
    @media (max-width: 1025px) {
      body {
        font-size: 16px;
        line-height: 1.6;
      }

      .sec {
        padding: 56px 0;
      }

      .wrap {
        padding-left: max(16px, env(safe-area-inset-left, 0));
        padding-right: max(16px, env(safe-area-inset-right, 0));
      }

      .btn,
      .b-o,
      .b-k,
      .b-g,
      .b-w,
      .dvbtn {
        min-height: 48px;
        padding: 12px 22px;
      }

      .btn.b-sm {
        min-height: 40px;
        padding: 8px 16px;
      }

      /* full-width primary CTAs in hero stacks */
      .hero .btns,
      .dvbtn-row,
      .chero .btns {
        flex-direction: column;
        align-items: stretch;
        width: 100%;
        max-width: 360px;
      }

      .hero .btns .btn,
      .dvbtn-row .dvbtn,
      .chero .btns .btn {
        width: 100%;
        justify-content: center;
      }
    }

    @media (max-width: 700px) {
      .sec {
        padding: 48px 0;
      }

      .head {
        margin-bottom: 28px;
      }

      h1 {
        font-size: clamp(28px, 8vw, 36px);
      }

      h2 {
        font-size: clamp(22px, 6vw, 28px);
      }

      .lede,
      .hero .sub {
        font-size: 15.5px;
      }

      /* product rows tighter */
      .prow {
        grid-template-columns: 88px 1fr;
        gap: 14px;
        padding: 18px 0;
      }

      .prow .pim {
        min-height: 88px;
      }

      .prow .pim img {
        max-height: 96px;
      }

      .psku {
        font-size: 17px !important;
      }

      .plines {
        font-size: 14px !important;
        line-height: 1.55 !important;
      }

      /* category tree: not sticky, collapsible feel */
      .ptree {
        position: static !important;
        border: 1px solid var(--ln);
        border-radius: var(--rl);
        padding: 8px 14px 4px;
        margin-bottom: 8px;
        background: #fff;
      }

      .plist {
        padding: 24px 0 64px;
        gap: 18px;
      }

      .pbar h2 {
        font-size: 24px;
      }

      .pbar {
        gap: 12px;
        margin-bottom: 18px;
      }

      .sortw {
        width: 100%;
        justify-content: space-between;
      }

      select.srt {
        min-height: 44px;
        flex: 1;
        max-width: 200px;
      }

      /* cards */
      .pcell,
      .scard,
      .svc,
      .cstory,
      .vcell {
        border-radius: 14px;
      }

      .pcell {
        padding: 28px 20px 24px;
      }

      .pcell .im {
        height: 150px;
        margin-bottom: 18px;
      }

      /* product detail */
      .pd {
        padding: 28px 0 36px;
        gap: 22px;
      }

      .pdsku {
        font-size: clamp(24px, 7vw, 32px);
      }

      .tabs {
        top: var(--hdr);
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
      }

      .tabs::-webkit-scrollbar {
        display: none;
      }

      .tabs button {
        min-height: 48px;
        padding: 14px 16px;
        font-size: 14px;
      }

      /* support docs */
      .sup {
        padding: 24px 0 64px;
        gap: 18px;
      }

      .supq input {
        min-height: 48px;
        font-size: 16px;
      }

      /* 16px tránh zoom iOS */
      .dtabs button {
        min-height: 40px;
      }

      /* footer */
      footer {
        padding: 40px 0 0;
        font-size: 14px;
      }

      .fbrand .flogo {
        height: 56px;
      }

      .fbot {
        flex-direction: column;
        align-items: flex-start;
        gap: 14px;
        padding: 16px 0 calc(16px + env(safe-area-inset-bottom, 0));
      }

      .fsoc {
        margin-left: 0;
      }

      /* news */
      .nc h4,
      .ncard h4 {
        font-size: 16px;
      }

      /* forms / inputs global */
      input,
      select,
      textarea {
        font-size: 16px !important;
        /* prevent iOS auto-zoom */
      }
    }

    @media (max-width: 480px) {
      .wrap {
        padding-left: max(14px, env(safe-area-inset-left, 0));
        padding-right: max(14px, env(safe-area-inset-right, 0));
      }

      .hero {
        min-height: 0;
      }

      .hgrid {
        padding: 36px 0 44px;
        gap: 18px;
      }

      .hvis {
        min-height: 220px;
      }

      .hvis img {
        max-width: 100%;
      }

      .bpills {
        gap: 8px;
        margin-bottom: 28px;
        justify-content: flex-start;
        overflow-x: auto;
        flex-wrap: nowrap;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 4px;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      .bpills::-webkit-scrollbar {
        display: none;
      }

      .bpill {
        flex-shrink: 0;
        min-height: 40px;
      }

      .lwall {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
      }

      .mdrg-toggle {
        min-height: 52px;
        font-size: 15.5px;
        padding: 12px 16px;
      }

      .mdr-link {
        min-height: 52px;
        padding: 12px 16px;
        font-size: 15.5px;
      }

      .mdrg-body a {
        min-height: 46px;
        font-size: 15px;
      }
    }

    /* ---- reduced motion ---- */
    @media (prefers-reduced-motion: reduce) {

      .mdr,
      .mdr-backdrop,
      .mdrg-body,
      .mdrg-toggle .mdr-chev {
        transition: none !important;
      }
    }

    /* hide leftover prototype note if shown */
    .note[hidden] {
      display: none !important;
    }

    /* Skip link — ẩn hoàn toàn, chỉ hiện khi focus bàn phím */
    .skip-link {
      position: absolute !important;
      width: 1px !important;
      height: 1px !important;
      padding: 0 !important;
      margin: -1px !important;
      overflow: hidden !important;
      clip: rect(0, 0, 0, 0) !important;
      clip-path: inset(50%) !important;
      white-space: nowrap !important;
      border: 0 !important;
      background: transparent !important;
      color: transparent !important;
      box-shadow: none !important;
      transform: none !important;
      top: 0;
      left: 0;
      z-index: 10000;
      pointer-events: none;
    }

    .skip-link:focus,
    .skip-link:focus-visible {
      position: fixed !important;
      top: 12px !important;
      left: 12px !important;
      width: auto !important;
      height: auto !important;
      margin: 0 !important;
      padding: 12px 18px !important;
      overflow: visible !important;
      clip: auto !important;
      clip-path: none !important;
      white-space: nowrap !important;
      background: var(--o) !important;
      color: #fff !important;
      font-weight: 700;
      font-size: 14px;
      border-radius: 999px;
      text-decoration: none;
      box-shadow: 0 8px 24px rgba(245, 125, 34, .35);
      outline: 3px solid #fff;
      outline-offset: 3px;
      pointer-events: auto;
      transform: none !important;
    }

    :focus-visible {
      outline: 2.5px solid var(--o) !important;
      outline-offset: 3px;
      border-radius: 4px;
    }

    .mdrg-toggle:focus-visible,
    .mdr-link:focus-visible,
    .bgr:focus-visible {
      outline-offset: 2px;
    }

    nav.nv .top:focus-visible {
      color: #fff;
    }

    nav.nv .top:focus-visible:after {
      transform: scaleX(1);
    }

    @media (prefers-reduced-motion: reduce) {
      .skip-link {
        transition: none;
      }
    }

    #main-content:focus,
    #main-content:focus-visible {
      outline: none !important;
    }

    /* ============================================================
   MEGA MENU — bố cục nhiều cột, không cần kéo xuống
   ============================================================ */
    .mega {
      max-height: calc(100vh - var(--hdr)) !important;
      overflow: hidden !important;
    }

    .mega-in {
      min-height: 0 !important;
      max-height: calc(100vh - var(--hdr)) !important;
      align-items: stretch;
    }

    .mleft {
      overflow: hidden !important;
      /* không scroll cột trái */
      padding-top: 12px;
      padding-bottom: 12px;
    }

    .mcat {
      padding: 14px 28px !important;
      font-size: 15.5px !important;
    }

    .mright {
      padding: 28px 36px 24px 40px !important;
      overflow: hidden !important;
    }

    /* pane: không scroll nội bộ */
    .mpane.on {
      max-height: none !important;
      overflow: visible !important;
      padding-right: 0 !important;
    }

    /* tắt gradient "còn nội dung bên dưới" */
    .mright:after,
    .mright.more:after {
      display: none !important;
      opacity: 0 !important;
    }

    /* 3 cột ngang hàng — luôn cùng một hàng trong mega menu */
    .mega .mcols {
      display: grid !important;
      grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
      gap: 18px 28px !important;
      max-width: 100% !important;
      align-items: start !important;
    }

    .mega .mcols>div {
      min-width: 0;
      /* cho phép text wrap trong cột, không đẩy layout */
    }

    .mega .mcols h5 {
      font-size: 12.5px !important;
      padding-bottom: 10px !important;
      margin: 0 0 2px !important;
      letter-spacing: .2em !important;
      max-width: none !important;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .mega .mlinks a,
    .mega .mcols .mlinks a {
      padding: 7px 0 !important;
      font-size: 14px !important;
      line-height: 1.35 !important;
    }

    .mega .mlinks a:hover {
      padding-left: 6px !important;
    }

    .mega .mfoot {
      margin-top: 10px !important;
    }

    .mega .mfoot .lk {
      font-size: 13px !important;
    }

    /* Không gãy xuống 2 cột trong mega — giữ 3 cột đến khi ẩn hẳn (mobile drawer) */
    @media (max-width: 1200px) {
      .mega .mcols {
        grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
        gap: 14px 18px !important;
      }

      .mega .mcols h5 {
        font-size: 10.5px !important;
        letter-spacing: .12em !important;
      }

      .mega .mlinks a,
      .mega .mcols .mlinks a {
        font-size: 13px !important;
        padding: 6px 0 !important;
      }

      .mega .mright {
        padding: 22px 24px 20px 28px !important;
      }
    }

    /* Đồng bộ toàn site: Be Vietnam Pro */
    html,
    body,
    button,
    input,
    select,
    textarea,
    .btn,
    .b-o,
    .b-k,
    .b-g,
    .b-w,
    .dvbtn,
    nav,
    .top,
    .mcat,
    .mlinks,
    .mdrg-toggle,
    .mdr-link,
    h1,
    h2,
    h3,
    h4,
    h5,
    h6,
    .sku,
    .psku,
    .pdsku,
    .mono,
    table,
    .tabs button,
    .bpill,
    .ltab,
    .nrchip,
    footer,
    .fbrand,
    .skip-link {
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif !important;
    }

    .wfab {
      position: fixed;
      right: max(16px, env(safe-area-inset-right, 0px));
      bottom: max(18px, env(safe-area-inset-bottom, 0px));
      z-index: 980;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      font-family: "Be Vietnam Pro", -apple-system, "Segoe UI", Roboto, sans-serif;
    }

    .wfab-panel {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 12px;
      padding: 14px 10px;
      background: #fff;
      border-radius: 999px;
      box-shadow:
        0 0 0 1px rgba(245, 125, 34, .18),
        0 12px 32px rgba(17, 19, 24, .14);
      transform-origin: bottom center;
      transition: opacity .22s ease, transform .22s ease, max-height .22s ease, padding .22s ease;
      max-height: 420px;
      overflow: hidden;
    }

    .wfab.is-collapsed .wfab-panel {
      opacity: 0;
      transform: scale(.7) translateY(12px);
      max-height: 0;
      padding-top: 0;
      padding-bottom: 0;
      pointer-events: none;
      box-shadow: none;
      border: 0;
    }

    .wfab-btn {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      color: #fff;
      text-decoration: none;
      transition: transform .16s ease, box-shadow .16s ease;
      flex-shrink: 0;
    }

    .wfab-btn:hover {
      transform: translateY(-2px) scale(1.04);
    }

    .wfab-btn:focus-visible {
      outline: 2.5px solid var(--o, #F57D22);
      outline-offset: 3px;
    }

    .wfab-zalo {
      background: #fff;
      color: #4B4FED;
      border: 2.5px solid #4B4FED;
      box-shadow: 0 4px 14px rgba(75, 79, 237, .22);
    }

    .wfab-zalo-txt {
      font-size: 13px;
      font-weight: 800;
      letter-spacing: -.02em;
      line-height: 1;
    }

    .wfab-phone {
      background: #22A45A;
      box-shadow: 0 4px 14px rgba(34, 164, 90, .28);
    }

    .wfab-mail {
      background: #F5A623;
      box-shadow: 0 4px 14px rgba(245, 166, 35, .28);
    }

    .wfab-map {
      background: #3B5BDB;
      box-shadow: 0 4px 14px rgba(59, 91, 219, .28);
    }

    .wfab-toggle {
      width: 52px;
      height: 52px;
      border-radius: 50%;
      border: 0;
      cursor: pointer;
      background: #C62828;
      color: #fff;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      box-shadow: 0 8px 22px rgba(198, 40, 40, .35);
      transition: background .16s ease, transform .16s ease;
    }

    .wfab-toggle:hover {
      transform: scale(1.05);
    }

    .wfab-toggle:focus-visible {
      outline: 2.5px solid var(--o, #F57D22);
      outline-offset: 3px;
    }

    .wfab-toggle .wfab-chat {
      display: none;
    }

    .wfab.is-collapsed .wfab-toggle {
      background: var(--o, #F57D22);
      box-shadow: 0 8px 22px rgba(245, 125, 34, .35);
    }

    .wfab.is-collapsed .wfab-toggle .wfab-x {
      display: none;
    }

    .wfab.is-collapsed .wfab-toggle .wfab-chat {
      display: block;
    }

    /* Ẩn khi menu mobile mở để tránh chồng lớp */
    body.mdr-open .wfab {
      opacity: 0;
      pointer-events: none;
    }

    @media (max-width: 480px) {

      .wfab-btn,
      .wfab-toggle {
        width: 48px;
        height: 48px;
      }

      .wfab-panel {
        padding: 12px 8px;
        gap: 10px;
      }

      .wfab {
        right: max(12px, env(safe-area-inset-right, 0px));
        bottom: max(14px, env(safe-area-inset-bottom, 0px));
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .wfab-panel,
      .wfab-btn,
      .wfab-toggle {
        transition: none;
      }
    }

    /* Header sạch — không dải cam / không glow tràn lên trên */
    html {
      background: #0C0C0C;
      /* overscroll / bounce = đen, không lộ màu khác */
    }

    body {
      background: var(--w);
    }

    .hdr {
      background: #0C0C0C !important;
      border-top: 0 !important;
      border-bottom: 0 !important;
      box-shadow: none !important;
      /* Không dùng padding safe-area trên desktop để tránh “khúc” màu */
      padding-top: 0 !important;
    }

    .hdr .wrap {
      background: transparent;
    }

    /* Logo không tràn / không đổ bóng cam lên mép trên */
    .hdr .brand,
    .hdr .blogo {
      overflow: hidden;
      filter: none !important;
      box-shadow: none !important;
    }

    .hdr .blogo {
      display: block;
      max-height: calc(var(--hdr) - 8px);
      width: auto;
      object-fit: contain;
    }

    @media (max-width: 1025px) {

      /* Mobile notch: nền header đen phủ luôn safe-area */
      .hdr {
        padding-top: env(safe-area-inset-top, 0px) !important;
        background: #0C0C0C !important;
        background-clip: border-box;
      }
    }