/* =========================================================
   ใช้สูตรฟรี — main stylesheet
   Extracted from index.php inline <style> blocks.
   Rule order preserved 1:1 to keep rendering identical.
   ========================================================= */


/* ============================================================
   1. Core styles & component theming (baccarat tool, cards, tables, responsive)
   ============================================================ */
    @import 'https://fonts.googleapis.com/css?family=Kanit&display=swap';

    .swal2-icon.swal2-error [class^=swal2-x-mark-line][class$=left] {
      font-size: 1rem
    }

    .swal2-icon.swal2-error [class^=swal2-x-mark-line] {
      font-size: 1rem
    }

    .swal2-container {
      zoom: 160%
    }

    .one4bet-modal-padding {
      padding: 6px 10px 10px
    }

    .card-baccarat {
      background: #431754;
      border: 1px solid #602378;
      border-radius: 10px
    }

    .btn-yellow-gradient-click {
      background: linear-gradient(180deg, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 100%), linear-gradient(180deg, #ffe600 0%, #ff8a00 100%);
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 4px
    }

    .btn-yellow-gradient {
      border: 1px solid #fece41;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 10px
    }

    .btn-yellow-gradient .svg-container {
      width: 31px
    }

    .btn-yellow-gradient .svg-container svg {
      vertical-align: middle
    }

    .text-cardheader {
      font-family: Kanit;
      font-size: 1.5em;
      color: white;
    }

    .text-clicktoroom {
      font-family: Kanit;
      font-size: 19.5px;
      text-align: center;
      color: #131313;
      text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .text-room-card {
      font-family: Kanit;
      font-weight: 700;
      font-size: 1.35em;
      text-align: center;
      color: #fff;
      text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .text-round-card {
      font-family: Kanit;
      font-size: .85em;
      text-align: center;
      color: #fff
    }

    .text-dealer-card {
      font-family: Kanit;
      font-size: 19px;
      text-align: center;
      color: #f5a618;
    }

    .text-winrate-card {
      font-family: Kanit;
      font-size: 1.3em;
      color: #fff;
      text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .card-yellow-gradient {
      border: none;
      box-shadow: 0 0 4px #fff;
      border-radius: 13px;
      background: 0 0
    }

    .cardheader-yellow-gradient {
      background: linear-gradient(180deg, #ca2093 -93.18%, #7214cd 162.5%);
      border-radius: 13px 13px 0 0 !important;
      border: none
    }

    .cardbody-yellow-gradient {
      border: 1px solid #e128a3;
      border-top: none;
      border-radius: 0 0 13px 13px !important;
      height: 300px;
      overflow-y: auto;
      overflow-x: hidden
    }

    .text-winrate {
      font-family: Kanit;
      font-size: calc(1.2em + 1vw);
      text-align: center;
      color: #fff
    }

    .text-winrate-percent {
      font-family: Kanit;
      font-weight: 500;
      font-size: calc(1.2em + 1vw);
      color: #000;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .5)
    }

    .text-pickteam {
      font-family: Kanit;
      font-size: 1.1em;
      text-align: center;
      color: #fff
    }

    .text-status {
      font-family: Kanit;
      font-size: 1.1em;
      text-align: center;
      color: #dfd205
    }

    .text-card-percent {
      font-family: Kanit;
      font-weight: 500;
      font-size: 2.6em;
      line-height: 85px;
      color: #fff;
      text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .cardheader-card-winrate {
      background: #242020;
      border: 1px solid #ffb200;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 15px 15px 0 0 !important
    }

    .cardbody-card-winrate {
      border: 1px solid #ffb200;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 0 0 15px 15px
    }

    .cardbody-bg-winrate {
      background: linear-gradient(180deg, #ffe649 0%, #ffb200 100%);
      border: 1px solid #e128a3;
      box-shadow: 0 0 4px #fff;
      border-radius: 0 13px 13px 0
    }

    .cardbody-winrate {
      background: 0 0;
      border: 2px solid #e128a3;
      box-shadow: 0 0 5px #e128a3;
      border-radius: 13px 0 0 13px
    }

    .table-game {
      background: linear-gradient(180deg, #431754 0%, #272774 100%);
      border: 2px solid #e128a3;
      box-shadow: 0 0 4px rgba(0, 0, 0, .25);
      border-radius: 13px
    }

    .text-room {
      font-family: Kanit;
      font-size: 2em;
      color: #fff
    }

    .text-dealer {
      font-family: Kanit;
      font-size: 1em;
      color: #fff
    }

    .text-exit {
      font-family: Kanit;
      font-size: 26px;
      line-height: 30px;
      text-align: center;
      color: #fece41;
      text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .table-bordered td {
      background: #fff;
      border: 1px solid #e128a3;
      padding: 0 .1rem;
      border-radius: 10px;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      -ms-border-radius: 10px;
      -o-border-radius: 10px
    }

    .table td,
    .table th {
      vertical-align: middle
    }

    table {
      border-collapse: separate;
      border-spacing: 2px 2px
    }

    .table-graph {
      border-collapse: collapse;
      border-spacing: 0;
      width: 1200px;
      height: 500px;
      overflow-y: auto
    }

    .table-graph td {
      height: 24px
    }

    .border-line {
      border: 2px solid #e128a3;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25)
    }

    .one4bet-padding {
      padding: 8px !important
    }

    .card-statcount {
      background: #242020;
      border: 1px solid #ffb200;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 10px
    }

    .cardheader-graph {
      background: linear-gradient(180deg, #431754 0%, #272773 162.5%);
      border: 2px solid #602378;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 10px 10px 0 0 !important
    }

    .cardbody-graph {
      background: #431754;
      border-top: none;
      border: 2px solid #602378;
      border-radius: 0 0 10px 10px !important
    }

    .cardbody-title-graph {
      font-family: Kanit;
      font-size: 30px;
      line-height: 35px;
      color: #fff
    }

    .cardbody-subtitle-graph {
      font-family: Kanit;
      font-size: 22px;
      line-height: 26px;
      color: #fff
    }

    .cardheader-text-graph {
      font-family: Kanit;
      font-size: 40px;
      line-height: 47px;
      color: #fff
    }

    .card-statcount .svg-container {
      width: 36px
    }

    .card-statcount .svg-container svg {
      vertical-align: middle
    }

    .progress-bar.progressBanker {
      background: #c31918;
      border-radius: 2px 0 0 2px
    }

    .progress-bar.progressPlayer {
      background: #0000fe;
      border-radius: 2px 0 0 2px
    }

    .progress-bar.progressDraw {
      background: #007f00;
      border-radius: 2px 0 0 2px
    }

    .player-ellipse {
      width: 60px;
      height: 60px;
      border: 5px solid #0000fe;
      border-radius: 50%;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      color: #fff;
      text-align: center;
      line-height: 50px
    }

    .banker-ellipse {
      width: 60px;
      height: 60px;
      border: 5px solid #fe0000;
      border-radius: 50%;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      color: #fff;
      text-align: center;
      line-height: 50px
    }

    .tie-ellipse {
      width: 60px;
      height: 60px;
      border: 5px solid #007f00;
      border-radius: 50%;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      color: #fff;
      text-align: center;
      line-height: 50px
    }

    .bankerbead {
      width: 60px;
      background: #fe0000;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      text-align: center
    }

    .playerbead {
      width: 60px;
      background: #0000fe;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      text-align: center
    }

    .tiebead {
      width: 60px;
      background: #007f00;
      border-radius: 50%;
      font-size: 16px;
      font-weight: 700;
      color: #fff;
      text-align: center
    }

    .cardCheatBaccarat {
      background: linear-gradient(180deg, #000000 0%, #4e4444 0.01%, #0b0a0a 100%);
      border: 1px solid #7b7b7b;
      border-radius: 20px
    }

    .cardCheatBaccarat img.chipCheatBaccarat {
      height: 85px !important
    }

    .cardCheatBaccarat .badgeCheatBaccarat {
      border: 1px solid #ffcf4d !important;
      border-radius: 9px !important;
      -webkit-border-radius: 9px !important;
      -moz-border-radius: 9px !important;
      -ms-border-radius: 9px !important;
      -o-border-radius: 9px !important
    }

    .cardCheatBaccarat .badgeCheatBaccarat .textCheatBaccarat {
      font-size: 36px !important;
      color: #ffcf4d !important
    }

    .cardCheatBaccarat p.card-title {
      font-size: 26px !important;
      color: #fff !important;
      border-left: none !important
    }

    .cardCheatBaccarat p.card-subtitle {
      padding: 4px 0 !important;
      font-size: 14px !important
    }

    .cardCheatBaccarat p.card-subtitle.statusCheat {
      color: #ffcf4d !important
    }

    .cheatBaccaratTable img.chipCheatBaccarat {
      height: 75px !important
    }

    .cheatBaccaratTable .roomIDTxt {
      font-size: 28px !important;
      color: #fff !important;
      border-left: none !important
    }

    .cheatBaccaratTable .dealerTxt {
      font-size: 12px !important
    }

    .cheatBaccaratTable #getoutroom {
      font-size: 16px !important;
      color: #fff !important;
      background-color: #500606 !important;
      border: 2px solid #9a2e2e !important;
      cursor: pointer !important
    }

    .cheatBaccaratTable .card-body .centerPaddingSet p.card-title {
      font-size: 28px !important;
      color: #fff !important;
      border-left: none !important
    }

    .cheatBaccaratTable .card-body .centerPaddingSet p {
      font-size: 20px !important
    }

    .cheatBaccaratTable .card-body .centerPaddingSet span {
      font-size: 48px !important;
      font-weight: bolder !important;
      color: #ffcf4d !important
    }

    .cheatBaccaratRound {
      background-color: rgba(0, 0, 0, .89) !important;
      border-radius: 9px !important;
      -webkit-border-radius: 9px !important;
      -moz-border-radius: 9px !important;
      -ms-border-radius: 9px !important;
      -o-border-radius: 9px !important
    }

    .cheatBaccaratRound span.roundCheatBaccarat {
      font-size: 28px !important
    }

    .badge-win {
      background: #007f00;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 5px;
      padding: 0 4px;
      width: 32px;
      font-size: .8em;
      display: inline-block
    }

    .badge-lose {
      display: inline-block;
      background: #fe0000;
      box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
      border-radius: 5px;
      padding: 0 4px;
      width: 32px;
      font-size: .8em
    }

    .login-form {
      background: linear-gradient(180deg, rgb(27, 25, 66) 0%, rgb(36, 40, 58) 100%);
      border-radius: 14px
    }

    input.login-baccarat {
      background: #151515;
      color: #b3aeae;
      border: none;
      border-radius: 6px
    }

    .btn-confirm-baccarat {
      box-shadow: inset 0 -10px 10px rgba(46, 0, 0, .3), 0 2px 2px rgba(0, 0, 0, .5);
      -webkit-box-shadow: inset 0 -10px 10px rgba(46, 0, 0, .3), 0 2px 2px rgba(0, 0, 0, .5);
      font-size: 14px;
      color: #151515;
      background: #f5f5f5
    }

    .btn-confirm-baccarat:hover {
      color: #f5f5f5;
      background: #151515
    }

    .btn-line-baccarat {
      font-size: 14px;
      text-decoration: none;
      color: #fff;
      border: 1px solid #27ff00;
      background: linear-gradient(to bottom, #33ff00 0%, #00ad05 100%);
      box-shadow: 0 0 0 0 transparent;
      -webkit-transition: all .2s ease-in;
      -moz-transition: all .2s ease-in;
      transition: all .2s ease-in;
      box-shadow: 0 0 1px 0 #002b01
    }

    .btn-line-baccarat:hover {
      color: #00ff21;
      box-shadow: 0 0 8px 0 #00ec1d;
      -webkit-transition: all .2s ease-out;
      -moz-transition: all .2s ease-out;
      transition: all .2s cubic-bezier(0, 0, .1, 1.97);
      background: linear-gradient(to bottom, #000000 0%, #000000 100%);
      border: 1px solid #3f0
    }

    @media(min-width:1200px) {
      .one4bet-modal-padding {
        padding: 30px 60px 60px
      }

      .btn-line-baccarat {
        font-size: 21px
      }

      .btn-confirm-baccarat {
        font-size: 21px
      }

      .table-bordered td {
        border-radius: 10px;
        -webkit-border-radius: 10px;
        -moz-border-radius: 10px;
        -ms-border-radius: 10px;
        -o-border-radius: 10px;
        padding: 0 .1rem;
        height: 40px
      }

      .text-room-card {
        font-family: Kanit;
        font-weight: 700;
        font-size: calc(1em + 0.3vw);
        line-height: 41px;
        text-align: center;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-round-card {
        font-family: Kanit;
        font-size: calc(0.5em + 0.3vw);
        text-align: center;
        color: #fff
      }

      .text-dealer-card {
        font-family: Kanit;
        font-size: 19px;
        text-align: center;
        color: #f5a618;
      }

      .text-winrate-card {
        font-family: Kanit;
        font-weight: 500;
        font-size: calc(0.6em + 0.6vw);
        line-height: 41px;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-card-percent {
        font-family: Kanit;
        font-weight: 500;
        font-size: calc(1em + 0.85vw);
        line-height: 70px;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-clicktoroom {
        font-family: Kanit;
        font-size: 19.5px;
        line-height: 30px;
        text-align: center;
        color: #131313;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .02)
      }

      .btn-yellow-gradient-click {
        background: linear-gradient(180deg, #fff058 0%, #ffb500 100%);
        border: 1px solid #ffb200;
        box-shadow: 0 4px 4px rgba(0, 0, 0, .25);
        border-radius: 10px
      }

      .text-room {
        font-family: Kanit;
        font-size: calc(1.2em + 0.5vw);
        line-height: 53px;
        color: #fff
      }

      .text-dealer {
        font-family: Kanit;
        font-size: calc(0.3em + 0.65vw);
        line-height: 29px;
        color: #fff
      }

      .text-modal-header {
        font-size: calc(1.5em + .35vw);
        font-weight: 700;
        padding-left: 18px;
        border-left: 8px solid #602378
      }

      .text-exit {
        font-family: Kanit;
        font-size: calc(0.55em + 0.8vw);
        text-align: center;
        color: #fece41;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-pickteam {
        font-family: Kanit;
        font-size: calc(0.7em + 0.35vw);
        line-height: 35px;
        text-align: center;
        color: #fff
      }

      .text-status {
        font-family: Kanit;
        font-size: calc(0.7em + 0.35vw);
        line-height: 35px;
        text-align: center;
        color: #f6b21e
      }

      .text-cardheader {
        font-family: Kanit;
        font-size: calc(0.9em + 1vw);
        font-weight: 300;
        line-height: 37px;
        text-align: center;
        color: #fff
      }
    }

    @media only screen and (min-device-width:768px) and (max-device-width:1024px) and (orientation:portrait) {
      .text-exit {
        font-family: Kanit;
        font-size: 1em;
        text-align: center;
        color: #fece41;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-dealer {
        font-family: Kanit;
        font-size: .75em;
        color: #fff
      }

      .text-winrate-card {
        font-family: Kanit;
        font-size: .9em;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-card-percent {
        font-family: Kanit;
        font-weight: 500;
        line-height: 70px;
        font-size: 1.7em;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-clicktoroom {
        font-family: Kanit;
        font-size: .85em;
        text-align: center;
        color: #131313;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .btn-yellow-gradient-click {
        padding: .375rem .1rem !important
      }
    }

    @media only screen and (min-device-width:768px) and (max-device-width:1200px) and (orientation:landscape) {
      .text-clicktoroom {
        font-family: Kanit;
        font-size: .7em;
        text-align: center;
        color: #131313;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-exit {
        font-family: Kanit;
        font-size: 1em;
        text-align: center;
        color: #fece41;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-dealer {
        font-family: Kanit;
        font-size: .75em;
        color: #fff
      }

      .text-pickteam {
        font-family: Kanit;
        font-size: 1.1em;
        text-align: center;
        color: #fff
      }

      .text-winrate-card {
        font-family: Kanit;
        font-size: .9em;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-card-percent {
        font-family: Kanit;
        font-weight: 500;
        line-height: 70px;
        font-size: 1.7em;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .text-room-card {
        font-family: Kanit;
        font-weight: 700;
        font-size: 1.25em;
        text-align: center;
        color: #fff;
        text-shadow: 0 4px 4px rgba(0, 0, 0, .25)
      }

      .btn-yellow-gradient-click {
        padding: .375rem 0 !important
      }
    }

    .heartbeat {
      -webkit-animation: heartbeat 1.5s ease-in-out infinite both;
      animation: heartbeat 1.5s ease-in-out infinite both
    }

    @-webkit-keyframes heartbeat {
      from {
        transform: scale(1);
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      10% {
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      17% {
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      33% {
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      45% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }
    }

    @keyframes heartbeat {
      from {
        transform: scale(1);
        transform-origin: center center;
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      10% {
        transform: scale(.91);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      17% {
        transform: scale(.98);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }

      33% {
        transform: scale(.87);
        -webkit-animation-timing-function: ease-in;
        animation-timing-function: ease-in
      }

      45% {
        transform: scale(1);
        -webkit-animation-timing-function: ease-out;
        animation-timing-function: ease-out
      }
    }



    body {
      background-color: black;
    }


    .card_color {
      /* background: linear-gradient(225.37deg, rgb(67, 23, 84) 27.44%, rgb(38, 39, 116) 97.77%); border: 1px solid rgb(96, 35, 120);*/

      background: linear-gradient(225.37deg, #E91E63 27.44%, rgb(59 5 23) 97.77%);
      border: 1px solid #FF5722;
    }

    .card_color_sa {

      background: linear-gradient(225.37deg, #4CAF50 27.44%, rgb(1, 27, 18) 97.77%);
      border: 1px solid #0b3f32;

    }



    img[src=""] {
      content: url(data:image/gif;base64,R0lGODlhAQABAPAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==);
    }


    #tblbeadrsoad {
      border-collapse: separate;
      border-spacing: 2px;
      border: 2px solid #e128a3;
    }


    .text_next_p {
      font-size: 25px;
      color: blue;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }

    .text_next_b {
      font-size: 25px;
      color: red;
      text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
    }



    @media only screen and (max-width: 786px) {
      #tblbeadrsoad {
        border-collapse: separate;
        border-spacing: 2px;
        border: none;
      }

      .text_next_p {
        font-size: 35px;
        color: blue;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
      }

      .text_next_b {
        font-size: 35px;
        color: red;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
      }

      .text-winrate-percent {
        font-family: Kanit;
        font-weight: 500;
        font-size: calc(2.2em + 1vw);
        color: #000;
        text-shadow: 0 2px 4px rgba(0, 0, 0, .5);
      }

    }


    .lobby_sagame {
      display: none;
    }

    .number_sagame {
      display: none;
    }



    .img_slot {
      border: 10px solid #431754;
      cursor: pointer;
    }


    .showtext h1 {
      font-size: 22px;
    }



    #banner_ruay {
      width: 70%;
      border: 3px solid red;
    }

    @media only screen and (max-width: 786px) {
      #banner_ruay {
        width: 100%;
        border: 3px solid red;
      }
    }


    @media (min-width: 768px) {


      .banner_huay {
        width: 60%;
        margin-bottom: 24px;
      }

    }

    @media (max-width: 768px) {
      .banner_huay {
        width: 100%;
        margin-bottom: 24px;
      }

    }
  

/* ============================================================
   2. Modern polish (2025): footer, FAQ, hero, interactions
   ============================================================ */
    /* ---- Modern polish (2025) ---- */
    body {
      background-color: #1a0b29;
    }

    .text-h1-sub {
      font-weight: 600;
      letter-spacing: .2px;
    }

    /* Smooth, accessible focus + interactions */
    a,
    .img_slot,
    .btn {
      transition: transform .18s ease, box-shadow .18s ease, opacity .18s ease;
    }

    .img_slot:hover {
      transform: translateY(-4px);
      box-shadow: 0 10px 24px rgba(0, 0, 0, .45);
    }

    img {
      max-width: 100%;
      height: auto;
    }

    /* ---- FAQ (native accordion, no JS dependency) ---- */
    .faq-list {
      max-width: 900px;
      margin: 0 auto;
    }

    .faq-item {
      background: rgba(67, 23, 84, .55);
      border: 1px solid #602378;
      border-radius: 12px;
      padding: 14px 18px;
      margin-bottom: 12px;
    }

    .faq-item>summary {
      cursor: pointer;
      font-weight: 600;
      color: #00d5d6;
      list-style: none;
      position: relative;
      padding-right: 28px;
      outline: none;
    }

    .faq-item>summary::-webkit-details-marker {
      display: none;
    }

    .faq-item>summary::after {
      content: "+";
      position: absolute;
      right: 4px;
      top: 50%;
      transform: translateY(-50%);
      font-size: 1.3em;
      line-height: 1;
    }

    .faq-item[open]>summary::after {
      content: "\2212";
    }

    .faq-item>p {
      margin: 12px 0 2px;
    }

    /* ---- Footer ---- */
    .site-footer {
      margin-top: 48px;
      padding: 40px 0 24px;
      background: linear-gradient(180deg, #2a1140 0%, #150a22 100%);
      border-top: 1px solid #602378;
      color: #d9cfe6;
      font-family: Kanit;
      font-size: 16px;
      line-height: 1.7;
    }

    .site-footer .footer-heading {
      color: #00d5d6;
      font-size: 20px;
      font-weight: 600;
      margin-bottom: 12px;
    }

    .site-footer .footer-bottom {
      border-top: 1px solid rgba(255, 255, 255, .12);
      margin-top: 18px;
      padding-top: 16px;
      text-align: center;
      font-size: 14px;
      color: #b9aecb;
    }

    @media (prefers-reduced-motion: reduce) {

      a,
      .img_slot,
      .btn {
        transition: none;
      }
    }
  

/* ============================================================
   3. Dynamically-injected slot card styling
   ============================================================ */
        .card {
          background-color: rgb(67 23 84 / 56%);
          border-radius: 8px;
        }
      

/* ============================================================
   4. SweetAlert2 header override
   ============================================================ */
    .swal2-header {
      display: flex;
      flex-direction: column;
      align-items: center;
      padding: 0 !important;
    }