/* ============================================================
   theme.css — ฟอนต์ + ไอคอน + popup ยืนยัน ใช้ร่วมกันทุกหน้า
   (สีธีมแดง-ขาวตั้งอยู่ใน :root ของแต่ละหน้าเอง เพื่อไม่ให้ชนกับ cascade)
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Lao:wght@400;500;600;700&display=swap');

.icon { width:16px; height:16px; display:inline-block; vertical-align:-3px; flex-shrink:0; }
.icon-lg { width:22px; height:22px; vertical-align:-6px; }
.spin-anim { animation: icon-spin .8s linear infinite; }
@keyframes icon-spin { to { transform: rotate(360deg); } }

/* popup ยืนยัน (แทน confirm() ของเบราว์เซอร์) */
.confirm-overlay { display:none; position:fixed; inset:0; background:rgba(30,10,10,.45); align-items:center; justify-content:center; z-index:100; }
.confirm-overlay.open { display:flex; }
.confirm-box { background:#fff; border-radius:12px; padding:22px 24px; width:340px; max-width:90vw; box-shadow:0 12px 34px rgba(0,0,0,.25); text-align:center; }
.confirm-icon { width:44px; height:44px; margin:0 auto 12px; color:var(--accent, #c81e1e); }
.confirm-msg { font-size:14px; color:#333; line-height:1.5; margin-bottom:18px; white-space:pre-line; }
.confirm-actions { display:flex; gap:10px; justify-content:center; }
.confirm-actions button { flex:1; padding:9px 0; border:none; border-radius:7px; font-size:13px; font-weight:600; cursor:pointer; }
.confirm-btn-cancel { background:#eef0f2; color:#334; }
.confirm-btn-ok { background:var(--accent, #c81e1e); color:#fff; }