/* Petcare.vn - Responsive Mobile & Core Web Vitals Optimization CSS */
/**
 * ==============================================================================
 * Petcare.vn - Responsive Mobile & Core Web Vitals Optimization CSS
 * NGUYEN TAC BAT BUOC: Desktop (>=992px) giu nguyen 100% ban goc.
 * Moi rule thay doi nhin thay duoc CHI nam trong @media (mobile/tablet).
 * Ly do: theme goc dung .row{max-width:1140px;margin:0 auto} de can giua
 * footer/form. Override global max-width:100% se lam staging full-bleed.
 * ==============================================================================
 */

/* 0. Quy tac an toan dung chung moi man hinh (khong doi nhin thay desktop) */
html, body {
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
}

/* 0.1 Triệt tiêu rác Google Translate Extension vô tình dán vào nội dung trang (chống tràn 463px lề phải) */
#gtx-anchor,
.gtx-bubble,
.jfk-bubble,
#gtx-host,
[class*="gtx-"],
[class*="jfk-bubble"] {
    display: none !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    max-width: 0 !important;
    max-height: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    left: -9999px !important;
    pointer-events: none !important;
}

img, video, iframe, embed, object {
    max-width: 100% !important;
    box-sizing: border-box !important;
}
img {
    height: auto !important;
}

/* Triệt tiêu 100% CLS do SiteOrigin Panels stretch margin/padding -1000px */
html body.siteorigin-panels-before-js:not(.siteorigin-panels-css-container) .siteorigin-panels-stretch,
html body.siteorigin-panels-before-js .siteorigin-panels-stretch,
html body .siteorigin-panels-stretch,
.siteorigin-panels-stretch {
    margin-right: 0 !important;
    margin-left: 0 !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

/* 1. Giu cho khoi slider truoc khi RevSlider JS chay (chong CLS).
 * Ti le that cua anh slide dau (banner-2-2048x1072): 2048/1072 ~ 1.91.
 * KHONG ep min-height co dinh (fullscreen tu tinh height), chi giu ti le
 * + nen xam de khong nhay trang. */
@media (max-width: 991px) {
    .rev_slider_wrapper,
    rs-module-wrap {
        width: 100% !important;
        max-width: 100% !important;
        aspect-ratio: 2048 / 1072 !important;
        background-color: #f7f7f7 !important;
        overflow: hidden !important;
    }
}

/* Khung san pham WooCommerce tranh nhay layout */
.woocommerce ul.products li.product .woocommerce-loop-product__link,
.woocommerce ul.products li.product a img {
    display: block !important;
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
    background-color: #f5f5f5 !important;
}

/* Font hien thi muot (khong dung @font-face gia, Google Fonts do PHP lo) */
body, button, input, select, textarea {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* ==============================================================================
 * TU DAY TRO XUONG: CHI MOBILE/TABLET (<=991px). Desktop khong bi anh huong.
 * ============================================================================== */

/* 2. Chong tran le ngang + vo khung SiteOrigin tren mobile */
@media (max-width: 991px) {
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        position: relative !important;
    }

    #wrapper, #main_content, main, .site-content, .entry-content {
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow-x: hidden !important;
    }

    /* Triệt tiêu các ô trống SiteOrigin gây khoảng hở trắng trên mobile */
    .panel-grid-cell-empty {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* Thu hẹp khoảng đệm quá mức của SiteOrigin trên mobile để chống khoảng trắng chết */
    .page-id-268 .panel-widget-style,
    .panel-widget-style[style*="padding: 0 0 90px 0"],
    .panel-widget-style[style*="padding: 0px 0px 90px 0px"] {
        padding-bottom: 25px !important;
    }
    .page-id-268 .panel-row-style,
    .panel-row-style[style*="padding: 45px 0 45px 0"],
    .panel-row-style[style*="padding: 45px 0px 45px 0px"] {
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }

    /* Chống giật & tự động phóng to màn hình trên iOS Safari khi chạm vào ô nhập liệu (font-size >= 16px) */
    input[type="text"],
    input[type="search"],
    input[type="tel"],
    input[type="email"],
    input[type="url"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px !important;
    }

    /* Bang bieu cuon ngang trong khung, khong xo lech trang */
    table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        margin-bottom: 20px !important;
    }

    /* SiteOrigin Page Builder: 1 cot tren mobile */
    .panel-grid,
    .panel-grid-cell,
    .panel-row-style,
    .so-panel {
        width: 100% !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
        float: none !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    .panel-grid-cell {
        margin-bottom: 20px !important;
    }

    .panel-has-style > .panel-row-style {
        padding-left: 10px !important;
        padding-right: 10px !important;
    }

    /* Header co giãn tự nhiên, logo cân đối sắc nét, menu và cờ gọn gàng */
    header#header-region {
        float: none !important;
        height: auto !important;
        min-height: 60px !important;
        position: relative !important;
        background: #ffffff !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
        box-sizing: border-box !important;
        width: 100% !important;
    }

    header#header-region .row {
        width: 100% !important;
        display: block !important;
        position: relative !important;
        padding: 8px 12px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    header#header-region .row:after {
        content: "" !important;
        display: table !important;
        clear: both !important;
    }

    #logo {
        float: left !important;
        height: 50px !important;
        max-width: calc(100% - 110px) !important;
        padding: 0 !important;
        margin: 0 !important;
        display: flex !important;
        align-items: center !important;
    }

    #logo h1, #logo h1 a {
        height: 50px !important;
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    #logo img {
        height: 48px !important;
        max-height: 48px !important;
        width: auto !important;
        max-width: 100% !important;
        margin: 0 !important;
        object-fit: contain !important;
        vertical-align: middle !important;
        display: block !important;
    }

    .menu-button {
        float: right !important;
        height: 48px !important;
        min-height: 48px !important;
        width: 48px !important;
        min-width: 48px !important;
        margin: 1px 54px 0 0 !important;
        padding: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        background: transparent !important;
        border: none !important;
        font-size: 22px !important;
        box-sizing: border-box !important;
    }

    .gt_switcher_wrapper {
        position: fixed !important;
        top: 15px !important;
        right: 12px !important;
        z-index: 999999 !important;
        display: flex !important;
        align-items: center !important;
        gap: 6px !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    .gt_switcher_wrapper a img {
        width: 22px !important;
        height: 22px !important;
        display: inline-block !important;
    }

    .menu-collapsed #main_navigation {
        display: none !important;
    }

    #main_navigation {
        clear: both !important;
        float: none !important;
        width: 100% !important;
        max-width: 100% !important;
        background: #ffffff !important;
        box-sizing: border-box !important;
        padding: 0 !important;
        margin: 8px 0 0 0 !important;
        border-top: 1px solid #e0e0e0 !important;
        display: block !important;
    }

    #main_navigation > .site_main_menu,
    #main_navigation > ul {
        width: 100% !important;
        list-style: none !important;
        padding: 0 !important;
        margin: 0 !important;
        display: block !important;
    }

    /* Submenu trên Mobile: Mặc định thu gọn ẩn đi (display: none) */
    #main_navigation ul.sub-menu {
        display: none !important;
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        float: none !important;
        background: #f7faf8 !important;
        box-shadow: none !important;
        border-top: none !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Khi bấm vào xổ ra: menu cha có class .sub-expanded */
    #main_navigation li.menu-item-has-children.sub-expanded > ul.sub-menu {
        display: block !important;
    }

    /* Định dạng và thụt lề cho các mục menu con cấp 2 */
    #main_navigation ul.sub-menu li {
        border-bottom: 1px solid #ededed !important;
        background: #f7faf8 !important;
    }
    #main_navigation ul.sub-menu li a {
        padding-left: 32px !important;
        font-size: 15px !important;
        min-height: 44px !important;
        color: #444444 !important;
        background: transparent !important;
        font-weight: 400 !important;
    }
    #main_navigation ul.sub-menu li a:hover {
        color: #008751 !important;
        background: #eef5f1 !important;
    }

    /* Cấp 3 nếu có */
    #main_navigation ul.sub-menu ul.sub-menu li a {
        padding-left: 48px !important;
        font-size: 14px !important;
    }

    /* Nút mũi tên / chỉ báo xổ xuống ở menu cha */
    #main_navigation li.menu-item-has-children > a {
        position: relative !important;
        cursor: pointer !important;
    }
    #main_navigation a.has-submenu span.sub-arrow,
    #main_navigation li.menu-item-has-children span.sub-arrow {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 36px !important;
        height: 36px !important;
        font-size: 20px !important;
        font-weight: 600 !important;
        color: #008751 !important;
        margin-left: auto !important;
        transition: transform 0.25s ease !important;
    }
    #main_navigation li.menu-item-has-children.sub-expanded > a span.sub-arrow {
        transform: rotate(45deg) !important;
        color: #e53935 !important;
    }

    #main_navigation li {
        width: 100% !important;
        display: block !important;
        float: none !important;
        border-bottom: 1px solid #f0f0f0 !important;
        margin: 0 !important;
    }

    #main_navigation li a {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        width: 100% !important;
        min-height: 48px !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        box-sizing: border-box !important;
        color: #333333 !important;
        font-weight: 500 !important;
        text-decoration: none !important;
    }

    #main_navigation li a:hover,
    #main_navigation li.current-menu-item > a {
        color: #008751 !important;
        background: #f8faf9 !important;
    }

    .sticky .sticky-wrapper {
        height: auto !important;
    }

    /* Fix khoảng trống trắng (Dead Gap) trên các trang con Mobile (Dịch vụ, Giới thiệu...) */
    body:not(.home) section#banner {
        margin-bottom: 0 !important;
    }
    body:not(.home) #main_content {
        padding-top: 20px !important;
    }
    /* Đảm bảo các khối nội dung animate (.ots-wow) trên mobile trang con luôn hiển thị ngay, không bị trắng trơn trước khi cuộn */
    body:not(.home) .ots-wow,
    body:not(.home) .wow,
    body:not(.home) [data-animate] {
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        animation: none !important;
    }

    /* Banner & Slider container tren mobile: Co giãn hoàn hảo theo slider */
    section#banner {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin-bottom: 25px !important;
        position: relative !important;
        overflow: visible !important;
    }

    #banner_content {
        clear: both !important;
        float: none !important;
        width: 100% !important;
        left: 0 !important;
        padding-top: 0 !important;
        position: relative !important;
        min-height: calc(100vw * 1072 / 2048) !important;
        height: calc(100vw * 1072 / 2048) !important;
        overflow: hidden !important;
        display: block !important;
        margin: 0 !important;
    }

    /* Instant Hero Image Layer cho mobile (chống CLS & tăng tốc LCP) */
    #petcare-instant-hero-pic {
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        z-index: 1 !important;
        pointer-events: none !important;
        overflow: hidden !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #petcare-instant-hero-lcp {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        z-index: 1 !important;
        pointer-events: none !important;
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    #petcare-instant-hero-pic.hero-hidden {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
    }
    #rev_slider_1_1_wrapper,
    rs-module-wrap {
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
    }
    #pg-621-0 {
        clear: both !important;
        position: relative !important;
        margin-top: 15px !important;
        z-index: 2 !important;
    }

    /* SiteOrigin Row của Slider: Triệt tiêu hoàn toàn padding/margin để slider tràn viền 100% */
    #pg-615-0.panel-grid,
    #pg-615-0 .panel-row-style,
    #pgc-615-0-0.panel-grid-cell,
    #pgc-615-0-0 .so-panel {
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
    }

    /* Slider mobile: Khóa chiều cao theo tỉ lệ gốc 2048x1072, chống lệch vị trí left -391px */
    #rev_slider_1_1_forcefullwidth,
    #rev_slider_1_1_wrapper,
    #rev_slider_1_1,
    rs-slides,
    rs-slide {
        height: calc(100vw * 1072 / 2048) !important;
        min-height: calc(100vw * 1072 / 2048) !important;
        max-height: calc(100vw * 1072 / 2048) !important;
    }

    #rev_slider_1_1_wrapper {
        left: 0px !important;
        position: relative !important;
        overflow: hidden !important;
    }

    rs-slide rs-sbg,
    rs-slide[data-key="rs-22"] rs-sbg {
        background-size: 100% 100% !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
        height: 100% !important;
        width: 100% !important;
        top: 0 !important;
        transform: none !important;
    }

    /* An bullets cham tron tren mobile de khong che chu, so dien thoai va ghi chu o chan banner.
     * Nguoi dung vuot cham tu nhien (touch swipe) hoac dung 2 nut mui ten < > 2 ben. */
    rs-bullets.tp-bullets {
        display: none !important;
    }

    /* Section tiep theo duoi slider: Chuyen xuong duoi an toan, khong bi de lan */
    #pg-621-0 {
        clear: both !important;
        position: relative !important;
        margin-top: 0 !important;
        z-index: 2 !important;
    }
}

/* 3. Nut bam cam ung (Touch >= 48px, chi mobile de desktop y ban goc) */
@media (max-width: 991px) {
    a.button,
    button:not(.splide__pagination__page):not(.tp-bullet):not(.splide__arrow),
    input[type="submit"],
    input[type="button"],
    input[type="reset"],
    .btn,
    .button,
    .add_to_cart_button,
    .single_add_to_cart_button,
    .woocommerce #respond input#submit,
    .woocommerce a.button,
    .woocommerce button.button,
    .woocommerce input.button,
    .woocommerce-Button,
    .wc-block-grid__product-add-to-cart {
        min-height: 48px !important;
        min-width: 48px !important;
        padding: 12px 22px !important;
        font-size: 16px !important;
        line-height: 24px !important;
        box-sizing: border-box !important;
        text-align: center !important;
        touch-action: manipulation !important;
        cursor: pointer !important;
    }
}

/* 4. Font chu & khoang cach dong de doc tren mobile */
@media (max-width: 768px) {
    body, p, li, span, td, th {
        font-size: 16px !important;
        line-height: 1.65 !important;
        word-break: break-word !important;
    }

    h1, .entry-title {
        font-size: 26px !important;
        line-height: 1.35 !important;
        margin-bottom: 14px !important;
        word-break: break-word !important;
    }

    h2 {
        font-size: 22px !important;
        line-height: 1.4 !important;
        margin-bottom: 12px !important;
        word-break: break-word !important;
    }

    h3 {
        font-size: 19px !important;
        line-height: 1.45 !important;
        margin-bottom: 10px !important;
        word-break: break-word !important;
    }

    h4, h5, h6 {
        font-size: 17px !important;
        line-height: 1.5 !important;
    }
}

/* 5. Menu mobile theo selector that cua theme (nav#main_navigation,
 * ul.site_main_menu.sm, div.menu-button trong inc/template-tags.php) */
@media (max-width: 991px) {
    .menu-toggle,
    .navbar-toggle,
    .mobile-menu-toggle,
    #mobile-menu-trigger,
    .menu-button,
    .menu-button a {
        min-height: 48px !important;
        min-width: 48px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 10px 14px !important;
        font-size: 18px !important;
        cursor: pointer !important;
        box-sizing: border-box !important;
    }

    #main_navigation {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    .mobile-nav ul li a,
    #mobile-navigation ul li a,
    .main-navigation.mobile-nav li a,
    .site_main_menu.sm li a,
    #main_navigation .site_main_menu li a {
        min-height: 48px !important;
        padding: 14px 18px !important;
        font-size: 16px !important;
        display: flex !important;
        align-items: center !important;
        border-bottom: 1px solid rgba(0, 0, 0, 0.06) !important;
        box-sizing: border-box !important;
        touch-action: manipulation !important;
    }

    /* 6. TRIỆT TIÊU TRÙNG LẶP SLIDER TRÊN MOBILE */
    .hide-on-mobile,
    .panel-grid.hide-on-mobile,
    .panel-has-style.hide-on-mobile,
    .so-panel.hide-on-mobile {
        display: none !important;
    }

    /* 7. CHUẨN HÓA SLIDER SẢN PHẨM (WCPS / SPLIDE) TRÊN MOBILE */
    .wcps-container .splide__arrows.middle-fixed,
    .wcps-container .splide__arrows.middle {
        position: absolute !important;
        top: 38% !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 4px !important;
        pointer-events: none !important;
        z-index: 10 !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
    }

    .wcps-container .splide__arrows div,
    .wcps-container .splide__arrow {
        pointer-events: auto !important;
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        min-height: 36px !important;
        max-width: 36px !important;
        max-height: 36px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 50% !important;
        background: #1e6fcc !important;
        color: #ffffff !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.25) !important;
        cursor: pointer !important;
        border: none !important;
        float: none !important;
    }

    .wcps-container .splide__arrows .prev,
    .wcps-container .splide__arrow--prev,
    .wcps-container .splide__arrows .next,
    .wcps-container .splide__arrow--next {
        float: none !important;
        position: static !important;
    }

    .wcps-container .splide__pagination {
        margin: 15px 0 10px 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 0 !important;
        width: 100% !important;
    }

    .wcps-container .splide__pagination li {
        display: inline-flex !important;
        margin: 0 !important;
        padding: 0 !important;
        list-style: none !important;
    }

    .wcps-container .splide__pagination button,
    .wcps-container .splide__pagination__page,
    button.splide__pagination__page {
        width: 10px !important;
        height: 10px !important;
        min-width: 10px !important;
        min-height: 10px !important;
        max-width: 10px !important;
        max-height: 10px !important;
        padding: 0 !important;
        margin: 2px !important;
        border-radius: 50% !important;
        background: #d4d4d4 !important;
        border: none !important;
        cursor: pointer !important;
        transition: all 0.2s ease !important;
        line-height: 0 !important;
        font-size: 0 !important;
        box-sizing: border-box !important;
    }

    .wcps-container .splide__pagination button.is-active,
    .wcps-container .splide__pagination__page.is-active,
    button.splide__pagination__page.is-active {
        background: #1e6fcc !important;
        width: 22px !important;
        min-width: 22px !important;
        max-width: 22px !important;
        border-radius: 6px !important;
    }

    .wcps-container .layer-media img {
        max-width: 100% !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }

    .wcps-container .splide__track {
        overflow: hidden !important;
    }

    .wcps-container .splide__slide {
        text-align: center !important;
        padding: 0 15px !important;
        box-sizing: border-box !important;
    }

    .wcps-container .splide__slide .elements-wrapper {
        text-align: center !important;
        margin: 0 auto !important;
    }
}

/* 9. Đảm bảo 100% không bao giờ hiển thị Instant Hero Layer trên Desktop */
@media (min-width: 992px) {
    #petcare-instant-hero-pic,
    #petcare-instant-hero-lcp {
        display: none !important;
    }

    /* Khắc phục lỗi tác giả plugin WCPS gõ nhầm class .-prev trên Desktop */
    .wcps-container .splide__arrows.middle-fixed,
    .wcps-container .splide__arrows.middle {
        position: absolute !important;
        top: 38% !important;
        left: 0 !important;
        width: 100% !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
        padding: 0 5px !important;
        pointer-events: none !important;
        z-index: 10 !important;
        transform: translateY(-50%) !important;
        box-sizing: border-box !important;
    }
    .wcps-container .splide__arrows div,
    .wcps-container .splide__arrow {
        pointer-events: auto !important;
        float: none !important;
        position: static !important;
    }

    /* 1. Header Desktop flow tự nhiên chuẩn xác, không position: absolute đè lên banner */
    .has-solid-menu.banner-has-slider #header-region:not(.stuck),
    .has-solid-menu #header-region:not(.stuck),
    #header-region:not(.stuck) {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        z-index: 998 !important;
    }
    .has-solid-menu #header-region.stuck,
    #header-region.stuck {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
    }
    .has-solid-menu.banner-has-slider #banner_content,
    .sticky.has-solid-menu #banner_content,
    #banner_content {
        padding-top: 0 !important;
        clear: both !important;
    }

    /* Khắc phục triệt để khoảng trắng 30px bên phải Desktop và lệch lề trái do SiteOrigin Panels */
    #banner,
    #banner_content,
    #banner #pl-615,
    #banner #pg-615-0,
    #banner .panel-grid {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        box-sizing: border-box !important;
    }
    #banner .panel-row-style-for-615-0,
    #banner .panel-row-style {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 15px !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #banner #pgc-615-0-0,
    #banner .panel-grid-cell {
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #banner #panel-615-0-0-0,
    #banner .so-panel {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    #banner #rev_slider_1_1_forcefullwidth,
    #banner #rev_slider_1_1_wrapper,
    #banner #rev_slider_1_1 {
        width: 100% !important;
        left: 0 !important;
        right: 0 !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
        box-sizing: border-box !important;
    }

    /* Triệt tiêu 100% khoảng trắng thừa trên subpages Desktop (Khắc phục lỗi media_1790264246097.png) */
    body:not(.home) section#banner,
    body:not(.home) #banner {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    body:not(.home) #banner_content {
        display: none !important;
        height: 0 !important;
        min-height: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    body:not(.home) #main_content {
        padding-top: 30px !important;
    }

    /* 2. Mũi tên slider Desktop: Đẩy sát viền màn hình, hoàn toàn không đè lên mặt/mũi chú cún con, z-index tối đa & bắt trọn click */
    rs-arrow.tp-rightarrow,
    .tp-rightarrow,
    rs-arrow[data-direction="next"] {
        right: 20px !important;
        opacity: 0.85 !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }
    rs-arrow.tp-leftarrow,
    .tp-leftarrow,
    rs-arrow[data-direction="prev"] {
        left: 20px !important;
        opacity: 0.85 !important;
        z-index: 999999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    /* 3. Khắc phục triệt để lỗi click/hover: dropdown ẩn hoàn toàn khi collapsed, không chắn chuột */
    #header-cart.collapsed .widget_shopping_cart,
    #header-search.collapsed .search-form,
    #header-cart-notification.collapsed {
        display: none !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* 4. Căn chỉnh icon giỏ hàng, tìm kiếm và mạng xã hội thẳng tắp trên cùng một hàng */
    #header-cart {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 26px !important;
        line-height: 26px !important;
        min-width: 26px !important;
        width: auto !important;
        margin: 0 6px 0 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    #header-cart a#header-cart-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 26px !important;
        line-height: 26px !important;
        padding: 0 !important;
        margin: 0 !important;
        min-width: 24px !important;
        vertical-align: middle !important;
    }
    #header-cart-trigger i {
        margin: 0 !important;
        padding: 0 !important;
        font-size: 18px !important;
        line-height: 18px !important;
        vertical-align: middle !important;
    }

    #header-search {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 26px !important;
        line-height: 26px !important;
        width: 26px !important;
        margin: 0 8px 0 0 !important;
        padding: 0 !important;
        float: none !important;
    }
    #header-search a#header-search-trigger {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        height: 26px !important;
        line-height: 26px !important;
        vertical-align: middle !important;
    }
    #header-search-trigger i {
        margin: 0 !important;
        font-size: 18px !important;
        line-height: 18px !important;
        vertical-align: middle !important;
    }

    #tool-navigation-lower .social-icons {
        display: inline-flex !important;
        align-items: center !important;
        height: 26px !important;
        line-height: 26px !important;
        margin: 0 !important;
        padding: 0 0 0 6px !important;
        float: none !important;
    }
    #tool-navigation-lower .social-icons a {
        display: inline-flex !important;
        align-items: center !important;
        height: 26px !important;
        line-height: 26px !important;
        vertical-align: middle !important;
    }
    #tool-navigation-lower .social-icons i {
        font-size: 18px !important;
        line-height: 18px !important;
        vertical-align: middle !important;
    }

    /* 5. Thu gọn chiều cao header (triệt tiêu khoảng cách xa theo mũi tên đỏ) */
    #logo {
        padding-top: 8px !important;
        padding-bottom: 6px !important;
        line-height: normal !important;
    }
    #logo img {
        height: 48px !important;
        width: auto !important;
    }

    /* Menu dòng 1: Căn chỉnh chiều cao hợp lý (58px) loại bỏ hoàn toàn khoảng trắng thừa */
    #main_navigation {
        width: auto !important;
        max-width: none !important;
        float: left !important;
        clear: none !important;
        margin-left: 20px !important;
    }
    #main_navigation .sm a {
        height: 58px !important;
        line-height: 58px !important;
        padding-top: 0 !important;
        padding-bottom: 0 !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        font-size: 16px !important;
    }

    /* Toolbar dòng 2: Thanh mảnh bám sát góc phải trên cùng một hàng ngay ngắn */
    #tool-navigation-lower {
        clear: both !important;
        float: right !important;
        height: 28px !important;
        margin-top: -6px !important;
        margin-bottom: 6px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    #tool-navigation-lower #header-cart,
    #tool-navigation-lower #header-search,
    #tool-navigation-lower .social-icons {
        margin-top: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        float: none !important;
    }

    /* Dropdown giỏ hàng khi mở */
    #header-cart .widget_shopping_cart {
        position: absolute !important;
        top: 28px !important;
        right: 0 !important;
        z-index: 999 !important;
    }
}

/* 6. Ở màn hình 1024px - 1199px: Tinh chỉnh padding menu để Logo và Menu luôn trên cùng 1 hàng */
@media (min-width: 992px) and (max-width: 1199px) {
    #main_navigation .sm a {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 14px !important;
    }
    #main_navigation {
        width: auto !important;
        max-width: none !important;
        float: left !important;
        clear: none !important;
        margin-left: 8px !important;
    }
}





/* 7. Chuẩn hóa Phân cấp Heading & Khung Logo (Technical SEO Sâu - Hợp Đồng Điều 1 & 2) */
#logo .site-logo-wrap,
#logo .site-logo-wrap a {
    display: inline-block !important;
    height: 71px !important;
    float: left !important;
}

.site-title-seo .screen-reader-text {
    border: 0 !important;
    clip: rect(1px, 1px, 1px, 1px) !important;
    clip-path: inset(50%) !important;
    height: 1px !important;
    margin: -1px !important;
    overflow: hidden !important;
    padding: 0 !important;
    position: absolute !important;
    width: 1px !important;
    word-wrap: normal !important;
}

article header h2.entry-title-sub {
    font-size: 26px;
    font-weight: 600;
    line-height: 1.3;
    margin-top: 0;
    margin-bottom: 15px;
    color: inherit;
}

/* 8. Tối ưu Font Loading & Hiển thị phông chữ swap (PageSpeed Optimization) */
@font-face {
    font-family: 'FontAwesome';
    font-display: swap;
}
@font-face {
    font-family: 'revicons';
    font-display: swap;
}
@font-face {
    font-family: 'Font Awesome 5 Free';
    font-display: swap;
}
