/*!
 * kinhsach-responsive-fix.css
 * Chỉ vá các lỗi responsive ĐÃ ĐO ĐƯỢC. Không đổi bố cục/thiết kế desktop.
 * Mỗi khối ghi rõ: lỗi gì – đo ở đâu – vì sao.
 * Breakpoint theo Bootstrap 3 của theme: sm >= 768px, md >= 992px.
 */

/* =========================================================================
   1. TRANG CHỦ – section nền ảnh "KINH TRƯỜNG A HÀM"
      (#shortcode-fb1ca63d…, padding do Unyson page builder lưu:
       "120px 90px 100px 0" → trái 0 / phải 90).
      Ở desktop section chia 2 cột md-6, cột trái để trống nên không thấy lỗi.
      Ở <= 991px hai cột gộp làm một: nội dung dính mép trái (x = 0) và thừa
      ~90px khoảng trắng bên phải → tiêu đề/nút lệch hẳn sang trái.
      Đo: 375px → cột [-15 → 300] trong khung 375; 768px → [-25 → 703].
      Chỉ cân lại padding ngang ở <= 991px, giữ nguyên desktop.
   ========================================================================= */
@media (max-width: 991px) {
	#shortcode-fb1ca63d24c5ea6e3557b55d18da88b1 {
		/* 25px = đúng bằng gutter âm -25px của .fw-row nên hàng không thò ra ngoài */
		padding-left: 25px !important;
		padding-right: 25px !important;
	}
}

/* =========================================================================
   2. TRANG CHỦ – section hero phụ (#shortcode-9513f8…)
      padding ngang 160px, chỉ có override cho <= 768px (40px).
      Khoảng 769–991px vẫn giữ 160px mỗi bên → nội dung còn rất hẹp.
      Lấp đúng khoảng trống đó, dùng cùng giá trị 40px mà trang đang dùng.
   ========================================================================= */
@media (min-width: 769px) and (max-width: 991px) {
	#shortcode-9513f8abdb67cce498fdcedd8ccc692d {
		padding-left: 40px !important;
		padding-right: 40px !important;
	}
}

/* =========================================================================
   3. TRANG SẢN PHẨM – khối "GỢI Ý ĐỌC THÊM" (related products / up-sells)
      Additional CSS (Customizer) ép width 35%/65% + display:flex KHÔNG kèm
      media query → ở 375px cột tiêu đề chỉ còn 82px nội dung trong khi chữ
      cần 122px và h2 cỡ 32px. Đo: .BoxedTitle sw122 / cw82, .col-sm-4 w117.
      Cho hai cột xuống dòng và thu nhỏ tiêu đề ở mobile.
      Dùng tiền tố `body` để thắng !important của Additional CSS.
   ========================================================================= */
@media (max-width: 767px) {
	body .related.products .col-sm-4,
	body .related.products .col-sm-8,
	body .up-sells.upsells .col-sm-4,
	body .up-sells.upsells .col-sm-8 {
		width: 100% !important;
		padding-right: 15px !important;
	}

	body .related.products,
	body .up-sells.upsells {
		padding: 20px 15px !important;
	}

	body .related.products h2:not(.woocommerce-loop-product__title),
	body .up-sells.upsells h2:not(.woocommerce-loop-product__title) {
		font-size: 22px !important;
	}
}

/* =========================================================================
   4. MENU MOBILE (slicknav) – các mục menu cỡ chữ 11px, quá nhỏ để đọc.
      Nút hamburger 64x57 đã đủ lớn, mỗi dòng cao 44px nên chỉ cần tăng chữ.
   ========================================================================= */
@media (max-width: 1024px) {
	.slicknav_nav a,
	.slicknav_nav .slicknav_item {
		font-size: 15px !important;
	}
}

/* =========================================================================
   5. CHỮ NHỎ HƠN 14px TRÊN MOBILE VÀ TABLET (<= 1024px)
      - .special-subtitle: 10px + letter-spacing 4px (phụ đề trang chủ,
        trang About…). Tăng lên 14px và giảm letter-spacing xuống 1.5px để
        tổng bề ngang gần như không đổi → không phát sinh thêm dòng.
      - Link tag cloud / widget danh mục / cite trong bình luận: 11–12px.
   ========================================================================= */
@media (max-width: 1024px) {
	.special-subtitle {
		font-size: 14px !important;
		letter-spacing: 1.5px !important;
	}

	body .widget_tag_cloud .tagcloud a,
	body .widget_product_tag_cloud .tagcloud a,
	body .tagcloud a,
	body a.tag-cloud-link,
	body .widget_categories a,
	body .widget_product_categories a,
	body .widget_archive a,
	body .widget_meta a,
	body .widget_recent_entries a,
	body .SinglePostComments cite,
	body .comment-metadata,
	body .comment-meta {
		font-size: 14px !important;
	}

	/* Meta bài viết: ngày đăng và nhãn "Previous/Next Post" đang 13px. */
	body .simplified-post-date,
	body .simplified-post-date span,
	body .simplified-post-text.special-subtitle-type-2 {
		font-size: 14px !important;
	}

	/* Tên/đơn vị trong khối trích dẫn (testimonial) trang chủ đang 13px. */
	body .testimonial-author,
	body a.testimonial-company {
		font-size: 14px !important;
	}

	/* Ngày tháng trong danh sách bài viết / kết quả tìm kiếm đang 12px,
	   và dòng trích dẫn <cite> trong các trang nội dung đang 12px. */
	body .excerpt-date,
	body .excerpt-date span,
	body blockquote cite,
	body .fw-page-builder-content cite {
		font-size: 14px !important;
	}

	/* Banner "Cài lên màn hình chính" (auto-books-panel) đang 13px. */
	body .ksp-on .ksp-txt,
	body .ksp-on button {
		font-size: 14px !important;
	}
}

/* =========================================================================
   6. TRANG 404 – .error-404-wrapper đặt width 70% (262px ở màn 375px)
      nên nút bên trong rộng hơn khung và thò ra 12px, trông lệch tâm.
   ========================================================================= */
@media (max-width: 767px) {
	.ErrorPage .error-404-wrapper {
		width: auto !important;
		max-width: 100% !important;
		padding-left: 20px;
		padding-right: 20px;
	}
}