/* * เมืองกาญ.com — design system "สมจริง" (2026-09, v4) * ภาพสมจริง (assets/images/mk/photo) + ตัวอักษร/ระยะแบบธีม C: Anuphan หนา, เส้นบาง, มุม 12px, เงานุ่ม * ใช้กับหน้าที่ใส่ ; token --mk-* อยู่ที่ :root ให้การ์ดจาก JS ที่ใช้ร่วมกับหน้าอื่นแสดงได้ * โหลดหลัง style.css ของ template เพื่อ override * ประวัติ: v2 สติกเกอร์ / v3 ธีม C → ~/kan-backups/mk-v2-sticker.css, mk-v3-C.css */ @import url('https://fonts.googleapis.com/css2?family=Anuphan:wght@400;500;600;700&display=swap'); :root { --mk-ink: #1F1B17; --mk-muted: #6E655D; --mk-subtle: #8A7F75; --mk-cream: #FAF7F2; --mk-sand: #F2ECE3; --mk-paper: #FFFFFF; --mk-night: #17130F; --mk-orange: #D9531E; --mk-orange-hover: #BD4515; --mk-orange-ink: #B4461A; --mk-gold: #E0A93E; --mk-line: #E7E1D8; --mk-soft-line: #F0EBE4; --mk-shadow: 0 1px 2px rgba(31, 27, 23, .05), 0 8px 24px rgba(31, 27, 23, .07); --mk-shadow-lg: 0 2px 6px rgba(31, 27, 23, .06), 0 20px 48px rgba(31, 27, 23, .14); --mk-radius: 12px; --mk-font: 'Anuphan', 'Noto Sans Thai', system-ui, sans-serif; } [data-bs-theme=dark] { --mk-ink: #EFE9E2; --mk-muted: #B4AAA0; --mk-subtle: #9C9188; --mk-cream: #151210; --mk-sand: #1D1916; --mk-paper: #221E1A; --mk-orange: #EC6630; --mk-orange-ink: #F29466; --mk-line: #342F2A; --mk-soft-line: #2A2521; --mk-shadow: 0 1px 3px rgba(0, 0, 0, .4); --mk-shadow-lg: 0 16px 40px rgba(0, 0, 0, .5); } body.mk { /* ให้คลาส Bootstrap ที่ JS เดิมใช้ (btn-primary, text-primary, bg-primary-subtle) เข้าโทนใหม่ */ --bs-primary: var(--mk-orange); --bs-primary-rgb: 217, 83, 30; --bs-primary-bg-subtle: #FBEDE5; --bs-primary-text-emphasis: var(--mk-orange-ink); --bs-link-color: var(--mk-ink); --bs-link-hover-color: var(--mk-orange); --bs-body-font-family: var(--mk-font); --bs-body-color: var(--mk-ink); --bs-body-bg: var(--mk-cream); --bs-border-color: var(--mk-line); font-family: var(--mk-font); color: var(--mk-ink); background: var(--mk-cream); font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; } body.mk h1, body.mk h2, body.mk h3, body.mk h4, body.mk h5, body.mk .mk-head { font-family: var(--mk-font); font-weight: 700; color: var(--mk-ink); letter-spacing: -.01em; } /* template ใส่ Caveat (ไม่มีอักษรไทย) กับคำเน้น */ body.mk .font-caveat, body.mk .text-span { font-family: var(--mk-font) !important; color: var(--mk-orange); } body.mk .text-muted { color: var(--mk-muted) !important; } body.mk a { text-decoration: none; color: inherit; } body.mk .text-primary { color: var(--mk-orange) !important; } body.mk .badge.bg-primary { background-color: var(--mk-orange) !important; } body.mk .bg-primary-subtle { background-color: #FBEDE5 !important; } /* ---------- ปุ่ม ---------- */ body.mk .btn { font-family: var(--mk-font); font-weight: 600; border-radius: 10px; transition: background-color .15s ease, box-shadow .15s ease, transform .15s ease; } body.mk .btn.rounded-pill { border-radius: 10px !important; } body.mk .btn-primary { --bs-btn-bg: var(--mk-orange); --bs-btn-border-color: var(--mk-orange); --bs-btn-hover-bg: var(--mk-orange-hover); --bs-btn-hover-border-color: var(--mk-orange-hover); --bs-btn-active-bg: var(--mk-orange-hover); --bs-btn-active-border-color: var(--mk-orange-hover); --bs-btn-disabled-bg: var(--mk-orange); --bs-btn-disabled-border-color: var(--mk-orange); color: #fff; } body.mk .btn-primary:hover { box-shadow: 0 6px 16px rgba(217, 83, 30, .28); transform: translateY(-1px); } body.mk .btn-outline-primary, body.mk .btn-light, body.mk .btn-outline-light { --bs-btn-color: var(--mk-ink); --bs-btn-bg: var(--mk-paper); --bs-btn-border-color: var(--mk-line); --bs-btn-hover-color: var(--mk-ink); --bs-btn-hover-bg: var(--mk-sand); --bs-btn-hover-border-color: var(--mk-line); --bs-btn-active-color: var(--mk-ink); --bs-btn-active-bg: var(--mk-sand); --bs-btn-active-border-color: var(--mk-line); background: var(--mk-paper); } body.mk .btn:focus-visible, body.mk a:focus-visible, body.mk .btn-check:focus-visible + .btn { outline: 2px solid var(--mk-orange); outline-offset: 2px; box-shadow: none; } body.mk .modal-content { background: var(--mk-paper); border: 0; border-radius: 16px; box-shadow: var(--mk-shadow-lg); } body.mk .form-select, body.mk .form-control { border-color: var(--mk-line); } /* ---------- section ---------- */ .mk-section { padding: 64px 0; } .mk-section--sand { background: var(--mk-sand); } @media (max-width: 767.98px) { .mk-section { padding: 48px 0; } } .mk-eyebrow { display: inline-flex; align-items: center; gap: .55rem; font-size: .78rem; font-weight: 700; letter-spacing: .06em; color: var(--mk-orange-ink); margin-bottom: .45rem; } .mk-eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .mk-title { font-size: clamp(1.55rem, 1.2rem + 1.3vw, 2.1rem); line-height: 1.25; margin-bottom: .25rem; } .mk-lead { color: var(--mk-muted); margin-bottom: 0; } .mk-section-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; } .mk-link-more { display: inline-flex; align-items: center; gap: .4rem; font-weight: 600; white-space: nowrap; color: var(--mk-orange-ink); } .mk-link-more:hover { color: var(--mk-orange-hover); } .mk-link-more i { transition: transform .15s ease; } .mk-link-more:hover i { transform: translateX(3px); } /* ---------- navbar (ใสทับภาพ hero → ทึบเมื่อเลื่อน) ---------- */ .mk-nav { position: sticky; top: 0; z-index: 1030; padding: .6rem 0; background: rgba(250, 247, 242, .94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--mk-line); transition: background-color .25s ease, border-color .25s ease; } [data-bs-theme=dark] .mk-nav { background: rgba(21, 18, 16, .94); } .mk-nav--overlay { position: fixed; left: 0; right: 0; } .mk-nav--overlay:not(.is-scrolled) { background: transparent; border-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; } .mk-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 700; font-size: 1.3rem; color: var(--mk-ink) !important; line-height: 1; } .mk-brand__logo { width: 40px; height: 40px; flex-shrink: 0; } .mk-brand__tld { color: var(--mk-orange); font-weight: 600; } .mk-nav .nav-link { font-weight: 500; color: var(--mk-ink); padding: .45rem .8rem !important; border-radius: 8px; white-space: nowrap; } .mk-nav .nav-link:hover { background: var(--mk-sand); color: var(--mk-ink); } .mk-nav .nav-link.active { color: var(--mk-orange-ink); font-weight: 600; } .mk-nav .dropdown-menu { border: 1px solid var(--mk-line); border-radius: 12px; box-shadow: var(--mk-shadow-lg); padding: .4rem; background: var(--mk-paper); } .mk-nav .dropdown-item { border-radius: 8px; padding: .5rem .8rem; color: var(--mk-ink); } .mk-nav .dropdown-item:hover { background: var(--mk-sand); } .mk-nav .navbar-toggler { border: 0; padding: .3rem .5rem; box-shadow: none !important; color: var(--mk-ink); } .mk-icon-btn { position: relative; display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid var(--mk-line); background: var(--mk-paper); color: var(--mk-ink); transition: background-color .15s ease; } .mk-icon-btn:hover { background: var(--mk-sand); color: var(--mk-ink); } .mk-icon-btn .nav-count { position: absolute; top: -5px; right: -5px; min-width: 19px; height: 19px; padding: 0 4px; border-radius: 999px; background: var(--mk-orange); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; } /* สถานะใสทับภาพ: ตัวหนังสือขาว ปุ่มแก้ว */ @media (min-width: 992px) { .mk-nav--overlay:not(.is-scrolled) .nav-link { color: #fff !important; } .mk-nav--overlay:not(.is-scrolled) .nav-link:hover, .mk-nav--overlay:not(.is-scrolled) .nav-link.active { background: rgba(255, 255, 255, .14); } } .mk-nav--overlay:not(.is-scrolled) .mk-brand { color: #fff !important; } .mk-nav--overlay:not(.is-scrolled) .mk-icon-btn, .mk-nav--overlay:not(.is-scrolled) .navbar-toggler { color: #fff; background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .3); backdrop-filter: blur(8px); } .mk-nav--overlay:not(.is-scrolled) .navbar-toggler { border-radius: 10px; } @media (max-width: 991.98px) { .mk-nav .navbar-collapse { margin-top: .75rem; padding: .5rem; border-radius: 14px; border: 1px solid var(--mk-line); background: var(--mk-paper); box-shadow: var(--mk-shadow-lg); } .mk-nav .navbar-collapse .nav-link { color: var(--mk-ink) !important; } } @media (min-width: 992px) and (max-width: 1199.98px) { .mk-nav .nav-link { padding: .4rem .55rem !important; font-size: .95rem; } .mk-nav .mk-add-label { display: none; } } /* ---------- hero (ภาพเต็มจอ) ---------- */ .mk-hero { position: relative; min-height: 640px; display: flex; align-items: flex-end; color: #fff; overflow: hidden; background: var(--mk-night); } .mk-hero__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 62% center; } .mk-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(18, 14, 11, .84) 0%, rgba(18, 14, 11, .55) 45%, rgba(18, 14, 11, .08) 78%), linear-gradient(0deg, rgba(18, 14, 11, .55), transparent 40%); } .mk-hero__inner { position: relative; z-index: 2; padding-top: 128px; padding-bottom: 104px; } .mk-hero .mk-eyebrow { color: var(--mk-gold); } body.mk .mk-hero__title { color: #fff; font-size: clamp(2.4rem, 1.5rem + 3.6vw, 4.2rem); line-height: 1.12; margin-bottom: .9rem; } body.mk .mk-hero__title .text-span { color: var(--mk-gold); background: none; padding: 0; } .mk-hero__title .text-span::after, .mk-hero__title .text-span::before { display: none; } .mk-hero__lead { font-size: 1.08rem; color: rgba(255, 255, 255, .85); max-width: 32rem; margin-bottom: 1.4rem; } .mk-hero__stats { display: flex; flex-wrap: wrap; gap: 1.6rem; color: rgba(255, 255, 255, .72); font-size: .9rem; } .mk-hero__stats strong { display: block; color: #fff; font-size: 1.35rem; line-height: 1.2; } .mk-picker { background: var(--mk-paper); color: var(--mk-ink); border-radius: 16px; padding: 1.25rem; box-shadow: var(--mk-shadow-lg); } .mk-picker .mk-head { font-size: 1.1rem; } .mk-picker__label { font-size: .78rem; font-weight: 600; color: var(--mk-muted); margin-bottom: .4rem; } .mk-chips { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .85rem; } .mk-chip, body.mk .mk-chips .btn { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--mk-line); background: var(--mk-cream); color: var(--mk-ink); font-size: .88rem; font-weight: 500; padding: .32rem .8rem; border-radius: 999px; line-height: 1.3; } body.mk .mk-chips .btn:hover { border-color: var(--mk-subtle); background: var(--mk-cream); } body.mk .btn-check:checked + .btn, .mk-chip.is-active { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-paper); } .mk-spin-btn { width: 100%; font-size: 1.08rem !important; padding: .85rem 1.25rem !important; margin-top: .15rem; } .mk-pill { display: inline-flex; align-items: center; gap: .25rem; padding: .12rem .55rem; border-radius: 6px; border: 1px solid var(--mk-line); font-size: .75rem; font-weight: 600; background: var(--mk-paper); color: var(--mk-muted); white-space: nowrap; } .mk-pill--orange { background: var(--mk-orange); border-color: var(--mk-orange); color: #fff; } @media (max-width: 991.98px) { .mk-hero { min-height: 0; } .mk-hero__inner { padding-top: 104px; padding-bottom: 92px; } } /* ---------- ช่องค้นหา (ลอยทับขอบล่างของ hero) ---------- */ .mk-search-wrap { position: relative; z-index: 5; margin-top: -34px; } .mk-search { display: flex; align-items: stretch; gap: .5rem; padding: .5rem; background: var(--mk-paper); border-radius: 16px; box-shadow: var(--mk-shadow-lg); } .mk-search__field { display: flex; align-items: center; gap: .5rem; flex: 1 1 0; min-width: 0; padding: 0 .75rem; color: var(--mk-muted); } .mk-search__field + .mk-search__field { border-left: 1px solid var(--mk-line); } .mk-search .form-control { border: 0; background: transparent; box-shadow: none !important; padding: .6rem 0; color: var(--mk-ink); } .mk-search .select2-container .select2-selection { border: 0 !important; background: transparent !important; box-shadow: none !important; } .mk-search .btn { padding: .65rem 1.2rem; white-space: nowrap; } .mk-search .btn-light { background: var(--mk-sand); border-color: transparent; } @media (max-width: 767.98px) { .mk-search { flex-direction: column; } .mk-search__field { padding: .2rem .5rem; } .mk-search__field + .mk-search__field { border-left: 0; border-top: 1px solid var(--mk-line); } } /* ---------- ปกร้าน: ภาพบรรยากาศเบลอ + ชื่อร้าน + อาหารตัดพื้นหลัง (food-art.js coverHtml) ---------- */ .mk-cover { position: relative; width: 100%; height: 100%; overflow: hidden; background: #2A231D; isolation: isolate; } .mk-cover__bg { position: absolute; inset: -12px; width: calc(100% + 24px); height: calc(100% + 24px); object-fit: cover; filter: blur(7px) saturate(1.15) brightness(.78); transform: scale(1.06); transition: transform .6s ease; z-index: -2; } .mk-cover::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(0, 0, 0, .04) 35%, rgba(0, 0, 0, .58)); } .mk-cover__cut { position: absolute; right: .55rem; top: .55rem; width: 36%; max-width: 150px; filter: drop-shadow(0 10px 14px rgba(0, 0, 0, .35)); transition: transform .45s ease; } .mk-cover__tag { position: absolute; left: .8rem; top: .8rem; background: rgba(255, 255, 255, .94); color: #1F1B17; font-size: .73rem; font-weight: 600; border-radius: 999px; padding: .15rem .6rem; } .mk-cover__name { position: absolute; left: 1rem; right: 3.4rem; bottom: .85rem; color: #fff; font-weight: 700; font-size: 1.22rem; line-height: 1.28; text-shadow: 0 2px 12px rgba(0, 0, 0, .45); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-cover--lg .mk-cover__name { font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.5rem); left: 1.5rem; bottom: 1.3rem; right: 1.5rem; } .mk-cover--lg .mk-cover__cut { width: 40%; max-width: 230px; right: 1.1rem; top: 1.1rem; } .mk-cover--sm .mk-cover__cut { width: 74%; max-width: none; right: 50%; top: 50%; transform: translate(50%, -50%); } .mk-cover--sm .mk-cover__bg { filter: blur(4px) saturate(1.1) brightness(.85); } .mk-cover--sm::after { background: rgba(0, 0, 0, .08); } /* ---------- การ์ดร้าน ---------- */ .mk-card { position: relative; display: flex; flex-direction: column; height: 100%; background: var(--mk-paper); border-radius: var(--mk-radius); overflow: hidden; box-shadow: var(--mk-shadow); transition: transform .25s ease, box-shadow .25s ease; } .mk-card:hover { transform: translateY(-3px); box-shadow: var(--mk-shadow-lg); } .mk-card:hover .mk-cover__bg { transform: scale(1.12); } .mk-card:hover .mk-cover__cut { transform: scale(1.06) rotate(-4deg); } .mk-card__media { position: relative; aspect-ratio: 4 / 3; } .mk-card__cover-link { display: block; width: 100%; height: 100%; color: inherit; text-decoration: none; } .mk-card__cover-link:focus-visible { outline: 3px solid var(--mk-orange); outline-offset: -3px; } .mk-card__body { display: flex; flex-direction: column; gap: .35rem; flex: 1; padding: .85rem 1rem 1rem; } .mk-card__area { font-size: .86rem; color: var(--mk-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mk-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: .35rem .8rem; margin-top: auto; font-size: .86rem; color: var(--mk-muted); } .mk-card__meta a { position: relative; z-index: 2; margin-left: auto; color: var(--mk-orange-ink); font-weight: 600; } .mk-card__meta a:hover { color: var(--mk-orange-hover); } .mk-card__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .65rem; border-top: 1px solid var(--mk-line); margin-top: .45rem; padding-top: .65rem; } .mk-card__action { display: inline-flex; align-items: center; gap: .3rem; padding: .18rem .25rem; border: 0; border-radius: .35rem; background: transparent; color: var(--mk-orange-ink); font: inherit; font-size: .8rem; font-weight: 600; line-height: 1.5; text-decoration: none; cursor: pointer; } .mk-card__action:hover, .mk-card__action:focus-visible { color: var(--mk-orange-hover); background: var(--mk-sand); } .mk-card__action--primary { color: var(--mk-ink); } .mk-card__action[aria-pressed="true"] { color: #247143; } .mk-card-toast { position: fixed; z-index: 1100; left: 50%; bottom: 1.5rem; transform: translate(-50%, 1rem); max-width: calc(100vw - 2rem); padding: .7rem 1rem; border-radius: .6rem; background: var(--mk-ink); color: #fff; box-shadow: var(--mk-shadow-lg); opacity: 0; pointer-events: none; transition: opacity .2s ease, transform .2s ease; } .mk-card-toast.is-visible { opacity: 1; transform: translate(-50%, 0); } .mk-fav { position: absolute; right: .75rem; bottom: .75rem; z-index: 3; display: grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: rgba(255, 255, 255, .94) !important; color: var(--mk-orange) !important; transition: transform .15s ease; } .mk-fav:hover { transform: scale(1.08); } .mk-fav.is-favorite { background: var(--mk-orange) !important; color: #fff !important; } .mk-rating { display: inline-flex; align-items: center; gap: .25rem; font-weight: 700; color: var(--mk-ink); } .mk-rating i { color: var(--mk-gold); } .mk-rating small { color: var(--mk-muted); font-weight: 400; } /* ---------- ร้านประจำวันนี้ ---------- */ .mk-daily { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); background: var(--mk-paper); border-radius: 16px; overflow: hidden; box-shadow: var(--mk-shadow); } .mk-daily__media { position: relative; min-height: 320px; } .mk-daily__media .mk-cover { position: absolute; inset: 0; } .mk-daily__body { padding: 2rem; display: flex; flex-direction: column; justify-content: center; gap: .55rem; } .mk-daily__name { font-size: clamp(1.35rem, 1.1rem + .9vw, 1.75rem); margin: 0; } @media (max-width: 767.98px) { .mk-daily { grid-template-columns: 1fr; } .mk-daily__media { min-height: 230px; } .mk-daily__body { padding: 1.3rem; } } /* ---------- หมวดอาหาร ---------- */ .mk-bigcats { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 2rem; } .mk-bigcat { position: relative; display: flex; align-items: flex-end; min-height: 180px; padding: 1.4rem; border-radius: 14px; overflow: hidden; color: #fff !important; isolation: isolate; } .mk-bigcat__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s ease; } .mk-bigcat::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(0, 0, 0, .62), rgba(0, 0, 0, .05)); } .mk-bigcat:hover .mk-bigcat__bg { transform: scale(1.05); } .mk-bigcat strong { font-size: 1.7rem; font-weight: 700; display: block; line-height: 1.2; } .mk-bigcat span { font-size: .95rem; opacity: .9; } .mk-bigcat__cut { position: absolute; right: .8rem; bottom: .4rem; width: 140px; filter: drop-shadow(0 14px 16px rgba(0, 0, 0, .4)); transition: transform .45s ease; } .mk-bigcat:hover .mk-bigcat__cut { transform: scale(1.05) rotate(-4deg); } @media (max-width: 575.98px) { .mk-bigcats { grid-template-columns: 1fr; } .mk-bigcat { min-height: 140px; } .mk-bigcat__cut { width: 104px; } } .mk-cats { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1.2rem 1rem; } .mk-cat { text-align: center; color: var(--mk-ink) !important; } .mk-cat__plate { display: grid; place-items: center; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 50% 42%, var(--mk-paper) 0%, var(--mk-sand) 72%); transition: box-shadow .3s ease; } .mk-cat__plate img { width: 86%; filter: drop-shadow(0 12px 12px rgba(31, 27, 23, .22)); transition: transform .4s ease; } .mk-cat:hover .mk-cat__plate { box-shadow: var(--mk-shadow); } .mk-cat:hover .mk-cat__plate img { transform: scale(1.08) rotate(-4deg); } .mk-cat__name { display: block; margin-top: .6rem; font-weight: 600; font-size: .95rem; line-height: 1.3; } @media (max-width: 991.98px) { .mk-cats { grid-template-columns: repeat(4, minmax(0, 1fr)); } } @media (max-width: 575.98px) { .mk-cats { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem .7rem; } .mk-cat__name { font-size: .85rem; } } /* ---------- แท็บ + อันดับ (TOP) ---------- */ .mk-tabs { display: inline-flex; flex-wrap: wrap; gap: .2rem; padding: .25rem; border-radius: 10px; background: var(--mk-paper); box-shadow: var(--mk-shadow); } body.mk .mk-tabs .btn { border: 0 !important; border-radius: 8px !important; padding: .4rem .9rem; font-size: .9rem; font-weight: 500; background: transparent; color: var(--mk-muted); box-shadow: none !important; transform: none !important; } body.mk .mk-tabs .btn:hover { color: var(--mk-ink); background: var(--mk-cream); } body.mk .mk-tabs .btn.btn-primary, body.mk .mk-tabs .btn.btn-secondary { background: var(--mk-ink); color: var(--mk-paper); } .mk-rank { display: flex; align-items: center; gap: .85rem; height: 100%; padding: .6rem; padding-right: .9rem; background: var(--mk-paper); border-radius: 14px; color: var(--mk-ink) !important; box-shadow: var(--mk-shadow); transition: transform .2s ease, box-shadow .2s ease; } .mk-rank:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-lg); } .mk-rank__thumb { position: relative; flex: 0 0 84px; height: 84px; border-radius: 10px; overflow: hidden; } .mk-rank__thumb .mk-cover { position: absolute; inset: 0; } .mk-rank__no { position: absolute; left: 5px; top: 5px; z-index: 2; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; display: grid; place-items: center; font-size: .75rem; font-weight: 700; background: rgba(255, 255, 255, .94); color: #1F1B17; } .mk-rank__no--1 { background: var(--mk-gold); color: #2B1D05; } .mk-rank__no--2 { background: #D8DCE0; } .mk-rank__no--3 { background: #E3B08D; } .mk-rank__name { font-weight: 600; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-rank__area { font-size: .8rem; color: var(--mk-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mk-rank__metric { font-size: .82rem; font-weight: 600; color: var(--mk-ink); } .mk-rank__metric .fa-star { color: var(--mk-gold); } /* ---------- วางแผนมื้อ ---------- */ .mk-plan { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; background: var(--mk-night); color: rgba(243, 231, 214, .85); border-radius: 18px; overflow: hidden; } .mk-plan > div { padding: 2.6rem; display: flex; flex-direction: column; justify-content: center; } .mk-plan > img { order: -1; width: 100%; height: 100%; min-height: 360px; object-fit: cover; } body.mk .mk-plan h2 { color: #fff; font-size: clamp(1.6rem, 1.2rem + 1.3vw, 2.3rem); line-height: 1.25; } .mk-plan .mk-eyebrow { color: var(--mk-gold); } .mk-plan p { color: rgba(243, 231, 214, .78); } .mk-plan__steps { list-style: none; padding: 0; margin: 0 0 1.4rem; display: grid; gap: .5rem; } .mk-plan__steps li { display: flex; gap: .6rem; align-items: center; } .mk-plan__steps b { display: grid; place-items: center; flex: 0 0 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25); color: #fff; font-size: .82rem; } body.mk .mk-plan .btn-light { --bs-btn-bg: #fff; --bs-btn-color: #1F1B17; --bs-btn-hover-bg: #F2ECE3; --bs-btn-hover-color: #1F1B17; background: #fff; color: #1F1B17; border-color: #fff; } body.mk .mk-plan .btn-outline-light { --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-hover-bg: rgba(255, 255, 255, .1); background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); } @media (max-width: 767.98px) { .mk-plan { grid-template-columns: 1fr; } .mk-plan > div { padding: 1.6rem; } .mk-plan > img { min-height: 220px; max-height: 280px; } } /* ---------- กำลังเป็นกระแส ---------- */ .mk-trend { position: relative; display: flex; flex-direction: column; gap: .5rem; height: 100%; padding: 1.1rem 1.2rem; border-radius: var(--mk-radius); background: var(--mk-paper); box-shadow: var(--mk-shadow); transition: transform .2s ease, box-shadow .2s ease; } .mk-trend:hover { transform: translateY(-2px); box-shadow: var(--mk-shadow-lg); } .mk-trend .trending-title { color: var(--mk-ink); font-weight: 600; } .mk-trend .badge { border: 1px solid var(--mk-line); background: var(--mk-cream) !important; color: var(--mk-muted) !important; font-weight: 600; } /* ---------- แถบต้อนรับ / modal ผลสุ่ม / skeleton / แบนเนอร์คุกกี้ ---------- */ body.mk .welcome-strip { background: var(--mk-paper); border: 1px solid var(--mk-line); border-radius: 14px; } body.mk .welcome-chip { background: var(--mk-cream); border: 1px solid var(--mk-line); color: var(--mk-ink); } .mk-result__art { position: relative; width: 150px; height: 150px; margin: 0 auto .9rem; border-radius: 16px; overflow: hidden; box-shadow: var(--mk-shadow); } .mk-result__art .mk-cover { position: absolute; inset: 0; } .mk-skeleton { border-radius: var(--mk-radius); background: linear-gradient(90deg, var(--mk-sand) 25%, var(--mk-cream) 50%, var(--mk-sand) 75%); background-size: 200% 100%; animation: mk-shimmer 1.3s linear infinite; min-height: 280px; } @keyframes mk-shimmer { to { background-position: -200% 0; } } body.mk .consent-banner { border: 1px solid var(--mk-line); background: var(--mk-paper); color: var(--mk-ink); border-radius: 14px; box-shadow: var(--mk-shadow-lg); } /* ---------- footer ---------- */ .mk-footer { background: var(--mk-night); color: rgba(243, 231, 214, .72); padding: 60px 0 28px; margin-top: 32px; } [data-bs-theme=dark] .mk-footer { background: #0E0C0A; border-top: 1px solid var(--mk-line); } .mk-footer h6 { color: #fff; font-weight: 700; margin-bottom: .9rem; } body.mk .mk-footer a { color: rgba(243, 231, 214, .72); } body.mk .mk-footer a:hover { color: #fff; } .mk-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } body.mk .mk-footer .mk-brand { color: #fff !important; } .mk-footer__bottom { border-top: 1px solid rgba(243, 231, 214, .14); margin-top: 36px; padding-top: 18px; font-size: .86rem; } .min-w-0 { min-width: 0; } @media (prefers-reduced-motion: reduce) { .mk-skeleton { animation: none; } .mk-card, .mk-rank, .mk-trend, .mk-cover__bg, .mk-cover__cut, .mk-bigcat__bg, .mk-bigcat__cut, .mk-cat__plate img, body.mk .btn { transition: none; } } /* ปุ่มร้านโปรดในการ์ดร้านประจำวันอยู่แถวเดียวกับปุ่มอื่น ไม่ใช่ลอยบนปก */ .mk-daily__body .mk-fav { position: static; flex-shrink: 0; width: 42px; height: 42px; border: 1px solid var(--mk-line) !important; background: var(--mk-paper) !important; } .mk-daily__body .mk-fav.is-favorite { background: var(--mk-orange) !important; border-color: var(--mk-orange) !important; } .mk-hero__inner { width: 100%; } /* select ต้นฉบับที่ select2 ซ่อนไว้ติด .w-100 ของ Bootstrap → กว้างเต็มแล้วดันหน้าเกินจอบนมือถือ */ .mk-search__field { position: relative; } .mk-search select.select2-hidden-accessible { width: 1px !important; } /* ===================================================================== * คอมโพเนนต์ของหน้าย่อย (theme migration 2026-09-23) * หน้าย่อยใช้ nav ทึบ (sticky) + หัวหน้าแบบแถบภาพสมจริง .mk-pagehead เหมือนกันทุกหน้า * ===================================================================== */ /* ---------- หัวหน้าย่อย: แถบภาพ + gradient เข้มแบบเดียวกับ hero ---------- */ .mk-pagehead { position: relative; display: flex; align-items: flex-end; min-height: 280px; color: #fff; background: var(--mk-night); overflow: hidden; isolation: isolate; } .mk-pagehead__bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 60%; z-index: -2; } .mk-pagehead::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(90deg, rgba(18, 14, 11, .86) 0%, rgba(18, 14, 11, .6) 50%, rgba(18, 14, 11, .2) 85%), linear-gradient(0deg, rgba(18, 14, 11, .5), transparent 55%); } .mk-pagehead__inner { width: 100%; padding-top: 48px; padding-bottom: 40px; } .mk-pagehead .mk-eyebrow { color: var(--mk-gold); } body.mk .mk-pagehead h1 { color: #fff; font-size: clamp(1.8rem, 1.3rem + 2vw, 2.75rem); line-height: 1.2; margin-bottom: .5rem; max-width: 44rem; } .mk-pagehead__lead { color: rgba(255, 255, 255, .84); max-width: 38rem; margin: 0; font-size: 1.04rem; } .mk-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; margin: 0 0 .9rem; padding: 0; list-style: none; font-size: .82rem; color: rgba(255, 255, 255, .66); } .mk-crumbs li + li::before { content: "/"; margin-right: .45rem; opacity: .6; } body.mk .mk-crumbs a { color: rgba(255, 255, 255, .86); } body.mk .mk-crumbs a:hover { color: #fff; } @media (max-width: 767.98px) { .mk-pagehead { min-height: 220px; } .mk-pagehead__inner { padding-top: 36px; padding-bottom: 28px; } } /* ---------- แผง (พื้นกระดาษ) — ใช้กับตัวกรอง ฟอร์ม ข้อมูลร้าน ---------- */ .mk-panel { background: var(--mk-paper); color: var(--mk-ink); border-radius: 16px; padding: 1.25rem; box-shadow: var(--mk-shadow); } .mk-panel--lg { padding: 2rem; } .mk-panel__title { font-size: 1.15rem; margin-bottom: .9rem; } .mk-divider { border-top: 1px solid var(--mk-line); margin: 1rem 0; } @media (max-width: 575.98px) { .mk-panel--lg { padding: 1.3rem; } } /* ---------- ฟอร์ม (specificity ต่ำด้วย :where ให้ .mk-search ของหน้าแรกชนะ) ---------- */ body.mk :where(.form-control, .form-select) { border: 1px solid var(--mk-line); border-radius: 10px; background-color: var(--mk-paper); color: var(--mk-ink); padding: .6rem .85rem; } body.mk :where(.form-control, .form-select):focus { border-color: var(--mk-orange); box-shadow: 0 0 0 3px rgba(217, 83, 30, .15); } body.mk :where(.form-control)::placeholder { color: var(--mk-subtle); } body.mk :where(.form-label) { font-weight: 600; font-size: .92rem; margin-bottom: .35rem; } body.mk :where(.form-text) { color: var(--mk-muted); } body.mk .form-check-input:checked { background-color: var(--mk-orange); border-color: var(--mk-orange); } body.mk .form-check-input:focus { border-color: var(--mk-orange); box-shadow: 0 0 0 3px rgba(217, 83, 30, .15); } /* ช่องค้นหาในแผงตัวกรอง (ไอคอน + input ไร้เส้นภายในกรอบเดียว) */ .mk-field { display: flex; align-items: center; gap: .55rem; padding: 0 .85rem; border: 1px solid var(--mk-line); border-radius: 10px; background: var(--mk-paper); color: var(--mk-muted); } .mk-field:focus-within { border-color: var(--mk-orange); box-shadow: 0 0 0 3px rgba(217, 83, 30, .15); } body.mk .mk-field .form-control { border: 0; box-shadow: none; padding-left: 0; padding-right: 0; background: transparent; } /* ---------- บทความ / หน้าข้อความ ---------- */ .mk-prose { max-width: 720px; margin-inline: auto; font-size: 1.02rem; line-height: 1.8; } .mk-prose h2 { font-size: 1.35rem; margin-top: 2rem; margin-bottom: .7rem; } .mk-prose h3 { font-size: 1.12rem; margin-top: 1.5rem; margin-bottom: .5rem; } .mk-prose > :first-child { margin-top: 0; } .mk-prose p, .mk-prose li { color: var(--mk-ink); } .mk-prose p, .mk-prose ul, .mk-prose ol { margin-bottom: 1rem; } .mk-prose li + li { margin-top: .3rem; } body.mk .mk-prose a:not(.btn) { color: var(--mk-orange-ink); text-decoration: underline; text-underline-offset: 3px; } .mk-prose .mk-muted-note { color: var(--mk-muted); font-size: .9rem; } /* ---------- แผนที่ ---------- */ .mk-map { position: relative; border-radius: 12px; overflow: hidden; background: var(--mk-sand); box-shadow: var(--mk-shadow); } .mk-map .leaflet-container { font-family: var(--mk-font); } .mk-map-note { font-size: .78rem; color: var(--mk-muted); margin-top: .5rem; } /* ── หมุดแผนที่ภาพหมวด (08 A1.1 — map.js pinIcon/clusterIcon) ── */ .mk-pin-wrap, .mk-pin-cluster-wrap, .mk-me-wrap { background: none; border: 0; } .mk-pin { position: relative; display: block; width: 40px; height: 40px; border-radius: 50%; background: var(--mk-paper); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(31, 27, 23, .28), 0 6px 14px rgba(31, 27, 23, .18); transition: transform .15s ease, border-color .15s ease; transform-origin: 50% 125%; } .mk-pin::after { content: ""; position: absolute; left: 50%; bottom: -10px; width: 0; height: 0; margin-left: -6px; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 9px solid var(--mk-orange); filter: drop-shadow(0 2px 1px rgba(31, 27, 23, .2)); } .mk-pin__img { display: block; width: 100%; height: 100%; border-radius: 50%; background: var(--mk-sand) center / 118% no-repeat; } .mk-pin--cafe::after { border-top-color: #8A5A3C; } .mk-pin-wrap:hover .mk-pin { transform: scale(1.12); } .mk-pin--active, .mk-pin-wrap:hover .mk-pin--active { transform: scale(1.25); border-color: var(--mk-orange); z-index: 2; } .mk-pin--pick .mk-pin__img { background: var(--mk-orange) url("../images/mk/svg/logo-mark.svg") center / 70% no-repeat; } .mk-pin-cluster { display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mk-orange); color: #fff; font-weight: 700; font-size: .9rem; border: 3px solid rgba(255, 255, 255, .9); box-shadow: 0 0 0 5px rgba(217, 83, 30, .22), 0 4px 12px rgba(31, 27, 23, .25); } .mk-me { display: block; width: 18px; height: 18px; border-radius: 50%; background: #1a73e8; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); position: relative; } .mk-me::before { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(26, 115, 232, .45); animation: mk-me-pulse 1.8s ease-out infinite; z-index: -1; } @keyframes mk-me-pulse { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .mk-me::before { animation: none; } .mk-pin { transition: none; } } .mk-pin-pop { min-width: 180px; font-family: var(--mk-font); } .mk-pin-pop__cat { display: inline-block; font-size: .7rem; font-weight: 600; color: var(--mk-orange-ink); background: rgba(217, 83, 30, .1); border-radius: 999px; padding: 1px 8px; margin-bottom: 4px; } .mk-pin-pop__name { font-weight: 700; line-height: 1.3; margin-bottom: 2px; } .mk-pin-pop__area { font-size: .78rem; color: var(--mk-muted); margin-bottom: 6px; } [data-bs-theme=dark] .mk-pin { border-color: #3A332D; } [data-bs-theme=dark] .mk-pin--active { border-color: var(--mk-orange); } [data-bs-theme=dark] .mk-pin-cluster { border-color: rgba(34, 30, 26, .9); } [data-bs-theme=dark] .mk-map .leaflet-popup-content-wrapper, [data-bs-theme=dark] .mk-map .leaflet-popup-tip { background: var(--mk-paper); color: var(--mk-ink); } [data-bs-theme=dark] .mk-map .leaflet-bar a { background: var(--mk-paper); color: var(--mk-ink); border-bottom-color: var(--mk-line); } [data-bs-theme=dark] .mk-map .leaflet-bar a:hover { background: var(--mk-sand); } [data-bs-theme=dark] .mk-map .leaflet-control-attribution { background: rgba(34, 30, 26, .85); color: var(--mk-muted); } [data-bs-theme=dark] .mk-map .leaflet-control-attribution a { color: var(--mk-orange-ink); } [data-bs-theme=dark] .mk-map .leaflet-layer:not(.mk-tiles-dark):not(.mk-tiles-light) { filter: brightness(.78) contrast(1.05) saturate(.85); } .mk-tiles-light { filter: grayscale(.85) brightness(1.06) contrast(.92); } .mk-tiles-dark { filter: invert(1) hue-rotate(180deg) brightness(.92) contrast(.88) saturate(.5); } [data-bs-theme=dark] .mk-map .leaflet-control-layers { background: var(--mk-paper); color: var(--mk-ink); } /* ---------- สถานะว่าง ---------- */ .mk-empty { text-align: center; padding: 3rem 1.25rem; background: var(--mk-paper); border: 1px dashed var(--mk-line); border-radius: 16px; } .mk-empty__icon { display: grid; place-items: center; width: 64px; height: 64px; margin: 0 auto 1rem; border-radius: 50%; background: var(--mk-sand); color: var(--mk-orange-ink); font-size: 1.5rem; } .mk-empty h2, .mk-empty h3 { font-size: 1.2rem; margin-bottom: .35rem; } .mk-empty p { color: var(--mk-muted); max-width: 26rem; margin: 0 auto 1.2rem; } /* ---------- การ์ดร้านในหน้ารายการ: ไฮไลต์เมื่อคลิกหมุดบนแผนที่ ---------- */ .listing-item.is-hidden { display: none; } .listing-item.is-highlighted .mk-card { outline: 2px solid var(--mk-orange); outline-offset: 3px; } .mk-card__title { font-size: 1.05rem; font-weight: 700; line-height: 1.35; margin: 0; } .mk-card__tags { display: flex; flex-wrap: wrap; gap: .3rem; } /* แถบคุณสมบัติ (ไอคอน + ข้อความ) */ .mk-facts { list-style: none; padding: 0; margin: 0; display: grid; gap: .7rem; } .mk-facts li { display: flex; gap: .7rem; align-items: flex-start; } .mk-facts i { flex: 0 0 20px; margin-top: .3rem; text-align: center; color: var(--mk-orange-ink); } .mk-map__canvas { height: 420px; } .mk-map .mock-map { background: linear-gradient(135deg, var(--mk-sand), var(--mk-cream)); } .mock-map .map-pin { position: absolute; transform: translate(-50%, -100%); font-size: 1.4rem; color: var(--mk-orange); cursor: pointer; background: none; border: 0; padding: 0; line-height: 1; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .3)); transition: transform .15s ease; } .mock-map .map-pin:hover, .mock-map .map-pin.is-active { transform: translate(-50%, -110%) scale(1.25); } body.mk .mk-chips .btn.mood-tag.active { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-paper); } @media (min-width: 992px) { .mk-sticky-side { position: sticky; top: 88px; } } @media (max-width: 991.98px) { .mk-map__canvas { height: 320px; } } /* ---------- หน้ารายละเอียดร้าน ---------- */ .mk-shophead { position: relative; display: flex; align-items: flex-end; min-height: 380px; color: #fff; background: var(--mk-night); overflow: hidden; isolation: isolate; } .mk-shophead__media { position: absolute; inset: 0; z-index: -1; } .mk-shophead__media .mk-cover { position: absolute; inset: 0; } .mk-shophead__media .mk-cover::after { background: linear-gradient(90deg, rgba(18, 14, 11, .78) 0%, rgba(18, 14, 11, .35) 60%, rgba(18, 14, 11, .1)), linear-gradient(0deg, rgba(18, 14, 11, .6), transparent 60%); } .mk-shophead__media .mk-cover__cut { top: auto; bottom: 1.5rem; right: max(1.5rem, calc((100vw - 1320px) / 2 + 1rem)); width: 30%; max-width: 280px; } .mk-shophead__photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mk-shophead__photo + .mk-shophead__shade { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(18, 14, 11, .75), transparent 65%); } .mk-shophead__inner { width: 100%; padding-top: 56px; padding-bottom: 40px; } body.mk .mk-shophead h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); line-height: 1.18; margin-bottom: .7rem; max-width: 42rem; text-shadow: 0 2px 16px rgba(0, 0, 0, .35); } .mk-shophead__meta { display: flex; flex-wrap: wrap; gap: .5rem 1.4rem; color: rgba(255, 255, 255, .88); font-size: .95rem; max-width: 42rem; } .mk-shophead__meta > span { display: inline-flex; align-items: baseline; gap: .45rem; } .mk-shophead__meta i { color: var(--mk-gold); } @media (max-width: 767.98px) { .mk-shophead { min-height: 320px; } .mk-shophead__inner { padding-top: 132px; padding-bottom: 28px; } .mk-shophead__media .mk-cover__cut { top: 1rem; bottom: auto; right: 1rem; width: 30%; max-width: 120px; } } .mk-plan--side { grid-template-columns: 1fr; height: auto; } .mk-plan--side > div { padding: 1.6rem; } body.mk .mk-plan--side h2 { font-size: 1.35rem; } body.mk .mk-fav-btn { color: var(--mk-orange); } body.mk .mk-fav-btn.is-favorite { background: var(--mk-orange); border-color: var(--mk-orange); color: #fff; } .mk-review-link { display: inline-block; max-width: 100%; padding: .4rem .8rem; border: 1px solid var(--mk-line); border-radius: 999px; background: var(--mk-cream); font-size: .86rem; color: var(--mk-ink) !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mk-review-link:hover { border-color: var(--mk-subtle); } /* ── ข้อมูลร้าน "ยังไม่ทราบ" + แจ้งแก้/เจ้าของร้าน (08 A1.5) ── */ .mk-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: .5rem 1.25rem; margin: 0 0 .9rem; padding: .9rem 1rem; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: var(--mk-cream); } .mk-facts__row { display: flex; flex-direction: column; min-width: 0; } .mk-facts dt { font-size: .74rem; font-weight: 600; color: var(--mk-muted); text-transform: none; } .mk-facts dt i { width: 1.1em; margin-right: .35rem; color: var(--mk-orange-ink); } .mk-facts dd { margin: 0; font-size: .92rem; overflow-wrap: anywhere; } .mk-facts__unknown { color: var(--mk-subtle); font-style: italic; } .mk-facts__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.75rem; } .mk-shophead__illus { position: absolute; left: max(.75rem, calc((100vw - 1320px) / 2 + .75rem)); top: 76px; z-index: 3; font-size: .68rem; color: rgba(255, 255, 255, .78); background: rgba(0, 0, 0, .38); padding: 2px 8px; border-radius: 999px; } .mk-locbadge { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; padding: 2px 10px; border-radius: 999px; background: rgba(224, 169, 62, .22); color: #FFE3A8; } .mk-locbadge--ok { background: rgba(80, 170, 110, .25); color: #C9F2D5; } .mk-locbadge__btn { border: 0; padding: 0; background: none; color: #fff; text-decoration: underline; font: inherit; } .mk-report-modal .modal-content { background: var(--mk-paper); color: var(--mk-ink); border: 0; border-radius: 16px; } .mk-report-modal .modal-header, .mk-report-modal .modal-footer { border-color: var(--mk-line); } .mk-report-map { height: 260px; border-radius: 10px; overflow: hidden; border: 1px solid var(--mk-line); background: var(--mk-sand); } .mk-report-modal .row > [class*="col-"] > .mb-3 { margin-bottom: 0 !important; } .mk-report-modal .row { margin-bottom: 1rem; } .mk-inbox__note { max-width: 280px; } .mk-inbox__create { border-top: 1px dashed var(--mk-line); padding-top: .75rem; margin-bottom: .75rem; } .mk-inbox__msg { white-space: pre-wrap; } .mk-inbox__table th { font-size: .8rem; font-weight: 600; white-space: nowrap; } .mk-inbox__status--pending { background: rgba(224, 169, 62, .18); } .mk-inbox__status--applied { background: rgba(80, 170, 110, .18); } .mk-inbox__status--spam, .mk-inbox__status--rejected { opacity: .7; } .mk-pl-list { max-height: 62vh; overflow-y: auto; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); padding: .25rem; background: var(--mk-paper); } .mk-pl-list .mk-ex__item { cursor: pointer; } .mk-pl-editor { position: sticky; top: 84px; } .mk-pl-map { height: 320px; } .mk-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .mk-notice.mk-notice--ok { background: rgba(80, 170, 110, .12); border: 1px solid rgba(80, 170, 110, .35); } /* ── การ์ดรีวิวแพลตฟอร์ม + popup ตัวอย่าง (08 A1.4 — review-viewer.js) ── */ .mk-rv-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: .75rem; min-width: 0; } .mk-rv { display: flex; align-items: flex-start; gap: .75rem; width: 100%; min-width: 0; text-align: left; padding: .8rem .9rem; border: 1px solid var(--mk-line); border-radius: var(--mk-radius); background: var(--mk-paper); color: var(--mk-ink); font: inherit; transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .mk-rv:hover, .mk-rv:focus-visible { border-color: var(--mk-orange); box-shadow: var(--mk-shadow); transform: translateY(-1px); } .mk-rv__icon { flex: none; display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; color: #fff; font-size: 1.15rem; background: var(--mk-subtle); } .mk-rv--tiktok .mk-rv__icon, .mk-rv-fallback__icon.mk-rv--tiktok { background: #111; } .mk-rv--facebook .mk-rv__icon, .mk-rv-fallback__icon.mk-rv--facebook { background: #1877F2; } .mk-rv--instagram .mk-rv__icon, .mk-rv-fallback__icon.mk-rv--instagram { background: radial-gradient(circle at 30% 107%, #fdf497 0%, #fd5949 45%, #d6249f 60%, #285AEB 90%); } .mk-rv--youtube .mk-rv__icon, .mk-rv-fallback__icon.mk-rv--youtube { background: #FF0000; } .mk-rv__body { display: flex; flex: 1 1 0%; flex-direction: column; gap: .2rem; min-width: 0; } .mk-rv__title { font-weight: 600; font-size: .9rem; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .mk-rv__src { min-width: 0; font-size: .76rem; color: var(--mk-muted); overflow-wrap: anywhere; } .mk-rv__play { display: inline-block; color: var(--mk-orange-ink); font-weight: 600; white-space: nowrap; } .mk-rv-empty { font-size: .86rem; color: var(--mk-muted); padding: .9rem 1rem; border: 1px dashed var(--mk-line); border-radius: var(--mk-radius); } .mk-rv-modal .modal-content { background: var(--mk-paper); color: var(--mk-ink); border: 0; border-radius: 16px; } .mk-rv-modal .modal-header, .mk-rv-modal .modal-footer { border-color: var(--mk-line); } .mk-rv-modal .modal-title { line-height: 1.4; } .mk-rv-modal__src { font-size: .78rem; color: var(--mk-muted); margin-bottom: .15rem; } .mk-rv-modal__count { font-size: .82rem; color: var(--mk-muted); min-width: 3.5em; text-align: center; } .mk-rv-modal .modal-body { display: flex; flex-direction: column; align-items: center; background: var(--mk-sand); } .mk-rv-embed { position: relative; width: 100%; max-width: 500px; background: var(--mk-paper); border-radius: 10px; overflow: hidden; } .mk-rv-embed iframe { position: relative; display: block; width: 100%; border: 0; z-index: 1; } .mk-rv-embed--vertical { max-width: 340px; } .mk-rv-embed--vertical iframe { height: min(740px, 70vh); } .mk-rv-embed--square iframe { height: min(700px, 68vh); } .mk-rv-embed--post iframe { height: min(640px, 64vh); } .mk-rv-embed--video iframe { height: min(520px, 60vh); } .mk-rv-embed--video16 iframe { aspect-ratio: 16 / 9; height: auto; } .mk-rv-embed__loading { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: .85rem; color: var(--mk-muted); } .mk-rv-embed__note { font-size: .74rem; color: var(--mk-muted); margin: .6rem 0 0; text-align: center; } .mk-rv-fallback { text-align: center; padding: 1.5rem .5rem; max-width: 420px; } .mk-rv-fallback__icon { display: inline-flex; align-items: center; justify-content: center; width: 56px; height: 56px; border-radius: 14px; color: #fff; font-size: 1.6rem; margin-bottom: .75rem; background: var(--mk-subtle); } @media (max-width: 575.98px) { .mk-rv-grid { grid-template-columns: minmax(0, 1fr); } .mk-rv-modal .modal-footer { flex-wrap: nowrap; } .mk-rv-modal .modal-footer .btn-primary { white-space: nowrap; } } [data-bs-theme=dark] .mk-rv--tiktok .mk-rv__icon { background: #000; box-shadow: inset 0 0 0 1px #3A332D; } .mk-toast { background: var(--mk-night); color: #fff; border-radius: 12px; box-shadow: var(--mk-shadow-lg); } [data-bs-theme=dark] .mk-toast { background: var(--mk-paper); border: 1px solid var(--mk-line) !important; } /* ---------- วางแผนมื้ออาหาร ---------- */ .mk-step { display: flex; align-items: center; gap: .55rem; font-weight: 700; margin-bottom: .65rem; } .mk-step b { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--mk-ink); color: var(--mk-paper); font-size: .8rem; } .mk-meals { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; } .mk-meal { position: relative; display: flex; align-items: center; gap: .6rem; padding: .7rem .75rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-cream); cursor: pointer; transition: border-color .15s ease, background-color .15s ease; } .mk-meal > i:first-child { color: var(--mk-orange-ink); width: 18px; text-align: center; } .mk-meal strong { display: block; font-size: .92rem; line-height: 1.25; } .mk-meal small { display: block; font-size: .74rem; color: var(--mk-muted); } .mk-meal__check { position: absolute; top: .45rem; right: .5rem; font-size: .7rem; color: var(--mk-orange); opacity: 0; } .mk-meal:hover { border-color: var(--mk-subtle); } .btn-check:checked + .mk-meal { border-color: var(--mk-orange); background: var(--bs-primary-bg-subtle, #FBEDE5); } .btn-check:checked + .mk-meal .mk-meal__check { opacity: 1; } .btn-check:focus-visible + .mk-meal { outline: 2px solid var(--mk-orange); outline-offset: 2px; } [data-bs-theme=dark] .btn-check:checked + .mk-meal { background: rgba(236, 102, 48, .14); } .plan-timeline { position: relative; padding-left: 1.9rem; } .plan-timeline::before { content: ""; position: absolute; left: .6rem; top: .8rem; bottom: .8rem; width: 2px; background: var(--mk-line); } .plan-slot { position: relative; margin-bottom: 1.4rem; } .mk-slot__head { position: relative; display: flex; align-items: baseline; gap: .5rem; margin-bottom: .5rem; font-size: .95rem; } .mk-slot__head > span:last-child { color: var(--mk-muted); font-size: .82rem; } .mk-slot__icon { position: absolute; left: -1.9rem; top: -.05rem; display: grid; place-items: center; width: 1.45rem; height: 1.45rem; border-radius: 50%; background: var(--mk-orange); color: #fff; font-size: .65rem; box-shadow: 0 0 0 4px var(--mk-cream); } .mk-slot { display: flex; align-items: stretch; gap: 1rem; padding: .6rem; background: var(--mk-paper); border-radius: 14px; box-shadow: var(--mk-shadow); } .mk-slot__media { position: relative; flex: 0 0 112px; min-height: 112px; border-radius: 10px; overflow: hidden; } .mk-slot__media .mk-cover { position: absolute; inset: 0; } .mk-slot__body { flex: 1; min-width: 0; padding: .2rem 0; } .mk-slot__name { font-size: 1.08rem; line-height: 1.3; margin: .15rem 0 .2rem; } .mk-slot__name a:hover { color: var(--mk-orange-ink); } .mk-slot__actions { display: flex; flex-direction: column; gap: .4rem; padding: .1rem .1rem 0 0; } @media (max-width: 575.98px) { .mk-slot { gap: .7rem; } .mk-slot__media { flex-basis: 76px; min-height: 76px; align-self: flex-start; height: 76px; } .mk-slot__name { font-size: 1rem; } .mk-slot__actions .mk-icon-btn { width: 34px; height: 34px; font-size: .85rem; } } .mk-sharetext { white-space: pre-wrap; font-family: var(--mk-font); font-size: .9rem; line-height: 1.7; color: var(--mk-ink); background: var(--mk-cream); border: 1px solid var(--mk-line); border-radius: 10px; padding: .9rem 1rem; } /* ---------- หน้าย่าน: การ์ดย่านใช้ .mk-bigcat ---------- */ .mk-area-card { min-height: 220px; } .mk-area-card strong { font-size: 1.35rem; } .mk-area-card span:not(.mk-pill) { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size: .88rem; } .mk-area-card::after { background: linear-gradient(0deg, rgba(0, 0, 0, .78), rgba(0, 0, 0, .1) 75%); } .mk-area-card .mk-pill { display: inline-flex; opacity: 1; font-size: .75rem; } a.mk-chip:hover { border-color: var(--mk-subtle); } /* ---------- ประกาศ / ช่องทางติดต่อ ---------- */ .mk-notice { display: flex; gap: .7rem; align-items: flex-start; padding: .85rem 1rem; border-radius: 12px; background: var(--mk-sand); border: 1px solid var(--mk-line); font-size: .9rem; color: var(--mk-ink); } .mk-notice > i { margin-top: .25rem; color: var(--mk-orange-ink); } body.mk .mk-notice a { color: var(--mk-orange-ink); text-decoration: underline; text-underline-offset: 3px; } .mk-notice--warn { background: #FFF6E5; border-color: #F1D9A6; } [data-bs-theme=dark] .mk-notice--warn { background: rgba(224, 169, 62, .12); border-color: rgba(224, 169, 62, .35); } .mk-channel { height: 100%; text-align: center; } .mk-channel .mk-empty__icon { width: 52px; height: 52px; font-size: 1.3rem; margin-bottom: .75rem; } .mk-channel p { color: var(--mk-muted); font-size: .92rem; } /* ---------- บทความ (การ์ด) ---------- */ .mk-post__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mk-post .mk-card__media { aspect-ratio: 16 / 10; overflow: hidden; } .mk-post .mk-card__area { -webkit-line-clamp: 2; } /* ---------- จุดเด่น (หน้าเกี่ยวกับเรา) ---------- */ .mk-feature { padding: 1.1rem 1.2rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-cream); } .mk-feature__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--mk-paper); color: var(--mk-orange-ink); margin-bottom: .6rem; box-shadow: var(--mk-shadow); } .mk-prose .mk-feature h3 { font-size: 1rem; margin: 0 0 .3rem; } .mk-prose .mk-feature p { font-size: .92rem; color: var(--mk-muted); line-height: 1.65; } .mk-prose .mk-notice ul { margin-bottom: 0; } [data-bs-theme=dark] .mk-plan { border: 1px solid var(--mk-line); } /* ---------- หน้า "กำลังฮิต" (trending.html + บล็อกหน้าแรก — trending.js) ---------- */ .mk-trend .trending-title { display: block; font-size: 1.05rem; line-height: 1.35; text-decoration: none; } .mk-trend .trending-title:hover { color: var(--mk-orange-ink); } .mk-trend__area { font-size: .84rem; color: var(--mk-muted); display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mk-trend__reason { margin: 0; font-size: .92rem; color: var(--mk-ink); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .mk-trend__foot { margin-top: auto; padding-top: .35rem; display: flex; flex-direction: column; gap: .3rem; font-size: .8rem; color: var(--mk-muted); } .mk-trend__srcs { display: flex; flex-direction: column; gap: .2rem; } .mk-trend__src { position: relative; z-index: 2; color: var(--mk-muted); text-decoration: none; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; } .mk-trend__src:hover { color: var(--mk-orange-ink); } .mk-trend .mk-rank__metric small { font-weight: 400; color: var(--mk-muted); } .mk-anchors { position: sticky; top: 64px; /* ใต้ .mk-nav (สูง ~66px, z-index สูงกว่า) */ z-index: 5; padding: .75rem 0; background: color-mix(in srgb, var(--mk-cream) 92%, transparent); backdrop-filter: blur(6px); border-bottom: 1px solid var(--mk-line); } .mk-anchors .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .6rem 1rem; } .mk-anchors .mk-tabs { box-shadow: none; border: 1px solid var(--mk-line); } body.mk .mk-anchors .mk-tabs .btn { text-decoration: none; } .mk-anchors__updated { font-size: .82rem; color: var(--mk-muted); } .mk-trend-section { scroll-margin-top: 140px; } .mk-trend-section__foot { margin-top: 1rem; font-size: .85rem; color: var(--mk-muted); } .mk-trend-section__foot a { color: var(--mk-orange-ink); } @media (max-width: 575.98px) { .mk-anchors { position: static; } .mk-anchors .mk-tabs { width: 100%; } } /* ═════════ หน้า "สำรวจรอบตัว" explore.html (08 A1.2 — explore.js) ═════════ */ .mk-ex { display: grid; grid-template-columns: 380px 1fr; height: calc(100vh - 66px); height: calc(100dvh - 66px); min-height: 520px; } .mk-ex__panel { position: relative; display: flex; flex-direction: column; min-height: 0; background: var(--mk-paper); border-right: 1px solid var(--mk-line); z-index: 2; } .mk-ex__scroll { overflow-y: auto; overscroll-behavior: contain; padding: 1.1rem 1.1rem 1.5rem; flex: 1; } .mk-ex__handle { display: none; } .mk-ex__head { margin-bottom: .75rem; } .mk-ex__title { font-size: 1.35rem; font-weight: 700; line-height: 1.3; margin: .15rem 0 0; } .mk-ex__title span { color: var(--mk-orange-ink); } .mk-ex__search { position: relative; margin-bottom: .6rem; } .mk-ex__search > i { position: absolute; left: .85rem; top: 50%; transform: translateY(-50%); color: var(--mk-muted); pointer-events: none; } .mk-ex__search .form-control { padding-left: 2.4rem; border-radius: 999px; background: var(--mk-cream); } .mk-ex__suggest { position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 20; margin: 0; padding: .3rem; list-style: none; background: var(--mk-paper); border: 1px solid var(--mk-line); border-radius: 12px; box-shadow: var(--mk-shadow-lg); max-height: 320px; overflow-y: auto; } .mk-ex__suggest li { display: flex; align-items: center; gap: .5rem; padding: .5rem .65rem; border-radius: 8px; cursor: pointer; } .mk-ex__suggest li:hover { background: var(--mk-sand); } .mk-ex__sg-name { flex: 1; min-width: 0; font-size: .9rem; } .mk-ex__sg-label { font-size: .72rem; color: var(--mk-muted); white-space: nowrap; } .mk-ex__sg-del { border: 0; background: none; color: var(--mk-muted); padding: 0 .25rem; } .mk-ex__sg-empty { cursor: default !important; font-size: .85rem; color: var(--mk-muted); } .mk-ex__centerbtns { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .35rem; } .mk-ex__savepin { display: flex; gap: .4rem; align-items: center; margin: .4rem 0; } .mk-ex__hint { font-size: .76rem; color: var(--mk-muted); margin: .25rem 0 .8rem; } .mk-ex__radius { margin-bottom: .7rem; } .mk-ex__radius .form-label { font-size: .88rem; } .mk-ex__radius b { color: var(--mk-orange-ink); } .mk-ex__radius-scale { display: flex; justify-content: space-between; font-size: .7rem; color: var(--mk-subtle); margin-top: -.2rem; } .mk-ex .form-range::-webkit-slider-thumb { background: var(--mk-orange); } .mk-ex .form-range::-moz-range-thumb { background: var(--mk-orange); } .mk-ex__filters { display: flex; flex-direction: column; gap: .45rem; margin-bottom: .8rem; } .mk-ex__chips { display: flex; flex-wrap: wrap; gap: .35rem; } .mk-ex__chips .mk-chip { font-size: .8rem; padding: .25rem .7rem; cursor: pointer; } .mk-ex__chips--scroll { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .mk-ex__chips--scroll::-webkit-scrollbar { display: none; } .mk-ex__chips--scroll .mk-chip { white-space: nowrap; } .mk-ex__actions { display: flex; gap: .5rem; margin-bottom: .9rem; } .mk-ex__count { font-size: .84rem; color: var(--mk-muted); margin-bottom: .4rem; } .mk-ex__count b { color: var(--mk-ink); } .mk-ex__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .mk-ex__item { position: relative; display: flex; align-items: center; gap: .7rem; padding: .6rem .4rem; border-bottom: 1px solid var(--mk-soft-line); border-radius: 10px; transition: background .15s ease; } .mk-ex__item:hover, .mk-ex__item.is-on { background: var(--mk-cream); } .mk-ex__item.is-on { box-shadow: inset 3px 0 0 var(--mk-orange); } .mk-ex__thumb { flex: none; width: 48px; height: 48px; border-radius: 50%; background: var(--mk-sand) center / 118% no-repeat; border: 2px solid var(--mk-paper); box-shadow: 0 1px 4px rgba(31, 27, 23, .18); } .mk-ex__info { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mk-ex__name { font-weight: 600; font-size: .92rem; color: var(--mk-ink) !important; text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-ex__meta { font-size: .75rem; color: var(--mk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-ex__side { flex: none; display: flex; flex-direction: column; align-items: flex-end; gap: .25rem; } .mk-ex__dist { font-size: .8rem; color: var(--mk-orange-ink); } .mk-ex__add { position: relative; z-index: 3; display: inline-flex; align-items: center; gap: .25rem; border: 1px solid var(--mk-line); background: var(--mk-paper); color: var(--mk-ink); border-radius: 999px; font-size: .72rem; font-weight: 600; padding: .15rem .55rem; } .mk-ex__add:hover { border-color: var(--mk-orange); color: var(--mk-orange-ink); } .mk-ex__add.is-added { background: var(--mk-orange); border-color: var(--mk-orange); color: #fff; } .mk-ex__empty { font-size: .85rem; color: var(--mk-muted); padding: .8rem .4rem; } .mk-ex__credit { font-size: .7rem; color: var(--mk-subtle); margin: .9rem 0 0; } .mk-ex__map { position: relative; height: 100%; border-radius: 0 !important; box-shadow: none !important; } .mk-ex__map.leaflet-container { height: 100%; } .mk-ex__mapfallback { display: flex; align-items: center; justify-content: center; height: 100%; color: var(--mk-muted); font-size: .9rem; } .mk-pin--center { width: 44px; height: 44px; background: var(--mk-orange); border-color: #fff; } .mk-pin--center .mk-pin__img { display: flex; align-items: center; justify-content: center; background: var(--mk-orange); color: #fff; font-size: 1.15rem; } .mk-pin--center::after { border-top-color: var(--mk-orange); } @media (max-width: 991.98px) { .mk-ex { display: block; position: relative; height: calc(100vh - 60px); height: calc(100dvh - 60px); min-height: 480px; overflow: hidden; } .mk-ex__map { position: absolute; inset: 0; } .mk-ex__panel { position: absolute; left: 0; right: 0; bottom: 0; height: 46%; border-right: 0; border-radius: 18px 18px 0 0; box-shadow: 0 -8px 30px rgba(31, 27, 23, .2); transition: height .25s ease; z-index: 500; } .mk-ex__panel[data-sheet="peek"] { height: 152px; } .mk-ex__panel[data-sheet="half"] { height: 46%; } .mk-ex__panel[data-sheet="full"] { height: 88%; } .mk-ex__panel.is-dragging { transition: none; } .mk-ex__handle { display: flex; justify-content: center; align-items: center; flex: none; width: 100%; height: 26px; border: 0; background: none; touch-action: none; cursor: grab; } .mk-ex__handle span { width: 44px; height: 5px; border-radius: 3px; background: var(--mk-line); } .mk-ex__scroll { padding-top: 0; } .mk-ex__title { font-size: 1.1rem; } } @media (prefers-reduced-motion: reduce) { .mk-ex__panel { transition: none; } } [data-bs-theme=dark] .mk-ex__handle span { background: #4A423B; } /* ตะกร้าทริปมุมจอ (trip-store.js mountBadge) */ .mk-tripbadge { position: fixed; right: 16px; bottom: 16px; z-index: 1035; display: inline-flex; align-items: center; gap: .45rem; padding: .55rem .9rem; border-radius: 999px; background: var(--mk-night); color: #fff !important; text-decoration: none; font-weight: 600; font-size: .9rem; box-shadow: var(--mk-shadow-lg); } .mk-tripbadge b { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5rem; height: 1.5rem; padding: 0 .35rem; border-radius: 999px; background: var(--mk-orange); font-size: .8rem; } .mk-tripbadge:hover { background: #000; } @media (max-width: 991.98px) { body:has(.mk-ex) .mk-tripbadge { top: 72px; bottom: auto; right: auto; left: 12px; } } [data-bs-theme=dark] .mk-tripbadge { background: #2E2823; border: 1px solid var(--mk-line); } /* สุ่มในรัศมี: สับชื่อ → พลิกการ์ด */ .mk-roll-modal .modal-content { background: var(--mk-paper); color: var(--mk-ink); border: 0; border-radius: 18px; } .mk-roll { perspective: 900px; } .mk-roll__card { border-radius: 14px; background: var(--mk-cream); border: 1px solid var(--mk-line); overflow: hidden; text-align: center; } .mk-roll__card--spin { display: flex; align-items: center; justify-content: center; min-height: 220px; padding: 1.5rem; font-size: 1.25rem; font-weight: 700; color: var(--mk-orange-ink); background: repeating-linear-gradient(45deg, var(--mk-cream) 0 12px, var(--mk-sand) 12px 24px); } .mk-roll__card--flip { animation: mk-roll-flip .55s ease both; } .mk-roll__media { position: relative; height: 150px; } .mk-roll__media .mk-cover { position: absolute; inset: 0; } .mk-roll__body { padding: 1rem 1rem 1.2rem; } .mk-roll__name { font-size: 1.3rem; font-weight: 700; margin: .5rem 0 .2rem; } @keyframes mk-roll-flip { from { transform: rotateY(90deg); opacity: .3; } to { transform: rotateY(0); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .mk-roll__card--flip { animation: none; } } /* ═════════ หน้า "วางแผนทริป" meal-planner.html (08 A1.3 — trip-planner.js) ═════════ */ .mk-tp-steps { display: flex; gap: .5rem; list-style: none; padding: 0; margin: 0 0 1.25rem; counter-reset: tp; flex-wrap: wrap; } .mk-tp-steps li { counter-increment: tp; display: flex; align-items: center; gap: .4rem; font-size: .85rem; color: var(--mk-muted); padding: .3rem .8rem .3rem .35rem; border-radius: 999px; background: var(--mk-cream); border: 1px solid var(--mk-line); } .mk-tp-steps li::before { content: counter(tp); display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: var(--mk-sand); font-weight: 700; font-size: .78rem; } .mk-tp-steps li.is-on { color: var(--mk-ink); border-color: var(--mk-orange); font-weight: 600; } .mk-tp-steps li.is-on::before, .mk-tp-steps li.is-done::before { background: var(--mk-orange); color: #fff; } .mk-tp-styles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .6rem; } .mk-tp-style { display: flex; flex-direction: column; gap: .15rem; padding: .9rem; border: 1.5px solid var(--mk-line); border-radius: var(--mk-radius); background: var(--mk-cream); cursor: pointer; height: 100%; } .mk-tp-style i { color: var(--mk-orange-ink); font-size: 1.2rem; margin-bottom: .2rem; } .mk-tp-style small { color: var(--mk-muted); font-size: .76rem; } .btn-check:checked + .mk-tp-style { border-color: var(--mk-orange); background: rgba(217, 83, 30, .08); } .btn-check:focus-visible + .mk-tp-style { outline: 2px solid var(--mk-orange); outline-offset: 2px; } .mk-tp-bar { display: flex; flex-wrap: wrap; gap: .75rem 1rem; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; } .mk-tp-title { width: 100%; border: 0; border-bottom: 2px dashed transparent; background: none; font-size: 1.6rem; font-weight: 700; color: var(--mk-ink); padding: 0; } .mk-tp-title:hover, .mk-tp-title:focus { border-bottom-color: var(--mk-line); outline: none; } .mk-tp-sub { font-size: .85rem; color: var(--mk-muted); } .mk-tp-baractions { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; } .mk-tp-baractions .form-select { max-width: 200px; } .mk-tp-days { display: flex; gap: .4rem; flex-wrap: wrap; margin-bottom: .75rem; } .mk-tp-day { display: inline-flex; align-items: center; gap: .35rem; border: 1px solid var(--mk-line); background: var(--mk-paper); color: var(--mk-ink); border-radius: 999px; padding: .35rem .9rem; font-weight: 600; font-size: .9rem; } .mk-tp-day small { font-weight: 400; color: var(--mk-muted); } .mk-tp-day.is-on { background: var(--mk-ink); border-color: var(--mk-ink); color: var(--mk-paper); } .mk-tp-day.is-on small { color: inherit; opacity: .75; } .mk-tp-day__x { margin-left: .15rem; opacity: .6; font-size: 1.05rem; line-height: 1; } .mk-tp-day__x:hover { opacity: 1; } .mk-tp-day--add { border-style: dashed; color: var(--mk-muted); } .mk-tp-dayhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .5rem; margin-bottom: .75rem; } #tpNavigate.disabled { pointer-events: none; opacity: .5; } .mk-tp-timeline { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: .15rem; } .mk-tp-stop { position: relative; } .mk-tp-stop__row { display: flex; align-items: center; gap: .75rem; padding: .75rem .85rem .35rem; background: var(--mk-paper); border: 1px solid var(--mk-line); border-bottom: 0; border-radius: var(--mk-radius) var(--mk-radius) 0 0; } .mk-tp-stop__acts { display: flex; flex-wrap: wrap; gap: .25rem; padding: .3rem .85rem .6rem; background: var(--mk-paper); border: 1px solid var(--mk-line); border-top: 0; border-radius: 0 0 var(--mk-radius) var(--mk-radius); } .mk-tp-stop__acts button { display: inline-flex; align-items: center; gap: .3rem; border: 1px solid transparent; background: var(--mk-cream); color: var(--mk-ink); border-radius: 999px; padding: .2rem .6rem; font-size: .76rem; } .mk-tp-stop__acts button:hover:not(:disabled) { border-color: var(--mk-line); } .mk-tp-stop__acts button:disabled { opacity: .4; } .mk-tp-stop__acts .mk-tp-danger { margin-left: auto; color: #B3261E; } .mk-tp-stop.is-locked .mk-tp-stop__row, .mk-tp-stop.is-locked .mk-tp-stop__acts { border-color: var(--mk-gold); } .mk-tp-stop.is-dragging { opacity: .45; } .mk-tp-stop.is-dropover .mk-tp-stop__row { box-shadow: 0 -3px 0 var(--mk-orange); } .mk-tp-stop__no { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mk-orange); color: #fff; font-weight: 700; font-size: .82rem; cursor: grab; } .mk-tp-stop__time { flex: none; display: flex; flex-direction: column; gap: .15rem; width: 112px; } .mk-tp-stop__time input { border: 1px solid var(--mk-line); border-radius: 8px; padding: .1rem .35rem; font-size: .9rem; font-weight: 600; background: var(--mk-cream); color: var(--mk-ink); width: 100%; } .mk-tp-stop__type { font-size: .72rem; color: var(--mk-orange-ink); font-weight: 600; white-space: nowrap; } .mk-tp-stop__type i { margin-right: .25rem; } .mk-tp-stop__thumb { flex: none; width: 46px; height: 46px; border-radius: 50%; background: var(--mk-sand) center / 118% no-repeat; } .mk-tp-stop__thumb--icon { display: flex; align-items: center; justify-content: center; color: var(--mk-orange-ink); font-size: 1.1rem; } .mk-tp-stop__body { flex: 1; min-width: 0; display: flex; flex-direction: column; } .mk-tp-stop__name { font-weight: 600; color: var(--mk-ink); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } a.mk-tp-stop__name:hover { color: var(--mk-orange-ink); } .mk-tp-stop__meta { font-size: .76rem; color: var(--mk-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-tp-gap { font-size: .74rem; color: var(--mk-muted); padding: .1rem 0 .35rem 1.05rem; border-left: 2px dashed var(--mk-line); margin-left: 1.25rem; } .mk-tp-empty { padding: 1.2rem; text-align: center; color: var(--mk-muted); border: 1px dashed var(--mk-line); border-radius: var(--mk-radius); } .mk-tp-addrow { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; padding: .75rem; border: 1px dashed var(--mk-line); border-radius: var(--mk-radius); } .mk-tp-addrow .mk-chip { cursor: pointer; font-size: .82rem; } .mk-tp-addrow .mk-chip:hover { border-color: var(--mk-orange); } .mk-tp-side { position: sticky; top: 84px; display: flex; flex-direction: column; gap: 1rem; } .mk-tp-map { height: 360px; } .mk-pin__no { position: absolute; top: -6px; right: -6px; min-width: 20px; height: 20px; padding: 0 4px; border-radius: 999px; background: var(--mk-night); color: #fff; font-size: .72rem; font-weight: 700; display: flex; align-items: center; justify-content: center; border: 2px solid #fff; } .mk-pin--place .mk-pin__img { display: flex; align-items: center; justify-content: center; background: var(--mk-gold); color: #fff; } .mk-tp-check .progress { height: 8px; background: var(--mk-sand); } .mk-tp-check .progress-bar { background: var(--mk-orange); transition: width .3s ease; } .mk-tp-pct { color: var(--mk-orange-ink); font-size: 1.1rem; } .mk-tp-event { display: flex; gap: .6rem; padding: .6rem .75rem; border-radius: 10px; background: rgba(224, 169, 62, .14); margin-bottom: .6rem; font-size: .88rem; } .mk-tp-event i { color: var(--mk-orange-ink); margin-top: .2rem; } .mk-tp-checkgroup { margin-bottom: .6rem; } .mk-tp-checkgroup__title { font-size: .74rem; font-weight: 700; color: var(--mk-muted); text-transform: uppercase; margin-bottom: .2rem; } .mk-tp-checkitem { display: flex; align-items: flex-start; gap: .3rem; font-size: .9rem; margin-bottom: .2rem; } .mk-tp-checkitem .form-check-input:checked { background-color: var(--mk-orange); border-color: var(--mk-orange); } .mk-tp-checkitem .form-check-input:checked + label { color: var(--mk-muted); text-decoration: line-through; } .mk-tp-checkdel { margin-left: auto; border: 0; background: none; color: var(--mk-muted); font-size: 1.1rem; line-height: 1; } .mk-tp-modal .modal-content { background: var(--mk-paper); color: var(--mk-ink); border: 0; border-radius: 16px; } .mk-tp-modal .modal-header { border-color: var(--mk-line); } .mk-tp-tabs { display: flex; gap: .25rem; padding: .25rem; margin-bottom: 1rem; border-radius: 999px; background: var(--mk-sand); position: sticky; top: 62px; z-index: 20; } .mk-tp-tabs button { flex: 1; border: 0; border-radius: 999px; padding: .45rem .5rem; background: none; font-weight: 600; color: var(--mk-muted); font-size: .9rem; } .mk-tp-tabs button.is-on { background: var(--mk-paper); color: var(--mk-ink); box-shadow: var(--mk-shadow); } @media (max-width: 991.98px) { .mk-tp-pane:not(.is-on) { display: none; } .mk-tp-side { position: static; } .mk-tp-map { height: 60vh; } .mk-tp-title { font-size: 1.3rem; } } @media (max-width: 575.98px) { .mk-tp-stop__row { flex-wrap: wrap; } .mk-tp-stop__time { width: auto; flex-direction: row; align-items: center; gap: .5rem; } .mk-tp-stop__time input { width: 112px; } .mk-tp-stop__body { flex-basis: calc(100% - 60px); } .mk-tp-baractions { width: 100%; } } [data-bs-theme=dark] .mk-tp-tabs { background: #2A2521; } [data-bs-theme=dark] .mk-tp-stop__acts .mk-tp-danger { color: #F2B8B5; } /* พิมพ์/บันทึก PDF: ไทม์ไลน์วันที่เลือก + แผนที่เส้นทาง + เช็กลิสต์ */ @media print { .mk-nav, .mk-footer, .mk-pagehead, .consent-banner, .mk-tripbadge, .mk-tp-baractions, .mk-tp-tabs, .mk-tp-addrow, .mk-tp-stop__acts, .mk-tp-dayhead .d-flex, .leaflet-control-container, #tpCheckAdd, .mk-tp-day--add, .mk-tp-day__x, #tpImportNotice { display: none !important; } .mk-tp-pane { display: block !important; } .mk-tp-stop__row { border-bottom: 1px solid var(--mk-line); border-radius: var(--mk-radius); break-inside: avoid; } .mk-tp-side { position: static; } .col-lg-7, .col-lg-5 { width: 100% !important; } body.mk { background: #fff !important; } #tpTimeline, #tpDayTabs, #tpDayStats { display: none !important; } .mk-tp-printall { display: block !important; } .mk-tp-printday { font-size: 1.05rem; font-weight: 700; margin: 1rem 0 .5rem; } } .mk-tp-printall { display: none; } .mk-tp-wizard { max-width: 760px; margin: 0 auto; } /* หน้าเริ่มทริป: การ์ดเลือกแบบสัมผัส + ตัวอย่างแผนที่เปลี่ยนทันที */ .mk-tp-launch { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); overflow: hidden; border: 1px solid var(--mk-line); border-radius: 22px; background: var(--mk-paper); box-shadow: var(--mk-shadow-lg); } .mk-tp-launch__control { min-width: 0; padding: clamp(1.35rem, 3vw, 3rem); } body.mk .mk-tp-launch h2 { margin: .1rem 0 .65rem; font-size: clamp(1.9rem, 1.4rem + 1.6vw, 2.8rem); line-height: 1.18; } .mk-tp-launch h2 span { color: var(--mk-orange-ink); } .mk-tp-launch__lead { max-width: 34rem; color: var(--mk-muted); margin-bottom: 1.4rem; } .mk-tp-launch__group { border: 0; padding: 0; margin: 0 0 1.35rem; min-width: 0; } .mk-tp-launch__group legend { float: none; width: auto; margin-bottom: .6rem; font-size: .94rem; font-weight: 700; } .mk-tp-launch .mk-tp-styles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .6rem; } .mk-tp-launch .mk-tp-style { min-width: 0; min-height: 94px; background: var(--mk-cream); border-width: 2px; transition: transform .16s ease, border-color .16s ease, background-color .16s ease; } .mk-tp-launch .mk-tp-style:hover { transform: translateY(-2px); border-color: var(--mk-orange); } .mk-tp-launch .mk-tp-style i { font-size: 1.1rem; } .mk-tp-launch .mk-tp-style small { line-height: 1.4; } .mk-tp-launch__days { gap: .45rem; } .mk-tp-launch__days .btn { flex: 1 1 0; white-space: nowrap; } .mk-tp-launch__details { margin: .25rem 0 1.3rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-cream); } .mk-tp-launch__details summary { display: flex; align-items: center; gap: .55rem; padding: .8rem .95rem; cursor: pointer; font-weight: 600; list-style: none; } .mk-tp-launch__details summary::-webkit-details-marker { display: none; } .mk-tp-launch__details summary::after { content: "⌄"; margin-left: .2rem; font-size: 1.15rem; line-height: 1; } .mk-tp-launch__details[open] summary::after { transform: rotate(180deg); } .mk-tp-launch__details summary > span { margin-left: auto; color: var(--mk-muted); font-size: .78rem; font-weight: 400; } .mk-tp-launch__details-body { padding: 0 .95rem 1rem; } .mk-tp-launch__details-body #tpDate { max-width: 240px; } .mk-tp-launch__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; } body.mk .mk-tp-launch__actions #tpNext { min-height: 50px; padding: .6rem 1.45rem; font-size: 1.04rem; } .mk-tp-launch__preview { position: relative; min-width: 0; min-height: 610px; isolation: isolate; color: #fff; background: var(--mk-night); } .mk-tp-launch__photo { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .mk-tp-launch__preview::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(16, 18, 15, .27), rgba(18, 20, 16, .86) 44%, rgba(16, 18, 15, .96)); } .mk-tp-launch__preview-inner { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; padding: clamp(1.3rem, 3vw, 2.5rem); } .mk-tp-launch__preview-label { display: inline-flex; align-items: center; gap: .5rem; align-self: flex-start; padding: .35rem .7rem; border: 1px solid rgba(255,255,255,.45); border-radius: 999px; background: rgba(0,0,0,.25); font-size: .78rem; font-weight: 600; } body.mk .mk-tp-launch__preview h3 { color: #fff; margin: .8rem 0 .1rem; font-size: clamp(1.4rem, 1.1rem + .8vw, 1.9rem); } .mk-tp-launch__preview p { color: rgba(255,255,255,.78); font-size: .86rem; } .mk-tp-launch__stops { list-style: none; margin: .5rem 0 1rem; padding: 0; } .mk-tp-launch__stops li { display: flex; align-items: center; gap: .65rem; padding: .5rem .1rem; border-bottom: 1px solid rgba(255,255,255,.22); font-size: .9rem; } .mk-tp-launch__time { width: 3.25rem; flex: none; color: rgba(255,255,255,.7); font-variant-numeric: tabular-nums; } .mk-tp-launch__stop-icon { flex: none; display: grid; place-items: center; width: 1.7rem; height: 1.7rem; border-radius: 50%; background: var(--mk-orange); color: #fff; font-size: .7rem; } .mk-tp-launch__preview-foot { color: rgba(255,255,255,.72); font-size: .78rem; } @media (max-width: 991.98px) { .mk-tp-launch { grid-template-columns: 1fr; } .mk-tp-launch__preview { min-height: 350px; } } @media (max-width: 575.98px) { .mk-tp-launch { border-radius: 16px; } .mk-tp-launch__control { padding: 1.2rem; } .mk-tp-launch__lead { font-size: .9rem; } .mk-tp-launch .mk-tp-style { min-height: 88px; padding: .65rem; } .mk-tp-launch__days { flex-wrap: wrap; } .mk-tp-launch__days .btn { flex: 1 1 30%; padding-inline: .2rem; font-size: .85rem; } .mk-tp-launch__details summary { flex-wrap: wrap; } .mk-tp-launch__details summary > span { width: 100%; margin-left: 1.5rem; } body.mk .mk-tp-launch__actions #tpNext { width: 100%; } .mk-tp-launch__preview { min-height: 320px; } } /* จุดสถานะเช็กอินบนหมุด V4 */ .mk-live-dot { position:absolute; right:-10px; top:-8px; min-width:21px; height:21px; border-radius:99px; padding:0 4px; background:#14864c; color:#fff; font-size:11px; font-weight:700; line-height:21px; text-align:center; box-shadow:0 0 0 3px #fff; animation:mk-live-pulse 2s ease-in-out infinite; } @keyframes mk-live-pulse { 50% { box-shadow:0 0 0 6px rgba(20,134,76,.24); } } @media (prefers-reduced-motion:reduce) { .mk-live-dot { animation:none; } } /* กิจกรรมเช็กอินบนหน้าร้าน: แสดงทันทีใต้ชื่อร้าน */ .mk-checkin { overflow: hidden; border: 1px solid #B7D9C5; border-radius: 18px; background: var(--mk-paper); box-shadow: var(--mk-shadow); } .mk-checkin__main { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; padding: 1.5rem 1.75rem; background: linear-gradient(105deg, #EAF8EE, #F5FAF2 62%, #FFFAEC); } .mk-checkin__copy { min-width: 0; } .mk-checkin__eyebrow { display: inline-flex; align-items: center; gap: .45rem; margin-bottom: .35rem; color: #166A43; font-size: .82rem; font-weight: 700; } body.mk .mk-checkin h2 { margin: 0 0 .35rem; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.9rem); } .mk-checkin__copy > p { margin: 0; color: #405A49; } .mk-checkin__copy .mk-checkin__live:not(:empty) { margin-top: .55rem; font-weight: 700; color: #176C44; } .mk-checkin__cta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: center; gap: .4rem; max-width: 320px; text-align: center; } body.mk .mk-checkin__button { width: 100%; min-height: 54px; padding: .7rem 1.1rem; background: #1C784D; border: 1px solid #1C784D; color: #fff; font-size: 1.05rem; font-weight: 700; box-shadow: 0 8px 18px rgba(25, 111, 70, .19); } body.mk .mk-checkin__button:hover { background: #155E3D; border-color: #155E3D; color: #fff; transform: translateY(-1px); } .mk-checkin__cta > span { color: #4D6655; font-size: .75rem; line-height: 1.45; } .mk-checkin__verify { padding: 1.05rem 1.75rem 1.15rem; } .mk-checkin__verify-head { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: .4rem 1rem; margin-bottom: .7rem; } body.mk .mk-checkin__verify h3 { margin: 0; font-size: 1rem; } .mk-checkin__verify-head p, .mk-checkin__online { font-size: .84rem; color: var(--mk-muted); } .mk-checkin__actions { display: flex; flex-wrap: wrap; gap: .45rem; } .mk-checkin__note { margin-top: .65rem; color: var(--mk-muted); font-size: .78rem; } [data-bs-theme=dark] .mk-checkin { border-color: #31533C; } [data-bs-theme=dark] .mk-checkin__main { background: linear-gradient(105deg, #1B3426, #202D22 62%, #30291C); } [data-bs-theme=dark] .mk-checkin__eyebrow, [data-bs-theme=dark] .mk-checkin__copy .mk-checkin__live:not(:empty) { color: #8BDBAC; } [data-bs-theme=dark] .mk-checkin__copy > p, [data-bs-theme=dark] .mk-checkin__cta > span { color: #C7DDCB; } @media (max-width: 767.98px) { .mk-checkin__main { flex-direction: column; align-items: stretch; gap: 1rem; padding: 1.2rem; } .mk-checkin__cta { max-width: none; align-items: stretch; text-align: left; } .mk-checkin__verify { padding: 1rem 1.2rem 1.15rem; } .mk-checkin__actions .btn { flex: 1 1 140px; } } /* หน้าแรก: สถานะร้านสามกลุ่มจากข้อมูลจริง */ .mk-home-activity { padding-top: 2rem; padding-bottom: 2.5rem; } .mk-home-activity__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; } .mk-home-activity__card { min-width: 0; padding: 1.15rem; border: 1px solid var(--mk-line); border-radius: 16px; background: var(--mk-paper); box-shadow: var(--mk-shadow); } .mk-home-activity__head { display: flex; align-items: flex-start; gap: .75rem; margin-bottom: .85rem; } .mk-home-activity__icon { flex: none; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; font-size: 1.15rem; } .mk-home-activity__icon--verified { color: #146B49; background: #E7F5EC; } .mk-home-activity__icon--here { color: #A73C16; background: #FFF0E6; } .mk-home-activity__icon--online { color: #285E9A; background: #E8F2FF; } body.mk .mk-home-activity__head h3 { margin: 0; font-size: 1.04rem; line-height: 1.3; } .mk-home-activity__head p { margin: .15rem 0 0; color: var(--mk-muted); font-size: .78rem; line-height: 1.45; } .mk-home-activity__list { border-top: 1px solid var(--mk-soft-line); } .mk-home-activity__item { display: flex; flex-direction: column; gap: .05rem; min-width: 0; padding: .65rem .1rem; border-bottom: 1px solid var(--mk-soft-line); } .mk-home-activity__item:hover .mk-home-activity__name { color: var(--mk-orange-ink); } .mk-home-activity__name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; font-size: .9rem; } .mk-home-activity__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--mk-muted); font-size: .76rem; } .mk-home-activity__empty { margin: .85rem 0 .15rem; color: var(--mk-muted); font-size: .86rem; line-height: 1.5; } .mk-home-activity__empty a { color: var(--mk-orange-ink); font-weight: 700; text-decoration: underline; } [data-bs-theme=dark] .mk-home-activity__icon--verified { color: #8BDBAC; background: #213C2D; } [data-bs-theme=dark] .mk-home-activity__icon--here { color: #FFB999; background: #3B281F; } [data-bs-theme=dark] .mk-home-activity__icon--online { color: #A9D2FF; background: #202F41; } @media (max-width: 991.98px) { .mk-home-activity__grid { grid-template-columns: 1fr; } } /* ==== W1-U4U5 ==== */ #placeTrust { position: relative; } .mk-trust-progress { margin-top: 0.5rem; height: 4px; background: #e5e7eb; border-radius: 2px; overflow: hidden; } .mk-trust-progress-bar { height: 100%; background: linear-gradient(90deg, #22c55e, #16a34a); border-radius: 2px; transition: width 0.3s ease; } #placeTrust i, #placeClosed i, #placeLive i { margin-right: 0.35rem; } #placeLive i:first-child { color: #22c55e; } #placeViewers { font-size: 0.84rem; color: var(--mk-muted); } #placeViewers:not(:empty) { display: inline-flex; align-items: center; gap: 0.35rem; } #placeViewers i { font-size: 0.9em; } /* ==== W1-U3 ==== */ .mk-load-more-error { font-size: .82rem; } #listingLoadMoreBtn:disabled, #areaLoadMoreBtn:disabled { opacity: .75; } /* ==== W1-U7 ==== */ .mk-ex__centerbar { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; color: var(--mk-muted); font-size: .82rem; line-height: 1.4; } .mk-ex__centerwarn { margin-top: .55rem; padding: .6rem .75rem; border: 1px solid #F3D8A0; border-radius: 12px; background: #FFF8EA; color: #7A5613; font-size: .82rem; } .mk-ex__centerwarn-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .mk-ex__centerwarn-row span { flex: 1 1 auto; min-width: 0; } .mk-ex__centerwarn-row button { flex: none; } .mk-ex__centerwarn-status { margin-top: .4rem; font-size: .78rem; } [data-bs-theme=dark] .mk-ex__centerwarn { background: #3B2F14; border-color: #6B4E17; color: #F0D48A; } /* ==== W3-U6 ==== */ /* ป้ายความน่าเชื่อถือแบบเดียวกันทุกหน้า (assets/js/trust-badge.js) — ไม่มี trustLevel = ไม่ render เลย ไม่ต้องกัน .mk-trust:empty */ .mk-trust { display: inline-flex; align-items: center; gap: .3rem; max-width: 100%; padding: .12rem .55rem; border-radius: 999px; border: 1px solid transparent; font-size: .74rem; font-weight: 600; line-height: 1.5; white-space: nowrap; } .mk-trust i { font-size: .82em; flex: none; } .mk-trust__text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mk-trust--md { padding: .25rem .7rem; font-size: .82rem; } .mk-trust--unconfirmed { color: #5B6472; background: #EEF0F3; border-color: #DEE2E7; } .mk-trust--community { color: #1D5FA3; background: #E6F1FC; border-color: #C9E2F8; } .mk-trust--admin { color: #146B49; background: #E7F5EC; border-color: #CDEBD8; } .mk-trust--owner { color: #0B4A32; background: #D6EEDF; border-color: #B7E0C9; } [data-bs-theme=dark] .mk-trust--unconfirmed { color: #C3CAD3; background: #2A2F37; border-color: #3A4048; } [data-bs-theme=dark] .mk-trust--community { color: #A9D2FF; background: #1C3350; border-color: #274469; } [data-bs-theme=dark] .mk-trust--admin { color: #8BDBAC; background: #1E3A2A; border-color: #2A4E39; } [data-bs-theme=dark] .mk-trust--owner { color: #8BDBAC; background: #17422D; border-color: #235B3E; } /* .mk-card__meta เป็น flex-wrap อยู่แล้ว (บรรทัด ~405) — ป้ายจะขึ้นบรรทัดใหม่แทนดันการ์ดล้นเมื่อพื้นที่ไม่พอ */ .mk-card__meta .mk-trust { margin-left: 0; } #restaurantTrustBadge:empty { display: none; } .mk-shophead__meta { flex-wrap: wrap; row-gap: .35rem; } /* ==== W4-C6ui ==== */ /* หน้าแรก: ตัดคอลัมน์ "ร้านที่มีคนดูออนไลน์" ออกแล้ว (เหลือยืนยันแล้ว/มีคนอยู่ที่ร้าน) — ปรับ grid ให้ 2 คอลัมน์เต็มพื้นที่ */ .mk-home-activity__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 575.98px) { .mk-home-activity__grid { grid-template-columns: 1fr; } } /* หน้าร้าน: กล่อง "ตอนนี้ร้านเป็นยังไง" + ปุ่มรายงานสถานะ — อยู่ใต้ปุ่มเช็กอิน เหนือ "ช่วยยืนยันร้านนี้" */ /* Opus: padding ซ้ายขวาเท่า .mk-checkin__verify (เดิมชิดขอบกล่อง) */ .mk-checkin__status { padding: 1rem 1.75rem .2rem; border-top: 1px solid var(--mk-soft-line); } @media (max-width: 767.98px) { .mk-checkin__status { padding: 1rem 1.2rem .2rem; } } .mk-checkin__status-now { margin: 0 0 .55rem; font-size: .86rem; color: var(--mk-muted); } .mk-checkin__status-now:empty { display: none; margin: 0; } .mk-checkin__status-now i { margin-right: .3rem; } .mk-checkin__status-panel { margin-top: .65rem; } .mk-checkin__status-row { display: flex; flex-wrap: wrap; gap: .4rem; margin-bottom: .5rem; } .mk-status-choice[aria-pressed="true"], .mk-status-choice.active { color: #fff; background: var(--mk-orange, #D9622B); border-color: var(--mk-orange, #D9622B); } .mk-checkin__status-send { margin-top: .2rem; } /* #placeLive เดิมมีสีเขียวที่ไอคอนแรก (W1-U4U5) สำหรับจุดกลม "เปิดอยู่" — ตอนนี้ไอคอนแรกเป็น fa-user-group แล้ว ไม่ใช่สถานะเปิด/ปิด จึงล้างสีทิ้ง */ #placeLive i:first-child { color: inherit; } /* ==== W4-C34ui ==== */ /* การ์ด/ปกที่มีรูปจริง (r.coverThumb / r.cover — food-art.js coverHtml) — รูปเต็มพื้นที่แทนภาพประกอบ AI สองชั้น */ .mk-cover--photo .mk-cover__real { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .mk-cover--photo:hover .mk-cover__real { transform: scale(1.06); transition: transform .3s ease; } /* หน้าร้าน: แกลเลอรีรูปร้านจริง — แถวภาพย่อเลื่อนแนวนอน */ .mk-gallery { margin-bottom: 1.75rem; } .mk-gallery__track { display: flex; gap: .6rem; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: .3rem; } .mk-gallery__thumb { flex: 0 0 auto; width: 108px; height: 108px; padding: 0; border: 0; border-radius: 10px; overflow: hidden; cursor: pointer; scroll-snap-align: start; background: var(--mk-cream); } .mk-gallery__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .2s ease; } .mk-gallery__thumb:hover img, .mk-gallery__thumb:focus-visible img { transform: scale(1.06); } .mk-gallery__thumb:focus-visible { outline: 2px solid var(--mk-orange, #e8622c); outline-offset: 2px; } /* modal lightbox ภาพเต็ม */ /* #shopGalleryModal .modal-content (id + class) ต้องชนะ body.mk .modal-content เดิมใน mk.css (element+2 คลาส) */ #shopGalleryModal .mk-gallery__modal { background: #17130F; color: #fff; } .mk-gallery__full { max-width: 100%; max-height: 70vh; border-radius: 8px; object-fit: contain; } .mk-gallery__modal .fs-13, .mk-gallery__modal .fs-12 { color: rgba(255, 255, 255, .78); } .mk-gallery__nav { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 42px; height: 42px; border-radius: 999px; border: 0; background: rgba(0, 0, 0, .45); color: #fff; display: inline-flex; align-items: center; justify-content: center; } .mk-gallery__nav:hover { background: rgba(0, 0, 0, .68); } .mk-gallery__nav--prev { left: .5rem; } .mk-gallery__nav--next { right: .5rem; } /* หน้าร้าน: "รีวิวจากทีมเมืองกาญ.com" — แยกจาก "รีวิวจากแพลตฟอร์มอื่น" */ .mk-team-reviews { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; } .mk-team-review { padding: 1rem 1.1rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-paper); box-shadow: var(--mk-shadow); } .mk-team-review__stars { color: #e8a53c; font-size: .85rem; margin-bottom: .4rem; } .mk-team-review__body { margin: 0 0 .5rem; white-space: pre-line; line-height: 1.6; } .mk-team-review__meta { margin: 0; font-size: .78rem; color: var(--mk-muted); } [data-bs-theme=dark] .mk-team-review { background: var(--mk-paper); } /* ==== W5-U8 ==== */ .mk-facts__edit-link { margin: -.5rem 0 1.5rem; font-size: .85rem; } .mk-facts__edit-link a { color: var(--mk-muted); text-decoration: underline; } .mk-facts__edit-link a:hover { color: inherit; } .mk-contribute { margin-top: 2rem; padding-top: 1.5rem; border-top: 1px solid var(--mk-line); } .mk-contribute__grid { display: grid; grid-template-columns: 1fr; gap: .75rem; margin-bottom: .75rem; } @media (min-width: 768px) { .mk-contribute__grid { grid-template-columns: 1fr 1fr; } } .mk-contribute__item { display: flex; align-items: flex-start; gap: .1rem; width: 100%; text-align: left; padding: .9rem 1rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-paper); color: inherit; text-decoration: none; cursor: pointer; transition: border-color .15s ease, box-shadow .15s ease; } .mk-contribute__item:hover, .mk-contribute__item:focus-visible { border-color: var(--mk-brand, var(--mk-line)); box-shadow: var(--mk-shadow); text-decoration: none; color: inherit; } .mk-contribute__item i { margin-top: .15rem; color: var(--mk-muted); } .mk-contribute__item-title { display: block; font-weight: 600; } .mk-contribute__item-desc { display: block; font-size: .8rem; color: var(--mk-muted); margin-top: .15rem; } .mk-contribute__foot { margin-top: .25rem; } .mk-contribute__foot a { text-decoration: underline; } /* ==== W5-U9ui ==== */ /* add-listing.html: เลขอ้างอิงหลังส่งสำเร็จ — ตัวใหญ่อ่านง่ายตามที่ใบงานสั่ง */ .mk-sub-ref { font-size: 1.15rem; } .mk-sub-ref b { font-size: 1.3em; letter-spacing: .02em; } /* add-listing.html (U10): ช่องไม่บังคับพับไว้ใน

*/ .mk-more { border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-cream); padding: .1rem 1rem; } .mk-more > summary { list-style: none; cursor: pointer; padding: .85rem 0; font-weight: 600; display: flex; align-items: center; gap: .5rem; } .mk-more > summary::-webkit-details-marker { display: none; } .mk-more > summary::before { content: "\f105"; font-family: "Font Awesome 6 Free"; font-weight: 900; transition: transform .15s ease; color: var(--mk-muted); } .mk-more[open] > summary::before { transform: rotate(90deg); } .mk-more__body { padding: .1rem 0 1rem; } [data-bs-theme=dark] .mk-more { background: var(--mk-paper); } /* my-submissions.html: การ์ดรายการที่ส่ง */ .mk-sub-list { display: flex; flex-direction: column; gap: 1rem; } .mk-sub-card { padding: 1rem 1.1rem; border: 1px solid var(--mk-line); border-radius: 12px; background: var(--mk-paper); box-shadow: var(--mk-shadow); } .mk-sub-card__head { display: flex; align-items: center; justify-content: space-between; gap: .5rem; margin-bottom: .5rem; } .mk-sub-card__kind { font-size: .74rem; } .mk-sub-card__date { font-size: .78rem; color: var(--mk-muted); } .mk-sub-card__name { font-weight: 700; margin: 0 0 .2rem; } .mk-sub-card__ref { font-size: .85rem; color: var(--mk-muted); margin: 0 0 .7rem; } .mk-sub-card__ref b { color: var(--mk-ink); letter-spacing: .02em; } .mk-sub-card__notfound { font-size: .88rem; color: var(--mk-muted); } .mk-sub-card__remove { margin-top: .8rem; } /* stepper 3 ขั้น: รับเรื่องแล้ว → รอทีมงานตรวจ → แสดงแล้ว/ดำเนินการแล้ว */ .mk-sub-steps { display: flex; list-style: none; margin: 0; padding: 0; gap: .4rem; } .mk-sub-step { flex: 1; display: flex; flex-direction: column; align-items: flex-start; gap: .35rem; font-size: .74rem; color: var(--mk-muted); } .mk-sub-step::before { content: ""; display: block; width: 100%; height: 4px; border-radius: 999px; background: var(--mk-line); } .mk-sub-step--done::before, .mk-sub-step--active::before { background: var(--mk-orange); } .mk-sub-step--muted::before { background: var(--mk-muted); } .mk-sub-step--active .mk-sub-step__label, .mk-sub-step--done .mk-sub-step__label { color: var(--mk-ink); font-weight: 600; } .mk-sub-step__dot { display: none; } .mk-sub-step__label a { text-decoration: underline; } /* ==== W5-U11 ==== */ /* ป้ายเวลาเปิด-ปิดต่อจุดแวะในไทม์ไลน์ทริป + หน้าพิมพ์ (assets/js/trip-planner.js hoursBadgeHtml) อยู่นอก .mk-tp-stop__meta (ซึ่ง nowrap+ellipsis) โดยตั้งใจ — ให้ตกบรรทัดของตัวเองใน .mk-tp-stop__body (flex column) แทนที่จะถูกตัดหายเมื่อชื่อย่านยาว */ .mk-tp-hours { display: flex; align-items: center; gap: .25rem; margin-top: .1rem; font-size: .76rem; color: var(--mk-muted); } .mk-tp-hours i { font-size: .82em; } .mk-tp-hours--unknown { color: #B15C1E; } [data-bs-theme=dark] .mk-tp-hours--unknown { color: #E0A93E; } /* บรรทัดอธิบายระยะโดยประมาณ (เส้นตรง) ใต้สถิติวัน — ครั้งเดียวต่อหน้า */ .mk-tp-distnote { margin-top: .15rem; } /* แถบเตือนร้านที่ยังไม่ทราบเวลาเปิดของวันนั้น — เหนือไทม์ไลน์ */ .mk-tp-hourswarn { margin-bottom: .75rem; } /* ไม่ต้องมีตอนพิมพ์ (หน้าพิมพ์แสดงทุกวันรวมกัน แถบนี้อิงวันที่กำลังเปิดอยู่วันเดียว) — เพิ่มกฎเองแทนแก้ selector รวมเดิมของ media print */ @media print { #tpHoursWarn { display: none !important; } } /* ==== W5-U12 ==== */ /* แถบ "เพื่อนแชร์ร้านนี้มา" (ปุ่มแชร์ร้านใช้ .btn .btn-outline-primary เหมือนปุ่มข้างเคียง) */ .mk-share-bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 1rem; padding: 1rem 3rem 1rem 1rem; margin-bottom: 1.5rem; border-left: 4px solid var(--mk-orange); border-radius: 8px; background: var(--mk-paper); box-shadow: var(--mk-shadow); } .mk-share-bar__content { display: flex; align-items: center; gap: .5rem; flex: 1 1 auto; } .mk-share-bar__content i { color: var(--mk-orange); font-size: 1.1rem; } .mk-share-bar__text { font-weight: 600; color: var(--mk-ink); } .mk-share-bar__actions { display: flex; flex-wrap: wrap; gap: .5rem; } .mk-share-bar .btn-close { position: absolute; top: .9rem; right: .9rem; } [data-bs-theme=dark] .mk-share-bar .btn-close { filter: invert(1) grayscale(100%) brightness(200%); } @media (max-width: 575.98px) { .mk-share-bar { padding: .8rem 2.75rem .8rem .8rem; } .mk-share-bar__actions { width: 100%; } .mk-share-bar__actions .btn { flex: 1 1 auto; } .mk-share-bar .btn-close { top: .8rem; right: .75rem; } } /* ── W6 หน้าบทความ /b/ (server/src/services/blog-page.js) ── */ .mk-blog-place { border-top: 1px solid var(--mk-line); padding: 1.4rem 0 .6rem; } .mk-blog-place h2 { margin-top: 0; } .mk-blog-place__meta { color: var(--mk-muted) !important; font-size: .92rem; display: flex; flex-wrap: wrap; align-items: center; gap: .35rem; } .mk-blog-tip { background: var(--mk-sand); border-radius: var(--mk-radius); padding: .75rem 1rem; } .mk-blog .mk-share .btn { font-size: .9rem; } body.mk .mk-blog .mk-blog-place .btn, body.mk .mk-blog .mk-share .btn { text-decoration: none; } .mk-blog-cover { margin: 0 0 1rem; } .mk-blog-cover img { width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: var(--mk-radius); box-shadow: var(--mk-shadow); } .mk-blog-cover figcaption { font-size: .8rem; color: var(--mk-subtle); margin-top: .35rem; text-align: right; }