/**
 * TSV - Typography riêng website Tranh Shop Việt.
 * File: website/tranh-shop-viet/assets/css/tsv-typography.css
 *
 * Một nơi duy nhất quản lý:
 * - Font và độ đậm.
 * - Màu Heading.
 * - Kích thước H1/H2/H3/H4 responsive.
 * - Tên sản phẩm card.
 * - Tiêu đề Section, Blog, Sidebar Blog và Related/Upsell Products.
 *
 * Không thay đổi cấu trúc HTML/SEO (không đổi H1/H2/H3/H4).
 */

/* =====================================================
   01. DESIGN TOKENS - BIẾN GIAO DIỆN WEBSITE
===================================================== */

:root {
    --tsv-font-main: "Montserrat", Arial, sans-serif;
    --tsv-font-regular: 400;
    --tsv-font-medium: 500;
    --tsv-font-semibold: 600;
    --tsv-font-bold: 700;

    --tsv-text-color: #444444;
    --tsv-heading-color: #082b63;
    --tsv-product-title-color: #6f6f6f;

    --tsv-h1-size: 24px;
    --tsv-h1-size-tablet: 22px;
    --tsv-h1-size-mobile: 20px;

    --tsv-h2-size: 22px;
    --tsv-h2-size-tablet: 20px;
    --tsv-h2-size-mobile: 18px;

    --tsv-h3-size: 18px;
    --tsv-h3-size-tablet: 17px;
    --tsv-h3-size-mobile: 16px;

    --tsv-h4-size: 16px;
    --tsv-h4-size-tablet: 16px;
    --tsv-h4-size-mobile: 15px;

    --tsv-heading-line-height: 1.3;
    --tsv-content-heading-line-height: 1.4;

    --tsv-product-card-title-size: 15px;
    --tsv-product-card-title-size-mobile: 13px;

    --tsv-blog-card-title-size: var(--tsv-h3-size);
    --tsv-blog-card-title-size-tablet: var(--tsv-h3-size-tablet);
    --tsv-blog-card-title-size-mobile: var(--tsv-h3-size-mobile);

    --tsv-sidebar-title-size: 16px;
    --tsv-sidebar-title-size-mobile: 15px;
}


/* =====================================================
   02. FONT CHUNG + NAVIGATION
===================================================== */

body,
button,
input,
select,
textarea,
.nav,
.header,
.footer,
.off-canvas,
.mobile-sidebar,
.woocommerce,
.woocommerce-page {
    font-family: var(--tsv-font-main) !important;
}

.nav > li > a,
.nav-dropdown li a,
.header .nav > li > a,
.header-bottom .nav > li > a,
.mobile-sidebar .nav > li > a,
.header-bottom .tsv-mega-menu > ul.sub-menu.nav-dropdown > li.nav-dropdown-col > ul.sub-menu > li > a {
    font-family: var(--tsv-font-main) !important;
    font-weight: var(--tsv-font-medium) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* =====================================================
   03. PRODUCT CARD - GIỮ CẤP CHỮ RIÊNG
===================================================== */

.product-small .name,
.product-small .name a,
.product-small .product-title,
.product-small .product-title a,
.woocommerce-loop-product__title,
.woocommerce-loop-product__title a {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;

    font-family: var(--tsv-font-main) !important;
    color: var(--tsv-product-title-color) !important;
    font-size: var(--tsv-product-card-title-size) !important;
    font-weight: var(--tsv-font-medium) !important;
    line-height: 1.45 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
    text-align: center !important;
    text-decoration: none !important;
}

.single-product .product-title,
.single-product h1.product-title,
.single-product .product-info .product-title {
    font-family: var(--tsv-font-main) !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* =====================================================
   04. NỘI DUNG CHUNG
===================================================== */

.entry-content p,
.entry-content li,
.tsv-seo-box-home p,
.tsv-seo-box-home li {
    font-family: var(--tsv-font-main) !important;
    color: var(--tsv-text-color) !important;
    font-size: 15.5px !important;
    font-weight: var(--tsv-font-medium) !important;
    line-height: 1.75 !important;
    letter-spacing: 0 !important;
}


/* Widget title mặc định của website; các khu vực riêng có thể ghi đè theo scope. */
span.widget-title {
    font-size: 14px !important;
}


/* =====================================================
   05. SECTION TITLE CHUNG
===================================================== */

.section-title-main,
.section-title-normal .section-title-main,
.tsv-title-normal .section-title-main {
    font-family: var(--tsv-font-main) !important;
    color: var(--tsv-heading-color) !important;
    font-size: var(--tsv-section-title-size, var(--tsv-h2-size)) !important;
    font-weight: var(--tsv-font-semibold) !important;
    line-height: 1.25 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}


/* =====================================================
   06. HEADING DO FEATURE WOOCOMMERCE TẠO TRỰC TIẾP
===================================================== */

.tsv-product-category-top__title {
    color: var(--tsv-heading-color);
    font-family: var(--tsv-font-main);
    font-size: var(--tsv-h1-size);
    font-weight: var(--tsv-font-bold);
    line-height: var(--tsv-heading-line-height);
    letter-spacing: -0.2px;
    text-transform: none;
}

.tsv-product-category-faq-title {
    color: var(--tsv-heading-color);
    font-family: var(--tsv-font-main);
    font-size: var(--tsv-h2-size);
    font-weight: var(--tsv-font-bold);
    line-height: 1.35;
    letter-spacing: 0;
    text-transform: none;
}


/* =====================================================
   07. BLOG ARCHIVE + SINGLE POST
   Chỉ style giao diện; giữ nguyên thẻ Heading do WordPress/Flatsome sinh ra.
===================================================== */

/* Tiêu đề bài trong danh sách Blog/Archive. */
.blog-wrapper #post-list .post-title,
.blog-wrapper #post-list .post-title a {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-blog-card-title-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: 1.4 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* H1 tiêu đề bài chi tiết. */
.single-post .entry-title {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-h1-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: var(--tsv-heading-line-height) !important;
    letter-spacing: -0.2px !important;
    text-transform: none !important;
}

/* Heading do người biên tập đặt trong nội dung bài viết. */
.single-post .entry-content h2 {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-h2-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: var(--tsv-content-heading-line-height) !important;
    text-transform: none !important;
}

.single-post .entry-content h3 {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-h3-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: 1.45 !important;
    text-transform: none !important;
}

.single-post .entry-content h4 {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-h4-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: 1.5 !important;
    text-transform: none !important;
}

/* Tiêu đề widget Blog: Bài viết mới, Sản phẩm bán chạy... */
.blog-wrapper .post-sidebar .widget-title,
.blog-single .post-sidebar .widget-title,
.single-post .post-sidebar .widget-title,
body.blog #secondary .widget-title,
body.category #secondary .widget-title,
body.tag #secondary .widget-title,
body.author #secondary .widget-title,
body.date #secondary .widget-title,
body.single-post #secondary .widget-title {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-sidebar-title-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Tiêu đề vùng bình luận; không thay đổi cấp Heading HTML. */
.single-post #comments .comments-title,
.single-post #comments .comment-reply-title {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-h3-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: 1.4 !important;
    text-transform: none !important;
}


/* =====================================================
   08. PRODUCT SECTION TITLE - RELATED / UPSELL
   H3/H2 của Flatsome/WooCommerce được giữ nguyên về SEO/HTML;
   chỉ hiển thị theo cấp Section H2 để đồng nhất giao diện.
===================================================== */

.single-product .related-products-wrapper > .product-section-title,
.single-product .related.products > .product-section-title,
.single-product .related.products > h2,
.single-product .related.products > h3,
.single-product .upsells.products > .product-section-title,
.single-product .upsells.products > h2,
.single-product .upsells.products > h3 {
    color: var(--tsv-heading-color) !important;
    font-family: var(--tsv-font-main) !important;
    font-size: var(--tsv-h2-size) !important;
    font-weight: var(--tsv-font-bold) !important;
    line-height: 1.35 !important;
    letter-spacing: 0 !important;
}


/* =====================================================
   09. RESPONSIVE TYPOGRAPHY
===================================================== */

@media only screen and (max-width: 1024px) {
    .tsv-product-category-top__title,
    .single-post .entry-title {
        font-size: var(--tsv-h1-size-tablet) !important;
    }

    .tsv-product-category-faq-title,
    .single-post .entry-content h2,
    .single-product .related-products-wrapper > .product-section-title,
    .single-product .related.products > .product-section-title,
    .single-product .related.products > h2,
    .single-product .related.products > h3,
    .single-product .upsells.products > .product-section-title,
    .single-product .upsells.products > h2,
    .single-product .upsells.products > h3 {
        font-size: var(--tsv-h2-size-tablet) !important;
    }

    .blog-wrapper #post-list .post-title,
    .blog-wrapper #post-list .post-title a,
    .single-post .entry-content h3,
    .single-post #comments .comments-title,
    .single-post #comments .comment-reply-title {
        font-size: var(--tsv-blog-card-title-size-tablet) !important;
    }

    .single-post .entry-content h4 {
        font-size: var(--tsv-h4-size-tablet) !important;
    }
}

@media only screen and (max-width: 768px) {
    .product-small .name,
    .product-small .name a,
    .product-small .product-title,
    .product-small .product-title a,
    .woocommerce-loop-product__title,
    .woocommerce-loop-product__title a {
        font-size: var(--tsv-product-card-title-size-mobile) !important;
        font-weight: var(--tsv-font-medium) !important;
        line-height: 1.42 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    .entry-content p,
    .entry-content li,
    .tsv-seo-box-home p,
    .tsv-seo-box-home li {
        font-size: 15px !important;
        font-weight: var(--tsv-font-medium) !important;
        line-height: 1.7 !important;
    }

    .section-title-main,
    .section-title-normal .section-title-main,
    .tsv-title-normal .section-title-main {
        font-size: var(--tsv-section-title-size-mobile, var(--tsv-h2-size-mobile)) !important;
        font-weight: var(--tsv-font-semibold) !important;
        line-height: 1.3 !important;
    }

    .tsv-product-category-top__title,
    .single-post .entry-title {
        font-size: var(--tsv-h1-size-mobile) !important;
    }

    .tsv-product-category-faq-title,
    .single-post .entry-content h2,
    .single-product .related-products-wrapper > .product-section-title,
    .single-product .related.products > .product-section-title,
    .single-product .related.products > h2,
    .single-product .related.products > h3,
    .single-product .upsells.products > .product-section-title,
    .single-product .upsells.products > h2,
    .single-product .upsells.products > h3 {
        font-size: var(--tsv-h2-size-mobile) !important;
    }

    .blog-wrapper #post-list .post-title,
    .blog-wrapper #post-list .post-title a,
    .single-post .entry-content h3,
    .single-post #comments .comments-title,
    .single-post #comments .comment-reply-title {
        font-size: var(--tsv-blog-card-title-size-mobile) !important;
    }

    .single-post .entry-content h4 {
        font-size: var(--tsv-h4-size-mobile) !important;
    }

    .blog-wrapper .post-sidebar .widget-title,
    .blog-single .post-sidebar .widget-title,
    .single-post .post-sidebar .widget-title,
    body.blog #secondary .widget-title,
    body.category #secondary .widget-title,
    body.tag #secondary .widget-title,
    body.author #secondary .widget-title,
    body.date #secondary .widget-title,
    body.single-post #secondary .widget-title {
        font-size: var(--tsv-sidebar-title-size-mobile) !important;
    }
}