@font-face {
          font-family: 'SWU-Regular';
          src: url('../fonts/Srinakharinwirot/srinakharinwirot-regular.woff2') format('woff2');
        }

       @font-face {
          font-family: 'Sarabun-Custom';
          src: url('../fonts/Sarabun/Sarabun-Light.ttf') format('truetype') ;
        }

    .hero-gradient {
      background: #636466; v
      background: 
        /* 1. เนƒเธชเนˆ Gradient เธเนˆเธญเธ™ (เธ›เธฃเธฑเธšเน€เธ›เน‡เธ™ rgba เน€เธžเธทเนˆเธญเนƒเธซเน‰เน€เธซเน‡เธ™เธ เธฒเธžเธ‚เน‰เธฒเธ‡เธซเธฅเธฑเธ‡) */
        linear-gradient(46deg,rgba(99, 100, 102, 0.82) 0%, rgba(11, 3, 34, 0.69) 49%, rgba(218, 33, 40, 0.62) 100%),
        /* 2. เนƒเธชเนˆ URL เธ‚เธญเธ‡เธฃเธนเธ›เธ เธฒเธžเธ•เนˆเธญเธ—เน‰เธฒเธข */
        url('./img/bg2.png');

        /* 3. เธ•เธฑเน‰เธ‡เธ„เนˆเธฒเธเธฒเธฃเนเธชเธ”เธ‡เธœเธฅเธฃเธนเธ›เธ เธฒเธžเนƒเธซเน‰เธžเธญเธ”เธต */
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

    .bg-hero{
      background: #636466;
      background: linear-gradient(46deg, rgba(99, 100, 102, 10) 0%, rgba(11, 3, 34, 0.67) 49%, rgba(218, 33, 40, 0.73) 100%),
        url('../img/bg2.png');    
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    }

    body{
      font-family: 'Sarabun-Custom';
      font-size: 16px;
    }
    h1,h2,h3,h4,h5,h6{
      font-family: 'SWU-Regular';
    }
    nav{
      font-family: 'SWU-Regular';
      font-size: 20px;
    }
    button{
      font-family: 'SWU-Regular';
    }
    .bg-footer{
      background: url(../img/footer-bg.png);
    }
    .bg-white-card {
      background: #ffffff url(../img/bg-white.png);
      background-size: cover;
    }
    .bg-login-left{
      background: #636466 url(../img/bgleft-login.png);
      background-size: auto;
      background-repeat: no-repeat;
    }
    .step-shadow {
      box-shadow: 0 4px 20px rgba(0,0,0,0.05);
    }
    .active-step {
      border-left: 0px solid #DA2128;
    }

  /* เธ•เธเนเธ•เนˆเธ‡เนเธ–เธšเน€เธฅเธทเนˆเธญเธ™เนƒเธซเน‰เธ”เธนเธชเธงเธขเธ‡เธฒเธก (เธชเธณเธซเธฃเธฑเธš Chrome/Safari) */
    .custom-scrollbar::-webkit-scrollbar { width: 6px; }
    .custom-scrollbar::-webkit-scrollbar-track { background: #f1f1f1; border-radius: 10px; }
    .custom-scrollbar::-webkit-scrollbar-thumb { background: #E1432E; border-radius: 10px; }


   /* --- CSS เธชเธณเธซเธฃเธฑเธš Hero Slider --- */
    .hero-slide {
        position: absolute;
        inset: 0;
        background-size: cover;
        background-position: center;
        opacity: 0;
        transition: opacity 1s ease-in-out;
        z-index: 0;
    }
    .hero-slide.active {
        opacity: 1;
        z-index: 1;
    }
    .hero-overlay {
        position: absolute;
        inset: 0;
        background: rgba(0, 0, 0, 0.6);
        z-index: 2;
    }
    .hero-dot {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: rgba(255, 255, 255, 0.3);
        border: none;
        cursor: pointer;
        transition: background 0.3s;
    }
    .hero-dot.active {
        background: #E1432E;
        width: 30px;
        border-radius: 10px;
    }

    /* --- CSS เธชเธณเธซเธฃเธฑเธšเธ›เธธเนˆเธก APPLY NOW เนเธšเธšเธžเธดเน€เธจเธฉ --- */
    .btn-apply-special {
        background: linear-gradient(135deg, #E1432E 0%, #B91C1C 100%);
        box-shadow: 0 0 0 0 rgba(225, 67, 46, 0.7);
        animation: pulse-red 2s infinite;
        position: relative;
        overflow: hidden;
    }

    /* เนเธชเธ‡เธงเธดเนˆเธ‡เธœเนˆเธฒเธ™เธ›เธธเนˆเธก (Shine Effect) */
    .btn-apply-special::after {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: rgba(255, 255, 255, 0.2);
        transform: rotate(45deg);
        transition: 0.5s;
        left: -100%;
    }

    .btn-apply-special:hover::after {
        left: 100%;
    }

    .btn-apply-special:hover {
        transform: scale(1.08) translateY(-3px);
        box-shadow: 0 10px 25px rgba(225, 67, 46, 0.5);
        background: linear-gradient(135deg, #F0533E 0%, #DC2626 100%);
    }

    @keyframes pulse-red {
        0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 67, 46, 0.7); }
        70% { transform: scale(1.03); box-shadow: 0 0 0 15px rgba(225, 67, 46, 0); }
        100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(225, 67, 46, 0); }
    }

    .hero-dot {
        width: 12px; height: 12px; border-radius: 50%;
        background: rgba(255, 255, 255, 0.3); border: none; cursor: pointer;
    }
    .hero-dot.active { background: #E1432E; width: 30px; border-radius: 10px; }