/*======================================================================
   Champion One IT Solution — สไตล์กลางของทั้งเว็บ (shared CI stylesheet)
   ต้นทาง: แยกออกมาจาก index.html เพื่อให้ทุกหน้า (รวมหน้าสินค้า) ใช้ CI เดียวกัน
   ⚠️ แก้ไฟล์นี้แล้วต้องเปลี่ยนเลข ?v= ในทุกหน้าที่ลิงก์ เพื่อไม่ให้เบราว์เซอร์ใช้ของเก่าในแคช
======================================================================*/
  * { box-sizing: border-box; }
  body { margin: 0; background: #F6F4EF; font-family: 'IBM Plex Sans Thai', system-ui, sans-serif; color: #17201C; -webkit-font-smoothing: antialiased; }
  a { color: #0E3B2C; text-decoration: none; }
  a:hover { color: #B4903D; }
  html { scroll-behavior: smooth; }
  ::selection { background: #C9A24A; color: #fff; }
  img { max-width: 100%; }
  /* WHY: เดสก์ท็อป — นางแบบริมซ้าย เรียงข้างกล่อง 4 ข้อ (2x2) */
  @media (min-width: 1001px) {
    [data-r="whyrow"] { display: flex; align-items: stretch; gap: clamp(26px,3vw,48px); }
    [data-r="whyart"] { flex: 0 0 auto; align-self: flex-end; }
    [data-r="grid4"]  { flex: 1 1 0; min-width: 0; }
    [data-r="grid4"] > div:nth-child(n+3) { border-top: 1px solid rgba(14,59,44,0.12); }
    [data-r="grid4"] > div:nth-child(even) { border-right: none; padding-left: 28px; border-left: 1px solid rgba(14,59,44,0.10); }
  }

  /* จอแคบ — ภาพอยู่เหนือกล่องข้อความ จัดกึ่งกลาง */
  @media (max-width: 1000px) {
    [data-r="whyart"] { display: flex; justify-content: center; margin-bottom: 30px; }
  }

  @media (max-width: 1000px) {
    [data-r="hero"], [data-r="cols2"] { grid-template-columns: 1fr !important; }
    [data-r="hero"] { gap: 44px !important; text-align: left; }
    [data-r="grid3"] { grid-template-columns: repeat(2, 1fr) !important; }
    [data-r="grid4"] { grid-template-columns: repeat(2, 1fr) !important; border-top: none !important; }
    [data-r="grid4"] > div { padding: 26px 0 !important; border-right: none !important; border-top: 1px solid rgba(14,59,44,0.12) !important; }
    [data-r="grid4"] > div:nth-child(even) { padding-left: 24px !important; border-left: 1px solid rgba(14,59,44,0.10) !important; }
    [data-r="navlinks"] { display: none !important; }
    [data-r="heroart"] { max-width: 560px !important; justify-self: center !important; }
    [data-r="fields"] { grid-template-columns: 1fr !important; }
    /* เอาพนักงานออก เพื่อให้ภาพโลโก้กว้างพออ่านชื่อแบรนด์ออก */
    [data-r="partnermodel"] { display: none !important; }
  }

  @media (max-width: 640px) {
    [data-r="grid3"], [data-r="grid4"], [data-r="fields"], [data-r="stats"] { grid-template-columns: 1fr !important; }
    [data-r="grid4"] > div:nth-child(even) { padding-left: 0 !important; border-left: none !important; }
    [data-r="stats"] > div { border: none !important; padding: 2px 0 !important; }
    [data-r="pad"] { padding-left: 20px !important; padding-right: 20px !important; }
    [data-r="visioncard"] { padding: 32px 24px !important; }
    [data-r="formcard"] { padding: 26px 20px !important; }
    [data-r="foot"] { flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; }
    [data-r="legal"] { font-size: 13.5px !important; }

    /* พันธมิตร: มือถือใช้ข้อความแทนภาพ เพราะโลโก้ย่อเหลือ ~8px อ่านไม่ออก */
    [data-r="partnerrow"]  { display: none !important; }
    [data-r="partnermodel-m"] { display: flex !important; }
    [data-r="partnerimg"]  { display: none !important; }
    [data-r="partnerlist"] { display: grid !important; }

    /* บีบ header ให้อยู่แถวเดียวหลังเพิ่มปุ่มสลับภาษา (sticky ไม่กินจอ) */
    header [data-r="pad"] { padding: 10px 20px !important; gap: 10px !important; }
    header img { width: 40px !important; height: 40px !important; }
    header [data-r="brand"] span:first-child { font-size: 13px !important; }
    header [data-r="brand"] span:last-child { font-size: 9px !important; letter-spacing: 0.16em !important; }
    header nav { gap: 8px !important; }
    header [role="group"] button { padding: 8px 11px !important; font-size: 12px !important; }
    header a.hv1 { padding: 10px 16px !important; font-size: 13px !important; }
  }

  /* จอเล็กมาก: ซ่อนตัวอักษรข้างโลโก้ ให้ header อยู่แถวเดียว (hero ด้านล่างมีชื่อบริษัทตัวใหญ่อยู่แล้ว) */
  @media (max-width: 500px) {
    [data-r="brand"] { display: none !important; }
    header [data-r="pad"] { padding: 10px 16px !important; }
  }
.hv1:hover { background:#072A20;color:#D9B968 !important; }
.hv2:hover { background:#D9B968 !important; }
.hv3:hover { border-color:#C9A24A;color:#D9B968 !important; }
.hv4:hover { background:rgba(201,162,74,0.12);border-color:#C9A24A !important; }
.hv5:hover { background:#D9B968 !important; }
.hv6:hover { color:#D9B968 !important; }
.hv7:hover { color:#D9B968 !important; }
.hv8:hover { background:rgba(6,199,85,0.14);border-color:#06C755 !important; }
.hv9:hover { background:rgba(24,119,242,0.16);border-color:#1877F2 !important; }
  .svc { transition: transform .28s cubic-bezier(.22,.7,.3,1), box-shadow .28s ease, background-color .28s ease; }
  .svc:hover { transform: translateY(-5px); box-shadow: 0 16px 38px rgba(11,53,39,0.11); }
  .svc-ic { transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .28s cubic-bezier(.22,.7,.3,1); }
  .svc:hover .svc-ic { background: #0E3B2C !important; border-color: #0E3B2C !important; color: #D9B968 !important; transform: scale(1.06); }
  @media (prefers-reduced-motion: reduce) {
    .svc, .svc-ic { transition: none !important; }
    .svc:hover { transform: none; }
    .svc:hover .svc-ic { transform: none; }
  }
  /* =================================================================
     SPEED BACKGROUND — แนวเส้นไล่ความเร็ว (speed streaks) แบบในแบนเนอร์
     CSS ล้วน ไม่โหลดรูปเพิ่ม / ขยับด้วย transform (GPU) / ไม่มี JS
     ================================================================= */

  /* โซนสว่าง (พื้นครีม): เส้นเฉียงจาง ๆ + แสงทองมุมขวา — นิ่ง อ่านง่าย ไม่กวนสายตา */
  body::before {
    content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
    background:
      radial-gradient(760px 420px at 88% -4%, rgba(201,162,74,0.07), transparent 66%),
      radial-gradient(620px 360px at 2% 6%, rgba(18,160,106,0.045), transparent 70%),
      repeating-linear-gradient(74deg, rgba(14,59,44,0) 0 92px, rgba(14,59,44,0.028) 92px 93.5px, rgba(14,59,44,0) 93.5px 184px),
      repeating-linear-gradient(74deg, rgba(201,162,74,0) 0 232px, rgba(201,162,74,0.030) 232px 233.4px, rgba(201,162,74,0) 233.4px 464px);
  }

  /* โซนเข้ม (hero / contact): ไล่สีเขียวเข้ม + รางเส้น + เส้นไฟวิ่ง + เชฟรอนทอง */
  .sp-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
  .sp-bg::before {
    content: ""; position: absolute; inset: 0;
    background:
      radial-gradient(880px 460px at 84% 8%, rgba(201,162,74,0.24), transparent 64%),
      radial-gradient(700px 400px at 4% 98%, rgba(25,230,138,0.15), transparent 68%),
      linear-gradient(102deg, #072A20 0%, #0B3527 36%, #104733 70%, #072A20 100%);
  }
  .sp-lanes {
    position: absolute; inset: -30% -14%;
    background-image:
      repeating-linear-gradient(74deg, rgba(233,206,132,0) 0 68px, rgba(233,206,132,0.22) 68px 69.8px, rgba(233,206,132,0) 69.8px 156px),
      repeating-linear-gradient(74deg, rgba(25,230,138,0) 0 40px, rgba(25,230,138,0.17) 40px 41.6px, rgba(25,230,138,0) 41.6px 108px);
    -webkit-mask-image: linear-gradient(74deg, transparent 4%, #000 32%, rgba(0,0,0,0.4) 66%, transparent 98%);
            mask-image: linear-gradient(74deg, transparent 4%, #000 32%, rgba(0,0,0,0.4) 66%, transparent 98%);
  }
  .sp-streak {
    --rot: -14deg;
    position: absolute; left: 0; height: 2px; border-radius: 999px;
    background: linear-gradient(90deg, rgba(201,162,74,0) 0%, rgba(233,206,132,0.9) 55%, rgba(255,255,255,0.98) 100%);
    box-shadow: 0 0 14px rgba(233,206,132,0.5);
    transform: rotate(var(--rot));
    filter: blur(0.4px);
    animation: spRun var(--d,3.6s) linear infinite;
    animation-delay: var(--dl,0s);
  }
  .sp-streak.g { background: linear-gradient(90deg, rgba(25,230,138,0) 0%, rgba(25,230,138,0.85) 55%, rgba(198,255,228,0.98) 100%); box-shadow: 0 0 14px rgba(25,230,138,0.5); }
  .sp-streak.w { background: linear-gradient(90deg, rgba(246,244,239,0) 0%, rgba(246,244,239,0.6) 58%, rgba(255,255,255,0.98) 100%); box-shadow: 0 0 10px rgba(255,255,255,0.4); }
  /* ลำแสงหนา = เบลอมาก เพื่อให้เหมือน motion blur ของกล้องแพนตามความเร็ว */
  .sp-streak.beam { filter: blur(3.2px); box-shadow: 0 0 30px rgba(233,206,132,0.35); }
  .sp-streak.beam.g { box-shadow: 0 0 30px rgba(25,230,138,0.35); }
  /* แถบล่าง = ไฟท้าย/ไฟถนนที่วิ่งเข้าหาจุดรวมสายตา (เกือบแนวนอน วิ่งเร็วกว่า) */
  .sp-trail { --rot: -3.2deg; height: 1.5px; filter: blur(0.9px); }
  @keyframes spRun {
    0%   { transform: translate3d(72vw,0,0) rotate(var(--rot)) scaleX(0.55); opacity: 0; }
    10%  { opacity: 1; }
    80%  { opacity: .7; }
    100% { transform: translate3d(-104vw,0,0) rotate(var(--rot)) scaleX(1.35); opacity: 0; }
  }
  /* จุดรวมแสง (vanishing point) ด้านขวา + แถบแสงแนวนอน */
  .sp-burst {
    position: absolute; top: 0; right: -6%; width: 46%; height: 100%; opacity: .75;
    background:
      radial-gradient(45% 34% at 96% 46%, rgba(255,232,178,0.30), transparent 70%),
      linear-gradient(90deg, rgba(255,236,190,0) 62%, rgba(255,236,190,0.10) 88%, rgba(255,236,190,0) 100%);
  }
  .sp-chev { position: absolute; right: -2%; bottom: -14%; width: min(56%,720px); height: 46%; opacity: .55; }
  .sp-bg.flip .sp-chev { right: auto; left: -2%; transform: scaleX(-1); }
  .sp-bg.plain::before { background: none; }   /* ใช้เฉพาะรางเส้น ไม่ทับสีพื้นเดิม */

  @media (max-width: 640px) {
    .sp-hide-sm { display: none; }          /* มือถือ: ลดเส้นที่วิ่ง ให้ลื่นขึ้น */
    .sp-chev { width: 86%; opacity: .4; }
  }
  @media (prefers-reduced-motion: reduce) {
    .sp-streak { animation: none; opacity: .3; }
    .sp-chev path { animation: none !important; }
  }

  /* ---- TIER 2: PREMIUM MOTION ---- */
  /* ก) scrollspy + แถบความคืบหน้าการเลื่อน */
  header { position: sticky; }
  #sp-progress { position:absolute; left:0; bottom:0; height:2px; width:100%; transform-origin:0 50%; transform:scaleX(0);
    background:linear-gradient(90deg,#C9A24A,#D9B968 60%,#19E68A); opacity:.9; }
  header nav a[data-r="navlinks"] { position:relative; transition:color .25s ease; }
  header nav a[data-r="navlinks"]::after { content:""; position:absolute; left:0; right:100%; bottom:-7px; height:2px;
    border-radius:2px; background:#C9A24A; transition:right .35s cubic-bezier(.22,.7,.3,1); }
  header nav a[data-r="navlinks"].on { color:#8A6A1F !important; }
  header nav a[data-r="navlinks"].on::after { right:0; }

  /* ข) เชฟรอนไล่แสงเป็นลูกคลื่น (ผลักสายตาเข้าหา CTA) */
  .sp-chev path { animation: spChev 3.2s ease-in-out infinite; }
  .sp-chev path:nth-child(2){ animation-delay:.28s; } .sp-chev path:nth-child(3){ animation-delay:.56s; }
  .sp-chev path:nth-child(4){ animation-delay:.84s; } .sp-chev path:nth-child(5){ animation-delay:1.12s; }
  @keyframes spChev { 0%,100% { opacity:.35; } 45% { opacity:1; } }

  /* ค) reveal เมื่อเลื่อนถึง (ต้องมามี JS เท่านั้น — ไม่มี JS = เห็นปกติ) */
  html.js [data-rv] { opacity:0; transform:translateY(18px);
    transition:opacity .65s ease, transform .65s cubic-bezier(.22,.7,.3,1); }
  html.js [data-rv].in { opacity:1; transform:none; }
  html.js [data-r="grid3"] > [data-rv]:nth-child(2){ transition-delay:.09s; }
  html.js [data-r="grid3"] > [data-rv]:nth-child(3){ transition-delay:.18s; }
  html.js [data-r="grid4"] > [data-rv]:nth-child(2){ transition-delay:.09s; }
  html.js [data-r="grid4"] > [data-rv]:nth-child(3){ transition-delay:.18s; }
  html.js [data-r="grid4"] > [data-rv]:nth-child(4){ transition-delay:.27s; }
  html.js .svc[data-rv]:nth-child(3n+2){ transition-delay:.09s; }
  html.js .svc[data-rv]:nth-child(3n){ transition-delay:.18s; }
  /* ง) เลข 01/02/03 โผล่ขึ้นจากใต้กรอบ (line-mask) */
  html.js .rvn { overflow:hidden; }
  html.js .rvn > span { display:inline-block; transform:translateY(115%);
    transition:transform .8s cubic-bezier(.22,.7,.3,1) .12s; }
  html.js .rvn.in > span { transform:none; }
  /* จ) parallax ตามเมาส์ — เฉพาะชั้นที่เลื่อนได้ นุ่มนวลตอนปล่อยเมาส์ */
  #top .sp-lanes, #top .sp-chev, #top .sp-burst, #top [data-r="heroart"] img { transition:translate .55s ease-out; }

/* ---------------------------------------------------------------------
   หน้าสินค้า/หน้าย่อย: ไฮไลต์เมนูของหน้าที่กำลังเปิดอยู่ (คู่กับ aria-current="page"
   ที่ตัว build ใส่ให้) ทำให้คนอ่านรู้ว่าตอนนี้อยู่ตรงไหนของเว็บ
   --------------------------------------------------------------------- */
header nav a[data-r="navlinks"][aria-current="page"] { color:#8A6A1F !important; }
header nav a[data-r="navlinks"][aria-current="page"]::after { right:0; }

/* ---------------------------------------------------------------------
   การ์ดแบรนด์ไฟร์วอลล์: กล่องโลโก้ความสูงคงที่
   เหตุผล: สัดส่วนโลโก้แต่ละแบรนด์ต่างกันมาก (Cisco 1.89:1 vs Fortinet 8.68:1)
   ถ้าปล่อยตามความสูงธรรมชาติ ชื่อแบรนด์จะไม่เริ่มบรรทัดเดียวกันทั้งแถว
   จึงล็อกความสูงกล่อง + ล็อกความสูงโลโก้ ให้ชื่อแบรนด์ตรงกันทุกใบ
   --------------------------------------------------------------------- */
.blogo { display:flex; align-items:center; height:40px; margin-bottom:14px; }
.blogo img { display:block; height:30px; width:auto; max-width:100%; }
@media (max-width: 640px) {
  .blogo { height:36px; }
  .blogo img { height:26px; }
}

/* การ์ด MA: จอแคบให้ภาพอยู่บนหัวข้อ (เรียงข้างกันแล้วหัวข้อตัด 3 บรรทัด อ่านยาก) */
@media (max-width: 640px) {
  [data-r="mahead"] { flex-direction: column; align-items: flex-start !important; gap: 10px; }
  [data-r="mahead"] img { width: 92px !important; }
}