@charset "UTF-8";

/* =========================================
   1. BASE (Biến & Reset)
   ========================================= */
@font-face {
    font-family: 'Futura';
    src: url('../fonts/Futura\ Medium.otf') format('otf');
    font-weight: 900;
    font-style: normal;
    font-display: swap;
}

html {
  scroll-behavior: smooth;
}

#artist {
  scroll-margin-top: 25vh;
}

:root {
    /* --- Colors --- */
    --c-text-main: #00146E;
    --c-text-white: #FFFFFF;
    --c-bg-body: #FFFFFF;

    /* --- Fonts --- */
    --f-en: 'Futura', sans-serif;
    --f-jp: 'Sawarabi Gothic', sans-serif;

    /* --- Font Sizes (Mobile Base) --- */
    --fs-10: 10px;
    --fs-12: 12px;
    --fs-14: 14px;
    --fs-16: 16px;
    --fs-18: 18px;
    --fs-20: 20px;
    --fs-22: 22px;
    --fs-24: 24px;
    --fs-26: 26px;
    --fs-28: 28px;
    --fs-62: 62px;

    /* --- Spacing --- */
    --sp-padding-side: 16px;

    /* Header height */
    --head-height: 48px;
}

/* Reset cơ bản */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

ul,
ol {
    list-style: none;
}

a {
    text-decoration: none;
    color: inherit;
}

body {
    font-family: var(--f-jp);
    font-size: var(--fs-12);
    color: var(--c-text-main);
    background-color: var(--c-bg-body);
    line-height: 1.6;
    overflow-x: hidden;
}

button {
    background: transparent;
    border: none;
    padding: 0;
    outline: none;
}

/* Utility Class */
.u-font-futura {
    font-family: var(--f-en);
    font-weight: 900;
}

.u-uppercase {
    text-transform: uppercase;
}

/* =========================================
   2. HEADER & HERO (Mobile First)
   ========================================= */

.header {
    position: relative;
    width: 100%;
}

.header__bar {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: var(--head-height);
    padding: 0 var(--sp-padding-side);
    display: flex;
    justify-content: space-between;
    align-items: center;
    z-index: 100;
    background: linear-gradient(to right, #F3BEE3, #DAC1FF);
}

.header__logo-small img {
    height: 32px;
    width: auto;
}

.header__btn-open {
    cursor: pointer;
    width: 40px;
    height: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.header__btn-open img {
    width: 100%;
    height: auto;
    max-width: 32px;
}

/* --- MENU OVERLAY (Thanh trắng) --- */
.nav-overlay {
    position: fixed;
    top: 0;
    right: -100%;
    width: 80%;
    height: 100vh;
    background-color: #FFFFFF;
    color: var(--c-text-main);
    z-index: 200;
    transition: 0.4s ease-in-out;
    padding: 32px 0 80px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.nav-overlay.is-active {
    right: 0;
}

/* --- NÚT ĐÓNG (Dấu X) nằm trong Navbar --- */
.nav__btn-close {
    position: absolute;
    top: 10px;
    right: 0px;
    padding-right: 15px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
}

.nav__btn-close img {
    width: 100%;
    height: auto;
    max-width: 24px;
}


/* --- LỚP PHỦ ĐEN --- */
.nav-bg-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6);
    z-index: 150;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.4s ease-in-out;
}

.nav-bg-overlay.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.nav__list {
    width: 100%;
    margin-top: 20px;
}

.nav__item:first-child {
    text-align: center;
    margin-bottom: 30px;
    border-bottom: none;
    padding: 24px 0;
    background: linear-gradient(rgba(243, 190, 227, 0.2), rgba(218, 193, 255, 0.2));
    font-size: var(--fs-24);
}

.nav__item:first-child>a {
    display: inline-block;
    padding: 5px 0px;
    width: 67%;
    text-align: center;
    font-weight: 900;
    border-radius: 50px;
    background-color: #fff;
    font-family: var(--f-en);
}

.nav__item:not(:first-child) {
    text-align: right;
    padding-right: 15px;
    margin-bottom: 16px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.nav__item:not(:first-child)>a {
    color: var(--c-text-main);
    display: block;
    font-size: var(--fs-24);
    font-family: var(--f-en);
    font-weight: 900;
}

.nav__insta {
    width: 100%;
    min-width: 32px;
    min-height: 32px;
    display: flex;
    padding: 0 15px 0 0;
    justify-content: flex-end;
    margin-top: 24px;
}

.nav__insta>img {
    width: 32px;
}

/* --- HERO SECTION --- */

.hero {
    position: relative;
    width: 100%;
    margin-top: calc(var(--head-height) + 24px);
}

/* Logo Chính */
.hero__main-logo {
    position: relative;
    width: 344px;
    max-width: 90%;
    /* margin: calc(var(--hero-slider-height) - 355px) auto 20px auto; */
    margin: -100px auto 20px auto; /* Tạm chỉnh lại margin âm để logo đè lên slider */
    z-index: 10;
}

.hero__open-time {
    padding: 0 0 24px 0;
}

.hero__open-time > picture > img {
    width: 100%;
}

/* CTA Buttons */
.hero__cta {
    display: flex;
    flex-direction: column;
    gap: 24px;
    padding: 0 var(--sp-padding-side);
}

.hero__cta-btn {
    display: block;
    width: 100%;
}

.hero__cta-btn img {
    width: 100%;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

@media screen and (max-width: 1025px) {
    .nav__item.ticket--pc {
        display: none;
    }
}


/* =========================================
   3. BODY SECTIONS
   ========================================= */
.section {
    padding: 72px var(--sp-padding-side);
}

.section.mc {
    padding-bottom: 56px;
}

.section.special,
.section.artist {
    padding: 56px var(--sp-padding-side);
}

.section__title {
    font-family: var(--f-en);
    font-size: var(--fs-22);
    color: var(--c-text-main);
    text-align: center;
    margin-bottom: 24px;
    letter-spacing: 0.05em;
    line-height: 1;
}

/* News List */
.news__list li {
    border-bottom: 1px solid var(--c-text-main);
    padding: 12px 0;
    line-height: 2;
    font-family: var(--f-en);
    font-size: var(--fs-12);
}

.news__list li:first-child {
    border-top: 1px solid var(--c-text-main)
}

.news__list li>a {
    font-family: var(--f-jp);
    font-size: var(--fs-12);
    line-height: 1.7;
    display: block;
    pointer-events: none;
}

.news__list li>span {
    background: var(--c-text-main);
    padding: 2px 11px;
    color: var(--c-text-white);
    font-family: var(--f-en);
    font-weight: 900;
    margin-left: 8px;
    font-size: var(--fs-10);
}

#news .news__cta-btn {
    padding: 40px 0 0 0;
    display: flex;
    justify-content: flex-end;
}

#concept {
    background-image: url(../images/TTC_HP_concept_背景.png);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

#concept .concept__title {
    text-align: center;
    font-size: 62px;
    color: var(--c-text-white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
    line-height: 1;
}

#concept .concept__block {
    padding: 30px 0px 40px 0px;
    text-align: center;
}

#concept .concept__block>p {
    font-size: var(--fs-16);
    color: var(--c-text-white);
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

#concept .concept__block>p:first-child {
    padding: 0 0 8px 0;
}

#concept .concept__cta-btn {
    display: inline-flex;
    justify-content: center;
    width: 100%;
    padding: 0px 37px;
}

#concept .concept__cta-btn > img {
    max-width: 337px;
    width: 100%;
}

/* INFO */
#info .info__list {
    text-align: center;
    padding: 0 0 30px 0;
}

#info .info__list > li {
    padding: 0 0 8px 0;
}

#info .info__list > li > h4 {
    position: relative;
    font-size: var(--fs-16);
    font-weight: 500;
    margin: 0 0 8px 0;
}

#info .info__list > li > h4::before {
    position: absolute;
    content: "";
    width: 37%;
    height: 1px;
    left: 0;
    top: 50%;
    background: var(--c-text-main);
    transform: translateY(-50%);
}

#info .info__list > li > h4::after {
    position: absolute;
    content: "";
    width: 37%;
    height: 1px;
    right: 0;
    top: 50%;
    background: var(--c-text-main);
    transform: translateY(-50%);
}

#info .info__list > li > p {
    font-size: var(--fs-16);
}

#info .map-box > iframe {
    width: 100%;
    height: 24vh;
}

.cameOut__wrap {
    background-image: url("../images/TTC_HP_GUESTS_背景.png");
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    padding-bottom: 72px;
}

/* MC */

#mc.mc > h2,
#special-guest.special-guest > h2,
#artist.artist > h2,
#model.model > h2{
    color: var(--c-text-white);
}

#special-guest.special-guest,
#artist.artist,
#model.model {
    padding-top: unset;
}

/* Guest List Grid */
.guest-list {
    display: grid;
    grid-template-columns: 1fr;
    gap: 24px;
    list-style: none;
    padding: 0 45px;
}

.special-guest .guest-card__sns-list > li > a {
    pointer-events: none;
}

.guest-card {
    text-align: center;
}

.guest-card img {
    width: 100%;
    object-fit: cover;
}

.guest-card__name {
    font-family: var(--f-jp);
    font-size: var(--fs-18);
    font-weight: 500;
    padding: 16px 0 8px 0;
    color: var(--c-text-white);
}

.guest-card__sns-list {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 16px;
}

.guest-card__sns-list > li {
    max-width: 32px;
    width: 24px;
    opacity: .75;
}

.guest-card__sns-list > li:hover {
    opacity: 1;
}

.artist .guest-list {
    grid-template-columns: 1fr 1fr;
    gap: 16px 8px;
    padding: 0;
}

.cameOut__wrap .guest-list .guest-card__name {
    padding-top: 8px;
}

/* BRAND */
.brand .brand__list {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.brand .brand__list > li > img {
    object-fit: contain;
    height: 100%;
    width: 100%;
}

.brand .goju__up {
    display: inline-block;
    width: 100%;
    text-align: right;
    padding-top: 8px;
    font-size: var(--fs-12);
}

#sponsor.sponsor {
    padding-top: unset;
}

#archives.archives {
    padding-top: 0;
}

.archives .archives__btn-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.cta__btns {
    background-image: url("../images/TTC_HP_CTA_背景.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    padding-top: 40px;
    padding-bottom: 40px;
}

.cta__btns > .cta__btns-block {
    display: flex;
    flex-direction: column;
    gap: 16px;
    align-items: center;
}

.cta__btns > .cta__btns-block > a {
    width: 75%;
    max-width: 504px;
}

/* =========================================
   4. FOOTER
   ========================================= */
.footer {
    background-color: #000;
    color: var(--c-text-white);
    padding: 24px;
}

.footer .footer__logos {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.footer__logos .logo__ttc {
    min-width: 144px;
    width: 25%;
    max-width: 488px;
}

.footer__logos .logo__instagram {
    min-width: 32px;
    width: 32px;
}

.footer .footer__nav-list {
    padding: 24px 0 8px 0;
    font-size: clamp(var(--fs-14), 1.5vw, 30px);
    font-family: var(--f-en);
    font-weight: 900;
    border-bottom: 1px solid #fff;
}

.footer .footer__nav-list > li {
    padding: 8px 0;
}

.footer .footer__nav-list > li > a {
    display: block;
}

.footer .footer__privary-list {
    padding: 16px 0 32px 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* =========================================
   6. BACK TO TOP BUTTON
   ========================================= */
.back-to-top {
    position: fixed;
    bottom: 20px;
    right: 16px;
    width: 50px;
    height: 50px;
    background-color: var(--c-text-main);
    color: var(--c-text-white);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 90;
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s ease;
    cursor: pointer;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
}

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

@media (hover: hover) {
    .back-to-top:hover {
        background-color: #000;
        transform: translateY(-5px);
    }
}

@media screen and (min-width: 1024px) {
    .back-to-top {
        right: 40px;
        bottom: 40px;
        width: 60px;
        height: 60px;
    }
}


/* =========================================
   FIX SWIPER MARQUEE (FINAL)
   ========================================= */

/* 1. Container chính */
.hero__slider {
    position: relative;
    width: 100%;
    height: 40vh;
    overflow: hidden;
    background-color: #fff;
    
    /* Ẩn lúc đầu để tránh hiện tượng giật hình */
    opacity: 0;
    transition: opacity 0.5s ease;
}

/* Hiện lên khi Swiper đã sẵn sàng */
.hero__slider.swiper-initialized {
    opacity: 1;
}

.hero__slider .swiper-wrapper .swiper-slide {
        padding: 0 8px;
        height: 100%;
    }



/* Ép chuyển động thẳng tuột 100% */
.hero__slider .swiper-wrapper {
    -webkit-transition-timing-function: linear !important;
    transition-timing-function: linear !important;
    
    /* Cấm chuột can thiệp */
    pointer-events: none; 
}

.hero__slide {
    width: auto;
    height: 100%;
    /* Flex để căn giữa ảnh */
    display: flex;
    align-items: center;
}

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

@media screen and (max-width: 768px) {
    .hero__slider {
    height: 30vh;
        
}
}