/* =============================================
   SEED LOTTERY BLOCKS — style.css
   ============================================= */

:root {
  --slb-red:    #dc0507;
  --slb-red2:   #be0809;
  --slb-dark:   #22283a;
  --slb-gray:   #dfdfdf;
  --slb-light:  #f9f9f9;
  --slb-border: #373737;
  --slb-white:  #0f100f;
  --slb-radius: 8px;
  --box-s-main: 0 2px 10px rgba(0, 0, 0, 0.06);
  --slb-bg-bt: linear-gradient(180deg, rgba(220, 5, 7, 1) 0%, rgba(190, 8, 9, 1) 100%);
  --slb-bg-bt-hover: linear-gradient(0deg,rgba(220, 5, 7, 1) 0%, rgba(190, 8, 9, 1) 100%);
}

/* ---- LAYOUT ---- */
.slb-row { display: flex; gap: 20px; flex-wrap: wrap; }
.slb-col-left  { flex: 1 1 55%; min-width: 0; }
.slb-col-right { flex: 1 1 30%; min-width: 260px; }
.slb-col-location { flex: 1 1 45%; min-width: 0; }
.slb-col-foreign  { flex: 1 1 20%; min-width: 200px; }

.slb-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 8px;}
.slb-section-title  { font-size: clamp(20px, 2vw, 28px);  font-weight: 700; margin: 0; }
.slb-view-all { font-size: 13px; color: var(--slb-red); text-decoration: none; font-weight: 600; white-space: nowrap; }
/*slb-view-all:hover { text-decoration: underline; }*/

/* ---- HERO BANNER ---- */
.slb-hero { border-radius: var(--slb-radius); overflow: hidden; }
.slb-hero-slide {
  display: block;
  width: 100%;
  aspect-ratio: 16/6;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  text-decoration: none;
}

.slb-hero .swiper-pagination-bullet-active{
  background: #dc0507 !important;
}

.slb-hero-content { position: relative; z-index: 2; max-width: 480px; text-align: center;}
.slb-hero-title   { font-size: 52px; font-weight: 800; color: #0f100f; margin: 0 0 8px; line-height: 1.2; }
.slb-hero-title span { color: #dc0507; }
.slb-hero-subtitle { font-size: 28px; font-weight: 600; color: #0f100f; margin: 0 ; }
.slb-hero-subtitle span { color: #dc0507; }
.slb-hero-desc     { font-size: 20px; color: #0f100f; margin: 0 0 20px; font-weight: 600;}
.slb-hero-btns     { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;}

.slb-btn-primary {
  background: var(--slb-red);
  color: #fff !important;
  padding: 6px 30px; border-radius: 100px;
  font-weight: 700; font-size: 14px;
  text-decoration: none !important;
  display: inline-block; transition: opacity .2s;
  transition: transform 0.3s;
}

.slb-btn-outline {
  border: 2px solid #dc0507; color: #dc0507 !important;
  padding: 6px 30px; border-radius: 100px;
  font-weight: 700; font-size: 14px;
  text-decoration: none !important;
  display: inline-block; transition: background .2s;
}
.slb-btn-outline:hover { background: #fff5f5; }

/* ---- COUNTDOWN ---- */
.slb-countdown {
  border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius);
  padding: 20px 16px;
  text-align: center;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  box-shadow: var(--box-s-main);
  background: linear-gradient(180deg, rgba(220, 5, 7, 1) 0%, rgba(190, 8, 9, 1) 100%) !important;
}
.slb-countdown-label     { font-size: 16px; color: #FFEB3B; margin: 0 0 4px; }
.slb-countdown-name      { font-size: 28px; font-weight: 800; margin: 0 0 16px;  color: #fff !important;}
.slb-countdown-timer     { display: flex; justify-content: center; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.slb-countdown-unit      { text-align: center; }
.slb-countdown-num       {
  display: block; color: #fff;
  border-radius: 6px; padding: 10px 14px;
  font-size: 28px; font-weight: 800;
  min-width: 58px; font-family: monospace; letter-spacing: 2px;
  background: #0f100f !important;
}
.slb-countdown-text      { display: block; font-size: 11px; color: var(--slb-gray); margin-top: 4px; }
.slb-countdown-draw-label{ font-size: 14px; color: #FFEB3B; margin: 0; }

/* Transitions.dev — Number pop-in */
:root {
  --digit-dur: 500ms;
  --digit-distance: 8px;
  --digit-stagger: 70ms;
  --digit-blur: 2px;
  --digit-ease: cubic-bezier(0.34, 1.45, 0.64, 1);
  --digit-dir-x: 0;
  --digit-dir-y: 1;
}
@keyframes t-digit-pop-in {
  0% {
    transform: translate(
      calc(var(--digit-distance) * var(--digit-dir-x)),
      calc(var(--digit-distance) * var(--digit-dir-y))
    );
    opacity: 0;
    filter: blur(var(--digit-blur));
  }
  100% { transform: translate(0, 0); opacity: 1; filter: blur(0); }
}
.t-digit-group {
  display: inline-flex;
  align-items: baseline;
}
.t-digit {
  display: inline-block;
  will-change: transform, opacity, filter;
}
.t-digit-group.is-animating .t-digit {
  animation: t-digit-pop-in var(--digit-dur) var(--digit-ease) both;
}
.t-digit-group.is-animating .t-digit[data-stagger="1"] {
  animation-delay: var(--digit-stagger);
}
.t-digit-group.is-animating .t-digit[data-stagger="2"] {
  animation-delay: calc(var(--digit-stagger) * 2);
}
@media (prefers-reduced-motion: reduce) {
  .t-digit-group .t-digit { animation: none !important; }
}

/* ---- QUICK LINKS ---- */
.slb-quick-links {
  display: flex; justify-content: space-around;
  flex-wrap: wrap; gap: 4px;
  background: var(--slb-white);
  border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius);
  padding: 12px 8px;
  box-shadow: var(--box-s-main);
}
.slb-quick-link {
  display: flex; flex-direction: column; align-items: center;
  gap: 4px; text-decoration: none !important;
  color: var(--slb-dark) !important;
  padding: 6px 6px; border-radius: 8px;
  min-width: 70px; text-align: center;
  transition: background .15s;
}

.slb-quick-link:hover { color: var(--slb-red) !important; }
.slb-quick-link-img { width: 45px; height: 45px; object-fit: contain; }
.slb-quick-link-placeholder { font-size: 28px; line-height: 1; }
.slb-quick-link-label { font-size: 14px; font-weight: 600; }

/* ---- POST GRID (shared) ---- */


.slb-section-wrap{
  background: var(--slb-white);
  border-radius: var(--slb-radius);
  padding: 16px;
  box-shadow: var(--box-s-main);
}

.slb-post-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.slb-post-card {
  text-decoration: none !important; color: inherit !important;
  border-radius: var(--slb-radius); overflow: hidden;
  border: 1px solid var(--slb-border);
  transition: box-shadow .2s;
  position: relative;
  display: block;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
}
.slb-post-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.slb-post-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.slb-no-thumb { background: var(--slb-light); aspect-ratio: 4/3; }
.slb-post-info { padding: 10px; }
.slb-post-title  { font-size: 13px; font-weight: 700; margin: 0 0 4px; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slb-post-excerpt { font-size: 11px; color: var(--slb-gray); margin: 0 0 6px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.slb-post-date { font-size: 11px; color: var(--slb-gray); }
.slb-badge {
  position: absolute; top: 8px; left: 8px;
  background: var(--slb-red); color: #fff;
  font-size: 11px; font-weight: 700;
  padding: 2px 8px; border-radius: 100px;
}

/* ---- CHECK BOX ---- */
.slb-check-box {
  background: var(--slb-white);
  border-radius: var(--slb-radius);
  padding: 16px;
  box-shadow: var(--box-s-main);
}
.slb-tabs { display: flex; border-bottom: 1px solid var(--slb-border);  }
.slb-tab {
  padding: 8px 14px; font-size: 13px;
  text-decoration: none !important;
  color: var(--slb-gray) !important;
  border-bottom: 2px solid transparent;
  transition: all .2s;
}
.slb-tab.active, .slb-tab:hover { color: var(--slb-red) !important; border-bottom-color: var(--slb-red); font-weight: 700; }
.slb-lotto-results { margin-bottom: 14px; }
.slb-lotto-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.slb-lotto-label { font-size: 12px; color: var(--slb-dark); min-width: 90px; }
.slb-lotto-input {
  flex: 1; border: 1px solid var(--slb-border);
  border-radius: 4px; padding: 6px 10px; font-size: 13px;
}
.slb-lotto-num { font-size: 18px; font-weight: 800; color: var(--slb-red); min-width: 40px; text-align: right; }
.slb-btn-check {
  display: block; text-align: center;
  background: var(--slb-bg-bt); color: #fff !important;
  text-decoration: none !important;
  padding: 11px; border-radius: var(--slb-radius);
  font-weight: 700; font-size: 15px;
  margin-bottom: 10px; transition: background .2s;
}
.slb-btn-check:hover { background: var(--slb-bg-bt-hover); }
.slb-check-all-link { display: block; text-align: center; font-size: 14px; color: var(--slb-red) !important; text-decoration: none !important; }
.slb-lotto-date { text-align: center; font-size: 14px; color: var(--slb-gray); margin-top: 8px; }

/* ---- POPULAR ---- */
.slb-popular-wrap { background: var(--slb-white); border: 1px solid var(--slb-border); border-radius: var(--slb-radius); padding: 16px; box-shadow: var(--box-s-main);}
.slb-popular-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.slb-popular-card {
  display: flex; align-items: center; gap: 10px;
  text-decoration: none !important; color: inherit !important;
  background: var(--slb-light); border-radius: var(--slb-radius);
  padding: 10px 12px; transition: box-shadow .2s;
}
.slb-popular-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,.1); }
.slb-popular-icon { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.slb-popular-icon-placeholder { font-size: 28px; }
.slb-popular-info { display: flex; flex-direction: column; }
.slb-popular-title { font-size: 13px; font-weight: 700; }
.slb-popular-desc  { font-size: 11px; color: var(--slb-gray); }

/* ---- DREAM ---- */
.slb-search-form { display: flex;  margin-bottom: 0px; }
.slb-search-input {
  flex: 1; border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius); padding: 9px 14px; font-size: 13px;
  min-width: 280px;
  margin-right: 8px;
}
.slb-search-btn {
  background: var(--slb-red); color: #fff;
  border: none; border-radius: var(--slb-radius);
  padding: 9px 20px; font-weight: 700; font-size: 14px;
  cursor: pointer;
}
.slb-dream-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
.slb-dream-card { text-decoration: none !important; color: inherit !important; display: block; 
    border-radius: var(--slb-radius);
    overflow: hidden;
    border: 1px solid var(--slb-border);
    position: relative;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);
    padding: 6px 6px 10px;
}


.slb-dream-thumb { width: 100%; aspect-ratio: 1/1; object-fit: cover; border-radius: var(--slb-radius); display: block; margin-bottom: 6px; transition: 0.3s;}
.slb-dream-title  { font-size: 12px; font-weight: 700; margin: 0 0 2px; text-align: center;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; 
}
.slb-dream-desc { font-size: 11px; color: var(--slb-gray); margin: 0 0 4px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.slb-dream-numbers { display: flex; gap: 4px; flex-wrap: wrap; align-items: center; justify-content: center;}
.slb-dream-num {
  background: var(--slb-red); color: #fff;
  border-radius: 50%; width: 22px; height: 22px;
  display: flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700;
}
.slb-dream-numbers .slb-dream-title {
    margin-bottom: 0;
}

.slb-dream-card:hover .slb-dream-title{
  color: var(--slb-red);
}

.slb-section-header.dream-interpret {
    flex-wrap: wrap;
}

/* ---- CALENDAR ---- */
.slb-calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slb-cal-day {
  border: 1px solid var(--slb-border); border-radius: var(--slb-radius);
  padding: 14px; text-align: center; background: var(--slb-white);
}
.slb-cal-day.active { background: var(--slb-red); color: #fff; border-color: var(--slb-red); }
.slb-cal-day.active .slb-cal-num {color: #fff; }
.slb-cal-dayname { font-size: 20px; font-weight: 700; margin: 0 0 2px; }
.slb-cal-date    { font-size: 16px; font-weight: 800; margin: 0 0 4px; }
.slb-cal-fortune { font-size: 14px; color: inherit; opacity: .8; margin: 0 0 8px; }
.slb-cal-label   { font-size: 14px; opacity: .7; margin: 0 0 6px; }
.slb-cal-numbers { display: flex; gap: 10px; justify-content: center; }
.slb-cal-num {
  display: flex; align-items: center; justify-content: center;
  font-size: 26px; font-weight: 700;
  flex-wrap: wrap;
}

/* ---- LOCATION ---- */
.slb-loc-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; }
.slb-loc-card { text-decoration: none !important; color: inherit !important; display: block; border: 1px solid var(--slb-border); border-radius: var(--slb-radius); overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.03);}
.slb-loc-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.slb-loc-name {
    font-size: 13px;
    font-weight: 700;
    padding: 0px 8px 2px;
    margin: 0;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slb-loc-addr {
    font-size: 11px;
    color: var(--slb-gray);
    padding: 0 8px 4px;
    margin: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.slb-loc-card .slb-dream-numbers { padding: 0 8px 8px; }
.slb-loc-num{
    background: #f9f9f9;
    color: var(--slb-red);
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
}
.slb-loc-info { padding: 10px; }
.slb-loc-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); }
.slb-loc-name { font-size: 13px; font-weight: 700; margin: 0 0 2px; }


/* ---- FOREIGN LOTTERY ---- */
.slb-foreign-card {
  background: var(--slb-white); border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius); padding: 16px; height: 100%;
  box-shadow: var(--box-s-main);
}
.slb-foreign-title { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 12px; }
.slb-foreign-links { list-style: none; margin: 0 0 16px; padding: 0; }
.slb-foreign-links li { border-bottom: 1px solid var(--slb-border); padding: 8px 0; }
.slb-foreign-links li:last-child { border-bottom: none; }
.slb-foreign-links a { font-size: 13px; color: var(--slb-gray) !important; text-decoration: none !important; display: flex; align-items: center; gap: 6px; }
.slb-foreign-links a::before { content: '◉'; color: var(--slb-red); font-size: 10px; }
.slb-foreign-links a:hover { color: var(--slb-red) !important; }
.slb-btn-foreign {
  display: block; text-align: center;
  background: var(--slb-bg-bt); color: #fff !important;
  text-decoration: none !important;
  padding: 10px; border-radius: var(--slb-radius);
  font-weight: 700; font-size: 14px;
}

/* ---- STATISTICS ---- */
.slb-stats-wrap { background: var(--slb-white); border: 1px solid var(--slb-border); border-radius: var(--slb-radius); padding: 16px; box-shadow: var(--box-s-main);}
.slb-stats-summary { display: flex; gap: 12px;  margin-bottom: 10px;}
.slb-stat-item { flex: 1; text-align: center; padding: 6px; box-shadow: var(--box-s-main);}
.slb-stat-label { display: block; font-size: 11px; color: var(--slb-gray); margin-bottom: 4px; }
.slb-stat-val   { display: block; font-size: 34px; font-weight: 800; color: #0f100f; line-height: 1.2;}
.slb-stat-val.hot {color: var(--slb-red);}
.slb-chart-title { font-size: 13px; font-weight: 700; margin: 0 0 10px; }
.slb-bars { display: flex; align-items: flex-end; gap: 6px; height: 142px; }
.slb-bar-wrap { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 3px; height: 100%; }
.slb-bar-count { font-size: 10px; font-weight: 700; color: var(--slb-dark); }
.slb-bar { width: 80%; background: var(--slb-red); border-radius: 3px 3px 0 0; min-height: 4px; transition: height .3s; }
.slb-bar-num { font-size: 11px; color: var(--slb-gray); }
.slb-section-title.stats-header {font-size: 18px;}

/* ---- ARTICLES ---- */
.slb-art-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.slb-art-card { text-decoration: none !important; display: block; border-radius: var(--slb-radius); overflow: hidden; }
.slb-art-thumb { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; transition: opacity .2s; }
.slb-art-card:hover .slb-art-thumb { opacity: .85; }
.slb-art-card { text-decoration: none !important; display: block; border-radius: var(--slb-radius); overflow: hidden; }
.slb-art-thumb-wrap { position: relative; overflow: hidden; border-radius: var(--slb-radius); }
.slb-art-card:hover .slb-art-thumb { opacity: .85; }

/* overlay title */
.slb-art-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(to top, rgb(141 3 3 / 86%) 0%, rgba(0, 0, 0, 0) 100%);
  padding: 24px 12px 10px;
}
.slb-art-title {
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  margin: 0;
  line-height: 1.4;
  /* จำกัด 2 บรรทัด */
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

/* ---- LINE OA ---- */
.slb-line-card { border-radius: var(--slb-radius); padding: 24px; background: linear-gradient(45deg,rgba(220, 17, 20, 1) 0%, rgba(183, 11, 12, 1) 100%); position: relative; overflow: hidden;}
.slb-line-content { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.slb-line-text { flex: 1; }
.slb-line-title     { color: #fff; font-size: 24px; font-weight: 600; margin: 0px; }
.slb-line-highlight { color: #ffd700; font-size: 24px; font-weight: 800; margin: 0 0 12px; }
.slb-line-bullets   { list-style: none; margin: 0 0 16px; padding: 0; }
.slb-line-bullets li { color: #fff; font-size: 16px; padding: 4px 0; display: flex; align-items: center; gap: 6px; }
.slb-line-bullets li::before { content: '⚪'; font-size: 12px; }
.slb-line-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.slb-btn-line {
  background: #fff; color: var(--slb-dark) !important;
  text-decoration: none !important;
  padding: 9px 20px; border-radius: var(--slb-radius);
  font-weight: 700; font-size: 16px; display: block;
  width: 100%;
  text-align: center;
}
.slb-line-id { color:var(--slb-dark); font-size: 13px; }
.slb-line-logo {  width: 80px; height: 80px; right: 25px; top: 25px; transform: rotate(45deg);}


/* ---- FOREIGN WRAP (Hanoi+Laos block) ---- */
.slb-foreign-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.slb-foreign-card { background: var(--slb-white); border: 1px solid var(--slb-border); border-radius: var(--slb-radius); padding: 16px; }
.slb-foreign-title { font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin: 0 0 9px; }
.slb-foreign-links { list-style: none; margin: 0 0 16px; padding: 0; }
.slb-foreign-links li { border-bottom: 1px solid var(--slb-border); padding: 8px 0; }
.slb-foreign-links li:last-child { border-bottom: none; }
.slb-foreign-links a { font-size: 13px; color: var(--slb-gray) !important; text-decoration: none !important; display: flex; align-items: center; gap: 6px; }
.slb-foreign-links a::before { content: '◉'; color: var(--slb-red); font-size: 10px; }
.slb-foreign-links a:hover { color: var(--slb-red) !important; }
.slb-btn-foreign { display: block; text-align: center; background: var(--slb-bg-bt); color: #fff !important; text-decoration: none !important; padding: 10px; border-radius: var(--slb-radius); font-weight: 700; font-size: 14px; }

/* ---- RESPONSIVE ---- */



@media (max-width: 1024px) {
  .slb-calendar-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .slb-col-left, .slb-col-right, .slb-col-location, .slb-col-foreign { flex: 1 1 100%; }
  .slb-post-grid { grid-template-columns: repeat(4, 1fr); }
  .slb-popular-grid { grid-template-columns: repeat(3, 1fr); }
  .slb-dream-grid { grid-template-columns: repeat(4, 1fr); }
  .slb-loc-grid { grid-template-columns: repeat(4, 1fr); }
  .slb-dream-grid .slb-dream-card:nth-child(n+5) { display: none;}
}

@media (max-width: 768px) {
  .slb-loc-grid { grid-template-columns: repeat(4,1fr); }
  .slb-stats-inner { flex-direction: column; }
}


@media (max-width: 600px) {
  .slb-hero-slide { padding: 24px 16px; min-height: 180px; }
  .slb-hero-title { font-size: 22px; }
  .slb-post-grid { grid-template-columns: repeat(2, 1fr); }
  .slb-popular-grid { grid-template-columns: repeat(2, 1fr); }
  .slb-dream-grid { grid-template-columns: repeat(2, 1fr); }
  .slb-loc-grid { grid-template-columns: repeat(2, 1fr); }
  .slb-art-grid { grid-template-columns: repeat(2, 1fr); }
  .slb-art-grid .slb-art-card:nth-child(n+3) { display: none; }
  .slb-bars { height: 80px; }
  .slb-line-logo { display: none; }
  .slb-quick-links{display: grid; grid-template-columns: repeat(3, 1fr);  }
  .slb-search-input {min-width: 150px; width: 100%;}
  .slb-search-form { width: 100%;} 
  .slb-cal-date { font-size: 10px; }
  .slb-cal-dayname { font-size: 18px; }
  .slb-cal-fortune { font-size: 12px; }
  .slb-cal-label { font-size: 12px; }
  .slb-cal-num { font-size: 22px;}
  .slb-foreign-links a { font-size: 12px; }
}




/* =============================================
   SHORTCODES — lottery-shortcodes.php
   ============================================= */

/* 1. lottery_by_date */
.slb-sc-result {
  background: var(--slb-white); border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius); padding: 20px; text-align: center;
}
.slb-sc-date { font-size: 12px; color: var(--slb-gray); margin: 0 0 8px; }
.slb-sc-first { font-size: 38px; font-weight: 800; color: var(--slb-red); letter-spacing: 4px; font-family: monospace; }
.slb-sc-first-label { font-size: 12px; color: var(--slb-gray); margin: 0 0 16px; }
.slb-sc-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.slb-sc-grid div { background: var(--slb-light); border-radius: 6px; padding: 10px; }
.slb-sc-grid span { display: block; font-size: 20px; font-weight: 800; color: var(--slb-red); font-family: monospace; }
.slb-sc-grid label { display: block; font-size: 11px; color: var(--slb-gray); margin-top: 2px; }


.slb-sc-result-header {
  display: flex; align-items: center; gap: 10px;
  justify-content: center;
}

.slb-sc-result-title { font-size: 16px; font-weight: 700; margin: 0; color: #22283a; }
.slb-sc-result-btn {
  display: block; text-align: center;
  background: #c0392b; color: #fff !important;
  text-decoration: none !important;
  padding: 10px; border-radius: 8px;
  font-weight: 700; font-size: 13px;
  margin-top: 14px;
}

/* 2. lottery_check_number */
.slb-sc-check-wrap { max-width: 420px; }
.slb-sc-check-form { display: flex; gap: 8px; }
.slb-sc-check-input {
  flex: 1; border: 1px solid var(--slb-border); border-radius: var(--slb-radius);
  padding: 10px 14px; font-size: 16px; letter-spacing: 2px; text-align: center;
}
.slb-sc-check-btn {
  background: var(--slb-red); color: #fff; border: none;
  border-radius: var(--slb-radius); padding: 10px 24px;
  font-weight: 700; font-size: 14px; cursor: pointer;
}
.slb-sc-check-btn:hover { background: var(--slb-red2); }
.slb-sc-check-result { margin-top: 12px; text-align: center; }
.slb-sc-check-found { background: #e9f9ec; border: 1px solid #4caf50; border-radius: var(--slb-radius); padding: 14px; }
.slb-sc-check-prize { color: #2e7d32; font-weight: 800; font-size: 16px; margin: 4px 0 0; }
.slb-sc-check-none { color: var(--slb-gray); font-size: 14px; padding: 10px; }

/* 3. lottery_statistics */
.slb-sc-stats { overflow-x: auto; }
.slb-sc-stats-table { width: 100%; border-collapse: collapse; background: var(--slb-white); border-radius: var(--slb-radius); overflow: hidden; }
.slb-sc-stats-table th { background: var(--slb-light); padding: 10px; font-size: 12px; text-align: center; border-bottom: 2px solid var(--slb-border); }
.slb-sc-stats-table td { padding: 10px; text-align: center; font-size: 13px; border-bottom: 1px solid var(--slb-border); }
.slb-sc-stats-first { font-weight: 800; color: var(--slb-red); font-family: monospace; letter-spacing: 2px; }
.slb-sc-stats-last2 { font-weight: 700; color: var(--slb-dark); font-family: monospace; }

.slb-shortcode-error { color: var(--slb-gray); font-size: 13px; padding: 12px; background: var(--slb-light); border-radius: var(--slb-radius); }


/* ---- LOTTERY API RESULT ---- */
.slb-lotto-api-result { padding: 7px 0 12px; display: block; text-align: center; }
.slb-lotto-first-label { font-size: 16px; color: var(--slb-red); margin: 0 0 4px; text-align: center; font-weight: 700;}
.slb-lotto-first-num {
  font-size: 52px; font-weight: 800; color: #FFEB3B;
  letter-spacing: 4px;  font-family: monospace; text-align: center;
}

/* layout grid */
.slb-lotto-secondary {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* 3 ตัวหน้า — บนซ้าย */
.slb-lotto-secondary .slb-lotto-row-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

/* 2 ตัวล่าง — บนขวา ยาว 2 แถว */
.slb-lotto-secondary .slb-lotto-row-bottom {
  width: 100%;
}

.slb-lotto-sec-item {
  border: 2px solid #373737;
  border-radius: var(--slb-radius);
  padding: 11px;
  text-align: center;
}
.slb-lotto-sec-label { font-size: 11px; color: var(--slb-gray); margin-bottom: 6px; display: block; }
.slb-lotto-sec-nums  { display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;}
.slb-lotto-sec-num   { font-size: 22px; font-weight: 800; color: var(--slb-red); font-family: monospace; }



/* ---- HOT NUMBERS SHORTCODE ---- */
.slb-sc-hot {
  background: var(--slb-white);
  border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius);
  padding: 16px;
  margin-top:8px;
  box-shadow: var(--box-s-main);
}

.slb-sc-hot-header {
  background: #fbfbfb;
  border-radius: var(--slb-radius);
  padding: 10px 16px;
  margin: -16px -16px 16px -16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.slb-sc-hot-title {
  font-size: 16px;
  font-weight: 700;
  margin: 0;
}

.slb-sc-hot-sub {
  font-size: 11px;
  color: var(--slb-red);
}

.slb-sc-hot-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 8px;
}

.slb-sc-hot-item {
  text-align: center;
  border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius);
  padding: 8px 12px;
}

.slb-sc-hot-label {
  display: block;
  font-size: 14px;
  color: var(--slb-gray);
  margin-bottom: 2px;
}

.slb-sc-hot-num {
  display: block;
  font-size: 36px;
  font-weight: 800;
  color: var(--slb-red);
  line-height: 1;
}

.slb-sc-hot-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 8px;
  border: 1px solid var(--slb-border);
  border-radius: var(--slb-radius);
  justify-content: center;
}

.slb-sc-hot-row-label {
  font-size: 14px;
  color: var(--slb-gray);
  min-width: 36px;
}

.slb-sc-hot-tag {
  font-size: 15px;
  font-weight: 700;
  color: #f7bf42;
}

.slb-sc-hot-btn {
  display: block;
  text-align: center;
  background: var(--slb-red);
  color: #fff !important;
  text-decoration: none !important;
  padding: 10px;
  border-radius: var(--slb-radius);
  font-weight: 700;
  font-size: 14px;
  margin-top: 14px;
}

.slb-sc-hot-btn:hover { background: var(--slb-red2); }


/* Random — โทนแดง */
.zn-dream-random {
 background: linear-gradient(180deg, rgba(220, 5, 7, 1) 0%, rgba(190, 8, 9, 1) 100%);
  border-radius: 8px;
  padding: 20px 16px;
  text-align: center;
}
.zn-dream-random-title {
  font-size: 15px;
  font-weight: 700;
  color: #fff;
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid rgba(255,255,255,.3);
}
.zn-dream-random-display {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin-bottom: 14px;
}
.zn-dream-random-num {
  width: 64px;
  height: 72px;
  background: #fff;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 38px;
  font-weight: 800;
  color: #22283a;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  transition: transform .1s;
}
.zn-rand-spin {
  transform: rotateX(90deg) scale(.9);
  opacity: .6;
}
.zn-rand-final {
  animation: zn-bounce .4s ease;
}
@keyframes zn-bounce {
  0%   { transform: scale(.8); }
  60%  { transform: scale(1.1); }
  100% { transform: scale(1); }
}
.zn-dream-random-btn {
  background: #fff;
  color: #dc0507;
  border: none;
  border-radius: 100px;
  padding: 10px 28px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
  margin-bottom: 10px;
  width: 100%;
  transition: opacity .2s, transform .1s;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
}
.zn-dream-random-btn:hover { opacity: .9; transform: translateY(-1px); }
.zn-dream-random-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }
.zn-dream-random-label {
  font-size: 11px;
  color: rgba(255,255,255,.8);
  margin: 0 0 10px;
}
.zn-dream-random-results {
  display: flex;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}
.zn-rand-results-show {
  animation: zn-fade-in .4s ease;
}
/* เพิ่ม */
@keyframes zn-land {
  0%   { transform: scale(.7) translateY(-6px); opacity: .5; }
  60%  { transform: scale(1.15) translateY(2px); opacity: 1; }
  80%  { transform: scale(.95) translateY(-1px); }
  100% { transform: scale(1) translateY(0); opacity: 1; }
}
@keyframes zn-tag-in {
  from { opacity: 0; transform: translateY(8px) scale(.85); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.zn-dream-random-tag {
  background: rgba(255, 255, 255, 0.2);
  color: #fff;
  border: 1px solid rgba(255,255,255,.4);
  border-radius: 6px;
  padding: 4px 10px;
  font-size: 14px;
  font-weight: 700;
  font-family: monospace;
}

/* Promo Banner Shortcode */
.zn-promo-banner {
    background-image: url(/wp-content/uploads/2026/07/banner-2.webp);
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 12px;
    padding: 20px 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    overflow: hidden;
    position: relative;
    width: 100%;
    margin: auto;
    max-width: 400px;
    min-height: 170px;
}

.zn-promo-content { flex: 1; position: relative; z-index: 1; }
.zn-promo-title {
    font-size: 22px;
    font-weight: 800;
    color: #fff;
    margin: 0 0 4px;
    line-height: 1.3;
}
.zn-promo-desc {
    font-size: 14px;
    color: rgba(255,255,255,.8);
    margin: 0 0 12px;
    line-height: 1.6;
    max-width: 50%;
}
.zn-promo-btn {
    display: inline-block;
    background: #ffd700;
    color: #8b0000 !important;
    text-decoration: none !important;
    padding: 7px 14px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 800;
    transition: opacity .2s, transform .1s;
    white-space: nowrap;
}
.zn-promo-btn:hover { opacity: .9; transform: translateY(-1px); }



/* Dream Book Banner */
.zn-book-banner {
    display: grid;
    grid-template-columns: 120px 1fr auto;
    gap: 20px;
    align-items: center;
    background: linear-gradient(135deg, #c10000  0%, #8b0000 50%, #6b0f0f 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin: 20px 0;
    position: relative;
    overflow: hidden;
}
.zn-book-banner::before {
    content: '';
    position: absolute;
    top: -40px; right: -40px;
    width: 200px; height: 200px;
    background: rgba(255,215,0,.06);
    border-radius: 50%;
}

/* ปกหนังสือ */
.zn-book-banner-cover {
    position: relative;
    flex-shrink: 0;
}
.zn-book-cover-img {
    width: 100px;
    height: auto;
    object-fit: cover;
    border-radius: 4px 8px 8px 4px;
    box-shadow: 4px 4px 16px rgba(0,0,0,.5), -2px 0 6px rgba(0,0,0,.3);
    display: block;
}
.zn-book-cover-placeholder {
    width: 100px; height: 130px;
    background: linear-gradient(135deg, #4a0000, #8b0000);
    border-radius: 4px 8px 8px 4px;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.6);
    box-shadow: 4px 4px 16px rgba(0,0,0,.5);
}
.zn-book-shine {
    position: absolute;
    top: 0; left: 0;
    width: 30%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,.15), transparent);
    border-radius: 4px 0 0 4px;
}

/* Info */
.zn-book-banner-info { min-width: 0; }
.zn-book-banner-badge {
    display: inline-block;
    background: rgba(255,215,0,.2);
    color: #ffd700;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 10px;
    border-radius: 100px;
    border: 1px solid rgba(255,215,0,.3);
    margin-bottom: 8px;
}
.zn-book-banner-title {
    font-size: 18px;
    font-weight: 800;
    color: #ffd700;
    margin: 0 0 4px;
    line-height: 1.3;
}
.zn-book-banner-subtitle {
    font-size: 12px;
    color: rgba(255,255,255,.6);
    margin: 0 0 6px;
}
.zn-book-banner-desc {
    font-size: 13px;
    color: rgba(255,255,255,.8);
    margin: 0 0 10px;
    line-height: 1.6;
}
.zn-book-banner-tags {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}
.zn-book-banner-tags span {
    font-size: 11px;
    color: rgba(255,255,255,.5);
    background: rgba(255,255,255,.08);
    padding: 3px 8px;
    border-radius: 100px;
}

/* Action */
.zn-book-banner-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.zn-book-banner-btn.-primary {
    display: inline-block;
    background: linear-gradient(135deg, #ffd700, #f0a500);
    color: #8b0000  !important;
    text-decoration: none !important;
    padding: 10px 20px;
    border-radius: 100px;
    font-size: 13px;
    font-weight: 800;
    white-space: nowrap;
    transition: opacity .2s, transform .1s;
    box-shadow: 0 4px 12px rgba(255,215,0,.3);
    position: relative;
    z-index: 999;
}
.zn-book-banner-btn.-primary:hover { opacity: .9; transform: translateY(-1px); }
.zn-book-banner-free {
    font-size: 11px;
    color: rgba(255,255,255,.4);
}

@media (max-width: 768px) {
    .zn-book-banner {
        grid-template-columns: 80px 1fr;
        grid-template-rows: auto auto;
    }
    .zn-book-banner-action {
        grid-column: 1 / -1;
        flex-direction: row;
        justify-content: flex-start;
    }
    .zn-book-cover-img,
    .zn-book-cover-placeholder { width: 80px; height: auto; }
}
@media (max-width: 480px) {
    .zn-book-banner { grid-template-columns: 1fr; }
    .zn-book-banner-cover { display: none; }
}


/* =============================================
   TRANSITIONS — Hero Banner
   ============================================= */

/* Shimmer text */
.slb-hero-title span {
    background: linear-gradient(
        90deg,
        #dc0507 0%,
        #fff 40%,
        #dc0507 60%,
        #dc0507 100%
    );
    background-size: 200% auto;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    animation: slb-shimmer 3s linear infinite;
}

@keyframes slb-shimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

/* Button hover */
.slb-btn-primary {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1),
                box-shadow .2s ease;
}
.slb-btn-primary:hover {
    transform: scale(1.06) translateY(-2px);
    box-shadow: 0 8px 24px rgba(220,5,7,.35);
}
.slb-btn-outline {
    transition: transform .2s cubic-bezier(.34,1.56,.64,1),
                background .2s ease;
}
.slb-btn-outline:hover {
    transform: scale(1.06) translateY(-2px);
}


/* =============================================
   TRANSITIONS — Card Hover
   ============================================= */

.slb-post-card,
.slb-loc-card {
    transition: box-shadow .3s ease,
                transform .3s cubic-bezier(.34,1.56,.64,1);
}
.slb-post-card:hover,
.slb-loc-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0,0,0,.12);
}

.slb-dream-card {
    transition: box-shadow .3s ease,
                transform .3s cubic-bezier(.34,1.56,.64,1);
}
.slb-dream-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
}

.slb-art-card {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.slb-art-card:hover {
    transform: translateY(-4px);
}

.slb-popular-card {
    transition: box-shadow .3s ease,
                transform .3s cubic-bezier(.34,1.56,.64,1),
                background .2s ease;
}
.slb-popular-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(0,0,0,.1);
    background: #fff5f5;
}


/* =============================================
   TRANSITIONS — Number Pop-in (Digit Flip)
   ============================================= */
.slb-lotto-first-num,
.slb-lotto-sec-num {
    display: flex;
    gap: 4px;
    justify-content: center;
}
.slb-digit {
    display: inline-block;
    animation: slb-digit-flip .5s cubic-bezier(.22,1,.36,1) both;
}
@keyframes slb-digit-flip {
    0%   { opacity: 0; transform: translateY(-20px) scale(.8); filter: blur(4px); }
    100% { opacity: 1; transform: translateY(0) scale(1);     filter: blur(0);   }
}


/* =============================================
   TRANSITIONS — Micro-interactions
   ============================================= */

/* Quick Links — icon bounce */
.slb-quick-link-img,
.slb-quick-link-placeholder {
    transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.slb-quick-link:hover .slb-quick-link-img,
.slb-quick-link:hover .slb-quick-link-placeholder {
    transform: translateY(-4px);
}

/* View All — arrow slide */
.slb-view-all {
    transition: gap .2s ease;
    display: inline-flex;
    align-items: center;
    gap: 2px;
}
.slb-view-all::after {
    content: '›';
    display: inline-block;
    transition: transform .2s cubic-bezier(.34,1.56,.64,1);
    font-size: 20px;
}
.slb-view-all:hover::after {
    transform: translateX(4px);
}

/* Btn Check — shimmer sweep */
.slb-btn-check {
    position: relative;
    overflow: hidden;
}
.slb-btn-check::after {
    content: '';
    position: absolute;
    top: 0; left: -100%;
    width: 60%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255,255,255,.25),
        transparent
    );
    transition: left .4s ease;
}
.slb-btn-check:hover::after {
    left: 150%;
}

/* Scroll to Top */
.zn-scroll-top {
    position: fixed;
    bottom: 28px;
    right: 28px;
    width: 44px;
    height: 44px;
    background: linear-gradient(180deg, #dc0507, #be0809);
    color: #fff;
    border: none;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 16px rgba(220,5,7,.3);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity .3s ease, transform .3s cubic-bezier(.34,1.56,.64,1);
    z-index: 999;
}
.zn-scroll-top.is-visible {
    opacity: 1;
    transform: translateY(0);
}
.zn-scroll-top:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 20px rgba(220,5,7,.4);
}



/* =============================================
   LOTTERY RESULT PAGE — [lottery_result_page]
   /blocks/lottery-result-page.css
   ============================================= */

/* Layout */
.slb-lrp-wrap {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 24px;
    align-items: start;
    padding: 24px 0;
}

/* Loading */
.slb-lrp-loading {
    text-align: center;
    padding: 60px;
    color: #aaa;
    font-size: 15px;
}
.slb-lrp-error {
    text-align: center;
    padding: 40px;
    color: #dc0507;
    background: #fff5f5;
    border-radius: 8px;
    border: 1px solid #fcc;
}

/* Transition เมื่อเปลี่ยนงวด */
.slb-lrp-left {
    transition: opacity .3s ease;
    min-height: 400px;
}

/* =============================================
   ซ้าย: ผลรางวัล
   ============================================= */
.slb-lrp-result-wrap {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
}

/* Header */
.slb-lrp-header {
    text-align: center;
    padding: 20px 20px 12px;
    background: #fff;
    border-bottom: 1px solid #f0f0f0;
}
.slb-lrp-main-title {
    font-size: 26px;
    font-weight: 700;
    color: #22283a;
    margin: 0 0 4px;
}
.slb-lrp-period {
    font-size: 16px;
    font-weight: 700;
    color: #dc0507;
    margin: 0;
}

/* รางวัลที่ 1 */
.slb-lrp-first-section {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.slb-lrp-prize-header {
    border-radius: 4px;
    padding: 8px 20px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    display: inline-block;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
    text-align: center;
}
.slb-lrp-prize-header.-first { background: #dc0507; }
.slb-lrp-first-meta {
    font-size: 12px;
    color: #888;
    margin-bottom: 8px;
}
.slb-lrp-first-num {
    font-size: 48px;
    font-weight: 900;
    color: #a50000;
    letter-spacing: 6px;
    line-height: 1.2;
}

/* เลข 3 ตัว + 2 ตัว */
.slb-lrp-small-prizes {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    border-bottom: 1px solid #f0f0f0;
}
.slb-lrp-small-box {
    padding: 12px 16px;
    text-align: center;
    border-right: 1px solid #f0f0f0;
}
.slb-lrp-small-box:last-child { border-right: none; }
.slb-lrp-small-header {
    border-radius: 4px;
    padding: 5px 10px;
    font-size: 12px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 4px;
    display: inline-block;
}
.slb-lrp-small-header.-red { background: #dc0507; }
.slb-lrp-small-meta {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 8px;
    line-height: 1.4;
}
.slb-lrp-small-nums {
    display: flex;
    justify-content: center;
    gap: 12px;
    flex-wrap: wrap;
}
.slb-lrp-small-nums span {
    font-size: 20px;
    font-weight: 800;
    color: #22283a;
}
.slb-lrp-small-nums.-gold span { color: #a50000; }

/* รางวัลข้างเคียง */
.slb-lrp-near-section {
    padding: 16px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
    background: #fafafa;
}
.slb-lrp-prize-label {
    font-size: 16px;
    font-weight: 700;
    color: #dc0507;
    margin-bottom: 2px;
}
.slb-lrp-prize-label.-near { color: #dc0507; }
.slb-lrp-near-meta,
.slb-lrp-prize-meta {
    font-size: 11px;
    color: #aaa;
    margin-bottom: 10px;
}
.slb-lrp-near-nums {
    display: flex;
    justify-content: space-around;
    gap: 20px;
}
.slb-lrp-near-nums span {
    font-size: 22px;
    font-weight: 800;
    color: #22283a;
    letter-spacing: 2px;
}

/* รางวัลที่ 2-5 */
.slb-lrp-prize-section {
    padding: 14px 20px;
    text-align: center;
    border-bottom: 1px solid #f0f0f0;
}
.slb-lrp-prize-section:last-child { border-bottom: none; }
.slb-lrp-prize-nums {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 10px 20px;
    margin-top: 8px;
}
.slb-lrp-prize-nums span {
    font-size: 16px;
    font-weight: 700;
    color: #22283a;
    letter-spacing: 2px;
    min-width: 70px;
    text-align: center;
}

/* =============================================
   ขวา: ตรวจสลาก
   ============================================= */

.slb-lrp-right {display: flex; flex-direction: column;gap: 20px;}

.slb-lrp-check-box {
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    padding: 20px;
    box-shadow: 0 2px 16px rgba(0,0,0,.05);
}
.slb-lrp-check-title {
    font-size: 16px;
    font-weight: 700;
    color: #22283a;
    margin: 0 0 14px;
    padding-bottom: 12px;
    border-bottom: 2px solid #dc0507;
}
.slb-lrp-check-label {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: #888;
    margin-bottom: 6px;
}

/* Select */
.slb-lrp-select-wrap {
    position: relative;
    margin-bottom: 14px;
}
.slb-lrp-select {
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 10px 32px 10px 12px;
    font-size: 14px;
    outline: none;
    background: #fff;
    cursor: pointer;
    color: #22283a;
    transition: border-color .2s;
}
.slb-lrp-select:focus { border-color: #dc0507; }
.slb-lrp-select-wrap svg {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: #aaa;
}

/* Inputs */
.slb-lrp-inputs { margin-bottom: 14px; }
.slb-lrp-input {
    width: 100%;
    border: 2px solid #eee;
    border-radius: 8px;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 3px;
    text-align: center;
    outline: none;
    color: #22283a;
    transition: border-color .2s;
    box-sizing: border-box;
    margin-bottom: 8px;
}
.slb-lrp-input:last-child { margin-bottom: 0; }
.slb-lrp-input:focus { border-color: #dc0507; }

/* Check Button */
.slb-lrp-check-btn {
    width: 100%;
    background: linear-gradient(180deg, #dc0507, #be0809);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 13px;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: opacity .2s, transform .1s;
}
.slb-lrp-check-btn:hover { opacity: .9; transform: translateY(-1px); }
.slb-lrp-check-btn:disabled { opacity: .7; cursor: not-allowed; transform: none; }

/* =============================================
   POPUP
   ============================================= */
.slb-lrp-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    z-index: 9998;
    backdrop-filter: blur(3px);
}
.slb-lrp-popup {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #fff;
    border-radius: 16px;
    padding: 28px 24px 24px;
    z-index: 9999;
    width: 90%;
    max-width: 480px;
    max-height: 85vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,.3);
}
.slb-lrp-popup-close {
    position: absolute;
    top: 12px;
    right: 16px;
    background: none;
    border: none;
    font-size: 24px;
    color: #aaa;
    cursor: pointer;
    line-height: 1;
    padding: 4px;
}
.slb-lrp-popup-close:hover { color: #22283a; }

.slb-lrp-popup-inner { text-align: center; }
.slb-lrp-popup-icon { font-size: 48px; margin-bottom: 8px; }
.slb-lrp-popup-title {
    font-size: 20px;
    font-weight: 800;
    color: #22283a;
    margin: 0 0 4px;
}
.slb-lrp-popup-title.-won { color: #dc0507; }
.slb-lrp-popup-subtitle {
    font-size: 13px;
    color: #888;
    margin: 0 0 20px;
}

.slb-lrp-popup-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 10px;
    margin-bottom: 16px;
}
.slb-lrp-popup-card {
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
    border: 2px solid #eee;
}
.slb-lrp-popup-card.-won {
    border-color: #dc0507;
    background: #fff5f5;
}
.slb-lrp-popup-num {
    font-size: 20px;
    font-weight: 800;
    letter-spacing: 2px;
    color: #22283a;
    margin-bottom: 8px;
}
.slb-lrp-popup-card.-won .slb-lrp-popup-num { color: #dc0507; }
.slb-lrp-popup-prize-name {
    font-size: 11px;
    color: #666;
    margin-bottom: 2px;
    font-weight: 600;
}
.slb-lrp-popup-prize-amt {
    font-size: 14px;
    font-weight: 800;
    color: #22283a;
}
.slb-lrp-popup-lost {
    font-size: 12px;
    color: #bbb;
}

.slb-lrp-popup-note {
    font-size: 11px;
    color: #bbb;
    margin: 0 0 16px;
    line-height: 1.6;
}
.slb-lrp-popup-retry {
    display: block;
    width: 100%;
    background: #f5f5f5;
    color: #444;
    border: none;
    border-radius: 8px;
    padding: 11px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .2s;
}
.slb-lrp-popup-retry:hover { background: #eee; }

.slb-lrp-input.-error { border-color: #dc0507; }
.slb-lrp-input-error {
    font-size: 11px;
    color: #dc0507;
    margin: -4px 0 6px;
    text-align: left;
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 900px) {
    .slb-lrp-wrap { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
    .slb-lrp-small-prizes { grid-template-columns: 1fr; }
    .slb-lrp-small-box { border-right: none; border-bottom: 1px solid #f0f0f0; }
    .slb-lrp-first-num { font-size: 36px; }
    .slb-lrp-prize-nums span { font-size: 14px; }
}