/* =====================================================================
   Skeleton loading ทั้งเว็บ — คู่กับ partials/skeleton.php
   - overlay เต็มจอ แสดงตั้งแต่ paint แรก ค้าง --sk-ms (ตั้งที่ SKELETON_MS) แล้วจางหาย
   - CSS ล้วน: ไม่ต้องรอ JS · ใช้ token จากธีม (--bg --text --line --glow) จึงเข้ากับทุกธีม
   - animation ใช้เฉพาะ transform/opacity → GPU ทำให้ลื่น ไม่ทำให้ layout กระตุก
   ===================================================================== */
.sk-screen{
  --sk-ms:1300ms;
  --sk-base:color-mix(in srgb,var(--text) 7%,transparent);
  --sk-hi:color-mix(in srgb,var(--text) 15%,transparent);
  position:fixed;inset:0;z-index:9999;overflow:hidden;cursor:progress;
  background:var(--bg);
  animation:sk-out .3s ease var(--sk-ms) forwards;
}
.sk-screen *{box-sizing:border-box}
@keyframes sk-out{to{opacity:0;visibility:hidden}}
@keyframes sk-wave{to{transform:translateX(100%)}}

/* ---------- บล็อกพื้นฐาน + แสงวิ่ง ---------- */
.sk{display:block;position:relative;overflow:hidden;flex:none;width:100%;height:13px;border-radius:8px;background:var(--sk-base)}
.sk::after{content:"";position:absolute;inset:0;transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--sk-hi),transparent);animation:sk-wave 1.4s ease-in-out infinite}

/* ความสูงข้อความ */
.sk-t{height:13px}.sk-h{height:20px}.sk-xl{height:31px;border-radius:10px}
/* ความกว้าง (% ของกล่องแม่) */
.sk-w30{width:30%}.sk-w35{width:35%}.sk-w40{width:40%}.sk-w50{width:50%}.sk-w55{width:55%}
.sk-w60{width:60%}.sk-w70{width:70%}.sk-w80{width:80%}.sk-w90{width:90%}
/* รูปทรง */
.sk-sq{height:auto;aspect-ratio:1/1}
.sk-r14{border-radius:14px}
.sk-ban{height:auto;aspect-ratio:1640/450}
.sk-slide{height:auto;aspect-ratio:1200/500;margin:0;border-radius:var(--r)}
.sk-sc{height:auto;aspect-ratio:2/1;border-radius:var(--r)}
.sk-hlogo{width:clamp(99px,18vw,180px);height:clamp(99px,18vw,180px);border-radius:24px}
@media(max-width:640px){.sk-hlogo{order:-1;width:65px;height:65px}}
.sk-circle{width:36px;height:36px;border-radius:50%}
.sk-circle.sk-sm{width:34px;height:34px}.sk-circle.sk-md{width:50px;height:50px}
.sk-btn{width:99px;height:34px;border-radius:var(--r)}
.sk-btn.sk-sm{width:86px;height:31px}.sk-btn.sk-lg{width:126px;height:40px;border-radius:12px}
.sk-pill{width:76px;height:23px;border-radius:99px}.sk-pill.sk-lg{width:94px;height:34px}
.sk-full{width:100%}                         /* ต้องอยู่หลัง .sk-btn/.sk-lg เพื่อทับความกว้าง */
.sk-logo{width:108px;height:31px;border-radius:var(--r)}
.sk-link{width:83px;height:31px;border-radius:var(--r)}
.sk-tab{height:40px;border-radius:12px}
.sk-menu{display:none;width:36px;height:36px;border-radius:var(--r)}
.sk-notice{width:101px;height:40px;border-radius:12px}
.sk-ritem{width:225px;height:56px;margin-right:11px;border-radius:var(--r)}
.sk-chart{height:198px;border-radius:12px}
.sk-line{height:34px;border-radius:10px}

/* ---------- โครงจัดวาง ---------- */
.sk-stack{display:grid;gap:7px;min-width:0}.sk-gap{gap:13px}.sk-grow{flex:1}
.sk-box{display:grid;gap:11px;padding:14px}
.sk-crumbs{width:min(234px,70%);margin:2px 0 13px}
/* แถวปุ่ม (กล่อง flex) */
.sk-row{display:flex;flex-wrap:wrap;gap:11px}
.sk-item{display:flex;align-items:center;gap:13px;padding:11px;margin-top:9px}
.sk-grid4{display:grid;gap:13px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr))}
.sk-main{padding-top:16px;padding-bottom:36px}

/* แถบเมนูบน (หน้าร้าน) — ตรงกับ .nav สูง 62px */
.sk-nav{height:56px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 72%,transparent)}
.sk-nav-in{display:flex;align-items:center;gap:16px;height:100%}
.sk-links{display:flex;gap:4px;flex:1}
.sk-nav-r{display:flex;align-items:center;gap:9px;margin-left:auto}

/* แถบเมนูล่างบนมือถือ — ตรงกับ .links ที่ ≤760px */
.sk-dock{display:none;position:absolute;left:9px;right:9px;bottom:calc(9px + env(safe-area-inset-bottom,0px));
  grid-template-columns:repeat(5,1fr);gap:5px;padding:5px;border:1px solid var(--line);border-radius:16px;
  background:color-mix(in srgb,var(--bg) 78%,transparent);box-shadow:0 12px 36px rgba(0,0,0,.55)}
@media(max-width:760px){.sk-links{display:none}.sk-dock{display:grid}}

/* หลังบ้าน — topbar 64px + แถบเมนูบน (ตรงกับ .abar / .anav) */
.sk-abar{height:58px;border-bottom:1px solid var(--line);background:color-mix(in srgb,var(--bg) 72%,transparent)}
.sk-abar-in{display:flex;align-items:center;gap:11px;max-width:1296px;height:100%;margin:0 auto;padding:0 14px}
.sk-adm{display:grid;grid-template-columns:minmax(0,1fr);gap:14px;align-items:start;max-width:1296px;margin:0 auto;padding:16px 14px}
.sk-side{display:flex;gap:7px;padding:7px 9px;overflow:hidden}

/* ผู้ใช้ปิดแอนิเมชันในระบบ → ไม่วิ่งแสง/ไม่เฟด แต่ยังค้างครบเวลาเดิม */
@media(prefers-reduced-motion:reduce){.sk::after{animation:none;display:none}.sk-screen{animation-duration:.01s}}
@media print{.sk-screen{display:none}}