:root{
    --navy: #111111;
    --navy-deep: #000000;
    --accent: #E8641C;
    --accent-2: #F6B93B;
    --accent-soft: #FDE9DD;
    --bg: #F5F5F5;
    --white: #FFFFFF;
    --ink: #000000;
    --muted: #000000;
    --line: #E5E5E5;
    --radius: 6px;
    --radius-lg: 14px;
    --radius-xl: 22px;
    --grad-accent: linear-gradient(135deg,#E8641C,#F6B93B);
    --shadow-sm: 0 2px 8px -2px rgba(0,0,0,.08);
    --shadow-md: 0 14px 30px -14px rgba(0,0,0,.25);
    --shadow-lg: 0 26px 60px -20px rgba(0,0,0,.35);
    --maxw: 1180px;
    font-size: 16px;
  }
  *{box-sizing:border-box; margin:0; padding:0;}
  html{scroll-behavior:smooth;}
  /* Anh mac dinh co the keo-tha (native browser drag), tao bong mo bam theo
     chuot khi nguoi dung nhan giu va keo tren anh san pham - trong giong nhu
     khu vuc do co scroll/keo rieng. Tat hanh vi nay tren toan site. */
  img{-webkit-user-drag:none; -webkit-touch-callout:none;}
  body{
    font-family: 'Inter', 'Be Vietnam Pro', 'Segoe UI', -apple-system, system-ui, sans-serif;
    color: var(--ink);
    background: var(--white);
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
  }
  body.modal-lock{overflow:hidden;}
  img{max-width:100%; display:block;}
  a{color:inherit; text-decoration:none;}
  button{font-family:inherit;}
  .wrap{max-width:var(--maxw); margin:0 auto; padding:0 28px;}
  h1,h2,h3{font-family:'Be Vietnam Pro','Inter',system-ui,sans-serif; font-weight:800; letter-spacing:-0.015em; color: var(--navy-deep);}


  .lang-pill{display:inline-flex; align-items:center; gap:6px; height:38px; border:1px solid rgba(255,255,255,.22); padding:0 11px; border-radius:20px; font-weight:700; font-size:12px; color:#fff; flex:none; transition:border-color .15s ease;}
  .lang-pill:hover{border-color:var(--accent);}
  .lang-pill svg{width:13px; height:13px; stroke:currentColor;}

  /* ---------- Header ----------
     Single compact dark bar (logo / nav / actions in one row), sized to
     match the reference layout: ~91px tall (22px vertical padding around
     a ~47px logo lockup), container width follows the site's own .wrap. */
  header.main{background:var(--navy-deep);}
  /* Divider cam duoi header: dam o giua, mo dan ve ca 2 dau. */
  header.main::after{content:""; position:absolute; left:0; right:0; bottom:0; height:2px; background:linear-gradient(90deg, rgba(232,100,28,0) 0%, var(--accent) 50%, rgba(232,100,28,0) 100%); pointer-events:none;}
  .header-nav-sticky{position:sticky; top:0; z-index:50; transition:box-shadow .2s ease, background .2s ease, transform .28s ease;}
  /* An header khi luot xuong tren man hinh nho (class do ui.js gan). */
  body.header-hidden .header-nav-sticky{transform:translateY(-100%); box-shadow:none;}
  body.header-hidden .catalog-filterbar{top:0;}
  .header-nav-sticky.scrolled{background:#000000; box-shadow:0 8px 24px -10px rgba(0,0,0,.5);}
  .header-bottom{display:flex; align-items:center; gap:40px; padding:22px 0;}

  .logo{display:flex; flex-direction:column; gap:4px; flex:none;}
  .logo .logo-name{font-weight:900; font-size:25px; color:#fff; letter-spacing:0.01em; line-height:1;}
  .logo .logo-tagline{display:flex; align-items:center; gap:8px; font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:#FFFFFF;}
  .logo .logo-tagline .badge-max{background:var(--accent); color:#fff; font-weight:800; font-size:10px; letter-spacing:0; text-transform:none; padding:2px 7px; border-radius:4px;}
  .logo.logo-img{display:block; line-height:0; text-decoration:none;}
  .logo.logo-img img{display:block; height:64px; width:auto; user-select:none;}

  nav.primary{display:flex; align-items:center; gap:34px; flex:none;}
  nav.primary > ul{display:flex; gap:28px; list-style:none;}
  nav.primary li{position:relative; font-size:15px; font-weight:600; color:#E9E9E9;}
  nav.primary > ul > li > a{padding:10px 0; display:inline-flex; align-items:center; gap:5px; position:relative;}
  nav.primary > ul > li > a::after{content:""; position:absolute; left:0; right:0; bottom:4px; height:2px; background:var(--accent); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;}
  nav.primary > ul > li:hover > a{color:#fff;}
  nav.primary > ul > li:hover > a::after{transform:scaleX(1);}
  nav.primary li .chev{width:9px; height:9px; stroke:currentColor; stroke-width:2; fill:none; transition:transform .15s ease;}
  nav.primary li:hover .chev{transform:rotate(180deg);}
  .submenu{position:absolute; top:100%; left:50%; transform:translate(-50%,0) scaleY(.94); transform-origin:top center; width:max-content; min-width:220px; background:#fff; border:1.5px solid rgba(0,0,0,.35); border-radius:12px; box-shadow:0 22px 46px -14px rgba(0,0,0,.34), 0 6px 14px -6px rgba(0,0,0,.14); list-style:none; padding:8px; opacity:0; visibility:hidden; transition:opacity .16s ease, transform .16s ease, visibility .16s ease; z-index:60;}
  nav.primary li:hover .submenu{opacity:1; visibility:visible; transform:translate(-50%,0) scaleY(1);}
  .submenu li{font-size:14px; font-weight:600;}
  .submenu li > a{display:block; padding:11px 16px; border-radius:8px; color:var(--navy-deep); white-space:nowrap; border-left:3px solid transparent; transition:background .15s ease, color .15s ease, border-color .15s ease;}
  .submenu li > a:hover{background:#FBE2E2; color:#D62828; border-left-color:#D62828;}
  .nav-contact-mobile, .nav-mobile-extra{display:none;}
  nav.primary > ul > li.nav-mobile-sep{border-top:1px solid var(--line); margin-top:6px; padding-top:6px;}
  nav.primary > ul > li.nav-mobile-extra > a{gap:10px;}
  nav.primary > ul > li.nav-mobile-extra svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.8; flex:none;}
  .header-actions{display:flex; align-items:center; gap:12px; margin-left:auto;}
  .header-contact-link{font-size:14.5px; font-weight:700; color:#fff; white-space:nowrap; transition:color .15s ease;}
  .header-contact-link:hover{color:var(--accent-2);}
  .menu-btn{display:none; width:38px; height:38px; border:1px solid rgba(255,255,255,.22); background:transparent; border-radius:var(--radius); cursor:pointer; align-items:center; justify-content:center; flex:none;}
  .menu-btn svg{width:20px; height:20px; stroke:#fff;}
  .icon-btn{width:38px; height:38px; border-radius:50%; border:1px solid rgba(255,255,255,.22); background:transparent; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:border-color .15s ease, background .15s ease;}
  .icon-btn:hover{border-color:var(--accent); background:rgba(232,100,28,.18);}
  .icon-btn svg{width:17px; height:17px; stroke:#fff; fill:none; stroke-width:1.8;}

  .account-widget{position:relative;}
  .account-trigger{display:flex; align-items:center; gap:8px; border:1px solid rgba(255,255,255,.22); border-radius:999px; padding:5px 12px 5px 5px; background:transparent; cursor:pointer; font:inherit;}
  .account-trigger:hover{border-color:var(--accent);}
  .account-avatar{width:28px; height:28px; border-radius:50%; background:var(--accent); color:#fff; display:flex; align-items:center; justify-content:center; font-size:11.5px; font-weight:700; flex:none;}
  .account-name{font-size:13px; font-weight:600; color:#fff; max-width:110px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
  .account-chev{width:9px; height:9px; stroke:#FFFFFF; fill:none; stroke-width:1.8; transition:transform .15s ease;}
  .account-widget.open .account-chev{transform:rotate(180deg);}
  .account-dropdown{position:absolute; top:calc(100% + 10px); right:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); min-width:210px; padding:8px; display:none; z-index:60;}
  .account-widget.open .account-dropdown{display:block;}
  .account-dd-item{display:flex; align-items:center; gap:10px; padding:9px 10px; border-radius:8px; font-size:13.5px; color:var(--ink); text-decoration:none; border:none; background:none; width:100%; text-align:left; cursor:pointer; font:inherit;}
  .account-dd-item:hover{background:var(--bg);}
  .account-dd-item svg{width:16px; height:16px; stroke:var(--navy); fill:none; stroke-width:1.8; flex:none;}
  .account-cart-badge{margin-left:auto; background:var(--accent); color:#fff; font-size:10.5px; font-weight:700; border-radius:10px; padding:1px 6px; display:none;}
  .account-dd-sep{height:1px; background:var(--line); margin:6px 4px;}

  .js-cart-toggle{position:relative;}
  .header-cart-badge{position:absolute; top:-4px; right:-4px; background:var(--accent); color:#fff; font-size:10px; font-weight:800; line-height:1; border-radius:10px; padding:3px 5px; display:none; border:2px solid var(--navy-deep);}
  /* Same icon-btn shape, but for placement on a light background (the
     products page's sticky filter bar) instead of the dark header. */
  .icon-btn-dark{border-color:var(--line); background:#fff; flex:none;}
  .icon-btn-dark:hover{border-color:var(--accent); background:var(--accent-soft);}
  .icon-btn-dark svg{stroke:var(--navy-deep);}
  .icon-btn-dark .header-cart-badge{border-color:#fff;}

  /* ---------- Quick-view cart drawer ---------- */
  .cart-drawer-backdrop{position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:199; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;}
  .cart-drawer-backdrop.open{opacity:1; visibility:visible;}
  .cart-drawer{position:fixed; top:0; right:0; bottom:0; width:33.333vw; min-width:340px; max-width:480px; background:#fff; z-index:200; display:flex; flex-direction:column; box-shadow:-24px 0 60px -20px rgba(0,0,0,.4); transform:translateX(100%); transition:transform .3s cubic-bezier(.2,.8,.3,1);}
  .cart-drawer.open{transform:translateX(0);}
  .cart-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:20px 22px; border-bottom:1px solid var(--line); flex:none;}
  .cart-drawer-head h3{font-size:18px;}
  .cart-drawer-close{width:34px; height:34px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer;}
  .cart-drawer-close svg{width:16px; height:16px; stroke:var(--ink); fill:none;}
  .cart-drawer-close:hover{border-color:var(--accent);}
  .cart-drawer-body{flex:1; overflow-y:auto; padding:18px 22px; display:flex; flex-direction:column;}
  .cart-drawer-list{display:flex; flex-direction:column; gap:12px;}
  .cart-drawer-row{display:flex; gap:12px; border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px;}
  .cdr-thumb{position:relative; overflow:hidden; width:44px; height:44px; border-radius:var(--radius); background:var(--bg); display:flex; align-items:center; justify-content:center; flex:none;}
  .cdr-thumb svg{width:22px; height:22px; stroke:var(--navy); fill:none; stroke-width:1.6;}
  .cdr-thumb-icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .cdr-thumb-img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover; z-index:1;}
  .cdr-info{flex:1; min-width:0;}
  .cdr-top{display:flex; align-items:flex-start; justify-content:space-between; gap:8px;}
  .cdr-name{font-size:13.5px; font-weight:700; color:var(--ink); overflow-wrap:anywhere;}
  .cdr-remove{flex:none; width:22px; height:22px; border:none; background:none; cursor:pointer; color:var(--danger); display:flex; align-items:center; justify-content:center;}
  .cdr-remove svg{width:14px; height:14px; stroke:currentColor;}
  .cdr-code{font-size:11.5px; color:var(--muted); margin-top:2px;}
  .cdr-bottom{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:8px;}
  .cdr-qty{display:flex; align-items:center; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden;}
  .cdr-qty button{width:24px; height:24px; border:none; background:var(--bg); cursor:pointer; font-size:14px; color:var(--ink);}
  .cdr-qty span{width:28px; text-align:center; font-size:12.5px; display:inline-block;}
  .cdr-total{font-size:13px; font-weight:800; color:var(--navy-deep);}
  .cart-drawer-summary{border-top:1px solid var(--line); margin-top:16px; padding-top:14px;}
  .cart-drawer-summary .row{display:flex; justify-content:space-between; align-items:baseline; font-size:13px; color:var(--muted); margin-bottom:8px;}
  .cart-drawer-summary .row span:last-child{font-variant-numeric:tabular-nums;}
  .cart-drawer-summary .row.total{font-size:16px; font-weight:800; color:var(--navy-deep); border-top:1px solid var(--line); padding-top:12px; margin-top:4px; margin-bottom:0;}
  .cart-drawer-checkout{display:block; text-align:center; margin-top:16px; text-decoration:none;}
  .cart-drawer-empty{margin:auto; text-align:center; color:var(--muted); padding:40px 10px;}
  .cart-drawer-empty svg{width:44px; height:44px; stroke:var(--line); fill:none; stroke-width:1.4; margin-bottom:14px;}
  .cart-drawer-empty .portal-primary-btn{margin-top:14px;}

  .cc-icon-btn.js-just-added{background:#3FA66A; border-color:#3FA66A;}
  .cc-icon-btn.js-just-added svg{stroke:#fff;}
  .cta-btn{background:var(--grad-accent); color:#fff; padding:11px 24px; border-radius:999px; font-weight:700; font-size:14.5px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; box-shadow:0 10px 22px -10px rgba(232,100,28,.6); transition:transform .15s ease, box-shadow .15s ease;}
  .cta-btn:hover{transform:translateY(-1px); box-shadow:0 14px 28px -10px rgba(232,100,28,.7);}
  .cta-outline{border:1.5px solid var(--navy); color:var(--navy); padding:10px 22px; border-radius:999px; font-weight:700; font-size:14.5px; transition:background .15s ease, color .15s ease;}
  .cta-outline:hover{background:var(--navy); color:#fff;}

  /* ---------- Hero ---------- */
  /* Overrides the generic section{padding:90px 0} rule further down
     the file — that 90px top+bottom was the real source of the gap
     above/below the hero photo (680px hero-slides sitting inside an
     860px section). Hero manages its own spacing via hero-slides'
     fixed height and .wrap's own padding, so it needs none here. */
  .hero{background:var(--navy-deep); color:#fff; position:relative; overflow:hidden; padding:0;}
  .hero::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 400px at 12% -10%, rgba(232,100,28,.28), transparent 60%), radial-gradient(500px 380px at 92% 110%, rgba(246,185,59,.18), transparent 60%); pointer-events:none;}
  .hero-slides{position:relative; height:680px;}
  .hero-slide{position:absolute; inset:0; display:flex; align-items:center; opacity:0; visibility:hidden; transition:opacity .25s ease, visibility .25s ease;}
  .hero-slide.active{opacity:1; visibility:visible; z-index:1;}
  .hero-slide .wrap{position:relative; z-index:1; width:100%; padding-top:64px; padding-bottom:76px;}
  .hero-copy{max-width:500px;}

  @keyframes heroTextIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes heroFrameIn{ from{ opacity:0; transform:translateY(14px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes heroSwatchIn{ from{ opacity:0; transform:scale(1.08); clip-path:inset(0 100% 0 0 round 14px); } to{ opacity:1; transform:scale(1); clip-path:inset(0 0 0 0 round 14px); } }

  .reveal{
    opacity:0; translate:0 36px; scale:.965; filter:blur(6px); will-change:opacity, translate, scale, filter;
    transition:
      opacity .8s cubic-bezier(.16,1,.3,1),
      translate .95s cubic-bezier(.22,1.12,.36,1),
      scale .95s cubic-bezier(.22,1.12,.36,1),
      filter .65s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(min(var(--i,0), 6) * 90ms);
  }
  .reveal.in-view{opacity:1; translate:0 0; scale:1; filter:blur(0);}

  .reveal-text{
    opacity:0; translate:0 20px; will-change:opacity, translate;
    transition: opacity .75s cubic-bezier(.16,1,.3,1), translate .75s cubic-bezier(.16,1,.3,1);
    transition-delay:calc(min(var(--i,0), 6) * 70ms);
  }
  .reveal-text.in-view{opacity:1; translate:0 0;}

  @media(prefers-reduced-motion:reduce){
    .reveal,.reveal-text{transition:none; opacity:1; translate:0 0; scale:1; filter:blur(0);}
  }
  .hero-copy > *{opacity:0;}
  .hero-slide.active .hero-product-name{animation:heroTextIn .6s cubic-bezier(.2,.8,.3,1) .02s forwards;}
  .hero-slide.active .eyebrow{animation:heroTextIn .6s cubic-bezier(.2,.8,.3,1) .08s forwards;}
  .hero-slide.active h1{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .16s forwards;}
  .hero-slide.active p{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .24s forwards;}
  .hero-slide.active .hero-ctas{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .32s forwards;}
  .hero-slide.active .hero-stats{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .4s forwards;}
  .hero-slide.active .hero-visual .frame{animation:heroFrameIn .6s cubic-bezier(.2,.8,.3,1) .2s both;}
  .hero-slide.active .hero-visual .product-swatch{animation:heroSwatchIn .6s cubic-bezier(.2,.8,.3,1) .42s both;}

  .hero-product-name{display:inline-flex; align-items:center; font-size:20px; font-weight:800; letter-spacing:0.03em; color:#fff; background:linear-gradient(135deg, rgba(232,100,28,.22), rgba(232,100,28,.06)); border:1.5px solid rgba(251,190,156,.55); padding:7px 16px; border-radius:8px; margin-bottom:18px; box-shadow:0 10px 24px -12px rgba(232,100,28,.45);}
  .eyebrow{display:inline-flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:0.08em; text-transform:uppercase; color:#FBBE9C; margin-bottom:20px;}
  .eyebrow::before{content:""; width:16px; height:2px; background:var(--accent);}
  .hero h1{font-size:47px; line-height:1.14; color:#fff; margin-bottom:20px;}
  .hero h1 em{font-style:normal; background:linear-gradient(135deg,#FBBE9C,#F6B93B); -webkit-background-clip:text; background-clip:text; color:transparent;}
  .hero p{font-size:16.5px; color:#FFFFFF; max-width:480px; margin-bottom:34px;}
  .hero-ctas{display:flex; gap:14px;}
  .hero-ctas .cta-outline{border-color:rgba(255,255,255,.4); color:#fff;}
  .hero-ctas .cta-outline:hover{background:#fff; color:var(--navy-deep);}
  .hero-stats{display:flex; gap:34px; margin-top:46px;}
  .hero-stats div strong{display:block; font-size:27px; color:#fff;}
  .hero-stats div span{font-size:12.5px; color:#FFFFFF;}
  .hero-slide.is-main .hero-visual{display:none;}
  .hero-slide.is-main .hero-copy{max-width:900px; margin:0 auto; display:flex; flex-direction:column; align-items:center; text-align:center;}
  /* Ten cong ty la tieu diem lon nhat; "doi tac..." + ten hang la dong phu */
  .hi-partner{font-size:13px; font-weight:600; letter-spacing:.32em; text-transform:uppercase; color:#fff; margin-bottom:26px;}
  .hero .hi-name{position:relative; font-size:104px; line-height:.95; font-weight:800; letter-spacing:-.035em; color:#fff; margin:0 0 30px; padding-bottom:26px;}
  .hero .hi-name::after{content:""; position:absolute; left:50%; bottom:0; width:56px; height:3px; border-radius:2px; background:var(--accent); transform:translateX(-50%);}
  .hi-brands{display:flex; align-items:center; justify-content:center; gap:18px; margin-bottom:26px; font-size:17px; font-weight:700; letter-spacing:.22em; color:var(--accent);}
  .hi-brands span{margin-right:-.22em;}
  /* Slide gioi thieu: nhan "Doi tac..." -> logo -> gach cam -> mo ta, can giua, khoang cach deu. */
  .hero .hi-name-logo{font-size:0; letter-spacing:0; line-height:0; margin:0 auto 30px; padding-bottom:30px; width:min(440px, 80%);}
  .hero .hi-name-logo img{display:block; width:100%; height:auto; user-select:none;}
  .hero .hi-name-logo + p{margin-top:0;}
  .hi-brands i{width:5px; height:5px; border-radius:50%; background:var(--accent); opacity:.7;}
  .hero-slide.active .hi-partner{animation:heroTextIn .6s cubic-bezier(.2,.8,.3,1) .04s forwards;}
  .hero-slide.active .hi-name{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .12s forwards;}
  .hero-slide.active .hi-brands{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .2s forwards;}
  .hero-slide.is-main p{font-size:17px; line-height:1.65; color:#fff; max-width:640px; margin:0 auto 34px;}
  .hero-slide.is-main .hero-ctas{justify-content:center;}
  .hero-slide.is-main .hero-stats{gap:0; margin-top:48px; padding-top:26px; border-top:1px solid rgba(255,255,255,.14);}
  .hero-slide.is-main .hero-stats > div{padding:0 38px; border-left:1px solid rgba(255,255,255,.14);}
  .hero-slide.is-main .hero-stats > div:first-child{border-left:0;}
  .hero-slide.is-main .hero-stats strong{font-size:32px;}
  .hero-slide.is-main .hero-stats span{font-size:13px;}

  .hero-slide:not(.is-main) .hero-copy{max-width:520px;}
  .hero .hp-model{font-size:56px; line-height:1.02; font-weight:800; letter-spacing:-.02em; color:#fff; margin:0 0 12px;}
  .hp-tagline{font-size:19px; font-weight:600; line-height:1.4; color:#fff; margin-bottom:14px;}
  .hero p.hp-desc{font-size:15px; line-height:1.65; color:rgba(255,255,255,.62); max-width:470px; margin-bottom:26px;}
  .hp-specs{display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); margin:0 0 30px; padding:16px 0; border-top:1px solid rgba(255,255,255,.14); border-bottom:1px solid rgba(255,255,255,.14);}
  .hp-specs > div{padding:0 18px; border-left:1px solid rgba(255,255,255,.14); min-width:0;}
  .hp-specs > div:first-child{border-left:0;}
  .hp-specs dd{order:1; margin:0; font-size:24px; font-weight:800; line-height:1.15; color:#fff; letter-spacing:-.01em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
  .hp-specs dd small{font-size:13px; font-weight:600; margin-left:4px; color:rgba(255,255,255,.62); letter-spacing:0;}
  .hp-specs dt{order:2; margin-top:6px; font-size:12px; line-height:1.35; color:rgba(255,255,255,.6); white-space:nowrap;}
  /* 3 cot bang nhau, lap day ca dai; noi dung moi cot deu can giua */
  .hp-specs > div{padding:0 16px; align-items:center; text-align:center;}
  .hp-specs > div{display:flex; flex-direction:column;}
  .hero-slide.active .hp-model{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .1s forwards;}
  .hero-slide.active .hp-tagline{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .16s forwards;}
  .hero-slide.active .hp-specs{animation:heroTextIn .65s cubic-bezier(.2,.8,.3,1) .28s forwards;}
  .hero-slide.active .hp-specs + .hero-ctas{animation-delay:.36s;}
  /* Bong do "mat san" duoi may: may dung tren nen thay vi troi lo lung */
  .hero-slide:not(.is-main) .hero-visual .frame::after{content:""; position:absolute; left:18%; right:0; bottom:3%; height:44px; border-radius:50%; background:radial-gradient(closest-side, rgba(0,0,0,.75), rgba(0,0,0,0)); pointer-events:none; z-index:-1;}

  .hero-visual{position:absolute; inset:0; z-index:0; order:2; --split:calc(50vw - 62px);}
  .hero-slide .wrap{order:1;}
  @media (min-width:981px) and (max-width:1235px){
    .hero-visual{--split:528px;}
  }

  .hero-visual-bg{position:absolute; top:0; right:0; bottom:0; left:var(--split); overflow:hidden; z-index:0; border-radius:0 0 0 72px;}
  .hero-visual-bg::before{content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg, rgba(0,0,0,.5) 0%, rgba(0,0,0,.15) 8%, rgba(0,0,0,0) 20%); pointer-events:none;}
  .hero-visual-bg::after{content:""; position:absolute; inset:0; z-index:2; pointer-events:none; background:radial-gradient(120% 130% at 62% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,.45) 100%), linear-gradient(180deg, rgba(0,0,0,.35) 0%, rgba(0,0,0,0) 16%, rgba(0,0,0,0) 82%, rgba(0,0,0,.4) 100%);}
  .hero-visual-bg .bg-tile{position:absolute; background-size:cover; background-position:center; filter:url(#sharpenTiles) saturate(1.3) contrast(1.12) brightness(1.05);}
  .hero-visual-bg .bg-tile:nth-child(1){top:-2%; left:-2%; width:58%; height:58%;}
  .hero-visual-bg .bg-tile:nth-child(2){top:-2%; right:-2%; width:56%; height:56%;}
  .hero-visual-bg .bg-tile:nth-child(3){bottom:-2%; left:-2%; width:46%; height:46%;}
  .hero-visual-bg .bg-tile:nth-child(4){bottom:-2%; right:-2%; width:46%; height:46%;}
  .hero-slide.is-main .hero-visual-bg .bg-tile:nth-child(1){top:0; left:0; width:50%; height:50%;}
  .hero-slide.is-main .hero-visual-bg .bg-tile:nth-child(2){top:0; right:0; width:50%; height:50%;}
  .hero-slide.is-main .hero-visual-bg .bg-tile:nth-child(3){bottom:0; left:0; width:50%; height:50%;}
  .hero-slide.is-main .hero-visual-bg .bg-tile:nth-child(4){bottom:0; right:0; width:50%; height:50%;}
  .hero-visual .frame{position:absolute; z-index:1; top:1%; right:2%; bottom:1%; left:calc(var(--split) + 40px);}
  .hero-visual .product-swatch{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; overflow:hidden;}
  .hero-visual .product-swatch svg{width:52%; opacity:.92;}
  .hero-visual .product-swatch:has(.product-photo) svg{opacity:0;}
  .hero-visual .product-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; filter:drop-shadow(0 30px 50px rgba(0,0,0,.5));}
  .hero-visual-single .hero-single-img{position:absolute; inset:0; background-size:cover; background-position:center;}
  .hero-visual .frame{top:0; bottom:0; right:calc(max(0px, (100% - var(--maxw)) / 2) + 28px); left:calc(var(--split) + 8px);}
  .hero-visual .product-photo{object-position:100% 50%;}
  .hero-visual .product-photo.is-fitted{inset:auto; max-width:none; object-fit:fill; transform:none;}
  .hero-visual .frame::before{content:""; position:absolute; inset:8% 6%; border-radius:50%; background:radial-gradient(closest-side, rgba(255,255,255,.16), rgba(232,100,28,.08) 55%, transparent 100%); pointer-events:none;}
  .hero-visual .product-photo{transform:scale(1.04); transform-origin:50% 60%;}
  .cut-diagonal{position:absolute; right:6%; top:5%; width:170px; height:170px; border:2px dashed rgba(232,100,28,.35); border-radius:50%; z-index:1; pointer-events:none;}

  .hero-arrow{position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:44px; height:44px; background:rgba(255,255,255,.12); backdrop-filter:blur(6px); border:1px solid rgba(255,255,255,.3); border-radius:50%; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:0 8px 20px -8px rgba(0,0,0,.5); transition:background .15s ease, border-color .15s ease, transform .15s ease;}
  .hero-arrow:hover{background:#fff; border-color:#fff; transform:translateY(-50%) scale(1.06);}
  .hero-arrow:hover svg{stroke:var(--navy-deep);}
  .hero-arrow.prev{left:0;}
  .hero-arrow.next{right:0;}
  .hero-arrow svg{width:20px; height:20px; stroke:#fff; transition:stroke .15s ease;}

  .hero-dots{position:absolute; left:50%; bottom:26px; transform:translateX(-50%); z-index:2; display:flex; align-items:center; gap:9px;}
  .hero-dots button{width:11px; height:11px; border-radius:50%; border:none; background:rgba(255,255,255,.35); cursor:pointer; padding:0; transition:background .15s ease, width .2s ease;}
  .hero-dots button.active{width:26px; border-radius:6px; background:var(--accent);}

  @media(max-width:820px){
    .hero-arrow{display:none;}
  }

  /* ---------- Cut-line divider ---------- */
  .cutline{height:1px; background-image:repeating-linear-gradient(90deg, var(--line) 0 10px, transparent 10px 18px); position:relative;}

  /* ---------- Trust strip ---------- */
  .trust{padding:34px 0;}
  .trust .wrap{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:22px;}
  .trust .label{font-size:12.5px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--muted);}
  .trust .brands{display:flex; gap:38px; flex-wrap:wrap;}

  /* ---------- Auto-scrolling image showcase (between Trust and Featured) ---------- */
  .showcase-marquee{overflow-x:hidden; overflow-y:visible; padding:18px 0; background:var(--white); -webkit-mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image:linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);}
  .showcase-track{display:flex; align-items:center; width:max-content; animation:showcaseScroll 42s linear infinite;}
  .showcase-item{flex:none; width:260px; height:260px; padding:10px;}
  .showcase-item img{width:100%; height:100%; object-fit:cover; border-radius:var(--radius-lg); display:block; transition:transform .3s cubic-bezier(.2,.8,.3,1); will-change:transform;}
  .showcase-item:hover img{transform:scale(1.12); box-shadow:var(--shadow-md);}
  @keyframes showcaseScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}}
  @media(max-width:640px){.showcase-item{width:160px; height:160px; padding:6px;}}
  @media (prefers-reduced-motion: reduce){.showcase-track{animation:none;}}
  .trust .brands span{font-weight:800; font-size:17px; color:var(--ink); letter-spacing:.03em; cursor:default; transition:color .15s ease;}
  .trust .brands span:hover{color:var(--accent);}

  /* ---------- Section shell ---------- */
  section{padding:90px 0;}
  section.tinted{background:var(--bg);}
  .section-head{display:flex; flex-direction:column; align-items:center; text-align:center; margin-bottom:46px; gap:12px;}
  .section-head .kicker{font-size:15.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:2px; display:block;}
  .section-head h2{font-size:26px;}
  .section-head p{color:var(--muted); max-width:460px; margin:0 auto; font-size:15px;}
  .see-all{font-weight:700; font-size:14.5px; color:var(--navy); border-bottom:2px solid var(--accent); padding-bottom:2px; white-space:nowrap;}
  .section-see-all{text-align:center; margin-top:40px;}

  /* ---------- Product grid ---------- */
  .grid{display:grid; grid-template-columns:repeat(4,1fr); gap:24px;}

  /* ---------- Featured products (Lighthouse-style, big product tiles on white) ---------- */
  .featured-dark{background:#fff;}
  .home-products{display:grid; grid-template-columns:repeat(3,1fr); gap:56px 40px;}
  @media(max-width:1100px){.grid.home-products{grid-template-columns:repeat(2,1fr);}}
  @media(max-width:640px){.grid.home-products{grid-template-columns:1fr;}}
  .fp-card{display:flex; flex-direction:column; align-items:center; text-align:center;}
  .fp-name{font-size:22px; font-weight:800; color:var(--navy-deep); margin-bottom:20px;}
  .fp-media{position:relative; display:block; width:100%; aspect-ratio:1/1; border-radius:16px; overflow:hidden; background:var(--navy-deep); box-shadow:var(--shadow-md);}
  .fp-media-bg{position:absolute; inset:0; z-index:0;}
  .fp-media-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,.15) 0%, rgba(0,0,0,.6) 100%); pointer-events:none;}
  /* 4 anh nen: lam mo + toi di (van nhan ra noi dung) de mat nguoi xem
     don vao may o giua. scale nhe de vien mo khong lo khe giua cac o. */
  .fp-media-bg .bg-tile{position:absolute; background-size:cover; background-position:center; filter:blur(1.6px) brightness(.66) saturate(1.05); transform:scale(1.03);}
  .fp-media-bg .bg-tile:nth-child(1){top:-4%; left:-4%; width:56%; height:56%;}
  .fp-media-bg .bg-tile:nth-child(2){top:-4%; right:-4%; width:54%; height:54%;}
  .fp-media-bg .bg-tile:nth-child(3){bottom:-4%; left:-4%; width:44%; height:44%;}
  .fp-media-bg .bg-tile:nth-child(4){bottom:-4%; right:-4%; width:44%; height:44%;}
  .fp-thumb{position:absolute; inset:14%; z-index:1; display:flex; align-items:center; justify-content:center;}
  .fp-thumb svg{width:60%; opacity:.6;}
  .fp-thumb svg *{stroke:#fff;}
  /* Hinh SVG giu cho chi hien khi KHONG co anh that (ccPhotoFallback xoa
     .fp-photo khi het duoi anh) - truoc day no lo vien xam sau anh PNG/WebP nen trong. */
  .fp-media:has(.fp-photo) .fp-thumb{display:none;}
  .fp-photo{position:absolute; inset:14% 10% 6%; z-index:1; width:80%; height:80%; object-fit:contain; filter:drop-shadow(0 18px 30px rgba(0,0,0,.6));}
  /* Anh LM-550A3 dang ngang, nhieu khoang trong phia duoi -> ha thap rieng. */
  .fp-media[data-product-sku="LM-550A3"] .fp-photo{top:24%;}
  .fp-dpi{position:absolute; z-index:2; right:18px; bottom:14px; font-size:34px; font-weight:900; color:#fff; text-shadow:0 2px 10px rgba(0,0,0,.55); letter-spacing:.01em;}
  .fp-desc{font-size:15px; line-height:1.6; color:var(--muted); margin:20px 0 26px; max-width:340px; overflow:hidden; display:-webkit-box; line-clamp:2; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
  .fp-btn{display:inline-block; background:var(--grad-accent); color:#fff; font-weight:700; font-size:14.5px; padding:13px 32px; border-radius:999px; transition:transform .15s ease, box-shadow .15s ease;}
  .fp-btn:hover{transform:translateY(-2px); box-shadow:0 14px 26px -12px rgba(232,100,28,.6);}
  .fp-media.has-video{cursor:pointer;}
  .fp-media.has-video::after{content:""; position:absolute; inset:0; background:rgba(0,0,0,.15); opacity:0; transition:opacity .2s ease;}
  .fp-media.has-video:hover::after{opacity:1;}
  .fp-play{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); z-index:3; width:72px; height:50px; border-radius:12px; background:#FF0000; display:flex; align-items:center; justify-content:center; box-shadow:0 10px 26px -6px rgba(0,0,0,.55); transition:transform .2s ease;}
  .fp-media.has-video:hover .fp-play{transform:translate(-50%,-50%) scale(1.08);}
  .fp-play svg{width:26px; height:26px; fill:#fff;}

  /* ---------- Product video modal (YouTube embed) ---------- */
  .video-modal-backdrop{position:fixed; inset:0; background:var(--navy-deep); z-index:300; display:flex; align-items:center; justify-content:center; padding:32px; opacity:0; visibility:hidden; transition:opacity .2s ease, visibility .2s ease;}
  .video-modal-backdrop.open{opacity:1; visibility:visible;}
  .video-modal-bg{position:absolute; inset:0; overflow:hidden;}
  .video-modal-bg::after{content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 50% 45%, rgba(0,0,0,.55) 0%, rgba(0,0,0,.88) 100%); pointer-events:none;}
  .video-modal-bg .bg-tile{position:absolute; background-size:cover; background-position:center; filter:blur(10px) brightness(.65) saturate(1.15);}
  .video-modal-bg .bg-tile:nth-child(1){top:-4%; left:-4%; width:56%; height:56%;}
  .video-modal-bg .bg-tile:nth-child(2){top:-4%; right:-4%; width:54%; height:54%;}
  .video-modal-bg .bg-tile:nth-child(3){bottom:-4%; left:-4%; width:44%; height:44%;}
  .video-modal-bg .bg-tile:nth-child(4){bottom:-4%; right:-4%; width:44%; height:44%;}
  .video-modal{position:relative; width:100%; max-width:900px; aspect-ratio:16/9; background:#000; border-radius:12px; overflow:hidden; box-shadow:0 40px 100px -20px rgba(0,0,0,.6); transform:scale(.96); transition:transform .2s ease;}
  .video-modal-backdrop.open .video-modal{transform:scale(1);}
  .video-modal iframe{position:absolute; inset:0; width:100%; height:100%; border:0;}
  .video-modal-close{position:absolute; z-index:1; top:24px; right:24px; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.3); background:rgba(255,255,255,.1); display:flex; align-items:center; justify-content:center; cursor:pointer; transition:background .15s ease;}
  .video-modal-close svg{width:18px; height:18px; stroke:#fff; fill:none; stroke-width:2;}
  .video-modal-close:hover{background:rgba(255,255,255,.22);}
  @media(max-width:640px){ .video-modal-close{top:14px; right:14px;} }

  /* ---------- Benefits ---------- */
  .benefits{display:grid; grid-template-columns:repeat(3,1fr); gap:28px;}
  .benefit{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; transition:box-shadow .2s ease, transform .2s ease;}
  .benefit:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .benefit .icon{width:48px; height:48px; border-radius:12px; background:var(--grad-accent); display:flex; align-items:center; justify-content:center; margin-bottom:18px; box-shadow:0 10px 20px -10px rgba(232,100,28,.6);}
  .benefit .icon svg{width:22px; height:22px; stroke:#fff;}
  .benefit h3{font-size:17.5px; margin-bottom:8px;}
  .benefit p{font-size:14px; color:var(--muted);}

  /* ---------- News ---------- */
  .news-grid{display:grid; grid-template-columns:1.15fr .85fr .85fr; gap:24px;}
  .news-card{border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; background:#fff; transition:box-shadow .2s ease, transform .2s ease;}
  .news-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .news-card .thumb{aspect-ratio:16/10; background:linear-gradient(160deg,#F0F0F0,#E8E8E8); display:flex; align-items:center; justify-content:center;}
  .news-card .thumb svg{width:34%; opacity:.5;}
  .news-card.lead .thumb{aspect-ratio:16/9;}
  .news-card .body{padding:18px 20px 22px;}
  .news-card .date{font-size:12px; color:var(--muted); font-weight:600; margin-bottom:6px;}
  .news-card h3{font-size:15.5px; line-height:1.35;}
  .news-card.lead h3{font-size:20px;}
  .news-card p{font-size:13.5px; color:var(--muted); margin-top:8px;}
  .news-card .tag{display:inline-block; background:var(--accent-soft); color:var(--accent); font-size:10.5px; font-weight:800; padding:4px 10px; border-radius:20px; letter-spacing:.02em; margin-bottom:8px;}
  .news-card .meta{display:flex; justify-content:space-between; align-items:center; gap:10px; margin-top:14px; padding-top:12px; border-top:1px solid var(--line); font-size:12.5px; color:var(--muted);}

  /* ---------- News page: filter bar + featured article ---------- */
  .news-filter-bar{display:flex; gap:10px; flex-wrap:wrap; margin-bottom:32px;}
  .news-filter-pill{padding:9px 20px; border-radius:999px; border:1.5px solid var(--line); background:#fff; font:inherit; font-size:13.5px; font-weight:700; color:var(--navy-deep); cursor:pointer; transition:background .15s ease, color .15s ease, border-color .15s ease;}
  .news-filter-pill:hover{border-color:var(--accent);}
  .news-filter-pill.active{background:var(--navy-deep); border-color:var(--navy-deep); color:#fff;}
  .news-featured{display:grid; grid-template-columns:1.05fr .95fr; gap:40px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); overflow:hidden; margin-bottom:44px;}
  .news-featured .thumb{aspect-ratio:4/3; background:linear-gradient(160deg,#F0F0F0,#E8E8E8); display:flex; align-items:center; justify-content:center;}
  .news-featured .thumb svg{width:32%; opacity:.5;}
  .news-featured .body{padding:8px 40px 8px 0;}
  .news-featured .tag{display:inline-block; background:var(--accent-soft); color:var(--accent); font-size:11.5px; font-weight:800; padding:5px 12px; border-radius:20px; letter-spacing:.02em; margin-bottom:16px;}
  .news-featured h2{font-size:28px; line-height:1.25; margin-bottom:12px;}
  .news-featured .body p{font-size:15px; color:var(--muted); margin-bottom:16px;}
  .news-featured .meta{display:flex; gap:10px; font-size:13px; color:var(--muted); margin-bottom:18px;}

  /* Anh bia tin tuc (the tin o trang chu / trang Tin tuc) */
  a.news-card{display:block; color:inherit; text-decoration:none;}
  .news-card .thumb, .news-featured .thumb{overflow:hidden; position:relative;}
  .news-featured .thumb{aspect-ratio:16/9; align-self:stretch; height:100%;}
  .thumb img.thumb-bg, .na-related-thumb img.thumb-bg{position:absolute; inset:-8%; width:116%; height:116%; object-fit:cover; filter:blur(18px) saturate(1.1); opacity:.55;}
  .thumb img.thumb-fg, .na-related-thumb img.thumb-fg{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition:transform .5s cubic-bezier(.2,.8,.3,1);}
  .news-card:hover .thumb img.thumb-fg, .news-featured:hover .thumb img.thumb-fg{transform:scale(1.03);}
  .news-card h3 a, .news-featured h2 a{color:inherit; text-decoration:none;}
  .news-card h3 a:hover, .news-featured h2 a:hover{color:var(--accent);}

  /* ---------- Trang doc bai tin tuc ---------- */
  .news-article-hero h1{font-size:34px; line-height:1.25; max-width:900px;}
  .news-article-hero .na-meta{font-size:14px; color:#FFFFFF; margin-top:14px;}
  .news-article-layout{display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:48px; padding-top:44px; align-items:start;}
  .news-article{background:#fff; border:1px solid var(--line); border-radius:var(--radius-xl); padding:36px 44px 32px; min-width:0;}
  .na-cover{margin:0 0 28px; border-radius:var(--radius-lg); overflow:hidden; background:#F0F0F0;}
  .na-cover img{display:block; width:100%; max-height:520px; object-fit:contain;}
  .na-lang-note{font-size:13px; color:var(--muted); background:var(--bg); border-radius:8px; padding:10px 14px;}
  .na-body{font-size:16px; line-height:1.75; color:var(--ink); overflow-wrap:anywhere;}
  .na-body > * + *{margin-top:16px;}
  .na-body h3{font-size:20px; line-height:1.35; color:var(--navy-deep); margin-top:30px;}
  .na-body h4{font-size:17px; color:var(--navy-deep); margin-top:24px;}
  .na-body ul, .na-body ol{padding-left:22px;}
  .na-body li + li{margin-top:8px;}
  .na-body ul li::marker{color:var(--accent);}
  .na-body img{display:block; max-width:100%; height:auto; margin:22px auto; border-radius:10px;}
  .na-body p img{margin:6px auto;}
  .na-body a{color:var(--accent); font-weight:600; text-decoration:underline; text-underline-offset:3px;}
  .na-body table{width:100%; border-collapse:collapse; font-size:14.5px; display:block; overflow-x:auto;}
  .na-body td, .na-body th{border:1px solid var(--line); padding:9px 12px; vertical-align:top; text-align:left;}
  .na-body tr:nth-child(odd) td{background:#F8F8F8;}
  .na-body td:first-child{font-weight:700; color:var(--navy-deep); white-space:nowrap;}
  .na-body iframe{display:block; width:100%; aspect-ratio:16/9; border:0; border-radius:10px;}
  .na-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:36px; padding-top:20px; border-top:1px solid var(--line); font-size:14px;}
  .na-back{font-weight:700; color:var(--navy-deep);}
  .na-back:hover{color:var(--accent);}
  .na-source{color:var(--muted);}
  .na-source:hover{color:var(--accent);}
  .na-related{position:sticky; top:96px;}
  .na-related-title{font-size:18px; margin-bottom:14px;}
  .na-related-list{display:grid; gap:12px;}
  .na-related-item{display:grid; grid-template-columns:96px 1fr; gap:12px; align-items:center; padding:10px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); color:inherit; text-decoration:none; transition:box-shadow .2s ease, transform .2s ease;}
  .na-related-item:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}
  .na-related-thumb{position:relative; aspect-ratio:4/3; border-radius:8px; overflow:hidden; background:linear-gradient(160deg,#F0F0F0,#E8E8E8); display:flex; align-items:center; justify-content:center;}
  .na-related-thumb img{width:100%; height:100%; object-fit:cover;}
  .na-related-thumb svg{width:45%; opacity:.5;}
  .na-related-text{display:grid; gap:4px; min-width:0;}
  .na-related-text .date{font-size:12px; color:var(--muted); font-weight:600;}
  .na-related-text strong{font-size:13.5px; line-height:1.4; color:var(--navy-deep); display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden;}
  .na-related-item:hover strong{color:var(--accent);}
  @media(max-width:980px){
    .news-article-layout{grid-template-columns:1fr;}
    .na-related{position:static;}
  }
  @media(max-width:640px){
    .news-article-hero h1{font-size:26px;}
    .news-article{padding:22px 18px;}
    .na-body{font-size:15.5px;}
  }

  /* ---------- Internal page views ---------- */
  .page-view{display:none; min-height:520px; background:var(--bg); padding:0 0 90px;}
  .page-view.active{display:block;}
  .page-hero{background:linear-gradient(155deg,#000000 0%,#111111 58%,#000000 100%); color:#fff; padding:68px 0 58px; position:relative; overflow:hidden; border-bottom:1px solid rgba(232,100,28,.35);}
  .page-hero::before{content:""; position:absolute; inset:0;
    background:
      radial-gradient(620px 360px at 96% -30%, rgba(232,100,28,.28), transparent 60%),
      radial-gradient(420px 260px at -5% 120%, rgba(255,255,255,.05), transparent 60%),
      radial-gradient(rgba(255,255,255,.16) 1.4px, transparent 1.4px);
    background-size:auto, auto, 22px 22px;
    background-position:0 0, 0 0, 0 0;
    -webkit-mask-image:linear-gradient(115deg, transparent 0%, transparent 34%, #000 76%);
    mask-image:linear-gradient(115deg, transparent 0%, transparent 34%, #000 76%);
    pointer-events:none;
    animation:pageHeroDotsDrift 14s linear infinite;}
  @keyframes pageHeroDotsDrift{ from{ background-position:0 0, 0 0, 0 0; } to{ background-position:0 0, 0 0, 220px 220px; } }
  .page-hero .wrap{position:relative;}
  .page-hero .eyebrow{display:inline-flex; align-items:center; gap:8px; padding:6px 14px 6px 10px; border:1px solid rgba(255,255,255,.16); border-radius:999px; background:rgba(255,255,255,.04); opacity:0; animation:pageHeroIn .75s cubic-bezier(.2,.8,.3,1) .05s forwards;}
  .page-hero .eyebrow::before{width:12px;}
  .page-hero h1{color:#fff; font-size:40px; margin-bottom:20px; letter-spacing:-.01em; position:relative; opacity:0; animation:pageHeroIn .75s cubic-bezier(.2,.8,.3,1) .16s forwards;}
  .page-hero h1::after{content:""; position:absolute; left:2px; bottom:-11px; width:46px; height:3px; border-radius:2px; background:var(--accent); transform-origin:left; transform:scaleX(0); animation:pageHeroLine .5s cubic-bezier(.2,.8,.3,1) .55s forwards;}
  .page-hero p{color:#FFFFFF; max-width:620px; font-size:15.5px; margin-top:6px; opacity:0; animation:pageHeroIn .75s cubic-bezier(.2,.8,.3,1) .27s forwards;}
  @keyframes pageHeroIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:translateY(0); } }
  @keyframes pageHeroLine{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
  .catalog-filterbar{position:sticky; top:var(--header-h, 91px); z-index:30; transition:top .28s ease; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 10px 24px -18px rgba(0,0,0,.35);}
  .catalog-filterbar-row{display:flex; align-items:center; gap:14px; padding:14px clamp(20px,4vw,56px); overflow-x:auto; scrollbar-width:thin;}
  .cat-tree-brands{display:flex; gap:8px; overflow-x:auto; scrollbar-width:thin; padding-left:14px; margin-left:2px; border-left:1px solid var(--line);}
  .cat-tree-item{flex:none; white-space:nowrap; border:1px solid var(--line); background:#fff; cursor:pointer; font:inherit; padding:9px 16px; border-radius:999px; font-size:13.5px; font-weight:600; color:var(--ink); transition:background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease;}
  .cat-tree-item:hover{border-color:var(--accent); background:var(--accent-soft); color:var(--accent);}
  .cat-tree-item.active{background:var(--navy-deep); border-color:var(--navy-deep); color:#fff; box-shadow:0 6px 16px -8px rgba(0,0,0,.55);}
  .cat-tree-item.active:hover{background:var(--navy-deep); color:#fff;}
  .cat-tree-all{flex:none; display:inline-flex; align-items:center; gap:7px; font-weight:700;}
  .cat-tree-all svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:2;}
  .catalog-filterbar-row .catalog-search{margin-left:auto; flex:none;}
  .catalog-filterbar-actions{display:flex; align-items:center; gap:12px; flex:none; margin-left:auto; padding-left:14px; border-left:1px solid var(--line);}
  .catalog-filterbar-actions .catalog-search{margin-left:0;}
  .cat-tree-subrow{display:flex; gap:8px; padding:0 clamp(20px,4vw,56px) 12px; overflow-x:auto; scrollbar-width:thin;}
  /* Nut thu gon thanh loc - chi dung tren man hinh nho (<=980px). */
  .catalog-filter-toggle{display:none; width:100%; align-items:center; gap:8px; padding:10px 16px; border:0; border-bottom:1px solid rgba(255,255,255,.08); background:transparent; color:#fff; font:inherit; font-size:13.5px; font-weight:700; cursor:pointer; text-align:left;}
  .catalog-filter-toggle svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; flex:none;}
  .catalog-filter-toggle .cft-chev{width:11px; height:11px; margin-left:auto; transition:transform .2s ease;}
  .catalog-filter-toggle .cft-show, .catalog-filter-toggle .cft-active{display:none;}
  .catalog-filter-toggle .cft-active{color:var(--accent); font-weight:600; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
  .catalog-filterbar.collapsed .catalog-filterbar-row, .catalog-filterbar.collapsed .cat-tree-subrow{display:none;}
  .catalog-filterbar.collapsed .catalog-filter-toggle{border-bottom:0; padding:11px 16px;}
  @media(max-width:980px), (max-height:500px){
    /* Nut da nam o dau thanh -> hang loc ben duoi bot le tren. */
    .catalog-filter-toggle + .catalog-filterbar-row{padding-top:10px;}
  }
  .catalog-filterbar.collapsed .cft-hide{display:none;}
  .catalog-filterbar.collapsed .cft-show{display:inline;}
  .catalog-filterbar.collapsed .cft-active:not(:empty){display:inline;}
  .catalog-filterbar.collapsed .cft-chev{transform:rotate(180deg);}
  @media(max-width:980px), (max-height:500px){
    .catalog-filter-toggle{display:flex;}
  }
  .cat-tree-sub{padding:6px 14px; font-size:12.5px; background:var(--bg); border-color:transparent;}
  .cat-tree-sub.active{background:var(--accent-soft); border-color:var(--accent-soft); color:var(--accent); box-shadow:none;}

  .catalog-full{padding:24px clamp(20px,4vw,56px) 0;}
  .catalog-full .grid{grid-template-columns:repeat(4,1fr); gap:28px 20px;}
  @media(max-width:1100px){.catalog-full .grid{grid-template-columns:repeat(3,1fr);}}
  @media(max-width:760px){.catalog-full .grid{grid-template-columns:repeat(2,1fr); gap:22px 14px;}}
  @media(max-width:480px){.catalog-full .grid{grid-template-columns:1fr;}}
  .catalog-toolbar{display:flex; justify-content:flex-end; align-items:center; margin-bottom:14px;}
  .result-count{color:var(--muted); font-size:13.5px; font-weight:600;}
  .catalog-search{position:relative;}
  .catalog-search input{width:290px; max-width:42vw; border:1px solid var(--line); background:var(--bg); padding:9px 14px 9px 36px; border-radius:999px; font:inherit; font-size:13px; color:var(--ink); text-overflow:ellipsis; transition:background .15s ease, border-color .15s ease, box-shadow .15s ease;}
  .catalog-search input:focus{outline:none; background:#fff; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .catalog-search svg{position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; stroke:var(--muted); fill:none; stroke-width:2;}
  .active-filter{display:flex; align-items:center; gap:10px; background:var(--accent-soft); color:var(--accent); font-size:13.5px; font-weight:700; padding:10px 16px; border-radius:10px; margin-bottom:22px; flex-wrap:wrap;}
  /* Mau co dinh: trong .page-view (nen toi) --navy-deep bi doi sang mau sang
     -> chu trang tren nen hong nhat, khong doc duoc. */
  .active-filter .filtering-label{color:#3A2A20; font-weight:600;}
  .active-filter .clear-filter{margin-left:auto; border:0; background:transparent; color:var(--accent); font-weight:700; cursor:pointer; font:inherit; text-decoration:underline;}
  .catalog-load-more{cursor:pointer;}
  .catalog-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:24px; display:flex; flex-direction:column; gap:12px; transition:box-shadow .2s ease, transform .2s ease; position:relative; min-width:0; -webkit-user-select:none; user-select:none;}
  .catalog-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .catalog-card .mini-icon{height:110px; background:#F0F0F0; display:flex; align-items:center; justify-content:center; border-radius:10px; position:relative;}
  .catalog-card .mini-icon svg{width:70px; opacity:.55;}
  .catalog-card .card-badge{position:absolute; top:10px; left:10px; background:var(--grad-accent); color:#fff; font-size:11px; font-weight:800; padding:4px 10px; border-radius:20px; letter-spacing:.02em;}
  .catalog-card .availability{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--muted);}
  .catalog-card .availability::before{content:""; width:7px; height:7px; border-radius:50%; background:#3FA66A;}
  .catalog-card .availability.project::before{background:#F5A623;}
  .catalog-card .availability.out-of-stock::before{background:#8A2E2E;}
  .catalog-card .availability.out-of-stock{color:#8A2E2E;}
  .catalog-card .sku{font-size:11.5px; color:var(--muted); font-weight:600;}
  .catalog-card .amis-live{display:flex; gap:10px; flex-wrap:wrap; font-size:13px;}
  .catalog-card .amis-price{font-weight:800; color:var(--ink);}
  .catalog-card .amis-stock{color:var(--muted);}
  .catalog-card .amis-stock.out{color:#8A2E2E; font-weight:800;}
  .cta-btn.is-disabled, .cta-outline.is-disabled{opacity:.5; cursor:not-allowed; pointer-events:none;}
  .catalog-card h3{font-size:18px; overflow-wrap:anywhere;}
  .catalog-card p{font-size:14px; color:var(--muted); flex:1;}
  .catalog-card .card-actions{display:flex; gap:10px; align-items:center; margin-top:5px; flex-wrap:wrap;}
  .catalog-card .card-actions .cta-btn,.catalog-card .card-actions .cta-outline{padding:9px 16px; font-size:13.5px;}

  /* ---------- Ho tro > Catalogue (PDF cong khai) ---------- */
  .catalogue-filters{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-bottom:22px;}
  .catalogue-filter-label{font-size:13px; font-weight:700; color:var(--muted); margin-right:4px;}
  .catalogue-chip{border:1px solid var(--line); background:#fff; color:var(--ink); font:inherit; font-size:13.5px; font-weight:600; padding:7px 14px; border-radius:999px; cursor:pointer; transition:border-color .15s ease, background .15s ease, color .15s ease;}
  .catalogue-chip span{color:var(--muted); font-weight:600; margin-left:2px;}
  .catalogue-chip:hover{border-color:var(--navy);}
  .catalogue-chip.active{background:var(--navy-deep); border-color:var(--navy-deep); color:#fff;}
  .catalogue-chip.active span{color:rgba(255,255,255,.7);}
  .catalogue-count{margin-left:auto; font-size:13.5px; font-weight:600; color:var(--muted);}
  .catalogue-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:24px;}
  .catalogue-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; min-width:0; transition:box-shadow .2s ease, transform .2s ease;}
  .catalogue-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .catalogue-cover{position:relative; display:block; aspect-ratio:4/3; background:#F0F0F0; border-bottom:1px solid var(--line);}
  .catalogue-cover img{width:100%; height:100%; object-fit:contain; padding:14px; mix-blend-mode:multiply; transition:transform .25s ease;}
  .catalogue-card:hover .catalogue-cover img{transform:scale(1.03);}
  .catalogue-badge{position:absolute; top:12px; left:12px; background:#fff; color:#C0392B; border:1px solid rgba(192,57,43,.25); font-size:11px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:6px;}
  .catalogue-body{display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; flex:1;}
  .catalogue-body .cat{font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
  .catalogue-body h3{font-size:18px; color:var(--navy-deep); overflow-wrap:anywhere;}
  .catalogue-body p{font-size:14px; color:var(--muted); flex:1;}
  .catalogue-meta{display:flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted);}
  .catalogue-meta svg{width:15px; height:15px; stroke:var(--muted);}
  .catalogue-actions{display:grid; gap:8px; margin-top:6px;}
  .catalogue-actions .cta-btn,.catalogue-actions .cta-outline{display:flex; padding:9px 16px; font-size:13.5px; justify-content:center; text-align:center;}
  .catalogue-actions .cta-btn svg{width:15px; height:15px;}
  .catalogue-docs-hint,.docs-catalogue-hint{margin-top:30px; font-size:14px; color:var(--muted);}

  /* ---------- Ho tro > Tai tai lieu (can dang nhap) ---------- */
  .docs-library{max-width:880px;}
  .docs-status{display:flex; align-items:center; gap:10px; font-size:14px; color:var(--navy-deep); background:var(--accent-soft); border-radius:10px; padding:12px 16px; margin-bottom:18px;}
  .docs-status::before{content:""; width:8px; height:8px; flex:none; border-radius:50%; background:var(--accent);}
  .docs-status.is-logged-in{background:#E4F5EC;}
  .docs-status.is-logged-in::before{background:#1E8E5A;}
  .docs-list{display:grid; gap:14px;}
  .docs-row{display:flex; align-items:center; gap:18px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:20px 22px;}
  .docs-row .doc-icon{width:48px; height:48px; border-radius:12px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none;}
  .docs-row .doc-icon svg{width:22px; height:22px; stroke:var(--accent);}
  .docs-info{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
  .docs-info .cat{font-size:12px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
  .docs-info strong{font-size:16px; color:var(--navy-deep);}
  .docs-desc{font-size:14px; color:var(--muted);}
  .docs-meta{font-size:12.5px; font-weight:600; color:var(--muted);}
  .docs-note{font-size:13px; color:var(--navy);}
  .docs-error{font-size:13px; color:#C0392B; font-weight:600;}
  .docs-error:empty{display:none;}
  .docs-action{flex:none;}
  .docs-action .cta-btn,.docs-action .cta-outline{padding:10px 18px; font-size:13.5px; border:0; cursor:pointer;}
  .docs-action .cta-outline{border:1.5px solid var(--navy); background:transparent; display:inline-flex;}
  .docs-action .cta-btn svg{width:15px; height:15px;}
  .docs-action .cta-btn[disabled]{opacity:.6; cursor:progress;}
  @media (max-width:640px){
    .docs-row{flex-wrap:wrap;}
    .docs-action{width:100%;}
    .docs-action .cta-btn,.docs-action .cta-outline{width:100%; justify-content:center;}
    .catalogue-count{margin-left:0; width:100%;}
  }

  .catalog-card-product{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:12px; gap:0; position:relative; transition:box-shadow .2s ease, border-color .2s ease, transform .2s ease;}
  .catalog-card-product:hover{box-shadow:var(--shadow-md); border-color:transparent; transform:translateY(-3px);}
  .cc-media{position:relative; display:block; aspect-ratio:1/1; background:#F0F0F0; border-radius:calc(var(--radius-lg) - 4px); overflow:hidden;}
  .cc-media .mini-icon{position:absolute; inset:0; height:auto; background:none; border-radius:0;}
  .cc-media .mini-icon svg{width:44%; opacity:.5;}
  .cc-media .card-badge{z-index:3;}
  .cc-photo{position:absolute; inset:0; width:100%; height:100%; object-fit:contain; z-index:1;}
  .cc-photo-2{opacity:0; z-index:2; transition:opacity .6s cubic-bezier(.22,1,.36,1);}
  .cc-media:hover .cc-photo-2{opacity:1;}
  .cc-hover-actions{position:absolute; top:12px; right:12px; z-index:2; display:flex; flex-direction:column; gap:8px; opacity:0; transform:translateX(6px); transition:opacity .15s ease, transform .15s ease;}
  .catalog-card-product:hover .cc-hover-actions{opacity:1; transform:translateX(0);}
  .cc-icon-btn{position:relative; width:36px; height:36px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; box-shadow:var(--shadow-sm); transition:background .15s ease, border-color .15s ease;}
  .cc-icon-btn svg{width:16px; height:16px; stroke:var(--navy); fill:none; transition:stroke .15s ease;}
  .cc-icon-btn:hover{background:var(--navy-deep); border-color:var(--navy-deep);}
  .cc-icon-btn:hover svg{stroke:#fff;}
  .cc-icon-btn.is-disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
  .cc-icon-cart, .cc-icon-check{position:absolute;}
  .cc-icon-check{opacity:0; transform:scale(.5); transition:opacity .15s ease, transform .15s ease;}
  .cc-icon-cart{transition:opacity .15s ease, transform .15s ease;}
  .js-add-cart.js-just-added{background:#3FA66A; border-color:#3FA66A;}
  .js-add-cart.js-just-added .cc-icon-cart{opacity:0; transform:scale(.5);}
  .js-add-cart.js-just-added .cc-icon-check{opacity:1; transform:scale(1); stroke:#fff;}
  .cc-added-toast{position:absolute; top:-8px; right:44px; z-index:3; white-space:nowrap; background:var(--navy-deep); color:#fff; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:6px; opacity:0; pointer-events:none; transform:translateY(4px) translateX(6px); transition:opacity .18s ease, transform .18s ease;}
  .cc-hover-actions:has(.js-just-added) .cc-added-toast{opacity:1; transform:translateY(0) translateX(0);}
  .cc-hover-actions:has(.js-just-added){opacity:1; transform:translateX(0);}
  .cc-body{padding-top:12px;}
  .catalog-card-product .cc-title{font-size:14.5px; font-weight:700; line-height:1.35; overflow-wrap:anywhere;}
  .cc-title a{color:var(--ink);}
  .cc-title a:hover{color:var(--accent);}
  .cc-price{flex:none; font-size:14.5px; font-weight:800; color:var(--navy-deep);}
  .cc-price-muted{font-size:12.5px; font-weight:700; color:var(--muted);}
  .cc-sub{display:block; font-size:12.5px; color:var(--muted); margin-top:3px;}
  .cc-meta{display:flex; align-items:center; gap:10px; margin-top:8px;}
  .cc-actions{display:flex; justify-content:space-between; align-items:baseline; gap:10px; margin-top:10px;}
  .cc-request{font-size:12.5px; font-weight:700; color:var(--accent); text-decoration:underline;}
  .cc-request.is-disabled{color:#C23434; text-decoration:none; pointer-events:none;}
  .cc-request-status{color:#3FA66A; text-decoration:none; cursor:default;}

  .card-cart-btn{position:relative; width:40px; height:40px; border-radius:50%; border:1.5px solid var(--navy); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; transition:background .15s ease;}
  .card-cart-btn svg{width:17px; height:17px; stroke:var(--navy); fill:none; transition:stroke .15s ease;}
  .card-cart-btn:hover{background:var(--navy);}
  .card-cart-btn:hover svg{stroke:#fff;}
  .card-cart-btn.is-disabled{opacity:.4; cursor:not-allowed; pointer-events:none;}
  .pd-ctas .card-cart-btn{margin-left:2px;}
  .cc-footer{margin-top:auto; padding-top:14px; border-top:1px solid var(--line); display:flex; flex-direction:column; gap:12px;}
  .cc-footer .cc-price{font-size:17px; letter-spacing:-.01em;}
  .cc-footer .card-actions{margin-top:0; gap:8px; flex-wrap:nowrap;}
  .cc-footer .card-actions .cta-btn{flex:1; justify-content:center; padding:10px 18px;}
  .cc-footer .card-cart-btn{width:42px; height:42px; border-radius:12px; box-shadow:var(--shadow-sm);}
  .pd-cta-cart{position:relative; overflow:visible;}
  .pd-cta-cart.js-just-added{background:#3FA66A; border-color:#3FA66A;}
  .pd-cta-cart.js-just-added svg{stroke:#fff;}
  .pd-cart-toast{position:absolute; bottom:calc(100% + 10px); left:50%; transform:translateX(-50%) translateY(4px); z-index:5; white-space:nowrap; background:var(--navy-deep); color:#fff; font-size:12.5px; font-weight:700; padding:7px 14px; border-radius:20px; box-shadow:var(--shadow-md); opacity:0; pointer-events:none; transition:opacity .18s ease, transform .18s ease;}
  .pd-cart-toast::after{content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%); border:5px solid transparent; border-top-color:var(--navy-deep);}
  .pd-cart-toast.show{opacity:1; transform:translateX(-50%) translateY(0);}
  .catalog-card:has(.pd-cart-toast.show){z-index:5;}

  /* ---------- Product detail ---------- */
  .breadcrumb{display:flex; align-items:center; gap:8px; font-size:13px; color:#FFFFFF; margin-bottom:14px; flex-wrap:wrap;}
  .breadcrumb a{color:#FFFFFF; font-weight:600;}
  .breadcrumb a:hover{color:#fff;}
  .breadcrumb .sep{opacity:.5;}
  .breadcrumb .current{color:#fff; font-weight:700;}
  .product-detail-grid{display:grid; grid-template-columns:.9fr 1.1fr; gap:44px; align-items:start;}
  .pd-gallery{position:relative;}
  .pd-gallery-main{position:relative; overflow:hidden; aspect-ratio:1/0.85; background:linear-gradient(160deg,#F0F0F0,#E8E8E8); border-radius:var(--radius-lg); display:flex; align-items:center; justify-content:center; border:1px solid var(--line); transition:transform .25s ease; cursor:zoom-in;}
  .pd-gallery-main svg{width:44%; opacity:.6;}
  .pd-gallery-main .mini-icon{position:absolute; inset:0; display:flex; align-items:center; justify-content:center;}
  .pd-main-photo{position:relative; z-index:1; width:100%; height:100%; object-fit:contain; background:#fff;}
  .pd-zoom-lens{position:absolute; display:none; border:2px solid var(--accent); background:rgba(255,255,255,.28); pointer-events:none; z-index:2; border-radius:6px;}
  .pd-zoom-pane{position:absolute; left:calc(100% + 22px); top:0; width:420px; height:420px; max-width:38vw; background-color:#fff; background-repeat:no-repeat; border:1px solid var(--line); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); display:none; z-index:30; pointer-events:none;}
  @media (max-width:1180px){ .pd-zoom-pane{display:none !important;} }
  .pd-thumbs{display:flex; gap:10px; margin-top:12px; flex-wrap:wrap;}
  .pd-thumb{width:64px; height:64px; border-radius:10px; border:1.5px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; transition:border-color .15s ease; overflow:hidden; padding:0;}
  .pd-thumb svg{width:60%; opacity:.55;}
  .pd-thumb img{width:100%; height:100%; object-fit:cover;}
  .pd-thumb.active{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .pd-info .cat{font-size:12.5px; font-weight:700; color:var(--accent); text-transform:uppercase; letter-spacing:.05em;}
  .pd-info h1{font-size:30px; margin:8px 0 6px;}
  .pd-info .pd-desc{font-size:15px; color:var(--muted); margin-bottom:18px;}
  .pd-meta{display:flex; gap:22px; flex-wrap:wrap; margin-bottom:18px; padding:16px 0; border-top:1px solid var(--line); border-bottom:1px solid var(--line);}
  .pd-meta div strong{display:block; font-size:14px; color:var(--navy-deep);}
  .pd-meta div span{font-size:12.5px; color:var(--muted);}
  .pd-quickinfo{background:var(--bg); border:1px solid var(--line); border-radius:var(--radius-lg); padding:6px 18px; margin-bottom:18px;}
  .pd-quickinfo .qi-row{display:flex; gap:16px; padding:12px 0; font-size:14px;}
  .pd-quickinfo .qi-row + .qi-row{border-top:1px solid var(--line);}
  .pd-quickinfo .qi-label{flex:none; width:120px; color:var(--muted); font-weight:600;}
  .pd-quickinfo .qi-value{color:var(--navy-deep); font-weight:700;}
  .pd-quickinfo .qi-value.out-of-stock{color:#8A2E2E;}
  .pd-quickinfo a.qi-value{color:var(--navy); cursor:pointer;}
  .pd-quickinfo a.qi-value:hover{color:var(--accent);}
  /* minmax(0,1fr): khong de khoi anh rong 820px (.pd-feature-images) keo cot
     grid rong ra 820px -> tran/cat chu tren dien thoai. */
  .pd-feature-sections{margin-top:28px; display:grid; grid-template-columns:minmax(0,1fr); gap:26px;}
  .pd-feature-sections h3{font-size:16.5px; margin-bottom:6px;}
  .pd-feature-sections p{font-size:14.5px; color:var(--muted); line-height:1.7;}
  /* Duong chia giua cac muc: bat dau ngay mep so tieu de (1. 2. 3.) va dai het
     be rong noi dung trang -> le trai = le phai */
  .pd-feature-block::after{content:""; display:block; height:1px; background:var(--line); width:100cqw; margin-top:22px;}
  .pd-feature-block:last-child::after{display:none;}
  .pd-feature-bullets{margin:10px 0 0; padding-left:20px; display:grid; gap:6px;}
  .pd-feature-bullets li{font-size:14.5px; color:var(--muted); line-height:1.6;}
  .pd-feature-sub{margin-top:14px;}
  .pd-feature-sub h4{font-size:15px; margin-bottom:4px; color:var(--navy-deep);}
  .pd-feature-sub p{margin-bottom:0;}
  .pd-feature-note{margin-top:14px; padding:14px 16px; background:var(--bg-soft, #F7F7F7); border-radius:var(--radius-md, 10px); border-left:3px solid var(--accent);}
  .pd-feature-note p{margin-bottom:0;}
  .page-view .pd-feature-note{background:#111; border:1px solid rgba(255,255,255,.1); border-left:3px solid var(--accent);}
  .pd-feature-images{display:grid; gap:14px; margin-top:12px;} 
  :has(> .pd-panel){container-type:inline-size;}
  .pd-panel .pd-feature-images{width:820px; max-width:100%; margin-left:max(0px, (100cqw - 820px) / 2);}
  .pd-panel .pd-feature-note{width:820px; max-width:100%; margin-left:max(0px, (100cqw - 820px) / 2);}
  .pd-panel .pd-feature-note .pd-feature-images{width:100%; margin-left:0;}
  .pd-feature-images img{width:100%; height:auto; border-radius:var(--radius-md, 10px); border:1px solid var(--line); background:#fff;}
  .pd-availability{display:inline-flex; align-items:center; gap:7px; font-size:13.5px; font-weight:700; color:var(--navy-deep); margin-bottom:18px;}
  .pd-availability::before{content:""; width:9px; height:9px; border-radius:50%; background:#3FA66A;}
  .pd-availability.project::before{background:#F5A623;}
  .pd-availability.out-of-stock::before{background:#8A2E2E;}
  .pd-availability.out-of-stock{color:#8A2E2E;}
  .pd-highlights{list-style:none; display:grid; gap:10px; margin-bottom:24px;}
  .pd-highlights li{display:flex; gap:10px; font-size:14.5px; color:var(--ink);}
  .pd-highlights li svg{width:18px; height:18px; stroke:var(--accent); flex:none; margin-top:1px;}
  .pd-ctas{display:flex; gap:12px; flex-wrap:wrap;}
  .pd-tabs{display:flex; gap:6px; border-bottom:1px solid var(--line); margin:52px 0 28px; flex-wrap:wrap;}
  .pd-tab{padding:12px 18px; font-weight:700; font-size:14.5px; color:var(--muted); border:0; background:transparent; cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-1px;}
  .pd-tab.active{color:var(--navy-deep); border-bottom-color:var(--accent);}
  .pd-panel{display:none; max-width:820px;}
  .pd-panel.active{display:block;}
  .pd-panel p{font-size:15px; color:var(--muted); margin-bottom:14px; line-height:1.7;}
  .specs-table{display:grid; gap:0; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden;}
  .specs-table .spec-row{display:grid; grid-template-columns:200px 1fr; font-size:14.5px;}
  .specs-table .spec-row:nth-child(odd){background:var(--bg);}
  .specs-table .spec-row div{padding:13px 18px;}
  .specs-table .spec-row .spec-label{font-weight:700; color:var(--navy-deep);}
  .specs-table .spec-row .spec-value{color:var(--muted);}
  .pd-apps{list-style:none; display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .pd-apps li{display:flex; gap:10px; font-size:14.5px; color:var(--ink); background:#fff; border:1px solid var(--line); border-radius:10px; padding:13px 16px;}
  .pd-apps li svg{width:17px; height:17px; stroke:var(--accent); flex:none;}
  .pd-docs{display:grid; gap:14px;}
  .pd-doc{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:18px 20px;}
  .pd-doc .doc-icon{width:44px; height:44px; border-radius:10px; background:var(--accent-soft); display:flex; align-items:center; justify-content:center; flex:none;}
  .pd-doc .doc-icon svg{width:20px; height:20px; stroke:var(--accent);}
  .pd-doc .doc-info{flex:1;}
  .pd-doc .doc-info strong{display:block; font-size:14.5px; color:var(--navy-deep);}
  .pd-doc .doc-info span{font-size:13px; color:var(--muted);}
  .related-products{margin-top:64px;}
  .related-products h2{font-size:24px; margin-bottom:22px;}
  .related-carousel{display:flex; align-items:center; gap:14px;}
  .related-track{display:flex; gap:20px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; flex:1; min-width:0; scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
    mask-image:linear-gradient(90deg, transparent 0, #000 28px, #000 calc(100% - 28px), transparent 100%);
  }
  .related-track::-webkit-scrollbar{display:none;}
  .related-track .catalog-card{flex:0 0 260px; scroll-snap-align:start;}
  .related-nav{width:42px; height:42px; border-radius:50%; border:1px solid var(--line); background:#fff; display:flex; align-items:center; justify-content:center; cursor:pointer; flex:none; box-shadow:var(--shadow-sm); transition:border-color .15s ease, background .15s ease;}
  .related-nav:hover{border-color:var(--accent); background:var(--accent-soft);}
  .related-nav svg{width:18px; height:18px; stroke:var(--navy); fill:none;}
  @media(max-width:640px){
    .related-nav{display:none;}
    .related-track .catalog-card{flex-basis:220px;}
  }
  .support-grid,.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px;}
  .support-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px; transition:box-shadow .2s ease, transform .2s ease;}
  .support-card:hover{box-shadow:var(--shadow-md); transform:translateY(-3px);}
  .support-card h3{font-size:18px; margin-bottom:8px;}
  .support-card p{font-size:14px; color:var(--muted); margin-bottom:16px;}
  .text-link{font-size:14px; color:var(--navy); font-weight:700;}
  .text-link:hover{color:var(--accent);}

  /* About page ("Giới thiệu công ty") */
  .about-value-card{position:relative; padding-top:30px; overflow:hidden;}
  .about-value-card::before{content:""; position:absolute; top:0; left:0; right:0; height:4px; background:var(--grad-accent); transform:scaleX(0); transform-origin:left; transition:transform .35s cubic-bezier(.2,.8,.3,1);}
  .about-value-card:hover::before{transform:scaleX(1);}
  .about-value-card .icon{width:52px; height:52px; border-radius:14px; background:var(--grad-accent); display:flex; align-items:center; justify-content:center; margin-bottom:20px; box-shadow:0 12px 22px -10px rgba(232,100,28,.6);}
  .about-value-card .icon svg{width:24px; height:24px; stroke:#fff; stroke-width:1.8;}
  .about-value-card h3{font-size:18.5px;}
  .about-eyebrow-row{text-align:center; margin-bottom:26px;}
  .page-hero .about-eyebrow{font-size:38px; padding:0; gap:26px; margin-bottom:0; text-transform:none; letter-spacing:0.01em; font-weight:800; border:none; background:none; border-radius:0;}
  .about-eyebrow::before{display:none;}
  .about-eyebrow-logo{display:flex; flex-direction:column; gap:4px; flex:none; padding-left:26px; border-left:1px solid rgba(255,255,255,.18);}
  .about-eyebrow-logo .logo-name{font-weight:900; font-size:29px; color:#fff; letter-spacing:0.01em; line-height:1;}
  .about-eyebrow-logo .logo-tagline{display:flex; align-items:center; gap:7px; font-size:12px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#FFFFFF;}
  .about-eyebrow-logo .logo-tagline .badge-max{background:var(--accent); color:#fff; font-weight:800; font-size:11px; letter-spacing:0; text-transform:none; padding:2.5px 7px; border-radius:4px;}
  #view-about .page-hero h1{font-size:15.5px; font-weight:700;}
  @media(max-width:640px){
    #view-about .page-hero h1{font-size:14.5px;}
    /* Dien thoai: "Ve chung toi" nam tren, logo nam duoi (truoc day 2 khoi
       dat canh nhau lam tieu de bi be thanh 3 dong). */
    .page-hero .about-eyebrow{flex-direction:column; gap:14px; font-size:32px; white-space:nowrap;}
    .about-eyebrow-logo{padding-left:0; border-left:none; align-items:center;}
    .about-eyebrow-logo .logo-name{font-size:24px;}
    .about-eyebrow-logo .logo-tagline{font-size:10px;}
  }
  .about-intro{font-size:17px; line-height:1.75; color:var(--ink); max-width:760px; font-weight:500;}
  .about-detail-grid{display:grid; grid-template-columns:1fr 1fr; gap:28px; margin-top:56px;}
  .about-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:32px 30px; box-shadow:var(--shadow-sm);}
  .about-panel-title{font-size:19px; margin:0 0 20px; display:flex; align-items:center; gap:10px;}
  .about-panel-title::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--grad-accent); flex:none;}
  .about-list{list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:16px;}
  .about-list li{position:relative; padding-left:32px; font-size:14.5px; line-height:1.65; color:var(--ink);}
  .about-list li::before{content:"✓"; position:absolute; left:0; top:0; width:20px; height:20px; border-radius:50%; background:var(--grad-accent); color:#fff; font-size:11px; font-weight:800; display:flex; align-items:center; justify-content:center; box-shadow:0 6px 14px -8px rgba(232,100,28,.7);}
  .about-distributor-band{margin-top:44px; background:linear-gradient(135deg, var(--navy), var(--navy-deep)); color:rgba(255,255,255,.92); border-radius:var(--radius-lg); padding:30px 34px; font-size:14.5px; line-height:1.75; position:relative; overflow:hidden; isolation:isolate;}
  .about-distributor-band::after{content:""; position:absolute; top:-55%; right:-15%; width:320px; height:320px; border-radius:50%; background:radial-gradient(circle at 40% 40%, var(--accent-2), var(--accent) 55%, transparent 78%); opacity:.55; mix-blend-mode:screen; pointer-events:none; z-index:0;}
  .about-distributor-title{position:relative; z-index:1; font-size:18px; font-weight:700; color:#fff; margin:0 0 12px; display:flex; align-items:center; gap:10px;}
  .about-distributor-title::before{content:""; width:10px; height:10px; border-radius:3px; background:var(--grad-accent); flex:none;}
  .about-distributor-text{position:relative; z-index:1; margin:0;}
  .about-bottom-grid{display:grid; grid-template-columns:1.3fr 1fr; gap:28px; margin-top:28px; align-items:start;}
  .about-company-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 30px; box-shadow:var(--shadow-sm);}
  .about-company-card-title{font-size:18px; margin:0 0 16px;}
  .about-company-list{margin:0; display:flex; flex-direction:column;}
  .about-company-row{display:flex; gap:16px; padding:11px 0; border-bottom:1px solid var(--line); font-size:14px;}
  .about-company-row:last-child{border-bottom:none; padding-bottom:0;}
  .about-company-row dt{min-width:88px; flex:none; font-weight:700; color:var(--muted); font-size:11.5px; text-transform:uppercase; letter-spacing:.04em; margin:0; padding-top:1px;}
  .about-company-row dd{margin:0; color:var(--ink); word-break:break-word;}
  @media(max-width:900px){
    .about-detail-grid{grid-template-columns:1fr;}
    .about-bottom-grid{grid-template-columns:1fr;}
  }
  .article-list{display:grid; gap:16px; max-width:850px;}
  .article{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:22px 24px;}
  .article time{font-size:12px; color:var(--muted); font-weight:700;}
  .article h3{font-size:19px; margin:6px 0;}
  .article p{font-size:14px; color:var(--muted);}
  .contact-grid{grid-template-columns:1.1fr .9fr; align-items:start;}
  .contact-panel{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px;}
  .contact-panel h2{font-size:24px; margin-bottom:16px;}
  .contact-panel p{font-size:14px; color:var(--muted); margin-bottom:18px;}
  .contact-form{display:grid; gap:12px;}
  .contact-form label{display:flex; flex-direction:column; gap:6px; font-size:13px; font-weight:700; color:var(--navy-deep);}
  .contact-form input,.contact-form textarea{width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px; font:inherit; font-size:14px; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;}
  .contact-form input:focus,.contact-form textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .contact-form textarea{min-height:108px; resize:vertical;}
  .contact-form .cta-btn{border:0; cursor:pointer; justify-self:start;}
  .contact-details{display:grid; gap:18px;}
  .detail strong{display:block; color:var(--navy-deep); margin-bottom:3px;}
  .detail span{font-size:14px; color:var(--muted);}

  /* ---------- Modals ---------- */
  .modal-backdrop{position:fixed; inset:0; z-index:100; display:none; align-items:center; justify-content:center; padding:20px; background:rgba(0,0,0,.62); backdrop-filter:blur(2px);}
  .modal-backdrop.open{display:flex;}
  .modal{background:#fff; width:min(520px,100%); border-radius:var(--radius-xl); padding:30px; position:relative; box-shadow:0 30px 70px rgba(0,0,0,.3); max-height:90vh; overflow-y:auto;}
  .modal h2{font-size:24px; margin-bottom:6px;}
  .modal > p,.modal-intro{font-size:14px; color:var(--muted); margin-bottom:20px;}
  .modal > p.req-product-name:empty{display:none;}
  .req-hotline{display:flex; align-items:center; gap:8px; margin:-8px 0 18px; padding:10px 14px; border-radius:10px; background:rgba(240,124,30,.09); color:var(--ink, #1a1a1a); font-size:14px; text-decoration:none;}
  .req-hotline svg{width:18px; height:18px; flex:none; color:#E8671A;}
  .req-hotline b{color:#E8671A; font-size:15px; white-space:nowrap;}
  .req-hotline:hover{background:rgba(240,124,30,.15);}
  .req-required{color:#D64545; font-style:normal; font-weight:700;}
  .js-request-modal .notice a,.js-contact-form .notice a{color:#E8671A; font-weight:700; white-space:nowrap;}
  .contact-form label.has-error textarea,.contact-form label.has-error textarea:focus{border-color:#D64545; box-shadow:0 0 0 3px rgba(214,69,69,.15);}
  /* Trinh duyet tu dien (autofill) to nen xanh/trang -> giu nen toi, chu trang cho form tren trang. */
  .page-view .contact-form input:-webkit-autofill,
  .page-view .contact-form input:-webkit-autofill:hover,
  .page-view .contact-form input:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 1000px #161616 inset; -webkit-text-fill-color:#fff; caret-color:#fff; transition:background-color 99999s;}
  .page-view .contact-form input:autofill{background:#161616; color:#fff;}
  .req-field-error{font-style:normal; font-size:12.5px; font-weight:600; color:#D64545; margin-top:-2px;}
  .req-field-error:empty{display:none;}
  .contact-form label.has-error input,.contact-form label.has-error input:focus{border-color:#D64545; box-shadow:0 0 0 3px rgba(214,69,69,.15);}
  .contact-form label.shake{animation:reqShake .42s cubic-bezier(.36,.07,.19,.97);}
  @keyframes reqShake{
    10%,90%{transform:translateX(-1px);} 20%,80%{transform:translateX(3px);}
    30%,50%,70%{transform:translateX(-6px);} 40%,60%{transform:translateX(6px);}
  }
  @media (prefers-reduced-motion: reduce){ .contact-form label.shake{animation:none;} }
  .modal-close{position:absolute; top:14px; right:14px; border:0; background:transparent; cursor:pointer; font-size:24px; color:var(--muted); line-height:1; width:32px; height:32px; border-radius:50%; transition:background .15s ease;}
  .modal-close:hover{background:var(--bg);}
  .notice{display:none; padding:12px 14px; background:#E9F6EF; color:#20643F; border-radius:var(--radius); font-size:14px;}
  .notice.show{display:block;}
  .notice-error{background:#FBE9E9; color:#8A2E2E;}

  /* ---------- Auth modal ---------- */
  .auth-tabs{display:flex; gap:4px; background:var(--bg); border-radius:999px; padding:4px; margin-bottom:22px;}
  .auth-tab{flex:1; text-align:center; padding:10px 0; border-radius:999px; font-weight:700; font-size:14px; color:var(--muted); cursor:pointer; border:0; background:transparent; transition:background .15s ease, color .15s ease;}
  .auth-tab.active{background:#fff; color:var(--navy-deep); box-shadow:var(--shadow-sm);}
  .auth-panel{display:none;}
  .auth-panel.active{display:grid; gap:12px;}
  .field{display:grid; gap:6px;}
  .field label{font-size:13px; font-weight:700; color:var(--navy-deep);}
  .field-input{position:relative;}
  .field-input input{width:100%; border:1px solid var(--line); border-radius:var(--radius); padding:11px 40px 11px 12px; font:inherit; font-size:14px; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;}
  .field-input input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .field-input textarea{width:100%; min-height:64px; resize:vertical; border:1px solid var(--line); border-radius:var(--radius); padding:11px 12px; font:inherit; font-size:14px; color:var(--ink); transition:border-color .15s ease, box-shadow .15s ease;}
  .field-input textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
  .field-toggle{position:absolute; right:6px; top:50%; transform:translateY(-50%); border:0; background:transparent; cursor:pointer; width:28px; height:28px; display:flex; align-items:center; justify-content:center; color:var(--muted);}
  .field-toggle svg{width:17px; height:17px; stroke:currentColor; fill:none; stroke-width:1.8;}
  .field-row{display:flex; justify-content:space-between; align-items:center; font-size:13px;}
  .field-row label{display:flex; align-items:center; gap:7px; font-weight:600; color:var(--muted); cursor:pointer;}
  .field-row a{font-weight:700; color:var(--navy);}
  .field-row a:hover{color:var(--accent);}
  .auth-submit{border:0; cursor:pointer; width:100%; justify-content:center; margin-top:4px;}
  .auth-switch{text-align:center; font-size:13.5px; color:var(--muted); margin-top:16px;}
  .auth-switch button{border:0; background:transparent; color:var(--accent); font-weight:700; cursor:pointer; font:inherit;}
  .terms-check{display:flex; align-items:flex-start; gap:8px; font-size:12.5px; color:var(--muted); line-height:1.4;}
  .terms-check input{margin-top:3px;}

  /* ---------- Back to top ---------- */
  .back-to-top{position:fixed; right:24px; bottom:24px; width:46px; height:46px; border-radius:50%; background:var(--navy-deep); border:1px solid #2A2A2A; display:flex; align-items:center; justify-content:center; cursor:pointer; opacity:0; visibility:hidden; transform:translateY(8px); transition:opacity .2s ease, transform .2s ease, visibility .2s ease; z-index:70; box-shadow:var(--shadow-md);}
  .back-to-top.show{opacity:1; visibility:visible; transform:translateY(0);}
  .back-to-top svg{width:18px; height:18px; stroke:#fff; stroke-width:2;}
  .back-to-top:hover{background:var(--accent);}

  /* ---------- Footer ---------- */
  footer{background:var(--navy-deep); color:#FFFFFF; padding-top:70px;}
  .cta-banner{position:relative; overflow:hidden; isolation:isolate; border:1px solid rgba(255,255,255,.2); border-radius:var(--radius-xl); background:radial-gradient(ellipse 55% 140% at 50% 50%, rgba(255,255,255,.09), rgba(255,255,255,.03) 45%, transparent 75%), #050505; padding:42px 48px; margin-bottom:44px; display:flex; align-items:center; gap:30px; flex-wrap:wrap; box-shadow:0 30px 60px -30px rgba(0,0,0,.6);}
  /* Nen den, bong sang nhe o giua, vien sang (da bo vong cam + lop cham). */
  .cta-banner > *{position:relative; z-index:1;}
  .cta-banner-icon{flex:none; width:118px; height:118px; display:flex; align-items:center; justify-content:center;}
  .cta-banner-icon svg{width:100%; height:100%;}
  @media(max-width:640px){.cta-banner-icon{width:96px; height:96px;}}
  .cta-banner-body{flex:1 1 320px;}
  .cta-banner-eyebrow{display:block; font-size:12.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent); margin-bottom:8px;}
  .cta-banner-body h3{color:#fff; font-size:27px; font-weight:800; margin-bottom:8px; letter-spacing:-.01em;}
  .cta-banner-body p{font-size:14px; color:#FFFFFF; max-width:680px; line-height:1.6;}
  .cta-banner-body p + p{margin-top:8px;}
  .cta-banner-phone{display:flex; align-items:center; gap:9px; margin-top:16px; font-weight:800; font-size:16px; color:#fff;}
  .cta-banner-phone svg{width:18px; height:18px; flex:none; color:var(--accent-2);}
  .cta-banner-btn{flex:none; border-radius:999px; padding:15px 32px; font-size:15px; white-space:nowrap;}
  @media(max-width:640px){.cta-banner{padding:30px 26px; flex-direction:column; text-align:center;} .cta-banner-body{flex-basis:100%;} .cta-banner-phone{justify-content:center;}}
  .foot-grid{display:grid; grid-template-columns:1.3fr 1fr 1fr 1.1fr; gap:40px; padding-bottom:50px;}
  .foot-grid h4{color:#fff; font-size:14.5px; margin-bottom:18px; letter-spacing:.02em;}
  .foot-grid ul{list-style:none; display:flex; flex-direction:column; gap:11px;}
  .foot-grid ul a{font-size:14px; color:#FFFFFF;}
  .foot-grid ul a:hover{color:#fff;}
  footer .logo{color:#fff; margin-bottom:14px;}
  .foot-letterhead{display:block; margin:0 0 36px; line-height:0;}
  .foot-letterhead img{display:block; height:auto; user-select:none;}
  .foot-letterhead .fl-full{width:100%; max-width:1100px;}
  .foot-letterhead .fl-part{display:none;}
  @media (max-width:760px){
    .foot-letterhead .fl-full{display:none;}
    .foot-letterhead .fl-part{display:block; width:100%; max-width:420px;}
    .foot-letterhead .fl-part + .fl-part{margin-top:18px;}
  }
  footer .about-text{font-size:13.8px; color:#FFFFFF; max-width:280px; line-height:1.6; margin-bottom:20px;}
  footer .social{display:flex; gap:10px;}
  footer .social a{width:34px; height:34px; border-radius:50%; border:1px solid #333333; display:flex; align-items:center; justify-content:center; transition:background .15s ease, border-color .15s ease;}
  footer .social a:hover{background:var(--accent); border-color:var(--accent);}
  /* flex-wrap: Safari iPhone tu boc so dien thoai thanh <a>; khong wrap thi moi so thanh 1 cot hep. */
  .contact-item{display:flex; flex-wrap:wrap; column-gap:18px; row-gap:4px; font-size:13.8px; color:#FFFFFF; margin-bottom:12px;}
  .contact-item a{color:inherit; text-decoration:none;}
  .contact-item a:hover{color:var(--accent);}
  .contact-item .nowrap{white-space:nowrap;}
  .bottom-bar{border-top:1px solid #2A2A2A; padding:20px 0; display:flex; justify-content:space-between; align-items:center; font-size:12.5px; color:#FFFFFF; flex-wrap:wrap; gap:8px;}

  @media(max-width:980px){
    .header-bottom{gap:16px;}
    nav.primary > ul{display:none;}
    .menu-btn{display:flex;}
    /* Menu tha xuong can theo ca hang header (.header-bottom), khong theo
       nav.primary - nav chi con rong 0px khi an ul nen truoc day menu bi bop
       thanh 1 dai hep. display:contents de nav khong chiem them 1 khoang gap. */
    .header-bottom{position:relative;}
    nav.primary{display:contents;}
    nav.primary.open > ul{display:flex; position:absolute; left:0; right:0; top:calc(100% + 6px); background:#fff; border:1px solid var(--line); padding:12px 18px; flex-direction:column; gap:4px; box-shadow:var(--shadow-md); max-height:calc(100vh - 110px); overflow-y:auto; border-radius:12px; z-index:70;}
    nav.primary > ul > li{width:100%; color:var(--navy-deep);}
    nav.primary > ul > li:hover > a{color:var(--accent);}
    nav.primary > ul > li.nav-contact-mobile{display:block;}
    .submenu{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border-radius:8px; display:none; padding:4px 0; min-width:0; width:100%; margin-top:4px;}
    .submenu li > a{padding:11px 16px;}
    nav.primary li.sub-open .submenu{display:block;}
    nav.primary > ul > li > a{display:flex; width:100%;}
    nav.primary > ul > li > a::after{display:none;}
    /* Mui ten to hon + vung bam rong de de cham tren dien thoai (xem nav.js). */
    nav.primary li .chev{margin-left:auto; width:14px; height:14px; box-sizing:content-box; padding:6px 10px; margin-right:-10px;}
    nav.primary li:hover .chev{transform:none;}
    /* Cham tren dien thoai cung kich hoat :hover -> chan hieu ung dich -50%
       cua submenu ban may tinh (lam danh sach con lech trai, mat chu). */
    nav.primary li:hover .submenu, nav.primary li .submenu{transform:none; left:auto;}
    nav.primary li.sub-open > a .chev{transform:rotate(180deg);}
    nav.primary li.sub-open > a{color:var(--accent);}
    .header-contact-link{display:none;}
    .support-grid{grid-template-columns:1fr 1fr;}
    .hero-slides{height:auto;}
    .hero-slide{position:relative; inset:auto; display:none; flex-direction:column; align-items:stretch;}
    .hero-slide.active{display:flex;}
    .hero-slide .wrap{padding-bottom:60px;}
    .hero-copy{max-width:none;}
    .hero-visual{position:relative; inset:auto; z-index:0; height:300px;}
    .hero-visual-bg{left:0; border-radius:0;}
    .hero-visual .frame{inset:14px;}
    .cut-diagonal{display:none;}
    .grid{grid-template-columns:repeat(2,1fr);}
    .news-grid{grid-template-columns:1fr;}
    .news-featured{grid-template-columns:1fr;}
    .news-featured .body{padding:0 24px 28px;}
    .foot-grid{grid-template-columns:1fr 1fr; row-gap:36px;}
    /* 2 cot: gioi thieu va Lien he trai het be ngang (dia chi, so dien thoai khong bi ep hep). */
    .foot-grid > :first-child, .foot-grid > :last-child{grid-column:1 / -1;}
    footer .about-text{max-width:none;}
    .hero h1{font-size:34px;}
    .hero-product-name{font-size:16px; padding:6px 13px;}
    .hero .hp-model{font-size:40px;}
    .hero-slide.is-main .wrap{padding-top:56px;}
    .hero .hi-name{font-size:min(68px, 17vw); padding-bottom:20px; margin-bottom:22px;}
    .hi-partner{font-size:11px; letter-spacing:.24em;}
    .hi-brands{font-size:14px; gap:12px; letter-spacing:.16em;}
    .hero-slide.is-main .hero-ctas{flex-wrap:wrap;}
    .hero-slide.is-main .hero-stats > div{padding:0 16px;}
    .hp-tagline{font-size:17px;}
    .hp-specs dd{font-size:19px;}
    .hp-specs{grid-template-columns:repeat(3, minmax(0,1fr));}
    .hp-specs > div{padding:0 12px;}
    .hp-specs dt{white-space:normal;}
    .product-detail-grid{grid-template-columns:1fr; gap:28px;}
    .specs-table .spec-row{grid-template-columns:150px 1fr;}
    .pd-apps{grid-template-columns:1fr;}
    /* Man hinh nho: hang 1 = "Tat ca" + dai thuong hieu cuon ngang,
       hang 2 = o tim kiem full chieu ngang (bo vach ke doc giua cac khoi). */
    .catalog-filterbar-row{flex-wrap:wrap; gap:10px 10px; padding:12px 16px;}
    .cat-tree-brands{flex:1 1 0; min-width:0; border-left:none; padding-left:0; margin-left:0;}
    .cat-tree-brands, .cat-tree-subrow, .catalog-filterbar-row{scrollbar-width:none;}
    .cat-tree-brands::-webkit-scrollbar, .cat-tree-subrow::-webkit-scrollbar, .catalog-filterbar-row::-webkit-scrollbar{display:none;}
    .cat-tree-subrow{padding:0 16px 12px;}
    .catalog-filterbar-actions{flex:1 1 100%; margin-left:0; padding-left:0; border-left:none;}
    .catalog-filterbar-row .catalog-search{margin-left:0; width:100%;}
    .catalog-filterbar-row .catalog-search input{width:100%; max-width:none; font-size:16px;}
  }
  @media(max-width:820px){
    .benefits{gap:16px;}
    .benefit{padding:22px 18px;}
  }
  @media(max-width:640px){
    .benefits{grid-template-columns:1fr;}
    .header-bottom{padding:14px 0; gap:10px;}
    .logo .logo-name{font-size:19px;}
    .logo .logo-tagline{font-size:9px; gap:5px;}
    .logo.logo-img img{height:44px;}
    header.main .wrap{padding:0 16px;}
    /* iOS Safari tu phong to trang khi bam vao o nhap co chu < 16px. */
    input:not([type="checkbox"]):not([type="radio"]), select, textarea{font-size:16px !important;}
    .header-actions{gap:8px;}
    /* Dien thoai khong du cho cho 4 nut: chuyen nut Ngon ngu va Cong noi bo
       vao menu (xem .nav-mobile-extra), header chi con Dang nhap + Gio hang. */
    .header-actions .lang-pill, .header-actions .js-portal-link{display:none;}
    nav.primary > ul > li.nav-mobile-extra{display:block;}
    .icon-btn{width:36px; height:36px;}
    .account-name, .account-chev{display:none;}
    .account-trigger{padding:3px;}
    .support-grid,.contact-grid{grid-template-columns:1fr;}
    .grid.news-page-grid{grid-template-columns:1fr;}
    .foot-grid > :first-child{grid-column:1 / -1;}
    .page-hero h1{font-size:30px;}
    .page-view{padding:0 0 70px;}
    .newsletter{flex-direction:column; align-items:flex-start;}
    .catalog-filterbar{top:var(--header-h, 66px);}
    .cart-drawer{width:100vw; min-width:0; max-width:none;}
  }

/* ============================================================
   Trang chu: tu carousel tro xuong dung nen den, chu trang
   (class .home-dark gan tren cac khoi trang chu trong index.html).
   Doi bien mau trong pham vi khoi -> tieu de/chu phu tu dong thanh
   trang; the (loi ich, tin tuc) dung nen den nhat + vien mong.
   ============================================================ */
.home-dark{
  --ink:#FFFFFF; --muted:#FFFFFF; --navy:#FFFFFF; --navy-deep:#FFFFFF;
  --line:rgba(255,255,255,.14); --bg:#000000;
  background:#000; color:#fff;
}
.cutline.home-dark{background-color:#000;}
.showcase-marquee.home-dark{background:#000;}
section.home-dark, section.tinted.home-dark, .featured-dark.home-dark{background:#000;}
.home-dark .section-head p{color:#fff;}
.home-dark .see-all{color:#fff;}
.home-dark .see-all:hover{color:var(--accent);}
/* San pham noi bat: khung anh giu nen toi (truoc dung --navy-deep) */
.home-dark .fp-media{background:#111; box-shadow:0 18px 40px -18px rgba(0,0,0,.9); border:1px solid rgba(255,255,255,.1);}
.home-dark .fp-name{color:#fff;}
.home-dark .fp-desc{color:#fff;}
/* Loi ich */
.home-dark .benefit{background:#111; border-color:rgba(255,255,255,.12);}
.home-dark .benefit:hover{border-color:rgba(232,100,28,.55); box-shadow:0 18px 40px -20px rgba(232,100,28,.35);}
.home-dark .benefit h3, .home-dark .benefit p{color:#fff;}
/* Tin tuc */
.home-dark .news-card{background:#111; border-color:rgba(255,255,255,.12);}
.home-dark .news-card:hover{border-color:rgba(232,100,28,.55); box-shadow:0 18px 40px -20px rgba(232,100,28,.35);}
.home-dark .news-card .thumb{background:linear-gradient(160deg,#1A1A1A,#0D0D0D);}
.home-dark .news-card .thumb svg *{stroke:#fff;}
.home-dark .news-card h3, .home-dark .news-card .date, .home-dark .news-card p{color:#fff;}
.home-dark .news-card .meta{border-top-color:rgba(255,255,255,.12); color:#fff;}
/* Dai doi tac thuong hieu: chu trang, hover cam */
.home-dark.trust .label, .home-dark.trust .brands span{color:#fff;}
.home-dark.trust .brands span:hover{color:var(--accent);}
.showcase-marquee.home-dark{-webkit-mask-image:none; mask-image:none; position:relative;}
.showcase-marquee.home-dark::before, .showcase-marquee.home-dark::after{content:""; position:absolute; top:0; bottom:0; width:6%; z-index:2; pointer-events:none;}
.showcase-marquee.home-dark::before{left:0; background:linear-gradient(90deg, #000, rgba(0,0,0,0));}
.showcase-marquee.home-dark::after{right:0; background:linear-gradient(270deg, #000, rgba(0,0,0,0));}/* Den mo mau trang phia sau vung noi dung (sang nhat o giua, toi dan ra mep) */
section.home-dark, section.tinted.home-dark, .featured-dark.home-dark{
  background:
    radial-gradient(72% 68% at 50% 48%, rgba(255,255,255,.19) 0%, rgba(255,255,255,.11) 40%, rgba(255,255,255,.04) 72%, rgba(255,255,255,0) 100%),
    #000;
}

.home-dark .fp-media-bg::after{background:radial-gradient(46% 42% at 50% 52%, rgba(0,0,0,.42) 0%, rgba(0,0,0,.18) 70%, rgba(0,0,0,0) 100%), radial-gradient(120% 120% at 50% 50%, rgba(0,0,0,0) 45%, rgba(0,0,0,.4) 100%);}
/* Thong bao "Tinh nang dang trong qua trinh phat trien" */
.dev-notice-toast{position:fixed; left:50%; bottom:32px; z-index:9999; transform:translate(-50%, 16px); opacity:0; pointer-events:none;
  display:flex; align-items:center; gap:10px; max-width:calc(100vw - 32px); padding:13px 20px; border-radius:12px;
  background:#111; color:#fff; font-size:14.5px; font-weight:600; border:1px solid rgba(255,255,255,.14); border-left:4px solid var(--accent);
  box-shadow:0 18px 40px -14px rgba(0,0,0,.6); transition:opacity .2s ease, transform .25s cubic-bezier(.2,.8,.3,1);}
.dev-notice-toast::before{content:"i"; flex:none; width:22px; height:22px; border-radius:50%; background:var(--accent); color:#fff; font-weight:800; font-size:13px; display:flex; align-items:center; justify-content:center; font-family:Georgia,serif;}
.dev-notice-toast.show{opacity:1; transform:translate(-50%, 0);}
/* ============================================================
   Toan bo trang con (.page-view): nen den + quang sang trang mo
   phia sau noi dung (giong trang chu). Quang sang co dinh theo man
   hinh nen luon nam sau phan dang doc khi cuon.
   ============================================================ */
.page-view{
  --ink:#FFFFFF; --muted:#FFFFFF; --navy:#FFFFFF; --navy-deep:#FFFFFF;
  --line:rgba(255,255,255,.14); --bg:#161616;
  color:#fff;
  background:
    radial-gradient(70% 60% at 50% 55%, rgba(255,255,255,.14) 0%, rgba(255,255,255,.07) 42%, rgba(255,255,255,.02) 75%, rgba(255,255,255,0) 100%) fixed,
    #000;
}
/* The / khung noi dung: den nhat + vien mong */
.page-view :is(.catalog-card, .catalog-card-product, .catalogue-card, .docs-row, .support-card, .about-panel, .about-company-card,
  .article, .contact-panel, .news-card, .news-featured, .news-article, .na-related-item, .pd-apps li, .pd-doc){
  background:#111; border-color:rgba(255,255,255,.12);
}
.page-view :is(.catalog-card, .catalog-card-product, .catalogue-card, .docs-row, .support-card, .news-card, .news-featured, .na-related-item):hover{
  border-color:rgba(232,100,28,.55); box-shadow:0 18px 40px -20px rgba(232,100,28,.35);
}
/* Nut / chip / o loc */
.page-view :is(.news-filter-pill, .cat-tree-item, .catalogue-chip, .cc-icon-btn, .card-cart-btn, .related-nav, .pd-thumb){background:#111; color:#fff;}
.page-view :is(.news-filter-pill, .cat-tree-item, .catalogue-chip).active,
.page-view .cat-tree-item.active:hover{background:#fff; border-color:#fff; color:#000;}
/* So dem trong chip dang chon: nen trang -> so phai toi mau */
.page-view .catalogue-chip.active span{color:rgba(0,0,0,.55);}
/* Nut loc hang / nhom: vien ro tren nen toi; nhom dang chon = vien + chu cam. */
.page-view .cat-tree-item{border-color:rgba(255,255,255,.22);}
.page-view .cat-tree-item:not(.active):hover{border-color:var(--accent); background:rgba(232,100,28,.12); color:#fff;}
.page-view .cat-tree-sub{background:#1A1A1A; border-color:rgba(255,255,255,.22); color:rgba(255,255,255,.88);}
.page-view .cat-tree-sub.active,.page-view .cat-tree-sub.active:hover{background:rgba(232,100,28,.16); border-color:var(--accent); color:#FF9A4D; box-shadow:none;}
.page-view .cc-icon-btn:hover, .page-view .card-cart-btn:hover{background:var(--accent); border-color:var(--accent);}
.page-view .cc-icon-btn:hover svg, .page-view .card-cart-btn:hover svg{stroke:#fff;}
.page-view .cc-added-toast{background:#fff; color:#000;}
.page-view .cta-outline:hover{background:#fff; color:#000; border-color:#fff;}
/* Thanh loc san pham (dinh tren cung khi cuon) */
.page-view .catalog-filterbar{background:rgba(10,10,10,.94); border-bottom-color:rgba(255,255,255,.1); box-shadow:0 10px 24px -18px rgba(0,0,0,.9);}
.page-view .catalog-search input{background:#161616; color:#fff;}
.page-view .catalog-search input::placeholder{color:rgba(255,255,255,.55);}
.page-view .catalog-search input:focus{background:#1A1A1A;}
/* Form lien he */
.page-view :is(.contact-form input, .contact-form textarea){background:#161616; color:#fff;}
/* Nen toi: khi chon o chi con vien cam, bo quang sang (--accent-soft nhin nhu vien trang). */
.page-view :is(.contact-form input, .contact-form textarea):focus{border-color:var(--accent); box-shadow:none;}
.page-view :is(.contact-form input, .contact-form textarea)::placeholder{color:rgba(255,255,255,.5);}
/* Anh san pham (nen trang san trong anh) giu khung sang de anh lien mach */
.page-view :is(.cc-media, .catalog-card .mini-icon, .catalogue-cover, .pd-gallery-main){background:#fff;}
/* Bai viet: bang, ghi chu */
.page-view .na-body tr:nth-child(odd) td{background:#161616;}
.page-view .na-cover{background:#161616;}
/* Trang tai lieu */
.page-view .docs-status{background:#161616; color:#fff;}
.page-view .docs-status.is-logged-in{background:rgba(30,142,90,.2);}/* Nut "Xem them san pham": mau cam (ca luc thuong va luc re chuot) */
.page-view .catalog-load-more, .page-view .catalog-load-more:hover{background:var(--grad-accent); border-color:transparent; color:#fff;}
.page-view .catalog-load-more:hover{box-shadow:0 14px 26px -12px rgba(232,100,28,.6); transform:translateY(-2px);}/* Khung "nha phan phoi" trang Ve chung toi: gradient dung bien navy (da thanh trang) -> nen den nhat */
.page-view .about-distributor-band{background:linear-gradient(135deg, #1A1A1A, #0A0A0A); border:1px solid rgba(255,255,255,.12);}/* Nut "Yeu cau bao gia": trang mo (nen trang trong suot + vien mong, chu trang) */
.page-view .pd-cta-quote, .page-view .cc-request.js-request{
  background:rgba(255,255,255,.12); color:#fff; border:1px solid rgba(255,255,255,.28);
  box-shadow:none; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px);
  transition:background .15s ease, border-color .15s ease;
}
.page-view .pd-cta-quote:hover, .page-view .cc-request.js-request:hover{background:rgba(255,255,255,.22); border-color:rgba(255,255,255,.45); color:#fff; transform:none; box-shadow:none;}
/* The san pham: TEN SAN PHAM la diem nhan chinh (to, dam, trang sang); "Yeu cau bao gia"
   lui xuong thanh dong chu nho trang mo, ngan bang duong ke mong, re chuot moi sang cam. */
.page-view .catalog-card-product .cc-body{display:flex; flex-direction:column; flex:1; padding-top:14px;}
.page-view .catalog-card-product .cc-title{font-size:16px; font-weight:800; line-height:1.4; letter-spacing:-.005em;
  display:-webkit-box; -webkit-line-clamp:2; line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; min-height:calc(1.4em * 2);}
.page-view .catalog-card-product .cc-title a{color:#fff;}
.page-view .catalog-card-product .cc-title a:hover{color:var(--accent);}
.page-view .catalog-card-product .cc-actions{display:block; margin-top:auto; padding-top:12px;}
.page-view .cc-request.js-request{display:flex; align-items:center; justify-content:space-between; gap:10px; width:100%; height:auto; padding:10px 2px 2px;
  border:0; border-top:1px solid rgba(255,255,255,.08); border-radius:0; background:none; -webkit-backdrop-filter:none; backdrop-filter:none;
  font-size:12.5px; font-weight:500; letter-spacing:.01em; color:rgba(255,255,255,.55); text-decoration:none;}
.page-view .cc-request.js-request .cc-request-arrow{width:14px; height:14px; stroke:currentColor; flex:none; transition:transform .2s ease;}
.page-view .cc-request.js-request:hover{background:none; border-color:rgba(255,255,255,.08); color:var(--accent);}
.page-view .cc-request.js-request:hover .cc-request-arrow{transform:translateX(3px);}