/* ══════════════════════════════════════════════════════════════════════════
   ภูซาง — สมุดบันทึกการเดินทาง
   แนวคิด: หน้ากระดาษนิตยสารเดินป่า · หมึกเข้มสีป่าดิบ · แสงไฟสีถ่านอุ่น
   ══════════════════════════════════════════════════════════════════════════ */

:root {
    /* หมึกและกระดาษ */
    --ink:        #07120f;
    --ink-2:      #0b1c18;
    --ink-3:      #112a24;
    --paper:      #f4efe3;
    --paper-2:    #e8e0cf;
    --mist:       #c4d4cd;
    --mist-dim:   #8ba49b;

    /* สีหลัก */
    --jade:       #35937b;
    --jade-deep:  #12433a;
    --ember:      #e8a33d;
    --ember-soft: #f5d99b;
    --clay:       #c8623c;
    --sky:        #86b6cc;

    --line:       rgba(196, 212, 205, 0.16);
    --line-solid: #1c3630;

    --font-display: 'Trirong', Georgia, serif;
    --font-body:    'IBM Plex Sans Thai', -apple-system, sans-serif;
    --font-meta:    'Bai Jamjuree', var(--font-body);

    /* สีที่คำนวณจากธีม — ธีมสว่างกับมืดจึงถูกต้องทั้งคู่โดยไม่ต้องแก้ทีละจุด */
    --ridge-1: color-mix(in srgb, var(--jade) 55%, var(--ink));
    --ridge-2: color-mix(in srgb, var(--jade) 34%, var(--ink));
    --ridge-3: color-mix(in srgb, var(--jade) 18%, var(--ink));
    --ridge-4: color-mix(in srgb, var(--jade) 8%, var(--ink));
    --veil:    color-mix(in srgb, var(--ink) 92%, transparent);
    --veil-soft: color-mix(in srgb, var(--ink) 55%, transparent);
    --foot-bg: color-mix(in srgb, var(--ink) 94%, var(--mist-dim));
    /* ข้อความบนรูปภาพ/วิดีโอ — ต้องสว่างเสมอเพราะภาพประกอบเป็นโทนเข้ม */
    --on-media: #f6f1e6;
    --on-media-dim: rgba(246, 241, 230, 0.72);
    --media-scrim: rgba(6, 14, 12, 0.94);

    --page:   min(1280px, 92vw);
    --radius: 2px;
    --ease:   cubic-bezier(0.22, 1, 0.36, 1);
}

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
    margin: 0;
    background: var(--ink);
    color: var(--mist);
    font-family: var(--font-body);
    font-size: 16.5px;
    line-height: 1.75;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* เกรนทั่วหน้า — ทำให้จอดูเหมือนกระดาษพิมพ์ */
body::after {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9998;
    opacity: 0.4;
    mix-blend-mode: overlay;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4'/><feColorMatrix type='saturate' values='0'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='0.35'/></svg>");
}

img, svg, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--ember); color: var(--ink); }

/* ── ตัวอักษร ─────────────────────────────────────────────────────────────── */

h1, h2, h3, h4 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.12;
    letter-spacing: -0.01em;
    color: var(--paper);
    margin: 0 0 0.5em;
}

.display {
    font-size: clamp(3rem, 11vw, 9.5rem);
    font-weight: 700;
    line-height: 0.92;
    letter-spacing: -0.035em;
}

/* หัวเรื่องของหน้าย่อย — เล็กกว่าหน้าแรก และเผื่อที่ให้สระบน/วรรณยุกต์ไทย
   ไม่ให้ชนบรรทัดบน (line-height 0.92 ของ .display แน่นเกินไปสำหรับไทย) */
.page-head { padding-block: clamp(4.5rem, 10vh, 7rem) 1.4rem; }
.page-head h1,
.page-head h1.display {
    font-size: clamp(2.4rem, 5.6vw, 4.4rem);
    line-height: 1.12;
    letter-spacing: -0.015em;
    margin: 0;
}
.page-head .kicker { margin-bottom: .9rem; }
.page-head .lead { margin-top: 1rem; }

.kicker {
    font-family: var(--font-meta);
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--ember);
    display: flex;
    align-items: center;
    gap: 0.9rem;
}
.kicker::before {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}
.kicker.center { justify-content: center; }
.kicker.center::after {
    content: '';
    width: 34px;
    height: 1px;
    background: currentColor;
    opacity: 0.7;
}

.lead { font-size: 1.1rem; color: var(--mist); max-width: 62ch; }
.muted { color: var(--mist-dim); }
.meta {
    font-family: var(--font-meta);
    font-size: 0.76rem;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: var(--mist-dim);
}
.num {
    font-family: var(--font-meta);
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum';
}

/* ── โครง ─────────────────────────────────────────────────────────────────── */

.wrap { width: var(--page); margin-inline: auto; }
section { position: relative; }
.section { padding: clamp(4rem, 9vw, 8rem) 0; }
.section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
    margin-bottom: 3rem;
    padding-bottom: 1.4rem;
    border-bottom: 1px solid var(--line);
}
.section-head h2 { font-size: clamp(1.9rem, 4.2vw, 3.2rem); margin: 0.35rem 0 0; }
.section-head p { margin: 0.6rem 0 0; max-width: 46ch; color: var(--mist-dim); }

/* ── ปุ่ม ─────────────────────────────────────────────────────────────────── */

.btn {
    --btn-bg: var(--ember);
    --btn-fg: var(--ink);
    display: inline-flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.85rem 1.6rem;
    background: var(--btn-bg);
    color: var(--btn-fg);
    border: 1px solid var(--btn-bg);
    border-radius: 100px;
    font-family: var(--font-meta);
    font-weight: 600;
    font-size: 0.88rem;
    letter-spacing: 0.04em;
    position: relative;
    overflow: hidden;
    transition: transform 0.35s var(--ease), box-shadow 0.35s var(--ease), background 0.3s;
}
.btn:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -12px var(--ember); }
.btn:active { transform: translateY(0); }
.btn.ghost {
    --btn-bg: transparent;
    --btn-fg: var(--paper);
    border-color: var(--line);
}
.btn.ghost:hover { border-color: var(--ember); color: var(--ember); box-shadow: none; }
.btn.dark { --btn-bg: var(--ink); --btn-fg: var(--paper); }
.btn.sm { padding: 0.55rem 1.1rem; font-size: 0.78rem; }
.btn .arw { transition: transform 0.35s var(--ease); }
.btn:hover .arw { transform: translateX(4px); }

/* ── แถบนำทาง ─────────────────────────────────────────────────────────────── */

.nav {
    position: sticky;
    top: 0;
    z-index: 900;
    backdrop-filter: blur(14px);
    background: color-mix(in srgb, var(--ink) 82%, transparent);
    border-bottom: 1px solid transparent;
    transition: border-color 0.4s, background 0.4s;
}
.nav.stuck { border-bottom-color: var(--line); }
.nav-in {
    width: var(--page);
    margin-inline: auto;
    display: flex;
    align-items: center;
    gap: 2rem;
    height: 74px;
}
.brand { display: flex; align-items: center; gap: 0.7rem; margin-right: auto; }
.brand-mark {
    width: 34px; height: 34px;
    display: grid; place-items: center;
    border: 1px solid var(--ember);
    border-radius: 50%;
    color: var(--ember);
    font-family: var(--font-display);
    font-size: 1.05rem;
    font-weight: 700;
}
.brand-text { display: grid; gap: 0.1rem; }
.brand-text b {
    display: block;
    font-family: var(--font-display);
    font-size: 1.35rem;
    font-weight: 700;
    line-height: 1.3;              /* เผื่อสระบน–ล่างของอักษรไทย */
    color: var(--paper);
    letter-spacing: -0.02em;
}
.brand-text span {
    display: block;
    font-family: var(--font-meta);
    font-size: 0.58rem;
    line-height: 1.2;
    letter-spacing: 0.28em;
    text-transform: uppercase;
    color: var(--mist-dim);
}
.foot .brand-text b { font-size: 1.5rem; }
.nav-links { display: flex; gap: 1.7rem; align-items: center; }
.nav-links a {
    font-size: 0.92rem;
    color: var(--mist);
    position: relative;
    padding: 0.3rem 0;
    display: inline-flex;
    align-items: center;
    transition: color 0.25s;
}

/* ไอคอนพับเก็บไว้ตอนอยู่บนสุด แล้วคลี่ออกทีละอันตอนเลื่อนลง
   (หน่วงตาม --i ให้ไล่จากซ้ายไปขวาแทนที่จะโผล่พร้อมกันทั้งแถว) */
.nav-links a > i {
    display: inline-block;
    width: 0; margin-right: 0;
    opacity: 0;
    overflow: hidden;
    font-size: 0.95em; line-height: 1;
    color: var(--ember);
    transform: translateX(-5px) scale(0.7);
    transition: width .34s var(--ease), margin .34s var(--ease),
                opacity .26s var(--ease), transform .34s var(--ease);
}
.nav.stuck .nav-links a > i {
    width: 1em; margin-right: .45rem;
    opacity: 1;
    transform: none;
    transition-delay: calc(var(--i, 0) * 45ms);
}
.nav-links a:hover > i, .nav-links a.on > i { color: var(--ember); }
/* ขีดใต้เกาะเฉพาะตัวหนังสือ ไม่ลากไปใต้ไอคอนที่เพิ่งคลี่ออกมา */
.nav-links a > span { position: relative; display: inline-block; }
.nav-links a > span::after {
    content: '';
    position: absolute;
    left: 0; bottom: -2px;
    width: 0; height: 1px;
    background: var(--ember);
    transition: width 0.35s var(--ease);
}
.nav-links a:hover, .nav-links a.on { color: var(--paper); }
.nav-links a:hover > span::after, .nav-links a.on > span::after { width: 100%; }
.nav-pass {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.4rem 0.9rem 0.4rem 0.5rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-family: var(--font-meta);
    font-size: 0.8rem;
    transition: border-color 0.3s, background 0.3s;
}
.nav-pass:hover { border-color: var(--ember); background: rgba(232, 163, 61, 0.08); }
.nav-pass .av { font-size: 1.05rem; }
.nav-pass b { color: var(--ember); }
.burger { display: none; background: none; border: 0; color: var(--paper); font-size: 1.5rem; }

@media (max-width: 940px) {
    .nav-links {
        position: fixed;
        inset: 74px 0 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0;
        background: var(--ink-2);
        border-bottom: 1px solid var(--line);
        padding: 1rem var(--page-pad, 4vw);
        transform: translateY(-120%);
        transition: transform 0.45s var(--ease);
    }
    .nav-links.open { transform: translateY(0); }
    .nav-links a { padding: 0.85rem 0; width: 100%; border-bottom: 1px solid var(--line); font-size: 1.05rem; }
    /* ในเมนูมือถือให้เห็นไอคอนตลอด ช่วยกวาดตาหาเมนูได้เร็วกว่า */
    .nav-links a > i,
    .nav.stuck .nav-links a > i {
        width: 1.15em; margin-right: .7rem; opacity: 1;
        transform: none; transition-delay: 0s;
    }
    .burger { display: block; }
}

/* ── HERO ─────────────────────────────────────────────────────────────────── */

.hero {
    position: relative;
    min-height: min(94vh, 900px);
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(3rem, 7vw, 6rem);
    overflow: hidden;
    isolation: isolate;
}
/* ── ภาพปก / วิดีโอพื้นหลัง (สไลด์โชว์จากหลังบ้าน) ─────────────────────────
   วางไว้ใต้ทุกอย่าง แล้วให้ scrim ทับอีกชั้นเพื่อให้ตัวหนังสืออ่านออกเสมอ */
.hero-media { position: absolute; inset: 0; z-index: -5; overflow: hidden; }
.hslide {
    position: absolute; inset: 0; margin: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 1.1s var(--ease), visibility 0s linear 1.1s;
}
.hslide.on { opacity: 1; visibility: visible; transition-delay: 0s; }
.hslide img, .hslide video {
    width: 100%; height: 100%; object-fit: cover; display: block;
}
/* ฉากทับภาพ — ความเข้มตั้งได้ทีละสไลด์จากหลังบ้าน (--dim) */
.hslide::after {
    content: ''; position: absolute; inset: 0;
    background:
        linear-gradient(to top,
            color-mix(in srgb, var(--ink) 92%, transparent) 0%,
            color-mix(in srgb, var(--ink) 55%, transparent) 38%,
            transparent 78%),
        color-mix(in srgb, var(--ink) calc(var(--dim, .45) * 100%), transparent);
}
.hslide figcaption {
    position: absolute; right: 1.2rem; bottom: 1rem; z-index: 2;
    text-align: right; line-height: 1.5;
    text-shadow: 0 1px 12px rgba(0, 0, 0, .55);
}
.hslide figcaption b { display: block; font-size: .84rem; color: var(--on-media); }
.hslide figcaption span {
    font-family: var(--font-meta); font-size: .64rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--on-media-dim);
}

/* ซูมช้า ๆ ระหว่างที่สไลด์นั้นแสดงอยู่ */
.hero-media.kb .hslide.on img { animation: kenburns 12s ease-out both; }
@keyframes kenburns { from { transform: scale(1); } to { transform: scale(1.09); } }

/* พอมีภาพจริงแล้ว ให้ภาพวาดสันเขาเบาลงเหลือเป็นเงาซ้อนอยู่ข้างหน้า */
.hero.has-media .hero-sky { opacity: .34; }
.hero.has-media .ridge { opacity: .3; }
.hero.has-media .ridge.r4 { opacity: .42; }
.hero.has-media .hero-sun { opacity: .5; }

.hero-dots {
    position: absolute; left: 50%; bottom: 1.1rem; transform: translateX(-50%);
    z-index: 4; display: flex; gap: .45rem;
}
.hdot {
    width: 26px; height: 4px; padding: 0; border: 0; border-radius: 100px;
    background: color-mix(in srgb, var(--on-media) 34%, transparent);
    cursor: pointer; transition: background .3s, width .3s var(--ease);
}
.hdot:hover { background: color-mix(in srgb, var(--on-media) 62%, transparent); }
.hdot.on { width: 46px; background: var(--ember); }

@media (prefers-reduced-motion: reduce) {
    .hero-media.kb .hslide.on img { animation: none; }
    .hslide { transition-duration: .01ms; }
}

.hero-sky {
    position: absolute;
    inset: 0;
    z-index: -3;
    background:
        radial-gradient(120% 80% at 72% 18%, color-mix(in srgb, var(--ember) 34%, transparent), transparent 58%),
        radial-gradient(90% 70% at 18% 8%, color-mix(in srgb, var(--jade) 26%, transparent), transparent 60%),
        linear-gradient(178deg,
            color-mix(in srgb, var(--ink) 84%, var(--jade)) 0%,
            color-mix(in srgb, var(--ink) 90%, var(--jade)) 42%,
            var(--ink) 100%);
}
.hero-sun {
    position: absolute;
    top: 16%; right: 18%;
    width: clamp(120px, 18vw, 260px);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle, #fffdf5 6%, color-mix(in srgb, var(--ember) 88%, #fff) 46%, transparent 72%);
    filter: blur(2px);
    z-index: -3;
    animation: sunrise 26s ease-in-out infinite alternate;
}
@keyframes sunrise {
    from { transform: translateY(18px) scale(0.97); opacity: 0.75; }
    to   { transform: translateY(-16px) scale(1.03); opacity: 1; }
}
.ridge {
    position: absolute;
    left: -14%; right: -14%; bottom: 0;
    width: 128%;                     /* ล้นจอทั้งสองข้าง เพื่อให้ขยับได้โดยไม่เห็นขอบ */
    z-index: -2;
    pointer-events: none;
    will-change: transform;
    transform: translate3d(0, 0, 0);
}
.ridge svg { width: 100%; height: auto; display: block; }
.ridge.r1 { bottom: 26%; opacity: 0.55; }
.ridge.r2 { bottom: 15%; opacity: 0.8; }
.ridge.r3 { bottom: 6%; }
.ridge.r4 { bottom: -2%; }
.hero-mist {
    position: absolute;
    left: 0; right: 0; bottom: 0;
    height: 46%;
    z-index: -1;
    background: linear-gradient(to top, var(--ink) 8%, var(--veil-soft) 45%, transparent);
}

.hero-content { width: var(--page); margin-inline: auto; }
.hero h1 { margin: 0.6rem 0 0; }
.hero h1 .l1 {
    display: block;
    font-size: clamp(1.1rem, 2.6vw, 1.9rem);
    font-weight: 300;
    font-style: italic;
    color: var(--ember-soft);
    letter-spacing: 0;
}
.hero h1 .l2 {
    display: block;
    /* ภาษาไทยมีสระบน–ล่าง จึงคุมขนาดไม่ให้ใหญ่จนสระชนบรรทัด
       แล้วไปเล่นความใหญ่ต่อที่ wordmark ภาษาอังกฤษด้านหลังแทน */
    font-size: clamp(3.4rem, 9.4vw, 7.4rem);
    font-weight: 700;
    line-height: 1.06;
    letter-spacing: -0.045em;
    color: var(--paper);
    text-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
}

/* ตัวอักษรโครงร่างขนาดยักษ์ที่อยู่หลังหัวเรื่อง */
.hero-wordmark {
    position: absolute;
    left: -0.06em;
    bottom: -0.16em;
    z-index: -1;
    font-family: var(--font-display);
    font-size: clamp(4.5rem, 16vw, 13rem);
    font-weight: 700;
    line-height: 0.8;
    letter-spacing: -0.05em;
    color: transparent;
    -webkit-text-stroke: 1px rgba(232, 163, 61, 0.2);
    text-stroke: 1px rgba(232, 163, 61, 0.2);
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
}
.hero-sub {
    display: flex;
    flex-wrap: wrap;
    gap: 1.2rem 2.4rem;
    align-items: flex-end;
    justify-content: space-between;
    margin-top: 2rem;
    padding-top: 1.6rem;
    border-top: 1px solid var(--line);
    border-radius: var(--radius);
}
.hero-sub p { margin: 0; max-width: 40ch; font-size: 1.02rem; }
.hero-cta { display: flex; gap: 0.8rem; flex-wrap: wrap; }

.hero-stats {
    display: flex;
    gap: clamp(1.2rem, 3.4vw, 3rem);
    margin-top: 2.4rem;
    flex-wrap: wrap;
    align-items: center;
}
.hero-stats div span {
    display: block;
    font-family: var(--font-display);
    font-size: clamp(1.8rem, 3.6vw, 2.9rem);
    font-weight: 600;
    color: var(--paper);
    line-height: 1;
}
.hero-stats div small {
    font-family: var(--font-meta);
    font-size: 0.68rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mist-dim);
}

.scroll-hint {
    position: absolute;
    bottom: 1.6rem; left: 50%;
    transform: translateX(-50%);
    font-family: var(--font-meta);
    font-size: 0.62rem;
    letter-spacing: 0.34em;
    text-transform: uppercase;
    color: var(--mist-dim);
    display: grid;
    justify-items: center;
    gap: 0.5rem;
}
.scroll-hint::after {
    content: '';
    width: 1px; height: 42px;
    background: linear-gradient(var(--ember), transparent);
    animation: pulse-line 2.4s ease-in-out infinite;
}
@keyframes pulse-line { 0%,100% { opacity: 0.3; transform: scaleY(0.6); } 50% { opacity: 1; transform: scaleY(1); } }

/* ── แถบวิ่ง ─────────────────────────────────────────────────────────────── */

.ticker {
    border-block: 1px solid var(--line);
    background: var(--ink-2);
    overflow: hidden;
    padding: 0.9rem 0;
}
.ticker-track {
    display: flex;
    gap: 3rem;
    width: max-content;
    animation: slide-left 46s linear infinite;
}
.ticker:hover .ticker-track { animation-play-state: paused; }
.ticker span {
    font-family: var(--font-meta);
    font-size: 0.8rem;
    letter-spacing: 0.14em;
    color: var(--mist-dim);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 3rem;
}
.ticker span::after { content: '✦'; color: var(--ember); font-size: 0.7rem; }
@keyframes slide-left { to { transform: translateX(-50%); } }

/* ── การ์ดสถานที่ ─────────────────────────────────────────────────────────── */

.grid-feature {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: clamp(1rem, 2.4vw, 2rem);
}
.card {
    position: relative;
    /* ซ้อนภาพกับเนื้อหาในช่องกริดเดียวกัน — ภาพจึงเต็มการ์ดเสมอ
       แม้การ์ดจะถูกยืดให้สูงเท่าเพื่อนในแถวเดียวกัน */
    display: grid;
    grid-template-areas: 'stack';
    overflow: hidden;
    background: var(--ink-2);
    border: 1px solid var(--line);
    isolation: isolate;
    border-radius: var(--radius-lg);
}
.card-art {
    grid-area: stack;
    position: relative;
    aspect-ratio: 4 / 3;
    height: 100%;
    overflow: hidden;
}
.card-art img {
    width: 100%; height: 100%;
    object-fit: cover;
    transition: transform 1.1s var(--ease), filter 0.6s;
    filter: saturate(0.92) contrast(1.04);
}
.card:hover .card-art img { transform: scale(1.07); filter: saturate(1.1) contrast(1.08); }
.card-art::after {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(to top, var(--media-scrim) 4%, rgba(6, 14, 12, 0.15) 52%, transparent);
}
.card-body {
    grid-area: stack;
    align-self: end;
    position: relative;
    padding: clamp(1.1rem, 2vw, 1.7rem);
    z-index: 2;
}
.card-idx {
    position: absolute;
    top: 1rem; left: 1.1rem;
    font-family: var(--font-meta);
    font-size: 0.7rem;
    letter-spacing: 0.2em;
    color: var(--ember);
    z-index: 2;
    mix-blend-mode: difference;
}
.card-body h3, .card-body p, .card-body .tag { color: var(--on-media); }
.card-body p { color: var(--on-media-dim); }
.card-body .tag { border-color: rgba(246, 241, 230, 0.22); background: rgba(6, 14, 12, 0.5); }
.card h3 {
    font-size: clamp(1.25rem, 2.2vw, 1.75rem);
    margin: 0.3rem 0 0.35rem;
    transition: color 0.3s;
}
.card:hover h3 { color: var(--ember-soft); }
.card p { margin: 0; font-size: 0.9rem; opacity: 0.9; }
.card-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.9rem; }
.tag {
    font-family: var(--font-meta);
    font-size: 0.66rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    padding: 0.25rem 0.6rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    color: var(--mist-dim);
    background: color-mix(in srgb, var(--ink) 55%, transparent);
    backdrop-filter: blur(4px);
}
.tag.hot { color: var(--ember); border-color: color-mix(in srgb, var(--ember) 45%, transparent); }
.tag.unseen { color: var(--sky); border-color: color-mix(in srgb, var(--sky) 45%, transparent); }
.card .reveal-line {
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 0;
    background: var(--ember);
    transition: width 0.6s var(--ease);
    z-index: 3;
}
.card:hover .reveal-line { width: 100%; }

/* ขนาดการ์ดในกริดบรรณาธิการ */
.c-lg { grid-column: span 7; }
.c-md { grid-column: span 5; }
.c-sm { grid-column: span 4; }
.c-half { grid-column: span 6; }
.c-full { grid-column: span 12; }
.c-lg .card-art { aspect-ratio: 16 / 10; }
.c-sm .card-art { aspect-ratio: 1 / 1; }
@media (max-width: 900px) {
    .c-lg, .c-md, .c-sm, .c-half { grid-column: span 12; }
    .c-lg .card-art, .c-sm .card-art { aspect-ratio: 4 / 3; }
}

/* ── หมวดหมู่ ─────────────────────────────────────────────────────────────── */

.cats { display: flex; flex-wrap: wrap; gap: 0.7rem; }
.cat-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.6rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease);
    background: transparent;
    color: var(--mist);
}
.cat-chip:hover, .cat-chip.on {
    border-color: var(--cat, var(--ember));
    color: var(--paper);
    background: color-mix(in srgb, var(--cat, var(--ember)) 12%, transparent);
    transform: translateY(-2px);
}
.cat-chip .n { font-family: var(--font-meta); font-size: 0.72rem; color: var(--mist-dim); }

/* ── บล็อกวิดีโอ interactive ─────────────────────────────────────────────── */

.iv-promo {
    position: relative;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background:
        radial-gradient(80% 120% at 84% 20%, color-mix(in srgb, var(--ember) 16%, transparent), transparent 60%),
        var(--ink-2);
    padding: clamp(1.8rem, 4vw, 3.6rem);
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(1.6rem, 4vw, 3.4rem);
    align-items: center;
    overflow: hidden;
}
.iv-promo h2 { overflow-wrap: break-word; }
@media (max-width: 900px) { .iv-promo { grid-template-columns: 1fr; } }
.iv-promo h2 { font-size: clamp(2rem, 4.6vw, 3.4rem); }
.branch-map { width: 100%; height: auto; }
.branch-map .bl { stroke: var(--line-solid); stroke-width: 1.4; fill: none; }
.branch-map .bl.live { stroke: var(--ember); stroke-dasharray: 5 4; animation: dash 2.4s linear infinite; }
@keyframes dash { to { stroke-dashoffset: -18; } }
.branch-map circle { fill: var(--ink); stroke: var(--jade); stroke-width: 1.4; }
.branch-map circle.hot { stroke: var(--ember); fill: color-mix(in srgb, var(--ember) 22%, var(--ink)); }
.branch-map text {
    font-family: var(--font-meta);
    font-size: 9px;
    fill: var(--mist-dim);
    letter-spacing: 0.1em;
}

/* ── เส้นทางแนะนำ ─────────────────────────────────────────────────────────── */

.route { position: relative; padding-left: 2.4rem; }
.route::before {
    content: '';
    position: absolute;
    left: 9px; top: 8px; bottom: 8px;
    width: 1px;
    background: repeating-linear-gradient(to bottom, var(--line-solid) 0 6px, transparent 6px 12px);
}
.stop { position: relative; padding: 0 0 1.9rem; }
.stop::before {
    content: '';
    position: absolute;
    left: -2.4rem; top: 0.55rem;
    width: 19px; height: 19px;
    border-radius: 50%;
    border: 1px solid var(--jade);
    background: var(--ink);
    transition: all 0.4s var(--ease);
}
.stop:hover::before { border-color: var(--ember); background: var(--ember); box-shadow: 0 0 0 6px rgba(232, 163, 61, 0.12); }
.stop .t { font-family: var(--font-meta); font-size: 0.72rem; letter-spacing: 0.18em; color: var(--ember); }
.stop h4 { margin: 0.15rem 0 0.2rem; font-size: 1.2rem; }
.stop p { margin: 0; font-size: 0.9rem; color: var(--mist-dim); }

/* ── แสตมป์ / พาสปอร์ต ────────────────────────────────────────────────────── */

.stamp-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(184px, 1fr));
    gap: 1.4rem;
}
.stamp {
    container-type: inline-size;   /* ให้ลูกข้างในอ้างอิงความกว้างของวงกลมได้ */
    aspect-ratio: 1;
    border: 1px dashed var(--line-solid);
    border-radius: 50%;
    display: grid;
    place-items: center;
    text-align: center;
    padding: 1rem;
    position: relative;
    color: var(--mist-dim);
    transition: all 0.5s var(--ease);
}
.stamp .ico {
    font-size: 2.6rem; line-height: 1;
    filter: grayscale(1); opacity: 0.4; transition: all 0.5s;
    display: grid; place-items: center;
}
.stamp .nm { font-size: 0.82rem; margin-top: 0.5rem; line-height: 1.35; }
.stamp.got {
    border-style: solid;
    border-color: color-mix(in srgb, var(--stamp, var(--ember)) 60%, transparent);
    color: var(--paper);
    background: radial-gradient(circle, color-mix(in srgb, var(--stamp, var(--ember)) 16%, transparent), transparent 70%);
    transform: rotate(-3deg);
}
.stamp.got .ico { filter: none; opacity: 1; }
.stamp.got::after {
    content: attr(data-date);
    position: absolute;
    bottom: 0.75rem;
    font-family: var(--font-meta);
    font-size: 0.6rem;
    letter-spacing: 0.1em;
    color: var(--stamp, var(--ember));
}

/* แสตมป์ขนาดย่อ — ใช้ในบล็อกพรีวิวหน้าแรก ให้เหลือที่ให้เนื้อหาข้าง ๆ */
.stamp-grid.mini {
    grid-template-columns: repeat(3, minmax(0, 148px));
    justify-content: center;
    gap: 1rem;
}
.stamp.sm { padding: .5rem; max-width: 148px; }
.stamp.sm .ico { font-size: 1.5rem; }
.stamp.sm .ico i { font-size: 1.5rem; }
.stamp.sm .ico img { width: 52px; height: 52px; }
.stamp.sm .nm { font-size: .72rem; margin-top: .35rem; }
@container (min-width: 60px) {
    .stamp.sm .ico i   { font-size: 38cqw; }
    .stamp.sm .ico img { width: 64cqw; height: 64cqw; }
}
.stamp.sm.got::after { bottom: .45rem; font-size: .54rem; }
@media (max-width: 520px) {
    .stamp-grid.mini { grid-template-columns: repeat(3, 1fr); gap: .5rem; }
    .stamp.sm .nm { display: none; }
}

/* ── กล่องข้อมูล ─────────────────────────────────────────────────────────── */

.facts {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    border: 1px solid var(--line);
    /* เป็นตารางเส้นแบ่ง จึงมนที่กรอบนอกใบเดียว ไม่มนทีละช่อง
       overflow ช่วยตัดเส้นแบ่งไม่ให้โผล่พ้นมุมโค้ง */
    border-radius: var(--radius);
    overflow: hidden;
}
.fact {
    padding: 1.4rem 1.5rem;
    border-right: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
}
.fact:last-child { border-right: 0; }
.fact dt {
    font-family: var(--font-meta);
    font-size: 0.66rem;
    letter-spacing: 0.2em;
    text-transform: uppercase;
    color: var(--mist-dim);
    margin-bottom: 0.4rem;
}
.fact dd { margin: 0; font-size: 0.98rem; color: var(--paper); }

/* ── หน้ารายละเอียด ──────────────────────────────────────────────────────── */

.detail-hero {
    position: relative;
    min-height: min(72vh, 680px);
    display: flex;
    align-items: flex-end;
    overflow: hidden;
}
.detail-hero .bg {
    position: absolute; inset: 0;
    z-index: -2;
}
.detail-hero .bg img { width: 100%; height: 100%; object-fit: cover; }
.detail-hero::after {
    content: '';
    position: absolute; inset: 0;
    z-index: -1;
    background: linear-gradient(to top, var(--ink) 4%, rgba(6, 14, 12, 0.62) 46%, rgba(6, 14, 12, 0.42));
}
.detail-hero .wrap { padding-bottom: clamp(2.5rem, 5vw, 4.5rem); }
.detail-hero h1 { font-size: clamp(2.4rem, 7vw, 5.2rem); margin: 0.4rem 0 0.5rem; color: var(--on-media); }
.detail-hero .lead { color: var(--on-media-dim); }
.detail-hero .crumbs { color: var(--on-media-dim); }
.detail-hero .btn.ghost { color: var(--on-media); border-color: rgba(246, 241, 230, 0.3); }
.crumbs {
    font-family: var(--font-meta);
    font-size: 0.72rem;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--mist-dim);
    display: flex;
    gap: 0.6rem;
    align-items: center;
    flex-wrap: wrap;
}
.crumbs a:hover { color: var(--ember); }

.layout-2 {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, 0.85fr);
    gap: clamp(2rem, 5vw, 4.5rem);
    align-items: start;
}
@media (max-width: 960px) { .layout-2 { grid-template-columns: 1fr; } }

.prose p { margin: 0 0 1.3em; font-size: 1.06rem; line-height: 1.9; }
.prose p:first-of-type::first-letter {
    float: left;
    font-family: var(--font-display);
    font-size: 4.1rem;
    line-height: 0.82;
    padding: 0.1em 0.14em 0 0;
    color: var(--ember);
}

.side-card {
    border: 1px solid var(--line);
    background: var(--ink-2);
    padding: 1.6rem;
    position: sticky;
    top: 100px;
    border-radius: var(--radius);
}
.side-card h4 {
    font-family: var(--font-meta);
    font-size: 0.72rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--ember);
    margin-bottom: 1.1rem;
}
.kv { display: grid; gap: 0.85rem; }
.kv > div { display: grid; grid-template-columns: 92px 1fr; gap: 0.8rem; font-size: 0.9rem; }
.kv dt { color: var(--mist-dim); font-family: var(--font-meta); font-size: 0.76rem; letter-spacing: 0.08em; }
.kv dd { margin: 0; color: var(--paper); }

.hl-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.75rem; }
.hl-list li { display: flex; gap: 0.75rem; align-items: flex-start; font-size: 0.98rem; }
.hl-list li::before { content: '◆'; color: var(--ember); font-size: 0.6rem; margin-top: 0.5em; }

/* ── แผนที่ ───────────────────────────────────────────────────────────────── */

.map-shell {
    height: clamp(420px, 62vh, 720px);
    border: 1px solid var(--line);
    background: var(--ink-2);
    position: relative; border-radius: var(--radius-lg);
    overflow: hidden;   /* ตัดกระเบื้องแผนที่ให้เข้ารูปมุมโค้ง */
}
#map, .mini-map { width: 100%; height: 100%; background: #0d1c19; }
.mini-map { height: 260px; overflow: hidden; border: 1px solid var(--line);
    border-radius: var(--radius);
}
.leaflet-container { font-family: var(--font-body); background: #0d1c19; }
.leaflet-tile { filter: grayscale(0.55) invert(0.92) hue-rotate(160deg) brightness(0.92) contrast(0.92); }
.leaflet-popup-content-wrapper {
    background: var(--ink-2);
    color: var(--mist);
    border-radius: var(--radius-sm);
    border: 1px solid var(--line);
    box-shadow: 0 20px 50px -20px #000;
}
.leaflet-popup-tip { background: var(--ink-2); border: 1px solid var(--line); }
.leaflet-popup-content { margin: 0.9rem 1.1rem; }
.leaflet-popup-content b { font-family: var(--font-display); font-size: 1.1rem; color: var(--paper); }
.leaflet-popup-content a { color: var(--ember); font-family: var(--font-meta); font-size: 0.78rem; letter-spacing: 0.1em; }
.leaflet-control-attribution { background: rgba(7,18,15,0.8) !important; color: var(--mist-dim) !important; }
.leaflet-control-attribution a { color: var(--mist-dim) !important; }
.pin {
    width: 32px; height: 32px;
    border-radius: 50% 50% 50% 2px;
    transform: rotate(-45deg);
    display: grid; place-items: center;
    border: 1px solid rgba(255, 255, 255, 0.4);
    box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .6);
}
.pin i {
    transform: rotate(45deg);
    font-size: 0.9rem;
    color: #fff;
    line-height: 1;
    display: block;
}
.pin.cp { border-radius: 50%; border-style: dashed; }
.pin.sub { width: 24px; height: 24px; }
.pin.sub i { font-size: .72rem; }

/* ── ฟอร์มค้นหา / ตัวกรอง ─────────────────────────────────────────────────── */

.filters {
    display: flex;
    gap: 0.8rem;
    flex-wrap: wrap;
    align-items: center;
    padding: 1.1rem 0;
    border-block: 1px solid var(--line);
    margin-bottom: 2.4rem;
}
.field {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    border: 1px solid var(--line);
    border-radius: 100px;
    padding: 0.45rem 1rem;
    background: var(--ink-2);
}
.field input {
    background: transparent;
    border: 0;
    color: var(--paper);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    min-width: 120px;
}
.field select option { background: var(--ink-2); }

/* ── footer ───────────────────────────────────────────────────────────────── */

.foot {
    position: relative;
    padding: clamp(4rem, 8vw, 7rem) 0 2.5rem;
    border-top: 1px solid var(--line);
    background: linear-gradient(to bottom, var(--ink), var(--foot-bg));
    overflow: hidden;
}
.foot-grid {
    display: grid;
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 2.5rem;
}
@media (max-width: 860px) { .foot-grid { grid-template-columns: 1fr 1fr; } }
.foot h5 {
    font-family: var(--font-meta);
    font-size: 0.68rem;
    letter-spacing: 0.24em;
    text-transform: uppercase;
    color: var(--ember);
    margin: 0 0 1rem;
}
.foot ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.foot a:hover { color: var(--ember); }
.foot-bottom {
    margin-top: 3.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--line);
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: 0.8rem;
    color: var(--mist-dim);
}

/* ── เอฟเฟกต์ปรากฏตอนเลื่อน ──────────────────────────────────────────────── */

[data-reveal] {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity 0.9s var(--ease), transform 0.9s var(--ease);
    transition-delay: var(--d, 0ms);
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
    [data-reveal] { opacity: 1; transform: none; }
    * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* ── toast ────────────────────────────────────────────────────────────────── */

.toast-host {
    position: fixed;
    left: 50%; bottom: 2rem;
    transform: translateX(-50%);
    z-index: 9999;
    display: grid;
    gap: 0.6rem;
    width: min(440px, 92vw);
}
.toast {
    background: var(--ink-2);
    border: 1px solid var(--line);
    border-left: 3px solid var(--ember);
    padding: 0.95rem 1.2rem;
    display: flex;
    gap: 0.85rem;
    align-items: center;
    box-shadow: 0 24px 60px -24px #000;
    animation: toast-in 0.5s var(--ease);
    border-radius: var(--radius);
}
.toast.bad { border-left-color: var(--clay); }
.toast .ic { font-size: 1.4rem; }
.toast b { color: var(--paper); display: block; font-size: 0.95rem; }
.toast small { color: var(--mist-dim); }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } }

/* ── empty ────────────────────────────────────────────────────────────────── */

.empty {
    border: 1px dashed var(--line-solid);
    padding: 3.5rem 2rem;
    text-align: center;
    color: var(--mist-dim); border-radius: var(--radius); }
.empty .big { font-size: 2.4rem; margin-bottom: 0.6rem; }


/* ── สภาพอากาศตอนนี้ที่ภูซาง ─────────────────────────────────────────────── */

.weather {
    margin-left: auto;               /* อยู่ในแถวสถิติ ไม่ลอยทับปุ่ม */
    align-self: stretch;
    width: min(268px, 100%);
    padding: .95rem 1.15rem;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: color-mix(in srgb, var(--ink) 62%, transparent);
    backdrop-filter: blur(16px);
}
.weather .w-top { display: flex; gap: .8rem; align-items: flex-start; }
.weather .w-ico { font-size: 1.8rem; color: var(--ember); flex: 0 0 auto; margin-top: .1rem; }
.weather .w-top b { display: block; font-family: var(--font-display); font-size: 1.9rem; color: var(--paper); line-height: 1; }
.weather .w-top span { display: block; font-size: .88rem; color: var(--mist); }
.weather .w-top small { display: block; color: var(--mist-dim); font-size: .74rem; line-height: 1.5; }
.weather .w-more {
    display: flex; gap: 1.1rem; margin-top: .7rem; padding-top: .6rem;
    border-top: 1px solid var(--line);
    font-family: var(--font-meta); color: var(--mist-dim);
    border-radius: var(--radius-sm);
}
.weather .w-more span { font-size: .76rem; display: inline-flex; align-items: center; gap: .3rem; }
.weather .w-more i { color: var(--jade); margin-right: .25rem; }
.weather .w-advice { margin: .5rem 0 0; font-size: .8rem; line-height: 1.5; color: var(--ember); }
@media (max-width: 900px) {
    .weather { width: 100%; margin: .6rem 0 0; }
}

.wx-card { border: 1px solid var(--line); background: var(--ink-2); padding: 1.2rem;
    border-radius: var(--radius);
}
.wx-head { display: flex; gap: .9rem; align-items: center; }
.wx-head .w-ico { font-size: 2rem; color: var(--ember); }
.wx-head b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--paper); line-height: 1; }
.wx-head span { font-size: .84rem; color: var(--mist-dim); }
.wx-days { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; margin-top: 1rem; text-align: center; }
.wx-days > div { padding: .7rem .3rem; border: 1px solid var(--line);
    border-radius: var(--radius-sm);
}
.wx-days small { display: block; font-family: var(--font-meta); font-size: .64rem; letter-spacing: .1em; color: var(--mist-dim); }
.wx-days i { display: block; margin: .35rem 0; color: var(--jade); font-size: 1.05rem; }
.wx-days b { font-family: var(--font-meta); font-size: .92rem; color: var(--paper); }
.wx-days b span { color: var(--mist-dim); font-weight: 400; }
.wx-days em { display: block; font-style: normal; font-size: .68rem; color: var(--sky); margin-top: .2rem; }

/* ── ไอคอน UIcons ────────────────────────────────────────────────────────── */

.fi { line-height: 0; }
i[class^="fi-"], i[class*=" fi-"] { display: inline-flex; align-items: center; }
.btn i, .cat-chip i, .tag i, .meta i, .crumbs i { font-size: 1em; }
.tag i { margin-right: .25rem; opacity: .9; }
.foot-admin { margin-left: .6rem; opacity: .35; transition: opacity .3s; }
.foot-admin:hover { opacity: 1; color: var(--ember); }
.foot-link {
    background: none; border: 0; padding: 0; margin-left: .8rem;
    color: inherit; font: inherit; text-decoration: underline;
    text-underline-offset: 3px; opacity: .8; cursor: pointer;
}
.foot-link:hover { opacity: 1; color: var(--ember); }

/* ── แถบขอความยินยอมเรื่องคุกกี้ ─────────────────────────────────────── */
/* กล่องกว้างเท่าเนื้อหา ไม่ลากยาวเต็มจอ */
.consent {
    position: fixed; left: 50%; bottom: 1rem; z-index: 960;
    transform: translateX(-50%);
    width: max-content; max-width: min(58rem, calc(100vw - 2rem));
    background: var(--ink-2);
    border: 1px solid var(--line-solid);
    border-radius: var(--radius);
    box-shadow: 0 26px 60px -24px rgba(0, 0, 0, .65);
    animation: consent-in .38s var(--ease) .5s backwards;
}
.consent[hidden] { display: none; }
@keyframes consent-in {
    from { opacity: 0; transform: translate(-50%, 18px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

.consent-in {
    display: flex; align-items: center; gap: 1.1rem;
    padding: 1rem 1.2rem;
}
.consent-copy p { max-width: 52ch; }
.consent-ico {
    flex: 0 0 auto; width: 42px; height: 42px; border-radius: 50%;
    display: grid; place-items: center; font-size: 1.15rem;
    color: var(--ember);
    background: color-mix(in srgb, var(--ember) 12%, transparent);
    border: 1px solid color-mix(in srgb, var(--ember) 35%, transparent);
}
.consent-copy { flex: 1 1 auto; min-width: 0; }
.consent-copy b {
    display: block; font-family: var(--font-display); font-size: 1rem;
    color: var(--paper); margin-bottom: .15rem;
}
.consent-copy p { margin: 0; font-size: .85rem; line-height: 1.6; color: var(--mist-dim); }
.consent-copy a { color: var(--ember); text-decoration: underline; text-underline-offset: 3px; }
.consent-btns { flex: 0 0 auto; display: flex; gap: .5rem; }

@media (max-width: 760px) {
    .consent-in { flex-wrap: wrap; gap: .8rem; }
    .consent-ico { width: 34px; height: 34px; font-size: 1rem; }
    .consent-copy { flex-basis: calc(100% - 46px); }
    .consent-btns { width: 100%; }
    .consent-btns .btn { flex: 1; justify-content: center; }
}
.stamp .ico i { font-size: 2.6rem; }
/* รูปเหรียญที่อัปโหลดเอง — วงกลมเต็มกรอบ ไม่มีขอบขาว (พื้นขาวถูกตัดตอนอัปโหลดแล้ว) */
.stamp .ico img {
    width: 104px; height: 104px;
    object-fit: contain;
    border-radius: 50%;
    display: block;
}

/* ขนาดจริงอิงความกว้างวงกลม — วงใหญ่ไอคอนก็ใหญ่ตาม */
@container (min-width: 60px) {
    .stamp .ico i   { font-size: 34cqw; }
    .stamp .ico img { width: 58cqw; height: 58cqw; }
}
.stamp.got .ico img { filter: drop-shadow(0 6px 14px color-mix(in srgb, var(--stamp, var(--ember)) 45%, transparent)); }
.cp-mark i { font-size: .95rem; }
.av-btn i { font-size: 1.7rem; color: var(--ember); }
.nav-pass .av i { font-size: 1rem; color: var(--ember); }
.scene-link > span:first-child i { font-size: 1.1rem; }

/* ── Tom Select (ให้เข้ากับธีม) ──────────────────────────────────────────── */

.ts-wrapper { min-width: 150px; }
.ts-wrapper .ts-control {
    background: var(--ink-2) !important;
    border: 1px solid var(--line) !important;
    border-radius: 100px;
    color: var(--paper);
    font-family: var(--font-body);
    font-size: .9rem;
    padding: .45rem 1rem;
    box-shadow: none !important;
}
.ts-wrapper.focus .ts-control { border-color: var(--ember) !important; }
.ts-wrapper .ts-control input, .ts-wrapper .ts-control .item { color: var(--paper) !important; }
.ts-dropdown {
    background: var(--ink-2);
    border: 1px solid var(--line-solid);
    color: var(--mist);
    border-radius: var(--radius-sm);
    box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .65);
    overflow: hidden;
    margin-top: 6px;
}
.ts-dropdown .option { padding: .55rem .9rem; font-size: .92rem; }
.ts-dropdown .active { background: color-mix(in srgb, var(--ember) 18%, transparent); color: var(--paper); }
.ts-dropdown .optgroup-header {
    font-family: var(--font-meta); font-size: .66rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--ember); background: transparent; padding: .6rem .9rem .3rem;
}
.ts-dropdown .no-results { padding: .7rem .9rem; color: var(--mist-dim); }
.ts-wrapper.single .ts-control:after { border-color: var(--mist-dim) transparent transparent !important; }


/* select ที่ไม่ต้องมีกรอบซ้อน — Tom Select วาดกรอบให้เองแล้ว */
.pick { display: inline-flex; }
.pick .ts-wrapper .ts-control { padding: .55rem 1.1rem; }
.filters .ts-wrapper { min-width: 160px; }
.field { background: var(--ink-2); }
.field i { color: var(--mist-dim); }

/* แผนที่ไม่ควรบังเมนู/ดรอปดาวน์ */
.mini-map, .map-shell { position: relative; z-index: 0; isolation: isolate; }
.mini-map .leaflet-pane, .map-shell .leaflet-pane,
.mini-map .leaflet-control, .map-shell .leaflet-control,
.mini-map .leaflet-top, .map-shell .leaflet-top,
.mini-map .leaflet-bottom, .map-shell .leaflet-bottom { z-index: auto !important; }

/* ── หน้าเข้าสู่ระบบ / สมัครสมาชิก ────────────────────────────────────────── */

.auth-wrap {
    width: var(--page); margin-inline: auto;
    padding: clamp(2.5rem, 6vw, 5rem) 0 clamp(4rem, 8vw, 7rem);
    display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .8fr);
    gap: clamp(2rem, 5vw, 4rem); align-items: start;
}
@media (max-width: 860px) { .auth-wrap { grid-template-columns: 1fr; } }

.auth-card {
    border: 1px solid var(--line); background: var(--ink-2);
    padding: clamp(1.6rem, 4vw, 2.6rem);
    border-radius: var(--radius-lg);
}
.auth-card h1 { font-size: clamp(1.9rem, 4.4vw, 2.8rem); margin: .4rem 0 .5rem; }
.auth-card > .muted { margin: 0 0 1.6rem; }

.auth-err {
    display: flex; gap: .6rem; align-items: center;
    padding: .8rem 1rem; margin-bottom: 1.2rem;
    border-left: 2px solid var(--clay);
    background: color-mix(in srgb, var(--clay) 12%, transparent);
    color: var(--paper); font-size: .9rem;
}
.auth-err i { color: var(--clay); }

.auth-form { display: grid; gap: 1rem; }
.fl { display: grid; gap: .35rem; }
.fl > span {
    font-family: var(--font-meta); font-size: .74rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mist-dim);
}
.fl > span small { text-transform: none; letter-spacing: 0; opacity: .8; }
.fl input {
    width: 100%; padding: .8rem 1rem;
    background: var(--ink); border: 1px solid var(--line-solid); border-radius: var(--radius);
    color: var(--paper); font-family: var(--font-body); font-size: 1rem;
    transition: border-color .2s;
}
.fl input:focus { outline: none; border-color: var(--ember); }
.fl-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 560px) { .fl-2 { grid-template-columns: 1fr; } }

.otp-input { font-family: var(--font-meta); font-size: 1.6rem !important; letter-spacing: .5em; text-align: center; }
.otp-sent { font-size: .92rem; margin: 0 0 .4rem; }
.otp-sent b { color: var(--ember); }

.auth-or { display: flex; align-items: center; gap: 1rem; margin: 1.6rem 0 1.1rem; }
.auth-or::before, .auth-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }
.auth-or span {
    font-family: var(--font-meta); font-size: .7rem; letter-spacing: .2em;
    text-transform: uppercase; color: var(--mist-dim);
}
.auth-alts { display: grid; gap: .6rem; }
.auth-alts .btn { width: 100%; justify-content: center; }
.auth-google svg { flex: 0 0 auto; }

.auth-foot { margin: 1.6rem 0 0; font-size: .9rem; text-align: center; }
.auth-foot a { color: var(--ember); }
.auth-foot a:hover { text-decoration: underline; }

.auth-side { padding-top: 1rem; }
.auth-side h3 { font-size: 1.4rem; }
.auth-carry {
    display: flex; gap: 1rem; align-items: center; margin-top: 1.4rem;
    padding: 1.1rem; border: 1px dashed var(--line-solid);
    background: color-mix(in srgb, var(--ember) 8%, transparent);
}
.auth-carry b { font-family: var(--font-display); font-size: 2.2rem; color: var(--ember); line-height: 1; }
.auth-carry span { font-size: .86rem; color: var(--mist-dim); }

.acc-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-top: 1.2rem; }
.acc-stats div { border: 1px solid var(--line); padding: .9rem 1rem;
    border-radius: var(--radius-sm);
}
.acc-stats b { display: block; font-family: var(--font-display); font-size: 1.7rem; color: var(--paper); line-height: 1; }
.acc-stats span { font-family: var(--font-meta); font-size: .66rem; letter-spacing: .16em; text-transform: uppercase; color: var(--mist-dim); }

.nav-account { display: flex; align-items: center; gap: .5rem; }
.nav-auth {
    display: inline-flex; align-items: center; gap: .45rem;
    padding: .45rem .9rem; border: 1px solid var(--line); border-radius: 100px;
    font-family: var(--font-meta); font-size: .78rem; color: var(--mist);
    transition: all .25s var(--ease);
}
.nav-auth:hover { border-color: var(--ember); color: var(--ember); }
.nav-pass .av-img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; }
@media (max-width: 640px) { .nav-auth span { display: none; } }

/* ── เส้นทางสำรวจ (จุดเช็คอินย่อย) ────────────────────────────────────────── */

.trail { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); }
.trail-title { font-size: clamp(1.5rem, 3vw, 2rem); margin: .4rem 0 .6rem; }
.trail-progress { display: flex; align-items: center; gap: 1rem; margin: 1.4rem 0 1.8rem; }
.trail-progress .progress { flex: 1; height: 4px; background: rgba(128, 128, 128, .18); }
.trail-progress .progress i { display: block; height: 100%; background: linear-gradient(90deg, var(--jade), var(--ember)); }

.trail-list { list-style: none; margin: 0; padding: 0 0 0 2.4rem; position: relative; }
.trail-list::before {
    content: ''; position: absolute; left: 15px; top: 12px; bottom: 12px; width: 1px;
    background: repeating-linear-gradient(to bottom, var(--line-solid) 0 6px, transparent 6px 12px);
}
.trail-list li { position: relative; padding-bottom: 1.8rem; }
.t-dot {
    position: absolute; left: -2.4rem; top: 0;
    width: 31px; height: 31px; border-radius: 50%;
    display: grid; place-items: center;
    border: 1px solid var(--line-solid); background: var(--ink);
    color: var(--mist-dim); font-size: .8rem;
    transition: all .35s var(--ease);
}
.trail-list li.done .t-dot {
    border-color: var(--tc, var(--jade));
    background: color-mix(in srgb, var(--tc, var(--jade)) 22%, var(--ink));
    color: var(--tc, var(--jade));
}
.t-head { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
.t-head b { font-family: var(--font-display); font-size: 1.2rem; color: var(--paper); }
.t-desc { font-size: .95rem; color: var(--mist); margin-top: .3rem; }
.t-desc p { margin: 0 0 .5em; }
.t-img { width: 100%; max-width: 380px; margin-top: .7rem; border: 1px solid var(--line); }
.t-hint {
    margin: .6rem 0 0; font-size: .86rem; color: var(--mist-dim);
    display: flex; gap: .45rem; align-items: flex-start;
}
.t-hint i { color: var(--ember); margin-top: .25em; }
.t-act { display: flex; align-items: center; gap: 1rem; margin-top: .8rem; flex-wrap: wrap; }
.t-act .meta:hover { color: var(--ember); }
.pill-done {
    display: inline-flex; align-items: center; gap: .4rem;
    font-family: var(--font-meta); font-size: .74rem; letter-spacing: .1em;
    padding: .3rem .8rem; border-radius: 100px;
    border: 1px solid color-mix(in srgb, var(--jade) 55%, transparent);
    color: var(--jade);
}

/* ── ปุ่มแชร์ ─────────────────────────────────────────────────────────────── */

.share {
    margin-top: 2.6rem;
    padding: 1.4rem 1.6rem;
    border: 1px solid var(--line);
    border-left: 2px solid var(--ember);
    background: linear-gradient(100deg, color-mix(in srgb, var(--ember) 8%, transparent), transparent 70%);
    display: flex; align-items: center; gap: 1.6rem; flex-wrap: wrap; border-radius: var(--radius); }
.share-copy { display: grid; gap: .15rem; }
.share-label {
    display: inline-flex; align-items: center; gap: .55rem;
    font-family: var(--font-display); font-size: 1.15rem;
    color: var(--paper); white-space: nowrap;
}
.share-label i { color: var(--ember); font-size: 1rem; }
.share-hint { font-size: .84rem; color: var(--mist-dim); }
.share-btns { display: flex; gap: .5rem; flex-wrap: wrap; margin-left: auto; }

.sh {
    display: inline-flex; align-items: center; gap: .5rem;
    padding: .5rem 1rem; border-radius: 100px;
    border: 1px solid var(--line-solid); background: transparent;
    color: var(--mist); font-family: var(--font-meta); font-size: .8rem;
    transition: all .28s var(--ease);
}
.sh span { line-height: 1; }
.sh:hover { transform: translateY(-2px); color: #fff; border-color: transparent; }
.sh-facebook:hover  { background: #1877f2; }
.sh-line:hover      { background: #06c755; }
.sh-x:hover         { background: #111; }
.sh-messenger:hover { background: #a334fa; }
.sh-copy:hover      { background: var(--ember); color: var(--ink); }
.sh-native:hover    { background: var(--jade); }
.sh.copied { background: var(--jade); color: #fff; border-color: transparent; }

@media (max-width: 720px) {
    .share { flex-direction: column; align-items: flex-start; gap: .9rem; }
    .share-btns { margin-left: 0; }
    .sh span { display: none; }
    .sh { padding: .6rem; width: 40px; height: 40px; justify-content: center; }
}

/* ── เมนูบัญชีแบบ mega ────────────────────────────────────────────────────── */

.nav-account { position: relative; display: flex; align-items: center; gap: .5rem; }

.nav-pass {
    display: flex; align-items: center; gap: .5rem;
    padding: .45rem 1rem .45rem .85rem;
    border: 1px solid var(--line); border-radius: 100px;
    font-family: var(--font-meta); font-size: .8rem;
    transition: border-color .3s, background .3s;
}
.nav-pass:hover { border-color: var(--ember); background: color-mix(in srgb, var(--ember) 8%, transparent); }
.nav-pass i { color: var(--ember); font-size: .95rem; }
.nav-pass b { color: var(--paper); }

.nav-auth {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: transparent; color: var(--mist);
    display: grid; place-items: center; padding: 0;
    transition: all .28s var(--ease);
}
.nav-auth:hover, .nav-auth[aria-expanded="true"] {
    border-color: var(--ember); color: var(--ember);
    background: color-mix(in srgb, var(--ember) 10%, transparent);
}
.nav-auth .av-img { width: 100%; height: 100%; border-radius: 50%; object-fit: cover; }

.mega {
    position: absolute; top: calc(100% + .7rem); right: 0; z-index: 950;
    width: min(340px, calc(100vw - 2rem));
    background: var(--ink-2);
    border: 1px solid var(--line-solid);
    border-radius: var(--radius);
    box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .7);
    overflow: hidden;
    animation: mega-in .24s var(--ease);
}
.mega[hidden] { display: none; }
@keyframes mega-in { from { opacity: 0; transform: translateY(-8px) scale(.98); } }

.mega-head {
    display: flex; gap: .9rem; align-items: center;
    padding: 1.1rem 1.2rem;
    background: color-mix(in srgb, var(--ember) 9%, transparent);
    border-bottom: 1px solid var(--line);
}
.mega-av {
    width: 46px; height: 46px; flex: 0 0 auto;
    border-radius: 50%; display: grid; place-items: center;
    border: 1px solid color-mix(in srgb, var(--ember) 45%, transparent);
    color: var(--ember); font-size: 1.2rem; overflow: hidden;
}
.mega-av img { width: 100%; height: 100%; object-fit: cover; }
.mega-head b {
    display: block; font-family: var(--font-display); font-size: 1.1rem;
    color: var(--paper); line-height: 1.35;
}
.mega-head small { color: var(--mist-dim); font-size: .78rem; line-height: 1.4; display: block; }

.mega-stats {
    display: grid; grid-template-columns: repeat(4, 1fr);
    border-bottom: 1px solid var(--line);
}
.mega-stats div { padding: .8rem .3rem; text-align: center; border-right: 1px solid var(--line); }
.mega-stats div:last-child { border-right: 0; }
.mega-stats b { display: block; font-family: var(--font-display); font-size: 1.15rem; color: var(--paper); line-height: 1; }
.mega-stats span {
    font-family: var(--font-meta); font-size: .58rem; letter-spacing: .12em;
    text-transform: uppercase; color: var(--mist-dim);
}

.mega-links { padding: .5rem; display: grid; }
.mega-links a, .mega-links button {
    display: flex; align-items: center; gap: .7rem;
    padding: .6rem .75rem; border-radius: var(--radius-sm);
    background: none; border: 0; width: 100%; text-align: left;
    color: var(--mist); font-family: var(--font-body); font-size: .92rem;
    transition: background .2s, color .2s;
}
.mega-links a:hover, .mega-links button:hover {
    background: color-mix(in srgb, var(--ember) 12%, transparent); color: var(--paper);
}
.mega-links i { color: var(--ember); width: 18px; text-align: center; }

/* ปุ่มสลับโทนสว่าง–มืดบนแถบนำทาง */
.nav-tone {
    width: 38px; height: 38px; border-radius: 50%;
    border: 1px solid var(--line); background: transparent; color: var(--mist);
    display: grid; place-items: center; padding: 0;
    transition: all .28s var(--ease);
}
.nav-tone:hover {
    border-color: var(--ember); color: var(--ember);
    background: color-mix(in srgb, var(--ember) 10%, transparent);
}
.nav-tone i { font-size: 1rem; }

.mega-theme { padding: .9rem 1.2rem; border-top: 1px solid var(--line); }
.tone-pick { display: grid; grid-template-columns: repeat(3, 1fr); gap: .35rem; margin-bottom: 1rem; }
.tone-pick .tpick {
    display: flex; align-items: center; justify-content: center; gap: .35rem;
    padding: .5rem .35rem; border-radius: var(--radius-sm);
    border: 1px solid var(--line-solid); background: var(--ink);
    color: var(--mist-dim); font-family: var(--font-body); font-size: .78rem;
    transition: all .22s var(--ease);
}
.tone-pick .tpick:hover { border-color: var(--ember); color: var(--paper); }
.tone-pick .tpick.on {
    border-color: var(--ember); color: var(--paper);
    background: color-mix(in srgb, var(--ember) 14%, transparent);
}
.mega-t.sub { margin-top: .9rem; font-size: .6rem; opacity: .85; }
.mega-t {
    display: flex; align-items: center; gap: .5rem; margin-bottom: .7rem;
    font-family: var(--font-meta); font-size: .66rem; letter-spacing: .18em;
    text-transform: uppercase; color: var(--mist-dim);
}
.mega-t i { color: var(--ember); }
.theme-dots { display: flex; flex-wrap: wrap; gap: .4rem; }
.tdot {
    width: 34px; height: 26px; padding: 0; border-radius: var(--radius-sm);
    border: 1px solid var(--line-solid); background: var(--ink);
    display: flex; overflow: hidden; transition: all .22s var(--ease);
    align-items: center; justify-content: center; color: var(--mist-dim);
}
/* แถบสีตัวอย่างในปุ่ม — เฉพาะ <i> เปล่า ๆ ที่ใส่ background ไว้
   ส่วนไอคอน UIcons (.fi) ต้องไม่โดนยืดเต็มปุ่ม ไม่งั้นกลายเป็นรูปเบี้ยว */
.tdot i:not(.fi) { flex: 1; height: 100%; display: block; }
.tdot i.fi { flex: 0 0 auto; font-size: .82rem; line-height: 1; color: var(--mist-dim); }
.tdot:hover i.fi, .tdot.on i.fi { color: var(--ember); }
.tdot:hover { transform: translateY(-2px); border-color: var(--ember); }
.tdot.on { border-color: var(--ember); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ember) 30%, transparent); }

.mega-foot {
    display: flex; gap: .5rem; padding: .9rem 1.2rem 1.1rem;
    border-top: 1px solid var(--line);
}
.mega-foot .btn { flex: 1; justify-content: center; }

@media (max-width: 940px) {
    .mega { right: -.5rem; }
    .nav-pass span { display: none; }
}

/* รูปเหรียญในการแจ้งเตือนและใน AR — วงกลม ไม่มีพื้นขาว */
.toast-badge { width: 40px; height: 40px; object-fit: contain; border-radius: 50%; display: block; }
.ar-chip.badge-chip img { width: 30px; height: 30px; object-fit: contain; border-radius: 50%; }


/* บล็อกโปรโมต AR: แสตมป์ซ้าย เนื้อหาขวา (ให้ข้อความกว้างกว่า) */
.iv-promo.flip {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    background:
        radial-gradient(80% 120% at 16% 30%, color-mix(in srgb, var(--jade) 18%, transparent), transparent 62%),
        var(--ink-2);
}
.iv-promo.flip .promo-stamps { display: grid; place-items: center; }
@media (max-width: 900px) {
    .iv-promo.flip { grid-template-columns: 1fr; }
    .iv-promo.flip .promo-stamps { order: 2; }
}

/* ── รายชื่อบริการภายนอกในหน้านโยบาย ─────────────────────────────────── */
.third-list { display: grid; gap: .8rem; margin: 1.4rem 0 1.8rem; }
.third {
    padding: 1rem 1.2rem; border-radius: var(--radius);
    border: 1px solid var(--line-solid); background: var(--ink-2);
}
.third-head { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; }
.third-head b { font-family: var(--font-display); font-size: 1.02rem; color: var(--paper); }
.tag-cookie, .tag-nocookie, .tag-when {
    display: inline-flex; align-items: center; gap: .3rem;
    padding: .12rem .6rem; border-radius: 100px;
    font-family: var(--font-meta); font-size: .62rem; letter-spacing: .06em;
}
.tag-cookie   { color: var(--clay); border: 1px solid color-mix(in srgb, var(--clay) 40%, transparent); }
.tag-nocookie { color: var(--jade); border: 1px solid color-mix(in srgb, var(--jade) 40%, transparent); }
.tag-when     { color: var(--mist-dim); border: 1px solid var(--line-solid); }
.third-what {
    display: block; margin-top: .35rem;
    font-family: var(--font-meta); font-size: .68rem; letter-spacing: .1em;
    text-transform: uppercase; color: var(--ember);
}
.third p { margin: .45rem 0 0; font-size: .86rem; line-height: 1.7; color: var(--mist-dim); }

/* บรรทัดบริการภายนอกบนแถบขอความยินยอม */
.consent-third {
    margin-top: .5rem !important; padding-top: .5rem;
    border-top: 1px solid var(--line);
    font-size: .78rem !important;
}
.consent-third i { color: var(--jade); margin-right: .25rem; }
.consent-third b { display: inline !important; font-family: var(--font-body) !important;
    font-size: inherit !important; color: var(--mist) !important; font-weight: 600; }

/* ── ตัวเลือกภาษา ─────────────────────────────────────────────────────── */
.lang-wrap { position: relative; }
.nav-lang {
    display: inline-flex; align-items: center; gap: .35rem;
    height: 38px; padding: 0 .7rem; border-radius: 100px;
    border: 1px solid var(--line); background: transparent; color: var(--mist);
    font-family: var(--font-meta); font-size: .74rem; letter-spacing: .06em;
    transition: all .28s var(--ease);
}
.nav-lang:hover, .nav-lang[aria-expanded="true"] {
    border-color: var(--ember); color: var(--ember);
    background: color-mix(in srgb, var(--ember) 10%, transparent);
}
.nav-lang i { font-size: .95rem; }

.lang-menu {
    position: absolute; top: calc(100% + .6rem); right: 0; z-index: 960;
    min-width: 190px; padding: .4rem;
    background: var(--ink-2); border: 1px solid var(--line-solid);
    border-radius: var(--radius);
    box-shadow: 0 26px 60px -26px rgba(0, 0, 0, .7);
    animation: mega-in .22s var(--ease);
}
.lang-menu[hidden] { display: none; }
.lang-menu a {
    display: flex; align-items: baseline; gap: .5rem;
    padding: .5rem .7rem; border-radius: var(--radius-sm);
    color: var(--mist); transition: background .2s, color .2s;
}
.lang-menu a:hover { background: color-mix(in srgb, var(--ember) 12%, transparent); color: var(--paper); }
.lang-menu a.on { color: var(--ember); background: color-mix(in srgb, var(--ember) 10%, transparent); }
.lang-menu a b { font-weight: 500; font-size: .95rem; }
.lang-menu a small { font-size: .7rem; color: var(--mist-dim); margin-left: auto; }

@media (max-width: 640px) { .nav-lang span { display: none; } .nav-lang { padding: 0; width: 38px; justify-content: center; } }