/* =========================================================
   📌 หมวดที่ 1: GLOBAL VARIABLES & BASE STYLES
   ========================================================= */
:root {
    --widget-width: clamp(320px, 32vw, 355px);
}

html, body {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* =========================================================
   📌 หมวดที่ 2: MAP & Z-INDEX LAYERS
   ========================================================= */
#map {
    position: fixed;
    inset: 0;
    height: 100dvh;
    width: 100vw;
    z-index: 0;
}

.timeline-modal { z-index: 3000; }
#journal { z-index: 3500; }
.image-preview-modal { z-index: 10000; }
.confirm-modal { z-index: 99999 !important; }

/* =========================================================
   📌 หมวดที่ 3: TOP NAVIGATION (SEARCH & EXPORT)
   ========================================================= */
.search-container {
    position: fixed;
    top: 14px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 45px;
    z-index: 2000;
}

.search-box {
    position: relative;
    width: 352px;
}

.search-box input {
    width: 100%;
    padding: 12px 16px;
    border-radius: 999px;
    border: none;
    font-size: 15px;
    outline: none;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.18);
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
}

.search-list {
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    width: calc(100% + 27px);
    max-height: 300px;
    overflow-y: auto;
    background: white;
    border-radius: 12px;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
    z-index: 3000;
    padding-right: 6px;
}

.search-list::-webkit-scrollbar { width: 10px; }
.search-list::-webkit-scrollbar-track { background: transparent; }
.search-list::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.25); border-radius: 999px; }
.search-list::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }

.search-item { padding: 12px 16px; cursor: pointer; font-size: 15px; }
.search-item:first-child { border-radius: 12px 12px 0 0; }
.search-item:last-child { border-radius: 0 0 12px 12px; }
.search-item:hover { background: #f0f0f0; }
.search-item.active { background: #2563eb; color: white; }

.export-btn {
    position: relative;
    white-space: nowrap;
    height: 44px;
    padding: 0 18px;
    border: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #3b82f6, #2563eb);
    color: white;
    font-size: 14px;
    font-weight: 600;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: background 0.15s ease;
}

.export-btn:hover { background: linear-gradient(135deg, #2563eb, #1d4ed8); }

/* =========================================================
   📌 หมวดที่ 4: MAP TOOLTIPS & POPUPS
   ========================================================= */
.province-tooltip {
    background: rgba(0, 0, 0, 0.75);
    color: #fff;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 13px;
}

.province-hover-tooltip { background: transparent; border: none; box-shadow: none; }

.hover-card {
    background: white;
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15), 0 3px 8px rgba(0, 0, 0, 0.08);
    min-width: 160px;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
}

.hover-title { font-weight: 700; font-size: 14px; margin-bottom: 6px; }
.hover-row { font-size: 13px; color: #444; margin-top: 2px; }

.leaflet-popup-content-wrapper { padding: 0 !important; border-radius: 22px; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; }
.leaflet-popup-content { margin: 0 !important; width: 300px !important; max-width: 300px; box-sizing: border-box; }
.leaflet-container, .leaflet-popup, .leaflet-popup-content-wrapper, .leaflet-popup-content { -webkit-user-select: auto !important; user-select: auto !important; }
.leaflet-popup-content-wrapper, .leaflet-popup-content { pointer-events: auto !important; }

/* =========================================================
   📌 หมวดที่ 5: FORM ELEMENTS & CARDS
   ========================================================= */
.card { padding: 16px; display: flex; flex-direction: column; gap: 12px; box-sizing: border-box; width: 100%; }
.title { font-size: 16px; font-weight: 700; }

.box { background: #f5f7f8; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.box .row { display: grid; grid-template-columns: 1fr auto; align-items: center; padding: 8px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.03); }
.box .row span { font-size: 14px; font-weight: 500; color: #0f172a; }

.toggle { width: 42px; height: 22px; position: relative; }
.toggle input { display: none; }
.slider { position: absolute; inset: 0; border-radius: 22px; background: #ccc; transition: 0.25s; }
.slider::before { content: ""; position: absolute; width: 18px; height: 18px; left: 2px; top: 2px; background: #fff; border-radius: 50%; transition: 0.25s; }
.visited input:checked+.slider { background: #4caf50; }
.want input:checked+.slider { background: #ff9800; }
.toggle input:checked+.slider::before { transform: translateX(20px); }

/* =========================================================
   📌 หมวดที่ 6: NOTE BOX & UPLOADER
   ========================================================= */
.note-box { background: #fff; border-radius: 16px; padding: 12px; display: flex; flex-direction: column; gap: 8px; box-shadow: inset 0 0 0 1.5px #e5e7eb; }
.note-box.disabled { opacity: 0.4; }
.note-box.disabled textarea { pointer-events: none; }
.note-date { width: 100%; box-sizing: border-box; padding: 8px 10px; border-radius: 10px; border: 1.5px solid #e5e7eb; font-size: 14px; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; background: #fafafa; transition: all 0.2s ease; pointer-events: auto !important; position: relative; z-index: 999; }
.note-box textarea { 
    width: 100%; 
    box-sizing: border-box; 
    height: 130px;       /* 🌟 ปรับให้สูงขึ้นแต่แรก (จากเดิม 100px) */
    min-height: 130px;   /* 🌟 บังคับไม่ให้หดสั้นกว่านี้ */
    max-height: 300px;   /* 🌟 ยืดได้สูงสุด 300px ถ้าเนื้อหาเยอะ */
    padding: 10px 12px; 
    border-radius: 12px; 
    border: 1.5px solid #e5e7eb; 
    font-size: 14px;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important; 
    resize: vertical; 
    background: #fafafa; 
    transition: all 0.2s ease; 
    -webkit-user-select: text !important; 
    user-select: text !important; 
    touch-action: pan-y !important; 
    cursor: text !important; 
    pointer-events: auto !important; 
    position: relative !important; 
    z-index: 9999 !important; 
}

/* 🌙 DARK MODE: ปรับแต่ง Scrollbar ของช่องบันทึก (Textarea) */
body.dark-mode .note-box textarea::-webkit-scrollbar { width: 8px; }
body.dark-mode .note-box textarea::-webkit-scrollbar-track { background: transparent; }
body.dark-mode .note-box textarea::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); border-radius: 999px; }
body.dark-mode .note-box textarea::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35); }

.note-date:focus, .note-box textarea:focus { 
    outline: none; 
    border-color: #4caf50; 
    background: #fff; 
    box-shadow: 0 0 0 3px rgba(76, 175, 80, 0.12); 
}
.note-error { border-color: #ef4444 !important; box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15); }
.note-error-msg { font-size: 12px; color: #ef4444; opacity: 0; transform: translateY(-4px); transition: 0.2s; }
.note-error-msg.show { opacity: 1; transform: translateY(0); }

.upload-box { display: flex; flex-direction: column; gap: 6px; }
.note-image { display: none; }
.upload-label { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 12px; border-radius: 12px; border: 1.5px dashed #cbd5e1; background: #f8fafc; font-size: 14px; font-weight: 500; cursor: pointer; transition: all 0.2s; }
.upload-label:hover { border-color: #4caf50; background: #f0fdf4; color: #166534; }
.upload-counter { font-size: 13px; color: #64748b; margin-top: 4px; }
.upload-preview { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; width: 100%; box-sizing: border-box; }
.preview-wrapper { position: relative; width: calc((100% - 20px) / 3); overflow: visible; }
.preview-thumb { width: 100%; height: 86px; object-fit: cover; border-radius: 12px; border: 1px solid #ddd; }
.preview-thumb:hover { transform: scale(1.05); }
.preview-remove { position: absolute; top: -8px; right: -8px; width: 26px; height: 26px; border-radius: 50%; border: 2px solid #fff; background: #ff4d4f; color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; z-index: 10; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); transition: 0.15s; }
.preview-remove:hover { background: #d9363e; transform: scale(1.08); }

.upload-progress { margin-top: 12px !important; display: flex !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; }
.upload-progress .progress-bar { flex: 1 1 auto !important; height: 8px !important; background: #e5e7eb !important; border-radius: 999px !important; overflow: hidden !important; margin: 0 !important; }
.upload-progress .progress-fill { height: 100% !important; background: linear-gradient(90deg, #4caf50, #81c784) !important; transition: width 0.2s ease !important; border-radius: 999px !important; }
.upload-progress .progress-text { flex: 0 0 40px !important; font-size: 13px !important; font-weight: 600 !important; color: #475569 !important; text-align: right !important; margin: 0 0 0 12px !important; }

.save-box { background: transparent; padding: 0; }
/* .save { width: 100%; padding: 12px; border: none; border-radius: 16px; background: #4caf50; color: #fff; font-size: 16px; cursor: pointer; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; } */

.save { 
    width: 100%; 
    height: 40px; /* 🌟 เติมบรรทัดนี้ เพื่อล็อคความสูง (ปรับตัวเลขได้ตามชอบ เช่น 40px, 50px) */
    padding: 0; /* 🌟 แนะนำให้แก้ padding เป็น 0 ถ้าระบุความสูงไปแล้ว ข้อความจะได้อยู่ตรงกลางพอดี */
    border: none; 
    border-radius: 16px; 
    background: #4caf50; 
    color: #fff; 
    font-size: 16px; 
    font-weight: 500; /* 🌟 เติมความหนาให้ตัวอักษรนิดนึง ปุ่มจะดูสวยขึ้นครับ */
    cursor: pointer; 
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important; 
}

/* =========================================================
   📌 หมวดที่ 7: LEFT WIDGETS (STATS)
   ========================================================= */
#leftWidgets {
    position: fixed;
    left: 16px;
    bottom: 16px;
    width: var(--widget-width);
    display: flex;
    flex-direction: column;
    gap: 14px;
    box-sizing: border-box;
    max-height: calc(100dvh - 85px);
    overflow-y: auto;
    pointer-events: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

#leftWidgets::-webkit-scrollbar { display: none; }
#leftWidgets>div { width: 100%; box-sizing: border-box; padding: 18px; border-radius: 16px; background: rgba(255, 255, 255, 0.96); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.15); }

.top-provinces-title, .top-places-title, .stats-title { font-size: 15px; font-weight: 700; color: #0f172a; margin-bottom: 8px; display: flex; align-items: center; gap: 6px; }
.stats-row, .top-province-row, .top-place-row, .region-row { display: flex; justify-content: space-between; align-items: center; width: 100%; box-sizing: border-box; padding: 6px 10px; border-radius: 8px; font-size: 14px; font-weight: 500; transition: 0.15s; margin: 0; line-height: 1.2; }
.stats-row:hover, .top-province-row:hover, .top-place-row:hover, .region-row:hover { background: rgba(0, 0, 0, 0.05); }

.top-province-name, .top-place-row span:first-child, .stats-row span:first-child { color: #111827; max-width: 70%; white-space: nowrap; text-overflow: ellipsis; }
.top-province-count, .top-place-row span:last-child { color: #16a34a; font-weight: 600; font-size: 14px; }
.stats-row span:last-child, .region-row span:last-child { color: #0f172a; font-weight: 600; }

.travel-level { margin-top: 12px; background: linear-gradient(135deg, #4CAF50, #43A047) !important; color: #fff !important; height: 36px; border-radius: 12px; font-weight: 600; font-size: 14px; display: flex; align-items: center; justify-content: center; gap: 6px; }
.timeline-btn { margin-top: 10px; width: 100%; border: none; border-radius: 12px; height: 36px; display: flex; align-items: center; justify-content: center; font-weight: 600; cursor: pointer; background: #2563eb; color: white; transition: 0.2s; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; font-size: 14px; }
.timeline-btn:hover { background: #1d4ed8; }

#heatLegend { position: fixed; right: 16px; bottom: 16px; background: rgba(255, 255, 255, 0.96); padding: 14px 16px; border-radius: 14px; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.18); font-size: 13px; z-index: 1000; }
.legend-title { font-weight: 700; margin-bottom: 8px; }
.legend-row { display: flex; align-items: center; gap: 8px; margin: 4px 0; }
.legend-row .box { width: 16px; height: 16px; border-radius: 4px; }

#travelStats .progress-bar { width: 100%; height: 10px; background: #e2e8f0; border-radius: 999px; overflow: hidden; margin: 10px 0 16px 0; }
#travelStats .progress-fill { height: 100%; background: linear-gradient(90deg, #4caf50, #22c55e); border-radius: 999px; transition: width 0.5s ease-out; }
#travelStats .stats-title { margin-bottom: 2px !important; }

/* =========================================================
   📌 หมวดที่ 8: TIMELINE MODAL (TRAVEL STORY)
   ========================================================= */
.timeline-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.35); display: none; justify-content: center; align-items: center; padding: 20px; }
.timeline-modal.show { display: flex; }
.timeline-container { width: 680px; height: 835px; display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; }
.timeline-header { padding: 18px 16px; border-bottom: 1px solid #eee; display: flex; align-items: center; gap: 10px; }
.timeline-title { font-size: 18px; font-weight: 700; }
.timeline-spacer { flex: 1; }
#timelineSummary { font-size: 14px; padding: 8px 14px; border-bottom: 1px solid #eee; }
#timelineContent { padding: 14px 20px; overflow-y: auto; flex: 1; }

#timelineYearFilter, #timelineSortOrder {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px;
    padding-right: 32px !important;
    padding-left: 12px;
    border-radius: 8px;
    border: 1px solid #cbd5e1;
    background-color: #f8fafc;
    color: #1e293b;
    font-size: 14px;
    height: 40px !important;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
    font-weight: 500;
    box-sizing: border-box;
}

.timeline-search-inline {
    width: 200px !important;
    padding: 6px 12px !important;
    border-radius: 8px;
    border: 1px solid #d1d5db;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
    font-size: 14px;
}

.timeline-search-inline:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15); }
.timeline-row { 
    display: grid; 
    grid-template-columns: 110px 1fr; 
    column-gap: 16px; 
    padding: 14px 16px;  /* 🌟 เพิ่มพื้นที่ซ้าย-ขวาให้กล่อง */
    margin: 0 -16px;     /* 🌟 ดึงขอบออกเพื่อให้ตัวหนังสือยังตรงกับแนวเดิม */
    border-radius: 16px; /* 🌟 ปรับมุมให้โค้งมน */
    border-bottom: none; 
    cursor: pointer; 
    transition: all 0.2s ease; /* 🌟 เพิ่มเอฟเฟกต์ให้สมูทตอนเอาเมาส์ชี้ */
}
.timeline-row:hover { background: #f8fafc; }
.timeline-date { font-size: 15px; font-weight: 600; color: #16a34a; }
.timeline-main { display: flex; flex-direction: column; gap: 8px; }
.timeline-province { font-size: 15px; font-weight: 600; }
.timeline-places { display: flex; flex-wrap: wrap; gap: 8px; }
.timeline-chip { background: #eaf2ff; color: #2f5fd0; padding: 4px 10px; border-radius: 999px; font-size: 14px; }
.timeline-chip.more { background: #cbd5e1; font-weight: 600; }

.timeline-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 16px 0; flex-shrink: 0; }
.timeline-pagination button { border: none; padding: 8px 14px; border-radius: 10px; background: #2563eb; color: white; font-weight: 600; cursor: pointer; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; transition: 0.2s; }
.timeline-pagination button:hover { background: #1d4ed8; }
.timeline-pagination button:disabled { background: #cbd5e1; cursor: not-allowed; }
#timelinePageInfo { font-size: 14px; font-weight: 600; color: #334155; }

/* =========================================================
   📌 หมวดที่ 9: JOURNAL (Saved Logs)
   ========================================================= */
#journal { box-sizing: border-box; position: fixed; bottom: 16px; right: 16px; width: var(--widget-width); max-height: calc(100dvh - 100px); display: none; background: rgba(255, 255, 255, 0.96); border-radius: 28px; padding: 18px 18px 12px 18px; flex-direction: column; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
#journal::-webkit-scrollbar { width: 8px; }
#journal::-webkit-scrollbar-track { background: transparent; }
#journal::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }
#journal::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }

.journal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.journal-title { font-size: 16px; font-weight: 700; margin-bottom: 0 !important; }
#journalList { width: 100%; max-height: calc(100vh - 200px); overflow-y: auto; padding-right: 12px; margin-right: -6px; padding: 10px 12px 0 0; scrollbar-gutter: stable; }
#journalList::-webkit-scrollbar { display: none; }

.journal-card { margin-bottom: 10px; background: #f8fafc; border-radius: 18px; padding: 18px 18px 16px 18px; border-left: 5px solid #4caf50; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08), 0 2px 6px rgba(0, 0, 0, 0.05); display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; transition: 0.2s; }
.journal-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12); }
.journal-date { font-size: 15px; color: #16a34a; font-weight: 600; margin: 0; line-height: 1.3; }
.journal-text { font-size: 14px; line-height: 1.45; color: #020617; white-space: pre-wrap; word-break: break-word; margin: 0; }
.journal-images { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 6px; }
.journal-images img { width: 86px; height: 86px; object-fit: cover; border-radius: 10px; cursor: pointer; transition: 0.15s; }

.delete-log { margin-top: 4px; align-self: flex-start; display: inline-flex; align-items: center; justify-content: center; border: none; padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; cursor: pointer; color: #ef4444; background: rgba(239, 68, 68, 0.08); transition: 0.18s; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; }
.delete-log:hover { background: #dc2626; color: white; transform: translateY(-1px); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.25); }

/* =========================================================
   📌 หมวดที่ 10: ALERTS, INDICATORS & OTHER MODALS
   ========================================================= */
.image-preview-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.85); display: none; justify-content: center; align-items: center; }
.image-preview-modal.show { display: flex; }
.image-preview-content { position: relative; max-width: 90%; max-height: 90%; }
.image-preview-content img { transition: opacity 0.2s; transform: translateZ(0); object-fit: contain; max-width: 90vw; max-height: 85vh; border-radius: 16px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5); }
.image-nav { position: absolute; top: 50%; transform: translateY(-50%); font-size: 48px; color: white; cursor: pointer; padding: 10px; user-select: none; }
.image-nav.left { left: -60px; }
.image-nav.right { right: -60px; }

.toast { position: fixed; right: 24px; top: 20px; z-index: 5000; display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-radius: 18px; background: #fff; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.18); opacity: 0; transform: translateY(-16px) scale(0.96); pointer-events: none; transition: 0.25s ease; }
.toast.show { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.toast-icon { width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #4caf50, #81c784); color: #fff; font-size: 18px; font-weight: 700; box-shadow: 0 6px 16px rgba(76, 175, 80, 0.35); }
#deleteAlert .toast-icon { background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 6px 16px rgba(239, 68, 68, 0.35); }
.toast-text { display: flex; flex-direction: column; }
.toast-title { font-size: 14px; font-weight: 700; color: #0f172a; }
.toast-desc { font-size: 13px; color: #475569; margin-top: 2px; }

.confirm-modal { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: 0.25s; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; font-size: 16px; }
.confirm-modal.show { opacity: 1; pointer-events: auto; }
.confirm-card { background: white; padding: 24px; border-radius: 16px; width: 320px; text-align: center; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); animation: scaleIn 0.2s ease; }
@keyframes scaleIn { from { transform: scale(0.9); opacity: 0 } to { transform: scale(1); opacity: 1 } }
.confirm-icon { font-size: 40px; margin-bottom: 8px; }
.confirm-desc { color: #666; margin: 8px 0 18px; }
.confirm-actions { display: flex; gap: 10px; }
.confirm-actions button { flex: 1; padding: 10px; border-radius: 10px; border: none; cursor: pointer; font-weight: 600; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; font-size: 17px; }
.btn-cancel { background: #eee; }
.btn-ok { background: #e53935; color: white; }

.badge-unlock { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; pointer-events: none; opacity: 0; transition: 0.25s; }
.badge-unlock.show { opacity: 1; }
.badge-unlock-card { background: linear-gradient(135deg, #ffd54f, #ffb300); color: #111; padding: 26px 40px; border-radius: 24px; font-size: 22px; font-weight: 700; box-shadow: 0 25px 70px rgba(0, 0, 0, 0.4); transform: scale(0.7); opacity: 0; transition: 0.35s cubic-bezier(0.2, 0.8, 0.2, 1); }
.badge-unlock.show .badge-unlock-card { transform: scale(1) translateY(0); opacity: 1; }

.network-indicator { position: fixed; top: 65px; left: 50%; transform: translateX(-50%) translateY(-15px); display: flex; align-items: center; justify-content: center; gap: 6px; padding: 6px 16px; border-radius: 30px; font-size: 13px; font-weight: 600; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15); opacity: 0; pointer-events: none; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2500; }
.network-indicator.show { transform: translateX(-50%) translateY(0); opacity: 1; }
.network-indicator.offline { background: #fef2f2; color: #ef4444; border: 1px solid #fecaca; }
.network-indicator.syncing { background: #eff6ff; color: #3b82f6; border: 1px solid #bfdbfe; }
.network-indicator.online { background: #f0fdf4; color: #22c55e; border: 1px solid #bbf7d0; }
.hide-icon { display: none !important; }
.spin-icon { display: inline-block; animation: spin-indicator 1s linear infinite; }
@keyframes spin-indicator { 100% { transform: rotate(360deg); } }

/* =========================================================
   📌 หมวดที่ 11: MAP BUTTONS & LAYER SELECTOR
   ========================================================= */
.custom-map-controls { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); background: rgba(255, 255, 255, 0.96); color: #0f172a; border-radius: 999px; padding: 6px; display: flex; align-items: center; gap: 6px; border: 1px solid rgba(0, 0, 0, 0.05); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); z-index: 2000; pointer-events: auto; }
.custom-map-controls button { background: transparent; color: #334155; border: none; border-radius: 999px; padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer; transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1); font-family: 'Noto Sans Thai', sans-serif; display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.custom-map-controls .custom-gps-btn, .custom-map-controls .custom-theme-btn { width: 38px !important; height: 38px !important; padding: 0 !important; justify-content: center !important; flex: 0 0 38px !important; font-size: 18px !important; }
.custom-map-controls button:hover { background: rgba(0, 0, 0, 0.05); }
.custom-map-controls .layer-btn.active { background: #3b82f6; color: white; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.2); }
.custom-gps-btn.loading { animation: pulse-gps-controls 1s infinite; pointer-events: none; }
@keyframes pulse-gps-controls { 0% { transform: scale(1); background-color: rgba(0, 0, 0, 0.05); } 50% { transform: scale(0.85); background-color: #e0f2fe; } 100% { transform: scale(1); background-color: rgba(0, 0, 0, 0.05); } }

.layer-selector-wrapper { position: relative; display: flex; }
.layer-toggle-btn.active { background: rgba(0, 0, 0, 0.05); }
.layer-popup-menu { position: absolute; bottom: calc(100% + 14px); left: 50%; transform: translateX(-50%) translateY(15px); background: rgba(255, 255, 255, 0.98); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 15px 35px rgba(0, 0, 0, 0.15); border-radius: 16px; padding: 8px; display: flex; flex-direction: column; gap: 4px; opacity: 0; pointer-events: none; transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1); z-index: 2001; }
.layer-popup-menu.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.layer-popup-menu .layer-btn { border-radius: 10px; padding: 10px 16px; width: 100%; justify-content: flex-start; }
.layer-popup-menu .layer-btn.active { background: #3b82f6; color: white; }

/* =========================================================
   📌 หมวดที่ 12: DARK MODE
   ========================================================= */
body.dark-mode { background-color: #0f172a !important; color: #f8fafc !important; }
body.dark-mode:not(.disable-map-filter) .leaflet-tile-pane { filter: invert(100%) hue-rotate(180deg) brightness(85%) contrast(90%) sepia(10%) !important; }
body.dark-mode path[fill="#ccc"], body.dark-mode path[fill="#cccccc"] { fill: #9198a0 !important; stroke: #1e293b !important; }

body.dark-mode .search-list, body.dark-mode #heatLegend, body.dark-mode .timeline-container, body.dark-mode #journal, body.dark-mode .hover-card, body.dark-mode .leaflet-popup-content-wrapper, body.dark-mode .leaflet-popup-tip { background: #1e293b !important; color: #f8fafc !important; border: 1px solid #334155 !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important; }
body.dark-mode .search-box input, body.dark-mode #searchInput, body.dark-mode #searchInput:focus, body.dark-mode #searchInput:active { background-color: #1e293b !important; color: #f8fafc !important; border: 1px solid #334155 !important; outline: none !important; -webkit-appearance: none !important; }
body.dark-mode #searchInput::placeholder, body.dark-mode .search-box input::placeholder { color: #94a3b8 !important; }
body.dark-mode #searchList { background: #1e293b !important; border-color: #334155 !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; }
body.dark-mode .search-item { color: #f8fafc !important; border-bottom-color: #334155 !important; }
body.dark-mode .search-item:hover, body.dark-mode .search-item.active { background: rgba(255, 255, 255, 0.1) !important; }

body.dark-mode #leftWidgets { background: transparent !important; border: none !important; box-shadow: none !important; }
body.dark-mode #leftWidgets>div, body.dark-mode .stat-card, body.dark-mode .dashboard-card, body.dark-mode #topProvinces, body.dark-mode #topPlaces, body.dark-mode #travelStats { background-color: #1e293b !important; border: none !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4) !important; }
body.dark-mode .top-province-row, body.dark-mode .top-place-row, body.dark-mode .region-row, body.dark-mode .stat-row, body.dark-mode #leftWidgets div { border-bottom: none !important; }

body.dark-mode .timeline-header, body.dark-mode #timelineSummary { border-bottom: 1px solid #334155 !important; }
body.dark-mode .timeline-pagination { background: #1e293b !important; }
body.dark-mode #timelineYearFilter, body.dark-mode #timelineSortOrder, body.dark-mode .timeline-search-inline, body.dark-mode .note-date, body.dark-mode .note-box textarea, body.dark-mode .upload-label, body.dark-mode .leaflet-control-zoom a { background: #0f172a !important; color: #f8fafc !important; border: 1px solid #475569 !important; }
body.dark-mode .note-box textarea::placeholder { color: #94a3b8 !important; }
body.dark-mode .upload-label:hover { border-color: #4ade80 !important; color: #4ade80 !important; background: rgba(74, 222, 128, 0.1) !important; }
body.dark-mode .upload-progress .progress-bar { background: #334155 !important; }
body.dark-mode .box, body.dark-mode .note-box { background: #0f172a !important; border: none !important; box-shadow: none !important; }
body.dark-mode .card, body.dark-mode #journal { border: none !important; }
body.dark-mode .box .row, body.dark-mode .timeline-row:hover, body.dark-mode .journal-card { background: #334155 !important; }
body.dark-mode .journal-card { border-left-color: #4ade80 !important; }
body.dark-mode .box .row span, body.dark-mode .top-province-name, body.dark-mode .top-place-row span:first-child, body.dark-mode .stats-row span, body.dark-mode .region-row span, body.dark-mode .journal-text, body.dark-mode .timeline-province, body.dark-mode #timelinePageInfo, body.dark-mode .hover-title, body.dark-mode .hover-row, body.dark-mode .legend-title, body.dark-mode .title, body.dark-mode .upload-counter, body.dark-mode .top-provinces-title, body.dark-mode .top-places-title, body.dark-mode .stats-title, body.dark-mode #leftWidgets, body.dark-mode #timelineSummary { color: #e2e8f0 !important; }
body.dark-mode .top-province-count, body.dark-mode .top-place-row span:last-child, body.dark-mode .journal-date, body.dark-mode .timeline-date { color: #4ade80 !important; }
body.dark-mode .timeline-chip { background: #1d4ed8 !important; color: #eff6ff !important; }
body.dark-mode .custom-map-controls { background: rgba(31, 41, 55, 0.98) !important; border-color: rgba(255, 255, 255, 0.05) !important; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4) !important; }
body.dark-mode .custom-map-controls button { color: #f1f5f9 !important; }
body.dark-mode .custom-map-controls button:hover, body.dark-mode .layer-toggle-btn.active { background: rgba(255, 255, 255, 0.05) !important; }
body.dark-mode .layer-popup-menu { background: rgba(31, 41, 55, 0.98) !important; border-color: rgba(255, 255, 255, 0.08) !important; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.4) !important; }
body.dark-mode .layer-popup-menu .layer-btn { color: #f1f5f9 !important; }
body.dark-mode .custom-map-controls .layer-btn.active { background: #3b82f6 !important; color: white !important; }

/* =========================================================
   📌 หมวดที่ 13: DESKTOP BUTTONS & BASE MODALS
   ตู้โชว์เกียรติยศ และปุ่มปิด Modal สำหรับ Desktop
   ========================================================= */
.badge-modal { 
    position: fixed; 
    inset: 0; 
    background: rgba(0, 0, 0, 0.6); 
    backdrop-filter: blur(4px); 
    -webkit-backdrop-filter: blur(4px); 
    display: none;
    justify-content: center;
    align-items: center;
    padding: 20px; 
    z-index: 4000; 
    opacity: 0; 
    transition: opacity 0.3s ease; 
}
.badge-modal.show { 
    display: flex;
    opacity: 1; 
}

.badge-container { 
    background: #fff; 
    border-radius: 24px; 
    width: 100%; 
    max-width: 720px; 
    
    /* 🌟 เพิ่มบรรทัดนี้ เพื่อบังคับให้หน้าต่างสูงคงที่ตลอดเวลา ไม่หดตามเนื้อหา */
    height: 85vh; 
    
    max-height: 85vh; 
    display: flex; 
    flex-direction: column; 
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.2); 
    transform: scale(0.95) translateY(20px); 
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1); 
    will-change: transform, opacity; 
    overflow: hidden; 
}

.badge-modal.show .badge-container { transform: scale(1) translateY(0); }

.badge-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 15px 25px;
    position: relative;
    border-bottom: 1px solid #eee;
}

.badge-title { font-size: 20px; font-weight: 700; color: #0f172a; margin: 0; display: flex; align-items: center; gap: 8px; }

.badge-content { 
    padding: 0; 
    display: flex; 
    flex-direction: column; 
    overflow: hidden;
    flex: 1; 
    min-height: 0;
}

.badge-grid { 
    display: grid; 
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); 
    grid-auto-rows: max-content; 
    gap: 20px; 
    padding: 4px 24px 24px 24px; 
    overflow-y: auto;
    flex: 1;
    min-height: 400px;
    align-content: start;
}

.badge-card { background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 16px; padding: 20px 16px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; transition: transform 0.2s, box-shadow 0.2s; position: relative; overflow: hidden; }
.badge-card:hover { transform: translateY(-4px); box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08); }
.badge-icon { font-size: 48px; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1)); }
.badge-name { font-size: 15px; font-weight: 700; color: #0f172a; margin: 0; }
.badge-desc { font-size: 14px; color: #64748b; margin: 0; line-height: 1.4;  }
.badge-card.locked { background: #f1f5f9; border-color: #e2e8f0; opacity: 0.85; }
.badge-card.locked .badge-icon { filter: grayscale(100%) opacity(0.4); }
.badge-card.locked .badge-name { color: #64748b; }
.badge-progress-wrap { width: 100%; margin-top: auto; padding: 10px; }
.badge-progress-bg { background: #e2e8f0; height: 6px; border-radius: 999px; overflow: hidden; width: 100%; margin-bottom: 6px; }
.badge-progress-fill { background: linear-gradient(90deg, #94a3b8, #cbd5e1); height: 100%; border-radius: 999px; transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1); will-change: width; }
.badge-progress-text { font-size: 13px; color: #64748b; font-weight: 600; }
.badge-card.unlocked { background: #fff; border-color: #fbbf24; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.15); }

/* อนิเมชันดาววิบวับ สำหรับ Base PC */
.badge-card.unlocked::before { content: '✨'; position: absolute; top: 10px; right: 10px; font-size: 16px; animation: sparkle 2s infinite; }
@keyframes sparkle { 0%, 100% { opacity: 0.5; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.2); } }

.badge-card.unlocked .badge-progress-fill { background: linear-gradient(90deg, #fbbf24, #f59e0b); }
.badge-card.unlocked .badge-progress-text { color: #d97706; }

body.dark-mode .badge-container { background: #0f172a; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6); }
body.dark-mode .badge-header { background: #0f172a; border-color: #334155; }
body.dark-mode .badge-title { color: #f8fafc; }
body.dark-mode .badge-card { background: #0f172a; border-color: #334155; }
body.dark-mode .badge-name { color: #e2e8f0; }
body.dark-mode .badge-desc { color: #94a3b8; }
body.dark-mode .badge-card.locked { background: #1e293b; border-color: #334155; }
body.dark-mode .badge-card.locked .badge-icon { filter: grayscale(100%) opacity(0.2); }
body.dark-mode .badge-card.unlocked { background: #0f172a; border-color: #fbbf24; box-shadow: 0 4px 15px rgba(251, 191, 36, 0.1); }
body.dark-mode .badge-progress-bg { background: #334155; }

.badge-grid::-webkit-scrollbar { width: 8px; }
.badge-grid::-webkit-scrollbar-track { background: transparent; }
.badge-grid::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }
.badge-grid::-webkit-scrollbar-thumb:hover { background: rgba(0, 0, 0, 0.35); }
body.dark-mode .badge-grid::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2) !important; }
body.dark-mode .badge-grid::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.35) !important; }

/* อนิเมชันภารกิจลับ สำหรับ Base PC */
.badge-card.secret-badge { background: #f8fafc; border: 1px dashed #cbd5e1; }
.badge-card.secret-badge .badge-icon.pulsing-question { font-family: 'Arial', sans-serif; color: #94a3b8; filter: none !important; animation: pulse-secret 2s infinite ease-in-out; }
.badge-card.secret-badge .badge-name, .badge-card.secret-badge .badge-desc, .badge-card.secret-badge .badge-progress-text { color: #94a3b8; font-style: italic; }
@keyframes pulse-secret { 0%, 100% { transform: scale(0.9) translateY(0); opacity: 0.5; text-shadow: 0 0 0 rgba(0, 0, 0, 0); } 50% { transform: scale(1.1) translateY(-4px); opacity: 1; text-shadow: 0 10px 15px rgba(0, 0, 0, 0.1); } }

body.dark-mode .badge-card.secret-badge { background: rgba(30, 41, 59, 0.5); border-color: #334155; }
body.dark-mode .badge-card.secret-badge .badge-icon.pulsing-question { color: #475569; }

/* --- Badge Rarity Tiers --- */
.badge-card.unlocked.tier-normal { border-color: #94a3b8; box-shadow: 0 4px 15px rgba(148, 163, 184, 0.2); background: linear-gradient(135deg, #ffffff, #f8fafc); }
.badge-card.unlocked.tier-normal .badge-progress-fill { background: linear-gradient(90deg, #94a3b8, #64748b); }
.badge-card.unlocked.tier-normal .badge-progress-text { color: #475569; }

.badge-card.unlocked.tier-epic { border-color: #fbbf24; box-shadow: 0 4px 20px rgba(251, 191, 36, 0.25); background: linear-gradient(135deg, #ffffff, #fffbeb); }

.badge-card.unlocked.tier-legendary { border: 1px solid #fca5a5; background: linear-gradient(135deg, #fffbeb 0%, #ffedd5 40%, #ffe4e6 70%, #f3e8ff 100%); box-shadow: 0 10px 25px rgba(249, 115, 22, 0.15); animation: none; }
.badge-card.unlocked.tier-legendary .badge-name { color: #0f172a !important; text-shadow: none; }
.badge-card.unlocked.tier-legendary .badge-desc { color: #475569 !important; text-shadow: none; }
.badge-card.unlocked.tier-legendary .badge-progress-bg { background: #fed7aa; }
.badge-card.unlocked.tier-legendary .badge-progress-fill { background: linear-gradient(90deg, #fbbf24, #f97316, #ec4899, #8b5cf6); box-shadow: 0 2px 8px rgba(249, 115, 22, 0.4); }
.badge-card.unlocked.tier-legendary .badge-progress-text { color: #c026d3 !important; text-shadow: none; }
.badge-card.unlocked.tier-legendary .badge-icon { filter: drop-shadow(0 4px 8px rgba(249, 115, 22, 0.3)); }

.badge-close, .journal-close-btn, .timeline-close { background: #e2e8f0; border: none; width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; color: #64748b; transition: 0.2s; display: flex; align-items: center; justify-content: center; padding: 0; margin: 0; }
.badge-close:hover, .journal-close-btn:hover, .timeline-close:hover { background: #cbd5e1; color: #ef4444; }
body.dark-mode .badge-close, body.dark-mode .journal-close-btn, body.dark-mode .timeline-close { background-color: #334155; color: #ffffff; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4); opacity: 1; }
body.dark-mode .badge-close:hover, body.dark-mode .journal-close-btn:hover, body.dark-mode .timeline-close:hover { background-color: #ef4444; color: #ffffff; }

/* Dark Mode: Filter & Tiers */
body.dark-mode .filter-btn { background: #1e293b; border-color: #334155; color: #cbd5e1; }
body.dark-mode .filter-btn.active { background: #3b82f6; border-color: #3b82f6; color: #ffffff; }
body.dark-mode .badge-card.unlocked.tier-normal { background: #0f172a; border-color: #475569; }
body.dark-mode .badge-card.unlocked.tier-rare { background: #0f172a; border-color: #cbd5e1; }
body.dark-mode .badge-card.unlocked.tier-epic { background: #0f172a; border-color: #fbbf24; }
body.dark-mode .badge-card.unlocked.tier-legendary { background: linear-gradient(135deg, #2a1515, #311c14, #2d1b2e); border-color: #f43f5e; box-shadow: 0 4px 20px rgba(244, 63, 94, 0.2); }
body.dark-mode .badge-card.unlocked.tier-legendary .badge-name { color: #f8fafc !important; }
body.dark-mode .badge-card.unlocked.tier-legendary .badge-desc { color: #cbd5e1 !important; }

/* =========================================================
   📌 หมวดที่ 14: RESPONSIVE - MOBILE (<768px)
   ========================================================= */
#mobileToggleStats {
    display: none; position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 9999; background: #2563eb; color: white; border: none; padding: 10px 20px; border-radius: 30px; font-size: 13px; font-weight: 600; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.25); cursor: pointer; transition: background 0.3s; font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
}

@media (max-width: 768px) {
    .search-container { top: 16px !important; left: 66px !important; right: 16px !important; width: calc(100vw - 82px) !important; transform: none !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; box-sizing: border-box !important; }
    .search-box { flex: 1 !important; width: 100% !important; min-width: 0 !important; }
    #searchInput { background: rgba(255, 255, 255, 0.85) !important; backdrop-filter: blur(12px) !important; -webkit-backdrop-filter: blur(12px) !important; border: 1px solid rgba(255, 255, 255, 0.5) !important; border-radius: 30px !important; padding: 8px 14px 8px 28px !important; font-size: 13px !important; height: 38px !important; width: 100% !important; box-sizing: border-box !important; }
    #exportBtn { position: relative !important; margin: 0 !important; border-radius: 30px !important; padding: 0 14px !important; height: 38px !important; font-size: 13px !important; flex-shrink: 0 !important; }
    #searchList { top: calc(100% + 8px) !important; background: rgba(255, 255, 255, 0.9) !important; backdrop-filter: blur(12px) !important; }
    .custom-map-controls { position: fixed !important; top: 16px !important; left: 16px !important; bottom: auto !important; transform: none !important; background: transparent !important; border: none !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; }
    .custom-theme-btn, .layer-selector-wrapper { display: none !important; }
    .custom-map-controls .custom-gps-btn { display: flex !important; align-items: center !important; justify-content: center !important; background-color: #fff !important; color: #333 !important; width: 38px !important; height: 38px !important; border-radius: 50% !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important; margin: 0 !important; padding: 0 !important; }
    body.dark-mode .custom-map-controls .custom-gps-btn { background-color: #1e293b !important; color: #f8fafc !important; border: 1px solid #334155 !important; }
    .network-indicator { top: 70px !important; font-size: 12px; padding: 4px 14px; }
    #mobileToggleStats { display: flex; align-items: center; gap: 8px; }
    
    #leftWidgets { top: 85px !important; bottom: 85px !important; left: 50% !important; height: auto !important; max-height: none !important; width: 92vw !important; background: rgba(255, 255, 255, 0.95) !important; padding: 16px !important; border-radius: 20px !important; transform: translateX(-200%) !important; z-index: 1500 !important; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); }
    #leftWidgets.show-on-mobile { transform: translateX(-50%) !important; }
    #leftWidgets>div { background: transparent !important; box-shadow: none !important; padding: 0 !important; margin: 0 !important; flex: 0 0 auto !important; }
    
    .top-provinces-title, .top-places-title, .stats-title { font-size: 13px !important; margin-bottom: 2px !important; }
    .stats-row, .top-province-row, .top-place-row, .region-row { font-size: 12px !important; padding: 4px 8px !important; }
	/* 🌟 บังคับลดขนาดฟอนต์กล่องยอดเปย์ในมือถือ */
    .expense-summary-box .expense-label,
    .expense-summary-box .expense-val {
        font-size: 12px !important;
    }
    .top-province-count, .top-place-row span:last-child { font-size: 12px !important; }
    .timeline-btn { font-size: 12px !important; padding: 8px !important; }
    #btnQuickCheckin, .quick-checkin-btn { 
        font-size: 12px !important; 
    }
    .travel-level { font-size: 12px !important; }
    #travelStats .progress-bar { display: none !important; }
    .upload-progress .progress-text { font-size: 12px !important; flex: 0 0 35px !important; }

    .timeline-modal { z-index: 10000 !important; padding: 20px 16px !important; }
    .timeline-container { display: flex !important; flex-direction: column !important; max-height: calc(100dvh - 40px) !important; border-radius: 20px !important; width: 100% !important; }
    #timelineContent { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; padding: 10px 12px !important; }
    .timeline-row { 
        padding: 12px 14px !important; 
        margin: 0 -14px !important; 
        border-radius: 14px !important; 
    }
    .timeline-date, .timeline-province { font-size: 13px !important; }
    .timeline-chip { font-size: 12px !important; padding: 4px 8px !important; }
    .timeline-pagination { flex-shrink: 0 !important; padding-bottom: 12px !important; }
    .timeline-pagination button { font-size: 12px !important; padding: 6px 12px !important; }
    #timelinePageInfo { font-size: 12px !important; }

    #journal { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: 92vw !important; max-height: 80dvh !important; z-index: 10005 !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.6) !important; border-radius: 24px !important; padding: 14px 14px 10px 14px !important; }
    .journal-title { font-size: 14px !important; }
    #journalList { max-height: calc(80dvh - 70px) !important; }
    .journal-card { padding: 14px 14px 12px 14px !important; gap: 4px !important; }
    .journal-date { font-size: 13px !important; }
    .journal-text { font-size: 12px !important; }
    .journal-images img { width: 70px !important; height: 70px !important; }
    .delete-log { font-size: 12px !important; padding: 4px 10px !important; }

    .image-preview-modal { z-index: 10010 !important; }
    .note-box textarea, .note-date, .note-editor { font-size: 13px !important; }
    .note-date { -webkit-appearance: none !important; appearance: none !important; width: 100% !important; text-align: center !important; min-height: 40px !important; }

    body.badge-gallery-open #mobileToggleStats { z-index: 1000 !important; }
    body.dark-mode #leftWidgets { background-color: #1e293b !important; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8) !important; }
    body.dark-mode #leftWidgets>div { background: transparent !important; box-shadow: none !important; }
    
    .badge-container { width: 100% !important; max-height: calc(100dvh - 20px); border-radius: 16px; }
    .badge-title { font-size: 17px; }
    .badge-content { padding: 0; }
    .badge-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; padding: 12px; }
    .badge-card { padding: 14px 8px; gap: 6px; border-radius: 12px; min-height: auto; }
    .badge-icon { font-size: 34px; }
    .badge-name { font-size: 13px; }
    .badge-desc { font-size: 11px; }
}

/* =========================================================
   📌 หมวดที่ 15: RESPONSIVE - TABLET & MOBILE FIXES (<1024px)
   ========================================================= */
@media (max-width: 1024px) {
    .badge-header, .journal-header, .timeline-header { position: relative !important; padding-right: 60px !important; padding-top: 14px !important; padding-bottom: 14px !important; min-height: 50px !important; display: flex !important; align-items: center !important; width: 100% !important; box-sizing: border-box !important; }
    .badge-header .badge-close, .journal-header .journal-close-btn, .timeline-header .timeline-close { position: absolute !important; top: 12px !important; right: 14px !important; width: 32px !important; height: 32px !important; border-radius: 50% !important; display: block !important; z-index: 99999 !important; border: none !important; padding: 0 !important; margin: 0 !important; cursor: pointer !important; background-color: #f1f5f9 !important; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15) !important; color: transparent !important; font-size: 0 !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important; background-size: 14px 14px !important; background-position: center !important; background-repeat: no-repeat !important; }
    .badge-header .badge-close *, .journal-header .journal-close-btn *, .timeline-header .timeline-close * { display: none !important; }
    body.dark-mode .badge-header .badge-close, body.dark-mode .journal-header .journal-close-btn, body.dark-mode .timeline-header .timeline-close { background-color: #475569 !important; border: 1px solid rgba(255, 255, 255, 0.3) !important; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5) !important; top: 8px !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important; }

    html body #journal .journal-header { justify-content: space-between !important; padding: 0 !important; min-height: 36px !important; }
    html body #journal .journal-title { flex: 1 !important; padding-right: 12px !important; margin: 0 !important; line-height: 1.2 !important; }
    html body #journal .journal-close-btn { position: relative !important; top: auto !important; right: auto !important; margin: 0 !important; flex-shrink: 0 !important; }

    html body .timeline-header { flex-wrap: wrap !important; gap: 10px 8px !important; padding: 16px 14px 12px 14px !important; height: auto !important; min-height: auto !important; }
    html body .timeline-title { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; padding-right: 40px !important; font-size: 18px !important; }
    html body .timeline-spacer { display: none !important; }
    html body .timeline-search-inline { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; box-sizing: border-box !important; height: 40px !important; border-radius: 8px !important; }
    html body #timelineYearFilter, html body #timelineSortOrder { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; margin: 0 !important; box-sizing: border-box !important; height: 40px !important; border-radius: 8px !important; -webkit-appearance: none !important; appearance: none !important; background-repeat: no-repeat !important; background-position: right 10px center !important; background-size: 14px 14px !important; padding-right: 32px !important; }
    html body #timelineSummary { clear: both !important; display: block !important; padding: 12px 14px !important; font-size: 13px !important; }

    body.dark-mode #timelineYearFilter, body.dark-mode #timelineSortOrder, body.dark-mode .timeline-search-inline { background-color: #0f172a !important; border: 1px solid rgba(255, 255, 255, 0.05) !important; color: #f8fafc !important; box-shadow: none !important; outline: none !important; }
    body.dark-mode #timelineYearFilter, body.dark-mode #timelineSortOrder { background-repeat: no-repeat !important; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important; }
    body.dark-mode .timeline-header { border-bottom: none !important; }
}

/* =========================================================
   📌 หมวดที่ 16: RESPONSIVE - LANDSCAPE (แนวนอน)
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) {
    .timeline-modal { padding: 10px !important; align-items: center !important; }
    .timeline-container { height: 100% !important; max-height: 100% !important; width: 100% !important; flex-direction: column !important; margin: 0 !important; }
    #timelineContent { flex: 1 1 auto !important; overflow-y: auto !important; min-height: 0 !important; padding: 6px 16px !important; }
    #timelineSummary { padding: 4px 14px !important; }
    .timeline-pagination { padding: 8px 0 !important; flex-shrink: 0 !important; background: #fff !important; }
    html body .timeline-header { flex-wrap: wrap !important; gap: 10px 8px !important; padding: 14px 50px 14px 20px !important; justify-content: center !important; }
    html body .timeline-title { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; }
    html body .timeline-search-inline { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; margin: 0 !important; height: 38px !important; }
    html body #timelineYearFilter, html body #timelineSortOrder { flex: 0 0 calc(25% - 4px) !important; width: calc(25% - 4px) !important; margin: 0 !important; height: 38px !important; font-size: 12px !important; padding-left: 8px !important; padding-right: 28px !important; }
    
    #journal { top: 50% !important; left: 50% !important; right: auto !important; bottom: auto !important; transform: translate(-50%, -50%) !important; width: 85vw !important; max-width: 600px !important; max-height: calc(100dvh - 20px) !important; z-index: 10005 !important; padding: 12px 14px !important; box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7) !important; }
    #journalList { max-height: calc(100dvh - 80px) !important; overflow-y: auto !important; }
    .image-preview-modal { z-index: 10020 !important; }
    #journal .journal-title { font-size: 16px !important; margin-bottom: 4px !important; }
    #journal .journal-date { font-size: 15px !important; margin-bottom: 2px !important; }
    #journal .journal-text { font-size: 14px !important; line-height: 1.4 !important; }
    #journal .delete-log { font-size: 13px !important; padding: 4px 10px !important; margin-top: 4px !important; }
    #journal .journal-card { padding: 10px 12px !important; gap: 4px !important; }
    #journal .journal-images img { width: 60px !important; height: 60px !important; }
}

/* =========================================================
   🔥 FINAL FIX: ล้างลูกศรซ้อน & จัด Layout
   ========================================================= */
html body #timelineYearFilter,
html body #timelineSortOrder {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    background: #f8fafc url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center !important;
    background-size: 14px !important;
    padding-right: 30px !important;
}

html body.dark-mode #timelineYearFilter,
html body.dark-mode #timelineSortOrder {
    background: #0f172a url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") no-repeat right 10px center !important;
    background-size: 14px !important;
}

@media (max-width: 1024px) and (orientation: portrait) {
    html body .timeline-header { display: flex !important; flex-wrap: wrap !important; gap: 10px 8px !important; padding: 16px 14px 12px 14px !important; }
    html body .timeline-title { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; padding-right: 40px !important; }
    html body .timeline-search-inline { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; }
    html body #timelineYearFilter, html body #timelineSortOrder { flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; max-width: calc(50% - 4px) !important; margin: 0 !important; }
}

@media (max-width: 1024px) and (orientation: landscape) {
    html body .timeline-header { display: flex !important; flex-wrap: wrap !important; gap: 12px 8px !important; padding: 16px 50px 14px 50px !important; justify-content: center !important; }
    html body .timeline-title { flex: 0 0 100% !important; width: 100% !important; margin: 0 !important; padding: 0 !important; transform: translateX(-26px) !important; }
    html body .timeline-search-inline { flex: 0 0 calc(50% - 8px) !important; width: calc(50% - 8px) !important; max-width: calc(50% - 8px) !important; margin: 0 !important; }
    html body #timelineYearFilter, html body #timelineSortOrder { flex: 0 0 calc(25% - 4px) !important; width: calc(25% - 4px) !important; max-width: calc(25% - 4px) !important; margin: 0 !important; padding-left: 10px !important; }
}

/* =========================================================
   🟢 BADGE FILTERS (ALL SCREENS & MOBILE)
   ========================================================= */
.badge-filters-pc {
    display: flex;
    gap: 8px;
    padding: 12px 16px 4px 16px;
    margin-bottom: 8px;
    justify-content: flex-start;
    overflow-x: auto; /* ทำให้สามารถใช้นิ้วเลื่อนซ้ายขวาได้ถ้ายาวเกินจอ */
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none; /* ซ่อนหลอด Scrollbar Firefox */
    flex-shrink: 0;
}
.badge-filters-pc::-webkit-scrollbar { display: none; } /* ซ่อนหลอด Scrollbar Chrome/Safari */

.filter-btn {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    padding: 6px 14px;
    border-radius: 999px;
    cursor: pointer;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
    font-size: 13px; /* ขนาดเล็กลงพอดีจอมือถือ */
    font-weight: 600;
    color: #475569;
    transition: all 0.2s ease;
    white-space: nowrap; /* ป้องกันข้อความตกบรรทัด */
}
.filter-btn:hover { background: #e2e8f0; }
.filter-btn.active {
    background: #3b82f6; color: #ffffff; border-color: #3b82f6; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

/* =========================================================
   🎮 ADVANCED GALLERY UI (PC ONLY - RESPONSIVE)
   ========================================================= */
.player-title, .mini-dashboard, .next-milestone-banner, .user-level-container { display: none !important; }
.badge-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 25px; position: relative; border-bottom: 1px solid #eee; }

@media (min-width: 1025px) {
    .badge-header { align-items: flex-start; padding: 15px 25px 12px 25px; }
    .header-main-content { display: flex; flex-direction: column; gap: 8px; width: 100%; } 
    .header-title-group { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; flex: 1; }
    .user-level-container, .player-title, .mini-dashboard { display: flex !important; }
    
    #shareBadgeBtn { margin-left: auto !important; margin-right: 10px !important; }
    
    .next-milestone-banner { display: flex !important; background: linear-gradient(135deg, #f0fdf4, #dcfce7); border: 1px solid #bbf7d0; border-radius: 16px; padding: 16px 20px; margin: 24px 24px 0 24px; align-items: center; gap: 16px; box-shadow: 0 4px 12px rgba(34, 197, 94, 0.1); flex-shrink: 0; }
    .user-level-container { position: relative; z-index: 10; }
    .level-badge { position: relative; background: #3b82f6; color: #ffffff; padding: 7px 12px 4px 12px; border-radius: 8px; font-size: 16px; font-weight: 700; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; display: flex; align-items: center; justify-content: center; gap: 4px; line-height: 1; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25); cursor: help; transition: all 0.2s ease; }
    .level-badge span { font-size: inherit; font-weight: inherit; font-family: inherit; line-height: inherit; transform: none; }
    
    .level-exp-tooltip { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(-5px); background: #1e293b; color: #ffffff; border-radius: 6px; font-size: 13px; font-weight: 600; font-family: 'Noto Sans Thai', system-ui, sans-serif !important; white-space: nowrap; opacity: 0; visibility: hidden; transition: all 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); pointer-events: none; z-index: 100; display: flex; align-items: center; justify-content: center; padding: 7px 12px 4px 12px; line-height: normal; }
    .level-badge:hover .level-exp-tooltip { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
    
    .player-title { font-size: 15px; font-weight: 700; color: #fbbf24; background: rgba(251, 191, 36, 0.1); padding: 4px 10px; border-radius: 999px; }
    .mini-dashboard { gap: 15px; font-size: 14px; font-weight: 600; color: #64748b; }
    .mini-dashboard span { display: flex; align-items: center; gap: 4px; }
    
    .rank-rookie { background: #3b82f6; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.25); }
    .rank-rookie:hover { background: #2563eb; }
    .rank-silver { background: #94a3b8; box-shadow: 0 4px 10px rgba(148, 163, 184, 0.25); }
    .rank-silver:hover { background: #64748b; }
    .rank-gold { background: #eab308; box-shadow: 0 4px 10px rgba(234, 179, 8, 0.25); }
    .rank-gold:hover { background: #ca8a04; }
    .rank-legendary { background: linear-gradient(135deg, #ef4444, #b91c1c); box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3); }
    .rank-legendary:hover { transform: scale(1.05); }
    
    .milestone-icon { font-size: 32px; background: white; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border-radius: 50%; box-shadow: 0 4px 8px rgba(0,0,0,0.05); }
    .milestone-info { flex: 1; }
    .milestone-info h4 { margin: 0 0 4px 0; font-size: 15px; color: #166534; }
    .milestone-info p { margin: 0 0 8px 0; font-size: 14px; color: #15803d; }
    .milestone-progress-bg { background: #bbf7d0; height: 8px; border-radius: 999px; overflow: hidden; }
    .milestone-progress-fill { background: linear-gradient(90deg, #22c55e, #16a34a); height: 100%; border-radius: 999px; transition: width 1s cubic-bezier(0.4, 0, 0.2, 1); }
    
    body.dark-mode .badge-header { border-bottom-color: #334155; }
    body.dark-mode .mini-dashboard { color: #94a3b8; }
    body.dark-mode .player-title { background: rgba(251, 191, 36, 0.2); }
    body.dark-mode .level-exp-tooltip { color: #ffffff; text-shadow: 0 2px 4px rgba(0,0,0,0.8); }
    body.dark-mode .rank-rookie { background: #1d4ed8; }
    body.dark-mode .rank-silver { background: #475569; }
    body.dark-mode .rank-gold { background: #a16207; }
    body.dark-mode .next-milestone-banner { background: rgba(22, 101, 52, 0.2); border-color: #14532d; }
    body.dark-mode .milestone-icon { background: #0f172a; }
    body.dark-mode .milestone-info h4 { color: #4ade80; }
    body.dark-mode .milestone-info p { color: #86efac; }
    body.dark-mode .milestone-progress-bg { background: #14532d; }

    .badge-filters-pc { gap: 12px; padding: 24px 24px 0 24px; margin-bottom: 20px; justify-content: center; overflow-x: visible; }
    .next-milestone-banner + .badge-filters-pc { padding-top: 0; margin-top: 24px; }
    .filter-btn { padding: 8px 18px; font-size: 14px; }
} /* 👈 วงเล็บปีกกาตรงนี้แหละครับที่หายไป ทำให้โค้ดด้านล่างพังหมด */

/* =========================================================
   🍎 WEB PERFORMANCE OPTIMIZATION (iOS Safari Native Smoothness)
   ========================================================= */
@media (max-width: 1024px) {
    html body .badge-icon { filter: none !important; text-shadow: 0 4px 6px rgba(0, 0, 0, 0.15) !important; }
    html body .badge-card.unlocked.tier-legendary .badge-icon { filter: none !important; text-shadow: 0 4px 8px rgba(249, 115, 22, 0.4) !important; }
    html body .badge-modal { position: fixed !important; inset: 0 !important; padding: 5% !important; box-sizing: border-box !important; background: rgba(0, 0, 0, 0.85) !important; display: none; align-items: center !important; justify-content: center !important; }
    html body .badge-modal.show { display: flex !important; }
    html body .badge-modal .badge-container { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; margin: 0 !important; transform: none !important; display: flex !important; flex-direction: column !important; -webkit-transform: translateZ(0); transform: translateZ(0); }
    html body .badge-content { flex: 1 1 auto !important; min-height: 0 !important; overflow: hidden !important; display: flex !important; flex-direction: column !important; }
    html body .badge-grid { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; -webkit-overflow-scrolling: touch !important; padding: 12px !important; }
    html body .badge-card { transform: translateZ(0); transition: none !important; }
}

@media (max-width: 1024px) and (orientation: landscape) {
    html body .badge-modal { padding: 2% 5% !important; }
    html body .badge-modal .badge-container { flex-direction: column !important; }
    html body .badge-header { width: 100% !important; height: auto !important; border-bottom: 1px solid #e2e8f0 !important; flex-direction: row !important; padding: 12px 14px !important; padding-right: 60px !important; align-items: center !important; justify-content: flex-start !important; }
    html body .badge-title span { display: inline !important; }
    html body .badge-title { font-size: 18px !important; margin: 0 !important; line-height: normal !important; }
    html body .badge-header .badge-close { position: absolute !important; top: 12px !important; right: 14px !important; margin: 0 !important; order: 0 !important; }
    html body .badge-content { width: 100% !important; }
    html body .badge-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; }
}

/* =========================================================
   🌟 FINAL CLEANUP: จัดการการ์ดแบบหน้าเดียว (Flat UI)
   ========================================================= */
html body .badge-card { padding: 15px 10px !important; display: flex; flex-direction: column; align-items: center; text-align: center; }
html body .badge-card.unlocked.tier-normal { border-color: #94a3b8; background: linear-gradient(135deg, #ffffff, #f8fafc); }
html body .badge-card.unlocked.tier-epic { border-color: #fbbf24; background: linear-gradient(135deg, #ffffff, #fffbeb); }
html body .badge-card.unlocked.tier-legendary { border: 1px solid #fca5a5 !important; background: linear-gradient(135deg, #fffbeb 0%, #ffedd5 40%, #ffe4e6 70%, #f3e8ff 100%) !important; box-shadow: 0 10px 25px rgba(249, 115, 22, 0.15) !important; }
body.dark-mode .badge-card.unlocked.tier-legendary { background: linear-gradient(135deg, #2a1515, #311c14, #2d1b2e) !important; border-color: #f43f5e; }
body.dark-mode .badge-card.unlocked.tier-epic { background: #0f172a !important; border-color: #fbbf24; }
html body .badge-icon { margin-bottom: 2px !important; }
html body .badge-name { margin-bottom: 4px !important; }
html body .badge-progress-wrap { padding: 8px 4px 0 4px !important; margin-top: auto !important; }



/* =========================================================
   📱 MASTER MOBILE FIX: จัดป้าย LV และ ฉายา แบบอิสระ (Centering & Button Alignment Fix)
========================================================= */

@media (max-width: 1024px) {
    /* 1. จัดพื้นที่ Header */
    html body .badge-header {
        padding: 14px 16px 14px 16px !important; 
        min-height: auto !important;
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }

    html body .header-main-content {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    /* 2. 📌 ปุ่ม "แชร์" และ "X" ไว้มุมขวาบนสุด */
    html body #shareBadgeBtn {
        position: absolute !important;
        top: 14px !important;
        right: 56px !important; 
        margin: 0 !important;
        height: 30px !important; 
        font-size: 13px !important;
        transform: none !important;
        z-index: 100 !important;
    }
    
    /* 🌟 บังคับปุ่ม X ให้ตรงกันทั้งโหมดสว่างและโหมดมืด */
    html body .badge-header .badge-close,
    body.dark-mode .badge-header .badge-close {
        position: absolute !important;
        top: 14px !important; 
        right: 14px !important;
        margin: 0 !important;
        width: 30px !important;
        height: 30px !important; 
        transform: none !important;
        z-index: 101 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    /* 3. จัดการ Wrapper ของ Level */
    html body .user-level-container { 
        display: inline-flex !important; 
        padding: 0 !important; 
        margin: 0 !important;
        background: transparent !important;
        border: none !important;
        height: auto !important;
    }

    /* ปิด Tooltip EXP */
    html body .level-exp-tooltip { display: none !important; }

    /* 4. ป้าย Lv และ ฉายา */
    html body .level-badge,
    html body .player-title {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 28px !important; 
        font-size: 13px !important; 
        padding: 0 15px !important; 
        line-height: 1 !important;
        margin: 0 !important;
        box-sizing: border-box !important; 
        font-weight: 700 !important;
    }

    /* สีพื้นหลังป้ายฉายา */
    html body .player-title {
        border-radius: 6px !important; 
        color: #d97706 !important;
        background: rgba(251, 191, 36, 0.15) !important;
    }
    /* สีพื้นหลังป้าย Level */
    html body .level-badge {
        color: #ffffff !important;
        border-radius: 6px !important; 
        font-weight: 700 !important;
        height: 28px !important; 
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-sizing: border-box !important;
        padding: 2px 15px 0 15px !important; 
        
        margin: 0 !important;
    }
    html body .level-badge.rank-rookie { background: #3b82f6 !important; }
    html body .level-badge.rank-silver { background: #94a3b8 !important; }
    html body .level-badge.rank-gold { background: #eab308 !important; }
    html body .level-badge.rank-legendary { background: linear-gradient(135deg, #ef4444, #b91c1c) !important; }

    /* 🌟 ปรับขนาดฟอนต์ Gamification สำหรับมือถือทั้ง 2 แนว */
    html body .badge-title {
        font-size: 22px !important;
    }
}

/* =========================================================
   📱 มือถือแนวตั้ง (Portrait)
   ========================================================= */
@media (max-width: 1024px) and (orientation: portrait) {
    html body .header-title-group {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 20px 10px !important;
        width: 100% !important;
        margin: 0 !important;
        padding-top: 4px !important;
    }
    
    html body .badge-title {
        flex: 0 0 100% !important; 
        width: 100% !important;
        display: flex !important;
        justify-content: flex-start !important; 
        align-items: center !important;
        margin: 0 !important;
        padding-right: 120px !important;
        box-sizing: border-box !important;
        
        /* 🌟 คุมความสูงและระยะตัวอักษรให้พอดีกับปุ่มแชร์ */
        height: 25px !important; 
        line-height: 1.2 !important; 
    }
}

/* =========================================================
   📱 มือถือแนวนอน (Landscape)
   ========================================================= */
@media (max-width: 1024px) and (orientation: landscape) {
    html body .badge-header {
        padding-right: 140px !important; 
        min-height: 50px !important; 
        flex-direction: row !important;
        align-items: center !important; 
    }

    html body .header-main-content {
        flex-direction: row !important;
    }

    html body .header-title-group {
        display: flex !important;
        flex-wrap: nowrap !important; 
        justify-content: flex-start !important; 
        align-items: center !important; 
        gap: 10px !important;
        width: auto !important;
        margin: 0 !important;
        padding-top: 0 !important;
    }

    html body .badge-title {
        flex: 0 0 auto !important; 
        width: auto !important;
        padding-right: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important; 
    }

    /* แนวนอน: จับกึ่งกลางแนวตั้ง */
    html body #shareBadgeBtn,
    html body .badge-header .badge-close,
    body.dark-mode .badge-header .badge-close {
        top: 50% !important;
        transform: translateY(-50%) !important;
    }
}

/* =========================================================
   🌟 MONTHLY QUEST UI & POPUP
   ========================================================= */
/* การ์ดภารกิจเรืองแสง */
.badge-card.monthly-quest {
    border: 2px solid #3b82f6;
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    box-shadow: 0 0 20px rgba(59, 130, 246, 0.25);
    transform: scale(1.02);
    order: -1; /* บังคับให้อยู่ซ้ายบนสุดของ Grid เสมอ */
}
body.dark-mode .badge-card.monthly-quest {
    background: linear-gradient(135deg, #1e3a8a, #172554);
    border-color: #3b82f6;
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
}
.badge-card.monthly-quest:hover { transform: scale(1.05); box-shadow: 0 0 30px rgba(59, 130, 246, 0.4); }

/* ป้ายนับเวลาถอยหลัง */
.quest-timer-badge {
    position: absolute;
    top: 10px;
    right: 10px;
    background: #ef4444;
    color: white;
    font-size: 11px;
    font-weight: 700;
    padding: 4px 8px;
    border-radius: 999px;
    box-shadow: 0 4px 10px rgba(239, 68, 68, 0.3);
    animation: pulse-timer 2s infinite;
}
@keyframes pulse-timer { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.05); } }

/* Modal เด้งกลางจอตอนทำสำเร็จ */
.quest-unlock-modal {
    position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(4px);
    display: flex; justify-content: center; align-items: center; z-index: 99999;
    opacity: 0; pointer-events: none; transition: 0.3s;
}
.quest-unlock-modal.show { opacity: 1; pointer-events: auto; }
.quest-unlock-card {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    padding: 30px; border-radius: 24px; text-align: center;
    width: 320px; box-shadow: 0 25px 50px rgba(0,0,0,0.5);
    border: 3px solid #fbbf24;
    transform: scale(0.8) translateY(30px); opacity: 0; transition: 0.4s cubic-bezier(0.18, 0.89, 0.32, 1.28);
}
.quest-unlock-modal.show .quest-unlock-card { transform: scale(1) translateY(0); opacity: 1; }
.quest-unlock-icon { font-size: 60px; margin-bottom: 10px; filter: drop-shadow(0 10px 15px rgba(0,0,0,0.2)); }
.quest-unlock-card h3 { color: #d97706; margin: 0 0 8px 0; font-size: 22px; font-weight: 700; }
.quest-unlock-card p { color: #92400e; margin: 0 0 16px 0; font-size: 15px; }
.quest-unlock-exp { background: #10b981; color: white; display: inline-block; padding: 6px 16px; border-radius: 999px; font-weight: 700; font-size: 18px; margin-bottom: 20px; box-shadow: 0 4px 15px rgba(16, 185, 129, 0.3); }
.quest-unlock-card button { width: 100%; background: #3b82f6; color: white; border: none; padding: 12px; border-radius: 12px; font-size: 16px; font-weight: 700; cursor: pointer; font-family: 'Noto Sans Thai', sans-serif; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); }
body.dark-mode .quest-unlock-card { background: linear-gradient(135deg, #451a03, #78350f); border-color: #f59e0b; }
body.dark-mode .quest-unlock-card h3 { color: #fbbf24; }
body.dark-mode .quest-unlock-card p { color: #fde68a; }

/* =========================================================
   🔮 LIMITED TIER (AMBER/ORANGE THEME)
========================================================= */
.badge-card.unlocked.tier-limited {
    border-color: #fbbf24;
    box-shadow: 0 4px 15px rgba(245, 158, 11, 0.15);
    background: linear-gradient(135deg, #ffffff, #fffbeb);
}

.badge-card.unlocked.tier-limited .badge-progress-fill {
    background: linear-gradient(90deg, #fbbf24, #f59e0b) !important;
}

.badge-card.unlocked.tier-limited .badge-progress-text {
    color: #d97706 !important;
}

.badge-card.unlocked.tier-limited::before {
    content: '✨';
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 16px;
    color: #fbbf24;
    animation: sparkle 2s infinite;
}

body.dark-mode .badge-card.unlocked.tier-limited {
    background: linear-gradient(135deg, #0f172a, #451a03) !important;
    border-color: #f59e0b;
    box-shadow: 0 4px 20px rgba(245, 158, 11, 0.2);
}

body.dark-mode .badge-card.unlocked.tier-limited .badge-progress-text {
    color: #fbbf24 !important;
}

/* =========================================================
   🌟 แถบคาดมุม Limited Edition
========================================================= */
.limited-ribbon {
    position: absolute;
    top: 22px;
    left: -48px;
    width: 190px;
    background: #FFFAF0; 
    color: #d97706; 
    font-size: 12px; 
    font-weight: 800;
    text-align: center;
    padding: 4px 15px 4px 0; 
    box-sizing: border-box;
    transform: rotate(-45deg);
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08); 
    z-index: 10;
    white-space: nowrap;
    border-top: 1px dashed #fbbf24; 
    border-bottom: 1px dashed #fbbf24;
}

/* =========================================
   📖 ADVENTURE PHOTO BOOK (PC ONLY)
========================================= */
/* ปุ่มเปิด Photo Book */
/* 🌟 ปรับแต่งปุ่ม Travel Wrapped ให้สูงเท่าเพื่อน */
.pc-only-btn {
    width: 100%; 
    height: 36px; /* บังคับความสูงคงที่ 36px */
    padding: 0;   /* ล้าง padding ออกเพื่อให้ตัวหนังสืออยู่กึ่งกลางเป๊ะ */
    display: flex; 
    align-items: center; 
    justify-content: center;
    
    background: linear-gradient(135deg, #8b5cf6, #6d28d9); 
    color: white; 
    border: none;
    border-radius: 12px; /* ความมน 12px เท่ากับปุ่มอื่นๆ */
    font-weight: 600; 
    cursor: pointer; 
    margin-top: 10px;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important; 
    font-size: 14px !important; 
    transition: all 0.2s ease;
}
.pc-only-btn:hover { background: linear-gradient(135deg, #7c3aed, #5b21b6); }

/* Modal พื้นหลังเบลอ */
.photobook-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background: rgba(15, 23, 42, 0.95); backdrop-filter: blur(8px);
    z-index: 99999; display: flex; align-items: center; justify-content: center;
    opacity: 0; pointer-events: none; transition: opacity 0.3s ease;
}
.photobook-modal.show { opacity: 1; pointer-events: auto; }

.photobook-container {
    width: 95vw; 
    max-width: 1800px;
    height: 95vh;
    background: #f8fafc; /* ☀️ โหมดสว่าง: สีเทาอ่อนๆ สะอาดตา */
    border-radius: 16px; 
    padding: 14px 24px 24px 24px; 
    padding-right: 150px; 
    box-sizing: border-box;
    display: flex; 
    flex-direction: column; 
    gap: 12px; 
    position: relative;
    border: 1px solid #e2e8f0; /* ☀️ โหมดสว่าง: กรอบสีเทาอ่อน */
    margin: 0; 
}

/* 🌙 โหมดมืด: กลับมาเป็นสีกรมท่า (Slate) */
body.dark-mode .photobook-container {
    background: #1e293b; 
    border-color: #334155; 
}

/* Header และปุ่ม X */
.book-header { 
    display: flex; justify-content: space-between; align-items: center;
    color: #0f172a; /* ☀️ โหมดสว่าง: ตัวอักษรสีเข้ม */
    font-size: 22px; font-weight: bold; font-family: 'Noto Sans Thai', sans-serif;
    width: 100%; box-sizing: border-box;
    padding-right: 0;
}

body.dark-mode .book-header {
    color: #f8fafc; /* 🌙 โหมดมืด: ตัวอักษรสีขาว */
}

/* 🌟 ล็อกชื่อสมุดภาพ (Memory Journey Book) ไม่ให้โดนบีบจนตกบรรทัด */
.book-header > :first-child {
    white-space: nowrap !important; /* ห้ามปัดตกบรรทัด */
    flex-shrink: 0 !important; /* ห้ามถูกบีบให้หดเล็กลง */
}

.book-search-input {
    width: 330px; /* 🌟 1. ขยายความกว้างเพิ่มขึ้น (จากเดิม 250px) */
    margin-right: -80px; /* 🌟 2. ดันกล่องให้ล้นไปทางขวา เติมพื้นที่ว่างจนเกือบถึงปุ่ม X */
    padding: 8px 14px; 
    border-radius: 999px; 
    border: 1px solid #cbd5e1;
    background: #ffffff; /* ☀️ โหมดสว่าง: พื้นหลังขาว */
    color: #0f172a;      /* ☀️ โหมดสว่าง: ตัวอักษรดำ */
    font-size: 14px; 
    outline: none;
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
    transition: all 0.3s ease; /* 🌟 3. เพิ่มเอฟเฟกต์ให้สมูทเวลาคลิก */
}

.book-search-input:focus { 
    border-color: #3b82f6; 
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); 
    width: 345px; /* 🌟 ลูกเล่นเสริม: พอกดพิมพ์ จะขยายยาวขึ้นอีกนิดนึงเพื่อให้อ่านง่าย */
    margin-right: -95px;
}

body.dark-mode .book-search-input {
    border-color: #334155;
    background: rgba(15, 23, 42, 0.5); /* 🌙 โหมดมืด */
    color: #f8fafc; 
}

/* Header และปุ่ม X */
.book-close { 
    position: absolute; 
    top: 25px;   /* 🌟 ขยับตรงนี้ ดันจาก 14px ลงมาเป็น 22px ให้อยู่กึ่งกลางแนว Y */
    right: 20px; 
    background: #e2e8f0; /* ☀️ โหมดสว่าง: พื้นหลังปุ่มสีสว่าง */
    color: #64748b;      /* ☀️ โหมดสว่าง: ไอคอนกากบาทสีเทาเข้ม */
    border: none; 
    width: 36px; height: 36px; border-radius: 50%; font-size: 16px; cursor: pointer; 
    transition: 0.2s; display: flex; justify-content: center; align-items: center; z-index: 100;
}
.book-close:hover { background: #ef4444; color: white; transform: scale(1.1); }

body.dark-mode .book-close {
    background: #334155; /* 🌙 โหมดมืด */
    color: #f8fafc; 
}
.book-close:hover { background: #ef4444; transform: scale(1.1); }

/* =========================================
   🌟 แผนกจัดหน้ากระดาษ
========================================= */
/* สันหนังสือและหน้ากระดาษ */
.book-spread {
    display: flex; 
    flex: 1;
    min-height: 0;
    background: #e2e8f0; border-radius: 8px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); overflow: hidden;
}

.book-page {
    flex: 1; background: #ffffff; 
    padding: 10px; 
    display: flex; flex-direction: column; gap: 10px;
    overflow: hidden; 
    box-sizing: border-box;
    /* transition: opacity 0.2s ease-in-out; */
}

.left-page { border-right: 1px solid #cbd5e1; box-shadow: inset -15px 0 20px -15px rgba(0,0,0,0.3); }
.right-page { border-left: 1px solid #f8fafc; box-shadow: inset 15px 0 20px -15px rgba(0,0,0,0.3); }

/* 🌟 กล่องรูปภาพ */
.page-photo-grid {
    width: 100%; 
    flex: 1;
    min-height: 0;
    display: grid; gap: 6px; 
}

.photo-cell { 
    width: 100%; height: 100%; min-height: 0; border-radius: 8px; overflow: hidden; 
    box-shadow: 0 2px 6px rgba(0,0,0,0.15); background: #e2e8f0; 
}

.photo-cell img { 
    width: 100%; 
    height: 100%; 
    object-fit: cover; 
    display: block; 
    opacity: 0; 
    transition: opacity 0.5s ease-in-out, transform 0.4s ease; /* เพิ่ม transition ให้ความสว่าง */
}

.photo-cell img.loaded {
    opacity: 1;
}

.photo-cell:hover img.loaded { 
    transform: scale(1.04); 
}

/* Grid Layouts */
.grid-photos-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
.grid-photos-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
.grid-photos-3 { grid-template-columns: 1fr 1fr; grid-template-rows: 2fr 1fr; } 
.grid-photos-3 .photo-cell:first-child { grid-column: 1 / -1; }
.grid-photos-4 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; }
.grid-photos-5 { grid-template-columns: repeat(6, 1fr); grid-template-rows: 1fr 1fr; }
.grid-photos-5 .photo-cell:nth-child(1), .grid-photos-5 .photo-cell:nth-child(2) { grid-column: span 3; } 
.grid-photos-5 .photo-cell:nth-child(n+3) { grid-column: span 2; }
.grid-photos-6 { grid-template-columns: 1fr 1fr 1fr; grid-template-rows: 1fr 1fr; } 

/* 🌟 กล่องข้อความด้านล่าง */
.page-text-block {
    width: 100%;
    height: 90px;
    flex: 0 0 90px;
    display: flex; 
    flex-direction: column; 
    justify-content: flex-start;
    padding-top: 12px;
    box-sizing: border-box;
}

.page-meta { 
    font-size: 14px; color: #475569; font-weight: bold; text-align: center; 
    border-bottom: 2px dashed #cbd5e1; 
    padding-bottom: 8px; 
    margin: 0 0 8px 0; 
    flex-shrink: 0;
}

.page-caption { 
    font-size: 14px; color: #334155; line-height: 1.5; text-align: center; font-style: italic; 
    margin: 0; 
    display: -webkit-box; 
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical; 
    overflow: hidden;
    height: 42px;
}

.book-province-tabs {
    position: absolute; right: 16px; top: 76px; bottom: 24px; width: 120px; 
    display: flex; flex-direction: column; gap: 6px; z-index: 99;
    overflow-y: auto; scrollbar-width: none; outline: none;
}

.province-tab:focus, .book-province-tabs:focus {
    outline: none;
}

.book-province-tabs::-webkit-scrollbar { display: none; }

.province-tab {
    background: #ffffff; /* ☀️ โหมดสว่าง */
    color: #475569;      /* ☀️ โหมดสว่าง */
    padding: 0 12px; border-radius: 8px;
    cursor: pointer; font-weight: 600; font-size: 13px; box-shadow: 2px 2px 8px rgba(0,0,0,0.05); 
    transition: all 0.2s ease; border: 1px solid #cbd5e1; 
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; 
    width: 100%; box-sizing: border-box;
    flex-shrink: 0; min-height: 40px; 
    display: flex; align-items: center; justify-content: flex-start;
}

.province-tab:hover { background: #f1f5f9; transform: scale(1.05); } 
.province-tab.active { background: #3b82f6; color: white; border-color: #2563eb; transform: scale(1.05); }

/* ☀️ โหมดสว่าง: ปุ่มเปลี่ยนปี และปุ่มตัวเลขเปลี่ยนหน้า */
.book-top-btn, .book-controls button.page-num-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1 !important;
    color: #475569;
}
.book-top-btn:hover, .book-controls button.page-num-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
}
.book-top-btn.btn-year.active, .book-controls button.page-num-btn.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6 !important;
}

/* 🌙 โหมดมืด: ปุ่มเปลี่ยนปี และปุ่มตัวเลขเปลี่ยนหน้า */
body.dark-mode .book-top-btn, body.dark-mode .book-controls button.page-num-btn {
    background: rgba(30, 41, 59, 0.6);
    border-color: #475569 !important;
    color: #94a3b8;
}
body.dark-mode .book-top-btn:hover, body.dark-mode .book-controls button.page-num-btn:hover {
    background: #475569;
    color: #f8fafc;
}
body.dark-mode .book-top-btn.btn-year.active, body.dark-mode .book-controls button.page-num-btn.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #2563eb !important;
}

body.dark-mode .province-tab {
    background: #334155; /* 🌙 โหมดมืด */
    color: white; 
    border-color: #475569;
    box-shadow: 2px 2px 8px rgba(0,0,0,0.2); 
}
body.dark-mode .province-tab:hover { background: #475569; }
body.dark-mode .province-tab.active { background: #3b82f6; border-color: #2563eb; }

.book-controls { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    color: #cbd5e1; 
    font-family: 'Noto Sans Thai', sans-serif; 
    margin-top: 14px; /* 🌟 เพิ่มระยะห่าง ดันปุ่มทั้งหมดลงมาให้ห่างจากสมุด */
}

.book-controls button { 
    background: #3b82f6; color: white; border: none; padding: 10px 24px; border-radius: 12px; cursor: pointer; font-weight: 600; font-size: 14px; font-family: inherit; transition: 0.2s; box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3); 
}

.book-controls button:disabled { background: #475569; color: #94a3b8; cursor: not-allowed; box-shadow: none; opacity: 0.7; }
.book-controls button:not(:disabled):hover { background: #2563eb; transform: translateY(-2px); }

/* 🌟 เพิ่มแอนิเมชัน Fade-in ให้เปลี่ยนหน้าได้ละมุนตาขึ้น พรางตาช่วงรอโหลดรูป */
.page-fade-in {
    animation: bookFadeIn 0.3s ease-out forwards;
}

@keyframes bookFadeIn {
    0% { opacity: 0; }
    100% { opacity: 1; }
}

/* 🌟 จัด Layout กลุ่ม Indicator ให้รองรับปุ่มตัวเลข */
#bookPageIndicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 15px; 
    font-weight: bold; 
    color: #f8fafc;
}

.book-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

/* =========================================
   🌟 Paginator (ปุ่มตัวเลขเปลี่ยนหน้า)
========================================= */
.book-controls button.page-num-btn {
    background: #ffffff;
    color: #475569;
    border: 1px solid #cbd5e1;
    padding: 0;
    width: 37px;
    height: 37px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: none; 
    transition: all 0.2s ease;
}

.book-controls button.page-num-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    transform: translateY(-2px);
}

.book-controls button.page-num-btn.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #2563eb;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.4);
    transform: none;
    cursor: default;
}

.page-dots {
    color: #64748b;
    font-weight: 800;
    letter-spacing: 1px;
    padding: 0 6px;
    font-size: 16px;
    user-select: none;
}

/* =========================================
   🌟 แถบเมนูด้านบน (ปุ่มปี พ.ศ.)
========================================= */
.book-year-filter {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: nowrap; 
    overflow-x: auto; 
    scrollbar-width: none; 
    padding: 10px;
    margin: 0 40px; 
    flex: 1 1 auto; 
    min-width: 0; 
    max-width: 65%; 
}

.book-year-filter::after {
    content: '';
    margin-right: auto;
}

.book-year-filter::-webkit-scrollbar { display: none; }

.book-top-btn {
    background: #ffffff;
    border: 1px solid #cbd5e1 !important;
    outline: none !important;
    color: #475569;
    padding: 8px 16px;
    border-radius: 20px; 
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 14px; 
    font-family: 'Noto Sans Thai', sans-serif !important;
}

.book-top-btn:focus, 
.book-top-btn:active, 
.book-top-btn:focus-visible {
    outline: none !important;
}

.book-top-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    transform: translateY(-2px);
}

/* ปุ่มปีที่ถูกเลือกอยู่ */
.book-top-btn.btn-year.active {
    background: #3b82f6;
    color: #ffffff;
    border-color: #3b82f6 !important;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.3);
}

/* ปุ่มสุ่มความทรงจำ */
.book-top-btn.btn-random {
    background: linear-gradient(135deg, #8b5cf6, #6d28d9);
    color: #ffffff;
    box-shadow: 0 2px 6px rgba(139, 92, 246, 0.3);
}
.book-top-btn.btn-random:hover {
    background: linear-gradient(135deg, #a78bfa, #7c3aed);
    box-shadow: 0 4px 12px rgba(139, 92, 246, 0.5);
    transform: translateY(-2px) scale(1.02);
}

/* 🌟 ปรับเส้นคั่นให้สว่างขึ้น จะได้เห็นชัดเจนบนพื้นหลังสีมืด */
.year-divider {
    width: 2px;
    height: 30px;
    background: #64748b;
    margin: 0 6px;
    border-radius: 2px;
    flex-shrink: 0;
}

/* =========================================
   🌟 ปุ่ม X (Clear) ในช่องค้นหาสมุดภาพ
========================================= */
.book-search-input::-webkit-search-cancel-button {
    -webkit-appearance: none;
    appearance: none;
    height: 16px;
    width: 16px;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'><line x1='18' y1='6' x2='6' y2='18'></line><line x1='6' y1='6' x2='18' y2='18'></line></svg>");
    background-size: contain;
    cursor: pointer;
    opacity: 0.6;
    transition: 0.2s;
}
.book-search-input::-webkit-search-cancel-button:hover {
    opacity: 1;
}

/* 🌟 ซ่อนปุ่ม Photo Book บนมือถือและแท็บเล็ต (ทั้งแนวตั้ง/แนวนอน) */
@media (max-width: 1024px) {
    .pc-only-btn { display: none !important; }
}


/* =========================================
   🔒 PIN LOCK OVERLAY
========================================= */
.pin-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.4);
    backdrop-filter: blur(15px);
    -webkit-backdrop-filter: blur(15px);
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    transition: opacity 0.4s ease-out;
}

.pin-modal {
    background: rgba(255, 255, 255, 0.95);
    padding: 50px 30px; /* 🌟 บน-ล่าง 70px, ซ้าย-ขวา 30px */
    border-radius: 24px;
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
    text-align: center;
    width: 320px;
    font-family: 'Noto Sans Thai', sans-serif !important;
    position: relative;
}

body.dark-mode .pin-modal {
    background: rgba(30, 41, 59, 0.95);
    color: #f8fafc;
    border: 1px solid #334155;
}

.pin-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 8px 0;
}
.pin-subtitle {
    font-size: 14px;
    color: #64748b;
    margin: 0 0 24px 0;
}

/* เปลี่ยนตัวเลขเป็นจุดวงกลมสีดำ */
.pin-box.filled::after {
    content: '•';
    color: #1e293b;
}

.pin-input-container {
    position: relative;
    cursor: pointer;
	margin-bottom: 0;
}

.hidden-pin-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    caret-color: transparent;
}

/* กล่อง PIN 6 หลัก */
.pin-display {
    display: flex;
    justify-content: center;
    gap: 10px;
}
.pin-box {
    width: 40px;
    height: 48px;
    border-radius: 10px;
    border: 2px solid #cbd5e1;
    background: #f8fafc;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    font-weight: bold;
    transition: all 0.2s ease;
}
.pin-box.filled {
    border-color: #3b82f6;
    background: #eff6ff;
}
.pin-box.filled::after {
    content: '•';
    color: #1e293b;
}

/* อนิเมชันสั่นเมื่อกรอกผิด */
.pin-display.error {
    animation: shake 0.4s cubic-bezier(.36,.07,.19,.97) both;
}
.pin-box.error-box {
    border-color: #ef4444 !important;
    background: #fef2f2 !important;
}

.pin-error-msg {
    color: #ef4444;
    font-size: 13px;
    height: 20px;
    opacity: 0;
    transition: opacity 0.2s;
	position: absolute;
    bottom: 25px; 
    left: 0;
    width: 100%;
}

@keyframes shake {
    10%, 90% { transform: translate3d(-1px, 0, 0); }
    20%, 80% { transform: translate3d(2px, 0, 0); }
    30%, 50%, 70% { transform: translate3d(-4px, 0, 0); }
    40%, 60% { transform: translate3d(4px, 0, 0); }
}

.numpad-btn:active { background: #cbd5e1; transform: scale(0.95); }
.numpad-btn.delete { color: #ef4444; font-size: 20px; }
.numpad-btn.empty { background: transparent; pointer-events: none; }

body.dark-mode .numpad-btn { background: #1e293b; color: #f8fafc; }
body.dark-mode .numpad-btn:active { background: #334155; }
body.dark-mode .pin-box { background: #0f172a; border-color: #475569; }
body.dark-mode .pin-box.filled { border-color: #3b82f6; background: rgba(59, 130, 246, 0.1); }
body.dark-mode .pin-box.filled::after { color: #f8fafc; }



/* --- ส่วนกล่องแจ้งเตือนหมดเวลา --- */
.timeout-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

.timeout-overlay.show {
  opacity: 1;
  visibility: visible;
}

.timeout-modal {
  background: #2a2a2a; /* สีพื้นหลังกล่อง (ปรับเป็นสีสว่างได้ถ้าเว็บคุณโทนสว่าง) */
  color: #fff;
  padding: 30px 25px;
  border-radius: 20px;
  text-align: center;
  width: 90%;
  max-width: 320px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
  transform: scale(0.8);
  transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.timeout-overlay.show .timeout-modal {
  transform: scale(1);
}

.timeout-icon {
  font-size: 50px;
  margin-bottom: 15px;
  animation: tickTock 2s infinite ease-in-out;
}

.timeout-title {
  font-size: 20px;
  font-weight: 600;
  margin: 0 0 10px 0;
  color: #ffb84d; /* สีส้มทองช่วยดึงสายตา */
}

.timeout-desc {
  font-size: 14px;
  color: #cccccc;
  line-height: 1.5;
  margin-bottom: 25px;
}

.timeout-btn {
  background: #4caf50;
  color: white;
  border: none;
  padding: 12px 30px;
  font-size: 16px;
  font-weight: 600;
  border-radius: 50px;
  cursor: pointer;
  width: 100%;
  transition: background 0.2s ease, transform 0.1s ease;
}

.timeout-btn:active {
  transform: scale(0.95);
  background: #388e3c;
}

/* แอนิเมชันนาฬิกาขยับนิดๆ */
@keyframes tickTock {
  0%, 100% { transform: rotate(-10deg); }
  50% { transform: rotate(10deg); }
}

/* Travel Expense Tracker (ระบบบันทึกค่าใช้จ่าย) */
.note-expense {
    width: 100%;
    margin-bottom: 10px;
    padding: 10px;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    font-family: 'Noto Sans Thai', sans-serif;
    font-size: 14px;
    box-sizing: border-box;
    background-color: #fafafa;
    color: #1e293b;
    outline: none;
    transition: all 0.3s ease;
    
    /* ซ่อนลูกศรขึ้น/ลง ใน Firefox */
    -moz-appearance: textfield;
}

.note-expense::placeholder {
    font-size: 14px; 
}

.note-expense::-webkit-outer-spin-button,
.note-expense::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.note-expense:focus {
    border-color: #3b82f6;
}

.dark-mode .note-expense {
    background-color: #0f172a;
    border: 1px solid #334155;
    color: #f8fafc;
}

.dark-mode .note-expense::placeholder {
    color: #94a3b8; 
}

.dark-mode .note-expense:focus {
    border-color: #3b82f6;     
    outline: none;
}

/* -------------------------------------------- */


/* 🌟 ซ่อนปุ่มต่างๆ บนมือถือ และให้แสดงเฉพาะบน PC (หน้าจอกว้าง 1024px ขึ้นไป) */
.pc-only-btn { display: none !important; }
@media (min-width: 1024px) {
    .pc-only-btn { display: flex !important; }
}

/* 🌟 สไตล์หน้าต่าง Wrapped (รองรับ Light / Dark Mode) */
.wrapped-modal {
    display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6); z-index: 10000;
    justify-content: center; align-items: center;
    backdrop-filter: blur(8px); opacity: 0; transition: opacity 0.4s ease;
}
.wrapped-modal.show { display: flex; opacity: 1; }

/* ☀️ โหมดสว่าง (ค่าเริ่มต้น) */
.wrapped-card {
    background: linear-gradient(135deg, #ffffff, #f8fafc); 
    border: 1px solid #e2e8f0;
    border-radius: 24px; padding: 40px; width: 90%; max-width: 500px;
    color: #0f172a; text-align: center; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.15);
    position: relative; transform: scale(0.9); transition: transform 0.4s ease;
}
.wrapped-modal.show .wrapped-card { transform: scale(1); }
.wrapped-close {
    position: absolute; top: 15px; right: 20px; background: none; border: none;
    color: #64748b; font-size: 24px; cursor: pointer; transition: color 0.2s;
}
.wrapped-close:hover { color: #ef4444; }
.wrapped-year { 
    font-size: 72px; font-weight: 800; margin-bottom: 5px; line-height: 1;
    background: linear-gradient(to right, #10b981, #3b82f6);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.wrapped-title { font-size: 20px; margin-bottom: 30px; color: #475569; font-weight: 600; }
.wrapped-stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.wrapped-stat-box { 
    background: #f1f5f9; padding: 20px; border-radius: 16px; 
    border: 1px solid #e2e8f0; display: flex; flex-direction: column; justify-content: center;
}
.wrapped-stat-box h4 { margin: 0 0 8px 0; color: #64748b; font-size: 18px; font-weight: 600; }
.wrapped-stat-box .val { font-size: 28px; font-weight: 700; color: #64748b; margin: 0; line-height: 1.2; }
.wrapped-stat-box.full { grid-column: span 2; background: linear-gradient(135deg, #ecfdf5, #eff6ff); border-color: #a7f3d0; }
.wrapped-stat-box.full .val { color: #059669; font-size: 36px; }

/* 🌙 โหมดมืด (Dark Mode) */
body.dark-mode .wrapped-card {
    background: linear-gradient(135deg, #1e293b, #0f172a); 
    border-color: #334155;
    color: white; box-shadow: 0 25px 50px -12px rgba(0,0,0,0.5);
}
body.dark-mode .wrapped-close { color: #94a3b8; }
body.dark-mode .wrapped-close:hover { color: white; }
body.dark-mode .wrapped-title { color: #cbd5e1; font-weight: 500; }
body.dark-mode .wrapped-stat-box { 
    background: rgba(255,255,255,0.05); 
    border-color: rgba(255,255,255,0.1);
}
body.dark-mode .wrapped-stat-box h4 { color: #94a3b8; }
body.dark-mode .wrapped-stat-box .val { color: white; }
body.dark-mode .wrapped-stat-box.full { background: linear-gradient(135deg, rgba(16,185,129,0.1), rgba(59,130,246,0.1)); border-color: rgba(16,185,129,0.3); }
body.dark-mode .wrapped-stat-box.full .val { color: #10b981; }


/* =========================================
   💸 EXPENSE SUMMARY BOX (Light & Dark Mode)
========================================= */
/* ☀️ โหมดสว่าง (Light Mode) */
.expense-summary-box {
    background: transparent; /* เอาพื้นหลังสีแดงออก */
    border: none;            /* เอากรอบสีแดงออก */
    padding: 6px 10px;       /* ปรับระยะห่างให้เท่าแถวอื่น */
    margin-top: 0;           /* เอาช่องว่างด้านบนออก */
}
.expense-summary-box .expense-label {
    color: #111827;          /* ปรับสีตัวอักษรเป็นสีดำปกติ */
    font-weight: 500;
}
.expense-summary-box .expense-val {
    color: #0f172a;          /* ปรับสีตัวเลขเป็นสีดำปกติ */
    font-weight: 600;
    font-size: 14px; 
}

/* 🌙 โหมดมืด (Dark Mode) */
body.dark-mode .expense-summary-box {
    background: transparent;
    border: none;
}
body.dark-mode .expense-summary-box .expense-label,
body.dark-mode .expense-summary-box .expense-val {
    color: #e2e8f0 !important; /* ปรับสีตัวอักษรและตัวเลขให้เป็นสีสว่างในโหมดมืด */
}

/* ---Quick Check-in--- */

/* 🌟 ปรับความสูงปุ่ม Quick Check-in ให้เท่ากับปุ่มอื่นๆ */
.quick-checkin-btn {
    background: linear-gradient(135deg, #f97316, #ea580c);
    margin-top: 10px;
    border: none;
    height: 36px;
    padding: 0;
    border-radius: 12px;
    color: white;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: 0.2s;
    width: 100%;
    box-shadow: 0 4px 10px rgba(234, 88, 12, 0.2);
}

.quick-checkin-btn:hover { 
    background: linear-gradient(135deg, #ea580c, #c2410c); 
    transform: translateY(-2px); 
    box-shadow: 0 6px 15px rgba(234, 88, 12, 0.35); 
}

/* ------ปุ่ม X (ปิด Popup) ของ Leaflet---- */

/* 🌟 ปรับแต่งปุ่ม X (ปิด Popup) ของ Leaflet ให้สวยและกดง่ายขึ้น */
.leaflet-popup-close-button {
    position: absolute !important;
    top: 8px !important; 
    right: 10px !important;
    width: 28px !important;
    height: 28px !important;
    background-color: #f1f5f9 !important; 
    color: transparent !important; 
    border-radius: 50% !important; 
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.15) !important;
    transition: all 0.2s ease !important;
    /* ใช้ไอคอน SVG สวยๆ แทนตัวอักษร */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
    background-size: 13px 13px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* 🌟 เอฟเฟกต์ตอนเอาเมาส์ชี้ */
.leaflet-popup-close-button:hover {
    background-color: #ef4444 !important; /* เปลี่ยนเป็นสีแดง */
    transform: scale(1.1);
    /* เปลี่ยนไอคอนเป็นสีขาวตอนชี้ */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}

/* 🌟 ซ่อนสแปนย่อยที่ Leaflet สร้างแถมมาให้ */
.leaflet-popup-close-button span {
    display: none !important;
}

/* 🌙 รองรับ Dark Mode ให้สีกลมกลืน */
body.dark-mode .leaflet-popup-close-button {
    background-color: #334155 !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23e2e8f0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}
body.dark-mode .leaflet-popup-close-button:hover {
    background-color: #ef4444 !important;
    border-color: #ef4444 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'%3E%3C/line%3E%3Cline x1='6' y1='6' x2='18' y2='18'%3E%3C/line%3E%3C/svg%3E") !important;
}


/* -------------------- */

/* หน้าต่างเลือกสถานที่ */
.place-list-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 300px;
    overflow-y: auto;
    margin: 15px 0;
    
    /* 🌟 เพิ่ม Padding เผื่อพื้นที่ให้เอฟเฟกต์ปุ่มเด้ง ไม่ให้ขอบโดนตัด */
    padding-top: 2px !important;
    padding-bottom: 2px !important;
    padding-left: 2px !important;
    padding-right: 6px !important; /* เว้นที่ให้ Scrollbar */
}

/* ปรับแต่งกล่องเลือกสถานที่ให้ดูพรีเมียมขึ้น */
.place-option-btn {
    width: 100%;
    padding: 14px 18px; /* เพิ่มพื้นที่กด */
    border: 1px solid #f1f5f9;
    border-radius: 12px;
    background: #ffffff;
    text-align: left;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    font-family: 'Noto Sans Thai', sans-serif !important; /* บังคับใช้ฟอนต์หลัก */
    margin-bottom: 2px;
}

.place-option-btn:hover {
    background: #eff6ff;
    border-color: #3b82f6;
    transform: translateY(-1px);
    box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1);
}

/* ปรับแต่ง Scrollbar ให้ดู Minimal (สำหรับ Chrome/Safari) */
.place-list-container::-webkit-scrollbar {
    width: 6px;
}
.place-list-container::-webkit-scrollbar-track {
    background: #f1f5f9;
    border-radius: 10px;
}
.place-list-container::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 10px;
}

/* ปรับแต่งกล่อง Modal เลือกสถานที่ให้รองรับทุกหน้าจอ */
.confirm-card.selection-card {
    width: 92%;           /* กว้างเกือบเต็มจอในมือถือ */
    max-width: 420px;     /* แต่ห้ามกว้างเกิน 420px (ให้ดูสวยพอดี) */
    padding: 24px 20px;   /* ระยะห่างด้านใน */
    border-radius: 24px;  /* ขอบโค้งมนแบบสมัยใหม่ */
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    max-height: 90vh;     /* ห้ามสูงเกิน 90% ของความสูงหน้าจอ */
    display: flex;
    flex-direction: column;
	padding-top: 16px !important;    /* ลดจากเดิม 24px เหลือ 16px */
    padding-bottom: 20px !important;
}

/* 📱 แก้ไขเป็นพิเศษสำหรับมือถือแนวนอน (Landscape) */
@media (max-height: 500px) {
    .confirm-card.selection-card {
        padding: 15px 20px;
        border-radius: 18px;
    }
    
    .confirm-card.selection-card h3 {
        font-size: 18px;
        margin-bottom: 2px;
		margin-top: 0 !important;
        margin-bottom: 4px !important;
    }
    
    .place-list-container {
        max-height: 180px; /* ลดความสูงของรายการลงเพื่อให้กดปุ่มยกเลิกได้ง่าย */
    }
}

/* =========================================
   🌙 DARK MODE: SELECTION MODAL FIX
   จัดการหน้าต่างเลือกสถานที่ในโหมดมืด
========================================= */

/* 1. จัดการพื้นหลังกล่อง Modal และหัวข้อในโหมดมืด */
body.dark-mode .confirm-card.selection-card {
    background: #1e293b !important;
    color: #f8fafc !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .confirm-card.selection-card h3 {
    color: #f8fafc !important;
}

/* 2. จัดการปุ่มเลือกสถานที่ในโหมดมืด */
body.dark-mode .place-option-btn {
    background: #0f172a !important;
    border-color: #334155 !important;
}

body.dark-mode .place-option-btn:hover {
    background: #1e3a8a !important; /* สีน้ำเงินเข้มตอน Hover */
    border-color: #3b82f6 !important;
}

body.dark-mode .place-option-btn .p-name {
    color: #f8fafc !important;
}

body.dark-mode .place-option-btn .p-addr {
    color: #94a3b8 !important;
}

/* 3. จัดการปุ่มยกเลิกในโหมดมืด และบังคับฟอนต์ */
#cancelSelect {
    font-family: 'Noto Sans Thai', system-ui, sans-serif !important;
	width: 100%;
    min-height: 48px;
    border: none;
    background: #f8fafc;
    color: #64748b;
    border-radius: 14px;
    font-weight: 600 !important;
    font-size: 17px;
    transition: 0.2s;
}

body.dark-mode #cancelSelect {
    background: #334155 !important;
    color: #cbd5e1 !important;
}

body.dark-mode #cancelSelect:hover {
    background: #475569 !important;
    color: #ffffff !important;
}

/* 4. ปรับสี Scrollbar ในโหมดมืดให้เข้ากับดีไซน์ */
body.dark-mode .place-list-container::-webkit-scrollbar-track {
    background: #0f172a !important;
}

body.dark-mode .place-list-container::-webkit-scrollbar-thumb {
    background: #475569 !important;
}

/* =========================================
   📍 ปรับกระชับพื้นที่ด้านบนของหน้าต่างเลือกสถานที่
========================================= */

/* 1. ลดระยะห่างด้านบนของกล่อง Modal ทั้งหมด */
.confirm-card.selection-card {
    padding-top: 30px !important;    /* บีบขอบบนให้แคบลงอีก */
}

/* 2. จัดการไอคอน 📍 (ที่เขียน Inline Style มาจาก JS) */
.selection-card div[style*="font-size: 35px"],
.selection-card div[style*="font-size: 40px"],
.selection-card div[style*="font-size: 50px"] {
    margin-top: 0 !important;
    margin-bottom: 2px !important;  /* ลดช่องว่างใต้ไอคอน */
    line-height: 1 !important;
    font-size: 30px !important;     /* ย่อขนาดไอคอนลงเล็กน้อย */
}

/* 3. จัดการหัวข้อ "เลือกสถานที่เช็คอิน" */
.selection-card h3 {
    margin-top: 0 !important;
    margin-bottom: 4px !important;  /* ลดระยะห่างใต้หัวข้อ */
    line-height: 1.2 !important;
    font-size: 24px !important;
}

/* 4. จัดการคำอธิบาย "ใกล้กับจังหวัด: ..." */
.selection-card p {
    margin-top: 0 !important;
    margin-bottom: 12px !important; /* ลดระยะห่างก่อนถึงรายการสถานที่ */
    line-height: 1.2 !important;
	font-size: 16px !important;
}

/* 5. ปรับฟอนต์ "ชื่อสถานที่" (ตัวหนาด้านบน) */
.place-option-btn .p-name {
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 15.5px;  /* ปรับขนาดชื่อสถานที่ */
    font-weight: 600;   /* ปรับความหนา (400-700) */
    color: #0f172a;     /* สีเข้มเด่นชัด */
}

/* 6. ปรับฟอนต์ "ที่อยู่/ตำบล" (ตัวเล็กด้านล่าง) */
.place-option-btn .p-addr {
    font-family: 'Noto Sans Thai', sans-serif !important;
    font-size: 13px;    /* ปรับขนาดที่อยู่ */
    font-weight: 400;   /* ปรับความบาง */
    color: #64748b;     /* สีเทาเพื่อให้ดูเป็นรองจากชื่อสถานที่ */
}

/* =========================================
   💻 ปรับความสูงกล่องเลือกสถานที่ (เฉพาะบน PC)
========================================= */
@media (min-width: 1024px) {
    /* ยืดความสูงของกล่องรายการสถานที่ */
    .place-list-container {
        max-height: 50vh !important; /* ยืดให้สูงได้ถึง 50% ของหน้าจอ (หรือจะเปลี่ยนเป็น 500px ก็ได้ครับ) */
    }
    
    /* (ออปชันเสริม) ปรับกล่องให้กว้างขึ้นอีกนิดนึง เพื่อให้สมส่วนกับความสูงที่เพิ่มขึ้น */
    .confirm-card.selection-card {
        max-width: 480px !important; 
    }
}

/* =========================================
   📱 ปรับขนาดหน้าต่างเลือกสถานที่สำหรับมือถือ (Mobile Fix)
========================================= */

@media (max-width: 768px) {
    /* 1. จัดการขนาดกล่อง Modal สำหรับมือถือแนวตั้ง */
    .confirm-card.selection-card {
        padding: 20px 16px !important;        /* คืนระยะห่างด้านในให้ดูสบายตาขึ้น */
        width: calc(100% - 48px) !important;  /* 🌟 บังคับเว้นขอบซ้าย-ขวา ฝั่งละ 24px */
        max-width: 360px !important;          /* ไม่ให้กว้างเกินไป */
        border-radius: 24px !important;       /* คืนขอบมนๆ ให้กล่องดูเป็นป๊อปอัปสวยๆ */
    }

    /* 2. ลดขนาดหัวข้อ "เลือกสถานที่เช็คอิน" */
    .selection-card h3 {
        font-size: 18px !important;
        margin-bottom: 2px !important;
    }

    /* 3. ลดขนาดคำอธิบาย "ใกล้กับจังหวัด..." */
    .selection-card p {
        font-size: 12.5px !important;
        margin-bottom: 6px !important;
    }

    /* 4. ลดขนาดกล่องและฟอนต์รายการสถานที่ */
    .place-option-btn {
        padding: 10px 14px !important;
    }
    
    .place-option-btn .p-name {
        font-size: 14px !important;    /* ลดชื่อร้านลง */
    }
    
    .place-option-btn .p-addr {
        font-size: 11.5px !important;  /* ลดที่อยู่ลง */
        margin-top: 2px !important;
    }

    /* 5. ย่อขนาดปุ่มยกเลิกให้กะทัดรัดขึ้น */
    #cancelSelect {
        font-size: 14px !important;
        min-height: 42px !important;
        border-radius: 12px !important;
        margin-top: 6px !important;
    }
    
    /* 6. ให้รายการเลื่อนได้กำลังดีในแนวตั้ง */
    .place-list-container {
        max-height: 45vh !important;
    }
}

/* 📱 พิเศษสำหรับมือถือ "แนวนอน" (Landscape ที่หน้าจอเตี้ยๆ) */
@media (max-height: 500px) {
    .place-list-container {
        max-height: 140px !important; /* บีบให้เตี้ยลงอีกเพื่อไม่ให้ปุ่มยกเลิกตกขอบ */
    }
    .selection-card h3 {
        font-size: 16px !important;
    }
    .selection-card p {
        font-size: 12px !important;
        margin-bottom: 6px !important;
    }
    .place-option-btn {
        padding: 8px 12px !important;
    }
    #cancelSelect {
        min-height: 36px !important;
    }
}

/* =========================================================
   🌙 DARK MODE FIX: กล่อง Popup (แชร์ลิงก์ / เช็คอินสำเร็จ)
   ========================================================= */
body.dark-mode .confirm-card {
    background-color: #1e293b !important;
    border: 1px solid #334155 !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5) !important;
}

body.dark-mode .confirm-card .confirm-title {
    color: #f8fafc !important;
}

body.dark-mode .confirm-card .confirm-desc {
    color: #cbd5e1 !important;
}

body.dark-mode .confirm-card input[type="text"] {
    background-color: #0f172a !important;
    color: #60a5fa !important;
    border-color: #475569 !important;
}

/* ----------------- Keyframes เครื่องบิน หน้า login -----------------*/
/* คลาสสำหรับเรียกใช้ Animation */
.flying-plane {
    /* ใช้เวลา 3 วินาทีต่อ 1 รอบ และเล่นวนไปเรื่อยๆ */
    animation: flyThrough 3s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* สร้าง Keyframes ให้พุ่งทะลุหายไปแล้วโผล่ใหม่ */
@keyframes flyThrough {
    0% {
        /* วินาทีที่ 0: เครื่องบินโผล่มาจากมุมซ้ายล่าง แบบจางๆ และลำเล็กๆ */
        transform: translate(-40px, 40px) scale(0.8);
        opacity: 0;
    }
    15% {
        /* วินาทีที่ 0.45: บินมาอยู่ตรงกลาง โชว์ชัดเจน */
        transform: translate(0px, 0px) scale(1);
        opacity: 1;
    }
    75% {
        /* วินาทีที่ 2.25: บินเอื่อยๆ อยู่กับที่ให้คนมองเห็นพักนึง */
        transform: translate(8px, -8px) scale(1);
        opacity: 1;
    }
    100% {
        /* วินาทีที่ 3: พุ่งทะยานออกไปทางขวาบนให้เล็กลงแล้วจางหายไป! */
        transform: translate(60px, -60px) scale(0.5);
        opacity: 0;
    }
}DARK MODE SCROLLBAR OVERRIDES

/* ==============================================================
   TRIP MODAL & DARK MODE OVERRIDES
============================================================== */
/* ค่าสีเริ่มต้นสำหรับกล่อง Trip Modal (โหมดสว่าง) */
:root {
  --bg-color: #ffffff;
  --text-color: #1e293b;
  --sub-text-color: #64748b;
  --border-color: #e2e8f0;
  --bg-hover: #f1f5f9;
}

/* สลับสีเมื่ออยู่ในโหมดมืด (Dark Mode) */
body.dark-mode {
  --bg-color: #1e293b;
  --text-color: #f1f5f9;
  --sub-text-color: #94a3b8;
  --border-color: #334155;
  --bg-hover: #334155;
}

/* เอฟเฟกต์ตอนชี้เมาส์ในกล่อง Trip */
.trip-item-row:hover {
  background-color: var(--bg-hover);
  border-radius: 8px;
}
.trip-item-row:hover .trip-item-title {
  color: #3b82f6;
}

/* ปรับสีปุ่มปิดใน Dark Mode ให้ชัดขึ้น */
body.dark-mode #closeTripModal {
  background: #334155;
  color: #f1f5f9;
}
body.dark-mode #closeTripModal:hover {
  background: #475569;
}

/* ==============================================================
   DARK MODE SCROLLBAR OVERRIDES
============================================================== */
body.dark-mode ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

body.dark-mode ::-webkit-scrollbar-track {
    background: #1e293b; /* สีพื้นหลังสกรอบาร์ */
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #475569; /* สีแท่งสกอร์บาร์ */
    border-radius: 4px;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #64748b; /* สีแท่งตอนเอาเมาส์ชี้ */
}

/* บังคับสีปุ่มลบ/ปิด ในโหมดมืด */
body.dark-mode #closeTripModal {
    background: #334155;
    color: #f1f5f9;
}
body.dark-mode #closeTripModal:hover {
    background: #475569;
}

/* บังคับให้ขอบกล่องทริปโค้งมนเสมอ ทั้งตอนเอาเมาส์ชี้ และตอนกดเลือก */
.trip-item-row.active-trip,
.trip-item-row:hover {
    border-radius: 12px !important;
    border-bottom-color: transparent !important; /* ซ่อนเส้นขอบล่างตอนถูกเลือกเพื่อความเนียน */
}

/* ปรับขนาดและตำแหน่งของกล่อง "ประวัติทริปทั้งหมด" */
.trip-modal-card {
    max-height: 720px !important; 
    margin: auto !important; 			/* 🌟 ใช้ auto เพื่อให้กล่องดูดเข้าหากึ่งกลางจออัตโนมัติ */
}




/* =========================================================
   🌟 บังคับ Leaflet Popup ให้เป็นกล่อง Modal ลอยกลางจอแบบสมบูรณ์
   ========================================================= */

/* 1. ล้างค่า position: fixed ออก ปล่อยให้ Leaflet ยึดตามพิกัดกลางจอจาก JS */
.leaflet-popup {
    position: absolute !important;
    margin-bottom: 0 !important; 
}

/* 2. ซ่อนติ่งลูกศรชี้ลง */
.leaflet-popup-tip-container {
    display: none !important;
}

/* 3. จัดการกรอบด้านนอก: ความกว้างคงที่ แต่ความสูงยืดหยุ่น */
.leaflet-popup-content-wrapper {
    width: 305px !important; 
    height: auto !important; 
    max-height: 90vh !important; 
    
    /* 🌟 ดันกล่องลงมา 50% เพื่อให้จุดกึ่งกลางของกล่อง ตรงกับพิกัดกลางจอเป๊ะๆ */
    transform: translateY(50%) !important; 
    
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 16px !important;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4) !important;
    background: var(--bg-color, #ffffff) !important;
    overflow: hidden !important; 
    box-sizing: border-box !important;
}

/* 4. จัดการพื้นที่เนื้อหาด้านใน */
.leaflet-popup-content {
    width: 100% !important;
    height: auto !important; 
    max-height: 90vh !important; 
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    overflow-y: auto !important; 
    overflow-x: hidden !important;
    overscroll-behavior: contain; 
}

/* 5. จัดการ .card ด้านในสุด */
.leaflet-popup-content .card {
    width: 100% !important;
    height: auto !important;
    box-sizing: border-box !important;
    padding: 16px !important; 
    margin: 0 !important;
}

/* 6. ปรับแต่ง Scrollbar */
.leaflet-popup-content::-webkit-scrollbar { width: 6px; }
.leaflet-popup-content::-webkit-scrollbar-track { background: transparent; }
.leaflet-popup-content::-webkit-scrollbar-thumb { background: rgba(0, 0, 0, 0.15); border-radius: 10px; }
body.dark-mode .leaflet-popup-content::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.2); }


/* =========================================================
   🌟 จัดระเบียบกล่องพรีวิวรูปภาพ ให้ขยายชิดขอบซ้าย-ขวา 100% เป๊ะๆ (Final)
   ========================================================= */

/* 1. คอนเทนเนอร์ของรูปภาพ (ล้างค่าขอบที่กวนใจออกให้หมด) */
/* .upload-preview,
div[id^="old-images-preview-"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
} */

/* 1. คอนเทนเนอร์ของรูปภาพ (ล้างค่าขอบที่กวนใจออกให้หมด) */
.upload-preview,
div[id^="old-images-preview-"] {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important; /* แบ่ง 3 ส่วน และบังคับยืดให้สุด */
    
    /* 🌟 แก้ไขบรรทัดนี้: ถ่างบน-ล่าง 16px / ซ้าย-ขวา 8px */
    gap: 16px 8px !important; 
    
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    box-sizing: border-box !important;
}

/* 2. หัวข้อของรูประบบเก่า (ให้ยาวทะลุ 3 คอลัมน์) */
div[id^="old-images-preview-"] > div:first-child {
    grid-column: 1 / -1 !important;
    width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important; /* ปลดล็อคสัดส่วนให้ข้อความ */
}

/* 3. กล่องหุ้มรูปภาพ (Wrapper) */
.upload-preview > div,
div[id^="old-images-preview-"] > div:not(:first-child) {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1 !important; /* บังคับเป็นจัตุรัส */
    margin: 0 !important;
    padding: 0 !important;
    position: relative !important;
    display: block !important;
    box-sizing: border-box !important;
}

/* 4. ตัวรูปภาพด้านในสุด (ตรึงให้เต็มกล่อง 100%) */
.upload-preview > div > img,
div[id^="old-images-preview-"] > div > img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* =========================================================
   🌟 ซ่อนปุ่ม Timeline Journey บนมือถือและแท็บเล็ต (< 1024px)
   ========================================================= */
@media (max-width: 1024px) {
    #openTimeline {
        display: none !important;
    }
}


/* =========================================================
   🌟 จัดระเบียบ Sidebar ขวา (Journal) - แก้ปัญหาตัดขอบล่าง 100%
   ========================================================= */
#journal {
    display: none; /* ถูก JS เปลี่ยนเป็น flex เมื่อเปิด */
    flex-direction: column !important;
    position: fixed;
    bottom: 16px;
    right: 16px;
    width: var(--widget-width);
    max-height: calc(100dvh - 120px) !important;
    background: rgba(255, 255, 255, 0.96);
    border-radius: 28px;
    padding: 15px !important;
    overflow: hidden !important; /* บังคับให้ Scroll แค่ใน List */
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    z-index: 3500;
}

#journalList {
    flex: 1 !important;
    overflow-y: auto !important;
    padding-right: 8px;
    margin-top: 5px;
    padding-bottom: 5px !important;
}

/* 🌟 สั่งให้ Header ของ Journal อยู่กับที่เสมอ */
.journal-header {
    flex-shrink: 0;
    margin-bottom: 5px;
}

/* =========================================================
   🌟 ล็อคเป้า Centered Popup ให้ลอยหน้าจอ ( Real Modal )
   ========================================================= */
.leaflet-popup.centered-modal-popup {
    position: absolute !important; /* 🌟 ต้องใช้ absolute เพื่อไม่ให้ตีกับระบบของ Leaflet */
    margin-bottom: 0 !important;
    /* ห้ามใส่ transform หักดิบที่ตรงนี้เด็ดขาด */
}

.centered-modal-popup .leaflet-popup-content-wrapper {
    width: 305px !important;
    height: auto !important;
    max-height: 90vh !important;
    border-radius: 20px !important;
    overflow: hidden !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4) !important;
    
    /* 🌟 พระเอกอยู่ตรงนี้: ดันเฉพาะตัวกล่องเนื้อหาลงมา 50% 
       เพื่อให้กึ่งกลางของกล่อง ตรงกับพิกัดกลางจอที่ JS ส่งมาให้เป๊ะๆ */
    transform: translateY(50%) !important; 
}

.centered-modal-popup .leaflet-popup-tip-container {
    display: none !important; /* ซ่อนติ่งลูกศร */
}

/* =========================================================
   📊 ปรับ Widgets ฝั่งซ้าย ไม่ให้ชนขอบบนเกินไป (ตาม Red Box ในภาพ)
   =========================================================
#leftWidgets {
    top: 80px !important;
    max-height: calc(100dvh - 100px) !important;
} */

/* =========================================================
   🌟 ปุ่มดูประวัติใน Popup (แสดงเฉพาะมือถือ/แท็บเล็ต)
   ========================================================= */
.btn-mobile-history {
    display: none;
}

@media (max-width: 1024px) {
    .btn-mobile-history {
        display: block !important;
        background: #eff6ff;
        color: #2563eb;
        border: 1px solid #bfdbfe;
        padding: 6px 12px;
        border-radius: 8px;
        font-size: 13px;
        font-weight: 600;
        font-family: 'Noto Sans Thai', system-ui, sans-serif;
        cursor: pointer;
        transition: 0.2s;
    }
    .btn-mobile-history:active {
        background: #bfdbfe;
    }
}

/* =========================================================
   📱 MOBILE UX FIXES (แก้กล่องทับปุ่มสถิติ และ จัดรูปประวัติ 3x2)
   ========================================================= */
@media (max-width: 768px) {
    
    /* 1. จำกัดความสูงกล่อง Popup ไม่ให้ยาวทะลุไปทับปุ่ม "สถิติของฉัน" ด้านล่าง */
    .centered-modal-popup .leaflet-popup-content-wrapper {
        /* หักลบพื้นที่ด้านบน(ช่องค้นหา) และด้านล่าง(ปุ่ม) ออก เพื่อให้กล่องพอดีจอ */
        max-height: calc(100dvh - 160px) !important; 
    }
    .centered-modal-popup .leaflet-popup-content {
        max-height: calc(100dvh - 160px) !important;
    }

    /* 2. จัดระเบียบรูปภาพในสมุดบันทึก ให้เป็น Grid 3 คอลัมน์เต็มขอบสวยงาม */
    .journal-images {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important; /* แบ่ง 3 ส่วนเท่าๆ กัน */
        gap: 8px !important;
        width: 100% !important;
        box-sizing: border-box !important;
    }
    .journal-images img {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important; /* บังคับเป็นสี่เหลี่ยมจัตุรัสเป๊ะๆ */
        object-fit: cover !important;
        margin: 0 !important;
    }
}

/* ============================================
   🌟 Lock state สำหรับปุ่ม edit/delete ใน journal
   ใช้แทน inline style.opacity/cursor ใน main.js
   ============================================ */
.journal-card button.is-locked-action {
    opacity: 0.3 !important;
    cursor: not-allowed !important;
    pointer-events: none;
}


/* ============================================
   🌟 Landscape orientation warning overlay (มือถือเท่านั้น)
   - แสดงเมื่อ user หมุนหน้าจอเป็นแนวนอนบนมือถือ
   - ครอบคลุมทั้งจอ ปิด interaction ทุกอย่างใต้
   - กรองด้วย max-height: 600px เพื่อไม่ให้แสดงใน tablet landscape (height มัก ≥ 768)
   - CSS-only ไม่ต้อง JS — orientationchange / resize จัดการเองโดย browser
   ============================================ */
#landscapeWarning {
    display: none;
}

@media (max-width: 1024px) and (orientation: landscape) and (max-height: 600px) {
    #landscapeWarning {
        position: fixed;
        inset: 0;
        z-index: 2147483647;
        background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%);
        color: white;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 24px;
        font-family: 'Noto Sans Thai', system-ui, sans-serif;
        text-align: center;
        box-sizing: border-box;
    }

    .landscape-warning-card {
        max-width: 480px;
        animation: landscape-fade-in 0.3s ease-out;
    }

    .landscape-warning-icon {
        font-size: 64px;
        margin-bottom: 16px;
        display: inline-block;
        animation: landscape-rotate-hint 2.5s ease-in-out infinite;
        transform-origin: center;
    }

    .landscape-warning-title {
        font-size: 24px;
        font-weight: 700;
        margin-bottom: 12px;
        color: #f8fafc;
    }

    .landscape-warning-desc {
        font-size: 14px;
        line-height: 1.6;
        color: #cbd5e1;
    }

    @keyframes landscape-rotate-hint {
        0%, 45% { transform: rotate(-90deg); }
        55%, 100% { transform: rotate(0deg); }
    }

    @keyframes landscape-fade-in {
        from { opacity: 0; transform: scale(0.95); }
        to { opacity: 1; transform: scale(1); }
    }
}


/* ============================================
   🌟 Mobile portrait scroll fix
   - touch-action: pan-y บอก browser ว่า element นี้ scroll แนวตั้งได้ — ปล่อย
     ให้ native handle ก่อน ไม่ต้อง wait JS handler ตัดสินใจ → ลด jerk
   - -webkit-overflow-scrolling: touch เปิด momentum scroll บน iOS
     (modern iOS auto-enable แต่ใส่กันเหนียว)
   - overscroll-behavior: contain หยุด scroll-chain ออกไปหา parent
     (กัน popup scroll แล้ว page เด้งตาม)
   ============================================ */
#journalList,
.note-box textarea,
.upload-preview,
.image-preview-modal,
.timeline-modal,
.confirm-modal,
.quest-unlock-modal,
.leaflet-popup-content {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
}

#journalList,
.leaflet-popup-content {
    touch-action: pan-y;
}

/* Sortable items: ปล่อยให้ touch-action: none เฉพาะตอนกำลังลาก
   (Sortable.js handle เอง) แต่ตอนปกติให้ pan-y เพื่อให้ scroll ผ่านได้ลื่น */
.sortable-item {
    touch-action: pan-y;
}
.sortable-item.sortable-chosen,
.sortable-item.sortable-drag {
    touch-action: none;
}