/* Trường Thịnh Core CSS Bundle v3.11.9 */

/* === tt-global.css === */
/*
 * TT Global Components v3.2
 * Extracted from functions.php so it can be cached by browsers.
 */
/* === FONT SYSTEM === */
@font-face {
    font-family: 'Phudu';
    src: url('/wp-content/fonts/DTPhudu-Bold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}
@font-face {
    font-family: 'Ganh';
    src: url('/wp-content/fonts/Ganh%20Type-Regular.otf') format('opentype');
    font-weight: 400;
    font-display: swap;
}

/* Body */
body, body p, body span, body a, body li, body div,
input, button, select, textarea,
.shop-page-title, .product-title, .price,
.box-text, .box-text-products {
    font-family: 'Ganh', sans-serif !important;
}
h1,h2,h3,h4,h5,h6,
.section-title-bold, .title-heading,
.tabgroup .tab-nav li a,
.widget-title, .widgettitle,
.button, .btn, .add_to_cart_button,
.badge-container .badge, .onsale,
.accordion-title, .toggle-title {
    font-family: 'Phudu', sans-serif !important;
    font-weight: 700 !important;
}
.nav > li > a, .header .nav > li > a {
    font-family: 'Phudu', sans-serif !important;
    font-weight: 700 !important;
}
.price, .amount, .woocommerce .price {
    font-family: 'Phudu', sans-serif !important;
    font-weight: 700 !important;
}

/* === CONTAINER === */
.row-small { max-width: 1245px; }

/* === VERTICAL MENU FIX === */
.hero-left-col { z-index: 99 !important; position: relative; }
.tt-vertical-menu { position: relative; z-index: 9999; }
.tt-vertical-menu > ul { scrollbar-width: thin; scrollbar-color: #e0e0e0 transparent; }
.tt-vertical-menu ul::-webkit-scrollbar { width: 4px; }
.tt-vertical-menu ul::-webkit-scrollbar-thumb { background: #ddd; border-radius: 10px; }

.tt-menu-item { position: static !important; transition: background 0.15s; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
.tt-menu-item:hover { background: #ededed; }
.tt-menu-item:hover > a svg path { stroke: #fb6d00 !important; }
.tt-menu-item:hover > a span { color: #fb6d00 !important; }

/* Force flex - beat Flatsome overrides */
body .page .tt-vertical-menu .tt-menu-item > a,
body .tt-vertical-menu .tt-menu-item > a,
.text-box .tt-vertical-menu .tt-menu-item > a,
.tt-vertical-menu li.tt-menu-item > a {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 5px 30px 5px 15px !important;
    text-decoration: none !important;
    width: 100% !important;
    height: 100% !important;
    box-sizing: border-box !important;
    background: transparent !important;
}

body .page .tt-vertical-menu .tt-menu-item > a::after,
body .tt-vertical-menu .tt-menu-item > a::after {
    content: "";
    display: block;
    width: 8px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='%23555' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    flex-shrink: 0;
}

body .tt-vertical-menu .tt-menu-item:hover > a::after {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='14' viewBox='0 0 8 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L7 7L1 13' stroke='%23fb6d00' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
}

body .tt-vertical-menu .tt-menu-item > a > div,
.tt-vertical-menu li.tt-menu-item > a > div {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex: 1 !important;
    min-width: 0 !important;
}

body .tt-vertical-menu .tt-menu-item img {
    width: 24px !important; height: 24px !important;
    max-width: 24px !important; object-fit: contain !important;
    flex-shrink: 0 !important;
}
body .tt-vertical-menu .tt-menu-item span {
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #041e42 !important;
    white-space: nowrap !important;
    font-family: 'Phudu', sans-serif !important;
}
.tt-vertical-menu p, .tt-menu-item p {
    display: contents !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Submenu Panel */
.tt-submenu-panel {
    display: none; position: absolute; left: 100%; top: 0;
    box-sizing: border-box;
    width: min(680px, calc(100vw - 340px)); min-height: 456px; background: #f7f7f7;
    border-radius: 0 8px 8px 0; box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding: 28px 30px; flex-wrap: wrap; gap: 20px 28px;
    border: 1px solid #eaeaea; border-left: none; z-index: 10000;
}
.tt-menu-item:hover .tt-submenu-panel { display: flex; }
.tt-submenu-panel::before {
    content: ""; position: absolute; left: -60px; top: 0;
    width: 60px; height: 100%; background: transparent; z-index: 1200;
}
.tt-submenu-col { width: calc(25% - 15px); min-width: 0; }
.tt-submenu-col h4 {
    font-size: 16px; font-weight: 700; color: #041e42;
    margin-bottom: 10px; padding-bottom: 6px;
    border-bottom: 2px solid #f0f0f0; width: fit-content;
    font-family: 'Phudu', sans-serif !important;
}
.tt-submenu-col ul { list-style: none; padding: 0; margin: 0; }
.tt-submenu-col a {
    color: #041e42; text-decoration: none; font-size: 14px;
    font-weight: 400; line-height: 1.5; display: block;
    padding: 10px 0; width: fit-content;
    font-family: 'Ganh', sans-serif !important;
}
.tt-submenu-col a:hover { color: #fb6d00; }

/* === PRODUCT TABS === */
.tabbed-content ul.nav,
.tabbed-content ul.nav.nav-line-bottom {
    border-bottom: none !important;
    margin-bottom: 25px !important;
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 0 !important;
    align-items: center !important;
}
.tabbed-content ul.nav li.tab {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    float: none !important;
}
.tabbed-content ul.nav li.tab a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #041e42 !important;
    padding: 8px 20px !important;
    text-transform: none !important;
    font-family: 'Phudu', sans-serif !important;
    border: 1.5px solid #e0e0e0 !important;
    border-radius: 50px !important;
    background: #fff !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    line-height: 1.4 !important;
}
.tabbed-content ul.nav li.tab a::before {
    content: '' !important;
    display: inline-block !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #1565c0 !important;
    flex-shrink: 0 !important;
}
/* Different dot colors for each tab */
.tabbed-content ul.nav li.tab:nth-child(1) a::before { background: #fb6d00 !important; }
.tabbed-content ul.nav li.tab:nth-child(2) a::before { background: #1565c0 !important; }
.tabbed-content ul.nav li.tab:nth-child(3) a::before { background: #2e7d32 !important; }
.tabbed-content ul.nav li.tab:nth-child(4) a::before { background: #d32f2f !important; }
.tabbed-content ul.nav li.tab:nth-child(5) a::before { background: #7b1fa2 !important; }
.tabbed-content ul.nav li.tab:nth-child(6) a::before { background: #00838f !important; }

.tabbed-content ul.nav li.tab a:hover {
    border-color: #fb6d00 !important;
    color: #fb6d00 !important;
    background: #fff7f0 !important;
    box-shadow: 0 2px 8px rgba(251,109,0,0.15) !important;
}
.tabbed-content ul.nav li.tab.active a {
    border-color: #fb6d00 !important;
    background: linear-gradient(135deg, #fb6d00, #e65100) !important;
    color: #fff !important;
    box-shadow: 0 3px 12px rgba(251,109,0,0.3) !important;
}
.tabbed-content ul.nav li.tab.active a::before {
    background: #fff !important;
}

/* === PRODUCT GRID === */
.products .product-small .product-title {
    font-size: 14px !important; line-height: 1.4 !important;
    font-weight: 400 !important; color: #041e42 !important;
    font-family: 'Ganh', sans-serif !important;
}
.products .product-small .price {
    font-size: 16px !important; font-weight: 700 !important;
    color: #cb1c22 !important;
    font-family: 'Phudu', sans-serif !important;
}

/* === SECTION TITLE === */
.section-title-bold {
    font-size: 24px !important; font-weight: 700 !important;
    color: #041e42 !important; text-transform: uppercase !important;
    font-family: 'Phudu', sans-serif !important;
}

/* === RESPONSIVE === */
@media (max-width: 1200px) {
    .tt-vertical-menu { display: none; }
}
@media (max-width: 849px) {
    .tabbed-content { max-width: 100% !important; min-width: 0 !important; }
    .tabbed-content ul.nav,
    .tabbed-content ul.nav.nav-line-bottom {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        gap: 8px !important;
        padding: 2px 2px 8px !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scroll-snap-type: x proximity;
    }
    .tabbed-content ul.nav li.tab {
        flex: 0 0 auto !important;
        scroll-snap-align: start;
    }
    .tabbed-content ul.nav li.tab a {
        font-size: 12px !important;
        padding: 7px 13px !important;
        gap: 6px !important;
        max-width: 82vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }
    .tabbed-content ul.nav li.tab a::before { width: 8px !important; height: 8px !important; }
}
@media (min-width: 850px) and (max-width: 1279px) {
    .tt-submenu-panel {
        width: min(620px, calc(100vw - 310px));
        padding: 22px 24px;
        gap: 16px 20px;
    }
    .tt-submenu-col { width: calc(33.333% - 14px); }
}


/* === tt-layout-fixes.css === */
/*
 * TT Layout Fixes v1.0
 * Responsive containment layer for Flatsome Child.
 * Loaded after the child stylesheet to correct overflow without masking it.
 */

:root {
    --tt-page-gutter: 15px;
    --tt-content-max: 1245px;
}

/* Flexible children must be allowed to shrink. */
#wrapper .row > .col,
#wrapper .row > [class*="col"],
#wrapper .col-inner,
#wrapper .flex-col,
#wrapper .box-text,
#wrapper .tabbed-content,
#wrapper .tab-panels,
#wrapper .tab-panels > .panel {
    min-width: 0;
}

/* Rich content should never force the page wider than the viewport. */
#wrapper img,
#wrapper picture,
#wrapper video,
#wrapper iframe,
#wrapper svg,
#wrapper canvas {
    max-width: 100%;
}

#wrapper video {
    height: auto;
}

#wrapper table {
    max-width: 100%;
}

/* Keep intentionally wide tables scrollable inside their own area. */
.tt-banggia-wrap,
.tt-catalog-table-wrap,
.woocommerce table.shop_table,
.woocommerce-cart-form,
.woocommerce-order-details {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Product/post cards may clip their own media; generic Flatsome columns stay untouched. */
#wrapper .product-small .box,
#wrapper .post-item .box {
    max-width: 100%;
}

/* Product tabs: desktop wraps neatly; mobile becomes a contained horizontal rail. */
.tabbed-content > .nav,
.tabbed-content ul.nav {
    max-width: 100%;
}

@media (max-width: 849px) {
    :root { --tt-page-gutter: 12px; }

    #wrapper .container,
    #wrapper .container-width,
    #wrapper .full-width .ubermenu-nav,
    #wrapper .tt-container,
    #wrapper .wc-cat-container,
    #wrapper .blog-container,
    #wrapper .hub-container,
    #wrapper .lp-container,
    #wrapper .tt-ft-wrap,
    #wrapper .tt-intro-section {
        max-width: 100%;
    }

    .tabbed-content ul.nav,
    .tabbed-content ul.nav.nav-line-bottom {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        max-width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-bottom: 8px !important;
        overscroll-behavior-inline: contain;
        -webkit-overflow-scrolling: touch;
    }

    .tabbed-content ul.nav > li,
    .tabbed-content ul.nav > li.tab {
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }

    .tabbed-content ul.nav > li > a,
    .tabbed-content ul.nav > li.tab > a {
        max-width: 82vw !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
    }

    /* Do not let buttons or fields break cards/forms on narrow phones. */
    #wrapper input,
    #wrapper select,
    #wrapper textarea,
    #wrapper button,
    #wrapper .button {
        max-width: 100%;
    }

    /* Footer and common grids collapse safely. */
    .tt-ft-grid,
    .tt-ft-center-grid,
    .tt-intro-row,
    .tt-intro-buttons {
        min-width: 0;
    }
}

@media (max-width: 480px) {
    .tabbed-content ul.nav li.tab a {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .tt-intro-buttons > a,
    .tt-newsletter-form,
    .tt-newsletter-form button {
        width: 100%;
    }
}


/* === tt-theme-colors.css === */
/*
 * Trường Thịnh Child Theme — Theme Color Bridge v3.3
 * UI states inherit Flatsome's configured --primary-color.
 * Loaded last so legacy hard-coded child-theme colours no longer win.
 */
:root {
    --tt-primary: var(--primary-color, var(--fs-color-primary, var(--flatsome-primary-color, #cb1c22)));
    --tt-primary-strong: #a8171c;
    --tt-primary-light: #ef5a5f;
    --tt-primary-soft: #fff4f4;
    --tt-primary-softer: #fff9f9;
    --tt-primary-ring: rgba(203, 28, 34, 0.18);
    --tt-on-primary: #fff;
    --tt-ui-border: #e5e7eb;
    --tt-ui-text: #1f2937;
    --tt-ui-muted: #6b7280;
    --tt-brand-gradient: linear-gradient(135deg, var(--tt-primary) 0%, var(--tt-primary-strong) 100%);
}

/* Derive hover/tint colours from the current Theme Options primary colour. */
@supports (color: color-mix(in srgb, black 10%, white)) {
    :root {
        --tt-primary-strong: color-mix(in srgb, var(--tt-primary) 82%, #000);
        --tt-primary-light: color-mix(in srgb, var(--tt-primary) 72%, #fff);
        --tt-primary-soft: color-mix(in srgb, var(--tt-primary) 9%, #fff);
        --tt-primary-softer: color-mix(in srgb, var(--tt-primary) 4%, #fff);
        --tt-primary-ring: color-mix(in srgb, var(--tt-primary) 22%, transparent);
    }
}

/* Bridge old child-theme variables to the Flatsome colour. */
:root {
    --brand-red: var(--tt-primary);
    --brand-orange: var(--tt-primary);
    --brand-gradient: var(--tt-brand-gradient);
    --tt-red: var(--tt-primary);
    --tt-red-dark: var(--tt-primary-strong);
    --tt-red-light: var(--tt-primary-light);
    --tt-orange: var(--tt-primary);
    --tt-orange-light: var(--tt-primary-light);
    --tt-gradient-brand: var(--tt-brand-gradient);
}

/* Primary CTA: strong, readable and consistent. */
.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),
.button.checkout,
.checkout-button,
#place_order,
body:not(.single-product) .single_add_to_cart_button,
.add_to_cart_button,
.ajax_add_to_cart,
.wc-forward:not(.button-plain),
form:not(.searchform) input[type="submit"],
form:not(.searchform) button[type="submit"]:not(.tt-mobile-search-submit),
.tt-nl-btn,
.tt-cta,
.tt-btn-primary {
    background: var(--tt-brand-gradient) !important;
    border: 1px solid var(--tt-primary) !important;
    color: var(--tt-on-primary) !important;
    box-shadow: 0 6px 16px var(--tt-primary-ring) !important;
    text-shadow: none !important;
    opacity: 1 !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,
.button.checkout:hover,
.checkout-button:hover,
#place_order:hover,
body:not(.single-product) .single_add_to_cart_button:hover,
.add_to_cart_button:hover,
.ajax_add_to_cart:hover,
.wc-forward:not(.button-plain):hover,
form:not(.searchform) input[type="submit"]:hover,
form:not(.searchform) button[type="submit"]:not(.tt-mobile-search-submit):hover,
.tt-nl-btn:hover,
.tt-cta:hover,
.tt-btn-primary:hover {
    background: var(--tt-primary-strong) !important;
    border-color: var(--tt-primary-strong) !important;
    color: var(--tt-on-primary) !important;
    box-shadow: 0 9px 22px var(--tt-primary-ring) !important;
    transform: translateY(-2px) !important;
}

.button.primary:not(.ux-search-submit):not(.search-submit):not(.submit-button):not(.is-form):active,
.button.is-primary:not(.ux-search-submit):not(.search-submit):not(.submit-button):not(.is-form):active,
.checkout-button:active,
#place_order:active,
body:not(.single-product) .single_add_to_cart_button:active,
.add_to_cart_button:active,
form:not(.searchform) input[type="submit"]:active,
form:not(.searchform) button[type="submit"]:not(.tt-mobile-search-submit):active {
    transform: translateY(0) scale(.985) !important;
    box-shadow: 0 3px 9px var(--tt-primary-ring) !important;
}

/* Secondary buttons: style only explicit secondary components.
 * Do NOT target generic .button or .is-form: Flatsome uses those classes
 * for quantity +/- and icon controls too.
 */
.tt-btn-secondary {
    background: #fff !important;
    border: 1px solid var(--tt-ui-border) !important;
    color: var(--tt-ui-text) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}

.tt-btn-secondary:hover {
    background: var(--tt-primary-soft) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-primary) !important;
    box-shadow: 0 5px 14px var(--tt-primary-ring) !important;
}

/* Outline buttons use the configured brand colour too. */
.button.is-outline,
.button.outline,
.button.secondary.is-outline {
    background: transparent !important;
    border: 1.5px solid var(--tt-primary) !important;
    color: var(--tt-primary) !important;
    box-shadow: none !important;
}
.button.is-outline:hover,
.button.outline:hover,
.button.secondary.is-outline:hover {
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-on-primary) !important;
}

/* Tabs: obvious inactive / hover / active states. */
.tabbed-content .nav,
.woocommerce-tabs .tabs,
.product-tabs,
.nav-tabs {
    gap: 6px;
}

.tabbed-content .nav > li > a,
.woocommerce-tabs .tabs > li > a,
.product-tabs > li > a,
.nav-tabs > li > a,
.nav-pills > li > a {
    border: 1px solid transparent !important;
    border-radius: 9px !important;
    color: var(--tt-ui-muted) !important;
    transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease !important;
}

.tabbed-content .nav > li > a:hover,
.woocommerce-tabs .tabs > li > a:hover,
.product-tabs > li > a:hover,
.nav-tabs > li > a:hover,
.nav-pills > li > a:hover {
    background: var(--tt-primary-softer) !important;
    border-color: var(--tt-primary-light) !important;
    color: var(--tt-primary) !important;
}

.tabbed-content .nav > li.active > a,
.tabbed-content .nav > li.current > a,
.woocommerce-tabs .tabs > li.active > a,
.product-tabs > li.active > a,
.nav-tabs > li.active > a,
.nav-tabs > li.current > a,
.nav-pills > li.active > a,
.nav-pills > li.current > a {
    background: var(--tt-primary-soft) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-primary) !important;
    box-shadow: inset 0 -2px 0 var(--tt-primary), 0 3px 10px var(--tt-primary-ring) !important;
    font-weight: 700 !important;
    opacity: 1 !important;
}

/* Old multicolour tab markers are now one coherent brand colour. */
.tabbed-content ul.nav li.tab a::before,
.tabbed-content ul.nav li.tab:nth-child(n) a::before {
    background: var(--tt-primary) !important;
}

/* Links and interactive icon states. Avoid changing ordinary article links globally. */
.tt-menu-item:hover > a,
.tt-menu-item:hover > a span,
.tt-submenu-col a:hover,
.woocommerce-MyAccount-navigation li.is-active a,
.widget_layered_nav li.chosen a,
.category-filtering a:hover {
    color: var(--tt-primary) !important;
}

/* WooCommerce badges / selected filters / small brand states. */
.badge-inner,
.badge-container .onsale,
.woocommerce span.onsale,
.woocommerce .widget_price_filter .ui-slider .ui-slider-range,
.woocommerce .widget_price_filter .ui-slider .ui-slider-handle {
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-on-primary) !important;
}

/* Form focus is easier to see and matches Theme Options. */
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
    border-color: var(--tt-primary) !important;
    box-shadow: 0 0 0 3px var(--tt-primary-ring) !important;
    outline: none !important;
}

/* Keyboard accessibility: visible focus without changing mouse UI. */
a:focus-visible,
button:focus-visible,
.button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[role="tab"]:focus-visible {
    outline: 2px solid var(--tt-primary) !important;
    outline-offset: 3px !important;
}

/* Price / category accent components from this child theme. */
.tt-banggia-table .category-row,
.tt-banggia-table .category-row td {
    background: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
    color: var(--tt-on-primary) !important;
}
.tt-banggia-table .price-retail,
.tt-search-input:focus {
    color: var(--tt-primary) !important;
    border-color: var(--tt-primary) !important;
}
.tt-search-input:focus {
    box-shadow: 0 0 0 3px var(--tt-primary-ring) !important;
}

/* Top bar and brand emphasis follow the Customizer colour. */
#top-bar {
    background: var(--tt-brand-gradient) !important;
}

::selection {
    background: var(--tt-primary);
    color: var(--tt-on-primary);
}

::-webkit-scrollbar-thumb {
    background: var(--tt-primary);
}
::-webkit-scrollbar-thumb:hover {
    background: var(--tt-primary-strong);
}

/* Mobile: keep only explicit CTA/tab touch targets large.
 * Utility controls (search icon, quantity +/-) must keep component sizing.
 */
@media (max-width: 849px) {
    .button.primary:not(.is-form),
    .button.is-primary:not(.is-form),
    .checkout-button,
    #place_order,
    .tt-btn-primary,
    .tt-btn-secondary,
    .tt-card__btn,
    .tabbed-content .nav > li > a,
    .woocommerce-tabs .tabs > li > a {
        min-height: 40px;
    }

    .button.primary:not(.is-form):hover,
    .button.is-primary:not(.is-form):hover,
    .checkout-button:hover,
    #place_order:hover,
    .tt-btn-primary:hover,
    .tt-btn-secondary:hover,
    .tt-card__btn:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .button,
    button,
    a,
    input,
    select,
    textarea {
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
    }
}


/* === tt-menu-color-fixes.css === */
/**
 * Trường Thịnh Child - menu state colour fixes
 * Keeps footer/dark-colour menu labels readable when the Theme Primary Color
 * is also used as the section background.
 */

:root {
    --tt-menu-contrast-hover: #111111;
}

/*
 * Footer navigation / accordion / tabs
 * Normal colours remain controlled by Flatsome/UX Builder.
 * Only interactive states are overridden so a red Primary Color cannot
 * become red text on a red footer background.
 */
.footer-wrapper .nav > li > a:hover,
.footer-wrapper .nav > li > a:focus,
.footer-wrapper .nav > li > a:focus-visible,
.footer-wrapper .nav > li > a:active,
.footer-wrapper .nav > li.active > a,
.footer-wrapper .nav > li.current > a,
.footer-wrapper .nav > li.current-menu-item > a,
.footer-wrapper .nav > li.current-menu-parent > a,
.footer-wrapper .menu-item > a:hover,
.footer-wrapper .menu-item > a:focus,
.footer-wrapper .menu-item > a:focus-visible,
.footer-wrapper .menu-item > a:active,
.footer-wrapper .menu-item.current-menu-item > a,
.footer-wrapper .menu-item.current-menu-parent > a,
.footer-wrapper .widget_nav_menu a:hover,
.footer-wrapper .widget_nav_menu a:focus,
.footer-wrapper .accordion-title:hover,
.footer-wrapper .accordion-title:focus,
.footer-wrapper .accordion-title.active,
.footer-wrapper .accordion-title[aria-expanded="true"],
.footer-wrapper .tabbed-content .nav > li > a:hover,
.footer-wrapper .tabbed-content .nav > li > a:focus,
.footer-wrapper .tabbed-content .nav > li.active > a,
.footer-wrapper .tabbed-content .nav > li.current > a,
.footer-1 .nav > li > a:hover,
.footer-1 .nav > li.active > a,
.footer-1 .menu-item > a:hover,
.footer-1 .menu-item.current-menu-item > a,
.footer-2 .nav > li > a:hover,
.footer-2 .nav > li.active > a,
.footer-2 .menu-item > a:hover,
.footer-2 .menu-item.current-menu-item > a,
.absolute-footer .nav > li > a:hover,
.absolute-footer .menu-item > a:hover {
    color: var(--tt-menu-contrast-hover) !important;
    opacity: 1 !important;
}

/* Text/icon wrappers can carry their own colour in Flatsome elements. */
.footer-wrapper .nav > li > a:hover span,
.footer-wrapper .nav > li > a:focus span,
.footer-wrapper .nav > li.active > a span,
.footer-wrapper .nav > li.current-menu-item > a span,
.footer-wrapper .menu-item > a:hover span,
.footer-wrapper .menu-item.current-menu-item > a span,
.footer-wrapper .accordion-title:hover span,
.footer-wrapper .accordion-title.active span,
.footer-wrapper .accordion-title[aria-expanded="true"] span,
.footer-wrapper .tabbed-content .nav > li > a:hover span,
.footer-wrapper .tabbed-content .nav > li.active > a span,
.footer-wrapper .tabbed-content .nav > li.current > a span,
.footer-wrapper .nav > li > a:hover i,
.footer-wrapper .nav > li.active > a i,
.footer-wrapper .menu-item > a:hover i,
.footer-wrapper .accordion-title:hover i,
.footer-wrapper .accordion-title.active i,
.footer-wrapper .accordion-title[aria-expanded="true"] i {
    color: var(--tt-menu-contrast-hover) !important;
}

/* Icons using currentColor/stroke/fill follow the same black hover state. */
.footer-wrapper a:hover svg,
.footer-wrapper a:focus svg,
.footer-wrapper .active > a svg,
.footer-wrapper [aria-expanded="true"] svg {
    color: var(--tt-menu-contrast-hover) !important;
}
.footer-wrapper a:hover svg path,
.footer-wrapper a:focus svg path,
.footer-wrapper .active > a svg path,
.footer-wrapper [aria-expanded="true"] svg path {
    stroke: currentColor;
}

/*
 * Tabs placed inside the footer should not receive the generic red tint from
 * tt-theme-colors.css. Keep the surface transparent and use black as the
 * interaction colour. This is especially important on mobile touch/click.
 */
.footer-wrapper .tabbed-content .nav > li > a:hover,
.footer-wrapper .tabbed-content .nav > li > a:focus,
.footer-wrapper .tabbed-content .nav > li.active > a,
.footer-wrapper .tabbed-content .nav > li.current > a {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
}

.footer-wrapper .tabbed-content ul.nav li.tab a:hover::before,
.footer-wrapper .tabbed-content ul.nav li.tab.active a::before,
.footer-wrapper .tabbed-content ul.nav li.tab.current a::before {
    background: var(--tt-menu-contrast-hover) !important;
}

/* Flatsome often draws the active indicator with pseudo elements/borders. */
.footer-wrapper .nav-line-bottom > li > a:hover::before,
.footer-wrapper .nav-line-bottom > li.active > a::before,
.footer-wrapper .nav-line-bottom > li.current > a::before,
.footer-wrapper .nav-line-bottom > li.current-menu-item > a::before {
    background-color: var(--tt-menu-contrast-hover) !important;
    border-color: var(--tt-menu-contrast-hover) !important;
}

/* Mobile/touch: remove sticky red tap colour left by browser/theme states. */
@media (hover: none), (max-width: 849px) {
    .footer-wrapper .nav > li > a:active,
    .footer-wrapper .nav > li > a:focus,
    .footer-wrapper .nav > li.active > a,
    .footer-wrapper .nav > li.current > a,
    .footer-wrapper .nav > li.current-menu-item > a,
    .footer-wrapper .menu-item > a:active,
    .footer-wrapper .menu-item.current-menu-item > a,
    .footer-wrapper .accordion-title.active,
    .footer-wrapper .accordion-title[aria-expanded="true"] {
        color: var(--tt-menu-contrast-hover) !important;
        -webkit-tap-highlight-color: transparent;
    }
}


/* -------------------------------------------------------------------------
 * Header navigation contrast fix v3.9.2
 * The header/menu bar can itself use Theme Primary Color as its background.
 * Never reuse Primary Color for top-level hover/current text on that surface.
 * ---------------------------------------------------------------------- */
.header-wrapper .nav > li > a:hover,
.header-wrapper .nav > li > a:focus,
.header-wrapper .nav > li > a:focus-visible,
.header-wrapper .nav > li > a:active,
.header-wrapper .nav > li.active > a,
.header-wrapper .nav > li.current > a,
.header-wrapper .nav > li.current-menu-item > a,
.header-wrapper .nav > li.current-menu-parent > a,
.header-wrapper .nav > li.menu-item-has-children:hover > a,
.header-wrapper .nav > li.menu-item-has-children:focus-within > a {
    color: var(--tt-menu-contrast-hover, #111111) !important;
    opacity: 1 !important;
}

/* Flatsome often colours nested spans/icons/caret separately. */
.header-wrapper .nav > li > a:hover span,
.header-wrapper .nav > li > a:focus span,
.header-wrapper .nav > li.active > a span,
.header-wrapper .nav > li.current > a span,
.header-wrapper .nav > li.current-menu-item > a span,
.header-wrapper .nav > li.current-menu-parent > a span,
.header-wrapper .nav > li.menu-item-has-children:hover > a span,
.header-wrapper .nav > li > a:hover i,
.header-wrapper .nav > li > a:focus i,
.header-wrapper .nav > li.active > a i,
.header-wrapper .nav > li.current-menu-item > a i,
.header-wrapper .nav > li.current-menu-parent > a i,
.header-wrapper .nav > li.menu-item-has-children:hover > a i,
.header-wrapper .nav > li > a:hover .icon-angle-down,
.header-wrapper .nav > li.menu-item-has-children:hover > a .icon-angle-down {
    color: var(--tt-menu-contrast-hover, #111111) !important;
}

/* SVG/caret variants inherit the same black interaction colour. */
.header-wrapper .nav > li > a:hover svg,
.header-wrapper .nav > li > a:focus svg,
.header-wrapper .nav > li.active > a svg,
.header-wrapper .nav > li.current-menu-item > a svg,
.header-wrapper .nav > li.current-menu-parent > a svg,
.header-wrapper .nav > li.menu-item-has-children:hover > a svg {
    color: var(--tt-menu-contrast-hover, #111111) !important;
    fill: currentColor !important;
}

/* Active/hover underline must also remain visible instead of red-on-red. */
.header-wrapper .nav-line-bottom > li > a:hover::before,
.header-wrapper .nav-line-bottom > li.active > a::before,
.header-wrapper .nav-line-bottom > li.current > a::before,
.header-wrapper .nav-line-bottom > li.current-menu-item > a::before,
.header-wrapper .nav-line-bottom > li.current-menu-parent > a::before,
.header-wrapper .nav-line-bottom > li.menu-item-has-children:hover > a::before {
    background-color: var(--tt-menu-contrast-hover, #111111) !important;
    border-color: var(--tt-menu-contrast-hover, #111111) !important;
}

/* Dropdown is a light surface: black text + a subtle Primary tinted background. */
.header-wrapper .nav-dropdown > li > a:hover,
.header-wrapper .nav-dropdown > li > a:focus,
.header-wrapper .sub-menu > li > a:hover,
.header-wrapper .sub-menu > li > a:focus,
.header-wrapper .nav-dropdown .menu-item:hover > a,
.header-wrapper .sub-menu .menu-item:hover > a {
    color: var(--tt-menu-contrast-hover, #111111) !important;
    background-color: var(--tt-primary-soft, rgba(0,0,0,.045)) !important;
}

.header-wrapper .nav-dropdown > li > a:hover span,
.header-wrapper .sub-menu > li > a:hover span,
.header-wrapper .nav-dropdown > li > a:hover i,
.header-wrapper .sub-menu > li > a:hover i {
    color: var(--tt-menu-contrast-hover, #111111) !important;
}

@media (hover: none), (max-width: 849px) {
    .header-wrapper .nav > li > a:active,
    .header-wrapper .nav > li > a:focus,
    .header-wrapper .nav > li.active > a,
    .header-wrapper .nav > li.current > a,
    .header-wrapper .nav > li.current-menu-item > a,
    .header-wrapper .nav > li.current-menu-parent > a,
    .header-wrapper .nav > li.menu-item-has-children:focus-within > a {
        color: var(--tt-menu-contrast-hover, #111111) !important;
        -webkit-tap-highlight-color: transparent;
    }
}


/* === tt-search-ui-fixes.css === */
/*
 * TT Search UI fixes v3.7.5
 * One compact search frame. The search icon has no independent background,
 * border, radius or divider, preventing the double-ring / rippled edge effect.
 */

/* Flatsome may wrap the form several times. None of those wrappers own a frame. */
.searchform,
.searchform.form-flat,
.header-search-form-wrapper,
.header-search-form-wrapper .searchform,
.mfp-content .searchform,
.searchform .flex-col,
.searchform .flex-grow {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.searchform {
    margin: 0 !important;
    padding: 0 !important;
}

/* The flex-row is the ONE and ONLY visible frame. */
.searchform .flex-row,
.header-search-form-wrapper .searchform .flex-row,
.mfp-content .searchform .flex-row {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    min-width: 0 !important;
    height: 38px !important;
    min-height: 38px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #fff !important;
    border: 1px solid #d8dee8 !important;
    border-radius: 9px !important;
    box-shadow: none !important;
    outline: 0 !important;
    overflow: hidden !important;
}

/* Search input leaves room for the absolutely-positioned icon button. */
.searchform input[type="search"].search-field,
.searchform input[type="search"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: 100% !important;
    height: 36px !important;
    min-height: 36px !important;
    margin: 0 !important;
    padding: 0 44px 0 13px !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
    color: #172033 !important;
    font-size: 14px !important;
    line-height: 36px !important;
}

.searchform input[type="search"]::placeholder {
    color: #7b8494 !important;
    opacity: 1 !important;
}

.searchform input[type="search"]:hover,
.searchform input[type="search"]:focus,
.searchform input[type="search"]:focus-visible {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

/* Search button floats inside the same frame: no white tile, no divider, no second radius. */
.searchform .ux-search-submit,
.searchform button.ux-search-submit,
.searchform button[type="submit"],
.header-search-form-wrapper .searchform button[type="submit"] {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    z-index: 2 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 40px !important;
    width: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    height: 36px !important;
    min-height: 36px !important;
    max-height: 36px !important;
    margin: auto 2px auto 0 !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: #172033 !important;
    border: 0 !important;
    border-left: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    text-shadow: none !important;
    outline: 0 !important;
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Kill every pseudo layer from Flatsome/global CTA rules. */
.searchform .ux-search-submit::before,
.searchform .ux-search-submit::after,
.searchform button[type="submit"]::before,
.searchform button[type="submit"]::after {
    content: none !important;
    display: none !important;
    width: 0 !important;
    height: 0 !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: 0 !important;
}

.searchform .ux-search-submit i,
.searchform button[type="submit"] i,
.searchform .icon-search {
    position: static !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 18px !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 1 !important;
    color: currentColor !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* Hover changes only the glyph color; it never paints a separate button tile. */
.searchform .ux-search-submit:hover,
.searchform button[type="submit"]:hover,
.searchform .ux-search-submit:active,
.searchform button[type="submit"]:active {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--tt-primary, var(--primary-color, #e31e24)) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    transform: none !important;
}

/* One clean focus state on the single outer frame. */
.searchform:focus-within .flex-row {
    border-color: var(--tt-primary, var(--primary-color, #e31e24)) !important;
    box-shadow: none !important;
}

.searchform .ux-search-submit:focus,
.searchform .ux-search-submit:focus-visible,
.searchform button[type="submit"]:focus,
.searchform button[type="submit"]:focus-visible {
    background: transparent !important;
    outline: 0 !important;
    box-shadow: none !important;
}

@media (max-width: 849px) {
    .searchform .flex-row,
    .header-search-form-wrapper .searchform .flex-row,
    .mfp-content .searchform .flex-row {
        height: 38px !important;
        min-height: 38px !important;
        border-radius: 8px !important;
    }

    .searchform input[type="search"].search-field,
    .searchform input[type="search"] {
        height: 36px !important;
        min-height: 36px !important;
        padding: 0 42px 0 12px !important;
        font-size: 14px !important;
        line-height: 36px !important;
    }

    .searchform .ux-search-submit,
    .searchform button.ux-search-submit,
    .searchform button[type="submit"] {
        width: 38px !important;
        min-width: 38px !important;
        max-width: 38px !important;
        height: 34px !important;
        min-height: 34px !important;
        max-height: 34px !important;
        margin-right: 2px !important;
    }

    .searchform .ux-search-submit i,
    .searchform button[type="submit"] i,
    .searchform .icon-search {
        width: 17px !important;
        height: 17px !important;
        flex-basis: 17px !important;
        font-size: 17px !important;
    }
}


/* === tt-typography-compact.css === */
/**
 * Trường Thịnh Child — Compact Typography System
 * Version: 3.7.4
 * Goal: keep all functional frontend text in the 13px–18px range.
 * Loaded last so old Flatsome/child page-specific font sizes cannot enlarge the UI.
 */

:root {
    --tt-font-xs: 13px;
    --tt-font-sm: 14px;
    --tt-font-md: 15px;
    --tt-font-lg: 16px;
    --tt-font-xl: 17px;
    --tt-font-2xl: 18px;
    --tt-control-height: 40px;
    --tt-control-radius: 9px;
}

/* Base text */
html body,
body .page-wrapper,
body #wrapper,
body #main {
    font-size: var(--tt-font-md) !important;
    line-height: 1.55;
}

body p,
body li,
body dd,
body dt,
body td,
body th,
body label,
body address,
body blockquote,
body .entry-content,
body .entry-summary,
body .woocommerce-product-details__short-description {
    font-size: var(--tt-font-md) !important;
}

/* Headings stay semantic in HTML but visually compact. */
body h1,
body .h1,
body .entry-title,
body .product-title,
body .page-title,
body .tt-single-post__title,
body .tt-product-main__title {
    font-size: var(--tt-font-2xl) !important;
    line-height: 1.28 !important;
}

body h2,
body .h2,
body .section-title-main,
body .tt-section-title,
body .woocommerce-order-details__title,
body .woocommerce-column__title,
body .tt-checkout-section__title {
    font-size: var(--tt-font-xl) !important;
    line-height: 1.32 !important;
}

body h3,
body .h3,
body h4,
body .h4,
body h5,
body .h5,
body h6,
body .h6,
body .widget-title,
body .tt-card-section__title {
    font-size: var(--tt-font-lg) !important;
    line-height: 1.35 !important;
}

/* Navigation, tabs and breadcrumbs. */
body .nav > li > a,
body .menu-item > a,
body .header-nav a,
body .footer-nav a,
body .breadcrumbs,
body .breadcrumbs a,
body .woocommerce-breadcrumb,
body .woocommerce-breadcrumb a,
body .tabbed-content .nav-tabs > li > a,
body .woocommerce-tabs .tabs li a,
body .tt-card-tabs__button,
body .tt-product-tabs__trigger,
body .tt-mobile-tab-trigger,
body [role="tab"] {
    font-size: var(--tt-font-sm) !important;
}

/* Form controls. */
body input:not([type="checkbox"]):not([type="radio"]),
body textarea,
body select,
body .select2-container .select2-selection,
body .select2-container .select2-selection__rendered,
body .woocommerce form .form-row input.input-text,
body .woocommerce form .form-row textarea {
    font-size: var(--tt-font-sm) !important;
}

body input::placeholder,
body textarea::placeholder {
    font-size: var(--tt-font-sm) !important;
}

body button,
body .button,
body input[type="submit"],
body input[type="button"],
body input[type="reset"],
body a.button,
body .btn,
body .tt-btn,
body .tt-card__button,
body .single_add_to_cart_button,
body .checkout-button,
body #place_order {
    font-size: var(--tt-font-sm) !important;
    line-height: 1.2 !important;
}

/* Product and post cards. */
body .tt-card__title,
body .tt-product-card__title,
body .tt-post-card__title,
body .product-small .name,
body .product-small .name a,
body .product-title a,
body .post-item .post-title,
body .post-item .post-title a,
body .box-text .name,
body .box-text .name a,
body .box-text .post-title,
body .box-text .post-title a {
    font-size: var(--tt-font-lg) !important;
    line-height: 1.35 !important;
}

body .tt-card__excerpt,
body .tt-product-card__excerpt,
body .tt-post-card__excerpt,
body .box-text p,
body .product-small .box-text p,
body .post-item .box-text p {
    font-size: var(--tt-font-sm) !important;
    line-height: 1.5 !important;
}

/* Price hierarchy: current price is clear but never oversized. */
body .price,
body .price ins,
body .price > .amount,
body .woocommerce-Price-amount,
body .tt-card__price,
body .tt-product-price,
body .tt-product-main__price,
body .tt-cart-summary__total,
body .order-total .amount {
    font-size: var(--tt-font-xl) !important;
    line-height: 1.25 !important;
}

body .price del,
body del .woocommerce-Price-amount,
body .tt-card__old-price,
body .tt-product-old-price,
body .cart-subtotal .amount {
    font-size: var(--tt-font-sm) !important;
}

body .single-product .summary .price,
body .single-product .summary .price ins,
body .single-product .summary .price > .amount,
body .tt-sticky-product-cta__price,
body .woocommerce-checkout-review-order-table .order-total .amount,
body .cart_totals .order-total .amount {
    font-size: var(--tt-font-2xl) !important;
}

/* Small supporting information. */
body small,
body .small,
body .is-small,
body .badge,
body .tag,
body .badge-container,
body .onsale,
body .stock,
body .sku_wrapper,
body .posted_in,
body .tagged_as,
body .product_meta,
body .product_meta a,
body .tt-card__meta,
body .tt-card__badge,
body .tt-card__stock,
body .tt-product-meta,
body .tt-post-meta,
body .entry-meta,
body .entry-meta a,
body .comment-meta,
body .woocommerce-review__published-date,
body .woocommerce-review__dash,
body .woocommerce-error,
body .woocommerce-info,
body .woocommerce-message,
body .form-row .description,
body .tt-help-text,
body .tt-trust-item,
body .tt-checkout-progress,
body .tt-checkout-progress * {
    font-size: var(--tt-font-xs) !important;
}

/* Cart / checkout. */
body.woocommerce-cart .product-name,
body.woocommerce-cart .product-name a,
body.woocommerce-checkout .product-name,
body .tt-cart-item__name,
body .tt-order-product__name {
    font-size: var(--tt-font-md) !important;
}

body .tt-cart-summary__title,
body .tt-order-summary__title,
body .woocommerce-checkout-review-order h3,
body #order_review_heading {
    font-size: var(--tt-font-lg) !important;
}

body.woocommerce-checkout .form-row > label,
body.woocommerce-cart .coupon label,
body .tt-vat-option,
body .tt-note-toggle {
    font-size: var(--tt-font-sm) !important;
}

/* Single post details. */
body.single-post .tt-single-post__eyebrow,
body.single-post .tt-single-post__meta,
body.single-post .tt-single-post__meta *,
body.single-post .tt-toc__title,
body.single-post .tt-post-tags,
body.single-post .tt-post-author__role {
    font-size: var(--tt-font-xs) !important;
}

body.single-post .entry-content,
body.single-post .entry-content p,
body.single-post .entry-content li,
body.single-post .entry-content td,
body.single-post .entry-content th {
    font-size: var(--tt-font-md) !important;
}

body.single-post .entry-content h2 { font-size: var(--tt-font-xl) !important; }
body.single-post .entry-content h3,
body.single-post .entry-content h4 { font-size: var(--tt-font-lg) !important; }

/* Footer / utility areas. */
body footer,
body footer p,
body footer li,
body footer a,
body .footer-wrapper,
body .footer-wrapper p,
body .footer-wrapper li,
body .footer-wrapper a,
body .absolute-footer,
body .absolute-footer * {
    font-size: var(--tt-font-sm) !important;
}

body footer .widget-title,
body .footer-wrapper .widget-title,
body footer h3,
body footer h4 {
    font-size: var(--tt-font-lg) !important;
}

/* Search remains compact and consistent with the new type scale. */
body .searchform input[type="search"],
body .search-form input[type="search"],
body .woocommerce-product-search input[type="search"],
body input.search-field {
    font-size: var(--tt-font-sm) !important;
}

body .searchform button,
body .search-form button,
body .woocommerce-product-search button,
body .search-submit {
    font-size: var(--tt-font-2xl) !important;
}

/* Icon-font controls: never allow inherited giant icon sizes. */
body button i,
body .button i,
body a.button i,
body .icon-search,
body .icon-angle-down,
body .icon-angle-up,
body .icon-phone,
body .icon-shopping-cart,
body .icon-menu,
body .icon-user {
    font-size: var(--tt-font-2xl) !important;
}

/* Keep controls compact; do not make text smaller to compensate for oversized boxes. */
body .tt-commerce-ui input:not([type="checkbox"]):not([type="radio"]),
body .tt-commerce-ui select,
body .tt-commerce-ui textarea,
body.woocommerce-checkout .form-row input.input-text,
body.woocommerce-checkout .form-row select,
body.woocommerce-cart .quantity input.qty {
    min-height: var(--tt-control-height) !important;
}

/* Mobile: slightly denser while remaining inside 13–18px. */
@media (max-width: 849px) {
    html body,
    body .page-wrapper,
    body #wrapper,
    body #main,
    body p,
    body li,
    body td,
    body th,
    body .entry-content,
    body .entry-summary {
        font-size: var(--tt-font-sm) !important;
    }

    body h1,
    body .h1,
    body .entry-title,
    body .product-title,
    body .page-title,
    body .tt-single-post__title,
    body .tt-product-main__title {
        font-size: var(--tt-font-2xl) !important;
    }

    body h2,
    body .h2,
    body .section-title-main,
    body .tt-section-title {
        font-size: var(--tt-font-xl) !important;
    }

    body h3,
    body h4,
    body h5,
    body h6,
    body .widget-title {
        font-size: var(--tt-font-lg) !important;
    }

    body .tt-card__title,
    body .tt-product-card__title,
    body .tt-post-card__title,
    body .product-small .name,
    body .product-small .name a,
    body .post-item .post-title,
    body .post-item .post-title a {
        font-size: var(--tt-font-md) !important;
    }

    body .price,
    body .price ins,
    body .price > .amount,
    body .woocommerce-Price-amount,
    body .tt-card__price,
    body .tt-product-price {
        font-size: var(--tt-font-lg) !important;
    }

    body .single-product .summary .price,
    body .single-product .summary .price ins,
    body .single-product .summary .price > .amount,
    body .tt-sticky-product-cta__price,
    body .order-total .amount {
        font-size: var(--tt-font-xl) !important;
    }

    body button,
    body .button,
    body input[type="submit"],
    body a.button,
    body .btn,
    body input:not([type="checkbox"]):not([type="radio"]),
    body textarea,
    body select {
        font-size: var(--tt-font-sm) !important;
    }
}


/* === tt-header-actions.css === */
/**
 * TT Header Action Alignment v3.7.5
 * Keeps icon + text buttons (Tin Tức, Giỏ hàng, etc.) on one visual axis.
 * Loaded after typography and theme color CSS.
 */

/* Common header action links/buttons. Keep this scoped to header only. */
.header .header-button > a,
.header .header-button > .button,
.header .header-button a.button,
.header .nav > li > a.button,
.header .nav > li.header-button > a,
.header .cart-item > a,
.header .cart-item a.header-cart-link,
.header a.header-cart-link {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 7px !important;
    min-height: 38px !important;
    height: 38px !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    line-height: 1 !important;
    vertical-align: middle !important;
    white-space: nowrap !important;
}

/* Primary/pill actions get a consistent compact horizontal padding. */
.header .header-button > .button,
.header .header-button a.button,
.header .nav > li > a.button {
    padding-left: 14px !important;
    padding-right: 14px !important;
}

/* Never let icon-font baseline/margins pull the button content off center. */
.header .header-button a > i,
.header .header-button .button > i,
.header .nav > li > a.button > i,
.header .cart-item > a > i,
.header .header-cart-link > i,
.header .header-button a > svg,
.header .nav > li > a.button > svg,
.header .header-cart-link > svg {
    position: static !important;
    display: block !important;
    flex: 0 0 auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 18px !important;
    line-height: 18px !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* Text spans also use a neutral line box instead of an inherited tall button line-height. */
.header .header-button a > span,
.header .nav > li > a.button > span,
.header .cart-item > a > span,
.header .header-cart-link > span {
    display: inline-flex !important;
    align-items: center !important;
    min-height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 18px !important;
}

/* Flatsome cart icon/bag wrapper: align without disturbing its count badge. */
.header .cart-item .cart-icon,
.header .header-cart-link .cart-icon,
.header .cart-item .image-icon,
.header .header-cart-link .image-icon {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 !important;
    vertical-align: middle !important;
    transform: none !important;
}

/* Keep the count badge floating independently, so it cannot shift the icon/text row. */
.header .cart-item .cart-icon strong,
.header .header-cart-link .cart-icon strong,
.header .cart-item .cart-count,
.header .header-cart-link .cart-count {
    position: absolute !important;
    z-index: 3 !important;
    top: -8px !important;
    right: -9px !important;
    margin: 0 !important;
    line-height: 16px !important;
    text-align: center !important;
}

/* Some Flatsome button themes inject translated icon offsets. */
.header .button i:first-child,
.header .button i:last-child,
.header .header-button i:first-child,
.header .header-button i:last-child {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* Search submit is not a CTA/header pill; search CSS owns it entirely. */
.header .searchform button[type="submit"],
.header .searchform .ux-search-submit {
    gap: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
}

@media (max-width: 849px) {
    .header .header-button > a,
    .header .header-button > .button,
    .header .header-button a.button,
    .header .nav > li > a.button,
    .header .nav > li.header-button > a,
    .header .cart-item > a,
    .header a.header-cart-link {
        min-height: 36px !important;
        height: 36px !important;
        gap: 6px !important;
    }

    .header .header-button > .button,
    .header .header-button a.button,
    .header .nav > li > a.button {
        padding-left: 11px !important;
        padding-right: 11px !important;
    }

    .header .header-button a > i,
    .header .header-button .button > i,
    .header .nav > li > a.button > i,
    .header .cart-item > a > i,
    .header .header-cart-link > i,
    .header .header-button a > svg,
    .header .nav > li > a.button > svg,
    .header .header-cart-link > svg {
        width: 17px !important;
        height: 17px !important;
        font-size: 17px !important;
        line-height: 17px !important;
    }
}