/* Container bao ngoài */
.mas-accordion-wrapper {
    display: flex;
    width: 100%;
    height: 90vh; 
    min-height: 700px;
    overflow: hidden;
    position: relative;
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    background-color: #1a252b; 
}

/* Từng Item Slide */
.mas-acc-item {
    position: relative;
    height: 100%;
    min-width: 240px;
    width: 240px;     
    border-right: 1px solid rgba(255,255,255,0.15);
    cursor: pointer;
    overflow: hidden;
    transition: all 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    flex-shrink: 0;
}

/* Trạng thái Active */
.mas-acc-item.active {
    width: auto;     
    flex-grow: 1;    
    cursor: default; 
}

/* === 1. SỐ NỀN (BACKGROUND NUMBER) === */
.mas-bg-number {
    position: absolute;
    bottom: -20px; left: 50%;
    transform: translateX(-50%) rotate(180deg);
    font-size: 160px; font-weight: 300; line-height: 1;
    font-family: sans-serif; letter-spacing: -5px;
    writing-mode: vertical-rl; white-space: nowrap;
    z-index: 0; opacity: 0.2;
    transition: all 0.6s ease; pointer-events: none;
}

/* Khi Active: Số nhỏ lại và bay lên góc trên trái */
.mas-acc-item.active .mas-bg-number {
    opacity: 0.8;
    top: 40px; left: 40px; bottom: auto;
    transform: none; writing-mode: horizontal-tb;
    font-size: 60px; font-weight: 700; letter-spacing: -2px;
    z-index: 20; /* Đảm bảo số nằm trên cả lớp phủ tối */
}

/* === 2. DẢI THU NHỎ (STRIP) === */
.mas-acc-strip {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 2; pointer-events: none; transition: opacity 0.3s;
}
.mas-acc-item.active .mas-acc-strip { opacity: 0; }
.mas-strip-inner {
    display: flex; flex-direction: column; justify-content: space-between; height: 100%;
    padding: 0; box-sizing: border-box;
}
.mas-strip-top { padding: 40px; display: flex; justify-content: flex-end; }
.mas-arrow { opacity: 0.6; display: block; }
.mas-strip-bottom {
    display: flex; flex-direction: column; align-items: center;
    width: 100%; padding-bottom: 180px;
}
.mas-label {
    writing-mode: vertical-rl; transform: rotate(180deg);
    text-transform: uppercase; font-size: 32px; letter-spacing: 4px;
    font-weight: 600; white-space: nowrap; opacity: 0.9;
}

/* === 3. NỘI DUNG CHÍNH (CONTENT) === */
.mas-acc-content {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    opacity: 0; visibility: hidden;
    transition: opacity 0.5s 0.3s;
    z-index: 2;
    display: flex;
}
.mas-acc-item.active .mas-acc-content { opacity: 1; visibility: visible; }

.mas-content-inner {
    display: flex; width: 100%; height: 100%; padding: 0;
    position: relative; /* Quan trọng để chứa các thành phần absolute bên trong */
}

/* [MỚI] Ảnh nền Full-size */
.mas-full-bg-image {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    z-index: 1; /* Nằm dưới cùng của content */
}
.mas-full-bg-image img {
    width: 100%; height: 100%;
    object-fit: cover; object-position: center;
    display: block;
}

/* [MỚI] Lớp phủ tối mờ (Dark Overlay) */
.mas-content-overlay {
    position: absolute; top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0,0,0,0.6); /* Màu đen mờ 60% */
    z-index: 5; /* Nằm giữa ảnh nền và chữ */
}

/* [CHỈNH SỬA] Cột Text */
.mas-text-wrap {
    flex: 1; /* Chiếm toàn bộ chiều rộng */
    /* Padding rộng hơn để nội dung thoáng trên nền ảnh lớn */
    padding: 120px 60px 60px 60px; 
    display: flex; flex-direction: column;
    justify-content: flex-end; align-items: flex-start; text-align: left;
    /* Đảm bảo text nằm trên lớp phủ */
    z-index: 10; position: relative;
}

/* Tiêu đề chính */
.mas-title {
    font-size: 36px; /* Tăng kích thước tiêu đề một chút cho ấn tượng */
    margin: 0 0 20px 0; line-height: 1.2; font-weight: 700; letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0,0,0,0.3); /* Thêm bóng nhẹ giúp dễ đọc hơn */
}

.mas-desc {
    font-size: 16px; line-height: 1.7; margin-bottom: 30px;
    max-width: 600px; /* Giới hạn chiều rộng dòng chữ để dễ đọc */
    opacity: 0.9;
}

/* Nút bấm */
.mas-btn {
    display: inline-flex; align-items: center; padding: 12px 30px; 
    border: 2px solid rgba(255,255,255,0.5); border-radius: 50px;
    text-decoration: none; font-size: 14px; font-weight: 600;
    width: fit-content; transition: all 0.3s;
    background: rgba(0,0,0,0.2); /* Thêm nền nhẹ cho nút */
}
.mas-btn:hover {
    background: #fff; color: #000 !important; border-color: #fff;
}
.icon-arrow { margin-left: 8px; }

/* Lớp phủ khi hover vào item đóng (Đổi tên để tránh trùng) */
.mas-overlay-hover {
    position: absolute; top: 0; left: 0; right: 0; bottom: 0;
    background: rgba(0,0,0,0.3); 
    transition: opacity 0.4s; pointer-events: none;
    z-index: 1; opacity: 0;
}
.mas-acc-item:hover .mas-overlay-hover { opacity: 1; }
.mas-acc-item.active .mas-overlay-hover { opacity: 0; }


/* === MOBILE RESPONSIVE === */
@media (max-width: 991px) {
    .mas-accordion-wrapper { flex-direction: column; height: auto; }
    .mas-acc-item { width: 100%; min-width: 100%; height: 80px; border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
    .mas-acc-item.active { height: 600px; } /* Chiều cao khi mở trên mobile */
    
    /* Mobile Number */
    .mas-bg-number {
        writing-mode: horizontal-tb; transform: none;
        font-size: 40px; bottom: auto; top: 50%; left: 20px;
        transform: translateY(-50%); opacity: 0.5;
    }
    .mas-acc-item.active .mas-bg-number {
        opacity: 0.8; left: 20px; top: 20px; bottom: auto;
        transform: none; writing-mode: horizontal-tb; font-size: 40px;
    }

    .mas-strip-inner { flex-direction: row; justify-content: space-between; padding: 0 25px; align-items: center; }
    .mas-strip-top { padding: 0; order: 2; }
    .mas-strip-bottom { width: auto; padding-bottom: 0; order: 1; }
    .mas-label { writing-mode: horizontal-tb; transform: none; font-size: 16px; margin-left: 60px; }
    .mas-arrow svg { width: 30px; height: 30px; transform: rotate(90deg); }

    .mas-text-wrap { 
        padding: 80px 30px 40px 30px; /* Điều chỉnh padding mobile */
        justify-content: center; align-items: flex-start; 
        text-align: left;
    }
    .mas-title { font-size: 28px; }
    .mas-desc { font-size: 15px; max-width: 100%; }
    /* Không còn .mas-img-wrap trên mobile nữa */
}