/*
Theme Name: GiaLinh
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 4.6
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
/* Khai báo Font Face - Ưu tiên WOFF2 */
@font-face {
    font-family: 'Electrolux-Sans';
    src: url('fonts/ElectroluxSans-Regular.woff2') format('woff2');
    font-weight: normal; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Electrolux-Sans';
    src: url('fonts/ElectroluxSans-SemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Electrolux-SansVN';
    src: url('fonts/ElectroluxSansVN-Regular.woff2') format('woff2');
    font-weight: 400; font-style: normal; font-display: swap;
}
@font-face {
    font-family: 'Electrolux-SansVN';
    src: url('fonts/ElectroluxSansVN-DemiBold.woff2') format('woff2');
    font-weight: 600; font-style: normal; font-display: swap;
}

/* Biến màu sắc hệ thống */
:root {
    --color-key: #ed0000;
    --color-red: #ec2d3f;
    --color-medium-red: #cc2c32;
    --color-black: #212529;
    --color-gray: #6c757d;
}

/* Áp dụng Font cho Flatsome */
body, #wrapper, .nav > li > a, h1, h2, h3, h4, h5, h6, .alt-font {
    font-family: 'Electrolux-SansVN', sans-serif !important;
}

/* Hiệu ứng Text Split (Cắt chữ 2-3 dòng) */
.text-split-2 {
    overflow: hidden; text-overflow: ellipsis; white-space: normal;
    -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 2; line-height: 1.4;
}
.text-split-3 {
    overflow: hidden; text-overflow: ellipsis; white-space: normal;
    -webkit-box-orient: vertical; display: -webkit-box; -webkit-line-clamp: 3; line-height: 1.4;
}

/* Hiệu ứng Morphing cho hình ảnh/icon (Vòng tròn xoay) */
.col-desc .img-video span:after {
    position: absolute; width: 121px; height: 121px; top: -20px; left: -20px;
    content: ''; background: rgba(255,255,255,0.2); border-radius: 30% 70% 70% 30%/30% 30% 70% 70%;
    animation: morphing 10s infinite; z-index: 0;
}
@keyframes morphing {
    0% { border-radius: 30% 70% 70% 30%/30% 30% 70% 70%; }
    25% { border-radius: 58% 42% 75% 25%/76% 46% 54% 24%; }
    50% { border-radius: 50% 50% 33% 67%/55% 27% 73% 45%; }
    75% { border-radius: 33% 67% 58% 42%/63% 68% 32% 37%; }
}

/* Hiệu ứng Blink (Nhấp nháy) */
.blink { animation: blink 1s linear infinite; }
@keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } }

/* Nút liên hệ cố định (Zalo, Phone) - Tối ưu cho Flatsome */
.btn-frame {
    display: block; width: 50px; height: 50px; position: fixed; right: 20px; z-index: 999; cursor: pointer;
}
.btn-zalo { bottom: 315px; }
.btn-phone { bottom: 230px; }
.btn-frame i {
    display: flex; justify-content: center; align-items: center; width: 50px; height: 50px;
    border-radius: 50%; background: #011e41; position: relative; z-index: 1;
}
h1, h2, h3, h4, h5, h6, .product-title, .widget-title, strong {
    font-weight: 600 !important;
}

/* Style Hotline Top cho theme gialinh */
.hotline-top-flatsome {
    display: flex;
    align-items: center;
    font-family: 'Electrolux-SansVN', sans-serif;
    font-weight: 600;
}

.hotline-label {
    display: flex;
    align-items: center;
    font-size: 15px;
    margin-right: 5px;
    color: #011E41;
}

.icon-call {
    width: 35px;
    height: 35px;
    margin-right: 5px;
}

.hotline-number {
    font-size: 18px;
    color: #011E41 !important;
    text-decoration: none;
}

.hotline-number:hover {
    color: #ed0000 !important; /* Đổi sang màu đỏ khi hover */
}

/* Ẩn hotline trên mobile nếu muốn giống thiết kế cũ (lg:flex) */
@media (max-width: 991px) {
    .hotline-top-flatsome {
        display: none;
    }
}

/* Style nút Đặt lịch cho theme gialinh */
.bttom-datlich-wrapper {
    margin-left: 20px; /* Tương đương ml-5 */
    display: inline-block;
    vertical-align: middle;
}

.btn-datlich-custom {
    display: block;
    overflow: hidden;
    text-align: center;
    border-radius: 5px;
    text-transform: uppercase;
    color: #ffffff !important;
    padding: 10px 20px;
    font-weight: 600;
    font-family: 'Electrolux-SansVN', sans-serif !important;
    
    /* Hiệu ứng Gradient màu xanh Electrolux */
    background: linear-gradient(180deg, rgba(1, 30, 65, 0.8) 0%, rgba(1, 30, 65, 1) 100%);
    
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    line-height: 1;
}

.btn-datlich-custom:hover {
    background: #ed0000; /* Chuyển sang màu đỏ Electrolux khi hover */
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    color: #fff !important;
}

/* Ẩn trên mobile nếu cần thiết giống thiết kế cũ */
@media (max-width: 991px) {
    .bttom-datlich-wrapper {
        margin-left: 0;
        margin-top: 10px;
    }
}

/* Tùy chỉnh Menu chính Flatsome */
.header-nav ul.nav > li > a {
    font-family: 'Electrolux-SansVN', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.8);
    padding: 16px 10px;
}

.header-nav ul.nav > li:hover > a,
.header-nav ul.nav > li.active > a {
    color: #FFF !important;
}

/* Hiệu ứng Dropdown xoay 3D giống code cũ */
.header-nav .nav > li > .nav-dropdown {
    background-color: #011e41;
    border: none;
    -webkit-transform: perspective(600px) rotateX(-90deg);
    transform: perspective(600px) rotateX(-90deg);
    -webkit-transform-origin: 0 0 0;
    transform-origin: 0 0 0;
    opacity: 0;
    visibility: hidden;
    transition: all .5s;
    display: block !important; /* Ghi đè kiểu hiển thị mặc định */
}

.header-nav .nav > li:hover > .nav-dropdown {
    -webkit-transform: perspective(600px) rotateX(0);
    transform: perspective(600px) rotateX(0);
    opacity: 1;
    visibility: visible;
}

/* Link trong Dropdown */
.nav-dropdown > li > a {
    color: rgba(255, 255, 255, 0.6) !important;
    font-size: 14px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding: 10px 15px !important;
    text-transform: capitalize;
}

.nav-dropdown > li > a:hover {
    color: #FFF !important;
    background-color: rgba(255, 255, 255, 0.05);
}

/* Tùy chỉnh khung bao ngoài Search */
.header-search-form-wrapper {
    width: 100%;
    max-width: 400px; /* Bạn có thể tăng giảm tùy ý */
}

/* Ô nhập liệu (Input) */
.header-search-form .search-field {
    background-color: #ffffff !important;
    border: 1px solid #e6e6e6 !important; /* Viền xám mảnh */
    border-right: none !important; /* Bỏ viền phải để nối liền với nút */
    border-radius: 0 !important; /* Bỏ bo góc hoàn toàn */
    height: 35px !important;
    font-size: 13px !important;
    font-family: 'Electrolux-SansVN', sans-serif !important;
    padding: 0 10px !important;
    box-shadow: none !important;
    color: #333 !important;
}

/* Hiệu ứng khi click vào ô search */
.header-search-form .search-field:focus {
    border-color: #011e41 !important;
}

/* Nút tìm kiếm (Button) */
.header-search-form .submit-button {
    background-color: #ffffff !important; /* Nền trắng giống bản gốc */
    border: 1px solid #e6e6e6 !important;
    border-left: none !important;
    border-radius: 0 !important;
    height: 35px !important;
    width: 40px !important;
    padding: 0 !important;
    margin: 0 !important;
    min-width: 40px !important;
    box-shadow: none !important;
    color: #6c757d !important; /* Màu xám --color-gray */
    transition: all 0.3s ease;
}

/* Icon Search bên trong nút */
.header-search-form .submit-button i {
    font-size: 16px !important;
}

/* Hover nút tìm kiếm */
.header-search-form .submit-button:hover {
    color: #ed0000 !important; /* Đổi màu icon sang đỏ Electrolux khi hover */
    background-color: #f8f8f8 !important;
}

/* Tùy chỉnh kết quả tìm kiếm trực tiếp (Live Search) */
.live-search-results {
    border: 1px solid #e6e6e6 !important;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1) !important;
    background: #fff;
    margin-top: 2px;
}

/* Ẩn placeholder của Flatsome khi click vào */
.header-search-form input::-webkit-input-placeholder {
    color: #ccc;
    font-style: italic;
}

/* Sidebar Menu danh mục */
.left-main .widget_nav_menu ul, 
.left-desc .left-menu {
    border: 1px solid #f3f3f3;
    padding: 15px;
    list-style: none;
}

.left-main .widget_nav_menu li {
    position: relative;
    border-bottom: 1px solid #f3f3f3;
}

.left-main .widget_nav_menu li:last-child {
    border-bottom: none;
}

.left-main .widget_nav_menu li a {
    font-size: 14px;
    color: #333;
    padding: 8px 10px 8px 15px;
    display: block;
    transition: all 0.3s;
}

/* Hiệu ứng dấu chấm (Dot) trước menu */
.left-main .widget_nav_menu li a:before {
    width: 5px;
    height: 5px;
    position: absolute;
    left: 0px;
    top: 17px;
    content: '';
    background: #dedede;
    border-radius: 50%;
}

.left-main .widget_nav_menu li a:hover {
    color: var(--color-key) !important;
    padding-left: 20px;
}

.left-main .widget_nav_menu li a:hover:before {
    background: var(--color-key);
}

/* Widget Hỗ trợ khách hàng (Support) */
.support-info p:nth-child(2) {
    font-size: 15px;
    font-weight: 700;
    color: #F00000;
}

/* Tổng quan Footer */
#footer { background-color: var(--color-main) !important; padding: 40px 0 20px; color: #fff; }

.title-footer {
    font-size: 16px; color: #fff; font-weight: 600;
    text-transform: uppercase; margin-bottom: 15px;
    border-bottom: 2px solid var(--color-red);
    display: inline-block; padding-bottom: 5px;
}

.footer-ul { list-style: none; padding: 0; }
.footer-ul li { margin-bottom: 8px; }
.footer-ul li a { color: rgba(255,255,255,0.8); font-size: 14px; transition: 0.3s; }
.footer-ul li a:hover { color: var(--color-red) !important; padding-left: 5px; }

/* Cột Dịch vụ (Chia 2 cột trên PC) */
@media (min-width: 1200px) {
    .list-dv-gialinh { display: flex; flex-wrap: wrap; }
    .list-dv-gialinh li { width: 50%; }
}

/* Mạng xã hội & Đăng ký nhận tin */
.social-footer-gialinh { display: flex; gap: 15px; list-style: none; padding: 0; }
.social-footer-gialinh img { width: 35px; height: 35px; transition: 0.4s; }
.social-footer-gialinh a:hover img { transform: scale(1.2) translateY(-5px); }

.nhantin-gialinh input { border-radius: 5px 0 0 5px; border: 1px solid #fff; background: transparent; color: #fff; }
.nhantin-gialinh button { background: var(--color-red); border-radius: 0 5px 5px 0; border: none; font-weight: 600; }

/* Đăng ký nhận tin (Newsletter) */
.newsletter-input input {
    font-size: 14px;
    text-indent: 10px;
    border: 1px solid #FFFFFF;
    background: transparent;
    color: #fff;
    height: 40px;
    width: 100%;
}

.newsletter-button input[type=submit] {
    background-color: var(--color-red);
    color: #fff;
    border: 0;
    padding: 10px 20px;
    text-transform: uppercase;
    font-weight: 600;
    cursor: pointer;
    margin-top: 10px;
    transition: background 0.3s;
}

.newsletter-button input[type=submit]:hover {
    background-color: var(--color-medium-red);
}

/* List Tags (Nếu bạn dùng để làm SEO Footer) */
.list-tags {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
}

.list-tags li a {
    color: #fff;
    background-color: var(--color-red);
    padding: 6px 15px;
    border-radius: 3px;
    display: block;
    border: 1px solid #FFFFFF;
    font-size: 13px;
    margin: 0 5px 5px 0;
}

.list-tags li a:hover {
    background-color: var(--color-medium-red);
    text-decoration: none;
}

/* Bản quyền & Powered by (Dòng dưới cùng) */
.absolute-footer, #footer-powered {
    background-color: #011e41;
    padding: 15px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    font-size: 13px;
}