/*
Theme Name: Hello Elementor Child
Theme URI: https://hanoimice.com
Description: Child Theme cho Hello Elementor
Author: Hoang Le Manh
Author URI: https://hanoimice.com
Template: hello-elementor
Version: 1.0.0
*/

/* --- FIX LỖI 1: NAVBAR ACTIVE STATE (Màu đỏ đô và Gạch chân) --- */
.nav-link-qoko.active {
    color: #8b0000 !important; /* Màu Đỏ Đô */
    border-bottom: 2px solid #8b0000 !important; /* Gạch chân */
}
/* --- FIX 1.1: NAVBAR HOVER STATE (Áp dụng cho tất cả các mục khi di chuột) --- */
.nav-link-qoko:hover {
    color: #8b0000 !important;
    /* Màu Đỏ Đô */
    border-bottom: 2px solid #8b0000 !important;
    /* Gạch chân */
}

/* Thêm màu mặc định cho Navbar để đảm bảo nó hiển thị trên nền sáng */
.nav-link-qoko {
    color: #333333; /* Màu chữ mặc định (Xám đen) */
}


/* --- FIX LỖI 2: KHÔI PHỤC THIẾT KẾ CARD BO TRÒN ĐỘC ĐÁO (ARC/ARCH DESIGN) --- */

/* 1. Thiết lập cho thẻ bao ngoài (Card chính - <a class="finger-top-card">) */
.finger-top-card {
    /* Quan trọng: Buộc hình dạng vòng cung phải được áp dụng */
    border-radius: 50% 50% 10px 10px / 30% 30% 10px 10px !important; 
    overflow: hidden !important; 
    height: 100% !important; 
    /* Đảm bảo thẻ con nằm đúng vị trí để tạo hiệu ứng bo tròn */
    display: flex !important;
    flex-direction: column !important;
}

/* 2. Đảm bảo phần ảnh có chiều cao cố định và lấp đầy khung */
/* (Thẻ div chứa ảnh: <div class="destination-card-image-wrapper">) */
.destination-card-image-wrapper {
    /* Đảm bảo chiều cao phù hợp */
    min-height: 250px !important; 
    height: 250px !important; 
    /* Buộc ảnh phải nằm ở đỉnh thẻ */
    flex-shrink: 0 !important; 
}

/* 3. Bắt buộc ảnh lấp đầy khung */
.destination-card-image-wrapper img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; 
}

/* 4. Đảm bảo phần nội dung (p-5...) nằm bên dưới ảnh */
.finger-top-card > div:nth-child(2) {
    /* Đảm bảo phần nội dung chiếm không gian còn lại (phần màu trắng) */
    flex-grow: 1 !important;
}

/* --- FIX LỖI 3: KHÔI PHỤC CUỘN NGANG MARQUEE --- */

.marquee-container {
    overflow: hidden; /* Ẩn các phần tử nằm ngoài khung nhìn */
    width: 100%;
    white-space: nowrap; /* Ngăn các mục con xuống dòng */
    position: relative;
    padding: 20px 0;
}

.marquee-track {
    display: inline-block;
    animation: marquee 30s linear infinite; /* Điều chỉnh thời gian (30s) để tăng/giảm tốc độ */
    padding-right: 20px; /* Thêm khoảng đệm cho mục cuối cùng */
}

.marquee-track:hover {
    animation-play-state: paused; /* Dừng cuộn khi di chuột (yêu cầu của bạn) */
}

.marquee-track > div {
    display: inline-block; /* Đảm bảo các mục con nằm trên cùng một hàng */
}

/* Định nghĩa hiệu ứng chuyển động Marquee */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%); /* Cuộn hết một nửa nội dung để lặp lại liền mạch */
    }
}
/* --- QUY TẮC FONT CHỮ CHUNG --- */

/* Tiêu đề chính (H1, H2, H3, H4) */
h1, h2, h3, h4 {
    font-family: 'Playfair Display', serif !important;
}

/* Nội dung, đoạn văn (P), List */
body, p, li, a, span {
    font-family: 'Montserrat', sans-serif !important;
}
/* --- FIX LỖI 4: ĐỊNH NGHĨA VÀ KHÔI PHỤC MÀU SẮC SOCIAL CTA --- */

/* Màu nền của các nút social */
.bg-facebook {
    background-color: #3b5998 !important;
}

.bg-whatsapp {
    background-color: #25d366 !important;
}

.bg-zalo {
    background-color: #0084ff !important;
}

.bg-call {
    /* Đề xuất màu đỏ đô/màu chủ đạo của bạn */
    background-color: #8b0000 !important;
}

/* Đảm bảo icon Facebook, WhatsApp, Call (Feather Icons) có màu trắng */
.social-icon-qoko svg {
    color: white !important;
}

/* Khắc phục Icon Zalo (SVG) */
.social-icon-qoko img {
    /* Đảm bảo nền của nút Zalo là màu xanh và bỏ qua bất kỳ quy tắc filter nào làm trắng hình ảnh nếu nền đã được khôi phục */
    filter: none !important;
    /* Nếu bạn muốn logo Zalo là trắng trên nền xanh, hãy giữ filter: brightness(0) invert(1); và đảm bảo nền xanh đã được tải */
}
/* --- FIX LỖI 5: KHÔI PHỤC ICON TRONG KHỐI WHY US (Màu nền Đỏ Đô, Icon Trắng) --- */

/* 1. Thiết lập màu nền cho vòng tròn icon */
/* Giả sử cấu trúc: <div class="... icon-20-years"> */
.hnm-why-us .grid>div>div:first-child,
.icon-20-years {
    background-color: #8b0000 !important;
    /* MÀU ĐỎ ĐÔ (Màu chủ đạo) */
}

/* 2. Thiết lập màu cho Icon Font Awesome (thẻ i) */
.hnm-why-us .grid i.fas {
    color: #ffffff !important;
    /* MÀU TRẮNG cho Icon */

    /* Các quy tắc bắt buộc để Font Awesome hiển thị */
    display: inline-block !important;
    visibility: visible !important;
    font-family: 'Font Awesome 5 Free', 'Font Awesome 5 Solid' !important;
    font-weight: 900 !important;
    font-size: 1.5rem;
    /* Điều chỉnh kích thước nếu cần */
}
/* --- FIX LỖI 7 (FINAL): KHẮC PHỤC ẢNH MARQUEE BỊ MÉO THÀNH HÌNH BẦU DỤC --- */

/* Tên class của phần tử chứa ảnh: div class="flex-shrink-0 w-32 text-center mx-4" */
.marquee-track .flex-shrink-0 {
    /* Buộc kích thước tuyệt đối để đảm bảo tỷ lệ 1:1 */
    /* w-32 trong Tailwind tương đương 8rem hoặc 128px */
    width: 128px !important; 
    height: 128px !important; 
    
    /* Đảm bảo hình tròn trên wrapper */
    border-radius: 50% !important; 
    overflow: hidden !important;
}

/* Tên class của thẻ ảnh: img class="w-32 h-32 object-cover rounded-full shadow-md border-4 border-white" */
.marquee-track img {
    /* Buộc ảnh lấp đầy 100% không gian vuông của wrapper */
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important; /* Đảm bảo ảnh không bị biến dạng khi cắt */
    
    /* Quan trọng nhất: Buộc hình tròn phải được áp dụng */
    border-radius: 50% !important; 
}
/* --- FIX LỖI 8: KHẮC PHỤC FONT CHỮ CỦA SPAN TRONG TIÊU ĐỀ H1 (Áp dụng cho tất cả tiêu đề h1) --- */
h1 span {
    font-family: 'Playfair Display', serif !important;
}