/* ==========================================================================
   หน้าแรก Template มาตรฐาน (ส้มทอง, data-theme="default") — ออกแบบใหม่ 1 พ.ย. 2569 (เจ้าของ)
   กระชับ · ช่องห่างระหว่างการ์ดน้อยลง · การ์ดหวยแถวเดียวพร้อมนับถอยหลัง (เปิดอยู่ = ถึงปิดรับ, ปิดอยู่ = ถึงเปิดรับ)
   โหลดเฉพาะธีม default จาก index.blade.php และทุก selector ขึ้นต้น html[data-theme="default"] (ShopTemplateTest ตรวจ)
   ========================================================================== */

/* ---------- การ์ดสมาชิก (ทักทาย + กระเป๋า + ระดับ) ---------- */
html[data-theme="default"] #greetingSection { width: calc(100% - 24px); margin: 10px auto 0; border-radius: 18px; border: 1px solid rgba(240, 210, 160, .9); box-shadow: 0 10px 26px -18px rgba(120, 70, 0, .55); }
html[data-theme="default"] #greetingSection .greeting { padding: 10px 14px; }
html[data-theme="default"] #greetingSection .greeting .avatar { width: 42px; height: 42px; }
html[data-theme="default"] #greetingSection .greeting .hello { font-size: 13px; }
html[data-theme="default"] #greetingSection .greeting .name { font-size: 18px; }
html[data-theme="default"] #homeWallets.wallet-summary { padding: 8px 10px 0; gap: 6px; }
html[data-theme="default"] #homeWallets .home-wallet { padding: 9px 12px; border-radius: 12px; background: #fff8ea; border: 1px solid #f3e1bd; }
html[data-theme="default"] #homeWallets .home-wallet > span { font-size: 14px; font-weight: 700; color: #7d6a4b; }
html[data-theme="default"] #homeWallets .home-wallet strong { font-size: 22px; color: #5a3a10; }
html[data-theme="default"] #homeWallets .home-wallet small { font-size: 13px; color: #8a7354; }
html[data-theme="default"] #homeWallets .home-recent-win { padding: 7px 10px; font-size: 13px; }
html[data-theme="default"] #homeTier { margin: 8px 10px 10px; padding: 8px 11px; border-radius: 12px; }
html[data-theme="default"] #homeTier .ht-head { font-size: 14px; }
html[data-theme="default"] #homeTier .ht-next { font-size: 13px; }
html[data-theme="default"] #homeTier .ht-bar { height: 8px; margin-top: 5px; }
html[data-theme="default"] #homeTier .ht-sub { margin-top: 4px; font-size: 13px; }
html[data-theme="default"] #homeTier .ht-status { margin-top: 5px; padding: 5px 8px; font-size: 13px; }
html[data-theme="default"] #homeGame { margin: 0 10px 10px; }

/* ---------- ปุ่มลัด 4 ปุ่ม (ราคาจ่าย/อั้น ย้ายออกจากเมนูล่างมาไว้ที่นี่) ---------- */
html[data-theme="default"] .home-shortcuts { display: grid; grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 8px; padding: 10px 12px 0; }
html[data-theme="default"] .home-shortcut {
    min-height: 64px; padding: 7px 4px; gap: 4px; border-radius: 14px;
    background: rgba(255, 255, 255, .94); border: 1px solid #f0dcb6; box-shadow: 0 6px 16px -12px rgba(120, 70, 0, .6);
}
html[data-theme="default"] .home-shortcut .hs-icon { width: 32px; height: 32px; border-radius: 10px; }
html[data-theme="default"] .home-shortcut .hs-icon ion-icon { font-size: 19px; }
html[data-theme="default"] .home-shortcut strong { font-size: 14px; color: #4a3500; }
html[data-theme="default"] .home-shortcut.deposit { background: linear-gradient(140deg, #ff8a00, #ffb020); border-color: transparent; }
html[data-theme="default"] .home-shortcut.deposit strong { color: #fff; }
html[data-theme="default"] .home-shortcut.deposit .hs-icon { background: rgba(255, 255, 255, .24); }

/* ---------- แถบแต้ม + ปุ่มเล่นเกม ---------- */
html[data-theme="default"] #homeGame.home-game {
    margin: 0 10px 10px; padding: 8px 8px 8px 10px; gap: 10px; border-radius: 14px;
    background: linear-gradient(120deg, #f3e8ff, #fdf4ff); border: 1px solid #e9d5ff; color: #4c1d95; font-size: 14px;
}
html[data-theme="default"] #homeGame .hg-ico { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: #fff; font-size: 18px; box-shadow: 0 2px 6px rgba(109, 40, 217, .15); }
html[data-theme="default"] #homeGame .hg-txt { font-size: 14px; }
html[data-theme="default"] #homeGame .hg-go { padding: 8px 12px; border-radius: 11px; font-size: 14px; }

/* ---------- โซนหวยที่ขาย / ผลรางวัล: หัวโซนเล็กลง ไม่มีกรอบโซน (ใช้พื้นหลังภาพของ template) ---------- */
html[data-theme="default"] .home-zone { padding: 12px 0 4px; margin-top: 0 !important; border: 0 !important; background: none !important; overflow: visible; }
html[data-theme="default"] .home-zone:before { display: none; }
html[data-theme="default"] .home-zone > .section.mt-1 { margin-top: 8px !important; }
html[data-theme="default"] .zone-head { min-height: 46px; padding: 7px 12px; gap: 9px; border-radius: 14px; }
html[data-theme="default"] .zone-head:after { width: 80px; height: 80px; right: -22px; top: -36px; }
html[data-theme="default"] .zone-icon { width: 32px; height: 32px; border-radius: 10px; }
html[data-theme="default"] .zone-icon ion-icon { font-size: 18px; }
html[data-theme="default"] .zone-copy h2 { font-size: 17px; }
html[data-theme="default"] .zone-count { position: relative; z-index: 1; margin-left: auto; padding: 3px 10px; border-radius: 999px; background: rgba(255, 255, 255, .22); color: #fff; font-size: 13px; font-weight: 800; white-space: nowrap; }

/* ---------- การ์ดหวย 2 แถว: ชื่อ + นับถอยหลัง (บน) · วันเวลาปิดรับ + ปุ่มซื้อ (ล่าง) ---------- */
html[data-theme="default"] #saleList { gap: 8px; }
html[data-theme="default"] .sale-card.std {
    display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 11px; row-gap: 4px; align-items: center;
    padding: 9px 10px 9px 13px; border: 1px solid #f0dcb6; border-left: 0; border-radius: 16px; background: rgba(255, 255, 255, .96);
    box-shadow: 0 8px 20px -14px rgba(120, 70, 0, .55); color: inherit; overflow: hidden; position: relative;
}
html[data-theme="default"] .sale-card.std:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: linear-gradient(180deg, #22c55e, #15803d); }
html[data-theme="default"] .sale-card.std.closed { background: rgba(250, 248, 244, .93); }
html[data-theme="default"] .sale-card.std.closed:before { background: #b8b2a6; }
html[data-theme="default"] .sale-card.std .sc-flag { grid-row: 1 / span 2; line-height: 0; }
html[data-theme="default"] .sale-card.std .sc-flag img { width: 42px; height: 42px; border-radius: 12px; object-fit: cover; box-shadow: 0 2px 6px rgba(0, 0, 0, .15); }
html[data-theme="default"] .sale-card.std.closed .sc-flag img { filter: grayscale(.45); opacity: .85; }
html[data-theme="default"] .sale-card.std .sc-top,
html[data-theme="default"] .sale-card.std .sc-bottom { display: flex; align-items: center; gap: 8px; min-width: 0; }
html[data-theme="default"] .sale-card.std .sc-name { flex: 1; min-width: 0; font-size: 17px !important; font-weight: 900; line-height: 1.25; color: #3d2a06; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="default"] .sale-card.std.closed .sc-name { color: #5d5648; }
html[data-theme="default"] .sale-card.std .sc-chip {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px;
    background: #fff1e6; border: 1px solid #fed7aa; color: #c2410c; font-size: 14px; line-height: 1.3;
}
html[data-theme="default"] .sale-card.std .sc-chip ion-icon { font-size: 15px; }
html[data-theme="default"] .sale-card.std .sc-chip.open { background: #ecfdf3; border-color: #bbf7d0; color: #15803d; }
html[data-theme="default"] .sale-card.std .sc-cd { font-variant-numeric: tabular-nums; font-weight: 900; letter-spacing: .2px; }
html[data-theme="default"] .sale-card.std .sc-cd.soon { color: #dc2626; }   /* WebView ที่ไม่รองรับ :has() ยังได้ตัวเลขสีแดง */
html[data-theme="default"] .sale-card.std .sc-chip.close:has(.sc-cd.soon) { background: #fee2e2; border-color: #fecaca; color: #dc2626; }
html[data-theme="default"] .sale-card.std .sc-date { flex: 1; min-width: 0; font-size: 14px; font-weight: 700; color: #6b5a3d; line-height: 1.35; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html[data-theme="default"] .sale-card.std .sc-cta {
    flex-shrink: 0; display: inline-flex; align-items: center; gap: 2px; min-height: 34px; padding: 0 10px 0 13px; border-radius: 11px;
    background: linear-gradient(135deg, #16a34a, #15803d); color: #fff; font-size: 15px; font-weight: 900; box-shadow: 0 6px 14px -8px rgba(21, 128, 61, .9);
}
html[data-theme="default"] .sale-card.std .sc-cta ion-icon { font-size: 16px; }
html[data-theme="default"] .sale-card.std .sc-badge { flex-shrink: 0; padding: 4px 10px; border-radius: 999px; background: #ece8df; color: #5d5648; font-size: 13px; font-weight: 800; }
html[data-theme="default"] .sale-card.std.open:active { transform: scale(.985); }
html[data-theme="default"] .sale-card.std:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* ---------- การ์ดผลรางวัล: กระชับขึ้น ---------- */
html[data-theme="default"] #resultList, html[data-theme="default"] #resultLoading { gap: 8px; }
html[data-theme="default"] .result-card { border-radius: 14px; }
html[data-theme="default"] .result-card .rc-head { min-height: 46px; padding: 8px 12px; }
html[data-theme="default"] .rc-grid { gap: 6px; padding: 7px; }
html[data-theme="default"] .rc-cell { min-height: 54px; padding: 7px 6px; }
html[data-theme="default"] .rc-cell.span2 { min-height: 58px; }

@media (max-width: 360px) {
    html[data-theme="default"] .sale-card.std { column-gap: 9px; padding-left: 11px; }
    html[data-theme="default"] .sale-card.std .sc-flag img { width: 36px; height: 36px; }
    html[data-theme="default"] .sale-card.std .sc-date { font-size: 13.5px; }
    html[data-theme="default"] .sale-card.std .sc-cta { padding: 0 8px 0 11px; }
}

/* ---------- จอเล็ก ≤ 360px / Android ขยายตัวอักษร (2 พ.ย. 2569): หัวโซนไม่ตก 2 บรรทัด · ปุ่มลัดเห็นคำเต็ม ---------- */
@media (max-width: 360px) {
    html[data-theme="default"] .zone-head { gap: 7px; padding: 6px 10px; }
    html[data-theme="default"] .zone-copy { min-width: 0; }
    html[data-theme="default"] .zone-copy h2 { font-size: 15.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
    html[data-theme="default"] .zone-count { font-size: 12px; padding: 2px 8px; }
    html[data-theme="default"] .home-shortcuts { gap: 6px; padding: 10px 10px 0; }
    html[data-theme="default"] .home-shortcut strong { font-size: 12.5px; letter-spacing: -.2px; white-space: nowrap; }
}

/* ---------- ไม่กลืนกับพื้นหลังภาพทอง (เจ้าของ 2 พ.ย. 2569, เลือกแบบ a "ส้มสดไล่ทอง") — ส้มแดงสด→ทอง + ขอบทอง ---------- */
html[data-theme="default"] #greetingSection { border: 2px solid #ffd76a; box-shadow: 0 14px 28px -12px rgba(200, 80, 0, .6); }
html[data-theme="default"] #greetingSection .greeting-link { background: linear-gradient(120deg, #ff4e1a 0%, #ff7a00 55%, #ffad1f 100%); }
html[data-theme="default"] .home-shortcut { border-color: #f3d9a6; box-shadow: 0 8px 18px -10px rgba(160, 80, 0, .45); }
html[data-theme="default"] .home-shortcut.deposit { background: linear-gradient(140deg, #ff4e1a, #ff8a00); border: 2px solid #ffd76a; box-shadow: 0 10px 22px -10px rgba(255, 78, 26, .8); }
html[data-theme="default"] .home-shortcut.deposit .hs-icon { background: rgba(255, 255, 255, .22); }
html[data-theme="default"] .sale-zone .zone-head { background: linear-gradient(120deg, #ff4e1a 0%, #ff7a00 55%, #ffad1f 100%); border: 2px solid #ffd76a; box-shadow: 0 12px 26px -14px rgba(200, 80, 0, .7); }
html[data-theme="default"] .sale-zone .zone-count { background: rgba(120, 30, 0, .38); color: #fff; }   /* ชิปเข้ม ตัวขาวอ่านชัด (Codex: contrast) */
html[data-theme="default"] .sale-card.std { border-color: #f0d7a4; box-shadow: 0 10px 22px -12px rgba(160, 90, 0, .45); }