*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:#f5f0e8;color:#3e2a19;font-family:Tahoma,"Noto Sans Thai",Arial,sans-serif}a{color:inherit;text-decoration:none}button,input{font:inherit}.site-shell{overflow:hidden}.topbar{height:72px;padding:0 clamp(16px,4vw,64px);display:flex;align-items:center;justify-content:space-between;background:#fff;position:relative;z-index:1000;border-bottom:1px solid #eadfce}.brand{display:flex;align-items:center;gap:11px}.brand img{width:49px;height:49px;object-fit:contain}.brand span{display:flex;flex-direction:column}.brand strong{color:#5b3514;font-size:17px}.brand small{color:#98785a;font-size:11px}.desktop-nav{display:flex;align-items:center;gap:25px;font-size:13px;font-weight:bold}.desktop-nav a:hover{color:#a16a31}.top-actions{display:flex;gap:8px}.icon-button{width:41px;height:41px;border:1px solid #e5d6c2;background:#fff;border-radius:50%;cursor:pointer;font-size:20px}.mobile-only{display:none}.hero{min-height:610px;position:relative;display:flex;align-items:center;background:linear-gradient(110deg,#2c1b10 0%,rgba(44,27,16,.82) 42%,rgba(44,27,16,.32) 100%),url("../images/cm77-home-hero.jpg") center/cover no-repeat}.hero:after{content:"";position:absolute;inset:auto 0 0;height:150px;background:linear-gradient(transparent,#f5f0e8)}.hero-content{position:relative;z-index:2;width:min(760px,calc(100% - 32px));margin-left:clamp(16px,8vw,140px);padding:80px 0 130px;color:#fff}.eyebrow,.section-kicker{margin:0 0 12px;color:#dcb273;font-size:12px;font-weight:bold;letter-spacing:2.2px}.hero h1{margin:0;font-size:clamp(42px,6vw,78px);line-height:1.05}.hero h1 span{color:#f0c98a}.hero-copy{max-width:670px;margin:22px 0;line-height:1.85;color:#f4e8d7;font-size:16px}.hero-search{position:relative;display:flex;max-width:720px;padding:7px;background:#fff;border-radius:15px;box-shadow:0 15px 35px rgba(0,0,0,.25)}.hero-search input{flex:1;min-width:0;height:52px;border:0;outline:0;padding:0 15px;color:#3e2a19}.hero-search button{border:0;border-radius:10px;padding:0 25px;background:#9a612b;color:#fff;font-weight:bold;cursor:pointer}.search-suggestions{position:absolute;top:70px;left:0;right:0;padding:8px;background:#fff;color:#3e2a19;border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.2)}.suggestion{display:block;width:100%;padding:11px;border:0;background:#fff;text-align:left;border-radius:8px;cursor:pointer}.suggestion:hover{background:#f7eee2}.hero-buttons{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}.primary-button,.ghost-button{border-radius:999px;padding:11px 17px;font-weight:bold}.primary-button{border:0;background:#e7ba74;color:#402a17;cursor:pointer}.ghost-button{border:1px solid rgba(255,255,255,.55);color:#fff}.section{max-width:1420px;margin:auto;padding:72px clamp(16px,4vw,64px)}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:27px}.section-heading h2,.explorer-heading h2,.today-heading h2,.experience-copy h2{margin:0;color:#5b3514;font-size:clamp(27px,3vw,42px)}.section-heading>a{font-size:13px;font-weight:bold;color:#98602b}.journey-section{padding-top:15px}.journey-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:12px}.journey-card{min-height:155px;padding:21px 16px;display:flex;flex-direction:column;border-radius:18px;background:#fff;border:1px solid #eadfce;box-shadow:0 6px 22px rgba(74,46,23,.06);transition:.2s}.journey-card:hover{transform:translateY(-5px);border-color:#c89a62;box-shadow:0 13px 28px rgba(74,46,23,.12)}.journey-icon{font-size:31px;margin-bottom:17px}.journey-card strong{font-size:16px;color:#593718}.journey-card small{margin-top:7px;line-height:1.5;color:#8c735e}.map-section{max-width:1600px;margin:0 auto;display:grid;grid-template-columns:260px minmax(0,1fr) 280px;min-height:680px;background:#fff;border-radius:24px;overflow:hidden;box-shadow:0 20px 50px rgba(62,42,25,.12)}.map-explorer,.today-panel{padding:26px 20px;background:#fff}.map-explorer{border-right:1px solid #eadfce}.explorer-heading p{margin:0 0 5px;color:#a16a31;font-size:11px;font-weight:bold}.explorer-heading h2{font-size:22px;line-height:1.35}.layer-list{display:flex;flex-direction:column;gap:5px;margin-top:21px}.layer-button{width:100%;padding:10px 11px;display:flex;align-items:center;gap:10px;border:0;border-radius:10px;background:transparent;color:#634a35;text-align:left;cursor:pointer}.layer-button span{width:25px;font-size:18px}.layer-button:hover,.layer-button.active{background:#f1e4d3;color:#683d17;font-weight:bold}.explorer-more{display:block;margin-top:15px;padding:11px;text-align:center;border:1px solid #d7bea1;border-radius:10px;color:#815020;font-size:12px;font-weight:bold}.map-wrap{position:relative;min-width:0}.map-wrap #homeMap{width:100%;height:100%;min-height:680px;background:#e8e1d6}.map-floating{position:absolute;z-index:500;top:18px;left:50%;max-width:calc(100% - 30px);padding:10px 16px;display:flex;flex-direction:column;align-items:center;background:rgba(255,255,255,.94);border-radius:13px;box-shadow:0 5px 18px rgba(0,0,0,.15);transform:translateX(-50%);white-space:nowrap}.map-floating strong{font-size:13px}.map-floating span{margin-top:3px;color:#8c735e;font-size:10px}.mobile-layer-button{display:none}.today-panel{border-left:1px solid #eadfce}.today-heading span{color:#a16a31;font-size:10px;font-weight:bold;letter-spacing:1.5px}.today-heading h2{font-size:23px;margin-top:5px}.weather-card{margin:20px 0;padding:16px;display:flex;align-items:center;justify-content:space-between;background:linear-gradient(135deg,#5d3a20,#a16a31);color:#fff;border-radius:15px}.weather-card div:first-child{display:flex;flex-direction:column;gap:5px}.weather-card span{font-size:11px;color:#f0d4ae}.weather-icon{font-size:32px}.live-item{display:flex;align-items:center;gap:11px;padding:13px 3px;border-bottom:1px solid #eee3d6}.live-icon{width:37px;height:37px;display:grid;place-items:center;background:#f3e8d9;border-radius:10px}.live-item div{display:flex;flex-direction:column;gap:4px}.live-item strong{font-size:13px}.live-item small{color:#927b66;font-size:10px}.province-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:13px}.province-card{position:relative;min-height:165px;padding:23px;display:flex;align-items:end;border-radius:18px;overflow:hidden;background:linear-gradient(145deg,#4f321c,#9b6835);color:#fff}.province-card:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 90% 10%,rgba(255,255,255,.22),transparent 40%)}.province-card>div,.province-number,.province-arrow{position:relative}.province-number{position:absolute;top:15px;left:19px;color:#e4be88;font-size:11px;font-weight:bold}.province-card h3{margin:0;font-size:22px}.province-card p{margin:7px 35px 0 0;color:#eadbc8;font-size:11px;line-height:1.5}.province-arrow{position:absolute;right:19px;bottom:21px;font-size:25px}.experience-section{display:grid;grid-template-columns:1fr 1.35fr;gap:70px;align-items:center}.experience-copy p:not(.section-kicker){line-height:1.9;color:#795f49}.primary-link{display:inline-block;margin-top:8px;padding:11px 17px;background:#8e5928;color:#fff;border-radius:999px;font-size:12px;font-weight:bold}.experience-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:13px}.experience-card{min-height:175px;padding:25px;display:flex;flex-direction:column;background:#fff;border:1px solid #e8dac8;border-radius:18px}.experience-card span{font-size:31px}.experience-card strong{margin-top:20px;color:#5d391b}.experience-card small{margin-top:8px;color:#8b735d;line-height:1.5}.planner-banner{max-width:1420px;margin:0 auto 70px;padding:45px clamp(24px,5vw,75px);display:flex;align-items:center;justify-content:space-between;gap:30px;background:#342116;color:#fff;border-radius:25px}.planner-banner p{margin:0;color:#d5a969;font-size:11px;font-weight:bold;letter-spacing:2px}.planner-banner h2{margin:8px 0 0;font-size:clamp(25px,3vw,40px)}.planner-banner a{padding:15px 22px;background:#e0b16d;color:#402817;border-radius:999px;font-weight:bold;white-space:nowrap}.footer{padding:34px clamp(16px,4vw,64px) 95px;display:flex;align-items:center;gap:25px;background:#271910;color:#eadbc7}.footer-brand{display:flex;align-items:center;gap:10px;margin-right:auto}.footer-brand img{width:44px;height:44px;object-fit:contain}.footer-brand div{display:flex;flex-direction:column}.footer-brand small{color:#ad947c;font-size:10px}.footer-links{display:flex;flex-wrap:wrap;gap:18px;font-size:11px}.footer>p{font-size:10px;color:#ad947c}.mobile-bottom-nav{display:none}.mobile-drawer{position:fixed;z-index:3000;inset:0 0 0 auto;width:min(330px,87vw);padding:75px 22px 25px;display:flex;flex-direction:column;gap:8px;background:#fff;box-shadow:-15px 0 45px rgba(0,0,0,.2)}.mobile-drawer a{padding:13px;border-bottom:1px solid #eee1d2;font-weight:bold}.drawer-close{position:absolute;top:18px;right:18px;width:41px;height:41px;border:0;border-radius:50%;background:#f0e5d8;font-size:25px}.cm77-marker{border:0;background:transparent}.cm77-pin{width:34px;height:34px;display:grid;place-items:center;background:#8c5525;border:3px solid #fff;border-radius:50% 50% 50% 9px;box-shadow:0 4px 9px rgba(0,0,0,.3);transform:rotate(-45deg)}.cm77-pin span{font-size:16px;transform:rotate(45deg)}@media(max-width:1200px){.journey-grid{grid-template-columns:repeat(3,1fr)}.map-section{grid-template-columns:225px minmax(0,1fr)}.today-panel{display:none}.province-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:820px){body{padding-bottom:66px}.topbar{height:63px;padding:0 14px;position:sticky;top:0}.brand img{width:43px;height:43px}.desktop-nav{display:none}.mobile-only{display:block}.hero{min-height:550px;background:linear-gradient(180deg,rgba(35,22,13,.58),rgba(35,22,13,.88)),url("../images/cm77-home-hero.jpg") center/cover no-repeat}.hero-content{width:calc(100% - 28px);margin:auto;padding:65px 0 110px}.hero h1{font-size:43px}.hero-copy{font-size:14px}.hero-search{display:grid;grid-template-columns:1fr auto}.hero-search input{height:48px;padding:0 10px;font-size:13px}.hero-search button{padding:0 15px}.section{padding:52px 14px}.section-heading{align-items:start}.section-heading>a{display:none}.journey-grid{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:8px}.journey-card{min-width:180px;scroll-snap-align:start}.map-section{margin:0 14px;display:block;min-height:580px;border-radius:18px}.map-explorer{position:fixed;z-index:2500;left:14px;right:14px;bottom:75px;max-height:70vh;overflow:auto;border:0;border-radius:20px;box-shadow:0 15px 45px rgba(0,0,0,.28);transform:translateY(120%);transition:.25s}.map-explorer.open{transform:translateY(0)}.map-wrap #homeMap{min-height:580px}.mobile-layer-button{position:absolute;z-index:600;left:14px;bottom:16px;display:block;padding:11px 15px;border:0;background:#fff;border-radius:999px;box-shadow:0 4px 15px rgba(0,0,0,.2);color:#5f3a1c;font-weight:bold}.map-floating{top:12px}.province-grid{grid-template-columns:1fr}.province-card{min-height:145px}.experience-section{grid-template-columns:1fr;gap:30px}.experience-grid{grid-template-columns:1fr 1fr}.planner-banner{margin:0 14px 45px;padding:30px 22px;align-items:start;flex-direction:column;border-radius:19px}.footer{padding:30px 18px;display:block;text-align:center}.footer-brand{justify-content:center}.footer-links{justify-content:center;margin:24px 0}.mobile-bottom-nav{position:fixed;z-index:2000;left:0;right:0;bottom:0;height:66px;padding-bottom:env(safe-area-inset-bottom);display:grid;grid-template-columns:repeat(5,1fr);background:#fff;border-top:1px solid #e7dac8;box-shadow:0 -4px 15px rgba(0,0,0,.08)}.mobile-bottom-nav a,.mobile-bottom-nav button{display:flex;align-items:center;justify-content:center;flex-direction:column;gap:2px;border:0;background:#fff;color:#7a6755;font-size:9px}.mobile-bottom-nav span{font-size:20px}.mobile-bottom-nav .active{color:#8c5525;font-weight:bold}}@media(max-width:500px){.hero h1{font-size:37px}.hero h1 span{font-size:34px}.hero-buttons{align-items:stretch;flex-direction:column}.hero-buttons>*{text-align:center}.journey-card{min-width:165px}.experience-grid{grid-template-columns:1fr}.section-heading h2{font-size:27px}}
/* =========================================================
CM77 Drawer Fix v1.1
ต้องอยู่ท้ายไฟล์เพื่อให้ hidden ชนะ display:flex
========================================================= */
[hidden] {
display: none !important;
}
body.cm77-drawer-open {
overflow: hidden;
}
.mobile-drawer {
visibility: visible;
opacity: 1;
transform: translateX(0);
transition:
transform .24s ease,
opacity .20s ease,
visibility .20s ease;
}
.mobile-drawer[hidden] {
display: flex !important;
visibility: hidden;
opacity: 0;
pointer-events: none;
transform: translateX(105%);
}
.cm77-drawer-backdrop {
position: fixed;
z-index: 2990;
inset: 0;
border: 0;
padding: 0;
background: rgba(28, 17, 9, .48);
cursor: default;
opacity: 1;
transition: opacity .20s ease;
}
.cm77-drawer-backdrop[hidden] {
display: block !important;
visibility: hidden;
opacity: 0;
pointer-events: none;
}
.drawer-close {
z-index: 2;
display: grid;
place-items: center;
cursor: pointer;
touch-action: manipulation;
}
@media (prefers-reduced-motion: reduce) {
.mobile-drawer,
.cm77-drawer-backdrop {
transition: none;
}
}
/* =========================================================
CM77 Smart Marker v1.2
========================================================= */
.cm77-marker {
background: transparent !important;
border: 0 !important;
}
.cm77-smart-pin {
position: relative;
width: 40px;
height: 40px;
display: grid;
place-items: center;
border: 3px solid #fff;
border-radius: 50% 50% 50% 10%;
box-shadow: 0 5px 14px rgba(40, 24, 12, .34);
transform: rotate(-45deg);
transition: transform .16s ease, filter .16s ease;
}
.cm77-smart-pin span {
display: block;
font-size: 20px;
line-height: 1;
transform: rotate(45deg);
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .16));
}
.cm77-smart-pin:hover {
z-index: 10;
transform: rotate(-45deg) scale(1.16);
filter: brightness(1.05);
}
.cm77-pin-attraction,
.cm77-pin-tourist_attraction,
.cm77-pin-tourism { background: #2e7d32; }
.cm77-pin-restaurant,
.cm77-pin-food { background: #ef6c00; }
.cm77-pin-hotel,
.cm77-pin-accommodation,
.cm77-pin-resort,
.cm77-pin-guest_house { background: #1976d2; }
.cm77-pin-cafe,
.cm77-pin-coffee_shop { background: #795548; }
.cm77-pin-temple,
.cm77-pin-religion { background: #d6a429; }
.cm77-pin-hospital,
.cm77-pin-health { background: #d32f2f; }
.cm77-pin-radio,
.cm77-pin-radio_station { background: #ad1457; }
.cm77-pin-police,
.cm77-pin-police_station { background: #283593; }
.cm77-pin-fuel_station,
.cm77-pin-gas_station { background: #455a64; }
.cm77-pin-waterfall { background: #00838f; }
.cm77-pin-government,
.cm77-pin-government_office { background: #5d4037; }
.cm77-pin-property,
.cm77-pin-real_estate { background: #6a1b9a; }
.cm77-pin-default { background: #7b6653; }
.cm77-map-legend {
min-width: 132px;
overflow: hidden;
border: 0 !important;
border-radius: 12px !important;
background: rgba(255, 255, 255, .97);
box-shadow: 0 5px 20px rgba(37, 24, 13, .22);
}
.cm77-legend-toggle {
width: 100%;
border: 0;
padding: 9px 11px;
background: #fff;
color: #5b3514;
font-weight: 700;
cursor: pointer;
}
.cm77-legend-body {
max-height: 280px;
overflow-y: auto;
padding: 4px 10px 9px;
border-top: 1px solid #eee2d3;
}
.cm77-legend-row {
display: flex;
align-items: center;
gap: 7px;
padding: 4px 0;
color: #594634;
font-size: 11px;
white-space: nowrap;
}
.cm77-legend-symbol {
width: 24px;
height: 24px;
display: grid;
place-items: center;
border: 2px solid #fff;
border-radius: 50%;
box-shadow: 0 2px 6px rgba(0,0,0,.2);
font-size: 13px;
}
.cm77-legend-attraction { background:#2e7d32; }
.cm77-legend-restaurant { background:#ef6c00; }
.cm77-legend-hotel { background:#1976d2; }
.cm77-legend-cafe { background:#795548; }
.cm77-legend-temple { background:#d6a429; }
.cm77-legend-hospital { background:#d32f2f; }
.cm77-legend-radio { background:#ad1457; }
.cm77-legend-police { background:#283593; }
.cm77-legend-property { background:#6a1b9a; }
.cm77-map-popup {
min-width: 230px;
color: #493522;
}
.cm77-popup-image {
width: 100%;
height: 112px;
display: block;
object-fit: cover;
margin-bottom: 9px;
border-radius: 10px;
background: #eee5da;
}
.cm77-popup-type {
margin-bottom: 4px;
color: #9a652c;
font-size: 10px;
font-weight: 700;
letter-spacing: .02em;
}
.cm77-popup-title {
display: block;
color: #5b3514;
font-size: 15px;
line-height: 1.4;
}
.cm77-popup-location {
margin-top: 5px;
color: #80674f;
font-size: 11px;
}
.cm77-radio-player {
width: 100%;
height: 34px;
margin-top: 10px;
}
.cm77-popup-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.cm77-popup-btn {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: 31px;
padding: 6px 9px;
border-radius: 7px;
background: #8c5525;
color: #fff !important;
text-decoration: none !important;
font-size: 10px;
font-weight: 700;
}
.cm77-btn-live { background: #ad1457; }
.cm77-btn-nav { background: #2e7d32; }
.cm77-btn-light {
border: 1px solid #dac9b4;
background: #fff;
color: #725335 !important;
}
@media (max-width: 700px) {
.cm77-map-legend {
margin-bottom: 64px !important;
}
.cm77-map-legend.open {
max-height: 45vh;
}
}
\n\n/* CM77 Home v2.0 — Mobile First Layer Navigation */\n.mobile-quick-layers{display:none}\n@media(max-width:820px){\n.mobile-quick-layers{position:relative;z-index:5;width:calc(100vw - 28px);margin-top:14px;padding:2px 1px 8px;display:flex;gap:9px;overflow-x:auto;overscroll-behavior-inline:contain;scroll-snap-type:x proximity;scrollbar-width:none;-webkit-overflow-scrolling:touch}\n.mobile-quick-layers::-webkit-scrollbar{display:none}\n.mobile-quick-layer{flex:0 0 auto;min-height:43px;padding:9px 14px;display:inline-flex;align-items:center;justify-content:center;gap:7px;border:1px solid rgba(255,255,255,.48);border-radius:999px;background:rgba(50,33,21,.62);color:#fff;box-shadow:0 6px 18px rgba(0,0,0,.14);backdrop-filter:blur(9px);-webkit-backdrop-filter:blur(9px);font-size:12px;font-weight:700;white-space:nowrap;cursor:pointer;scroll-snap-align:start;touch-action:manipulation}\n.mobile-quick-layer span{font-size:17px;line-height:1}.mobile-quick-layer.active{border-color:#f4ce91;background:#e7ba74;color:#402a17;box-shadow:0 8px 22px rgba(20,12,7,.24)}\n.map-section{margin-top:18px;scroll-margin-top:76px}.journey-section{padding-top:52px}.search-suggestions{z-index:20;max-height:min(55vh,420px);overflow-y:auto}\n}\n@media(max-width:500px){.mobile-quick-layer{min-height:41px;padding:8px 12px;font-size:11px}.mobile-quick-layers{margin-top:12px}}\n