:root {
    --bs-body-font-family: "Sarabun", system-ui, -apple-system, sans-serif;
    --cta-accent: rgb(255, 195, 32);
    --cta-accent-soft: rgba(255, 195, 32, 0.55);
    --cta-glow: rgba(255, 195, 32, 0.45);
    --cta-ease-out-back: cubic-bezier(0.34, 1.45, 0.64, 1);
}

html {
    max-width: 100%;
    overflow-x: hidden;
}

.container-rem {
    width: 100%;
    padding-right: 0.75rem;
    padding-left: 0.75rem;
    margin-right: auto;
    margin-left: auto;
}

@media (min-width: 36rem) {
    .container-rem {
        max-width: 33.75rem;
    }
}

@media (min-width: 48rem) {
    .container-rem {
        max-width: 45rem;
    }
}

@media (min-width: 62rem) {
    .container-rem {
        max-width: 60rem;
    }
}

@media (min-width: 75rem) {
    .container-rem {
        max-width: 71.25rem;
    }
}

@media (min-width: 87.5rem) {
    .container-rem {
        max-width: 82.5rem;
    }
}

body {
    font-family: Sarabun, system-ui, -apple-system, sans-serif;
    color: rgb(51, 51, 51);
    max-width: 100%;
    overflow-x: hidden;
}

.navbar-ios-glass {
    background: rgba(12, 12, 14, 0.52);
    backdrop-filter: blur(0.175rem) saturate(180%);
    box-shadow: rgba(255, 255, 255, 0.08) 0px 0.0625rem 0px inset, rgba(0, 0, 0, 0.35) 0px 0.0625rem 0px;
    border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.07);
    padding: 0.8rem 0px;
}

@supports not ((backdrop-filter: blur(0.0625rem)) or (-webkit-backdrop-filter: blur(0.0625rem))) {
    .navbar-ios-glass {
        background: rgba(20, 20, 22, 0.92);
    }
}

.navbar-brand img {
    height: 2.5rem;
}

.btn-navbar-outline {
    border-radius: 2rem;
    padding: 0.55rem 1.35rem;
    font-size: 1.0625rem;
    font-weight: 500;
    transition: transform 0.28s var(--cta-ease-out-back), box-shadow 0.28s ease, color 0.2s ease,
        background-color 0.2s ease, border-color 0.2s ease;
}

.btn-navbar-outline:hover {
    transform: translateY(-0.125rem);
    box-shadow: 0 0.375rem 1.125rem rgba(0, 0, 0, 0.35), 0 0 0 0.0625rem var(--cta-accent-soft),
        0 0 1.25rem var(--cta-glow);
}

.btn-navbar-outline:active {
    transform: translateY(0.0625rem);
    box-shadow: 0 0.125rem 0.5rem rgba(0, 0, 0, 0.25);
}

.btn-navbar-download {
    --bs-btn-border-width: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35em;
    padding: 0.55rem 1.35rem;
    font-size: 1.0625rem;
    font-weight: 600;
    color: rgb(255, 255, 255);
    background: rgba(152, 95, 46, 0.6);
    box-shadow: 0 0 0 0.1rem #ffc320 inset, 0 0 0 -1.625rem #2b2412 inset;
    backdrop-filter: blur(0.46875rem);
    -webkit-backdrop-filter: blur(0.46875rem);
    border-radius: 0rem;
    transition: transform 0.28s var(--cta-ease-out-back), background 0.25s ease, box-shadow 0.28s ease,
        filter 0.25s ease;
    animation: cta-navbar-download-glow 2.6s ease-in-out infinite;
}

.btn-navbar-download::before,
.btn-navbar-download::after {
    display: inline-block;
    line-height: 1;
    font-size: 0.72em;
    opacity: 0.95;
}

.btn-navbar-download::before {
    content: '\25B6\2009\25B6';
}

.btn-navbar-download::after {
    content: '\25C0\2009\25C0';
}

.btn-navbar-download:hover,
.btn-navbar-download:focus {
    color: rgb(255, 255, 255);
    background: rgba(152, 95, 46, 0.75);
    animation: none;
    transform: translateY(-0.125rem) scale(1.02);
    box-shadow: 0 0 0 0.1rem #ffc320 inset, 0 0 0 -1.625rem #2b2412 inset, 0 0.5rem 1.5rem rgba(0, 0, 0, 0.4),
        0 0 1.75rem var(--cta-glow);
    filter: brightness(1.08);
}

.btn-navbar-download:active {
    transform: translateY(0.0625rem) scale(0.99);
}

.btn-navbar-download:focus-visible {
    outline: 0.125rem solid rgba(255, 255, 255, 0.5);
    outline-offset: 0.125rem;
}

.hero-section__content a:has(.hero-register-btn) {
    display: inline-block;
    line-height: 0;
    border-radius: 0.5rem;
    transition: transform 0.35s var(--cta-ease-out-back);
}

.hero-section__content a:has(.hero-register-btn):focus-visible {
    outline: 0.1875rem solid var(--cta-accent);
    outline-offset: 0.3125rem;
}

.hero-section__content a:has(.hero-register-btn):hover {
    transform: translateY(-0.1875rem) scale(1.03);
}

.hero-section__content a:has(.hero-register-btn):active {
    transform: translateY(0.0625rem) scale(0.99);
}

.hero-register-btn {
    filter: drop-shadow(rgba(0, 0, 0, 0.65) 0px 0.25rem 0.75rem) drop-shadow(rgba(0, 0, 0, 0.45) 0px 0.125rem 0.25rem);
    transition: filter 0.35s ease, transform 0.35s var(--cta-ease-out-back);
    animation: cta-hero-register-pulse 2.75s ease-in-out infinite;
}

.hero-section__content a:has(.hero-register-btn):hover .hero-register-btn,
.hero-section__content a:has(.hero-register-btn):focus-visible .hero-register-btn {
    animation: none;
    filter: drop-shadow(rgba(0, 0, 0, 0.65) 0px 0.25rem 0.75rem) drop-shadow(rgba(0, 0, 0, 0.45) 0px 0.125rem 0.25rem)
        drop-shadow(0 0 1.5rem var(--cta-glow)) drop-shadow(0 0 2.25rem rgba(255, 195, 32, 0.35));
}

.drop-shadow {
    filter: drop-shadow(rgba(0, 0, 0, 0.3) 0px 0.5rem 0.75rem);
}

.item-effect-wrap {
    position: relative;
    display: inline-block;
    width: 100%;
}

.item-effect-wrap--absolute {
    aspect-ratio: 572 / 499;
}

.item-effect-bottom,
.item-effect-middle,
.item-effect-foreground {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    pointer-events: none;
}

.item-effect-bottom {
    z-index: 1;
}

.item-effect-middle {
    z-index: 2;
    mix-blend-mode: screen;
}

.item-effect-foreground {
    z-index: 3;
}

.register-action-btns {
    display: flex;
    flex-wrap: nowrap;
    align-items: center;
    justify-content: center;
    gap: 0.75rem 1.25rem;
    width: 100%;
}

.register-action-link {
    display: inline-flex;
    line-height: 0;
    flex: 0 1 auto;
    min-width: 0px;
    border-radius: 0.375rem;
    transition: transform 0.32s var(--cta-ease-out-back);
}

.register-action-link:focus-visible {
    outline: 0.1875rem solid var(--cta-accent);
    outline-offset: 0.25rem;
}

.register-action-link:hover {
    transform: translateY(-0.3125rem) scale(1.04);
}

.register-action-link:active {
    transform: translateY(0.0625rem) scale(0.98);
}

.register-action-link img {
    transition: filter 0.32s ease, transform 0.32s var(--cta-ease-out-back);
}

.register-action-link:hover img.drop-shadow {
    filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 0.5rem 0.75rem) drop-shadow(0 0 1.125rem var(--cta-glow))
        drop-shadow(0 0 2rem rgba(255, 195, 32, 0.28));
}

.register-action-btns--max-276 .register-action-link {
    max-width: 17.25rem;
}

.register-action-btns--max-276 .register-action-link img {
    width: 100%;
    height: auto;
}

.hero-section {
    position: relative;
    background-color: rgb(26, 21, 16);
    background-image: url("../images/bg-hero.jpg");
    background-size: cover;
    background-position: center top;
    background-repeat: no-repeat;
    padding: 3.75rem 1.25rem;
    /* min-height: min(1080px, 100vh); */
    text-align: center;
    color: white;
    max-width: 100%;
    overflow-x: clip;
}

.hero-section__media {
    position: absolute;
    inset: 0;
    z-index: 0;
    overflow: hidden;
    pointer-events: none;
}

.hero-section__orbs {
    position: absolute;
    inset: 0;
    z-index: 1;
    overflow: hidden;
    pointer-events: none;
}

.hero-section__orbs-origin {
    position: absolute;
    left: clamp(14%, 30vw, 36%);
    top: 50%;
    width: 0;
    height: 0;
}

@keyframes hero-orb-float {

    0%,
    100% {
        transform: translate(-50%, -50%) translate(var(--hero-orb-tx, 0), var(--hero-orb-ty, 0))
            scale(var(--hero-orb-scale, 1)) translateY(0);
    }

    50% {
        transform: translate(-50%, -50%) translate(var(--hero-orb-tx, 0), var(--hero-orb-ty, 0))
            scale(var(--hero-orb-scale, 1)) translateY(var(--hero-orb-float, -0.62rem));
    }
}

.hero-orb {
    position: absolute;
    left: 0;
    top: 0;
    width: var(--hero-orb-size, 9vmin);
    max-width: none;
    height: auto;
    opacity: var(--hero-orb-opacity, 0.9);
    filter: blur(var(--hero-orb-blur, 0));
    z-index: var(--hero-orb-z, 0);
    user-select: none;
    animation: hero-orb-float var(--hero-orb-dur, 5.2s) ease-in-out infinite;
    animation-delay: var(--hero-orb-delay, 0s);
    will-change: transform;
}

.hero-orb.hero-orb--1 {
    width: auto;
    height: auto;
    --hero-orb-tx: 4vmin;
    --hero-orb-ty: -12vmin;
    --hero-orb-scale: 0.4;
    --hero-orb-z: 4;
    --hero-orb-opacity: 0.95;
    --hero-orb-float: -0.82rem;
    --hero-orb-dur: 5.6s;
    --hero-orb-delay: 0s;
}

.hero-orb--2 {
    --hero-orb-size: 5vmin;
    --hero-orb-tx: 21vmin;
    --hero-orb-ty: -23vmin;
    --hero-orb-scale: 0.95;
    --hero-orb-z: 2;
    --hero-orb-float: -0.55rem;
    --hero-orb-dur: 4.7s;
    --hero-orb-delay: 0.35s;
    mix-blend-mode: screen;
}

.hero-orb--3 {
    --hero-orb-size: 38vmin;
    --hero-orb-tx: 44vmin;
    --hero-orb-ty: 14vmin;
    --hero-orb-scale: 0.72;
    --hero-orb-blur: 0.45px;
    --hero-orb-z: 1;
    --hero-orb-opacity: 0.78;
    --hero-orb-float: -0.5rem;
    --hero-orb-dur: 5.4s;
    --hero-orb-delay: 0.7s;
    filter: blur(6px);
}

.hero-orb--4 {
    --hero-orb-size: 46vmin;
    --hero-orb-tx: -22vmin;
    --hero-orb-ty: -30vmin;
    --hero-orb-scale: 0.62;
    --hero-orb-z: 3;
    --hero-orb-float: -0.62rem;
    --hero-orb-dur: 4.9s;
    --hero-orb-delay: 1.05s;
    mix-blend-mode: screen;
    filter: blur(4px);
}

.hero-orb--5 {
    --hero-orb-size: 19.5vmin;
    --hero-orb-tx: -6vmin;
    --hero-orb-ty: 18vmin;
    --hero-orb-scale: 0.55;
    --hero-orb-blur: 0.9px;
    --hero-orb-z: 0;
    --hero-orb-opacity: 0.72;
    --hero-orb-float: -0.52rem;
    --hero-orb-dur: 5.1s;
    --hero-orb-delay: 1.4s;
}

.hero-section__video {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 0;
}

.hero-section__bottom-cloud {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 2;
    pointer-events: none;
    line-height: 0;
}

.hero-section__bottom-sec {
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.1rem;
    width: 100%;
    max-width: none;
    height: auto;
    z-index: 2;
    pointer-events: none;
    display: block;
    line-height: 0;
}

/* luminance mask: ดำใน PNG = โปร่ง (เห็นวิดีโอ/BG), ขาว = หมอก — mix-blend กับ <video> มักไม่ทำงานใน Chromium */
.hero-section__bottom-cloud-mist {
    width: 100%;
    aspect-ratio: 1024 / 165;
    background: linear-gradient(to top,
            rgba(255, 253, 250, 1) 0%,
            rgba(255, 252, 248, 0.96) 18%,
            rgba(255, 250, 245, 0.88) 40%,
            rgba(255, 255, 255, 0.58) 68%,
            rgba(255, 255, 255, 0.22) 88%,
            transparent 100%);
    -webkit-mask-image: url("../images/bottom-hero-sec.png");
    mask-image: url("../images/bottom-hero-sec.png");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    mask-mode: luminance;
}

.hero-section__content {
    position: relative;
    z-index: 3;
    top: 3rem;
}

.hero-section__row {
    /* min-height: calc(min(1080px, 100vh) - 7.5rem); */
}

@media (max-width: 47.9988rem) {
    .hero-section {
        min-height: min(1050px, 78vh);
        background-image: url("../images/mb-head-bg.jpg");
    }

    .hero-section__row {
        min-height: calc(min(1050px, 70vh) - 7.5rem);
    }

    .hero-section__media {
        display: none;
    }

    .hero-section__orbs-origin {
        left: 50%;
        top: 38%;
    }

    .hero-orb.hero-orb--1 {
        --hero-orb-tx: -4vmin;
        --hero-orb-ty: -16vmin;
    }

    .hero-orb--2 {
        --hero-orb-size: 6vmin;
        --hero-orb-tx: 18vmin;
        --hero-orb-ty: -4vmin;
    }

    .hero-orb--3 {
        --hero-orb-size: 4.5vmin;
        --hero-orb-tx: 12vmin;
        --hero-orb-ty: 12vmin;
    }

    .hero-orb--4 {
        --hero-orb-size: 7vmin;
        --hero-orb-tx: -16vmin;
        --hero-orb-ty: -6vmin;
    }

    .hero-orb--5 {
        --hero-orb-size: 4vmin;
        --hero-orb-tx: -10vmin;
        --hero-orb-ty: 14vmin;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hero-orb {
        animation: none;
        will-change: auto;
        transform: translate(-50%, -50%) translate(var(--hero-orb-tx, 0), var(--hero-orb-ty, 0))
            scale(var(--hero-orb-scale, 1));
    }

    .hero-section__video {
        display: none;
    }

    .hero-register-btn,
    .btn-navbar-download,
    .register-submit-btn {
        animation: none;
    }

    .btn-navbar-outline,
    .btn-navbar-download,
    .hero-section__content a:has(.hero-register-btn),
    .register-action-link,
    .register-action-link img,
    .register-submit-btn {
        transition: none;
    }

    .btn-navbar-outline:hover,
    .hero-section__content a:has(.hero-register-btn):hover,
    .register-action-link:hover {
        transform: none;
    }

    .btn-navbar-download:hover,
    .btn-navbar-download:focus {
        transform: none;
    }

    .register-submit-btn:hover,
    .register-submit-btn:focus {
        transform: none;
    }
}

.register-count-wrap {
    position: relative;
    display: inline-block;
    max-width: min(45rem, 100%);
    margin-top: 0.5rem;
    filter: drop-shadow(rgba(0, 0, 0, 0.45) 0px 0.375rem 0.625rem);
}

.register-count-frame-img {
    display: block;
    width: 100%;
    height: auto;
}

.register-count-label {
    position: absolute;
    inset: 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0px;
    padding: 0.9375rem 0px;
    box-sizing: border-box;
    font-size: 2.3125rem;
    font-weight: 700;
    color: rgb(74, 44, 26);
    text-align: center;
    line-height: 1.25;
    text-shadow: rgba(255, 248, 220, 0.5) 0px 0.0625rem 0px;
    pointer-events: none;
}

.register-count-inline {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.5em;
    min-height: 1.15em;
}

/* ---------- Digit Roller ---------- */
.register-count-roller {
    display: inline-flex;
    align-items: flex-start;
    gap: 0;
    height: 1.25em;
    overflow: hidden;
    vertical-align: middle;
}

.rc-slot {
    display: inline-block;
    height: 1.25em;
    overflow: hidden;
    vertical-align: top;
}

.rc-track {
    display: flex;
    flex-direction: column;
    will-change: transform;
}

.rc-track > span {
    display: block;
    height: 1.25em;
    line-height: 1.25;
    text-align: center;
    min-width: 0.6em;
}

.rc-sep {
    display: inline-block;
    height: 1.25em;
    line-height: 1.25;
    vertical-align: top;
}

@keyframes cta-hero-register-pulse {
    0%,
    100% {
        filter: drop-shadow(rgba(0, 0, 0, 0.65) 0px 0.25rem 0.75rem) drop-shadow(rgba(0, 0, 0, 0.45) 0px 0.125rem 0.25rem)
            drop-shadow(0 0 0 rgba(255, 195, 32, 0));
    }

    50% {
        filter: drop-shadow(rgba(0, 0, 0, 0.65) 0px 0.25rem 0.75rem) drop-shadow(rgba(0, 0, 0, 0.45) 0px 0.125rem 0.25rem)
            drop-shadow(0 0 1.25rem var(--cta-glow)) drop-shadow(0 0 2rem rgba(255, 195, 32, 0.3));
    }
}

@keyframes cta-navbar-download-glow {
    0%,
    100% {
        box-shadow: 0 0 0 0.1rem #ffc320 inset, 0 0 0 -1.625rem #2b2412 inset, 0 0 0 rgba(255, 195, 32, 0);
    }

    50% {
        box-shadow: 0 0 0 0.1rem #ffc320 inset, 0 0 0 -1.625rem #2b2412 inset, 0 0 1.5rem var(--cta-glow);
    }
}

@keyframes cta-submit-outer-glow {
    0%,
    100% {
        box-shadow: 0 0 0 rgba(255, 195, 32, 0), 0 0 0 rgba(255, 195, 32, 0);
    }

    50% {
        box-shadow: 0 0 1rem var(--cta-glow), 0 0 2rem rgba(255, 195, 32, 0.2);
    }
}

.activity-date-line {
    display: flex;
    flex-flow: row;
    align-items: center;
    justify-content: center;
    gap: 0.25rem;
    width: 100%;
    max-width: 100%;
    margin: 0.5rem 0px 0px;
    padding: 0px;
    box-sizing: border-box;
}

.activity-date-line__text {
    flex: 0 1 auto;
    white-space: nowrap;
    color: rgb(87, 46, 0);
    text-align: center;
    font-family: Sarabun;
    font-size: 1.5rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.activity-title {
    color: rgb(87, 46, 0);
    font-size: 3rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.disclaimer-text {
    color: rgb(87, 46, 0);
    font-size: 0.875rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.activity-subtitle {
    color: rgb(87, 46, 0);
    font-size: 2.25rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
}

.character-image-col .character-image-carousel .d-flex.justify-content-center {
    flex-shrink: 0;
}

.character-showcase-row>[class*="col-"] {
    min-width: 0px;
}

.character-desc {
    position: absolute;
    left: 50%;
    bottom: 0rem;
    transform: translateX(-50%);
    display: flex;
    padding: 0.75rem;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    width: 100%;
    max-width: 90%;
    min-width: 0px;
    box-sizing: border-box;
    margin: 0px;
    z-index: 2;
    border-width: 0.625rem;
    border-style: solid;
    border-color: transparent;
    border-image-outset: initial;
    border-image-source: url("../images/border-img-des.png");
    border-image-slice: 9 fill;
    border-image-width: 0.625rem;
    border-image-repeat: round;
    border-radius: 0.9375rem;
    background: none;
    color: rgb(0, 0, 0);
    text-align: center;
    font-family: Sarabun;
    font-size: 1rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
}

.custom-prev img,
.custom-next img {
    width: 3.75rem;
    height: auto;
    transition: width 0.3s;
}

@media (max-width: 87.4988rem) {

    .custom-prev img,
    .custom-next img {
        width: 4.75rem;
    }
}

.active-skill {
    position: relative;
    display: inline-block;
}

.active-skill::after {
    content: "";
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    box-shadow: rgb(255, 0, 102) 0px 0px 0px 0.25rem inset, rgb(255, 211, 173) 0px 0px 0px 0.4375rem inset, rgb(0, 0, 0) 0px 0px 0px 0.5rem inset;
    pointer-events: none;
}

.activity-date-line__line {
    max-width: min(100%, 12rem, 36vw);
    max-height: 1.45em;
    object-fit: contain;
    align-self: center;
}

.activity-date-line__line--left {
    object-position: left center;
}

.activity-date-line__line--right {
    object-position: right center;
}

.content-box {
    position: relative;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 2rem 0px;
    padding: clamp(1.25rem, 5vw, 2.5rem) clamp(1.5rem, 7vw, 3.75rem);
    aspect-ratio: 1024 / 532;
    background-color: transparent;
    background-image: url("../images/frame-paper-bg.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 100% 100%;
    filter: drop-shadow(rgba(0, 0, 0, 0.35) 0px 0.625rem 0.9375rem);
}

/* กล่องม้วนกระดาษ: หัว–ท้ายเป็น img ต่อเนื้อเดียว, กลางเป็น bg-mid repeat-y */
.content-box.content-box--scroll {
    aspect-ratio: unset;
    padding: 0;
    background: none;
    background-color: transparent;
}

.content-box--scroll__cap {
    display: block;
    width: 100%;
    height: auto;
    flex-shrink: 0;
}

.content-box--scroll__mid {
    flex: 1 1 auto;
    min-width: 0;
    min-height: 0;
    box-sizing: border-box;
    background-image: url("../images/bg-mid.png");
    background-repeat: repeat-y;
    background-position: center top;
    background-size: 100% auto;
    padding: 0px 4rem;
}

.content-box--scroll__mid:has(.character-showcase-wrapper) {
    display: flex;
    flex-direction: column;
    overflow: visible;
}

/* กล่องตัวอย่างตัวละคร: ให้หัว/ผมล้นเหนือขอบกระดาษได้ */
.content-box:has(.character-showcase-wrapper) {
    overflow: visible;
    /* iOS Safari: filter ที่ ancestor ทำให้ลูกที่ล้นถูกตัดแม้ overflow:visible */
    filter: none;
}

.content-box--scroll__mid > .character-showcase-wrapper {
    flex: 1 1 auto;
    min-height: 0px;
    overflow: visible;
    align-items: anchor-center;
}

.character-showcase-wrapper>.character-showcase-row {
    flex: 1 1 auto;
    min-height: 0px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: visible;
}

.character-skill-col > .row {
    width: 100%;
}

.character-skill-col .row > .col-12 {
    display: flex;
    justify-content: center;
}

.character-skill-col .row > .col {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* ซ่อนสไลด์ Owl ซ้าย–ขวา แต่ไม่ตัดหัว: ขยาย clip ขึ้น–ลง (เลี่ยงคู่ overflow-x ที่บังคับ overflow-y→auto ตัดบนล่าง) */
.character-image-col {
    max-width: 100%;
    min-width: 0;
    overflow: visible;
    -webkit-clip-path: inset(-120vh 0 -120vh 0);
    clip-path: inset(-120vh 0 -120vh 0);
}

.character-image-col .character-image-carousel {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: visible;
}

.character-image-carousel.owl-carousel .owl-stage-outer,
.character-image-carousel.owl-carousel .owl-stage,
.character-image-carousel.owl-carousel .owl-item {
    overflow: visible !important;
}

/* กรอบสล็อตความสูงเดิม (เท่าเดิมก่อนขยายรูป) — รูปใหญ่กว่าล้นขึ้น-ข้างได้ */
.character-image-col .character-image-carousel .item > .d-flex {
    box-sizing: border-box;
    height: clamp(26rem, 44vmin, 36rem);
    overflow: visible;
    align-items: flex-end !important;
}

/* ดึงตัวละครขึ้น — ยันขาไว้ล่างสล็อต ให้หัวทะลุขอบบน */
.character-image-col .character-img-center {
    height: clamp(35rem, 61vmin, 50rem);
    width: auto;
    max-width: none;
    margin-left: auto;
    margin-right: auto;
    object-fit: contain;
    object-position: center bottom;
    /* transform: translateY(clamp(-2.25rem, -6.25vmin, -5rem)); */
    transform: translateY(clamp(-0.25rem, -6.25vmin, -5rem));
}

@media (max-width: 61.9988rem) {
    .content-box--scroll__mid {
        padding: 1.3125rem;
    }

    .character-desc {
        bottom: 5%;
    }
}

@media (max-width: 47.9988rem) {
    .activity-date-line__line {
        display: none;
    }

    .activity-date-line__text {
        white-space: normal;
        font-size: 1.15rem;
    }

    .custom-prev img,
    .custom-next img {
        width: 4rem;
    }

    .news-carousel .owl-nav {
        display: none;
    }

    .activity-title {
        font-size: 2.3rem;
    }

    .character-desc {
        min-height: 5.5rem;
        padding: 1.25rem;
        border-image-width: 0.75rem;
        border-width: 0.75rem;
        bottom: 5%;
    }

    .character-image-col .character-image-carousel .item > .d-flex {
        height: clamp(26rem, 74vmin, 34rem);
    }

    .character-image-col .character-img-center {
        height: clamp(29.5rem, 82vmin, 42rem);
        transform: translateY(0);
    }
}

.content-box-row {
    padding: 0rem 1.875rem;
}

.scroll-section {
    background-color: rgb(245, 240, 230);
    background-image: url("../images/bg-main-top.png"), url("../images/bg-main.jpg");
    background-repeat: no-repeat, repeat-y;
    background-position: center top, center top 19.5625rem;
    background-size: 100%, 100%;
    padding: 2.5rem 1.25rem;
    max-width: 100%;
    /* อย่าใช้ overflow-x: clip พร้อม overflow-y เดิม(visible): ตามสเปกแล้ว y ถูกบังคับเป็น auto → ตัดหัวรูปที่ล้นขึ้น */
    overflow-x: visible;
    overflow-y: visible;
}

.news-carousel.owl-carousel {
    max-width: 100%;
    overflow-x: clip;
}

.news-carousel .owl-item {
    transition: 0.3s;
    z-index: 1;
    position: relative;
}

.news-carousel .owl-item .item {
    transform: scale(0.85);
    opacity: 1;
    transition: 0.3s;
    box-shadow: rgba(0, 0, 0, 0.2) 0px 0.25rem 0.9375rem;
}

.news-carousel .owl-item.center {
    z-index: 3;
}

.news-carousel .owl-item.center .item {
    transform: scale(1.1);
    opacity: 1;
    box-shadow: rgba(0, 0, 0, 0.3) 0px 0.625rem 1.875rem;
}

.news-carousel .owl-nav {
    position: absolute;
    top: 40%;
    left: 50%;
    width: 45%;
    transform: translate(-50%, -50%);
    display: flex;
    pointer-events: none;
    z-index: 10;
    justify-content: space-between;
}

.news-carousel .owl-nav button {
    pointer-events: auto;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    width: 2.5rem;
    height: 2.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: opacity 0.3s;
    background: transparent !important;
    padding: 0px !important;
}

.news-carousel .owl-nav button:hover {
    opacity: 0.8;
}

.news-carousel .owl-dots {
    margin-top: 1.875rem;
    text-align: center;
}

.news-carousel .owl-dot span {
    width: 0.75rem;
    height: 0.75rem;
    margin: 0.3125rem 0.4375rem;
    background: rgb(214, 214, 214);
    display: block;
    transition: opacity 0.2s;
    border-radius: 1.875rem;
}

.news-carousel .owl-dot.active span,
.news-carousel .owl-dot:hover span {
    background: rgb(255, 87, 51);
}

.registration-modal-content {
    display: flex;
    flex-direction: column;
    background: url("../images/modal-bg.png") center center / 100% 100% no-repeat transparent;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 0px;
    color: rgb(87, 46, 0);
    padding: 3.5rem 2.5rem 2.5rem;
    min-height: 37.5rem;
}

.registration-modal-content .modal-body {
    flex: 1 1 0%;
    display: flex;
    flex-direction: column;
}

.registration-modal-content .modal-header {
    padding: 0px;
}

#registerModalLabel {
    font-size: 1.6rem;
}

.registration-modal-content .btn-close {
    position: absolute;
    top: 1.5rem;
    right: 2.5rem;
    z-index: 10;
    background-color: transparent;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%238B4513'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e");
    opacity: 0.8;
    box-shadow: none;
    transition: transform 0.2s, opacity 0.2s;
}

.registration-modal-content .btn-close:hover {
    transform: rotate(90deg);
    opacity: 1;
}

.custom-input {
    background-color: rgba(255, 255, 255, 0.6);
    border: 0.125rem solid rgba(139, 69, 19, 0.3);
    border-radius: 0.625rem;
    padding: 0.75rem 1rem;
    color: rgb(87, 46, 0);
    /* ไม่ transition ทุก property — กันไอคอน invalid ของ Bootstrap เลื่อนจากซ้าย (background-position) */
    transition: background-color 0.3s, border-color 0.3s, color 0.3s, box-shadow 0.3s;
}

.custom-input:focus {
    background-color: rgb(255, 255, 255);
    border-color: rgb(139, 69, 19);
    box-shadow: rgba(139, 69, 19, 0.15) 0px 0px 0px 0.25rem;
    color: rgb(87, 46, 0);
}

.custom-input::placeholder {
    color: rgba(87, 46, 0, 0.4);
}

#successModal .modal-content {
    background: url("../images/modal-success-bg.png") center center / 100% 100% no-repeat transparent;
    min-height: 25rem;
    padding: 3rem 2rem;
}

#successModal .modal-body p {
    color: rgb(87, 46, 0);
    font-weight: 500;
    line-height: 1.6;
    margin-top: 1rem;
}

#successModal .modal-title {
    color: rgb(62, 45, 27);
    text-align: center;
    font-family: Sarabun, sans-serif;
    font-size: 2.5rem;
    font-style: normal;
    font-weight: 600;
    line-height: normal;
    text-transform: uppercase;
}

#successModal .register-submit-btn {
    width: 100%;
    margin: 0px auto;
}

.form-label {
    font-weight: 600;
    margin-bottom: 0.35rem;
    font-size: 1.1rem;
}

.form-label.required::after {
    content: " *";
    color: rgb(220, 53, 69);
}

.custom-check .form-check-input {
    border-color: rgb(139, 69, 19);
    cursor: pointer;
}

.custom-check .form-check-input:checked {
    background-color: rgb(139, 69, 19);
    border-color: rgb(139, 69, 19);
}

.custom-check .form-check-label {
    font-size: 0.95rem;
    cursor: pointer;
}

.terms-link {
    color: rgb(139, 69, 19);
    font-weight: 600;
}

.terms-link:hover {
    color: rgb(87, 46, 0);
}

.field-error-text {
    color: rgb(220, 53, 69);
    font-size: 0.75rem;
    font-weight: 600;
    margin-top: 0.25rem;
}

.field-error-text:not(.d-none) {
    min-height: 1.1rem;
}

.register-submit-btn {
    background: url("../images/btn-bg.png") center center / 100% 100% no-repeat transparent;
    border-width: medium;
    border-style: none;
    border-color: currentcolor;
    border-image: initial;
    border-radius: 0px;
    display: flex;
    padding: 0.75rem;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    align-self: stretch;
    width: 100%;
    font-family: Sarabun, sans-serif;
    font-size: 1.25rem;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    text-transform: uppercase;
    box-shadow: none;
    transition: transform 0.25s var(--cta-ease-out-back), filter 0.25s ease, box-shadow 0.25s ease;
    cursor: pointer;
    text-shadow: rgba(0, 0, 0, 0.5) 0px 0.125rem 0.25rem;
    color: rgb(250, 241, 211) !important;
    animation: cta-submit-outer-glow 2.75s ease-in-out infinite;
}

.register-submit-btn:focus-visible {
    outline: 0.1875rem solid var(--cta-accent);
    outline-offset: 0.1875rem;
}

.register-submit-btn:hover,
.register-submit-btn:focus {
    animation: none;
    transform: translateY(-0.1875rem) scale(1.03);
    filter: brightness(1.12) saturate(1.05);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.35), 0 0 1.5rem var(--cta-glow), 0 0 2.25rem rgba(255, 195, 32, 0.22);
    color: rgb(250, 241, 211) !important;
}

.register-submit-btn:active {
    animation: none;
    transform: translateY(0.0625rem) scale(0.99);
    box-shadow: 0 0.1875rem 0.5rem rgba(0, 0, 0, 0.3);
}

.register-submit-btn.is-loading {
    animation: none;
}

.register-submit-spinner {
    display: none;
    width: 1.125rem;
    height: 1.125rem;
    flex-shrink: 0;
    border: 2px solid rgba(250, 241, 211, 0.35);
    border-top-color: rgb(250, 241, 211);
    border-radius: 50%;
    animation: register-submit-spin 0.65s linear infinite;
}

.register-submit-btn.is-loading .register-submit-spinner {
    display: inline-block;
}

.register-submit-btn.is-loading {
    cursor: wait;
    opacity: 0.92;
}

@keyframes register-submit-spin {
    to {
        transform: rotate(360deg);
    }
}

@media (max-width: 35.9988rem) {
    .registration-modal-content {
        margin: 0.5rem;
    }

    .register-submit-btn {
        font-size: 1.25rem;
        padding: 0.625rem 2rem;
    }
}

.character-showcase-wrapper {
    position: relative;
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0px;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    padding: 0rem 0.9375rem;
    box-sizing: border-box;
    /* ไม่ clip ที่นี่ — จะได้ไม่ตัดปุ่มนำทางแบบ absolute; กันล้นแนวนอนที่ body / คอลัมน์รูปแทน */
    overflow-x: visible;
    overflow-y: visible;
}

/* เลเยอร์ปุ่มอย่างเดียว — จำกัดความกว้างด้วย col ซ้าย; แถวรูป/สกิลไม่เปลี่ยน */
.character-nav-overlay {
    position: absolute;
    width: 100%;
    top: 2.5rem;
    left: 0;
    z-index: 20;
    pointer-events: none;
    padding: 0px 0.9375rem;
    box-sizing: border-box;
}

.character-nav-inner {
    height: 20rem;
    pointer-events: auto;
}

@media (max-width: 47.9988rem) {
    .character-nav-inner {
        height: 5rem;
    }
}

.main-skill-media.main-skill-img-center {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}

.main-skill-media.main-skill-img-center .main-skill-image {
    width: auto;
    margin: auto;
}

.main-skill-youtube-wrap {
    width: 100%;
    max-width: min(100%, 50rem);
    margin-left: auto;
    margin-right: auto;
    padding: 0.25rem;
    border-radius: 0.75rem;
    background: linear-gradient(160deg, #000000 0%, #6f1b1b 100%);
    box-shadow: 0 0.5rem 1.25rem rgba(0, 0, 0, 0.45);
}

.main-skill-youtube-wrap .ratio {
    border-radius: 0.5rem;
    overflow: hidden;
    background: #000;
}

.main-skill-youtube {
    border: 0;
    pointer-events: none;
}

.main-footer {
    background-color: rgb(45, 28, 21);
}

.footer-copyright {
    margin: 0px;
    font-size: 0.85rem;
}

.news-nav-icon {
    width: 2.5rem;
}

/* Back to top — ธีมเดียวกับเมนูลอย (น้ำตาลทอง / Sarabun) */
.back-to-top {
    position: fixed;
    right: max(1rem, env(safe-area-inset-right));
    bottom: max(1rem, env(safe-area-inset-bottom));
    z-index: 1030;
    width: 3.125rem;
    height: 3.125rem;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 0.0625rem solid rgba(250, 241, 211, 0.28);
    border-radius: 50%;
    background: rgba(87, 46, 0, 0.9);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    color: rgb(250, 241, 211);
    box-shadow: 0 0 0 0.0625rem rgba(255, 195, 32, 0.22) inset, 0 0.3125rem 0.9375rem rgba(0, 0, 0, 0.4);
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 0.35s ease, visibility 0.35s ease, transform 0.35s ease, background 0.25s ease,
        color 0.25s ease, box-shadow 0.25s ease;
    font-family: Sarabun, sans-serif;
    pointer-events: none;
}

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

.back-to-top:hover {
    background: rgb(139, 69, 19);
    color: rgb(255, 255, 255);
    box-shadow: 0 0 0 0.1rem rgba(255, 195, 32, 0.45) inset, 0 0.375rem 1rem rgba(0, 0, 0, 0.45);
}

.back-to-top:focus {
    outline: none;
}

.back-to-top:focus-visible {
    outline: 0.125rem solid rgba(255, 195, 32, 0.85);
    outline-offset: 0.1875rem;
}

.back-to-top__icon {
    width: 1.375rem;
    height: 1.375rem;
    flex-shrink: 0;
}

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

@media (max-width: 47.9988rem) {
    .back-to-top {
        width: 2.875rem;
        height: 2.875rem;
    }

    .back-to-top__icon {
        width: 1.25rem;
        height: 1.25rem;
    }
}

/* Side Floating Menu */
.side-floating-menu {
    position: absolute;
    left: 0;
    top: 0;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
    pointer-events: none;
    transform: translateY(-50%);
}

.menu-item {
    pointer-events: auto;
    display: flex;
    align-items: center;
    background: rgba(87, 46, 0, 0.85);
    backdrop-filter: blur(0.625rem);
    -webkit-backdrop-filter: blur(0.625rem);
    color: rgb(250, 241, 211);
    text-decoration: none;
    padding: 0.625rem 0.9375rem;
    border-radius: 0 2rem 2rem 0;
    font-family: Sarabun, sans-serif;
    font-weight: 600;
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    box-shadow: 0.3125rem 0.3125rem 0.9375rem rgba(0, 0, 0, 0.4);
    border: 0.0625rem solid rgba(250, 241, 211, 0.2);
    border-left: none;
    width: 3.5rem;
    overflow: hidden;
    white-space: nowrap;
    position: relative;
}

.menu-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(120deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: 0.5s;
}

.menu-item:hover::before {
    left: 100%;
}

.menu-item:hover {
    width: 12.5rem;
    background: rgb(139, 69, 19);
    padding-right: 1.25rem;
    color: white;
}

.icon-wrapper {
    min-width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 0.9375rem;
}

.icon-wrapper svg {
    width: 100%;
    height: 100%;
    fill: rgb(250, 241, 211);
    transition: fill 0.3s ease;
}

.menu-item:hover .icon-wrapper svg {
    fill: white;
}

.menu-text {
    font-size: 1rem;
    opacity: 0;
    transform: translateX(-1.25rem);
    transition: all 0.3s ease;
}

.menu-item:hover .menu-text {
    opacity: 1;
    transform: translateX(0);
}

/* Mobile Responsive */
@media (max-width: 47.9988rem) {
    .side-floating-menu {
        gap: 0.25rem;
    }

    .menu-item {
        width: 3.125rem;
        padding: 0.5rem 0.75rem;
    }

    .menu-item:hover {
        width: 3.125rem;
        /* Don't expand on mobile to save space */
        transform: none;
    }

    .menu-text {
        display: none;
    }

    .icon-wrapper {
        margin-right: 0;
    }
}