/*
|--------------------------------------------------------------------------
| TLMS MOBILE BRIGHT
| Điện thoại: nền trắng, chữ đen, điểm nhấn vàng
|--------------------------------------------------------------------------
*/

html {
    color-scheme: light;
}

@media (max-width: 768px) {
    /*
    |--------------------------------------------------------------------------
    | Chống trình duyệt tự làm tối
    |--------------------------------------------------------------------------
    */

    html,
    body {
        background: #ffffff !important;
        background-color: #ffffff !important;
        color: #111111 !important;
        color-scheme: light !important;
        filter: none !important;
    }

    body {
        min-height: 100vh;
    }

    body::before,
    body::after {
        display: none !important;
        content: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Toàn bộ khung trang chủ
    |--------------------------------------------------------------------------
    */

    main,
    body > main,
    .home-page,
    .home-main,
    .home-shell,
    .home-wrapper,
    .homepage,
    .page-wrapper,
    .page-shell,
    .site-wrapper,
    .site-main {
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Header trắng hoàn toàn
    |--------------------------------------------------------------------------
    */

    #tlmsGlobalHeader,
    .storefront-header,
    header.storefront-header {
        border-bottom: 1px solid #eadba7 !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        color: #111111 !important;
        box-shadow:
            0 4px 14px rgba(15, 23, 42, .07) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    #tlmsGlobalHeader .tlms-global-header-inner,
    .storefront-header .container,
    .storefront-header .navbar {
        background: #ffffff !important;
        background-image: none !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Khung thương hiệu: bỏ nền đen
    |--------------------------------------------------------------------------
    */

    #tlmsGlobalHeader .tlms-global-brand,
    .storefront-header .brand {
        display: flex !important;
        align-items: center !important;
        min-width: 0 !important;
        max-width: calc(100% - 52px) !important;
        gap: 7px !important;
        padding: 5px 9px 5px 5px !important;
        border: 1px solid #dfbd50 !important;
        border-radius: 11px !important;
        background:
            linear-gradient(
                145deg,
                #ffffff,
                #fffdf4
            ) !important;
        color: #111111 !important;
        box-shadow:
            0 4px 11px rgba(15, 23, 42, .08) !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Logo TL
    |--------------------------------------------------------------------------
    */

    #tlmsGlobalHeader .tlms-global-logo,
    .storefront-header .brand-mark {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex: 0 0 35px !important;
        width: 35px !important;
        height: 35px !important;
        min-width: 35px !important;
        border: 2px solid #d5a315 !important;
        border-radius: 10px !important;
        background:
            linear-gradient(
                145deg,
                #ffffff,
                #fff3bd
            ) !important;
        color: #17120a !important;
        font-size: 14px !important;
        font-weight: 950 !important;
        text-shadow: none !important;
        box-shadow:
            inset 0 0 0 2px rgba(238, 184, 22, .12),
            0 3px 8px rgba(15, 23, 42, .10) !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Chữ thương hiệu
    |--------------------------------------------------------------------------
    */

    #tlmsGlobalHeader .tlms-global-brand-text,
    .storefront-header .brand-text {
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
        min-width: 0 !important;
        gap: 2px !important;
        line-height: 1.1 !important;
    }

    #tlmsGlobalHeader .tlms-global-brand-text strong,
    .storefront-header .brand-name {
        display: block !important;
        overflow: hidden !important;
        max-width: 155px !important;
        margin: 0 !important;
        color: #111111 !important;
        font-size: 10.5px !important;
        font-weight: 950 !important;
        line-height: 1.18 !important;
        letter-spacing: .45px !important;
        text-transform: uppercase !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    #tlmsGlobalHeader .tlms-global-brand-text strong em,
    #tlmsGlobalHeader .tlms-global-brand-text strong span,
    .storefront-header .brand-name span,
    .storefront-header .brand-name em {
        color: #9a6f00 !important;
        font-style: normal !important;
        text-shadow: none !important;
    }

    #tlmsGlobalHeader .tlms-global-brand-text small,
    .storefront-header .brand-subtitle {
        display: block !important;
        overflow: hidden !important;
        max-width: 155px !important;
        margin: 0 !important;
        color: #765a0b !important;
        font-size: 6.5px !important;
        font-weight: 850 !important;
        line-height: 1.25 !important;
        letter-spacing: .35px !important;
        text-transform: uppercase !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Nút menu
    |--------------------------------------------------------------------------
    */

    #tlmsGlobalHeader .tlms-global-menu-button,
    .storefront-header .mobile-menu-button {
        flex: 0 0 40px !important;
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        border: 1px solid #bb8500 !important;
        border-radius: 10px !important;
        background:
            linear-gradient(
                145deg,
                #ffdc63,
                #dda311
            ) !important;
        color: #17120a !important;
        font-size: 19px !important;
        font-weight: 950 !important;
        box-shadow:
            0 4px 10px rgba(133, 92, 0, .17) !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Phần chào mừng và ảnh minh họa
    |--------------------------------------------------------------------------
    */

    .home-hero,
    .hero,
    .hero-section,
    .home-hero-section,
    .hero-wrapper,
    .hero-container,
    .hero-visual,
    .home-visual,
    .phone-visual,
    .phone-showcase {
        background-color: #ffffff !important;
        filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
    }

    .home-hero,
    .hero,
    .hero-section,
    .home-hero-section {
        background-image:
            radial-gradient(
                circle at 90% 10%,
                rgba(232, 185, 39, .09),
                transparent 30%
            ) !important;
    }

    .home-hero::before,
    .home-hero::after,
    .hero::before,
    .hero::after,
    .hero-section::before,
    .hero-section::after {
        opacity: .18 !important;
        filter: none !important;
        mix-blend-mode: normal !important;
    }

    .home-hero img,
    .hero img,
    .hero-visual img,
    .home-visual img,
    .phone-visual img,
    .phone-showcase img,
    main img {
        filter: none !important;
        opacity: 1 !important;
        mix-blend-mode: normal !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Nội dung và tiêu đề
    |--------------------------------------------------------------------------
    */

    .home-hero h1,
    .hero h1,
    .hero-title,
    .home-hero-title,
    .section-title,
    .lookup-title,
    .warranty-title {
        color: #111827 !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    .home-hero h1 span,
    .hero h1 span,
    .hero-title span,
    .home-hero-title span {
        color: #a87500 !important;
        text-shadow: none !important;
    }

    .home-hero p,
    .hero p,
    .hero-description,
    .home-hero-description,
    .section-description,
    .lookup-description {
        color: #374151 !important;
        text-shadow: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Các khu tra cứu và bảo hành
    |--------------------------------------------------------------------------
    */

    #kiem-tra-imei,
    .phone-imei-section,
    .imei-section,
    .imei-lookup-section,
    .lookup-section,
    .warranty-section,
    .device-lookup-section,
    .repair-lookup-section {
        border-color: #eadfbf !important;
        background: #ffffff !important;
        background-color: #ffffff !important;
        background-image: none !important;
        filter: none !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Card, form và các nút chức năng
    |--------------------------------------------------------------------------
    */

    .home-action,
    .home-action-card,
    .feature-card,
    .lookup-card,
    .warranty-card,
    .imei-card,
    .search-card,
    .customer-card,
    .quick-action,
    .quick-action-card,
    form {
        background-color: #ffffff !important;
        filter: none !important;
        opacity: 1 !important;
    }

    .home-action,
    .home-action-card,
    .feature-card,
    .lookup-card,
    .warranty-card,
    .imei-card,
    .search-card,
    .quick-action,
    .quick-action-card {
        border-color: #e5d5a0 !important;
        box-shadow:
            0 5px 14px rgba(15, 23, 42, .06) !important;
    }

    input,
    select,
    textarea {
        border-color: #d9c88e !important;
        background: #ffffff !important;
        color: #111827 !important;
        filter: none !important;
        opacity: 1 !important;
    }

    input::placeholder,
    textarea::placeholder {
        color: #7b8492 !important;
        opacity: 1 !important;
    }

    /*
    |--------------------------------------------------------------------------
    | Không cho lớp phủ che tối trang
    |--------------------------------------------------------------------------
    */

    .overlay,
    .dark-overlay,
    .page-overlay,
    .hero-overlay,
    .background-overlay,
    .mobile-overlay {
        background: transparent !important;
        filter: none !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }
}

@media (max-width: 374px) {
    #tlmsGlobalHeader .tlms-global-brand-text strong,
    .storefront-header .brand-name {
        max-width: 133px !important;
        font-size: 9.5px !important;
    }

    #tlmsGlobalHeader .tlms-global-brand-text small,
    .storefront-header .brand-subtitle {
        max-width: 133px !important;
        font-size: 6px !important;
    }
}