/* ==========================================================================
   MỤC LỤC - GLOBAL.CSS (CHUẨN MATERIAL DESIGN 3)
   1. M3 Base & Reset (Links, Tables, Breadcrumbs)
   2. M3 Buttons (Filled, Outlined, Shopee Brand)
   3. M3 Form Inputs (Text fields, Selects)
   4. Floating Widgets (Zalo Chat, Hotline, Back to top)
   5. Navigation & Menus (Vertical, Sidebar)
   6. Utilities & Animations (Spacing, Flash, Colors)
   7. Embeds & Carousels (TikTok, YouTube, Flickity, Owl)
   8. Global Content Boxes (Offer box)
   ========================================================================== */

#wrapper, #main, #main.dark {
    background-color: var(--md-sys-color-surface-container) !important;
}

/* ==========================================================================
   1. M3 BASE & RESET
   ========================================================================== */
a {
    color: var(--md-sys-color-primary);
    text-decoration: none;
    transition: color var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

a:hover {
    color: var(--md-sys-color-primary-container);
    filter: brightness(0.8);
}

/* Breadcrumbs */
.breadcrumbs a,
.breadcrumbs .separator,
.breadcrumbs .last {
    font: var(--md-sys-typescale-body-small);
}

.breadcrumbs a,
.breadcrumbs .separator {
    color: var(--md-sys-color-secondary) !important;
}

.breadcrumbs .last {
    color: var(--md-sys-color-on-surface) !important;
}

.breadcrumbs a:hover {
    color: var(--md-sys-color-primary) !important;
}

/* Tables */
table {
    width: auto;
    margin-bottom: 1em;
    border-color: var(--md-sys-color-outline-variant);
    border-spacing: 0;
}

th, td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    vertical-align: top;
}

td {
    color: var(--md-sys-color-on-surface) !important;
    font: var(--md-sys-typescale-body-medium);
}

@media screen and (max-width: 549px) {
    table { width: 100%; }
}

label, legend {
    font: var(--md-sys-typescale-label-large);
    color: var(--md-sys-color-on-surface);
}

span.widget-title {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-surface);
}

/* ==========================================================================
   2. M3 BUTTONS & CALL TO ACTIONS
   ========================================================================== */
.primary,
input[type=submit],
input[type=submit].button {
    background-color: var(--md-sys-color-primary);
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-full); /* Viên thuốc */
}

/* Nút Read More dạng Text */
.text-button-read-more,
.menu-button-read-more .ux-menu-link__link .ux-menu-link__text {
    display: flex;
    font: var(--md-sys-typescale-label-large) !important;
    align-items: center;
    gap: 12px;
    white-space: nowrap;
    color: var(--md-sys-color-on-surface);
    padding: 12px 0;
}

.text-button-read-more:after,
.menu-button-read-more .ux-menu-link__link .ux-menu-link__text:after {
    content: "" !important;
    width: 16px;
    height: 16px;
    background: url(/wp-content/uploads/2024/05/icon_btn_more.png) no-repeat 100% / auto 10px;
    transition: width var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

.text-button-read-more:hover:after,
.menu-button-read-more .ux-menu-link__link .ux-menu-link__text:hover:after {
    width: 32px;
}

/* ==========================================================================
   3. M3 FORM INPUTS
   ========================================================================== */
.select-resize-ghost, .select2-container .select2-choice, .select2-container .select2-selection,
input[type="date"], input[type="email"], input[type="number"], input[type="password"], 
input[type="search"], input[type="tel"], input[type="text"], input[type="url"], select, textarea {
    background-color: transparent;
    border: 1px solid var(--md-sys-color-outline);
    border-radius: var(--md-sys-shape-corner-xs);
    box-sizing: border-box;
    color: var(--md-sys-color-on-surface) !important;
    font: var(--md-sys-typescale-body-large);
    min-height: 48px;
    padding: 0 16px;
    width: 100%;
    max-width: 100%;
    vertical-align: middle;
    transition: border-color var(--md-sys-duration-short) var(--md-sys-motion-standard);
}

input:focus, textarea:focus, select:focus {
    border-color: var(--md-sys-color-primary);
    border-width: 2px;
    outline: none;
}

.form-flat input:not([type=submit]),
.form-flat select,
.form-flat textarea {
    background-color: var(--md-sys-color-surface) !important;
    border-radius: var(--md-sys-shape-corner-xs);
    box-shadow: var(--md-sys-elevation-level-0);
    color: var(--md-sys-color-on-surface) !important;
    min-height: 48px;
}

/* ==========================================================================
   4. FLOATING WIDGETS (ZALO, HOTLINE, CHAT)
   ========================================================================== */
.zalo-chat-bottom,
.call-btn-bottom {
    position: fixed !important;
    right: 24px !important;
    z-index: 1000 !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 48px !important;
    height: 48px !important;
    border-radius: var(--md-sys-shape-corner-lg) !important; /* Bo góc 16px M3 FAB */
    box-shadow: var(--md-sys-elevation-level-3) !important; 
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-snappy) !important;
    text-decoration: none !important;
    overflow: hidden !important;
}

.zalo-chat-bottom:hover,
.call-btn-bottom:hover {
    transform: translateY(-4px) !important;
    box-shadow: var(--md-sys-elevation-level-4) !important;
}

/* Nút Zalo */
.zalo-chat-bottom {
    bottom: 88px !important; 
    background-color: var(--zalo-color) !important; 
    animation: m3ZaloPulse 2.5s infinite;
    overflow: visible !important; 
}

.zalo-chat-bottom::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    border-radius: inherit; 
    background-color: transparent;
    z-index: -1; 
    pointer-events: none;
    animation: m3ZaloPulse 2s infinite; 
}

.zalo-chat-bottom img,
.zalo-chat-bottom svg {
    width: 32px !important;
    height: 32px !important;
    object-fit: contain;
}

/* Nút Hotline */
.call-btn-bottom {
    bottom: 24px !important; 
    background: var(--md-sys-color-warning-gradient) !important; 
    color: var(--md-sys-color-on-primary, #ffffff) !important;
}

.call-btn-bottom svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

@keyframes m3ZaloPulse {
    0% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.6); }
    70% { box-shadow: 0 0 0 16px rgba(0, 104, 255, 0); }
    100% { box-shadow: 0 0 0 0 rgba(0, 104, 255, 0); }
}

@media (max-width: 769px) {
    .back-to-top { display:none !important; }
    .zalo-chat-bottom { bottom: 152px !important; }
    .call-btn-bottom { bottom: 90px !important; }
}

/* ==========================================================================
   5. NAVIGATION & MENUS
   ========================================================================== */
.vertical-menu .ux-menu-title {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-small);
    min-height: 24px;
}

.vertical-menu .ux-menu-link__link {
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-secondary);
}

.vertical-menu-post ul li .vertical-menu-cat-title {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-title-small);
}

.vertical-menu-post ul li .vertical-menu-post-title {
    color: var(--md-sys-color-on-surface);
    font: var(--md-sys-typescale-body-medium);
}

.off-canvas .sidebar-menu {
    background-color: var(--md-sys-color-surface);
}

.sidebar-menu .nav li.active a,
.off-canvas .sidebar-menu .nav-vertical li.current-menu-item a {
    color: var(--md-sys-color-primary) !important;
    background-color: var(--md-sys-color-primary-container);
}

#menu-item-44001 a, #menu-item-44002 a, #menu-item-44003 a,
#menu-item-44013 a, #menu-item-44022 a, #menu-item-44036 a {
    color: var(--md-sys-color-secondary) !important;
    font: var(--md-sys-typescale-label-medium);
}

/* ==========================================================================
   6. UTILITIES & ANIMATIONS
   ========================================================================== */
.animated_flash { animation: flash 2s alternate infinite both; }
.flash { animation-name: flash; }

@keyframes flash {
    0%, 50%, 100% { opacity: 1; }
    25%, 75% { opacity: 0; }
}

.padding-large { padding: 36px !important; }
.table-horizontally { display: block; overflow-x: auto; white-space: nowrap; }

.link { cursor: pointer; text-decoration: none; font-size: inherit; line-height: inherit; }
.link:after { margin-left: 4px; content: "↗"; font-family: system-ui; }

.number {
    color: var(--md-sys-color-on-primary);
    border-radius: var(--md-sys-shape-corner-xs);
    background: linear-gradient(45deg, var(--md-sys-color-primary) 0%, var(--md-sys-color-error) 100%);
    box-shadow: var(--md-sys-elevation-level-1);
    font: var(--md-sys-typescale-title-medium);
    padding: 4px 10px;
}

.alert-color { color: var(--md-sys-color-error); }

.primary-title {
    border-bottom: 1px solid var(--md-sys-color-outline-variant);
    color: var(--md-sys-color-primary);
    font: var(--md-sys-typescale-title-large);
}

.has-border {
    border: 1px solid var(--md-sys-color-primary);
    border-radius: var(--md-sys-shape-corner-md);
    padding: 16px 24px;
}
.has-border-radius { border-radius: var(--md-sys-shape-corner-md); }

/* Spacing Utilities */
.margin-10 { margin: 10px !important; }
.margin-top-6 { margin-top: 6px !important; }
.margin-top-8 { margin-top: 8px !important; }
.margin-top-10 { margin-top: 10px !important; }
.margin-top-12 { margin-top: 12px !important; }
.margin-top-20 { margin-top: 20px !important; }
.margin-left-10 { margin-left: 10px !important; }
.margin-right-10 { margin-right: 10px !important; }
.margin-bottom-10 { margin-bottom: 10px !important; }

/* ==========================================================================
   7. EMBEDS & CAROUSELS (ĐỒNG BỘ CHUẨN OWL CAROUSEL M3)
   ========================================================================== */
.tiktok-scroll-main { scrollbar-color: var(--md-sys-color-surface-container-high) var(--md-sys-color-surface); }
.tiktok_item { color: var(--md-sys-color-on-surface) !important; }
.youtube-container { position: relative; padding-bottom: 56.25%; height: 0; }
.youtube-container iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }

.owl-carousel { position: relative; }
.owl-carousel .owl-stage-outer .owl-stage .owl-item .item img { border-radius: var(--md-sys-shape-corner-md); }
.owl-theme .owl-nav { margin-top: 0px; }

.owl-carousel .owl-nav .owl-prev,
.owl-carousel .owl-nav .owl-next {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
    background: var(--md-sys-color-surface-container-high) !important;
    color: var(--md-sys-color-on-surface) !important;
    width: 24px; height: 32px; display: flex !important; align-items: center; justify-content: center;
    border: none; padding: 0 !important; margin: 0 !important;
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard);
    box-shadow: var(--md-sys-elevation-level-1);
}

.owl-carousel .owl-nav .owl-prev { left: 0; border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 !important; }
.owl-carousel .owl-nav .owl-next { right: 0; border-radius: var(--md-sys-shape-corner-md) 0 0 var(--md-sys-shape-corner-md) !important; }
.owl-carousel .owl-nav .owl-prev:hover, .owl-carousel .owl-nav .owl-next:hover {
    background: var(--md-sys-color-primary) !important;
    color: var(--md-sys-color-on-primary) !important;
}

.owl-carousel .owl-nav span {
    font-size: 20px;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 2px;
}

.flickity-prev-next-button .arrow {
    fill: currentColor !important;
}

.slider-nav-dots-dashes-spaced .flickity-page-dots .dot {
    width: 10px;
}

/* ==========================================================================
   FLICKITY GHI ĐÈ TRIỆT ĐỂ FLATSOME (CỐ ĐỊNH VỊ TRÍ, KHÔNG NHẢY KHI HOVER)
   ========================================================================== */
.slider-wrapper .flickity-prev-next-button,
.row-slider .flickity-prev-next-button {
    top: 50% !important;
    transform: translateY(-50%) translateX(0) !important; /* Chốt cứng trục */
    width: 24px !important;
    height: 32px !important;
    background: var(--md-sys-color-surface-container-high) !important;
    box-shadow: var(--md-sys-elevation-level-1) !important;
    opacity: 0 !important; /* Ẩn mặc định */
    margin: 0 !important;
    transition: background-color var(--md-sys-duration-short) var(--md-sys-motion-standard), opacity var(--md-sys-duration-short) ease !important;
}

/* Khi hover vào slider -> Hiện nút mượt mà và chống Flatsome đổi transform */
.slider-wrapper:hover .flickity-prev-next-button,
.row-slider:hover .flickity-prev-next-button,
.slider:hover .flickity-prev-next-button,
.slider-show-nav .flickity-prev-next-button {
    transform: translateY(-50%) translateX(0) !important;
    opacity: 1 !important;
}

/* Bo góc lệch (Asymmetric Radius) */
.slider-wrapper .flickity-prev-next-button.previous,
.row-slider .flickity-prev-next-button.previous {
    left: 0 !important;
    border-radius: 0 var(--md-sys-shape-corner-md) var(--md-sys-shape-corner-md) 0 !important;
}
.slider-wrapper .flickity-prev-next-button.next,
.row-slider .flickity-prev-next-button.next {
    right: 0 !important;
    border-radius: var(--md-sys-shape-corner-md) 0 0 var(--md-sys-shape-corner-md) !important;
}

.slider-wrapper .flickity-prev-next-button:hover,
.row-slider .flickity-prev-next-button:hover {
    background: var(--md-sys-color-primary) !important;
}

/* Căn giữa SVG Icon, bỏ viền tròn của Flatsome */
.slider-wrapper .flickity-prev-next-button svg,
.row-slider .flickity-prev-next-button svg,
.slider-nav-circle .flickity-prev-next-button svg {
    width: 14px !important;
    height: 14px !important;
    padding: 0 !important; 
    border: none !important; 
    border-radius: 0 !important;
    
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    
    fill: var(--md-sys-color-on-surface) !important;
    background: transparent !important;
}

.slider-wrapper .flickity-prev-next-button:hover svg,
.row-slider .flickity-prev-next-button:hover svg,
.slider-nav-circle .flickity-prev-next-button:hover svg {
    fill: var(--md-sys-color-on-primary) !important;
}

/* Flickity Page Dots */
.flickity-page-dots .dot {
    border-color: var(--md-sys-color-outline-variant) !important;
    background: var(--md-sys-color-surface-container-high) !important;
    border-radius: 4px !important; /* Pill dẹt */
}
.flickity-page-dots .dot.is-selected {
    background-color: var(--md-sys-color-primary) !important;
    border: var(--md-sys-color-primary) !important;
    width: 6px !important;
}

.slider:focus, .slider-wrapper:focus, .flickity-enabled:focus, 
.flickity-viewport:focus, .flickity-slider:focus, .carousel-track:focus, 
.product-list-container:focus {
    outline: none !important; box-shadow: none !important;
}

.row-small>.flickity-viewport>.flickity-slider>.col {
    padding: 4px 9.8px 19.6px;
}

/* ==========================================================================
   8. GLOBAL CONTENT BOXES
   ========================================================================== */
.offer-box {
    border: 1px solid var(--md-sys-color-error);
    border-radius: var(--md-sys-shape-corner-md);
    background-color: var(--md-sys-color-error-container);
    padding: 12px;
    margin: 10px 0 0 0;
}

.offer-title {
    font: var(--md-sys-typescale-title-medium);
    color: var(--md-sys-color-on-error-container);
    padding: 0 10px;
    margin: 0 8px 8px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.offer-content { list-style-type: none; padding: 0; margin: 0; }
.offer-content li {
    display: flex;
    align-items: flex-start;
    margin: 0 0 12px 0 !important;
    font: var(--md-sys-typescale-body-medium);
    color: var(--md-sys-color-on-error-container);
}

.offer-content li::before {
    content: '✔';
    color: var(--md-sys-color-success);
    font-size: 1.1rem;
    font-weight: bold;
    margin-right: 12px;
    flex-shrink: 0;
}

/* ==========================================================================
   BACK TO TOP (M3 FLOATING ACTION BUTTON)
   ========================================================================== */
.back-to-top {
    bottom: 152px !important; 
    right: 24px !important;
    margin: 0;
    opacity: 0;
    pointer-events: none;
    background-color: var(--md-sys-color-primary-container) !important;
    border: none !important;
    border-radius: var(--md-sys-shape-corner-lg) !important; 
    width: 48px !important;
    height: 48px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: var(--md-sys-elevation-level-3) !important; 
    transform: translateY(30%);
    transition: all var(--md-sys-duration-short) var(--md-sys-motion-standard) !important;
    z-index: 99 !important;
}

.back-to-top.active {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0);
}

.back-to-top:hover {
    background-color: var(--md-sys-color-primary) !important; 
    box-shadow: var(--md-sys-elevation-level-4) !important;
    transform: translateY(-4px) !important; 
}

.back-to-top .icon-angle-up {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
}
.back-to-top .icon-angle-up::before { content: '' !important; }

/* Áp dụng SVG tùy chỉnh bằng CSS Mask */
.back-to-top .icon-angle-up::after {
    content: ''; display: block; width: 24px; height: 24px;
    background-color: var(--md-sys-color-on-primary-container);
    -webkit-mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M417-592 260-435q-19 19-45 19t-45-19q-18-19-18-45t19-45l264-264q9-9 21-14t24-5q12 0 24 5t21 14l265 265q19 19 19 44.5T790-435q-19 19-45 19t-45-19L543-592v403q0 26-18.5 44.5T480-126q-26 0-44.5-18.5T417-189v-403Z"/></svg>');
    -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center;
    mask-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960"><path d="M417-592 260-435q-19 19-45 19t-45-19q-18-19-18-45t19-45l264-264q9-9 21-14t24-5q12 0 24 5t21 14l265 265q19 19 19 44.5T790-435q-19 19-45 19t-45-19L543-592v403q0 26-18.5 44.5T480-126q-26 0-44.5-18.5T417-189v-403Z"/></svg>');
    mask-size: contain; mask-repeat: no-repeat; mask-position: center;
    transition: background-color var(--md-sys-duration-short) ease;
}

.back-to-top:hover .icon-angle-up::after {
    background-color: var(--md-sys-color-on-primary);
}