* {
    box-sizing: border-box;
    padding: 0;
    margin: 0;
}

.bt-icon {
    display: inline-block;
    flex: 0 0 auto;
    font-size: var(--bt-icon-size);
    width: 1em;
    height: 1em;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
    fill: none;
}

.bt-icon--brand {
    stroke: none;
    fill: currentColor;
}

html,
body {
    background-color: var(--color-surface-page);
    scroll-behavior: auto;
    scrollbar-color: rgba(108, 117, 125, 0.75) transparent;
    scrollbar-width: thin;
    /* scrollbar-gutter: stable; */
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 4px !important;
    height: 4px !important;
    background: transparent;
}

html::-webkit-scrollbar-track,
body::-webkit-scrollbar-track {
    border: 0;
    background: transparent;
}

html::-webkit-scrollbar-thumb,
body::-webkit-scrollbar-thumb {
    border: 0;
    border-radius: 999px;
    background: rgba(108, 117, 125, 0.75);
}

html::-webkit-scrollbar-thumb:hover,
body::-webkit-scrollbar-thumb:hover {
    background: rgba(73, 80, 87, 0.9);
}

html::-webkit-scrollbar-corner,
body::-webkit-scrollbar-corner {
    background: transparent;
}

/* Reserve and calculate the native scrollbar while the opaque loader still covers
   the page, but keep its thumb invisible until the page reveal actually begins. */
html.is-preparing-page-scroll,
html.is-preparing-page-scroll body {
    scrollbar-color: transparent transparent;
}

html.is-preparing-page-scroll::-webkit-scrollbar-thumb,
html.is-preparing-page-scroll body::-webkit-scrollbar-thumb {
    background: transparent;
}

/* Nothing in the design is dark, so this only ever shows through a gap — during a
   resize, or as overscroll. Matching #stagewrap keeps such a gap invisible instead
   of flashing near-black. */
body {
    width: 100%;
    margin: 0;
    background-color: var(--color-surface-page);
    font-family: var(--font);
    overflow-x: hidden;
}

body.menu-open,
body.menu-closing {
    overflow: hidden;
}

body.is-loading {
    height: 100%;
    overflow: hidden;
}

.back-to-top {
    --back-to-top-progress: 0deg;

    position: fixed;
    right: max(var(--space-5), env(safe-area-inset-right));
    bottom: max(var(--space-5), env(safe-area-inset-bottom));
    z-index: 240;
    width: var(--touch-target-md);
    height: var(--touch-target-md);
    display: inline-grid;
    place-items: center;
    padding: 0;
    isolation: isolate;
    overflow: hidden;
    border: var(--border-width-1) solid var(--alpha-ink-12);
    border-radius: 50%;
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-surface-page) 88%, #ffffff);
    /* box-shadow: 0 var(--space-2) var(--space-6) var(--alpha-ink-16); */
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--space-3)) scale(0.94);
    transition:
        opacity var(--duration-standard) var(--ease-standard),
        transform var(--duration-standard) var(--ease-standard),
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard);

    &::before,
    &::after {
        content: '';
        position: absolute;
        border-radius: inherit;
        pointer-events: none;
    }

    &::before {
        inset: -1px;
        z-index: 0;
        background: var(--spectrum);
        -webkit-mask:
            radial-gradient(farthest-side, transparent calc(100% - var(--border-width-6)), #000 0),
            conic-gradient(from -90deg, #000 var(--back-to-top-progress), transparent 0);
        -webkit-mask-composite: source-in;
        mask:
            radial-gradient(farthest-side, transparent calc(100% - var(--border-width-6)), #000 0),
            conic-gradient(from -90deg, #000 var(--back-to-top-progress), transparent 0);
        mask-composite: intersect;
        opacity: 0;
    }

    &::after {
        inset: var(--space-1);
        z-index: 1;
        background: color-mix(in srgb, var(--color-surface-page) 88%, #ffffff);
    }

    .bt-icon {
        position: relative;
        z-index: 2;
        width: var(--bt-icon-size);
        height: var(--bt-icon-size);
        transform: rotate(-45deg);
        stroke-width: 2;
        opacity: 0;
        transition: opacity var(--duration-fast) var(--ease-standard);
    }

    &:hover {
        color: var(--color-surface-page);
        border-color: var(--color-text-primary);
        background: var(--color-text-primary);

        &::after {
            background: var(--color-text-primary);
        }
    }

    &:focus-visible {
        opacity: 1;
        pointer-events: auto;
        outline: var(--border-width-2) solid var(--color-accent-primary);
        outline-offset: var(--space-1);
    }
}

.back-to-top.is-progress {
    pointer-events: none;
    border-color: transparent;
    background: transparent;
    box-shadow: none;

    &::before {
        opacity: 1;
    }

    &::after {
        background: transparent;
    }
}

.back-to-top.is-ready {
    --back-to-top-progress: 360deg;

    animation: back-to-top-ready-pop var(--duration-slow) var(--ease-standard) both;

    .bt-icon {
        opacity: 1;
    }
}

@keyframes back-to-top-ready-pop {
    0% {
        transform: translateY(var(--space-4)) scale(0.82);
    }

    62% {
        transform: translateY(calc(var(--space-1) * -1)) scale(1.06);
    }

    100% {
        transform: translateY(0) scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .back-to-top.is-ready {
        animation: none;
    }
}

.back-to-top.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(0) scale(1);
}

.back-to-top.is-visible.is-progress {
    pointer-events: none;
}

body.is-loading .back-to-top,
body.menu-open .back-to-top,
body.menu-closing .back-to-top {
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--space-3)) scale(0.94);
}

/* ---------- Early Bird floating offer ----------
   ใช้ภาษาเดียวกับ section อื่นของเว็บ: การ์ดพื้นขาวเส้นขอบบาง คั่นแต่ละส่วนด้วยเส้น hairline
   (ไม่ซ้อนกล่องในกล่อง) ป้ายหัวเป็น eyebrow เซริฟตัวใหญ่แบบ .bt-section-subtext
   เส้นสเปกตรัมด้านบนคือแอคเซนต์เดียวกับเส้นใต้แท็บ ส่วนสีน้ำเงินเก็บไว้ที่ราคาอย่างเดียว
   เหมือนช่องราคาที่ถูกเลือกในตาราง Ticket */
.early-bird-float {
    position: fixed;
    right: max(var(--space-5), env(safe-area-inset-right));
    bottom: max(var(--space-5), env(safe-area-inset-bottom));
    z-index: 250;
    /* แถบหัวการ์ดดึงขอบด้วย margin ลบเท่าค่านี้ ประกาศเป็นตัวแปรเพื่อให้ทั้งสองค่าตรงกันเสมอ */
    --early-bird-float-pad: var(--space-4);

    width: auto;
    /* width: min(calc(100% - var(--space-12)), 280px); */
    padding: var(--early-bird-float-pad);
    overflow: hidden;
    border-radius: var(--radius-1);
    color: var(--color-text-primary);
    background: var(--color-surface-popover);
    box-shadow: 0 var(--space-3) var(--space-8) var(--alpha-ink-12);
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity var(--duration-standard) var(--ease-standard),
        transform var(--duration-standard) var(--ease-standard),
        box-shadow var(--duration-fast) var(--ease-standard);
}

/* พื้นหลังชุดเดียวกับ .ticket__plan-ribbon (คัดลอกค่ามาตรง ๆ) แล้วดึงเต็มขอบการ์ดด้วย margin ลบ
   เท่ากับ padding ของการ์ด ให้เป็นแถบคาดหัวการ์ดเหมือนริบบิ้นของแพ็กเกจ Ticket
   พื้นเข้มจึงต้องสลับสีตัวอักษรเป็นชุด inverse ตามที่ริบบิ้นทำ */
.early-bird-float__header {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    margin: calc(var(--early-bird-float-pad) * -1) calc(var(--early-bird-float-pad) * -1) 0;
    padding: var(--space-1) var(--space-2) var(--space-1) var(--space-4);
    color: var(--color-text-inverse);
    background: linear-gradient(180deg, #19274A 0%, #020B1E 100%);
    border-radius: var(--radius-1) var(--radius-1) var(--radius-0) var(--radius-0);
}

/* แสงทองและเส้นเรืองด้านบน คัดลอกจาก .ticket__plan-ribbon ทั้งชุด
   ต้องมี position/isolation/overflow ที่ตัวแถบ (ด้านบน) เหมือนริบบิ้น
   ไม่งั้น z-index: -1 จะหลุดไปอยู่หลังพื้นการ์ดและ glow จะไม่ถูกตัดขอบ */
.early-bird-float__header::before,
.early-bird-float__header::after {
    content: "";
    position: absolute;
    pointer-events: none;
}

.early-bird-float__header::before {
    inset: calc(var(--space-4) * -1) var(--space-8) auto;
    z-index: -1;
    height: calc(100% + var(--space-8));
    background:
        radial-gradient(ellipse at 50% 0%, rgba(244, 221, 178, 0.3) 0%, rgba(214, 171, 104, 0.16) 36%, transparent 74%);
    filter: blur(10px);
    opacity: 0.94;
}

.early-bird-float__header::after {
    top: 0;
    left: 50%;
    z-index: -1;
    width: min(72%, 280px);
    height: var(--border-width-1);
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(244, 221, 178, 0.18) 14%,
            rgba(231, 201, 151, 0.82) 50%,
            rgba(214, 171, 104, 0.22) 86%,
            transparent 100%);
    box-shadow:
        0 0 14px rgba(231, 201, 151, 0.34),
        0 0 24px rgba(214, 171, 104, 0.16);
    opacity: 0.86;
    transform: translateX(-50%);
}

.early-bird-float__offer {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    color: inherit;
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-small-line-height);
}

/* ป้ายส่วนลดชุดเดียวกันใช้ซ้ำหลังราคาเดิมในการ์ด Ticket และท้ายป้ายปุ่มซื้อบัตรบน Hero (js/hero-v2-cta.js)
   (selector ของ Ticket ต้องเจาะจงพอชนะ .ticket__price span ที่ย่อ/ขยายฟอนต์ตาม breakpoint) */
.early-bird-float__discount,
.ticket .ticket__price .ticket__price-save,
.hero-cta__save {
    display: inline-block;
    padding: 6px var(--space-2);
    border-radius: var(--radius-1);
    color: var(--color-neutral-0);
    background: var(--color-danger-600);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
    line-height: 1;
    white-space: nowrap;
}

/* ชุดเดียวกับ .cookie-banner__dismiss (คัดลอกค่ามาตรง ๆ) */
.early-bird-float__toggle {
    width: var(--space-10);
    height: var(--space-10);
    padding: 0;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: var(--radius-round);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

/* ปุ่มอยู่บนแถบหัวพื้นเข้ม สีชุดของ cookie banner (หมึกบนพื้นสว่าง) จะจมหายไป
   จึงสลับเป็นชุด inverse เฉพาะสี ส่วนขนาด/รูปทรง/จังหวะ transition คงตามต้นฉบับ */
.early-bird-float__header .early-bird-float__toggle {
    color: var(--color-text-inverse);
}

.early-bird-float__toggle:hover {
    color: var(--color-text-primary);
    /* background: var(--alpha-ink-06); */
}

/* hover ของต้นฉบับเป็นฟิล์มหมึกจาง ๆ บนพื้นสว่าง บนแถบเข้มจึงใช้ฟิล์มขาวแทนให้เห็นผลเหมือนกัน */
.early-bird-float__header .early-bird-float__toggle:hover {
    color: var(--color-text-inverse);
    /* background: var(--alpha-white-12); */
}

.early-bird-float__toggle:focus-visible {
    outline: var(--border-width-2) solid var(--color-focus-ring);
    outline-offset: var(--space-1);
}

.early-bird-float__toggle-icon {
    width: var(--space-2);
    height: var(--space-2);
    border-right: var(--border-width-2) solid currentColor;
    border-bottom: var(--border-width-2) solid currentColor;
    transform: rotate(45deg);
    transition: transform var(--duration-standard) var(--ease-standard);
}

.early-bird-float__body {
    max-height: 360px;
    margin-top: var(--space-3);
    overflow: hidden;
    opacity: 1;
    transition:
        max-height var(--duration-slow) var(--ease-standard),
        margin-top var(--duration-standard) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard);
}

/* ชื่อบัตร (ซ้าย) กับราคา (ขวา) วางคู่กันในแถวเดียว ส่วนที่เหลือกินความกว้างเต็ม
   วางตำแหน่งทุกชิ้นชัดเจน ไม่พึ่ง auto-placement เพื่อไม่ให้ลำดับใน HTML ทำให้ช่องเพี้ยน */
/* คอลัมน์ซ้ายกว้างเท่าข้อความที่ยาวที่สุดในบล็อกชื่อบัตร (บัตร ULTIMATE) พอดี
   พื้นที่ที่เหลือไปอยู่ในคอลัมน์ราคา ซึ่งจัดราคาชิดขวาไว้ ตำแหน่งที่เห็นจึงเหมือนเดิม */
.early-bird-float__body-inner {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    column-gap: var(--space-3);
}

.early-bird-float__plan-name {
    grid-area: 1 / 1;
}

/* ราคาอยู่แถวเดียวกับบล็อกชื่อบัตร ชิดขวา */
.early-bird-float__price {
    grid-area: 1 / 2;
    justify-self: end;
    align-self: self-start;
    align-items: flex-end;
}

.early-bird-float__countdown-label,
.early-bird-float__countdown,
.early-bird-float__action {
    grid-column: 1 / -1;
}

.early-bird-float__countdown-label {
    padding-top: var(--space-3);
    border-top: var(--rule-width-subtle) solid var(--color-border-faint);
}

/* ชื่อแพ็กเกจใช้ค่าเดียวกับหัวการ์ด Ticket: .ticket__plan-index (คำว่า "บัตร") และ .ticket__plan-header h3 (ULTIMATE)
   "บัตร" เป็น span ใน <p> ชื่อบัตร แต่แสดงเป็นบรรทัดของตัวเองด้านบน ULTIMATE
   จึงต้องคืนฟอนต์/ระยะตัวอักษรของตัวเอง ไม่รับ Baskervville กับ tracking ของชื่อบัตร */
.early-bird-float__plan-index {
    margin: var(--space-0) var(--space-0) var(--space-1);
    display: block;
    font-family: var(--font);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-small-line-height);
    letter-spacing: 0;
    text-transform: uppercase;
}

.early-bird-float__plan-name {
    margin: 0;
    font-family: 'Baskervville', var(--font-family-base);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-regular);
    /* 1.2 เท่ากับที่หัวการ์ด Ticket คำนวณได้ (h3 รับค่ามาจากกฎหัวข้อรวม) */
    line-height: 1.2;
    letter-spacing: var(--section-heading-tracking);
    text-transform: uppercase;
}

/* จำนวนวันต่อท้าย ULTIMATE ในบรรทัดเดียวกัน ตัวเล็กกว่าเพื่อไม่แย่งน้ำหนักกับชื่อบัตร */
.early-bird-float__plan-name small {
    font-family: var(--font);
    letter-spacing: 0;
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    padding-left: var(--space-1);
}

/* จำนวนวัน ราคาเดิม และราคา Early Bird อยู่บรรทัดเดียวกัน เรียงตามเส้นฐานตัวอักษร
   ขนาดของแต่ละชิ้นยังเท่ากับช่องราคาที่ถูกเลือกในตาราง Ticket (.ticket__price.is-active) */
.early-bird-float__price {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    /* ชิดขวาเพราะบล็อกราคาอยู่ฝั่งขวาของชื่อบัตร ราคาเดิมกับราคาใหม่จะได้ตรงขอบขวาเดียวกัน */
    align-items: flex-end;
    gap: var(--space-0);
    font-variant-numeric: tabular-nums;
}

/* = .ticket__price-day */
/* = .ticket__price-original */
.early-bird-float__price del {
    color: var(--color-text-inverse-muted);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-small-line-height);
    text-decoration-thickness: var(--border-width-1);
    margin-bottom: 2px;
}

/* = .ticket__price strong ที่สถานะ is-active (ราคาเดิมอยู่ก่อนหน้า จึงไม่มี margin-top เหมือนกฎ .ticket__price-original+strong) */
.early-bird-float__price strong {
    color: var(--color-blue-600);
    font-size: 22px;
    font-weight: var(--font-weight-medium);
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
}

/* = หน่วยเงินใน .ticket__price strong small */
.early-bird-float__price strong small {
    color: var(--color-text-muted);
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-medium);
}

.early-bird-float__countdown-label {
    margin: var(--space-3) 0 0;
    color: var(--color-text-muted);
    font-size: 10px;
    line-height: var(--section-small-line-height);
}

.early-bird-float__countdown {
    display: grid;
    margin-top: var(--space-3);
    font-variant-numeric: tabular-nums;
}

/* กลไกเดียวกับ countdown ใน hero: คอลัมน์กว้างเท่ากัน ตัวเลขกับหน่วยอยู่กลางคอลัมน์
   และเส้นคั่นอยู่กลางช่องไฟพอดี (ดู ::after ด้านล่าง) ระยะสองข้างเส้นจึงเท่ากัน */
.early-bird-float__countdown-values {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--space-6);
}

.early-bird-float__countdown-unit {
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: var(--space-1);
}

/* เส้น-ดาวคั่นตัวเลขชุดเดียวกับ countdown ใน hero (หมุนตั้งเหมือนกัน)
   left: 100% + ครึ่งหนึ่งของ gap แล้วเลื่อนกลับครึ่งตัวเอง = จุดกึ่งกลางช่องไฟเป๊ะ */
.early-bird-float__countdown-unit:not(:last-child)::after {
    content: '';
    position: absolute;
    top: 50%;
    /* ครึ่งหนึ่งของ gap (space-6) เส้นคั่นจึงอยู่กลางช่องไฟพอดี — เปลี่ยน gap ต้องเปลี่ยนค่านี้ตาม */
    left: calc(100% + var(--space-3));
    width: var(--space-10);
    height: calc(var(--space-10) / var(--bt-hero-countdown-divider-ratio));
    background: url('../images/line-star-countdown.webp') center / contain no-repeat;
    transform: translate(-50%, -50%) rotate(90deg);
    transform-origin: center;
}

.early-bird-float__countdown-unit strong {
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-medium);
    line-height: 1;
}

.early-bird-float__countdown-unit small {
    color: var(--color-text-muted);
    font-size: 10px;
    font-weight: var(--font-weight-regular);
    line-height: 1;
}

.early-bird-float__countdown-status {
    display: none;
    min-height: var(--space-8);
    align-items: center;
    color: var(--color-text-secondary);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-regular);
    line-height: 1.3;
}

.early-bird-float__countdown.is-status .early-bird-float__countdown-values {
    display: none;
}

.early-bird-float__countdown.is-status .early-bird-float__countdown-status {
    display: flex;
}

/* ความสูง/padding มาจาก .bt-action-button--sm ของระบบ ส่วนฟอนต์ย่อเหลือ 12px เฉพาะปุ่มนี้
   (ผูก selector กับ --sm ไว้เพื่อให้ชนะกฎของระบบ โดยไม่แตะปุ่ม --sm อื่นในหน้า) */
.early-bird-float__action {
    width: 100%;
    margin-top: var(--space-4);
}

.early-bird-float__action.bt-action-button--sm {
    font-size: var(--font-size-12);
}

/* Match the solid black treatment used by the Ultimate ticket action. */
.early-bird-float__action.bt-action-button--primary {
    border-color: var(--bt-action-fill);
    background: var(--bt-action-fill);
}

/* ย่อแล้วเหลือแค่แถบหัว ตัด padding ล่างออกไม่ให้มีแถบพื้นขาวค้างใต้ริบบิ้น */
.early-bird-float.is-collapsed {
    padding-bottom: 0;
    box-shadow: 0 var(--space-2) var(--space-6) var(--alpha-ink-12);
}

.early-bird-float.is-collapsed .early-bird-float__body {
    max-height: 0;
    margin-top: 0;
    opacity: 0;
    pointer-events: none;
}

.early-bird-float.is-collapsed .early-bird-float__toggle-icon {
    transform: rotate(225deg);
}

body.is-loading .early-bird-float,
body.menu-open .early-bird-float,
body.menu-closing .early-bird-float {
    opacity: 0;
    pointer-events: none;
    transform: translateY(var(--space-4));
}

/* Keep Back to top above the offer while preserving its original visibility logic. */
@media (min-width:576px) {
    .back-to-top {
        right: max(var(--space-5), env(safe-area-inset-right));
        bottom: calc(max(var(--space-5), env(safe-area-inset-bottom)) + var(--early-bird-float-height, 246px) + var(--space-3));
    }
}

@media (max-width:575px) {
    .early-bird-float {
        right: 50%;
        bottom: calc(var(--space-10) + var(--space-6) + max(var(--space-3), env(safe-area-inset-bottom)));
        transform: translateX(50%);
        width: calc(100% - var(--space-24));
    }

    /* JS keeps this height variable in sync while the offer expands and collapses. */
    .back-to-top {
        right: max(var(--space-3), env(safe-area-inset-right));
        bottom: calc(var(--space-10) + var(--space-6) + max(var(--space-3), env(safe-area-inset-bottom)) + var(--early-bird-float-height, 58px) + var(--space-3));
    }
}

@media (max-width:359px) {
    .early-bird-float {
        --early-bird-float-pad: var(--space-3);
    }

    .early-bird-float__price strong {
        font-size: var(--font-size-24);
    }
}

@media (prefers-reduced-motion: reduce) {

    .early-bird-float,
    .early-bird-float__body,
    .early-bird-float__toggle-icon {
        transition-duration: var(--duration-reduced);
    }

}

/* Temporary preview control for comparing the two desktop Hero continuations. */
.hero-motion-picker {
    position: fixed;
    right: max(var(--space-5), env(safe-area-inset-right));
    bottom: calc(max(var(--space-5), env(safe-area-inset-bottom)) + var(--touch-target-md) + var(--space-3));
    z-index: 280;
}

.hero-motion-picker__trigger {
    width: var(--touch-target-md);
    height: var(--touch-target-md);
    display: inline-grid;
    place-items: center;
    padding: 0;
    border: var(--border-width-1) solid var(--alpha-ink-12);
    border-radius: 50%;
    color: var(--color-text-primary);
    background: color-mix(in srgb, var(--color-surface-page) 88%, #ffffff);
    box-shadow: 0 var(--space-2) var(--space-6) var(--alpha-ink-16);
    cursor: pointer;
    appearance: none;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        border-color var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.hero-motion-picker__trigger span {
    font-family: var(--font);
    font-size: var(--font-size-18);
    line-height: 1;
    transition: transform var(--duration-standard) var(--ease-standard);
}

.hero-motion-picker__trigger:hover,
.hero-motion-picker.is-open .hero-motion-picker__trigger {
    border-color: var(--color-text-primary);
    color: var(--color-surface-page);
    background: var(--color-text-primary);
}

.hero-motion-picker.is-open .hero-motion-picker__trigger span {
    transform: rotate(180deg);
}

.hero-motion-picker__trigger:focus-visible,
.hero-motion-picker__option:focus-visible {
    outline: var(--border-width-2) solid var(--color-accent-primary);
    outline-offset: var(--space-1);
}

.hero-motion-picker__panel {
    position: absolute;
    right: 0;
    bottom: calc(100% + var(--space-3));
    width: 236px;
    padding: var(--space-3);
    border: var(--border-width-1) solid rgba(255, 255, 255, 0.18);
    border-radius: var(--radius-3);
    color: var(--color-neutral-0);
    background: rgba(8, 11, 18, 0.94);
    box-shadow: 0 var(--space-3) var(--space-8) rgba(0, 0, 0, 0.28);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transform: translateY(var(--space-2)) scale(0.97);
    transform-origin: 100% 100%;
    transition:
        opacity var(--duration-fast) var(--ease-standard),
        visibility 0s linear var(--duration-fast),
        transform var(--duration-fast) var(--ease-standard);
}

.hero-motion-picker.is-open .hero-motion-picker__panel {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translateY(0) scale(1);
    transition-delay: 0s;
}

.hero-motion-picker__eyebrow {
    display: block;
    padding: var(--space-1) var(--space-2) var(--space-3);
    color: rgba(255, 255, 255, 0.56);
    font-family: var(--font);
    font-size: 10px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.hero-motion-picker__option {
    width: 100%;
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-2);
    border: 0;
    border-radius: var(--radius-2);
    color: rgba(255, 255, 255, 0.76);
    background: transparent;
    cursor: pointer;
    text-align: left;
    appearance: none;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.hero-motion-picker__option:hover {
    color: var(--color-neutral-0);
    background: rgba(255, 255, 255, 0.08);
}

.hero-motion-picker__option.is-selected {
    color: var(--color-neutral-0);
    background: rgba(255, 255, 255, 0.11);
}

.hero-motion-picker__option strong,
.hero-motion-picker__option small {
    display: block;
    font-family: var(--font);
}

.hero-motion-picker__option strong {
    font-size: var(--font-size-14);
    font-weight: 500;
    line-height: 1.15;
}

.hero-motion-picker__option small {
    margin-top: var(--space-1);
    color: rgba(255, 255, 255, 0.52);
    font-size: 10px;
    font-weight: 400;
    line-height: 1.2;
}

.hero-motion-picker__status {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.26);
}

.hero-motion-picker__option.is-selected .hero-motion-picker__status {
    background: var(--color-kv-spectrum-1);
    box-shadow: 0 0 0 3px rgba(0, 212, 254, 0.16);
}

.hero-motion-picker__check {
    opacity: 0;
    font-family: var(--font);
    font-size: var(--font-size-14);
}

.hero-motion-picker__option.is-selected .hero-motion-picker__check {
    opacity: 1;
}

body.is-loading .hero-motion-picker,
body.menu-open .hero-motion-picker,
body.menu-closing .hero-motion-picker {
    opacity: 0;
    pointer-events: none;
}

@media (max-width:1199px) {
    .hero-motion-picker {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-motion-picker__trigger,
    .hero-motion-picker__trigger span,
    .hero-motion-picker__panel,
    .hero-motion-picker__option {
        transition: none;
    }
}

/* ป้าย SAVE 30% เกาะมุมบนขวาของปุ่มซื้อบัตรบน Hero แบบกล่องคำพูด หางชี้ลงหาปุ่ม
   ไม่รับการคลิก เพื่อให้พื้นที่กดของปุ่มใต้ป้ายยังใช้ได้ */
#cta-slot .hero-cta__save {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
    transform: translate(var(--space-3), -50%);
    pointer-events: none;
}

/* #cta-slot .hero-cta__save::after {
    content: "";
    position: absolute;
    top: calc(100% - 1px);
    left: 40%;
    border-width: 6px 5px 0;
    border-style: solid;
    border-color: var(--color-danger-600) transparent transparent;
} */

/* ---------- แถบปุ่มลอยชิดขอบล่าง (จอ <=575px เท่านั้น) ---------- */
.mobile-cta-bar {
    display: none;
}

@media (max-width:575px) {
    #cta-slot {
        display: none;
    }

    .mobile-cta-bar {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-3);
        position: fixed;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 220;
        padding: var(--space-3) var(--space-4) max(var(--space-3), env(safe-area-inset-bottom));
        background: var(--color-surface-page);
        box-shadow: 0 calc(var(--space-1) * -1) var(--space-6) var(--alpha-ink-12);
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
        transition:
            opacity var(--duration-standard) var(--ease-standard),
            transform var(--duration-standard) var(--ease-standard);

        /* padding แคบกว่า --xl ปกติ เพื่อให้ปุ่มสองตัวเรียงกันได้ครบบนจอ 360px
           โดยยังคงขนาดตัวอักษร 16px ไว้ (ต่างจากปุ่มบนแถบ header ที่ย่อเหลือ 14px) */
        .bt-action-button--header {
            padding-inline: var(--space-4);
        }

        /* .bt-action-button {
            flex: 1;
        } */
    }

    .mobile-cta-bar.is-visible {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0);
    }

    body.is-loading .mobile-cta-bar,
    body.menu-open .mobile-cta-bar,
    body.menu-closing .mobile-cta-bar {
        opacity: 0;
        pointer-events: none;
        transform: translateY(100%);
    }

    /* วางเหนือทั้งแถบ CTA และกล่อง Early Bird โดย JS อัปเดตความสูงกล่องให้ตรงกับสถานะ */
    .back-to-top {
        bottom: calc(var(--space-10) + var(--space-6) + max(var(--space-3), env(safe-area-inset-bottom)) + var(--early-bird-float-height, 72px) + var(--space-3));
    }
}

p {
    font-family: var(--font);
}

h1,
h2,
h3,
h4,
h5,
h6,
.headline {
    font-family: var(--headline);
    letter-spacing: 0;
}

button,
a {
    -webkit-tap-highlight-color: transparent;
}

button {
    font-family: var(--font);
}

/* ---------- reusable section title responsive ----------
   ใช้เป็น media ของ component กลางที่ถูกเรียกในหลาย section
   จึงวางไว้ช่วงต้นไฟล์แทนการกระจายไว้ท้ายไฟล์ */
@media (max-width:991px) {
    section[aria-labelledby] h2.bt-section-title {
        --bt-section-title-size: var(--font-size-40);
        font-size: var(--bt-section-title-size);
    }
}

@media (max-width:767px) {
    section[aria-labelledby] h2.bt-section-title {
        --bt-section-title-size: var(--font-size-32);
        font-size: var(--bt-section-title-size);
    }
}

@media (max-width:575px) {
    section[aria-labelledby] h2.bt-section-title {
        --bt-section-title-size: var(--font-size-28);
        font-size: var(--bt-section-title-size);
    }
}

/* ---------- global header ----------
    Fixed for its whole life (not just once "sticky") so it can float over the
    pinned hero from frame one. Visibility has three phases, driven by scroll
    position in the header script below: shown while the CTA/date/venue block is
    still up, hidden once that block has faded out, shown again (sticky) only once
    the hero's scroll-pin has fully released into the next section. */
.site-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 200;
    min-height: var(--header-height);
    background: transparent;
    border: 0;
    opacity: 1;
    transform: translateY(0);
    transition: opacity 520ms cubic-bezier(0.16, 1, 0.3, 1),
        transform 520ms cubic-bezier(0.16, 1, 0.3, 1),
        background-color 320ms ease;
}

.site-header,
.site-header a,
.site-header button {
    font-family: var(--headline);
}

.site-header.is-hidden {
    opacity: 0;
    transform: translateY(-100%);
    pointer-events: none;
}

body.menu-open .site-header,
body.menu-closing .site-header,
body.menu-open .site-header.is-sticky.site-header--on-dark,
body.menu-closing .site-header.is-sticky.site-header--on-dark {
    background: var(--bt-header-bg);
    opacity: 1;
    transform: none;
    pointer-events: auto;
    /* The header may currently be translated off-screen by the hero scroll state.
       Snap it back before Safari lays out the fixed menu; animating that transform
       temporarily makes the menu use the 80px header as its containing block. */
    transition: none;
}

.site-header__inner {
    width: min(calc(100% - var(--space-12)), 1460px);
    min-height: var(--header-height);
    margin: 0 auto;
    display: grid;
    grid-template-columns: minmax(152px, 0.7fr) auto minmax(288px, 0.7fr);
    align-items: center;
    gap: var(--space-8);
}

.site-header.is-sticky {
    background: var(--bt-header-bg);
}

/* ทับด้วยพื้นมืดตอนที่ section พื้นสีดำ (data-header-theme="dark") อยู่ใต้ header พอดี
   ใช้เฉดเดียวกับพื้นหลังของ section นั้น แถบ header จึงกลืนไปกับเนื้อหาแทนที่จะเป็น
   แถบขาวคาดทับ ตัวอักษร/โลโก้สลับเป็นเวอร์ชันพื้นมืดอยู่แล้วผ่าน .site-header--on-dark */
.site-header.is-sticky.site-header--on-dark {
    background: var(--bt-header-bg-on-dark);
}

.site-header.is-sticky .site-header__inner {
    width: 100%;
}

.site-header__logo {
    width: 120px;
    position: relative;
    display: flex;
    align-items: center;
}

.site-header__logo img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    object-position: left center;
}

.site-header:not(.is-sticky) .site-header__logo img {
    filter: drop-shadow(0 0px 4px rgba(0, 0, 0, 0.5));
}

.site-header__logo-image--on-dark {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 180ms ease;
}

.site-header--on-dark .site-header__logo-image--on-dark,
.site-header--hero-sky:not(.is-sticky) .site-header__logo-image--on-dark {
    opacity: 1;
}

.site-header__nav {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-10);
    min-width: 0;
}

/* Marks the nav's own footprint as "dark" only while the hero's sky is the
   visible backdrop (toggled in hero-v2-header.js). Tagged data-header-theme="dark"
   so setupHeaderThemeObserver's IntersectionObserver counts the hero-sky phase
   toward .site-header--on-dark, same as any real dark section. */
.site-header__nav-sky-sensor {
    display: none;
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.site-header--hero-sky .site-header__nav-sky-sensor {
    display: block;
}

.site-header--hero-sky:not(.is-sticky) .site-header__nav a {
    color: rgba(255, 255, 255, 0.86);
    text-shadow: 0 1px 3px rgba(4, 12, 24, 0.42);
}

.site-header__nav a {
    position: relative;
    min-height: var(--space-10);
    padding: 0 var(--space-1);
    display: grid;
    place-items: center;
    color: var(--bt-header-nav-ink);
    text-decoration: none;
    font-size: var(--font-size-16);
    text-transform: uppercase;
    white-space: nowrap;
    transition:
        color 180ms ease,
        opacity 180ms ease,
        text-shadow 180ms ease;
}

.site-header__nav-label {
    transition: color 180ms ease;
}

.site-header--on-dark .site-header__nav a {
    color: rgba(255, 255, 255, 0.82);
}

.site-header__nav a::after {
    content: '';
    position: absolute;
    left: var(--space-1);
    right: var(--space-1);
    bottom: 0;
    height: 2px;
    background: var(--spectrum);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.site-header__nav a:hover {
    opacity: 0.64;
}

.site-header__nav a:focus-visible {
    color: var(--bt-header-nav-ink-hover);
}

.site-header--on-dark .site-header__nav a:focus-visible {
    color: var(--bt-header-nav-ink-on-dark-hover);
}

.site-header__nav a:hover::after,
.site-header__nav a:focus-visible::after,
.site-header__nav a[aria-current='page']::after {
    transform: scaleX(1);
}

.site-header__actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: var(--space-2);
}

.site-header__primary-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* ปุ่มใน header ใช้สเกลเล็กกว่า --xl ปกติ เพราะต้องแชร์แถวเดียวกับโลโก้และ nav
   ทั้งแถบ ถ้าคงไว้ที่ 16px ป้าย "ซื้อบัตร Early Bird" จะดันจนตัวหนังสือของ
   INVESTOR DNA ขาด (js/hero-v2-cta.js mount ปุ่ม liquid metal ด้วยสเกลเดียวกัน) */
.site-header .bt-action-button--header {
    padding-inline: var(--space-4);
    font-size: var(--font-size-14);
}

.site-header .bt-action-button--primary {
    --bt-action-fill: var(--color-text-primary);

    border-color: transparent;
    color: var(--color-surface-soft);
    background:
        linear-gradient(var(--bt-action-fill), var(--bt-action-fill)) padding-box,
        var(--gradient-accent-spectrum) border-box;

    &:hover,
    &:focus-visible {
        --bt-action-fill: var(--color-text-secondary);

        color: var(--color-neutral-0);
        background:
            linear-gradient(var(--bt-action-fill), var(--bt-action-fill)) padding-box,
            var(--gradient-accent-spectrum) border-box;
    }
}

.site-header__toggle {
    width: var(--bt-menu-toggle-size);
    height: var(--bt-menu-toggle-size);
    padding: 0;
    display: none;
    place-items: center;
    border: 0;
    border-radius: 0;
    color: var(--bt-menu-ink);
    background: transparent;
    cursor: pointer;
    appearance: none;
    box-shadow: none;
    transition: color var(--bt-duration-fast) ease;
}

.site-header--on-dark .site-header__toggle {
    color: var(--bt-menu-toggle-ink-on-dark);
}

.site-header__toggle-lines {
    position: relative;
    width: var(--bt-menu-toggle-lines-width);
    height: var(--bt-menu-toggle-lines-height);
}

.site-header__toggle-lines span {
    position: absolute;
    left: 0;
    width: var(--bt-menu-toggle-lines-width);
    height: var(--bt-menu-toggle-line-height);
    background: currentColor;
    transition:
        transform var(--bt-duration-base) var(--bt-ease-standard),
        top var(--bt-duration-base) ease,
        opacity var(--bt-duration-fast) ease;
}

.site-header__toggle-lines span:nth-child(1) {
    top: 0;
}

.site-header__toggle-lines span:nth-child(2) {
    top: var(--bt-menu-toggle-line-middle);
}

.site-header__toggle-lines span:nth-child(3) {
    top: var(--bt-menu-toggle-line-bottom);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-lines span:nth-child(1) {
    top: var(--bt-menu-toggle-line-middle);
    transform: rotate(45deg);
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-lines span:nth-child(2) {
    opacity: 0;
}

.site-header__toggle[aria-expanded='true'] .site-header__toggle-lines span:nth-child(3) {
    top: var(--bt-menu-toggle-line-middle);
    transform: rotate(-45deg);
}

.site-header__mobile {
    position: fixed;
    inset: 0;
    z-index: 196;
    padding-top: var(--header-height);
    background: var(--bt-menu-bg);
    font-family: var(--headline);
    visibility: hidden;
    pointer-events: none;
    clip-path: inset(0 0 100% 0);
    transition:
        clip-path var(--bt-menu-transition-duration) var(--bt-menu-transition-ease),
        visibility 0s linear var(--bt-menu-visibility-delay);
    will-change: clip-path;
}

.site-header__mobile a {
    font-family: var(--headline);
}

.site-header__mobile-scroll {
    width: min(100%, var(--bt-menu-panel-max-width));
    height: calc(100vh - var(--header-height));
    height: calc(100dvh - var(--header-height));
    margin: 0 auto;
    padding: var(--bt-menu-scroll-padding-y) var(--bt-menu-scroll-padding-x) max(var(--bt-menu-scroll-padding-bottom), env(safe-area-inset-bottom));
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none;
    opacity: 0;
    transition: opacity var(--bt-menu-content-fade-duration) ease;
}

.site-header__mobile-scroll::-webkit-scrollbar {
    display: none;
}

.site-header__mobile-eyebrow,
.site-header__mobile-label {
    margin: 0;
    color: var(--bt-menu-muted);
    font-size: var(--bt-menu-label-size);
    font-weight: var(--bt-menu-label-weight);
    line-height: 1;
    text-transform: uppercase;
}

.site-header__mobile-eyebrow {
    padding-bottom: var(--bt-menu-sponsor-padding-top);
}

.site-header__mobile-nav {
    padding-bottom: var(--space-6);
}

.site-header__mobile-nav a {
    min-height: var(--bt-menu-nav-link-height);
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: var(--bt-menu-ink);
    text-decoration: none;
    font-size: var(--bt-menu-nav-font-size-sm);
    font-weight: var(--bt-font-weight-regular);
    line-height: var(--bt-menu-nav-line-height);
    letter-spacing: var(--bt-menu-nav-tracking);
    text-transform: uppercase;
    transition:
        color var(--bt-menu-link-transition-duration) ease,
        padding-left var(--bt-menu-link-indent-duration) var(--bt-ease-standard);
}

.site-header__mobile-nav a:hover,
.site-header__mobile-nav a:focus-visible {
    color: var(--bt-menu-ink-hover);
    padding-left: var(--bt-menu-nav-hover-indent);
}

.site-header__mobile-nav-index {
    align-self: flex-start;
    margin-top: var(--bt-menu-index-offset-y);
    color: var(--bt-menu-index);
    font-size: var(--bt-menu-index-size);
    font-weight: var(--bt-menu-label-weight);
    line-height: 1;
    letter-spacing: var(--bt-menu-index-tracking);
}

.site-header__mobile-actions {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: var(--bt-menu-actions-gap);
    padding: var(--bt-menu-actions-padding-y) 0;
}

.site-header__mobile-footer {
    padding-top: var(--bt-menu-footer-padding-top);
    display: flex;
    flex-wrap: wrap;
    gap: var(--bt-menu-footer-gap);
    border-top: var(--bt-border-width-1) solid var(--bt-menu-line);
}

.site-header__mobile-contact {
    min-width: calc(50% - var(--bt-menu-footer-gap));
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--bt-menu-contact-gap);
}

.site-header__mobile-contact--primary {
    width: 100%;
}

.site-header__mobile-contact-grid {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: var(--space-4);
    row-gap: var(--space-3);
}

.site-header__mobile-contact a {
    max-width: 100%;
    color: var(--bt-menu-ink);
    font-size: var(--bt-menu-contact-font-size);
    line-height: var(--bt-menu-contact-line-height);
    text-decoration: underline;
    text-decoration-color: var(--bt-menu-link-underline);
    text-underline-offset: var(--bt-menu-contact-underline-offset);
    overflow-wrap: anywhere;
}

.site-header__mobile-contact-grid a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.site-header__mobile-contact-grid .bt-icon {
    flex: 0 0 auto;
    width: var(--bt-icon-size);
    height: var(--bt-icon-size);
    color: var(--bt-menu-index);
    stroke-width: 1.8;
}

.site-header__mobile-contact-grid span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-header__mobile-contact--sponsor {
    width: 100%;
    grid-column: 1 / -1;
    padding-top: var(--bt-menu-sponsor-padding-top);
    border-top: var(--bt-border-width-1) solid var(--bt-menu-line-soft);
}

.site-header__mobile-sponsor-list {
    width: 100%;
    display: grid;
    grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
    column-gap: var(--space-4);
    row-gap: var(--space-3);
}

.site-header__mobile-sponsor {
    display: grid;
    gap: var(--space-2);
}

.site-header__mobile-sponsor-name {
    margin: 0 0 var(--space-1);
    color: var(--bt-menu-ink);
    font-size: var(--bt-menu-contact-font-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--bt-menu-contact-line-height);
}

.site-header__mobile-sponsor-name span {
    color: var(--bt-menu-muted);
}

.site-header__mobile-sponsor a {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    text-decoration: none;
}

.site-header__mobile-sponsor .bt-icon {
    flex: 0 0 auto;
    width: var(--bt-icon-size);
    height: var(--bt-icon-size);
    color: var(--bt-menu-index);
    stroke-width: 1.8;
}

.site-header__mobile-sponsor a span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.site-header__backdrop {
    position: fixed;
    inset: 0;
    z-index: 190;
    display: none;
    border: 0;
    background: var(--bt-menu-line);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--bt-menu-content-fade-duration) ease;
}

body.menu-open .site-header__mobile {
    padding-bottom: var(--space-1);
    visibility: visible;
    pointer-events: auto;
    clip-path: inset(0);
    transition:
        clip-path var(--bt-menu-transition-duration) var(--bt-menu-transition-ease),
        visibility 0s;
}

body.menu-closing .site-header__mobile {
    visibility: visible;
    transition-delay: var(--bt-menu-closing-delay), 0s;
}

body.menu-open .site-header__mobile-scroll {
    opacity: 1;
    transition-delay: var(--bt-menu-content-open-delay);
}

body.menu-closing .site-header__mobile-scroll {
    opacity: 0;
    transition-delay: 0s;
}

body.menu-open .site-header__inner,
body.menu-closing .site-header__inner {
    border-bottom-color: var(--bt-menu-line);
}

body.menu-open .site-header__logo img,
body.menu-closing .site-header__logo img,
body.menu-closing .site-header--on-dark .site-header__logo img,
body.menu-open .site-header--on-dark .site-header__logo img {
    filter: none;
}

body.menu-open .site-header__logo-image--on-dark,
body.menu-closing .site-header__logo-image--on-dark,
/* .site-header--hero-sky:not(.is-sticky) ... มี specificity (0,3,0) สูงกว่า
   body.menu-open ... (0,2,1) เฉย ๆ ต้องเติมตัวคู่แข่งเข้ามาตรง ๆ ไม่งั้นโลโก้เวอร์ชัน
   บนพื้นมืด (ขาว) จะค้างโชว์ทับเมนูพื้นขาวจนมองไม่เห็น (เจอตอนเปิดเมนูค้างอยู่ที่หัวเฮโร่) */
body.menu-open .site-header--hero-sky:not(.is-sticky) .site-header__logo-image--on-dark,
body.menu-closing .site-header--hero-sky:not(.is-sticky) .site-header__logo-image--on-dark {
    opacity: 0;
}

body.menu-open .site-header__toggle,
body.menu-closing .site-header__toggle,
body.menu-open .site-header--hero-sky:not(.is-sticky) .site-header__toggle,
body.menu-closing .site-header--hero-sky:not(.is-sticky) .site-header__toggle {
    color: var(--bt-menu-ink);
    background: transparent;
    border: 0;
    box-shadow: none;
}

body.menu-open .site-header__backdrop {
    opacity: 1;
    pointer-events: auto;
}

@media (min-width:992px) and (max-width: 1199px) {
    .site-header.is-sticky {
        .site-header__logo {
            width: 100px;
        }

        .site-header__inner {
            grid-template-columns: minmax(104px, 0.7fr) auto minmax(288px, 0.7fr);

            .site-header__nav {
                gap: var(--space-4);
            }
        }
    }

    /* ช่วงนี้แถบแคบที่สุดที่ยังโชว์ nav เต็ม คอลัมน์โลโก้จึงลดเหลือเท่าความกว้างโลโก้จริง
       และ nav บีบ gap ลงเท่าตอน sticky เพื่อให้เหลือที่พอสำหรับปุ่มสองตัวทางขวา */
    .site-header__inner {
        grid-template-columns: minmax(120px, 0.7fr) auto minmax(288px, 0.7fr);
    }

    .site-header__nav {
        gap: var(--space-4);
    }

    .site-header__nav a {
        font-size: var(--font-size-14);
    }
}

@media (max-width:991px) {
    .site-header__inner {
        width: calc(100% - var(--space-8));
        min-height: var(--header-height);
        display: flex;
        justify-content: space-between;
        gap: var(--space-0);
        position: relative;
        z-index: 1;
        border-bottom: 1px solid transparent;
        transition: border-color 220ms ease;
    }

    .site-header__logo {
        width: 144px;
        height: var(--space-12);
    }

    .site-header__nav,
    .site-header__actions {
        display: none;
    }

    .site-header__toggle {
        display: grid;
    }

    .site-header--hero-sky:not(.is-sticky) .site-header__toggle {
        color: var(--bt-menu-toggle-ink-on-dark);
    }

    .site-header__backdrop {
        display: block;
        z-index: 195;
        background: var(--bt-menu-backdrop-bg);
        visibility: hidden;
        opacity: 1;
        clip-path: inset(0 0 100% 0);
        transition:
            clip-path var(--bt-menu-transition-duration) var(--bt-menu-transition-ease),
            visibility 0s linear var(--bt-menu-visibility-delay);
        will-change: clip-path;
    }

    body.menu-open .site-header__backdrop {
        visibility: visible;
        opacity: 1;
        clip-path: inset(0);
        transition:
            clip-path var(--bt-menu-transition-duration) var(--bt-menu-transition-ease),
            visibility 0s;
    }

    body.menu-closing .site-header__backdrop {
        visibility: visible;
        transition-delay: var(--bt-menu-closing-delay), 0s;
    }
}

/* จอ 576-991px: โชว์ site-header__actions กลับมาบน header อีกครั้ง (ตอนปกติถูกซ่อนไว้
   ทั้งช่วง <=991px ไปแล้วข้างบน) วางไว้ข้างหน้า site-header__toggle เลย เพราะใน HTML
   .site-header__actions อยู่ก่อน .site-header__toggle อยู่แล้ว (ไม่ต้องสั่ง order ใหม่)
   margin-left:auto ดันกลุ่ม actions+toggle ไปชิดขวา ส่วนโลโก้ยังอยู่ชิดซ้ายตามเดิม
   ไม่ใช้ที่จอ <=575px เพราะจอนั้นมี .mobile-cta-bar ลอยชิดขอบล่างทำหน้าที่นี้แทนแล้ว */
@media (min-width:576px) and (max-width:991px) {
    .site-header__actions {
        display: flex;
        margin-left: auto;
        margin-right: var(--space-4);
    }
}

@media (max-width:575px) {
    /* .site-header {
        background: rgba(255, 255, 255, 0.21);
        backdrop-filter: blur(4px);
    } */

    .site-header__logo {
        width: 120px;
        height: var(--space-10);
    }

    .site-header__mobile-scroll {
        padding-left: var(--bt-menu-scroll-padding-x-sm);
        padding-right: var(--bt-menu-scroll-padding-x-sm);
    }

    .site-header__mobile-nav a {
        min-height: var(--space-10);
        font-size: var(--font-size-20);
    }

    .site-header__mobile-contact-grid {
        grid-template-columns: 1fr;
    }

    .site-header__mobile-sponsor-list {
        grid-template-columns: 1fr;
        gap: var(--space-6);
    }

    .site-header__mobile-sponsor {
        gap: var(--space-1);
    }

    .site-header__mobile-sponsor-name {
        margin: 0 0 var(--space-0);
    }
}

/* ---------- opening loader ---------- */
#loader {
    position: fixed;
    inset: 0;
    z-index: 300;
    overflow: hidden;
    pointer-events: auto;
}

.loader-surface {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    background: #080b12;
    will-change: opacity;
}

.loader-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: auto;
    height: auto;
    max-width: 120px;
    max-height: 120px;
    display: block;
    background: transparent;
    opacity: 0;
    filter: none;
    will-change: transform, opacity;
}

.loader-progress {
    position: absolute;
    left: 50%;
    bottom: 64px;
    width: min(320px, calc(100% - 48px));
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.88);
    font-family: var(--headline);
}

.loader-progress__meta {
    min-height: 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: var(--space-2);
    font-size: 14px;
    line-height: 1;
}

.loader-progress__track {
    height: 2px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.18);
}

.loader-progress__fill {
    width: 100%;
    height: 100%;
    display: block;
    background: var(--spectrum);
    transform: scaleX(0);
    transform-origin: 0 50%;
    will-change: transform;
}

/* ---------- scroll driver ---------- */
#scroller {
    height: 320vh;
    position: relative;
}

/* replaced by layout() in px.
   min-height stays in vh so the stage keeps covering the viewport during a resize:
   layout() rewrites the px height a frame later, and without this the stale px box
   is shorter than the new viewport and exposes the page background underneath. */
#stagewrap {
    height: 100vh;
    min-height: 100vh;
    width: 100%;
    position: relative;
    overflow: hidden;
    background: #dfe6ee;
}

/* ---------- background (own pan rate = depth) ---------- */
#bg {
    position: absolute;
    overflow: hidden;
    background-color: var(--color-neutral-950);
    background-image: url('../images/sky-new-old2.webp');
    background-size: contain;
    background-repeat: no-repeat;
    will-change: transform;
}

#sky-video {
    width: 100%;
    height: auto;
    display: block;
    object-fit: fill;
    object-position: -60% top;
    opacity: 0;
    transform: translateZ(0);
    transform-origin: 50% 38%;
    backface-visibility: hidden;
    filter: saturate(1.08) contrast(1.025) brightness(1.015);
    transition: opacity 480ms ease;
    will-change: opacity, transform;
}

/* Width-driven height:auto preserves the intended crop on regular viewports. When the
   viewport is taller than that rendered video height, layout() enables this fallback so
   the moving sky continues to cover the full background instead of exposing a gap below. */
#bg.is-tall-video-cover #sky-video {
    height: 100%;
    object-fit: cover;
    object-position: 40% top;
}

#bg.is-video-ready #sky-video {
    opacity: 1;
}

/* ---------- KV stage: virtual A4 canvas the camera pans down ---------- */
#stage {
    position: absolute;
    z-index: auto;
    pointer-events: none;
    will-change: transform;
}

#ship,
#stairs,
#pshadow,
.person {
    position: absolute;
    display: block;
    will-change: transform, opacity;
}

/* The ship stays behind the physical wall layers throughout its entrance. */
#ship {
    z-index: 10;
    transform-origin: 50% 50%;
    backface-visibility: hidden;
}

/* Full-canvas wall cutouts sit above the ship, preserving real occlusion while
    allowing each side to move independently. */
#walls {
    position: absolute;
    z-index: 20;
    pointer-events: none;
    will-change: transform;
}

.wall-intro-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    will-change: transform;
}

#wall-left-intro {
    transform-origin: 0 50%;
}

#wall-right-intro {
    transform-origin: 100% 50%;
}

.wall-panel {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: fill;
    will-change: transform;
    /* filter: sepia(0.35) hue-rotate(185deg) saturate(1.5) brightness(0.4) contrast(1.1); */
}

#wall-left {
    width: 101.35%;
    transform-origin: 0 50%;
}

#wall-right {
    left: auto;
    right: 0;
    width: 98.7%;
    transform-origin: 100% 50%;
}

#stairs {
    z-index: 40;
}

#pshadow {
    z-index: 50;
}

.person {
    z-index: 60;
    transform-origin: 50% 100%;
}

/* Scroll-scrubbed continuation through the ship door. */
#ship-run-layer {
    position: fixed;
    inset: 0;
    z-index: 180;
    opacity: 0;
    pointer-events: none;
}

#ship-run-canvas {
    width: 100%;
    height: 100%;
    display: block;
}

.ship-run-source {
    display: none;
}

#ship-run-whiteout {
    position: fixed;
    inset: 0;
    z-index: 210;
    opacity: 0;
    background: #fff;
    pointer-events: none;
}

/* Scroll cue ของ hero-v2: เริ่มแสดงเมื่อผู้ใช้ scroll ลงมาเล็กน้อย */
.hero-scroll-cue {
    position: fixed;
    left: 50%;
    bottom: max(var(--bt-hero-scroll-cue-bottom), env(safe-area-inset-bottom));
    z-index: 205;
    width: var(--bt-hero-scroll-cue-width);
    min-height: var(--space-14);
    display: inline-grid;
    justify-items: center;
    gap: var(--bt-hero-scroll-cue-gap);
    padding: 0;
    border: 0;
    color: var(--bt-hero-scroll-cue-ink);
    background: transparent;
    mix-blend-mode: difference;
    opacity: 1;
    pointer-events: auto;
    transform: translate3d(-50%, 0, 0);
    transition:
        opacity 320ms ease,
        transform 320ms ease;
    will-change: opacity, transform;
}

body.is-loading .hero-scroll-cue,
.hero-scroll-cue.is-hidden {
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-50%, var(--space-2), 0);
}

.hero-scroll-cue__mouse {
    position: relative;
    width: var(--bt-hero-scroll-cue-mouse-width);
    height: var(--bt-hero-scroll-cue-mouse-height);
    display: block;
    border: var(--bt-hero-scroll-cue-border-width) solid currentColor;
    border-radius: var(--space-10);
}

.hero-scroll-cue__wheel {
    position: absolute;
    left: 50%;
    top: var(--space-2);
    width: var(--bt-hero-scroll-cue-dot-width);
    height: var(--bt-hero-scroll-cue-dot-height);
    border-radius: var(--space-10);
    background: currentColor;
    transform: translateX(-50%);
    animation: hero-scroll-cue-wheel 1800ms cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.hero-scroll-cue__text {
    display: block;
    font-family: var(--font);
    font-size: var(--bt-hero-scroll-cue-text-size);
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
    white-space: nowrap;
}

@keyframes hero-scroll-cue-wheel {
    0% {
        opacity: 0;
        transform: translate(-50%, 0);
    }

    18% {
        opacity: 1;
    }

    72% {
        opacity: 1;
        transform: translate(-50%, var(--space-2));
    }

    100% {
        opacity: 0;
        transform: translate(-50%, var(--space-2));
    }
}

@media (max-width:575px) {
    .hero-scroll-cue {
        bottom: max(var(--bt-hero-scroll-cue-bottom-sm), env(safe-area-inset-bottom));
    }
}

@media (prefers-reduced-motion: reduce) {

    .hero-scroll-cue,
    .hero-scroll-cue__wheel {
        animation: none;
        transition: none;
    }

    .hero-scroll-cue__wheel {
        opacity: 1;
        transform: translate(-50%, var(--space-1));
    }
}

/* Its first frame matches the completed stair
    composition, then the camera follows the runners through the ship door. */
#ship-run-video {
    position: absolute;
    left: 50%;
    bottom: 0;
    z-index: 90;
    width: 100%;
    height: auto;
    display: block;
    opacity: 0;
    pointer-events: none;
    will-change: left, width, opacity;
}

/* ---------- holographic assets ---------- */
.asset {
    position: absolute;
    z-index: 70;
    will-change: transform;
    filter: saturate(1.3);
}

.asset .floaty {
    will-change: transform;
}

.asset .inner {
    will-change: transform, opacity;
    opacity: 0;
}

.asset img,
.asset video {
    width: 100%;
    display: block;
    /* filter: drop-shadow(0 12px 20px rgba(20, 40, 90, 0.30)); */
}

/* These begin above the wall plane. The timeline moves them behind the ship before
   their bounds make contact, matching the reference motion without a visible snap. */
#a-triangle,
#a-bitcoin,
#a-gold,
#a-card {
    z-index: 30;
}

#a-title {
    z-index: 80;
}

#a-title img {
    filter: unset;
}

/* ---------- frame-1 UI ---------- */
#ui {
    position: absolute;
    left: 50%;
    /* 59vh sets the gap below the title and governs on tall viewports; the px reserve
       governs on short ones, where it keeps the block off the bottom edge. Mirrored in
       layout() — see hero-v2-scroll-motion.js, which overwrites this with the same
       formula in px. Deliberately vh, not %: the containing block is #stage, whose
       height is the KV canvas (~1.4x the viewport), so % here would not mean what the
       JS means and the pre-layout() fallback would land far too low. */
    top: min(59vh, 100vh - 324px);
    transform: translateX(-50%);
    z-index: 25;
    pointer-events: auto;
    width: min(calc(100% - var(--space-8)), 720px);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-12);
    opacity: 0;
    text-align: center;
    color: var(--bt-white);
    font-family: var(--headline);
}

#ui .event-primary {
    display: grid;
    justify-items: center;
}

#ui .event-countdown {
    min-width: 288px;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
    font-variant-numeric: tabular-nums;
    opacity: 0.92;
}

#ui .event-countdown__label {
    color: currentColor;
    font-size: 16px;
    font-weight: 400;
    line-height: 1;
}

#ui .event-countdown__values {
    display: grid;
    grid-template-columns: repeat(4, 56px);
    gap: var(--space-12);
}

#ui .event-countdown__unit {
    position: relative;
    min-width: 0;
    display: grid;
    justify-items: center;
    gap: var(--space-3);
}

#ui .event-countdown__unit:not(:last-child)::after {
    content: '';
    position: absolute;
    top: calc(50% + 3px);
    right: calc(var(--space-6) * -1);
    width: var(--bt-hero-countdown-divider-width);
    height: calc(var(--bt-hero-countdown-divider-width) / var(--bt-hero-countdown-divider-ratio));
    background: url('../images/line-star-countdown.webp') center / contain no-repeat;
    transform: translate(50%, -50%) rotate(90deg);
    transform-origin: center;
}

#ui .event-countdown__unit strong {
    font-size: 24px;
    font-weight: 500;
    line-height: 1;
}

#ui .event-countdown__unit small {
    font-size: 14px;
    font-weight: 400;
    line-height: 1;
}

#ui .event-countdown__status {
    display: none;
    min-height: 40px;
    align-items: center;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.2;
}

#ui .event-countdown.is-status .event-countdown__values {
    display: none;
}

#ui .event-countdown.is-status .event-countdown__status {
    display: flex;
}

/* The CTA is built by js/liquid-metal-button.js and mounted in #cta-slot. */
.lmb button:focus-visible {
    outline: 2px solid #2b6cff;
    outline-offset: 3px;
}

#ui .event-details {
    display: grid;
    justify-items: center;
    gap: var(--space-8);
}

#ui .event-datetime {
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    column-gap: var(--space-3);
    row-gap: var(--space-8);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: 0;
    margin-bottom: var(--space-2);
}

#ui .time {
    font-size: 24px;
    line-height: inherit;
}

#ui .date {
    font-size: 28px;
    white-space: nowrap;
}

#ui .venue {
    font-size: 24px;
    font-weight: 400;
    line-height: 1.25;
    padding-top: 0;
}

#ui .venue-link {
    align-items: center;
    gap: var(--space-3);
    color: inherit;
    font-size: inherit;
    font-weight: inherit;

    &::after {
        background: var(--spectrum);
    }

    .bt-icon {
        width: var(--bt-icon-size);
        height: var(--bt-icon-size);
        stroke-width: 2;
    }

    &:hover .bt-icon,
    &:focus-visible .bt-icon {
        stroke: #00d4fe;
        stroke: url("#venue-arrow-spectrum");
    }
}

/* ---------- next section ---------- */
#concept {
    --bt-concept-description-size: var(--section-topic-size);
    --bt-concept-description-line-height: var(--section-topic-line-height);
    --bt-concept-bg-opacity: 0.4;
    --bt-concept-bg-reveal-delay: 520ms;
    --bt-concept-bg-reveal-duration: 980ms;

    position: relative;
    /* min-height: 180vh; */
    overflow: clip;
    isolation: isolate;
    background: var(--color-surface-page);
    color: var(--color-text-primary);
    display: block;
    padding: var(--section-padding-y) 0;
    font-family: var(--font-family-base);
    text-align: center;
}

#concept::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    background: url("../images/concept-room-bg.webp") center top / cover no-repeat;
    opacity: var(--bt-concept-bg-opacity);
    pointer-events: none;
    transition: opacity var(--bt-concept-bg-reveal-duration) var(--ease-standard);
    /* Ramp is longer and slow-start (eased) rather than a straight 2-stop linear fade so a
       higher --bt-concept-bg-opacity still reads as a gradual reveal instead of a visible
       edge where it crosses the hero's white into #concept. */
    -webkit-mask-image: linear-gradient(180deg,
            transparent 0px,
            transparent 120px,
            rgba(0, 0, 0, 0.12) 220px,
            rgba(0, 0, 0, 0.45) 320px,
            #000 460px);
    mask-image: linear-gradient(180deg,
            transparent 0px,
            transparent 120px,
            rgba(0, 0, 0, 0.12) 220px,
            rgba(0, 0, 0, 0.45) 320px,
            #000 460px);
}

#concept.is-awaiting-entry::before {
    opacity: 0;
}

#concept.is-awaiting-entry.is-revealed::before {
    opacity: var(--bt-concept-bg-opacity);
    transition-delay: var(--bt-concept-bg-reveal-delay);
}

.concept__aurora {
    --concept-aurora-stripes: repeating-linear-gradient(100deg,
            #fff 0%,
            #fff 7%,
            transparent 10%,
            transparent 12%,
            #fff 16%);
    --concept-aurora-rainbow: repeating-linear-gradient(100deg,
            #60a5fa 10%,
            #e879f9 15%,
            #60a5fa 20%,
            #5eead4 25%,
            #60a5fa 30%);

    position: absolute;
    top: -10px;
    right: -10px;
    left: -10px;
    z-index: 0;
    height: min(360px, 26%);
    pointer-events: none;
    opacity: 0.22;
    background-image: var(--concept-aurora-stripes), var(--concept-aurora-rainbow);
    background-position: 50% 50%, 50% 50%;
    background-size: 300%, 200%;
    filter: blur(10px) invert(100%);
    -webkit-mask-image: radial-gradient(ellipse at 100% 0%, #000 40%, transparent 70%);
    mask-image: radial-gradient(ellipse at 100% 0%, #000 40%, transparent 70%);
}

.concept__aurora::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--concept-aurora-stripes), var(--concept-aurora-rainbow);
    background-size: 200%, 100%;
    background-attachment: fixed;
    mix-blend-mode: difference;
    animation: concept-aurora-drift 60s linear infinite;
}

@keyframes concept-aurora-drift {
    from {
        background-position: 50% 50%, 50% 50%;
    }

    to {
        background-position: 350% 50%, 350% 50%;
    }
}

#concept.is-awaiting-entry .concept__aurora {
    opacity: 0;
}

#concept.is-awaiting-entry.is-revealed .concept__aurora {
    opacity: 0.22;
    transition: opacity 900ms var(--ease-standard);
}

.concept__inner {
    position: relative;
    z-index: 1;
    display: grid;
    align-content: center;
    justify-items: center;
    gap: var(--space-6);
    opacity: 1;
    transform: translateY(0);
    will-change: transform, opacity;
}

#concept.is-awaiting-entry .concept__inner {
    opacity: 0;
    transform: translateY(var(--space-4));
}

#concept.is-awaiting-entry.is-revealed .concept__inner {
    opacity: 1;
    transform: translateY(0);
    transition: opacity 560ms ease, transform 720ms cubic-bezier(0.22, 1, 0.36, 1);
}

.concept__description {
    margin: 0;
    font-size: var(--bt-concept-description-size);
    font-weight: var(--font-weight-light);
    line-height: var(--bt-concept-description-line-height);
    letter-spacing: var(--section-heading-tracking);
    text-wrap-style: balance;
}

.concept__video-scroll {
    min-height: unset;
    margin-top: var(--space-12);
    position: relative;
    z-index: 1;
    opacity: 1;
    transform: translateY(0);
    will-change: transform, opacity;
}

#concept.is-awaiting-entry .concept__video-scroll {
    opacity: 0;
    transform: translateY(var(--space-6));
}

#concept.is-awaiting-entry.is-revealed .concept__video-scroll {
    opacity: 1;
    transform: translateY(0);
    transition:
        opacity 640ms ease 120ms,
        transform 760ms cubic-bezier(0.22, 1, 0.36, 1) 120ms;
}

@media (max-width:1199px) {
    .concept__description {
        text-wrap: unset;
    }
}

@media (max-width:991px) {
    .concept__description {
        --bt-concept-description-size: var(--section-topic-size-sm);
        --bt-concept-description-line-height: var(--section-topic-line-height-sm);
        font-size: var(--bt-concept-description-size);
        line-height: var(--bt-concept-description-line-height);
    }
}

.concept__video-perspective {
    /* min-height: calc(100vh - var(--header-height)); */
    position: sticky;
    top: var(--header-height);
    display: grid;
    place-items: start center;
    perspective: 1400px;
    perspective-origin: 50% 35%;
}

.concept__video-frame {
    position: relative;
    width: min(100%, calc((100vh - var(--header-height) - var(--space-24)) * 16 / 9));
    aspect-ratio: 16 / 9;
    display: grid;
    place-items: center;
    padding: 0;
    border: 0;
    border-radius: var(--card-radius);
    background: transparent;
    /* box-shadow: var(--shadow-low), var(--shadow-deep); */
    transform-origin: 50% 100%;
    will-change: transform;
}

.concept__video-frame-art {
    position: absolute;
    z-index: 3;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
}

.concept__video-media {
    position: relative;
    width: 93.5%;
    height: auto;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: var(--radius-1);
    background: var(--color-surface-inverse);
}

.concept__video-poster {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: block;
    width: 100%;
    height: 100%;
    padding: 0;
    overflow: hidden;
    color: var(--color-text-primary);
    background: var(--color-surface-inverse);
    border: 0;
    cursor: pointer;
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.concept__video-poster img {
    width: 100%;
    height: 100%;
    display: block;
    object-fit: cover;
}

.concept__video-play {
    --bt-concept-video-play-ring-color: color-mix(in srgb, var(--color-surface-page) 72%, transparent);

    position: absolute;
    top: 50%;
    left: 50%;
    width: clamp(var(--space-12), 7vw, calc(var(--space-24) - var(--space-1)));
    aspect-ratio: 1;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    filter: brightness(1);
    isolation: isolate;
    transition:
        filter var(--duration-fast) var(--ease-standard),
        transform var(--duration-fast) var(--ease-standard);
}

.concept__video-play::before,
.concept__video-play::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    background: var(--bt-concept-video-play-ring-color);
    pointer-events: none;
    animation: concept-video-play-pulse 1.8s ease-out infinite;
}

.concept__video-play::after {
    animation-delay: 0.9s;
}

.concept__video-play-surface {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: grid;
    place-items: center;
    border-radius: inherit;
    background: linear-gradient(180deg, #9b9b9b 0%, #191a1d 100%);
    box-shadow:
        0 0 0 var(--space-1) var(--bt-concept-video-play-ring-color),
        inset 0 var(--border-width-1) color-mix(in srgb, var(--color-neutral-0) 26%, transparent),
        0 14px 28px color-mix(in srgb, var(--color-neutral-900) 34%, transparent);
}

@keyframes concept-video-play-pulse {
    0% {
        opacity: 0.7;
        transform: scale(1);
    }

    75%,
    100% {
        opacity: 0;
        transform: scale(1.45);
    }
}

.concept__video-play .bt-icon {
    --bt-icon-size: clamp(var(--space-6), 3.2vw, var(--space-10));

    position: relative;
    z-index: 1;
    margin-left: var(--space-1);
    color: var(--color-neutral-0);
    fill: currentColor;
    stroke: currentColor;
    stroke-width: 1.8;
}

.concept__video-poster:hover .concept__video-play,
.concept__video-poster:focus-visible .concept__video-play {
    filter: brightness(1.08);
    transform: translate(-50%, -50%) scale(1.03);
}

.concept__video-poster:focus-visible {
    outline: var(--border-width-2) solid var(--color-focus-ring);
    outline-offset: calc(var(--space-1) * -1);
}

.concept__video-media.is-video-playing .concept__video-poster {
    opacity: 0;
    pointer-events: none;
}

.concept__video-media iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

@media (max-width: 991px) {
    #concept {
        padding: var(--section-padding-y-sm) 0;
    }

    #concept::before {
        -webkit-mask-image: none;
        mask-image: none;
    }
}

@media (max-width: 767px) {
    #concept {
        --bt-concept-bg-opacity: 0.55;
    }

    .concept__video-scroll {
        margin-top: var(--space-8);
    }

    .concept__video-frame {
        width: 100%;
    }
}

@media (max-width:575px) {
    .concept__description {
        --bt-concept-description-size: var(--section-topic-size-xs);
        --bt-concept-description-line-height: var(--section-topic-line-height-xs);
        font-size: var(--bt-concept-description-size);
        line-height: var(--bt-concept-description-line-height);
    }

    .concept__video-scroll {
        min-height: unset;
        margin-top: var(--space-6);
    }

    .concept__video-perspective {
        min-height: unset;
    }
}

@media (max-width:1536px),
(max-height:900px),
(hover:none) and (pointer:coarse) {
    .concept__video-scroll {
        min-height: auto;
    }

    .concept__video-perspective {
        min-height: unset;
        position: relative;
        top: auto;
    }
}

@media (max-width: 575px) {
    .concept__inner {
        gap: var(--space-3);
    }
}

@media (prefers-reduced-motion: reduce) {
    .concept__aurora::after {
        animation: none;
    }

    .concept__video-play::before,
    .concept__video-play::after {
        animation: none;
    }
}

/* @media (min-width: 768px) and (max-width: 1199px) {
    #concept {
        padding: var(--section-padding-y-sm) 0;
    }
} */

/* ---------- Featured topics ---------- */
.topics-showcase {
    --bt-topics-title-size: var(--section-title-size);

    position: relative;
    z-index: 1;
    /* min-height: 100vh; */
    padding: var(--section-padding-y) 0;
    overflow: hidden;
    color: var(--bt-topics-ink);
    background: var(--bt-topics-bg);
    font-family: var(--font-family-base);
}

.topics-showcase__inner {
    display: grid;
}

.topics-showcase__header {
    width: min(100%, 1040px);
    margin: 0 auto;
    text-align: center;
}

.topics-showcase__header h2 {
    margin: 0;
    font-size: var(--bt-topics-title-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-title-line-height);
    letter-spacing: var(--section-title-tracking);
    text-wrap-style: balance;
}

.topics-showcase__header p {
    margin: var(--space-8) 0 0;
    color: var(--bt-topics-ink-muted);
    font-size: var(--section-topic-size);
    font-weight: var(--font-weight-light);
    line-height: var(--section-topic-line-height);
    letter-spacing: var(--section-heading-tracking);
    text-wrap-style: balance;
}

.topics-showcase__content {
    --topics-asset-left: 10%;
    --topics-asset-right: 90%;

    position: relative;
    margin-top: var(--bt-topics-content-margin-top);
    display: block;
}

.topics-showcase .concept__topics {
    position: relative;
    z-index: 2;
    width: min(calc(100% - 280px), 1200px);
    margin: var(--space-0);
    margin-inline: auto;
    padding: var(--space-0);
    display: flex;
    flex-wrap: wrap;
    column-gap: var(--space-8);
    list-style: none;
}

.topics-showcase .concept__topic {
    /* Each topic reveals when it scrolls in, so timing comes from scroll position rather
       than a fixed sequence. topics-reveal.js sets --topic-delay only on topics that cross
       the line in the same batch (a whole screenful arriving at once), so those fan out
       instead of popping together. The underline always trails its own text. */
    --topic-delay: 0ms;
    --topic-line-delay: calc(var(--topic-delay) + 80ms);
    --topic-star-size: var(--bt-topics-star-size);
    --topic-star-gap: var(--space-6);

    position: relative;
    flex: 0 0 calc(50% - var(--space-4));
    min-height: calc(var(--space-16) + var(--space-2));
    margin: var(--space-0);
    padding: var(--space-6) var(--space-0) var(--space-6) calc(var(--topic-star-size) + var(--topic-star-gap));
    display: grid;
    align-content: center;
    color: var(--bt-topics-ink);
    letter-spacing: 0;
}

/* ดาวผูกกับหัวข้อ (title) ไม่ใช่กึ่งกลางทั้งรายการ ไม่งั้นคำอธิบายที่ยาว 2 บรรทัดจะดันดาวให้ต่ำกว่าหัวข้อ
   เลื่อนออกไปทางซ้ายเท่ากับช่องที่ padding-left ของ .concept__topic เว้นไว้ (ขนาดดาว + ระยะห่าง) */
.topics-showcase .concept__topic-title::before {
    content: "";
    position: absolute;
    top: 50%;
    left: calc((var(--topic-star-size) + var(--topic-star-gap)) * -1);
    width: var(--topic-star-size);
    height: var(--topic-star-size);
    background: url("../images/star.webp") center / contain no-repeat;
    transform: translateY(-50%);
}

.topics-showcase .concept__topic::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background: var(--bt-topics-rule);
    transform-origin: left center;
}

.topics-showcase .concept__topic-label,
.topics-showcase .concept__topic-title,
.topics-showcase .concept__topic-description {
    display: block;
}

.topics-showcase .concept__topic-label {
    color: var(--bt-topics-ink-muted);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-small-line-height);
    letter-spacing: var(--section-heading-tracking);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.topics-showcase .concept__topic-title {
    position: relative;
    margin-top: var(--space-1);
    color: var(--bt-topics-ink);
    font-size: var(--font-size-24);
    font-weight: var(--font-weight-medium);
    line-height: var(--section-topic-line-height);
}

.topics-showcase .concept__topic-description {
    margin-top: var(--space-1);
    color: var(--bt-topics-ink-muted);
    font-size: var(--font-size-16);
    font-weight: var(--font-weight-light);
    line-height: var(--section-body-line-height);
}

.topics-showcase__assets {
    position: absolute;
    inset-block: 0;
    left: calc(50% - 50vw);
    right: calc(50% - 50vw);
    z-index: 1;
    width: auto;
    min-height: 0;
    isolation: isolate;
    pointer-events: none;
}

.topics-showcase__assets::before {
    display: none;
}

.topics-showcase__asset {
    position: absolute;
    left: var(--asset-x);
    top: var(--asset-y);
    z-index: var(--asset-z, 1);
    width: var(--asset-size);
    max-width: var(--asset-max, 240px);
    margin: 0;
    translate: -50% -50%;
    scale: 0.8;
}

.topics-showcase__asset-motion {
    width: 100%;
    will-change: transform, opacity;
}

.topics-showcase__asset-float {
    width: 100%;
    will-change: transform;
}

.topics-showcase__asset img {
    display: block;
    width: 100%;
    height: auto;
    transform: rotate(var(--asset-rotation, 0deg));
    filter: saturate(1.5);
    /* filter: drop-shadow(0 18px 28px rgba(0, 0, 0, 0.34)); */
}

.topics-showcase__asset--triangle {
    --asset-x: calc(var(--topics-asset-left) - 2%);
    --asset-y: -6%;
    --asset-size: 33%;
    --asset-max: 230px;
    --asset-rotation: 10deg;
    --asset-z: 3;
}

.topics-showcase__asset--bitcoin {
    --asset-x: calc(var(--topics-asset-left) + 3%);
    --asset-y: 48%;
    --asset-size: 29%;
    --asset-max: 205px;
    --asset-rotation: -10deg;
    --asset-z: 2;
}

.topics-showcase__asset--gold {
    --asset-x: calc(var(--topics-asset-right) + 1%);
    --asset-y: 6%;
    --asset-size: 15%;
    --asset-max: 108px;
    --asset-rotation: 12deg;
    --asset-z: 2;
}

.topics-showcase__asset--stock {
    --asset-x: var(--topics-asset-left);
    --asset-y: 94%;
    --asset-size: 9%;
    --asset-max: 64px;
    --asset-rotation: -12deg;
    --asset-z: 1;
}

.topics-showcase__asset--card {
    --asset-x: calc(var(--topics-asset-right) - 3%);
    --asset-y: 46%;
    --asset-size: 26%;
    --asset-max: 184px;
    --asset-rotation: 16deg;
    --asset-z: 1;
}

.topics-showcase__asset--heart {
    --asset-x: calc(var(--topics-asset-right) + 2%);
    --asset-y: 80%;
    --asset-size: 37%;
    --asset-max: 258px;
    --asset-rotation: -4deg;
    --asset-z: 3;
}

@media (max-width: 1499px) {
    .topics-showcase__asset {
        scale: 0.6;
    }

    .topics-showcase__asset--bitcoin {
        --asset-x: calc(var(--topics-asset-left) + 2%);
    }
}

@media (max-width: 1399px) {
    .topics-showcase__asset {
        scale: 0.54;
    }

    .topics-showcase .concept__topics {
        width: min(calc(100% - 320px), 1200px);
    }
}

.topics-showcase.is-reveal-ready .concept__topic {
    opacity: 0;
    transform: translateX(calc(var(--space-8) * -1));
}

.topics-showcase.is-reveal-ready .concept__topic::after {
    opacity: 0;
    transform: translateX(calc(var(--space-8) * -1)) scaleX(0);
}

.topics-showcase.is-reveal-ready .concept__topic.is-topic-visible {
    opacity: 1;
    transform: translateX(0);
    transition:
        opacity 560ms ease var(--topic-delay),
        transform 700ms var(--ease-standard) var(--topic-delay);
}

.topics-showcase.is-reveal-ready .concept__topic.is-topic-visible::after {
    opacity: 1;
    transform: translateX(0) scaleX(1);
    transition:
        opacity 520ms ease var(--topic-line-delay),
        transform 900ms var(--ease-standard) var(--topic-line-delay);
}

@media (max-width:991px) {
    .topics-showcase {
        min-height: auto;
        padding: var(--section-padding-y-sm) 0;
    }

    .topics-showcase__header p {
        font-size: var(--section-topic-size-sm);
        line-height: var(--section-topic-line-height-sm);
    }

    .topics-showcase__content {
        --topics-asset-left: 12%;
        --topics-asset-right: 88%;

        position: relative;
        margin-top: var(--bt-topics-content-margin-top-md);
        display: block;
    }

    .topics-showcase .concept__topics {
        width: min(calc(100% - 180px), 560px);
    }

    .topics-showcase .concept__topic {
        flex-basis: 100%;
    }

    .topics-showcase__assets {
        isolation: isolate;
    }

    .topics-showcase__asset {
        /* scale: 1; */
    }

    .topics-showcase__asset--triangle {
        --asset-y: 6%;
        /* --asset-size: clamp(72px, 15vw, 142px); */
        --asset-rotation: -10deg;
        --asset-z: 3;
    }

    .topics-showcase__asset--bitcoin {
        --asset-y: 64%;
        /* --asset-size: clamp(58px, 10vw, 104px); */
        --asset-rotation: -8deg;
        --asset-z: 2;
    }

    .topics-showcase__asset--gold {
        --asset-y: 18%;
        /* --asset-size: clamp(36px, 6vw, 58px); */
        --asset-rotation: 8deg;
        --asset-z: 1;
    }

    .topics-showcase__asset--stock {
        --asset-y: 94%;
        /* --asset-size: clamp(32px, 5vw, 48px); */
        --asset-rotation: -14deg;
        --asset-z: 1;
    }

    .topics-showcase__asset--card {
        --asset-y: 42%;
        /* --asset-size: clamp(54px, 9vw, 88px); */
        --asset-rotation: 12deg;
        --asset-z: 2;
    }

    .topics-showcase__asset--heart {
        --asset-y: 79%;
        /* --asset-size: clamp(82px, 16vw, 156px); */
        --asset-rotation: -5deg;
        --asset-z: 3;
    }
}

@media (max-width: 767px) {
    .topics-showcase {
        --bt-topics-title-size: var(--section-heading-size);

        min-height: auto;
        padding: var(--section-padding-y-sm) 0;
    }

    .topics-showcase__header p br {
        display: none;
    }

    .topics-showcase__content {
        margin-top: var(--bt-topics-content-margin-top-sm);
    }

    /* .topics-showcase .concept__topics {
        width: min(calc(100% - 72px), 480px);
    } */

    .topics-showcase .concept__topic {
        --topic-star-size: var(--bt-topics-star-size-sm);
        --topic-star-gap: var(--space-3);

        min-height: calc(var(--space-16) + var(--space-2));
        padding: var(--space-4) var(--space-0);
        padding-left: calc(var(--topic-star-size) + var(--topic-star-gap));
    }

    .topics-showcase .concept__topic-title {
        font-size: var(--font-size-20);
        line-height: var(--line-height-normal);
    }

    /* .topics-showcase .concept__topic-description {
        font-size: var(--font-size-14);
    } */

    .topics-showcase__assets {
        min-height: 0;
    }

}

@media (max-width:575px) {
    .topics-showcase__header p {
        font-size: var(--section-topic-size-xs);
        line-height: var(--section-topic-line-height-xs);
    }

    .topics-showcase__content {
        --topics-asset-left: 14%;
        --topics-asset-right: 86%;
    }

    .topics-showcase .concept__topics {
        width: calc(100% - 80px);
    }

    .topics-showcase__asset {
        scale: 0.72;
    }

    .topics-showcase__asset--triangle {
        --asset-x: 6%;
        --asset-y: -2%;
    }

    .topics-showcase__asset--gold {
        --asset-x: 94%;
        --asset-y: 6%;
    }

    .topics-showcase__asset--card {
        --asset-x: 98%;
        --asset-y: 42%;
    }

    .topics-showcase__asset--bitcoin {
        --asset-x: 2%;
        --asset-y: 64%;
    }

    .topics-showcase__asset--heart {
        --asset-x: 98%;
        --asset-y: 82%;
    }

    .topics-showcase__asset--stock {
        --asset-x: 10%;
        --asset-y: 98%;
    }

    .topics-showcase__asset-motion,
    .topics-showcase__asset-float {
        transform: none !important;
        animation: none !important;
    }

    .topics-showcase .concept__topic-label {
        font-size: var(--font-size-12);
    }

    .topics-showcase .concept__topic-title {
        font-size: var(--font-size-18);
    }

    .topics-showcase .concept__topic-description {
        font-size: var(--font-size-14);
        line-height: var(--section-small-line-height);
    }
}

@media (min-width: 992px) and (max-width: 1199px) {
    /* .topics-showcase {
        padding: var(--section-padding-y-sm) 0;
    } */

    .topics-showcase__assets {
        width: 100%;
        left: 50%;
        right: unset;
        transform: translateX(-50%);
    }

    .topics-showcase__asset {
        scale: 0.52;
    }

    .topics-showcase__content {
        --topics-asset-left: 3%;
        --topics-asset-right: 97%;

        margin-top: var(--bt-topics-content-margin-top-md);
    }

    .topics-showcase .concept__topics {
        width: min(calc(100% - 120px), 1000px);
    }

    .topics-showcase__asset--triangle {
        --asset-y: -4%;
    }

    .topics-showcase__asset--bitcoin {
        --asset-y: 46%;
    }

    .topics-showcase__asset--gold {
        --asset-y: 8%;
    }

    .topics-showcase__asset--stock {
        --asset-y: 91%;
    }

    .topics-showcase__asset--card {
        --asset-y: 43%;
    }

    .topics-showcase__asset--heart {
        --asset-y: 82%;
    }

    .topics-showcase .concept__topic {
        --topic-star-size: var(--bt-topics-star-size-md);
    }

}

@media (prefers-reduced-motion: reduce) {

    .topics-showcase__asset-motion,
    .topics-showcase__asset-float {
        will-change: auto;
    }
}

/* ---------- Speaker overview ---------- */
.speaker-overview[hidden] {
    display: none;
}

.speaker-overview {
    --speaker-overview-rows: 3;
    --speaker-overview-columns: 6;
    --speaker-overview-card-min-width: var(--bt-speaker-overview-card-min-width);

    position: relative;
    z-index: 2;
    isolation: isolate;
    min-height: 100vh;
    padding: var(--section-padding-y-sm) var(--space-0);
    display: grid;
    align-items: center;
    overflow: hidden;
    color: var(--bt-speaker-overview-ink);
    background: var(--bt-speaker-overview-bg);
    font-family: var(--font-family-base);

    &::before {
        --speaker-overview-glow-height: clamp(20rem, 42vw, 38rem);

        content: '';
        position: fixed;
        z-index: 0;
        top: calc(var(--speaker-overview-glow-height) * -0.48);
        left: 50%;
        width: min(150vw, 136rem);
        height: var(--speaker-overview-glow-height);
        border-radius: 50%;
        pointer-events: none;
        opacity: 0;
        transform: translate3d(-50%, -1.5rem, 0) scale(.96);
        background: radial-gradient(ellipse at 50% 72%,
                rgba(79, 91, 158, .28) 0%,
                rgba(46, 54, 103, .21) 34%,
                rgba(24, 28, 52, .12) 53%,
                rgba(10, 11, 17, 0) 76%);
        filter: blur(2rem);
        transition: opacity .9s ease, transform 1.05s cubic-bezier(.2, .7, .2, 1);
        will-change: opacity, transform;
    }

    &.is-top-glow-visible::before {
        opacity: 1;
        transform: translate3d(-50%, 0, 0) scale(1);
    }

    &[data-speaker-overview-layout="expanded"] {
        --speaker-overview-rows: 4;
        --speaker-overview-columns: 9;
        --speaker-overview-card-min-width: var(--space-20);
    }

    .speaker-overview__inner {
        position: relative;
        z-index: 1;
        min-width: 0;
        width: 100%;
    }

    /* .speaker-overview__layout {
        --bs-gutter-x: var(--space-8);
    } */

    .speaker-overview__intro {
        min-width: 0;
        padding-right: var(--space-10);
        display: flex;
        flex-direction: column;
    }

    .speaker-overview__eyebrow {
        min-height: var(--space-6);
        margin: var(--space-0) var(--space-0) var(--space-10);
        display: flex;
        align-items: center;
        /* color: var(--bt-speaker-overview-ink-muted); */
        font-size: var(--font-size-18);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-small-line-height);
        letter-spacing: var(--section-heading-tracking);
        text-transform: uppercase;
    }

    .speaker-overview__event-mark {
        display: block;
        width: 92%;
        max-width: 100%;
        height: auto;
        margin-bottom: var(--space-10);
    }

    h2 {
        margin: var(--space-0);
        font-size: var(--font-size-32);
        font-weight: var(--font-weight-regular);
        line-height: 1.5;
        letter-spacing: var(--section-heading-tracking);
        text-wrap-style: balance;

        .bt-title-highlight {
            font-size: var(--font-size-48);
            line-height: 1;
        }
    }

    .speaker-overview__event-info {
        position: relative;
        margin-top: var(--space-10);
        padding-left: var(--space-6);
        display: grid;
        gap: var(--space-1);

        &::before {
            content: '';
            position: absolute;
            top: var(--space-1);
            bottom: var(--space-1);
            left: var(--space-0);
            width: var(--border-width-2);
            background: var(--spectrum-vertical);
        }

        p {
            margin: var(--space-0);
            color: var(--bt-speaker-overview-ink);
            font-size: var(--font-size-18);
            font-weight: var(--font-weight-medium);
            line-height: var(--section-small-line-height);
        }

        p:last-child {
            color: var(--bt-speaker-overview-ink-muted);
            font-size: var(--font-size-16);
            font-weight: var(--font-weight-light);
            letter-spacing: var(--section-heading-tracking);
        }
    }

    .speaker-overview__gallery {
        position: relative;
        min-width: 0;
        margin-block: auto;
    }

    .speaker-overview__scroll-overlay {
        position: absolute;
        z-index: 5;
        inset: var(--space-0);
        display: grid;
        place-items: center;
        overflow: hidden;
        pointer-events: none;
        visibility: hidden;
        opacity: 0;
        background:
            radial-gradient(circle at center,
                color-mix(in srgb, var(--color-kv-spectrum-4) 17%, transparent) 0%,
                transparent 42%),
            rgba(8, 10, 15, .72);

        &.is-visible {
            visibility: visible;
            animation: speaker-overview-scroll-overlay 5s ease both;
        }
    }

    .speaker-overview__scroll-gesture {
        width: clamp(4.75rem, 8vw, 6.75rem);
        aspect-ratio: 1;
        height: auto;
        overflow: visible;
        filter: drop-shadow(0 0 18px rgba(255, 255, 255, .24));

        svg {
            display: block;
            width: 100% !important;
            height: 100% !important;
            overflow: visible;
        }
    }

    .speaker-overview__view-switch {
        position: fixed;
        z-index: 270;
        right: var(--space-20);
        bottom: var(--space-6);
        opacity: 0;
        pointer-events: none;
        transform: translateY(var(--space-2)) scale(0.94);
        transition:
            opacity var(--duration-fast) var(--ease-standard),
            transform var(--duration-fast) var(--ease-standard),
            bottom var(--duration-slow) var(--ease-standard);
    }

    &.is-view-switch-visible .speaker-overview__view-switch {
        opacity: 1;
        pointer-events: auto;
        transform: translateY(0) scale(1);
    }

    /* Keep the layout switch accessible while the cookie notice occupies the bottom
       of the viewport. Once the notice closes, the button returns to its usual edge. */
    body:has(.cookie-banner.is-visible) & .speaker-overview__view-switch {
        bottom: calc(var(--space-24) + var(--space-8));
    }

    .speaker-overview__view-trigger {
        width: var(--touch-target-md);
        height: var(--touch-target-md);
        display: inline-grid;
        place-items: center;
        padding: var(--space-0);
        border: var(--border-width-1) solid var(--alpha-white-28);
        border-radius: 50%;
        color: var(--bt-speaker-overview-bg);
        background: var(--bt-speaker-overview-ink);
        box-shadow: var(--shadow-deep);
        cursor: pointer;
        appearance: none;
        transition:
            color var(--duration-fast) var(--ease-standard),
            background-color var(--duration-fast) var(--ease-standard),
            border-color var(--duration-fast) var(--ease-standard),
            transform var(--duration-fast) var(--ease-standard);

        span {
            font-size: var(--font-size-18);
            line-height: 1;
            transition: transform var(--duration-standard) var(--ease-standard);
        }

        &:hover,
        .speaker-overview__view-switch.is-open & {
            border-color: var(--bt-speaker-overview-ink);
            color: var(--bt-speaker-overview-ink);
            background: var(--bt-speaker-overview-bg);
        }

        .speaker-overview__view-switch.is-open & span {
            transform: rotate(180deg);
        }

        &:focus-visible {
            outline: var(--border-width-2) solid var(--color-focus-ring);
            outline-offset: var(--space-1);
        }
    }

    .speaker-overview__view-panel {
        position: absolute;
        right: var(--space-0);
        bottom: calc(100% + var(--space-3));
        width: 224px;
        padding: var(--space-3);
        border: var(--border-width-1) solid var(--alpha-white-28);
        border-radius: var(--radius-3);
        color: var(--bt-speaker-overview-ink);
        background: color-mix(in srgb, var(--bt-speaker-overview-bg) 88%, transparent);
        box-shadow: var(--shadow-deep);
        backdrop-filter: blur(var(--space-3));
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transform: translateY(var(--space-2)) scale(0.97);
        transform-origin: 100% 100%;
        transition:
            opacity var(--duration-fast) var(--ease-standard),
            visibility 0s linear var(--duration-fast),
            transform var(--duration-fast) var(--ease-standard);

        .speaker-overview__view-switch.is-open & {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
            transform: translateY(0) scale(1);
            transition-delay: 0s;
        }
    }

    .speaker-overview__view-eyebrow {
        display: block;
        padding: var(--space-1) var(--space-2) var(--space-3);
        color: var(--bt-speaker-overview-ink-muted);
        font-size: 10px;
        font-weight: var(--font-weight-medium);
        line-height: 1;
        letter-spacing: 0.12em;
        text-transform: uppercase;
    }

    .speaker-overview__view-button {
        width: 100%;
        display: grid;
        grid-template-columns: auto minmax(0, 1fr) auto;
        align-items: center;
        gap: var(--space-3);
        padding: var(--space-3) var(--space-2);
        border: var(--space-0);
        border-radius: var(--radius-2);
        color: var(--bt-speaker-overview-ink-muted);
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
        appearance: none;
        transition:
            color var(--duration-standard) var(--ease-standard),
            background-color var(--duration-standard) var(--ease-standard);

        &:hover {
            color: var(--bt-speaker-overview-ink);
            background: var(--alpha-white-12);
        }

        &.is-active {
            color: var(--bt-speaker-overview-ink);
            background: var(--alpha-white-12);
        }

        &:focus-visible {
            outline: var(--border-width-2) solid var(--color-focus-ring);
            outline-offset: var(--space-1);
        }

        strong,
        small {
            display: block;
        }

        strong {
            font-size: var(--font-size-14);
            font-weight: var(--font-weight-medium);
            line-height: 1.15;
        }

        small {
            margin-top: var(--space-1);
            color: var(--bt-speaker-overview-ink-muted);
            font-size: 10px;
            font-weight: var(--font-weight-regular);
            line-height: 1.2;
        }
    }

    .speaker-overview__view-status {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: var(--alpha-white-28);
    }

    .speaker-overview__view-button.is-active .speaker-overview__view-status {
        background: var(--color-kv-spectrum-1);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-kv-spectrum-1) 16%, transparent);
    }

    .speaker-overview__view-check {
        opacity: 0;
        font-size: var(--font-size-14);
    }

    .speaker-overview__view-button.is-active .speaker-overview__view-check {
        opacity: 1;
    }

    .speaker-overview__speaker-count {
        min-height: var(--space-6);
        margin: var(--space-0) var(--space-0) var(--space-8);
        display: flex;
        align-items: baseline;
        justify-content: flex-end;
        gap: var(--space-2);

        strong {
            color: var(--bt-speaker-overview-ink);
            font-size: var(--font-size-24);
            font-weight: var(--font-weight-medium);
            line-height: var(--section-small-line-height);
        }

        span {
            color: var(--bt-speaker-overview-ink-muted);
            font-size: var(--font-size-16);
            line-height: var(--section-small-line-height);
            letter-spacing: var(--section-heading-tracking);
            text-transform: uppercase;
        }
    }

    .speaker-overview__scroller {
        width: 100%;
        height: auto;
        overflow: visible;
    }

    .speaker-overview__grid {
        width: 100%;
        min-width: 0;
        height: auto;
        display: grid;
        grid-template-columns: repeat(var(--speaker-overview-columns), minmax(0, 1fr));
        grid-template-rows: repeat(var(--speaker-overview-rows), auto);
        grid-auto-flow: column;
        gap: var(--bt-speaker-overview-grid-gap);
    }

    .speaker-overview__card {
        --speaker-overview-circle-color: var(--color-kv-spectrum-1);
        --speaker-overview-portrait-x: 0%;

        position: relative;
        aspect-ratio: 4 / 5;
        min-width: 0;
        min-height: 0;
        margin: var(--space-0);
        isolation: isolate;
        overflow: hidden;
        background:
            radial-gradient(ellipse 105% 82% at 50% 0%,
                var(--speaker-overview-circle-color) 0 18%,
                color-mix(in srgb, var(--speaker-overview-circle-color) 72%, transparent) 40%,
                color-mix(in srgb, var(--speaker-overview-circle-color) 30%, transparent) 62%,
                transparent 82%),
            var(--bt-speaker-overview-card-bg);

        &::before {
            content: '';
            position: absolute;
            z-index: 0;
            inset: var(--space-0);
            background: url('../images/speaker-bg-overlay.webp') center / cover no-repeat;
            opacity: 0.3;
            mix-blend-mode: soft-light;
            pointer-events: none;
        }

        &:is(:nth-child(18n + 1), :nth-child(18n + 9), :nth-child(18n + 14)) {
            --speaker-overview-circle-color: var(--color-kv-spectrum-1);
        }

        &:is(:nth-child(18n + 4), :nth-child(18n + 17), :nth-child(18n + 18)) {
            --speaker-overview-circle-color: var(--color-kv-spectrum-2);
        }

        &:is(:nth-child(18n + 2), :nth-child(18n + 12), :nth-child(18n + 16)) {
            --speaker-overview-circle-color: var(--color-kv-spectrum-3);
        }

        &:is(:nth-child(18n + 5), :nth-child(18n + 10), :nth-child(18n + 15)) {
            --speaker-overview-circle-color: var(--color-kv-spectrum-4);
        }

        &:is(:nth-child(18n + 3), :nth-child(18n + 8), :nth-child(18n + 13)) {
            --speaker-overview-circle-color: var(--color-kv-spectrum-5);
        }

        &:is(:nth-child(18n + 6), :nth-child(18n + 7), :nth-child(18n + 11)) {
            --speaker-overview-circle-color: var(--color-kv-spectrum-6);
        }

        img {
            position: absolute;
            z-index: 1;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center 8px;
            filter: saturate(1.1);
            transform: scale(1.2);
            transform-origin: center;
            transition:
                filter var(--duration-slow) var(--ease-standard),
                transform var(--duration-slow) var(--ease-standard);
        }

        &:hover img {
            transform: scale(1.13);
        }
    }

    @media (max-width: 1399px) {
        h2 {
            .bt-title-highlight {
                font-size: var(--font-size-40);
            }
        }
    }

    @media (max-width: 1199px) {
        .speaker-overview__scroller {
            overflow-x: auto;
            overflow-y: hidden;
            scrollbar-width: none;
            -ms-overflow-style: none;
            overscroll-behavior-inline: contain;
            scroll-snap-type: inline proximity;

            &::-webkit-scrollbar {
                display: none;
                width: 0;
                height: 0;
            }

            &:focus-visible {
                outline: var(--border-width-2) solid var(--color-focus-ring);
                outline-offset: var(--space-2);
            }
        }

        .speaker-overview__grid {
            --speaker-overview-track-width: calc((100% - (var(--bt-speaker-overview-grid-gap) * (var(--speaker-overview-columns) - 1))) / var(--speaker-overview-columns));

            min-width: max-content;
            grid-template-columns: none;
            grid-template-rows: repeat(var(--speaker-overview-rows), max-content);
            grid-auto-columns: max(var(--speaker-overview-card-min-width), var(--speaker-overview-track-width));
        }

        .speaker-overview__card {
            scroll-snap-align: start;
        }

    }

    @media (max-width: 991px) {
        padding: var(--section-padding-y-sm) var(--space-0);

        /* จอนี้การ์ด compact (18) เต็มความกว้างพอดี ให้ expanded (36) ใช้ขนาดการ์ดเท่ากัน
           แต่ยังคง 4 แถวเหมือนเดิม (ไม่แตะ --speaker-overview-rows) แค่ scroll แนวนอนยาวขึ้น */
        &[data-speaker-overview-layout="expanded"] {
            --speaker-overview-card-min-width: var(--bt-speaker-overview-card-min-width);
        }

        .speaker-overview__intro {
            padding-right: calc(var(--bs-gutter-x) * 0.5);
            display: grid;
            grid-template-columns: minmax(0, 0.9fr) minmax(320px, 1.1fr);
            grid-template-areas:
                "eyebrow eyebrow"
                "mark headline"
                "mark event";
            column-gap: var(--space-12);
            align-items: start;
        }

        .speaker-overview__gallery {
            margin-top: var(--space-12);
        }

        .speaker-overview__eyebrow {
            grid-area: eyebrow;
            margin-bottom: var(--space-8);
            font-size: var(--font-size-16);
        }

        .speaker-overview__event-mark {
            grid-area: mark;
            width: 100%;
            max-width: 360px;
            margin-bottom: var(--space-0);
        }

        h2 {
            grid-area: headline;
            font-size: var(--font-size-28);

            .bt-title-highlight {
                font-size: var(--font-size-40);
            }
        }

        .speaker-overview__event-info {
            grid-area: event;
            margin-top: var(--space-6);
        }
    }

    @media (max-width: 767px) {
        --speaker-overview-card-min-width: var(--bt-speaker-overview-card-min-width-sm);

        /* กลับไปใช้ขนาดเดิมของ expanded บนมือถือ ไม่ให้ค่าจาก breakpoint 991px ด้านบนไหลลงมาทับ */
        &[data-speaker-overview-layout="expanded"] {
            --speaker-overview-card-min-width: var(--space-20);
        }

        .speaker-overview__intro {
            display: flex;
            align-items: center;
            text-align: center;
        }

        .speaker-overview__view-switch {
            right: var(--space-16);
            bottom: var(--space-4);
        }

        body:has(.cookie-banner.is-visible) & .speaker-overview__view-switch {
            bottom: calc(var(--space-32) + var(--space-12));
        }

        .speaker-overview__eyebrow {
            justify-content: center;
            margin-bottom: var(--space-6);
            font-size: var(--font-size-14);
        }

        .speaker-overview__event-mark {
            width: min(72%, 360px);
            margin-bottom: var(--space-6);
        }

        h2 {
            font-size: var(--font-size-28);

            .bt-title-highlight {
                font-size: var(--font-size-40);

                &.has-pe {
                    padding-left: var(--space-1);
                    padding-right: var(--space-1);
                }
            }
        }

        .speaker-overview__event-info {
            width: fit-content;
            max-width: 100%;
            margin-top: var(--space-6);
            align-self: center;
            text-align: left;

            p {
                font-size: var(--font-size-16);
            }

            p:last-child {
                font-size: var(--font-size-14);
            }
        }

        .speaker-overview__gallery {
            margin-top: var(--space-10);
            /* padding-right: var(--space-0); */
        }

        .speaker-overview__speaker-count {
            margin-right: var(--space-3);

            strong {
                font-size: var(--font-size-24);
            }

            span {
                font-size: var(--font-size-12);
            }
        }

    }

    @media (max-width: 575px) {
        /* จอนี้บีบการ์ดลงอีกให้สูงแค่ 120px (aspect-ratio 4/5 → กว้าง 96px) ทั้ง compact และ expanded */
        --speaker-overview-card-min-width: var(--space-24);

        &[data-speaker-overview-layout="expanded"] {
            --speaker-overview-card-min-width: var(--space-24);
        }

        /* ล็อกความกว้างการ์ดตรงตาม min-width ไปเลย ไม่ยอมให้ track-width (max()) ดันการ์ดกว้างขึ้นจนสูงเกิน 120px */
        .speaker-overview__grid {
            grid-auto-columns: var(--speaker-overview-card-min-width);
        }

        body:has(.mobile-cta-bar.is-visible) & .speaker-overview__view-switch {
            bottom: calc(var(--space-10) + var(--space-3) + var(--space-5) + max(var(--space-3), env(safe-area-inset-bottom)));
        }

        body:has(.cookie-banner.is-visible) & .speaker-overview__view-switch {
            bottom: calc(var(--space-32) + var(--space-32));
        }

        .speaker-overview__event-mark {
            width: min(82%, 320px);
        }

        h2 {
            font-size: var(--font-size-24);

            .bt-title-highlight {
                font-size: var(--font-size-36);
                ;
            }
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .speaker-overview__card img {
            transition-duration: var(--duration-reduced);
        }

    }
}

@keyframes speaker-overview-scroll-overlay {
    0% {
        opacity: 0;
    }

    12%,
    76% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

/* ---------- Ticket ---------- Comparison layout แบบ editorial ใช้พื้นที่ว่างและเส้นบางแทนกรอบ card */
.ticket {
    --bt-ticket-title-size: var(--section-title-size);
    --bt-ticket-plan-title-size: var(--font-size-32);
    --bt-ticket-plan-title-line-height: var(--section-heading-line-height);
    --bt-ticket-price-size: var(--section-heading-size);
    --bt-ticket-price-line-height: var(--section-heading-line-height);
    --bt-ticket-backdrop-height: 600px;
    --bt-ticket-backdrop-parallax-bleed: calc(var(--bt-ticket-backdrop-height) * 0.15);
    --bt-ticket-plans-width: 1400px;

    position: relative;
    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);

    .ticket__backdrop-clip {
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 0;
        height: var(--bt-ticket-backdrop-height);
        overflow: hidden;
        pointer-events: none;
    }

    .ticket__backdrop {
        position: absolute;
        top: calc(var(--bt-ticket-backdrop-parallax-bleed) * -1);
        left: 0;
        width: 100%;
        height: calc(100% + var(--bt-ticket-backdrop-parallax-bleed) * 2);
        object-fit: cover;
        object-position: center;
        will-change: transform;
    }

    @media (max-width: 767px) {
        .ticket__backdrop {
            object-position: 72% center;
        }
    }

    &::before {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        z-index: 0;
        height: var(--bt-ticket-backdrop-height);
        background: linear-gradient(90deg, rgba(17, 19, 24, 0.9) 0%, rgba(17, 19, 24, 0.25) 60%, rgba(17, 19, 24, 0) 80%);
        pointer-events: none;
    }

    .ticket__inner {
        position: relative;
        z-index: 1;
    }

    /* พื้นขาวย้ายไปอยู่ที่ .ticket__plan แต่ละใบแทน (การ์ดมีช่องว่างคั่นแล้ว
       ไม่ได้ต่อกันสนิทเหมือนก่อน จึงไม่ต้องมีแผ่นทึบแสงผืนเดียวคลุมทั้งแถว) */
    .ticket__plans {
        position: relative;
        z-index: 1;
        width: min(calc(100% - var(--space-12)), var(--bt-ticket-plans-width));
        margin-right: auto;
        margin-left: auto;
    }

    .ticket__heading h2 {
        color: var(--color-text-inverse);
    }

    .ticket__heading .bt-section-subtext {
        color: var(--color-text-inverse-muted);
    }

    .ticket__header {
        --bs-gutter-y: var(--space-6);

        align-items: end;
        margin-bottom: var(--section-padding-y-sm);
    }

    .ticket__plan-index {
        margin: 0 0 var(--space-2);
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    .ticket__heading h2 {
        margin: 0;
        font-size: var(--bt-ticket-title-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-title-line-height);
        letter-spacing: var(--section-title-tracking);
        text-wrap-style: balance;
    }

    .ticket__intro {
        margin: 0;
        color: var(--color-text-muted);
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
    }

    /* เว้นระยะระหว่างการ์ดแทนเส้นคาดที่ติดกันแบบเดิม (gap เดียวใช้ได้ทั้งเรียงแถว
       บน desktop และซ้อนเป็นคอลัมน์บนจอเล็ก เพราะ .ticket__plans เป็น flex row ของ
       bootstrap ที่ wrap ได้) */
    .ticket__plans {
        gap: var(--space-4);
        padding: var(--space-6) 0 0;
        align-items: flex-start;
        justify-content: center;
        border-radius: var(--bt-ticket-benefit-radius);
    }

    /* col-lg-4 ของ bootstrap fix width ไว้ที่ 33.3333% พอมี gap แนวนอนเพิ่มเข้ามา
       3 คอลัมน์ + gap 2 ช่องจะกว้างรวมเกิน 100% การ์ดใบสุดท้ายเลยตกไปอยู่แถวใหม่
       ต้องคำนวณ width หัก gap ออกเองแทนค่า 33.3333% เดิม */
    @media (min-width: 992px) {
        .ticket__plan {
            width: calc((100% - var(--space-4) * 2) / 3);
        }
    }

    /* แต่ละใบยืนเป็นการ์ดของตัวเอง (กรอบรอบ + มุมโค้ง + พื้นหลัง) แทนที่จะอาศัยเส้นคาด
       คั่นระหว่างใบที่ชนกันแบบเดิม เพราะตอนนี้มีช่องว่างจริงคั่นอยู่แล้ว */
    .ticket__plan {
        position: relative;
        min-width: 0;
        padding: var(--space-12) var(--space-8);
        display: flex;
        flex-direction: column;
        border-top: var(--border-width-6) solid transparent;
        border-radius: var(--card-radius);
        background: var(--color-surface-page);
        transition: background-color var(--duration-standard) var(--ease-standard);
    }

    /* พื้นผิว grain: noise แบบ feTurbulence เบลนด์ overlay ทับการ์ดราคาทั้ง 3 ใบแบบบาง ๆ
       ความทึบต่ำจงใจ ให้แค่รู้สึกถึงพื้นผิวโดยไม่รบกวนการอ่านตัวเลข/ราคา */
    .ticket__plan::after {
        content: '';
        position: absolute;
        inset: 0;
        z-index: 2;
        background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
        opacity: 0.05;
        mix-blend-mode: overlay;
        pointer-events: none;
    }

    /* ใบข้าง ๆ (Master Class/Explorer) เตี้ยกว่าใบ Ultimate ที่มีแถบริบบอนแนะนำเพิ่มขึ้น
       มา ดัน margin-top ลงมาให้ขอบบนของใบข้างอยู่ต่ำกว่าใบ Ultimate แทนที่จะเสมอกัน
       ตอกย้ำว่า Ultimate เป็นใบเด่น */
    .ticket__plan--master,
    .ticket__plan--explorer {
        margin-top: calc(var(--space-16) - var(--space-2));
    }

    .ticket__plan--explorer {
        order: 1;
    }

    .ticket__plan--ultimate {
        order: 2;

        .ticket__plan-header {
            margin-top: calc(var(--space-10) + 2px);
        }
    }

    .ticket__plan--master {
        order: 3;
    }

    .ticket__plan--ultimate {
        padding-top: var(--space-8);
        z-index: 1;
        /* ต้องระบุ border-style เองเพราะ .ticket__plan ฐานตั้ง border เป็น none ไว้
           overflow: hidden ใช้ตัดมุม ribbon และ glow ให้โค้งตามการ์ดพอดี */
        border: var(--border-width-2) solid #19274A;
        border-top: none;
        overflow: hidden;
        /* ทินต์เดิมเคยทึบ 100% (mix กับสีทึบ ไม่ใช่ transparent) พอจะใส่รูป ultimate-bg.webp
           เป็นพื้นหลังด้วย ต้องลดความทึบของทินต์ลง (mix กับ transparent แทน) ให้รูปโปร่งผ่านออกมาเห็นได้ */
        background:
            linear-gradient(color-mix(in srgb, #ffffff 72%, transparent), color-mix(in srgb, var(--color-surface-page) 64%, transparent)),
            url('../images/ultimate-bg.webp') center / cover no-repeat;
        transition: all var(--duration-standard) var(--ease-standard);
        /* box-shadow:
            0 18px 48px rgba(17, 19, 24, 0.10),
            0 0 0 1px var(--alpha-ink-06); */

        &::before {
            content: '';
            position: absolute;
            inset: 0;
            z-index: -1;
            background:
                radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-kv-spectrum-1) 12%, transparent) 0%, transparent 34%),
                radial-gradient(circle at 88% 10%, color-mix(in srgb, var(--color-kv-spectrum-5) 10%, transparent) 0%, transparent 30%);
            opacity: 0.64;
            pointer-events: none;
        }

        &:hover {
            background:
                linear-gradient(color-mix(in srgb, #ffffff 64%, transparent), color-mix(in srgb, var(--color-surface-page) 56%, transparent)),
                url('../images/ultimate-bg.webp') center / cover no-repeat;
        }
    }

    /* แถบริบบอนบนสุดของใบ Ultimate เท่านั้น ดึงชิดขอบทั้ง 3 ด้าน (บน-ซ้าย-ขวา) ด้วย
       margin ลบเท่ากับ padding ของ .ticket__plan (var(--space-8)) ให้ทับเนื้อในเดิม
       จนสุดขอบด้านในของกรอบสเปกตรัมพอดี มุมบนโค้งเท่ากับ card-radius หักความหนาของ
       border ออก (มุมด้านในของกรอบย่อมโค้งน้อยกว่ามุมด้านนอกเสมอ) */
    .ticket__plan-ribbon {
        position: absolute;
        inset: 0 -1px auto 0;
        width: auto;
        height: max-content;
        isolation: isolate;
        overflow: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        /* margin: calc(var(--space-8) * -1) calc(var(--space-8) * -1) var(--space-6); */
        padding: var(--space-3) var(--space-4);
        background: linear-gradient(180deg, #19274A 0%, #020B1E 100%);
        color: var(--color-text-inverse);
        font-size: var(--font-size-18);
        font-weight: var(--font-weight-regular);
        letter-spacing: 0.02em;

        span {
            position: relative;
            z-index: 1;
            display: inline-block;
            color: transparent;
            background: linear-gradient(105deg,
                    #c9d1df 0%,
                    #f7f9ff 26%,
                    #ffffff 38%,
                    #b7c0cf 46%,
                    #ffffff 54%,
                    #f7f9ff 66%,
                    #c9d1df 100%);
            background-size: 280% 100%;
            -webkit-background-clip: text;
            background-clip: text;
            text-shadow:
                0 0 0.03em rgba(255, 255, 255, 0.18);
            animation: ticket-ribbon-text-glow 4.6s ease-in-out infinite;
        }

        span::after {
            content: none;
        }

        &::before,
        &::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        &::before {
            inset: calc(var(--space-4) * -1) var(--space-8) auto;
            z-index: -1;
            height: calc(100% + var(--space-8));
            background:
                radial-gradient(ellipse at 50% 0%, rgba(244, 221, 178, 0.3) 0%, rgba(214, 171, 104, 0.16) 36%, transparent 74%);
            filter: blur(10px);
            opacity: 0.94;
        }

        &::after {
            top: 0;
            left: 50%;
            z-index: -1;
            width: min(72%, 280px);
            height: var(--border-width-1);
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(244, 221, 178, 0.18) 14%,
                    rgba(231, 201, 151, 0.82) 50%,
                    rgba(214, 171, 104, 0.22) 86%,
                    transparent 100%);
            box-shadow:
                0 0 14px rgba(231, 201, 151, 0.34),
                0 0 24px rgba(214, 171, 104, 0.16);
            opacity: 0.86;
            transform: translateX(-50%);
        }
    }

    @media (prefers-reduced-motion: reduce) {
        .ticket__plan-ribbon span {
            animation: none;
        }
    }

    .ticket__plan-header {
        margin-bottom: calc(var(--space-6) + var(--space-1));
    }

    /* ไอคอนประจำแพ็กเกจ: รูปมงกุฎ/เพชร/เข็มทิศ (ultimate/master/explorer)
       ทั้ง 3 ใบ มีแสง/เงาในตัวรูปอยู่แล้ว ไม่ต้องเติม filter engrave แบบไอคอนเส้นเดิม */
    .ticket__plan-icon {
        width: 44px;
        height: 44px;
        margin-bottom: var(--space-4);
        object-fit: contain;
        filter: saturate(1.5);
    }

    .ticket__plan-icon--ultimate {
        width: 80px;
        height: 80px;
    }

    .ticket__plan-header h3 {
        margin: 0;
        font-family: 'Baskervville', var(--font-family-base);
        font-size: var(--bt-ticket-plan-title-size);
        font-weight: var(--font-weight-regular);
        /* line-height: var(--bt-ticket-plan-title-line-height); */
        letter-spacing: var(--section-heading-tracking);
        text-transform: uppercase;
    }

    .ticket__plan-note {
        margin: var(--space-3) var(--space-0) var(--space-0);
        color: var(--color-text-muted);
        font-size: var(--section-topic-size-xs);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
    }

    .ticket__prices {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-auto-rows: var(--bt-ticket-price-equal-height, auto);
        border-top: var(--rule-width-subtle) solid var(--color-border-editorial);
        border-bottom: var(--rule-width-subtle) solid var(--color-border-editorial);
    }

    .ticket__price {
        appearance: none;
        width: 100%;
        min-height: var(--bt-ticket-price-equal-height, auto);
        min-width: 0;
        padding: var(--space-6);
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        justify-content: flex-start;
        border: 0;
        border-radius: 0;
        color: inherit;
        background: transparent;
        font: inherit;
        text-align: left;
        cursor: pointer;
        transition:
            background-color var(--duration-standard) var(--ease-standard),
            box-shadow var(--duration-standard) var(--ease-standard);

        &:hover {
            background: color-mix(in srgb, var(--color-blue-100) 55%, transparent);
        }

        &:disabled {
            cursor: not-allowed;

            strong {
                color: var(--color-text-muted);
            }
        }

        &:disabled:hover {
            background: transparent;
        }

        &:focus-visible {
            position: relative;
            z-index: 1;
            outline: var(--border-width-2) solid var(--color-focus-ring);
            outline-offset: calc(var(--border-width-2) * -1);
        }

        &.is-active {
            position: relative;
            z-index: 1;
            background: color-mix(in srgb, var(--color-blue-100) 72%, transparent);
            box-shadow: inset 0 0 0 var(--border-width-1) var(--color-blue-400);

            strong {
                color: var(--color-blue-600);
                font-weight: var(--font-weight-medium);
            }
        }

        &:not(:first-child) {
            border-left: var(--rule-width-subtle) solid var(--color-border-editorial);
        }

        .ticket__price-day {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--color-text-muted);
            font-size: var(--font-size-14);
            font-weight: var(--font-weight-medium);
            line-height: var(--section-small-line-height);
        }

        &:not(:disabled) .ticket__price-day {
            width: 100%;
        }

        &:not(:disabled) .ticket__price-day::after {
            content: "";
            width: var(--space-4);
            height: var(--space-4);
            margin-left: auto;
            flex: 0 0 auto;
            border: var(--border-width-1) solid var(--color-border-default);
            border-radius: var(--radius-round);
            background: var(--color-neutral-0);
            box-shadow: inset 0 0 0 var(--border-width-2) var(--color-neutral-0);
        }

        &.is-active:not(:disabled) .ticket__price-day::after {
            background: var(--color-blue-600);
            box-shadow:
                inset 0 0 0 var(--border-width-2) var(--color-neutral-0),
                0 0 0 var(--border-width-1) var(--color-blue-600);
        }

        small {
            display: inline-flex;
            align-items: center;
            gap: var(--space-2);
            color: var(--color-text-muted);
            font-size: var(--font-size-14);
            font-weight: var(--font-weight-medium);
            line-height: var(--section-small-line-height);
        }

        /* ราคาเดิม + ป้าย SAVE วางแถวเดียวกัน ระยะด้านบนย้ายมาอยู่ที่แถวนี้แทนราคาเดิม
           ช่องราคาแคบ (เช่นมือถือที่วางสองช่องคู่กัน) ให้ป้ายตกลงบรรทัดถัดไป แทนการบีบราคาเดิมให้หักบรรทัด */
        /* แถวกว้างเต็มช่อง แล้วดันป้ายไปชิดขวา ตรงแนวเดียวกับปุ่มเลือก (วงกลม) ของ .ticket__price-day */
        .ticket__price-compare {
            width: 100%;
            margin-top: var(--space-3);
            display: inline-flex;
            flex-wrap: nowrap;
            align-items: center;
            gap: var(--space-1);
        }

        .ticket__price-save {
            margin-left: auto;
        }

        .ticket__price-original {
            color: var(--color-text-inverse-muted);
            white-space: nowrap;
            font-size: var(--font-size-14);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-small-line-height);
            text-decoration-thickness: var(--border-width-1);
        }

        strong {
            margin-top: var(--space-2);
            font-size: var(--bt-ticket-price-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--bt-ticket-price-line-height);
            letter-spacing: 0;
            white-space: nowrap;
        }

        .ticket__price-compare+strong {
            margin-top: var(--space-0);
        }

        .ticket__price-note {
            min-height: calc(var(--section-small-line-height) * 1em);
            margin-top: var(--space-2);
            text-align: left;
            font-weight: var(--font-weight-regular);
        }

        &.ticket__price--unavailable strong {
            font-size: var(--font-size-28);
        }
    }

    .ticket__access {
        margin: var(--space-6) 0 0;

        >div {
            min-height: var(--space-16);
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: var(--space-4);
            padding: var(--space-3) var(--space-0);
            border-top: var(--rule-width-subtle) solid var(--color-border-editorial);

            &:first-child {
                border-top: 0;
            }

        }

        dt,
        dd {
            margin: 0;
            font-size: var(--section-small-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-body-line-height);
        }
    }

    /* ไอคอนขนาดเล็กช่วยเชื่อมชื่อในตารางกับรายละเอียดแต่ละรูปแบบด้านล่าง */
    .ticket__access-label {
        min-width: 0;
        flex: 1 1 auto;
        display: flex;
        align-items: flex-start;
        gap: var(--space-2);

        >.bt-icon {
            flex: 0 0 auto;
            width: var(--bt-ticket-access-icon-size);
            height: var(--bt-ticket-access-icon-size);
            display: grid;
            place-items: center;
            padding: var(--space-1);
            color: var(--color-blue-600);
            border-radius: var(--radius-1);
            /* background: var(--color-blue-100);
            border: 1px solid var(--color-blue-200); */
            stroke-width: 1.75;
        }

        .ticket__access-copy {
            min-width: 0;
            display: flex;
            flex-direction: column;
            gap: var(--space-1);
        }

        .ticket__access-title {
            color: var(--color-text-primary);
            font-weight: var(--font-weight-medium);

            small {
                color: var(--color-text-muted);
                font-size: inherit;
                font-weight: var(--font-weight-medium);
            }
        }

        .ticket__access-description {
            color: var(--color-text-muted);
            font-size: var(--font-size-12);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-small-line-height);
        }
    }

    .ticket__status {
        min-width: var(--space-8);
        display: inline-flex;
        align-items: center;
        justify-content: flex-end;
        gap: var(--space-1);
        color: var(--color-text-muted);
        text-align: right;

        .bt-icon {
            font-size: var(--bt-icon-size);
            stroke-width: 2.25;
        }

        &.ticket__status--badge {
            flex: 0 0 auto;
            min-width: var(--space-12);
            min-height: var(--space-5);
            padding: var(--space-0) var(--space-2);
            border-radius: var(--pill-radius);
            border: var(--rule-width-subtle) solid var(--color-blue-200);
            background: var(--color-blue-100);
            color: var(--color-blue-400);
            font-size: var(--section-tag-size-sm);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-body-line-height);
        }
    }

    .ticket__action {
        width: 100%;
        margin: var(--space-6) 0 0;

        /* ปุ่ม Ultimate ใช้สีดำล้วน ไม่มีขอบ spectrum */
        &.bt-action-button--primary {
            border-color: var(--bt-action-fill);
            background: var(--bt-action-fill);
        }
    }

    .ticket__action-lock {
        display: block;
        margin: var(--space-6) 0 0;
        cursor: not-allowed;

        .ticket__action {
            margin: 0;
            pointer-events: none;
            cursor: not-allowed;
        }
    }

    .ticket__benefits {
        --bt-ticket-benefit-list-gap-x: var(--space-0);
        --bt-ticket-benefit-list-gap-y: var(--space-0);

        margin-top: var(--section-padding-y-sm);
        padding: var(--bt-ticket-benefit-block-padding-y) var(--bt-ticket-benefit-block-padding-x);
        border-radius: var(--bt-ticket-benefit-radius);
        background: var(--bt-ticket-benefit-bg);
        --bs-gutter-x: 0;

        h3 {
            margin: 0;
            font-size: var(--section-topic-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-topic-line-height);
            letter-spacing: 0;
            text-align: center;
        }

        ul {
            margin: 0;
            padding: 0;
            list-style: none;
            row-gap: var(--bt-ticket-benefit-list-gap-y);
            column-gap: var(--bt-ticket-benefit-list-gap-x);
        }

        li {
            position: relative;
            flex: 0 0 25%;
            max-width: 25%;
            min-width: 0;
            padding: 0 var(--bt-ticket-benefit-padding-x);
            display: grid;
            align-content: start;
            justify-items: center;
            gap: var(--space-4);
            color: var(--color-text-muted);
            font-size: var(--bt-ticket-benefit-text-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-body-line-height);
            text-align: center;

            &::before {
                content: '';
                position: absolute;
                top: 50%;
                left: 0;
                width: var(--bt-ticket-benefit-rule-length);
                height: calc(var(--bt-ticket-benefit-rule-length) / 9.13);
                background: url('../images/line-star.webp') center / contain no-repeat;
                transform: translate(-50%, -50%) rotate(90deg);
            }

            &:first-child::before {
                display: none;
            }

            .ticket__benefit-icon {
                width: var(--bt-ticket-benefit-icon-size);
                height: var(--bt-ticket-benefit-icon-size);
                display: block;
                filter: var(--bt-ticket-benefit-icon-shadow);
                object-fit: contain;
                filter: saturate(1.5);
            }

            span {
                color: var(--bt-ticket-benefit-text-color);
                font-size: var(--bt-ticket-benefit-text-size);
                font-weight: var(--bt-ticket-benefit-text-weight);
                text-wrap-style: balance;
            }
        }
    }

    @media (max-width:1399px) {
        --bt-ticket-plan-title-size: var(--font-size-28);
        --bt-ticket-price-size: var(--font-size-32);

        .ticket__plan {
            padding: var(--space-10) var(--space-6);
        }

        .ticket__plan--ultimate {
            padding: var(--space-6);
        }

        .ticket__price {
            strong {
                margin-top: var(--space-1);
            }

            /* ช่องราคาแคบลง ให้ป้าย SAVE ลงบรรทัดใต้ราคาเดิม ชิดซ้ายแนวเดียวกัน */
            .ticket__price-compare {
                flex-wrap: wrap;
                gap: var(--space-2);
            }

            .ticket__price-save {
                margin-left: 0;
            }
        }
    }

    @media (max-width:1199px) {
        --bt-ticket-backdrop-height: 540px;
        --bt-ticket-price-size: var(--font-size-36);

        .ticket__plan-header h3 {
            display: flex;
            flex-direction: column;
            gap: var(--space-2);
        }

        .ticket__prices {
            grid-template-columns: 1fr;
        }

        .ticket__price {
            /* justify-content: space-between; */

            &:not(:first-child) {
                border-left: none;
                border-top: var(--rule-width-subtle) solid var(--color-border-editorial);
            }

            span,
            small {
                font-size: var(--font-size-16);
            }
        }

        .ticket__access {
            >div {
                gap: var(--space-3);
                flex-direction: column;
                align-items: flex-start;
            }
        }

        .ticket__status {
            &.ticket__status--badge {
                margin-left: 32px;
            }
        }

        .ticket__benefits {
            --bt-ticket-benefit-list-gap-x: var(--space-6);
            --bt-ticket-benefit-list-gap-y: var(--space-10);

            h3 {
                margin-bottom: var(--space-8);
                text-align: start;
            }

            ul {
                row-gap: var(--bt-ticket-benefit-list-gap-y);
            }

            li {
                flex: 0 0 calc((100% - var(--bt-ticket-benefit-list-gap-x)) / 2);
                max-width: calc((100% - var(--bt-ticket-benefit-list-gap-x)) / 2);
                padding: 0 var(--bt-ticket-benefit-padding-x-md);
                display: flex;
                align-items: center;
                justify-content: flex-start;
                gap: var(--space-4);
                text-align: start;

                &::before {
                    left: calc(var(--bt-ticket-benefit-list-gap-x) / -2);
                    width: var(--bt-ticket-benefit-rule-length-sm);
                    height: calc(var(--bt-ticket-benefit-rule-length-sm) / 9.13);
                }

                &:nth-child(odd)::before {
                    display: none;
                }

                &:nth-child(even)::before {
                    display: block;
                }

                .ticket__benefit-icon {
                    width: var(--bt-ticket-benefit-icon-size-sm);
                    height: var(--bt-ticket-benefit-icon-size-sm);
                    flex: 0 0 auto;
                }

                span {
                    min-width: 0;
                    text-align: start;
                }
            }
        }
    }

    @media (max-width:991px) {
        --bt-ticket-backdrop-height: 440px;
        --bt-ticket-plan-title-size: var(--font-size-32);
        --bt-ticket-price-size: var(--font-size-40);

        padding: var(--section-padding-y-sm) 0;

        &::before {
            background: linear-gradient(180deg,
                    rgba(17, 19, 24, 0.50) 0%,
                    rgba(17, 19, 24, 0.34) 60%,
                    rgba(17, 19, 24, 0.12) 100%);
        }

        .ticket__header {
            margin-bottom: var(--space-16);
        }

        .ticket__plan-header h3 {
            display: block;
            gap: var(--space-0);
            font-size: var(--bt-ticket-plan-title-size);
        }

        .ticket__prices {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .ticket__price {
            &:not(:first-child) {
                border-left: var(--rule-width-subtle) solid var(--color-border-editorial);
                border-top: none;
            }


            strong {
                margin-top: var(--space-2);
            }

            span,
            small {
                flex-direction: row;
                align-items: center;
                gap: var(--space-3);
                font-size: var(--font-size-16);
            }
        }

        .ticket__access {
            >div {
                gap: var(--space-4);
                flex-direction: row;
                align-items: center;
            }
        }

        .ticket__status {
            &.ticket__status--badge {
                margin-left: 0;
            }
        }

        /* จอนี้ลงไปการ์ดเรียงเป็นคอลัมน์เดียว ใช้ gap แนวตั้งคั่นให้อ่านง่าย
           ส่วน Ultimate ยังคงกรอบ spectrum ครบทั้ง 4 ด้าน */
        .ticket__plans {
            gap: var(--space-6);
            padding: var(--space-0);
        }

        .ticket__plan {
            padding: var(--space-12) var(--space-8);
            border-radius: var(--radius-0);
            /* border-right: 0;
            border-bottom: 0;
            border-left: 0; */

            &:not(:first-child) {
                border-top: var(--rule-width-subtle) solid var(--color-border-faint);
            }
        }

        .ticket__plan--master {
            margin-top: var(--space-0);
        }

        .ticket__plan--explorer {
            margin-top: var(--space-0);
        }


        .ticket__plan--ultimate {
            order: 1;
            padding: var(--space-8);
            border-radius: var(--radius-1);
            /* border: var(--border-width-6) solid transparent; */
            border-top: none !important;
        }

        .ticket__plan--master {
            order: 3;
            border-top: var(--rule-width-subtle) solid var(--color-border-faint);
            margin-top: var(--space-0);
        }

        .ticket__plan--explorer {
            order: 2;
        }

        .ticket__plan-header {
            margin-bottom: var(--space-8);
        }

        .ticket__benefits {
            padding: var(--bt-ticket-benefit-block-padding-y) var(--bt-ticket-benefit-block-padding-x);

            h3 {
                margin-bottom: var(--space-8);
            }

            li {
                gap: var(--space-6);

                &:nth-child(odd) {
                    padding-left: var(--space-0);
                }

                &:nth-child(even) {
                    padding-right: var(--space-0);
                }
            }
        }

    }

    @media (max-width:575px) {
        --bt-ticket-backdrop-height: 360px;
        --bt-ticket-title-size: var(--section-topic-size);
        --bt-ticket-plan-title-size: var(--font-size-28);
        --bt-ticket-plan-title-line-height: var(--section-topic-line-height);
        --bt-ticket-price-size: var(--font-size-32);
        --bt-ticket-benefit-text-size: var(--font-size-14);

        .ticket__plans {
            width: min(calc(100% - var(--space-6)), var(--bt-ticket-plans-width));
        }

        .ticket__plan-header {
            margin-bottom: var(--space-6);
        }

        .ticket__plan-header h3 {
            font-size: var(--bt-ticket-plan-title-size);
        }

        .ticket__plan-index {
            margin: 0 0 var(--space-1);
            font-size: var(--section-small-size);
        }

        .ticket__price {
            padding: var(--space-4);
        }

        .ticket__price strong {
            margin-top: var(--space-0);
            font-size: var(--bt-ticket-price-size);
        }

        .ticket__plan--master .ticket__prices {
            grid-auto-rows: auto;
        }

        /* บัตร Ultimate/Explorer ไม่ต้องสูงเท่ากันข้ามการ์ดแล้ว (ค่า --bt-ticket-price-equal-height จาก js/ticket-price-selector.js)
           แต่ละการ์ดสูงตามเนื้อหาของตัวเอง ส่วน Master Class (รอประกาศ) ใช้กฎของตัวเองด้านบน */
        .ticket__plan--ultimate .ticket__prices,
        .ticket__plan--explorer .ticket__prices {
            grid-auto-rows: auto;
        }

        .ticket__plan--ultimate .ticket__price,
        .ticket__plan--explorer .ticket__price {
            min-height: auto;
        }

        .ticket__plan--master .ticket__price--unavailable {
            min-height: auto;
            padding: var(--space-4);

            strong {
                margin-top: var(--space-3);
                font-size: var(--font-size-24);
                line-height: 1.15;
            }
        }

        .ticket__plan {
            padding: var(--space-8) var(--space-5);
        }

        /* .ticket__plan--master {
            margin-top: var(--space-8);
        } */

        .ticket__price {
            
            span,
            small {
                font-size: var(--font-size-14);
                flex-wrap: wrap;
                gap: var(--space-2);
            }
        }

        .ticket__access {
            margin: var(--space-4) var(--space-0) var(--space-0);

            /* >div {
                min-height: var(--space-10);
            } */
        }

        .ticket__status .bt-icon {
            font-size: var(--font-size-16);
        }

        .ticket__benefits {
            --bt-ticket-benefit-list-gap-y: var(--space-8);

            padding: var(--bt-ticket-benefit-block-padding-y-sm) var(--bt-ticket-benefit-block-padding-x-sm);

            h3 {
                font-size: var(--section-topic-size-sm);
                margin-bottom: var(--space-6);
            }

            ul {
                row-gap: var(--bt-ticket-benefit-list-gap-y);
            }

            li {
                flex-direction: column;
                align-items: flex-start;
                align-content: start;
                padding: 0 var(--bt-ticket-benefit-padding-x-sm);
                gap: var(--space-3);

                span {
                    text-align: start;
                    min-width: 0;
                }

                &:nth-child(even) {
                    padding-left: var(--space-6);
                }

                .ticket__benefit-icon {
                    width: var(--bt-ticket-benefit-icon-size-xs);
                    height: var(--bt-ticket-benefit-icon-size-xs);
                    flex: 0 0 auto;
                }
            }
        }

    }

    @media (max-width:425px) {
        .ticket__price {

            /* ช่องราคาแคบลง ให้ป้าย SAVE ลงบรรทัดใต้ราคาเดิม ชิดซ้ายแนวเดียวกัน */
            .ticket__price-compare {
                margin-bottom: var(--space-1);
            }
        }
    }

    @media (max-width:390px) {
        .ticket__price .ticket__price-day {
            flex-wrap: nowrap;
            gap: 2px;
        }
    }
}

/* ---------- Agenda ----------
   ตารางกำหนดการแบบ editorial เน้นลำดับเวลา พื้นที่ว่าง และเส้นบาง */
.agenda {
    position: relative;
    scroll-margin-top: calc(var(--header-height) - var(--space-2));
    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);
    --agenda-day-label-size: var(--font-size-24);
    --agenda-day-label-line-height: 56px;
    --agenda-day-label-weight: var(--font-weight-regular);
    --agenda-day-label-color: var(--color-text-inverse-muted);
    --agenda-day-label-active-size: var(--font-size-48);
    --agenda-day-label-active-line-height: var(--section-topic-line-height);
    --agenda-day-label-active-weight: var(--font-weight-regular);
    --agenda-day-label-active-color: var(--color-text-primary);
    --agenda-day-details-size: var(--section-body-size);
    --agenda-day-details-line-height: var(--section-body-line-height);
    --agenda-day-details-weight: var(--font-weight-regular);
    --agenda-day-details-color: var(--color-text-muted);
    --agenda-day-details-active-size: var(--agenda-day-details-size);
    --agenda-day-details-active-line-height: var(--agenda-day-details-line-height);
    --agenda-day-details-active-weight: var(--agenda-day-details-weight);
    --agenda-day-details-active-color: var(--agenda-day-details-color);
    --agenda-day-switch-details-gap: var(--space-3);
    --agenda-sticky-gap: var(--space-6);
    --agenda-sticky-top: calc(var(--header-height) + var(--agenda-sticky-gap));
    --agenda-stage-tabs-height: var(--touch-target-md);
    --agenda-day-sticky-header-height: var(--agenda-day-panel-header-height);
    --agenda-day-panel-header-height: calc(var(--space-12) + var(--space-6));

    &.ticket::before {
        content: none;
    }

    /* margin-bottom ต้องไม่แคบกว่าฉากขาว ::before ของ .agenda__tabs (บรรทัดล่าง)
       ที่ยื่นขึ้นมาปิดพื้นที่เหนือแถบ sticky สูง calc(header-height + space-6)
       เท่ากันเป๊ะ — ถ้าช่องว่างตรงนี้แคบกว่านั้น ฉากขาวจะยื่นทับหัวข้อด้านบน */
    .agenda__section-header {
        margin-bottom: calc(var(--header-height) + var(--space-6));
    }

    .agenda__section-header h2 {
        max-width: 920px;
        margin: 0;
        font-size: var(--section-title-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-title-line-height);
        letter-spacing: 0;
    }

    /* align-items: start สำคัญ — ถ้าคอลัมน์ sidebar ถูกยืดเต็มความสูงแถว
       กล่องของมันจะสูงเท่าตาราง ทำให้ sticky ไม่มีระยะให้เลื่อน */
    .agenda__layout {
        align-items: start;
    }

    .agenda__inner {
        scroll-margin-top: calc(var(--header-height) + var(--space-6));
    }

    /* Day 1/Day 2 มีแถบแท็บ Stage sticky ของตัวเอง จึงต้องเผื่อระยะเท่ากับที่
       .agenda__panel ใช้ ไม่ใช่แค่ใต้ header เฉย ๆ ไม่งั้นคลิกสลับวันแล้วหัวตาราง
       จะโผล่ไปโดนแถบแท็บบัง */
    .agenda__day-panel {
        scroll-margin-top: calc(var(--agenda-sticky-top) + var(--agenda-day-panel-header-height) + var(--touch-target-md) + var(--rule-width-subtle));
        padding-left: var(--space-12);
        border-radius: var(--radius-1);
    }

    .agenda__day-panel-header {
        position: sticky;
        top: var(--agenda-sticky-top);
        z-index: 3;
        height: var(--agenda-day-panel-header-height);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-0) var(--space-8);
        color: var(--color-text-muted);
        font-size: var(--section-body-size);
        line-height: var(--section-body-line-height);
        background: var(--color-surface-page);
    }

    /* ปิดช่องว่างระหว่าง site header กับหัววันที่ ไม่ให้ข้อมูลตารางที่เลื่อนผ่าน
       มองเห็นลอดขึ้นมา โดยยังคง breathing room เดิมของ layout ไว้ */
    .agenda__day-panel-header::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: var(--agenda-sticky-gap);
        background: var(--color-surface-page);
        pointer-events: none;
    }

    .agenda__day-panel-date,
    .agenda__day-panel-time {
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-medium);
    }

    /* Day 1 กับ Day 2 อยู่ในตารางต่อกันตรง ๆ ไม่งั้นดูเหมือนตารางเดียวยาวต่อเนื่อง
       เว้นระยะ + ขีดคั่นเข้าไปให้เห็นชัดว่าขึ้นวันใหม่แล้ว (ตัวสลับวันด้านข้างบอก
       อยู่แล้วว่าเป็นวันไหน แต่คนละองค์ประกอบกัน ตรงนี้ต้องอ่านออกในตัวมันเองด้วย)
       :not([hidden]) ทั้งสองฝั่งกันไว้ไม่ให้กระทบจอ ≤991px ที่โชว์ทีละวัน — วันที่
       ถูกซ่อนอยู่ตัดคู่ sibling ที่ตรงเงื่อนไขไปเลย วันที่เหลือโชว์อยู่คนเดียวเลย
       ไม่มีระยะ/ขีดคั่นเผื่อไว้ด้านบนแบบผิดที่ */
    .agenda__day-panel:not([hidden])+.agenda__day-panel:not([hidden]) {
        margin-top: var(--space-32);
        /* padding-top: var(--space-16);
        border-top: var(--rule-width-subtle) solid var(--color-border-editorial); */
    }

    .agenda__days {
        min-width: 0;
    }

    .agenda__eyebrow {
        margin: 0 0 var(--space-2);
        color: var(--color-text-muted);
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    /* sidebar เป็นคอลัมน์จริงในแถว จึงมีความสูงจริงให้ browser ใช้คำนวณจุดปล่อย
       (เดิมเป็น overlay height:0 ทำให้ค้างเลยขอบ section ไปทับ section ถัดไป) */
    .agenda__day-switcher {
        position: sticky;
        top: calc(var(--header-height) + var(--space-6));
        z-index: 2;
        align-self: start;
        min-width: 0;
    }

    /* แถวสูงตามเนื้อหาจริง ไม่ล็อกค่าคงที่ ไม่งั้นวันที่ไม่ได้เลือก (เหลือแค่บรรทัดเดียว)
       จะทิ้งช่องว่างค้างไว้ ความสูงรวมยังเท่าเดิมทั้งสองสถานะ เพราะส่วนที่ขยาย
       ย้ายจากวันหนึ่งไปอีกวันหนึ่งพอดี จึงไม่เกิดการกระตุก */
    .agenda__day-switcher-inner {
        display: grid;
        justify-items: start;
        gap: var(--space-6);
    }

    .agenda__day-switch {
        position: relative;
        z-index: 1;
        display: block;
        align-self: start;
        width: fit-content;
        min-width: 0;
        padding: 0;
        color: var(--agenda-day-label-color);
        font-size: var(--agenda-day-label-size);
        font-weight: var(--agenda-day-label-weight);
        line-height: var(--agenda-day-label-line-height);
        letter-spacing: 0;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            color var(--duration-base) var(--ease-standard),
            opacity var(--duration-base) var(--ease-standard);

        &:hover,
        &:focus-visible {
            color: var(--agenda-day-label-active-color);
        }

        &[aria-current='true'] {
            color: var(--agenda-day-label-active-color);
        }

        &:focus-visible {
            outline: var(--border-width-2) solid var(--color-focus-ring);
            outline-offset: var(--space-2);
        }
    }

    .agenda__day-switch-label {
        display: block;
        font-size: var(--agenda-day-label-size);
        line-height: var(--line-height-normal);
        transition:
            font-size var(--duration-base) var(--ease-standard),
            line-height var(--duration-base) var(--ease-standard),
            color var(--duration-base) var(--ease-standard);
    }

    /* ใช้ 0fr → 1fr แทน max-height เพราะ max-height ต้องกำหนดค่าปลายทางเผื่อไว้
       (เดิม 72px ขณะที่เนื้อหาจริง 56px) ค่าที่เกินมาทำให้กล่องกางเสร็จตั้งแต่ 26%
       ของเวลา แล้วเหลืออีก 178ms ที่ค่าวิ่งต่อโดยตาไม่เห็นอะไรเปลี่ยน
       ส่วน 1fr วิ่งตามความสูงจริงเสมอ จังหวะจึงตรงกับ opacity ที่วิ่งคู่กัน */
    .agenda__day-switch-details {
        display: grid;
        grid-template-rows: 0fr;
        margin-top: 0;
        color: var(--agenda-day-details-color);
        font-size: var(--agenda-day-details-size);
        font-weight: var(--agenda-day-details-weight);
        line-height: var(--agenda-day-details-line-height);
        text-transform: none;
        opacity: 0;
        transform: translateY(calc(var(--space-2) * -1));
        transition:
            grid-template-rows var(--duration-base) var(--ease-standard),
            margin-top var(--duration-base) var(--ease-standard),
            opacity var(--duration-base) var(--ease-standard),
            transform var(--duration-base) var(--ease-standard);
    }

    /* ต้องมีชั้นนี้เพื่อให้ 0fr บีบได้จริง — min-height: 0 ปลดขนาดขั้นต่ำของ grid item
       และ overflow: hidden เป็นตัวตัดเนื้อหาส่วนเกินระหว่างย่อ */
    .agenda__day-switch-details-inner {
        display: grid;
        gap: var(--space-1);
        min-height: 0;
        overflow: hidden;
    }

    .agenda__day-switch[aria-current='true'] .agenda__day-switch-label {
        font-size: var(--agenda-day-label-active-size);
        font-weight: var(--agenda-day-label-active-weight);
        line-height: var(--agenda-day-label-active-line-height);
    }

    .agenda__day-switch:not([aria-current='true']) .agenda__day-switch-details {
        grid-template-rows: 1fr;
        margin-top: var(--agenda-day-switch-details-gap);
        color: var(--agenda-day-label-color);
        font-size: var(--agenda-day-details-active-size);
        font-weight: var(--agenda-day-details-active-weight);
        line-height: var(--agenda-day-details-active-line-height);
        opacity: 1;
        transform: translateY(0);
    }

    /* เส้นนำสายตาเป็น grid item แถวกลาง (อยู่ระหว่างสอง <a> ใน DOM อยู่แล้ว)
       จึงขยับตามความสูงจริงของแต่ละวันเอง ไม่ต้องผูกกับตำแหน่ง absolute คงที่ */
    .agenda__day-switch-rail {
        position: relative;
        overflow: hidden;
        width: var(--rule-width-subtle);
        height: var(--space-28);
        background: var(--color-border-editorial);
        pointer-events: none;
    }

    .agenda__day-switch-prompt {
        display: none;
    }

    /* ช่วงสเปกตรัมครึ่งเส้น เลื่อนไปเกาะฝั่งของวันที่เลือก — ล้อกับตัวชี้ใต้ Stage tabs
       ที่เลื่อนแนวนอน ใช้ translateY ล้วนจึงไม่แตะ layout เลย */
    .agenda__day-switch-rail::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 50%;
        background: var(--spectrum-vertical);
        transform: translateY(0);
        transition: transform var(--duration-base) var(--ease-standard);
    }

    .agenda__day-switcher-inner[data-active-day='day-two'] .agenda__day-switch-rail::after {
        transform: translateY(100%);
    }

    .agenda__content {
        min-width: 0;
        background: var(--color-neutral-50);
        border-radius: var(--radius-1);
    }

    .agenda__tabs-viewport {
        display: contents;
    }

    .agenda__tabs {
        --agenda-tab-indicator-x: 0px;
        --agenda-tab-indicator-y: 0px;
        --agenda-tab-indicator-width: 0px;

        position: sticky;
        top: calc(var(--agenda-sticky-top) + var(--agenda-day-panel-header-height));
        z-index: 2;
        min-height: var(--touch-target-md);
        display: flex;
        flex-direction: row;
        align-items: flex-end;
        /* border-bottom: var(--rule-width-emphasis) solid var(--color-border-editorial); */
        background: var(--color-surface-page);
        overflow: visible;
        scrollbar-width: none;

        &::-webkit-scrollbar {
            display: none;
        }

        /* ฉากใต้ Header ปิดเนื้อหาตารางที่เลื่อนผ่านด้านบนของแถบ sticky */
        &::before {
            content: '';
            position: absolute;
            right: 0;
            bottom: 100%;
            left: 0;
            z-index: 0;
            height: calc(var(--header-height) + var(--space-6));
            background: var(--color-surface-page);
            pointer-events: none;
        }

        /* border-bottom อยู่ที่ .agenda__tab (flex: 0 0 auto) เส้นจึงยาวแค่ความกว้าง
           ของปุ่มแท็บรวมกัน ไม่ยาวสุดแถว — ตัวเติมนี้ยืด (flex: 1 1 auto) กินพื้นที่
           ที่เหลือ พร้อมเส้นเดียวกัน ให้ดูเป็นเส้นเดียวยาวต่อกันสุดแถว */
        &::after {
            content: '';
            flex: 1 1 auto;
            border-bottom: var(--rule-width-emphasis) solid var(--color-border-faint);
        }
    }

    .agenda__tab {
        position: relative;
        z-index: 1;
        flex: 0 0 auto;
        width: auto;
        min-height: var(--touch-target-md);
        padding: 0 var(--space-6);
        border: 0;
        color: var(--color-text-muted);
        background: transparent;
        font: inherit;
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
        white-space: nowrap;
        cursor: pointer;
        border-bottom: var(--rule-width-emphasis) solid var(--color-border-faint);
        transition:
            color var(--duration-fast) var(--ease-standard),
            background-color var(--duration-fast) var(--ease-standard);

        /* วงเล็บไทยแพตเทิร์นเดียวกับ .ticket__access-title small: ขนาดเท่าป้าย (ทับ .875em ของ Bootstrap)
           ยังไม่เลือกใช้สีรอง */
        small {
            color: var(--color-text-muted);
            font-size: inherit;
            font-weight: inherit;
        }

        &:hover {
            color: var(--color-text-primary);
            /* background: var(--color-surface-paper); */
        }

        &:focus-visible {
            outline: var(--border-width-2) solid var(--color-focus-ring);
            outline-offset: calc(var(--border-width-2) * -1);
        }

        &[aria-selected="true"] {
            color: var(--color-text-primary);
            font-weight: var(--font-weight-medium);

            /* แท็บที่เลือกแล้ว วงเล็บไทยใช้สีเดียวกับป้าย */
            small {
                color: inherit;
            }
        }
    }

    .agenda__tab-indicator {
        position: absolute;
        bottom: 0;
        left: 0;
        z-index: 2;
        width: var(--agenda-tab-indicator-width);
        height: var(--rule-width-emphasis);
        background: var(--gradient-table-active-spectrum);
        pointer-events: none;
        transform: translateX(var(--agenda-tab-indicator-x));
        will-change: width, transform;
    }

    .agenda__tabs[data-indicator-ready="true"] .agenda__tab-indicator {
        transition:
            width var(--duration-base) linear,
            transform var(--duration-base) linear;
    }

    .agenda__panel {
        padding: var(--space-0) var(--space-6) var(--space-6);
        min-width: 0;
        /* สลับแท็บ Stage แล้วเลื่อนมาจอดใต้แถบแท็บที่ sticky อยู่พอดี ไม่ใช่ใต้ header
           เฉย ๆ (นั่นจะทำให้แถบแท็บมาบังหัวตาราง) เผื่อความสูงแถบแท็บ+เส้นคาดเพิ่ม
           จากออฟเซตที่ .agenda__day-panel ใช้ */
        scroll-margin-top: calc(var(--header-height) + var(--space-6) + var(--touch-target-md) + var(--rule-width-subtle));

        &[hidden] {
            display: none;
        }

        &.agenda__panel--empty {
            min-height: var(--section-padding-y-sm);
        }
    }

    .agenda__empty-state {
        display: grid;
        align-content: center;
        min-height: 320px;
        padding: var(--space-12) var(--space-8);
        text-align: center;
    }

    .agenda__empty-kicker {
        margin: 0 0 var(--space-3);
        color: var(--color-text-muted);
        font-family: var(--font-family-heading);
        font-size: var(--section-small-size);
        font-weight: var(--font-weight-semibold);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
    }

    .agenda__empty-state h3 {
        margin: 0 0 var(--space-3);
        color: var(--color-text-strong);
        font-family: var(--font-family-heading);
        font-size: var(--font-size-40);
        font-weight: var(--font-weight-bold);
        line-height: 1;
        letter-spacing: 0;
    }

    .agenda__empty-state p:not(.agenda__empty-kicker) {
        max-width: 360px;
        margin: 0 auto;
        color: var(--color-text-muted);
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
    }

    .agenda__table {
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
    }

    .agenda__time-column {
        width: var(--bt-agenda-time-width);
    }

    .agenda__tags-column {
        width: var(--bt-agenda-tags-column-width);
    }

    .agenda__speaker-column {
        width: var(--bt-agenda-speaker-column-width);
    }

    .agenda__table tr {
        border-bottom: var(--rule-width-subtle) solid var(--color-border-faint);
    }

    .agenda__table th,
    .agenda__table td {
        padding: var(--space-4) 0;
        vertical-align: top;
    }

    .agenda__table th {
        padding-right: var(--space-4);
        color: var(--color-text-muted);
        font-size: var(--section-small-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
        text-align: left;
        white-space: nowrap;
    }

    .agenda__table th time {
        font-size: var(--bt-agenda-time-size);
    }

    .agenda__table td {
        border-left: var(--rule-width-subtle) solid var(--color-border-faint);
        padding-left: var(--space-4);
        height: 100%;
    }

    /* Session ที่มีเพียงชื่อ เช่น Lucky Draw ให้อยู่กึ่งกลางความสูงของแถว */
    .agenda__table td:has(> .agenda__session-title--simple) {
        vertical-align: middle;
    }

    /* กรอบรูปวิทยากรอยู่ขวาสุดของแต่ละ Session แถวละไม่เกิน 2 คน */
    .agenda__table td.agenda__speakers {
        padding-top: var(--space-0);
        padding-left: var(--space-0);
        padding-right: var(--space-0);
        border-left: 0;
        vertical-align: middle;
    }

    .agenda__speakers {
        display: grid;
        grid-template-columns: repeat(2, var(--bt-agenda-speaker-width));
        justify-content: end;
        gap: var(--space-2);
        font-size: 0;
        text-align: right;
        white-space: normal;
    }

    .agenda__speakers>.agenda__speaker-frame:last-child:nth-child(odd) {
        grid-column: 2;
    }

    .agenda__speaker-frame {
        --agenda-glow-a-duration: 13s;
        --agenda-glow-b-duration: 19s;
        --agenda-glow-a-delay: -2.4s;
        --agenda-glow-b-delay: -8.1s;
        --agenda-glow-a-direction: normal;
        --agenda-glow-b-direction: reverse;

        position: relative;
        width: var(--bt-agenda-speaker-width);
        height: var(--bt-agenda-speaker-height);
        display: inline-grid;
        place-items: center;
        isolation: isolate;
        overflow: visible;
        border: var(--rule-width-subtle) solid var(--color-border-faint);
        border-radius: var(--radius-1);
        background: var(--color-surface-paper);
        overflow: hidden;

        &+.agenda__speaker-frame {
            margin-left: 0;
        }

    }

    .agenda__speaker-photo {
        position: absolute;
        inset: 0;
        z-index: 1;
        display: block;
        overflow: hidden;
    }

    .agenda__speaker-photo>img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
        object-position: center top;
        border-radius: var(--radius-1);
        filter: saturate(1.1);
        /* ซูมหน้าวิทยากรให้ใกล้ขึ้น โดยยึดขอบบนไว้ ส่วนที่ล้นด้านข้าง/ล่างถูก frame (overflow: hidden) ตัดออก */
        transform: scale(1.2);
        transform-origin: center top;
    }

    .agenda__speaker-frame::before,
    .agenda__speaker-frame::after {
        content: '';
        position: absolute;
        inset: 10%;
        z-index: 0;
        border-radius: 20%;
        filter: blur(4px) saturate(1.5);
        pointer-events: none;
    }

    .agenda__speaker-frame::before {
        opacity: 0.52;
        background:
            radial-gradient(circle at 28% 30%, var(--color-cyan-400) 0%, transparent 52%),
            radial-gradient(circle at 72% 66%, var(--color-violet-400) 0%, transparent 52%);
        animation: speaker-aurora-a var(--agenda-glow-a-duration) linear var(--agenda-glow-a-delay) infinite var(--agenda-glow-a-direction);
    }

    .agenda__speaker-frame::after {
        opacity: 0.42;
        background:
            radial-gradient(circle at 70% 26%, var(--color-pink-400) 0%, transparent 50%),
            radial-gradient(circle at 30% 74%, var(--color-yellow-500) 0%, transparent 54%);
        animation: speaker-aurora-b var(--agenda-glow-b-duration) linear var(--agenda-glow-b-delay) infinite var(--agenda-glow-b-direction);
    }

    /* แต่ละ session ใช้ความเร็ว จุดเริ่ม และทิศทางต่างกัน จึงไม่เกิดภาพ glow
       หมุนพร้อมกันเป็นแพตเทิร์นเดียว แม้ทุก avatar จะใช้ keyframes ชุดเดียวกัน */
    .agenda__table tr:nth-child(4n + 2) .agenda__speaker-frame {
        --agenda-glow-a-duration: 16.5s;
        --agenda-glow-b-duration: 22s;
        --agenda-glow-a-delay: -9.2s;
        --agenda-glow-b-delay: -3.7s;
        --agenda-glow-a-direction: reverse;
        --agenda-glow-b-direction: normal;
    }

    .agenda__table tr:nth-child(4n + 3) .agenda__speaker-frame {
        --agenda-glow-a-duration: 11.5s;
        --agenda-glow-b-duration: 18.5s;
        --agenda-glow-a-delay: -5.8s;
        --agenda-glow-b-delay: -12.4s;
    }

    .agenda__table tr:nth-child(4n) .agenda__speaker-frame {
        --agenda-glow-a-duration: 19s;
        --agenda-glow-b-duration: 14.5s;
        --agenda-glow-a-delay: -14.1s;
        --agenda-glow-b-delay: -6.3s;
        --agenda-glow-a-direction: reverse;
    }

    .agenda__speaker-frame:nth-child(2) {
        --agenda-glow-a-duration: 17.25s;
        --agenda-glow-b-duration: 12.75s;
        --agenda-glow-a-delay: -11.6s;
        --agenda-glow-b-delay: -4.4s;
        --agenda-glow-a-direction: reverse;
        --agenda-glow-b-direction: normal;
    }

    .agenda__speaker-frame:nth-child(3) {
        --agenda-glow-a-duration: 14.25s;
        --agenda-glow-b-duration: 23.5s;
        --agenda-glow-a-delay: -7.3s;
        --agenda-glow-b-delay: -16.8s;
        --agenda-glow-a-direction: normal;
        --agenda-glow-b-direction: reverse;
    }

    .agenda__table tr:nth-child(1) .agenda__speaker-frame {
        --agenda-glow-a-delay: -1.1s;
        --agenda-glow-b-delay: -10.3s;
    }

    .agenda__table tr:nth-child(2) .agenda__speaker-frame {
        --agenda-glow-a-delay: -9.2s;
        --agenda-glow-b-delay: -3.7s;
    }

    .agenda__table tr:nth-child(3) .agenda__speaker-frame {
        --agenda-glow-a-delay: -5.8s;
        --agenda-glow-b-delay: -12.4s;
    }

    .agenda__table tr:nth-child(4) .agenda__speaker-frame {
        --agenda-glow-a-delay: -14.1s;
        --agenda-glow-b-delay: -6.3s;
    }

    .agenda__table tr:nth-child(5) .agenda__speaker-frame {
        --agenda-glow-a-delay: -3.6s;
        --agenda-glow-b-delay: -15.7s;
    }

    .agenda__table tr:nth-child(6) .agenda__speaker-frame {
        --agenda-glow-a-delay: -11.8s;
        --agenda-glow-b-delay: -1.9s;
    }

    .agenda__table tr:nth-child(7) .agenda__speaker-frame {
        --agenda-glow-a-delay: -7.4s;
        --agenda-glow-b-delay: -17.2s;
    }

    .agenda__table tr:nth-child(8) .agenda__speaker-frame {
        --agenda-glow-a-delay: -16.3s;
        --agenda-glow-b-delay: -8.6s;
    }

    .agenda__table tr:nth-child(9) .agenda__speaker-frame {
        --agenda-glow-a-delay: -2.7s;
        --agenda-glow-b-delay: -13.8s;
    }

    .agenda__table tr:nth-child(10) .agenda__speaker-frame {
        --agenda-glow-a-delay: -12.9s;
        --agenda-glow-b-delay: -5.1s;
    }

    .agenda__table tr:nth-child(11) .agenda__speaker-frame {
        --agenda-glow-a-delay: -6.6s;
        --agenda-glow-b-delay: -18.4s;
    }

    .agenda__table tr:nth-child(12) .agenda__speaker-frame {
        --agenda-glow-a-delay: -17.5s;
        --agenda-glow-b-delay: -9.7s;
    }

    .agenda__table tr:nth-child(13) .agenda__speaker-frame {
        --agenda-glow-a-delay: -4.5s;
        --agenda-glow-b-delay: -14.9s;
    }

    .agenda__table tr:nth-child(14) .agenda__speaker-frame {
        --agenda-glow-a-delay: -13.7s;
        --agenda-glow-b-delay: -2.8s;
    }

    .agenda__table tr:nth-child(15) .agenda__speaker-frame {
        --agenda-glow-a-delay: -8.3s;
        --agenda-glow-b-delay: -16.1s;
    }

    .agenda__session-title,
    .agenda__session-summary {
        display: inline;
        margin: 0;
        letter-spacing: 0;
    }

    .agenda__session-title {
        color: var(--color-blue-600);
        font-size: var(--section-small-size);
        font-weight: var(--font-weight-medium);
        line-height: var(--section-small-line-height);
        text-transform: uppercase;
        margin-bottom: var(--space-1);

        &.agenda__session-title--simple {
            color: var(--color-text-primary);
            margin-bottom: 0;
        }

        &:has(+ .agenda__session-summary)::after {
            content: ' ';
        }
    }

    .agenda__session-summary {
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
    }

    .agenda__session-speaker {
        margin: var(--space-2) var(--space-0) var(--space-0);
        color: var(--color-text-muted);
        font-size: var(--section-small-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
    }

    .agenda__note {
        margin: var(--space-6) 0 0;
        color: var(--color-text-muted);
        font-size: var(--section-small-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
    }

    @media (max-width:1199px) {
        --agenda-day-panel-header-height: calc(var(--space-10) + var(--space-6));

        .agenda__day-panel {
            padding-left: var(--space-0);
        }

        .agenda__day-panel-header {
            padding: var(--space-1) var(--space-0) var(--space-6);
        }
    }

    @media (max-width:991px) {
        --agenda-day-label-size: var(--font-size-24);
        --agenda-day-label-active-size: var(--font-size-40);
        --agenda-sticky-gap: var(--space-0);
        --agenda-day-panel-header-height: calc(var(--space-12) + var(--space-8) + var(--space-1));

        padding: var(--section-padding-y-sm) 0;

        .agenda__day-panel-header {
            padding: var(--space-8) var(--space-0) var(--space-6);
        }

        .agenda__section-header {
            margin-bottom: var(--space-12);
        }

        .agenda__day-switch-rail {
            height: var(--space-12);
        }

        .agenda__tabs {
            top: calc(var(--agenda-sticky-top) + var(--agenda-day-panel-header-height));
        }

        .agenda__day-switch,
        .agenda__day-switch-label {
            font-size: var(--agenda-day-label-size);
        }

        .agenda__day-switch[aria-current='true'] .agenda__day-switch-label {
            font-size: var(--agenda-day-label-active-size);
        }

        .agenda__day-panel-date,
        .agenda__day-panel-time {
            font-size: var(--font-size-20);
        }

        .agenda__speakers {
            justify-content: start;
        }

        .agenda__speakers>.agenda__speaker-frame:last-child:nth-child(odd) {
            grid-column: 1;
        }
    }

    /* แถบ Stage รวมใช้เฉพาะจอ ≥992px ค่าตั้งต้นจึงซ่อนทั้งกล่อง แถบแท็บข้างในเลยไม่โดนกฎ .agenda__tabs ของมือถือ */
    .agenda__stage-tabs {
        display: none;
    }

    /* ---------- จอ ≥992px: Day 1 | Day 2 วางคู่กันสองคอลัมน์ ----------
       เห็นทั้งสองวันทันทีไม่ต้องเลื่อนหรือกดสลับวัน ตัวสลับวันกับแถบ Stage รายวันจึงซ่อน
       ใช้แถบ Stage รวมแถบเดียวคุมทั้งสองคอลัมน์แทน
       ทุกกฎอยู่ใน min-width:992px เท่านั้น เพราะจอ ≤991px ใช้ระบบเลือกวันทีละวัน */
    @media (min-width:992px) {
        /* การ์ดครึ่งจอแคบกว่าตารางเดิม ใช้กรอบรูปขนาดเดียวกับมือถือ เหลือที่ให้ข้อความ */
        --bt-agenda-speaker-width: var(--bt-agenda-speaker-width-mobile);
        --bt-agenda-speaker-height: var(--bt-agenda-speaker-height-mobile);

        .agenda__section-header {
            margin-bottom: var(--space-12);
        }

        /* ค้างใต้ Header ตอนเลื่อนดูการ์ด สลับ Stage ได้ตลอดไม่ต้องเลื่อนกลับขึ้นไป
           ฉากทึบ ::before ปิดเนื้อหาตารางที่เลื่อนผ่านช่องว่างเหนือแถบ ความสูงต้องไม่เกินช่องว่างนั้น
           (space-6 เท่าระยะ sticky) ไม่งั้นตอนแถบยังไม่ติดขอบบน ฉากจะยื่นขึ้นไปทับหัวข้อ section */
        .agenda__stage-tabs {
            position: sticky;
            top: calc(var(--header-height) + var(--space-6));
            z-index: 4;
            display: block;
            /* ระยะเดียวกับ top: keepStageTabsInView() ใน js/agenda-tabs.js เรียก scrollIntoView ตัวนี้
               ตอนแผงที่สั้นลงดันแถบหลุดขึ้นไปเหนือจอ จะได้กลับมาจอดตรงตำแหน่งที่ค้างไว้พอดี */
            scroll-margin-top: calc(var(--header-height) + var(--space-6));
            margin-bottom: var(--agenda-day-sticky-header-height);

            &::before {
                content: '';
                position: absolute;
                right: 0;
                bottom: 100%;
                left: 0;
                height: var(--space-6);
                background: var(--color-surface-page);
                pointer-events: none;
            }
        }

        /* แถบรวมอยู่ในหัว section ไม่ได้อยู่ใต้หัวการ์ด จึงไม่ sticky และตัดฉากทึบ ::before ที่ยื่นขึ้นไปทับหัวข้อ section
           ยังต้อง position: relative เป็นกรอบให้เส้นสีรุ้ง (.agenda__tab-indicator) */
        .agenda__stage-tabs .agenda__tabs {
            position: relative;
            top: auto;

            &::before {
                content: none;
            }
        }

        /* Windows High Contrast ตัด gradient เส้นสีรุ้งและบังคับสีข้อความทุกแท็บเท่ากัน จึงวาดเส้นแท็บที่เลือกด้วยสีระบบ Highlight */
        @media (forced-colors: active) {
            .agenda__stage-tabs .agenda__tab-indicator {
                forced-color-adjust: none;
                background: Highlight;
            }

            .agenda__stage-tabs .agenda__tab[aria-selected="true"] {
                border-bottom-color: Highlight;
            }
        }

        .agenda__day-switcher,
        .agenda__tabs-viewport {
            display: none;
        }

        /* ระยะมองเห็นระหว่างแถบ Stage กับหัววันยังคง 32px เหมือนเดิม แต่ใช้
           margin ของ Stage เท่าความสูงหัววัน เพื่อให้ทั้งสองชั้นปล่อย sticky
           พร้อมกันที่ท้าย Agenda โดยไม่เลื่อนทับกัน */
        .agenda__layout {
            margin-top: calc(var(--space-8) - var(--agenda-day-sticky-header-height));
            scroll-margin-top: calc(var(--header-height) + var(--space-6) + var(--agenda-stage-tabs-height));
            overflow-anchor: none;
        }

        /* width ทับ col-md-9/col-xl-10 ของ Bootstrap (0,1,0) — คง class ไว้ใน HTML เพราะไม่มีผลกับจอ ≤991px */
        .agenda__days {
            width: 100%;
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            column-gap: var(--space-6);
        }

        /* subgrid ให้หัวการ์ดสองวันสูงเท่ากันเสมอ แม้หัวของวันหนึ่งตัดบรรทัด แถวแรกของตารางจึงเริ่มระดับเดียวกัน
           พื้นเทาไม่ใส่ที่ตัว panel ไม่งั้นการ์ด Day 2 (สั้นกว่า) จะถูกยืดเท่า Day 1 เหลือพื้นเทาว่างยาวใต้หมายเหตุ */
        .agenda__day-panel {
            display: grid;
            grid-row: span 2;
            grid-template-columns: minmax(0, 1fr);
            grid-template-rows: subgrid;
            padding-left: var(--space-0);
            /* เผื่อความสูงแถบ Stage ที่ค้างอยู่ (สูงสุด ~66px ตอนป้ายสองบรรทัดที่ 768–991px) ไม่งั้นลิงก์ #agenda-day-two จะไปจอดใต้แถบ */
            scroll-margin-top: calc(var(--header-height) + var(--space-6) + var(--space-16) + var(--space-2));
        }

        .agenda__day-panel:not([hidden])+.agenda__day-panel:not([hidden]) {
            margin-top: var(--space-0);
        }

        .agenda__day-panel-header {
            position: sticky;
            top: calc(var(--header-height) + var(--space-6) + var(--agenda-stage-tabs-height));
            z-index: 3;
            align-self: start;
            height: auto;
            justify-content: space-between;
            gap: var(--space-1) var(--space-3);
            padding: var(--space-4) var(--space-6);
            border-bottom: var(--rule-width-emphasis) solid var(--color-border-faint);
            border-radius: var(--radius-1) var(--radius-1) 0 0;
            background: var(--color-neutral-50);

            &::before {
                content: none;
            }
        }

        .agenda__day-panel-date {
            font-size: var(--font-size-18);
            text-transform: uppercase;
        }

        .agenda__day-panel-time {
            /* color: var(--color-text-muted); */
            font-size: var(--section-body-size);
            font-weight: var(--font-weight-medium);
        }

        /* การ์ดจบตามเนื้อหาของวันนั้นเอง (พื้นเทามาจากค่าฐานของ .agenda__content อยู่แล้ว) */
        .agenda__content {
            align-self: start;
            border-radius: 0 0 var(--radius-1) var(--radius-1);
        }

        .agenda__table,
        .agenda__table tbody {
            display: block;
        }

        .agenda__table colgroup {
            display: none;
        }

        /* เวลาใน layout สองคอลัมน์: เวลาเริ่ม ขีดคั่น และเวลาจบแยกเป็น 3 บรรทัดคงที่ */
        .agenda__table th time {
            display: block;
            width: 4.6ch;
            font-variant-numeric: tabular-nums;
            text-align: center;
            white-space: normal;
        }

        .agenda__table tr {
            display: grid;
            grid-template-columns: var(--space-20) minmax(0, 1fr);
        }

        .agenda__table th[scope="row"] {
            grid-column: 1;
            grid-row: 1;
            white-space: normal;
        }

        /* td แรก (ช่องหมวดหมู่เดิม) ว่างทุกแถวแล้ว ซ่อนไม่ให้กินช่องกริด แต่ต้องคง td ไว้ใน HTML
           เพราะกฎจอ ≤991px เลือกช่องตามลำดับด้วย :first-of-type */
        .agenda__table td:first-of-type {
            display: none;
        }

        .agenda__table td:first-of-type+td {
            grid-column: 2;
            grid-row: 1;
        }

        /* การ์ดสองคอลัมน์ช่วง 992–1199px ยังแคบ รูปวิทยากรลงไปอยู่ใต้ข้อความก่อน
           แล้วกฎ ≥992px ด้านล่างจะจัดตำแหน่งรูปตามพื้นที่ของ layout ใหม่ */
        .agenda__table td.agenda__speakers {
            grid-column: 2;
            grid-row: 2;
            justify-content: start;
            padding: var(--space-0) var(--space-0) var(--space-4) var(--space-4);
            border-left: var(--rule-width-subtle) solid var(--color-border-faint);

            &:empty {
                display: none;
            }
        }

        .agenda__speakers>.agenda__speaker-frame:last-child:nth-child(odd) {
            grid-column: 1;
        }

        .agenda__session-title,
        .agenda__session-summary {
            display: block;
        }
    }

    /* ≥992px รูปวิทยากรอยู่ขวาข้อความตามแบบ คอลัมน์ auto กว้างเท่ากริดรูป
       แถวที่ไม่มีรูป (ช่องถูกซ่อน) คอลัมน์นี้เป็น 0 ข้อความได้ความกว้างเต็ม */
    @media (min-width:992px) {
        .agenda__table tr {
            grid-template-columns: var(--space-20) minmax(0, 1fr) auto;
        }

        .agenda__table td.agenda__speakers {
            grid-column: 3;
            grid-row: 1;
            align-self: center;
            height: auto;
            justify-content: end;
            padding: var(--space-4) var(--space-0) var(--space-4) var(--space-4);
            border-left: 0;
        }

        /* ใน layout สองคอลัมน์ td ถูกเปลี่ยนเป็น grid item และสูงเต็มแถว
           จึงต้องจัดข้อความภายในเซลล์ด้วย flex แทน vertical-align */
        .agenda__table td:has(> .agenda__session-title--simple) {
            display: flex;
            align-items: center;
        }
    }

    /* 992–1199px การ์ดกว้าง ~416px ถ้ารูปวางคู่กัน (136px) ข้อความเหลือแค่ ~127px
       จึงเรียงรูปซ้อนเป็นคอลัมน์เดียวแบบจอ ≤575px ข้อความได้ ~195px */
    @media (min-width:992px) and (max-width:1199px) {

        /* 4 ป้ายของแถบรวมกับ padding ปกติ 24px กว้าง ~883px เกินคอนเทนเนอร์ 856px ที่จอ 992px */
        .agenda__stage-tabs .agenda__tab {
            padding: var(--space-0) var(--space-4);
        }

        .agenda__table td.agenda__speakers {
            grid-template-columns: var(--bt-agenda-speaker-width);
        }
    }

    /* ≥1200px การ์ดกว้างพอวางรูปคู่กันแบบกริด 2 ช่องของค่าฐาน รูปเดียวชิดขวา */
    @media (min-width:1200px) {
        .agenda__day-panel-date {
            font-size: var(--font-size-20);
        }

        .agenda__speakers>.agenda__speaker-frame:last-child:nth-child(odd) {
            grid-column: 2;
        }
    }

    /* Mobile agenda: ย้ายข้อมูลวิทยากรลงใต้ชื่อ Session เพื่อให้อ่านเป็นลำดับเดียว */
    @media (max-width:991px) {
        --agenda-day-label-size: var(--font-size-32);
        --agenda-day-label-line-height: var(--section-topic-line-height);
        --agenda-day-label-weight: var(--font-weight-regular);
        --agenda-day-label-active-size: var(--font-size-32);
        --agenda-day-label-active-line-height: var(--agenda-day-label-line-height);
        --agenda-day-label-active-weight: var(--font-weight-bold);

        .agenda__layout {
            margin-right: 0;
            margin-left: 0;
        }

        .agenda__day-panel-header {
            display: none;
        }

        .agenda__day-switcher {
            position: static;
            width: 100%;
            margin-bottom: var(--space-0);
            padding: 0;
            background: var(--color-surface-paper);
            scroll-margin-top: calc(var(--header-height) + var(--space-4));
            display: flex;
            justify-content: center;
        }

        .agenda__day-switcher,
        .agenda__days {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            padding-right: 0;
            padding-left: 0;
        }

        .agenda__day-switcher-inner {
            --day-switcher-padding-y: var(--space-8);
            --day-switcher-details-space: var(--space-8);
            --day-switcher-rail-width: 44%;
            --day-switcher-label-shift: 0px;

            position: relative;
            width: min(100%, 360px);
            grid-template-columns: max-content var(--day-switcher-rail-width) max-content;
            justify-content: center;
            justify-items: center;
            align-items: end;
            column-gap: var(--space-2);
            padding-top: var(--day-switcher-padding-y);
            padding-bottom: calc(var(--day-switcher-padding-y) + var(--day-switcher-details-space));
        }

        .agenda__day-switch {
            position: static;
            width: auto;
            min-height: var(--touch-target-md);
            padding: 0 0 var(--space-3);
            display: flex;
            align-items: flex-end;
            background: transparent;
            text-align: left;

            &:first-of-type {
                grid-column: 1;
                padding-left: var(--day-switcher-label-shift);
            }

            &:last-of-type {
                grid-column: 3;
                padding-right: var(--day-switcher-label-shift);
                justify-content: flex-end;
                text-align: right;
            }

            &[aria-current='true'] {
                color: var(--agenda-day-label-active-color);
            }
        }

        .agenda__day-switch-label {
            font-size: var(--agenda-day-label-size);
            font-weight: var(--agenda-day-label-weight);
            line-height: var(--agenda-day-label-line-height);
        }

        .agenda__day-switch[aria-current='true'] .agenda__day-switch-label {
            font-size: var(--agenda-day-label-active-size);
            font-weight: var(--agenda-day-label-active-weight);
            line-height: var(--agenda-day-label-active-line-height);
        }

        .agenda__day-switch-details,
        .agenda__day-switch:not([aria-current='true']) .agenda__day-switch-details {
            position: absolute;
            top: calc(var(--day-switcher-padding-y) + var(--touch-target-md) + var(--agenda-day-switch-details-gap));
            left: 0;
            width: 100%;
            margin-top: 0;
            opacity: 0;
            visibility: hidden;
            transform: none;
            transition: opacity var(--duration-fast) var(--ease-standard);
        }

        .agenda__day-switch:last-of-type .agenda__day-switch-details {
            transform: none;
        }

        .agenda__day-switch:not([aria-current='true']) .agenda__day-switch-details {
            opacity: 1;
            visibility: visible;
        }

        .agenda__day-switch-details-inner {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: var(--space-1) var(--space-4);
            overflow: visible;
            text-align: left;
            white-space: nowrap;
        }

        .agenda__day-switch-details-inner span+span::before {
            content: none;
        }

        .agenda__day-switch-rail {
            position: absolute;
            top: calc(var(--day-switcher-padding-y) + (var(--touch-target-md) / 2));
            left: 50%;
            display: block;
            width: var(--day-switcher-rail-width);
            height: var(--rule-width-subtle);
            background: var(--color-border-editorial);
            transform: translate(-50%, -50%);
        }

        .agenda__day-switch-prompt {
            position: absolute;
            top: calc(var(--day-switcher-padding-y) + (var(--touch-target-md) / 2));
            left: 50%;
            display: block;
            color: var(--color-text-muted);
            font-size: var(--section-small-size);
            font-weight: var(--font-weight-medium);
            line-height: var(--section-small-line-height);
            transform: translate(-50%, calc(-100% + var(--space-2)));
            white-space: nowrap;
            background: var(--color-surface-paper);
            padding: var(--space-0) var(--space-2);
            z-index: 2;
        }

        .agenda__day-switch-rail::after {
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            width: 50%;
            height: var(--rule-width-emphasis);
            background: var(--spectrum);
            transform: translateX(0);
        }

        .agenda__day-switcher-inner[data-active-day='day-two'] .agenda__day-switch-rail::after {
            transform: translateX(100%);
        }

        .agenda__tabs-viewport {
            --agenda-tabs-gap: var(--space-8);

            position: sticky;
            top: var(--header-height);
            z-index: 2;
            display: block;
            margin-top: var(--agenda-tabs-gap);
            background: var(--color-surface-page);

            /* ปิดเนื้อหาตารางที่เลื่อนผ่านใต้ Header โดยไม่ถูก overflow แนวนอน clip
               ความสูงต้องเท่ากับช่องว่างเหนือแถบแท็บ (--agenda-tabs-gap) เป๊ะ ๆ ห้ามสูงกว่านี้:
               แถบนี้ sticky แต่ ::before ขยับตามแถบเสมอ ตอนที่แถบยังไม่ติดขอบบน (เช่นเพิ่งเลื่อน
               เข้ามาถึง Agenda) ฉากทึบนี้จะยื่นขึ้นไปทับ .agenda__day-switcher ที่อยู่เหนือมัน
               จนวันที่/เวลาใต้ปุ่ม Day หายไปทั้งแถบ (เคยสูง header+24 = 96px ทับกินเข้าไป 64px)
               ส่วนตอนที่แถบติดขอบบนแล้ว พื้นที่เหนือมันคือใต้ Header ซึ่ง Header ทึบคลุมอยู่แล้ว
               จึงไม่ต้องใช้ฉากสูงไปกว่าช่องว่างนี้ */
            &::before {
                content: '';
                position: absolute;
                right: 0;
                bottom: 100%;
                left: 0;
                height: var(--agenda-tabs-gap);
                background: var(--color-surface-page);
                pointer-events: none;
            }
        }

        .agenda__tabs {
            position: relative;
            top: auto;
            z-index: 1;
            overflow-x: auto;
            overflow-y: hidden;

            &::before {
                display: none;
            }
        }

        .agenda__table,
        .agenda__table tbody {
            display: block;
        }

        .agenda__table colgroup {
            display: none;
        }

        .agenda__table tr {
            display: grid;
            grid-template-columns: var(--bt-agenda-time-width) minmax(0, 1fr);
        }

        .agenda__table th,
        .agenda__table td {
            display: block;
        }

        .agenda__table th {
            grid-column: 1;
            grid-row: 1 / span 3;
            padding-right: var(--space-4);
        }

        .agenda__table td:first-of-type {
            grid-column: 2;
            grid-row: 1;
            padding-bottom: var(--space-0);

            /* &:empty {
                display: none;
            } */
        }

        .agenda__table td:first-of-type+td {
            grid-column: 2;
            grid-row: 2;
            padding-top: var(--space-0);
        }

        .agenda__table td.agenda__speakers {
            grid-column: 2;
            grid-row: 3;
            padding: var(--space-2) var(--space-0) var(--space-6) var(--space-6);
            display: grid;
            justify-content: start;
            border-left: var(--rule-width-subtle) solid var(--color-border-faint);
            font-size: var(--section-small-size);
            text-align: left;
            white-space: normal;

            &:empty {
                display: none;
            }

        }

        .agenda__speaker-frame {
            vertical-align: top;
        }
    }

    @media (max-width:575px) {
        --agenda-day-label-size: var(--font-size-20);
        --agenda-day-label-active-size: var(--font-size-20);
        --bt-agenda-speaker-column-width-mobile: var(--bt-agenda-speaker-width-mobile);

        .agenda__day-panel-date,
        .agenda__day-panel-time {
            font-size: var(--font-size-18);
        }

        .agenda__panel {
            padding: var(--space-0) var(--space-4) var(--space-4);
        }

        .agenda__day-switcher-inner {
            --day-switcher-rail-width: 36%;

            width: min(100%, 320px);
        }

        .agenda__day-switch,
        .agenda__day-switch-label {
            font-size: var(--agenda-day-label-size);
        }

        .agenda__day-switch[aria-current='true'] .agenda__day-switch-label {
            font-size: var(--agenda-day-label-active-size);
        }

        .agenda__time-column {
            width: var(--space-20);
        }

        .agenda__tabs-viewport {
            --agenda-tabs-gap: var(--space-3);
        }

        .agenda__tab {
            padding: 0 var(--space-4);
        }

        .agenda__empty-state {
            min-height: 240px;
            padding: var(--space-8) var(--space-4);
        }

        .agenda__empty-state h3 {
            font-size: var(--font-size-32);
        }

        .agenda__table th,
        .agenda__table td {
            padding-top: var(--space-4);
            padding-bottom: var(--space-5);
        }

        .agenda__table th {
            grid-column: 1 / -1;
            grid-row: 1;
            padding-right: var(--space-0);
            padding-bottom: var(--space-3);
            white-space: normal;
        }

        .agenda__table th time {
            white-space: nowrap;
        }

        .agenda__table tr {
            grid-template-columns: minmax(0, 1fr) var(--bt-agenda-speaker-column-width-mobile);
            column-gap: var(--space-5);
        }

        .agenda__table td {
            padding-left: 0;
            border-left: 0;
        }

        .agenda__table td:first-of-type {
            grid-column: 1 / -1;
            grid-row: 2;
            padding-top: var(--space-0);

            &:empty {
                display: none;
            }
        }

        .agenda__table td:first-of-type+td {
            grid-column: 1;
            grid-row: 3;
            padding-top: var(--space-0);
            padding-bottom: var(--space-4);
        }

        /* Session ที่ไม่มีภาพวิทยากรให้รายละเอียดใช้พื้นที่เต็มแถว */
        .agenda__table tr:has(td.agenda__speakers:empty) td:first-of-type+td {
            grid-column: 1 / -1;
        }

        .agenda__speaker-column {
            width: var(--bt-agenda-speaker-column-width-mobile);
        }

        .agenda__table td.agenda__speakers {
            grid-column: 2;
            grid-row: 3;
            width: var(--bt-agenda-speaker-column-width-mobile);
            display: grid;
            grid-template-columns: var(--bt-agenda-speaker-width-mobile);
            align-content: flex-end;
            justify-content: end;
            gap: var(--space-2);
            padding: 0 0 var(--space-6);
            border-left: 0;
            text-align: right;
        }

        .agenda__speakers>.agenda__speaker-frame:last-child:nth-child(odd) {
            grid-column: 1;
        }

        .agenda__speaker-frame {
            width: var(--bt-agenda-speaker-width-mobile);
            height: var(--bt-agenda-speaker-height-mobile);

            &+.agenda__speaker-frame {
                margin-left: 0;
            }

        }

        .agenda__speaker-frame>.bt-icon {
            font-size: var(--bt-icon-size);
        }

        .agenda__session-title {
            font-size: var(--font-size-14);
        }

        .agenda__session-summary {
            display: block;
            font-size: var(--section-small-size);
        }

        .agenda__session-speaker {
            margin: var(--space-2) var(--space-0) var(--space-0);
            font-size: var(--section-small-size);
        }
    }
}

@media (prefers-reduced-motion: reduce) {

    /* เดิมครอบแค่ตารางฝั่งขวา ตัวสลับวันยังมอร์ฟป้าย 24→48px เต็ม 240ms อยู่ */
    .agenda .agenda__day-switch,
    .agenda .agenda__day-switch-label,
    .agenda .agenda__day-switch-details,
    .agenda .agenda__day-switch-rail::after {
        transition-duration: var(--duration-reduced);
    }

    /* ยังเห็นออร่าตอน hover ได้ แต่ไม่ต้องลอยหมุน */
    .speaker-card__portrait::before,
    .speaker-card__portrait::after {
        transition-duration: var(--duration-reduced);
    }

    .speaker-card:hover .speaker-card__portrait::before,
    .speaker-card:hover .speaker-card__portrait::after {
        animation: none;
    }

    .agenda__speaker-frame::before,
    .agenda__speaker-frame::after {
        animation: none;
    }
}

/* ---------- Speakers ---------- */
.speaker {
    position: relative;
    scroll-margin-top: var(--header-height);
    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);
    --speaker-day-label-size: var(--font-size-24);
    --speaker-day-label-line-height: 56px;
    --speaker-day-label-weight: var(--font-weight-regular);
    --speaker-day-label-color: var(--color-text-inverse-muted);
    --speaker-day-label-active-size: var(--font-size-48);
    --speaker-day-label-active-line-height: var(--section-topic-line-height);
    --speaker-day-label-active-weight: var(--font-weight-regular);
    --speaker-day-label-active-color: var(--color-text-primary);
    --speaker-day-switch-details-gap: var(--space-3);
    --speaker-sticky-gap: var(--space-6);
    --speaker-sticky-top: calc(var(--header-height) + var(--speaker-sticky-gap));
    --speaker-day-panel-header-height: calc(var(--space-12) + var(--space-6));

    .speaker__section-header {
        margin-bottom: var(--space-20);
    }

    .speaker__section-header h2 {
        max-width: 920px;
        margin: 0;
        font-size: var(--section-title-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-title-line-height);
        letter-spacing: 0;
    }

    .speaker__layout {
        align-items: start;
    }


    /* ---- ตัวสลับวัน: ก๊อปแพตเทิร์นจาก .agenda__day-switcher ทั้งชุด ---- */
    .speaker__day-switcher {
        position: sticky;
        top: var(--speaker-sticky-top);
        z-index: 2;
        align-self: start;
        min-width: 0;
    }

    .speaker__days {
        min-width: 0;
    }

    .speaker__day-panel {
        scroll-margin-top: var(--speaker-sticky-top);
        padding-left: var(--space-12);
    }

    .speaker__day-panel-header {
        position: sticky;
        top: var(--speaker-sticky-top);
        z-index: 3;
        height: var(--speaker-day-panel-header-height);
        display: flex;
        flex-wrap: wrap;
        align-items: baseline;
        gap: var(--space-2) var(--space-4);
        padding: var(--space-3) var(--space-0) var(--space-8);
        color: var(--color-text-muted);
        font-size: var(--section-body-size);
        line-height: var(--section-body-line-height);
        background: var(--color-surface-page);
    }

    /* ปิดช่องว่างใต้ site header ไม่ให้การ์ดวิทยากรที่เลื่อนผ่านมองเห็นลอดขึ้นมา */
    .speaker__day-panel-header::before {
        content: '';
        position: absolute;
        right: 0;
        bottom: 100%;
        left: 0;
        height: var(--speaker-sticky-gap);
        background: var(--color-surface-page);
        pointer-events: none;
    }

    .speaker__day-panel-date,
    .speaker__day-panel-time {
        margin: 0;
        color: var(--color-text-primary);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-medium);
    }

    /* Day 1 กับ Day 2 ต่อกันในพื้นที่เลื่อนเดียว เว้นระยะ + ขีดคั่นให้เห็นว่าขึ้นวันใหม่
       :not([hidden]) ทั้งสองฝั่งกันไว้ไม่ให้กระทบจอ ≤991px ที่โชว์ทีละวัน — วันที่ถูกซ่อน
       ตัดคู่ sibling ที่ตรงเงื่อนไขไปเลย วันที่เหลือจึงไม่มีระยะ/ขีดคั่นค้างไว้ด้านบน */
    .speaker__day-panel:not([hidden])+.speaker__day-panel:not([hidden]) {
        margin-top: var(--space-32);
        /* padding-top: var(--space-16);
        border-top: var(--rule-width-subtle) solid var(--color-border-editorial); */
    }

    .speaker__day-panel[hidden] {
        display: none;
    }

    .speaker__day-switcher-inner {
        display: grid;
        justify-items: start;
        gap: var(--space-6);
    }

    .speaker__day-switch {
        position: relative;
        z-index: 1;
        display: block;
        align-self: start;
        width: fit-content;
        min-width: 0;
        padding: 0;
        color: var(--speaker-day-label-color);
        font-size: var(--speaker-day-label-size);
        font-weight: var(--speaker-day-label-weight);
        line-height: var(--speaker-day-label-line-height);
        letter-spacing: 0;
        text-decoration: none;
        text-transform: uppercase;
        transition:
            color var(--duration-base) var(--ease-standard),
            opacity var(--duration-base) var(--ease-standard);

        &:hover,
        &:focus-visible {
            color: var(--speaker-day-label-active-color);
        }

        &[aria-current='true'] {
            color: var(--speaker-day-label-active-color);
        }

        &:focus-visible {
            outline: var(--border-width-2) solid var(--color-focus-ring);
            outline-offset: var(--space-2);
        }
    }

    .speaker__day-switch-label {
        display: block;
        font-size: var(--speaker-day-label-size);
        line-height: var(--line-height-normal);
        transition:
            font-size var(--duration-base) var(--ease-standard),
            line-height var(--duration-base) var(--ease-standard),
            color var(--duration-base) var(--ease-standard);
    }

    /* 0fr → 1fr วิ่งตามความสูงจริง ไม่ต้องเดาเพดานแบบ max-height */
    .speaker__day-switch-details {
        display: grid;
        grid-template-rows: 0fr;
        margin-top: 0;
        color: var(--speaker-day-label-color);
        font-size: var(--section-body-size);
        line-height: var(--section-body-line-height);
        text-transform: none;
        opacity: 0;
        transform: translateY(calc(var(--space-2) * -1));
        transition:
            grid-template-rows var(--duration-base) var(--ease-standard),
            margin-top var(--duration-base) var(--ease-standard),
            opacity var(--duration-base) var(--ease-standard),
            transform var(--duration-base) var(--ease-standard);
    }

    .speaker__day-switch-details-inner {
        display: grid;
        gap: var(--space-1);
        min-height: 0;
        overflow: hidden;
    }

    .speaker__day-switch[aria-current='true'] .speaker__day-switch-label {
        font-size: var(--speaker-day-label-active-size);
        font-weight: var(--speaker-day-label-active-weight);
        line-height: var(--speaker-day-label-active-line-height);
    }

    .speaker__day-switch:not([aria-current='true']) .speaker__day-switch-details {
        grid-template-rows: 1fr;
        margin-top: var(--speaker-day-switch-details-gap);
        color: var(--speaker-day-label-color);
        opacity: 1;
        transform: translateY(0);
    }

    .speaker__day-switch-rail {
        position: relative;
        overflow: hidden;
        width: var(--rule-width-subtle);
        height: var(--space-28);
        background: var(--color-border-editorial);
        pointer-events: none;
    }

    .speaker__day-switch-prompt {
        display: none;
    }

    .speaker__day-switch-rail::after {
        content: '';
        position: absolute;
        top: 0;
        right: 0;
        left: 0;
        height: 50%;
        background: var(--spectrum-vertical);
        transform: translateY(0);
        transition: transform var(--duration-base) var(--ease-standard);
    }

    .speaker__day-switcher-inner[data-active-day='day-two'] .speaker__day-switch-rail::after {
        transform: translateY(100%);
    }

    /* หัวข้อกับแถบวันค้างอยู่ระหว่างเลื่อนดูการ์ด ใช้แพตเทิร์นเดียวกับ .agenda__tabs
       สติกกี้ถูกจำกัดด้วยกล่องของ .speaker__inner จึงหลุดเองเมื่อจบ section */
    .speaker__eyebrow {
        margin: 0 0 var(--space-2);
        color: var(--color-text-muted);
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    /* แถบวันใช้ดีไซน์เดียวกับแถบเวทีของ Agenda: ปุ่มข้อความเรียงแถว
       เส้นคาดล่างของกล่อง และตัวชี้สเปกตรัมที่เลื่อนตามปุ่มที่เลือก */
    /* กติกาของกริด (คอลัมน์/ระยะห่าง) ย้ายไปเขียนรวมกับ .moderator__grid ที่ระดับบนสุด
       เพื่อให้สอง section เปลี่ยนพร้อมกันเสมอ ที่เหลือไว้ตรงนี้คือเรื่องเฉพาะแท็บวัน */
    .speaker__panel[hidden] {
        display: none;
    }

    /* วันที่ยังไม่ประกาศรายชื่อ กันไม่ให้ section ยุบจนดูเหมือนหน้าพัง
       (แนวเดียวกับ .agenda__panel--empty) */
    .speaker__panel--empty {
        min-height: var(--section-padding-y-sm);
    }

    @media (max-width: 1199px) {
        --speaker-day-panel-header-height: calc(var(--space-10) + var(--space-6));

        .speaker__day-panel {
            padding-left: var(--space-0);
        }

        .speaker__day-panel-header {
            padding: var(--space-1) var(--space-0) var(--space-8);
        }
    }

    @media (max-width: 991px) {
        --speaker-day-label-size: var(--font-size-24);
        --speaker-day-label-active-size: var(--font-size-40);
        --speaker-sticky-gap: var(--space-0);

        padding: var(--section-padding-y-sm) 0;


        .speaker__day-panel-header {
            padding: var(--space-2) var(--space-0) var(--space-8);
        }

        .speaker__section-header {
            margin-bottom: var(--space-12);
        }

        .speaker__day-switch-rail {
            height: var(--space-12);
        }

        .speaker__day-panel-date,
        .speaker__day-panel-time {
            font-size: var(--font-size-20);
        }
    }

    @media (max-width: 991px) {
        --speaker-day-label-size: var(--font-size-32);
        --speaker-day-label-line-height: var(--section-topic-line-height);
        --speaker-day-label-weight: var(--font-weight-regular);
        --speaker-day-label-active-size: var(--font-size-32);
        --speaker-day-label-active-line-height: var(--speaker-day-label-line-height);
        --speaker-day-label-active-weight: var(--font-weight-bold);

        .speaker__layout {
            margin-right: 0;
            margin-left: 0;
        }

        .speaker__day-panel-header {
            display: none;
        }

        .speaker__day-switcher {
            position: static;
            width: 100%;
            margin-bottom: var(--space-0);
            padding: 0;
            background: var(--color-surface-paper);
            scroll-margin-top: calc(var(--header-height) + var(--space-4));
            display: flex;
            justify-content: center;
        }

        .speaker__day-switcher,
        .speaker__days {
            flex: 0 0 100%;
            width: 100%;
            max-width: 100%;
            padding-right: 0;
            padding-left: 0;
        }

        .speaker__day-switcher-inner {
            --day-switcher-padding-y: var(--space-8);
            --day-switcher-details-space: var(--space-8);
            --day-switcher-rail-width: 44%;
            --day-switcher-label-shift: 0px;

            position: relative;
            width: min(100%, 360px);
            grid-template-columns: max-content var(--day-switcher-rail-width) max-content;
            justify-content: center;
            justify-items: center;
            align-items: end;
            column-gap: var(--space-2);
            padding-top: var(--day-switcher-padding-y);
            padding-bottom: calc(var(--day-switcher-padding-y) + var(--day-switcher-details-space));
        }

        .speaker__day-switch {
            position: static;
            width: auto;
            min-height: var(--touch-target-md);
            padding: 0 0 var(--space-3);
            display: flex;
            align-items: flex-end;
            font-size: var(--speaker-day-label-size);
            line-height: var(--speaker-day-label-line-height);
            background: transparent;
            text-align: left;

            &:first-of-type {
                grid-column: 1;
                padding-left: var(--day-switcher-label-shift);
            }

            &:last-of-type {
                grid-column: 3;
                padding-right: var(--day-switcher-label-shift);
                justify-content: flex-end;
                text-align: right;
            }
        }

        .speaker__day-switch-label {
            font-size: var(--speaker-day-label-size);
            line-height: var(--speaker-day-label-line-height);
        }

        .speaker__day-switch[aria-current='true'] .speaker__day-switch-label {
            font-size: var(--speaker-day-label-active-size);
            font-weight: var(--speaker-day-label-active-weight);
            line-height: var(--speaker-day-label-active-line-height);
        }

        .speaker__day-switch-details,
        .speaker__day-switch:not([aria-current='true']) .speaker__day-switch-details {
            position: absolute;
            top: calc(var(--day-switcher-padding-y) + var(--touch-target-md) + var(--speaker-day-switch-details-gap));
            left: 0;
            width: 100%;
            margin-top: 0;
            opacity: 0;
            visibility: hidden;
            transform: none;
            transition: opacity var(--duration-fast) var(--ease-standard);
        }

        .speaker__day-switch:last-of-type .speaker__day-switch-details {
            transform: none;
        }

        .speaker__day-switch:not([aria-current='true']) .speaker__day-switch-details {
            opacity: 1;
            visibility: visible;
        }

        .speaker__day-switch-details-inner {
            display: flex;
            flex-wrap: nowrap;
            justify-content: center;
            align-items: center;
            gap: var(--space-1) var(--space-4);
            overflow: visible;
            text-align: left;
            white-space: nowrap;
        }

        .speaker__day-switch-details-inner span+span::before {
            content: none;
        }

        .speaker__day-switch-rail {
            position: absolute;
            top: calc(var(--day-switcher-padding-y) + (var(--touch-target-md) / 2));
            left: 50%;
            display: block;
            width: var(--day-switcher-rail-width);
            height: var(--rule-width-subtle);
            background: var(--color-border-editorial);
            transform: translate(-50%, -50%);
        }

        .speaker__day-switch-prompt {
            position: absolute;
            top: calc(var(--day-switcher-padding-y) + (var(--touch-target-md) / 2));
            left: 50%;
            display: block;
            color: var(--color-text-muted);
            font-size: var(--section-small-size);
            font-weight: var(--font-weight-medium);
            line-height: var(--section-small-line-height);
            transform: translate(-50%, calc(-100% + var(--space-2)));
            white-space: nowrap;
            background: var(--color-surface-paper);
            padding: var(--space-0) var(--space-2);
            z-index: 2;
        }

        .speaker__day-switch-rail::after {
            top: auto;
            right: auto;
            bottom: 0;
            left: 0;
            width: 50%;
            height: var(--rule-width-emphasis);
            background: var(--spectrum);
            transform: translateX(0);
        }

        .speaker__day-switcher-inner[data-active-day='day-two'] .speaker__day-switch-rail::after {
            transform: translateX(100%);
        }
    }

    @media (max-width: 575px) {
        --speaker-day-label-size: var(--font-size-20);
        --speaker-day-label-active-size: var(--font-size-20);

        .speaker__day-panel-date,
        .speaker__day-panel-time {
            font-size: var(--font-size-18);
        }

        .speaker__day-switcher-inner {
            --day-switcher-label-shift: 0px;

            width: min(100%, 320px);
        }
    }

    @media (max-width: 395px) {
        .speaker__section-header {
            .bt-title-highlight {
                &.has-ps {
                    padding-left: var(--space-0);
                }
            }
        }
    }
}


/* Mobile day switcher pattern shared by Agenda and Speaker */
#agenda .agenda__day-switch-date-short,
#speaker .speaker__day-switch-date-short {
    display: none;
}

/* ขยายรูปแบบตัวเลือกวันของ Agenda และ Speaker จากมือถือให้ครอบคลุม tablet ถึง 991px */
@media (min-width: 768px) and (max-width: 991px) {
    #agenda .agenda__day-switcher {
        background: transparent;
    }

    #agenda .agenda__day-switcher-inner {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 96px);
        align-items: center;
        justify-content: center;
        justify-items: center;
        column-gap: var(--space-8);
        overflow: hidden;
        padding: var(--space-6) var(--space-6) var(--space-16);
        background: var(--color-surface-paper);
    }

    #agenda .agenda__day-switcher-inner::before {
        content: "/";
        position: absolute;
        top: calc(var(--space-6) + (var(--section-topic-line-height) / 2));
        left: 50%;
        z-index: 1;
        color: var(--color-text-inverse-muted);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-light);
        line-height: 1;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    #agenda .agenda__day-switch {
        position: static;
        width: 100%;
        min-height: auto;
        padding: var(--space-0);
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
    }

    #agenda .agenda__day-switch-label {
        white-space: nowrap;
    }

    #agenda .agenda__day-switch:first-of-type {
        grid-column: 1;
    }

    #agenda .agenda__day-switch:last-of-type {
        grid-column: 2;
        justify-content: center;
        text-align: center;
    }

    #agenda .agenda__day-switch-details {
        position: absolute;
        top: unset;
        right: 0;
        bottom: 28px;
        left: 0;
        width: 100%;
        display: block;
        margin-top: var(--space-0);
        opacity: 0;
        visibility: hidden;
        transform: none;
        text-align: center;
        pointer-events: none;
    }

    #agenda .agenda__day-switch:not([aria-current='true']) .agenda__day-switch-details {
        color: var(--agenda-day-label-color);
        opacity: 1;
        visibility: visible;
    }

    #agenda .agenda__day-switch-details-inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: fit-content;
        overflow: visible;
        text-align: center;
        white-space: nowrap;
    }

    #agenda .agenda__day-switch-date-full {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #agenda .agenda__day-switch-date-short {
        display: inline;
    }

    #agenda .agenda__day-switch-prompt,
    #agenda .agenda__day-switch-rail {
        display: none;
    }

    #speaker .speaker__day-switcher {
        background: transparent;
    }

    #speaker .speaker__day-switcher-inner {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 96px);
        align-items: center;
        justify-content: center;
        justify-items: center;
        column-gap: var(--space-8);
        overflow: hidden;
        padding: var(--space-6) var(--space-6) var(--space-16);
        background: var(--color-surface-paper);
    }

    #speaker .speaker__day-switcher-inner::before {
        content: "/";
        position: absolute;
        top: calc(var(--space-6) + (var(--section-topic-line-height) / 2));
        left: 50%;
        z-index: 1;
        color: var(--color-text-inverse-muted);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-light);
        line-height: 1;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    #speaker .speaker__day-switch {
        position: static;
        width: 100%;
        min-height: auto;
        padding: var(--space-0);
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
    }

    #speaker .speaker__day-switch-label {
        white-space: nowrap;
    }

    #speaker .speaker__day-switch:first-of-type {
        grid-column: 1;
    }

    #speaker .speaker__day-switch:last-of-type {
        grid-column: 2;
        justify-content: center;
        text-align: center;
    }

    #speaker .speaker__day-switch-details {
        position: absolute;
        top: unset;
        right: 0;
        bottom: 28px;
        left: 0;
        width: 100%;
        display: block;
        margin-top: var(--space-0);
        opacity: 0;
        visibility: hidden;
        transform: none;
        text-align: center;
        pointer-events: none;
    }

    #speaker .speaker__day-switch[aria-current='true'] .speaker__day-switch-details {
        color: var(--speaker-day-label-active-color);
        opacity: 1;
        visibility: visible;
    }

    #speaker .speaker__day-switch-details-inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: fit-content;
        overflow: visible;
        text-align: center;
        white-space: nowrap;
    }

    #speaker .speaker__day-switch-date-full {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #speaker .speaker__day-switch-date-short {
        display: inline;
    }

    #speaker .speaker__day-switch-prompt,
    #speaker .speaker__day-switch-rail {
        display: none;
    }

    #speaker .speaker__panel {
        margin-top: var(--space-8);
        padding: var(--space-8) var(--space-8) var(--space-12);
    }
}

@media (max-width: 767px) {

    #agenda .agenda__day-switcher,
    #speaker .speaker__day-switcher {
        background: transparent;
    }

    #agenda .agenda__day-switcher-inner,
    #speaker .speaker__day-switcher-inner {
        position: relative;
        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, 96px);
        align-items: center;
        justify-content: center;
        justify-items: center;
        column-gap: var(--space-8);
        overflow: hidden;
        padding: var(--space-6) var(--space-6) var(--space-16);
        background: var(--color-surface-paper);
    }

    #agenda .agenda__day-switcher-inner::before,
    #speaker .speaker__day-switcher-inner::before {
        content: "/";
        position: absolute;
        top: calc(var(--space-6) + (var(--section-topic-line-height) / 2));
        left: 50%;
        z-index: 1;
        color: var(--color-text-inverse-muted);
        font-size: var(--font-size-24);
        font-weight: var(--font-weight-light);
        line-height: 1;
        transform: translate(-50%, -50%);
        pointer-events: none;
    }

    #agenda .agenda__day-switch,
    #speaker .speaker__day-switch {
        position: static;
        width: 100%;
        min-height: auto;
        padding: var(--space-0);
        display: grid;
        justify-items: center;
        align-items: center;
        text-align: center;
    }

    #agenda .agenda__day-switch-label,
    #speaker .speaker__day-switch-label {
        white-space: nowrap;
    }

    #agenda .agenda__day-switch:first-of-type,
    #speaker .speaker__day-switch:first-of-type {
        grid-column: 1;
    }

    #agenda .agenda__day-switch:last-of-type,
    #speaker .speaker__day-switch:last-of-type {
        grid-column: 2;
        justify-content: center;
        text-align: center;
    }

    #agenda .agenda__day-switch-details,
    #speaker .speaker__day-switch-details {
        position: absolute;
        top: unset;
        right: 0;
        bottom: 28px;
        left: 0;
        width: 100%;
        display: block;
        margin-top: var(--space-0);
        opacity: 0;
        visibility: hidden;
        transform: none;
        text-align: center;
        pointer-events: none;
    }

    #agenda .agenda__day-switch:not([aria-current='true']) .agenda__day-switch-details {
        color: var(--agenda-day-details-color);
        opacity: 1;
        visibility: visible;
    }

    #speaker .speaker__day-switch[aria-current='true'] .speaker__day-switch-details {
        color: var(--speaker-day-label-active-color);
        opacity: 1;
        visibility: visible;
    }

    #agenda .agenda__day-switch-details-inner,
    #speaker .speaker__day-switch-details-inner {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        gap: var(--space-2);
        min-height: fit-content;
        overflow: visible;
        text-align: center;
        white-space: nowrap;
    }

    #agenda .agenda__day-switch-date-full,
    #speaker .speaker__day-switch-date-full {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        white-space: nowrap;
    }

    #agenda .agenda__day-switch-date-short,
    #speaker .speaker__day-switch-date-short {
        display: inline;
    }

    #agenda .agenda__day-switch-prompt,
    #speaker .speaker__day-switch-prompt,
    #agenda .agenda__day-switch-rail,
    #speaker .speaker__day-switch-rail {
        display: none;
    }
}

@media (max-width: 575px) {

    #agenda .agenda__day-switcher-inner,
    #speaker .speaker__day-switcher-inner {
        grid-template-columns: repeat(2, 72px);
        padding: var(--space-3) var(--space-3) var(--space-10);
        column-gap: var(--space-6);
    }

    #agenda .agenda__day-switcher-inner::before,
    #speaker .speaker__day-switcher-inner::before {
        top: calc(var(--space-3) + (var(--section-topic-line-height) / 2));
        font-size: var(--font-size-14);
    }

    #agenda .agenda__day-switch-details,
    #speaker .speaker__day-switch-details {
        bottom: 18px;
        font-size: var(--font-size-14);
        line-height: var(--section-small-line-height);
    }
}


/* ---------- กริดของการ์ดคน (ใช้ร่วมกัน) ----------
   Speaker กับ Moderators & MC ต้องได้แทร็กกว้างเท่ากันเป๊ะ การ์ดถึงจะขนาดเดียวกัน
   เขียนรวมเป็นกฎเดียวแบบนี้เพื่อไม่ให้ค่าใดค่าหนึ่งถูกแก้ทีหลังแล้วสองฝั่งหลุดจากกัน */
.speaker__panel,
.moderator__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-items: start;
    grid-auto-rows: auto;
    gap: var(--space-8) var(--space-12);
    margin-top: 0;
}

.speaker__panel {
    padding: var(--space-8) var(--space-8) var(--space-12);
    background: var(--color-neutral-50);
    border-radius: var(--radius-1);
}

/* Moderator เต็ม 12 คอลัมน์ (ไม่เยื้องแบบเดิมแล้ว) แบ่ง 4 การ์ด/แถว แทนที่ 3 ของ Speaker
   9÷3 = 12÷4 = 3 หน่วยคอลัมน์ต่อการ์ดเท่ากัน บวกกับ padding/gap ที่เท่ากันทุกค่า
   การ์ดสองฝั่งจึงกว้างเท่ากันพอดี แม้พื้นที่กริดรวมกว้างไม่เท่ากันก็ตาม */
.moderator__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    padding: var(--space-8);
    background: var(--color-neutral-50);
    border-radius: var(--radius-1);
}

@media (max-width: 1199px) {

    .speaker__panel,
    .moderator__grid {
        gap: var(--space-12) var(--space-8);
    }

    .speaker__panel {
        padding: var(--space-8) var(--space-6) var(--space-12);
    }

    .speaker-card h3 {
        text-wrap: nowrap;
    }
}

@media (max-width: 991px) {

    .speaker__panel,
    .moderator__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-12) var(--space-6);
    }
}

@media (max-width: 767px) {

    .speaker__panel,
    .moderator__grid {
        margin-top: var(--space-8);
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-12) var(--space-6);
    }

    .speaker__panel {
        padding: var(--space-8) var(--space-8) var(--space-12);
    }
}

@media (max-width: 575px) {

    .speaker__panel {
        margin-top: var(--space-6);
        padding: var(--space-4) var(--space-4) var(--space-8);
        gap: var(--space-8) var(--space-4);
    }

    .moderator__grid {
        margin-top: var(--space-3);
        padding: var(--space-4);
        gap: var(--space-12) var(--space-4);
    }
}

@media (max-width: 393px) {
    .moderator__section-header {
        .bt-title-highlight {
            &.has-ps {
                padding-left: var(--space-0);
            }
        }
    }
}


/* ---------- การ์ดคนหนึ่งใบ (คอมโพเนนต์ร่วม) ----------
   ใช้ทั้งใน Speaker และ Moderators & MC จึงอยู่นอกบล็อกของ section ไหนทั้งสิ้น
   ความกว้างมาจากแทร็กของกริดที่ครอบอยู่ ความสูงมาจาก aspect-ratio ของกรอบรูป
   บวกความสูงคงที่ของ meta — สอง section จึงได้การ์ดขนาดเท่ากันเองโดยไม่ต้องล็อก px */
.speaker-card {
    justify-self: center;
    width: 100%;
    min-width: 0;
    margin-top: 0;
    /* padding: var(--space-4); */
    /* border: var(--rule-width-subtle) solid var(--color-border-editorial); */
}

/* ออร่าสเปกตรัมหลังรูปวิทยากร (รูปเป็น WebP พื้นโปร่ง แสงจึงลอดออกมารอบตัวคน)
   ตั้งใจไม่ครอบด้วย overflow: hidden อีกต่อไป (เอาออกที่ .speaker-card__portrait
   ด้านล่าง) เพื่อให้แสงฟุ้งล้นออกไปนอกกรอบรูปได้จริงตามที่ต้องการ
   เพื่อไม่ให้ไปทับการ์ดใบข้างเคียง ต้องคุมด้วย "ขนาด" แทนการ "ตัดขอบ":
   ย่อกล่องเข้ามาจากขอบกรอบรูปด้วย inset (แทนที่จะเต็มกรอบแบบเดิม) และลด blur ลง
   ระยะที่เหลือ (inset 24% + blur 10px ≈ เผื่อไว้ราว 20px จากขอบกรอบรูป) ยังน้อยกว่า
   ช่องว่างระหว่างการ์ดที่แคบที่สุด (16px ตอนจอมือถือ ≤767px, ดู .speaker__panel) ไม่พอ
   ชนกับการ์ดข้างเคียงแน่ แต่เผื่อขอบเพิ่มไว้อีกชั้นเพราะขนาดจริงยังขึ้นกับสีของรูปด้วย */
.speaker-card__portrait::before,
.speaker-card__portrait::after {
    content: '';
    position: absolute;
    inset: 14%;
    z-index: -1;
    border-radius: 50%;
    filter: blur(8px) saturate(1.5);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--duration-slow) var(--ease-standard);
}

/* แยกสองชั้น คนละคู่สี คนละจังหวะ/ทิศหมุน เวลาเหลื่อมกันจึงผสมกันเป็นทิศทาง
   อิสระแบบสุ่ม ไม่ใช่วิ่งตามแกน x หรือ y อย่างเดียว */
.speaker-card__portrait::before {
    background:
        radial-gradient(circle at 30% 32%, var(--color-category-cyan) 0%, transparent 52%),
        radial-gradient(circle at 70% 64%, var(--color-category-violet) 0%, transparent 52%);
}

.speaker-card__portrait::after {
    background:
        radial-gradient(circle at 68% 28%, var(--color-category-pink) 0%, transparent 50%),
        radial-gradient(circle at 32% 72%, var(--color-category-yellow) 0%, transparent 54%);
}

.speaker-card:hover .speaker-card__portrait::before {
    opacity: 0.8;
    animation: speaker-aurora-a 16s linear infinite;
}

.speaker-card:hover .speaker-card__portrait::after {
    opacity: 0.65;
    animation: speaker-aurora-b 22s linear infinite;
}

.speaker-card__portrait {
    position: relative;
    aspect-ratio: 4 / 5;
    /* isolation: isolate ยังต้องอยู่ — ไม่ใช่แค่ของเก่าที่ค้างมากับ overflow ที่เพิ่งเอาออก
       ทำให้กรอบรูปเป็น stacking context ของตัวเอง z-index: -1 ของออร่าจึงยังถูกวาด
       "หลังกรอบรูปนี้" เท่านั้น (แสงยังล้นออกไปได้ปกติ เพราะ isolation คุมแค่ลำดับการวาด
       ไม่ใช่ขอบเขตการแสดงผลแบบ overflow) ถ้าลบออกด้วย z-index จะทะลุไปอยู่หลังทุกอย่าง
       บนหน้าเว็บเหมือนบั๊กที่เจอตอนทำ section Expectation */
    isolation: isolate;
    background: linear-gradient(0deg, var(--color-surface-page) 10%, transparent 80%);
}

/* กรอบตัดภาพแยกจาก .speaker-card__portrait โดยตั้งใจ — ต้องมี overflow: hidden
   เพื่อกันรูปที่ scale(1.03) ตอน hover ไม่ให้ล้นลงไปทับข้อความชื่อ/ตำแหน่งด้านล่าง
   (พิสูจน์แล้วว่าไม่ใช่แค่ทฤษฎี: สุ่มสีพิกเซลแถวล่างสุดของรูปจริงออกมาเป็นสีเข้ม
   เกือบดำของสูท ถ้าปล่อยให้ล้นจะเห็นเป็นรอยเปื้อนสีเข้มในช่องว่างเหนือชื่อชัดเจน)
   วางเป็นชั้นแยกจากตัว .speaker-card__portrait เอง เพราะ portrait ต้องเป็น
   overflow: visible ไว้ให้ออร่าสเปกตรัมด้านบนฟุ้งออกนอกกรอบได้ตามที่ต้องการ
   ถ้าใส่ overflow: hidden ไว้ที่ portrait เหมือนเดิม ออร่าจะโดนตัดไปด้วย */
.speaker-card__frame {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.speaker-card__portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* --speaker-portrait-y คือค่าจัดหัวให้เสมอกันของแต่ละรูป (speaker-directory.js ตั้ง
       ให้ฝั่ง Speaker ส่วน Moderators & MC เขียนไว้ที่ style ของการ์ดใน HTML)
       ส่วน --speaker-portrait-drift เป็นตัวที่ ScrollTrigger ขยับเท่านั้น แยกกันไว้
       เพื่อให้ revert ของ gsap ล้าง drift ได้โดยค่าจัดหัวยังอยู่ครบ */
    object-position: center;
    filter: saturate(1.1);
    transform: scale(var(--speaker-portrait-scale, 1));
    transform-origin: center;
    transition:
        filter var(--duration-slow) var(--ease-standard),
        transform var(--duration-slow) var(--ease-standard);
}

.speaker-card:hover .speaker-card__portrait img {
    filter: saturate(1) contrast(1);
    transform: scale(calc(var(--speaker-portrait-scale, 1) + 0.03));
}

.speaker-card__meta {
    /* position + z-index จำเป็นคู่กับ background-color ด้านล่าง ไม่ใช่แค่ของประดับ:
       .speaker-card__portrait เป็น positioned element จึงถูกวาดในขั้นหลังกว่า
       พื้นหลังของ block ธรรมดาอย่าง meta ออร่าที่ฟุ้งเลยขอบรูปลงมาจึงทับพื้นขาว
       ตรงนี้ได้ ต้องดัน meta ขึ้นมาเป็น positioned ด้วย ถึงจะวาดทีหลัง (อยู่หลัง
       ใน DOM) แล้วปิดออร่าส่วนที่ล้ำลงมาได้จริง */
    position: relative;
    z-index: 1;
    min-width: 0;
    padding: var(--space-6) var(--space-0) var(--space-0);
    /* border-top: var(--rule-width-subtle) solid var(--color-border-editorial); */
}

.speaker-card h3 {
    margin: var(--space-0);
    font-size: var(--section-body-size);
    font-weight: var(--font-weight-medium);
    line-height: var(--section-body-line-height);
    letter-spacing: 0;
}

.speaker-card p {
    margin: var(--space-1) var(--space-0) var(--space-0);
    color: var(--color-text-muted);
    font-size: var(--section-small-size);
    font-weight: var(--font-weight-light);
}

/* ต่ำกว่า 1200px การ์ดไหลตามกริดปกติ เพดาน 260px กันไม่ให้ใบเดียวยืดจนเสียสัดส่วน */
@media (max-width: 1199px) {
    .speaker-card {
        width: min(100%, 260px);
    }
}

@media (max-width: 991px) {
    .speaker-card {
        width: min(100%, 320px);
    }
}

@media (max-width: 767px) {

    /* การ์ด 2 คอลัมน์บนจอเล็กแคบเกินกว่าชื่อไทยจะพอดีบรรทัดเดียว
       เผื่อไว้ 2 บรรทัดเท่ากันทุกใบ ชื่อจึงไม่โดนตัดและการ์ดยังสูงเท่ากัน
       ระยะบรรทัด 28px เผื่อที่ให้วรรณยุกต์/สระบนของไทยไม่ชนกัน */
    .speaker-card__meta {
        padding: var(--space-5) var(--space-0) var(--space-0);
    }

    .speaker-card h3 {
        text-wrap: auto;
    }

    .speaker-card p {
        text-wrap: balance;
    }
}

@media (max-width: 575px) {
    .speaker-card h3 {
        font-size: var(--font-size-14);
        line-height: var(--section-small-line-height);
    }

    .speaker-card h3 {
        text-wrap: pretty;
    }

    .speaker-card p {
        font-size: var(--font-size-12);
        line-height: var(--section-small-line-height);
    }

    .speaker-card__meta {
        padding: var(--space-4) var(--space-0) var(--space-0);
    }
}

/* จอสัมผัสไม่มี hover ให้เห็น โชว์ออร่าจาง ๆ ค้างไว้แทน (ไม่ต้องขยับ) */
@media (hover: none) {
    .speaker-card__portrait::before {
        opacity: 0;
    }

    .speaker-card__portrait::after {
        opacity: 0;
    }
}


/* ---------- Moderators & MC ----------
   โครงเดียวกับ Speaker ทุกอย่าง ต่างแค่ไม่มีตัวสลับวันและมีการ์ดชุดเดียว
   กริดจึงต้องอยู่ในคอลัมน์ 9 ช่องที่เยื้อง 3 ช่องเท่ากับ .speaker__days
   เพื่อให้แทร็กกว้างเท่ากัน การ์ดสองฝั่งจึงมีขนาดตรงกันเป๊ะโดยไม่ต้องล็อกค่าใด */
.moderator {
    /* ข้อมูลและการ์ดพร้อมใช้งานแล้ว แต่ซ่อน section ไว้จนกว่าจะประกาศเปิดตัว */
    display: none;
    position: relative;
    scroll-margin-top: var(--header-height);
    /* เว้นบน-ล่างเต็มเท่า section อื่นทุกอัน ระยะระหว่าง Speaker กับ section นี้
       จึงเป็น 128+128 เท่ากับคู่ section อื่นในหน้า ไม่ใช่ 128 อย่างที่ตัดบนออก */
    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);

    .moderator__section-header {
        margin-bottom: var(--space-20);
    }

    .moderator__section-header h2 {
        max-width: 920px;
        margin: 0;
        font-size: var(--section-title-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-title-line-height);
        letter-spacing: 0;
    }

    /* ใช้กริด 3 คอลัมน์ชุดเดียวกับฝั่ง Speaker (นิยามอยู่ในบล็อกกริดร่วมด้านบน) */

    @media (max-width: 991px) {
        padding: var(--section-padding-y-sm) 0;

        .moderator__section-header {
            margin-bottom: var(--space-12);
        }
    }
}

/* ---------- Past Event ----------
   Editorial archive: asymmetric films above a continuously moving photo reel. */
.past-event {
    position: relative;
    overflow: hidden;
    scroll-margin-top: var(--header-height);
    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);
}

.past-event__inner {
    display: grid;
    gap: var(--space-16);
}

.past-event__header {
    display: block;
}

.past-event__heading {
    min-width: 0;
}

.past-event__header h2 {
    max-width: 1000px;
    margin: 0;
    font-size: var(--section-title-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-title-line-height);
    letter-spacing: 0;
}

.past-event__films {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr);
    grid-template-rows: repeat(2, minmax(0, 1fr));
    gap: var(--space-6);
}

.past-event__film {
    min-width: 0;
    min-height: 0;
}

.past-event__film--featured {
    grid-row: 1 / span 2;
}

.past-event__film--second {
    grid-column: 2;
    grid-row: 1;
}

.past-event__film--third {
    grid-column: 2;
    grid-row: 2;
}

.past-event__video-frame {
    position: relative;
    overflow: hidden;
    aspect-ratio: 16 / 9;
    background: var(--color-surface-inverse);
    border-radius: var(--radius-1);
}

.past-event__film:not(.past-event__film--featured) .past-event__video-frame {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
}

.past-event__video-frame iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

.past-event__marquee {
    --marquee-fade: clamp(24px, 5vw, 80px);

    width: 100%;
    margin-top: var(--space-6);
    overflow: hidden;
    outline: none;
    /* -webkit-mask-image: linear-gradient(90deg,
            transparent 0,
            #000 var(--marquee-fade),
            #000 calc(100% - var(--marquee-fade)),
            transparent 100%);
    mask-image: linear-gradient(90deg,
            transparent 0,
            #000 var(--marquee-fade),
            #000 calc(100% - var(--marquee-fade)),
            transparent 100%); */
}

.past-event__marquee-track {
    align-items: stretch;
    transition-timing-function: linear;
}

.past-event__marquee:focus-visible {
    outline: var(--rule-width-subtle) solid var(--color-text-primary);
    outline-offset: var(--space-2);
}

.past-event__slide {
    width: clamp(220px, 22vw, 352px);
    height: auto;
    margin: 0;
}

.past-event__slide-frame {
    display: grid;
    width: 100%;
    aspect-ratio: 3 / 2;
    overflow: hidden;
    color: var(--color-text-primary);
    background: var(--color-surface-paper);
    border-radius: var(--radius-1);
}

.past-event__slide-frame img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

@media (max-width: 991px) {
    .past-event {
        padding: var(--section-padding-y-sm) 0;
    }

    .past-event__inner {
        gap: var(--space-12);
    }

    .past-event__header {
        display: block;
    }

    /* วิดีโอที่ 2-3 จับคู่กันในแถวเดียวกัน วิดีโอแรกยังใหญ่สุดเต็มความกว้างแถวบน
       (จอ ≤575px จะกลับไปเรียงคอลัมน์เดียวทั้งหมด ดู block ด้านล่าง) */
    .past-event__films {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        grid-template-rows: auto auto;
    }

    .past-event__film--featured {
        grid-column: 1 / -1;
        grid-row: 1;
    }

    .past-event__film--second {
        grid-column: 1;
        grid-row: 2;
    }

    .past-event__film--third {
        grid-column: 2;
        grid-row: 2;
    }

    .past-event__film:not(.past-event__film--featured) .past-event__video-frame {
        height: auto;
        aspect-ratio: 16 / 9;
    }

}

@media (max-width: 767px) {
    .past-event__films {
        gap: var(--space-4);
    }

}

@media (max-width: 575px) {
    .past-event__films {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }

    .past-event__film--featured,
    .past-event__film--second,
    .past-event__film--third {
        grid-column: 1;
        grid-row: auto;
    }

    .past-event__slide {
        width: 240px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .past-event__marquee {
        overflow-x: auto;
        scrollbar-width: none;
    }

    .past-event__marquee::-webkit-scrollbar {
        display: none;
    }

}

/* ---------- FAQ ---------- */
.faq {
    --faq-question-font-size: var(--font-size-16);
    --faq-question-font-weight: var(--font-weight-medium);
    --faq-answer-font-size: var(--font-size-16);
    --faq-answer-font-weight: var(--font-weight-regular);
    --faq-sticky-gap: var(--space-12);

    position: relative;
    scroll-margin-top: var(--header-height);
    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    /* background:
        radial-gradient(circle at 12% 0%, rgba(78, 92, 255, 0.08), transparent 34%),
        radial-gradient(circle at 88% 100%, rgba(255, 95, 173, 0.08), transparent 30%),
        var(--color-surface-page); */
    background: var(--color-surface-page);
    font-family: var(--font-family-base);
}

.faq__inner {
    position: relative;
}

.faq__header-col {
    /* Bootstrap's align-items-start keeps this column at its content height, which
       leaves the sticky header with no vertical travel. Stretch only the left column
       to the FAQ row height so it can remain pinned beside the sticky tabs. */
    align-self: stretch;
}

.faq__header {
    position: sticky;
    top: calc(var(--header-height) + var(--faq-sticky-gap));
    align-self: start;
}

.faq__header h2 {
    margin: 0;
    font-size: var(--section-title-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-title-line-height);
}

.faq__content {
    min-width: 0;
}

.faq__content-col {
    min-width: 0;
}

/* ---- แท็บหมวดคำถาม: ทำสไตล์ตามแนวเดียวกับ .agenda__tabs (แถบปุ่ม + เส้น
   indicator ไล่สีที่เลื่อนตามตำแหน่งจริงของปุ่มที่เลือก) แต่เป็น class และ
   ตัวแปรของ FAQ เองทั้งหมด ไม่ได้ดึง CSS ของ agenda มาใช้ */
.faq__tabs-viewport {
    position: sticky;
    top: calc(var(--header-height) + var(--faq-sticky-gap));
    z-index: 20;
    margin-bottom: var(--space-0);
    padding: var(--space-4) var(--space-0) var(--space-0);
    background: var(--color-surface-page);
}

.faq__tabs-viewport.is-sticky::before {
    content: '';
    position: absolute;
    right: 0;
    bottom: 100%;
    left: 0;
    height: var(--faq-sticky-gap);
    background: var(--color-surface-page);
    pointer-events: none;
}

.faq__tabs {
    --faq-tab-indicator-x: 0px;
    --faq-tab-indicator-width: 0px;

    position: relative;
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    min-height: var(--touch-target-md);
    margin: 0;
    overflow: visible;
    scrollbar-width: none;

    &::-webkit-scrollbar {
        display: none;
    }

    /* เส้นใต้แถบแท็บยาวสุดแถวเสมอ ไม่ใช่แค่ความกว้างของปุ่มรวมกัน */
    &::after {
        content: '';
        flex: 1 1 auto;
        border-bottom: var(--rule-width-emphasis) solid var(--color-border-faint);
    }
}

.faq__tab {
    position: relative;
    z-index: 1;
    flex: 0 0 auto;
    min-height: var(--touch-target-md);
    padding: 0 var(--space-6);
    border: 0;
    border-bottom: var(--rule-width-emphasis) solid var(--color-border-faint);
    color: var(--color-text-muted);
    background: transparent;
    font: inherit;
    font-size: var(--section-body-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-body-line-height);
    white-space: nowrap;
    cursor: pointer;
    transition: color var(--duration-fast) var(--ease-standard);

    &:hover {
        color: var(--color-text-primary);
    }

    &:focus-visible {
        outline: var(--border-width-2) solid var(--color-focus-ring);
        outline-offset: calc(var(--border-width-2) * -1);
    }

    &[aria-selected="true"] {
        color: var(--color-text-primary);
        font-weight: var(--font-weight-medium);
    }
}

.faq__tab-indicator {
    position: absolute;
    bottom: 0;
    left: 0;
    z-index: 2;
    width: var(--faq-tab-indicator-width);
    height: var(--rule-width-emphasis);
    background: var(--gradient-table-active-spectrum);
    pointer-events: none;
    transform: translateX(var(--faq-tab-indicator-x));
    will-change: width, transform;
}

.faq__tabs[data-indicator-ready="true"] .faq__tab-indicator {
    transition:
        width var(--duration-base) linear,
        transform var(--duration-base) linear;
}

.faq__panel[hidden] {
    display: none;
}

.faq__accordion {
    border-top: 0;
    --bs-accordion-bg: transparent;
    --bs-accordion-border-width: 0;
    --bs-accordion-border-color: transparent;
    --bs-accordion-border-radius: 0;
    --bs-accordion-inner-border-radius: 0;
    --bs-accordion-active-bg: transparent;
    --bs-accordion-active-color: var(--color-text-primary);
    --bs-accordion-btn-bg: transparent;
    --bs-accordion-btn-color: var(--color-text-primary);
    --bs-accordion-btn-focus-border-color: transparent;
    --bs-accordion-btn-focus-box-shadow: none;
}

.faq__item {
    background: transparent;
    border-bottom: var(--rule-width-subtle) solid var(--color-border-faint);
    /* border-bottom: var(--rule-width-subtle) solid var(--color-border-editorial); */
}

.faq__question-heading {
    margin: 0;
}

.faq__question {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--space-10);
    gap: var(--space-6);
    align-items: center;
    padding: var(--space-5) var(--space-6);
    color: var(--color-text-primary);
    font-size: var(--faq-question-font-size);
    font-weight: var(--faq-question-font-weight);
    line-height: 1.45;
    cursor: pointer;
    list-style: none;
    box-shadow: none;
}

.faq__question::after {
    display: none;
}

.faq__question:not(.collapsed) {
    padding-top: var(--space-10);
    padding-bottom: var(--space-4);
}

.faq__question:focus-visible {
    outline: 2px solid #315efb;
    outline-offset: var(--space-1);
}

.faq__icon {
    position: relative;
    /* width: var(--space-10);
    height: var(--space-10);
    border-radius: 50%; */
}

.faq__icon::before,
.faq__icon::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 14px;
    height: 1.5px;
    border-radius: 999px;
    background: currentColor;
    transform: translate(-50%, -50%);
    transition:
        opacity var(--duration-base) var(--ease-standard),
        transform var(--duration-base) var(--ease-standard);
}

.faq__icon::after {
    transform: translate(-50%, -50%) rotate(90deg);
}

.faq__question:not(.collapsed) .faq__icon::after {
    opacity: 0;
    transform: translate(-50%, -50%) rotate(90deg) scaleX(0.2);
}

.faq__answer {
    box-sizing: border-box;
    color: var(--color-text-muted);
    font-size: var(--faq-answer-font-size);
    font-weight: var(--faq-answer-font-weight);
    line-height: var(--section-body-line-height);
}

.faq__answer-body {
    box-sizing: border-box;
    padding: var(--space-0) var(--space-6) var(--space-10);
    color: var(--color-text-muted);
    font-size: var(--faq-answer-font-size);
    font-weight: var(--faq-answer-font-weight);
    line-height: var(--section-body-line-height);
}

.faq__answer-body p {
    margin: 0;
}

.faq__answer-body p+ul,
.faq__answer-body ul+p {
    margin-top: var(--space-2);
}

.faq__answer-body ul {
    margin-bottom: 0;
    padding-left: 0;
    list-style: none;
}

.faq__answer-body li {
    display: flex;
    gap: var(--space-3);
    align-items: flex-start;
}

.faq__answer-body li::before {
    content: "";
    flex: 0 0 var(--space-3);
    width: var(--space-3);
    height: var(--space-3);
    margin-top: calc((var(--section-body-line-height) - var(--space-3)) / 2);
    background: url("../images/star.webp") center / contain no-repeat;
}

.faq__answer-body li+li {
    margin-top: var(--space-1);
}

.faq__answer-body a {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: 3px;
}

@media (max-width: 991px) {
    .faq {
        padding: var(--section-padding-y-sm) 0;
    }

    .faq__header {
        position: static;
        margin-bottom: var(--space-12);
    }

    .faq__tabs-viewport {
        padding: var(--space-0);
    }

}

@media (max-width: 767px) {
    .faq {
        --faq-sticky-gap: var(--space-4);
    }
}

/* ป้ายแท็บ 4 อันรวมกันกว้างเกินพื้นที่คอลัมน์ขวาในบาง breakpoint (เหมือนปัญหา
   เดียวกับ .agenda__tabs) จึงเปลี่ยนเป็นเลื่อนแนวนอนได้แทนการหด/ตัดคำ เพื่อให้
   อ่านป้ายแท็บครบทุกคำ โดยไม่ดันหน้าเว็บล้นออกด้านขวา */
@media (max-width: 1399px) {
    .faq__tabs {
        overflow-x: auto;
        overflow-y: hidden;
        padding-right: var(--space-4);
        scroll-padding-inline: var(--space-4);
    }
}

@media (max-width: 1399px) and (min-width: 992px) {
    .faq .bt-title-highlight.has-px {
        padding-left: var(--space-0);
    }
}

@media (max-width: 575px) {
    .faq {
        --faq-question-font-size: var(--font-size-14);
        --faq-answer-font-size: var(--font-size-14);
    }

    .faq__tab {
        padding: 0 var(--space-4);
    }

    .faq__question {
        grid-template-columns: minmax(0, 1fr) var(--space-8);
        gap: var(--space-4);
        padding: var(--space-4) var(--space-3);
    }

    .faq__question:not(.collapsed) {
        padding-top: var(--space-8);
        padding-bottom: var(--space-2);
    }

    .faq__icon {
        width: var(--space-8);
        height: var(--space-8);
    }

    .faq__answer-body {
        padding: var(--space-0) var(--space-0) var(--space-8) var(--space-3);
        line-height: var(--section-small-line-height);
    }

    .faq__answer-body p+ul,
    .faq__answer-body ul+p {
        margin-top: var(--space-1);
    }
}

/* ---------- CTA ---------- */
.cta {
    position: relative;
    padding: var(--section-padding-y-sm) var(--space-0) var(--space-0);
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);
}

.cta__inner {
    position: relative;
}

.cta__panel {
    position: relative;
    overflow: hidden;
    padding: var(--space-16) var(--space-12) var(--space-20);
    border-radius: var(--card-radius);
    background:
        radial-gradient(circle at 18% 0%, color-mix(in srgb, var(--color-blue-100) 72%, transparent) 0%, transparent 34%),
        radial-gradient(circle at 92% 100%, color-mix(in srgb, var(--color-kv-spectrum-4) 12%, transparent) 0%, transparent 34%),
        var(--color-neutral-50);
    text-align: center;
}

/* .cta__panel::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    border: var(--rule-width-subtle) solid var(--color-border-faint);
    pointer-events: none;
} */

/* ---------- ของประกอบฉากในแผง CTA ----------
   ใช้ภาพ ขนาด ฟิลเตอร์ และการลอยขยับชุดเดียวกับ .playbook__asset
   ตำแหน่งกำหนดเป็น % ของแผงจึงเลื่อนตามขนาดจอเอง และถูกตัดขอบด้วย overflow ของ .cta__panel */
.cta__assets {
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

/* เนื้อหาต้องอยู่เหนือของประกอบฉากเสมอ เพราะเลเยอร์ด้านบนเป็น element ที่ positioned */
.cta__panel> :not(.cta__assets) {
    position: relative;
    z-index: 1;
}

.cta__asset {
    position: absolute;
    top: var(--bt-cta-asset-y);
    left: var(--bt-cta-asset-x);
    width: var(--bt-cta-asset-size);
    display: block;
    transform: translate(-50%, -50%);
    filter: saturate(1.3);
}

.cta__asset-float {
    display: block;
    will-change: transform;
}

/* saturate เท่ากับของ playbook แต่ไม่ใส่เงา (พื้นแผง CTA สว่าง เงาจะเด่นเกินไป) */
.cta__asset img {
    width: 100%;
    height: auto;
    display: block;
    filter: saturate(1.3);
    transform: rotate(var(--bt-cta-asset-rotation));
}

/* องศาเดียวกับ --bt-playbook-stock-rotation */
.cta__asset--stock {
    --bt-cta-asset-x: 16%;
    --bt-cta-asset-y: 56%;
    --bt-cta-asset-size: calc(var(--space-16) + var(--space-1));
    --bt-cta-asset-rotation: -34deg;
}

.cta__asset--triangle {
    --bt-cta-asset-x: 83%;
    --bt-cta-asset-y: 27%;
    --bt-cta-asset-size: var(--space-28);
    --bt-cta-asset-rotation: -8deg;
}

.cta__title {
    max-width: 900px;
    margin: 0 auto;
    font-size: var(--section-title-size);
    font-weight: var(--font-weight-regular);
    line-height: var(--section-title-line-height);
    letter-spacing: var(--section-title-tracking);
    text-wrap-style: balance;
}

.cta__meta,
.cta__offer {
    margin: var(--space-6) auto var(--space-0);
    color: var(--color-text-muted);
    font-size: var(--font-size-20);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    letter-spacing: 0;
    text-wrap-style: balance;
}

.cta__offer {
    margin-top: var(--space-2);
    color: var(--color-text-muted);
    font-weight: var(--font-weight-regular);
}

.cta__action {
    margin-top: var(--space-8);
    display: grid;
    place-items: center;
}

/* ---------- CTA responsive ----------
   ขนาด title ไม่ต้องกำหนดที่นี่ เพราะ h2 ใส่คลาส .bt-section-title แล้ว
   จึงย่อตามบันไดกลางของทุก section (48 → 40 → 32 → 28)
   ของประกอบฉากย่อลงและถอยเข้ามุมทุกขั้น เพื่อไม่ให้ทับคอลัมน์ข้อความที่จัดกลาง */
@media (max-width: 1199px) {
    .cta__panel {
        padding: var(--space-12) var(--space-10) var(--space-16);
    }

    .cta__asset--stock {
        --bt-cta-asset-x: 12%;
        --bt-cta-asset-y: 72%;
    }

    .cta__asset--triangle {
        --bt-cta-asset-x: 88%;
        --bt-cta-asset-y: 22%;
    }
}

@media (max-width: 991px) {
    .cta__panel {
        padding: var(--space-12) var(--space-8);
    }

    .cta__asset--stock {
        --bt-cta-asset-size: calc(var(--space-16) - var(--space-2));
    }

    .cta__asset--triangle {
        --bt-cta-asset-size: var(--space-24);
    }
}

@media (max-width: 767px) {
    .cta__panel {
        padding: var(--space-10) var(--space-6);
    }

    .cta__meta,
    .cta__offer {
        font-size: var(--section-body-size);
    }

    .cta__asset--stock {
        --bt-cta-asset-size: calc(var(--space-16) - var(--space-3));
    }

    .cta__asset--triangle {
        --bt-cta-asset-x: 90%;
        --bt-cta-asset-y: 20%;
        --bt-cta-asset-size: calc(var(--space-24) - var(--space-2));
    }
}

@media (max-width: 575px) {
    .cta {
        padding: var(--space-0);
    }

    .cta__panel {
        padding: var(--space-16) var(--space-5);
        text-align: center;
    }

    .cta__meta,
    .cta__offer {
        line-height: var(--section-body-line-height);
    }

    .cta__action {
        justify-items: center;
    }

    .cta__asset--stock {
        --bt-cta-asset-x: 20%;
        --bt-cta-asset-y: 76%;
        --bt-cta-asset-size: var(--space-10);
    }

    .cta__asset--triangle {
        --bt-cta-asset-x: 90%;
        --bt-cta-asset-y: 42%;
        --bt-cta-asset-size: var(--space-20);
    }
}

/* หมุนรอบจุดกึ่งกลางพร้อมเลื่อน/ย่อขยายเล็กน้อยไปด้วย ทำให้ blob ลอยเป็นวงอิสระ
   ไม่ตรงตามแกนใดแกนหนึ่ง — สองชุดหมุนคนละทิศและคนละความเร็ว เพื่อไม่ให้จับจังหวะซ้ำได้ */
@keyframes speaker-aurora-a {
    0% {
        transform: rotate(0deg) translate(0, 0) scale(1);
    }

    25% {
        transform: rotate(90deg) translate(6%, -5%) scale(1.08);
    }

    50% {
        transform: rotate(180deg) translate(-5%, 6%) scale(0.95);
    }

    75% {
        transform: rotate(270deg) translate(-6%, -4%) scale(1.06);
    }

    100% {
        transform: rotate(360deg) translate(0, 0) scale(1);
    }
}

@keyframes speaker-aurora-b {
    0% {
        transform: rotate(0deg) translate(0, 0) scale(1.04);
    }

    25% {
        transform: rotate(-90deg) translate(-7%, 4%) scale(0.96);
    }

    50% {
        transform: rotate(-180deg) translate(5%, -6%) scale(1.1);
    }

    75% {
        transform: rotate(-270deg) translate(4%, 6%) scale(0.98);
    }

    100% {
        transform: rotate(-360deg) translate(0, 0) scale(1.04);
    }
}


/* ---------- Expectation ----------
   สรุปขนาดของงานแบบนิตยสาร: พื้นที่ขาว ตัวเลขเด่น และใช้เส้นบางแบ่งจังหวะแทนกรอบการ์ด */
.expectation {
    --bt-expectation-title-size: var(--section-title-size);
    --bt-expectation-stat-size: var(--section-title-size);
    --bt-expectation-stat-line-height: var(--section-title-line-height);
    --bt-expectation-bg: var(--color-neutral-50);

    /* ความยาวของเส้นคั่นระหว่างช่อง (ดู .expectation__stat::before)
       เพดานอยู่ที่ ~150px เพราะเนื้อหาสูง 103px และช่องไฟระหว่างสองแถวมี 48px
       ถ้าเส้นยาวกว่านั้นส่วนที่ยื่นเกินของแถวบน-ล่างจะไล่มาชนกันจนดูรก */
    --expectation-rule-length: 80px;

    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--bt-expectation-bg);
    font-family: var(--font-family-base);

    .expectation__header {
        text-align: center;

        h2 {
            margin: 0;
            font-size: var(--bt-expectation-title-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-title-line-height);
            letter-spacing: var(--section-title-tracking);
        }
    }

    /* ใช้ Bootstrap row/column เป็นโครงหลัก เส้นตั้งวางที่ขอบ column จึงคงแนวตรงกันทุกขนาด */
    .expectation__stats {
        margin-top: var(--space-16);
        row-gap: var(--space-12);
    }

    .expectation__stat {
        position: relative;
        display: flex;
        min-width: 0;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        text-align: center;

        /* เส้นคั่นเป็นภาพเส้น-ดาวที่วาดมาเป็นแนวนอน จึงต้องหมุน 90° เอา
           กล่องเลยกว้าง = ความยาวเส้น และสูง = ความยาวหารอัตราส่วนภาพ (1023:112 ≈ 9.13)
           ต่างจากเส้น 1px เดิมตรงที่ยืดตามความสูงเนื้อหาเองไม่ได้แล้ว ต้องกำหนดความยาว
           ตายตัวผ่าน --expectation-rule-length แล้วปรับเป็นช่วง ๆ ตามขนาดจอ */
        &::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 0;
            width: var(--expectation-rule-length);
            height: calc(var(--expectation-rule-length) / 9.13);
            background: url('../images/line-star.webp') center / contain no-repeat;
            transform: translate(-50%, -50%) rotate(90deg);
        }

        &:first-child::before {
            display: none;
        }

        /* Desktop แถวที่สองเริ่มจากรายการที่ 4 */
        &:nth-child(4)::before {
            display: none;
        }

        strong {
            font-size: var(--bt-expectation-stat-size);
            font-weight: var(--font-weight-medium);
            line-height: var(--bt-expectation-stat-line-height);
            letter-spacing: 0;
        }

        span {
            color: var(--color-text-muted);
            margin-top: var(--space-3);
            font-size: var(--section-body-size);
            font-weight: var(--font-weight-light);
            line-height: var(--section-body-line-height);
            letter-spacing: 0;
        }

        /* ลำดับการอ่านในแต่ละช่อง: ตัวเลข → ป้ายไทย → ป้ายอังกฤษ
           ป้ายไทยเป็นบรรทัดหลักจึงใช้สีหมึกเต็มและน้ำหนักปกติ ส่วนอังกฤษยังเป็นบรรทัดรอง
           (สีจาง น้ำหนักบาง) ตามค่าเดิม — ขนาดตัวอักษรใช้สเกลเดิมทุกเบรกพอยต์ ไม่แตะดีไซน์ */
        span.expectation__stat-label-th {
            color: var(--color-text-primary);
            font-weight: var(--font-weight-regular);
        }

        span.expectation__stat-label-th+span {
            margin-top: 2px;
        }

        /* เครื่องหมาย + ท้ายตัวเลข: รับขนาด/น้ำหนักจากตัวเลข ไม่รับค่าของป้ายข้อความ (span) ด้านบน เปลี่ยนแค่สี */
        strong .expectation__stat-suffix {
            margin-top: 0;
            color: var(--color-blue-600);
            font: inherit;
            letter-spacing: inherit;
        }
    }

    @media (max-width: 991px) {
        --bt-expectation-stat-size: var(--section-heading-size);

        /* ตัวเลขเล็กลงตามกฎด้านล่าง เนื้อหาจึงเตี้ยลงเหลือ ~92px
           ถ้าคงเส้นไว้ที่ 135px ส่วนที่ยื่นเกินจะเหลือช่องไฟระหว่างแถวแค่ 5px */
        --expectation-rule-length: 72px;

        padding: var(--section-padding-y-sm) 0;

        .expectation__stats {
            margin-top: var(--space-12);
            row-gap: var(--space-8);
            justify-content: center;
        }

        /* ที่ต่ำกว่า desktop รายการที่ 7 เริ่มแถวสุดท้าย */
        .expectation__stat:nth-child(7)::before {
            display: none;
        }
    }

    @media (max-width: 767px) {
        --bt-expectation-title-size: var(--section-heading-size);
        --bt-expectation-stat-size: var(--font-size-32);
        --expectation-rule-length: 64px;

        .expectation__stat {
            span {
                font-size: var(--section-body-size);
                line-height: var(--section-body-line-height);
            }
        }

    }

    @media (max-width: 575px) {
        .expectation__stats {
            row-gap: var(--space-6);
        }

        .expectation__stat {
            flex: 0 0 auto;
            width: 50%;
        }

        .expectation__stat:nth-child(odd)::before {
            display: none;
        }

        .expectation__stat:nth-child(even)::before {
            display: block;
        }

        .expectation__stat span {
            font-size: var(--section-small-size);
        }
    }
}


/* ---------- Floor Plan ----------
   แสดงหัวข้อและภาพแผนผังบูทเต็มความกว้างของ Bootstrap container */
.floor-plan {
    --bt-floor-plan-title-size: var(--section-title-size);
    --bt-floor-plan-zone-label-size: var(--font-size-36);
    --bt-floor-plan-line-width: var(--border-width-2);
    --bt-floor-plan-image-offset: var(--space-6);
    --bt-floor-plan-callout-offset: var(--space-2);
    --bt-floor-plan-image-duration: calc(var(--duration-slow) + var(--duration-standard) + var(--duration-fast));
    --bt-floor-plan-callout-duration: calc(var(--duration-slow) + var(--duration-base));
    --bt-floor-plan-callout-start-delay: var(--bt-floor-plan-callout-duration);
    --bt-floor-plan-callout-step-delay: calc(var(--duration-base) + var(--duration-fast));

    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);

    /* หัวข้อเป็นสองบรรทัดเหมือน section อื่น จึงใช้ title-line-height (140%)
       ไม่ใช่ display-line-height (88px) ที่ตั้งไว้ตอนยังเป็นบรรทัดเดียว ไม่งั้นสองบรรทัดจะห่างเกิน */
    .floor-plan__title {
        margin: 0;
        font-size: var(--bt-floor-plan-title-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-title-line-height);
        letter-spacing: 0;
    }

    .floor-plan__figure {
        position: relative;
        margin: var(--space-12) 0 0;
    }

    /* ภาพฐานและ callout ใช้ viewBox เดียวกัน จึงย่อขยายพร้อมกันโดยตำแหน่งไม่คลาด */
    .floor-plan__visual {
        position: relative;
        width: 90%;
        margin-inline: auto;
    }

    .floor-plan__image {
        display: block;
        width: 100%;
        height: auto;
    }

    .floor-plan__callouts {
        position: absolute;
        inset: 0;
        display: block;
        width: 100%;
        height: 100%;
        overflow: visible;
        pointer-events: none;
    }

    .floor-plan__callout-line {
        fill: none;
        stroke: var(--color-neutral-400);
        stroke-width: var(--bt-floor-plan-line-width);
        vector-effect: non-scaling-stroke;
    }

    .floor-plan__callout-label {
        fill: var(--color-blue-600);
        font-family: var(--font-family-heading);
        font-size: var(--bt-floor-plan-zone-label-size);
        font-weight: var(--font-weight-medium);
        letter-spacing: 0;
    }

    /* ซ่อนเฉพาะเมื่อ JavaScript พร้อมทำ reveal เพื่อให้เนื้อหายังแสดงหาก JS ไม่ทำงาน */
    &.is-reveal-ready {
        .floor-plan__image {
            opacity: 0;
            transform: translateY(var(--bt-floor-plan-image-offset));
        }

        .floor-plan__callout-line {
            stroke-dasharray: var(--floor-plan-line-length);
            stroke-dashoffset: var(--floor-plan-line-length);
        }

        .floor-plan__callout-mark,
        .floor-plan__callout-label {
            opacity: 0;
        }

        .floor-plan__callout-mark {
            transform-box: fill-box;
            transform-origin: center;
            transform: scale(0.72);
        }

        .floor-plan__callout-label {
            transform: translateY(var(--bt-floor-plan-callout-offset));
        }
    }

    &.is-reveal-ready.is-visible {
        .floor-plan__image {
            opacity: 1;
            transform: translateY(0);
            transition:
                opacity var(--bt-floor-plan-image-duration) var(--ease-standard),
                transform var(--bt-floor-plan-image-duration) var(--ease-standard);
        }

        .floor-plan__callout-line {
            stroke-dashoffset: 0;
            transition: stroke-dashoffset var(--bt-floor-plan-callout-duration) var(--ease-standard);
        }

        .floor-plan__callout-mark {
            opacity: 1;
            transform: scale(1);
            transition:
                opacity var(--bt-floor-plan-callout-duration) var(--ease-standard),
                transform var(--bt-floor-plan-callout-duration) var(--ease-standard);
        }

        .floor-plan__callout-label {
            opacity: 1;
            transform: translateY(0);
            transition:
                opacity var(--bt-floor-plan-callout-duration) var(--ease-standard),
                transform var(--bt-floor-plan-callout-duration) var(--ease-standard);
        }

        /* Callouts reveal by layer: every line, then every star, then every label. */
        .floor-plan__callout-line {
            transition-delay: var(--bt-floor-plan-callout-start-delay);
        }

        .floor-plan__callout-mark {
            transition-delay: calc(var(--bt-floor-plan-callout-start-delay) + var(--bt-floor-plan-callout-step-delay));
        }

        .floor-plan__callout-label {
            transition-delay: calc(var(--bt-floor-plan-callout-start-delay) + var(--bt-floor-plan-callout-step-delay) + var(--bt-floor-plan-callout-step-delay));
        }
    }

    @media (max-width:991px) {
        padding: var(--section-padding-y-sm) 0;

        /* จอเล็กคืนความกว้างเต็ม ย่ออีก 20% แล้วชื่อโซนในแผนผังจะอ่านไม่ออก */
        .floor-plan__visual {
            width: 100%;
        }
    }

    /* ลดหัวข้อลงเท่า Expectation/Concept ที่ทำไว้แล้ว ถ้าคง 48px ไว้บนจอ 375px
       จะเหลือที่ราว 16 ตัวอักษรต่อบรรทัด หัวข้อจึงตัดคำจนมีคำห้อยท้ายบรรทัดเดียวโดด ๆ */
    @media (max-width: 767px) {
        --bt-floor-plan-title-size: var(--section-heading-size);
        --bt-floor-plan-zone-label-size: var(--font-size-48);
    }

    @media (prefers-reduced-motion: reduce) {

        .floor-plan__image,
        .floor-plan__callout-line,
        .floor-plan__callout-mark,
        .floor-plan__callout-label {
            opacity: 1;
            transform: none;
            transition: none;
        }
    }
}


/* ---------- Sponsor & Partners ----------
   กรอบเปล่ารอใส่โลโก้จริงภายหลัง ขนาดตามดีไซน์คุมด้วยแทร็กของกริด (minmax) กรอบจึงหด
   ตามจอแคบได้เองโดยยังคงสัดส่วนเดิมไว้ด้วย aspect-ratio ไม่ต้องล็อกความสูงเป็น px */
.sponsor {
    --bt-sponsor-lead-width: 258px;
    --bt-sponsor-lead-ratio: 258 / 120;
    --bt-sponsor-md-width: 192px;
    --bt-sponsor-md-ratio: 192 / 90;
    --bt-sponsor-sm-width: 90px;
    --bt-sponsor-sm-ratio: 90 / 62;
    --bt-sponsor-sm-columns: 6;
    --bt-sponsor-frame-bg: #eaeaea;

    padding: var(--section-padding-y) 0;
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);

    .sponsor__group:not([hidden])~.sponsor__group:not([hidden]) {
        margin-top: var(--space-20);
    }

    /* หน้าตาตัวอักษรมาจาก .bt-section-title ทั้งหมด (ฟอนต์/ขนาด/น้ำหนัก/line-height/tracking)
       ให้เหมือนหัวข้อของ section อื่น ที่นี่เหลือแค่ระยะห่างกับการจัดกึ่งกลางตามเลย์เอาต์ของ section นี้ */
    .sponsor__group-title {
        margin: 0 0 var(--space-8);
        text-align: center;
        text-transform: uppercase;
    }

    .sponsor__image {
        width: 100%;
        max-width: 610px;
        height: auto;
        margin: 0 auto;
        display: block;
        filter: drop-shadow(0 clamp(0.5px, 0.16vw, 1px) clamp(1.5px, 0.5vw, 3px) rgba(7, 16, 28, 0.04));
    }

    .sponsor__logos {
        margin: 0;
        padding: 0;
        display: grid;
        justify-content: center;
        gap: var(--space-3);
        list-style: none;
    }

    /* Sponsors มีสองแถว (3 ช่องใหญ่ + 12 ช่องเล็ก) อยู่คนละ <ul> จึงต้องคั่นระยะเอง */
    .sponsor__logos+.sponsor__logos {
        margin-top: var(--space-3);
    }

    .sponsor__logos--lead {
        grid-template-columns: minmax(0, var(--bt-sponsor-lead-width));
    }

    .sponsor__logos--md {
        grid-template-columns: repeat(3, minmax(0, var(--bt-sponsor-md-width)));
    }

    .sponsor__logos--sm {
        grid-template-columns: repeat(var(--bt-sponsor-sm-columns), minmax(0, var(--bt-sponsor-sm-width)));
        gap: var(--space-3);
    }

    /* กรอบเปล่า: วาง <img> เข้าไปทีหลังได้เลย รูปจะ contain อยู่ในกรอบเองไม่ล้นและไม่ยืดเสียสัดส่วน */
    .sponsor__logo {
        width: 100%;
        display: grid;
        place-items: center;
        overflow: hidden;
        padding: var(--space-2);
        border-radius: var(--card-radius);
        background: var(--bt-sponsor-frame-bg);
    }

    .sponsor__logo--lead {
        aspect-ratio: var(--bt-sponsor-lead-ratio);
    }

    .sponsor__logo--md {
        aspect-ratio: var(--bt-sponsor-md-ratio);
    }

    .sponsor__logo--sm {
        aspect-ratio: var(--bt-sponsor-sm-ratio);
    }

    .sponsor__logo img {
        max-width: 100%;
        max-height: 100%;
        display: block;
        object-fit: contain;
    }

    /* กฎย่อขนาดหัวข้อของส่วนกลางเจาะจงไว้ที่ h2.bt-section-title เท่านั้น หัวข้อกลุ่มที่นี่
       เป็น h3 (ลำดับหัวข้อถูกต้องเพราะซ้อนอยู่ใต้ h2 ของ section) จึงต้องไล่ขนาดเองให้ตรงกัน
       ไม่งั้นจอเล็กจะค้างที่ 48px ขณะที่หัวข้อ section อื่นย่อลงไปแล้ว */
    @media (max-width: 991px) {
        .sponsor__group-title {
            --bt-section-title-size: var(--font-size-40);
        }
    }

    /* ช่องเล็กเรียง 6 ต่อแถวตามดีไซน์ ลดจำนวนคอลัมน์ลงตามจอแทนที่จะปล่อยให้บีบจนโลโก้เล็กเกินอ่าน */
    @media (max-width: 767px) {

        padding: var(--section-padding-y-sm) 0;

        .sponsor__group:not([hidden])~.sponsor__group:not([hidden]) {
            margin-top: var(--space-12);
        }

        .sponsor__group-title {
            --bt-section-title-size: var(--font-size-32);

            margin-bottom: var(--space-6);
        }
    }

    @media (max-width: 575px) {

        /* ต่ำกว่านี้ช่องขนาดกลาง/เล็กถูกแทร็กของกริดบีบให้เล็กลงตามความกว้างจอ (ราว 0.62 เท่า)
           แต่ Title Sponsor มีคอลัมน์เดียวจึงยังกางเต็ม 258px อยู่ เลยดูใหญ่เกินสัดส่วนช่องอื่น
           ผูกความกว้างไว้กับแทร็กจริงของช่องขนาดกลาง แล้วคูณอัตราส่วนเดิมของดีไซน์กลับเข้าไป
           ทุกช่องจึงย่อลงพร้อมกันด้วยอัตราเดียวกัน ความสูงตามมาเองจาก aspect-ratio
           min() ทำให้ตอนจอยังกว้างพอ (ใกล้ 575px) ได้ 258px เท่าเดิม ไม่กระโดดตรงรอยต่อ
           เลข 258/188 คือค่าของ --bt-sponsor-lead-width กับ --bt-sponsor-md-width ด้านบน
           (calc หารความยาวด้วยความยาวเป็นตัวเลขไม่ได้ จึงต้องเขียนซ้ำ) ถ้าแก้สองค่านั้นต้องแก้ตรงนี้ด้วย */
        --bt-sponsor-lead-width:
            calc(min(var(--bt-sponsor-md-width), (100% - var(--space-1) * 2) / 3) * 258 / 188);

        .sponsor__group-title {
            --bt-section-title-size: var(--font-size-28);
        }

        .sponsor__logos+.sponsor__logos {
            margin-top: var(--space-1);
        }

        .sponsor__logos {
            gap: var(--space-1);
        }

        .sponsor__logos--sm {
            gap: var(--space-1);
        }
    }
}


/* ---------- Footer ----------
   ส่วนปิดท้ายแบบ contact module สำหรับงาน event แสดงเฉพาะช่องทางติดต่อและผู้สนับสนุน */
.site-footer {
    padding: var(--section-padding-y-sm) 0 0;
    color: var(--bt-footer-ink);
    background: var(--color-surface-page);
    font-family: var(--font-family-base);

    .site-footer__inner {
        padding-right: calc(var(--bs-gutter-x) * 0.5 + var(--space-10));
        padding-left: calc(var(--bs-gutter-x) * 0.5 + var(--space-10));
    }

    .site-footer__panel {
        position: relative;
        isolation: isolate;
        overflow: hidden;
        /* ด้านล่างแคบกว่าด้านบน เพื่อให้บรรทัดสรุปงานอยู่ชิดขอบล่างของแผง */
        padding: var(--space-16) 0 var(--space-4);
        border-radius: var(--radius-1);
        background:
            radial-gradient(35% 80% at 30% 0%, rgba(115, 130, 170, 0.28), transparent),
            linear-gradient(180deg, #19274A 0%, #020B1E 100%);

        &::before,
        &::after {
            content: "";
            position: absolute;
            pointer-events: none;
        }

        &::before {
            top: calc(var(--space-10) * -1);
            left: 50%;
            z-index: 0;
            width: min(78%, 900px);
            height: min(76%, 280px);
            background:
                radial-gradient(ellipse at 50% 0%, rgba(244, 221, 178, 0.3) 0%, rgba(214, 171, 104, 0.16) 30%, rgba(115, 130, 170, 0.1) 56%, transparent 78%);
            filter: blur(20px);
            opacity: 0.94;
            transform: translateX(-50%);
        }

        &::after {
            top: var(--space-0);
            left: 50%;
            z-index: 0;
            width: min(58%, 680px);
            height: var(--border-width-2);
            background: linear-gradient(90deg,
                    transparent 0%,
                    rgba(244, 221, 178, 0.16) 14%,
                    rgba(231, 201, 151, 0.88) 50%,
                    rgba(214, 171, 104, 0.2) 86%,
                    transparent 100%);
            box-shadow:
                0 0 16px rgba(231, 201, 151, 0.42),
                0 0 34px rgba(214, 171, 104, 0.2);
            opacity: 0.9;
            transform: translateX(-50%);
        }
    }

    .site-footer__content {
        position: relative;
        z-index: 1;
        align-items: stretch;
        /* gutter เดิมของ Bootstrap (1.5rem รวม = 12px ต่อฝั่ง) แคบเกินไปสำหรับ
           border-left ที่ทำหน้าที่เป็นเส้นแบ่ง section — โลโก้ (แคบ) กับหัวข้อ
           "Booths & Sponsors" (เกือบเต็มคอลัมน์) กว้างต่างกันมาก พอเจอ gutter แคบ
           เส้นเลยดูเหมือนแปะติดฝั่งขวาตลอด ไม่ใช่เส้นแบ่งกลางที่เป็นกลาง */
        --bs-gutter-x: var(--space-16);
    }

    .site-footer__logo {
        display: block;
        margin-bottom: var(--space-6);
        width: min(100%, var(--bt-footer-logo-width));
        height: auto;
    }

    .site-footer__column {
        min-width: 0;
        margin: var(--space-0);
        border-left: var(--rule-width-subtle) solid var(--bt-footer-line);
    }

    /* The contact column is first now that the logo lives inside it instead of its own
       column, so it no longer needs a leading rule at any width. */
    .site-footer__column:first-of-type {
        border-left: 0;
    }

    .site-footer__eyebrow {
        margin: var(--space-0);
        font-size: var(--section-body-size);
        font-weight: var(--font-weight-light);
        line-height: var(--section-body-line-height);
        letter-spacing: 0;
        text-transform: uppercase;
    }

    /* บรรทัดสรุปงานปิดท้าย footer อยู่ล่างสุดและจัดกึ่งกลาง
       ต้องมี z-index เพราะฉากเรืองแสงของแผง (::before/::after) เป็น element ที่ positioned */
    .site-footer__summary {
        position: relative;
        z-index: 1;
        margin: var(--space-12) var(--space-0) var(--space-0);
        padding-top: var(--space-4);
        border-top: var(--rule-width-subtle) solid var(--bt-footer-line);
        color: var(--bt-footer-muted);
        font-size: var(--section-small-size);
        font-weight: var(--font-weight-light);
        line-height: var(--section-small-line-height);
        text-align: center;
    }

    h3 {
        margin: 0;
        color: var(--bt-footer-ink);
        font-size: var(--section-subheading-size);
        font-weight: var(--font-weight-regular);
        line-height: var(--section-topic-line-height);
        letter-spacing: 0;
    }

    .site-footer__contact-list,
    .site-footer__person {
        font-style: normal;
    }

    .site-footer__contact-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-6);
        margin: var(--space-0);
        padding-top: var(--space-4);
        /* border-top: var(--rule-width-subtle) solid var(--bt-footer-line); */

        a {
            display: inline-flex;
            gap: var(--space-3);
            align-items: center;
            color: var(--bt-footer-ink);
            text-decoration: none;
            transition:
                color var(--duration-base) var(--ease-standard),
                opacity var(--duration-base) var(--ease-standard);

            &:hover {
                opacity: 0.64;
            }

            &:focus-visible {
                color: var(--color-category-cyan);
                outline: var(--border-width-2) solid var(--color-category-cyan);
                outline-offset: var(--space-1);
            }
        }

        .site-footer__contact-icon {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            color: var(--bt-footer-muted);

            .bt-icon {
                width: var(--bt-icon-size);
                height: var(--bt-icon-size);
            }
        }

        strong {
            min-width: 0;
            white-space: nowrap;
            font-size: var(--section-body-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--section-body-line-height);
        }

    }

    .site-footer__people {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--space-8);
        margin: var(--space-0);
        padding-top: var(--space-4);
        /* border-top: var(--rule-width-subtle) solid var(--bt-footer-line); */
    }

    .site-footer__person {
        display: grid;
        gap: var(--space-1);
        margin: 0;
        padding-top: var(--space-4);

        p,
        a {
            margin: 0;
            font-size: var(--section-body-size);
            line-height: var(--section-body-line-height);
        }

        p {
            color: var(--bt-footer-ink);
            font-weight: var(--font-weight-regular);
        }

        p span {
            color: var(--bt-footer-muted);
            font-weight: var(--font-weight-light);
        }

        a {
            display: inline-flex;
            align-items: center;
            gap: var(--space-3);
            width: fit-content;
            color: var(--bt-footer-ink);
            font-weight: var(--font-weight-light);
            white-space: nowrap;
            text-decoration: none;
            transition:
                color var(--duration-base) var(--ease-standard),
                opacity var(--duration-base) var(--ease-standard);

            &:hover {
                opacity: 0.64;
            }

            &:focus-visible {
                color: var(--color-category-cyan);
                outline: var(--border-width-2) solid var(--color-category-cyan);
                outline-offset: var(--space-1);
            }
        }

        .site-footer__contact-icon {
            display: inline-flex;
            flex: none;
            align-items: center;
            justify-content: center;
            color: var(--bt-footer-muted);

            .bt-icon {
                width: var(--bt-icon-size);
                height: var(--bt-icon-size);
            }
        }
    }

    @media (max-width: 1350px) {

        .site-footer__contact-list strong,
        .site-footer__person a {
            font-size: var(--font-size-14);
        }
    }

    @media (max-width: 1199px) {
        .site-footer__people {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .site-footer__contact-list {
            grid-template-columns: 1fr;
            gap: var(--space-4);
        }

        .site-footer__contact-list strong,
        .site-footer__person a {
            font-size: var(--font-size-16);
        }
    }

    @media (max-width: 991px) {
        .site-footer__panel {
            padding: var(--space-6) 0;
            background:
                radial-gradient(circle at 30% 0%, rgba(115, 130, 170, 0.28), transparent 48%),
                linear-gradient(180deg, #19274A 0%, #020B1E 100%);
        }

        .site-footer__inner {
            padding-right: calc(var(--bs-gutter-x) * 0.5 + var(--space-8));
            padding-left: calc(var(--bs-gutter-x) * 0.5 + var(--space-8));
        }

        .site-footer__column {
            flex: 0 0 100%;
            max-width: 100%;
            padding-top: var(--space-8);
            padding-bottom: var(--space-8);
            border-top: var(--rule-width-subtle) solid var(--bt-footer-line);
            border-left: 0;
        }

        .site-footer__column:first-of-type {
            border-top: none;
        }

        .site-footer__people {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }

        .site-footer__contact-list {
            grid-template-columns: repeat(2, 1fr);
        }

        .site-footer__person {
            padding-top: 0;
        }
    }

    @media (max-width: 767px) {
        .site-footer__people {
            grid-template-columns: 1fr;
            gap: var(--space-6);
            padding-top: var(--space-10);
        }

        .site-footer__person {
            display: grid;
            grid-template-columns: repeat(2, minmax(0, 1fr));
            gap: var(--space-2) var(--space-10);

            p {
                grid-column: span 2;
            }
        }

        .site-footer__contact-list {
            gap: var(--space-4) var(--space-10);
        }
    }

    @media (max-width: 575px) {
        .site-footer__inner {
            padding-right: calc(var(--bs-gutter-x) * 0.5 + var(--space-3));
            padding-left: calc(var(--bs-gutter-x) * 0.5 + var(--space-3));
        }

        .site-footer__summary {
            margin: var(--space-0);
        }

        .site-footer__panel {
            padding-bottom: calc(var(--space-20) + max(var(--space-3), env(safe-area-inset-bottom)));
        }

        .site-footer__contact-list {
            grid-template-columns: 1fr;
        }

        .site-footer__people {
            padding-top: var(--space-6);
        }

        .site-footer__person {
            grid-template-columns: 1fr;

            p {
                grid-column: auto;
            }
        }
    }
}

/* ---------- alignment debug overlay (press K) ---------- */
#kvref {
    position: absolute;
    inset: 0;
    z-index: 30;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center top;
    opacity: 0;
    pointer-events: none;
    mix-blend-mode: difference;
}

@media (max-width:1199px) {
    :root {
        --hero-static-top-inset: 48px;
        --hero-static-bottom-gap: 32px;
        --hero-static-stage-max-vw: 1.8;
    }

    body.is-mobile-static #stagewrap {
        min-height: 0;
        background: #fff;
    }

    body.is-mobile-static #stage {
        transform: none !important;
        will-change: auto !important;
    }

    body.is-mobile-static #stagewrap::after {
        content: '';
        position: absolute;
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 110;
        height: 28%;
        pointer-events: none;
        background: linear-gradient(180deg,
                rgba(0, 0, 0, 0) 0%,
                rgba(0, 0, 0, 0.42) 44%,
                rgba(0, 0, 0, 0.68) 100%);
    }

    body.is-mobile-static #ship,
    body.is-mobile-static #stairs,
    body.is-mobile-static #pshadow,
    body.is-mobile-static .person {
        transform: none !important;
        will-change: auto;
        backface-visibility: visible;
    }

    body.is-mobile-static #ship-run-layer,
    body.is-mobile-static #ship-run-whiteout {
        display: none;
    }

    /* เดิม gap ตกจาก space-10/space-8 (40/32px) ของเดสก์ท็อป ลงมาเหลือ space-2 (8px)
       ทันทีที่ข้าม breakpoint นี้ — ชันเกินไปสำหรับจอแท็บเล็ตที่ยังมีพื้นที่เหลือเยอะ
       ปรับให้ค่อย ๆ แคบลงเป็นขั้นแทน ดูจุดต่อที่ 991px และ 767px ด้านล่าง ส่วน 575px
       ยังคง space-2 ไว้เท่าเดิมเพราะจอแคบระดับนั้นพื้นที่จำกัดจริง */
    body.is-mobile-static #ui {
        z-index: 120;
        width: min(calc(100vw - var(--space-8)), 720px);
        gap: var(--space-6);
        color: #fff;
    }

    body.is-mobile-static #ui .event-details {
        /* gap: var(--space-5); */
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
    }

    body.is-mobile-static #ui .event-countdown {
        text-shadow: 0 2px 12px rgba(0, 0, 0, 0.72);
    }

    body.is-mobile-static #ui .venue {
        padding-top: var(--space-2);
        font-size: 18px;
    }

    #ui .date,
    #ui .time,
    #ui .event-countdown__unit strong {
        font-size: 24px;
    }
}

@media (max-width:991px) {
    :root {
        --hero-static-top-inset: 44px;
        --hero-static-bottom-gap: 28px;
    }
}

@media (max-width:767px) {
    :root {
        --hero-static-top-inset: 40px;
        --hero-static-bottom-gap: 24px;
    }

    /* ขั้นที่สามของการลดขนาด #ui แบบค่อยเป็นค่อยไป (ดูคอมเมนต์ที่ breakpoint 1199px) */
    body.is-mobile-static #ui {
        gap: var(--space-5);
    }

    body.is-mobile-static #ui .event-details {
        gap: var(--space-5);
    }

    #ui .date,
    #ui .time,
    #ui .event-countdown__unit strong {
        font-size: 20px;
    }
}

@media (max-width:575px) {
    :root {
        --hero-static-top-inset: 32px;
        --hero-static-bottom-gap: 104px;
        --hero-static-stage-max-vw: 1.68;
    }

    .loader-icon {
        max-width: 88px;
        max-height: 88px;
    }

    .loader-progress {
        bottom: var(--space-8);
    }

    body.is-mobile-static #stagewrap::after {
        height: 34%;
    }

    body.is-mobile-static #ui .venue {
        padding-top: var(--space-0);
    }

    #ui {
        top: min(70%, 100% - 216px);
        gap: var(--space-2);
    }

    #ui .event-primary {
        gap: var(--space-2);
    }

    #ui .event-datetime {
        row-gap: var(--space-3);
    }

    #ui .event-countdown {
        min-width: min(280px, calc(100vw - var(--space-8)));
    }

    #ui .event-countdown__values {
        grid-template-columns: repeat(4, minmax(48px, 1fr));
        width: 100%;
        gap: var(--space-6);
    }

    #ui .event-countdown__unit:not(:last-child)::after {
        right: calc(var(--space-3) * -1);
        filter: invert();
    }

    body.is-mobile-static #ui .event-details {
        gap: var(--space-6);
    }
}

@media (max-width:1199px) and (max-height:575px) and (orientation:landscape) {
    :root {
        --hero-static-top-inset: 16px;
        --hero-static-bottom-gap: 0px;
        --hero-static-stage-max-vw: 1.32;
    }

    body.is-mobile-static #stagewrap {
        min-height: 100svh;
    }

    body.is-mobile-static #ui {
        top: auto;
        bottom: var(--space-8);
        width: min(calc(100vw - var(--space-8)), 560px);
        gap: var(--space-3);
    }

    body.is-mobile-static #ui .event-details {
        gap: var(--space-3);
    }

    #ui .event-datetime {
        column-gap: var(--space-2);
        row-gap: var(--space-1);
    }

    #ui .date,
    #ui .time {
        font-size: var(--font-size-18);
    }

    #ui .event-countdown {
        min-width: min(240px, calc(100vw - var(--space-8)));
        gap: var(--space-2);
    }

    #ui .event-countdown__values {
        grid-template-columns: repeat(4, minmax(40px, 1fr));
        gap: var(--space-4);
        width: 100%;
    }

    #ui .event-countdown__unit {
        gap: var(--space-2);
    }

    #ui .event-countdown__unit:not(:last-child)::after {
        right: calc(var(--space-2) * -1);
        width: var(--bt-hero-countdown-divider-width-sm);
        height: calc(var(--bt-hero-countdown-divider-width-sm) / var(--bt-hero-countdown-divider-ratio));
    }

    #ui .event-countdown__unit strong {
        font-size: var(--font-size-20);
    }

    #ui .event-countdown__unit small {
        font-size: var(--font-size-12);
    }

    body.is-mobile-static #ui .venue {
        padding-top: var(--space-0);
        font-size: var(--font-size-14);
    }
}

@media (max-width:767px) and (max-height:390px) and (orientation:landscape) {
    body.is-mobile-static #ui {
        top: auto;
        bottom: var(--space-8);
        gap: var(--space-2);
    }

    body.is-mobile-static #ui .event-details {
        gap: var(--space-2);
    }

    #ui .date,
    #ui .time,
    #ui .event-countdown__unit strong {
        font-size: var(--font-size-16);
    }

    #ui .event-countdown__values {
        grid-template-columns: repeat(4, minmax(36px, 1fr));
        gap: var(--space-3);
    }

    #ui .event-countdown__unit:not(:last-child)::after {
        right: calc(var(--space-1) * -1);
        width: var(--space-8);
        height: calc(var(--space-8) / var(--bt-hero-countdown-divider-ratio));
    }
}

@media (prefers-reduced-motion:reduce) {

    .site-header__mobile,
    .site-header__mobile-scroll,
    .site-header__backdrop,
    .site-header__toggle-lines span,
    .bt-action-button,
    .site-header__nav a::after {
        transition-duration: 0.01ms;
    }

    .site-header {
        transition-duration: 0.01ms;
    }

    .agenda__tab-indicator {
        transition-duration: var(--duration-reduced) !important;
    }

    .faq__tab-indicator {
        transition-duration: var(--duration-reduced) !important;
    }
}


/* Keep the Ticket subtext intact in Safari, where an anonymous flex text item
   can otherwise wrap before the decorative rule has yielded its available width. */
#ticket .bt-section-subtext {
    flex-wrap: nowrap;
    white-space: nowrap;
}

#ticket .bt-section-subtext::after {
    flex: 0 1 var(--bt-subtext-rule-length);
    min-width: var(--space-8);
}

/* Journey indicator: a passive route map from Concept to Past Event. */
.journey-indicator {
    --journey-progress: 0%;
    --journey-edge-gap: var(--space-28);
    --journey-title-length: 160px;
    --journey-track-color: rgba(17, 19, 24, 0.20);
    --journey-track-background: var(--journey-track-color);
    --journey-title-background: var(--color-neutral-900);
    --journey-label-color: var(--color-neutral-900);
    --journey-label-background: var(--bt-journey-label-bg);
    --journey-label-offset: var(--space-3);
    --journey-marker-size: var(--bt-journey-label-star-size);

    position: fixed;
    top: max(var(--journey-edge-gap), env(safe-area-inset-top));
    right: auto;
    bottom: max(var(--journey-edge-gap), env(safe-area-inset-bottom));
    left: max(var(--space-2), env(safe-area-inset-left));
    z-index: 230;
    display: block;
    opacity: 0;
    pointer-events: none;
    transform: translate3d(-12px, 0, 0);
    transition:
        opacity var(--duration-standard) var(--ease-standard),
        transform var(--duration-standard) var(--ease-standard);
}

.journey-indicator.is-visible {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.journey-indicator.is-marker-on-dark {
    --journey-label-color: var(--color-neutral-0);
    --journey-label-background: var(--bt-journey-label-bg-dark);
}


.journey-indicator__title {
    position: absolute;
    /* กล่องนี้ยังไม่ได้หมุน วางเลื่อนลงมาตามความยาวของคำ (--journey-title-length) แล้วค่อย
       หมุน -90deg รอบจุด left center ด้านล่างเพื่อให้กลายเป็นตัวหนังสือแนวตั้งพาดขึ้นด้านบน
       ค่าคงที่ 24px เดิมทำให้ปลายบนของตัวหนังสือหลังหมุนย้อนขึ้นไปทับ header sticky (สูง 80px)
       อยู่ประมาณ 18px เปลี่ยนเป็นค่าบวกเพื่อดันกล่องลงมาก่อนหมุน ให้ปลายบนเคลียร์ header
       พร้อมเว้นช่องว่างอีก 8px (ตัวเลขนี้ผูกกับความสูง header ปัจจุบันเท่านั้น ถ้า header
       สูงเปลี่ยนไปมากต้องคำนวณค่านี้ใหม่) */
    top: calc(var(--journey-title-length) + -8px);
    left: 16px;
    color: transparent;
    background: var(--journey-title-background);
    -webkit-background-clip: text;
    background-clip: text;
    font-size: var(--font-size-12);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: 0.1em;
    white-space: nowrap;
    transform: rotate(-90deg);
    transform-origin: left center;
    -webkit-text-fill-color: transparent;
}

.journey-indicator__rail {
    position: absolute;
    top: calc(var(--journey-title-length) + var(--space-3));
    bottom: 0;
    left: 0;
    width: 32px;
}

.journey-indicator__rail::after {
    content: '';
    position: absolute;
    top: var(--journey-progress);
    left: 50%;
    z-index: 2;
    width: var(--journey-marker-size);
    height: var(--journey-marker-size);
    background: url('../images/star.webp') center / contain no-repeat;
    filter: drop-shadow(0 2px 6px rgba(17, 19, 24, 0.20));
    opacity: 0;
    transform: translate(-50%, -50%);
    transition: opacity var(--duration-fast) var(--ease-standard);
    pointer-events: none;
    will-change: top;
}

.journey-indicator.is-marker-visible .journey-indicator__rail::after {
    opacity: 1;
}

.journey-indicator.is-marker-changing .journey-indicator__rail::after {
    animation: journey-marker-in var(--duration-standard) var(--ease-standard);
}

.journey-indicator__track,
.journey-indicator__progress {
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 100%;
    border-radius: var(--radius-round);
    transform: translateX(-50%);
}

.journey-indicator__track {
    background: var(--journey-track-background);
    transition: background-color var(--duration-fast) var(--ease-standard);
}

.journey-indicator__progress {
    background: var(--gradient-spectrum-vertical);
    clip-path: inset(0 0 calc(100% - var(--journey-progress)) 0 round var(--radius-round));
}

.journey-indicator__label {
    position: absolute;
    top: var(--journey-progress);
    left: calc(50% + var(--journey-label-offset));
    color: var(--journey-label-color);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
    line-height: 1;
    letter-spacing: 0.02em;
    padding: var(--bt-journey-label-padding-y) var(--bt-journey-label-padding-x);
    border-radius: var(--bt-journey-label-radius);
    background: var(--journey-label-background);
    box-shadow: var(--bt-journey-label-shadow);
    white-space: nowrap;
    opacity: 0;
    transform: translateY(-50%);
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard),
        opacity var(--duration-fast) var(--ease-standard);
}

.journey-indicator__label::before {
    content: none;
}

.journey-indicator__label.is-visible {
    opacity: 1;
}

.journey-indicator__label.is-changing {
    animation: journey-label-in var(--duration-standard) var(--ease-standard);
}

@keyframes journey-label-in {
    from {
        opacity: 0;
        transform: translate(-8px, -50%);
    }
}

@keyframes journey-marker-in {
    from {
        opacity: 0;
        transform: translate(-50%, -50%) scale(0.72);
    }
}

@media (max-width: 991px) {
    .journey-indicator {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .journey-indicator {
        transition-duration: var(--duration-reduced);
    }

    .journey-indicator__label.is-changing {
        animation: none;
    }

    .journey-indicator.is-marker-changing .journey-indicator__rail::after {
        animation: none;
    }
}

/* ---------- Playbook ---------- grid-layered artwork with responsive content flow */
.playbook {
    --bt-playbook-content-top-space: calc(var(--space-32) - var(--space-3));
    --bt-playbook-content-bottom-space: calc(var(--space-32) - var(--space-3));
    --bt-playbook-content-middle-space: var(--space-0);
    --bt-playbook-content-scale: 1;
    --bt-playbook-header-scale: var(--bt-playbook-content-scale);
    --bt-playbook-steps-scale: var(--bt-playbook-content-scale);
    --bt-playbook-artboard-width: 100%;
    --bt-playbook-artboard-fixed-width: calc(var(--space-32) * 7 + var(--space-24) - var(--border-width-1));
    --bt-playbook-artboard-aspect-ratio: 2490 / 1720;
    --bt-playbook-title-overlap-base: var(--space-3);
    --bt-playbook-title-base-size: var(--font-size-80);
    --bt-playbook-subtitle-space-base: var(--space-6);
    --bt-playbook-subtitle-base-size: var(--font-size-24);
    --bt-playbook-title-art-base-width: calc(var(--space-32) * 6.5 - var(--space-2));
    --bt-playbook-title-overlap: calc(var(--bt-playbook-title-overlap-base) * var(--bt-playbook-header-scale));
    --bt-playbook-title-size: max(var(--font-size-32), calc(var(--bt-playbook-title-base-size) * var(--bt-playbook-header-scale)));
    --bt-playbook-title-color: inherit;
    --bt-playbook-title-shine: linear-gradient(120deg,
            rgba(255, 255, 255, 0) 40%,
            rgba(255, 255, 255, 0.8) 50%,
            rgba(255, 255, 255, 0) 60%);
    --bt-playbook-subtitle-space: calc(var(--bt-playbook-subtitle-space-base) * var(--bt-playbook-header-scale));
    --bt-playbook-subtitle-size: max(var(--font-size-16), calc(var(--bt-playbook-subtitle-base-size) * var(--bt-playbook-header-scale)));
    --bt-playbook-subtitle-line-height: var(--line-height-normal);
    --bt-playbook-steps-grid: repeat(3, minmax(var(--space-0), 1fr));
    --bt-playbook-steps-gap: var(--space-0);
    --bt-playbook-footer-gap-base: var(--space-8);
    --bt-playbook-step-padding-inline-base: var(--space-8);
    --bt-playbook-step-padding-bottom-base: var(--space-0);
    --bt-playbook-step-number-base-size: var(--font-size-32);
    --bt-playbook-step-title-base-size: var(--font-size-24);
    --bt-playbook-step-copy-base-size: var(--font-size-16);
    --bt-playbook-footer-gap: max(var(--space-6), calc(var(--bt-playbook-footer-gap-base) * var(--bt-playbook-steps-scale)));
    --bt-playbook-steps-container: 1140px;
    --bt-playbook-steps-width: auto;
    --bt-playbook-step-padding-inline: max(var(--space-3), calc(var(--bt-playbook-step-padding-inline-base) * var(--bt-playbook-steps-scale)));
    --bt-playbook-step-padding-bottom: calc(var(--bt-playbook-step-padding-bottom-base) * var(--bt-playbook-steps-scale));
    --bt-playbook-step-number-size: max(var(--font-size-20), calc(var(--bt-playbook-step-number-base-size) * var(--bt-playbook-steps-scale)));
    --bt-playbook-step-title-size: max(var(--font-size-16), calc(var(--bt-playbook-step-title-base-size) * var(--bt-playbook-steps-scale)));
    --bt-playbook-step-copy-size: max(var(--font-size-14), calc(var(--bt-playbook-step-copy-base-size) * var(--bt-playbook-steps-scale)));
    --bt-playbook-step-copy-margin: calc(var(--space-2) + var(--border-width-1)) var(--space-0) var(--space-0);
    --bt-playbook-step-copy-line-height: normal;
    --bt-playbook-divider-top: 50%;
    --bt-playbook-divider-right: var(--space-0);
    --bt-playbook-divider-bottom: auto;
    --bt-playbook-divider-left: auto;
    --bt-playbook-divider-length-base: var(--space-24);
    --bt-playbook-divider-length: max(var(--space-12), calc(var(--bt-playbook-divider-length-base) * var(--bt-playbook-steps-scale)));
    --bt-playbook-divider-aspect-ratio: 9.13;
    --bt-playbook-divider-transform: translate(50%, -50%) rotate(90deg);
    --bt-playbook-divider-filter: invert(1);
    --bt-playbook-bitcoin-x: 19%;
    --bt-playbook-bitcoin-y: 23%;
    --bt-playbook-bitcoin-size: calc(var(--space-32) + var(--space-4));
    --bt-playbook-bitcoin-rotation: -4deg;
    --bt-playbook-gold-x: 79%;
    --bt-playbook-gold-y: 26%;
    --bt-playbook-gold-size: var(--space-28);
    --bt-playbook-gold-rotation: 18deg;
    --bt-playbook-triangle-x: 88%;
    --bt-playbook-triangle-y: 48%;
    --bt-playbook-triangle-size: var(--space-28);
    --bt-playbook-triangle-rotation: -8deg;
    --bt-playbook-heart-x: 84%;
    --bt-playbook-heart-y: 73%;
    --bt-playbook-heart-size: calc(var(--space-32) + var(--space-12));
    --bt-playbook-heart-rotation: 8deg;
    --bt-playbook-stock-x: 11%;
    --bt-playbook-stock-y: 73%;
    --bt-playbook-stock-size: var(--space-20);
    --bt-playbook-stock-rotation: -34deg;
    --bt-playbook-arrow-up-x: 11%;
    --bt-playbook-arrow-up-y: 48%;
    --bt-playbook-arrow-up-size: var(--space-32);
    --bt-playbook-arrow-up-rotation: 0deg;
    --bt-playbook-asset-image-filter: saturate(1.3) drop-shadow(0 var(--space-2) var(--space-3) var(--alpha-ink-34));
    --bt-playbook-title-art-width: calc(var(--bt-playbook-title-art-base-width) * var(--bt-playbook-header-scale));
    --bt-playbook-title-art-max-width: 100%;
    --bt-playbook-title-art-margin-left: auto;
    --bt-playbook-title-art-transform: none;
    --bt-playbook-overlay-background: linear-gradient(180deg, var(--alpha-ink-08) 52%, color-mix(in srgb, var(--color-neutral-900) 58%, transparent) 100%);
    --bt-playbook-ink-soft: color-mix(in srgb, var(--color-neutral-0) 92%, transparent);
    --bt-playbook-ink-dim: color-mix(in srgb, var(--color-neutral-0) 86%, transparent);
    --bt-playbook-step-1-color: #ff5d43;
    --bt-playbook-step-2-color: #ff168d;
    --bt-playbook-step-3-color: #a91cff;
    --bt-playbook-shadow-soft: 0 var(--border-width-2) calc(var(--space-4) + var(--border-width-2)) var(--alpha-ink-34);
    --bt-playbook-shadow-strong: 0 var(--border-width-2) calc(var(--space-3) + var(--border-width-2)) color-mix(in srgb, var(--color-neutral-900) 58%, transparent);
    --bt-playbook-glow-breathe-duration: var(--duration-ambient);
    --bt-playbook-glow-ease: var(--ease-ambient);
    --bt-playbook-glow-base-opacity-low: 0.5;
    --bt-playbook-glow-base-opacity-high: 1;
    --bt-playbook-glow-base-brightness-low: 1.08;
    --bt-playbook-glow-base-brightness-high: 2;
    position: relative;
    display: grid;
    overflow: visible;
    isolation: isolate;
    color: var(--color-neutral-0);
    background: var(--color-neutral-900);
    font-family: var(--font-family-base);

    &::after {
        content: '';
        position: absolute;
        inset: var(--space-0);
        z-index: 1;
        background: var(--bt-playbook-overlay-background);
        pointer-events: none;
    }

    .playbook__background,
    .playbook__assets,
    .playbook__scene,
    .playbook__content {
        grid-area: 1 / 1;
    }

    .playbook__background {
        z-index: 0;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        overflow: hidden;
        pointer-events: none;
    }

    .playbook__background picture,
    .playbook__scene picture {
        width: var(--bt-playbook-artboard-width);
        max-width: none;
        display: block;
        margin-inline: auto;
    }

    .playbook__background-image {
        width: var(--bt-playbook-artboard-width);
        max-width: none;
        height: auto;
        display: block;
        margin-inline: auto;
    }

    .playbook__assets {
        position: absolute;
        inset: var(--space-0);
        z-index: 2;
        overflow: hidden;
        pointer-events: none;
    }

    .playbook__assets-artboard {
        position: relative;
        width: var(--bt-playbook-artboard-width);
        max-width: none;
        aspect-ratio: var(--bt-playbook-artboard-aspect-ratio);
        margin-inline: auto;
    }

    .playbook__asset {
        position: absolute;
        top: var(--bt-playbook-asset-y);
        left: var(--bt-playbook-asset-x);
        width: var(--bt-playbook-asset-size);
        display: block;
        transform: translate(-50%, -50%);
    }

    .playbook__asset-motion,
    .playbook__asset-float {
        display: block;
        will-change: transform;
    }

    .playbook__asset-motion {
        will-change: transform, opacity;
    }

    .playbook__asset img {
        width: 100%;
        height: auto;
        display: block;
        filter: var(--bt-playbook-asset-image-filter);
        transform: rotate(var(--bt-playbook-asset-rotation));
    }

    .playbook__asset--bitcoin {
        --bt-playbook-asset-x: var(--bt-playbook-bitcoin-x);
        --bt-playbook-asset-y: var(--bt-playbook-bitcoin-y);
        --bt-playbook-asset-size: var(--bt-playbook-bitcoin-size);
        --bt-playbook-asset-rotation: var(--bt-playbook-bitcoin-rotation);
    }

    .playbook__asset--gold {
        --bt-playbook-asset-x: var(--bt-playbook-gold-x);
        --bt-playbook-asset-y: var(--bt-playbook-gold-y);
        --bt-playbook-asset-size: var(--bt-playbook-gold-size);
        --bt-playbook-asset-rotation: var(--bt-playbook-gold-rotation);
    }

    .playbook__asset--triangle {
        --bt-playbook-asset-x: var(--bt-playbook-triangle-x);
        --bt-playbook-asset-y: var(--bt-playbook-triangle-y);
        --bt-playbook-asset-size: var(--bt-playbook-triangle-size);
        --bt-playbook-asset-rotation: var(--bt-playbook-triangle-rotation);
    }

    .playbook__asset--heart {
        --bt-playbook-asset-x: var(--bt-playbook-heart-x);
        --bt-playbook-asset-y: var(--bt-playbook-heart-y);
        --bt-playbook-asset-size: var(--bt-playbook-heart-size);
        --bt-playbook-asset-rotation: var(--bt-playbook-heart-rotation);
    }

    .playbook__asset--stock {
        --bt-playbook-asset-x: var(--bt-playbook-stock-x);
        --bt-playbook-asset-y: var(--bt-playbook-stock-y);
        --bt-playbook-asset-size: var(--bt-playbook-stock-size);
        --bt-playbook-asset-rotation: var(--bt-playbook-stock-rotation);
    }

    .playbook__asset--arrow-up {
        --bt-playbook-asset-x: var(--bt-playbook-arrow-up-x);
        --bt-playbook-asset-y: var(--bt-playbook-arrow-up-y);
        --bt-playbook-asset-size: var(--bt-playbook-arrow-up-size);
        --bt-playbook-asset-rotation: var(--bt-playbook-arrow-up-rotation);
    }

    .playbook__scene {
        position: relative;
        z-index: 3;
        align-self: start;
        width: 100%;
        max-width: none;
        justify-self: stretch;
        overflow: hidden;
        pointer-events: none;
    }

    .playbook__glow {
        position: absolute;
        top: var(--space-0);
        left: 50%;
        z-index: 0;
        height: 100%;
        opacity: 0;
        transform: translateX(-50%);
        mix-blend-mode: screen;
        pointer-events: none;
    }

    .playbook__glow-image {
        width: var(--bt-playbook-artboard-width);
        max-width: none;
        height: auto;
        display: block;
        margin-inline: auto;
        will-change: opacity, filter;
    }

    .playbook__glow--base .playbook__glow-image {
        animation: playbook-glow-breathe var(--bt-playbook-glow-breathe-duration) var(--bt-playbook-glow-ease) infinite;
        animation-play-state: paused;
    }

    .playbook__glow--base {
        opacity: 1;
    }

    &.playbook--glow-running {
        .playbook__glow--base .playbook__glow-image {
            animation-play-state: running;
        }
    }

    .playbook__book {
        position: relative;
        z-index: 1;
        width: var(--bt-playbook-artboard-width);
        max-width: none;
        height: auto;
        display: block;
        margin-inline: auto;
    }

    .playbook__content {
        z-index: 4;
        align-self: stretch;
        width: 100%;
        height: 100%;
        display: grid;
        grid-template-rows:
            var(--bt-playbook-content-top-space) auto minmax(var(--bt-playbook-content-middle-space), 1fr) auto var(--bt-playbook-content-bottom-space);
    }

    .playbook__header {
        grid-row: 2;
        margin: var(--space-0) auto;
        text-align: center;
        text-shadow: var(--bt-playbook-shadow-soft);

        h2 {
            position: relative;
            margin: var(--bt-playbook-title-overlap) var(--space-0) var(--space-0);
            color: var(--bt-playbook-title-color);
            font-size: var(--bt-playbook-title-size);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-1);
            letter-spacing: var(--letter-spacing-0);
        }

        h2::after {
            content: attr(data-shiny-text);
            position: absolute;
            inset: 0;
            color: transparent;
            background: var(--bt-playbook-title-shine);
            background-size: 200% 100%;
            background-position: 100% 50%;
            -webkit-background-clip: text;
            background-clip: text;
            animation: playbook-title-shine 5s linear infinite;
            filter:
                drop-shadow(0 0 0.06em rgba(255, 255, 255, 0.72)) drop-shadow(0 0 0.14em rgba(255, 255, 255, 0.34));
            -webkit-text-fill-color: transparent;
            pointer-events: none;
        }

        p {
            margin: var(--bt-playbook-subtitle-space) var(--space-0) var(--space-0);
            color: var(--alpha-white-96);
            font-size: var(--bt-playbook-subtitle-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--bt-playbook-subtitle-line-height);
        }
    }

    .playbook__title-art {
        max-width: var(--bt-playbook-title-art-max-width);
        width: var(--bt-playbook-title-art-width);
        height: auto;
        display: block;
        margin: var(--space-0) auto;
        margin-left: var(--bt-playbook-title-art-margin-left);
        transform: var(--bt-playbook-title-art-transform);
    }

    .playbook__footer {
        grid-row: 4;
        display: grid;
        gap: var(--bt-playbook-footer-gap);
    }

    .playbook__steps {
        width: var(--bt-playbook-steps-width);
        margin: var(--space-0) auto;
        padding: var(--space-0);
        max-width: var(--bt-playbook-steps-container);
        display: grid;
        grid-template-columns: var(--bt-playbook-steps-grid);
        gap: var(--bt-playbook-steps-gap);
        list-style: none;
    }

    .playbook__step {
        position: relative;
        min-width: var(--space-0);
        padding: var(--space-0) var(--bt-playbook-step-padding-inline) var(--bt-playbook-step-padding-bottom);
        text-align: center;
        text-shadow: var(--bt-playbook-shadow-strong);

        &:not(:last-child)::after {
            content: '';
            position: absolute;
            top: var(--bt-playbook-divider-top);
            right: var(--bt-playbook-divider-right);
            bottom: var(--bt-playbook-divider-bottom);
            left: var(--bt-playbook-divider-left);
            width: var(--bt-playbook-divider-length);
            height: calc(var(--bt-playbook-divider-length) / var(--bt-playbook-divider-aspect-ratio));
            background: url('../images/line-star.webp') center / contain no-repeat;
            filter: var(--bt-playbook-divider-filter);
            transform: var(--bt-playbook-divider-transform);
        }

        strong {
            display: block;
            color: var(--bt-playbook-step-1-color);
            font-size: var(--bt-playbook-step-number-size);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-1);
        }

        &:nth-child(2) strong {
            color: var(--bt-playbook-step-2-color);
        }

        &:nth-child(3) strong {
            color: var(--bt-playbook-step-3-color);
        }

        h3 {
            margin: var(--space-2) var(--space-0) var(--space-0);
            color: inherit;
            font-size: var(--bt-playbook-step-title-size);
            font-weight: var(--font-weight-medium);
            line-height: var(--line-height-1);
        }

        p {
            margin: var(--bt-playbook-step-copy-margin);
            color: var(--bt-playbook-ink-soft);
            font-size: var(--bt-playbook-step-copy-size);
            font-weight: var(--font-weight-regular);
            line-height: var(--bt-playbook-step-copy-line-height);
        }
    }

    .playbook__action {
        display: grid;
        place-items: center;

        .lmb button:focus-visible {
            outline-color: var(--color-neutral-0);
        }
    }

    @media (max-width: 1699px) {
        --bt-playbook-header-scale: 0.9;
    }

    @media (max-width: 1599px) {
        /* --bt-playbook-content-scale: 0.8; */
        --bt-playbook-header-scale: 0.8;
    }

    @media (max-width: 1499px) {
        --bt-playbook-content-top-space: var(--space-24);
        --bt-playbook-content-bottom-space: var(--space-24);
        --bt-playbook-steps-container: 920px;
        /* --bt-playbook-content-scale: 0.7; */
        --bt-playbook-bitcoin-size: calc(var(--space-28) + var(--space-2));
        --bt-playbook-gold-size: var(--space-24);
        --bt-playbook-triangle-size: var(--space-24);
        --bt-playbook-heart-x: 88%;
        --bt-playbook-heart-size: calc(var(--space-32) + var(--space-4));
        --bt-playbook-stock-size: calc(var(--space-16) + var(--space-2));
        --bt-playbook-arrow-up-size: var(--space-28);
    }

    @media (max-width: 1399px) {
        --bt-playbook-header-scale: 0.7;
        --bt-playbook-content-scale: 0.8;
    }

    @media (max-width: 1299px) {
        --bt-playbook-content-top-space: var(--space-20);
        --bt-playbook-content-bottom-space: var(--space-20);
        --bt-playbook-steps-container: 720px;
    }

    @media (max-width: 1199px) {
        --bt-playbook-content-top-space: var(--space-24);
        --bt-playbook-content-bottom-space: var(--space-24);
        --bt-playbook-content-middle-space: calc(var(--space-32) * 3 + var(--space-16));
        --bt-playbook-content-scale: 1;
        --bt-playbook-header-scale: 0.85;
        --bt-playbook-steps-scale: 0.95;
        --bt-playbook-steps-container: 960px;
        --bt-playbook-step-padding-inline-base: var(--space-6);
        --bt-playbook-bitcoin-x: 12%;
        --bt-playbook-bitcoin-y: 22%;
        --bt-playbook-bitcoin-size: var(--space-28);
        --bt-playbook-gold-x: 86%;
        --bt-playbook-gold-y: 24%;
        --bt-playbook-gold-size: var(--space-20);
        --bt-playbook-triangle-x: 81%;
        --bt-playbook-triangle-y: 42%;
        --bt-playbook-triangle-size: var(--space-20);
        --bt-playbook-heart-x: 88%;
        --bt-playbook-heart-y: 60%;
        --bt-playbook-heart-size: var(--space-32);
        --bt-playbook-stock-x: 12%;
        --bt-playbook-stock-y: 54%;
        --bt-playbook-stock-size: calc(var(--space-16) - var(--space-2));
        --bt-playbook-arrow-up-x: 24%;
        --bt-playbook-arrow-up-y: 40%;
        --bt-playbook-arrow-up-size: var(--space-24);


        .playbook__background,
        .playbook__scene {
            display: flex;
            justify-content: center;
            height: 100%;
        }

        .playbook__background-image {
            object-fit: cover;
            height: 100%;
        }

        .playbook__book {
            object-fit: cover;
            height: 100%;
        }

        .playbook__glow-image {
            object-fit: cover;
            height: 100%;
        }

        .playbook__assets-artboard {
            height: 100%;
        }
    }

    @media (max-width: 991px) {
        --bt-playbook-header-scale: 0.7;
        --bt-playbook-steps-scale: 0.85;
        --bt-playbook-content-top-space: var(--space-20);
        --bt-playbook-content-bottom-space: var(--space-20);
        --bt-playbook-content-middle-space: calc(var(--space-32) * 2 + var(--space-16));
        --bt-playbook-footer-gap: var(--space-6);
        --bt-playbook-bitcoin-y: 24%;
        --bt-playbook-bitcoin-size: calc(var(--space-28) - var(--space-2));
        --bt-playbook-gold-x: 88%;
        --bt-playbook-gold-y: 28%;
        --bt-playbook-gold-size: calc(var(--space-16) - var(--space-1));
        --bt-playbook-triangle-y: 44%;
        --bt-playbook-overlay-background:
            linear-gradient(180deg,
                color-mix(in srgb, var(--color-neutral-900) 2%, transparent) 28%,
                color-mix(in srgb, var(--color-neutral-900) 58%, transparent) 55%,
                color-mix(in srgb, var(--color-neutral-900) 88%, transparent) 100%);

    }

    @media (max-width: 767px) {
        --bt-playbook-content-top-space: var(--space-24);
        --bt-playbook-content-bottom-space: var(--space-24);
        --bt-playbook-header-scale: 0.65;
        --bt-playbook-steps-scale: 0.6;
        --bt-playbook-subtitle-line-height: 1.2;
        --bt-playbook-title-art-margin-left: auto;
        --bt-playbook-title-art-transform: none;
        --bt-playbook-content-middle-space: calc(var(--space-32) * 3 + var(--space-16));
        --bt-playbook-footer-gap: var(--space-8);
        --bt-playbook-steps-grid: repeat(3, minmax(var(--space-0), 1fr));
        --bt-playbook-steps-gap: var(--space-0);
        --bt-playbook-step-padding-inline: var(--space-3);
        --bt-playbook-step-padding-bottom: var(--space-0);
        --bt-playbook-divider-top: 50%;
        --bt-playbook-divider-right: var(--space-0);
        --bt-playbook-divider-bottom: auto;
        --bt-playbook-divider-left: auto;
        --bt-playbook-divider-length: var(--space-16);
        --bt-playbook-divider-transform: translate(50%, -50%) rotate(90deg);
        --bt-playbook-bitcoin-x: 12%;
        --bt-playbook-bitcoin-y: 26%;
        --bt-playbook-bitcoin-size: var(--space-20);
        --bt-playbook-gold-x: 86%;
        --bt-playbook-gold-y: 28%;
        --bt-playbook-gold-size: var(--space-16);
        --bt-playbook-triangle-size: var(--space-16);
        --bt-playbook-heart-x: 88%;
        --bt-playbook-heart-y: 62%;
        --bt-playbook-heart-size: var(--space-20);
        --bt-playbook-stock-x: 12%;
        --bt-playbook-stock-y: 58%;
        --bt-playbook-stock-size: var(--space-12);
        --bt-playbook-arrow-up-x: 16%;
        --bt-playbook-arrow-up-y: 40%;
        --bt-playbook-arrow-up-size: var(--space-20);
    }

    @media (max-width: 575px) {
        --bt-playbook-content-top-space: var(--space-24);
        --bt-playbook-content-bottom-space: var(--space-24);
        --bt-playbook-content-middle-space: calc(var(--space-32) * 2 + var(--space-16));
        --bt-playbook-header-scale: 1;
        --bt-playbook-steps-scale: 1;
        --bt-playbook-title-art-max-width: var(--size-320);
        --bt-playbook-title-size: var(--font-size-36);
        --bt-playbook-subtitle-size: var(--font-size-14);
        --bt-playbook-subtitle-space: var(--space-4);
        --bt-playbook-step-number-size: var(--font-size-24);
        --bt-playbook-step-title-size: var(--font-size-20);
        --bt-playbook-step-copy-margin: var(--space-2) var(--space-0) var(--space-0);
        --bt-playbook-step-copy-size: var(--font-size-14);
        --bt-playbook-step-copy-line-height: var(--line-height-normal);
        --bt-playbook-artboard-aspect-ratio: 2490 / 2100;
        --bt-playbook-bitcoin-size: var(--space-16);
        --bt-playbook-gold-size: var(--space-12);
        --bt-playbook-triangle-size: var(--space-12);
        --bt-playbook-heart-size: var(--space-16);
        --bt-playbook-stock-size: var(--space-10);
        --bt-playbook-arrow-up-size: var(--space-16);
        --bt-playbook-steps-width: 100%;
        --bt-playbook-steps-grid: 1fr;
        --bt-playbook-steps-gap: calc(var(--space-6) + var(--space-1));
        --bt-playbook-step-padding-inline: var(--space-0);
        --bt-playbook-step-padding-bottom: var(--space-8);
        --bt-playbook-divider-top: auto;
        --bt-playbook-divider-right: auto;
        --bt-playbook-divider-bottom: var(--space-0);
        --bt-playbook-divider-left: 50%;
        --bt-playbook-divider-length: var(--space-32);
        --bt-playbook-divider-transform: translate(-50%, 50%);
        --bt-playbook-footer-gap: var(--space-3);
    }

    @media (prefers-reduced-motion: reduce) {

        .playbook__asset-motion,
        .playbook__asset-float {
            transform: none !important;
        }

        .playbook__header h2::after {
            animation: none;
            background-position: 100% 50%;
        }

        .playbook__glow--base .playbook__glow-image {
            animation: none;
            opacity: var(--bt-playbook-glow-base-opacity-low);
            filter: brightness(var(--bt-playbook-glow-base-brightness-low));
        }

    }
}

@keyframes playbook-glow-breathe {

    0%,
    100% {
        opacity: var(--bt-playbook-glow-base-opacity-low);
        filter: brightness(var(--bt-playbook-glow-base-brightness-low));
    }

    50% {
        opacity: var(--bt-playbook-glow-base-opacity-high);
        filter: brightness(var(--bt-playbook-glow-base-brightness-high));
    }
}

@keyframes playbook-title-shine {
    0% {
        background-position: 100% 50%;
    }

    100% {
        background-position: -100% 50%;
    }
}

@keyframes ticket-ribbon-text-glow {

    0%,
    100% {
        background-position: 0% 50%;
        text-shadow:
            0 0 6px rgba(255, 255, 255, 0.18),
            0 0 16px rgba(115, 130, 170, 0.14);
    }

    48% {
        background-position: 100% 50%;
        text-shadow:
            0 0 10px rgba(255, 255, 255, 0.34),
            0 0 24px rgba(173, 190, 226, 0.22);
    }
}

@keyframes ticket-ribbon-text-sweep {
    0% {
        background-position: 150% 50%;
        opacity: 0;
    }

    18%,
    62% {
        opacity: 0.72;
    }

    76% {
        background-position: -70% 50%;
        opacity: 0;
    }

    100% {
        background-position: -70% 50%;
        opacity: 0;
    }
}


/* ---------- Cookie Banner ---------- */
.cookie-banner {
    position: fixed;
    right: 0;
    left: 0;
    bottom: var(--space-4);
    z-index: 290;
    width: calc(100% - var(--space-8));
    max-width: 1120px;
    margin-inline: auto;
    padding: var(--space-3) var(--space-4);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-6);
    /* border: var(--border-width-1) solid var(--color-border-default); */
    border-radius: var(--radius-1);
    color: var(--color-text-primary);
    background: var(--color-surface-page);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.06),
        0 6px 18px rgba(0, 0, 0, 0.10);
    opacity: 0;
    transform: translateY(calc(100% + var(--space-8)));
    transition:
        opacity var(--duration-standard) var(--ease-standard),
        transform var(--duration-slow) var(--ease-standard);
}

.cookie-banner.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.cookie-banner__content {
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--space-4);
}

.cookie-banner__icon {
    flex: 0 0 auto;
    width: var(--space-8);
    height: var(--space-8);
    color: var(--color-accent-primary);
    stroke-width: 1.8;
}

.cookie-banner__message {
    min-width: 0;
    margin: var(--space-0);
    color: var(--color-text-secondary);
    font-size: var(--font-size-14);
    font-weight: var(--font-weight-regular);
}

.cookie-banner__message a {
    margin-left: var(--space-1);
    color: var(--color-accent-primary);
    font-weight: var(--font-weight-medium);
    text-underline-offset: var(--space-1);
    transition: opacity var(--duration-fast) var(--ease-standard);
}

.cookie-banner__message a:hover {
    opacity: 0.64;
}

.cookie-banner__message a:focus-visible {
    outline: var(--border-width-2) solid var(--color-focus-ring);
    outline-offset: var(--space-1);
}

.cookie-banner__actions {
    display: flex;
    flex: 0 0 auto;
    gap: var(--space-2);
}

.cookie-banner__button {
    min-width: 104px;
}

.cookie-banner__dismiss {
    width: var(--space-10);
    height: var(--space-10);
    padding: 0;
    display: grid;
    flex: 0 0 auto;
    place-items: center;
    border: 0;
    border-radius: var(--radius-round);
    color: var(--color-text-secondary);
    background: transparent;
    cursor: pointer;
    transition:
        color var(--duration-fast) var(--ease-standard),
        background-color var(--duration-fast) var(--ease-standard);
}

.cookie-banner__dismiss .bt-icon {
    width: var(--space-5);
    height: var(--space-5);
}

.cookie-banner__dismiss:hover {
    color: var(--color-text-primary);
    background: var(--alpha-ink-06);
}

.cookie-banner__dismiss:focus-visible {
    outline: var(--border-width-2) solid var(--color-focus-ring);
    outline-offset: var(--space-1);
}

/* Match the solid primary treatment used by the Ultimate ticket action. */
.cookie-banner__button.bt-action-button--primary {
    border-color: var(--bt-action-fill);
    background: var(--bt-action-fill);
}

@media (max-width: 767px) {
    .cookie-banner {
        padding: var(--space-4);
        align-items: stretch;
        flex-direction: column;
        gap: var(--space-3);
    }

    .cookie-banner__content {
        padding-right: var(--space-12);
    }

    .cookie-banner__actions {
        align-items: center;
        justify-content: flex-end;
    }

    .cookie-banner__dismiss {
        position: absolute;
        top: var(--space-3);
        right: var(--space-3);
    }
}

@media (max-width: 575px) {
    .cookie-banner {
        right: 0;
        bottom: var(--space-3);
        left: 0;
        width: calc(100% - var(--space-6));
        padding: var(--space-4);
    }

    .cookie-banner__message {
        font-size: var(--font-size-14);
    }

    .cookie-banner__content {
        flex-direction: column;
        align-items: flex-start;
        padding-right: var(--space-0);
    }
}

@media (prefers-reduced-motion: reduce) {
    .cookie-banner {
        transition-duration: var(--duration-reduced);
    }
}