/*
Theme Name: Trường Thịnh Child
Description: Child theme tối ưu cho Flatsome — Trường Thịnh Telecom
Author: UX Themes
Template: flatsome
Version: 3.12.2
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}
/* Bắt buộc Top Bar full width 100% màn hình */
#top-bar .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Ẩn background gốc của Flatsome để hiện background của Marquee */
#top-bar {
    background: var(--tt-brand-gradient, linear-gradient(135deg, #cb1c22 0%, #a8171c 100%)) !important;
}

/* Đảm bảo element HTML chiếm toàn bộ không gian Top Bar */
#top-bar .flex-col {
    flex-basis: 100% !important;
    max-width: 100% !important;
}
#top-bar .nav, #top-bar .nav > li {
    width: 100% !important;
}



/* Vô hiệu hóa hiệu ứng xé rào cũ vì Container đã được mở rộng */
.tt-header-top-v2 {
    width: 100% !important;
    max-width: 100% !important;
    position: static !important;
    left: auto !important;
    transform: none !important;
    margin: 0 !important;
    background: transparent !important;
}

/* ========================================================
   UI/UX 2026 OVERHAUL - TRUONG THINH TELECOM
   Tối ưu UX/UI hiện đại: Bo góc, đổ bóng, màu đồng bộ, Glassmorphism
   ======================================================== */

/* 1. MÀU SẮC ĐỒNG BỘ THƯƠNG HIỆU & BO GÓC CHUNG */
:root {
    /* Flatsome exposes the Customizer primary colour as --primary-color.
       All child-theme brand states now inherit from that value. */
    --tt-primary: var(--primary-color, var(--fs-color-primary, var(--flatsome-primary-color, #cb1c22)));
    --tt-primary-strong: #a8171c;
    --tt-primary-soft: #fff4f4;
    --tt-primary-ring: rgba(203, 28, 34, 0.18);
    --tt-brand-gradient: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-primary-strong) 100%);
    --brand-red: var(--tt-primary);
    --brand-orange: var(--tt-primary);
    --brand-gradient: var(--tt-brand-gradient);
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-pill: 50px;
    --shadow-soft: 0 10px 30px rgba(0, 0, 0, 0.05);
    --shadow-hover: 0 15px 40px rgba(0, 0, 0, 0.1);
    --shadow-glow: 0 8px 25px rgba(0, 0, 0, 0.16);
    --transition-smooth: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

/* 2. NÚT BẤM (BUTTONS)
 * v3.10.4: KHÔNG style hình dạng cho button toàn site.
 * Rule global cũ với border-radius/border !important đã làm nhiễm vào
 * search icon, quantity +/- và các icon-button của Flatsome/WooCommerce.
 * Mỗi component tự sở hữu border/radius của chính nó.
 */
.button.primary,
.button.is-primary,
.checkout-button,
.add_to_cart_button {
    transition: var(--transition-smooth) !important;
}

.button.primary:not(.ux-search-submit):not(.search-submit):not(.submit-button):not(.is-form), 
.button.is-primary:not(.ux-search-submit):not(.search-submit):not(.submit-button):not(.is-form), 
input[type="submit"].primary, 
.checkout-button, 
.add_to_cart_button {
    background: var(--brand-gradient) !important;
    color: #fff !important;
    box-shadow: var(--shadow-glow) !important;
    text-transform: none !important;
    font-weight: 600 !important;
}

.button.primary:not(.ux-search-submit):not(.search-submit):not(.submit-button):not(.is-form):hover, 
.button.is-primary:not(.ux-search-submit):not(.search-submit):not(.submit-button):not(.is-form):hover, 
input[type="submit"].primary:hover, 
.checkout-button:hover, 
.add_to_cart_button:hover {
    transform: translateY(-3px) scale(1.02) !important;
    box-shadow: 0 12px 30px rgba(203, 28, 34, 0.5) !important;
    opacity: 1 !important;
}

/* 3. KHUNG SẢN PHẨM & BÀI VIẾT (PRODUCT CARDS & POSTS) */
.product-small .box, .post-item .box {
    border-radius: var(--radius-lg) !important;
    overflow: hidden !important;
    transition: var(--transition-smooth) !important;
    background: #ffffff;
}

.product-small .box:hover, .post-item .box:hover {
    transform: translateY(-5px) !important;
    box-shadow: var(--shadow-hover) !important;
    z-index: 2;
}

.product-small .box-image, .post-item .box-image {
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
    overflow: hidden !important;
}

/* Badges (Giảm giá, Nổi bật) */
.badge-inner {
    border-radius: var(--radius-sm) !important;
    background: var(--brand-red) !important;
    box-shadow: var(--shadow-glow) !important;
    font-weight: bold !important;
    border: none !important;
}

/* 4. MENU ĐỔ XUỐNG (DROPDOWN MENUS) - 2026 Glassmorphism */
.header-wrapper .nav-dropdown, .header-wrapper .sub-menu {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-hover) !important;
    background: rgba(255, 255, 255, 0.95) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1px solid rgba(255, 255, 255, 0.6) !important;
    padding: 10px !important;
    transform-origin: top center;
    animation: fadeInDownMenu 0.3s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
}

@keyframes fadeInDownMenu {
    0% { opacity: 0; transform: translateY(-10px) scale(0.98); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}

.header-wrapper .nav-dropdown > li > a, .header-wrapper .sub-menu > li > a {
    border-radius: var(--radius-sm) !important;
    transition: var(--transition-smooth) !important;
    border-bottom: none !important;
    color: #333 !important;
    font-weight: 500 !important;
}

.header-wrapper .nav-dropdown > li > a:hover, .header-wrapper .sub-menu > li > a:hover {
    background: var(--tt-primary-soft) !important;
    color: #111111 !important;
    padding-left: 15px !important;
}

/* 5. INPUT, FORM & SEARCH BAR */
input[type="text"], input[type="email"], input[type="password"], input[type="search"], input[type="tel"], input[type="number"], textarea, select {
    border-radius: var(--radius-md) !important;
    border: 1px solid rgba(0, 0, 0, 0.1) !important;
    transition: var(--transition-smooth) !important;
    background: #f9f9f9 !important;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.02) !important;
}

input:focus, textarea:focus, select:focus {
    background: #ffffff !important;
    border-color: var(--tt-primary) !important;
    box-shadow: 0 0 0 4px var(--tt-primary-ring) !important;
    outline: none !important;
}

/* 6. HIỆU ỨNG TEXT SELECTION (Đồng bộ thương hiệu) */
::selection {
    background: var(--brand-red);
    color: #ffffff;
}
::-moz-selection {
    background: var(--brand-red);
    color: #ffffff;
}

/* 7. THANH CUỘN (SCROLLBAR) HIỆN ĐẠI */
::-webkit-scrollbar {
    width: 8px;
}
::-webkit-scrollbar-track {
    background: #f1f1f1; 
}
::-webkit-scrollbar-thumb {
    background: var(--brand-orange); 
    border-radius: var(--radius-pill);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--brand-red); 
}


/* ========================================================
   LAYOUT SAFETY LAYER - v3.2
   Chỉ xử lý tràn viền và co giãn, không phá cấu trúc Flatsome
   ======================================================== */
html {
    max-width: 100%;
}
body, #wrapper, #main {
    max-width: 100%;
}
img, video, iframe, svg {
    max-width: 100%;
}
input, select, textarea, button {
    max-width: 100%;
    box-sizing: border-box;
}
.row > .col,
.row > [class*="col"],
.col-inner,
.flex-col,
.tabbed-content,
.tab-panels,
.tab-panels .panel {
    min-width: 0;
}
.tabbed-content,
.tab-panels,
.tab-panels .panel {
    max-width: 100%;
}

@media (max-width: 849px) {
    .header-wrapper .nav-dropdown,
    .header-wrapper .sub-menu {
        animation: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }

    :where(.button, button, input[type="submit"], input[type="button"], .is-form) {
        max-width: 100%;
    }
}