/* |-------------------------------------------------------------------------- | TLMS BRAND CONTRAST FIX | Giữ nhận diện đen - vàng nhưng tăng độ tương phản chữ |-------------------------------------------------------------------------- */ /* Khung thương hiệu của header mới và header cũ */ #tlmsGlobalHeader .tlms-global-brand, .storefront-header .brand { display: flex !important; align-items: center !important; flex: 0 1 auto !important; min-width: 0 !important; max-width: calc(100% - 62px) !important; gap: 9px !important; padding: 6px 12px 6px 6px !important; border: 1px solid #d9aa27 !important; border-radius: 12px !important; background: linear-gradient( 135deg, #050505 0%, #17130b 58%, #050505 100% ) !important; color: #ffffff !important; text-decoration: none !important; box-shadow: 0 5px 14px rgba(0, 0, 0, .20), inset 0 0 0 1px rgba(255, 213, 77, .06) !important; box-sizing: border-box !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 38px !important; width: 38px !important; height: 38px !important; min-width: 38px !important; border: 2px solid #f0bd25 !important; border-radius: 11px !important; background: linear-gradient( 145deg, #ffffff, #fff5cc ) !important; color: #17120a !important; font-size: 15px !important; font-weight: 950 !important; line-height: 1 !important; letter-spacing: -.7px !important; text-shadow: none !important; box-shadow: inset 0 0 0 2px rgba(255, 205, 49, .17), 0 3px 9px rgba(0, 0, 0, .22) !important; } /* Khối chữ */ #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; } /* TRƯƠNG LẬP: trắng rõ */ #tlmsGlobalHeader .tlms-global-brand-text strong, .storefront-header .brand-name { display: block !important; overflow: visible !important; max-width: none !important; margin: 0 !important; color: #ffffff !important; font-size: 12px !important; font-weight: 950 !important; line-height: 1.15 !important; letter-spacing: .75px !important; text-transform: uppercase !important; text-overflow: clip !important; white-space: nowrap !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .8) !important; } /* MOBILE hoặc phần chữ được nhấn mạnh: vàng sáng */ #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: #ffd34f !important; font-style: normal !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important; } /* Khẩu hiệu */ #tlmsGlobalHeader .tlms-global-brand-text small, .storefront-header .brand-subtitle { display: block !important; overflow: hidden !important; max-width: 210px !important; margin: 0 !important; color: #f4ce67 !important; font-size: 7.5px !important; font-weight: 800 !important; line-height: 1.25 !important; letter-spacing: .65px !important; text-transform: uppercase !important; text-overflow: ellipsis !important; white-space: nowrap !important; opacity: 1 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .9) !important; } /* Nút menu vàng nhưng chữ đen rõ */ #tlmsGlobalHeader .tlms-global-menu-button, .storefront-header .mobile-menu-button { flex: 0 0 42px !important; width: 42px !important; height: 42px !important; min-width: 42px !important; border: 1px solid #bc8500 !important; border-radius: 10px !important; background: linear-gradient( 145deg, #ffdc63, #d99a09 ) !important; color: #17120a !important; font-size: 20px !important; font-weight: 950 !important; box-shadow: 0 4px 10px rgba(120, 79, 0, .20) !important; } /* |-------------------------------------------------------------------------- | Điện thoại |-------------------------------------------------------------------------- */ @media (max-width: 640px) { #tlmsGlobalHeader .tlms-global-header-inner, .storefront-header .navbar { gap: 8px !important; padding-left: 9px !important; padding-right: 9px !important; } #tlmsGlobalHeader .tlms-global-brand, .storefront-header .brand { max-width: calc(100% - 52px) !important; gap: 7px !important; padding: 5px 9px 5px 5px !important; border-radius: 10px !important; } #tlmsGlobalHeader .tlms-global-logo, .storefront-header .brand-mark { flex-basis: 34px !important; width: 34px !important; height: 34px !important; min-width: 34px !important; border-radius: 9px !important; font-size: 13px !important; } #tlmsGlobalHeader .tlms-global-brand-text strong, .storefront-header .brand-name { max-width: 150px !important; font-size: 10.5px !important; letter-spacing: .45px !important; } #tlmsGlobalHeader .tlms-global-brand-text small, .storefront-header .brand-subtitle { display: block !important; max-width: 150px !important; font-size: 6.5px !important; letter-spacing: .35px !important; } #tlmsGlobalHeader .tlms-global-menu-button, .storefront-header .mobile-menu-button { flex-basis: 39px !important; width: 39px !important; height: 39px !important; min-width: 39px !important; font-size: 19px !important; } } @media (max-width: 374px) { #tlmsGlobalHeader .tlms-global-brand-text strong, .storefront-header .brand-name { max-width: 132px !important; font-size: 9.5px !important; } #tlmsGlobalHeader .tlms-global-brand-text small, .storefront-header .brand-subtitle { max-width: 132px !important; font-size: 6px !important; } }