/* plus.css — ฤกษ์ตามงาน (auspice.js), the วันนี้ additions (calendar-plus.js) and บุคลิกตามธาตุเจ้าเรือน (persona.js).
   Mooncake-box world (lacquer red, foil gold, ivory) with premium-almanac touches: illustrated activity tiles in
   swipeable rows, an ornate "ยอดนิยม" carousel on a blush band, a green "best time" panel, a marked month grid. */

/* ---------- ฤกษ์ตามงาน: catalog ---------- */
.au { text-align: left; }
.au-intro { margin: 4px 0 0; }
.au-h { margin: 0; font: 600 22px/1.3 'Kanit', sans-serif; color: #7A2927; }
.au-intro p { margin: 6px 0 0; font: 14px/1.65 'Sarabun', sans-serif; color: #5E4A3D; }
.au-feature { margin: 14px -16px 0; padding: 16px 0 18px; background: linear-gradient(180deg, #F7DCDD, #F3E3DC); border-top: 1px solid #EBC3C3; border-bottom: 1px solid #EBC3C3; }
.au-row { display: flex; gap: 10px; overflow-x: auto; padding: 4px 16px 8px; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.au-row::-webkit-scrollbar { display: none; }
.au-sec { margin: 18px -16px 0; }
.au-sec-h { margin: 0 16px 8px; font: 600 16px/1.3 'Kanit', sans-serif; color: #382C27; }
.au-tile {
  --a: #A51E28; --b: #6E1018;
  position: relative; flex: none; width: 112px; height: 146px; padding: 0; border: 0; border-radius: 14px; overflow: hidden; scroll-snap-align: start;
  color: #F3D9A0; text-align: center;
  background: radial-gradient(70% 55% at 50% 30%, rgba(255, 236, 190, .22), rgba(255, 236, 190, 0) 70%), radial-gradient(circle at 20% 110%, rgba(255, 255, 255, .08) 0 30%, transparent 31%), linear-gradient(160deg, var(--a), var(--b));
  box-shadow: 0 8px 16px -10px rgba(60, 20, 10, .55), inset 0 0 0 1px rgba(243, 217, 160, .35);
  transition: transform .14s ease-out;
}
.au-tile::before { content: ""; position: absolute; inset: 5px; border-radius: 10px; border: 1px solid rgba(243, 217, 160, .32); pointer-events: none; }
.au-tile .au-art { position: absolute; left: 50%; top: 20px; width: 64px; height: 64px; transform: translateX(-50%); filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .25)); }
.au-tile-l { position: absolute; left: 0; right: 0; bottom: 0; padding: 22px 8px 11px; font: 600 13px/1.3 'Kanit', sans-serif; color: #FFF6E0; background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .38)); }
.au-tile:active { transform: scale(.96); }
.au-tile.is-big { width: 168px; height: 214px; border-radius: 16px; box-shadow: 0 12px 22px -12px rgba(110, 16, 24, .7), inset 0 0 0 2px #D7B87C, inset 0 0 0 7px var(--b), inset 0 0 0 8px rgba(243, 217, 160, .7); }
.au-tile.is-big::before { inset: 12px; border-radius: 9px; }
.au-tile.is-big .au-art { top: 44px; width: 86px; height: 86px; }
.au-tile.is-big .au-tile-l { font-size: 15.5px; padding: 26px 10px 18px; }
.au-ribbon { position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 1; padding: 3px 14px 4px; border-radius: 0 0 9px 9px; background: #951A22; color: #F3D9A0; font: 600 11px/1.3 'Kanit', sans-serif; box-shadow: inset 0 0 0 1px #D7B87C; }
.t-rose { --a: #B83A4B; --b: #6E1424; }
.t-gold { --a: #B88A36; --b: #6A4914; }
.t-navy { --a: #34558C; --b: #142645; }
.t-jade { --a: #2F7563; --b: #12392F; }
.t-sky { --a: #3B82AE; --b: #173F5E; }
.t-plum { --a: #84456F; --b: #3E1C37; }
.t-stone { --a: #6E6B62; --b: #2E2C27; }
/* photo tiles: a documentary still sits under the gold inner frame; the line art stays as the fallback */
.au-photo { position: absolute; inset: 0; z-index: 0; width: 100%; height: 100%; object-fit: cover; }
.au-tile::before { z-index: 1; }
.au-tile .au-tile-l { z-index: 2; }
.au-ribbon { z-index: 3; }
.au-tile:has(.au-photo) .au-art { display: none; }
.au-tile:has(.au-photo) .au-tile-l { padding-top: 34px; background: linear-gradient(180deg, transparent, rgba(24, 10, 6, .55) 38%, rgba(24, 10, 6, .82)); text-shadow: 0 1px 2px rgba(0, 0, 0, .5); }
.au-head { position: relative; overflow: hidden; }
.au-head > :not(.au-photo) { position: relative; z-index: 1; }
.au-head:has(.au-photo) { grid-template-columns: minmax(0, 1fr); min-height: 230px; align-content: end; }
.au-head .au-photo { object-position: 50% 64%; }
.au-head:has(.au-photo) .au-art { display: none; }
.au-head:has(.au-photo)::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 10, 6, .05) 20%, rgba(24, 10, 6, .78)); }
.au-head:has(.au-photo) > div { z-index: 2; }
.au-note { margin: 18px 0 0; font: 12px/1.6 'Sarabun', sans-serif; color: #86715E; }

/* ---------- ฤกษ์ตามงาน: detail ---------- */
.au-back { min-height: 40px; padding: 0 4px; border: 0; background: none; color: #951A22; font: 500 14px 'Kanit', sans-serif; }
.au-head { --a: #A51E28; --b: #6E1018; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 14px; align-items: center; margin: 6px 0 0; padding: 16px; border-radius: 14px; color: #F3D9A0; background: linear-gradient(150deg, var(--a), var(--b)); box-shadow: inset 0 0 0 1px rgba(243, 217, 160, .4); }
.au-head .au-art { width: 64px; height: 64px; }
.au-head h3 { margin: 0; font: 600 21px/1.3 'Kanit', sans-serif; color: #FFF3D6; }
.au-head p { margin: 4px 0 0; font: 13.5px/1.55 'Sarabun', sans-serif; color: #F1DDB5; }
.au-ctl { margin: 14px 0 0; padding: 14px; border-radius: 12px; border: 1px solid #E4D2A9; background: #FFFDF8; }
.au-lbl { font: 600 13.5px 'Kanit', sans-serif; color: #7A5B25; margin: 0 0 6px; }
.au-lbl ~ .au-lbl { margin-top: 12px; }
.au-whos { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.au-who { min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid #D9C8A8; background: #FFF; color: #382C27; font: 500 13.5px 'Kanit', sans-serif; }
.au-who.on { background: #951A22; border-color: #951A22; color: #FFF3D6; }
.au-who-add { font: 500 13px 'Kanit', sans-serif; color: #951A22; text-decoration: none; padding: 0 6px; }
.au-c { margin: 8px 0 0; font: 12.5px/1.6 'Sarabun', sans-serif; color: #86715E; }
.au-range { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.au-range input { flex: 1 1 150px; min-height: 44px; background: #FFF !important; }
.au-seg { display: inline-flex; border: 1px solid #D9C8A8; border-radius: 999px; overflow: hidden; }
.au-seg button { min-height: 40px; padding: 0 12px; border: 0; background: #FFF; color: #5E4A3D; font: 500 13px 'Kanit', sans-serif; }
.au-seg button[aria-pressed="true"] { background: #951A22; color: #FFF3D6; }
.au-list { display: grid; gap: 8px; }
.au-res { display: grid; grid-template-columns: 58px minmax(0, 1fr) 14px; gap: 12px; align-items: center; width: 100%; padding: 10px 12px 10px 10px; border-radius: 12px; border: 1px solid #E4D2A9; background: #FFFDF8; text-align: left; transition: transform .12s ease-out; }
.au-res:active { transform: scale(.985); }
.au-res-date { display: grid; place-items: center; height: 64px; border-radius: 10px; background: linear-gradient(160deg, #A51E28, #7A1219); color: #FFF3D6; box-shadow: inset 0 0 0 1px rgba(243, 217, 160, .5); }
.au-res-date b { font: 600 24px/1 'Oswald', sans-serif; }
.au-res-date small { font: 500 10.5px/1.2 'Kanit', sans-serif; color: #F3D9A0; }
.au-res-body { display: grid; gap: 4px; min-width: 0; }
.au-res-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.au-stars { font-size: 13px; letter-spacing: 1px; color: #C99A3A; }
.au-stars i { font-style: normal; color: #E4D9C2; }
.au-res-top small { font: 12px 'Sarabun', sans-serif; color: #86715E; }
.au-why { display: flex; flex-wrap: wrap; gap: 4px; }
.au-why i { font: 500 11px/1.75 'Kanit', sans-serif; font-style: normal; padding: 0 8px; border-radius: 999px; background: #F3E8CF; color: #7A5B25; }
.au-hrs { font: 13px/1.5 'Sarabun', sans-serif; color: #3F6B3A; }
.au-hrs b { font: 600 13px 'Oswald', sans-serif; }
.au-hrs.is-none { color: #86715E; }
.au-res-go { font: 400 22px/1 Georgia, serif; color: #C9A868; }
.au-tap { margin: 10px 0 0; font: 12.5px 'Sarabun', sans-serif; color: #7A5B25; }
.au-empty { margin: 16px 0 0; padding: 14px; border-radius: 10px; background: #F3EEE4; font: 13.5px/1.6 'Sarabun', sans-serif; color: #5E4A3D; }

/* ---------- วันนี้: day strip, best time, month ---------- */
.cp-info { margin: 10px 0 0; padding: 12px 14px; border-radius: 10px; border: 1px solid #E4D2A9; background: #FFFDF8; text-align: left; }
.cp-row { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; }
.cp-thai { font: 600 14.5px/1.4 'Kanit', sans-serif; color: #382C27; }
.cp-b { font: 500 11px/1.75 'Kanit', sans-serif; font-style: normal; padding: 0 9px; border-radius: 999px; }
.b-holy { background: #F3E3B8; color: #6B4E1E; }
.b-cn { background: #F6DEDA; color: #8A1C24; }
.cp-rel { margin-top: 3px; font: 13px/1.5 'Sarabun', sans-serif; color: #86715E; }
.cp-note-add { margin-top: 8px; min-height: 36px; padding: 0; border: 0; background: none; color: #951A22; font: 500 13px 'Kanit', sans-serif; }
.cp-note { display: grid; gap: 2px; width: 100%; margin-top: 8px; padding: 9px 11px; border-radius: 8px; border: 1px dashed #D9C8A8; background: #FFF9EB; text-align: left; }
.cp-note b { font: 600 12px 'Kanit', sans-serif; color: #7A5B25; }
.cp-note span { font: 13.5px/1.55 'Sarabun', sans-serif; color: #382C27; white-space: pre-wrap; overflow-wrap: anywhere; }
.cp-note-edit { margin-top: 8px; }
.cp-note-edit textarea { width: 100%; min-height: 80px; padding: 10px !important; border-radius: 8px !important; font: 14px/1.55 'Sarabun', sans-serif !important; background: #FFF !important; resize: vertical; }
.cp-note-btns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; align-items: center; }
.cp-note-btns .btn { min-height: 40px; padding: 0 16px; }
.cp-del { border: 0; background: none; color: #86715E; font: 13px 'Sarabun', sans-serif; text-decoration: underline; min-height: 40px; }
.cp-priv { margin: 6px 0 0; font: 11.5px 'Sarabun', sans-serif; color: #86715E; }

.cp-best { margin: 12px 0 0; padding: 14px 16px 12px; border-radius: 12px; background: #FFFDF8; border: 1px solid #E4D2A9; text-align: left; }
.cp-best-h { font: 600 15px 'Kanit', sans-serif; color: #382C27; }
.cp-best-main { display: grid; justify-items: center; gap: 2px; margin: 10px 0 0; padding: 12px; border-radius: 10px; background: linear-gradient(180deg, #E8F6E7, #DDF0DB); border: 1px solid #BFE0BC; text-align: center; }
.cp-best-main b { font: 600 26px/1.15 'Oswald', sans-serif; color: #2E6B2A; letter-spacing: .3px; }
.cp-best-main small { font: 13px/1.5 'Sarabun', sans-serif; color: #3F6B3A; }
.cp-best-alt { margin: 8px 0 0; font: 13px 'Sarabun', sans-serif; color: #5E4A3D; }
.cp-best-alt i { font: 600 13px 'Oswald', sans-serif; font-style: normal; margin-left: 6px; padding: 2px 8px; border-radius: 6px; background: #EFF6EE; color: #2E6B2A; }
.cp-best-none, .cp-best-warn { margin: 8px 0 0; font: 13px/1.6 'Sarabun', sans-serif; color: #7A5B25; }
.cp-best-warn { padding: 8px 10px; border-radius: 8px; background: #F6EAD0; }
.cp-best-cta { display: inline-block; margin: 8px 0 0; font: 500 13.5px 'Kanit', sans-serif; color: #951A22; text-decoration: none; }
.cp-best-who { margin: 8px 0 0; font: 11.5px/1.5 'Sarabun', sans-serif; color: #86715E; }

.cp-month { margin: 14px 0 0; padding: 14px 12px 12px; border-radius: 12px; background: #FFFDF8; border: 1px solid #E4D2A9; text-align: left; }
.cp-mh { display: grid; grid-template-columns: 40px minmax(0, 1fr) 40px; align-items: center; }
.cp-mh h4 { margin: 0; text-align: center; font: 600 16px 'Kanit', sans-serif; color: #7A2927; }
.cp-nav { width: 40px; height: 40px; border-radius: 50%; border: 1px solid #E4D2A9; background: #FFF; color: #951A22; font: 400 22px/1 Georgia, serif; padding: 0 0 3px; }
.cp-filters { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 0; }
.cp-filters button { min-height: 32px; padding: 0 11px; border-radius: 999px; border: 1px solid #D9C8A8; background: #FFF; color: #86715E; font: 500 12px 'Kanit', sans-serif; }
.cp-filters button[aria-pressed="true"] { background: #FBEDE4; border-color: #C9A868; color: #7A2927; }
.cp-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 3px; margin: 10px 0 0; }
.cp-w { text-align: center; padding: 4px 0; border-radius: 4px; background: #2B4377; color: #FFF; font: 500 11.5px 'Kanit', sans-serif; }
.cp-w.is-sun { background: #A51E28; }
.cp-c { position: relative; display: grid; align-content: start; justify-items: center; min-width: 0; min-height: 60px; padding: 4px 0 3px; border-radius: 6px; border: 1px solid transparent; background: #FFF; transition: transform .1s ease-out; }
.cp-c.is-empty { background: transparent; }
.cp-c b { font: 600 17px/1.1 'Oswald', sans-serif; color: #382C27; }
.cp-c small { font: 9.5px/1.3 'Sarabun', sans-serif; color: #A89572; white-space: nowrap; }
.cp-c.is-sun b { color: #A51E28; }
.cp-c.is-today { border-color: #C9A868; }
.cp-c.is-sel { background: #951A22; border-color: #951A22; }
.cp-c.is-sel b, .cp-c.is-sel small { color: #FFF3D6; }
.cp-c.is-clash::after { content: ""; position: absolute; top: 4px; right: 4px; width: 6px; height: 6px; border-radius: 50%; background: #B8B0A3; box-shadow: 0 0 0 1.5px #FFF; }
.cp-c:active { transform: scale(.95); }
.cp-mk { display: flex; gap: 1px; justify-content: center; min-height: 13px; margin-top: 1px; }
.cp-mk i { display: grid; place-items: center; width: 12px; height: 12px; font: 10px/1 'Sarabun', sans-serif; font-style: normal; }
.cp-mk svg { width: 11px; height: 11px; }
.m-holy { color: #B0843A; }
.m-cn { color: #A51E28; }
.m-note { color: #2B4377; }
.cp-c.is-sel .m-holy, .cp-c.is-sel .m-cn, .cp-c.is-sel .m-note { color: #F3D9A0; }
.cp-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 10px 0 0; font: 11.5px 'Sarabun', sans-serif; color: #86715E; }
.cp-legend span { display: inline-flex; align-items: center; gap: 4px; }
.cp-legend svg { width: 11px; height: 11px; }
.cp-legend i { font-style: normal; color: #A51E28; }
.cp-legend .lg-clash { width: 7px; height: 7px; border-radius: 50%; background: #B8B0A3; display: inline-block; }
.cp-tip { margin: 8px 0 0; font: 12px 'Sarabun', sans-serif; color: #86715E; }

/* ---------- บุคลิกตามธาตุเจ้าเรือน ---------- */
.pe { margin: 22px 0 0; text-align: left; }
.pe-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.pe-h { margin: 0; font: 600 20px/1.3 'Kanit', sans-serif; color: #7A2927; }
.pe-sub { font: 500 12.5px 'Kanit', sans-serif; color: #9A712F; }
.pe-card { --tone: #1E2F55; margin: 12px 0 0; padding: 16px; border-radius: 16px; background: #FFFDF8; border: 1px solid #D9C8A8; box-shadow: inset 0 0 0 4px #FFFDF8, inset 0 0 0 5px #E4D2A9; }
.pe-top { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 14px; align-items: center; }
.pe-medal { position: relative; width: 96px; height: 96px; border-radius: 50%; display: grid; place-items: center; color: #F3D9A0; background: radial-gradient(circle at 35% 30%, var(--tone), #171212 95%); box-shadow: 0 0 0 3px #D7B87C, 0 0 0 5px #FFFDF8, 0 0 0 6px #D7B87C, 0 10px 18px -10px rgba(40, 20, 10, .8); }
.pe-ic { width: 56px; height: 56px; margin-top: -10px; }
.pe-cn { position: absolute; bottom: 6px; font: 700 18px/1 "Noto Serif SC", "Songti SC", serif; color: #FFF3D6; }
.pe-title small { font: 500 12px 'Kanit', sans-serif; color: #9A712F; }
.pe-title h4 { margin: 2px 0 0; font: 600 21px/1.25 'Kanit', sans-serif; color: #382C27; }
.pe-title h4 span { font: 700 19px "Noto Serif SC", serif; color: #951A22; }
.pe-title em { display: block; font: 500 14px 'Kanit', sans-serif; font-style: normal; color: var(--tone); }
.pe-title p { margin: 4px 0 0; font: 13.5px/1.55 'Sarabun', sans-serif; color: #5E4A3D; }
.pe-traits { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin: 14px 0 0; }
.pe-traits i { font: 500 12.5px/2.2 'Kanit', sans-serif; font-style: normal; text-align: center; border-radius: 999px; background: #F6EAD0; color: #7A5B25; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.pe-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 12px 0 0; }
.pe-cols > div { padding: 10px 11px; border-radius: 10px; }
.pe-s { background: #EFF5EC; }
.pe-w { background: #FBF1EE; }
.pe-cols b { font: 600 13.5px 'Kanit', sans-serif; }
.pe-s b { color: #3F6B3A; }
.pe-w b { color: #7A2927; }
.pe-cols ul { margin: 6px 0 0; padding: 0 0 0 16px; font: 12.5px/1.55 'Sarabun', sans-serif; color: #5E4A3D; }
.pe-colors { margin: 12px 0 0; }
.pe-colors b { font: 600 13px 'Kanit', sans-serif; color: #7A5B25; }
.pe-colors div { display: flex; flex-wrap: wrap; gap: 12px; margin: 6px 0 0; }
.pe-colors span { display: inline-flex; align-items: center; gap: 6px; font: 12.5px 'Sarabun', sans-serif; color: #5E4A3D; }
.pe-colors i { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .12); }
.pe-match { display: grid; gap: 8px; margin: 12px 0 0; }
.pe-match > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 10px; align-items: center; padding: 9px 11px; border-radius: 10px; }
.pe-ok { background: #FBEDE4; }
.pe-hard { background: #F3EEE4; }
.pe-mi { width: 40px; height: 40px; padding: 6px; border-radius: 50%; color: #F3D9A0; background: #7A1219; }
.pe-hard .pe-mi { background: #6F685E; }
.pe-match small { display: block; font: 11.5px 'Sarabun', sans-serif; color: #86715E; }
.pe-match b { font: 600 14px 'Kanit', sans-serif; color: #382C27; }
.pe-match em { font: 12px 'Sarabun', sans-serif; font-style: normal; color: #86715E; margin-left: 4px; }
.pe-pick { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 5px; margin: 12px 0 0; }
.pe-pick button { display: grid; justify-items: center; min-height: 48px; padding: 4px 0; border-radius: 8px; border: 1px solid #E4D2A9; background: #FFFDF8; }
.pe-pick b { font: 700 16px/1.1 "Noto Serif SC", serif; color: #951A22; }
.pe-pick small { font: 10.5px 'Kanit', sans-serif; color: #86715E; }
.pe-pick button[aria-pressed="true"] { background: #951A22; border-color: #951A22; }
.pe-pick button[aria-pressed="true"] b, .pe-pick button[aria-pressed="true"] small { color: #FFF3D6; }
.pe-save { width: 100%; margin: 14px 0 0; }
.pe-how { margin: 10px 0 0; font: 11.5px/1.6 'Sarabun', sans-serif; color: #86715E; }
.fm-persona { display: block; font: 500 12px 'Kanit', sans-serif; color: #9A712F; }

@media (max-width: 350px) { .pe-cols { grid-template-columns: 1fr; } .pe-traits { grid-template-columns: repeat(2, minmax(0, 1fr)); } .au-tile { width: 100px; height: 134px; } }
@media (prefers-reduced-motion: reduce) { .au-tile, .au-res, .cp-c { transition: none; } .au-tile:active, .au-res:active, .cp-c:active { transform: none; } }

/* old "popular six" children stay hidden even when their own display rule (e.g. .rk-row grid) would win over [hidden] */
.au-old[hidden] { display: none !important; }