/* =============== Global Comfortable Theme =============== */ :root{ --bg: #f8fafc; --card: #ffffff; --text: #334155; --muted: #64748b; --brand: #1976d2; /* สีหลักเดิม */ --brand-2: #1565c0; /* เฉดเข้ม */ --ring: rgba(25,118,210,.22); --success: #10b981; --danger: #ef4444; --radius: 15px; --soft-shadow: 0 8px 30px rgba(0,0,0,0.05); --strong-shadow: 0 24px 80px rgba(2,6,23,.18); } /* ฟอนต์อ่านสบายตา (ควรมี โหลด Noto Sans Thai ใน ) */ html, body{ font-family: 'Noto Sans Thai', system-ui, -apple-system, Segoe UI, Roboto, 'Helvetica Neue', Arial, sans-serif; font-size: 13.75px; line-height: 1.68; letter-spacing: .2px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ปิดแอนิเมชันเมื่อใช้โหมด no-animation */ body.no-animation { animation: none !important; } body.no-animation * { animation: none !important; transition: none !important; } /* =============== Layout Cards & Containers =============== */ .grid-container{ display: grid; grid-template-columns: 1fr; gap: 16px; background: var(--card); border: 1px solid #eef2f7; border-radius: var(--radius); padding: 18px; box-shadow: var(--soft-shadow); margin-bottom: 16px; animation: fadeIn 0.8s ease; } @media (min-width: 768px){ .grid-container{ grid-template-columns: 1fr 1fr; } } .grid-container .col-span-2{ grid-column: span 1; } @media (min-width: 768px){ .grid-container .col-span-2{ grid-column: span 2; } } /* =============== Headings & Titles =============== */ .section-title{ font-weight: 700; color: #0f172a; text-align: center; margin-bottom: 12px; position: relative; font-size: 1.06rem; animation: slideDown 0.8s ease; letter-spacing: .2px; } .section-title.blink{ animation: blink 1s infinite; } .section-title::after{ content:''; width: 44px; height: 3px; background: var(--brand); position: absolute; bottom: -8px; left: 50%; transform: translateX(-50%); border-radius: 2px; animation: expand 1s ease; } /* =============== Inputs & Lists =============== */ .search-input{ width: 100%; padding: 10px 12px; border: 1px solid #e2e8f0; border-radius: 10px; background: #f9fafb; font-size: .95rem; margin-bottom: 10px; transition: border-color .2s, box-shadow .2s, transform .2s; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); color: var(--text); } .search-input:focus{ outline: none; border-color: var(--brand); background: #fff; box-shadow: 0 0 0 4px var(--ring); transform: translateY(-1px); } .scroll-container{ height: 340px; overflow-y: auto; border: 1px solid #e2e8f0; border-radius: 12px; background: #fff; box-shadow: inset 0 1px 0 #f8fafc; position: relative; transition: box-shadow .2s; } .scroll-container:hover{ box-shadow: 0 6px 20px rgba(0,0,0,0.06); } .scroll-container::-webkit-scrollbar{ width: 8px; } .scroll-container::-webkit-scrollbar-track{ background: #f1f5f9; border-radius: 10px; } .scroll-container::-webkit-scrollbar-thumb{ background: #e5e7eb; border-radius: 10px; } .list-item{ display: flex; justify-content: space-between; align-items: center; padding: 11px 12px; border-bottom: 1px dashed #f1f5f9; cursor: pointer; transition: background .15s, transform .15s, color .15s; animation: slideInLeft 0.5s ease forwards; opacity: 0; background: #fff; } .list-item:nth-child(1){ animation-delay: .05s; } .list-item:nth-child(2){ animation-delay: .10s; } .list-item:nth-child(3){ animation-delay: .15s; } .list-item:nth-child(4){ animation-delay: .20s; } .list-item:nth-child(5){ animation-delay: .25s; } .list-item:hover{ background: #f9fbff; transform: translateY(-1px); } .list-item.selected{ background: #eef6ff; color: var(--brand); box-shadow: 0 2px 10px rgba(0,0,0,0.06); outline: 1px solid #dbeafe; } .list-item img{ width: 28px; height: 28px; border-radius: 8px; margin-right: 10px; object-fit: cover; box-shadow: 0 1px 4px rgba(0,0,0,.06); transition: transform .3s ease; } .list-item:hover img{ transform: rotate(360deg); } .list-item p{ margin: 0; font-size: .95rem; color: #0f172a; font-weight: 600; } .list-item.selected p{ color: var(--brand); } .price-badge{ display: inline-flex; align-items: center; padding: 4px 8px; font-size: .86rem; font-weight: 700; border-radius: 999px; background: var(--brand); color: #fff; box-shadow: 0 2px 5px rgba(0,0,0,0.08); transition: transform .15s; } .price-badge:hover{ transform: scale(1.06); } .list-item.selected .price-badge{ background: var(--brand-2); } /* =============== Marquee / Feed =============== */ .marquee-container{ background: #fff; border-radius: var(--radius); padding: 14px; box-shadow: var(--soft-shadow); margin-bottom: 16px; animation: fadeIn 1s ease; } .marquee-item{ display: inline-flex; flex-direction: column; align-items: flex-start; margin-right: 16px; padding: 8px 12px; border-radius: 10px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,0.05); transition: transform .15s, box-shadow .15s; animation: bounce 2s infinite; } .marquee-item:hover{ transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.08); } .marquee-item i{ margin-right: 10px; font-size: 1.1rem; } .marquee-item i.status-ok{ color: #28a745; } .marquee-item i.status-wait{ color: #f39c12; } .marquee-item i.status-cancel{ color: #dc3545; } .marquee-item .item-header{ display: flex; align-items: center; } .marquee-item span{ font-size: .9rem; color: #0f172a; font-weight: 600; } .marquee-item small{ font-size: .8rem; color: #666; margin-top: 2px; } /* =============== Stats =============== */ .stats-container{ background: #fff; border-radius: var(--radius); padding: 18px; box-shadow: var(--soft-shadow); text-align: center; animation: fadeIn 1.2s ease; } .stats-grid{ display:flex; justify-content:center; gap:24px; flex-wrap:wrap; } .stats-item{ display:flex; flex-direction:column; align-items:center; } .stats-item p{ font-size: .98rem; font-weight: 600; color: var(--brand); margin-bottom: 6px; display:flex; align-items:center; } .stats-item i{ font-size: 1.05rem; margin-right: 8px; } .stats-item .text-success{ color: #28a745; } .stats-item .text-danger{ color: #dc3545; } .stats-item h4{ font-size: 1.6rem; font-weight: 800; color: #0f172a; margin:0; opacity: 0; animation: countUp 2s ease forwards; } /* =============== Header =============== */ .main-header{ background: var(--brand); color: #fff; padding: 18px; border-radius: var(--radius); box-shadow: var(--soft-shadow); margin-bottom: 16px; animation: slideIn 0.8s ease; position: relative; } .main-header h3{ margin: 0; font-size: 1.35rem; font-weight: 800; letter-spacing: .2px; animation: zoomIn 1s ease; } .main-header p{ margin: 6px 0 0; font-size: .95rem; opacity: 0; animation: fadeIn 1s ease .5s forwards; } .animation-toggle{ position: absolute; top: 16px; right: 16px; background: #fff; border: 1px solid #e2e8f0; padding: 6px 8px; border-radius: 10px; box-shadow: 0 2px 5px rgba(0,0,0,0.06); cursor: pointer; transition: transform .2s; } .animation-toggle:hover{ transform: rotate(360deg); } .animation-toggle i{ font-size: 1.05rem; color: var(--brand); } /* =============== Modal (Bottom Sheet) =============== */ /* ฉากหลังโปร่งเบลอ */ .buy-backdrop{ position: fixed; inset: 0; background: rgba(2,6,23,.38); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); opacity: 0; transition: opacity .25s ease; z-index: 9998; } .buy-backdrop.show{ opacity: 1; } /* เดสก์ท็อป: กลางล่าง กว้างสุด 520px */ .buy-sheet{ position: fixed; left: 50%; bottom: 0; transform: translate(-50%, 105%); width: min(520px, 94vw); background: linear-gradient(180deg, #ffffff, #fffaf3); border: 1px solid #f2e8da; border-bottom: none; border-radius: 16px 16px 10px 10px; box-shadow: var(--strong-shadow); transition: transform .28s ease; z-index: 9999; } .buy-sheet.show{ transform: translate(-50%, 0); } /* มือถือ: เต็มจอชิดล่าง */ @media (max-width: 767px){ .buy-sheet{ left: 0; right: 0; width: 100vw; transform: translateY(105%); border-radius: 16px 16px 0 0; } .buy-sheet.show{ transform: translateY(0); } .sheet-body{ padding-bottom: calc(env(safe-area-inset-bottom, 0) + 16px); } } /* ภายใน Bottom Sheet */ .sheet-body{ padding: 14px 14px 16px; } .sheet-header{ position: relative; padding-top: 10px; padding-bottom: 6px; } .sheet-handle{ position:absolute; left:50%; transform:translateX(-50%); top:4px; width:64px; height:4px; background:#f3d7bd; border-radius:999px; } .sheet-title{ font-size: 1rem; font-weight: 800; color: #0f172a; } .sheet-row{ display:flex; justify-content:space-between; align-items:center; padding:7px 0; } .sheet-row .label{ color: var(--muted); font-weight: 600; } .sheet-row .value{ font-weight: 800; display:flex; align-items:center; gap:8px; color:#0f172a; } .icon-img{ width:20px; height:20px; border-radius:6px; object-fit:cover; box-shadow:0 1px 3px rgba(2,6,23,.06); } .sheet-sep{ border:none; border-top:1px solid #f1f5f9; margin:6px 0 6px; } .total{ font-size: 1.02rem; } .sheet-details{ margin-top: 8px; border-top: 1px dashed #f5e3cc; padding-top: 8px; } .sheet-details summary{ cursor:pointer; color:#8b5e00; background:#fff; border:1px dashed #f5e3cc; padding:8px 10px; border-radius:12px; font-weight:700; list-style:none; } .sheet-details summary::-webkit-details-marker{ display:none; } .details-body{ color:#475569; margin-top:8px; font-size:.95rem; white-space:pre-wrap; } .confirm-row{ display:flex; align-items:center; gap:8px; margin-top:10px; font-weight: 700; color:#0f172a; } .confirm-row input{ width: 16px; height: 16px; accent-color: var(--brand); } .sheet-actions{ display:flex; gap:8px; margin-top:12px; } .btn-primary{ flex:1; background: linear-gradient(90deg, var(--brand), var(--brand-2)); border: none; color: #fff; border-radius: 11px; padding: 10px 16px; font-weight: 800; cursor: pointer; box-shadow: 0 6px 16px rgba(25,118,210,.18); } .btn-muted{ background:#f1f5f9; color:#0f172a; border:1px solid #e5e7eb; border-radius: 11px; padding: 10px 16px; cursor: pointer; font-weight: 700; } .btn-primary:disabled{ opacity:.5; cursor:not-allowed; } /* ข้อความ “เงินไม่พอ” */ .shortfall-msg{ margin-top: 6px; color: var(--danger); font-weight: 800; text-align: right; } /* =============== Dots / Misc =============== */ .dot{ height: 10px; width: 10px; background-color: #bbb; border-radius: 50%; display: inline-block; margin: 0 2px; transition: background .3s; } .dot.active{ background-color: var(--brand); animation: dotPulse .5s ease; } .fade{ animation: fade 1.5s; } /* =============== Buttons (ทั่วไป) =============== */ .btn-info{ background: var(--brand-2); color: #fff; border: none; padding: 6px 15px; border-radius: 20px; font-weight: 600; transition: transform .2s, filter .2s; } .btn-info:hover{ filter: brightness(1.05); transform: translateY(-1px); } /* =============== Responsive Tweaks =============== */ @media (max-width: 767px){ .container{ padding: 10px; } .main-header h3{ font-size: 1.18rem; } .main-header p{ font-size: .9rem; } .section-title{ font-size: 1rem; } .section-title::after{ width: 40px; } .list-item{ padding: 10px 12px; } .list-item img{ width: 26px; height: 26px; } .list-item p{ font-size: .92rem; } .price-badge{ font-size: .8rem; padding: 4px 8px; } .scroll-container{ height: 300px; } .marquee-item{ padding: 6px 10px; } .marquee-item i{ font-size: 1rem; } .marquee-item span{ font-size: .84rem; } .marquee-item small{ font-size: .74rem; } .stats-item p{ font-size: .9rem; } .stats-item h4{ font-size: 1.45rem; } } /* =============== Animations =============== */ @keyframes fadeIn{ from{opacity:0; transform: translateY(20px);} to{opacity:1; transform: translateY(0);} } @keyframes slideIn{ from{opacity:0; transform: translateX(-20px);} to{opacity:1; transform: translateX(0);} } @keyframes slideInLeft{ from{opacity:0; transform: translateX(-20px);} to{opacity:1; transform: translateX(0);} } @keyframes slideDown{ from{opacity:0; transform: translateY(-20px);} to{opacity:1; transform: translateY(0);} } @keyframes bounce{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-5px);} } @keyframes spin{ from{ transform: rotate(0deg);} to{ transform: rotate(360deg);} } @keyframes dotPulse{ 0%{ transform: scale(1);} 50%{ transform: scale(1.2);} 100%{ transform: scale(1);} } @keyframes zoomIn{ from{opacity:0; transform: scale(0.8);} to{opacity:1; transform: scale(1);} } @keyframes expand{ from{width:0;} to{width:44px;} } @keyframes countUp{ from{opacity:0; transform: translateY(10px);} to{opacity:1; transform: translateY(0);} } @keyframes blink{ 0%,100%{opacity:1;} 50%{opacity:.5;} }