@charset "utf-8";
/* CSS Document 
html { overflow-y: scroll; }*/
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@700;900&family=Oswald:wght@400;700&family=Quicksand:wght@400;700&display=swap');
        
:root {
    --paper-light: #fdfbf7; /* Màu giấy cổ */
    --ink-black: #1a1a1a;   /* Màu mực tàu */
    --gold-primary: #b45309; /* Vàng đồng */
    --red-son: #991b1b;     /* Đỏ son kiếm hiệp */
}

body {
    background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
    color: var(--ink-black);
    /* Texture giấy cổ giúp nền trắng trở nên nghệ thuật hơn */
    background-image: url('https://www.transparenttextures.com/patterns/natural-paper.png');
    font-family: 'Quicksand', sans-serif;
}

/* Tiêu đề đổ màu vàng đồng sang trọng trên nền sáng */
.gold-gradient {
    background: linear-gradient(to right, #854d0e, #b45309, #854d0e);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Nút bấm đỏ son - vàng kim (Nổi bật trên nền trắng) */
.btn-gold {
    background: linear-gradient(135deg, #991b1b 0%, #b45309 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(153, 27, 27, 0.2);
    border: 1px solid rgba(180, 83, 9, 0.3);
    transition: all 0.3s ease;
    text-transform: uppercase;
    font-weight: bold;
    letter-spacing: 1px;
}

.btn-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(153, 27, 27, 0.4);
    filter: brightness(1.1);
}

/* Card trên nền trắng: Dùng đổ bóng nhẹ và viền mảnh */
.card-border {
    background: white;
    border: 1px solid rgba(180, 83, 9, 0.2);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
    transition: all 0.3s ease;
}

.card-border:hover {
    border-color: var(--red-son);
    box-shadow: 0 15px 40px rgba(153, 27, 27, 0.1);
}

/* Hiệu ứng chọn Tab hiện đại cho nền sáng */
.active-tab-modern {
    background: var(--red-son);
    color: white !important;
    box-shadow: 0 4px 12px rgba(153, 27, 27, 0.3);
}

/* Thanh tìm kiếm thanh thoát */
.search-input {
    background: #f3f4f6;
    border: 1px solid #e5e7eb;
    transition: all 0.3s ease;
}

.search-input:focus {
    background: white;
    border-color: var(--gold-primary);
    box-shadow: 0 0 0 4px rgba(180, 83, 9, 0.1);
}

/* Đảm bảo chữ to và đậm như bạn muốn */
#nav-menu a {
    line-height: 1;
}

/* Trên mobile, bỏ gạch chân hiệu ứng group-hover để tránh lỗi hiển thị */
@media (max-width: 768px) {
    #nav-menu {
        box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    }
}

.tab-btn.active {
    @apply text-red-800 border-b-2 md:border-b-0 md:border-l-4 border-red-800 bg-red-50/50;
}
/* Trạng thái Active: Viền vàng, bóng đổ vàng kim, nền đỏ son mờ */
.class-btn.active div {
    border-color: #fcd34d !important;
    box-shadow: 0 0 20px rgba(252, 211, 77, 0.5);
    background: rgba(127, 29, 29, 0.6) !important; /* Đỏ son đậm hơn để nổi bật icon */
    transform: translateY(-5px);
}

/* Icon bên trong khi active chuyển sang màu vàng kim */
.class-btn.active i {
    color: #fcd34d !important;
}

/* Chữ bên dưới khi active */
.class-btn.active p { 
    color: #b45309 !important; /* Màu vàng đồng đậm để dễ đọc trên nền sáng */
    font-weight: 900;
    transform: scale(1.1);
}

/* Hiệu ứng xuất hiện mượt mà cho nội dung nhân vật */
@keyframes fadeIn {
    from { 
        opacity: 0; 
        transform: translateY(15px); 
    }
    to { 
        opacity: 1; 
        transform: translateY(0); 
    }
}

.animate-fade-in { 
    animation: fadeIn 0.5s ease-out forwards; 
}

/* Thêm một chút transition cho mượt khi click */
.class-btn div, .class-btn p {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}
.skill-icon.active {
    @apply border-red-600;
}
.skill-icon.active img {
    @apply grayscale-0;
}
#skill-video-player {
transition: opacity 0.3s ease;
}

/* Chỉnh màu cho các dấu chấm phân trang */
.swiper-pagination-bullet-active {
    background: #991b1b !important;
    width: 20px !important;
    border-radius: 4px !important;
}
/* Đảm bảo nút điều hướng luôn hiện trên mobile hoặc hiện rõ khi hover trên desktop */
.swiper-button-next, .swiper-button-prev {
    transition: all 0.3s ease;
}
.swiper-pagination-bullet-active {
    background: #991b1b !important; /* Màu đỏ đậm khớp style game */
}
.game-slider {
    --swiper-navigation-size: 24px;
}

/* Style cho icon mạng xã hội phù hợp tông nền sáng */
.social-icon {
    @apply text-gray-400 hover:text-red-800 transition-all duration-300 transform hover:-translate-y-1 text-3xl;
}