/*
 Theme Name:   THT Child
 Theme URI:    https://tramhoctapstationery.com
 Description:  THT Child Theme for Tram Hoc Tap Stationery
 Author:       THT
 Author URI:   https://tramhoctapstationery.com
 Template:     tht
 Version:      1.0.0
 Text Domain:  tht-child
*/

/* ========== MOBILE CART COUNT BADGE — real-time update animation ========== */
@keyframes tht-count-pop {
    0% {
        transform: scale(1);
    }

    40% {
        transform: scale(1.55);
    }

    70% {
        transform: scale(0.88);
    }

    100% {
        transform: scale(1);
    }
}

.mobile-bottom-bar__count.tht-count-pop {
    animation: tht-count-pop 0.38s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}

/* ========== 13. RELATED PRODUCT CARDS HOVER AND ASPECT RATIO ========== */
.tht-related-products-slider-container .products>* .card__inner.ratio,
.tht-related-products-slider-container .product-card-wrapper .card__inner.ratio {
    aspect-ratio: 1 / 1 !important;
    overflow: hidden !important;
    position: relative !important;
    border-radius: 18px !important;
}

.tht-related-products-slider-container .products>* .card__media img,
.tht-related-products-slider-container .product-card-wrapper .card__media img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
}

/* Hide and slide up actions on hover */
.tht-related-products-slider-container .products>* .card__actions,
.tht-related-products-slider-container .product-card-wrapper .card__actions {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    padding: 12px !important;
    background: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    transform: translateY(102%) !important;
    transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.35s ease !important;
    opacity: 0 !important;
    z-index: 10 !important;
    box-sizing: border-box !important;
    border-radius: 0 0 18px 18px !important;
}

.tht-related-products-slider-container .products>*:hover .card__actions,
.tht-related-products-slider-container .product-card-wrapper:hover .card__actions {
    transform: translateY(0) !important;
    opacity: 1 !important;
}

/* Style the buttons inside card__actions */
.tht-related-products-slider-container .products>* .card__actions .button,
.tht-related-products-slider-container .product-card-wrapper .card__actions .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    padding: 10px 16px !important;
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    border-radius: 12px !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    border: none !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    line-height: 1.2 !important;
}

/* Add to cart button (WooCommerce loop button) */
.tht-related-products-slider-container .products>* .card__actions .add_to_cart_button,
.tht-related-products-slider-container .product-card-wrapper .card__actions .add_to_cart_button {
    background-color: #ffeef4 !important;
    color: #ff6f91 !important;
    border: 1.5px solid #ffccd8 !important;
    margin: 0 !important;
}

.tht-related-products-slider-container .products>* .card__actions .add_to_cart_button:hover,
.tht-related-products-slider-container .product-card-wrapper .card__actions .add_to_cart_button:hover {
    background-color: #ffccd8 !important;
    color: #ff477e !important;
    transform: scale(1.03) !important;
}

/* Buy now button */
.tht-related-products-slider-container .products>* .card__actions .buy-now-button,
.tht-related-products-slider-container .product-card-wrapper .card__actions .buy-now-button {
    background-color: #ff6f91 !important;
    color: #ffffff !important;
    margin: 0 !important;
}

.tht-related-products-slider-container .products>* .card__actions .buy-now-button:hover,
.tht-related-products-slider-container .product-card-wrapper .card__actions .buy-now-button:hover {
    background-color: #ff477e !important;
    box-shadow: 0 4px 12px rgba(255, 111, 145, 0.3) !important;
    transform: scale(1.03) !important;
}

/* ========== 14. RELATED PRODUCTS SLIDER FIX ========== */
.tht-related-products-slider-container .products {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    scroll-behavior: smooth !important;
    scroll-snap-type: x mandatory !important;
    gap: 24px !important;
    padding: 16px 4px 28px !important;
    margin: 0 !important;
    list-style: none !important;
    scrollbar-width: none !important;
    /* Hide scrollbar for Firefox */
    -webkit-overflow-scrolling: touch !important;
}

.tht-related-products-slider-container .products::-webkit-scrollbar {
    display: none !important;
    /* Hide scrollbar for Chrome/Safari */
}

/* Target the items inside the slider loop - displaying 4 items on desktop */
.tht-related-products-slider-container .products>*,
.tht-related-products-slider-container .products .card-wrapper.product-card-wrapper {
    flex: 0 0 calc((100% - 72px) / 4) !important;
    /* 4 items per row on desktop (3 gaps * 24px = 72px) */
    min-width: 180px !important;
    scroll-snap-align: start !important;
    margin: 0 !important;
    box-shadow: 0 10px 24px rgba(255, 182, 212, 0.05) !important;
    border-radius: 20px !important;
    background: #fff !important;
    transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

@media (max-width: 1200px) {

    .tht-related-products-slider-container .products>*,
    .tht-related-products-slider-container .products .card-wrapper.product-card-wrapper {
        flex: 0 0 calc((100% - 72px) / 4) !important;
        /* 4 items per row on smaller desktop */
    }
}

@media (max-width: 992px) {

    .tht-related-products-slider-container .products>*,
    .tht-related-products-slider-container .products .card-wrapper.product-card-wrapper {
        flex: 0 0 calc((100% - 48px) / 3) !important;
        /* 3 items per row on tablet */
    }

}

@media (max-width: 768px) {

    .tht-related-products-slider-container .products>*,
    .tht-related-products-slider-container .products .card-wrapper.product-card-wrapper {
        flex: 0 0 calc((100% - 24px) / 2) !important;
        /* 2 items per row on mobile landscape */
        min-width: 140px !important;
        border-radius: 14px !important;
    }

}

@media (max-width: 480px) {

    .tht-related-products-slider-container .products>*,
    .tht-related-products-slider-container .products .card-wrapper.product-card-wrapper {
        flex: 0 0 75% !important;
        /* Slider item takes 75% width on small screens to show peek of next item */
        min-width: 140px !important;
    }
}

/* ========== 15. SHOPEE-STYLE REVIEWS ========== */

/* Header section title */
.tht-reviews-title {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 20px !important;
    text-transform: uppercase !important;
}

/* Rating Overview Box */
.tht-reviews-overview {
    background-color: #fffbf8 !important;
    border: 1px solid #f9ede5 !important;
    border-radius: 4px !important;
    display: flex !important;
    padding: 30px !important;
    margin-bottom: 25px !important;
    gap: 30px !important;
    align-items: center !important;
}

.tht-reviews-overview__left {
    width: 200px !important;
    text-align: center !important;
    flex-shrink: 0 !important;
}

.tht-reviews-overview__score {
    color: #ff82a7 !important;
    margin-bottom: 6px !important;
}

.tht-reviews-overview__score .score-num {
    font-size: 30px !important;
    font-weight: 600 !important;
}

.tht-reviews-overview__score .score-max {
    font-size: 18px !important;
    font-weight: 500 !important;
}

/* Star styles */
.tht-stars {
    display: inline-flex !important;
    gap: 2px !important;
}

.tht-stars .star {
    font-size: 18px !important;
    color: #ff82a7 !important;
}

.tht-stars .star.empty {
    color: #d8d8d8 !important;
}

.tht-stars .star.half-filled {
    position: relative !important;
    color: #d8d8d8 !important;
}

.tht-stars .star.half-filled::before {
    content: "★" !important;
    position: absolute !important;
    left: 0 !important;
    top: 0 !important;
    width: 50% !important;
    overflow: hidden !important;
    color: #ff82a7 !important;
}

/* Filter buttons */
.tht-reviews-overview__right {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    flex: 1 !important;
}

.tht-review-filter-btn {
    background: #fff !important;
    border: 1px solid rgba(0, 0, 0, .09) !important;
    border-radius: 2px !important;
    color: rgba(0, 0, 0, .8) !important;
    cursor: pointer !important;
    font-size: 14px !important;
    min-width: 100px !important;
    padding: 6px 15px !important;
    text-align: center !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
    font-weight: normal !important;
}

.tht-review-filter-btn:hover {
    border-color: #ff82a7 !important;
    color: #ff82a7 !important;
}

.tht-review-filter-btn.active {
    border-color: #ff82a7 !important;
    color: #ff82a7 !important;
    background-color: #fff !important;
}

/* Comment list styling overrides */
.tht-commentlist {
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}

.tht-review-item {
    border-bottom: 1px solid rgba(0, 0, 0, .09) !important;
    padding: 25px 0 20px !important;
    list-style: none !important;
}

.tht-review-container {
    display: flex !important;
    position: relative !important;
}

.tht-review-avatar {
    width: 40px !important;
    height: 40px !important;
    margin-right: 15px !important;
    flex-shrink: 0 !important;
}

.tht-review-avatar img.tht-avatar-img {
    width: 100% !important;
    height: 100% !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    background-color: #f5f5f5 !important;
    border: 1px solid #eee !important;
}

.tht-review-content-area {
    flex: 1 !important;
}

.tht-review-author-name {
    font-size: 12px !important;
    font-weight: 500 !important;
    color: rgba(0, 0, 0, .8) !important;
    margin-bottom: 4px !important;
}

.tht-review-stars {
    margin-bottom: 6px !important;
}

.tht-review-stars .star {
    font-size: 12px !important;
    color: #ff82a7 !important;
    margin-right: 1px !important;
}

.tht-review-stars .star.empty {
    color: #d8d8d8 !important;
}

.tht-review-meta {
    font-size: 12px !important;
    color: rgba(0, 0, 0, .54) !important;
    margin-bottom: 12px !important;
}

.tht-review-variation-sep {
    margin: 0 4px !important;
    color: rgba(0, 0, 0, .2) !important;
}

.tht-review-variation {
    color: rgba(0, 0, 0, .54) !important;
}

.tht-review-text {
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: rgba(0, 0, 0, .87) !important;
    margin-bottom: 15px !important;
    white-space: pre-wrap !important;
    /* Preserve spaces and linebreaks exactly like Shopee */
}

/* Image Thumbnails Gallery */
.tht-review-media-gallery {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-bottom: 15px !important;
}

.tht-review-media-item {
    width: 72px !important;
    height: 72px !important;
    border: 2px solid transparent !important;
    cursor: pointer !important;
    overflow: hidden !important;
    transition: border-color 0.15s ease !important;
    border-radius: 2px !important;
    box-sizing: border-box !important;
    background-color: #f5f5f5 !important;
}

.tht-review-media-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.tht-review-media-item:hover {
    border-color: #ff82a7 !important;
}

.tht-review-media-item.active {
    border-color: #ff82a7 !important;
}

/* Expanded Image Viewer */
.tht-review-media-expanded {
    background-color: #f6f6f6 !important;
    border: 1px solid rgba(0, 0, 0, .05) !important;
    padding: 8px !important;
    margin-bottom: 15px !important;
    max-width: 400px !important;
    border-radius: 4px !important;
}

.tht-review-media-expanded img {
    max-width: 100% !important;
    height: auto !important;
    display: block !important;
    border-radius: 2px !important;
}

/* Footer / Like button */
.tht-review-footer {
    display: flex !important;
    align-items: center !important;
    margin-top: 10px !important;
}

.tht-review-like-btn {
    background: none !important;
    border: none !important;
    padding: 0 !important;
    cursor: pointer !important;
    display: inline-flex !important;
    align-items: center !important;
    color: rgba(0, 0, 0, .4) !important;
    font-size: 14px !important;
    gap: 6px !important;
    transition: color 0.15s ease !important;
}

.tht-review-like-btn:focus {
    outline: none !important;
}

.tht-review-like-btn .like-icon {
    font-size: 14px !important;
}

.tht-review-like-btn:hover,
.tht-review-like-btn.liked {
    color: #ff82a7 !important;
}

/* Options vertical dot menu */
.tht-review-options {
    position: absolute !important;
    right: 0 !important;
    top: 0 !important;
    color: rgba(0, 0, 0, .3) !important;
    font-size: 18px !important;
    cursor: pointer !important;
    padding: 5px !important;
    line-height: 1 !important;
}

.tht-review-options:hover {
    color: rgba(0, 0, 0, .6) !important;
}

/* Comment/Review Submit Form Styles */
.tht-review-form-wrapper {
    background: #ffffff !important;
    border: 1px solid #f0f0f0 !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-top: 40px !important;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.02) !important;
}

/* ========== FOOTER DYNAMIC LOGO ========== */
.site-footer-brand-lockup--dynamic {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px;
    text-align: center;
}

.site-footer-brand-logo {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 78%;
}

.site-footer-brand-logo .custom-logo-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.site-footer-brand-logo .custom-logo {
    display: block;
    max-width: 210px;
    max-height: 210px;
    width: auto;
    height: auto;
    object-fit: contain;
}

.footer-about-text--meta {
    margin-top: 12px;
    font-size: 0.98rem;
    opacity: 0.88;
}

.tht-review-form-wrapper #reply-title {
    font-size: 18px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 18px !important;
    display: block !important;
}

/* Image input upload */
.tht-review-image-upload-wrapper {
    margin: 20px 0 !important;
}

.tht-review-image-upload-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    border: 1.5px dashed #ff9bb6 !important;
    background-color: #fff9fa !important;
    color: #ff5c8a !important;
    padding: 10px 18px !important;
    border-radius: 8px !important;
    cursor: pointer !important;
    font-weight: 600 !important;
    font-size: 14px !important;
    transition: all 0.2s ease !important;
}

.tht-review-image-upload-btn:hover {
    background-color: #ffe6ec !important;
    border-color: #ff5c8a !important;
}

.tht-review-image-preview-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin-top: 12px !important;
}

.tht-preview-image-item {
    width: 60px !important;
    height: 60px !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    border: 1.5px solid #ffccd8 !important;
    position: relative !important;
    background: #fdfdfd !important;
}

.tht-preview-image-item img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

/* Star selection in review form */
.comment-form-rating select {
    border: 1px solid #ddd !important;
    border-radius: 4px !important;
    padding: 8px 12px !important;
    font-size: 14px !important;
    outline: none !important;
    color: #555 !important;
    background: #fff !important;
}

/* Ẩn thẻ p.stars do WooCommerce JS inject (chúng ta dùng star picker riêng) */
.comment-form-rating p.stars,
#review_form .stars,
.woocommerce-Reviews .stars {
    display: none !important;
}

/* Custom star picker — hover/selected states handled by JS only */
.tht-star-rating-field label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #333 !important;
    margin-bottom: 10px !important;
}

.tht-star-picker {
    display: inline-flex !important;
    flex-direction: row !important;
    /* Normal order 1→5, JS handles highlight */
    gap: 4px !important;
}

.tht-star-btn {
    font-size: 36px !important;
    color: #ddd !important;
    /* Mặc định: sao xám */
    cursor: pointer !important;
    transition: color 0.12s ease, transform 0.1s ease !important;
    line-height: 1 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* Class JS sẽ thêm/xóa */
.tht-star-btn.hover {
    color: #ffb347 !important;
    /* Cam nhạt khi hover */
    transform: scale(1.2) !important;
}

.tht-star-btn.selected {
    color: #ee4d2d !important;
    /* Đỏ cam khi đã chọn */
}

@media (max-width: 768px) {
    .tht-star-btn {
        font-size: 28px !important;
    }
}

/* Responsiveness for mobile screen */
@media (max-width: 768px) {
    .tht-reviews-overview {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 15px !important;
        padding: 20px !important;
    }

    .tht-reviews-overview__left {
        width: 100% !important;
        border-right: none !important;
        border-bottom: 1px dashed rgba(0, 0, 0, .09) !important;
        padding-bottom: 15px !important;
    }

    .tht-reviews-overview__right {
        gap: 8px !important;
        justify-content: center !important;
    }

    .tht-review-filter-btn {
        flex: 1 1 calc(50% - 8px) !important;
        min-width: 0 !important;
        font-size: 12px !important;
        padding: 6px 10px !important;
    }

    .tht-review-avatar {
        width: 32px !important;
        height: 32px !important;
        margin-right: 10px !important;
    }

    .tht-review-media-item {
        width: 60px !important;
        height: 60px !important;
    }

    .tht-review-media-expanded {
        max-width: 100% !important;
    }
}

/* Screen Reader Text (Visually Hidden) for SEO */
.screen-reader-text {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border-width: 0 !important;
}

/* ============================================================================
   SEARCH MODAL OVERLAY STYLES
   ============================================================================ */

.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 99999;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.search-modal.is-active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.search-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    cursor: pointer;
}

.search-modal-content {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    background: #ffffff;
    border-bottom: 3px solid #ff7a9b;
    border-bottom-left-radius: 30px;
    border-bottom-right-radius: 30px;
    box-shadow: 0 15px 40px rgba(108, 92, 231, 0.08);
    padding: 40px 20px 50px;
    transform: translateY(-50px);
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.search-modal.is-active .search-modal-content {
    transform: translateY(0);
}

.search-modal-container {
    max-width: 700px;
    margin: 0 auto;
}

.search-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.search-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: #ff7a9b;
}

.search-modal-close {
    background: #fff3f5;
    color: #ff7a9b;
    border: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    outline: none;
}

.search-modal-close:hover {
    background: #ff7a9b;
    color: #ffffff;
    transform: rotate(90deg);
}

.search-modal-form {
    width: 100%;
}

.search-modal-form .search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: #fafafc;
    border: 2px solid #eef0f6;
    border-radius: 40px;
    padding: 6px 6px 6px 24px;
    transition: all 0.3s ease;
}

.search-modal-form .search-input-wrapper:focus-within {
    border-color: #ff7a9b;
    background: #ffffff;
    box-shadow: 0 5px 20px rgba(255, 122, 155, 0.12);
}

.search-modal-input {
    flex-grow: 1;
    border: none;
    background: transparent;
    padding: 10px 0;
    font-size: 18px;
    color: #333333;
    outline: none;
}

.search-modal-input::placeholder {
    color: #a0aec0;
}

.search-modal-submit {
    background: #ff7a9b;
    color: #ffffff;
    border: none;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    transition: all 0.3s ease;
}

.search-modal-submit:hover {
    background: #e66484;
    transform: scale(1.05);
}

.search-modal-suggestions {
    margin-top: 24px;
    text-align: left;
}

.suggestions-label {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: #7d8b9d;
    margin-bottom: 10px;
}

.suggestions-list {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.suggestion-item {
    display: inline-block;
    background: #f6f8fc;
    border: 1px solid #eef0f6;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 600;
    color: #5c6877;
    text-decoration: none;
    transition: all 0.2s ease;
}

.suggestion-item:hover {
    background: #fff3f5;
    border-color: #ff7a9b;
    color: #ff7a9b;
    transform: translateY(-1px);
}

body.search-modal-open {
    overflow: hidden !important;
}

@media (max-width: 768px) {
    .search-modal-content {
        padding: 30px 15px 40px;
    }

    .search-modal-title {
        font-size: 16px;
    }

    .search-modal-close {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }

    .search-modal-input {
        font-size: 16px;
        padding: 8px 0;
    }

    .search-modal-submit {
        width: 40px;
        height: 40px;
        font-size: 16px;
    }

    .suggestion-item {
        padding: 5px 12px;
        font-size: 12px;
    }
}

/* ============================================================================
   QUICK CONTACT FLOATING BUTTONS & CHAT BOXES
   ============================================================================ */

.quick-contact-wrapper {
    position: fixed;
    bottom: 25px;
    right: 25px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    z-index: 9999;
}

.quick-contact-btn {
    border: none;
    background: transparent;
    padding: 0;
    margin: 0;
    cursor: pointer;
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1), box-shadow 0.3s ease;
    border-radius: 50%;
    outline: none;
    position: relative;
}

.quick-contact-btn::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    z-index: -1;
    pointer-events: none;
}

.btn-messenger {
    animation: ringRing 4s infinite ease-in-out;
}

.btn-messenger::after {
    animation: ripplePulseMessenger 2s infinite ease-in-out;
}

.btn-zalo {
    animation: ringRing 4s infinite ease-in-out 0.5s;
}

.btn-zalo::after {
    border-radius: 12px;
    animation: ripplePulseZalo 2s infinite ease-in-out;
}

.quick-contact-btn:hover {
    transform: scale(1.1);
}

.quick-contact-btn svg {
    display: block;
    width: 50px;
    height: 50px;
}

/* Chat Box Popups */
.quick-chat-box {
    position: fixed;
    bottom: 145px;
    right: 25px;
    width: 320px;
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(108, 92, 231, 0.12);
    display: none;
    flex-direction: column;
    overflow: hidden;
    z-index: 999999;
    border: 1px solid #f0f2f7;
    transform-origin: bottom right;
    animation: slideUpChat 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.quick-chat-box.is-active {
    display: flex;
}

@keyframes slideUpChat {
    from {
        opacity: 0;
        transform: translateY(20px) scale(0.9);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.chat-box-header {
    padding: 16px;
    display: flex;
    align-items: center;
    position: relative;
}

.chat-box-header.header-messenger {
    background: #ffeef2;
    border-bottom: 1px solid #ffd5e0;
}

.chat-box-header.header-zalo {
    background: #e5f1ff;
    border-bottom: 1px solid #cce3ff;
}

.chat-box-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin-right: 12px;
}

.chat-box-avatar .avatar-icon {
    font-size: 20px;
}

.chat-box-avatar .avatar-dot.online {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background-color: #2ecc71;
    border: 2px solid #ffffff;
    border-radius: 50%;
}

.chat-box-title-area {
    display: flex;
    flex-direction: column;
    text-align: left;
}

.chat-box-name {
    font-size: 14px;
    font-weight: 700;
    color: #333333;
}

.chat-box-status {
    font-size: 11px;
    color: #7d8b9d;
    margin-top: 2px;
}

.chat-box-close {
    position: absolute;
    top: 16px;
    right: 16px;
    background: transparent;
    border: none;
    font-size: 20px;
    color: #a0aec0;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: color 0.2s ease;
}

.chat-box-close:hover {
    color: #4a5568;
}

.chat-box-body {
    padding: 20px 16px;
    background: #fafafc;
    min-height: 100px;
    display: flex;
    align-items: flex-start;
}

.chat-bubble.received {
    background: #ffffff;
    border: 1px solid #eef0f6;
    border-radius: 14px 14px 14px 4px;
    padding: 12px 16px;
    font-size: 13px;
    line-height: 1.5;
    color: #4a5568;
    max-width: 90%;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.02);
    text-align: left;
}

.chat-box-footer {
    padding: 14px 16px;
    background: #ffffff;
    border-top: 1px solid #f0f2f7;
    text-align: center;
}

.chat-box-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 700;
    border-radius: 20px;
    text-decoration: none !important;
    transition: all 0.3s ease;
}

.btn-go-messenger {
    background: #0084FF;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 132, 255, 0.2);
}

.btn-go-messenger:hover {
    background: #006bce;
    transform: translateY(-1px);
}

.btn-go-zalo {
    background: #0068FF;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(0, 104, 255, 0.2);
}

.btn-go-zalo:hover {
    background: #0052cc;
    transform: translateY(-1px);
}

/* Responsive adjustments */
@media (max-width: 480px) {
    .quick-contact-wrapper {
        bottom: 100px;
        right: 5px;
        gap: 10px;
    }

    .quick-contact-btn {
        width: 44px;
        height: 44px;
    }

    .quick-contact-btn svg {
        width: 44px;
        height: 44px;
    }

    .quick-chat-box {
        bottom: 125px;
        right: 20px;
        width: calc(100vw - 40px);
        max-width: 320px;
    }
}

/* Ring and Ripple Keyframes Animations */
@keyframes ringRing {

    0%,
    100% {
        transform: scale(1) rotate(0deg);
    }

    2% {
        transform: scale(1.1) rotate(15deg);
    }

    4% {
        transform: scale(1.1) rotate(-15deg);
    }

    6% {
        transform: scale(1.1) rotate(10deg);
    }

    8% {
        transform: scale(1.1) rotate(-10deg);
    }

    10% {
        transform: scale(1.1) rotate(5deg);
    }

    12% {
        transform: scale(1.1) rotate(-5deg);
    }

    14%,
    30% {
        transform: scale(1.1) rotate(0deg);
    }
}

@keyframes ripplePulseMessenger {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0.6);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 132, 255, 0);
        opacity: 0.5;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 132, 255, 0);
        opacity: 0;
    }
}

@keyframes ripplePulseZalo {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 104, 255, 0.6);
        opacity: 1;
    }

    70% {
        box-shadow: 0 0 0 15px rgba(0, 104, 255, 0);
        opacity: 0.5;
    }

    100% {
        box-shadow: 0 0 0 0 rgba(0, 104, 255, 0);
        opacity: 0;
    }
}

/* WooCommerce Checkout Vietnam Address Dropdowns Customization */
/* ==========================================================================
   SHARE PAGE FILTERS & SEARCH
   ========================================================================== */
.share-filter-section {
    margin-bottom: 36px;
    background: rgba(255, 255, 255, 0.4) !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
    border: 1.5px solid rgba(240, 230, 245, 0.7) !important;
    border-radius: 24px !important;
    padding: 24px !important;
    box-shadow: 0 10px 30px rgba(129, 114, 176, 0.03) !important;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.share-search-form {
    display: flex;
    gap: 12px;
    width: 100%;
}

.share-search-input-wrapper {
    position: relative;
    flex: 1;
    display: flex;
    align-items: center;
}

.share-search-icon {
    position: absolute;
    left: 18px;
    font-size: 16px;
    color: #a292b9;
    pointer-events: none;
}

.share-search-input {
    width: 100%;
    height: 48px;
    padding: 0 44px 0 48px !important;
    border-radius: 999px !important;
    border: 1.5px solid #ebd9ff !important;
    background: #ffffff !important;
    color: #4a485a !important;
    font-family: 'Fredoka', sans-serif !important;
    font-size: 15px !important;
    transition: all 0.3s ease !important;
    outline: none !important;
    box-sizing: border-box !important;
}

.share-search-input:focus {
    border-color: #ffb3d9 !important;
    box-shadow: 0 0 0 4px rgba(255, 179, 210, 0.2) !important;
}

.share-search-clear {
    position: absolute;
    right: 18px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #ebd9ff !important;
    color: #6a4a69 !important;
    border-radius: 50% !important;
    text-decoration: none !important;
    font-size: 10px !important;
    font-weight: bold !important;
    transition: all 0.2s ease !important;
}

.share-search-clear:hover {
    background: #ffd3e8 !important;
    color: #d4568c !important;
}

.share-search-btn {
    height: 48px;
    padding: 0 28px !important;
    border-radius: 999px !important;
    border: none !important;
    background: linear-gradient(135deg, #ffb3d9 0%, #ff9ebb 100%) !important;
    color: #ffffff !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 600 !important;
    font-size: 15px !important;
    cursor: pointer !important;
    box-shadow: 0 6px 15px rgba(255, 179, 210, 0.3) !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

.share-search-btn:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 18px rgba(255, 179, 210, 0.45) !important;
}

.share-categories-filter {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.share-cat-pill {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px !important;
    border-radius: 999px !important;
    background: #ffffff !important;
    border: 1.5px solid #ebd9ff !important;
    color: #6a4a69 !important;
    text-decoration: none !important;
    font-family: 'Fredoka', sans-serif !important;
    font-weight: 500 !important;
    font-size: 14px !important;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    box-shadow: 0 4px 10px rgba(129, 114, 176, 0.02) !important;
}

.share-cat-pill:hover {
    background: #f5eeff !important;
    border-color: #ebd9ff !important;
    transform: translateY(-1.5px) !important;
}

.share-cat-pill.active {
    background: linear-gradient(135deg, #ffb3d9 0%, #ffcbaf 100%) !important;
    border-color: #ffd3e8 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    box-shadow: 0 6px 14px rgba(255, 179, 210, 0.35) !important;
}

@media (max-width: 768px) {
    .share-filter-section {
        padding: 16px !important;
        gap: 16px !important;
        border-radius: 20px !important;
    }

    .share-search-form {
        flex-direction: column !important;
        gap: 10px !important;
    }

    .share-search-btn {
        width: 100% !important;
    }

    .share-cat-pill {
        padding: 6px 14px !important;
        font-size: 13px !important;
    }
}

/* AJAX Loading State for sharing page */
#share-posts-area {
    transition: opacity 180ms ease !important;
}

#share-posts-area.is-loading {
    opacity: 0.55 !important;
    pointer-events: none !important;
}

/* ==========================================================================
   SINGLE PRODUCT GALLERY ZOOM FIX
   ========================================================================== */
.custom-gallery {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.custom-gallery-main {
    width: 100% !important;
    max-width: 600px !important;
    height: 0 !important;
    padding-bottom: 100% !important;
    /* Perfect responsive 1:1 ratio square */
    overflow: hidden !important;
    position: relative !important;
}

.custom-gallery-main img {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
}

.custom-gallery-thumbs-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    position: relative !important;
}

.custom-gallery-thumbs {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    display: flex !important;
    flex-wrap: nowrap !important;
}

/* Responsive Grid and Width Overrides to prevent layout stretching */
@media (max-width: 1100px) {
    .single-product .tht-product-detail {
        grid-template-columns: minmax(0, 1fr) !important;
    }
}

@media (max-width: 768px) {

    /* Chuyển đổi Grid sang Flexbox để chống bể layout di động */
    .single-product .tht-product-detail {
        display: flex !important;
        flex-direction: column !important;
        padding: 16px !important;
        border-radius: 16px !important;
        gap: 16px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        margin-left: 0 !important;
        margin-right: 0 !important;
    }

    .single-product .tht-product-detail__gallery,
    .single-product .tht-product-detail__summary {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    .single-product .summary.entry-summary {
        display: block !important;
    }

    /* Tối ưu hóa Gallery Ảnh chính trên điện thoại */
    .custom-gallery {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    .custom-gallery-main {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        aspect-ratio: 1 / 1 !important;
        padding-bottom: 0 !important;
        /* Xóa hack padding-bottom */
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .custom-gallery-main img {
        position: static !important;
        /* Đưa về static */
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
        /* Contain ảnh để không bị crop */
    }

    /* Thiết lập lại Thumbnail Carousel thành Flexbox hàng ngang chuẩn */
    .custom-gallery-thumbs-wrapper {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
        position: relative !important;
    }

    .custom-gallery-thumbs {
        flex: 1 !important;
        /* Chiếm toàn bộ không gian ở giữa */
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        gap: 8px !important;
        scrollbar-width: none !important;
        /* Ẩn scrollbar Firefox */
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;
        width: auto !important;
        max-width: 100% !important;
    }

    .custom-gallery-thumbs::-webkit-scrollbar {
        display: none !important;
        /* Ẩn scrollbar Chrome/Safari */
    }

    .custom-gallery-thumbs .thumb {
        flex: 0 0 60px !important;
        /* Kích thước ảnh thumb cố định */
        width: 60px !important;
        height: 60px !important;
        box-sizing: border-box !important;
        border-radius: 8px !important;
        margin: 0 !important;
    }

    .custom-gallery-thumbs .thumb img {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
        border-radius: 6px !important;
    }

    /* Tinh chỉnh lại hai nút chuyển ảnh */
    .custom-gallery-thumbs-wrapper .thumb-prev,
    .custom-gallery-thumbs-wrapper .thumb-next {
        position: static !important;
        /* Đưa về static trong luồng flex */
        flex: 0 0 30px !important;
        width: 30px !important;
        height: 60px !important;
        background: #f5f5f5 !important;
        border: 1px solid #e3e3e3 !important;
        border-radius: 8px !important;
        color: #333 !important;
        font-size: 20px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        cursor: pointer !important;
        padding: 0 !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   CUSTOM DROP-DOWN VARIATION SELECTOR (UI/UX Optimization)
   ========================================================================== */

.tht-variation-dropdown-container {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 24px !important;
    grid-column: 1 / -1 !important;
}

.tht-variation-dropdown-trigger {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
    min-height: 60px !important;
    padding: 10px 18px !important;
    border-radius: 16px !important;
    border: 1.5px solid #ead9e3 !important;
    background: linear-gradient(180deg, #fff, #fff8fb) !important;
    box-shadow: 0 8px 20px rgba(255, 182, 212, 0.08) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    text-align: left !important;
}

.tht-variation-dropdown-trigger:hover,
.tht-variation-dropdown-container.is-open .tht-variation-dropdown-trigger {
    border-color: #d4568c !important;
    box-shadow: 0 10px 24px rgba(212, 86, 140, 0.12) !important;
}

.tht-variation-dropdown-trigger__selected {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    color: #2f2f2f !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    width: 100% !important;
}

.tht-variation-dropdown-trigger__selected img {
    width: 38px !important;
    height: 38px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 1px solid #f0dbe5 !important;
    flex-shrink: 0 !important;
}

.tht-variation-dropdown-trigger__text {
    color: #7c5268 !important;
    font-weight: 600 !important;
}

.tht-variation-dropdown-trigger__stock-status {
    color: #d4568c !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    margin-left: auto !important;
}

.tht-variation-dropdown-trigger__icon {
    display: inline-flex !important;
    align-items: center !important;
    color: #7c5268 !important;
    transition: transform 0.3s ease !important;
    margin-left: 8px !important;
    flex-shrink: 0 !important;
}

.tht-variation-dropdown-container.is-open .tht-variation-dropdown-trigger__icon {
    transform: rotate(180deg) !important;
}

/* Float variations dropdown swatches list */
.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatches {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 9999 !important;
    display: none !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    grid-template-columns: none !important;
    /* Reset mobile grid layout */
    gap: 6px !important;
    max-height: 280px !important;
    overflow-y: auto !important;
    padding: 10px !important;
    background: #fff !important;
    border: 1.5px solid #ead9e3 !important;
    border-radius: 16px !important;
    box-shadow: 0 15px 35px rgba(255, 182, 212, 0.18) !important;
    margin-top: 0 !important;
    box-sizing: border-box !important;
}

.single-product .summary.entry-summary .tht-variation-dropdown-container.is-open .tht-variation-swatches {
    display: flex !important;
}

/* Individual variation item styling inside dropdown */
.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
    height: auto !important;
    /* Overrides mobile height override */
    min-height: 52px !important;
    padding: 8px 12px !important;
    border-radius: 12px !important;
    border: 1px solid transparent !important;
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    transition: all 0.15s ease !important;
    box-sizing: border-box !important;
}

.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch:hover,
.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch.is-selected {
    background: #fff0f5 !important;
    border-color: #f0b8cb !important;
    box-shadow: none !important;
    transform: none !important;
}

.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch__image {
    width: 36px !important;
    height: 36px !important;
    flex: 0 0 36px !important;
    border-radius: 50% !important;
    box-sizing: border-box !important;
}

.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch__name {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
}

/* Out of stock variation visual state */
.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch.is-out-of-stock {
    opacity: 0.55 !important;
}

.single-product .summary.entry-summary .tht-variation-dropdown-container .tht-variation-swatch.is-out-of-stock .tht-variation-swatch__name {
    text-decoration: line-through !important;
    color: #888 !important;
}

/* Custom Webkit scrollbar for dropdown list */
.tht-variation-dropdown-container .tht-variation-swatches::-webkit-scrollbar {
    width: 6px !important;
}

.tht-variation-dropdown-container .tht-variation-swatches::-webkit-scrollbar-track {
    background: #fff !important;
    border-radius: 16px !important;
}

.tht-variation-dropdown-container .tht-variation-swatches::-webkit-scrollbar-thumb {
    background: #f0b8cb !important;
    border-radius: 16px !important;
}

.tht-variation-dropdown-container .tht-variation-swatches::-webkit-scrollbar-thumb:hover {
    background: #d4568c !important;
}

/* ============================================================================
   ACCESSIBILITY OVERRIDES (CONTRAST & TOUCH TARGETS)
   ============================================================================ */

/* 1. Touch Targets for Slider Navigation & Pagination */
.home-hero-slide-link {
    display: block !important;
    margin-bottom: 48px !important;
    /* Tạo khoảng trống không click ở đáy để tránh đè lên vùng dots */
    box-sizing: border-box !important;
}

.home-hero-dots {
    gap: 24px !important;
    /* Tăng khoảng cách giữa các dots để tránh chồng lấn vùng chạm */
}

.home-hero-dot {
    position: relative !important;
    width: 8px !important;
    /* Tăng nhẹ kích thước hiển thị của chấm tròn */
    height: 8px !important;
}

/* Tạo vùng chạm rộng 48px x 48px chuẩn Lighthouse */
.home-hero-dot::before {
    content: '' !important;
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    width: 48px !important;
    height: 48px !important;
    transform: translate(-50%, -50%) !important;
}

/* Tăng kích thước phím bấm mũi tên slider đạt chuẩn 48px */
.home-hero-arrow {
    width: 48px !important;
    height: 48px !important;
}

/* 2. Color Contrast improvements */

/* Announcement Bar */
.site-announcement-bar,
.announcement-item {
    color: #103639 !important;
    /* Đổi trắng sang xanh mòng két sẫm trên nền mint nhạt */
}

/* Brand Main Logo */
.brand-main {
    color: #b83e6d !important;
    /* Đỏ rose đậm thay cho hồng nhạt trên nền sáng */
}

/* Primary Navigation Menu */
.site-navigation-bar a {
    color: #5c1926 !important;
    /* Đỏ mận sẫm thay cho trắng trên nền hồng */
}

/* Marquee Slogan text */
.home-scroll-slogan {
    color: #381347 !important;
    /* Tím sẫm thay cho trắng trên nền tím nhạt */
}

/* Newsletter Section */
.home-subscribe-kicker {
    color: #103b3e !important;
    /* Đổi trắng sang xanh mòng két sẫm */
}

.home-subscribe-title {
    color: #124346 !important;
    /* Đổi vàng nhạt sang xanh mòng két sẫm */
}

.home-subscribe-copy {
    color: #15474b !important;
    /* Đổi trắng sang xanh mòng két sẫm */
}

.home-subscribe-input {
    color: #222222 !important;
    /* Chữ nhập vào đậm hơn để dễ đọc */
}

.home-subscribe-input::placeholder {
    color: #555555 !important;
    /* Placeholder đậm hơn */
}

/* Story Section */
.home-story-title {
    color: #b04f1c !important;
    /* Cam đất đậm thay cho cam nhạt trên nền trắng */
}

.home-story-button {
    color: #2c2c2c !important;
    /* Chữ xám đậm thay cho trắng trên nền nút vàng cam */
}

/* Reviews Section */
.home-reviews-title span:first-child {
    color: #c93b72 !important;
    /* Hồng sẫm thay cho hồng nhạt */
}

.home-reviews-title span:last-child {
    color: #167a80 !important;
    /* Xanh ngọc sẫm thay cho xanh ngọc nhạt */
}

/* Special Offer Badge */
.home-offer-badge {
    color: #49153b !important;
    /* Tím sẫm thay cho trắng trên nền tím nhạt */
}

/* Shop with us Button */
.home-shopwithus-button {
    color: #023d40 !important;
    /* Xanh mòng két sẫm thay cho trắng trên nền xanh nhạt */
}

/* Instagram Title */
.home-instagram-title {
    color: #61042b !important;
    /* Hồng mận sẫm thay cho hồng nhạt trên nền hồng */
}

/* Footer elements */
.footer-contact-list .contact-phone a {
    color: #b83e6d !important;
    /* Hồng sẫm thay cho hồng nhạt trên nền sáng */
}

.footer-contact-list .contact-hours {
    color: #555555 !important;
    /* Xám đậm thay cho xám nhạt */
}

.footer-credit-band,
.footer-credit-text,
.footer-credit-note {
    color: #103b3e !important;
    /* Xanh mòng két sẫm thay cho trắng trên nền mint */
}

/* ==========================================
   CUSTOM VARIATION MODAL STYLING
   ========================================== */

#tht-variation-modal {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    right: auto !important;
    bottom: auto !important;
    margin: 0 !important;
    max-width: 90% !important;
    width: 400px !important;
    background: #ffffff !important;
    padding: 36px 24px !important;
    border-radius: 28px !important;
    box-shadow: 0 24px 60px rgba(183, 140, 155, 0.22) !important;
    border: 1px solid rgba(255, 192, 203, 0.45) !important;
    z-index: 100005 !important;
    text-align: center !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    box-sizing: border-box !important;
}

#tht-variation-modal p {
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
    font-size: 16px !important;
    line-height: 1.6 !important;
    color: #4b3d43 !important;
    margin: 20px 0 24px 0 !important;
    font-weight: 500 !important;
}

/* Beautiful custom Warning Icon before the message */
#tht-variation-modal::before {
    content: '⚠️';
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 72px !important;
    height: 72px !important;
    background: #ffeef2 !important;
    border-radius: 50% !important;
    margin: 0 auto !important;
    font-size: 34px !important;
    box-shadow: 0 8px 20px rgba(255, 102, 157, 0.12) !important;
}

#tht-variation-modal-ok {
    background: linear-gradient(135deg, #ff8fb1, #ffb3d9) !important;
    color: #ffffff !important;
    border: none !important;
    padding: 14px 36px !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    border-radius: 999px !important;
    cursor: pointer !important;
    box-shadow: 0 8px 20px rgba(255, 102, 157, 0.25) !important;
    transition: all 0.3s ease !important;
    width: 100% !important;
    max-width: 180px !important;
    display: inline-block !important;
    font-family: 'Fredoka', 'Outfit', sans-serif !important;
}

#tht-variation-modal-ok:hover {
    background: linear-gradient(135deg, #ff6b9d, #ff9fb5) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 10px 24px rgba(255, 102, 157, 0.35) !important;
}

#tht-variation-modal-ok:active {
    transform: translateY(0) !important;
}

/* Modern blurred backdrop for modal overlay */
#overlay.active {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
    background: rgba(30, 20, 25, 0.45) !important;
    transition: opacity 300ms ease !important;
    z-index: 99990 !important;
}