/* ===== UX/UI fix 08/10/2026 (Claude) ===== */

/* Trang sản phẩm: bố cục 2 cột trên desktop */

@media (min-width: 850px) {

  .single-product .product-main .row.content-row { flex-wrap: nowrap; align-items: flex-start; }

  .single-product .product-main .product-gallery { flex: 0 0 50%; max-width: 50%; position: sticky; top: 130px; align-self: flex-start; }

  .single-product .product-main .product-info { flex: 1 1 50%; max-width: 50%; min-width: 0; padding-left: 32px; }

}

.single-product .product-info form.cart { flex-wrap: wrap; }

.single-product .mdc-booking-wrapper { width: 100%; max-width: 100%; box-sizing: border-box; flex: 1 1 100%; }

.single-product .product-main { padding-bottom: 16px; }



/* Cỡ chữ tiêu đề trang sản phẩm */

.single-product .product-info h1.product-title { font-size: clamp(26px, 3vw, 36px); line-height: 1.25; color: var(--mdc-jade, #123E35); }

.single-product h2 { font-size: clamp(22px, 2.4vw, 30px); }



/* Ẩn nút chuyển sản phẩm (>) của Flatsome */

.single-product .next-prev-thumbs { display: none; }



/* Chọn ngày: xuống dòng thay vì cuộn ngang */

#mdc_booking_date + div { flex-wrap: wrap; overflow: visible; }

#mdc_booking_date + div > .mdc-booking-date-item { flex: 0 0 calc(25% - 8px); min-width: 0; }



/* Hộp Đặc biệt: tiêu đề theo màu thương hiệu */

.mdc-product-promises h4 { color: var(--mdc-jade, #123E35); }



/* Form đánh giá */

.single-product p.stars a { font-size: 0; width: auto; height: auto; text-indent: 0; margin-right: 12px; text-decoration: none; }

.single-product p.stars a::before, .single-product p.stars a::after { font-family: inherit; font-size: 20px; color: #C5AC78; letter-spacing: 1px; }

.single-product p.stars a::after { content: none; }

.single-product p.stars a.star-1::before { content: "\2605"; }

.single-product p.stars a.star-2::before { content: "\2605\2605"; }

.single-product p.stars a.star-3::before { content: "\2605\2605\2605"; }

.single-product p.stars a.star-4::before { content: "\2605\2605\2605\2605"; }

.single-product p.stars a.star-5::before { content: "\2605\2605\2605\2605\2605"; }

.single-product p.stars a.active::before, .single-product p.stars a:hover::before { color: #B8860B; }

.single-product #review_form_wrapper, .single-product #review_form { border-color: var(--mdc-border, #E8E2D5); }

.single-product #respond input#submit, .single-product .comment-form .submit { background: var(--mdc-jade, #123E35); border-color: var(--mdc-jade, #123E35); color: #fff; border-radius: 8px; text-transform: none; }



/* Mobile */

@media (max-width: 849px) {

  .mdc-header-btn { display: none; }

  .single-product form.cart > div:has(> .mdc-btn-outline) { gap: 8px; }

  .single-product form.cart .mdc-btn-outline { flex: 1 1 0; min-width: 0; padding: 0 6px; font-size: 13px; white-space: nowrap; min-height: 44px; justify-content: center; gap: 4px; }

  .single-product form.cart .mdc-btn-outline img, .single-product form.cart .mdc-btn-outline svg { flex-shrink: 0; }

  #mdc_booking_date + div > .mdc-booking-date-item { flex: 0 0 calc(25% - 8px); }

}

/* Nút nổi Zalo / Gọi: nhỏ lại và không che chân trang */

@media (max-width: 849px) {

  body > a[href^="tel:"][style*="position: fixed"], #footer > a[href*="zalo.me"][style*="position: fixed"] { width: 48px; height: 48px; right: 12px; font-size: 12px; }

  body > a[href^="tel:"][style*="position: fixed"] { bottom: 16px; }

  #footer > a[href*="zalo.me"][style*="position: fixed"] { bottom: 72px; }

}

#footer { padding-bottom: 96px; }





/* ===== SEO block danh mục 08/10/2026 (Claude) ===== */

/* Ẩn mô tả danh mục mặc định ở đầu trang (nội dung đã hiển thị ở khối SEO cuối trang) */

.tax-product_cat .term-description { display: none; }

.mdc-seo-block { font-size: 15px; line-height: 1.7; }

.mdc-seo-block h2 { font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--mdc-jade, #123E35); margin: 28px 0 12px; }

.mdc-seo-block h2:first-child { margin-top: 0; }

.mdc-seo-block h3 { font-size: 17px; line-height: 1.4; color: var(--mdc-jade, #123E35); margin: 18px 0 6px; font-family: inherit; font-weight: 700; }

.mdc-seo-block ul, .mdc-seo-block ol { margin: 0 0 16px 20px; }

.mdc-seo-block li { margin-bottom: 6px; }

.mdc-seo-block table { width: 100%; border-collapse: collapse; margin: 12px 0 8px; background: #fff; font-size: 14px; }

.mdc-seo-block th, .mdc-seo-block td { border: 1px solid var(--mdc-border, #E8E2D5); padding: 10px 12px; text-align: left; vertical-align: top; }

.mdc-seo-block th { background: var(--mdc-champagne-light, #F7F3EB); color: var(--mdc-jade, #123E35); font-weight: 700; }

.mdc-seo-block a { color: var(--mdc-jade, #123E35); text-decoration: underline; }

@media (max-width: 600px) { .mdc-seo-block table { display: block; overflow-x: auto; white-space: nowrap; } }





/* ===== Trang danh mục UX 08/10/2026 (Claude) ===== */

.tax-product_cat h1.page-title, .post-type-archive-product h1.page-title { font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; }

.mdc-archive-intro { margin: 8px 0 20px; font-size: 15px; color: var(--mdc-text-muted, #556B64); }

.mdc-archive-intro .woocommerce-Price-amount { color: var(--mdc-jade, #123E35); font-weight: 700; }

/* Thẻ sản phẩm */

.tax-product_cat .product-small p.category, .post-type-archive-product .product-small p.category { display: none; }

body .product-small.box .woocommerce-loop-product__title, body .product-small .product-title { font-size: 18px; line-height: 1.35; }

.product-small .woocommerce-loop-product__title a { color: var(--mdc-jade, #123E35); }

.tax-product_cat .mdc-badge-tier { display: none; }

.mdc-card-note { font-size: 13.5px; color: var(--mdc-jade, #123E35); font-weight: 600; margin-top: 4px; }

.product-small .mdc-btn-outline { white-space: nowrap; }

/* FAQ dạng bấm mở */

.mdc-seo-block details.mdc-faq { border: 1px solid var(--mdc-border, #E8E2D5); border-radius: 8px; background: #fff; margin: 0 0 10px; padding: 0 16px; }

.mdc-seo-block details.mdc-faq summary { cursor: pointer; font-weight: 700; color: var(--mdc-jade, #123E35); padding: 12px 0; list-style: none; position: relative; padding-right: 24px; }

.mdc-seo-block details.mdc-faq summary::-webkit-details-marker { display: none; }

.mdc-seo-block details.mdc-faq summary::after { content: "+"; position: absolute; right: 0; top: 10px; font-size: 20px; color: var(--mdc-champagne, #C5AC78); }

.mdc-seo-block details.mdc-faq[open] summary::after { content: "–"; }

.mdc-seo-block details.mdc-faq p { margin: 0 0 12px; }

/* Mobile: cột danh mục thành hàng chip, không dính, không đè sản phẩm */

@media (max-width: 849px) {

  .mdc-sidebar { position: static; top: auto; flex: 1 1 100%; padding: 12px; }

  .mdc-sidebar h3 { font-size: 15px; margin-bottom: 8px; padding-bottom: 0; border-bottom: 0; }

  .mdc-sidebar ul { display: flex; gap: 8px; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; -webkit-overflow-scrolling: touch; }

  .mdc-sidebar li { margin: 0; flex: 0 0 auto; }

  .mdc-sidebar li a { border: 1px solid var(--mdc-border, #E8E2D5); border-radius: 9999px; padding: 6px 12px; background: #fff; white-space: nowrap; font-size: 13.5px; }

  .mdc-sidebar li a svg { display: none; }

  body .product-small.box .woocommerce-loop-product__title, body .product-small .product-title { font-size: 15px; }

  .product-small .mdc-btn-outline { font-size: 12.5px; padding: 0 8px; }

  .mdc-archive-intro { font-size: 14px; }

}


/* HIDE NATIVE FLATSOME ARCHIVE HEADERS AND BREADCRUMBS TO USE CUSTOM ONES */
.shop-page-title, .category-page-title, .page-title-inner {
    display: none;
}
.tax-product_cat .woocommerce-breadcrumb:not(:first-of-type) {
    display: none;
}

/* Archive layout */

        .mdc-sidebar { flex: 0 0 250px; }
        .mdc-sidebar-list { list-style: none; padding: 0; margin: 0; }
        .mdc-sidebar-item { margin-bottom: 12px; }
        .mdc-sidebar-link { display: flex; align-items: center; gap: 8px; font-size: 14px; text-decoration: none; transition: color 0.2s; }
        
        @media (max-width: 849px) {
            .mdc-shop-layout { flex-direction: column; }
            .mdc-sidebar { flex: 1 1 auto; width: 100%; position: static; padding: 12px; margin-bottom: 16px; border: none; border-bottom: 1px solid var(--mdc-border); border-radius: 0; background: transparent; }
            .mdc-sidebar h3 { display: none; }
            .mdc-sidebar-list { display: flex; overflow-x: auto; gap: 12px; padding-bottom: 8px; white-space: nowrap; scrollbar-width: none; }
            .mdc-sidebar-list::-webkit-scrollbar { display: none; }
            .mdc-sidebar-item { margin-bottom: 0; }
            .mdc-sidebar-link { background: var(--mdc-surface); padding: 8px 16px; border-radius: 9999px; border: 1px solid var(--mdc-border); font-size: 13px; }
            .mdc-sidebar-item.is-active .mdc-sidebar-link { background: var(--mdc-champagne-light); border-color: var(--mdc-champagne); color: var(--mdc-jade); }
        }
    
/* Single product reviews */

        #review_form_wrapper { display: none; margin-bottom: 30px; padding: 20px; background: var(--mdc-surface, #F9F6EE); border-radius: 8px; }
        .comment-form-email { display: none; }
    

/* MDC Sticky Bar */
.mdc-sticky {
    display: none;
}
@media (max-width: 849px) {
    .mdc-sticky {
        display: grid;
        position: fixed; left: 0; right: 0; bottom: 0; z-index: 999;
        height: calc(64px + env(safe-area-inset-bottom, 0px));
        grid-template-columns: auto 1fr 1.5fr; gap: 10px;
        padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
        background: #fff; border-top: 1px solid var(--mdc-border, #E8E2D5);
        box-shadow: 0 -4px 16px rgba(10, 30, 25, 0.08); transform: translateY(100%); transition: transform 0.3s ease;
    }
    .mdc-sticky.is-visible { transform: translateY(0); }
    body.single-product .floating-zalo, body.single-product .floating-tel { display: none; }
}


/* Luxury Product Cards Overrides */
.product-small.box {
    background: #FFFFFF;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.04);
    border: 1px solid rgba(197, 172, 120, 0.15);
    transition: all 0.3s ease;
    overflow: hidden;
}
.product-small.box:hover {
    box-shadow: 0 12px 35px rgba(10, 30, 25, 0.08);
    transform: translateY(-4px);
    border-color: rgba(197, 172, 120, 0.4);
}
.product-small.box .box-text {
    padding: 20px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
body .product-small.box .woocommerce-loop-product__title, body .product-small .product-title { 
    font-family: var(--mdc-font-serif, 'Playfair Display', serif) !important;
    font-size: 20px !important; 
    line-height: 1.35; 
    font-weight: 700 !important;
    margin-bottom: 8px;
}
.product-small .woocommerce-loop-product__title a { color: var(--mdc-jade, #123E35) !important; transition: color 0.3s; }
.product-small .woocommerce-loop-product__title a:hover { color: var(--mdc-champagne, #C5AC78) !important; }
.product-small .price { color: var(--mdc-jade, #123E35) !important; font-weight: 600 !important; font-size: 16px !important; }
.mdc-card-note { font-size: 13px !important; color: #666 !important; font-weight: 400 !important; margin-top: 4px; }
.product-small .mdc-btn-outline { white-space: nowrap; border-radius: 8px !important; }

/* Flex alignment for button to stick to bottom */
.product-small.box { display: flex; flex-direction: column; height: 100%; }
.product-small.box .box-image { flex-shrink: 0; }
.mdc-loop-cta-wrap { margin-top: auto !important; padding-top: 12px; }

/* iOS Safari Input Reset */
input[type='text'], input[type='email'], input[type='tel'], input[type='number'], input[type='password'], textarea, select { -webkit-appearance: none; -moz-appearance: none; appearance: none; border-radius: 8px; }

/* Fix Product Title Font to Playfair Display */
body .product-small.box .woocommerce-loop-product__title a, body .product-small .product-title a { font-family: var(--mdc-font-serif, 'Playfair Display', serif) !important; }

/* Quick View Button Sync Colors */
body .product-small .quick-view { background-color: var(--mdc-jade, #123E35) !important; color: #ffffff !important; font-weight: 600 !important; transition: all 0.3s; } body .product-small .quick-view:hover { background-color: var(--mdc-champagne, #C5AC78) !important; color: var(--mdc-jade, #123E35) !important; }