/* ============================================================
   AK Product Detail — reskin theo AK Design System
   (Navy #1C2B3A / Gold #B8922A / Playfair Display + Inter)
   Chỉ áp dụng trong body.single-product — KHÔNG đụng header,
   footer, nút nổi góc phải (đã có sẵn qua Porto hook riêng).
   ============================================================ */

/* ---- 1. Breadcrumb — đồng bộ font/size, sửa lỗi item cuối lệch cỡ chữ ----
   Nguyên nhân: Porto bọc 3 item đầu trong <a><span>, riêng item cuối (tên
   sản phẩm) là text trần trong <li> (porto_breadcrumb_leaf(), không có
   <span>) nên không nhận cùng rule font-size/weight như các item có <span>.
   Ép font-size/weight/letter-spacing giống nhau cho MỌI <li> bất kể có
   <a>/<span> hay không, không sửa file gốc Porto. */
body.single-product .page-top ul.breadcrumb,
body.single-product .page-top .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}

body.single-product .page-top ul.breadcrumb > li,
body.single-product .page-top ul.breadcrumb > li a,
body.single-product .page-top ul.breadcrumb > li span {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    font-weight: 500 !important;
    letter-spacing: .3px !important;
    text-transform: uppercase !important;
    line-height: 1.6 !important;
}

body.single-product .page-top ul.breadcrumb > li,
body.single-product .page-top ul.breadcrumb > li a {
    color: #B8922A !important;
}

body.single-product .page-top ul.breadcrumb > li a:hover {
    color: #D4A843 !important;
}

/* Item cuối (tên sản phẩm hiện tại) — không phải link, tô đậm navy để phân
   biệt rõ đang ở đâu, cùng cỡ chữ với các item khác. */
body.single-product .page-top ul.breadcrumb > li:last-child {
    color: #1C2B3A !important;
    font-weight: 600 !important;
}

body.single-product .page-top ul.breadcrumb .delimiter,
body.single-product .page-top ul.breadcrumb > li i {
    color: #E0DDD8 !important;
    margin: 0 8px !important;
    font-size: 11px !important;
}

/* ---- 2. Tiêu đề sản phẩm ---- */
body.single-product .product_title,
body.single-product .summary .product_title {
    font-family: 'Playfair Display', serif !important;
    color: #1C2B3A !important;
    font-weight: 600 !important;
    line-height: 1.32 !important;
}

/* ---- 3. Giá ---- */
body.single-product .summary .price,
body.single-product .summary .price ins .woocommerce-Price-amount,
body.single-product .summary .price > .woocommerce-Price-amount {
    color: #1C2B3A !important;
    font-weight: 700 !important;
}

body.single-product .summary .price del {
    color: #6B6660 !important;
    opacity: 1 !important;
}

/* ---- 4. Nút Thêm vào giỏ hàng ---- */
body.single-product .single_add_to_cart_button,
body.single-product .single_add_to_cart_button.button.alt {
    background-color: #B8922A !important;
    border-color: #B8922A !important;
    color: #fff !important;
    font-family: 'Inter', sans-serif !important;
    letter-spacing: 1px !important;
    transition: background-color .25s ease, border-color .25s ease !important;
}

body.single-product .single_add_to_cart_button:hover {
    background-color: #D4A843 !important;
    border-color: #D4A843 !important;
}

body.single-product .single_add_to_cart_button:disabled,
body.single-product .single_add_to_cart_button.disabled {
    background-color: #ccc !important;
    border-color: #ccc !important;
    color: #888 !important;
    cursor: not-allowed !important;
}

/* ---- 5. Tabs (Thông tin bổ sung / Mô tả / Đánh giá) ----
   Lưu ý: trang thật KHÔNG dùng markup WooCommerce mặc định (ul.tabs/ul.wc-tabs)
   — Porto render tabs qua widget Elementor "porto_cp_tabs" dùng plugin
   easyResponsiveTabs: ul.resp-tabs-list > li.resp-tab-item, active =
   li.resp-tab-active. Verify bằng DOM thật trước khi sửa (đừng đoán theo
   markup WC gốc). */
body.single-product .woocommerce-tabs ul.resp-tabs-list li.resp-tab-item {
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    letter-spacing: .5px !important;
    text-transform: uppercase !important;
    color: #6B6660 !important;
    border-bottom: 2px solid transparent !important;
    transition: color .2s, border-color .2s !important;
}

body.single-product .woocommerce-tabs ul.resp-tabs-list li.resp-tab-active {
    color: #1C2B3A !important;
    border-bottom: 2px solid #B8922A !important;
}

body.single-product .woocommerce-tabs table.shop_attributes th {
    color: #6B6660 !important;
    font-weight: 500 !important;
    background: transparent !important;
}

body.single-product .woocommerce-tabs table.shop_attributes td {
    color: #1C2B3A !important;
    font-weight: 500 !important;
}

/* ---- 6. Sản phẩm liên quan ---- */
body.single-product .related.products > h2 {
    font-family: 'Playfair Display', serif !important;
    color: #1C2B3A !important;
    font-weight: 600 !important;
}

body.single-product .related.products ul.products li.product .woocommerce-loop-product__title {
    font-family: 'Inter', sans-serif !important;
    color: #1C2B3A !important;
}

body.single-product .related.products ul.products li.product .price {
    color: #1C2B3A !important;
    font-weight: 700 !important;
}

/* ---- 7. Buybox mua theo m² — quantity full width, 2 row (hàng 2 là nút
   Thêm vào giỏ hàng gốc của WooCommerce render ngay sau) ---- */
.ak-tile-mode .quantity {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

.ak-m2-buybox {
    width: 100%;
    margin: 10px 0;
}

.ak-m2-qty-row {
    display: flex;
    flex-direction: column;
    gap: 14px;
    width: 100%;
}

.ak-m2-qty {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    border: 1px solid #E0DDD8;
    background: #fff;
}

.ak-m2-qty button {
    width: 44px;
    height: 48px;
    flex-shrink: 0;
    border: none;
    background: transparent;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    color: #1C2B3A;
    transition: color .2s;
}

.ak-m2-qty button:hover {
    color: #B8922A;
}

.ak-m2-qty-value {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 6px;
    flex: 1;
}

.ak-m2-input {
    width: 80px;
    text-align: center;
    border: none;
    font-size: 16px;
    font-weight: 600;
    color: #1C2B3A;
    background: transparent;
    -moz-appearance: textfield;
}

.ak-m2-input::-webkit-outer-spin-button,
.ak-m2-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.ak-m2-unit {
    font-size: 13px;
    color: #6B6660;
}

/* ---- 8. Hàng gộp: So sánh + Yêu thích cùng 1 row, cùng cỡ chữ/icon ----
   JS (ak-product-detail.js) bọc .cpc-wrap và .yith-wcwl-add-to-wishlist
   vào chung 1 div.ak-actions-row. */
.ak-actions-row {
    display: flex;
    align-items: center;
    gap: 20px;
    margin: 10px 0;
    flex-wrap: wrap;
}

.ak-actions-row .cpc-wrap {
    margin: 0;
}

.ak-actions-row .ak-actions-divider {
    width: 1px;
    height: 14px;
    background: #E0DDD8;
    flex: 0 0 auto;
}

.ak-actions-row .cpc-label-link,
.ak-actions-row .yith-wcwl-add-to-wishlist a,
.ak-actions-row .yith-wcwl-add-to-wishlist span:not(.yith-wcwl-tooltip) {
    font-size: 13px !important;
    min-width: 0 !important;
    line-height: 1.5 !important;
    color: #6B6660 !important;
}

.ak-actions-row .cpc-icon,
.ak-actions-row .yith-wcwl-add-to-wishlist svg,
.ak-actions-row .yith-wcwl-add-to-wishlist i {
    font-size: 15px !important;
    width: 15px !important;
    height: 15px !important;
}

.ak-actions-row .yith-wcwl-add-to-wishlist a {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 0 !important;
}

.ak-actions-row .cpc-wrap:hover .cpc-icon,
.ak-actions-row .cpc-wrap:hover .cpc-label-link,
.ak-actions-row .yith-wcwl-add-to-wishlist a:hover {
    color: #B8922A !important;
}

/* ---- 9. Gallery — main slider (owl-carousel) + thumbnail (slick vertical)
   Chỉ chỉnh màu sắc/viền, KHÔNG đổi hướng/orientation slick (do Theme Option
   Porto quyết định), tránh xung đột JS khởi tạo slider. ---- */
body.single-product .woocommerce-product-gallery .product-image-slider,
body.single-product .woocommerce-product-gallery .flex-viewport {
    border: 1px solid #E0DDD8 !important;
}

body.single-product .woocommerce-product-gallery img {
    transition: transform .5s ease !important;
}

body.single-product .woocommerce-product-gallery .zoom {
    color: #B8922A !important;
}

body.single-product .product-thumbnails .slick-slide {
    border: 2px solid transparent !important;
    cursor: pointer;
    transition: border-color .2s !important;
}

body.single-product .product-thumbnails .slick-slide.slick-current,
body.single-product .product-thumbnails .slick-slide:hover {
    border-color: #B8922A !important;
}

/* ---- 10. Danh sách thông số nhanh (Mã / Danh mục / Số viên / Trọng lượng /
   Độ dày / Số lượng vân / Ảnh map) — span.*_wrapper do Porto/bizbox render,
   xem chi tiết cấu trúc tại module ak-product-detail.php. ---- */
body.single-product .product_meta {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-size: 13.5px;
    color: #6B6660;
    margin-bottom: 20px;
}

body.single-product .product_meta > span {
    line-height: 1.6;
}

body.single-product .product_meta a {
    color: #6B6660;
    transition: color .2s;
}

body.single-product .product_meta a:hover {
    color: #B8922A;
}

body.single-product .product_meta .sku,
body.single-product .product_meta .item,
body.single-product .product_meta .weight,
body.single-product .product_meta .thick,
body.single-product .product_meta .stripe {
    font-weight: 600;
    color: #1C2B3A;
}

body.single-product .product_meta .map a {
    color: #B8922A;
    text-decoration: underline;
}

/* ---- 11. Short description (khối text ngay dưới giá, VD "Giao nhanh 1-2
   ngày...") — reskin thành khối nổi bật giống .delivery-note trong mockup. ---- */
body.single-product .woocommerce-product-details__short-description {
    font-size: 13px !important;
    color: #2C2C2C !important;
    background: #F8F6F2 !important;
    border-left: 2px solid #B8922A !important;
    padding: 12px 16px !important;
    margin-bottom: 22px !important;
}

body.single-product .woocommerce-product-details__short-description p {
    margin: 0 !important;
}

/* ---- 12. Attribute swatches (Bề mặt / Chất liệu / Xuất xứ / Kích thước) —
   Porto core swatch (.filter-item-list .filter-item), màu xanh dương mặc
   định đến từ Theme Option "Heading Color" (--porto-heading-color), ép lại
   theo AK Design System (gold border khi active/hover, không dùng nền
   navy đặc để không đụng chữ trắng/đen mặc định của Porto). ---- */
body.single-product .filter-item-list .filter-item {
    background: #fff !important;
    border-color: #E0DDD8 !important;
    color: #2C2C2C !important;
    border-radius: 2px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    transition: all .2s ease !important;
}

/* Swatch màu (attribute_pa_mau-sac) là hình tròn — không ép border-radius
   vuông ở trên lên chính nó. */
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-item {
    border-radius: 50% !important;
}

body.single-product .filter-item-list .filter-item:hover {
    border-color: #B8922A !important;
    color: #B8922A !important;
}

body.single-product .filter-item-list .filter-item.active {
    border-color: #B8922A !important;
    background: rgba(184,146,42,.06) !important;
    color: #B8922A !important;
}

/* Swatch màu (attribute_pa_mau-sac) — giữ nguyên nền màu thật của swatch,
   chỉ đổi viền active/hover sang gold thay vì xanh dương mặc định.
   LƯU Ý: "active"/"enabled" là class gắn thẳng trên cùng thẻ <a class="filter-item">
   (không phải thẻ cha bọc ngoài) — verify qua outerHTML thật trước khi đổi
   lại selector, tránh lặp lại lỗi ".active .filter-item" (descendant) không
   khớp DOM thật. */
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-item,
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-item.active {
    background: none !important;
    border-color: #E0DDD8 !important;
}

body.single-product .filter-item-list.attribute_pa_mau-sac .filter-item:hover,
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-item.active {
    border-color: #B8922A !important;
}

/* ---- 13. Buybox container — bọc chung ak-m2-buybox + bizbox-area (khối
   "Tổng: X m²") + quantity gốc + nút Thêm giỏ hàng vào 1 khối giống
   .buybox trong mockup (border + nền offwhite + padding). ---- */
body.single-product .woocommerce-variation-add-to-cart {
    border: 1px solid #E0DDD8 !important;
    background: #F8F6F2 !important;
    padding: 24px !important;
    margin: 22px 0 !important;
}

body.single-product .bizbox-area {
    font-size: 13px !important;
    color: #6B6660 !important;
    margin: 10px 0 !important;
}

body.single-product .bizbox-area .area {
    font-weight: 700 !important;
    color: #1C2B3A !important;
}

body.single-product .woocommerce-variation-add-to-cart .single_add_to_cart_button {
    width: 100% !important;
    text-align: center !important;
    padding: 16px !important;
    margin-top: 4px !important;
}

/* ---- 14. Badge sản phẩm liên quan (.labels .onhot / .onsale) — theo AK
   Design System: badge mặc định navy, badge "hot"/sale nhấn đỏ. Chỉ scope
   trong block "Sản phẩm liên quan" của trang chi tiết, KHÔNG đụng badge ở
   trang Shop (đã có hệ màu riêng .ak-badge trong ak-shop.php). ---- */
body.single-product .related.products .labels .onhot {
    background: #1C2B3A !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

body.single-product .related.products .labels .onsale {
    background: #B94040 !important;
    color: #fff !important;
    font-size: 10px !important;
    font-weight: 600 !important;
    letter-spacing: 1px !important;
    text-transform: uppercase !important;
}

/* ---- 15. Card sản phẩm liên quan — border + hover lift + zoom ảnh, đồng bộ
   .product-card trong mockup/homepage. Chỉ scope trong .related.products để
   không ảnh hưởng trang Shop (ul.products dùng chung class WooCommerce). ---- */
body.single-product .related.products ul.products li.product {
    border: 1px solid #E0DDD8 !important;
    transition: box-shadow .3s ease, transform .3s ease !important;
}

body.single-product .related.products ul.products li.product:hover {
    box-shadow: 0 12px 40px rgba(0,0,0,.1) !important;
    transform: translateY(-4px) !important;
}

body.single-product .related.products ul.products li.product .images {
    overflow: hidden !important;
}

body.single-product .related.products ul.products li.product img {
    transition: transform .5s ease !important;
}

body.single-product .related.products ul.products li.product:hover img {
    transform: scale(1.06) !important;
}

/* ---- 16. Hàng chia sẻ MXH (Porto core .product-share) — đồng bộ style icon
   tròn viền mỏng giống .share-links trong mockup, không đổi cấu trúc DOM.
   Porto mặc định tô nền theo màu thương hiệu từng mạng (facebook xanh,
   google+ đỏ...) qua chính các class .share-facebook/.share-googleplus...
   — ép lại đồng bộ 1 màu trung tính (muted), bỏ nền màu, chỉ còn viền +
   icon, giống mockup. */
body.single-product .product-share .share-links a,
body.single-product .product-share .share-links a.share-facebook,
body.single-product .product-share .share-links a.share-twitter,
body.single-product .product-share .share-links a.share-linkedin,
body.single-product .product-share .share-links a.share-googleplus,
body.single-product .product-share .share-links a.share-pinterest,
body.single-product .product-share .share-links a.share-email {
    background: transparent !important;
    border: 1px solid #E0DDD8 !important;
    border-radius: 50% !important;
    color: #6B6660 !important;
    width: 32px !important;
    height: 32px !important;
    font-size: 12px !important;
    transition: all .2s ease !important;
}

body.single-product .product-share .share-links a:hover,
body.single-product .product-share .share-links a.share-facebook:hover,
body.single-product .product-share .share-links a.share-twitter:hover,
body.single-product .product-share .share-links a.share-linkedin:hover,
body.single-product .product-share .share-links a.share-googleplus:hover,
body.single-product .product-share .share-links a.share-pinterest:hover,
body.single-product .product-share .share-links a.share-email:hover {
    background: transparent !important;
    border-color: #B8922A !important;
    color: #B8922A !important;
}

body.single-product .product-share .share-links a:hover {
    border-color: #B8922A !important;
    color: #B8922A !important;
    background: transparent !important;
}

/* ============================================================
   17. TEMPLATE MỚI — ak-product.php (grid 2 cột + gallery custom + CTA)
   Áp dụng từ khi porto-child/single-product.php + functions.php mục 11-12
   được bật (ghi đè template Elementor/Porto cho is_product()). Nếu chưa
   upload/kích hoạt phần đó thì các class dưới đây không match gì cả (an
   toàn, không ảnh hưởng trang đang chạy).
   ============================================================ */
.ak-pd-wrap { padding: 32px 0 0; }
.ak-pd-wrap .container { max-width: 1240px; margin: 0 auto; padding: 0 24px; }

.ak-pd-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

/* ---- Gallery custom (thay owl-carousel + slick dọc gốc Porto) ---- */
.ak-pd-gallery { position: sticky; top: 96px; }

.ak-pd-gallery-main {
    aspect-ratio: 1/1;
    border: 1px solid #E0DDD8;
    overflow: hidden;
    margin-bottom: 14px;
    background: #F2F0EC;
    cursor: zoom-in;
}

.ak-pd-gallery-main-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.ak-pd-gallery-main:hover .ak-pd-gallery-main-img {
    transform: scale(1.08);
}

.ak-pd-gallery-thumbs {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 10px;
}

.ak-pd-gallery-thumb {
    aspect-ratio: 1/1;
    border: 2px solid transparent;
    overflow: hidden;
    cursor: pointer;
    background: #F2F0EC;
    transition: border-color .2s;
}

.ak-pd-gallery-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.ak-pd-gallery-thumb.active,
.ak-pd-gallery-thumb:hover {
    border-color: #B8922A;
}

/* ---- Cột info — reset margin mặc định WooCommerce/Porto cho .summary,
   phần bên trong (title/price/meta/buybox...) đã style ở mục 1-16 ---- */
.ak-pd-info { padding-top: 4px; }

/* ---- Tabs + upsell wrapper — border-top phân cách với block info,
   phần style chi tiết tabs/table nằm ở mục 5. ---- */
.ak-pd-tabs-wrap {
    padding: 56px 0 80px;
    border-top: 1px solid #E0DDD8;
    margin-top: 24px;
}

/* ---- CTA banner — section mới hoàn toàn (không có ở bản gốc), theo
   .cta-banner trong product-detail-upgrade.html ---- */
.ak-pd-cta {
    background: #1C2B3A;
    padding: 64px 0;
    position: relative;
    overflow: hidden;
    text-align: center;
}

.ak-pd-cta::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 600px;
    height: 600px;
    border: 80px solid rgba(184,146,42,.06);
    border-radius: 50%;
    pointer-events: none;
}

.ak-pd-cta-inner {
    position: relative;
    max-width: 640px;
    margin: 0 auto;
}

.ak-pd-cta-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 3px;
    text-transform: uppercase;
    color: #D4A843;
    display: block;
    margin-bottom: 12px;
}

.ak-pd-cta-title {
    font-family: 'Playfair Display', serif;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 600;
    color: #fff;
    line-height: 1.25;
}

.ak-pd-cta-inner p {
    font-size: 15px;
    color: rgba(255,255,255,.65);
    line-height: 1.7;
    margin: 14px 0 28px;
}

.ak-pd-cta-actions {
    display: flex;
    gap: 16px;
    justify-content: center;
    flex-wrap: wrap;
}

.ak-pd-btn-gold,
.ak-pd-btn-outline-white {
    display: inline-block;
    padding: 14px 32px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all .25s ease;
    border: 2px solid transparent;
}

.ak-pd-btn-gold {
    background: #B8922A;
    color: #fff;
    border-color: #B8922A;
}

.ak-pd-btn-gold:hover {
    background: #D4A843;
    border-color: #D4A843;
}

.ak-pd-btn-outline-white {
    background: transparent;
    color: #fff;
    border-color: rgba(255,255,255,.45);
}

.ak-pd-btn-outline-white:hover {
    background: #fff;
    color: #1C2B3A;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
    .ak-pd-grid { grid-template-columns: 1fr; gap: 40px; }
    .ak-pd-gallery { position: static; }
}

@media (max-width: 640px) {
    .ak-pd-gallery-thumbs { grid-template-columns: repeat(4, 1fr); }
}

/* ============================================================
   18. KHỚP CHÍNH XÁC MOCKUP (product-detail-upgrade.html)
   Các phần Porto/WooCommerce render qua hook mà CSS mục 1-17 chưa
   phủ hết. Đặt cuối file để thắng cascade khi cùng specificity.
   Đã verify bằng DOM thật của trang /san-pham/{slug}/:
     - li.active > a.filter-item (pill chữ)  → mục 12 đã đúng
     - li.active > a.filter-color (swatch màu) → mục 12 SAI selector,
       swatch là .filter-color KHÔNG phải .filter-item → sửa ở 18.4
     - .product-nav (nút prev/next tròn cạnh tiêu đề) do Porto chèn,
       KHÔNG có trong mockup → ẩn (18.1)
   ============================================================ */

/* ---- 18.1. Ẩn nút điều hướng prev/next của Porto (không có trong mockup) ---- */
body.single-product .ak-pd-info .product-nav {
    display: none !important;
}

/* ---- 18.2. Sao (rating) — tô gold thay vì xám mặc định của Porto,
   khớp "★★★★★" trong mockup kể cả khi chưa có đánh giá. ---- */
body.single-product .ak-pd-info .woocommerce-product-rating {
    margin-bottom: 20px !important;
}
body.single-product .ak-pd-info .woocommerce-product-rating .star-rating {
    color: #B8922A !important;
}
body.single-product .ak-pd-info .woocommerce-product-rating .review-link a {
    color: #6B6660 !important;
}

/* ---- 18.3. Hàng giá — thêm viền trên/dưới + padding giống .product-price-row
   trong mockup. Kèm đơn vị "/ m²" chỉ khi sản phẩm bán theo thùng
   (.ak-tile-mode do JS gắn) — sản phẩm khác (keo, đơn vị khác) không hiện. ---- */
body.single-product .ak-pd-info p.price {
    display: flex !important;
    align-items: baseline !important;
    gap: 10px !important;
    padding: 20px 0 !important;
    margin: 0 0 22px !important;
    border-top: 1px solid #E0DDD8 !important;
    border-bottom: 1px solid #E0DDD8 !important;
}
body.single-product .ak-tile-mode .ak-pd-info p.price::after {
    content: "/ m²";
    font-size: 13px;
    font-weight: 400;
    color: #6B6660;
}

/* ---- 18.4. Swatch màu — element thật là <a class="filter-color"> (KHÔNG phải
   .filter-item), Porto tô viền/outline xám #777 khi active. Ép sang gold.
   LƯU Ý: vòng tròn XANH #0088cc thấy được chính là border 2px của
   .filter-color::before (verify computed style DOM thật) — phải override cả
   pseudo-element này, không chỉ border/outline của chính <a>. ---- */
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-color {
    outline-offset: 2px !important;
}
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-color.active,
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-color:hover {
    outline-color: #B8922A !important;
    border-color: #B8922A !important;
    box-shadow: 0 0 0 1px #B8922A !important;
}
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-color::before {
    border-color: #E0DDD8 !important;
}
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-color.active::before,
body.single-product .filter-item-list.attribute_pa_mau-sac .filter-color:hover::before {
    border-color: #B8922A !important;
}

/* ---- 18.5. Nhóm thuộc tính — Porto render bằng <table.variations> (th.label |
   td.value nằm CẠNH nhau). Mockup xếp nhãn NẰM TRÊN, options nằm dưới → ép
   table về block, mỗi tr là 1 khối dọc, nhãn in hoa. ---- */
body.single-product .ak-pd-info table.variations,
body.single-product .ak-pd-info table.variations > tbody {
    display: block !important;
    width: 100% !important;
    border: none !important;
}
body.single-product .ak-pd-info table.variations tr {
    display: block !important;
    margin-bottom: 18px !important;
    border: none !important;
}
body.single-product .ak-pd-info table.variations th.label,
body.single-product .ak-pd-info table.variations td.value {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    text-align: left !important;
    border: none !important;
}
body.single-product .ak-pd-info table.variations th.label label {
    display: block !important;
    margin: 0 0 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    color: #1C2B3A !important;
    text-transform: uppercase !important;
    letter-spacing: .5px !important;
}

/* ---- 18.6. Dòng "Mã | Danh mục" đưa lên đầu cột (do ak-product-detail.js
   dựng .ak-pd-sku-line, di chuyển .sku_wrapper + .posted_in lên trước tiêu đề)
   — khớp .product-sku trong mockup. ---- */
body.single-product .ak-pd-info .ak-pd-sku-line {
    font-size: 12px;
    color: #6B6660;
    letter-spacing: .3px;
    line-height: 1.6;
    margin-bottom: 10px;
}
body.single-product .ak-pd-info .ak-pd-sku-line .sku {
    color: #1C2B3A;
    font-weight: 600;
}
body.single-product .ak-pd-info .ak-pd-sku-line .posted_in a {
    color: #6B6660;
}

/* ---- 18.7. Hàng chia sẻ + So sánh/Yêu thích gộp 1 dòng (do JS dựng
   .ak-pd-share-row) — share bên trái, actions bên phải, có viền trên/dưới
   giống .product-share-row trong mockup. Hoạt động cả khi thiếu 1 trong 2
   (VD sản phẩm không bật Yêu thích). ---- */
body.single-product .ak-pd-info .ak-pd-share-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    padding: 18px 0;
    margin-top: 8px;
    border-top: 1px solid #E0DDD8;
    border-bottom: 1px solid #E0DDD8;
}
body.single-product .ak-pd-info .ak-pd-share-row .product-share,
body.single-product .ak-pd-info .ak-pd-share-row .ak-actions-row {
    margin: 0 !important;
}

@media (max-width: 640px) {
    body.single-product .ak-pd-info .ak-pd-share-row {
        flex-direction: column;
        align-items: flex-start;
    }
}