/*
Theme Name: Flatsome Child
Theme URI: https://tongkhogiasi.vn/
Description: Child theme for Flatsome with a fixed mobile contact bar.
Author: Tong Kho Giasi
Template: flatsome
Version: 1.0.1
Text Domain: flatsome-child
*/

/* =========================================================
   MOBILE FIXED CONTACT BAR
   ZALO | GỌI NGAY | FACEBOOK | MESSENGER
   Icon nằm trên - chữ nằm dưới
========================================================= */

.mobile-contact-bar {
    display: none;
}

/* Chỉ hiển thị trên mobile / tablet nhỏ */
@media (max-width: 849px) {

    :root {
        --mobile-contact-bar-height: 92px;
        --mobile-contact-safe-area: env(safe-area-inset-bottom, 0px);
    }

    .mobile-contact-bar {
        position: fixed;
        z-index: 999999;
        left: 0;
        right: 0;
        bottom: 0;

        display: flex;
        align-items: stretch;
        justify-content: stretch;

        width: 100%;
        height: calc(
            var(--mobile-contact-bar-height) +
            var(--mobile-contact-safe-area)
        );

        margin: 0;
        padding: 0 0 var(--mobile-contact-safe-area);
        box-sizing: border-box;

        background: linear-gradient(
            180deg,
            rgba(255, 255, 255, 0.98) 0%,
            rgba(243, 247, 244, 0.98) 100%
        );

        border-top: 1px solid rgba(20, 76, 46, 0.14);

        box-shadow:
            0 -8px 26px rgba(15, 53, 34, 0.14),
            0 -2px 8px rgba(0, 0, 0, 0.05);

        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    /* =====================================================
       TỪNG NÚT
    ===================================================== */

    .mobile-contact-bar .mobile-contact-item {
        position: relative;

        flex: 1 1 25%;
        width: 25%;
        min-width: 0;
        height: var(--mobile-contact-bar-height);

        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;

        gap: 6px;
        margin: 0;
        padding: 8px 3px;
        box-sizing: border-box;

        overflow: hidden;

        text-align: center;
        text-decoration: none;

        border: 0;
        border-right: 1px solid rgba(20, 76, 46, 0.10);

        -webkit-tap-highlight-color: transparent;

        transition:
            transform 0.18s ease,
            filter 0.18s ease;
    }

    .mobile-contact-bar .mobile-contact-item:last-child {
        border-right: 0;
    }

    /* =====================================================
       NỀN RIÊNG
    ===================================================== */

    .mobile-contact-bar .mobile-contact-zalo {
        background:
            radial-gradient(circle at 50% 0%, rgba(22, 135, 211, 0.09), transparent 58%),
            linear-gradient(180deg, #f8fcff 0%, #edf7ff 100%);
    }

    .mobile-contact-bar .mobile-contact-call {
        background:
            radial-gradient(circle at 50% 0%, rgba(45, 138, 74, 0.10), transparent 58%),
            linear-gradient(180deg, #fbfdfb 0%, #eef7f1 100%);
    }

    .mobile-contact-bar .mobile-contact-facebook {
        background:
            radial-gradient(circle at 50% 0%, rgba(66, 103, 178, 0.10), transparent 58%),
            linear-gradient(180deg, #fafbff 0%, #eef2fb 100%);
    }

    .mobile-contact-bar .mobile-contact-messenger {
        background:
            radial-gradient(circle at 50% 0%, rgba(123, 77, 255, 0.10), transparent 58%),
            linear-gradient(135deg, #faf8ff 0%, #eef5ff 55%, #faf5ff 100%);
    }

    /* Dải nhấn phía trên */
    .mobile-contact-bar .mobile-contact-item::before {
        content: "";

        position: absolute;
        top: 0;
        left: 12%;
        right: 12%;

        height: 3px;
        border-radius: 0 0 10px 10px;

        opacity: 0.85;
    }

    .mobile-contact-bar .mobile-contact-zalo::before {
        background: #1687d3;
    }

    .mobile-contact-bar .mobile-contact-call::before {
        background: #2d8a4a;
    }

    .mobile-contact-bar .mobile-contact-facebook::before {
        background: #4267b2;
    }

    .mobile-contact-bar .mobile-contact-messenger::before {
        background: linear-gradient(90deg, #7b4dff, #0084ff, #d94cff);
    }

    /* =====================================================
       ICON
       Khóa kích thước để Flatsome không phóng ảnh
    ===================================================== */

    .mobile-contact-bar .mobile-contact-item img {
        display: block;

        width: 44px !important;
        height: 44px !important;

        min-width: 44px !important;
        min-height: 44px !important;

        max-width: 44px !important;
        max-height: 44px !important;

        margin: 0 !important;
        padding: 0 !important;

        object-fit: contain;
        object-position: center;

        position: static !important;
        float: none !important;

        border: 0 !important;
        border-radius: 0 !important;
        background: transparent !important;

        box-shadow: none !important;

        transform: none;
        filter: none;

        transition: transform 0.18s ease;
    }

    /* Không để CSS chung của Flatsome can thiệp */
    .mobile-contact-bar figure,
    .mobile-contact-bar .img,
    .mobile-contact-bar .image-cover {
        width: auto !important;
        height: auto !important;
        min-height: 0 !important;

        margin: 0 !important;
        padding: 0 !important;

        position: static !important;
        background: transparent !important;
    }

    /* =====================================================
       CHỮ
    ===================================================== */

    .mobile-contact-bar .mobile-contact-item span {
        display: block;

        width: 100%;
        margin: 0;
        padding: 0;

        color: #24382c;

        font-family: inherit;
        font-size: 11.5px;
        font-weight: 700;
        line-height: 16px;
        letter-spacing: 0;

        text-align: center;
        white-space: nowrap;

        text-shadow: none;
    }

    /* =====================================================
       TƯƠNG TÁC
    ===================================================== */

    .mobile-contact-bar .mobile-contact-item:active {
        transform: scale(0.97);
        filter: brightness(0.97);
    }

    @media (hover: hover) {
        .mobile-contact-bar .mobile-contact-item:hover img {
            transform: translateY(-2px);
        }
    }

    /* =====================================================
       CHỪA KHOẢNG TRỐNG ĐỂ THANH KHÔNG CHE NỘI DUNG
    ===================================================== */

    body {
        padding-bottom: calc(
            var(--mobile-contact-bar-height) +
            var(--mobile-contact-safe-area) +
            12px
        );
    }
}

/* =========================================================
   MÀN HÌNH NHỎ
========================================================= */

@media (max-width: 480px) {

    :root {
        --mobile-contact-bar-height: 88px;
    }

    .mobile-contact-bar .mobile-contact-item {
        gap: 5px;
        padding: 7px 2px;
    }

    .mobile-contact-bar .mobile-contact-item img {
        width: 42px !important;
        height: 42px !important;
        min-width: 42px !important;
        min-height: 42px !important;
        max-width: 42px !important;
        max-height: 42px !important;
    }

    .mobile-contact-bar .mobile-contact-item span {
        font-size: 11px;
        line-height: 15px;
    }
}

@media (max-width: 360px) {

    :root {
        --mobile-contact-bar-height: 82px;
    }

    .mobile-contact-bar .mobile-contact-item img {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        max-width: 38px !important;
        max-height: 38px !important;
    }

    .mobile-contact-bar .mobile-contact-item span {
        font-size: 10px;
        line-height: 14px;
    }
}

/* =========================================================
   MOBILE TOP HEADER – TONGKHOGIASI.VN
   Giữ nguyên chức năng của Flatsome, chỉ làm lại giao diện.
   Màu nhận diện: xanh navy + cam.
========================================================= */

@media (max-width: 849px) {

    :root {
        --tkg-navy: #17365d;
        --tkg-navy-dark: #102944;
        --tkg-orange: #f26a21;
        --tkg-orange-dark: #d95614;
        --tkg-text: #1f2f43;
        --tkg-line: rgba(23, 54, 93, 0.10);
    }

    /* -----------------------------------------------------
       1. THANH THÔNG BÁO TRÊN CÙNG
    ----------------------------------------------------- */

    #top-bar,
    .header-top,
    .header-top .container,
    .header-top .flex-row,
    .header-top .flex-col {
        background-color: var(--tkg-navy-dark);
    }

    .header-top {
        min-height: 34px;
        color: #fff;
        border: 0;
    }

    .header-top .container {
        padding-left: 14px;
        padding-right: 14px;
    }

    .header-top .nav,
    .header-top .nav > li,
    .header-top .nav > li > a,
    .header-top a,
    .header-top span,
    .header-top p {
        color: rgba(255, 255, 255, 0.92);
    }

    .header-top .nav > li > a {
        min-height: 34px;
        font-size: 10px;
        font-weight: 600;
        letter-spacing: 0.1px;
    }

    /* Trên mobile chỉ giữ thông tin chính, tránh header bị rối */
    .header-top .nav-right {
        display: none;
    }

    /* -----------------------------------------------------
       2. HEADER CHÍNH
       Menu trái | Logo giữa | Giỏ hàng phải
    ----------------------------------------------------- */

    .header-main {
        min-height: 78px;
        background: #fff;
        border-bottom: 1px solid var(--tkg-line);
        box-shadow: 0 4px 18px rgba(16, 41, 68, 0.06);
    }

    .header-main .header-inner {
        min-height: 78px;
        padding-left: 14px;
        padding-right: 14px;
    }

    .header-main .flex-row {
        align-items: center;
    }

    /* Logo */
    .header-main .header-logo {
        max-width: 205px;
        padding-left: 8px;
        padding-right: 8px;
    }

    .header-main .header-logo a,
    .header-main .header-logo img {
        display: block;
    }

    .header-main .header-logo img {
        width: auto;
        max-width: 100%;
        max-height: 56px;
        object-fit: contain;
    }

    /* Các icon của Flatsome */
    .header-main .nav > li > a,
    .header-main .nav > li > a i,
    .header-main .nav > li > a .icon-menu,
    .header-main .nav > li > a .icon-shopping-bag,
    .header-main .nav > li > a .icon-search {
        color: var(--tkg-navy);
    }

    .header-main .nav > li > a {
        min-height: 64px;
        padding-left: 9px;
        padding-right: 9px;
    }

    .header-main .nav > li > a i {
        font-size: 27px;
    }

    /* Menu hamburger */
    .header-main .menu-item a {
        color: var(--tkg-navy);
    }

    /* Không hiển thị chữ cạnh icon trên mobile */
    .header-main .mobile-nav > li > a .menu-title {
        display: none;
    }

    /* Badge số lượng giỏ */
    .header-main .cart-icon strong,
    .header-main .cart-icon .cart-icon strong,
    .header-main .cart-icon .cart-icon-label {
        color: #fff;
    }

    .header-main .cart-icon strong {
        background: var(--tkg-orange);
        border-color: #fff;
        box-shadow: 0 2px 8px rgba(242, 106, 33, 0.28);
    }

    /* -----------------------------------------------------
       3. KHU VỰC TÌM KIẾM MOBILE
    ----------------------------------------------------- */

    .header-bottom {
        background: #fff;
        border-bottom: 1px solid var(--tkg-line);
    }

    .header-bottom .header-inner {
        min-height: 76px;
        padding: 11px 14px 13px;
    }

    .header-bottom .flex-row {
        align-items: center;
    }

    .header-bottom .searchform-wrapper,
    .header-bottom .search-form,
    .header-bottom form.searchform,
    .header-bottom .ux-search-box {
        width: 100%;
        margin: 0;
    }

    .header-bottom .searchform,
    .header-bottom .search-form,
    .header-bottom .searchform-wrapper form {
        position: relative;
        display: flex;
        width: 100%;
        min-height: 50px;
        margin: 0;
    }

    .header-bottom input[type="search"],
    .header-bottom input.search-field {
        height: 50px !important;
        min-height: 50px !important;
        padding: 0 56px 0 17px !important;
        margin: 0 !important;
        border: 1px solid rgba(23, 54, 93, 0.18) !important;
        border-radius: 12px !important;
        background: #f8fafc !important;
        color: var(--tkg-text) !important;
        box-shadow: inset 0 1px 2px rgba(16, 41, 68, 0.03) !important;
        font-size: 14px !important;
    }

    .header-bottom input[type="search"]::placeholder,
    .header-bottom input.search-field::placeholder {
        color: #8792a1;
        opacity: 1;
    }

    .header-bottom .search-submit,
    .header-bottom button[type="submit"] {
        width: 50px !important;
        min-width: 50px !important;
        height: 50px !important;
        margin: 0 0 0 -50px !important;
        padding: 0 !important;
        border: 0 !important;
        border-radius: 0 12px 12px 0 !important;
        background: linear-gradient(135deg, var(--tkg-orange) 0%, #ff8a35 100%) !important;
        color: #fff !important;
        box-shadow: none !important;
        position: relative;
        z-index: 2;
    }

    .header-bottom .search-submit:hover,
    .header-bottom button[type="submit"]:hover {
        background: var(--tkg-orange-dark) !important;
    }

    .header-bottom .search-submit i,
    .header-bottom button[type="submit"] i {
        color: #fff !important;
        font-size: 18px;
    }

    /* -----------------------------------------------------
       4. NẾU HEADER SEARCH NẰM TRONG HEADER-MAIN
       Vẫn áp dụng cùng phong cách.
    ----------------------------------------------------- */

    .header-main .searchform-wrapper .searchform,
    .header-main .searchform-wrapper form.searchform {
        width: 100%;
    }

    /* -----------------------------------------------------
       5. HEADER STICKY
    ----------------------------------------------------- */

    .stuck .header-main,
    .has-sticky .header-main {
        background: rgba(255, 255, 255, 0.98);
        -webkit-backdrop-filter: blur(12px);
        backdrop-filter: blur(12px);
    }

    /* -----------------------------------------------------
       6. CHỐNG TRÀN Ở MÀN HÌNH NHỎ
    ----------------------------------------------------- */

    @media (max-width: 480px) {

        .header-main,
        .header-main .header-inner {
            min-height: 70px;
        }

        .header-main .header-logo {
            max-width: 180px;
        }

        .header-main .header-logo img {
            max-height: 50px;
        }

        .header-main .nav > li > a {
            padding-left: 7px;
            padding-right: 7px;
        }

        .header-bottom .header-inner {
            min-height: 70px;
            padding: 9px 12px 11px;
        }
    }
}