/*
Theme Name: Opalus Band
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;400;700&display=swap');

:root {
    --gold: #C89B48;
    --dot-inactive: rgba(255, 255, 255, 0.3);
    --dot-active: #ffffff;
}

#main, #wrapper {
	background-color: #000;
}

/* 1. Tắt tính năng tự động chừa khoảng trống Header của Flatsome */
html, body {
    scroll-padding-top: 0 !important;
}

/* Mở khóa cuộn chuột cho toàn bộ website */
html, body {
    overflow-y: auto !important;
    height: auto !important;
}

html::-webkit-scrollbar, body::-webkit-scrollbar {
    display: none !important;
}

/* CHỈ ẩn thanh cuộn mặc định ở riêng Trang Chủ */
body.home {
    overflow-y: hidden !important;
}

/* 2. Xóa sổ các khoảng hở (margin/padding) rác do Flatsome tự sinh ra */
.slider-wrapper, 
.row {
    margin-bottom: 0 !important;
}

.col {
    padding-bottom: 0 !important;
}


body, html {
    margin: 0; padding: 0;
    font-family: 'Montserrat', sans-serif;
    background-color: #050505;
}

/* =========================================
   1. CẤU TRÚC SECTIONS
========================================= */
.opalus-section {
    position: relative;
    width: 100%;
    height: 100vh !important; /* Ép buộc cao bằng 1 màn hình */
    overflow: hidden;
    background-color: #000;
}

.dark-bg { background-color: #111; display: flex; align-items: center; justify-content: center; }
.darker-bg { background-color: #050505; display: flex; align-items: center; justify-content: center; }
.section-title { color: var(--gold); font-size: 3rem; font-weight: 300; letter-spacing: 8px; text-align: center; }

/* =========================================
   2. HERO SECTION (CINEMATIC)
========================================= */
/* Tạo không gian cách ly để Blend Mode không bị lỗi */
.cinematic-hero {
    isolation: isolate; 
    z-index: 1;
    margin: 0 !important; padding: 0 !important;
}

/* Lớp Video (Dưới cùng) */
.cinematic-vid {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    z-index: -2; 
}

/* Lớp Phủ Gradient (Chỉ tối lề trái, trong suốt lề phải) */
.cinematic-overlay {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: linear-gradient(to right, rgba(0,0,0,0.8) 0%, rgba(0,0,0,0) 50%);
    z-index: -1;
}

/* =========================================
   3. KHỐI TEXT TRÁI & PHẢI
========================================= */
/* Căn giữa dọc lề trái */
.cinematic-left {
    position: absolute;
    top: 50% !important; 
    left: 5%;
    transform: translateY(-50%) !important;
    z-index: 2;
    max-width: 40%; /* Ngăn chữ kéo dài đâm sang lề phải */
}

.cinematic-left .logo-text {
    font-weight: 700;
    font-size: 3rem;
    letter-spacing: 5px;
    background: linear-gradient(45deg, #fff, var(--gold));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* Căn giữa dọc lề phải & Ép hiệu ứng Blend Mode */
.cinematic-right {
    position: absolute;
    top: 50% !important; 
    right: 5%;
    transform: translateY(-50%) !important;
    z-index: 3;
    display: flex;
    flex-direction: column;
    align-items: flex-end; 
    text-align: right; /* Ép text bám sát lề phải */
    max-width: 45%; /* Ngăn chữ kéo dài đâm sang lề trái */
    mix-blend-mode: difference !important;
}

.cinematic-right .artist-name {
    color: #ffffff !important; 
    font-size: 1.2rem;
    font-weight: 400;
    letter-spacing: 2px;
    margin: -55px 0 10px 0 !important; /* Đẩy chữ NOW PLAYING cách xa ra một chút */
    line-height: 1.2;
	margin-bottom: 10vh !important;
}

.cinematic-right .track-title {
    color: #ffffff !important; 
    font-size: 4rem; 
    font-weight: 700;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1 !important; /* Chống 2 dòng của Now Playing đè lên nhau */
}

/* =========================================
   4. THANH CUỘN & MENU
========================================= */
.dot-navigation {
    position: fixed;
    top: 50%; right: 30px;
    transform: translateY(-50%);
    z-index: 999;
    display: flex;
    flex-direction: column;
}

.dot {
    width: 10px; height: 10px;
    border-radius: 50%;
    background-color: var(--dot-inactive);
    transition: all 0.3s ease;
}
.dot:hover { background-color: var(--gold); }
.dot.active {
    background-color: var(--dot-active);
    transform: scale(1.3);
    box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
}

.menu-toggle {
    position: fixed;
    top: 30px; right: 30px;
    width: 40px; height: 40px;
    background: #fff;
    border-radius: 50%;
    z-index: 1000;
    display: flex; justify-content: center; align-items: center;
    cursor: pointer;
}
.hamburger { width: 20px; height: 2px; background: #000; position: relative; }
.hamburger::before, .hamburger::after {
    content: ''; position: absolute; width: 20px; height: 2px; background: #000;
}
.hamburger::before { top: -6px; }
.hamburger::after { top: 6px; }

/* Responsive cho Mobile */
@media (max-width: 767px) {
.cinematic-left, .cinematic-right { 
        position: relative !important; /* Ép gỡ bỏ absolute để không đè nhau */
        top: auto !important; left: auto !important; right: auto !important; 
        transform: none !important; 
        align-items: center; 
        text-align: center; 
        max-width: 90%;
        margin: 20px 0;
    }
.cinematic-hero { 
        display: flex !important; 
        flex-direction: column; 
        justify-content: center; 
        align-items: center; 
    }
.dot-navigation { 
        display: flex !important; 
        right: 15px !important; 
        transform: translateY(-50%) scale(0.8) !important;
        z-index: 99999 !important;
    }
.cinematic-left .logo-text { font-size: 2.5rem; }
    .cinematic-right .track-title { font-size: 3rem; }
}






/* =========================================
   NEW RELEASE SECTION (TỐI ƯU RESPONSIVE TỶ LỆ)
========================================= */
.section-new-release {
    position: relative;
    width: 100%;
    min-height: 100vh;
    background-color: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate; 
}

/* Tiêu đề góc trái trên cùng */
.nr-title {
    font-size: clamp(3rem, 7vw, 8rem);
    /* Các thuộc tính khác giữ nguyên */
    position: absolute;
    top: 1%;
    left: 5%;
    font-weight: 700;
    color: #ffffff;
    text-transform: uppercase;
    z-index: 50 !important;
    margin: 0;
    mix-blend-mode: difference;
    pointer-events: none; 
}

/* Khối cuộn chứa các dự án */
.nr-track {
    display: flex;
    align-items: center;
    gap: clamp(15px, 3vw, 40px);
    padding-left: 8%; /* Giảm từ 15% xuống 8% để các ô tràn sang trái, cân đối với tiêu đề */
    padding-right: 0%; /* Thêm khoảng trống bên phải để ô cuối cùng có chỗ thở */
    width: 100%;
    height: 70vh; 
    min-height: 550px;
    overflow-x: auto;
    -ms-overflow-style: none;  
    scrollbar-width: none;  
    cursor: grab;
}

.nr-track::after {
    content: "";
    display: block;
    flex-shrink: 0;
    /* Phép tính bù trừ không gian hoàn hảo: 
       Toàn màn hình (100vw) - Lề trái (8vw) - Chiều rộng của 1 ô dự án */
    width: calc(100vw - 8vw - clamp(900px, 25vw, 800px)); 
    height: 1px;
}

/* Đổi hình bàn tay nắm lại khi đang giữ chuột kéo */
.nr-track.dragging {
    cursor: grabbing;
}



.nr-track::-webkit-scrollbar { display: none; }

/* Item Dự Án Mặc Định (Tự co giãn, Luôn là Hình Vuông) */
.nr-item {
    width: clamp(250px, 25vw, 45vh); 
    position: relative;
    aspect-ratio: 1 / 1; 
    flex-shrink: 0;
	pointer-events: auto !important;
    cursor: pointer;
    transition: aspect-ratio 0.6s cubic-bezier(0.25, 1, 0.5, 1), box-shadow 0.6s ease;
    z-index: 1;
    overflow: hidden;
	user-select: none;
    -webkit-user-drag: none;
	z-index: 99 !important;
}

.nr-item * {
    pointer-events: none !important; 
}

/* 2 Lớp Ảnh bên trong Item */
/* KHÓA TÍNH NĂNG KÉO FILE ẢNH MẶC ĐỊNH CỦA TRÌNH DUYỆT */
.nr-img-square, .nr-img-portrait {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.6s ease;
    pointer-events: none; /* Bắt buộc phải có để khi nhấp giữ ảnh kéo không bị dính "bóng ma" của file ảnh */
    user-select: none;
    -webkit-user-drag: none;
}

.nr-img-portrait {
    opacity: 0; 
}

/* HIỆU ỨNG KHI HOVER: GIỮ NGUYÊN CHIỀU RỘNG, CHỈ KÉO DÀI CHIỀU CAO */
.nr-item:hover {
    aspect-ratio: 3 / 5; /* Đổi tỷ lệ thành chữ nhật đứng, hệ thống tự đẩy cao lên từ giữa */
    z-index: 5;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}

.nr-item:hover .nr-img-square {
    opacity: 0; 
}
.nr-item:hover .nr-img-portrait {
    opacity: 1; 
}

/* Nút Xem Thêm */
.nr-view-more {
    height: clamp(250px, 25vw, 45vh);
    /* Các thuộc tính khác giữ nguyên */
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 150px;
    color: #fff;
    text-decoration: none;
    font-weight: 400;
    letter-spacing: 2px;
    border-left: 1px solid rgba(255,255,255,0.2);
    margin-left: clamp(15px, 3vw, 45px);
    transition: color 0.3s ease;
}
.nr-view-more:hover { color: #C89B48; }

/* Responsive cho Tablet và Mobile */
@media (max-width: 767px) {
    .nr-title { top: 12%; }
    .nr-track { padding-left: 8%; }
}

@media (max-width: 767px) {
    .nr-title { top: 10%; }
    .nr-track { 
        padding-left: 5%; 
        height: 500px; 
        min-height: auto; 
    }
    .nr-item { 
        width: clamp(180px, 40vw, 250px); 
    }
    .nr-view-more { 
        height: clamp(180px, 40vw, 250px); 
        min-width: 120px;
    }
}

/* =========================================
   NÚT ĐIỀU HƯỚNG NEXT/PREV (NẰM NGANG VỚI ẢNH)
========================================= */
.nr-nav-btn {
    position: absolute;
    top: 50%; /* Đẩy xuống giữa màn hình */
    transform: translateY(-50%);
    background: rgba(0, 0, 0, 0.4); 
    border: 1px solid rgba(255,255,255,0.3);
    color: #fff;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    z-index: 20;
    backdrop-filter: blur(5px);
}
.nr-nav-btn:hover {
    background: #C89B48;
    border-color: #C89B48;
}
.nr-nav-btn.nr-left { left: 2%; }  /* Nút Prev bám lề trái */
.nr-nav-btn.nr-right { right: 2%; } /* Nút Next bám lề phải */

/* =========================================
   THANH DOT NGANG (NẰM BÊN DƯỚI)
========================================= */
.nr-dots-container {
    position: absolute;
    bottom: 5%; /* Cách mép dưới màn hình 5% */
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 12px;
    z-index: 10;
}
.nr-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.3);
    cursor: pointer;
    transition: all 0.4s ease;
}
/* Hiệu ứng "Viên thuốc" cho Dot đang xem */
.nr-dot.active {
    background-color: #C89B48;
    width: 30px; 
    border-radius: 5px;
}

/* RESPONSIVE */
@media (max-width: 767px) {
    .nr-nav-btn { display: none; } /* Ẩn nút to trên mobile cho đỡ che ảnh */
    .nr-dots-container { bottom: 3%; }
}











/* =========================================
   TUNE INTO THE NEW VIBE SECTION
========================================= */
.vibe-section {
    background-color: #050505; /* Giữ nguyên màu đen sâu của toàn trang */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* Chữ OPALUS khổng lồ làm nền (Dạng Outline) */
.vibe-bg-text {
    position: absolute;
    top: 50%;
    left: 50%;
    /* Kéo xiên 15 độ để đồng bộ với góc cắt của phần Artists */
    transform: translate(-50%, -50%) skewX(-15deg); 
    font-size: 28vw; /* Dùng viewport width để chữ luôn tràn viền màn hình */
    font-weight: 700;
    font-family: 'Montserrat', sans-serif;
    color: transparent; /* Lõi chữ trong suốt */
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15); /* Đường viền trắng mờ */
    white-space: nowrap;
    z-index: 1;
    pointer-events: none; /* Tránh chặn thao tác chuột của người dùng */
    letter-spacing: -2px;
}

/* Khối chứa chữ nổi */
.vibe-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
}

/* Định dạng chữ nổi (Foreground Text) */
.vibe-title {
    font-size: 7rem;
    font-weight: 700;
    color: #A99A86; /* Màu be xám chuẩn cinematic */
    text-transform: uppercase;
    line-height: 0.9;
    margin: 0;
    text-align: left;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8); /* Thêm bóng đổ để tách hẳn khỏi nền */
}

/* Thụt lề dòng thứ 2 y như ảnh mẫu */
.vibe-title .indent {
    display: inline-block;
    padding-left: 120px; 
}

/* Responsive cho Tablet & Mobile */
@media (max-width: 1200px) {
    .vibe-title { font-size: 5.5rem; }
    .vibe-title .indent { padding-left: 80px; }
}

@media (max-width: 767px) {
    .vibe-bg-text { font-size: 35vw; }
    .vibe-title { font-size: 4.5rem; }
    .vibe-title .indent { padding-left: 50px; }
}

@media (max-width: 767px) {
    .vibe-bg-text { 
        font-size: 50vw; 
        transform: translate(-50%, -50%) skewX(-10deg); 
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    }
    .vibe-title { 
        font-size: 3rem; 
        text-align: center; 
    }
    .vibe-title .indent { 
        padding-left: 0; 
        display: block; 
        margin-top: 10px; 
    }
}






/* =========================================
   TUNE INTO THE NEW VIBE SECTION
========================================= */
.vibe-section {
    background-color: #050505;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    isolation: isolate;
}

/* KHUNG BAO HIỆU ỨNG CHỮ CHẠY */
.vibe-marquee-container {
    position: absolute;
    top: 50%;
    left: 0;
    /* Kéo xiên toàn bộ dải chữ để đồng bộ với góc cắt Artists */
    transform: translateY(-50%) skewX(-15deg);
    display: flex;
    width: max-content;
    z-index: 1;
    pointer-events: none;
}

/* =========================================
   HIỆU ỨNG CHỮ CHẠY (NEW VIBE) - ĐÃ CĂN GIỮA
========================================= */
/* Ép xóa toàn bộ thẻ ngắt dòng <br> hoặc <p> rác do WordPress tự đẻ ra */
.vibe-marquee br, 
.vibe-marquee p {
    display: none !important;
}

/* KHUNG BAO HIỆU ỨNG CHỮ CHẠY */
.vibe-marquee-container {
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%) skewX(-15deg);
    display: flex;
    width: max-content;
    z-index: 1;
    pointer-events: none;
}

/* ĐỊNH DẠNG KHỐI CHỮ CHẠY NỀN */
.vibe-marquee {
    display: flex;
    align-items: center;
    white-space: nowrap; /* Ép buộc chữ phải chạy dài sang ngang */
    font-family: 'Montserrat', sans-serif;
    /* Giảm size từ 28vw xuống 18vw để nguyên cụm Opalus Band nằm gọn gàng ở giữa */
    font-size: 50vw; 
    font-weight: 700;
    color: transparent;
    -webkit-text-stroke: 2px rgba(255, 255, 255, 0.15);
    margin-right: 3vw; 
    letter-spacing: -2px;
    line-height: 1;
    animation: marquee-slide 80s linear infinite;
}

@keyframes marquee-slide {
    0% { transform: translateX(0); }
    100% { transform: translateX(-100%); }
}

/* =========================================
   TEXT NỔI CHÍNH "TUNE INTO THE NEW VIBE"
========================================= */
.vibe-content {
    position: relative;
    z-index: 2;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.vibe-title {
    font-size: 7rem;
    font-weight: 900;
    color: #A99A86; 
    text-transform: uppercase;
    line-height: 1;
    margin: 0;
    /* CHUYỂN THÀNH CĂN GIỮA TRUYỆT ĐỐI */
    text-align: center; 
    text-shadow: 0 10px 30px rgba(0,0,0,0.8); 
}

/* Xóa thụt lề của dòng thứ 2 để nó rớt ngay giữa dưới dòng 1 */
.vibe-title .indent {
    display: block;
    padding-left: 0 !important; 
}

/* RESPONSIVE CHO TABLET & MOBILE */
@media (max-width: 1200px) {
    .vibe-title { font-size: 5.5rem; }
}

@media (max-width: 767px) {
    .vibe-marquee-container { 
        transform: translateY(-50%) skewX(-10deg); 
    }
    .vibe-marquee { 
        font-size: 30vw; /* Tăng size chút xíu trên Mobile */
        -webkit-text-stroke: 1px rgba(255, 255, 255, 0.15);
    }
    .vibe-title { 
        font-size: 3.5rem; 
    }
}





/* =========================================
   FOOTER SECTION
========================================= */
.opalus-footer {
    background-color: #000000;
    width: 100%;
    padding: 40px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1); /* Đường viền mờ ngăn cách ở trên */
    font-family: 'Montserrat', sans-serif;
    isolation: isolate;
}

.footer-container {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* --- CỤM BÊN TRÁI --- */
.footer-left {
    display: flex;
    align-items: center;
    gap: 20px;
}

.footer-logo {
    height: 40px; /* Điều chỉnh kích thước logo cho phù hợp */
    width: auto;
    object-fit: contain;
}

.footer-copyright {
    display: flex;
    flex-direction: column;
}

.footer-copyright p {
    color: #ffffff;
    font-size: 0.65rem; /* Font chữ nhỏ, sắc nét */
    font-weight: 400;
    letter-spacing: 1px;
    margin: 2px 0;
    line-height: 1.2;
}

/* --- CỤM BÊN PHẢI --- */
.footer-right {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 15px;
}

.footer-top-row {
    display: flex;
    align-items: center;
    gap: 30px;
}

.footer-links a {
    color: #ffffff;
    font-size: 0.85rem;
    font-weight: 800;
    letter-spacing: 1px;
    text-decoration: none;
    margin-right: 20px;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: #C89B48; /* Đổi sang màu vàng ánh kim khi hover */
}

/* Icon mạng xã hội được bọc trong vòng tròn trắng */
.footer-socials {
    display: flex;
    gap: 10px;
}

.footer-socials a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 25px;
    height: 25px;
    background-color: #ffffff;
    color: #000000;
    border-radius: 50%;
    text-decoration: none;
    font-size: 0.8rem;
    transition: all 0.3s ease;
}

.footer-socials a:hover {
    background-color: #C89B48;
    color: #ffffff;
    transform: translateY(-3px);
}

.footer-address p {
    color: #ffffff;
    font-size: 0.75rem;
    font-weight: 400;
    letter-spacing: 1px;
    margin: 4px 0;
    line-height: 1.4;
    text-transform: uppercase;
}

/* --- RESPONSIVE CHO MOBILE & TABLET --- */
@media (max-width: 767px) {
    .footer-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 40px;
    }
    
    .footer-right {
        width: 100%;
    }
}

@media (max-width: 576px) {
    .footer-left {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .footer-top-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}



/* =========================================
   ARTIST PROFILE PAGE (SINGLE)
========================================= */
.artist-profile-wrapper {
    background-color: #000;
    color: #fff;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 100px;
}

.ap-hero {
    position: relative;
    width: 100%;
    height: 70vh;
    overflow: hidden;
    margin-bottom: 80px;
}
.ap-hero-img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: top center;
}
.ap-hero-name {
    position: absolute;
    bottom: 40px; left: 5%;
    font-size: 5rem; font-weight: 900; text-transform: uppercase;
    color: #fff; margin: 0;
    text-shadow: 0 10px 30px rgba(0,0,0,0.8);
    letter-spacing: -2px; line-height: 1;
}

.ap-section {
    display: grid;
    grid-template-columns: 1fr 2.5fr;
    gap: 40px; width: 90%; max-width: 1400px;
    margin: 0 auto 80px auto;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 40px;
}

.ap-heading h2 { font-size: 2.5rem; font-weight: 900; color: #dedede; margin: 0; }

.ap-about-content { display: flex; justify-content: space-between; }
.about-text { max-width: 80%; }
.about-text p { font-size: 1rem; line-height: 1.6; color: #ccc; margin-bottom: 20px;}
.btn-booking { color: #C89B48; text-decoration: none; font-weight: 400; font-size: 0.9rem;}
.about-socials { display: flex; flex-direction: column; gap: 15px; }
.about-socials a { color: #fff; font-size: 1.2rem; transition: color 0.3s; }
.about-socials a:hover { color: #C89B48; }

.award-item { margin-bottom: 30px; }
.award-year { display: block; font-size: 1.2rem; font-weight: 900; margin-bottom: 5px; color: #fff;}
.award-desc { font-size: 0.95rem; color: #aaa; line-height: 1.5; margin: 0;}

.video-wrapper { position: relative; width: 100%; display: block;}
.video-wrapper img { width: 100%; height: auto; display: block; }
.play-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 60px; height: 60px; background: rgba(0,0,0,0.6); border: 2px solid #fff;
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem; transition: all 0.3s; color: #fff;
}
.video-wrapper:hover .play-btn { background: #C89B48; border-color: #C89B48; }

.gallery-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.gallery-grid img { width: 100%; height: auto; object-fit: cover; }

@media (max-width: 767px) {
    .ap-section { grid-template-columns: 1fr; gap: 20px; }
    .ap-hero-name { font-size: 4rem; }
    .ap-about-content { flex-direction: column; gap: 20px; }
    .about-text { max-width: 100%; }
    .about-socials { flex-direction: row; }
}

/* Tăng chiều cao Hero Cover thêm 150px */
.ap-hero {
    height: calc(70vh + 150px); 
    overflow: hidden;
}

/* Đặt gốc phóng to cho ảnh Cover */
.ap-hero-img {
    transform-origin: center center;
    will-change: transform;
}

/* -------------------------------------
   GALLERY SLIDER (Hiển thị 3 ảnh/hàng)
------------------------------------- */
.gallery-slider {
    display: flex;
    gap: 20px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -ms-overflow-style: none;  /* Ẩn scrollbar IE/Edge */
    scrollbar-width: none;  /* Ẩn scrollbar Firefox */
}
.gallery-slider::-webkit-scrollbar { display: none; /* Ẩn scrollbar Chrome/Safari */ }

.gallery-slide {
    flex: 0 0 calc(33.333% - 14px); /* Hiển thị chính xác 3 ảnh */
    scroll-snap-align: start;
}
.gallery-slide img {
    width: 100%;
    height: 350px;
    object-fit: cover;
    display: block;
}

/* Ô "Xem Thêm" */
.see-more-slide {
    display: flex;
    align-items: center;
    justify-content: center;
    background: #111;
    border: 1px solid rgba(255,255,255,0.1);
    height: 350px;
}
.see-more-slide a {
    color: #C89B48;
    font-weight: 900;
    font-size: 1.2rem;
    text-decoration: none;
    letter-spacing: 2px;
}

/* Responsive Gallery */
@media (max-width: 767px) {
    .gallery-slide { flex: 0 0 calc(50% - 10px); } /* Tablet: 2 ảnh */
}
@media (max-width: 576px) {
    .gallery-slide { flex: 0 0 100%; } /* Mobile: 1 ảnh */
}

/* -------------------------------------
   POPUP MODAL (VIDEO YOUTUBE)
------------------------------------- */
.opalus-modal {
    position: fixed; top: 0; left: 0; width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.9);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.opalus-modal.show-modal {
    opacity: 1; visibility: visible;
}
.opalus-modal-content {
    position: relative;
    width: 90%; max-width: 900px;
}
.opalus-close-modal {
    position: absolute;
    top: -40px; right: 0;
    color: #fff; font-size: 35px;
    font-weight: bold; cursor: pointer; transition: color 0.3s;
}
.opalus-close-modal:hover { color: #C89B48; }

/* Ép khung tỷ lệ 16:9 cho Youtube */
.iframe-container {
    position: relative;
    padding-bottom: 56.25%; /* Tỷ lệ 16:9 */
    height: 0; overflow: hidden;
}
.iframe-container iframe {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
}


/* Nút bấm Slider Gallery */
.gallery-nav-buttons button {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.5);
    color: #fff;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.gallery-nav-buttons button:hover {
    background: #C89B48;
    border-color: #C89B48;
    transform: scale(1.1);
}

/* Biến con trỏ chuột thành hình bàn tay để kéo thả */
.gallery-slider {
    cursor: grab;
}
.gallery-slider:active {
    cursor: grabbing; /* Đổi hình khi đang giữ chuột */
}




/* =========================================
   NÚT MENU TRÒN (TRIGGER)
========================================= */
.opalus-menu-trigger {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: #ffffff !important;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.opalus-menu-trigger:hover {
    transform: scale(1.1);
}

.opalus-hamburger-lines {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* Đổi thành div và ép hiển thị */
.opalus-hamburger-lines div {
    display: block !important;
    width: 100% !important;
    height: 3px !important;
    background-color: #000000 !important;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* =========================================
   OFF-CANVAS MENU (TRƯỢT TỪ PHẢI SANG 1/3 MÀN HÌNH)
========================================= */
.opalus-fullscreen-menu {
    position: fixed;
    top: 0; 
    right: 0; /* Ép menu bám sát lề phải */
    left: auto; 
    width: 35%; /* Chiếm khoảng 1/3 màn hình */
    min-width: 320px; /* Đảm bảo không bị bóp nghẹt trên màn hình nhỏ */
    height: 100vh;
    background-color: rgba(15, 15, 15, 0.98); /* Nền tối chỉ áp dụng cho khung này */
    z-index: 10000;
    visibility: hidden;
    /* Giấu menu ra ngoài màn hình bên phải */
    transform: translateX(100%); 
    /* Hiệu ứng trượt mượt mà */
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    box-shadow: -5px 0 25px rgba(0,0,0,0.5); /* Đổ bóng nhẹ để tách biệt với trang chủ */
}

/* Kích hoạt trượt vào */
.opalus-fullscreen-menu.is-active {
    visibility: visible;
    transform: translateX(0); 
}

.opalus-menu-close-btn {
  position: absolute;
  top: 30px;
  right: 40px;
  font-size: 2rem;            /* Giảm size chữ xuống một chút để cân đối hơn */
  color: #888;
  cursor: pointer;
  z-index: 10001;
  transition: all 0.3s ease;

  /* --- GIẢI PHÁP CĂN GIỮA BẰNG PADDING --- */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  
  width: 32px;                /* Cố định chiều rộng */
  height: 32px;               /* Cố định chiều cao */
  line-height: 0;             /* Ép dòng text về 0 để không bị đẩy lệch */

  border: 2px solid #888;     
  border-radius: 50%;         
  box-sizing: border-box;     /* Đảm bảo kích thước không bị phình ra */
}



/* Hiệu ứng khi di chuột qua (Hover) cho đẹp hơn */
.opalus-menu-close-btn:hover {
  color: #fff;                /* Đổi màu dấu X sang trắng */
  border-color: #fff;         /* Đổi màu viền sang trắng */
  background-color: #888;     /* Thêm màu nền nếu muốn (tùy chọn) */
}



/* KHỐI CHỨA NỘI DUNG (CHIẾM 100% CỦA KHUNG 1/3 NÀY) */
.opalus-menu-content-wrapper {
    width: 100%; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15%; /* Căn lề trái bên trong khung */
    overflow-y: auto; 
    scrollbar-width: none;
}
.opalus-menu-content-wrapper::-webkit-scrollbar { display: none; }

.opalus-main-nav {
    display: flex;
    flex-direction: column;
    gap: 2vh; 
    padding: 100px 0; 
}

/* ĐỊNH DẠNG TEXT MENU CHÍNH */
.opalus-nav-link {
    display: block !important; 
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 4vh, 4.5rem); /* Tinh chỉnh lại size cho vừa khung hẹp */
    font-weight: 900;
    color: #888888; 
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    letter-spacing: -2px;
    transition: color 0.3s ease, padding-left 0.3s ease;
    transform: scaleY(1.1); 
    transform-origin: left;
}

.opalus-nav-link:hover, .opalus-nav-link.has-submenu {
    color: #ffffff;
}
.opalus-nav-link:hover {
    padding-left: 15px; 
}
/* =========================================
   NÚT MENU TRÒN (TRIGGER)
========================================= */
.opalus-menu-trigger {
    position: fixed;
    top: 30px;
    right: 30px;
    width: 40px;
    height: 40px;
    background-color: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    z-index: 9999;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3);
    transition: transform 0.3s ease;
}

.opalus-menu-trigger:hover {
    transform: scale(1.1);
}

.opalus-hamburger-lines {
    width: 18px;
    height: 14px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.opalus-hamburger-lines div {
    display: block;
    width: 100%;
    height: 3px;
    background-color: #000000;
    border-radius: 2px;
    transition: all 0.3s ease;
}

/* =========================================
   OFF-CANVAS MENU (TRƯỢT TỪ PHẢI SANG)
========================================= */
.opalus-fullscreen-menu {
    position: fixed;
    top: 0; 
    right: 0; 
    left: auto; 
    width: 35%; 
    min-width: 320px; 
    height: 100vh;
    background-color: rgba(15, 15, 15, 0.98); 
    z-index: 10000;
    visibility: hidden;
    transform: translateX(100%); 
    transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1), visibility 0.5s;
    display: flex;
    align-items: center;
    justify-content: flex-start; 
    box-shadow: -5px 0 25px rgba(0,0,0,0.5); 
    will-change: transform, visibility; /* Ép phần cứng xử lý trượt mượt hơn */
}

.opalus-fullscreen-menu.is-active {
    visibility: visible;
    transform: translateX(0); 
}

/* =========================================
   NÚT ĐÓNG MENU (CLOSE BUTTON)
========================================= */
.opalus-menu-close-btn {
    position: absolute;
    top: 30px;
    right: 40px;
    width: 32px;
    height: 32px;
    font-size: 1.5rem; /* Giảm size để lọt vừa khung 32px */
    color: #888;
    border: 2px solid #888;     
    border-radius: 50%; 
    cursor: pointer;
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.opalus-menu-close-btn:hover {
    color: #fff;                
    border-color: #fff;         
    background-color: #333; /* Thêm nền nhẹ thay vì xám #888 để đỡ gắt */     
}

/* =========================================
   NỘI DUNG MENU
========================================= */
.opalus-menu-content-wrapper {
    width: 100%; 
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 15%; 
    overflow-y: auto; 
    scrollbar-width: none;
}

.opalus-menu-content-wrapper::-webkit-scrollbar { display: none; }

.opalus-main-nav {
    display: flex;
    flex-direction: column;
    gap: 2vh; 
    padding: 100px 0; 
}

.opalus-nav-link {
    display: block; 
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(2.5rem, 4vh, 4.5rem); 
    font-weight: 900;
    color: #888888; 
    text-transform: uppercase;
    text-decoration: none;
    line-height: 1;
    letter-spacing: -2px;
    transform: scaleY(1.1); 
    transform-origin: left;
    transition: color 0.3s ease, padding-left 0.3s ease;
    
    /* Khử răng cưa khi dùng scaleY */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

.opalus-nav-link:hover, .opalus-nav-link.has-submenu {
    color: #ffffff;
}

.opalus-nav-link:hover {
    padding-left: 15px; 
}

.opalus-nav-submenu {
    display: flex;
    flex-direction: column;
    padding-left: 15%; 
    gap: 1.5vh;
    margin-top: 0;
    margin-bottom: 2vh;
}

.opalus-submenu-link {
    display: block;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(1.5rem, 2.5vh, 2.5rem); 
    font-weight: 900;
    color: #666666;
    text-transform: uppercase;
    text-decoration: none;
    letter-spacing: -1px;
    line-height: 1;
    transform: scaleY(1.1);
    transform-origin: left;
    transition: color 0.3s ease;
    
    /* Khử răng cưa khi dùng scaleY */
    -webkit-font-smoothing: antialiased;
    backface-visibility: hidden;
}

.opalus-submenu-link:hover {
    color: #C89B48; 
}

/* =========================================
   RESPONSIVE
========================================= */
@media (max-width: 800px) {
    .opalus-fullscreen-menu { width: 45%; }
}

@media (max-width: 767px) {
    .opalus-fullscreen-menu { width: 80%; } 
    .opalus-nav-link { font-size: clamp(2.5rem, 5vh, 4rem); }
    .opalus-submenu-link { font-size: clamp(1.5rem, 3vh, 2.5rem); }
    .opalus-menu-close-btn { 
        top: 20px; 
        right: 25px; 
        width: 40px; 
        height: 40px; 
        font-size: 1.8rem; 
    }
}





/* =========================================
   INTRODUCTION PAGE
========================================= */
.opalus-intro-wrapper {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    padding-bottom: 100px;
}

/* --- 1. HERO SECTION --- */
.intro-hero {
    position: relative;
    width: 100%;
    height: 60vh;
    overflow: hidden;
    margin-bottom: 80px;
}

.intro-hero-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0.7;
}

.intro-play-btn {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 60px; height: 60px;
    border: 1px solid #fff;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(5px);
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%; cursor: pointer;
    font-size: 1.2rem; transition: all 0.3s ease;
}
.intro-play-btn:hover {
    background: #fff;
    color: #000;
}

/* --- 2. CẤU TRÚC SECTION & LƯỚI (GRID) --- */
.intro-section {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto 100px auto;
}

/* Tiêu đề khổng lồ */
.intro-huge-title {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -2px;
    margin: 0 0 80px 0;
    color: #ffffff;
}

/* Hàng lưới (Grid) 1/3 - 2/3 */
.intro-row {
    display: grid;
    grid-template-columns: 1fr 2.5fr; /* Chia cột trái nhỏ, cột phải to */
    gap: 40px;
    padding: 60px 0;
}

/* Đường kẻ phân cách (Hairline) */
.intro-row.top-border {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* --- 3. TYPOGRAPHY CHI TIẾT --- */
.intro-heading {
    font-size: 2rem;
    font-weight: 900;
    color: #888888;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

.intro-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cccccc;
    margin: 0;
    font-weight: 400;
}

/* --- 4. KHỐI LEADERSHIP --- */
.leadership-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.leader-img {
    width: 100%;
    max-height: 500px;
    object-fit: cover;
}
.leader-name {
    font-size: 1.2rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
}
.leader-title {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    margin: -10px 0 10px 0;
    font-weight: 400;
}

/* --- 5. KHỐI THỐNG KÊ (STATS) & ẢNH MINH HỌA --- */
.intro-stats {
    display: flex;
    gap: 60px;
    margin: 40px 0;
}
.stat-item h4 {
    font-size: 1.5rem;
    font-weight: 900;
    margin: 0 0 5px 0;
}
.stat-item p {
    font-size: 0.85rem;
    color: #888;
    margin: 0;
}

.intro-graphic {
    width: 100%;
    height: auto;
    margin-top: 20px;
    opacity: 0.8;
}

/* --- 6. RESPONSIVE CHO TABLET & MOBILE --- */
@media (max-width: 767px) {
    .intro-row {
        grid-template-columns: 1fr; /* Gộp thành 1 cột */
        gap: 20px;
        padding: 40px 0;
    }
    .intro-heading {
        font-size: 2.5rem;
    }
}

@media (max-width: 576px) {
    .intro-huge-title { margin-bottom: 40px; }
    .intro-stats { flex-direction: column; gap: 20px; }
}





/* =========================================
   SCROLL SNAPPING (ĐÃ TỐI ƯU MƯỢT MÀ)
========================================= */

.opalus-section {
    height: 100vh !important;
    width: 100%;
    scroll-snap-align: start;
}








/* =========================================
   ARTIST SECTION - ST319 STYLE COLLAGE (BẢN TỐI ƯU CẤU TRÚC)
========================================= */
.artists-section {
    position: relative;
    width: 100%;
    height: 100vh !important;
    background-color: #000;
    display: flex;
    align-items: center;
    /* Đổi từ flex-start sang center để cụm ảnh nằm cân chính giữa màn hình */
    justify-content: center; 
    overflow: hidden;
    isolation: isolate; 
}

/* KHUNG CHỨA TEXT (NHỎ HƠN VÀ LẬT MÀU) */
.artists-text-overlay {
    position: absolute;
    top: 50%;
    /* Nhích chữ sang phải một chút (từ 5% lên 10%) để khớp với lề chéo mới của ảnh */
    left: 10%; 
    transform: translateY(-50%);
    z-index: 20;
    pointer-events: none;
    mix-blend-mode: difference; 
}
.artists-main-title {
    font-size: clamp(3rem, 6vw, 6rem);
    font-weight: 900;
    color: #ffffff;
    line-height: 0.9;
    margin: 0;
    letter-spacing: -2px;
}
.artists-dynamic-name {
    font-size: clamp(1.2rem, 2vw, 2.5rem);
    color: #ffffff; 
    margin: 15px 0 0 5px;
    font-weight: 400;
    transition: opacity 0.3s ease;
    text-transform: uppercase;
}

/* KHUNG CHỨA LƯỚI ẢNH VÁT CHÉO */
.artists-collage-wrapper {
    /* Thu gọn chiều rộng xuống 85% để lộ khoảng đen bên trái */
    width: 85%; 
    height: 80vh;
    transform: skewX(-15deg);
    /* Xóa margin-left âm cũ, đưa về 0 auto để khối tự động căn giữa cân bằng 2 bên */
    margin: 0 auto; 
}

/* HỆ THỐNG LƯỚI NÂNG CẤP (24 CỘT X 20 HÀNG ĐỂ KHUNG MỎNG HƠN) */
.artists-collage-grid {
    display: grid;
    grid-template-columns: repeat(24, 1fr);
    grid-template-rows: repeat(20, 1fr);
    /* Tăng khoảng cách giữa các khung */
    gap: 25px; 
    width: 100%;
    height: 100%;
}

/* -----------------------------------------
   GHI ĐÈ TRIỆT ĐỂ CSS CŨ CỦA CÁC CLASS JS
----------------------------------------- */
/* (Block này giữ nguyên như cũ để bảo vệ code) */
.artists-collage-grid .collage-item.thumb-item,
.artists-collage-grid .collage-item.item-cover {
    position: relative !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    top: auto !important; left: auto !important; right: auto !important; bottom: auto !important;
    overflow: hidden;
    cursor: pointer;
    background: #111;
    display: block; /* Thêm block vì chuyển sang dùng thẻ a */
}

.artists-collage-grid .cover-img {
    position: absolute !important;
    top: 0 !important; left: 0 !important;
    width: 100% !important; height: 100% !important;
    opacity: 0;
    transition: opacity 0.6s ease;
    z-index: 1;
}
.artists-collage-grid .cover-img.active { 
    opacity: 1 !important; 
    z-index: 5 !important; 
}

/* XỬ LÝ ẢNH BÊN TRONG (CHỐNG MÉO HÌNH) */
.collage-item img, 
.cover-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    transform: skewX(15deg) scale(1.35) !important; 
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
}

.thumb-item img { filter: grayscale(100%) brightness(0.4); }
.thumb-item.active img, 
.thumb-item:hover img { 
    filter: grayscale(0%) brightness(1); 
    transform: skewX(15deg) scale(1.45) !important; 
}
.cover-img img { filter: none !important; }

/* -----------------------------------------
   TỌA ĐỘ LƯỚI MỚI (TẠO DÁNG MỎNG, THON NHƯ ST319)
----------------------------------------- */
/* Ô Lớn sát trái */
.item-cover { grid-column: 1 / 16; grid-row: 1 / 14; }

/* Các ô nhỏ dẹt hơn nhờ lưới 24x20 */
.item-thumb-1 { grid-column: 16 / 19; grid-row: 7 / 14; } /* Cột đứng mảnh */
.item-thumb-2 { grid-column: 19 / 25; grid-row: 11 / 14; } /* Ngang góc phải */
.item-thumb-3 { grid-column: 8 / 16; grid-row: 14 / 17; } /* Ngang dưới Cover */
.item-thumb-4 { grid-column: 16 / 19; grid-row: 14 / 21; } /* Cột đứng kéo dài xuống */
.item-thumb-5 { grid-column: 19 / 25; grid-row: 14 / 17; } /* Ngang dưới cùng phải */








/* =========================================
   ARTISTS SECTION - MOBILE LAYOUT (ABSOLUTE PIXEL-PERFECT)
========================================= */
@media (max-width: 767px) {
    /* 1. Khung chứa: Ép thành khối Block để dùng tọa độ tuyệt đối */
    .artists-collage-wrapper { 
        display: block !important;
        position: relative !important;
        width: 140vw !important; 
        margin-left: -20vw !important; 
        height: 85vh !important; 
        margin-top: 5vh !important; 
        transform: skewX(-15deg) !important; 
    }

    /* Tắt Grid của Desktop */
    .artists-collage-grid { 
        display: block !important; 
        width: 100% !important; 
        height: 100% !important; 
        position: relative !important;
    }

    /* 2. TỌA ĐỘ ẢNH COVER (Chiếm 55% nửa trên màn hình) 
       -> Đã thêm .artists-section ở đầu để đè bẹp CSS Desktop */
/* =========================================
       KHÔI PHỤC ẢNH COVER (FIX LỖI ẨN ẢNH VÀ HIỂN THỊ SLIDE)
    ========================================= */
    /* 1. Khung chứa bao ngoài (Chiếm 55% màn hình) */
    .artists-section .artists-collage-grid .collage-item.item-cover {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 55% !important; /* Khung cha cao 55% */
        margin: 0 !important; 
        padding: 0 !important;
        display: block !important;
        z-index: 10 !important;
    }
    
    /* 2. Từng bức ảnh Cover bên trong (Cao 100% để lấp đầy khung cha) */
    .artists-section .artists-collage-grid .item-cover .cover-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important; /* Sửa lại thành 100% */
        opacity: 0 !important; 
        visibility: hidden !important; 
        transition: opacity 0.5s ease-in-out !important;
        z-index: 1 !important;
        display: block !important;
    }
    
    /* 3. Hiển thị ảnh đang chạy Slide (Quyền ưu tiên tuyệt đối) */
    .artists-section .artists-collage-grid .item-cover .cover-img.active {
        opacity: 1 !important; 
        visibility: visible !important;
        z-index: 5 !important;
    }

    /* 4. Giữ hiệu ứng nghiêng, chống méo hình */
    .artists-section .artists-collage-grid .item-cover .cover-img img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        transform: skewX(15deg) scale(1.35) !important;
    }
	
	
	
	
	/* =========================================
   FIX LỖI KHÔNG CLICK ĐƯỢC NÚT SLIDE
========================================= */
/* Xuyên thấu lớp khung bao ngoài */
.artists-text-overlay {
    pointer-events: none !important; 
    z-index: 999 !important;
}

/* Kích hoạt lại click cho Text và Cụm điều khiển */
.artists-main-title, 
.artists-dynamic-name, 
.artist-mobile-controls {
    pointer-events: auto !important; 
    position: relative !important;
    z-index: 1000 !important;
}

/* Đảm bảo nút Next/Prev luôn nổi lên trên cùng */
.artist-nav-btn {
    pointer-events: auto !important;
    z-index: 1001 !important;
}
	
	

    /* 3. TỌA ĐỘ 5 ẢNH NHỎ (Chuẩn tỷ lệ mỏng dính của ST319) */
/* Thumb 1 (Dọc trái) */
    .artists-section .artists-collage-grid .collage-item.item-thumb-1 { position: absolute !important; margin: 0 !important; top: 60% !important; left: 17% !important; width: 16% !important; height: 16% !important; margin-left: 13vh !important; }
    
    /* Thumb 2 (Ngang trên phải) */
    .artists-section .artists-collage-grid .collage-item.item-thumb-2 { position: absolute !important; margin: 0 !important; top: 65% !important; left: 35% !important; width: 42% !important; height: 9% !important; margin-left: 13vh !important;}
    
    /* Thumb 3 (Ngang dưới trái) */
    .artists-section .artists-collage-grid .collage-item.item-thumb-3 { position: absolute !important; margin: 0 !important; top: 78% !important; left: 13% !important;  width: 25% !important; height: 10% !important; margin-left: 13vh !important;}
    
    /* Thumb 4 (Dọc giữa đáy) */
    .artists-section .artists-collage-grid .collage-item.item-thumb-4 { position: absolute !important; margin: 0 !important; top: 76% !important; left: 40% !important; width: 15% !important; height: 18% !important; margin-left: 13vh !important;}
    
    /* Thumb 5 (Ngang dưới phải) */
    .artists-section .artists-collage-grid .collage-item.item-thumb-5 { position: absolute !important; margin: 0 !important; top: 80% !important; left: 57% !important; width: 25% !important; height: 10% !important; margin-left: 13vh !important;}
	
	
	/* =========================================
       KHÔI PHỤC ẢNH COVER (Ảnh to chạy slide)
    ========================================= */
    .artists-section .cover-img,
    .artists-section .item-cover {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 55% !important; /* Chiếm 55% màn hình ở trên */
        margin: 0 !important; 
        padding: 0 !important;
    }
    
    .artists-section .cover-img {
        opacity: 0; 
        visibility: hidden; 
        transition: opacity 0.4s ease-in-out !important;
        z-index: 1;
    }
    
    .artists-section .cover-img.active {
        opacity: 1 !important; 
        visibility: visible !important;
        z-index: 5 !important;
    }

    .artists-section .cover-img img,
    .artists-section .item-cover img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        /* Giữ hiệu ứng nghiêng vát chéo để không bị hở viền đen */
        transform: skewX(15deg) scale(1.35) !important;
    }

    /* =========================================
       GIAO DIỆN THANH ĐIỀU HƯỚNG SLIDE (NAV BAR)
    ========================================= */
    .artist-mobile-controls {
        display: flex !important;
        align-items: center;
        gap: 15px;
        margin-top: 15px;
        z-index: 99;
        position: relative;
    }
    .artist-counter {
        color: #fff;
        font-size: 1rem;
        font-weight: bold;
        font-family: 'Nunito', sans-serif;
        letter-spacing: 2px;
    }
    .artist-progress-bar {
        flex-grow: 1;
        height: 2px;
        background: rgba(255,255,255,0.2);
        position: relative;
        max-width: 120px;
    }
    .artist-progress-fill {
        position: absolute;
        left: 0; top: 0; height: 100%;
        background: #C89B48; /* Màu vàng Gold */
        transition: width 0.3s ease;
    }
    .artist-nav-arrows {
        display: flex; gap: 15px;
    }
    .artist-nav-btn {
        color: #fff; font-size: 1.2rem; cursor: pointer; padding: 5px; opacity: 0.8;
    }
    .artist-nav-btn:active { opacity: 1; transform: scale(0.8); color: #C89B48; }
	

    /* 4. Ép ảnh hiển thị không méo và làm sáng ảnh đang chọn */
    .artists-section .artists-collage-grid .collage-item img, 
    .artists-section .artists-collage-grid .cover-img img { 
        transform: skewX(15deg) scale(1.35) !important; 
    } 
    .artists-section .artists-collage-grid .thumb-item.active img { 
        transform: skewX(15deg) scale(1.45) !important;
        filter: grayscale(0%) brightness(1.2) !important; 
    }

    /* 5. Cụm chữ OUR ARTISTS (Đẩy lên nằm vừa đúng mí dưới ảnh Cover) */
    .artists-text-overlay { 
        position: absolute !important;
        top: 55% !important; 
        left: 10vw !important; 
        transform: translateY(-90%) !important; 
        mix-blend-mode: normal !important; 
        z-index: 50 !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .artists-main-title { 
        font-size: 3.5rem !important; 
        line-height: 0.9 !important; 
        text-shadow: 0 4px 20px rgba(0,0,0,0.9) !important;
    }
    .artists-dynamic-name { 
        display: none !important; /* Ẩn tên màu vàng để giống hệt ST319 */
    }

    /* 6. CSS cho cụm Nút Slide Mobile */
    .artist-mobile-controls {
        display: flex;
        align-items: center;
        gap: 15px;
        margin-top: 10px;
    }
    .artist-progress-line {
        width: 100px;
        height: 2px;
        background: rgba(255,255,255,0.3);
        position: relative;
    }
    .artist-progress-line::after {
        content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 30%; background: #fff;
    }
    .artist-nav-btn {
        color: #fff; font-size: 1.2rem; cursor: pointer; padding: 5px; opacity: 0.7;
    }
    .artist-nav-btn:active { opacity: 1; transform: scale(0.9); }
}








/* Ép hệ thống Lưới bỏ qua các thẻ <p> do WordPress tự sinh ra */
.artists-collage-grid > p {
    display: contents !important;
}

/* Ẩn các thẻ <br> rác làm xô lệch khoảng cách */
.artists-collage-grid > br {
    display: none !important;
}


/* Bù lại khung hiển thị cho phần Hero Intro */
.intro-static-section {
    position: relative;
    width: 100%;
    height: 100vh;
    overflow: hidden;
    background-color: #000;
}




/* Thiết lập cho phần Intro cuộn chuột hoàn toàn bình thường */
.intro-hero-section {
    position: relative;
    width: 100%;
    height: 100vh; /* Banner video đầu tiên giữ nguyên full màn hình */
    overflow: hidden;
    background-color: #000;
}

.intro-normal-section {
    position: relative;
    width: 100%;
    height: auto !important; /* Cho phép chiều cao tự động nới rộng theo nội dung */
    min-height: auto !important;
    overflow: visible !important;
}








/* =========================================
   NEW RELEASE SECTION (STATIC LAYOUT 5 ITEMS)
========================================= */
.section-new-release.static-layout {
    position: relative;
    width: 100vw;
    max-width: 100%;
    min-height: 100vh;
    background-color: #000;
    overflow: hidden;
    display: flex;
    align-items: center;
    isolation: isolate; 
}

.nr-title {
    font-size: clamp(3rem, 7vw, 8rem);
    position: absolute;
    top: 15%;
    left: 5%;
	font-size: 80px !important;
    font-weight: 900;
    color: #ffffff;
    text-transform: uppercase;
    z-index: 10;
    margin: 0;
    mix-blend-mode: difference;
    pointer-events: none; 
}

/* KHUNG CHỨA 5 DỰ ÁN */
.nr-static-track {
    display: flex;
    justify-content: center; /* Tự động căn giữa toàn bộ khối */
    align-items: center;
    gap: 2vw; /* Khoảng cách giữa các ô */
    width: 100%;
    height: 100vh;
	margin-bottom: -25px;
}

/* ĐỊNH DẠNG TỪNG Ô DỰ ÁN */
.nr-static-track .nr-item {
    /* Set độ rộng khoảng 22% màn hình. 5 ô = 110%. 
       Chính phần dư 10% này sẽ tạo ra hiệu ứng cắt mép 2 bên lề */
    width: 22vw; 
    min-width: 220px;
    position: relative;
    aspect-ratio: 1 / 1; 
    flex-shrink: 0;
    cursor: pointer;
    transition: all 0.5s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 1;
    overflow: hidden;
}

.nr-img-square, .nr-img-portrait {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    object-fit: cover;
    transition: opacity 0.5s ease;
}
.nr-img-portrait { opacity: 0; }

/* -----------------------------------------
   HIỆU ỨNG HOVER
----------------------------------------- */
/* Default hover cho tất cả các ô: vươn cao thành ảnh dọc */
.nr-static-track .nr-item:hover {
    aspect-ratio: 2.4 / 4.5;
    z-index: 10;
    box-shadow: 0 10px 30px rgba(0,0,0,0.8);
}
.nr-static-track .nr-item:hover .nr-img-square { opacity: 0; }
.nr-static-track .nr-item:hover .nr-img-portrait { opacity: 1; }

/* Đẩy ô lề trái trượt vào giữa 4vw khi hover để hiển thị full ảnh dọc */
.nr-static-track .nr-item.edge-left:hover {
    transform: translateX(4vw);
}

/* Đẩy ô lề phải trượt vào giữa 4vw khi hover để hiển thị full ảnh dọc */
.nr-static-track .nr-item.edge-right:hover {
    transform: translateX(-4vw);
}

/* -----------------------------------------
   POPUP VIDEO YOUTUBE 
----------------------------------------- */
.opalus-youtube-modal {
    position: fixed; top: 0; left: 0; width: 100vw; height: 100vh;
    background-color: rgba(0,0,0,0.95);
    z-index: 99999;
    display: flex; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    transition: all 0.3s ease;
}
.opalus-youtube-modal.show-modal {
    opacity: 1; visibility: visible;
}
.yt-modal-content {
    position: relative;
    width: 90%; max-width: 1000px;
}
.yt-modal-close {
    position: absolute;
    top: -45px; right: 0;
    color: #fff; font-size: 40px;
    font-weight: bold; cursor: pointer; transition: color 0.3s;
}
.yt-modal-close:hover { color: #C89B48; }

/* -----------------------------------------
   RESPONSIVE (Mobile/Tablet chuyển về cuộn ngang cơ bản)
----------------------------------------- */
@media (max-width: 992px) {
    .nr-static-track { justify-content: flex-start; overflow-x: auto; padding: 0 5%; gap: 15px;}
    .nr-static-track .nr-item { width: clamp(200px, 35vw, 300px); }
    .nr-static-track .nr-item.edge-left:hover, 
    .nr-static-track .nr-item.edge-right:hover { transform: none; } /* Tắt hiệu ứng trượt trên mobile */
}





/* =========================================
   ĐIỀU CHỈNH FLATSOME HEADER TRONG SUỐT
========================================= */
/* Ép toàn bộ nền Header (Lớp Main và lớp BG) thành trong suốt */
#header .header-main,
#header .header-bg {
    background-color: transparent !important;
    box-shadow: none !important;
    border-bottom: none !important;
}

/* Đảm bảo khi cuộn trang, Flatsome Sticky Header vẫn có thể đổi màu mờ nếu muốn (Tùy chọn) */
#header.stuck .header-bg {
    background-color: rgba(0, 0, 0, 0.5) !important; /* Lớp đen mờ khi lướt xuống */
    backdrop-filter: blur(10px); /* Hiệu ứng kính mờ chuẩn cinematic */
}

/* =========================================
   CẬP NHẬT LẠI VỊ TRÍ NÚT MENU (VÌ ĐÃ ĐƯA VÀO HEADER)
========================================= */
.opalus-menu-trigger {
    /* Ghi đè position: fixed cũ, ép nó biến thành khối hiển thị bình thường trong Header */
    position: relative !important; 
    top: auto !important;
    right: auto !important;
    margin-right: 20px; /* Cách lề phải một chút */
    box-shadow: none !important; /* Có thể bỏ bóng đổ cho phẳng và hiện đại hơn */
    /* Các thuộc tính cũ như width: 50px, height: 50px, background tròn... vẫn được giữ nguyên */
}










/* =========================================
   INTRODUCTION PAGE (BẢN ĐỘC LẬP MỚI)
========================================= */

/* 1. NỀN & FONT CHUNG CHO TRANG INTRO */
.intro-hero-section,
.intro-normal-section {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    width: 100%;
    position: relative;
    /* Đảm bảo không bị lẹm lề ngang */
    overflow-x: hidden; 
}

/* 2. HERO VIDEO (MỞ ĐẦU) */
.intro-hero-section {
    height: 100vh; /* Giữ video full màn hình */
    display: flex;
    align-items: center;
}

/* 3. CẤU TRÚC LƯỚI & KHUNG CÁC SECTION BÊN DƯỚI */
.intro-section {
    width: 90%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 80px 0; /* Dùng padding để màu nền đen trải dài liên tục */
}

/* Hàng chia 2 cột (Tỉ lệ 1:2.5) */
.intro-row {
    display: grid;
    grid-template-columns: 1fr 2.5fr; 
    gap: 40px;
    padding: 60px 0;
}

/* Đường kẻ phân cách phía trên mỗi hàng */
.intro-row.top-border {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
}

/* 4. ĐỊNH DẠNG TEXT (TYPOGRAPHY) */
/* Tiêu đề siêu to */
.intro-huge-title {
    font-size: clamp(4rem, 8vw, 8rem);
    font-weight: 900;
    text-transform: uppercase;
    line-height: 0.9;
    letter-spacing: -2px;
    margin: 0 0 80px 0;
    color: #ffffff;
}

/* Tiêu đề cột trái */
.intro-heading {
    font-size: 2rem;
    font-weight: 900;
    color: #888888;
    text-transform: uppercase;
    margin: 0;
    line-height: 1.1;
    letter-spacing: -1px;
}

/* Nội dung văn bản cột phải */
.intro-text {
    font-size: 1.05rem;
    line-height: 1.6;
    color: #cccccc;
    margin: 0;
    font-weight: 400;
}

/* 5. KHỐI LEADERSHIP (HÌNH ẢNH CEO) */
.leadership-card {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.leader-img {
    width: 100%;
    max-height: 600px;
    object-fit: cover;
}
.leader-name {
    font-size: 1.5rem;
    font-weight: 900;
    text-transform: uppercase;
    margin: 0;
    color: #ffffff;
}
.leader-title {
    font-size: 0.85rem;
    color: #C89B48; /* Màu vàng Gold điểm nhấn */
    text-transform: uppercase;
    margin: -10px 0 10px 0;
    font-weight: 700;
    letter-spacing: 1px;
}

/* 6. KHỐI THỐNG KÊ (STATS) & HÌNH ẢNH MINH HỌA */
.intro-stats {
    display: flex;
    gap: 60px;
    margin: 40px 0;
}
.stat-item h4 {
    font-size: 2rem;
    font-weight: 900;
    margin: 0 0 5px 0;
    color: #ffffff;
}
.stat-item {
    font-size: 0.85rem;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.intro-graphic {
    width: 100%;
    height: auto;
    margin-top: 40px;
    opacity: 0.9;
}

/* =========================================
   7. RESPONSIVE CHO TABLET & MOBILE
========================================= */
@media (max-width: 992px) {
    .intro-row {
        grid-template-columns: 1fr; /* Gộp thành 1 cột xếp dọc trên Tablet/Mobile */
        gap: 20px;
        padding: 40px 0;
    }
    .intro-heading {
        font-size: 2.5rem;
    }
    .leader-img {
        max-height: 400px;
    }
}

@media (max-width: 576px) {
    .intro-huge-title { 
        margin-bottom: 40px; 
    }
    .intro-stats { 
        flex-direction: column; 
        gap: 20px; 
    }
}



/* 1. NỀN & FONT CHUNG CHO TRANG INTRO */
.intro-hero-section,
.intro-normal-section {
    background-color: #050505;
    color: #ffffff;
    font-family: 'Montserrat', sans-serif;
    
    /* Phép thuật ép Full Width tràn viền bất chấp Flatsome */
    width: 100vw !important;
    max-width: 100vw !important;
    position: relative;
    left: 50% !important;
    right: auto !important;
    transform: translateX(-50%) !important;
    
    overflow-x: hidden; 
}






/* =========================================
   NEW RELEASE - GIAO DIỆN SLIDE MOBILE (BẢN FIX LỖI & THU NHỎ CHỮ)
========================================= */
.desktop-only { display: block; }
.mobile-only { display: none !important; }

@media (max-width: 768px) {
    .desktop-only { display: none !important; }
    .mobile-only { display: block !important; }

    section#new-release {
        position: relative !important;
        display: block !important; 
        width: 100vw !important;
        height: 100vh !important; 
        max-height: 100vh !important;
        background-color: #000000 !important;
        overflow: hidden !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* 1. CHỮ NEW RELEASE: Thu nhỏ gọn lại và đẩy xuống sát thanh Nav */
    section#new-release .nr-title-mobile {
        position: absolute !important;
        top: auto !important; 
        bottom: 16vh !important; 
        left: 20px !important;
        z-index: 2 !important; 
        font-size: clamp(2rem, 10vw, 3rem) !important; /* ĐÃ THU NHỎ ĐÁNG KỂ */
        font-weight: 500 !important;
        text-transform: uppercase !important;
        line-height: 1 !important;
        color: #ffffff !important;
        letter-spacing: -1px !important;
        pointer-events: none !important; 
        margin: 0 !important;
        display: block !important;
    }

    /* 2. KHUNG TRACK: Ghi đè lệnh căn giữa của Desktop để JS đếm đúng tọa độ */
    section#new-release .nr-track-mobile {
        position: absolute !important;
        top: 0 !important; 
        left: 0 !important;
        width: 100vw !important;
        height: 100vh !important; 
        z-index: 5 !important; 
        display: flex !important;
        overflow-x: auto !important;
        justify-content: flex-start !important; /* QUAN TRỌNG: Sửa lỗi JS ở đây */
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
		overscroll-behavior-x: none !important;
        gap: 20px !important;
        padding: 0 15vw !important; 
        scrollbar-width: none !important; 
        align-items: flex-start !important; 
        flex-wrap: nowrap !important;
    }
    section#new-release .nr-track-mobile::-webkit-scrollbar { display: none !important; }

    section#new-release .nr-track-mobile .nr-item {
        position: relative !important; 
        top: 0 !important; left: 0 !important;
        flex: 0 0 70vw !important; 
        height: 100vh !important; 
        scroll-snap-align: center !important; 
        display: block !important;
        margin: 0 !important;
        opacity: 1 !important; 
        transform: none !important;
        aspect-ratio: auto !important;
        overflow: visible !important; 
    }
    
    section#new-release .nr-item-inner { 
        position: relative !important; 
        width: 100% !important; 
        height: 100% !important; 
        display: block !important; 
        overflow: visible !important; 
    }

    section#new-release .nr-item .nr-img-square { display: none !important; }
    
    section#new-release .nr-item .nr-img-portrait {
        display: block !important;
        position: absolute !important;
        top: 13vh !important; 
        left: 0 !important;
        width: 100% !important;
        height: 55vh !important; 
        object-fit: cover !important;
        border-radius: 4px !important;
        z-index: 5 !important;
        opacity: 0.5 !important; 
        transform: scale(0.9) !important;
        transition: opacity 0.5s ease, transform 0.5s ease !important;
    }

    section#new-release .nr-item.is-active .nr-img-portrait {
        opacity: 1 !important;
        transform: scale(1) !important;
    }

    /* 3. ẢNH VUÔNG NHỎ: Ép thẳng hàng với chữ New Release */
    section#new-release .nr-item .nr-img-square-mini {
        display: block !important;
        position: absolute !important;
        top: auto !important; 
        bottom: 20vh !important; /* Khớp tọa độ với chữ */
        right: -6vw !important; /* Dịch vào 1 chút tránh mép màn hình */
        width: 65px !important; /* Gọn gàng hơn */
        height: 65px !important;
        aspect-ratio: 1/1 !important;
        object-fit: cover !important;
        z-index: 10 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transform: translateX(20px) !important;
        transition: all 0.4s ease !important;
    }
    
    section#new-release .nr-item.is-active .nr-img-square-mini {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateX(0) !important;
        transition-delay: 0.1s !important; 
    }

    /* 4. THANH ĐIỀU HƯỚNG: Ép nổi lên trên cùng để nhận diện click chuột/cảm ứng */
section#new-release .nr-mobile-controls {
        position: absolute !important;
        top: auto !important;
        bottom: 10vh !important; 
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-start !important; 
        padding: 0 20px !important;
        z-index: 999 !important; 
        pointer-events: auto !important; 
    }
	
section#new-release .nr-scrollbar {
        width: 40vw !important; 
        flex: none !important;
        height: 2px !important;
        background: rgba(255,255,255,0.2) !important;
        margin-right: auto !important; /* Đẩy 2 nút mũi tên dạt sang phải */
        position: relative !important;
    }
    
section#new-release .nr-scrollbar-thumb {
        position: absolute !important;
        top: -1px !important; 
        left: 0 !important;
        height: 4px !important; 
        width: 25% !important; /* Cục trượt dài bằng 1/4 thanh ray */
        background: #ffffff !important;
        /* Chuyển sang hiệu ứng trượt (TranslateX) thay vì kéo dài (Width) */
        transition: transform 0.2s ease-out !important; 
    }
	

	/* Nâng cấp diện mạo nút Prev / Next */
    section#new-release .nr-arrows {
        display: flex !important;
        gap: 12px !important;
    }
    
section#new-release .nr-btn {
        color: #fff !important;
        font-size: 1rem !important;
        font-weight: 300 !important;
        cursor: pointer !important;
        width: 35px !important;
        height: 35px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border: 1px solid rgba(255,255,255,0.3) !important; /* Viền tròn mỏng */
        border-radius: 50% !important;
        opacity: 0.6 !important;
        transition: all 0.3s ease !important;
        pointer-events: auto !important; 
    }
	
section#new-release .nr-btn:active,
    section#new-release .nr-btn:hover { 
        opacity: 1 !important; 
        background: #fff !important; 
        color: #000 !important; /* Bấm vào thì nút sáng trắng, chữ đen */
        border-color: #fff !important;
    }
	
	
	
	
	
	/* =========================================
   FIX MOBILE SCROLL & HIỂN THỊ DOTS GLOBAL
========================================= */

	
html, body {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    touch-action: auto !important;
    overscroll-behavior: auto !important;
}	

/* 2. Mở khóa cảm ứng riêng cho các khu vực cần vuốt tay (Slide ngang, Slider Flatsome, Popup) */
.nr-track-mobile, 
.slider-wrapper,
.opalus-menu-content-wrapper, 
.yt-modal-content {
    touch-action: pan-x pan-y !important; 
}

/* 3. Ép thanh Dot luôn xuất hiện rực rỡ trên Mobile */
.opalus-global-dots {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 9999999 !important;
}
	
	
	
	
	
	
	
	/* =========================================
   1. FIX LỖI KHÔNG VUỐT ĐƯỢC TRANG TRÊN MOBILE
========================================= */
/* Bỏ chặn cảm ứng khi Fullscreen Menu đang đóng */
.opalus-fullscreen-menu:not(.is-active) {
    opacity: 0 !important;
    visibility: hidden !important;
    pointer-events: none !important; /* Mấu chốt: Cho phép ngón tay vuốt xuyên qua */
}

/* Đảm bảo toàn bộ Website luôn ưu tiên cho phép cuộn dọc */
html, body {
    overflow-x: hidden !important; 
    touch-action: pan-y !important; 
}
	
	
	
	
	/* =========================================
   FIX CLICK YOUTUBE CHO NEW RELEASE MOBILE
========================================= */
.nr-item, .nr-track-mobile .nr-item, .nr-item a {
    pointer-events: auto !important;
    cursor: pointer !important;
    z-index: 50; /* Đẩy khối ảnh nổi lên trên cùng để dễ click */
}