:root{
      --bg:#4a161b;
      --bg-2:#5f1d23;
      --bg-3:#7a2a31;
      --panel:#5a1f24;
      --panel-2:#6d272d;
      --line:rgba(255,255,255,.13);
      --line-2:rgba(255,255,255,.20);
      --text:#fff8f8;
      --muted:#f0d7d7;
      --soft:#e7bbbb;
      --primary:#b31222;
      --primary-2:#df2437;
      --accent:#ffd98d;
      --shadow:0 18px 55px rgba(62,11,16,.28);
      --radius:26px;
      --container:min(1280px, calc(100% - 48px));
    }

    *{box-sizing:border-box;margin:0;padding:0}
    html{scroll-behavior:smooth}
    body{
      font-family:'Montserrat','Noto Sans Thai',sans-serif;
      color:var(--text);
      line-height:1.65;
      background:
        radial-gradient(circle at top left, rgba(255,135,155,.24), transparent 24%),
    radial-gradient(circle at top right, rgba(255,220,145,.12), transparent 28%),
    linear-gradient(180deg,#52191e 0%, #6e232a 42%, #8b3037 100%);
      overflow-x:hidden;
    }

    /* PARTICLE BACKGROUND */
    .bg-particles{
      position:fixed;
      inset:0;
      z-index:0;
      pointer-events:none;
    }
    .bg-particles canvas{
      width:100%;
      height:100%;
      display:block;
    }

    main, header, .topbar, .footer-wrap{
      position:relative;
      z-index:1;
    }
    a{text-decoration:none;color:inherit}
    img{max-width:100%;display:block}
    .container{width:var(--container);margin:0 auto}

    .topbar{
      background:linear-gradient(90deg,#c61f2d,#8f121c);
      border-bottom:1px solid rgba(255,255,255,.08);
      color:#fff;
      font-size:12px;
    }
    .topbar-inner{
      min-height:42px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:14px;
    }
    .topbar-left,.topbar-right{
      display:flex;
      align-items:center;
      gap:16px;
      flex-wrap:wrap;
    }
    .lang-switch{
      display:flex;
      align-items:center;
      gap:10px;
      padding:7px 12px;
      border-radius:999px;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(255,255,255,.08);
      font-weight:700;
    }
    .lang-switch a{opacity:.74}
    .lang-switch a.active{opacity:1;color:var(--accent)}

    .header{
      position:relative;
      background:#fff;
      z-index:50;
      border:0;
    }
    .header-inner{
      min-height:110px;
      display:grid;
      grid-template-columns:1fr auto 1fr;
      align-items:center;
      gap:18px;
    }
    .left-placeholder{min-width:42px}
    .logo-wrap{
      display:flex;
      align-items:center;
      justify-content:center;
      gap:14px;
      text-align:center;
    }
    .logo-mark img{height:58px;width:auto;object-fit:contain}
    .logo-text strong{
      display:block;
      font-size:24px;
      letter-spacing:.6px;
      line-height:1.05;
    }
    .logo-text span{
      display:block;
      font-size:11px;
      color:var(--muted);
      letter-spacing:2px;
      margin-top:5px;
    }
    .header-actions{
      display:flex;
      justify-content:flex-end;
      align-items:center;
      gap:12px;
    }
    .icon-btn{
      width:44px;height:44px;border-radius:50%;
      display:grid;place-items:center;
      border:1px solid var(--line-2);
      background:rgba(255,255,255,.04);
      color:#fff;
      cursor:pointer;
    }

    .nav-wrap{
      border-top:1px solid rgba(255,255,255,.04);
      border-bottom:1px solid rgba(255,255,255,.06);
      background:#000000;
    }
    .nav-wrap .container{
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:16px;
    }

    .nav{
      flex:1;
      min-height:64px;
      display:flex;
      align-items:center;
      justify-content:center;
      gap:8px;
      flex-wrap:wrap;
    }

    .lang-switch{
      margin-left:auto;
      flex:0 0 auto;
    }
    .nav a{
      padding:12px 16px;
      border-radius:10px;
      color:#f1dede;
      font-size:14px;
      font-weight:600;
      transition:.22s ease;
    }
    .nav a:hover,.nav a.active{
      background:rgba(255,255,255,.07);
      color:#fff;
    }
    .menu-toggle{display:none}

    .hero{
      padding:24px 0 18px;
    }
    .hero-slide{
      min-height:640px;
      border-radius:34px;
      overflow:hidden;
      position:relative;
      border:1px solid var(--line);
      box-shadow:var(--shadow);
    }
    .hero-slide-bg{
      position:absolute;
      inset:0;
      background-size:cover;
      background-position:center;
      background-repeat:no-repeat;
      transform:scale(1.02);
      opacity:1;
      transition:
        opacity .9s ease,
        transform 4.8s ease,
        filter .9s ease;
      will-change:opacity, transform, filter;
    }
    .hero-slide-bg.is-changing{
      opacity:.15;
      transform:scale(1.12) translateX(-18px);
      filter:blur(4px);
    }
    .hero-slide-bg::after{
      content:'';
      position:absolute;
      inset:0;
      background:linear-gradient(90deg, rgba(70,18,22,.58) 0%, rgba(85,22,28,.30) 45%, rgba(90,25,30,.12) 100%);
    }
    .hero-slide::after{
      content:'';
      position:absolute;inset:0;
      background:linear-gradient(180deg, rgba(255,255,255,.02) 0%, rgba(70,14,19,.18) 100%);
      pointer-events:none;
    }
    .hero-content{
      position:absolute;
      left:42px;bottom:42px;right:42px;
      z-index:2;
      max-width:760px;
    }
    .hero-content > *{
      transition:
        opacity .65s ease,
        transform .65s cubic-bezier(.22,1,.36,1);
    }
    .hero-content.is-changing > *{
      opacity:0;
      transform:translateY(22px);
    }
    .eyebrow{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 14px;
      border-radius:999px;
      background:rgba(169,12,24,.86);
      color:#fff;
      font-size:12px;
      font-weight:700;
      letter-spacing:1px;
      margin-bottom:16px;
    }
    .hero-content h1{
      font-size:58px;
      line-height:1.04;
      font-weight:800;
      margin-bottom:14px;
      text-shadow:0 5px 24px rgba(0,0,0,.35);
    }
    .hero-content p{
      max-width:620px;
      color:#f2dede;
      font-size:16px;
      margin-bottom:22px;
    }
    .hero-actions{display:flex;gap:12px;flex-wrap:wrap}
    .btn{
      display:inline-flex;
      align-items:center;
      justify-content:center;
      min-height:48px;
      padding:0 20px;
      border-radius:999px;
      font-weight:700;
      font-size:14px;
      transition:.2s ease;
    }
    .btn-primary{background:linear-gradient(90deg,var(--primary-2),var(--primary));color:#fff;box-shadow:0 10px 24px rgba(169,12,24,.35)}
    .btn-secondary{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.16);color:#fff}
    .hero-dots{
      position:absolute;
      left:50%;bottom:18px;
      transform:translateX(-50%);
      z-index:3;
      display:flex;gap:8px;
    }
    .hero-dots span{
      width:10px;height:10px;border-radius:50%;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.25);cursor:pointer;
      transition:.25s ease;
    }
    .hero-dots span.active{
      width:28px;
      border-radius:999px;
      background:var(--accent);
    }
    .hero-arrow{
      position:absolute;
      top:50%;
      transform:translateY(-50%);
      z-index:3;
      width:48px;
      height:48px;
      border-radius:50%;
      border:1px solid rgba(255,255,255,.18);
      background:rgba(10,3,4,.42);
      color:#fff;
      display:grid;
      place-items:center;
      cursor:pointer;
      backdrop-filter:blur(8px);
    }
    .hero-arrow:hover{background:rgba(255,255,255,.08)}
    .hero-arrow.prev{left:20px}
    .hero-arrow.next{right:20px}

    section{padding:38px 0}
    .section-head{
      text-align:center;
      margin-bottom:24px;
    }
    .section-head .sub{
      font-size:12px;
      text-transform:uppercase;
      letter-spacing:2px;
      color:var(--accent);
      font-weight:700;
      margin-bottom:8px;
    }
    .section-head h2{
      font-size:34px;
      font-weight:800;
      margin-bottom:10px;
    }
    .section-head p{
      max-width:760px;
      margin:0 auto;
      color:var(--muted);
    }

    .feature-section{padding-top:8px}
    .feature-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:20px;
      align-items:stretch;
    }
    .feature-card{
      background:linear-gradient(180deg, rgba(95,30,35,.96), rgba(70,22,26,.94));
      border:1px solid var(--line);
      border-radius:28px;
      overflow:hidden;
      box-shadow:var(--shadow);
      display:flex;
      flex-direction:column;
      min-height:100%;
    }
    .feature-card .content{padding:24px}
    .feature-card h3{
      font-size:13px;
      text-transform:uppercase;
      letter-spacing:1.2px;
      color:var(--soft);
      margin-bottom:12px;
    }
    .feature-card .title{
      font-size:30px;
      font-weight:800;
      line-height:1.08;
      margin-bottom:10px;
    }
    .feature-card p{font-size:14px;color:var(--muted)}
    .story-card{
      justify-content:space-between;
      background:linear-gradient(135deg, rgba(236,150,85,.95), rgba(194,88,39,.94));
      color:#2c0f08;
    }
    .story-card h3,.story-card p{color:#3a1810}
    .story-card .title{color:#1f0d08}
    .story-card .content{padding:28px}
    .story-card .btn-primary{background:#2a1214;color:#fff;box-shadow:none}
    .media-thumb{
      margin-top:auto;
      min-height:180px;
      background-size:cover;
      background-position:center;
      border-top:1px solid rgba(255,255,255,.08);
    }
    .settrade-card .media-thumb{
      background-image:
        linear-gradient(180deg, rgba(11,4,5,.12), rgba(11,4,5,.5)),
        url('https://images.unsplash.com/photo-1642790551116-18e150f4845d?auto=format&fit=crop&w=1000&q=80');
    }
    .fastmarkets-card .media-thumb{
      background-image:url('https://images.unsplash.com/photo-1554224155-6726b3ff858f?auto=format&fit=crop&w=1000&q=80');
    }
    .fx-card .media-thumb{
      background-image:url('https://images.unsplash.com/photo-1611974789855-9c2a0a7236a3?auto=format&fit=crop&w=1000&q=80');
    }

    .partner-section{padding-top:18px}
    .partner-wrap{
      background:linear-gradient(180deg, rgba(102,34,40,.92), rgba(75,24,29,.92));
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
      padding:26px 0;
    }
    .partner-marquee{
      position:relative;
      overflow:hidden;
      mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
      -webkit-mask-image:linear-gradient(to right, transparent, #000 8%, #000 92%, transparent);
    }
    .partner-track{
      display:flex;
      align-items:center;
      gap:18px;
      width:max-content;
      animation:partnerScroll 26s linear infinite;
      padding:6px 0;
    }
    .partner-marquee:hover .partner-track{animation-play-state:paused}
    .partner-logo{
      width:190px;
      min-width:190px;
      height:96px;
      border-radius:20px;
      border:1px solid rgba(255,255,255,.08);
      background:linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02));
      display:flex;
      align-items:center;
      justify-content:center;
      padding:18px;
      color:#fff;
      font-size:22px;
      font-weight:800;
      letter-spacing:.6px;
      text-transform:uppercase;
    }
    .partner-logo span{
      opacity:.9;
      text-align:center;
      line-height:1.15;
    }
    @keyframes partnerScroll{
      0%{transform:translateX(0)}
      100%{transform:translateX(-50%)}
    }

    .stats{padding-top:16px}
    .stats-grid{
      display:grid;
      grid-template-columns:repeat(4,1fr);
      gap:18px;
    }
    .stat-card{
      background:linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.045));
      border:1px solid var(--line);
      border-radius:24px;
      padding:28px 22px;
      text-align:center;
    }
    .stat-card .num{font-size:40px;font-weight:800;color:#fff;margin-bottom:4px}
    .stat-card .label{font-size:13px;color:var(--soft);text-transform:uppercase;letter-spacing:1px}



    .assurance-section{
      padding-top:18px;
    }
    .assurance-layout{
      display:grid;
      grid-template-columns:.95fr 1.35fr;
      gap:24px;
      align-items:stretch;
    }
    .assurance-highlight{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at top left, rgba(255,207,122,.18), transparent 34%),
        linear-gradient(145deg, rgba(120,42,48,.96), rgba(80,26,31,.94));
      box-shadow:var(--shadow);
      padding:34px;
      min-height:100%;
    }
    .assurance-highlight::after{
      content:'';
      position:absolute;
      width:220px;
      height:220px;
      right:-82px;
      bottom:-88px;
      border-radius:50%;
      border:34px solid rgba(255,255,255,.045);
    }
    .assurance-badge{
      width:78px;
      height:78px;
      border-radius:24px;
      display:grid;
      place-items:center;
      margin-bottom:22px;
      background:linear-gradient(135deg, var(--accent), #fff0c2);
      color:#3a080d;
      box-shadow:0 16px 34px rgba(255,207,122,.18);
    }
    .assurance-highlight h2{
      position:relative;
      z-index:1;
      font-size:36px;
      line-height:1.08;
      font-weight:800;
      margin-bottom:12px;
    }
    .assurance-highlight p{
      position:relative;
      z-index:1;
      color:#ecd2d2;
      font-size:15px;
      margin-bottom:22px;
    }
    .assurance-mini-list{
      position:relative;
      z-index:1;
      display:grid;
      gap:10px;
      list-style:none;
    }
    .assurance-mini-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#f8e6e6;
      font-size:14px;
    }
    .assurance-mini-list li::before{
      content:'✓';
      flex:0 0 auto;
      width:22px;
      height:22px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(255,207,122,.16);
      color:var(--accent);
      font-weight:800;
      font-size:12px;
      margin-top:1px;
    }
    .assurance-grid{
      display:grid;
      grid-template-columns:repeat(2,1fr);
      gap:16px;
    }
    .assurance-card{
      position:relative;
      overflow:hidden;
      min-height:210px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg, rgba(98,31,37,.96), rgba(72,23,28,.94));
      box-shadow:0 16px 42px rgba(0,0,0,.22);
      padding:22px;
      transition:transform .24s ease, border-color .24s ease, background .24s ease;
    }
    .assurance-card:hover{
      transform:translateY(-5px);
      border-color:rgba(255,207,122,.32);
      background:linear-gradient(180deg, rgba(125,42,49,.98), rgba(84,28,33,.96));
    }
    .assurance-card::before{
      content:'';
      position:absolute;
      inset:auto -42px -58px auto;
      width:130px;
      height:130px;
      border-radius:50%;
      background:rgba(213,20,36,.16);
    }
    .assurance-icon{
      width:46px;
      height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:15px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.08);
      color:var(--accent);
    }
    .assurance-card h3{
      position:relative;
      z-index:1;
      font-size:18px;
      line-height:1.2;
      margin-bottom:9px;
    }
    .assurance-card p{
      position:relative;
      z-index:1;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .assurance-tag{
      position:relative;
      z-index:1;
      display:inline-flex;
      align-items:center;
      margin-top:14px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,207,122,.10);
      color:var(--accent);
      font-size:11px;
      font-weight:800;
      letter-spacing:.7px;
      text-transform:uppercase;
    }

    .products-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:22px;
    }
    .product-card{
      background:linear-gradient(180deg, rgba(95,30,35,.96), rgba(70,22,26,.94));
      border:1px solid var(--line);
      border-radius:26px;
      overflow:hidden;
      box-shadow:var(--shadow);
      transition:transform .22s ease,border-color .22s ease;
    }
    .product-card:hover{transform:translateY(-4px);border-color:rgba(255,255,255,.18)}
    .product-image{height:220px;background-size:cover;background-position:center}
    .product-body{padding:22px}
    .product-body h3{font-size:20px;margin-bottom:10px}
    .product-body p{font-size:14px;color:var(--muted);min-height:92px}
    .product-meta{display:flex;justify-content:space-between;align-items:center;margin-top:14px;padding-top:14px;border-top:1px solid var(--line)}
    .chip{display:inline-flex;align-items:center;gap:8px;padding:8px 12px;border-radius:999px;background:rgba(255,255,255,.05);font-size:12px;color:#f7dfdf}

    .contact-section{padding-top:18px}
    .contact-grid{
      display:grid;
      grid-template-columns:1.05fr .95fr .95fr;
      gap:22px;
      align-items:start;
    }
    .contact-card{
      background:linear-gradient(180deg, rgba(95,30,35,.96), rgba(70,22,26,.94));
      border:1px solid var(--line);
      border-radius:28px;
      box-shadow:var(--shadow);
      overflow:hidden;
    }
    .contact-card-body{padding:26px}
    .contact-card h3{
      font-size:24px;
      font-weight:800;
      margin-bottom:12px;
    }
    .contact-card h4{
      font-size:18px;
      font-weight:700;
      margin-bottom:10px;
    }
    .contact-card p{font-size:14px;color:var(--muted)}
    .contact-form{display:grid;gap:14px}
    .form-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
    .input-group{display:grid;gap:8px}
    .input-group label{font-size:12px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;color:var(--soft)}
    .input-group input,
    .input-group textarea,
    .input-group select{
      width:100%;
      border:1px solid rgba(255,255,255,.10);
      background:rgba(255,255,255,.04);
      color:#fff;
      border-radius:14px;
      padding:14px 16px;
      font:inherit;
      outline:none;
    }
    .input-group textarea{min-height:150px;resize:vertical}
    .input-group input::placeholder,
    .input-group textarea::placeholder{color:#b99c9c}
    .map-embed{
      width:100%;
      height:260px;
      border:0;
      display:block;
      filter:grayscale(.15) contrast(1.02);
    }
    .address-list{list-style:none;display:grid;gap:10px;margin-top:14px}
    .address-list li{font-size:14px;color:var(--muted)}
    .address-tag{
      display:inline-flex;
      align-items:center;
      gap:8px;
      padding:8px 12px;
      border-radius:999px;
      background:rgba(255,255,255,.05);
      color:var(--accent);
      font-size:12px;
      font-weight:700;
      margin-bottom:10px;
    }

    .footer-wrap{
      margin-top:30px;
      background:linear-gradient(180deg, #5c1c22 0%, #3b1015 100%);
      border-top:1px solid rgba(213,20,36,.55);
    }
    .footer-main{
      padding:44px 0 26px;
      display:grid;
      grid-template-columns:1.35fr 1fr 1fr 1fr;
      gap:34px;
    }
    .footer-brand{padding-right:12px}
    .footer-logo{
      display:flex;align-items:flex-start;gap:12px;margin-bottom:18px;
    }
    .footer-logo img{height:56px;width:auto}
    .footer-logo-text strong{display:block;font-size:20px;line-height:1.1}
    .footer-logo-text span{display:block;font-size:12px;color:var(--soft);margin-top:6px;letter-spacing:1.3px}
    .footer-brand p{color:#f3e2e2;font-size:14px;max-width:360px}
    .footer-col h4{
      font-size:28px;
      margin-bottom:16px;
      color:transparent;
      display:none;
    }
    .footer-col-title{
      font-size:28px;
      font-weight:800;
      margin-bottom:14px;
      color:#fff;
    }
    .footer-list{list-style:none;display:grid;gap:10px}
    .footer-list li,.footer-list a{font-size:14px;color:#f1dede}
    .footer-list a:hover{color:var(--accent)}
    .copyright{
      border-top:1px solid rgba(255,255,255,.08);
      padding:16px 0 22px;
      display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
      color:var(--soft);font-size:13px;
    }

    .cookie-banner{
      position:fixed;
      left:0;right:0;bottom:0;
      z-index:90;
      background:linear-gradient(180deg,#651b23 0%, #430f16 100%);
      border-top:1px solid #d41222;
      box-shadow:0 -12px 30px rgba(0,0,0,.28);
    }
    .cookie-inner{
      min-height:94px;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap:24px;
      padding:18px 0;
    }
    .cookie-left{display:flex;align-items:flex-start;gap:16px;max-width:760px}
    .cookie-icon{
      width:34px;height:34px;border-radius:50%;
      display:grid;place-items:center;
      background:rgba(255,255,255,.14);
      font-size:18px;flex:0 0 auto;
    }
    .cookie-text strong{display:block;font-size:16px;margin-bottom:4px}
    .cookie-text p{font-size:13px;color:#e7cfcf}
    .cookie-text a{color:#ffbf76;text-decoration:underline}
    .cookie-actions{display:flex;align-items:center;gap:12px;flex-wrap:wrap}
    .btn-cookie-accept{
      min-width:160px;
      min-height:48px;
      border:none;
      border-radius:8px;
      background:#e20f1f;
      color:#fff;
      font-weight:800;
      cursor:pointer;
      padding:0 18px;
    }
    .btn-cookie-settings{
      min-width:120px;
      min-height:48px;
      border-radius:8px;
      border:1px solid rgba(255,255,255,.22);
      background:transparent;
      color:#fff;
      font-weight:700;
      cursor:pointer;
      padding:0 18px;
    }
    .cookie-close{
      width:40px;height:40px;border:none;border-radius:50%;
      background:transparent;color:#cda6a6;font-size:24px;cursor:pointer;
    }
    .cookie-banner.hidden{display:none}

    @media (max-width: 1180px){
      .header-inner{grid-template-columns:1fr auto 1fr}
      .nav{
        display:none;
        position:absolute;
        left:24px;right:24px;top:110px;
        background:#64222a;
        border:1px solid var(--line);
        border-radius:24px;
        padding:16px;
        box-shadow:var(--shadow);
        flex-direction:column;
        align-items:stretch;
      }
      .nav.open{display:flex}
      .nav-wrap .container{position:relative}
      .menu-toggle{display:grid}
      .feature-grid{grid-template-columns:repeat(2,1fr)}
      .footer-main{grid-template-columns:1fr 1fr}
  

    .assurance-section{
      padding-top:18px;
    }
    .assurance-layout{
      display:grid;
      grid-template-columns:.95fr 1.35fr;
      gap:24px;
      align-items:stretch;
    }
    .assurance-highlight{
      position:relative;
      overflow:hidden;
      border-radius:30px;
      border:1px solid rgba(255,255,255,.10);
      background:
        radial-gradient(circle at top left, rgba(255,207,122,.18), transparent 34%),
        linear-gradient(145deg, rgba(120,42,48,.96), rgba(80,26,31,.94));
      box-shadow:var(--shadow);
      padding:34px;
      min-height:100%;
    }
    .assurance-highlight::after{
      content:'';
      position:absolute;
      width:220px;
      height:220px;
      right:-82px;
      bottom:-88px;
      border-radius:50%;
      border:34px solid rgba(255,255,255,.045);
    }
    .assurance-badge{
      width:78px;
      height:78px;
      border-radius:24px;
      display:grid;
      place-items:center;
      margin-bottom:22px;
      background:linear-gradient(135deg, var(--accent), #fff0c2);
      color:#3a080d;
      box-shadow:0 16px 34px rgba(255,207,122,.18);
    }
    .assurance-highlight h2{
      position:relative;
      z-index:1;
      font-size:36px;
      line-height:1.08;
      font-weight:800;
      margin-bottom:12px;
    }
    .assurance-highlight p{
      position:relative;
      z-index:1;
      color:#ecd2d2;
      font-size:15px;
      margin-bottom:22px;
    }
    .assurance-mini-list{
      position:relative;
      z-index:1;
      display:grid;
      gap:10px;
      list-style:none;
    }
    .assurance-mini-list li{
      display:flex;
      align-items:flex-start;
      gap:10px;
      color:#f8e6e6;
      font-size:14px;
    }
    .assurance-mini-list li::before{
      content:'✓';
      flex:0 0 auto;
      width:22px;
      height:22px;
      border-radius:50%;
      display:grid;
      place-items:center;
      background:rgba(255,207,122,.16);
      color:var(--accent);
      font-weight:800;
      font-size:12px;
      margin-top:1px;
    }
    .assurance-grid{
      display:grid;
      grid-template-columns:repeat(3,1fr);
      gap:16px;
    }
    .assurance-card{
      position:relative;
      overflow:hidden;
      min-height:210px;
      border-radius:24px;
      border:1px solid rgba(255,255,255,.09);
      background:linear-gradient(180deg, rgba(98,31,37,.96), rgba(72,23,28,.94));
      box-shadow:0 16px 42px rgba(0,0,0,.22);
      padding:22px;
      transition:transform .24s ease, border-color .24s ease, background .24s ease;
    }
    .assurance-card:hover{
      transform:translateY(-5px);
      border-color:rgba(255,207,122,.32);
      background:linear-gradient(180deg, rgba(125,42,49,.98), rgba(84,28,33,.96));
    }
    .assurance-card::before{
      content:'';
      position:absolute;
      inset:auto -42px -58px auto;
      width:130px;
      height:130px;
      border-radius:50%;
      background:rgba(213,20,36,.16);
    }
    .assurance-icon{
      width:46px;
      height:46px;
      border-radius:16px;
      display:grid;
      place-items:center;
      margin-bottom:15px;
      background:rgba(255,255,255,.055);
      border:1px solid rgba(255,255,255,.08);
      color:var(--accent);
    }
    .assurance-card h3{
      position:relative;
      z-index:1;
      font-size:18px;
      line-height:1.2;
      margin-bottom:9px;
    }
    .assurance-card p{
      position:relative;
      z-index:1;
      color:var(--muted);
      font-size:13px;
      line-height:1.6;
    }
    .assurance-tag{
      position:relative;
      z-index:1;
      display:inline-flex;
      align-items:center;
      margin-top:14px;
      padding:7px 10px;
      border-radius:999px;
      background:rgba(255,207,122,.10);
      color:var(--accent);
      font-size:11px;
      font-weight:800;
      letter-spacing:.7px;
      text-transform:uppercase;
    }

    .products-grid{grid-template-columns:1fr 1fr}
      .contact-grid{grid-template-columns:1fr 1fr}
      .contact-grid .contact-card:first-child{grid-column:1 / -1}
      .assurance-layout{grid-template-columns:1fr}
      .assurance-grid{grid-template-columns:repeat(3,1fr)}
    }
    @media (max-width: 920px){
      .topbar-inner{padding:8px 0;justify-content:center}
      .topbar-left,.topbar-right{justify-content:center}
      .hero-slide{min-height:520px}
      .hero-content h1{font-size:44px}
      .feature-grid,.stats-grid{grid-template-columns:1fr 1fr}
      .assurance-grid{grid-template-columns:repeat(2,1fr)}
      .cookie-inner{flex-direction:column;align-items:flex-start}
      .cookie-actions{width:100%}
    }
    @media (max-width: 920px){
      .partner-logo{width:160px;min-width:160px;height:86px;font-size:18px}
    }
    @media (max-width: 680px){
      :root{--container:min(100% - 28px)}
      .header-inner{min-height:86px;grid-template-columns:1fr auto 1fr}
      .logo-mark img{height:46px}
      .logo-text strong{font-size:18px}
      .logo-text span{font-size:10px;letter-spacing:1.2px}
      .nav{left:14px;right:14px;top:86px}
      .hero{padding-top:16px}
      .hero-slide{min-height:420px;border-radius:24px}
      .hero-arrow{width:40px;height:40px}
      .hero-arrow.prev{left:12px}
      .hero-arrow.next{right:12px}
      .hero-content{left:20px;right:20px;bottom:22px}
      .hero-content h1{font-size:31px}
      .hero-content p{font-size:14px}
      .btn{width:100%}
      .feature-grid,.stats-grid,.products-grid,.assurance-grid,.footer-main{grid-template-columns:1fr}
      .assurance-highlight{padding:26px}
      .assurance-highlight h2{font-size:29px}
      .section-head h2{font-size:28px}
      .cookie-left{flex-direction:column;gap:10px}
      .cookie-actions{flex-direction:column;align-items:stretch}
      .btn-cookie-accept,.btn-cookie-settings{width:100%}
      .cookie-close{position:absolute;right:10px;top:10px}
      .cookie-inner{position:relative;padding-right:48px}
    }
    /* ===== MULTI SECTION BACKGROUND UPGRADE ===== */

.hero{
  background:
  linear-gradient(180deg, rgba(255,255,255,.02), rgba(0,0,0,0));
}

.feature-section{
  background:
  linear-gradient(180deg,#6b2329 0%, #5a1d22 100%);
}

.partner-section{
  background:
  linear-gradient(180deg,#4f171c 0%, #431216 100%);
}

.assurance-section{
  background:
  radial-gradient(circle at top right, rgba(255,215,140,.08), transparent 30%),
  linear-gradient(180deg,#742a30 0%, #5a1c21 100%);
}

.products-section{
  background:
  linear-gradient(180deg,#5c1d22 0%, #4a161b 100%);
}

.stats{
  background:
  linear-gradient(90deg,#8e2e36 0%, #6a2026 100%);
}

.contact-section{
  background:
  linear-gradient(180deg,#522025 0%, #42161a 100%);
}

.footer-wrap{
  background:
  linear-gradient(180deg,#2d0c10 0%, #160507 100%);
}
  

/* =========================================================
   PUBLIC COMPANY PREMIUM THEME - DROP IN OVERRIDE
   Based on provided mockup: red corporate header, white nav,
   rounded hero, bright background, premium cards.
   ========================================================= */
:root{
  --vp-red:#d71920;
  --vp-red-dark:#a90f19;
  --vp-red-deep:#7e0710;
  --vp-gold:#f4b24a;
  --vp-text:#22242a;
  --vp-muted:#6d7078;
  --vp-soft:#fff7f4;
  --vp-line:rgba(215,25,32,.14);
  --vp-shadow:0 18px 48px rgba(95,18,22,.16);
  --container:min(1320px, calc(100% - 56px));
}
html,body{background:#fff7f4;color:var(--vp-text)}
body{
  font-family:'Montserrat','Noto Sans Thai',sans-serif;
  background:
    radial-gradient(circle at 2% 42%, rgba(255,255,255,.95) 0 4%, transparent 15%),
    radial-gradient(circle at 98% 32%, rgba(255,255,255,.82) 0 3%, transparent 18%),
    linear-gradient(135deg, transparent 0 10%, rgba(215,25,32,.10) 10% 10.4%, transparent 10.4% 55%, rgba(244,178,74,.20) 55% 55.25%, transparent 55.25%),
    linear-gradient(180deg,#fffaf8 0%, #fff2ee 54%, #fffaf8 100%);
}
body::before,
body::after{
  content:'';
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:520px;
  height:520px;
  transform:rotate(34deg);
  background:linear-gradient(135deg, rgba(255,255,255,0) 0%, rgba(215,25,32,.95) 55%, rgba(125,7,16,.98) 100%);
  box-shadow:0 0 0 1px rgba(255,204,108,.25) inset;
}
body::before{left:-360px;top:120px;border-radius:34px}
body::after{right:-350px;bottom:-140px;border-radius:34px}
.bg-particles{display:none!important}
main, header, .footer-wrap{position:relative;z-index:1}
.container{width:var(--container)}

/* Header */
.header{
  position:relative;
  top:auto;
  z-index:50;
  background:transparent;
  border:0;
  backdrop-filter:none;
}
.header::before{
  content:'';
  display:block;
  height:112px;
  background:
    radial-gradient(circle at 10% 8%, rgba(255,255,255,.24), transparent 22%),
    linear-gradient(120deg, rgba(255,210,108,.75) 0 1px, transparent 1px 18%),
    linear-gradient(135deg,#f12b32 0%, #c91420 42%, #830913 100%);
  box-shadow:0 12px 28px rgba(110,14,20,.18);
}
.header-inner{
  position:absolute;
  left:50%;top:0;
  transform:translateX(-50%);
  width:var(--container);
  min-height:112px;
  grid-template-columns:1fr auto 1fr;
}
.logo-wrap{gap:18px;color:#fff;text-shadow:0 4px 16px rgba(0,0,0,.18)}
.logo-mark{
  width:74px;height:74px;border-radius:50%;
  display:grid;place-items:center;
  filter:drop-shadow(0 8px 12px rgba(0,0,0,.28));
}
.logo-mark img{height:68px!important;max-width:90px;object-fit:contain}
.logo-text strong{
  font-size:28px!important;
  letter-spacing:1px;
  font-weight:800;
  white-space:nowrap;
  color:#fff;
}
.header-actions .icon-btn{border-color:rgba(255,255,255,.45);background:rgba(255,255,255,.12)}

.nav-wrap{
  background:rgba(255,255,255,.93)!important;
  border:0;
  box-shadow:0 14px 34px rgba(97,19,22,.14);
  backdrop-filter:blur(10px);
}
.nav-wrap .container{min-height:78px;justify-content:center;position:relative}
.nav{min-height:78px;gap:14px;justify-content:center;flex:0 1 auto}
.nav a{
  color:#31343b!important;
  padding:10px 10px;
  font-size:14px;
  font-weight:700;
  border-radius:10px;
}
.nav a:hover,.nav a.active{
  color:#fff!important;
  background:linear-gradient(180deg,#ef3340,#d71920)!important;
  box-shadow:0 8px 22px rgba(215,25,32,.26);
}

/* Dropdown submenu */
.nav-item{position:relative;display:flex;align-items:center}
.nav-link{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.nav-caret{font-size:14px;line-height:1;opacity:.72;transform:translateY(-1px)}
.submenu{
  position:absolute;top:calc(100% + 12px);left:0;width:245px;padding:10px;border-radius:18px;
  background:rgba(255,255,255,.98);border:1px solid rgba(215,25,32,.12);
  box-shadow:0 18px 38px rgba(70,18,22,.18);opacity:0;visibility:hidden;
  transform:translateY(10px);transition:opacity .22s ease, transform .22s ease, visibility .22s ease;z-index:80;
}
.submenu::before{content:'';position:absolute;left:24px;top:-8px;width:16px;height:16px;background:#fff;border-left:1px solid rgba(215,25,32,.12);border-top:1px solid rgba(215,25,32,.12);transform:rotate(45deg)}
.submenu-right{left:auto;right:0}.submenu-right::before{left:auto;right:24px}
.nav-item:hover .submenu,.nav-item:focus-within .submenu{opacity:1;visibility:visible;transform:translateY(0)}
.submenu a{display:flex;align-items:center;width:100%;padding:11px 13px!important;border-radius:12px!important;color:#454850!important;font-size:14px!important;font-weight:700!important;line-height:1.25;background:transparent!important;box-shadow:none!important}
.submenu a:hover{color:#d71920!important;background:linear-gradient(90deg, rgba(215,25,32,.09), rgba(255,255,255,0))!important;box-shadow:none!important}
.nav-item:hover > .nav-link,.nav-item:focus-within > .nav-link{color:#fff!important;background:linear-gradient(180deg,#ef3340,#d71920)!important;box-shadow:0 8px 22px rgba(215,25,32,.26)}
.lang-switch{
  position:absolute;
  right:0;
  top:50%;
  transform:translateY(-50%);
  background:#fff!important;
  border:1px solid rgba(215,25,32,.20)!important;
  color:#777!important;
  padding:10px 18px!important;
  border-radius:999px!important;
  box-shadow:0 6px 18px rgba(153,30,35,.08);
}
.lang-switch a{color:#777!important;opacity:1!important;font-size:16px;font-weight:800}
.lang-switch a.active{color:#d71920!important}
.lang-switch span{color:#999;font-weight:800}

/* Hero */
.hero{padding:30px 0 0;background:transparent!important}
.hero-slide{
  min-height:545px!important;
  border-radius:32px!important;
  border:6px solid #fff!important;
  box-shadow:0 22px 44px rgba(86,33,33,.28), inset 0 0 0 1px rgba(255,255,255,.65)!important;
  overflow:hidden;
}
.hero-slide-bg::after{
  background:
    linear-gradient(90deg, rgba(0,0,0,.60) 0%, rgba(0,0,0,.30) 38%, rgba(0,0,0,.03) 82%)!important;
}
.hero-content{left:78px!important;bottom:62px!important;max-width:690px!important;color:#fff}
.eyebrow{
  background:linear-gradient(180deg,#ff3540,#dc1722)!important;
  color:#fff!important;
  padding:10px 17px!important;
  font-size:13px!important;
  letter-spacing:0!important;
  text-transform:none!important;
  box-shadow:0 8px 20px rgba(215,25,32,.28);
}
.hero-content h1{
  color:#fff!important;
  font-size:56px!important;
  line-height:1.05!important;
  letter-spacing:-1.2px;
  text-shadow:0 6px 20px rgba(0,0,0,.42)!important;
}
.hero-content p{color:rgba(255,255,255,.92)!important;font-size:15px!important;text-shadow:0 4px 16px rgba(0,0,0,.34)}
.btn{border-radius:999px!important;font-weight:800!important}
.btn-primary{background:linear-gradient(180deg,#ef3340,#d71920)!important;color:#fff!important;box-shadow:0 10px 22px rgba(215,25,32,.30)!important}
.btn-secondary{background:#fff!important;color:#2d2f35!important;border:1px solid rgba(215,25,32,.22)!important;box-shadow:0 8px 22px rgba(0,0,0,.12)!important}
.hero-arrow{
  width:54px!important;height:54px!important;
  background:linear-gradient(180deg,#e72631,#b7101b)!important;
  border:2px solid rgba(255,255,255,.55)!important;
  box-shadow:0 10px 24px rgba(120,12,18,.32)!important;
}
.hero-arrow.prev{left:14px!important}.hero-arrow.next{right:14px!important}
.hero-dots span{background:rgba(255,255,255,.72)!important;border:0!important;width:10px!important;height:10px!important}
.hero-dots span.active{background:#d71920!important;width:10px!important;border-radius:50%!important;outline:3px solid rgba(255,255,255,.85)}

/* Quick cards */
.feature-section{background:transparent!important;padding:18px 0 34px!important}
.feature-grid{gap:18px!important;grid-template-columns:repeat(4,1fr)!important}
.feature-card{
  min-height:118px!important;
  border-radius:18px!important;
  background:rgba(255,255,255,.90)!important;
  border:1px solid rgba(215,25,32,.14)!important;
  box-shadow:0 14px 32px rgba(129,35,40,.12)!important;
  color:var(--vp-text)!important;
  flex-direction:row!important;
  align-items:center;
  overflow:visible!important;
  position:relative;
}
.feature-card::before{
  content:'';
  width:58px;height:58px;
  min-width:58px;
  margin-left:30px;
  border-radius:50%;
  background:linear-gradient(180deg,#ef3340,#ba101a);
  box-shadow:0 8px 18px rgba(130,14,20,.28);
}
.feature-card::after{
  content:'';
  position:absolute;
  left:48px;top:50%;
  width:22px;height:22px;
  transform:translateY(-50%);
  background:#fff;
  mask:var(--card-icon);
  -webkit-mask:var(--card-icon);
  mask-size:contain;-webkit-mask-size:contain;
  mask-repeat:no-repeat;-webkit-mask-repeat:no-repeat;
  mask-position:center;-webkit-mask-position:center;
}
.story-card{--card-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M3 21h18v-2H3v2Zm2-3h3V9H5v9Zm5 0h3V9h-3v9Zm5 0h3V9h-3v9ZM3 7h18L12 2 3 7Z'/%3E%3C/svg%3E")}
.settrade-card{--card-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M19 3H5a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V5a2 2 0 0 0-2-2ZM8.5 8A1.5 1.5 0 1 1 7 6.5 1.5 1.5 0 0 1 8.5 8ZM19 18H5l4.5-6 3.5 4.5 2.5-3L19 18Z'/%3E%3C/svg%3E")}
.fastmarkets-card{--card-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M4 19h16v2H4v-2Zm1-1h3v-7H5v7Zm5 0h3V5h-3v13Zm5 0h3V9h-3v9Zm3.2-14.6 1.4 1.4-5.6 5.6-3-3L5.7 12.7 4.3 11.3 11 4.6l3 3 4.2-4.2Z'/%3E%3C/svg%3E")}
.fx-card{--card-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M12 2a10 10 0 1 0 0 20 10 10 0 0 0 0-20Zm1 16.9V17a4 4 0 0 0 0-8V7.1c1 .2 1.8.7 2.4 1.4l1.4-1.4A6.4 6.4 0 0 0 13 5.1V4h-2v1.1A4 4 0 0 0 11 13v3.8a4.7 4.7 0 0 1-2.9-1.6l-1.5 1.4A6.8 6.8 0 0 0 11 18.9V20h2v-1.1ZM11 11a2 2 0 0 1 0-3.7V11Zm2 2.2a2 2 0 0 1 0 3.6v-3.6Z'/%3E%3C/svg%3E")}
.feature-card .content{padding:20px 22px!important}
.feature-card h3{
  color:#33363d!important;
  font-size:15px!important;
  letter-spacing:0!important;
  margin-bottom:0!important;
  line-height:1.2!important;
}
.feature-card .title{font-size:15px!important;color:#33363d!important;line-height:1.3!important;margin:0!important;font-weight:800!important}
.feature-card p{color:#555b66!important;font-size:13px!important;margin-top:3px!important;line-height:1.35!important;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.feature-card .media-thumb {
  display: none !important;
}

.feature-card .btn {
  display: inline-flex !important;
  margin-top: 10px;
  min-height: 36px;
  padding: 0 14px;
  font-size: 12px;
  position: relative;
  z-index: 5;
}

/* Bright corporate sections */
.partner-section,.assurance-section,.products-section,.contact-section,.stats{background:transparent!important;color:var(--vp-text)!important}
section{padding:50px 0!important}
.section-head .sub{color:#d71920!important}.section-head h2{color:#20232a!important}.section-head p{color:#6b707c!important}
.partner-wrap,.assurance-highlight,.assurance-card,.product-card,.contact-card,.stat-card{
  background:rgba(255,255,255,.92)!important;
  border:1px solid rgba(215,25,32,.12)!important;
  box-shadow:0 14px 34px rgba(120,28,34,.10)!important;
  color:var(--vp-text)!important;
}
.assurance-highlight{background:linear-gradient(135deg,#fff 0%,#fff4ef 100%)!important}
.assurance-highlight h2,.assurance-card h3,.product-body h3,.contact-card h3,.contact-card h4,.stat-card .num{color:#23262d!important}
.assurance-highlight p,.assurance-mini-list li,.assurance-card p,.product-body p,.contact-card p,.address-list li,.stat-card .label{color:#6b707c!important}
.assurance-mini-list li::before,.assurance-tag,.address-tag{background:rgba(215,25,32,.08)!important;color:#d71920!important}
.assurance-badge,.assurance-icon{background:linear-gradient(180deg,#ef3340,#d71920)!important;color:#fff!important;border:0!important}
.chip{background:#fff5f3!important;color:#b31222!important;border:1px solid rgba(215,25,32,.10)}
.input-group label{color:#b31222!important}.input-group input,.input-group textarea,.input-group select{background:#fff!important;color:#222!important;border:1px solid rgba(215,25,32,.16)!important}
.input-group input::placeholder,.input-group textarea::placeholder{color:#9a9a9a!important}
.partner-logo{background:#fff!important;color:#333!important;border-color:rgba(215,25,32,.10)!important;box-shadow:0 8px 20px rgba(110,28,32,.08)}

.footer-wrap{background:linear-gradient(180deg,#b30f1a 0%, #650812 100%)!important;border-top:4px solid #ef3340!important;color:#fff!important}
.footer-list li,.footer-list a,.footer-brand p,.copyright{color:rgba(255,255,255,.84)!important}
.footer-col-title{color:#fff!important}
.cookie-banner{background:#fff!important;border-top:3px solid #d71920!important;color:#23262d!important}.cookie-text p{color:#636873!important}.cookie-close{color:#d71920!important}.btn-cookie-settings{color:#d71920!important;border-color:rgba(215,25,32,.25)!important}

@media (max-width:1180px){
  .logo-text strong{font-size:22px!important;white-space:normal;text-align:center}
  .nav{position:absolute!important;top:78px!important;background:#fff!important;border:1px solid rgba(215,25,32,.14)!important;box-shadow:var(--vp-shadow)!important}
  .nav-wrap .container{justify-content:flex-start}.menu-toggle{display:grid!important}.feature-grid{grid-template-columns:repeat(2,1fr)!important}.lang-switch{right:70px}
}
@media (max-width:780px){
  :root{--container:min(100% - 28px)}
  .header::before{height:92px}.header-inner{min-height:92px}.logo-mark{width:52px;height:52px}.logo-mark img{height:50px!important}.logo-text strong{font-size:16px!important}.nav-wrap .container{min-height:68px}.lang-switch{right:0;padding:8px 14px!important}.hero-content{left:26px!important;right:26px!important;bottom:34px!important}.hero-content h1{font-size:34px!important}.hero-slide{min-height:430px!important;border-width:4px!important}.feature-grid{grid-template-columns:1fr!important}.feature-card::before{margin-left:20px}.feature-card .content{padding:18px!important}
}

  
@media (max-width:1180px){
  .nav{gap:8px!important;align-items:stretch!important;overflow:visible}
  .nav-item{width:100%;display:block}
  .nav-link{width:100%;justify-content:space-between}
  .submenu{position:static;width:100%;margin:6px 0 8px;padding:8px;border-radius:16px;box-shadow:none;background:rgba(255,255,255,.92);opacity:1;visibility:visible;transform:none;display:none}
  .submenu::before{display:none}
  .nav-item:hover .submenu,.nav-item:focus-within .submenu{display:block}
}

  

/* =========================================================
   SECTION BACKGROUND SEPARATION - FINAL OVERRIDE
   File: varo-public-theme-section-bg.html
   Purpose: make each homepage section visually separated
   while keeping the public-company premium red/white theme.
   ========================================================= */
main{
  background:
    radial-gradient(circle at 8% 8%, rgba(255,255,255,.95), transparent 16%),
    linear-gradient(180deg,#fff8f5 0%,#fff3ef 100%);
}
section{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  padding:64px 0!important;
}
section::before{
  content:'';
  position:absolute;
  inset:0;
  z-index:-2;
  pointer-events:none;
}
section::after{
  content:'';
  position:absolute;
  left:50%;
  bottom:0;
  width:min(1180px, calc(100% - 56px));
  height:1px;
  transform:translateX(-50%);
  background:linear-gradient(90deg, transparent, rgba(215,25,32,.18), transparent);
  z-index:-1;
  pointer-events:none;
}

/* 1) HERO: soft cream / pink stage */
.hero{
  padding:34px 0 28px!important;
  background:
    radial-gradient(circle at 12% 20%, rgba(255,255,255,.98) 0 8%, transparent 24%),
    radial-gradient(circle at 88% 12%, rgba(244,178,74,.20), transparent 28%),
    linear-gradient(180deg,#fffaf8 0%, #fff2ee 100%)!important;
}
.hero::after{display:none}

/* 2) QUICK CARDS: white clean section */
.feature-section{
  padding:26px 0 58px!important;
  background:
    linear-gradient(180deg,#ffffff 0%,#fff9f7 100%)!important;
}
.feature-section::before{
  background:
    radial-gradient(circle at 5% 70%, rgba(215,25,32,.055), transparent 26%),
    radial-gradient(circle at 96% 22%, rgba(244,178,74,.12), transparent 22%);
}

/* 3) PARTNERS: very light grey to separate from cards */
.partner-section{
  background:
    linear-gradient(180deg,#f5f6f8 0%,#ffffff 100%)!important;
}
.partner-section::before{
  background:
    linear-gradient(135deg, rgba(215,25,32,.045) 0 22%, transparent 22% 100%),
    radial-gradient(circle at 88% 72%, rgba(215,25,32,.06), transparent 24%);
}
.partner-wrap{
  background:rgba(255,255,255,.96)!important;
}

/* 4) ASSURANCE: red-tinted premium block */
.assurance-section{
  background:
    radial-gradient(circle at 85% 18%, rgba(244,178,74,.18), transparent 28%),
    linear-gradient(180deg,#fff1ec 0%,#ffe6df 100%)!important;
}
.assurance-section::before{
  background:
    linear-gradient(120deg, transparent 0 62%, rgba(215,25,32,.08) 62% 62.4%, transparent 62.4%),
    radial-gradient(circle at 12% 78%, rgba(215,25,32,.08), transparent 24%);
}
.assurance-highlight,
.assurance-card{
  background:rgba(255,255,255,.94)!important;
}

/* 5) PRODUCTS: pure white catalogue section */
.products-section{
  background:
    linear-gradient(180deg,#ffffff 0%,#fffaf8 100%)!important;
}
.products-section::before{
  background:
    radial-gradient(circle at 4% 18%, rgba(215,25,32,.045), transparent 20%),
    radial-gradient(circle at 94% 84%, rgba(244,178,74,.10), transparent 24%);
}
.product-card{
  background:#fff!important;
}

/* 6) STATS: strong red band, clearly separated */
.stats{
  padding:54px 0!important;
  background:
    radial-gradient(circle at 12% 12%, rgba(255,255,255,.18), transparent 22%),
    radial-gradient(circle at 92% 80%, rgba(244,178,74,.22), transparent 28%),
    linear-gradient(135deg,#ef3340 0%,#c91420 44%,#7e0710 100%)!important;
  color:#fff!important;
}
.stats::after{display:none}
.stats .stat-card{
  background:rgba(255,255,255,.13)!important;
  border:1px solid rgba(255,255,255,.22)!important;
  box-shadow:0 18px 40px rgba(90,8,14,.22)!important;
  backdrop-filter:blur(10px);
}
.stats .stat-card .num,
.stats .stat-card .label{
  color:#fff!important;
}
.stats .stat-card .label{
  opacity:.86;
}

/* 7) CONTACT: warm cream form area */
.contact-section{
  background:
    radial-gradient(circle at 88% 20%, rgba(215,25,32,.055), transparent 22%),
    linear-gradient(180deg,#fff6f1 0%,#ffefe8 100%)!important;
}
.contact-section::before{
  background:
    linear-gradient(145deg, transparent 0 72%, rgba(215,25,32,.065) 72% 72.4%, transparent 72.4%);
}
.contact-card{
  background:rgba(255,255,255,.95)!important;
}

/* Stronger section headings to make each area obvious */
.section-head{
  margin-bottom:32px!important;
}
.section-head .sub{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:30px;
  padding:0 14px;
  border-radius:999px;
  background:rgba(215,25,32,.08);
  border:1px solid rgba(215,25,32,.12);
  color:#d71920!important;
}
.stats .section-head .sub{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
  color:#fff!important;
}

/* Footer stays dark red for strong ending */
.footer-wrap{
  margin-top:0!important;
  background:
    radial-gradient(circle at 10% 0%, rgba(255,255,255,.10), transparent 26%),
    linear-gradient(180deg,#a90f19 0%,#620812 100%)!important;
}

@media (max-width:780px){
  section{padding:46px 0!important}
  .hero{padding:20px 0 22px!important}
  .feature-section{padding:22px 0 42px!important}
  .stats{padding:42px 0!important}
}



/* =========================================================
   VARO FINAL PREMIUM DECORATION OVERRIDE
   Adds previous diagonal body::before / body::after shapes
   and stronger section separation for the final version.
   ========================================================= */
html, body{
  background:#fff7f4!important;
  min-height:100%;
}
body{
  position:relative;
  overflow-x:hidden;
  background:
    radial-gradient(circle at 4% 28%, rgba(255,255,255,.98) 0 5%, transparent 18%),
    radial-gradient(circle at 96% 22%, rgba(244,178,74,.20), transparent 22%),
    linear-gradient(135deg, transparent 0 11%, rgba(215,25,32,.075) 11% 11.35%, transparent 11.35% 56%, rgba(244,178,74,.16) 56% 56.25%, transparent 56.25%),
    linear-gradient(180deg,#fffaf8 0%, #fff1ed 48%, #fff9f6 100%)!important;
}

body::before,
body::after{
  content:'';
  position:fixed;
  z-index:0;
  pointer-events:none;
  width:520px;
  height:520px;
  transform:rotate(34deg);
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(215,25,32,.95) 55%,
    rgba(125,7,16,.98) 100%
  );
  box-shadow:
    0 0 0 1px rgba(255,204,108,.25) inset,
    0 22px 60px rgba(125,7,16,.22);
  border-radius:34px;
}
body::before{left:-360px;top:120px;}
body::after{right:-350px;bottom:-140px;}

main,
header,
.footer-wrap,
.cookie-banner{
  position:relative;
  z-index:1;
}

section{
  border-top:1px solid rgba(215,25,32,.055);
}
.hero{
  border-top:0;
}
.feature-section,
.products-section{
  background:
    radial-gradient(circle at 10% 18%, rgba(215,25,32,.035), transparent 20%),
    linear-gradient(180deg,#ffffff 0%,#fff8f5 100%)!important;
}
.partner-section,
.contact-section{
  background:
    radial-gradient(circle at 90% 26%, rgba(215,25,32,.045), transparent 22%),
    linear-gradient(180deg,#f6f7f9 0%,#ffffff 100%)!important;
}
.assurance-section{
  background:
    radial-gradient(circle at 84% 12%, rgba(244,178,74,.22), transparent 28%),
    radial-gradient(circle at 8% 78%, rgba(215,25,32,.08), transparent 26%),
    linear-gradient(180deg,#fff2ed 0%,#ffe7df 100%)!important;
}
.stats{
  background:
    radial-gradient(circle at 12% 18%, rgba(255,255,255,.22), transparent 24%),
    linear-gradient(135deg,#ef3340 0%,#d71920 44%,#8f0a14 100%)!important;
}
.stats .stat-card{
  background:rgba(255,255,255,.14)!important;
  border-color:rgba(255,255,255,.26)!important;
  box-shadow:0 18px 42px rgba(80,6,12,.20)!important;
}
.stats .stat-card .num,
.stats .stat-card .label{color:#fff!important;}

.partner-wrap,
.assurance-highlight,
.assurance-card,
.product-card,
.contact-card,
.feature-card,
.stat-card{
  backdrop-filter:blur(10px);
}

.footer-wrap{
  margin-top:0!important;
  background:
    radial-gradient(circle at 12% 0%, rgba(255,255,255,.12), transparent 20%),
    linear-gradient(180deg,#b30f1a 0%, #650812 100%)!important;
}

@media (max-width:780px){
  body::before{left:-430px;top:90px;opacity:.75;}
  body::after{right:-430px;bottom:-210px;opacity:.75;}
}

  

/* =========================================================
   FIX: MAKE BODY::BEFORE / BODY::AFTER VISIBLE
   The section backgrounds were covering z-index:0 pseudo elements.
   This brings the shapes above section backgrounds but keeps content above them.
   ========================================================= */
body{
  position:relative!important;
  overflow-x:hidden!important;
  isolation:isolate;
}
body::before,
body::after{
  content:''!important;
  position:fixed!important;
  display:block!important;
  z-index:2!important;
  pointer-events:none!important;
  width:560px!important;
  height:560px!important;
  opacity:.96!important;
  transform:rotate(34deg)!important;
  border-radius:36px!important;
  background:linear-gradient(
    135deg,
    rgba(255,255,255,0) 0%,
    rgba(215,25,32,.98) 54%,
    rgba(125,7,16,.98) 100%
  )!important;
  box-shadow:
    0 0 0 1px rgba(255,204,108,.30) inset,
    0 24px 70px rgba(125,7,16,.24)!important;
}
body::before{
  left:-365px!important;
  top:150px!important;
}
body::after{
  right:-365px!important;
  bottom:-150px!important;
}

/* Keep actual content above the decorative shapes */
header,
.nav-wrap,
.footer-wrap,
.cookie-banner{
  position:relative!important;
  z-index:10!important;
}
main{
  position:relative!important;
  z-index:3!important;
}
section{
  position:relative!important;
  z-index:1!important;
  overflow:hidden;
}
section > .container{
  position:relative!important;
  z-index:4!important;
}

@media (max-width:780px){
  body::before{
    left:-455px!important;
    top:105px!important;
    opacity:.86!important;
  }
  body::after{
    right:-455px!important;
    bottom:-235px!important;
    opacity:.86!important;
  }
}

  

/* =========================================================
   MOCKUP MATCH FINAL OVERRIDE
   Layout/style adjusted to match provided screenshot:
   white corporate page, red wave header, white nav, visible side ribbons.
   ========================================================= */
html,body{
  background:#fff!important;
  color:#22242a!important;
}
body{
  position:relative!important;
  overflow-x:hidden!important;
  background:
    radial-gradient(circle at 4% 32%, rgba(255,255,255,.95) 0 7%, transparent 16%),
    radial-gradient(circle at 96% 38%, rgba(255,255,255,.9) 0 5%, transparent 18%),
    linear-gradient(132deg, transparent 0 18%, rgba(210,216,222,.32) 18.1% 18.7%, transparent 18.8% 58%, rgba(210,216,222,.28) 58.1% 59%, transparent 59.1%),
    #fff!important;
}

/* visible red ribbons like mockup */
body::before,
body::after{
  content:''!important;
  position:fixed!important;
  display:block!important;
  pointer-events:none!important;
  z-index:0!important;
  opacity:1!important;
}
body::before{
  left:-310px!important;
  top:120px!important;
  width:560px!important;
  height:690px!important;
  border-radius:0 0 220px 0!important;
  transform:rotate(0deg)!important;
  background:
    linear-gradient(135deg, rgba(255,255,255,0) 0 38%, rgba(255,255,255,.16) 38.5% 40%, transparent 40.5%),
    linear-gradient(142deg,#e60012 0%,#c90012 48%,#86000b 100%)!important;
  box-shadow:inset -12px 0 0 rgba(255,214,115,.42), 18px 0 48px rgba(190,0,18,.12)!important;
}
body::after{
  right:-360px!important;
  bottom:-230px!important;
  width:620px!important;
  height:760px!important;
  border-radius:340px 0 0 0!important;
  transform:rotate(0deg)!important;
  background:
    linear-gradient(132deg, transparent 0 24%, rgba(255,214,115,.48) 24.5% 25%, transparent 25.5%),
    linear-gradient(145deg,#f00016 0%,#c90012 48%,#760009 100%)!important;
  box-shadow:inset 14px 0 0 rgba(255,255,255,.18), -20px 0 48px rgba(190,0,18,.12)!important;
}
main,header,.footer-wrap,section{position:relative!important;z-index:1!important;}
.bg-particles{display:none!important;}

/* top logo header */
.header{
  position:relative!important;
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
}
.header::before{
  content:''!important;
  display:block!important;
  height:122px!important;
  background:
    radial-gradient(ellipse 500px 210px at 1% -70%, #d60012 0 67%, transparent 68%),
    radial-gradient(ellipse 790px 260px at 88% -85%, #d70012 0 66%, transparent 67%),
    linear-gradient(120deg, transparent 0 56%, rgba(255,207,84,.50) 56.1% 56.35%, transparent 56.5% 100%),
    linear-gradient(122deg, transparent 0 60%, rgba(128,0,10,.26) 60.2% 75%, transparent 75.2%),
    linear-gradient(180deg,#fff 0%,#fbfbfb 100%)!important;
  box-shadow:none!important;
}
.header-inner{
  position:absolute!important;
  top:0!important;
  left:50%!important;
  transform:translateX(-50%)!important;
  width:var(--container)!important;
  min-height:122px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
}
.left-placeholder{display:none!important;}
.logo-wrap{
  justify-content:flex-start!important;
  text-align:left!important;
  gap:16px!important;
  color:#22242a!important;
  text-shadow:none!important;
}
.logo-mark{
  width:86px!important;
  height:86px!important;
  filter:drop-shadow(0 8px 10px rgba(0,0,0,.20))!important;
}
.logo-mark img{
  height:82px!important;
  max-width:100px!important;
}
.logo-text strong{
  color:#22242a!important;
  font-size:26px!important;
  line-height:1.08!important;
  letter-spacing:.3px!important;
  font-weight:800!important;
  white-space:normal!important;
}
.logo-text::before{
  content:'บริษัท วโรปกรณ์ จำกัด มหาชน';
  display:block;
  color:#22242a;
  font-family:'Noto Sans Thai','Montserrat',sans-serif;
  font-size:25px;
  line-height:1.05;
  font-weight:800;
  margin-bottom:5px;
}
.header-actions{margin-left:auto!important;}

/* nav bar */
.nav-wrap{
  background:#fff!important;
  border:0!important;
  box-shadow:0 8px 22px rgba(0,0,0,.18)!important;
  backdrop-filter:none!important;
}
.nav-wrap .container{
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  position:relative!important;
}
.nav{
  min-height:78px!important;
  gap:24px!important;
  justify-content:center!important;
  flex:0 1 auto!important;
  padding-right:120px!important;
}
.nav a,.nav-link{
  color:#252830!important;
  font-size:14px!important;
  font-weight:800!important;
  padding:13px 12px!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
}
.nav a:hover,.nav a.active,.nav-link:hover,.nav-link.active,
.nav-item:hover > .nav-link,.nav-item:focus-within > .nav-link{
  color:#fff!important;
  background:linear-gradient(180deg,#ef1f2c,#c90715)!important;
  box-shadow:0 8px 18px rgba(201,7,21,.22)!important;
}
.lang-switch{
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  background:#fff!important;
  border:1px solid rgba(215,25,32,.18)!important;
  box-shadow:0 4px 14px rgba(80,20,25,.08)!important;
  padding:9px 18px!important;
  color:#777!important;
}
.lang-switch a{font-size:17px!important;color:#777!important;font-weight:800!important;}
.lang-switch a.active{color:#d71920!important;}

/* hero position/size like screenshot */
.hero{
  padding:24px 0 0!important;
  background:transparent!important;
}
.hero-slide{
  min-height:548px!important;
  border-radius:24px!important;
  border:4px solid #fff!important;
  box-shadow:0 12px 26px rgba(0,0,0,.28)!important;
}
.hero-content{
  left:90px!important;
  bottom:68px!important;
  max-width:720px!important;
}
.hero-content h1{
  font-size:54px!important;
  line-height:1.08!important;
  letter-spacing:-1.6px!important;
  text-shadow:0 6px 16px rgba(0,0,0,.44)!important;
}
.eyebrow{
  padding:9px 17px!important;
  font-size:13px!important;
  background:#ed1c24!important;
}
.hero-arrow{
  width:54px!important;
  height:54px!important;
  border:2px solid rgba(255,255,255,.48)!important;
  background:linear-gradient(180deg,#ef1f2c,#c90715)!important;
}
.hero-arrow.prev{left:14px!important;}
.hero-arrow.next{right:14px!important;}
.hero-dots{bottom:22px!important;}
.hero-dots span,.hero-dots span.active{
  width:10px!important;
  height:10px!important;
  border-radius:50%!important;
  outline:none!important;
}
.hero-dots span.active{background:#fff!important;}

/* feature cards directly under hero */
.feature-section{
  padding:14px 0 38px!important;
  background:transparent!important;
}
.feature-grid{
  max-width:1260px!important;
  margin:0 auto!important;
  gap:0!important;
  grid-template-columns:repeat(4,1fr)!important;
  border-radius:18px!important;
  overflow:hidden!important;
  box-shadow:0 8px 24px rgba(0,0,0,.14)!important;
}
.feature-card{
  border-radius:0!important;
  box-shadow:none!important;
  border:0!important;
  border-right:1px solid #e9e4e4!important;
  min-height:110px!important;
  background:#fff!important;
}
.feature-card:last-child{border-right:0!important;}
.feature-card::before{
  width:56px!important;
  height:56px!important;
  min-width:56px!important;
  margin-left:34px!important;
  background:linear-gradient(180deg,#ef1f2c,#bf0714)!important;
}
.feature-card::after{left:51px!important;}
.feature-card h3{font-size:15px!important;color:#24272e!important;font-weight:800!important;}
.feature-card p{font-size:13px!important;color:#333!important;}
.feature-card .title{font-size:14px!important;color:#333!important;}

/* section alternation but keep page light and shapes visible */
.partner-section{background:linear-gradient(180deg,#fff 0%,#f7f8fa 100%)!important;}
.assurance-section{background:linear-gradient(180deg,#fff8f5 0%,#fff 100%)!important;}
.products-section{background:#f7f8fa!important;}
.stats{background:linear-gradient(90deg,#d71920 0%,#930812 100%)!important;}
.contact-section{background:#fffaf7!important;}
.footer-wrap{background:linear-gradient(180deg,#a90f19,#5d050c)!important;}

@media (max-width:1180px){
  .header::before{height:104px!important;}
  .header-inner{min-height:104px!important;}
  .logo-text::before{font-size:20px!important;}
  .logo-text strong{font-size:20px!important;}
  .nav{padding-right:0!important;gap:8px!important;}
  .feature-grid{grid-template-columns:repeat(2,1fr)!important;gap:1px!important;}
}
@media (max-width:780px){
  .header::before{height:92px!important;}
  .header-inner{min-height:92px!important;}
  .logo-mark{width:58px!important;height:58px!important;}
  .logo-mark img{height:56px!important;}
  .logo-text::before{font-size:15px!important;}
  .logo-text strong{font-size:14px!important;}
  .hero-content{left:28px!important;right:28px!important;bottom:40px!important;}
  .hero-content h1{font-size:32px!important;}
  .feature-grid{grid-template-columns:1fr!important;}
}


/* =========================================================
   HEADER FINAL UPDATE FROM USER FILE
   Goal: match provided mockup header more closely
   - white/red curved top header
   - logo aligned left
   - white nav bar below
   - language switch on far right
   ========================================================= */
:root{
  --container:min(1320px, calc(100% - 56px));
}

.header{
  position:relative!important;
  z-index:50!important;
  background:#fff!important;
  border:0!important;
  box-shadow:none!important;
  overflow:visible!important;
}

.header::before{
  content:''!important;
  display:block!important;
  height:124px!important;
  background:
    radial-gradient(ellipse 520px 250px at 0% -85%, #d90012 0 65%, transparent 66%),
    radial-gradient(ellipse 860px 285px at 86% -95%, #d90012 0 64%, transparent 65%),
    linear-gradient(123deg, transparent 0 56%, rgba(255,213,96,.52) 56.15% 56.45%, transparent 56.7% 100%),
    linear-gradient(125deg, transparent 0 61%, rgba(125,0,10,.28) 61.3% 75%, transparent 75.3%),
    linear-gradient(180deg,#ffffff 0%,#fbfbfb 100%)!important;
  box-shadow:none!important;
}

.header::after{
  content:''!important;
  position:absolute!important;
  right:0!important;
  top:0!important;
  width:60%!important;
  height:124px!important;
  pointer-events:none!important;
  z-index:1!important;
  background:
    radial-gradient(ellipse 760px 210px at 70% -35%, rgba(130,0,10,.30) 0 54%, transparent 55%),
    linear-gradient(118deg, transparent 0 40%, rgba(255,255,255,.10) 40.2% 40.8%, transparent 41% 100%)!important;
}

.header-inner{
  position:absolute!important;
  left:50%!important;
  top:0!important;
  transform:translateX(-50%)!important;
  width:var(--container)!important;
  height:124px!important;
  min-height:124px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  z-index:3!important;
}

.left-placeholder{display:none!important;}

.logo-wrap{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-start!important;
  gap:18px!important;
  text-align:left!important;
  color:#20232a!important;
  text-shadow:none!important;
  margin-left:0!important;
}

.logo-mark{
  width:86px!important;
  height:86px!important;
  display:grid!important;
  place-items:center!important;
  filter:drop-shadow(0 7px 8px rgba(0,0,0,.22))!important;
}
.logo-mark img{
  height:82px!important;
  width:auto!important;
  max-width:100px!important;
  object-fit:contain!important;
}

.logo-text strong{
  display:block!important;
  color:#20232a!important;
  font-size:25px!important;
  line-height:1.08!important;
  font-weight:800!important;
  letter-spacing:.25px!important;
  white-space:normal!important;
}
.logo-text::before{
  content:'บริษัท วโรปกรณ์ จำกัด มหาชน'!important;
  display:block!important;
  color:#20232a!important;
  font-family:'Noto Sans Thai','Montserrat',sans-serif!important;
  font-size:26px!important;
  font-weight:800!important;
  line-height:1.05!important;
  margin-bottom:5px!important;
}

.header-actions{
  margin-left:auto!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  z-index:4!important;
}
.header-actions .icon-btn{
  color:#d71920!important;
  background:#fff!important;
  border:1px solid rgba(215,25,32,.22)!important;
}

.nav-wrap{
  position:relative!important;
  z-index:60!important;
  background:#fff!important;
  border:0!important;
  box-shadow:0 9px 24px rgba(0,0,0,.16)!important;
  backdrop-filter:none!important;
}
.nav-wrap .container{
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:16px!important;
  position:relative!important;
}
.nav{
  min-height:78px!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:18px!important;
  flex:0 1 auto!important;
  padding-right:130px!important;
}
.nav-item{position:relative!important;display:flex!important;align-items:center!important;}
.nav a,
.nav-link{
  display:inline-flex!important;
  align-items:center!important;
  gap:6px!important;
  color:#20232a!important;
  font-size:13px!important;
  line-height:1!important;
  font-weight:800!important;
  padding:13px 8px!important;
  border-radius:999px!important;
  background:transparent!important;
  box-shadow:none!important;
  white-space:nowrap!important;
  transition:.22s ease!important;
}
.nav a:hover,
.nav a.active,
.nav-link:hover,
.nav-link.active,
.nav-item:hover > .nav-link,
.nav-item:focus-within > .nav-link{
  color:#fff!important;
  background:linear-gradient(180deg,#ef1f2c 0%,#c90715 100%)!important;
  box-shadow:0 8px 18px rgba(201,7,21,.24)!important;
}

.submenu{
  top:calc(100% + 12px)!important;
  left:0!important;
  width:250px!important;
  padding:10px!important;
  border-radius:18px!important;
  background:#fff!important;
  border:1px solid rgba(215,25,32,.12)!important;
  box-shadow:0 18px 38px rgba(70,18,22,.18)!important;
  z-index:999!important;
}
.submenu a{
  color:#454850!important;
  padding:11px 13px!important;
  border-radius:12px!important;
  font-weight:700!important;
  font-size:14px!important;
}
.submenu a:hover{
  color:#d71920!important;
  background:linear-gradient(90deg, rgba(215,25,32,.09), rgba(255,255,255,0))!important;
  box-shadow:none!important;
}

.lang-switch{
  position:absolute!important;
  right:0!important;
  top:50%!important;
  transform:translateY(-50%)!important;
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
  background:#fff!important;
  border:1px solid rgba(215,25,32,.20)!important;
  color:#777!important;
  padding:10px 20px!important;
  border-radius:999px!important;
  box-shadow:0 5px 16px rgba(0,0,0,.07)!important;
  z-index:5!important;
  margin-left:0!important;
}
.lang-switch a{
  color:#777!important;
  opacity:1!important;
  font-size:17px!important;
  font-weight:800!important;
}
.lang-switch a.active{color:#d71920!important;}
.lang-switch span{color:#777!important;font-weight:800!important;}

/* Adjust first viewport spacing after header */
.hero{
  padding-top:24px!important;
}

@media (max-width:1180px){
  .header::before,.header::after{height:104px!important;}
  .header-inner{height:104px!important;min-height:104px!important;}
  .logo-mark{width:68px!important;height:68px!important;}
  .logo-mark img{height:64px!important;}
  .logo-text::before{font-size:20px!important;}
  .logo-text strong{font-size:19px!important;}
  .nav-wrap .container{justify-content:flex-start!important;min-height:70px!important;}
  .menu-toggle{display:grid!important;}
  .nav{
    display:none!important;
    position:absolute!important;
    left:0!important;
    right:0!important;
    top:70px!important;
    min-height:auto!important;
    padding:14px!important;
    gap:8px!important;
    background:#fff!important;
    border:1px solid rgba(215,25,32,.14)!important;
    border-radius:20px!important;
    box-shadow:0 18px 38px rgba(70,18,22,.18)!important;
    flex-direction:column!important;
    align-items:stretch!important;
  }
  .nav.open{display:flex!important;}
  .nav-item{width:100%!important;display:block!important;}
  .nav-link{width:100%!important;justify-content:space-between!important;}
  .submenu{
    position:static!important;
    width:100%!important;
    margin:6px 0 8px!important;
    box-shadow:none!important;
    display:none!important;
    opacity:1!important;
    visibility:visible!important;
    transform:none!important;
    background:#fff8f6!important;
  }
  .submenu::before{display:none!important;}
  .nav-item:hover .submenu,
  .nav-item:focus-within .submenu{display:block!important;}
  .lang-switch{right:0!important;}
}

@media (max-width:780px){
  :root{--container:min(100% - 28px);}
  .header::before,.header::after{height:92px!important;}
  .header-inner{height:92px!important;min-height:92px!important;}
  .logo-wrap{gap:10px!important;}
  .logo-mark{width:56px!important;height:56px!important;}
  .logo-mark img{height:54px!important;}
  .logo-text::before{font-size:15px!important;margin-bottom:3px!important;}
  .logo-text strong{font-size:13px!important;line-height:1.12!important;}
  .nav-wrap .container{min-height:66px!important;}
  .nav{top:66px!important;}
  .lang-switch{padding:8px 13px!important;}
  .lang-switch a{font-size:15px!important;}
}
.hero-slide-bg {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 900ms ease, transform 1600ms ease;
    will-change: opacity, transform;
}

.hero-slide-bg.is-active {
    opacity: 1;
    transform: scale(1);
}
.feature-card {
  position: relative;
}

.feature-card .content {
  position: relative;
  z-index: 3;
}

.feature-card::before,
.feature-card::after {
  pointer-events: none;
}

.page-hero {
  padding: 70px 0 40px !important;
  background: linear-gradient(180deg,#fff7f4,#fff);
}

.page-content-section {
  padding: 40px 0 80px !important;
}

.page-content {
  color: #333;
  font-size: 16px;
  line-height: 1.8;
}

.page-content h2,
.page-content h3 {
  color: #d71920;
  margin: 24px 0 12px;
}

.page-content p {
  margin-bottom: 14px;
}

.page-content ul {
  padding-left: 24px;
  margin-bottom: 18px;
}
.page-hero {
    padding: 72px 0 36px !important;
    background:
        radial-gradient(circle at 90% 20%, rgba(215,25,32,.06), transparent 24%),
        linear-gradient(180deg,#fff7f4,#fff);
}

.page-content-section {
    padding: 36px 0 80px !important;
    background: #fff;
}

.page-card {
    background: #fff !important;
    overflow: hidden;
}

.page-banner img {
    width: 100%;
    max-height: 420px;
    object-fit: cover;
    display: block;
}

.page-content {
    color: #333;
    font-size: 16px;
    line-height: 1.85;
}

.page-content h2,
.page-content h3,
.page-content h4 {
    color: #d71920;
    margin: 26px 0 12px;
}

.page-content p {
    margin-bottom: 14px;
}

.page-content ul,
.page-content ol {
    padding-left: 24px;
    margin-bottom: 18px;
}

.page-content img {
    max-width: 100%;
    height: auto;
    border-radius: 18px;
}
.nav-item {
  position: relative;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.nav-caret {
  font-size: 12px;
}

.submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
  min-width: 240px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .2s ease;
  z-index: 99;
}

.nav-item:hover .submenu,
.nav-item:focus-within .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu a {
  display: block;
  padding: 11px 14px;
  color: #333 !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
}

.submenu a:hover {
  background: rgba(215,25,32,.08);
  color: #d71920 !important;
}

@media (max-width:1180px) {
  .submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin: 6px 0;
  }

  .nav-item:hover .submenu,
  .nav-item:focus-within .submenu {
    display: block;
  }
}

.nav-item,
.submenu-item {
  position: relative;
}

.nav-link,
.submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.nav-caret {
  font-size: 12px;
  opacity: .75;
}

/* level 1 */
.nav > .nav-item > .submenu {
  position: absolute;
  top: calc(100% + 12px);
  left: 0;
}

/* level 2, 3, 4 */
.submenu .submenu {
  position: absolute;
  top: 0;
  left: calc(100% + 10px);
}

.submenu {
  min-width: 250px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.15);
  opacity: 0;
  visibility: hidden;
  transform: translateY(10px);
  transition: .2s ease;
  z-index: 999;
}

.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.submenu-item:hover > .submenu,
.submenu-item:focus-within > .submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.submenu-link {
  display: flex;
  width: 100%;
  padding: 11px 14px;
  color: #333 !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.submenu-link:hover {
  background: rgba(215,25,32,.08);
  color: #d71920 !important;
}

/* มือถือ */
@media (max-width:1180px) {
  .nav > .nav-item > .submenu,
  .submenu .submenu {
    position: static;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
    display: none;
    margin: 6px 0 6px 14px;
  }

  .nav-item:hover > .submenu,
  .nav-item:focus-within > .submenu,
  .submenu-item:hover > .submenu,
  .submenu-item:focus-within > .submenu {
    display: block;
  }

  .submenu {
    background: rgba(255,255,255,.95);
    min-width: 100%;
  }
}

.nav-item,
.submenu-item {
  position: relative;
}

/* ซ่อน submenu ทุกชั้นก่อน */
.nav-item > .submenu,
.submenu-item > .submenu {
  display: none;
  position: absolute;
  min-width: 250px;
  background: #fff;
  border-radius: 16px;
  padding: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.15);
  z-index: 999;
}

/* ชั้นแรก แสดงลงล่าง */
.nav > .nav-item > .submenu {
  top: calc(100% + 12px);
  left: 0;
}

/* ชั้นถัดไป แสดงออกด้านขวา */
.submenu-item > .submenu {
  top: 0;
  left: calc(100% + 10px);
}

/* hover parent แล้วค่อยแสดง submenu ของ parent นั้น */
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.submenu-item:hover > .submenu,
.submenu-item:focus-within > .submenu {
  display: block;
}

.nav-link,
.submenu-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.submenu-link {
  width: 100%;
  padding: 11px 14px;
  color: #333 !important;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
}

.submenu-link:hover {
  background: rgba(215,25,32,.08);
  color: #d71920 !important;
}

.nav-caret {
  font-size: 12px;
  opacity: .75;
}

/* มือถือ */
@media (max-width:1180px) {
  .nav-item > .submenu,
  .submenu-item > .submenu {
    position: static;
    min-width: 100%;
    box-shadow: none;
    margin: 6px 0 6px 14px;
  }
}
/* ===== FIX MULTI LEVEL SUBMENU ===== */

.nav-item,
.submenu-item{
  position:relative;
}

/* ซ่อนทุก submenu ก่อน */
.nav-item > .submenu,
.submenu-item > .submenu{
  display:none;
  position:absolute;
  background:#fff;
  min-width:250px;
  padding:12px 0;
  border-radius:0 0 18px 18px;
  box-shadow:0 18px 45px rgba(0,0,0,.14);
  border:1px solid rgba(215,25,32,.08);
  z-index:9999;
}

/* submenu ชั้นแรก */
.nav > .nav-item > .submenu{
  top:100%;
  left:0;
  margin-top:0;
}

/* กันเมาส์หลุดระหว่างเมนูบนกับ submenu */
.nav > .nav-item > .submenu::after{
  content:'';
  position:absolute;
  left:0;
  right:0;
  top:-14px;
  height:14px;
}

/* ลูกศรเล็กด้านบน */
.nav > .nav-item > .submenu::before{
  content:'';
  position:absolute;
  top:-8px;
  left:24px;
  width:16px;
  height:16px;
  background:#fff;
  transform:rotate(45deg);
  border-left:1px solid rgba(215,25,32,.08);
  border-top:1px solid rgba(215,25,32,.08);
}

/* submenu ชั้น 2,3 ให้ออกขวา */
.submenu-item > .submenu{
  top:0;
  left:calc(100% + 8px);
  margin-left:0;
  border-radius:18px;
}

/* กันเมาส์หลุดระหว่าง submenu กับ flyout ขวา */
.submenu-item > .submenu::after{
  content:'';
  position:absolute;
  top:0;
  bottom:0;
  left:-12px;
  width:12px;
}

/* แสดงเฉพาะ parent ที่ hover */
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.submenu-item:hover > .submenu,
.submenu-item:focus-within > .submenu{
  display:block;
}

/* link ใน submenu */
.submenu-link,
.submenu a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  width:100%;
  padding:12px 22px !important;
  color:#41464f !important;
  background:#fff !important;
  border-radius:0 !important;
  box-shadow:none !important;
  font-size:14px !important;
  font-weight:800 !important;
  white-space:nowrap;
  transition:.18s ease;
}

.submenu-link:hover,
.submenu a:hover{
  color:#d71920 !important;
  background:#fff7f7 !important;
  padding-left:26px !important;
}

.submenu-link .nav-caret{
  color:#d71920;
  margin-left:16px;
}
.submenu-item > .submenu{
  top:0;
  left:calc(100% + 8px);
}
/* ===== FINAL FIX: submenu level 2 flyout right ===== */

.nav-item,
.submenu-item {
  position: relative !important;
}

/* ซ่อน submenu ทุกชั้น */
.nav-item > .submenu,
.submenu-item > .submenu {
  display: none !important;
  position: absolute !important;
  min-width: 250px;
  background: #fff !important;
  padding: 12px 0 !important;
  border-radius: 18px !important;
  box-shadow: 0 18px 45px rgba(0,0,0,.14) !important;
  border: 1px solid rgba(215,25,32,.10) !important;
  z-index: 99999 !important;
}

/* ชั้นแรก ลงด้านล่าง */
.nav > .nav-item > .submenu {
  top: 100% !important;
  left: 0 !important;
  transform: none !important;
  margin-top: 0 !important;
}

/* ชั้น 2+ ออกด้านขวา */
.submenu-item > .submenu {
  top: 0 !important;
  left: calc(100% + 10px) !important;
  transform: none !important;
  margin-left: 0 !important;
}

/* hover แล้วแสดงเฉพาะลูกของตัวที่ hover */
.nav-item:hover > .submenu,
.nav-item:focus-within > .submenu,
.submenu-item:hover > .submenu,
.submenu-item:focus-within > .submenu {
  display: block !important;
}

/* hover bridge ระหว่างชั้นแรก */
.nav > .nav-item > .submenu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -12px;
  height: 12px;
}

/* hover bridge ระหว่าง flyout ขวา */
.submenu-item > .submenu::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: -12px;
  width: 12px;
}

/* ลูกศรด้านบนเฉพาะ submenu ชั้นแรกเท่านั้น */
.nav > .nav-item > .submenu::before {
  content: "";
  position: absolute;
  top: -8px;
  left: 28px;
  width: 16px;
  height: 16px;
  background: #fff;
  transform: rotate(45deg);
  border-left: 1px solid rgba(215,25,32,.10);
  border-top: 1px solid rgba(215,25,32,.10);
}

/* ปิดลูกศรของ submenu ชั้นลึก */
.submenu-item > .submenu::before {
  display: none !important;
}

/* item ใน submenu */
.submenu-item {
  display: block !important;
  width: 100% !important;
}

.submenu-link,
.submenu a {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  width: 100% !important;
  padding: 12px 22px !important;
  color: #41464f !important;
  background: #fff !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  font-size: 14px !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}

.submenu-link:hover,
.submenu a:hover {
  color: #d71920 !important;
  background: #fff7f7 !important;
  padding-left: 26px !important;
}

.submenu-link .nav-caret {
  color: #d71920 !important;
  margin-left: 18px !important;
}
@media (max-width:1180px){

  .nav.open{
    display:flex !important;
  }

  .nav-item > .submenu,
  .submenu-item > .submenu{
    display:none !important;
    position:static !important;
    transform:none !important;
    min-width:100% !important;
    margin:6px 0 6px 14px !important;
    box-shadow:none !important;
    border:none !important;
    border-radius:12px !important;
    padding:6px 0 !important;
  }

  .nav-item.mobile-open > .submenu,
  .submenu-item.mobile-open > .submenu{
    display:block !important;
  }

  .submenu::before,
  .submenu::after{
    display:none !important;
  }
}

@media (max-width:1180px){
  .header::before{
    background-color: #fff !important;
  }

  .nav,
  .nav.open{
    overflow:visible !important;
  }

  .nav-item,
  .submenu-item{
    width:100% !important;
    display:block !important;
    position:relative !important;
  }

  .nav-item > .submenu,
  .submenu-item > .submenu{
    display:none !important;
    position:static !important;
    left:auto !important;
    top:auto !important;
    transform:none !important;
    min-width:100% !important;
    width:100% !important;
    margin:6px 0 6px 0 !important;
    padding:6px 0 6px 18px !important;
    background:#fff !important;
    box-shadow:none !important;
    border:0 !important;
    border-radius:0 !important;
  }

  .nav-item.mobile-open > .submenu,
  .submenu-item.mobile-open > .submenu{
    display:block !important;
  }

  .submenu::before,
  .submenu::after{
    display:none !important;
  }

  .submenu-item > .submenu{
    padding-left:22px !important;
    background:#fff !important;
  }

  .submenu-link,
  .submenu a{
    width:100% !important;
    justify-content:space-between !important;
  }
}

.submenu-link,
.submenu a{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;

    width:100%;

    white-space:normal !important;
    word-break:break-word;
    overflow-wrap:break-word;
    line-height: 20px !important;

    padding:12px 22px;
}
.submenu{
    max-width:320px;
}

.submenu-link{
    display:grid !important;
    grid-template-columns:1fr auto;
    gap:12px;
    align-items:start;
}

.submenu-link .nav-caret{
    margin-top:4px;
}

.breadcrumb-section{
  padding:18px 0 !important;
  background:#fff;
  border-top:1px solid rgba(215,25,32,.08);
  border-bottom:1px solid rgba(215,25,32,.08);
}

.breadcrumb{
  display:flex;
  align-items:center;
  gap:9px;
  flex-wrap:wrap;
  font-size:14px;
  font-weight:700;
  color:#777;
}

.breadcrumb a{
  color:#d71920;
}

.breadcrumb span{
  color:#555;
}

.breadcrumb-sep{
  color:#aaa !important;
}
.news-page{
  padding:70px 0;
}

.news-list{
  display:grid;
  gap:24px;
}

.news-card{
  display:grid;
  grid-template-columns:220px 1fr;
  gap:26px;
  background:#fff;
  border:1px solid rgba(215,25,32,.12);
  border-radius:26px;
  padding:20px;
  box-shadow:0 14px 34px rgba(120,28,34,.08);
}

.news-thumb{
  display:block;
  border-radius:20px;
  overflow:hidden;
  min-height:150px;
}

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

.news-date-box{
  min-height:150px;
  border-radius:20px;
  background:linear-gradient(135deg,#fff7f7,#ffffff);
  border:1px solid rgba(215,25,32,.15);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#d71920;
  font-weight:800;
}

.news-date{
  color:#d71920;
  font-weight:800;
  font-size:14px;
  margin-bottom:8px;
}

.news-body h3{
  margin:0 0 10px;
  font-size:22px;
}

.news-body h3 a{
  color:#1d2430;
}

.news-body h3 a:hover{
  color:#d71920;
}

.news-body p{
  color:#666;
  line-height:1.75;
  margin-bottom:18px;
}

.news-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
}

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