/* ===== MuAndi.com — ธีมตามโลโก้จริง: กรมท่า (navy) + ทองมงคล ===== */
:root{
    --midnight:      #16213e;
    --primary:       #2d4270;
    --primary-dark:  #16213e;
    --primary-soft:  #eef1f8;
    --gold:          #c9a227;
    --gold-soft:     #fbf3dc;
    --bg:            #f9f9fb;
    --ink:           #1c2434;
    --muted:         #767c8c;
    --line:          #e6e8ef;
    --card:          #ffffff;
}
*{ box-sizing:border-box; }
html,body{ margin:0; padding:0; }
body{
    font-family:'Noto Sans Thai', sans-serif;
    background:var(--bg);
    color:var(--ink);
    line-height:1.6;
    word-break:normal;         /* ให้เบราว์เซอร์ตัดคำไทยตามหลักภาษา ไม่ตัดกลางคำมั่ว */
    overflow-wrap:break-word;  /* กันคำ/ลิงก์ยาวเกินล้นกรอบ (เช่น อีเมล, URL) */
}
h1,h2,h3{
    font-family:'Noto Serif Thai', serif;
    color:var(--primary-dark);
    margin:0 0 10px;
}
a{ color:var(--primary); }

/* ===== หัวเว็บ ===== */
.site-header{
    background:#fff;
    border-bottom:1px solid var(--line);
    padding:0 24px;
}
.header-inner{
    max-width:1120px; margin:0 auto; padding:12px 0;
    display:flex; align-items:center; gap:24px; flex-wrap:wrap;
}
.site-title{
    font-family:'Noto Serif Thai', serif; font-weight:800; font-size:21px;
    color:var(--primary-dark); text-decoration:none; display:flex; align-items:center; gap:9px;
}
.site-title img{ height:38px; width:auto; display:block; }
.moon-badge{ color:var(--gold); font-size:20px; }
.accent-word{ color:var(--gold); }
.site-nav{ display:flex; gap:2px; flex:1; }
.site-nav a{
    padding:8px 14px; border-radius:10px; text-decoration:none;
    color:var(--ink); font-weight:600; font-size:15px; white-space:nowrap;
}
.site-nav a:hover, .site-nav a.active{ background:var(--gold-soft); color:#8a6c14; }
.searchbar{ display:flex; gap:0; min-width:240px; flex:1; max-width:360px; }
.searchbar input{
    flex:1; padding:9px 14px; border:1px solid var(--line); border-right:none; border-radius:10px 0 0 10px;
    font-family:inherit; font-size:14px; background:var(--bg); color:var(--ink);
}
.searchbar input::placeholder{ color:#9aa0ae; }
.searchbar input:focus{ outline:2px solid var(--gold); outline-offset:-2px; }
.searchbar button{
    padding:9px 16px; border:none; border-radius:0 10px 10px 0; background:var(--primary-dark);
    color:#fff; font-weight:700; cursor:pointer;
}
.searchbar button:hover{ background:#0f1830; }

/* ===== เนื้อหาหลัก ===== */
.container{ max-width:1120px; margin:0 auto; padding:32px 20px 60px; }

/* ===== การ์ดทั่วไป (นักพยากรณ์ / บทความ / กิจกรรม) ===== */
.card-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:20px; margin:20px 0; }
.place-card{
    display:flex; flex-direction:column; background:var(--card); border:1px solid var(--line);
    border-radius:16px; overflow:hidden; text-decoration:none; color:inherit; position:relative;
    transition:transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
.place-card:hover{
    transform:translateY(-3px); box-shadow:0 10px 28px rgba(107,63,212,.16); border-color:var(--gold);
}
.card-media{ aspect-ratio:4/3; background:var(--primary-soft); position:relative; overflow:hidden; }
.card-media img{ width:100%; height:100%; object-fit:cover; display:block; }
.card-media-empty{ display:flex; align-items:center; justify-content:center; color:var(--primary); }
.card-media-empty svg{ width:44px; height:44px; }
.card-body{ padding:14px 16px 16px; display:flex; flex-direction:column; gap:5px; flex:1; }
.card-name{ font-family:'Noto Serif Thai', serif; font-weight:700; font-size:16px; color:var(--ink); }
.card-loc, .card-excerpt{ font-size:13px; color:var(--muted); }
.card-tags{ display:flex; flex-wrap:wrap; gap:5px; margin-top:2px; }
.tag-chip{
    font-size:11.5px; padding:3px 9px; border-radius:999px; background:var(--primary-soft);
    color:var(--primary-dark); font-weight:600;
}

/* ป้ายสปอนเซอร์ / ยืนยันตัวตน */
.sponsor-badge{
    position:absolute; right:10px; top:10px; z-index:3; background:var(--gold); color:var(--midnight);
    font-weight:800; font-size:12px; padding:4px 11px; border-radius:999px;
    box-shadow:0 2px 8px rgba(0,0,0,.2);
}
.verified-badge{
    display:inline-flex; align-items:center; gap:4px; font-size:12px; font-weight:700;
    color:#1a7a3c; background:#e8f7ee; padding:3px 10px; border-radius:999px; width:fit-content;
}

/* ===== ส่วนคั่นแบบพระจันทร์ (ลายเซ็นของธีม) ===== */
.moon-divider{
    display:flex; align-items:center; gap:14px; margin:38px 0 22px; color:var(--gold);
}
.moon-divider::before, .moon-divider::after{
    content:""; flex:1; height:1px; background:linear-gradient(90deg, transparent, var(--line));
}
.moon-divider::after{ background:linear-gradient(90deg, var(--line), transparent); }
.moon-divider span{ font-size:15px; }

/* ===== ปุ่ม/ป้ายทั่วไป ===== */
.result-info{ color:var(--muted); font-size:14px; }
.empty-msg{ text-align:center; color:var(--muted); padding:40px 20px; }
.back{ display:inline-block; margin-bottom:16px; color:var(--primary); text-decoration:none; font-weight:600; }
.back:hover{ text-decoration:underline; }

/* ===== ตัวกรองหมวด (chips) ===== */
.filter-bar{ display:flex; flex-wrap:wrap; gap:8px; margin:18px 0 6px; }
.filter-chip{
    padding:7px 15px; border-radius:999px; border:1px solid var(--line); background:#fff;
    color:var(--ink); text-decoration:none; font-size:13.5px; font-weight:600;
}
.filter-chip:hover{ border-color:var(--primary); }
.filter-chip.active{ background:var(--primary); border-color:var(--primary); color:#fff; }

/* ===== แบ่งหน้า ===== */
.pager{ display:flex; flex-wrap:wrap; gap:6px; margin:26px 0; justify-content:center; }
.pager a, .pager span{
    padding:8px 13px; border-radius:9px; text-decoration:none; font-size:14px; font-weight:600;
}
.pager a{ background:#fff; border:1px solid var(--line); color:var(--ink); }
.pager a:hover{ border-color:var(--primary); color:var(--primary); }
.pager .current{ background:var(--primary); color:#fff; }
.pager .disabled{ color:#c7c2dc; }

/* ===== ท้ายเว็บ ===== */
.site-footer{ background:var(--midnight); color:#c7bee8; margin-top:40px; }
.footer-inner{ max-width:1120px; margin:0 auto; padding:34px 20px; text-align:center; }
.footer-brand{ font-family:'Noto Serif Thai', serif; font-size:19px; font-weight:800; color:#fff; }
.footer-inner p{ font-size:13.5px; margin:8px 0; }
.footer-nav{ display:flex; justify-content:center; gap:18px; margin:10px 0; }
.footer-nav a{ color:#c7bee8; text-decoration:none; font-size:13.5px; }
.footer-nav a:hover{ color:var(--gold); }
.footer-copy{ color:#9186b8; font-size:12px; }

/* ===== แถบปุ่มแชร์ ===== */
.share-bar{ display:flex; align-items:center; flex-wrap:wrap; gap:8px; margin:14px 0 20px; }
.share-label{ font-size:13.5px; color:var(--muted); font-weight:600; margin-right:2px; }
.share-btn{ display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:999px;
    font-size:13.5px; font-weight:700; text-decoration:none; border:none; cursor:pointer; }
.share-btn.share-native{ background:var(--primary-soft); color:var(--primary-dark); }
.share-btn.share-native:hover{ background:#e4e9f5; }
.share-btn.share-fb{ background:#1877f2; color:#fff; }
.share-btn.share-fb:hover{ background:#0f5fcc; }
.share-btn.share-line{ background:#06c755; color:#fff; }
.share-btn.share-line:hover{ background:#05a648; }
.share-btn.share-copy{ background:#fff; color:var(--ink); border:1px solid var(--line); }
.share-btn.share-copy:hover{ border-color:var(--primary); color:var(--primary); }

/* ===== มือถือ ===== */
@media (max-width:720px){
    .header-inner{ flex-direction:column; align-items:stretch; gap:10px; }
    .site-nav{ justify-content:center; }
    .searchbar{ max-width:none; }
}