/* lucky-number.css — "เลขมงคลประจำตัว" on the ดวงฉัน page. Mooncake-box world: lacquer red, foil gold, ivory. */

.lk-teaser { margin: 10px 0 0; font: 13px/1.6 'Sarabun', sans-serif; color: #86715E; }
.lk-teaser b { color: #951A22; font-weight: 600; }

.lk { margin: 22px 0 0; padding: 18px 16px 16px; border-radius: 8px; border: 1px solid #C9A868; background: #FFF9EB; position: relative; text-align: left; }
.lk::before { content: ""; position: absolute; inset: 4px; border: 1px solid #E4D2A9; border-radius: 5px; pointer-events: none; }
.lk-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 10px; }
.lk-title { margin: 0; font: 600 20px/1.3 'Kanit', sans-serif; color: #7A2927; }
.lk-sub { font: 500 12.5px 'Kanit', sans-serif; color: #9A712F; }

/* three foil coins */
.lk-coins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 16px 0 4px; }
.lk-coin { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 0; }
.lk-coin-n {
  width: 76px; height: 76px; border-radius: 50%; display: grid; place-items: center;
  font: 600 44px/1 'Oswald', sans-serif; color: #951A22;
  background: radial-gradient(circle at 35% 30%, #F9E7B5 0%, #D9B56A 55%, #A67C33 100%);
  box-shadow: inset 0 0 0 4px rgba(255, 244, 214, .35), inset 0 0 0 6px #8A6424, 0 8px 16px -8px rgba(90, 40, 10, .6);
}
.lk-coin.is-main .lk-coin-n { width: 88px; height: 88px; font-size: 52px; }
.lk-coin-why { margin-top: 8px; font: 12.5px/1.45 'Sarabun', sans-serif; color: #5E4A3D; }
.lk-use { margin: 12px 0 0; font: 13.5px/1.6 'Sarabun', sans-serif; color: #382C27; }

.lk-why { margin: 10px 0 0; }
.lk-why summary { cursor: pointer; font: 500 13px 'Kanit', sans-serif; color: #951A22; min-height: 32px; display: flex; align-items: center; }
.lk-why ul { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 6px; }
.lk-why li { display: grid; grid-template-columns: 28px 1fr; gap: 8px; align-items: start; font: 13px/1.55 'Sarabun', sans-serif; color: #5E4A3D; }
.lk-why li b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: #951A22; color: #FFF3D6; font: 600 15px 'Oswald', sans-serif; }
.lk-why li.is-avoid b { background: #D8D3CA; color: #6F685E; }
.lk-why li i { font-style: normal; color: #86715E; }

.lk-avoid { margin: 12px 0 0; padding: 10px 12px; border-radius: 6px; background: #F3EEE4; display: grid; grid-template-columns: auto 1fr; gap: 2px 10px; align-items: center; }
.lk-avoid b { font: 600 13px 'Kanit', sans-serif; color: #6F685E; }
.lk-avoid-n { font: 600 18px 'Oswald', sans-serif; color: #6F685E; letter-spacing: .5px; }
.lk-avoid small { grid-column: 1 / -1; font: 12px/1.5 'Sarabun', sans-serif; color: #86715E; }

/* 0–9 map */
.lk-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; margin: 14px 0 0; }
.lk-d { display: grid; place-items: center; aspect-ratio: 1; border-radius: 6px; font: 600 17px/1 'Oswald', sans-serif; }
.lk-d.sm { width: 30px; height: 30px; aspect-ratio: auto; font-size: 15px; }
.t-top { background: #951A22; color: #FFF3D6; }
.t-good { background: #EBDDB8; color: #6B4E1E; }
.t-mid { background: #FFFDF8; color: #86715E; box-shadow: inset 0 0 0 1px #D9C8A8; }
.t-avoid { background: #E3E0DA; color: #9A938A; }
.lk-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 8px 0 0; font: 11.5px 'Sarabun', sans-serif; color: #86715E; }
.lk-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }

/* checker */
.lk-check { margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid #E4D2A9; }
.lk-check-h { font: 600 15.5px 'Kanit', sans-serif; color: #382C27; }
.lk-check-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; margin: 8px 0 0; }
.lk-check-row input { width: 100%; min-width: 0; background: #FFFDF8 !important; }
.lk-check-row .btn { min-height: 52px; padding: 0 18px; white-space: nowrap; }
.lk-privacy { margin: 8px 0 0; font: 11.5px/1.5 'Sarabun', sans-serif; color: #86715E; }
.lk-err { margin: 10px 0 0; font: 13px 'Sarabun', sans-serif; color: #951A22; }

.lk-res { margin: 12px 0 0; padding: 13px; border-radius: 8px; background: #FFFDF8; border: 1px solid #D9C8A8; }
.lk-res-top { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: center; }
.lk-pct { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; font: 600 22px/1 'Oswald', sans-serif; color: #FFF3D6; background: #951A22; }
.lk-res.lv-good .lk-pct { background: #B0843A; }
.lk-res.lv-mid .lk-pct { background: #A89C86; }
.lk-res.lv-lo .lk-pct { background: #8E877C; }
.lk-res-lv { font: 600 16px 'Kanit', sans-serif; color: #382C27; }
.lk-res-line { font: 13px/1.5 'Sarabun', sans-serif; color: #5E4A3D; }
.lk-res-ds { display: flex; flex-wrap: wrap; gap: 4px; margin: 12px 0 0; }
.lk-res-meta { display: grid; gap: 2px; margin: 10px 0 0; font: 12.5px/1.5 'Sarabun', sans-serif; color: #86715E; }
.lk-res-adv { margin: 8px 0 0; font: 13px/1.55 'Sarabun', sans-serif; color: #382C27; }

.lk-save { width: 100%; margin: 16px 0 0; }
.lk-how { margin: 12px 0 0; font: 11.5px/1.6 'Sarabun', sans-serif; color: #86715E; }
.lk-how b { color: #7A2927; font-weight: 600; }

@media (max-width: 360px) {
  .lk-coin-n { width: 66px; height: 66px; font-size: 38px; }
  .lk-coin.is-main .lk-coin-n { width: 76px; height: 76px; font-size: 44px; }
  .lk-d { font-size: 15px; }
}
.lk .nw { white-space: nowrap; }