/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** UNIFIED CUSTOM CSS ***************/

/* ==========================================================================
   1. KHAI BÁO FONT & ĐỊNH DẠNG CHUNG (GLOBAL)
   ========================================================================== */
@font-face {
    font-family: 'iCiel BCCubano';
    src: url('/wp-content/themes/flatsome-child/assets/fonts/iCielBCCubano-Normal.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

body h1, body h2, body h3, body h4, body h5 {
    font-family: 'iCiel BCCubano', sans-serif;
}

h5 a {
    font-family: 'Inter Tight';
}

.nav > li.active > a {
    color: #235DA7;
}

.tag-label, 
.has-hover:hover .tag-label {
    background-color: transparent;
}

tr#user-10, 
tr#user_10 {
    display: none !important;
}


/* ==========================================================================
   2. HEADER & NAVIGATION
   ========================================================================== */
#header {
    height: 128px;
    background: linear-gradient(to right, #235DA7, #61A6FF);
}
@media (max-width: 768px) {
    #header {
        height: 55px;
    }
}

.home #header {
    height: auto;
}

.header-wrapper {
    position: fixed;
    top: 16px;
    left: 0;
    right: 0;
    width: 100%;
    z-index: 999;
    pointer-events: none;
}

.header-wrapper > #masthead {
    max-width: 1584px;
    margin: 0 auto;
    pointer-events: auto;
    background-color: #fff;
    border-radius: 99px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.header-inner {
    background-color: #FEFEFE;
    border-radius: 100px; 
    padding: 0 30px; 
    margin: 0 auto; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); 
}

.header-bg-color.fill {
    background-color: transparent !important;
}

.logo-left .logo {
    margin-right: 111px;
}

.nav-spacing-xlarge > li {
    margin: 0 16px;
}

.nav-right > li {
    margin: 0 12px;
}

.nav-top-link svg path {
    fill: #000000;
    transition: fill 0.2s ease; 
}

.nav-top-link:hover svg path,
.nav-top-link[aria-current="page"] svg path {
    fill: #F9A51E;
}

.nav-dropdown-has-border .nav-dropdown {
    border: none;
    border-radius: 8px;
    padding: 10px 0px;
    box-shadow: 1px 1px 15px rgba(0, 0, 0, .15);
}

.nav-dropdown > li > a:hover {
    color: #fff !important;
}

.nav-dropdown > li > a {
    border-bottom: none !important;
    transition: all 0.1s;
}

.nav-dropdown > li {
    padding-left: 10px;
    position: relative;
}

.nav-dropdown > li:hover {
    background: #235DA7;
}

.nav-dropdown > li::after {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 8px;
    height: 100%;
    background-color: #f5a623;
    border-radius: 0 8px 8px 0;
    opacity: 0;
}

.nav-dropdown > li:hover::after {
    opacity: 1;
}


/* ==========================================================================
   3. TRANG CHỦ & ĐIỀU HƯỚNG DANH MỤC
   ========================================================================== */
.tieu-de {
    width: 100%;
    text-align: center;
}

.tieu-de h2 {
    color: #235DA7;
    font-size: 40px;
    text-transform: uppercase;
    margin-bottom: 36px;
    font-weight: 400;
}

.gallery-home .box-image img {
    height: 64px;
    object-fit: contain;
}

.sec-banner-home {
    padding: 0 30px;
    padding-bottom: 0 !important;
}

.tabbed-content .nav {
    background-color: #F5F6F8;
    width: fit-content;
    margin: 0 auto;
    border-radius: 96px;
    padding: 4px 6px;
}

.tab-home .nav > li > a {
    padding: 8px 24px;
    text-transform: none;
    font-size: 16px;
    line-height: 24px;
    font-weight: 500;
    color: #235DA7;
}

.tab-home .nav-box > li.active > a,
.tab-home .nav-pills > li.active > a,
.tab-home .nav-pills > li:hover > a {
    background-color: #F9A51E;
    color: #fff;
}

.sec-category-banner {
    border-bottom: 10px solid #235DA7;
}

.category-banner-home {
    margin-bottom: -120px;
}

.row-danh-muc {
    border-bottom: 2px solid #F9A51E;
}

.sec-danh-muc {
    padding-top: 52px !important;
    padding-bottom: 37px !important;
    border-bottom: 1.5px solid #F9A51E;
}

.tgs-catalog-heading__shop {
    font-weight: 400;
    font-size: 40px;
    color: #235DA7;
}


/* ==========================================================================
   4. TRANG CHI TIẾT SẢN PHẨM & WOOCOMMERCE LỚP NGOÀI
   ========================================================================== */
.product-small .category,
.woocommerce-variation-price,
.woo-selected-variation-item-name {
    display: none !important;
}

.custom-product-archive {
    padding: 0 0px 80px 0px;
    max-width: 1400px; 
    margin: 0 auto;
}

.tgs-sp-summary__price span.amount.woocommerce-Price-amount {
    color: #F9A51E;
    font-size: 32px;
    font-weight: 700;
    line-height: 40px;
}

.tgs-sp-summary__price .woocommerce-Price-amount {
    display: inline-block;
    vertical-align: baseline;
}

.tgs-sp-summary__price del .amount {
    text-decoration: line-through;
}

.variations tr {
    display: flex;
    align-items: center;
}

.variations label,
.variations .label label {
    font-weight: 400;
    font-size: 16px;
    line-height: 24px;
}

.tgs-sp-summary__intro ul li {
    margin-left: 40px;
}

.tgs-single-product__top button {
    margin: 0 !important;
}

.tgs-sp-summary__purchase form {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;
}

.woocommerce-variation-add-to-cart > *, 
form.cart > * {
    flex: 1 1 auto;
}

.tgs-two-row-products .tgs-product-card:hover .woocommerce-loop-product__title, 
.tgs-two-row-products .tgs-product-card:hover .woocommerce-loop-product__title a, 
.product-title a:hover,
.dark .widget a:hover, 
.dark a:hover {
    color: #F9A51E !important;
}

.woocommerce-Tabs-panel h2, 
.product-short-description h2,
.tgs-sp-accordion__content h2,
.tgs-single-product h2,
.product-info h2,
#tab-description h2,
.panel.entry-content h2 {
    color: #1F1F1F !important; 
    text-transform: none !important; 
    margin-top: 32px !important; 
    margin-bottom: 16px !important;
}

.woocommerce-Tabs-panel h2 strong, 
.product-short-description h2 strong,
.tgs-sp-accordion__content h2 strong,
.tgs-single-product h2 strong,
.product-info h2 strong,
#tab-description h2 strong,
.panel.entry-content h2 strong,
.tgs-sp-accordion__content h2 b,
.tgs-single-product h2 span,
.woocommerce-Tabs-panel p, 
.woocommerce-Tabs-panel li,
.tgs-single-product p,
.tgs-single-product li,
#tab-description p,
#tab-description li,
.panel.entry-content p,
.panel.entry-content li {
    color: #1F1F1F !important; 
}

.tgs-single-product blockquote {
    border-left: 4px solid #F9A51E;
    background: #FFF9F0;
    padding: 16px 20px;
    margin: 0 0 24px 0;
    border-radius: 0 8px 8px 0;
}

.tgs-single-product blockquote p,
.tgs-single-product blockquote span,
.tgs-single-product blockquote strong {
    margin: 0;
    color: #235DA7;
    font-weight: 600;
    font-style: italic;
    font-size: 15px !important;
}

.tgs-spec-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 24px;
    border: none !important; 
    background-color: transparent !important;
}

.tgs-spec-table tbody tr {
    border-bottom: 1px solid #E5E7EB; 
}

.tgs-spec-table tbody tr:last-child {
    border-bottom: none;
}

.tgs-spec-table th, 
.tgs-spec-table td {
    padding: 16px 0; 
    border: none !important; 
    background-color: transparent !important;
    vertical-align: top;
    font-size: 16px;
    line-height: 1.5;
}

.tgs-spec-table th,
.tgs-spec-table th p,
.tgs-spec-table th span {
    width: 25%;
    text-align: left !important;
    font-weight: 700 !important; 
    color: #1F1F1F !important; 
    text-transform: none !important; 
}

.tgs-spec-table td {
    width: 75%;
    text-align: right !important; 
    font-weight: 500;
    color: #1F1F1F !important; 
}

.tgs-note-red {
    color: #DC2626;
    font-weight: 500;
    font-size: 14px;
}


/* ==========================================================================
   5. CÁC THÀNH PHẦN GIAO DIỆN KHÁC (TABS, ACCORDION, SLIDER)
   ========================================================================== */
.tab-tu-van {
    border-radius: 24px;
    background: #FFF1DB;
    padding: 36px 21px;
}

.tab-tu-van .nav {
    background-color: transparent;
}

.tab-tu-van .nav-line-bottom {
    justify-content: space-between;
    margin: 0;
    width: 100%;
    flex-wrap: nowrap;
    position: relative; 
}

.tab-tu-van .nav-line-bottom span {
    font-family: 'iCiel BCCubano', sans-serif;
    font-size: 24px;
    font-weight: 400;
}

.tab-tu-van .nav-line-bottom .tab {
    width: 100%;
    text-align: center;
}

.nav-line-bottom > li > a:before {
    background-color: #F9A51E;
    height: 6px;
}

.tab-tu-van .nav-line-bottom:before {
    content: "";
    width: 100%;
    position: absolute;
    bottom: 4px;
    background-color: #FFDCA4;
    height: 2px;
}

.cau-hoi-thuong-gap .accordion-item:first-child .accordion-title {
    border-top: none;
}

.cau-hoi-thuong-gap .toggle {
    right: 0;
    left: auto;
    top: 24px;
}

.accordion-title {
    padding: 24px 0px;
    border-top: 1.5px solid #DEDEDE;
}

.accordion-title.active {
    background-color: transparent; 
    padding-bottom: 0;
    border-color: #DEDEDE;
}

.accordion-inner {
    padding: 0;
    padding-top: 16px;
}

.tgs-sp-faq-content .accordion-title span {
    font-weight: 700;
    color: #000;
}

.tgs-sp-faq-content .accordion-title.active span {
    color: #235DA7;
}

.tgs-sp-faq-content p {
    color: #000;
}

.post-slider .flickity-page-dots .dot {
    margin: 0;
    border-radius: 0;
    width: 177px;
    background-color: #FFEDD0;
    opacity: 1;
}

.post-slider .flickity-page-dots .dot:first-child {
    border-radius: 60px 0 0 60px;
}

.post-slider .flickity-page-dots .dot:last-child {
    border-radius: 0 60px 60px 0;
}

.post-slider .flickity-page-dots .dot.is-selected {
    background-color: #235DA7;
}

.slider-nav-light .flickity-page-dots .dot {
    background-color: #fff;
}

.slider-nav-light .flickity-page-dots .dot.is-selected {
    background-color: #F9A51E;
    border-color: #F9A51E;
}

.pcb-section .flickity-prev-next-button,
.tgs-two-row-products .flickity-prev-next-button,
.flickity-slider .flickity-prev-next-button,
.flickity-enabled .flickity-prev-next-button {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    min-height: 40px;
    border-radius: 50% !important;
    border: none !important;
    background: #ffffff !important;
    color: #235DA7 !important;
    box-shadow: 0 2px 8px rgba(35,93,167,0.15) !important;
    opacity: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
    transition: all .2s ease;
}

.pcb-section .flickity-prev-next-button:hover,
.tgs-two-row-products .flickity-prev-next-button:hover,
.flickity-slider .flickity-prev-next-button:hover,
.flickity-enabled .flickity-prev-next-button:hover {
    background: #235DA7 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(35,93,167,0.3) !important;
}

.pcb-section .flickity-prev-next-button .arrow,
.tgs-two-row-products .flickity-prev-next-button .arrow,
.flickity-slider .flickity-prev-next-button .arrow,
.flickity-enabled .flickity-prev-next-button .arrow,
.pcb-section .flickity-prev-next-button .flickity-button-icon,
.tgs-two-row-products .flickity-prev-next-button .flickity-button-icon,
.flickity-slider .flickity-prev-next-button .flickity-button-icon,
.flickity-enabled .flickity-prev-next-button .flickity-button-icon,
.pcb-section .flickity-prev-next-button svg,
.tgs-two-row-products .flickity-prev-next-button svg,
.flickity-slider .flickity-prev-next-button svg,
.flickity-enabled .flickity-prev-next-button svg {
    display: none !important;
}

.pcb-section .flickity-prev-next-button::before,
.tgs-two-row-products .flickity-prev-next-button::before,
.flickity-slider .flickity-prev-next-button::before,
.flickity-enabled .flickity-prev-next-button::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
}

.pcb-section .flickity-prev-next-button.previous::before,
.tgs-two-row-products .flickity-prev-next-button.previous::before,
.flickity-slider .flickity-prev-next-button.previous::before,
.flickity-enabled .flickity-prev-next-button.previous::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.42243 6.07733C6.74786 6.40277 6.74786 6.9304 6.42243 7.25584L4.51168 9.16659L17.4998 9.16658C17.9601 9.16658 18.3332 9.53968 18.3332 9.99992C18.3332 10.4602 17.9601 10.8333 17.4998 10.8333L4.51168 10.8333L6.42243 12.744C6.74786 13.0694 6.74786 13.5971 6.42243 13.9225C6.09699 14.2479 5.56935 14.2479 5.24391 13.9225L1.91058 10.5892C1.58514 10.2637 1.58514 9.7361 1.91058 9.41066L5.24391 6.07733C5.56935 5.75189 6.09699 5.75189 6.42243 6.07733Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.42243 6.07733C6.74786 6.40277 6.74786 6.9304 6.42243 7.25584L4.51168 9.16659L17.4998 9.16658C17.9601 9.16658 18.3332 9.53968 18.3332 9.99992C18.3332 10.4602 17.9601 10.8333 17.4998 10.8333L4.51168 10.8333L6.42243 12.744C6.74786 13.0694 6.74786 13.5971 6.42243 13.9225C6.09699 14.2479 5.56935 14.2479 5.24391 13.9225L1.91058 10.5892C1.58514 10.2637 1.58514 9.7361 1.91058 9.41066L5.24391 6.07733C5.56935 5.75189 6.09699 5.75189 6.42243 6.07733Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
}
.pcb-section .flickity-prev-next-button.next::before, 
.tgs-two-row-products .flickity-prev-next-button.next::before, 
.flickity-slider .flickity-prev-next-button.next::before, 
.flickity-enabled .flickity-prev-next-button.next::before {
    -webkit-mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5772 6.07733C13.9027 5.75189 14.4303 5.75189 14.7558 6.07733L18.0891 9.41066C18.4145 9.7361 18.4145 10.2637 18.0891 10.5892L14.7558 13.9225C14.4303 14.2479 13.9027 14.2479 13.5772 13.9225C13.2518 13.5971 13.2518 13.0694 13.5772 12.744L15.488 10.8333L2.49984 10.8333C2.0396 10.8333 1.6665 10.4602 1.6665 9.99992C1.6665 9.53968 2.0396 9.16658 2.49984 9.16658L15.488 9.16659L13.5772 7.25584C13.2518 6.9304 13.2518 6.40277 13.5772 6.07733Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    mask: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.5772 6.07733C13.9027 5.75189 14.4303 5.75189 14.7558 6.07733L18.0891 9.41066C18.4145 9.7361 18.4145 10.2637 18.0891 10.5892L14.7558 13.9225C14.4303 14.2479 13.9027 14.2479 13.5772 13.9225C13.2518 13.5971 13.2518 13.0694 13.5772 12.744L15.488 10.8333L2.49984 10.8333C2.0396 10.8333 1.6665 10.4602 1.6665 9.99992C1.6665 9.53968 2.0396 9.16658 2.49984 9.16658L15.488 9.16659L13.5772 7.25584C13.2518 6.9304 13.2518 6.40277 13.5772 6.07733Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
    

}
.pcb-section .flickity-prev-next-button:disabled,
.tgs-two-row-products .flickity-prev-next-button:disabled,
.flickity-slider .flickity-prev-next-button:disabled,
.flickity-enabled .flickity-prev-next-button:disabled,
.pcb-section .flickity-prev-next-button[disabled],
.tgs-two-row-products .flickity-prev-next-button[disabled],
.flickity-slider .flickity-prev-next-button[disabled],
.flickity-enabled .flickity-prev-next-button[disabled] {
    opacity: 0.38;
    cursor: not-allowed;
    box-shadow: 0 2px 8px rgba(35,93,167,0.15) !important;
}


/* ==========================================================================
   6. CONTACT FORM 7 TÙY CHỈNH (TIM-SUA-FORM-WRAPPER)
   ========================================================================== */
.wpcf7-form {
    margin: 0;
}

.wpcf7-form-wrapper,
.tim-sua-form-wrapper {
    background: #fff;
    border-radius: 20px;
    padding: 24px;
    margin: 0 auto;
    border: 1px solid #F9A51E;
}
 
.tim-sua-form-wrapper .form-title {
    font-family: 'iCiel BCCubano', sans-serif;
    font-weight: 400;
    font-size: 24px;
    color: #F9A51E;
    text-transform: uppercase;
    margin: 0 0 16px 0;
}
 
.tim-sua-form-wrapper .wpcf7-form-control-wrap label,
.tim-sua-form-wrapper .field-label {
    display: block;
    font-size: 14px;
    font-weight: 500;
    color: #333;
    margin-bottom: 8px;
}
 
.tim-sua-form-wrapper .wpcf7-select,
.tim-sua-form-wrapper select {
    width: 100%;
    height: 48px;
    border: 2px solid #e6e6e6;
    border-radius: 8px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    font-size: 16px;
    color: #8C8D9F;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}
 
.tim-sua-form-wrapper .wpcf7-select:focus,
.tim-sua-form-wrapper select:focus {
    outline: none;
    border-color: #f5a623;
    box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.15);
    color: #333;
}
 
.tim-sua-form-wrapper .nhu-cau-label {
    font-size: 14px;
    font-weight: 600;
    color: #000;
    margin: 0px 0 16px 0;
    display: block;
}
 
.tim-sua-form-wrapper .wpcf7-checkbox,
.tim-sua-form-wrapper .checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 16px;
}
 
.tim-sua-form-wrapper .wpcf7-list-item,
.tim-sua-form-wrapper .checkbox-item {
    display: flex;
    gap: 10px;
    cursor: pointer;
    margin: 0;
}
 
.tim-sua-form-wrapper .wpcf7-list-item label,
.tim-sua-form-wrapper .checkbox-item label {
    font-size: 14px;
    color: #333;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
}
 
.tim-sua-form-wrapper .wpcf7-list-item input[type="checkbox"],
.tim-sua-form-wrapper input[type="checkbox"] {
    width: 20px;
    height: 20px;
    border: 1.5px solid #d0c4b0;
    border-radius: 5px;
    background: #fff;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    cursor: pointer;
    position: relative;
    flex-shrink: 0;
    transition: border-color 0.2s, background 0.2s;
    margin: 0;
}
 
.tim-sua-form-wrapper .wpcf7-list-item input[type="checkbox"]:checked,
.tim-sua-form-wrapper input[type="checkbox"]:checked {
    background: #f5a623;
    border-color: #f5a623;
}
 
.tim-sua-form-wrapper .wpcf7-list-item input[type="checkbox"]:checked::after,
.tim-sua-form-wrapper input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 6px;
    height: 10px;
    border: 2px solid #fff;
    border-top: none;
    border-left: none;
    transform: rotate(45deg);
}
 
.tim-sua-form-wrapper .wpcf7-submit,
.tim-sua-form-wrapper input[type="submit"],
.tim-sua-form-wrapper button[type="submit"] {
    width: 100%;
    padding: 16px;
    margin: 0px;
    background: #f5a623;
    color: #1a3a6b;
    line-height: 1;
    border: none;
    border-radius: 8px;
    font-family: 'iCiel BCCubano', sans-serif;
    font-weight: 400;
    font-size: 18px;
    text-transform: uppercase;
    cursor: pointer;
    transition: background 0.2s, transform 0.15s, box-shadow 0.2s;
    box-shadow: 0 4px 12px rgba(245, 166, 35, 0.35);
}
 
.tim-sua-form-wrapper .wpcf7-submit:hover,
.tim-sua-form-wrapper input[type="submit"]:hover,
.tim-sua-form-wrapper button[type="submit"]:hover {
    background: #e8960f;
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(245, 166, 35, 0.45);
}
 
.tim-sua-form-wrapper .wpcf7-submit:active,
.tim-sua-form-wrapper input[type="submit"]:active {
    transform: translateY(0);
    box-shadow: 0 2px 8px rgba(245, 166, 35, 0.3);
}
 
.wpcf7 .wpcf7-spinner {
    display: none !important;
}
 
.wpcf7-response-output {
    border-radius: 10px !important;
    font-size: 13px !important;
    margin-top: 16px !important;
    padding: 10px 14px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
}


/* ==========================================================================
   7. TRANG THANH TOÁN (CHECKOUT & CART)
   ========================================================================== */
.checkout-page-title, 
.wc-empty-cart-message,
.woocommerce-billing-fields h3 {
    display: none;
}

.woocommerce-billing-fields {
    border-top: none;
    padding-top: 0;
}

.tgs-order-table .processing:before {
    display: none;
}

/* User Account Settings */
.my-account .large-3 {
    display: none;
}
.my-account .large-9 {
    width: 100%;
}
.my-account .row {
    justify-content: center;
}


/* ==========================================================================
   8. FOOTER GIAO DIỆN
   ========================================================================== */
.contact-card {
    color: white;
}

.info-row {
    display: flex;
    margin-bottom: 16px;
    line-height: 22px;
    font-size: 16px; 
}

.info-row:last-child {
    margin-bottom: 0;
}

.label {
    font-weight: bold;
    min-width: 100px; 
}

.content {
    flex: 1;
}

.highlight {
    color: #F9A51E; 
    font-weight: bold;
}

#footer h2 {
    font-size: 20px;
    margin-bottom: 16px;
}

.row-footer-divider {
    margin-top: -90px;
    border-bottom: 1px solid rgba(254, 254, 254, 0.15); 
    margin-bottom: 16px;
}

.follow-icons .icon-facebook::before,
.follow-icons .icon-instagram::before,
.follow-icons .icon-tiktok::before,
.follow-icons .icon-youtube::before {
    content: "";
    display: inline-block;
    width: 30px; 
    height: 30px;
    background-color: currentColor;
}

.follow-icons .icon-facebook::before {
    -webkit-mask: url('/wp-content/uploads/2026/05/Group_12611-1.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/05/Group_12611-1.svg') no-repeat center / contain;
}

.follow-icons .icon-instagram::before {
    -webkit-mask: url('/wp-content/uploads/2026/05/Group_12609.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/05/Group_12609.svg') no-repeat center / contain;
}

.follow-icons .icon-tiktok::before {
    -webkit-mask: url('/wp-content/uploads/2026/05/Group-512394.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/05/Group-512394.svg') no-repeat center / contain;
}

.follow-icons .icon-youtube::before {
    -webkit-mask: url('/wp-content/uploads/2026/05/Group_12610.svg') no-repeat center / contain;
    mask: url('/wp-content/uploads/2026/05/Group_12610.svg') no-repeat center / contain;
}

#footer .dark .social-icons .button.is-outline, 
#footer .button.icon:hover, 
#footer .social-icons .button.icon:not(.is-outline) {
    border-color: transparent !important;
    padding: 0;
}

.social-icons .button.icon:hover {
    background-color: transparent !important; 
    transform: translateY(-2px);
    transition: transform 0.3s ease;
}

.social-icons .button.facebook:hover,
.social-icons .button.instagram:hover,
.social-icons .button.tiktok:hover,
.social-icons .button.youtube:hover {
    color: currentColor !important;
}

.col-logo-footer {
    position: relative;
}

.logo-footer {
    position: absolute;
    left: -363px;
    top: -141px;
}

.logo-footer img {
    height: 323px;
    width: 323px;
}


/* ==========================================================================
   9. MEDIA QUERIES (RESPONSIVE) - QUY HOẠCH TỪ LỚN ĐẾN NHỎ
   ========================================================================== */

/* --- Tablet / Màn hình nhỏ (Max-width: 849px) --- */
@media (max-width: 849px) {
    .header-main li.html.custom {
        display: block;
    }

    .pcb-section .flickity-prev-next-button,
    .tgs-two-row-products .flickity-prev-next-button,
    .flickity-slider .flickity-prev-next-button,
    .flickity-enabled .flickity-prev-next-button {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px;
        min-height: 40px;
    }

    .pcb-section .flickity-prev-next-button::before,
    .tgs-two-row-products .flickity-prev-next-button::before,
    .flickity-slider .flickity-prev-next-button::before,
    .flickity-enabled .flickity-prev-next-button::before {
        width: 20px;
        height: 20px;
    }

    .col-margin-bottom {
        margin-bottom: 0px;
    }
}

/* --- Phân đoạn Flickity Button (Max-width: 600px) --- */
@media (max-width: 600px) {
    .pcb-section .flickity-prev-next-button.previous,
    .tgs-two-row-products .flickity-prev-next-button.previous,
    .flickity-slider .flickity-prev-next-button.previous,
    .flickity-enabled .flickity-prev-next-button.previous {
        left: 6px !important;
    }

    .pcb-section .flickity-prev-next-button.next,
    .tgs-two-row-products .flickity-prev-next-button.next,
    .flickity-slider .flickity-prev-next-button.next,
    .flickity-enabled .flickity-prev-next-button.next {
        right: 6px !important;
    }
}

/* --- Mobile chuẩn Bootstrap (Max-width: 576px) --- */
@media (max-width: 576px) {
    .tgs-catalog-heading__shop {
        font-size: 24px;
    }
    .sec-danh-muc {
        padding-top: 16px !important;
        padding-bottom: 16px !important;
    }
}

/* --- Mobile chung cũ (Max-width: 567px) --- */
@media (max-width: 567px) {
    .tgs-sp-summary__price span.amount.woocommerce-Price-amount {
        font-size: 20px;
    }
    .custom-product-archive {
        padding: 10px;
    }
    .sec-banner-home, 
    .sec-banner-home .col {
        padding: 0px;
        padding-top: 0!important;
    }
    .tab-tu-van .nav-line-bottom .tab {
        width: auto;
    }
    .tab-tu-van .nav-line-bottom span {
        font-size: 18px;
    }
}

/* --- Mobile nhỏ Flatsome (Max-width: 549px) --- */
@media (max-width: 549px) {
    .tieu-de h2 {
        font-size: 28px;
    }
    .sec-category-banner {
        border-bottom: 2px solid #235DA7;
    }
    .category-banner-home {
        margin-bottom: 0px;
    }
}

/* --- Mobile UX/UI Flatsome chung (Max-width: 48em tương đương ~768px) --- */
@media only screen and (max-width: 48em) {

    /* 1. XÓA TRIỆT ĐỂ HEADER CŨ VÀ CÁC THẺ GÂY KHOẢNG TRẮNG */
    #header, .header-wrapper, .header-bg, .sticky-dummy { 
        display: none !important; height: 0 !important; 
    }
    
    /* 2. CHỈ ÉP DUY NHẤT MAIN CÁCH ĐỈNH 60PX (Để né thanh tìm kiếm) */
    #wrapper, #content, .page-wrapper { 
        overflow-x: clip; padding-top: 0 !important; margin-top: 0 !important; 
    }
    #main { 
        overflow-x: clip; padding-top: 60px !important; margin-top: 0 !important; 
    }

    .header-inner {
        padding: 0 16px;
        border-radius: 28px;
    }

    .tabbed-content .nav {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        justify-content: flex-start;
        flex-wrap: nowrap;
        padding: 4px;
        border-radius: 24px;
    }

    .tab-home .nav > li {
        flex: 0 0 auto;
    }

    .tab-home .nav > li > a {
        padding: 8px 16px;
        font-size: 14px;
        line-height: 20px;
        white-space: nowrap;
    }

    .custom-product-archive {
        padding: 0 16px;
    }

    .tgs-sp-summary__intro ul li {
        margin-left: 20px;
    }

    .tgs-sp-summary__price span.amount.woocommerce-Price-amount {
        font-size: 24px;
        line-height: 1.25;
    }

    .tgs-single-product__top button {
        min-height: 40px;
        min-width: 40px;
    }

    .variations tr {
        align-items: flex-start;
        gap: 8px;
    }

    .variations td,
    .variations th {
        display: block;
        width: 100%;
    }

    .tab-tu-van {
        padding: 20px 16px;
        border-radius: 16px;
    }

    .tab-tu-van .nav-line-bottom {
        gap: 12px;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 8px;
        scrollbar-width: none;
    }

    .tab-tu-van .nav-line-bottom::-webkit-scrollbar,
    .tabbed-content .nav::-webkit-scrollbar {
        display: none;
    }

    .tab-tu-van .nav-line-bottom .tab {
        min-width: max-content;
        width: auto;
        flex: 0 0 auto;
    }

    .tab-tu-van .nav-line-bottom span {
        font-size: 18px;
        white-space: nowrap;
    }

    .nav-line-bottom>li>a:before {
        height: 4px;
    }

    .accordion-title {
        padding: 18px 0;
    }

    .wpcf7-form-wrapper,
    .tim-sua-form-wrapper {
        padding: 18px 16px;
        border-radius: 16px;
    }

    .tim-sua-form-wrapper .form-title {
        font-size: 20px;
        line-height: 1.2;
    }

    .tim-sua-form-wrapper .wpcf7-select,
    .tim-sua-form-wrapper select {
        height: 44px;
        font-size: 15px;
    }

    .tim-sua-form-wrapper .wpcf7-submit,
    .tim-sua-form-wrapper input[type="submit"],
    .tim-sua-form-wrapper button[type="submit"] {
        padding: 14px 16px;
        font-size: 16px;
    }

    .info-row {
        flex-direction: row;
        gap: 4px;
        font-size: 14px;
        line-height: 20px;
    }

    .label {
        min-width: 0;
    }

    #footer h2 {
        font-size: 18px;
        line-height: 1.3;
    }

    .row-footer-divider {
        margin-top: 0;
    }

    .post-slider .flickity-page-dots .dot {
        width: 64px;
    }

    .gallery-home .box-image img {
        height: 56px;
    }

    /* Mobile Specs Table */
    .tgs-spec-table th, 
    .tgs-spec-table td {
        display: block;
        width: 100%;
        text-align: left !important; 
        padding: 6px 0;
    }
  
    .tgs-spec-table th {
        padding-top: 16px;
        font-size: 14px;
    }
  
    .tgs-spec-table td {
        padding-top: 0;
        padding-bottom: 16px;
        font-size: 15px;
    }

    /* Support Bar */
    .support-bar { gap: 14px; padding: 14px 16px; } 
    .support-title { width: 100%; }
}

.support-bar { 
    background: #FFF1DB; 
    padding: 18px 28px; 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    gap: 40px; 
    flex-wrap: nowrap; 
} 
.support-title { 
    margin: 0; 
    color: #235DA7; 
    font-size: 20px; 
    font-weight: 400; 
    line-height: 1.2; 
} 
.support-item { 
    display: inline-flex; 
    align-items: center; 
    gap: 10px; 
    color: #222; 
    font-size: 16px; 
    text-decoration: none; 
    line-height: 1.2; 
    white-space: nowrap; 
} 
.support-item:hover { 
    opacity: 0.85; 
} 
.icon-wrap { 
    width: 24px; 
    height: 24px; 
    display: inline-flex; 
    align-items: center; 
    justify-content: center; 
    flex: 0 0 24px; 
} 
.icon-wrap svg { 
    width: 24px; 
    height: 24px; 
    display: block; 
}


/* ==========================================================================
   10. MOBILE BOTTOM NAV (MENU CHUNG)
   ========================================================================== */
.tgs-mobile-bottom-nav {
    display: none;
}

@media (max-width: 768px) {
    .tgs-mobile-bottom-nav {
        position: fixed;
        width: 100%;
        bottom: 0px;
        z-index: 9998;
        display: grid;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        align-items: stretch;
        background: #ffffff;
        box-shadow: 0 10px 26px rgba(19, 36, 67, 0.38);
        overflow: hidden;
    }

    .tgs-mobile-bottom-nav__item {
        min-height: 62px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 4px;
        color: #4b5563;
        text-decoration: none;
        background: #ffffff;
        border-right: 1px solid #f0f2f7;
        transition: color 0.2s ease, background-color 0.2s ease;
    }

    .tgs-mobile-bottom-nav__item:last-child {
        border-right: 0;
    }

    .tgs-mobile-bottom-nav__icon {
        width: 22px;
        height: 22px;
        line-height: 0;
    }

    .tgs-mobile-bottom-nav__icon svg {
        width: 22px;
        height: 22px;
        display: block;
    }

    .tgs-mobile-bottom-nav__label {
        font-size: 12px;
        line-height: 1.15;
        font-weight: 500;
        text-align: center;
    }

    .tgs-mobile-bottom-nav__item.is-active {
        color: #f5a623;
        background: #f4f8ff;
    }

    .tgs-mobile-bottom-nav__item:active {
        background: #edf3ff;
    }

    .tgs-mobile-cart-host .ccd-cart-wrapper {
        display: none !important;
    }

    .off-canvas-open .tgs-mobile-bottom-nav {
        opacity: 0;
        pointer-events: none;
    }
}