@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue:wght@400&family=Noto+Sans+Thai:wght@300;400;500;600&display=swap'); 
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined'); 

*, *::before, *::after { box-sizing: border-box; }

img[data-lazyloaded]{
    opacity: 0;
}
img.litespeed-loaded{
    -webkit-transition: opacity .5s linear 0.2s;
    -moz-transition: opacity .5s linear 0.2s;
    transition: opacity .5s linear 0.2s;
    opacity: 1;
}

/* Additional Custom Styles */

      :root {
    --font-size             : ;
    --line-height           : ;
    --font-weight           : ;


    --primary-orange:                    #FF6B35;
    --primary-blue:                      #2E86AB;
    --primary-dark:                      #1B1B1E;
    --secondary-light:                    #F8F9FA;
    --secondary-gray:                    #6C757D;
    --secondary-green:                    #28A745;
    --secondary-red:                     #DC3545;
    --accent-yellow:                     #FFC107;
    --nowbkk-primary-600:                 #243CBF;
    /* blue */
    --nowbkk-primary-300:                 #3587F2;
    /* blue sky */
    --nowbkk-secondary-600:                #0FBF4D;
    /* green low-light */
    --nowbkk-secondary-400:                #23D92F;
    /* green light */
    --nowbkk-accent-400:                  #F25835;
    /* oragen */
    --font-primary:                        'Noto Sans Thai', 
                                       'Bebas Neue', sans-serif;
    --font-secondary:                      'Bebas Neue', 
                                       'Noto Sans Thai', sans-serif;
    /* ===== Brand Hue Tokens ===== */
    --green-900:                        #00522D;
     /* Cal Poly Green */
    --green-600:                        #388062;
     /* Viridian */
    --green-300:                        #77C3A4;
     /* Cambridge Blue */
    --green-100:                        #D2EBE1;
     /* Mint Green */
    --navy-900:                         #1B3564;
     /* Navy Blue */
    --gold-600:                         #B48A54;
     /* Brownish-Gold */

    --btn-001:                          #0FDB80;
    /* ===== Semantic (Dark UI) ===== */
    --bg:                              #0f1115;
    --surface:                          #141821;
    --ink:                             #E7ECF3;
    --ink-muted:                        #B7C0CD;
    --rule:                            #212633;

    --brand:                       var(--green-900); 
    --brand-2:                     var(--navy-900); 
    --accent:                      var(--gold-600); 
    --success:                     var(--green-600); 
    --info:                        var(--green-300); 
    --soft:                        var(--green-100); 


    --bulma-primary:                    hsla(171deg,100%,41%,1); 
    --bulma-primary-00:                  hsla(171deg,100%,1%,1); 
    --bulma-primary-00-invert:            hsla(171deg,100%,31%,1); 
    --bulma-primary-00-invert-l:            31%;
    --bulma-primary-00-l:                   1%;
    --bulma-primary-05:                  hsla(171deg,100%,6%,1); 
    --bulma-primary-05-invert:            hsla(171deg,100%,41%,1); 
    --bulma-primary-05-invert-l:            41%;
    --bulma-primary-05-l:                   6%;
    --bulma-primary-10:                  hsla(171deg,100%,11%,1); 
    --bulma-primary-10-invert: hsla(171deg,100%,51%,1); 
    --bulma-primary-10-invert-l: 51%;
    --bulma-primary-10-l: 11%;
    --bulma-primary-15: hsla(171deg,100%,16%,1); 
    --bulma-primary-15-invert: hsla(171deg,100%,100%,1); 
    --bulma-primary-15-invert-l: 100%;
    --bulma-primary-15-l: 16%;
    --bulma-primary-20: hsla(171deg,100%,21%,1); 
    --bulma-primary-20-invert: hsla(171deg,100%,100%,1); 
    --bulma-primary-20-invert-l: 100%;
    --bulma-primary-20-l: 21%;
    --bulma-primary-25: hsla(171deg,100%,26%,1); 
    --bulma-primary-25-invert: hsla(171deg,100%,100%,1); 
    --bulma-primary-25-invert-l: 100%;
    --bulma-primary-25-l: 26%;
    --bulma-primary-30: hsla(171deg,100%,31%,1); 
    --bulma-primary-30-invert: hsla(171deg,100%,1%,1); 
    --bulma-primary-30-invert-l: 1%;
    --bulma-primary-30-l: 31%;
    --bulma-primary-35: hsla(171deg,100%,36%,1); 
    --bulma-primary-35-invert: hsla(171deg,100%,1%,1); 
    --bulma-primary-35-invert-l: 1%;
    --bulma-primary-35-l: 36%;
    --bulma-primary-40: hsla(171deg,100%,41%,1); 
    --bulma-primary-40-invert: hsla(171deg,100%,6%,1); 
    --bulma-primary-40-invert-l: 6%;
    --bulma-primary-40-l: 41%;
    --bulma-primary-45: hsla(171deg,100%,46%,1); 
    --bulma-primary-45-invert: hsla(171deg,100%,6%,1); 
    --bulma-primary-45-invert-l: 6%;
    --bulma-primary-45-l: 46%;
    --bulma-primary-50: hsla(171deg,100%,51%,1); 
    --bulma-primary-50-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-50-invert-l: 11%;
    --bulma-primary-50-l: 51%;
    --bulma-primary-55: hsla(171deg,100%,56%,1); 
    --bulma-primary-55-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-55-invert-l: 11%;
    --bulma-primary-55-l: 56%;
    --bulma-primary-60: hsla(171deg,100%,61%,1); 
    --bulma-primary-60-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-60-invert-l: 11%;
    --bulma-primary-60-l: 61%;
    --bulma-primary-65: hsla(171deg,100%,66%,1); 
    --bulma-primary-65-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-65-invert-l: 11%;
    --bulma-primary-65-l: 66%;
    --bulma-primary-70: hsla(171deg,100%,71%,1); 
    --bulma-primary-70-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-70-invert-l: 11%;
    --bulma-primary-70-l: 71%;
    --bulma-primary-75: hsla(171deg,100%,76%,1); 
    --bulma-primary-75-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-75-invert-l: 11%;
    --bulma-primary-75-l: 76%;
    --bulma-primary-80: hsla(171deg,100%,81%,1); 
    --bulma-primary-80-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-80-invert-l: 11%;
    --bulma-primary-80-l: 81%;
    --bulma-primary-85: hsla(171deg,100%,86%,1); 
    --bulma-primary-85-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-85-invert-l: 11%;
    --bulma-primary-85-l: 86%;
    --bulma-primary-90: hsla(171deg,100%,91%,1); 
    --bulma-primary-90-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-90-invert-l: 11%;
    --bulma-primary-90-l: 91%;
    --bulma-primary-95: hsla(171deg,100%,96%,1); 
    --bulma-primary-95-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-95-invert-l: 11%;
    --bulma-primary-95-l: 96%;
    --bulma-primary-100: hsla(171deg,100%,100%,1); 
    --bulma-primary-100-invert: hsla(171deg,100%,16%,1); 
    --bulma-primary-100-invert-l: 16%;
    --bulma-primary-100-l: 100%;
    --bulma-primary-base: hsla(171deg,100%,41%,1); 
    --bulma-primary-bold: hsla(171deg,100%,20%,1); 
    --bulma-primary-bold-invert: hsla(171deg,100%,90%,1); 
    --bulma-primary-dark: hsla(171deg,100%,11%,1); 
    --bulma-primary-dark-invert: hsla(171deg,100%,51%,1); 
    --bulma-primary-dark-invert-l: 51%;
    --bulma-primary-dark-l: 11%;
    --bulma-primary-h: 171deg;
    --bulma-primary-invert: hsla(171deg,100%,6%,1); 
    --bulma-primary-invert-l: 6%;
    --bulma-primary-l: 41%;
    --bulma-primary-light: hsla(171deg,100%,91%,1); 
    --bulma-primary-light-invert: hsla(171deg,100%,11%,1); 
    --bulma-primary-light-invert-l: 11%;
    --bulma-primary-light-l: 91%;
    --bulma-primary-on-scheme: hsla(171deg,100%,41%,1); 
    --bulma-primary-on-scheme-l: 41%;
    --bulma-primary-rgb: 0,209.1,177.735;
    --bulma-primary-s: 100%;
    --bulma-primary-soft: hsla(171deg,100%,90%,1); 
    --bulma-primary-soft-invert: hsla(171deg,100%,20%,1); 
    --bulma-white: hsla(221deg,14%,100%,1); 
    --bulma-white-base: hsla(221deg,14%,100%,1); 
    --bulma-white-bis: #f9fafb;
    --bulma-white-invert: #090a0c;
    --bulma-white-on-scheme: hsla(221deg,14%,100%,1); 
    --bulma-white-ter: #f3f4f6;
    --gh-blue: #79b8ff;
    --gh-blue-light: #9ecbff;
    --gh-dark: #25292e;
    --gh-dimmed: #6a737d;
    --gh-green: #85e89d;
    --gh-orange: #ffab70;
    --gh-pink: #f692ce;
    --gh-purple: #b392f0;
    --gh-red: #f97583;
    --gh-text: #e1e4e8;
    --gh-yellow: #ffea7f;
    --grad-angle: 96deg;
    --grad-blue: linear-gradient(96deg,#669aff 4.28%,#3bd5ff 51.18%,#3affff 100%); 
    --grad-green: linear-gradient(96deg,#38d58e 11.31%,#89f072 58.45%,#bef055 103.75%); 
    --grad-grey: linear-gradient(96deg,#c5c5c5 11.31%,#dcdcdc 50.53%,#a4a4a4 103.75%); 
    --grad-red: linear-gradient(96deg,#f14668 4.28%,#ff5a5c 51.66%,#f1a246 100%); 
    --hl-background: #24292e;
    --hl-blue: #79b8ff;
    --hl-color: #ffab70;
    --hl-cyan: #47ffe7;
    --hl-gray-00: #fafbfc;
    --hl-gray-01: #f6f8fa;
    --hl-gray-02: #e1e4e8;
    --hl-gray-03: #d1d5da;
    --hl-gray-04: #959da5;
    --hl-gray-05: #6a737d;
    --hl-gray-06: #586069;
    --hl-gray-07: #444d56;
    --hl-gray-08: #2f363d;
    --hl-gray-09: #24292e;
    --hl-green: #85e89d;
    --hl-orange: #ffab70;
    --hl-pink: #f692ce;
    --hl-purple: #b392f0;
    --hl-radius: 1rem;
    --hl-rose: #f69292;
    --hl-yellow: #ffea7f;
    --html5: #e44d26;
    --html5-invert: #ebebeb;
    --moon: #8158f5;
    --shine-bg: #0e1917;
    --shine-bg-subtle: #0e231c;
    --shine-fg: #fff;
    --shine-highlight: #0fdb80;
    --shine-highlight-subtle: #03b565;

    --bulma-background: rgb(20, 22, 26); 
    --bulma-scheme-h: 221;
    --bulma-scheme-s: 14%;

    --icon:    #333333;

    --warp-left-width:  calc(100% - 212px); 
    --warp-left-width-mo: 100%;
    --warp-left-mgl:    auto;
    --warp-left-mgl-mo:    0%;
    --warp-left-mgr:0%;
    --warp-left-mgr-mo:    0%;
    --warp-left-pdl:    180px;
    --warp-left-pdl-mo:  var(--pd-mo); 
    --warp-left-pdr:     130px;
    --warp-left-pdr-mo:  var(--pd-mo); 

    --pd-mo: 16px;

    --border: 1px solid #cccccc;

    --link:      var(--info); 
    --link-hover: var(--success); 

    --focus-ring: color-mix(in oklab, var(--info) 70%, white); 
    --shadow-1:   0 10px 24px rgba(0,0,0,.25); 


    --font-size-xxxl: calc(2.140625rem + 1.875vw); /* H1 BIG */
    --font-size-xxl: calc(1.640625rem + 1.875vw); /* H1 */
    --font-size-xl:  calc(1.265625rem + .7774390244vw); 
    /* H2 */
    --font-size-lg:  calc(1.1975rem + .5487804878vw); 
      /* H3-H4 / Big */
    --font-size-md:  calc(1.109375rem + .3201219512vw); 
    /* Card Title */
    --font-size-sm:  calc(1.046875rem + .137195122vw); 
     /* H5 / Label */
    --font-size-base: 1rem;
        /* Body/Nav */
    --font-size-xs:   .875rem;
      /* Footer/Sub */
    --font-size-xxs:   .685rem;
      /* Footer/Sub */

    --mo-size: calc(1.109375rem + .3201219512vw);

    --w-light:   300;
    --w-regular: 400;
    --w-medium:  500;
    --w-semi:    600;
    --w-semibold:   700;

    --lh-small:   0.75;
    --lh-pre:    0.95;
    --lh-normal:  1.1;
    --lh-relaxed: 1.2;
    --lh-snug:    1.25;
    --lh-tight:    1.35;

    /* Layout */
    --container: 1200px;
    --content: 890px;
    --boxed: 960px;
    --radius: 3px;
    --gap-mo: 4px;
    --gap-mox2: 8px;
    --gap-mox3: 12px;
    --gap: 16px;
    --gapx2: 32px;
    --gapx3: 48px;
    --gapx4: 64px;
    --gap-invert-mo: -4px;
    --gap-invert-mox2: -8px;
    --gap-invert-mox3: -12px;
    --gap-invert: -16px;
    --gap-invertx2: -32px;
    --gap-invertx3: -48px;
    --gap-invertx4: -64px;

    --vw-min: 480px;
    --vw-max: 980px;
    --vw-span: calc(var(--vw-max) - var(--vw-min));
    --mso-min: 12px;   /* @480 */
    --mso-max: 16px;   /* @980 */
    --icon-scale-inline: 1.125; /* ~+12.5% ดูพอดีกับ Noto Sans Thai */
    --mso-fluid: clamp(
    var(--mso-min),
    calc( var(--mso-min)
        + ( (var(--mso-max) - var(--mso-min)) * ((100vw - var(--vw-min)) / var(--vw-span)) )
    ),
    var(--mso-max)
    );


}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }



.btn .icon{
  font-size: calc(var(--mso-fluid) * 1.2);
  font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" calc(var(--mso-fluid) * 1.2);
}

.mso{
    font-family: 'Material Symbols Outlined';
    font-weight: normal;
    font-style: normal;
    font-size: calc(var(--mso-fluid) * 1.2);
    font-variation-settings: "FILL" 0, "wght" 500, "GRAD" 0, "opsz" calc(var(--mso-fluid) * 1.2);
    /* Preferred icon size */
    display: inline-block;
    line-height: 1;
    text-transform: none;
    letter-spacing: normal;
    word-wrap: normal;
    white-space: nowrap;
    direction: ltr;
}

.sub-name .mso {
    
    line-height:var(--lh-tight); 
}
.letter .mso {
    line-height:var(--lh-pre); 
    font-size:var(--font-size-xs); 
    margin-right:calc(var(--font-size-xs)/2) }

body {
    font-family: var(--font-primary); 
    font-size: 16px;
    color: var(--primary-dark); 
    background-color: var(--secondary-light); 
}

section {
    gap:0 
}

.warp-boxed {
    max-width: var(--boxed); 
    width: 100%;
    position: relative;
    margin-left: auto;
    margin-right: auto }

h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-primary); 
    white-space: nowrap;
    word-break: break-word;
    line-break: auto;
    word-wrap: break-word;
    text-wrap: balance;
    overflow-wrap: normal;
    text-transform: none;
    text-wrap-style: balance;
}

.article-content p, 
.article-content strong {
    font-family: var(--font-primary); 
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
}

.article-content h1, 
.article-content h2, 
.article-content h3, 
.article-content h4, 
.article-content h5, 
.article-content h6 {
    margin-bottom: var(--gap); 
    margin-top: calc(var(--gap) + var(--gap-mox2)); 
    line-height: var(--lh-snug); 
    font-weight: var(--w-regular); 
}

h1 {
    margin:0;
    font-family:var(--font-display); 
    
    font-weight:var(--w-semi); font-size: clamp(2rem, 1.4rem + 3vw, 3.87rem); 
    
    line-height:var(--lh-tight); 
    -webkit-font-smoothing: antialiased;
    
}
h2 {
    font-size: 1.5rem;
    }
h3 {
    font-size: 1.25rem;
    }
h4 {
    font-size: 1.125rem;
    }

.size-xxl {
    font-size:var(--font-size-xxl); 
    line-height:var(--lh-tight); 
    font-weight:var(--w-medium); 
    }
.size-xl {
    font-size:var(--font-size-xl); 
    line-height:var(--lh-snug); 
    font-weight:var(--w-medium); 
    }
.size-lg {
    font-size:var(--font-size-lg); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-regular); 
    }
.size-md {
    font-size:var(--font-size-md); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-regular); 
    }
.size-sm {
    font-size:var(--font-size-sm); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-regular); 
    }
.size-base {
    font-size:var(--font-size-base); 
    line-height:var(--lh-relaxed); 
    font-weight:var(--w-light); 
    }
.size-xs {
    font-size:var(--font-size-xs); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-light) }



    .re-title-super {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xxxl) * 0.875); 
        line-height:calc(var(--lh-tight) * 1.3125); 
        font-weight:var(--w-medium); 
        }
    .re-title-hero {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xxl) * 0.875); 
        line-height:calc(var(--lh-tight) * 1.3125); 
        font-weight:var(--w-medium); 
        }
    .re-page-title {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xl) * 0.875); 
        line-height:calc(var(--lh-snug) * 1.3125); 
        font-weight:var(--w-regular); 
        }
    .re-post-title {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-lg) * 0.875); 
        line-height:calc(var(--lh-normal) * 1.3125); 
        font-weight:var(--w-regular); 
        }
    .re-card-name {
        --font-size             : calc(var(--font-size-md) * 0.875);
        --line-height           : calc(var(--lh-normal) * 1.3125);
        --font-weight           : var(--w-regular);

        gap:var(--gap); align-items: center; display: flex;
        font-size:c var(--font-size); 
        line-height: var(--line-height); 
        font-weight:var(--font-weight); 
        }
    .re-desscription {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-md) * 0.875); 
        line-height:calc(var(--lh-relaxed) * 1.3125); 
        font-weight:var(--w-light); 
        }
    .re-paragraph {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-base) * 1.175); 
        line-height:calc(var(--lh-snug) * 1.4125);
        font-weight:var(--w-light); 
        }
    .re-meta {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-sm) * 0.875); 
        line-height:calc(var(--lh-snug) * 1.3125); 
        font-weight:var(--w-light); 
        }
    .re-label {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-base) * 0.875); 
        line-height:calc(var(--lh-relaxed) * 1.3125); 
        font-weight:var(--w-light); 
        }
    .re-pre {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xxs) * 0.875); 
        line-height:calc(var(--lh-normal) * 1.3125); 
        font-weight:var(--w-light); 
        }


@media (max-width: 980px) {   
    .re-title-super {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xxxl) * 0.75); 
        line-height:calc(var(--lh-tight) * 1.125); 
        font-weight:var(--w-medium); 
        }
    .re-title-hero {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xxl) * 0.75); 
        line-height:calc(var(--lh-tight) * 1.125); 
        font-weight:var(--w-medium); 
        }
    .re-page-title {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xl) * 0.75); 
        line-height:calc(var(--lh-snug) * 1.125); 
        font-weight:var(--w-regular); 
        }
    .re-post-title {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-lg) * 0.75); 
        line-height:calc(var(--lh-snug) * 1.125); 
        font-weight:var(--w-regular); 
        }
    .re-card-name {
        --font-size:calc(var(--font-size-md) * 0.75); 
        --line-height:calc(var(--lh-normal) * 1.125); 
        }
    .re-desscription {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-md) * 0.75); 
        line-height:calc(var(--lh-relaxed) * 1.125); 
        font-weight:var(--w-light); 
        }
    .re-paragraph {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-base) * 0.975); 
        line-height:calc(var(--lh-snug) * 1.2125);
        font-weight:var(--w-light); 
        }
    .re-meta {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-base) * 0.75); 
        line-height:calc(var(--lh-tight) * 1.125); 
        font-weight:var(--w-light); 
        }
    .re-label {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-base) * 0.75); 
        line-height:calc(var(--lh-relaxed) * 1.125); 
        font-weight:var(--w-light); 
        }
    .re-pre {
        gap:var(--gap); align-items: center; display: flex;
        font-size:calc(var(--font-size-xxs) * 0.75); 
        line-height:calc(var(--lh-normal) * 1.125); 
        font-weight:var(--w-light); 
        }
}

.title-super {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-xxxl); 
    line-height:var(--lh-tight); 
    font-weight:var(--w-medium); 
    }
.title-hero {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-xxl); 
    line-height:var(--lh-tight); 
    font-weight:var(--w-medium); 
    }
.page-title {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-xl); 
    line-height:var(--lh-snug); 
    font-weight:var(--w-regular); 
    }
.post-title {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-lg); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-regular); 
    }
.card-name {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-md); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-regular); 
    }
.desscription {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-base); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-light); 
    }
.paragraph {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-base); 
    line-height:var(--lh-relaxed); 
    font-weight:var(--w-light); 
    }
.letter {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-xs); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-light); 
    }
.half-letter {
    gap:var(--gap); align-items: center; display: flex;
    font-size:var(--font-size-xxs); 
    line-height:var(--lh-normal); 
    font-weight:var(--w-light); 
    }

.w300 {
    font-weight:var(--w-light) } 
.w400 {
    font-weight:var(--w-regular) } 
.w500 {
    font-weight:var(--w-medium) }
.w600 {
    font-weight:var(--w-semi) }
.w700 {
    font-weight:var(--w-semibold) }
.display {
    font-family:var(--font-display) } .body {
    font-family:var(--font-body) }

.hr {
    height:1px;
    background:var(--rule); 
    margin:10px 0 16px }
.note {
    color:var(--ink-muted); 
    font-size:.92rem }

/* Buttons / Links / Badges */
a {
    color:var(--nowbkk-primary-600); 
    text-decoration:none }
a:hover {
    color:var(--primary-dark); 
    text-decoration:underline }


.gap-first{margin-bottom: var(--gapx2) }
.gap-last{margin-bottom: var(--gapx2) }
.gap-last2x{margin-bottom: var(--gapx3) }
.gap-last3x{margin-bottom: var(--gapx4) }


small {
    line-height: 1.2 }

.container{width: 100%;
    max-width: var(--container); display: grid;
    margin-left: auto;
    margin-right: auto }
.warp {
    margin-top:var(--gapx2); 
    margin-bottom:var(--gapx2); 
    width: 100%;
    display: grid;
    margin-left: auto;
    margin-right: auto;
}

@media (max-width: 968px) {
.main-content .warp,
.warp{
margin-top:0;
margin-bottom: var(--gapx2); 
gap: 0;
padding-left: var(--pd-mo); 
padding-right: var(--pd-mo); 
    }
}

li > *{
    --line-height: var(--line-height) *0.685rem;
}

.site-header {
    background: white;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    position: sticky;
    top: 0;
    z-index: 99;
}

.header-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px 24px;
    display: grid;
    align-items: start;
    grid-template-columns: 150px 1fr;
}

.custom-logo-link {
    height: 46px;
    display: flex;
    align-items:center }

.site-logo {
    font-family: var(--font-primary); 
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-orange); 
    text-decoration: none;
}

.site-logo .bkk {
    color: var(--primary-blue); 
    }

.custom-logo{
    width: 140px;
    height: auto;
}

.main-navigation{
    display: flex;
    margin-left:22px }

.main-navigation ul {
    display: flex;
    list-style: none;
    width: 100%;
    align-items: baseline;
    gap: 0px;
    margin: 0;
}

.main-navigation a {
    color: var(--primary-dark); 
    text-decoration: none;
    transition: color 0.3s ease;
}

.main-navigation a:hover {
    color: var(--primary-orange); 
    }

.main-navigation a .mso {
    display: none }
.search-input {
    padding: 8px 16px;
    border: 2px solid #E9ECEF;
    border-radius: 8px;
    width: 250px;
}

.search-input:focus {
    outline: none;
    border-color: var(--primary-orange); 
}

.breadcrumbs {
    align-items: center;
}
.breadcrumbs a{
    color:var(--surface); 
    font-family: var(--font-secondary); 
    -webkit-font-smoothing: antialiased;
}

.hero-title {
    font-family: var(--font-secondary); 
    -webkit-font-smoothing: antialiased;
}

  .hero-section {
    background: linear-gradient(135deg, var(--shine-highlight), var(--primary-blue)); 
    color: white;
    padding: var(--gapx2) var(--gap) var(--gapx2) ;
    text-align: left;
}

.hero-subtitle {
    opacity: 0.9;
}

.thumbnail-hero-bg{
    background-color: var(--hl-gray-08); 
    height: 250px;
    width: 100%;
    position: absolute;
    bottom: 0;
    z-index: -1;
}
.thumbnail-hero{
    display: flex;
    gap:var(--gapx2); 
    position: relative;
    overflow: hidden;
    width: 100%;
    max-width: 100%;
    display: block;
    padding-bottom: var(--gapx3) }
.thumbnail-hero img{
    width: 100%;
    display: block;
    height: auto;
    object-fit: cover;
    position: relative;
    aspect-ratio: 16/10;
    border-radius: var(--radius);}


@media (max-width: 968px) {
    .thumbnail-hero{
    gap: 0;
    padding-left: 0;
    padding-right: 0;
    padding-bottom: 0;
    background: var(--hl-gray-02); 
    margin-top: -1px;
    overflow: hidden;
    margin-bottom: -9px;
        }
    .thumbnail-hero .warp-boxed{
    padding-left: var(--pd-mo); 
    padding-right: var(--pd-mo); 
    z-index: 2;
        }
    .thumbnail-hero-bg{
    top: 0;;
    height: 35%;
    z-index: 1;
        }
    .toc-title{
    margin-top: var(--pd-mo);
        }
}

.toc-boxes {
    display:grid;
    gap:var(--gapx); 
    grid-template-columns:1fr 1fr }
.toc-boxes,
.toc-boxes a{color:var(--surface); 
    } 
.article-toc {
    
    gap:var(--gapx2); 
    padding-top: var(--gap-mo);
    padding:var(--gapx3) var(--gap); 
    margin-bottom: var(--gapx2)
}
.article-toc .desscription{
    color:var(--bulma-primary-20); 
    padding-top: var(--gap-mo);

    gap: var(--gap-mox2); 
    align-items: center;
}

.toc-boxes li{
    gap: var(--gap-mox2); 
    border-bottom: var(--border);
    color: var(--hl-gray-05); 
    padding-top: var(--gap-mox2);
    padding-bottom: var(--gap-mox2);
}
.toc-boxes li:last-child{
    border-bottom: 0;
}

@media (min-width: 968px) {
    .toc-boxes li:nth-child(old){
        margin-right: var(--gapx2);
        margin-left: 0;
    }
    .toc-boxes li:nth-child(even){
        margin-right: 0;
        margin-left: var(--gapx2);
    }
    .toc-boxes li:nth-last-child(-n + 2){
        border-bottom: none;
    }

}

.article-toc{
    background: var(--hl-gray-02); 
}

.article-toc .warp-purpose{
    gap: var(--gap); 
    padding-bottom: var(--gap); 
}
/* Tablet styles */
@media (max-width: 968px) {
.article-toc{
padding: var(--gap-mo) var(--gap) var(--gap); 
margin-bottom: var(--gap-mo); 
    }
.article-toc .warp-purpose{
padding: 0;
    }
.toc-boxes {
grid-template-columns:1fr;
padding:0;
gap: 0;
    }
}
.main-content {
    font-family: var(--font-primary); 
    position: relative;
}


.btn {
    display: inline-block;
    padding: 8px 24px;
    border-radius: 8px;
    font-family: var(--font-primary); 
    font-weight: 600;
    text-decoration: none;
    text-align: center;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.btn:hover{
    text-decoration: none;
}

.btn-primary {
    background: var(--primary-orange); 
    color: white;
}

.btn-primary:hover {
    background: #E55A2B;
    transform: translateY(-1px); 
}

.btn-secondary {
    background: transparent;
    color: var(--primary-blue); 
    border: 2px solid var(--primary-blue); 
}

.btn-secondary:hover {
    background: var(--primary-blue); 
    color: white;
}

.btn-deal {
    background: var(--secondary-green); 
    color: white;
    animation: pulse 2s infinite;
}


.btn-shopee {
    background: var(--primary-orange); 
    color: white;
}

.btn-shopee:hover {
    background: #E55A2B;
    transform: translateY(-1px); 
}


.btd-feature {
    --h: 348;
    --s: 86%;
    --l: 61%;
    --a: 0.1;
    --bg: var(--grad-red); 
    --bd-width: 0.125em;
    --radius: 0.75em;
    --p: 1em;
    --icon: var(--primary-orange); 
    background: var(--bg); 
    border-radius: calc(var(--bd-width) + var(--radius)); 
    box-shadow: 0 .5em 1em 0 hsla(var(--h),var(--s),var(--l),var(--a)),0 1em 2em 0 hsla(var(--h),var(--s),var(--l),var(--a)); 
    padding: var(--bd-width); 
    transition-duration: 0.294s;
    transition-property:box-shadow, transform;
    -webkit-font-smoothing: antialiased;
    font-weight: 600;
}

.btd-feature-body {
    align-items: center;
    background-color: var(--bulma-white); 
    border-radius: var(--radius); 
    column-gap: var(--p); 
    display: grid;
    grid-template-columns: 30px 1fr;
    padding: var(--gap) var(--gap); 
    text-align: left;
    color:  var(--surface); 
    line-height: 1.35;
}

.btd-feature:hover {
    text-decoration: none;
    transform: translateY(-4px); 
}

.btd-feature.is-shopee {
    --h: 220;
    --bg: var(--grad-red); 
    --icon: var(--primary-orange); 
    box-shadow: 0 8px 16px 0 rgba(241, 70, 70, 0.18), rgba(241, 70, 104, 0.1) 0px 16px 32px 0px;
}

.btd-feature.is-lazada {
    --h: 220;
    --bg: var(--grad-blue); 
    --icon: var(--primary-600); 
    box-shadow: 0 8px 16px 0 rgba(0, 172, 255, 0.46), rgba(70, 127, 241, 0.1) 0px 16px 32px 0px;
}

.btd-feature.is-easy {
    --h: 160;
    --bg: var(--grad-green); 
    --icon: var(--bulma-success); 
    box-shadow: rgba(70, 241, 184, 0.1) 0px 8px 16px 0px, rgba(70, 241, 184, 0.1) 0px 16px 32px 0px;
}


.btd-feature.is-free {
    --h: 348;
    --s: 6%;
    --bg: var(--grad-grey); 
    --icon: var(--bulma-text); 
    box-shadow: rgba(162, 150, 152, 0.1) 0px 8px 16px 0px, rgba(162, 150, 152, 0.1) 0px 16px 32px 0px;
}

.btd-feature-body .mso {
    color: var(--icon); 
    grid-row: 1/span 2;
}


.time_seen_ago{
    gap: 0;
}


.card {
    background: white;
    border-radius: var(--radius); 
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); 
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    display: flex;
    grid-template-columns: 1fr;
    gap: var(--gap-mo); 
    flex-direction: column;
}

.card:hover {
    transform: translateY(-2px); 
    box-shadow: 0 4px 16px rgba(0,0,0,0.15); 
}

.card-image {
    width: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
    aspect-ratio: 4/3;
    overflow: hidden;
}

.card-image:hover {
    transform: translateY(-5px); 
}

.card-content {
    
    display: flex;
    grid-template-columns: 1fr;
    flex-direction: column;
    gap: var(--gap); 
    padding-left: var(--gap); 
    padding-right: var(--gap); 
    padding-bottom: var(--gap); 
    justify-content: space-between;
    flex-direction: column;
    flex: 1;
    padding-top: var(--gap);
}
.card-title {
    color: var(--hl-gray-06); 
    margin-bottom: var(--gap); 
    overflow: hidden;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.card-title a {
    color: var(--primary-dark); 
    text-decoration: none;
}

.card-title a:hover {
    color: var(--primary-orange); 
    }
.card-content .card-meta{
    margin-top: var(--gap-mo);
}


 @media (max-width: 968px) {
    .card{
    gap: var(--gap-mo); 
    }
 }

.posts-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr)); 
    gap: var(--gapx2); 
    margin-bottom: var(--gap); 
    margin-top: var(--gap); 
    align-items: stretch;
}
.related-posts .posts-grid{    
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--gap); 
}

.posts-grid .card-excerpt > p{-webkit-line-clamp: 2;}
.posts-grid .card-content{gap: var(--gap-mo);}

 @media (max-width: 768px) {
    .posts-grid,
    .related-posts .posts-grid{
    gap: var(--gap-mox2);
    grid-template-columns: repeat(2, minmax(0, 1fr)); 
    }
    .card-content{
        gap: 0;
        padding: 0 var(--gap-mox2);
    }
    
 }

.featured-grid {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    margin-bottom: 48px;
}





.is-style-stripes table {
    width: 100%;
    margin-bottom: var(--gapx2) }
.is-style-stripes tbody tr:nth-child(odd) {
    background-color: #f0f0f0;
}

.is-style-stripes tbody tr td {
    padding: 7px 12px }


@keyframes pulse {
    0% {
    transform: scale(1); 
    }
    50% {
    transform: scale(1.05); 
    }
    100% {
    transform: scale(1); 
    }
}
    
.price-display {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 8px 0;
}

.price-current {
    color: var(--secondary-green); 
    font-weight: 700;
    font-size: 1.25rem;
}

.price-original {
    color: var(--secondary-red); 
    text-decoration: line-through;
    font-size: 0.9rem;
}

.discount-badge {
    background: var(--primary-orange); 
    color: white;
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 0.75rem;
    font-weight: 600;
}

.indentation-style{
    max-width: var(--warp-left-width); 
    
    width: 100%;
    
    margin-left:var(--warp-left-mgl); 
    
    margin-right: var(--warp-left-mgr); 
    
    padding-right: var(--warp-left-pdr); 
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr)); 
}
.article-header .indentation-style {
    gap:var(--gapx2); 
    padding-top:var(--gapx2); 
    padding-bottom:var(--gapx2) }
.article-meta {
    color: var(--secondary-gray); 
    font-size: 0.875rem;
}
.article-meta > * {
    display: flex;
    align-items: center;
    gap: var(--gap-mox2) ;
}

.article-meta a{
    color:var(--surface); 
}

.meta-tags {
    gap: 0;
}

.meta-tags > *{
    display: flex;
    gap: var(--gap-mox2); 
    align-items: center;
}

/* Tablet styles */
@media (max-width: 968px) {
.article-header .indentation-style,
.indentation-style{
gap:calc(var(--gap) + var(--gap-mox2)); 
padding-top: var(--pd-mo); 
padding-bottom: var(--pd-mo); 
max-width: var(--warp-left-width-mo); 
margin-right: var(--warp-left-mgr-mo); 
padding-right: var(--warp-left-pdr-mo); 
margin-left: var(--warp-left-mgl-mo); 
padding-left: var(--warp-left-pdl-mo); 
    }
.article-header{
background-color: var(--hl-gray-08); 
color: var(--secondary-light); 
    }
.breadcrumbs{
gap: var(--gap-mo); 
    }
.breadcrumbs,
.breadcrumbs a{
color: var(--hl-gray-03); 
    }
.article-meta{
display: flex;
flex-wrap: nowrap;
overflow-x: auto;
overflow-y: hidden;
white-space: nowrap;
scrollbar-width: thin;
column-gap: var(--gap); 
    }
.article-meta::-webkit-scrollbar {
    height: 0;
    }
.article-meta::-webkit-scrollbar-thumb {
    background: #666;
    border-radius: 3px;
    }
.article-meta::-webkit-scrollbar-track {
    background: transparent;
    }
.article-meta > *{
    flex-wrap: nowrap;
    }

.article-meta,
.article-meta a{
    color: var(--hl-gray-04); 
    }
}

.article-content { 
    color: var(--hl-gray-09); 
}

.article-content,
.article-content p{
    font-size:calc(var(--font-size-base) * 1.175); 
    line-height:calc(var(--lh-snug) * 1.3725); 
    font-weight: var(--w-light); 
}

@media (max-width: 968px) {
    .article-content,
    .article-content p{
        font-size:calc(var(--font-size-base) * 0.975); 
        line-height:calc(var(--lh-snug) * 1.4125);
        font-weight:var(--w-light); 
    }
}

.article-content .wp-block-image img {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin: 24px 0;
}

.shopping-section{
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--gap); 
}
.shopping-links{
    display: grid;
    gap: var(--gap); 
    grid-template-columns:1fr 1fr;
    align-items: center;
}

.shopping-disclosure{
    margin-top: var(--gap-mox2); 
    padding: 0 var(--gap); 
}


@media (max-width: 768px) {
.shopping-links {
    flex-direction: column;
    }
}

.article-content .wp-block-list,
.article-content ul{
    padding-left:var(--gapx2); 
    margin-bottom:var(--gap); 
}

.text-center {
    text-align: center;
    }
.text-orange {
    color: var(--primary-orange); 
    }
.text-blue {
    color: var(--primary-blue); 
    }
.text-green {
    color: var(--secondary-green); 
    }
.text-red {
    color: var(--secondary-red); 
    }

.mb-lg {
    margin-bottom: 24px;
    }
.mb-xl {
    margin-bottom: 32px;
    }
.mb-md {
    margin-bottom: 16px;
    }

@media (max-width: 768px) {
.header-container {
flex-direction: column;
    }
    
.main-navigation ul {
flex-direction: column;
gap: 0px;
width: 100%;
text-align: center;
    }
    
.search-input {
    width: 100%;
    }
.article-header {
    font-size:var(--font-size-xl) }

.desscription{gap: 5px }
}


.tag-list{
    align-self: center;
    animation-delay: .4s;
    background-color: var(--green-100);
    border: none;
    color: var(--bulma-primary-100-invert);
    transform-origin: center;
    align-items: center;
    border-radius: .5em;
    display: flex;
    gap:0;
    padding: 0 var(--gap-mox2);
    font-weight: var(--w-regular);
    transition: transform 0.3s ease;
    position: relative;
    opacity: 0.65;
}
.tag-list:hover{
    background-color: var(--green-300);
    text-decoration: none;
}

@media (max-width: 968px) {
    .article-header .tag-list{
        background-color: var(--hl-gray-09);
        opacity: 0.85;
    }
}

/* Homepage Specific Styles */
.static-page .page-header {
    text-align: center;
    padding: 2rem 0;
    background: linear-gradient(135deg, var(--primary-orange), var(--primary-blue)); 
    color: white;
    margin-bottom: 3rem;
}

.homepage-features {
    margin: 3rem 0;
}

.features-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 2rem;
    margin: 2rem 0;
}

.feature-card {
    background: white;
    padding: 2rem;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    text-align: center;
    transition: transform 0.3s ease;
}

.feature-card:hover {
    transform: translateY(-5px); 
}

.feature-card h3 {
    color: var(--primary-orange); 
    margin-bottom: 1rem;
}

.latest-posts {
    margin-top: 4rem;
}

.latest-posts h2 {
    text-align: center;
    margin-bottom: 2rem;
    color: var(--primary-dark); 
}

/* Responsive */
@media (max-width: 968px) {
    .features-grid {
        grid-template-columns: 1fr;
    }
    
    .feature-card {
        padding: 1.5rem;
    }
    
    .page-header {
        padding: 1.5rem 1rem;
    }
}


/* Base header styles */

.mobile-menu-toggle {
    display: none;
    flex-direction: column;
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    width: 40px;
    height: 40px;
    justify-content: center;
    align-items: center;
    gap: 4px;
    transition: all 0.3s ease;
}

.icon-menu{
    font-size: 32px;
}



.nav-wrapper {
    display: grid;
    align-items: center;
    gap: 30px;
    grid-template-columns: 1fr 250px;
}

.nav-menu {
    display: flex;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 30px;
}

.nav-menu a {
    text-decoration: none;
    color: #333;
    padding: 8px 16px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.nav-menu a:hover {
    background-color: #f8f9fa;
    color: #e74c3c;
}

.search-box {
    position: relative;
}

.search-box form {
    display: flex;
    align-items: center;
    position: relative;
}

.search-input {
    padding: 10px 40px 10px 15px;
    border: 2px solid #e0e0e0;
    border-radius: 25px;
    width: 250px;
    font-size: 14px;
    outline: none;
    transition: all 0.3s ease;
}

.search-input:focus {
    border-color: #e74c3c;
    box-shadow: 0 0 0 3px rgba(231, 76, 60, 0.1); 
}

.search-button {
    position: absolute;
    right: 5px;
    background: none;
    border: none;
    padding: 8px;
    cursor: pointer;
    color: #666;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.search-button:hover {
    color: #e74c3c;
    background-color: rgba(231, 76, 60, 0.1); 
}

/* Tablet styles */
@media (max-width: 968px) {
.nav-menu {
gap: 20px;
    }
    
.search-input {
width: 200px;
    }
}

/* Mobile styles */
@media (max-width: 968px) {
    
    .header-container {
        display: grid;
        grid-template-columns: 1fr auto;
        align-items:center;
        padding: 0 16px;
    }

    .header-container .custom-logo-link {
        justify-self: start;
    }
    .header-container .mobile-menu-toggle {
        justify-self: end;
    }
    
    .mobile-menu-toggle {
        display: flex;
    }
    
    .nav-wrapper {
        position: fixed;
        top: 44px;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        transform: translateY(-100%); 
        opacity: 0;
        visibility: hidden;
        transition: all 0.3s ease;
        box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
        padding: 20px;
        max-height: calc(100vh - 70px); 
        overflow-y: auto;
    }
    
    .main-navigation{
        width: 100%;
        padding-right: 20px;
        margin-left: 0;
        padding-left: 20px;
    }
    .nav-wrapper.active {
        transform: translateY(0); 
        opacity: 1;
        visibility: visible;
        display: flex;
    }
    
    .nav-menu {
        flex-direction: column;
        gap: 0;
        padding-bottom: 20px;
    }
    
    .nav-menu li {
        border-bottom: 1px solid #f0f0f0;
        width: 100%;
    }
    
    .nav-menu li:last-child {
        border-bottom: none;
    }
    
    .nav-menu a {
        display: block;
        padding: 15px 0;
        border-radius: 0;
        color: #333;
        font-size: 16px;
        width: 100%;
    }
    
    .nav-menu a:hover {
        background: none;
        color: #e74c3c;
        padding-left: 10px;
    }
    
    .search-box {
        width: 100%;
    }
    
    .search-box form {
        width: 100%;
    }
    
    .search-input {
        width: 100%;
        padding: 12px 45px 12px 15px;
        font-size: 16px;
    }
    .main-navigation a{
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .main-navigation a .mso {
        color: var(--primary-dark); 
        background: var(--secondary-light); 
        border-radius: 15px;
        width: 30px;
        height: 30px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
}



@media (max-width: 968px) {
    .archive .posts-grid{
        padding-left: var(--gap); 
        padding-right: var(--gap); 
    }
}