/* =================================================================== */
/* FILE CSS HOÀN CHỈNH - PHIÊN BẢN CUỐI CÙNG */
/* =================================================================== */

/*
 * 1. BIẾN MÀU SẮC, FONT, KÍCH THƯỚC CỦA TEMPLATE
 */
#my-landing-section {
    --_font-default: "Syne", sans-serif;
    --_font-accent: "Syne", sans-serif;
    --_radius-xl: 3.6rem;
    --_radius-s: 1.5rem;
    --accent--dark: #E4B8BF;
    --secondary--dark: #CEC4EF;
    --stroke-controls--dark: #4B4B51;
    --t-bright--dark: #e9e9f1;
    --t-medium--dark: #C7C6D3;
    --base--dark: #111111;
    --stroke-elements--dark: #303033;
    --accent: var(--accent--dark);
    --secondary: var(--secondary--dark);
    --stroke-controls: var(--stroke-controls--dark);
    --t-bright: var(--t-bright--dark);
    --t-medium: var(--t-medium--dark);
    --base: var(--base--dark);
    --stroke-elements: var(--stroke-elements--dark);
}

/*
 * 2. ĐỊNH DẠNG CHO HỘP CHỨA CHÍNH (NỀN GRADIENT)
 */
#my-landing-section {
    background: linear-gradient(135deg, #1c375b, #12253e);
    padding: 40px 30px;
    border-radius: 15px;
    overflow: hidden; 
    position: relative;
    padding-bottom: 100px; 
}

/*
 * 3. STYLE CHO VĂN BẢN
 */
#my-landing-section h2 {
    font-family: var(--_font-accent);
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.2;
    color: #b34172 !important; 
}

#my-landing-section p {
    font: normal 400 2rem/1.4 var(--_font-default);
    color: var(--t-medium); 
}

#my-landing-section .h2__subtitle {
    display: inline-flex;
    align-items: center;
    height: 3.4rem;
    padding: 0 1.4rem;
    border-radius: var(--_radius-s);
    border: 1px solid var(--stroke-elements);
    background-color: var(--base);
    font: normal 700 1.3rem/1 var(--_font-default);
    color: var(--t-medium); 
    margin-bottom: 1.1rem;
}

/*
 * 4. STYLE CHO BỐ CỤC VÀ CÁC THÀNH PHẦN
 */
#my-landing-section .testimonials-slider {
    position: relative;
}
#my-landing-section .testimonials-card {
    background-color: rgba(0,0,0,0.2);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: var(--_radius-xl);
    padding: 3rem;
    box-sizing: border-box; 
}

#my-landing-section .tauthor__avatar {
    width: 60px;
    min-width: 60px;
    height: 60px;
    margin-right: 2rem;
    border-radius: 2.2rem;
    overflow: hidden;
}

/* === SỬA LỖI HÌNH ẢNH BỊ PHÓNG TO === */
#my-landing-section .tauthor__avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Đảm bảo ảnh vừa vặn trong khung tròn mà không bị méo */
}

#my-landing-section .testimonial-slide {
    padding: 0 15px; /* Tăng khoảng cách giữa các slide */
}


/*
 * 5. STYLE CHO ĐIỀU HƯỚNG SLICK SLIDER (ĐÃ SỬA LẠI)
 */
#my-landing-section .slick-arrow {
    width: 5rem;
    height: 5rem;
    border-radius: 2.2rem;
    background-color: transparent;
    border: 1px solid var(--stroke-controls);
    z-index: 10;
    transition: all 0.3s;
    position: absolute;
    top: auto;
    bottom: 25px; /* <-- Đẩy nút xuống thấp hơn */
    transform: none;
    color: transparent; /* <-- Ẩn chữ "previous" và "next" */
}

#my-landing-section .slick-arrow:hover {
    transform: scale(1.05);
    border-color: var(--accent);
}

#my-landing-section .slick-arrow::before {
    font-family: "Font Awesome 6 Free";
    font-weight: 900;
    font-size: 2rem;
    color: var(--t-bright);
}

#my-landing-section .slick-prev {
    left: 30px; 
}
#my-landing-section .slick-next {
    left: 100px; /* <-- Tăng khoảng cách giữa 2 nút */
}

#my-landing-section .slick-prev::before {
    content: '\f0d9';
}
#my-landing-section .slick-next::before {
    content: '\f0da';
}

#my-landing-section .slick-dots {
    position: absolute;
    bottom: 35px; 
    left: 170px;
}

#my-landing-section .slick-dots li button {
    font-size: 0;
}
#my-landing-section .slick-dots li button::before {
    font-size: 10px;
    color: var(--stroke-controls);
    opacity: 1;
}
#my-landing-section .slick-dots li.slick-active button::before {
    color: var(--accent);
}