/*
Theme Name: UFABETSOCCER Clean
Theme URI: https://ufabetsoccer.bet/
Author: UFABETSOCCER
Description: Clean green-black football content hub theme for ufabetsoccer.bet. Built from scratch.
Version: 1.0.0
Text Domain: ufabetsoccer
*/

:root{
  --ufs-accent:#26ed72;
  --ufs-accent-2:#10c95b;
  --ufs-bg:#030906;
  --ufs-panel:#07110c;
  --ufs-panel-2:#0b1710;
  --ufs-border:rgba(38,237,114,.24);
  --ufs-text:#eef7f1;
  --ufs-muted:#aebbb3;
  --ufs-max:1200px;
  --ufs-radius:18px;
  --ufs-shadow:0 20px 60px rgba(0,0,0,.28);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:var(--ufs-bg);
  color:var(--ufs-text);
  font-family:'Kanit',system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  font-size:17px;
  line-height:1.78;
  -webkit-font-smoothing:antialiased;
}
img{max-width:100%;height:auto}
a{color:var(--ufs-accent);text-decoration:none}
a:hover{color:#75ffa8}
h1,h2,h3,h4,h5,h6{font-family:'Kanit',sans-serif;line-height:1.25;margin:0 0 .75em;color:#fff}
p{margin:0 0 1.35em}
button,input,textarea,select{font:inherit}
.ufs-container{width:min(var(--ufs-max),calc(100% - 40px));margin-inline:auto}
.ufs-sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Header */
.ufs-header{position:relative;z-index:900;background:rgba(2,8,5,.94);backdrop-filter:blur(14px);border-bottom:1px solid var(--ufs-border)}
.ufs-header-inner{min-height:74px;display:flex;align-items:center;justify-content:space-between;gap:28px}
.ufs-brand{display:flex;align-items:center;min-width:0;flex:0 0 auto;line-height:0}
.ufs-brand>a,.ufs-brand .custom-logo-link{display:flex;align-items:center;line-height:0}
.ufs-brand img,.ufs-brand .custom-logo{display:block;width:auto!important;height:46px!important;max-width:290px!important;object-fit:contain}
.ufs-nav{display:flex;align-items:center;gap:26px}
.ufs-nav ul{display:flex;align-items:center;gap:24px;list-style:none;margin:0;padding:0}
.ufs-nav a{position:relative;color:#fff;font-size:15px;font-weight:600;white-space:nowrap}
.ufs-nav a::after{content:"";position:absolute;left:0;right:100%;bottom:-10px;height:2px;background:var(--ufs-accent);transition:right .25s ease}
.ufs-nav a:hover::after,.ufs-nav .current-menu-item>a::after{right:0}
.ufs-menu-toggle{display:none;border:1px solid var(--ufs-border);background:transparent;color:#fff;border-radius:10px;padding:8px 12px;cursor:pointer}

/* Loader */
.ufs-loader{position:fixed;inset:0;z-index:2000;background:#020705;display:grid;place-items:center;transition:opacity .35s ease,visibility .35s ease}
.ufs-loader.is-hidden{opacity:0;visibility:hidden}
.ufs-loader img{width:84px;height:84px;object-fit:contain;animation:ufsPulse 1s ease-in-out infinite alternate}
@keyframes ufsPulse{from{transform:scale(.92);opacity:.65}to{transform:scale(1.05);opacity:1}}


/* =====================================================
   HERO - CLEAN SINGLE BACKGROUND
   Uses the background-image set by front-page.php
===================================================== */
.ufs-hero{
  position:relative;
  isolation:isolate;
  height:540px;
  min-height:0;
  display:flex;
  align-items:center;
  overflow:hidden;
  background-color:#020805;
  background-repeat:no-repeat!important;
  background-size:cover!important;
  /* Keep the model's head visible while the wide image fills the zone */
  background-position:center 18%!important;
  border-bottom:1px solid var(--ufs-border);
}

/* Never use extra image layers on the hero */
.ufs-hero::before,
.ufs-hero::after{
  content:none!important;
  display:none!important;
  background:none!important;
  background-image:none!important;
}

/* Darken only the text side. The image stays clear on the right. */
.ufs-hero-fade{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  background:linear-gradient(
    90deg,
    rgba(2,8,5,.92) 0%,
    rgba(2,8,5,.84) 18%,
    rgba(2,8,5,.66) 34%,
    rgba(2,8,5,.38) 48%,
    rgba(2,8,5,.14) 60%,
    rgba(2,8,5,0) 72%
  );
}

.ufs-hero-inner{
  position:relative;
  z-index:2;
  width:min(var(--ufs-max),calc(100% - 40px));
  margin-inline:auto;
  padding:58px 0;
}

.ufs-hero-content{
  position:relative;
  z-index:3;
  width:50%;
  max-width:620px;
}

/* Keep hero copy visible even if the generic fade class is present */
.ufs-hero .ufs-fade,
.js .ufs-hero .ufs-fade,
.js .ufs-hero .ufs-fade.is-visible{
  opacity:1!important;
  visibility:visible!important;
  transform:none!important;
}

.ufs-kicker{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 16px;
  color:var(--ufs-accent);
  font-size:13px;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
}
.ufs-kicker::before{content:"";width:32px;height:1px;background:var(--ufs-accent)}

.ufs-hero h1{
  max-width:620px;
  margin:0 0 18px;
  color:#fff;
  font-size:clamp(36px,3vw,48px);
  line-height:1.13;
  font-weight:700;
  letter-spacing:-.02em;
  text-wrap:balance;
}
.ufs-hero h1 .accent{color:var(--ufs-accent)}

.ufs-hero-description{
  max-width:570px;
  margin:0 0 26px;
  color:#e7eee9;
  font-size:16px;
  line-height:1.7;
  text-shadow:0 2px 10px rgba(0,0,0,.65);
}

.ufs-actions{display:flex;flex-wrap:wrap;gap:14px}
.ufs-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:0 26px;
  border-radius:12px;
  font-size:15px;
  font-weight:600;
  transition:transform .2s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease;
}
.ufs-btn:hover{transform:translateY(-2px)}
.ufs-btn-primary{color:#021007;background:var(--ufs-accent);box-shadow:0 10px 28px rgba(38,237,114,.20)}
.ufs-btn-primary:hover{color:#021007;background:#58ff93}
.ufs-btn-outline{color:#fff;border:1px solid rgba(255,255,255,.55);background:rgba(0,0,0,.26)}
.ufs-btn-outline:hover{color:#fff;border-color:var(--ufs-accent);background:rgba(38,237,114,.10)}

.ufs-trustbar{background:#030a06;border-bottom:1px solid var(--ufs-border)}
.ufs-trustgrid{display:grid;grid-template-columns:repeat(4,1fr)}
.ufs-trustitem{padding:18px 20px;display:flex;align-items:center;gap:13px;border-right:1px solid rgba(38,237,114,.13)}
.ufs-trustitem:last-child{border-right:0}
.ufs-trusticon{flex:0 0 34px;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--ufs-accent);color:#021007;font-weight:800}
.ufs-trustitem strong{display:block;color:#fff;font-size:15px;line-height:1.35}.ufs-trustitem small{display:block;color:var(--ufs-muted);font-size:13px;line-height:1.4;margin-top:2px}

/* Content */
.ufs-main{padding:74px 0 90px}
.ufs-home{font-size:17px}
.ufs-home-section{padding:0 0 70px}
.ufs-home-section+.ufs-home-section{padding-top:6px}
.ufs-section-eyebrow{color:var(--ufs-accent);font-size:13px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;margin-bottom:8px}
.ufs-home h2{font-size:clamp(29px,3.2vw,42px);margin-bottom:20px}
.ufs-home h3{font-size:23px;margin-bottom:12px}
.ufs-lead{font-size:19px;color:#d9e5dc;max-width:920px}
.ufs-grid-2{display:grid;grid-template-columns:1.15fr .85fr;gap:28px;align-items:start}
.ufs-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.ufs-card{background:linear-gradient(180deg,rgba(13,29,20,.96),rgba(5,14,9,.96));border:1px solid var(--ufs-border);border-radius:var(--ufs-radius);padding:24px;box-shadow:var(--ufs-shadow)}
.ufs-card p:last-child{margin-bottom:0}
.ufs-linklist{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:18px 0 0;padding:0;list-style:none}
.ufs-linklist a{display:block;padding:12px 14px;border:1px solid rgba(38,237,114,.18);border-radius:12px;background:rgba(38,237,114,.04);color:#eef7f1}
.ufs-linklist a:hover{border-color:var(--ufs-accent);background:rgba(38,237,114,.09)}
.ufs-callout{border-left:3px solid var(--ufs-accent);background:rgba(38,237,114,.06);padding:18px 20px;border-radius:0 14px 14px 0;color:#dbe8df}
.ufs-cta{padding:28px;border:1px solid var(--ufs-border);border-radius:var(--ufs-radius);background:radial-gradient(circle at 80% 0%,rgba(38,237,114,.14),transparent 40%),#07110c;display:flex;align-items:center;justify-content:space-between;gap:24px}
.ufs-cta h3{margin-bottom:6px}.ufs-cta p{margin:0;color:var(--ufs-muted)}

.ufs-table-wrap{overflow-x:auto;border:1px solid var(--ufs-border);border-radius:16px;background:#07110c}
.ufs-table{width:100%;border-collapse:collapse;min-width:680px}
.ufs-table th,.ufs-table td{padding:14px 16px;text-align:left;border-bottom:1px solid rgba(38,237,114,.11)}
.ufs-table th{background:rgba(38,237,114,.10);color:#fff;font-weight:600}.ufs-table td{color:#dfe9e2}.ufs-table tr:last-child td{border-bottom:0}

.ufs-topic-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.ufs-topic-card{padding:22px;border:1px solid var(--ufs-border);border-radius:16px;background:#07110c;transition:transform .2s ease,border-color .2s ease}
.ufs-topic-card:hover{transform:translateY(-3px);border-color:var(--ufs-accent)}
.ufs-topic-card h3{font-size:21px;margin-bottom:8px}.ufs-topic-card p{font-size:15px;color:var(--ufs-muted);margin-bottom:12px}.ufs-topic-card .more{font-weight:600}

.ufs-faq details{border:1px solid var(--ufs-border);border-radius:14px;background:#07110c;padding:16px 18px;margin-bottom:12px}.ufs-faq summary{cursor:pointer;font-weight:600;color:#fff}.ufs-faq details p{margin:14px 0 0;color:#cfd9d2}

/* Article/page */
.ufs-page-header{padding:56px 0 30px;text-align:center}.ufs-page-header h1{font-size:clamp(34px,4vw,52px)}
.ufs-entry{width:min(900px,calc(100% - 40px));margin:0 auto 80px}.ufs-entry-content{background:#07110c;border:1px solid var(--ufs-border);border-radius:var(--ufs-radius);padding:34px}.ufs-entry-content h2{margin-top:1.6em}.ufs-entry-content h3{margin-top:1.4em}

/* =====================================================
   CATEGORY PAGE
===================================================== */

.ufs-category-head{
    padding:58px 0 42px;
    text-align:left;
}

.ufs-category-intro{
    width:100%;
    max-width:none;
    text-align:left;
}

.ufs-category-head h1{
    margin:0 0 22px;
    font-size:clamp(34px,4vw,50px);
    text-align:left;
}


/* =========================================
   CATEGORY DESCRIPTION
========================================= */

.ufs-category-desc{
    width:100%;
    max-width:none;

    margin:0;

    color:#c9d6ce;

    font-size:17px;
    line-height:1.8;

    text-align:left !important;
}

.ufs-category-desc *{
    text-align:left;
}

.ufs-category-desc p{
    margin:0 0 1.35em;
}

.ufs-category-desc h2{
    margin:1.7em 0 .7em;
    font-size:clamp(27px,3vw,38px);
}

.ufs-category-desc h3{
    margin:1.5em 0 .6em;
    font-size:23px;
}

.ufs-category-desc ul,
.ufs-category-desc ol{
    margin:0 0 1.4em;
    padding-left:26px;
}

.ufs-category-desc li{
    margin-bottom:8px;
}


/* =========================================
   CATEGORY BUTTONS
========================================= */

.ufs-category-actions{
    display:flex;
    flex-wrap:wrap;
    align-items:center;

    gap:14px;

    margin-top:30px;
}


/* =========================================
   SAFE MOTION EFFECT
   ไม่พึ่ง JavaScript
========================================= */

.ufs-category-reveal{
    opacity:0;
    transform:translateY(20px);

    animation:ufsCategoryReveal .7s ease forwards;
}

@keyframes ufsCategoryReveal{

    from{
        opacity:0;
        transform:translateY(20px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* Cards */
.ufs-category-card-reveal{
    opacity:0;
    transform:translateY(18px);

    animation:ufsCategoryCardReveal .65s ease forwards;
}

.ufs-category-card-reveal:nth-child(1){animation-delay:.05s}
.ufs-category-card-reveal:nth-child(2){animation-delay:.10s}
.ufs-category-card-reveal:nth-child(3){animation-delay:.15s}
.ufs-category-card-reveal:nth-child(4){animation-delay:.20s}
.ufs-category-card-reveal:nth-child(5){animation-delay:.25s}
.ufs-category-card-reveal:nth-child(6){animation-delay:.30s}
.ufs-category-card-reveal:nth-child(7){animation-delay:.35s}
.ufs-category-card-reveal:nth-child(8){animation-delay:.40s}
.ufs-category-card-reveal:nth-child(9){animation-delay:.45s}

@keyframes ufsCategoryCardReveal{

    from{
        opacity:0;
        transform:translateY(18px);
    }

    to{
        opacity:1;
        transform:translateY(0);
    }

}


/* =========================================
   ARTICLES
========================================= */

.ufs-category-posts{
    padding:30px 0 70px;
}

.ufs-category-posts-head{
    margin-bottom:28px;
    text-align:left;
}

.ufs-category-posts-head h2{
    margin-bottom:10px;
    font-size:clamp(28px,3vw,38px);
}

.ufs-category-posts-head p{
    max-width:800px;
    margin:0;
    color:var(--ufs-muted);
}


/* =========================================
   GRID
========================================= */

.ufs-category-grid{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:22px;
}


/* =========================================
   POST CARD
========================================= */

.ufs-post-card{
    overflow:hidden;

    border:1px solid var(--ufs-border);
    border-radius:16px;

    background:#07110c;

    transition:
        transform .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.ufs-post-card:hover{
    transform:translateY(-4px);

    border-color:var(--ufs-accent);

    box-shadow:0 18px 42px rgba(0,0,0,.26);
}

.ufs-post-card-thumb{
    display:block;

    aspect-ratio:16/9;

    overflow:hidden;

    background:#0d1b13;
}

.ufs-post-card-thumb img{
    display:block;

    width:100%;
    height:100%;

    object-fit:cover;

    transition:transform .35s ease;
}

.ufs-post-card:hover .ufs-post-card-thumb img{
    transform:scale(1.04);
}

.ufs-post-card-body{
    padding:20px;
}

.ufs-post-card h2{
    margin:0 0 10px;
    font-size:21px;
}

.ufs-post-card h2 a{
    color:#fff;
}

.ufs-post-card p{
    margin-bottom:14px;

    color:var(--ufs-muted);

    font-size:15px;
}

.ufs-post-readmore{
    display:inline-flex;
    align-items:center;

    color:var(--ufs-accent);

    font-weight:600;
}


/* =========================================
   PAGINATION
========================================= */

.ufs-pagination{
    grid-column:1/-1;

    display:flex;
    justify-content:center;

    margin-top:20px;
}


/* =========================================
   BOTTOM CTA
========================================= */

.ufs-category-bottom-cta{
    padding:0 0 80px;
}


/* =========================================
   TABLET
========================================= */

@media (max-width:860px){

    .ufs-category-grid{
        grid-template-columns:repeat(2,minmax(0,1fr));
    }

}


/* =========================================
   MOBILE
========================================= */

@media (max-width:640px){

    .ufs-category-head{
        padding:40px 0 30px;
    }

    .ufs-category-head h1{
        font-size:32px;
    }

    .ufs-category-desc{
        font-size:16px;
        line-height:1.75;
    }

    .ufs-category-actions{
        display:grid;
        grid-template-columns:1fr;
    }

    .ufs-category-actions .ufs-btn{
        width:100%;
    }

    .ufs-category-grid{
        grid-template-columns:1fr;
    }

    .ufs-category-posts{
        padding:24px 0 54px;
    }

    .ufs-category-bottom-cta{
        padding-bottom:50px;
    }

}


/* ผู้ใช้ที่ปิด Motion ในระบบ */
@media (prefers-reduced-motion:reduce){

    .ufs-category-reveal,
    .ufs-category-card-reveal{
        opacity:1;
        transform:none;
        animation:none;
    }

}
/* Footer */
.ufs-footer{border-top:1px solid var(--ufs-border);background:#020604;padding:36px 0 110px;color:var(--ufs-muted)}
.ufs-footer-inner{display:flex;justify-content:space-between;gap:30px;align-items:center}.ufs-footer-logo img{height:42px;width:auto}.ufs-footer-links{display:flex;gap:18px;flex-wrap:wrap}.ufs-footer-links a{color:#d8e3dc;font-size:14px}
.ufs-mobile-bar{display:none}

/* Motion, but content stays readable without JS */
.ufs-fade{opacity:1;transform:none}
.js .ufs-fade{opacity:0;transform:translateY(24px);transition:opacity .65s ease,transform .65s ease}
.js .ufs-fade.is-visible{opacity:1;transform:none}


@media (max-width:1050px){
  .ufs-nav ul{gap:16px}
  .ufs-nav a{font-size:14px}
  .ufs-hero-content{width:56%;max-width:580px}
  .ufs-topic-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:860px){
  .ufs-header-inner{min-height:68px}
  .ufs-brand img,.ufs-brand .custom-logo{height:40px!important;max-width:235px!important}
  .ufs-menu-toggle{display:block}
  .ufs-nav{display:none;position:absolute;left:0;right:0;top:100%;background:#030a06;border-bottom:1px solid var(--ufs-border);padding:16px 20px}
  .ufs-nav.is-open{display:block}
  .ufs-nav ul{display:grid;gap:0}
  .ufs-nav li{border-bottom:1px solid rgba(38,237,114,.11)}
  .ufs-nav li:last-child{border-bottom:0}
  .ufs-nav a{display:block;padding:12px 0}
  .ufs-nav a::after{display:none}

  .ufs-hero{
    height:500px;
    background-position:60% 16%!important;
  }
  .ufs-hero-fade{
    background:linear-gradient(90deg,rgba(2,8,5,.94) 0%,rgba(2,8,5,.84) 36%,rgba(2,8,5,.50) 62%,rgba(2,8,5,.12) 86%,rgba(2,8,5,0) 100%);
  }
  .ufs-hero-inner{padding:46px 0}
  .ufs-hero-content{width:68%;max-width:540px}
  .ufs-hero h1{font-size:clamp(33px,6.2vw,44px)}

  .ufs-trustgrid{grid-template-columns:repeat(2,1fr)}
  .ufs-trustitem:nth-child(2){border-right:0}
  .ufs-trustitem:nth-child(-n+2){border-bottom:1px solid rgba(38,237,114,.13)}
  .ufs-grid-2{grid-template-columns:1fr}
  .ufs-grid-3{grid-template-columns:1fr}
  .ufs-category-grid{grid-template-columns:repeat(2,1fr)}
}

@media (max-width:640px){
  body{font-size:16px;padding-bottom:72px}
  .ufs-container{width:min(100% - 28px,var(--ufs-max))}
  .ufs-brand{min-width:0}
  .ufs-brand img,.ufs-brand .custom-logo{height:36px!important;max-width:215px!important}

  .ufs-hero{
    height:540px;
    align-items:flex-end;
    background-position:67% 12%!important;
  }
  .ufs-hero-fade{
    background:linear-gradient(180deg,rgba(2,8,5,.06) 0%,rgba(2,8,5,.18) 30%,rgba(2,8,5,.70) 62%,rgba(2,8,5,.96) 100%);
  }
  .ufs-hero-inner{padding:215px 0 34px}
  .ufs-hero-content{width:100%;max-width:none}
  .ufs-kicker{font-size:11px;margin-bottom:11px}
  .ufs-hero h1{font-size:31px;max-width:520px;margin-bottom:14px}
  .ufs-hero-description{font-size:15px;line-height:1.6;margin-bottom:20px}
  .ufs-btn{min-height:46px;padding:0 18px;font-size:14px}

  .ufs-trustgrid{grid-template-columns:1fr 1fr}
  .ufs-trustitem{padding:14px 10px}
  .ufs-trusticon{width:30px;height:30px;flex-basis:30px}
  .ufs-trustitem strong{font-size:13px}
  .ufs-trustitem small{font-size:11px}
  .ufs-main{padding:54px 0 70px}
  .ufs-home-section{padding-bottom:54px}
  .ufs-home h2{font-size:29px}
  .ufs-lead{font-size:17px}
  .ufs-linklist{grid-template-columns:1fr}
  .ufs-topic-grid{grid-template-columns:1fr}
  .ufs-category-grid{grid-template-columns:1fr}
  .ufs-entry-content{padding:24px 20px}
  .ufs-cta{display:block}
  .ufs-cta .ufs-actions{margin-top:18px}
  .ufs-footer{padding-bottom:30px}
  .ufs-footer-inner{display:block;text-align:center}
  .ufs-footer-links{justify-content:center;margin-top:20px}
  .ufs-mobile-bar{position:fixed;left:0;right:0;bottom:0;z-index:950;display:grid;grid-template-columns:1fr 1fr 74px 1fr 1fr;align-items:end;background:rgba(2,8,5,.97);border-top:1px solid var(--ufs-border);height:70px;padding:0 5px max(env(safe-area-inset-bottom),0px)}
  .ufs-mobile-bar a{display:flex;height:70px;flex-direction:column;align-items:center;justify-content:center;gap:3px;color:#fff;font-size:10px;text-align:center}
  .ufs-mobile-bar .home{height:78px;width:78px;justify-self:center;margin-top:-18px;border:2px solid var(--ufs-accent);border-radius:50%;background:#031008;box-shadow:0 0 0 5px #020805}
  .ufs-mobile-bar .home img{width:56px;height:56px;object-fit:contain}
}

/* =====================================================
   CATEGORY CONTENT - TABLE + TABLE OF CONTENTS
   UFABETSOCCER
===================================================== */


/* =====================================================
   TABLE OF CONTENTS
   Equal buttons - 2 rows on desktop
===================================================== */

.ufs-category-desc .sbm-jump-links{
    position:relative;
    display:flex;
    flex-wrap:wrap;
    align-items:stretch;
    gap:10px;

    width:100%;
    margin:26px 0 0;
    padding:20px 22px;

    border:1px solid rgba(38,237,114,.24);
    border-radius:18px;

    background:
        radial-gradient(circle at 0% 0%,rgba(38,237,114,.10),transparent 40%),
        #07110c;

    box-shadow:0 16px 42px rgba(0,0,0,.20);
    text-align:left!important;
}

/* กัน WordPress แทรก BR / P แล้วทำ Grid หรือ Flex แตก */
.ufs-category-desc .sbm-jump-links br{
    display:none!important;
}

.ufs-category-desc .sbm-jump-links > p{
    display:contents!important;
    margin:0!important;
    padding:0!important;
}

/* หัวข้อสารบัญ */
.ufs-category-desc .sbm-jump-links strong{
    flex:0 0 100%;
    display:block;
    width:100%;
    margin:0 0 4px;
    color:#fff;
    font-size:20px;
    font-weight:700;
    line-height:1.4;
}

/* Desktop: 18 ปุ่ม = 9 ปุ่มต่อแถว = 2 แถว */
.ufs-category-desc .sbm-jump-links a{
    flex:0 0 calc((100% - 80px) / 9);
    max-width:calc((100% - 80px) / 9);
    min-width:0;
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:10px 11px;

    border:1px solid rgba(38,237,114,.18);
    border-radius:11px;

    background:rgba(38,237,114,.045);
    color:#dfe9e2;

    font-size:13px;
    font-weight:500;
    line-height:1.4;
    text-align:left!important;

    overflow-wrap:anywhere;

    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}

.ufs-category-desc .sbm-jump-links a::before{
    content:"";
    flex:0 0 7px;
    width:7px;
    height:7px;
    margin-right:8px;
    border-radius:50%;
    background:var(--ufs-accent);
    box-shadow:0 0 10px rgba(38,237,114,.35);
}

.ufs-category-desc .sbm-jump-links a:hover{
    color:#fff;
    border-color:var(--ufs-accent);
    background:rgba(38,237,114,.11);
    box-shadow:0 8px 20px rgba(0,0,0,.18);
    transform:translateY(-2px);
}

/* รองรับหมวดเก่าที่แยก NAV หัวข้อกับ NAV ปุ่ม */
.ufs-category-desc .sbm-jump-links:has(strong):not(:has(a)){
    margin-bottom:0;
    padding-bottom:13px;
    border-radius:18px 18px 0 0;
}

.ufs-category-desc .sbm-jump-links + .sbm-jump-links{
    margin-top:-1px;
    padding-top:12px;
    border-top:0;
    border-radius:0 0 18px 18px;
}

/* จอกลาง */
@media (max-width:1100px){
    .ufs-category-desc .sbm-jump-links a{
        flex-basis:calc((100% - 30px) / 4);
        max-width:calc((100% - 30px) / 4);
    }
}

/* Tablet */
@media (max-width:760px){
    .ufs-category-desc .sbm-jump-links a{
        flex-basis:calc((100% - 10px) / 2);
        max-width:calc((100% - 10px) / 2);
    }
}

/* Mobile */
@media (max-width:480px){
    .ufs-category-desc .sbm-jump-links{
        padding:15px;
    }

    .ufs-category-desc .sbm-jump-links strong{
        font-size:18px;
    }

    .ufs-category-desc .sbm-jump-links a{
        flex-basis:100%;
        max-width:100%;
        min-height:50px;
        font-size:13px;
    }
}


/* =====================================================
   SECTION ANCHOR
   เวลากดสารบัญ หัวข้อไม่ชนขอบบน
===================================================== */

.ufs-category-desc section[id]{
    scroll-margin-top:30px;
}


/* =====================================================
   CATEGORY TABLE WRAPPER
===================================================== */

.ufs-category-desc .sbm-table-wrap{
    position:relative;

    width:100%;
    max-width:100%;

    margin:28px 0 34px;

    overflow-x:auto;
    overflow-y:hidden;

    border:1px solid rgba(38,237,114,.24);
    border-radius:16px;

    background:#07110c;

    box-shadow:0 16px 38px rgba(0,0,0,.22);

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
    scrollbar-color:var(--ufs-accent) #07110c;
}


/* Scrollbar Chrome */
.ufs-category-desc .sbm-table-wrap::-webkit-scrollbar{
    height:7px;
}

.ufs-category-desc .sbm-table-wrap::-webkit-scrollbar-track{
    background:#07110c;
}

.ufs-category-desc .sbm-table-wrap::-webkit-scrollbar-thumb{
    background:var(--ufs-accent);
    border-radius:20px;
}


/* =====================================================
   TABLE
===================================================== */

.ufs-category-desc .sbm-table-wrap table{
    width:100%;
    min-width:700px;

    margin:0;

    border:0;
    border-collapse:separate;
    border-spacing:0;

    background:#07110c;

    font-size:15px;
    line-height:1.65;

    table-layout:auto;
}


/* Caption */
.ufs-category-desc .sbm-table-wrap caption{
    padding:16px 18px;

    border-bottom:1px solid rgba(38,237,114,.18);

    background:
        linear-gradient(
            90deg,
            rgba(38,237,114,.10),
            rgba(38,237,114,.02)
        );

    color:#fff;

    font-size:16px;
    font-weight:600;

    text-align:left!important;
}


/* ทุกช่อง */
.ufs-category-desc .sbm-table-wrap th,
.ufs-category-desc .sbm-table-wrap td{
    padding:15px 18px;

    border-right:1px solid rgba(38,237,114,.09);
    border-bottom:1px solid rgba(38,237,114,.10);

    vertical-align:top;

    text-align:left!important;
}


/* เอาเส้นขวาสุดออก */
.ufs-category-desc .sbm-table-wrap tr > *:last-child{
    border-right:0;
}


/* Header */
.ufs-category-desc .sbm-table-wrap thead th{
    position:relative;

    background:
        linear-gradient(
            180deg,
            rgba(38,237,114,.18),
            rgba(38,237,114,.09)
        );

    color:#fff;

    font-size:14px;
    font-weight:700;

    white-space:nowrap;
}


/* Column แรกของ body */
.ufs-category-desc .sbm-table-wrap tbody th{
    color:#fff;

    font-weight:600;

    background:rgba(38,237,114,.045);
}


/* Cell */
.ufs-category-desc .sbm-table-wrap tbody td{
    color:#d7e2da;

    background:rgba(7,17,12,.96);
}


/* Zebra row */
.ufs-category-desc .sbm-table-wrap tbody tr:nth-child(even) td{
    background:#0a1510;
}

.ufs-category-desc .sbm-table-wrap tbody tr:nth-child(even) th{
    background:rgba(38,237,114,.065);
}


/* Hover */
.ufs-category-desc .sbm-table-wrap tbody tr{
    transition:background .18s ease;
}

.ufs-category-desc .sbm-table-wrap tbody tr:hover td,
.ufs-category-desc .sbm-table-wrap tbody tr:hover th{
    background:rgba(38,237,114,.095);
}


/* แถวสุดท้ายไม่ต้องมีเส้นล่าง */
.ufs-category-desc .sbm-table-wrap tbody tr:last-child th,
.ufs-category-desc .sbm-table-wrap tbody tr:last-child td{
    border-bottom:0;
}


/* Link ในตาราง */
.ufs-category-desc .sbm-table-wrap a{
    color:var(--ufs-accent);
    font-weight:500;
}

.ufs-category-desc .sbm-table-wrap a:hover{
    color:#75ffa8;
}


/* =====================================================
   GENERIC TABLE
   รองรับ Table ที่ไม่ได้ใส่ class sbm-table-wrap
===================================================== */

.ufs-category-desc table:not(.ufs-table){
    max-width:100%;
}

.ufs-category-desc table:not(.ufs-table) th{
    color:#fff;
}

.ufs-category-desc table:not(.ufs-table) td{
    color:#d7e2da;
}


/* =====================================================
   CATEGORY CONTENT HEADINGS
===================================================== */

/*
   ใน HTML เก่ามี style="text-align:center"
   จึงใช้ !important เพื่อทำให้หัวข้อกลับมาชิดซ้าย
*/

.ufs-category-desc section > h2{
    position:relative;

    margin-top:54px!important;
    margin-bottom:20px!important;

    padding-left:17px;

    text-align:left!important;
}


.ufs-category-desc section > h2::before{
    content:"";

    position:absolute;

    left:0;
    top:.12em;
    bottom:.12em;

    width:4px;

    border-radius:10px;

    background:var(--ufs-accent);

    box-shadow:0 0 14px rgba(38,237,114,.25);
}


.ufs-category-desc section > h3{
    text-align:left!important;
}


/* =====================================================
   CHECKLIST
===================================================== */

.ufs-category-desc .sbm-checklist{
    counter-reset:ufsChecklist;

    display:grid;

    gap:10px;

    margin:24px 0 32px;

    padding:0;

    list-style:none;
}


.ufs-category-desc .sbm-checklist li{
    position:relative;

    margin:0;
    padding:14px 16px 14px 52px;

    border:1px solid rgba(38,237,114,.14);
    border-radius:12px;

    background:rgba(38,237,114,.035);

    color:#dce7df;
}


.ufs-category-desc .sbm-checklist li::before{
    counter-increment:ufsChecklist;
    content:counter(ufsChecklist);

    position:absolute;

    left:14px;
    top:13px;

    display:grid;
    place-items:center;

    width:26px;
    height:26px;

    border-radius:8px;

    background:var(--ufs-accent);

    color:#021007;

    font-size:13px;
    font-weight:800;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:640px){


    .ufs-category-desc .sbm-table-wrap{
        margin:22px 0 28px;

        border-radius:13px;
    }


    .ufs-category-desc .sbm-table-wrap table{
        min-width:620px;

        font-size:14px;
    }


    .ufs-category-desc .sbm-table-wrap th,
    .ufs-category-desc .sbm-table-wrap td{
        padding:12px 13px;
    }


    .ufs-category-desc .sbm-table-wrap caption{
        padding:13px;

        font-size:15px;
    }


    .ufs-category-desc section > h2{
        margin-top:44px!important;

        padding-left:14px;
    }

}


/* หน้าจอเล็กมาก */
@media (max-width:420px){

    .ufs-category-desc .sbm-jump-links{
        grid-template-columns:1fr;
    }


    .ufs-category-desc .sbm-jump-links strong{
        grid-column:auto;
    }

}
/* =====================================================
   FOOTER RESPONSIBLE GAMBLING WARNING
===================================================== */

.ufs-footer-warning{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:18px;

    margin-bottom:32px;
    padding-bottom:30px;

    border-bottom:1px solid rgba(38,237,114,.14);
}

.ufs-footer-warning-item{
    padding:20px 22px;

    border:1px solid rgba(38,237,114,.17);
    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(38,237,114,.05),
            rgba(38,237,114,.015)
        );

    color:var(--ufs-muted);
}

.ufs-footer-warning-item strong{
    display:block;

    margin-bottom:8px;

    color:#fff;

    font-size:17px;
    font-weight:700;
}

.ufs-footer-warning-item p{
    margin:0 0 10px;

    color:#aebbb3;

    font-size:14px;
    line-height:1.7;
}

.ufs-footer-warning-item a{
    display:inline-flex;
    align-items:center;

    color:var(--ufs-accent);

    font-size:14px;
    font-weight:600;
}

.ufs-footer-warning-item a:hover{
    color:#75ffa8;
}


/* Mobile */
@media (max-width:700px){

    .ufs-footer-warning{
        grid-template-columns:1fr;
        gap:12px;

        margin-bottom:24px;
        padding-bottom:24px;
    }

    .ufs-footer-warning-item{
        padding:17px 18px;
    }

    .ufs-footer-warning-item strong{
        font-size:16px;
    }

    .ufs-footer-warning-item p{
        font-size:13px;
    }

}
/* =====================================================
   MOBILE BOTTOM MENU ICONS
===================================================== */

.ufs-mobile-bar .ufs-mobile-item{
    position:relative;

    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;

    height:70px;

    gap:4px;

    color:#e6eee9;

    text-align:center;

    transition:
        color .2s ease,
        background .2s ease;
}


/* SVG ICON */
.ufs-mobile-bar .ufs-mobile-icon{
    display:block;

    width:24px;
    height:24px;

    flex:0 0 24px;

    color:var(--ufs-accent);

    transition:
        transform .22s ease,
        color .22s ease,
        filter .22s ease;
}


/* LABEL */
.ufs-mobile-bar .ufs-mobile-item span{
    display:block;

    max-width:100%;

    color:#fff;

    font-size:10px;
    font-weight:500;
    line-height:1.2;

    white-space:nowrap;
}


/* Hover / Tap */
.ufs-mobile-bar .ufs-mobile-item:hover{
    color:var(--ufs-accent);
}


.ufs-mobile-bar .ufs-mobile-item:hover .ufs-mobile-icon{
    color:#75ffa8;

    transform:translateY(-2px);

    filter:
        drop-shadow(
            0 0 5px rgba(38,237,114,.35)
        );
}


/* =====================================================
   CENTER HOME BUTTON
===================================================== */

.ufs-mobile-bar .home{
    position:relative;

    height:78px;
    width:78px;

    display:flex;
    align-items:center;
    justify-content:center;

    justify-self:center;

    margin-top:-18px;

    border:2px solid var(--ufs-accent);
    border-radius:50%;

    background:#031008;

    box-shadow:
        0 0 0 5px #020805,
        0 8px 24px rgba(0,0,0,.35),
        0 0 22px rgba(38,237,114,.12);

    transition:
        transform .2s ease,
        border-color .2s ease,
        box-shadow .2s ease;
}


.ufs-mobile-bar .home:hover{
    transform:translateY(-3px);

    border-color:#75ffa8;

    box-shadow:
        0 0 0 5px #020805,
        0 10px 28px rgba(0,0,0,.42),
        0 0 25px rgba(38,237,114,.22);
}


.ufs-mobile-bar .home img{
    display:block;

    width:56px;
    height:56px;

    object-fit:contain;
}


/* =====================================================
   ACTIVE / TOUCH EFFECT
===================================================== */

.ufs-mobile-bar .ufs-mobile-item:active .ufs-mobile-icon{
    transform:scale(.90);
}


.ufs-mobile-bar .home:active{
    transform:scale(.94);
}
/* =====================================================
   POST TABLE OF CONTENTS
   ใช้รูปแบบเดียวกับสารบัญใน Category
===================================================== */

.ufs-entry-content .sbm-jump-links,
.sbm-content .sbm-jump-links{
    position:relative;

    display:flex;
    flex-wrap:wrap;
    align-items:stretch;

    gap:10px;

    width:100%;

    margin:28px 0 36px;
    padding:20px 22px;

    border:1px solid rgba(38,237,114,.24);
    border-radius:18px;

    background:
        radial-gradient(
            circle at 0% 0%,
            rgba(38,237,114,.10),
            transparent 40%
        ),
        #07110c;

    box-shadow:0 16px 42px rgba(0,0,0,.20);

    text-align:left!important;
}


/* ป้องกัน WordPress แทรก BR */
.ufs-entry-content .sbm-jump-links br,
.sbm-content .sbm-jump-links br{
    display:none!important;
}


/* ป้องกัน WordPress ครอบลิงก์ด้วย P */
.ufs-entry-content .sbm-jump-links > p,
.sbm-content .sbm-jump-links > p{
    display:contents!important;

    margin:0!important;
    padding:0!important;
}


/* =====================================================
   หัวข้อ "เลือกอ่านตามหัวข้อ"
===================================================== */

.ufs-entry-content .sbm-jump-links strong,
.sbm-content .sbm-jump-links strong{
    flex:0 0 100%;

    display:block;

    width:100%;

    margin:0 0 6px;

    color:#fff;

    font-size:20px;
    font-weight:700;
    line-height:1.4;
}


/* =====================================================
   DESKTOP
   9 ปุ่ม / แถว
===================================================== */

.ufs-entry-content .sbm-jump-links a,
.sbm-content .sbm-jump-links a{
    flex:0 0 calc((100% - 80px) / 9);
    max-width:calc((100% - 80px) / 9);

    min-width:0;
    min-height:56px;

    display:flex;
    align-items:center;
    justify-content:flex-start;

    padding:10px 11px;

    border:1px solid rgba(38,237,114,.18);
    border-radius:11px;

    background:rgba(38,237,114,.045);

    color:#dfe9e2;

    font-size:13px;
    font-weight:500;
    line-height:1.4;

    text-align:left!important;

    overflow-wrap:anywhere;

    transition:
        background .22s ease,
        border-color .22s ease,
        color .22s ease,
        transform .22s ease,
        box-shadow .22s ease;
}


/* จุดสีเขียวหน้าปุ่ม */
.ufs-entry-content .sbm-jump-links a::before,
.sbm-content .sbm-jump-links a::before{
    content:"";

    flex:0 0 7px;

    width:7px;
    height:7px;

    margin-right:8px;

    border-radius:50%;

    background:var(--ufs-accent);

    box-shadow:0 0 10px rgba(38,237,114,.35);
}


/* Hover */
.ufs-entry-content .sbm-jump-links a:hover,
.sbm-content .sbm-jump-links a:hover{
    color:#fff;

    border-color:var(--ufs-accent);

    background:rgba(38,237,114,.11);

    box-shadow:0 8px 20px rgba(0,0,0,.18);

    transform:translateY(-2px);
}


/* =====================================================
   TABLET / LAPTOP
===================================================== */

@media (max-width:1100px){

    .ufs-entry-content .sbm-jump-links a,
    .sbm-content .sbm-jump-links a{
        flex-basis:calc((100% - 30px) / 4);
        max-width:calc((100% - 30px) / 4);
    }

}


/* =====================================================
   TABLET
===================================================== */

@media (max-width:760px){

    .ufs-entry-content .sbm-jump-links a,
    .sbm-content .sbm-jump-links a{
        flex-basis:calc((100% - 10px) / 2);
        max-width:calc((100% - 10px) / 2);
    }

}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:480px){

    .ufs-entry-content .sbm-jump-links,
    .sbm-content .sbm-jump-links{
        padding:15px;
        gap:9px;
    }


    .ufs-entry-content .sbm-jump-links strong,
    .sbm-content .sbm-jump-links strong{
        font-size:18px;
    }


    .ufs-entry-content .sbm-jump-links a,
    .sbm-content .sbm-jump-links a{
        flex-basis:100%;
        max-width:100%;

        min-height:50px;

        font-size:13px;
    }

}
/* =====================================================
   POST TABLE DESIGN
   ใช้รูปแบบเดียวกับ CATEGORY TABLE
===================================================== */

/* TABLE WRAPPER */
.ufs-entry-content .sbm-table-wrap,
.sbm-content .sbm-table-wrap{
    position:relative;

    width:100%;
    max-width:100%;

    margin:28px 0 34px;

    overflow-x:auto;
    overflow-y:hidden;

    border:1px solid rgba(38,237,114,.24);
    border-radius:16px;

    background:#07110c;

    box-shadow:0 16px 38px rgba(0,0,0,.22);

    -webkit-overflow-scrolling:touch;

    scrollbar-width:thin;
    scrollbar-color:var(--ufs-accent) #07110c;
}


/* =====================================================
   SCROLLBAR
===================================================== */

.ufs-entry-content .sbm-table-wrap::-webkit-scrollbar,
.sbm-content .sbm-table-wrap::-webkit-scrollbar{
    height:7px;
}

.ufs-entry-content .sbm-table-wrap::-webkit-scrollbar-track,
.sbm-content .sbm-table-wrap::-webkit-scrollbar-track{
    background:#07110c;
}

.ufs-entry-content .sbm-table-wrap::-webkit-scrollbar-thumb,
.sbm-content .sbm-table-wrap::-webkit-scrollbar-thumb{
    background:var(--ufs-accent);
    border-radius:20px;
}


/* =====================================================
   TABLE
===================================================== */

.ufs-entry-content .sbm-table-wrap table,
.sbm-content .sbm-table-wrap table{
    width:100%;
    min-width:680px;

    margin:0;

    border:0;
    border-collapse:separate;
    border-spacing:0;

    table-layout:auto;

    background:#07110c;

    font-size:15px;
    line-height:1.65;
}


/* =====================================================
   TABLE CAPTION
===================================================== */

.ufs-entry-content .sbm-table-wrap caption,
.sbm-content .sbm-table-wrap caption{
    padding:16px 18px;

    border-bottom:1px solid rgba(38,237,114,.18);

    background:
        linear-gradient(
            90deg,
            rgba(38,237,114,.12),
            rgba(38,237,114,.025)
        );

    color:#fff;

    font-size:16px;
    font-weight:600;
    line-height:1.5;

    text-align:left!important;
}


/* =====================================================
   CELLS
===================================================== */

.ufs-entry-content .sbm-table-wrap th,
.ufs-entry-content .sbm-table-wrap td,
.sbm-content .sbm-table-wrap th,
.sbm-content .sbm-table-wrap td{
    padding:15px 18px;

    border-right:1px solid rgba(38,237,114,.09);
    border-bottom:1px solid rgba(38,237,114,.10);

    vertical-align:middle;

    text-align:left!important;
}


/* เอาเส้นด้านขวาของ Column สุดท้ายออก */
.ufs-entry-content .sbm-table-wrap tr > *:last-child,
.sbm-content .sbm-table-wrap tr > *:last-child{
    border-right:0;
}


/* =====================================================
   TABLE HEADER
===================================================== */

.ufs-entry-content .sbm-table-wrap thead th,
.sbm-content .sbm-table-wrap thead th{
    background:
        linear-gradient(
            180deg,
            rgba(38,237,114,.18),
            rgba(38,237,114,.09)
        );

    color:#fff;

    font-size:14px;
    font-weight:700;

    white-space:nowrap;
}


/* =====================================================
   FIRST COLUMN
===================================================== */

.ufs-entry-content .sbm-table-wrap tbody th,
.sbm-content .sbm-table-wrap tbody th{
    color:#fff;

    font-weight:600;

    background:rgba(38,237,114,.045);

    white-space:nowrap;
}


/* =====================================================
   NORMAL CELLS
===================================================== */

.ufs-entry-content .sbm-table-wrap tbody td,
.sbm-content .sbm-table-wrap tbody td{
    color:#d7e2da;

    background:rgba(7,17,12,.96);
}


/* =====================================================
   ZEBRA ROWS
===================================================== */

.ufs-entry-content .sbm-table-wrap tbody tr:nth-child(even) td,
.sbm-content .sbm-table-wrap tbody tr:nth-child(even) td{
    background:#0a1510;
}


.ufs-entry-content .sbm-table-wrap tbody tr:nth-child(even) th,
.sbm-content .sbm-table-wrap tbody tr:nth-child(even) th{
    background:rgba(38,237,114,.065);
}


/* =====================================================
   HOVER
===================================================== */

.ufs-entry-content .sbm-table-wrap tbody tr,
.sbm-content .sbm-table-wrap tbody tr{
    transition:
        background .18s ease,
        box-shadow .18s ease;
}


.ufs-entry-content .sbm-table-wrap tbody tr:hover td,
.ufs-entry-content .sbm-table-wrap tbody tr:hover th,
.sbm-content .sbm-table-wrap tbody tr:hover td,
.sbm-content .sbm-table-wrap tbody tr:hover th{
    background:rgba(38,237,114,.095);
}


/* =====================================================
   LAST ROW
===================================================== */

.ufs-entry-content .sbm-table-wrap tbody tr:last-child th,
.ufs-entry-content .sbm-table-wrap tbody tr:last-child td,
.sbm-content .sbm-table-wrap tbody tr:last-child th,
.sbm-content .sbm-table-wrap tbody tr:last-child td{
    border-bottom:0;
}


/* =====================================================
   LINK INSIDE TABLE
===================================================== */

.ufs-entry-content .sbm-table-wrap a,
.sbm-content .sbm-table-wrap a{
    color:var(--ufs-accent);

    font-weight:600;
}


.ufs-entry-content .sbm-table-wrap a:hover,
.sbm-content .sbm-table-wrap a:hover{
    color:#75ffa8;
}


/* =====================================================
   STRONG TEXT
===================================================== */

.ufs-entry-content .sbm-table-wrap strong,
.sbm-content .sbm-table-wrap strong{
    color:#fff;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:640px){

    .ufs-entry-content .sbm-table-wrap,
    .sbm-content .sbm-table-wrap{
        margin:22px 0 28px;

        border-radius:13px;
    }


    .ufs-entry-content .sbm-table-wrap table,
    .sbm-content .sbm-table-wrap table{
        min-width:620px;

        font-size:14px;
    }


    .ufs-entry-content .sbm-table-wrap th,
    .ufs-entry-content .sbm-table-wrap td,
    .sbm-content .sbm-table-wrap th,
    .sbm-content .sbm-table-wrap td{
        padding:12px 13px;
    }


    .ufs-entry-content .sbm-table-wrap caption,
    .sbm-content .sbm-table-wrap caption{
        padding:13px;

        font-size:15px;
    }

}
/* =====================================================
   GLOBAL FAQ ACCORDION
   POST + CATEGORY
===================================================== */

.ufs-faq{
    width:100%;
    margin:48px 0 36px;
}


/* FAQ eyebrow */
.ufs-faq .ufs-section-eyebrow{
    margin-bottom:8px;

    color:var(--ufs-accent);

    font-size:13px;
    font-weight:600;
    letter-spacing:.12em;

    text-transform:uppercase;
}


/* FAQ Title */
.ufs-faq > h2{
    margin:0 0 24px!important;

    color:#fff;

    font-size:clamp(27px,3vw,38px);
    line-height:1.3;

    text-align:left!important;
}


/* =====================================================
   QUESTION CARD
===================================================== */

.ufs-faq details{
    position:relative;

    width:100%;

    margin:0 0 12px;
    padding:0;

    overflow:hidden;

    border:1px solid rgba(38,237,114,.18);
    border-radius:14px;

    background:
        linear-gradient(
            180deg,
            rgba(38,237,114,.045),
            rgba(7,17,12,.94)
        );

    transition:
        border-color .22s ease,
        background .22s ease,
        box-shadow .22s ease;
}


/* Open state */
.ufs-faq details[open]{
    border-color:rgba(38,237,114,.38);

    background:
        linear-gradient(
            180deg,
            rgba(38,237,114,.075),
            rgba(7,17,12,.98)
        );

    box-shadow:
        0 12px 30px rgba(0,0,0,.18);
}


/* =====================================================
   QUESTION
===================================================== */

.ufs-faq summary{
    position:relative;

    display:flex;
    align-items:center;

    min-height:62px;

    padding:16px 56px 16px 20px;

    cursor:pointer;

    list-style:none;

    color:#fff;

    font-size:17px;
    font-weight:600;
    line-height:1.5;

    text-align:left!important;

    transition:
        color .2s ease,
        background .2s ease;
}


/* Hide default browser marker */
.ufs-faq summary::-webkit-details-marker{
    display:none;
}

.ufs-faq summary::marker{
    display:none;
}


/* Hover */
.ufs-faq summary:hover{
    color:var(--ufs-accent);

    background:rgba(38,237,114,.035);
}


/* =====================================================
   PLUS / MINUS ICON
===================================================== */

.ufs-faq summary::before,
.ufs-faq summary::after{
    content:"";

    position:absolute;

    right:21px;
    top:50%;

    width:16px;
    height:2px;

    border-radius:10px;

    background:var(--ufs-accent);

    transform:translateY(-50%);

    transition:transform .22s ease;
}


/* Vertical line = + */
.ufs-faq summary::after{
    transform:
        translateY(-50%)
        rotate(90deg);
}


/* Open = - */
.ufs-faq details[open] summary::after{
    transform:
        translateY(-50%)
        rotate(0deg);
}


/* =====================================================
   ANSWER
===================================================== */

.ufs-faq details > p,
.ufs-faq details > div{
    margin:0;

    padding:0 20px 20px;

    color:#c9d6ce;

    font-size:16px;
    line-height:1.8;

    text-align:left!important;
}


/* ถ้ามีหลาย paragraph */
.ufs-faq details > div p{
    margin:0 0 1em;
}

.ufs-faq details > div p:last-child{
    margin-bottom:0;
}


/* Links inside answer */
.ufs-faq details a{
    color:var(--ufs-accent);

    font-weight:500;
}

.ufs-faq details a:hover{
    color:#75ffa8;
}


/* =====================================================
   CATEGORY SUPPORT
===================================================== */

.ufs-category-desc .ufs-faq{
    margin-top:54px;
}

.ufs-category-desc .ufs-faq summary,
.ufs-category-desc .ufs-faq details p,
.ufs-category-desc .ufs-faq details div{
    text-align:left!important;
}


/* =====================================================
   POST SUPPORT
===================================================== */

.ufs-entry-content .ufs-faq,
.sbm-content .ufs-faq{
    width:100%;
}


/* =====================================================
   MOBILE
===================================================== */

@media (max-width:640px){

    .ufs-faq{
        margin:38px 0 30px;
    }

    .ufs-faq > h2{
        margin-bottom:18px!important;

        font-size:27px;
    }

    .ufs-faq summary{
        min-height:56px;

        padding:14px 48px 14px 16px;

        font-size:15px;
        line-height:1.5;
    }

    .ufs-faq summary::before,
    .ufs-faq summary::after{
        right:17px;

        width:14px;
    }

    .ufs-faq details > p,
    .ufs-faq details > div{
        padding:0 16px 17px;

        font-size:14px;
        line-height:1.75;
    }

}