@charset "UTF-8";
/* ====================================================================
 * jertam.css - Bootstrap 5 overrides + Home page component styles
 * Depends on tokens.css (must be loaded first).
 * Keep tokens.css unmodified; layer all customisations here.
 * ==================================================================== */

/* -- 1. Bootstrap variable overrides --------------------------------- */
:root {
    --bs-primary: var(--jt-orange-500);
    --bs-primary-rgb: 245, 130, 32;
    --bs-secondary: var(--jt-ink);
    --bs-success: var(--jt-green-500);
    --bs-success-rgb: 111, 179, 68;
    --bs-body-bg: var(--jt-paper);
    --bs-body-color: var(--jt-ink);
    --bs-border-color: var(--jt-line);
    --bs-border-radius: var(--jt-r-md);
    --bs-border-radius-lg: var(--jt-r-lg);
    --bs-border-radius-xl: var(--jt-r-xl);
    --bs-border-radius-pill: var(--jt-r-pill);
    --bs-body-font-family: var(--jt-font-body);
    --bs-heading-color: var(--jt-ink);
    --bs-link-color: var(--jt-orange-600);
    --bs-link-hover-color: var(--jt-orange-700);
}
/* ===============================
   IBM Plex Sans Thai (ไม่มีหัว)
================================= */
@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-ExtraLight.ttf') format('truetype');
    font-weight: 200;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'IBM Plex Sans Thai';
    src: url('../fonts/IBMPlexSansThai-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* ===============================
   IBM Plex Sans Thai Looped (มีหัว)
================================= */
@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-Thin.ttf') format('truetype');
    font-weight: 100;
}

@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-ExtraLight.ttf') format('truetype');
    font-weight: 200;
}

@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-Light.ttf') format('truetype');
    font-weight: 300;
}

@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-Regular.ttf') format('truetype');
    font-weight: 400;
}

@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-Medium.ttf') format('truetype');
    font-weight: 500;
}

@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-SemiBold.ttf') format('truetype');
    font-weight: 600;
}

@font-face {
    font-family: 'IBM Plex Sans Thai Looped';
    src: url('../fonts/IBMPlexSansThaiLooped-Bold.ttf') format('truetype');
    font-weight: 700;
}

/* ===============================
   ตั้งค่าตัวแปรสำหรับใช้งาน
================================= */
:root {
    --ui-font: 'IBM Plex Sans Thai', system-ui, sans-serif; /* ไม่มีหัว */
    --paragraph-font: 'IBM Plex Sans Thai Looped', serif; /* มีหัว */
}
html, body {
    min-height: 100%;   /* เปลี่ยนจาก height: 100% → ให้ body ขยายตาม content ได้ */
    font-family: var(--ui-font) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-size: 16px;
    line-height: 1.7;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
    overflow-x: hidden;
}

body {
    min-height: 100%;
    padding: 0px;
    font-size: 16px;
    line-height: 1.7;
    font-family: var(--ui-font) !important;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

/* Bootstrap .btn  pill by default, Jertam button proportions */
.jt-root .btn {
    border-radius: var(--jt-r-pill);
    padding: .625rem 1.375rem;
    font-weight: 600;
}
.jt-root .btn-primary {
    background: var(--jt-orange-500);
    border-color: var(--jt-orange-500);
    box-shadow: var(--jt-shadow-glow-orange);
}
.jt-root .btn-primary:hover {
    background: var(--jt-orange-600);
    border-color: var(--jt-orange-600);
}

.jt-root .form-control, .jt-root .form-select {
    height: 52px;
    border-radius: var(--jt-r-md);
    border: 1.5px solid var(--jt-line);
    font-size: .95rem;
}
.jt-root .form-control:focus, .jt-root .form-select:focus {
    border-color: var(--jt-orange-500);
    box-shadow: 0 0 0 4px rgba(245,130,32,.12);
}

/* -- 2. Page wrapper ------------------------------------------------- */
body.jt-body {
    background: var(--jt-paper);
    color: var(--jt-ink);
    /* ── Sticky footer: flex column ให้ footer อยู่ล่างสุดเสมอ ── */
    display: flex;
    flex-direction: column;
    min-height: 100dvh;   /* dvh = dynamic viewport height (mobile browser-bar aware) */
}

/* Container ที่ wrap <main> ขยายเต็มพื้นที่ว่าง → footer ถูกดันลงล่าง */
body.jt-body > .container {
    flex: 1 0 auto;
}

/* Footer ไม่ shrink ให้แน่ใจ */
.jt-footer {
    flex-shrink: 0;
}

/* -- 3. Hero section ------------------------------------------------- */
.jt-hero {
    position: relative;
    width: 100%;
    height: min(820px, 100vh);
    min-height: 680px;
    overflow: hidden;
    background: var(--jt-ink);
}
/* Full-screen variant — add .jt-hero--fullscreen alongside .jt-hero    */
/* Video fills automatically via object-fit:cover on .jt-hero__video    */
.jt-hero--fullscreen {
    height: 100vh;
    height: 100dvh;   /* dynamic viewport: hides browser chrome on mobile */
    min-height: 580px;
}
.jt-hero__video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}
.jt-hero__scrim,
.jt-hero__scrim-h {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
}
.jt-hero__scrim {
    background: linear-gradient(180deg,
        rgba(26,43,31,0.45) 0%,
        rgba(26,43,31,0.05) 30%,
        rgba(26,43,31,0.10) 60%,
        rgba(26,43,31,0.85) 100%);
}
.jt-hero__scrim-h {
    background: linear-gradient(90deg,
        rgba(26,43,31,0.55) 0%,
        rgba(26,43,31,0.15) 40%,
        transparent 70%);
}

.jt-hero__header {
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 10;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    padding: 24px clamp(24px, 4vw, 56px);
}

/* Logo pill */
.jt-logo-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.92);
    padding: 8px 18px 8px 10px;
    border-radius: 9999px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 4px 14px rgba(0,0,0,0.10);
    color: var(--jt-ink);
}
.jt-logo-pill__word {
    font-family: var(--jt-font-display);
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: var(--jt-ink);
}

/* Center glass nav */
.jt-nav-center {
    display: flex;
    gap: 6px;
    align-items: center;
    background: rgba(255,255,255,0.18);
    padding: 6px;
    border-radius: 9999px;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.20);
}
.jt-nav-center__item {
    padding: 8px 16px;
    border-radius: 9999px;
    font-size: 13.5px;
    font-weight: 500;
    color: white;
    text-decoration: none;
    transition: background .15s ease;
}
.jt-nav-center__item:hover { background: rgba(255,255,255,0.10); color: white; }
.jt-nav-center__item--active {
    background: white;
    color: var(--jt-ink);
}
.jt-nav-center__item--active:hover { background: white; color: var(--jt-ink); }

/* Header right cluster (lang switcher + glass login + primary CTA) */
.jt-hero__actions {
    display: flex;
    gap: 10px;
    align-items: center;
}
.jt-hero .jt-nav-login {
    background: rgba(255,255,255,0.18) !important;
    color: white !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    height: 40px;
    padding: 0 18px !important;
    border: 1px solid rgba(255,255,255,0.25) !important;
    border-radius: var(--jt-r-pill) !important;
    box-shadow: none !important;
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}
.jt-hero .jt-nav-login:hover {
    background: rgba(255,255,255,0.28) !important;
    color: white !important;
}
.jt-nav-download {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    height: 40px !important;
    padding: 0 20px !important;
    font-size: 14px;
    font-weight: 700;
    color: white;
    text-decoration: none;
    border-radius: var(--jt-r-pill) !important;
    box-shadow: 0 6px 20px -4px rgba(245,130,32,0.55), 0 0 0 1px rgba(255,255,255,0.20) inset !important;
}

/* ── Solid site header (interior pages, NavVariant.Solid) ── */
.jt-site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    padding: 0 32px;
    height: 64px;
    background: white;
    border-bottom: 1px solid var(--jt-line);
    box-shadow: 0 1px 8px rgba(26,43,31,0.06);
}

/* Logo */
.jt-site-header .jt-logo-pill {
    gap: 8px;
    text-decoration: none;
}

/* Nav links */
.jt-site-header .jt-nav-center__item       { color: var(--jt-ink-2); font-size: 14px; }
.jt-site-header .jt-nav-center__item:hover { color: var(--jt-ink); }
.jt-site-header .jt-nav-center__item--active {
    color: var(--jt-ink);
    font-weight: 700;
}

/* Action buttons group */
.jt-site-header .jt-hero__actions { gap: 8px; }

/* Lang toggle — complete standalone definition for solid context */
.jt-site-header .jt-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: var(--jt-r-pill);
    background: transparent;
    border: 1.5px solid var(--jt-line);
    color: var(--jt-ink);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s ease, border-color .12s ease;
}
.jt-site-header .jt-lang__toggle:hover {
    background: var(--jt-cream);
    border-color: rgba(26,43,31,0.25);
}

/* Chevron flips when open */
.jt-site-header .jt-lang__toggle svg:last-child { transition: transform .15s ease; }
.jt-site-header .jt-lang__toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* Login button — complete standalone definition for solid context */
.jt-site-header .jt-nav-login {
    display: inline-flex !important;
    align-items: center !important;
    height: 40px;
    padding: 0 18px !important;
    border-radius: var(--jt-r-pill) !important;
    background: transparent !important;
    color: var(--jt-ink) !important;
    border: 1.5px solid var(--jt-line) !important;
    box-shadow: none !important;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: background .12s ease, border-color .12s ease;
}
.jt-site-header .jt-nav-login:hover {
    background: var(--jt-cream) !important;
    border-color: rgba(26,43,31,0.25) !important;
    color: var(--jt-ink) !important;
}

@media (max-width: 1099px) {
    .jt-site-header { padding: 0 20px; }
    .jt-site-header .jt-nav-center { display: none; }
    .jt-site-header .jt-nav-login  { display: none !important; }
}
@media (max-width: 767px) {
    .jt-site-header { padding: 0 16px; height: 56px; }
}

/* Lang switcher (compact, on dark hero) */
.jt-lang {
    position: relative;
    display: inline-flex;
}
.jt-hero .jt-lang__toggle {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 14px;
    border-radius: 9999px;
    background: rgba(255,255,255,0.18);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    font-size: 13px;
    font-weight: 600;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.jt-hero .jt-lang__toggle:hover { background: rgba(255,255,255,0.28); }
.jt-hero .jt-lang__toggle--dark {
    background: rgba(26,43,31,0.06);
    border: 1px solid var(--jt-line);
    color: var(--jt-ink);
    backdrop-filter: none;
}
.jt-hero .jt-lang__toggle--dark:hover { background: rgba(26,43,31,0.10); }

/* Chevron flips when menu is open */
.jt-hero .jt-lang__toggle svg:last-child { transition: transform .15s ease; }
.jt-hero .jt-lang__toggle[aria-expanded="true"] svg:last-child { transform: rotate(180deg); }

/* Lang dropdown menu panel */
.jt-lang__menu {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 200px;
    background: white;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(26,43,31,0.18), 0 0 0 1px rgba(26,43,31,0.06);
    padding: 6px;
    z-index: 200;
}
.jt-lang__menu[hidden] { display: none; }
.jt-lang__menu .jt-lang__item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 10px 12px;
    border: none;
    background: transparent;
    border-radius: 10px;
    cursor: pointer;
    font-size: 14px;
    color: var(--jt-ink);
    text-align: left;
    transition: background .12s ease;
}
.jt-lang__menu .jt-lang__item:hover { background: var(--jt-cream); }
.jt-lang__menu .jt-lang__item--active .jt-lang__item-l span:last-child { font-weight: 700; }
.jt-lang__menu .jt-lang__item--danger { color: var(--jt-red-500, #ef4444); }
.jt-lang__menu .jt-lang__item--danger:hover { background: var(--jt-red-50, #fef2f2); }
/* User dropdown — min width เพื่อให้ชื่อยาวไม่แตก */
.jt-user-menu { min-width: 180px; }
/* Avatar รูป profile ใน nav button */
.jt-nav-avatar { border-radius: 50%; object-fit: cover; flex-shrink: 0; }
.jt-lang__item-l {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.jt-lang__item-r {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jt-muted);
}
.jt-lang__code {
    font-size: 12px;
    font-weight: 500;
    font-family: var(--jt-font-mono);
}
.jt-lang__check {
    display: inline-flex;
    align-items: center;
    color: var(--jt-ink);
}
.jt-lang__sep {
    height: 1px;
    background: var(--jt-line);
    margin: 2px 6px;
}

.jt-flag {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
    background: var(--jt-line);
}

/* Hero content row */
.jt-hero__row {
    position: absolute;
    left: clamp(24px, 4vw, 56px);
    right: clamp(24px, 4vw, 56px);
    bottom: clamp(80px, 12vh, 130px);
    z-index: 5;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 32px;
}
.jt-hero__copy {
    color: white;
    max-width: 760px;
    flex: 1 1 auto;
    min-width: 0;
}

.jt-hero__statuschip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    padding: 7px 16px;
    border-radius: 9999px;
    border: 1px solid rgba(255,255,255,0.25);
    font-size: 12.5px;
    font-weight: 600;
    color: white;
    margin-bottom: 22px;
}
.jt-pulse-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jt-orange-500);
    box-shadow: 0 0 12px var(--jt-orange-500);
    flex-shrink: 0;
}

.jt-hero__h1 {
    font-family: var(--jt-font-display);
    font-size: clamp(38px, 6.2vw, 82px);
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1.05;
    text-shadow: 0 4px 30px rgba(0,0,0,0.25);
    text-wrap: balance;
    color: white;
    margin: 0;
}
.jt-hero__h1-accent { color: var(--jt-orange-400); }

.jt-hero__sub {
    font-family: var(--jt-font-display);
    font-size: clamp(16px, 1.8vw, 26px);
    font-weight: 500;
    letter-spacing: -0.01em;
    line-height: 1.25;
    margin-top: clamp(14px, 2vw, 22px);
    color: rgba(255,255,255,0.92);
    font-style: italic;
}
.jt-hero__sub .jt-ztamm {
    color: var(--jt-green-300);
    font-weight: 700;
    font-style: normal;
}
.jt-hero__sub .jt-collect { opacity: 0.8; }

.jt-hero__ctas {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-top: 36px;
    flex-wrap: wrap;
}
.jt-hero-cta-secondary {
    display: inline-flex !important;
    align-items: center;
    background: rgba(255,255,255,0.08);
    color: white;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid var(--jt-green-300) !important;
    box-shadow: 0 0 0 4px rgba(168,217,130,0.18), 0 8px 24px -8px rgba(168,217,130,0.45) !important;
}
.jt-hero-cta-secondary:hover { background: rgba(255,255,255,0.14); color: white; }

/* Bottom-right floating live card */
.jt-hero-live {
    background: rgba(255,255,255,0.96);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 18px;
    padding: 16px;
    width: 280px;
    flex-shrink: 0;
    box-shadow: 0 30px 60px -20px rgba(0,0,0,0.40);
    color: var(--jt-ink);
}
.jt-hero-live__row {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}
.jt-hero-live__pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--jt-orange-500);
    box-shadow: 0 0 0 4px rgba(245,130,32,0.20);
}
.jt-hero-live__label {
    font-family: var(--jt-font-mono);
    font-size: 11px;
    color: var(--jt-orange-700);
    letter-spacing: 0.6px;
    font-weight: 600;
}
.jt-hero-live__thumb {
    width: 64px;
    height: 64px;
    border-radius: 12px;
    overflow: hidden;
    flex-shrink: 0;
}
.jt-hero-live__date {
    font-family: var(--jt-font-mono);
    font-size: 10px;
    color: var(--jt-muted);
}
.jt-hero-live__title {
    font-family: var(--jt-font-display);
    font-size: 14px;
    font-weight: 700;
    letter-spacing: -0.01em;
    margin-top: 2px;
    line-height: 1.2;
}

/* Mute button */
.jt-hero__mute {
    position: absolute;
    bottom: 32px;
    right: clamp(24px, 4vw, 56px);
    z-index: 6;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(255,255,255,0.16);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255,255,255,0.25);
    color: white;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
}
.jt-hero__mute:hover { background: rgba(255,255,255,0.28); }

/* Scroll cue */
.jt-scrollcue {
    position: absolute;
    bottom: 32px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 6;
    color: rgba(255,255,255,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    font-family: var(--jt-font-mono);
    font-size: 11px;
    letter-spacing: 0.8px;
    pointer-events: none;
}
.jt-scrollcue__mouse {
    width: 22px;
    height: 32px;
    border-radius: 12px;
    border: 1.5px solid rgba(255,255,255,0.5);
    display: flex;
    justify-content: center;
    padding-top: 6px;
}
.jt-scrollcue__dot {
    display: block;
    width: 2px;
    height: 6px;
    background: white;
    border-radius: 1px;
    animation: jt-scroll 1.4s ease-in-out infinite;
}
@keyframes jt-scroll {
    0%, 100% { transform: translateY(0); opacity: 1; }
    50%      { transform: translateY(8px); opacity: 0.3; }
}

/* -- 4. Ticker strip ------------------------------------------------- */
.jt-ticker {
    background: var(--jt-ink);
    color: white;
    padding: 14px 0;
    overflow: hidden;
    position: relative;
}
.jt-ticker__track {
    display: flex;
    gap: 48px;
    white-space: nowrap;
    animation: jt-ticker 60s linear infinite;
    will-change: transform;
}
.jt-ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 500;
}
.jt-ticker__sep {
    color: var(--jt-orange-400);
    margin-left: 16px;
}
@keyframes jt-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-33.33%); }
}

/* -- 5. Section heading kicker --------------------------------------- */
.jt-section { padding: 80px clamp(24px, 4vw, 56px); }
.jt-section--paper { background: var(--jt-paper); }
.jt-section__kicker {
    font-family: var(--jt-font-mono);
    font-size: 12px;
    color: var(--jt-orange-600);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 8px;
}
.jt-section__h2 {
    font-family: var(--jt-font-display);
    font-size: clamp(32px, 5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    color: var(--jt-ink);
    margin: 0;
}
.jt-section__h2 em {
    color: var(--jt-orange-500);
    font-style: italic;
    font-weight: 800;
}
.jt-section__more {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    color: var(--jt-ink-2);
    font-weight: 600;
    text-decoration: none;
}
.jt-section__more:hover { color: var(--jt-ink); }

/* -- 6. Category tiles ----------------------------------------------- */
.jt-categories {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 16px;
}
.jt-cat-tile {
    border-radius: 22px;
    padding: 24px 18px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 24px;
    aspect-ratio: 1 / 1.15;
    box-shadow: 0 4px 14px rgba(26,43,31,0.05);
    transition: transform .2s ease, box-shadow .2s ease;
    border: none;
    cursor: pointer;
    text-align: left;
    color: var(--jt-ink);
    text-decoration: none;
}
.jt-cat-tile:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 24px rgba(26,43,31,0.08);
}
.jt-cat-tile__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(255,255,255,0.65);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: var(--jt-ink);
}
.jt-cat-tile__body { margin-top: auto; }
.jt-cat-tile__name {
    font-family: var(--jt-font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
}
.jt-cat-tile__meta {
    font-size: 11px;
    color: var(--jt-ink-2);
    margin-top: 2px;
    font-family: var(--jt-font-mono);
}

/* -- 7. Featured events ---------------------------------------------- */
.jt-featured {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 20px;
}
.jt-feat-large { grid-row: span 2; display: flex; flex-direction: column; min-height: 480px; }
.jt-feat-large__media { height: 280px; position: relative; }
.jt-feat-large__body { padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.jt-feat-large__title {
    font-family: var(--jt-font-display);
    font-size: 32px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: var(--jt-ink);
    margin: 0;
}
.jt-feat-large__desc {
    font-size: 15px;
    color: var(--jt-ink-2);
    line-height: 1.5;
    margin: 0;
}
.jt-feat-large__meta {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.jt-feat-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--jt-ink-2);
}
.jt-feat-large__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--jt-line);
}
.jt-feat-price-big {
    font-family: var(--jt-font-display);
    font-size: 28px;
    font-weight: 800;
    color: var(--jt-orange-600);
}
.jt-feat-price-sub {
    font-size: 11px;
    color: var(--jt-muted);
}

.jt-feat-small { min-height: 230px; display: flex; flex-direction: column; }
.jt-feat-small__media { height: 120px; position: relative; }
.jt-feat-small__body { padding: 16px; display: flex; flex-direction: column; gap: 6px; flex: 1; }
.jt-feat-small__title {
    font-family: var(--jt-font-display);
    font-size: 15px;
    font-weight: 700;
    letter-spacing: -0.01em;
    line-height: 1.2;
    margin: 0;
}
.jt-feat-small__loc {
    font-size: 11px;
    color: var(--jt-muted);
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.jt-feat-small__foot {
    margin-top: auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.jt-feat-small__price {
    font-weight: 700;
    color: var(--jt-orange-600);
    font-size: 13px;
}

/* Hot/category/date overlays */
.jt-feat-tag-hot {
    background: rgba(255,255,255,0.95);
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 700;
    color: var(--jt-orange-700);
}
.jt-feat-tag-cat {
    background: rgba(26,43,31,0.85);
    color: white;
    padding: 6px 12px;
    border-radius: 9999px;
    font-size: 11px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.jt-feat-tag-cat--small {
    background: rgba(255,255,255,0.95);
    color: var(--jt-ink);
    padding: 4px 10px;
    font-size: 10px;
    font-weight: 700;
}
.jt-feat-date {
    background: white;
    border-radius: 14px;
    padding: 10px 16px;
    text-align: center;
    color: var(--jt-ink);
}
.jt-feat-date--small { border-radius: 10px; padding: 4px 10px; }
.jt-feat-date__m {
    font-size: 10px;
    color: var(--jt-muted);
    font-family: var(--jt-font-mono);
}
.jt-feat-date--small .jt-feat-date__m { font-size: 8px; }
.jt-feat-date__d {
    font-family: var(--jt-font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}
.jt-feat-date--small .jt-feat-date__d { font-size: 16px; }

/* Striped placeholder fill */
.jt-stripe-fill {
    position: absolute;
    inset: 0;
    background-image: repeating-linear-gradient(
        -45deg,
        var(--c1, #E0F2C7) 0 10px,
        var(--c2, #C7E69E) 10px 20px);
}

/* -- 8. Stats strip -------------------------------------------------- */
.jt-stats {
    background: var(--jt-ink);
    border-radius: 28px;
    padding: 64px 48px;
    display: grid;
    grid-template-columns: 1fr repeat(4, auto);
    gap: 48px;
    color: white;
    position: relative;
    overflow: hidden;
    align-items: center;
}
.jt-stats::before {
    content: '';
    position: absolute;
    right: -60px; top: -60px;
    width: 220px; height: 220px;
    border-radius: 50%;
    background: var(--jt-orange-500);
    opacity: 0.18;
}
.jt-stats::after {
    content: '';
    position: absolute;
    left: -50px; bottom: -50px;
    width: 160px; height: 160px;
    border-radius: 50%;
    background: var(--jt-green-300);
    opacity: 0.12;
}
.jt-stats > * { position: relative; z-index: 2; }
.jt-stats__lead-kicker {
    font-family: var(--jt-font-mono);
    font-size: 11px;
    color: var(--jt-green-300);
    letter-spacing: 0.8px;
    text-transform: uppercase;
    margin-bottom: 12px;
}
.jt-stats__lead-h {
    font-family: var(--jt-font-display);
    font-size: 38px;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
    max-width: 360px;
    color: white;
    margin: 0;
}
.jt-stat-item {
    padding-left: 24px;
    border-left: 1px solid rgba(255,255,255,0.15);
}
.jt-stat-item__v {
    font-family: var(--jt-font-display);
    font-size: 56px;
    font-weight: 800;
    letter-spacing: -0.04em;
    line-height: 1;
}
.jt-stat-item__l {
    font-size: 13px;
    opacity: 0.7;
    margin-top: 6px;
}

/* -- 9. App CTA splash card ------------------------------------------ */
.jt-appcta {
    background: var(--jt-grad-splash);
    border-radius: 28px;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    align-items: center;
    min-height: 380px;
}
.jt-appcta__body { padding: 56px 48px; }
.jt-appcta__h {
    font-family: var(--jt-font-display);
    font-size: clamp(32px, 4.5vw, 52px);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1;
    margin: 20px 0 16px;
    color: var(--jt-ink);
}
.jt-appcta__p {
    font-size: 17px;
    color: var(--jt-ink-2);
    max-width: 440px;
    margin-bottom: 28px;
}
.jt-appcta__art {
    position: relative;
    height: 380px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.jt-appcta__pill {
    position: absolute;
    background: white;
    border-radius: 9999px;
    padding: 18px 28px;
    box-shadow: 0 14px 32px rgba(26,43,31,0.18);
    font-family: var(--jt-font-display);
    font-weight: 800;
    letter-spacing: -0.02em;
    color: var(--jt-ink);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 20px;
}
.jt-appcta__pill .dot {
    width: 12px; height: 12px;
    background: var(--jt-orange-500);
    border-radius: 50%;
}
.jt-appcta__pill--a { top: 80px; left: 30px; transform: rotate(-6deg); }
.jt-appcta__pill--b { top: 180px; left: 90px; transform: rotate(4deg); }
.jt-appcta__sub {
    font-family: var(--jt-font-mono);
    font-size: 11px;
    font-weight: 500;
    color: var(--jt-ink-2);
    margin-left: 8px;
}

/* -- 10. Footer ------------------------------------------------------ */
.jt-footer {
    background: var(--jt-ink);
    color: white;
}
.jt-footer__main {
    padding: 64px clamp(24px, 4vw, 56px) 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr 1fr;
    gap: 48px;
}
.jt-footer__blurb {
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    margin-top: 16px;
    max-width: 280px;
    line-height: 1.6;
}
.jt-footer__tag {
    font-family: var(--jt-font-display);
    font-style: italic;
    color: var(--jt-green-300);
    margin-top: 16px;
    font-size: 14px;
}
.jt-footer__col-h {
    font-family: var(--jt-font-mono);
    font-size: 11px;
    color: var(--jt-orange-400);
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 14px;
}
.jt-footer__col-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    font-size: 13px;
    color: rgba(255,255,255,0.75);
    list-style: none;
    padding: 0; margin: 0;
}
.jt-footer__col-list a { color: inherit; text-decoration: none; }
.jt-footer__col-list a:hover { color: white; }
.jt-footer__bar {
    padding: 20px clamp(24px, 4vw, 56px);
    border-top: 1px solid rgba(255,255,255,0.10);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.5);
    font-family: var(--jt-font-mono);
}

/* -- 11. Responsive collapses ---------------------------------------- */
@media (max-width: 1199px) {
    .jt-categories { grid-template-columns: repeat(3, 1fr); }
    .jt-featured { grid-template-columns: 1fr 1fr; }
    .jt-feat-large { grid-row: auto; grid-column: span 2; min-height: auto; }
    .jt-stats { grid-template-columns: 1fr 1fr; gap: 32px; padding: 48px 32px; }
    .jt-footer__main { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 1099px) {
    .jt-nav-center { display: none; }
    .jt-hero .jt-nav-login { display: none; }
    .jt-hero-live { display: none; }
}
@media (max-width: 767px) {
    .jt-section { padding: 56px 20px; }
    .jt-categories { grid-template-columns: repeat(2, 1fr); }
    .jt-featured { grid-template-columns: 1fr; }
    .jt-feat-large { grid-column: span 1; }
    .jt-stats { grid-template-columns: 1fr; }
    .jt-appcta { grid-template-columns: 1fr; }
    .jt-appcta__art { display: none; }
    .jt-footer__main { grid-template-columns: 1fr 1fr; }
    .jt-hero-cta-secondary { display: none; }
    .jt-hero__h1 { font-size: 44px !important; }
}

/* -- 12. Reduced-motion overrides ------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .jt-ticker__track { animation: none; }
    .jt-scrollcue__dot { animation: none; }
}

/* -- 13. Skip link (WCAG 2.4.1) — global, all layouts --------------- */
.jt-skip-link {
    position: absolute;
    top: -100%;
    left: 16px;
    z-index: 9999;
    padding: 8px 18px;
    background: var(--jt-ink);
    color: white;
    border-radius: 0 0 10px 10px;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: top .1s;
}
.jt-skip-link:focus { top: 0; }

/* -- 14. Interior page hero (.jt-page-hero) -------------------------- */
/* Triggered by ViewBag.ShowPageHero = true in _Layout.cshtml          */
/* or by @section PageHero { } in a view                                */
.jt-page-hero {
    background: var(--jt-grad-splash);
    position: relative;
    overflow: hidden;
    padding: 56px 0 84px;
}
.jt-page-hero__wave {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 80px;
    z-index: 1;
    pointer-events: none;
}
.jt-page-hero__wave path { fill: var(--jt-paper); }

.jt-page-hero__blob {
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
}
.jt-page-hero__blob--orange {
    top: -20px;
    right: -30px;
    width: 180px;
    height: 180px;
    background: radial-gradient(circle at 35% 35%, #FFB36B, #F58220);
    box-shadow: 0 20px 60px rgba(245, 130, 32, 0.25);
    z-index: 0;
}
.jt-page-hero__blob--sky {
    bottom: 24px;
    left: 50px;
    width: 72px;
    height: 72px;
    background: radial-gradient(circle at 35% 35%, #A8DCEC, #2A99C9);
    opacity: 0.65;
    z-index: 0;
}

.jt-page-hero__inner {
    position: relative;
    z-index: 2;
}
.jt-page-hero__title {
    font-family: var(--jt-font-display);
    font-size: clamp(2.25rem, 5vw, 3.75rem);
    font-weight: 800;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--jt-ink);
    max-width: 760px;
    margin: 0;
}
.jt-page-hero__sub {
    font-size: 1.05rem;
    color: var(--jt-ink-2);
    line-height: 1.65;
    margin-top: 16px;
    max-width: 580px;
}
@media (max-width: 576px) {
    .jt-page-hero { padding: 40px 0 72px; }
    .jt-page-hero__title { font-size: 2rem; }
}

/* ── Shared: orange text link ──────────────────────────────────────── */
.jt-orange-link {
    color: var(--jt-orange-500);
    text-decoration: none;
    font-weight: 600;
    transition: color .15s;
}
.jt-orange-link:hover { color: var(--jt-orange-700); text-decoration: underline; }

/* ── Shared: jt-btn variants ───────────────────────────────────────── */
.jt-btn          { font-weight: 600; border-radius: var(--jt-r-pill); }
.jt-btn-primary  { background: var(--jt-orange-500); border-color: var(--jt-orange-500); color: #fff; }
.jt-btn-primary:hover { background: var(--jt-orange-600); border-color: var(--jt-orange-600); color: #fff; }
.jt-btn-secondary { background: var(--jt-cream); border-color: var(--jt-line); color: var(--jt-ink); }
.jt-btn-secondary:hover { background: var(--jt-line); color: var(--jt-ink); }
.jt-btn-ghost    { background: transparent; border-color: var(--jt-line); color: var(--jt-ink-2); }
.jt-btn-ghost:hover { background: var(--jt-cream); color: var(--jt-ink); }
.jt-btn-sm       { padding: .375rem .875rem; font-size: .84rem; }

/* ── JtModal ────────────────────────────────────────────────────────────────── */
#jt-modal .modal-body { padding: 1rem; }
#jt-modal .modal-body.p-0 > * { padding: 1rem; }

/* X close button — มุมขวาบนของ header (ชัดเจน กดง่าย) */
.jt-modal-close {
    flex-shrink: 0;
    margin-left: auto;
    width: 38px; height: 38px;
    border: none; background: transparent;
    color: var(--jt-ink-2, #4a5759);
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.jt-modal-close:hover {
    background: var(--jt-paper, #f3f4f6);
    color: var(--jt-ink, #1A2B1F);
}
.jt-modal-close:focus-visible {
    outline: 2px solid var(--jt-orange, #F58220);
    outline-offset: 2px;
}

/* Preview partial shared styles — used by Post/Place/Community _Preview.cshtml */
.jt-preview-cover { overflow: hidden; border-radius: var(--jt-r-md); }
.jt-preview-cover img { width: 100%; height: 100%; }

/* ── Toast (site-wide) ──────────────────────────────────────────────────────── */
.jt-toast-container {
    position: fixed;
    bottom: 28px;
    right: 24px;
    z-index: 10000;
    display: flex;
    flex-direction: column;
    gap: 10px;
    pointer-events: none;
}
.jt-toast {
    background: var(--jt-ink);
    color: #fff;
    padding: 12px 22px;
    border-radius: var(--jt-r-md);
    box-shadow: var(--jt-shadow-lg);
    font-size: .9rem;
    font-weight: 500;
    transform: translateY(20px);
    opacity: 0;
    transition: transform .3s cubic-bezier(.175,.885,.32,1.275), opacity .3s ease;
    max-width: 320px;
}
.jt-toast.show   { transform: translateY(0); opacity: 1; }
.jt-toast--warn  { background: #c0392b; }
@media (max-width: 576px) {
    .jt-toast-container { right: 12px; left: 12px; }
    .jt-toast           { max-width: 100%; }
}

/* ── Likers modal list (shared component — community + post detail) ─────────── */
.jt-likers-list { margin: 0; padding: 0; }
.jt-liker-item { list-style: none; }
.jt-liker-item__link {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.5rem 1rem;
    text-decoration: none;
    color: var(--jt-text, #111827);
    border-radius: 0.5rem;
    transition: background 0.12s;
}
.jt-liker-item__link:hover { background: var(--jt-paper, #f3f4f6); color: var(--jt-text, #111827); }
.jt-liker-item__avatar {
    width: 36px; height: 36px;
    border-radius: 50%; object-fit: cover;
    flex-shrink: 0;
    background: var(--jt-paper, #f3f4f6);
}
.jt-liker-item__name { font-size: 0.875rem; font-weight: 500; }