/* BUILD: 2025-09-18j — mobile drawer + previous build */

/* ========== ROOT ========== */
:root{
  --bg:#0B0A0F; --bg2:#121019; --ink:#F3EFE6; --muted:#C6C0B4;
  --cinn1:#D33A31; --cinn2:#A1141A; --jade1:#35B07A; --jade2:#19784F;
  --pane1:rgba(255,255,255,.10); --pane2:rgba(255,255,255,.06); --line:rgba(243,239,230,.14);
  --shadow:0 18px 48px rgba(0,0,0,.55); --radius:18px; --topbar-h:66px;
  --perSlide: 7;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink); font-family:'Noto Serif Thai',serif; overflow-x:hidden;
  background:
    radial-gradient(1100px 680px at 8% -8%, rgba(211,58,49,.20), transparent 55%),
    radial-gradient(900px 520px at 88% 112%, rgba(53,176,122,.18), transparent 60%),
    linear-gradient(180deg, var(--bg2), var(--bg) 58%, #09080C);
}
.bg-photo{position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; filter:saturate(105%) contrast(102%)}
.container{max-width:1240px; margin:0 auto; padding:0 24px}

/* petals (hidden by default) */
.petal{position:fixed; inset:0; z-index:1; background-image:url('./FFF.gif'); background-repeat:repeat; background-size:320px; opacity:.14; animation:petal 38s linear infinite; display:none}
@keyframes petal{from{background-position:0 0} to{background-position:-800px 1200px}}

/* ========== TOPBAR ========== */
.topbar{position:sticky; top:0; z-index:1200; height:var(--topbar-h);
  display:flex; align-items:center; backdrop-filter:saturate(140%) blur(10px);
  background:linear-gradient(180deg, rgba(9,8,12,.82), rgba(9,8,12,.58));
  border-bottom:1px solid var(--line)}
.topbar__in{display:flex; align-items:center; justify-content:space-between; width:100%}
.brand{display:flex; align-items:center; gap:12px; font-family:'Zen Antique Soft','Noto Serif Thai',serif}
.brand__seal{width:34px;height:34px;border-radius:6px;background:linear-gradient(180deg,var(--cinn1),var(--cinn2));
  border:1px solid rgba(255,255,255,.18); box-shadow:0 6px 16px rgba(211,58,49,.35); display:grid;place-items:center;color:#F7EBE0;font-weight:700}
.brand__logo{height:28px; width:auto; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.25)}
.brand__name{font-weight:700}
.hamb{display:none;background:transparent;color:var(--muted);border:0;font-size:18px}
.nav{display:flex;gap:12px;flex-wrap:nowrap}
.nav a{color:var(--muted);text-decoration:none;padding:8px 10px;border-radius:10px;white-space:nowrap}
.nav a:hover{color:var(--ink);background:linear-gradient(180deg, var(--pane1), var(--pane2))}

/* === Mobile Drawer === */
.scrim{
  position:fixed; inset:0; background:rgba(0,0,0,.45);
  z-index:1300; display:none;
}
.scrim.is-show{ display:block; }
.mnav{
  position:fixed; right:0; top:var(--topbar-h); height:calc(100% - var(--topbar-h));
  width:min(82vw,360px); z-index:1400; padding:14px;
  background:linear-gradient(180deg, rgba(20,18,26,.96), rgba(20,18,26,.9));
  border-left:1px solid var(--line); box-shadow:-20px 0 60px rgba(0,0,0,.45);
  transform:translateX(100%); transition:transform .28s ease;
  overflow:auto;
}
.mnav.is-open{ transform:translateX(0); }
.mnav a{
  display:block; color:var(--ink); text-decoration:none;
  padding:12px 10px; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--pane1),var(--pane2)); margin-bottom:10px;
}

/* ========== HERO ========== */
.hero{padding:28px 0 10px; position:relative; z-index:2}
.hero__wrap{border:1px solid var(--line); border-radius:18px; background:linear-gradient(180deg, var(--pane1), var(--pane2));
  padding:22px; box-shadow:var(--shadow); text-align:center}
.seo_main{margin:.2rem 0 .35rem; font-family:'Zen Antique Soft','Noto Serif Thai',serif; font-size:clamp(22px,4.4vw,34px)}
.hero__title{margin:.35rem 0 6px; font-size:clamp(20px,3.6vw,28px); font-family:'Zen Antique Soft','Noto Serif Thai',serif}
.hero__badge{display:inline-block; font-size:.85em; padding:6px 12px; border-radius:10px; margin-left:8px; color:#F7EBE0;
  background:linear-gradient(180deg,var(--cinn1),var(--cinn2)); border:1px solid rgba(255,255,255,.18); box-shadow:0 8px 22px rgba(211,58,49,.32)}
.hero__subtitle{margin:4px 0 0; color:var(--muted)}

/* ========== RIBBON / CAROUSEL ========== */
.ribbon{position:relative; z-index:2; margin-top:14px}
.ribbon__bar{
  background:linear-gradient(180deg, var(--pane1), var(--pane2));
  border:1px solid var(--line);
  border-radius:18px;
  backdrop-filter:saturate(140%) blur(10px);
  box-shadow:var(--shadow);
  padding:16px;
  overflow:hidden;
}
.ribbon__bar--compact{padding:14px}
.ribbon__head{display:flex; align-items:center; justify-content:space-between; gap:14px; margin-bottom:10px}
.ribbon__kicker{margin:0 0 4px; color:var(--muted); font-size:13px}
.ribbon__title{margin:0; font-size:18px}
.ribbon__controls{display:flex; gap:10px; align-items:center}
.selectize select{appearance:none; padding:10px 12px; border-radius:999px; background:linear-gradient(180deg,var(--pane1),var(--pane2)); color:var(--ink); border:1px solid var(--line)}

.carousel{position:relative; padding:2px 34px;}
.carousel__viewport{overflow:hidden}
.carousel__track{
  list-style:none; margin:0; padding:10px;
  display:grid; grid-auto-flow:column; gap:16px;
  grid-auto-columns: calc((100% - (var(--perSlide) - 1)*16px)/var(--perSlide));
  align-items:stretch;
  will-change:transform;
}
.card{width:100%}
.card__in{
  height:110px; border-radius:16px; border:1px solid var(--line);
  background:linear-gradient(180deg, var(--pane1), var(--pane2));
  box-shadow:0 14px 30px rgba(0,0,0,.35);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  transition:transform .25s ease, box-shadow .25s ease;
  cursor:pointer;
}
.card__medal{width:64px;height:64px;border-radius:50%;display:grid;place-items:center; background:radial-gradient(120% 120% at 30% 10%, #EFEAE0, #E0DACF); border:1px solid rgba(255,255,255,.18)}
.card__medal img{width:40px;height:40px;object-fit:contain;filter:drop-shadow(0 1px 3px rgba(0,0,0,.35)); pointer-events:none}
.card__label{font-size:13px}
.card:focus .card__in,.card:hover .card__in{transform:translateY(-3px) scale(1.02); box-shadow:0 16px 36px rgba(53,176,122,.25)}
.carNav{
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px; height:40px; border-radius:12px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--pane1),var(--pane2)); color:var(--ink);
  cursor:pointer; display:grid; place-items:center; box-shadow:var(--shadow); z-index:3;
  opacity:.98;
}
.carNav--prev{left:6px}
.carNav--next{right:6px}

/* ========== SEO CONTENT / FAQ ========== */
.seoContent{
  position:relative;
  z-index:2;
  margin-top:18px;
}
.seoContent__box{
  border:1px solid var(--line);
  border-radius:18px;
  background:linear-gradient(180deg, var(--pane1), var(--pane2));
  box-shadow:var(--shadow);
  padding:18px;
  margin-bottom:16px;
  color:var(--muted);
  line-height:1.7;
  font-size:14px;
}
.seoContent__box h2{
  margin-top:0;
  margin-bottom:8px;
  font-size:18px;
  color:var(--ink);
}
.seoContent__box h3{
  margin-top:10px;
  margin-bottom:6px;
  font-size:16px;
  color:var(--ink);
}
.seoContent__box ol{
  margin:4px 0 8px;
  padding-left:18px;
}
.seoContent__box li{
  margin-bottom:4px;
}
.seoContent__faq > div{
  margin-bottom:10px;
}
.seoContent__faq dt{
  font-weight:600;
  color:var(--ink);
}
.seoContent__faq dd{
  margin:3px 0 0;
}

/* ========== MODAL ========== */
.modal{position:fixed; inset:0; z-index:1500; display:none; align-items:center; justify-content:center; padding:16px;
  background:radial-gradient(60% 60% at 50% 50%, rgba(7,7,10,.90), rgba(5,5,7,.96))}
.modal.is-open{display:flex}
.modal__sheet{
  max-width:980px; width:100%;
  background:linear-gradient(180deg, rgba(255,255,255,.18), rgba(255,255,255,.10));
  border:1px solid var(--line); border-radius:18px; box-shadow:0 34px 66px rgba(0,0,0,.65);
  padding:18px; position:relative;
  max-height:95vh; overflow:auto; -webkit-overflow-scrolling:touch; overscroll-behavior:contain;
}
.modal__close{position:absolute; right:12px; top:10px; width:36px; height:36px; border-radius:10px; border:1px solid var(--line);
  background:linear-gradient(180deg,var(--pane1),var(--pane2)); color:var(--ink)}
.modal__head{display:flex; gap:14px; align-items:center; margin-bottom:8px}
.modal__medal{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(120% 120% at 30% 10%, #EFEAE0, #E0DACF); border:1px solid rgba(255,255,255,.18); flex:0 0 auto}
.modal__medal img{width:56px;height:56px;object-fit:contain}
.chip{display:inline-block; border-radius:14px; padding:6px 12px; margin-right:10px}
.chip--jade{color:#EFFFF7; background:linear-gradient(180deg, rgba(53,176,122,.22), rgba(53,176,122,.08)); border:1px solid rgba(53,176,122,.55); text-shadow:0 1px 0 rgba(0,0,0,.55)}
.modal__grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-top:12px}
.mBox{border:1px solid var(--line); border-radius:14px; padding:12px; min-height:110px; background:linear-gradient(180deg, var(--pane1), var(--pane2))}
.modal__meta{display:flex; flex-wrap:wrap; gap:10px; align-items:center; justify-content:space-between; margin-top:12px}
.badge{border:1px solid var(--line); border-radius:999px; padding:8px 12px; background:linear-gradient(180deg, var(--pane1), var(--pane2))}
.modal__actions{display:flex; gap:8px; flex-wrap:wrap}

/* Buttons */
.btn{padding:12px 16px; border-radius:14px; border:1px solid var(--line); cursor:pointer; color:var(--ink); text-decoration:none}
.btn--cinn{background:linear-gradient(180deg,var(--cinn1),var(--cinn2)); box-shadow:0 14px 28px rgba(211,58,49,.28)}
.btn--glass{background:linear-gradient(180deg, var(--pane1), var(--pane2)); backdrop-filter:saturate(140%) blur(10px); box-shadow:var(--shadow)}
.btn--mini{padding:6px 10px; border-radius:999px; font-size:12px}

/* Lotto blink */
@keyframes blink-k{0%,100%{filter:none} 50%{filter:brightness(1.25) saturate(1.2)}}
.blink{animation:blink-k 1.1s ease-in-out infinite}

/* Toast */
.toast{position:fixed; left:50%; bottom:24px; transform:translateX(-50%); z-index:1800; background:linear-gradient(180deg, var(--pane1), var(--pane2));
  border:1px solid var(--line); color:var(--ink); padding:10px 14px; border-radius:12px; box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s}
.toast.is-show{opacity:1}

/* Footer & brandbar */
.footer{margin:20px 0 64px; color:var(--muted); text-align:center}
.brandbar{position:fixed; left:0; right:0; bottom:0; z-index:1000; padding:8px 0; background:linear-gradient(180deg, rgba(9,8,12,.62), rgba(9,8,12,.82)); border-top:1px solid var(--line); backdrop-filter:saturate(140%) blur(8px)}
.brandbar__in{max-width:1240px; margin:0 auto; padding:0 24px; display:flex; gap:10px; align-items:center}
.brandbar__logo{height:22px; width:auto; border-radius:4px}
.brandbar__text{color:var(--muted); font-size:13px}

/* Month bar (tabs) */
.monthbar{display:flex; gap:8px; margin:8px 0 0; overflow-x:auto; padding:2px; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch}
.monthbar::-webkit-scrollbar{height:6px}
.monthbar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.18); border-radius:999px}
.mTab{border:1px solid var(--line); background:linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.06));
  color:var(--ink); padding:6px 10px; border-radius:999px; cursor:pointer; font-size:13px; flex:0 0 auto; scroll-snap-align:start}
.mTab.is-active{background:linear-gradient(180deg, rgba(211,58,49,.30), rgba(211,58,49,.15)); border-color:rgba(211,58,49,.55)}

/* ========== Responsive ========== */
@media (max-width:1100px){ :root{ --perSlide: 5; } }

@media (max-width:740px){
  :root{ --perSlide: 4; }
  .nav{display:none}
  .hamb{display:inline-block}
  .container{padding:0 14px}
  .carousel{padding:2px 28px;}
  .carousel__track{gap:12px}
  .card__in{height:98px}
  .card__medal{width:60px;height:60px}
  .card__medal img{width:38px;height:38px}
  .brandbar__in{padding:0 14px}
  .carNav{width:36px;height:36px;border-radius:10px}
  .modal{padding:12px}
  .modal__sheet{max-width:560px; padding-bottom:16px}
  .modal__head{align-items:flex-start}
  .modal__medal{width:64px;height:64px}
  .modal__medal img{width:44px;height:44px}
  .modal__grid{grid-template-columns:1fr; gap:10px}
  .mTab{min-width:calc((100% - 8px*4)/5); text-align:center}
  .seoContent__box{
    padding:14px;
    font-size:13px;
  }
}

@media (max-width:460px){
  :root{ --perSlide: 4; }
  .carousel{padding:2px 24px;}
  .carousel__track{gap:10px}
  .card__in{height:94px}
  .card__medal{width:56px;height:56px}
  .card__medal img{width:34px;height:34px}
}

@media print{
  .bg-photo,.topbar,.ribbon,.modal,.toast,.brandbar,.petal,.scrim,.mnav{display:none!important}
  body{background:#fff;color:#000}
}
/* ===== FIX: link color in SEO blocks (remove purple/visited) ===== */
.seoContent__box a,
.seoZodiacLinks a,
.seoContent__faq a,
.faq a {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.seoContent__box a:visited,
.seoZodiacLinks a:visited,
.seoContent__faq a:visited,
.faq a:visited {
  color: var(--ink); /* กันไม่ให้กลายเป็นม่วง */
}

.seoContent__box a:hover,
.seoZodiacLinks a:hover,
.seoContent__faq a:hover,
.faq a:hover {
  color: #ffffff;
  text-decoration-thickness: 2px;
}