/* ===== SaiTaMo · วันหยุดธนาคาร =====
   โทนเดียวกับตระกูล SaiTaMo: ครีมอุ่น + น้ำเงิน + ทองซิกเนเจอร์ การ์ดฮีโร่ดำ-ทอง */
:root{
  --bg:#F6F3EC; --bg2:#EDE8DC; --paper:#FFFFFF;
  --ink:#191B21; --ink2:#6E6A5F; --line:#E6E0D2;
  --brand:#1E52D6; --brand2:#2E7DEF;
  --gold:#B5851F; --gold-soft:#F6ECCF; --gold-lite:#E3BD63;
  --good:#0F9E6E; --danger:#DC2626;

  /* ประเภทวันหยุด */
  --c-national:#1E52D6; --c-national-soft:#E2E9FB;
  --c-religious:#B5851F; --c-religious-soft:#F6ECCF;
  --c-royal:#7C3AED;     --c-royal-soft:#EDE6FD;
  --c-special:#DC2626;   --c-special-soft:#FBE3E3;

  --vault1:#141A2A; --vault2:#0B1120; --vault-gold:#E3BD63; --vault-edge:#C08A2A;
  --vault-ink:#F3EEDC; --vault-ink2:#B9C2D6;

  --shadow:0 1px 2px rgba(22,32,60,.04),0 12px 30px rgba(22,32,60,.07);
  --shadow-lg:0 18px 46px rgba(22,32,60,.14);
  --glow-gold:0 8px 26px rgba(181,133,31,.28);

  --r:20px; --r-sm:14px; --r-xs:10px;
  --font:"IBM Plex Sans Thai",system-ui,-apple-system,sans-serif;
  --num:"Bai Jamjuree","IBM Plex Sans Thai",sans-serif;
  --spring:cubic-bezier(.34,1.56,.64,1);
  --maxw:1120px;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    --bg:#0B1220; --bg2:#141C2B; --paper:#161F30;
    --ink:#E8EFF8; --ink2:#93A4BA; --line:#26324A;
    --brand:#3B82F6; --brand2:#38BDF8;
    --gold:#D9A441; --gold-soft:#2E2312; --gold-lite:#EFCF7A;
    --good:#059669; --danger:#EF4444;
    --c-national:#5B8DEF; --c-national-soft:#152540;
    --c-religious:#D9A441; --c-religious-soft:#2E2312;
    --c-royal:#A78BFA;    --c-royal-soft:#241B3D;
    --c-special:#F87171;  --c-special-soft:#3A1618;
    --shadow:0 2px 14px rgba(3,8,18,.5);
    --shadow-lg:0 18px 46px rgba(3,8,18,.6);
    color-scheme:dark;
  }
}
:root[data-theme="dark"]{
  --bg:#0B1220; --bg2:#141C2B; --paper:#161F30;
  --ink:#E8EFF8; --ink2:#93A4BA; --line:#26324A;
  --brand:#3B82F6; --brand2:#38BDF8;
  --gold:#D9A441; --gold-soft:#2E2312; --gold-lite:#EFCF7A;
  --good:#059669; --danger:#EF4444;
  --c-national:#5B8DEF; --c-national-soft:#152540;
  --c-religious:#D9A441; --c-religious-soft:#2E2312;
  --c-royal:#A78BFA;    --c-royal-soft:#241B3D;
  --c-special:#F87171;  --c-special-soft:#3A1618;
  --shadow:0 2px 14px rgba(3,8,18,.5);
  --shadow-lg:0 18px 46px rgba(3,8,18,.6);
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--font); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased;
  background-image:radial-gradient(1200px 600px at 80% -10%, rgba(46,125,239,.06), transparent 60%),
                   radial-gradient(900px 500px at -10% 0%, rgba(181,133,31,.06), transparent 55%);
  background-attachment:fixed;
}
.skip{position:absolute;left:-999px;top:0;background:var(--brand);color:#fff;padding:10px 14px;border-radius:0 0 10px 0;z-index:100}
.skip:focus{left:0}
a{color:var(--brand)}
:focus-visible{outline:2.5px solid var(--brand2);outline-offset:2px;border-radius:6px}

/* topbar */
.topbar{
  max-width:var(--maxw);margin:0 auto;padding:16px 20px;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
}
.brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font-weight:700}
.brand__mark{
  width:38px;height:38px;border-radius:11px;display:grid;place-items:center;
  font-family:var(--num);font-size:22px;font-weight:700;color:#1a1205;
  background:linear-gradient(140deg,var(--gold-lite),var(--gold));
  box-shadow:var(--glow-gold);
}
.brand__name{font-size:18px;letter-spacing:.2px}
.brand__sub{color:var(--ink2);font-weight:500;font-size:14px;margin-left:4px}
.icon-btn{
  width:42px;height:42px;border-radius:12px;border:1px solid var(--line);
  background:var(--paper);cursor:pointer;display:grid;place-items:center;color:var(--ink);
  box-shadow:var(--shadow);transition:transform .15s var(--spring),border-color .2s;
}
.icon-btn:hover{transform:translateY(-1px);border-color:var(--brand2)}
.theme-ico{width:20px;height:20px;border-radius:50%;background:
  radial-gradient(circle at 35% 35%, var(--gold-lite), var(--gold) 70%);
  box-shadow:inset -4px -4px 0 0 var(--paper);}
:root[data-theme="dark"] .theme-ico,
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .theme-ico{box-shadow:none;background:radial-gradient(circle at 65% 35%, #fff, #cdd7ea 60%);}}

main{max-width:var(--maxw);margin:0 auto;padding:8px 20px 40px}

/* hero */
.hero{padding:26px 0 10px;text-align:center}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;margin:0 0 14px;
  font-size:13.5px;font-weight:600;color:var(--gold);
  background:var(--gold-soft);padding:6px 13px;border-radius:999px;
}
.eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px color-mix(in srgb,var(--gold) 22%,transparent)}
.hero__title{
  margin:6px 0 10px;font-size:clamp(30px,6vw,52px);line-height:1.1;letter-spacing:-.5px;
  background:linear-gradient(120deg,var(--ink),var(--brand));-webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero__lead{max-width:600px;margin:0 auto 22px;color:var(--ink2);font-size:16.5px}

.yeartabs{display:inline-flex;gap:6px;padding:6px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:var(--shadow)}
.ytab{
  appearance:none;border:0;background:transparent;cursor:pointer;color:var(--ink2);
  font-family:var(--num);font-weight:600;font-size:16px;padding:9px 18px;border-radius:11px;transition:.18s;
  display:flex;flex-direction:column;line-height:1.15;gap:1px;align-items:center;
}
.ytab small{font-size:11px;color:inherit;opacity:.75;font-family:var(--font)}
.ytab:hover{color:var(--ink)}
.ytab[aria-selected="true"]{background:var(--brand);color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--brand) 40%,transparent)}
.ytab[aria-selected="true"] small{opacity:.9}

/* vault subscribe card */
.vault{position:relative;margin:26px 0 8px;border-radius:26px;overflow:hidden;
  background:linear-gradient(150deg,var(--vault1),var(--vault2));
  border:1px solid var(--vault-edge);box-shadow:var(--shadow-lg)}
.vault__glow{position:absolute;inset:0;background:
  radial-gradient(600px 240px at 85% -20%, rgba(227,189,99,.22), transparent 60%),
  radial-gradient(500px 220px at 0% 120%, rgba(46,125,239,.18), transparent 60%);pointer-events:none}
.vault__body{position:relative;padding:28px 24px 24px}
.vault__title{margin:0 0 6px;color:var(--vault-ink);font-size:clamp(20px,3.5vw,26px)}
.vault__sub{margin:0 0 20px;color:var(--vault-ink2);font-size:15px}

.subgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.sbtn{
  display:flex;align-items:center;gap:12px;padding:15px 16px;border-radius:16px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);color:var(--vault-ink);
  transition:transform .15s var(--spring),background .2s,border-color .2s;
}
.sbtn:hover{transform:translateY(-2px);background:rgba(255,255,255,.11);border-color:var(--vault-gold)}
.sbtn__txt{display:flex;flex-direction:column;line-height:1.2}
.sbtn__txt b{font-size:15.5px}
.sbtn__txt small{color:var(--vault-ink2);font-size:12.5px}
.sbtn__ico{width:34px;height:34px;border-radius:9px;flex:0 0 auto;background-size:20px;background-repeat:no-repeat;background-position:center;background-color:rgba(255,255,255,.1)}
.sbtn--apple .sbtn__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23fff'%3E%3Cpath d='M16.4 12.9c0-2 1.6-3 1.7-3-.9-1.4-2.4-1.5-2.9-1.6-1.2-.1-2.4.7-3 .7s-1.6-.7-2.6-.7c-1.3 0-2.6.8-3.2 2-1.4 2.4-.4 6 1 8 .7 1 1.4 2 2.4 2 .9 0 1.3-.6 2.4-.6s1.4.6 2.4.6 1.6-.9 2.3-1.9c.7-1 1-2 1-2.1-.1 0-1.9-.8-1.9-2.9zM14.7 6.9c.5-.6.8-1.5.7-2.4-.8 0-1.7.5-2.2 1.1-.5.5-.9 1.4-.8 2.3.9.1 1.7-.4 2.3-1z'/%3E%3C/svg%3E")}
.sbtn--google .sbtn__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round'%3E%3Crect x='3' y='4.5' width='18' height='16' rx='2.5'/%3E%3Cpath d='M3 9h18M8 2.5v4M16 2.5v4'/%3E%3C/svg%3E")}
.sbtn--outlook .sbtn__ico{background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='M3 7l9 6 9-6'/%3E%3C/svg%3E")}

.copyrow{display:flex;gap:10px;margin-top:16px;align-items:stretch}
.feedurl{
  flex:1;min-width:0;display:flex;align-items:center;padding:10px 14px;border-radius:12px;
  background:rgba(0,0,0,.28);border:1px solid rgba(255,255,255,.12);color:var(--vault-ink2);
  font-family:var(--num);font-size:13px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.ghost{
  border:1px solid rgba(255,255,255,.22);background:rgba(255,255,255,.06);color:var(--vault-ink);
  border-radius:12px;padding:10px 16px;font-family:var(--font);font-weight:600;cursor:pointer;white-space:nowrap;
  transition:.18s;
}
.ghost:hover{background:rgba(255,255,255,.13);border-color:var(--vault-gold)}
.ghost.ok{background:var(--good);border-color:var(--good);color:#fff}

.dlrow{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:16px}
.dlrow__label{color:var(--vault-ink2);font-size:14px;margin-right:2px}
.chip{
  display:inline-flex;align-items:center;gap:7px;text-decoration:none;
  padding:8px 15px;border-radius:999px;font-weight:600;font-size:14px;
  background:var(--vault-gold);color:#241a05;border:1px solid transparent;transition:.18s;
}
.chip::before{content:"⤓";font-size:15px}
.chip:hover{filter:brightness(1.06);transform:translateY(-1px)}

.how{margin-top:18px;border-top:1px solid rgba(255,255,255,.12);padding-top:6px}
.how summary{cursor:pointer;color:var(--vault-ink2);font-weight:600;font-size:14px;padding:8px 0;list-style:none}
.how summary::-webkit-details-marker{display:none}
.how summary::before{content:"＋ ";color:var(--vault-gold)}
.how[open] summary::before{content:"－ "}
.how__body{color:var(--vault-ink2);font-size:14px}
.how__body p{margin:8px 0}
.how__body b{color:var(--vault-ink)}
.how__tip{border-left:2px solid var(--vault-gold);padding-left:12px;opacity:.9}

/* legend */
.legend{display:flex;flex-wrap:wrap;gap:8px 16px;margin:24px 2px 6px;justify-content:center}
.lg{display:inline-flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink2)}
.lg__sw{width:14px;height:14px;border-radius:5px;display:inline-block}
.lg__sw--sub{background:repeating-linear-gradient(45deg,var(--ink2) 0 3px,transparent 3px 6px);border:1px solid var(--line)}

/* section heading */
.section-h{font-size:22px;margin:34px 0 14px;display:flex;align-items:baseline;gap:10px}
.section-h .count,.count{font-family:var(--num);font-size:15px;color:var(--ink2);font-weight:600}

/* calendar */
.calendar{display:grid;grid-template-columns:repeat(auto-fill,minmax(272px,1fr));gap:16px}
.month{background:var(--paper);border:1px solid var(--line);border-radius:var(--r);padding:14px 14px 16px;box-shadow:var(--shadow)}
.month__h{font-weight:700;margin:2px 0 10px;font-size:16px}
.dow,.days{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.dow{margin-bottom:4px}
.dow span{text-align:center;font-size:11.5px;color:var(--ink2);font-weight:600;padding:2px 0}
.dow span.sun{color:var(--danger)}
.cell{
  position:relative;aspect-ratio:1/1;display:flex;align-items:center;justify-content:center;
  font-family:var(--num);font-size:14px;border-radius:9px;color:var(--ink);
}
.cell.empty{visibility:hidden}
.cell.sun{color:var(--danger)}
.cell.today{box-shadow:inset 0 0 0 2px var(--brand2)}
.cell.hol{color:#fff;font-weight:600}
.cell.hol.cat-national{background:var(--c-national)}
.cell.hol.cat-religious{background:var(--c-religious)}
.cell.hol.cat-royal{background:var(--c-royal)}
.cell.hol.cat-special{background:var(--c-special)}
.cell.hol.sub::after{content:"";position:absolute;inset:0;border-radius:9px;background:repeating-linear-gradient(45deg,rgba(255,255,255,.35) 0 3px,transparent 3px 7px)}
.cell.hol.bkk{outline:2px dashed rgba(255,255,255,.7);outline-offset:-4px}

/* holiday list */
.hlist{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.hli{
  display:flex;align-items:center;gap:16px;background:var(--paper);border:1px solid var(--line);
  border-radius:var(--r-sm);padding:12px 16px;box-shadow:var(--shadow);
  border-left:5px solid var(--c-national);
}
.hli.cat-religious{border-left-color:var(--c-religious)}
.hli.cat-royal{border-left-color:var(--c-royal)}
.hli.cat-special{border-left-color:var(--c-special)}
.hli__date{flex:0 0 auto;text-align:center;min-width:58px}
.hli__d{font-family:var(--num);font-size:26px;font-weight:700;line-height:1}
.hli__m{font-size:12.5px;color:var(--ink2)}
.hli__dow{font-size:12px;color:var(--ink2)}
.hli__main{flex:1;min-width:0}
.hli__name{font-weight:600;font-size:15.5px}
.hli__note{font-size:13px;color:var(--ink2);margin-top:2px}
.badge{display:inline-block;font-size:11.5px;font-weight:600;padding:2px 9px;border-radius:999px;margin-left:6px;vertical-align:middle}
.badge--sub{background:var(--gold-soft);color:var(--gold)}
.badge--special{background:var(--c-special-soft);color:var(--c-special)}
.badge--bkk{background:var(--c-national-soft);color:var(--c-national)}
.hli.wknd .hli__d{color:var(--danger)}

/* notes */
.notes{margin-top:34px}
.notes .how{border-top:1px solid var(--line)}
.notes .how summary{color:var(--ink2)}
.notes .how summary::before{color:var(--gold)}
.notes .how__body{color:var(--ink2);white-space:pre-line;font-size:14px}
.source{margin-top:14px;color:var(--ink2);font-size:13.5px}
.source a{font-weight:600}

/* footer */
.foot{max-width:var(--maxw);margin:20px auto 0;padding:24px 20px 40px;border-top:1px solid var(--line);color:var(--ink2);font-size:14px;text-align:center}
.foot__dim{font-size:12.5px;opacity:.8;margin-top:6px}

/* toast */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(20px);
  background:var(--ink);color:var(--bg);padding:12px 20px;border-radius:14px;font-weight:600;font-size:14px;
  box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:.25s var(--spring);z-index:60;
}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media (max-width:560px){
  .subgrid{grid-template-columns:1fr}
  .copyrow{flex-direction:column}
  .hli__name{font-size:15px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}