/* --- Cấu hình chung cho Section --- */
.brand-intro-section {
    width: 100%;
    padding: 80px 0;
    background: radial-gradient(circle at center, #4a0e0e 0%, #2b0606 50%, #000000 100%);
    color: #EBC58E; /* Màu vàng kim loại nhạt */
    overflow: hidden;
    position: relative;
}

.brand-intro-container {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 15px;
}

/* --- Cột Layout --- */
.brand-col {
    flex: 1;
    text-align: center;
}

/* --- Typography & Elements --- */

/* Text 2 bên (Trái/Phải) */
.brand-text-side {
    font-size: 20px;
    line-height: 1.6;
    font-weight: 150;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #90785E; /* Vàng tối hơn chút */
    opacity: 0.8;
}

/* Icon Vương miện */
.brand-crown img {
    width: 40px;
    height: 40px;
    margin-bottom: 20px;
}

/* Text "PHA LÊ CAO CẤP..." */
.brand-main-title {
    font-size: 38px;
    font-weight: 100;
    margin: 0 0 20px 0;
    line-height: 1.3;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: #EBC58E; /* Vàng sáng */
}

/* Đường kẻ ngang */
.brand-divider {
    width: 0; /* Ban đầu ẩn */
    height: 1px;
    background-color: #a88d5e;
    margin: 20px auto;
    transition: width 1s ease-out;
}

/* Text Social */
.brand-social {
    font-size: 14px;
    font-weight: 100;
    font-style: italic;
    opacity: 0.7;
    margin-top: 10px;
}

/* --- Responsive --- */
@media (max-width: 992px) {
    .brand-main-title {
        font-size: 28px;
    }
    .brand-text-side {
        font-size: 14px;
    }
}

@media (max-width: 768px) {
    .brand-intro-container {
        flex-direction: column;
        gap: 40px;
    }
    
    .brand-col-left, .brand-col-right {
        order: 2; /* Đẩy text phụ xuống dưới trên mobile */
    }
    .brand-col-center {
        order: 1; /* Đưa tiêu đề lên đầu */
    }
}

/* --- Animation Classes (Chờ JS kích hoạt) --- */

/* Trạng thái ẩn ban đầu */
.hidden-element {
    opacity: 0;
    transition: all 1s ease-out;
    will-change: transform, opacity;
}

/* Class kích hoạt (JS sẽ thêm class này) */
.brand-intro-section.is-visible .hidden-element {
    opacity: 1;
    transform: translate(0, 0);
}

/* Hiệu ứng bay từ Trái vào */
.from-left {
    transform: translateX(-50px);
}

/* Hiệu ứng bay từ Phải vào */
.from-right {
    transform: translateX(50px);
}

/* Hiệu ứng bay từ Dưới lên */
.from-bottom {
    transform: translateY(30px);
}

/* Hiệu ứng Fade in đơn thuần */
.fade-in {
    transform: scale(0.8);
}

.brand-intro-section.is-visible .fade-in {
    transform: scale(1);
}

/* Hiệu ứng gạch ngang giãn ra */
.brand-intro-section.is-visible .expand-width {
    width: 150px; /* Độ dài đường kẻ khi hiện ra */
}

/* Độ trễ cho từng phần tử (Stagger effect) */
.delay-1 { transition-delay: 0.2s; }
.delay-2 { transition-delay: 0.4s; }
.delay-3 { transition-delay: 0.6s; }
.delay-4 { transition-delay: 0.8s; }