/* Minimal WordPress-specific deltas on top of the vendored original CSS. */

/* Mobile/tablet menu: give the chevron a real tap target and let it expand
   the submenu inline (desktop keeps the hover dropdown). */
@media (max-width: 991px) {
	#masthead .site-navigation .menu > li.menu-item-has-children > a {
		position: relative;
		padding-right: 52px;
	}
	#masthead .site-navigation .menu > li.menu-item-has-children > a > .fa {
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		width: 48px;
		display: flex;
		align-items: center;
		justify-content: center;
		transition: transform .2s;
	}
	#masthead .site-navigation li.thp-open > a > .fa {
		transform: rotate(180deg);
	}
	#masthead .site-navigation li.thp-open > .sub-menu,
	#masthead .site-navigation li.thp-open .sub-menu .sub-menu {
		display: block !important;
		position: static;
		width: 100%;
		background: rgba(0, 0, 0, .18);
	}
	#masthead .site-navigation .sub-menu li {
		display: block;
		float: none;
		width: 100%;
	}
	#masthead .site-navigation .sub-menu li a {
		padding: 10px 16px 10px 28px;
	}
}

/* Small laptops / landscape tablets: 10 menu items at the vendored 14px side
   padding total ~1065px but the nav is only ~970px wide, so the bar wrapped
   onto a 2nd row (the original does the same). Tighten padding so it fits. */
@media (min-width: 992px) and (max-width: 1199px) {
	#masthead .site-navigation {
		padding-left: 0;
		padding-right: 0;
	}
	#masthead .site-navigation .menu > li > a {
		padding-left: 7px;
		padding-right: 7px;
	}
}

/*
 * FB sửa giao diện lần 2 (dòng 1, 08/10/2026): "giãn menu ra, menu bị nhảy xuống dòng → chỉ 1 hàng".
 * Staging: admin đổi "Sản phẩm" thành "Sản phẩm khác" → 10 mục dài hơn thanh menu ở mọi độ rộng → rớt 2 hàng
 * (thanh cao 117px). Máy tính (≥992px): xếp các mục bằng flex KHÔNG xuống hàng, rải đều hết chiều ngang
 * thanh menu (space-between), chữ mỗi mục không bẻ dòng; khoảng đệm 2 bên mục nhỏ lại để còn chỗ cho nhãn dài.
 */
@media (min-width: 992px) {
	#masthead .site-navigation .menu {
		display: flex;
		flex-wrap: nowrap;
		justify-content: space-between;
	}
	#masthead .site-navigation .menu::before,
	#masthead .site-navigation .menu::after {
		display: none; /* clearfix của float cũ — trong flex sẽ thành 2 phần tử rỗng chiếm chỗ ở 2 đầu */
	}
	#masthead .site-navigation .menu > li {
		float: none;
		flex: 0 0 auto;
	}
	#masthead .site-navigation .menu > li > a {
		white-space: nowrap;
		padding-left: 10px;
		padding-right: 10px;
	}
}
@media (min-width: 992px) and (max-width: 1199px) {
	#masthead .site-navigation .menu > li > a {
		padding-left: 4px;
		padding-right: 4px;
	}
}

/* Product/news card image: the <a class="thumb"> carried width/height=268
   from the img attributes, so on any card wider than 268px (mobile, tablet,
   2-up grids) the photo sat inset and, being 268 tall in a 220 box, got
   cropped. Make the link/span fill the box and let the image cover it. */
.thumb-wrapper .thumb,
.thumb-wrapper .face {
	display: block;
	width: 100%;
	height: 100%;
}
.thumb-wrapper .face img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

/*
 * Isolate the header nav from generic content-area list rules.
 * WordPress adds a "page" body class on any Page-based template (front
 * page, "Giới thiệu", etc.), and the vendored CSS has a broad
 * `.page ul, .rte ul { padding-left: 25px }` rule meant for bullet lists
 * inside article/page BODY content. Since that selector only checks for a
 * `.page`/`.rte` ANCESTOR (not a direct parent), and `.page` lands on
 * <body> itself, it unintentionally matches every <ul> on the page —
 * including the completely unrelated header dropdown submenus — adding a
 * stray ~25px dark strip in front of "Thép hình H/U/I/V" etc. only on
 * pages that carry that body class. Hard-reset list spacing inside the
 * header nav so it can never again be affected by unrelated site-wide
 * `ul`/`ol` rules scoped off <body>/content-wrapper classes.
 */
#masthead .site-navigation ul,
#masthead .site-navigation ol {
	padding-left: 0 !important;
	margin-left: 0 !important;
}

body.admin-bar #masthead {
	top: 32px;
}
@media screen and (max-width: 782px) {
	body.admin-bar #masthead {
		top: 46px;
	}
}

/* WordPress core gallery/caption blocks used inside imported .rte content. */
.rte .wp-block-gallery,
.rte .wp-caption {
	max-width: 100%;
}
.rte figure {
	margin: 0 0 15px;
}

/*
 * Link/chữ dài không dấu cách (URL mạng xã hội dán nguyên dòng, vd
 * "https://www.youtube.com/@manhhungphatsteel") tràn ngang cả trang ở điện thoại — `.entry-content` gốc
 * không có `overflow-wrap`/`word-break` nên trình duyệt không tự ngắt 1 "từ" dài không dấu cách. Áp dụng
 * chung cho toàn bộ nội dung bài/trang, không chỉ chỗ phát hiện ra lỗi.
 */
.rte {
	overflow-wrap: break-word;
	word-wrap: break-word;
}

/*
 * Uniform product/news card thumbnails at every breakpoint.
 * The original site's own CSS only fixes figure.w-thumb's height above
 * 1200px and leaves .thumb-wrapper's height fully auto everywhere, which
 * relied on the source catalog photos already sharing a similar aspect
 * ratio. Our imported photos vary a lot more (product shots, site photos,
 * screenshots), so cards visibly differed in height. Force a fixed-height,
 * object-fit:cover box at all sizes so every card in a grid/slider matches.
 */
.thumb-wrapper {
	height: 220px;
	overflow: hidden;
	display: flex;
	align-items: center;
	justify-content: center;
}
.thumb-wrapper img {
	width: 100%;
	height: 100% !important;
	object-fit: cover;
}

figure.w-thumb {
	height: 220px;
	overflow: hidden;
	display: flex !important;
	align-items: center !important;
	justify-content: center !important;
}
figure.w-thumb img {
	width: 100%;
	height: 100% !important;
	max-height: none;
	object-fit: cover;
}

/*
 * The [thp_calculator] widget's card styling was authored per-page as an
 * inline <style> block on the original site (not part of the shared
 * style.css), so it has to be vendored here instead.
 */
.calculator { max-width: 820px; margin: auto; background: #fff; border-radius: 10px; padding: 24px 28px; box-shadow: 0 8px 24px rgba(0,0,0,.08); }
.calculator h2 { margin: 0 0 20px; font-size: 19px; color: #111827; }
.calculator p { margin: 0 0 20px; font-size: 19px; color: #111827; }
.calculator .row { margin-bottom: 18px; }
.calculator label { display: flex; justify-content: space-between; font-weight: 600; margin-bottom: 8px; }
.calculator select, .calculator input[type=number] { width: 100%; height: 44px; border: 1px solid #e5e7eb; border-radius: 6px; padding: 0 12px; font-size: 14px; }
.calculator input[type=range] { width: 100%; background: #edf2fa; border-radius: 10px; }
.calculator .value { color: #f36f21; font-weight: 700; }
.calculator .range-box { border: 1px solid #e5e7eb; border-radius: 6px; padding: 12px; }
.calculator .result { margin-top: 22px; padding: 18px; background: #fff7ed; border: 1px dashed #f36f21; border-radius: 8px; font-size: 18px; font-weight: 700; color: #f36f21; text-align: center; }
.calculator .note { margin-top: 10px; font-size: 13px; color: #6b7280; text-align: center; }
.calculator .hidden { display: none; }

/*
 * Product listing screens (archive-san_pham.php / taxonomy-danh_muc_sp.php):
 * the vendored .main.container{background:#fff} rule paints one continuous
 * white canvas behind BOTH the "Danh mục" sidebar and the product grid, so
 * neither the sidebar box nor individual products read as distinct panels.
 * Scope the white background down to just the "Danh mục" widget (which
 * already carries its own background:#fff) and give each product its own
 * card treatment instead.
 */
.col2-left-layout .main.container {
	background: transparent;
}
.col2-left-layout .products-grid .col-item {
	border-radius: 8px;
	box-shadow: 0 2px 10px rgba(0,0,0,.08);
	overflow: hidden;
}

.cat-toolbar-row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 10px;
	margin-bottom: 15px;
}
.cat-toolbar-row .cat-img-title,
.cat-toolbar-row .toolbar {
	margin: 0;
	width: auto;
	clear: none;
}

/* Pagination uses the original Bootstrap 3 markup (see thp_pagination()).
   Keep touch targets usable on phones and let long rows wrap. */
.page-wrap .pagination { margin: 24px 0; }
@media (max-width: 575px) {
	.page-wrap .pagination > li > a { padding: 8px 11px; }
}

/* Tablet (768-991px): the product detail body is col-sm-8 (66%) but the
   col-md-4 calculator only goes beside it from 992px, so it dropped BELOW a
   content column that left a blank third on the right. Use the full width. */
@media (min-width: 768px) and (max-width: 991px) {
	.col-main .abcs {
		width: 100%;
	}
}

/* Give the article title (moved inside .entry-content, see single.php) room
   above it too, so it doesn't sit flush against the author/date meta box. */
.entry-content > h1.entry-title {
	margin-top: 25px;
}

/* Bold the current (non-linked) breadcrumb crumb. */
.breadcrumbs li > span[itemprop="name"] {
	font-weight: 700;
}

/* Sticky header on scroll, ported from the original's inline script. */
.site-header.f-nav {
	z-index: 99999;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	margin: 0 auto;
}

/* Auto-generated article table of contents (ported: originally an inline
   <style> block + jQuery plugin injected per-article-page). */
/* Feedback lần 2 (mẫu Canva/hungphatsteel): mục lục là nút viên thuốc "Mục lục ⌄", bấm mới xổ danh sách.
   Selector có tiền tố `.rte` để thắng khung viền đen/nền xám của cskh.css (`.rte .table-of-contents`). */
.table-of-contents,
.rte .table-of-contents { background: transparent; border: 0; border-radius: 0; padding: 0; margin: 0 0 22px; }
.table-of-contents .title-toc,
.rte .table-of-contents .title-toc { position: static; display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; cursor: pointer; font-weight: 700; font-size: 14px; color: #d91d1b; background: #fff; border: 1px solid #d91d1b; border-radius: 20px; }
.rte .table-of-contents .label-title { margin: 0; font-size: 14px; text-transform: none; }
.table-of-contents .title-toc .btn-expand,
.rte .table-of-contents .title-toc .btn-expand { position: static; width: auto; line-height: 1; margin-left: 2px; transition: transform .2s; color: inherit; }
.table-of-contents .title-toc .btn-expand.open { transform: rotate(180deg); }
.table-of-contents ol.toc,
.rte .table-of-contents ol.toc { list-style: decimal; margin: 10px 0 0; padding: 14px 18px 14px 36px; background: #fff; border: 1px solid #eee; border-radius: 6px; }
.table-of-contents ol.toc li { margin-bottom: 6px; }
.table-of-contents ol.toc ol { list-style: lower-alpha; padding-left: 20px; }

/* Phản hồi lần 4 (K21, K26): khung Mục lục bên cạnh — cố định mép phải, neo khi cuộn (mẫu hungphatsteel). */
.table-of-contents .toc { display: none !important; } /* danh sách inline không xổ nữa — hiện trong khung bên cạnh */
.thp-toc-panel {
	position: fixed; z-index: 9990; top: 130px; right: 24px;
	width: 300px; max-width: calc(100vw - 32px); max-height: calc(100vh - 160px);
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid #e6e9f2; border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, .15);
	opacity: 0; transform: translateX(12px); transition: opacity .2s, transform .2s;
}
.thp-toc-panel.is-open { opacity: 1; transform: none; }
.thp-toc-panel[hidden] { display: none; }
.thp-toc-panel__head {
	display: flex; align-items: center; justify-content: space-between;
	padding: 12px 14px; border-bottom: 1px solid #edf0f6; background: #f7f8fc; border-radius: 10px 10px 0 0;
	font-weight: 700; color: #233179; font-size: 15px;
}
.thp-toc-panel__head .fa { color: #d91d1b; margin-right: 6px; }
.thp-toc-panel__close { border: 0; background: none; font-size: 22px; line-height: 1; color: #888; cursor: pointer; padding: 0 4px; }
.thp-toc-panel__close:hover { color: #d91d1b; }
.thp-toc-panel__body { overflow-y: auto; padding: 8px 14px 12px; }
.thp-toc-panel ol { list-style: none !important; margin: 0 !important; padding: 0 !important; display: block !important; }
.thp-toc-panel ol ol { padding-left: 14px !important; }
.thp-toc-panel li { margin: 0; list-style: none; }
.thp-toc-panel li .fa { display: none; }
.thp-toc-panel a { display: block; padding: 6px 0 6px 14px; position: relative; font-size: 14px; line-height: 1.4; color: #333; text-decoration: none; }
.thp-toc-panel a::before { content: "\203A"; position: absolute; left: 0; top: 5px; color: #999; }
.thp-toc-panel > .thp-toc-panel__body > ol > li > a { font-weight: 600; color: #233179; }
.thp-toc-panel a:hover, .thp-toc-panel a.is-current { color: #d91d1b !important; }
.thp-toc-fab {
	position: fixed; z-index: 9989; right: 18px; top: 50%; margin-top: -24px;
	width: 48px; height: 48px; border: 0; border-radius: 10px;
	background: #d91d1b; color: #fff; font-size: 20px; cursor: pointer;
	box-shadow: 0 6px 16px rgba(217, 29, 27, .35);
}
.thp-toc-fab[hidden] { display: none; }
.thp-toc-fab.is-active { background: #fff; color: #d91d1b; border: 1px solid #d91d1b; }
@media (max-width: 767px) {
	.thp-toc-panel { top: auto; bottom: 12px; right: 12px; left: 12px; width: auto; max-height: 60vh; }
	.thp-toc-fab { top: auto; bottom: 150px; margin-top: 0; }
}

/* Nút nổi mở Mục lục trên điện thoại: sang góc DƯỚI TRÁI — cột phải đã có nút Gọi + Zalo của cả site (user báo 05/10: dính nút call). */
@media (max-width: 767px) { .thp-toc-fab { right: auto !important; left: 12px; top: auto !important; bottom: 20px !important; margin-top: 0 !important; width: 44px; height: 44px; } }
/* Khung mục lục đang mở phải nằm TRÊN nút Gọi (z-index 200000) / Zalo của cả site — không để nút nổi đè lên chữ trong khung. */
.thp-toc-panel { z-index: 200100 !important; }
.thp-toc-fab { z-index: 200050 !important; }

/* Khách request 05/10 (ảnh mẫu): khung Mục lục RỘNG hơn — ~1/3 màn hình (≈600px ở 1920), sát mép phải, cao gần hết
   màn hình, mục chính 1 dòng. Điện thoại giữ khung ở đáy. */
@media (min-width: 768px) {
	.thp-toc-panel { top: 80px; right: 12px; width: clamp(380px, 32vw, 620px); max-height: calc(100vh - 100px); }
	.thp-toc-panel__head { font-size: 17px; padding: 14px 18px; }
	.thp-toc-panel__body { padding: 10px 18px 14px; }
	.thp-toc-panel a { font-size: 15px; padding: 7px 0 7px 16px; }
}

/* Khách request 06/10 (ảnh mũi tên): điện thoại — nút Mục lục ở BÊN PHẢI, ngay TRÊN cụm nút Gọi/Zalo (nút Gọi: bottom 88px, cao 120px). */
@media (max-width: 767px) { .thp-toc-fab { left: auto !important; right: 18px !important; bottom: 218px !important; } }

/* FB sửa giao diện lần 2 (09/10/2026): nút Mục lục đặt vào KHE giữa cột nội dung và sidebar (toc.js thêm .is-gutter + left).
   Khe chỉ ~30px → nút thành thẻ dọc hẹp 28×60px để không che chữ của bài / mép khung sidebar. */
.thp-toc-fab.is-gutter { width: 38px; height: 38px; margin-top: -26px; border-radius: 8px; font-size: 19px; padding: 0; } /* 09/10: cỡ thường, sát mép phải chữ bài (toc.js) */

/* =====================================================================================================
 * FB 14/10/2026 — mục lục "y như hungphatsteel.com/san-pham/thep-tron-tron-lap-tron" (đo trực tiếp trang mẫu):
 * - nút trong bài: viên thuốc đỏ đặc chữ trắng;
 * - nút nổi: 46×46 đỏ bo 10px, cố định SÁT MÉP PHẢI màn hình, giữa chiều cao (khách: "to như mẫu, đẩy ra bên ngoài");
 *   chỉ hiện khi nút trong bài đã cuộn qua (toc.js);
 * - khung: trắng bo 10px, viền xám nhạt + bóng, đầu khung nền xám nhạt (☰ đỏ + "Mục lục" + ×), mục lớn chữ đậm xám đen
 *   có nút › xổ mục con, mục con nhỏ hơn màu xám, mục đang đọc tô đỏ. Khung TO hơn mẫu theo ý khách ("cho to ra như
 *   khung bên"): rộng 440px, cao tối đa 640px, nằm bên trái nút nổi, giữa chiều cao màn hình.
 * ===================================================================================================== */
.table-of-contents .title-toc,
.rte .table-of-contents .title-toc { background: #d91f1c; color: #fff; border-color: #d91f1c; border-radius: 25px; padding: 7px 18px; font-size: 14px; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.table-of-contents .title-toc .fa,
.rte .table-of-contents .title-toc .label-title { color: #fff; }

@media (min-width: 768px) {
	.thp-toc-fab,
	.thp-toc-fab.is-gutter {
		left: auto !important; right: 20px !important; top: 50% !important; bottom: auto !important; margin-top: -23px !important;
		width: 46px !important; height: 46px !important; border-radius: 10px; font-size: 20px; padding: 0;
		background: #d91f1c; color: #fff; border: 2px solid #d91f1c; box-shadow: 0 2px 12px rgba(0, 0, 0, .12);
	}
	.thp-toc-panel {
		top: 50%; right: 82px; width: 440px; max-height: min(640px, calc(100vh - 120px));
		transform: translate(12px, -50%);
	}
	.thp-toc-panel.is-open { transform: translate(0, -50%); }
}
.thp-toc-fab.is-active { background: #fff; color: #d91f1c; border: 2px solid #d91f1c; }
.thp-toc-panel { border-color: #e5e7eb; box-shadow: 0 8px 28px rgba(0, 0, 0, .15); }
.thp-toc-panel__head { background: #f9fafb; border-bottom-color: #eef0f3; color: #111827; font-size: 16px; padding: 13px 16px; }
.thp-toc-panel__head .fa { color: #d91f1c; }
.thp-toc-panel__close { color: #9ca3af; font-size: 24px; }
.thp-toc-panel__body { padding: 8px 14px 12px 8px; }
.thp-toc-panel li { position: relative; }
.thp-toc-panel a::before { content: none; }
.thp-toc-panel > .thp-toc-panel__body > ol > li > a { font-weight: 600; color: #374151; font-size: 15px; }
.thp-toc-panel a { padding: 7px 4px 7px 30px; font-size: 15px; line-height: 1.45; color: #374151; }
.thp-toc-panel ol ol { padding-left: 22px !important; display: none !important; }
.thp-toc-panel li.is-open > ol { display: block !important; }
.thp-toc-panel ol ol a { font-weight: 400; color: #6b7280; font-size: 14px; padding-left: 12px; }
.thp-toc-expand {
	position: absolute; left: 0; top: 4px; width: 28px; height: 28px; border: 0; background: none; padding: 0;
	color: #9ca3af; font-size: 17px; cursor: pointer; border-radius: 4px; transition: transform .2s;
}
.thp-toc-panel li .thp-toc-expand .fa { display: inline-block !important; color: inherit; margin: 0; }
.thp-toc-expand:hover { background: #f3f4f6; color: #374151; }
.thp-toc-panel li.is-open > .thp-toc-expand { transform: rotate(90deg); }
.thp-toc-panel a:hover, .thp-toc-panel a.is-current { color: #d91f1c !important; }
@media (max-width: 767px) {
	.thp-toc-panel { left: 12px; right: 12px; width: auto; max-height: 70vh; }
}

/* Sau go-live 14/10/2026 (user): khung mục lục / nút mục lục bị cuối bài đẩy lên thì phải CHÌM DƯỚI thanh menu dính,
   không đè lên menu. Thanh menu (z 99999 gốc) nâng lên trên khung mục lục (200100) và nút Gọi/Zalo (200000). */
#masthead,
.site-header.f-nav { z-index: 200200 !important; }

/*
 * 19/10/2026 ("chữ bị mờ" ở trang Giới thiệu): `.entry-content{color:#878787}` (vendored, dùng làm màu mờ
 * cho đoạn tóm tắt blog) là màu NỀN mà mọi chữ trong `.page std entry-content rte` kế thừa, trừ khi có rule
 * khác áp thẳng. Trang blog (`single.php`) không bị mờ vì có thêm khung `.content-area` bên ngoài —
 * `.content-area p{color:#2c2c2c}` (style.css gốc) ghi đè riêng cho đoạn văn, cộng với `.entry-content ul
 * li{color:#2c2c2c}` ghi đè riêng cho danh sách — nên đoạn văn/danh sách bên blog luôn đậm. Trang tĩnh
 * (page.php) không có `.content-area` nên chỉ có danh sách (li) được ghi đè đậm, còn đoạn văn/chữ rời
 * (không nằm trong `<li>`) bị rớt về đúng màu mờ gốc #878787 — đúng hiện tượng "chữ mờ" nhìn thấy. Đặt lại
 * màu chữ đậm mặc định ngay trên khung `.page.rte` để mọi chữ KHÔNG có rule riêng kế thừa màu này; tiêu đề
 * H2/H3, liên kết... vẫn giữ đúng màu riêng vì luôn có rule áp thẳng lên chính nó, thắng giá trị kế thừa.
 */
.page.rte {
	color: #2c2c2c;
}

/*
 * 19/10/2026 (Sửa lỗi "đoạn văn dồn cục / không tự xuống dòng" trên trang tĩnh & bài viết):
 * Khi admin soạn thảo dán nội dung từ ngoài vào (Word/Google Docs/demo), các đoạn văn có thể là
 * các thẻ <span> (hoặc <b>, <strong>, <em>) rời nằm trực tiếp trong khung .rte mà không có thẻ <p>
 * bọc ngoài (do wpautop bị tắt khi nội dung có bảng/heading). Mặc định thẻ <span> là inline nên các
 * đoạn dính liền vào nhau trên cùng 1 hàng, trình duyệt bỏ qua dấu xuống dòng.
 * Cho các phần tử dòng nằm trực tiếp dưới khung nội dung:
 *   .rte > span, .rte > b, .rte > strong, .rte > em
 * hiển thị dạng khối (display: block) kèm khoảng cách đoạn dưới (margin: 0 0 12px) y hệt như thẻ <p>.
 * Với <b> và <strong> nằm trực tiếp, thêm margin-top: 18px để tạo khoảng cách như tiêu đề mục nhỏ.
 * Nhờ rule này, trang hiển thị chuẩn ngay cả khi CSDL chưa kịp bọc <p>, không phụ thuộc thao tác tay trên DB.
 */
.rte > span,
.rte > b,
.rte > strong,
.rte > em {
	display: block;
	margin: 0 0 12px;
}
.rte > b,
.rte > strong {
	margin: 18px 0 8px;
}

/*
 * 19/10/2026 ("bỏ cái lên phải kia" — ảnh khoanh 1 đường kẻ mờ dọc bên phải trang Giới thiệu): `page.php`
 * đặt `class="col-xs-12 post"` cho khung bài — class `post` (vendored, dùng cho thẻ bài viết trong danh
 * sách/trang blog) có sẵn `box-shadow: 2px 2px 0 0 #eee` để tạo hiệu ứng "thẻ nổi" trên nền xám. Ở trang
 * blog (`single.php`) hiệu ứng này nằm sát cột sidebar nên không lộ; ở trang tĩnh (full-width, không có gì
 * kề bên phải) khoảng trống trắng để lộ hẳn đường viền đổ bóng 2px này thành 1 đường kẻ mờ lạc lõng chạy
 * dọc hết chiều cao trang. Tắt riêng cho khung trang tĩnh, không đụng `.post` ở nơi khác (blog/trang Liên hệ
 * vẫn giữ hiệu ứng thẻ như cũ).
 */
.col-xs-12.post {
	box-shadow: none;
}

/*
 * Phản hồi 19/10/2026 (trang /gioi-thieu, ảnh khoanh): 3 lỗi soạn thảo cổ điển (Classic Editor) không hiện
 * đúng khi admin chèn ảnh/bảng vào nội dung trang tĩnh — vendored CSS gốc chưa từng xử lý các trường hợp này.
 *
 * 1) "ảnh căn giữa trong quản trị ra ngoài lệch trái": theme chưa từng định nghĩa 4 class căn ảnh chuẩn của
 *    WordPress (.aligncenter/.alignleft/.alignright/.alignnone) — thiếu hoàn toàn trong cả style.css lẫn file
 *    này trước đây, nên "Căn giữa" trong trình soạn thảo không có CSS nào để thực thi, ảnh/khung chú thích có
 *    `style="width:...px"` nhỏ hơn khung nội dung cứ dính mép trái theo mặc định của khối div.
 */
.rte .aligncenter,
.rte div.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.rte .alignleft { float: left; margin: 4px 20px 15px 0; }
.rte .alignright { float: right; margin: 4px 0 15px 20px; }
.rte .alignnone { display: block; }

/*
 * 2) "chú thích đè lên ảnh": `.wp-caption-text` ở style.css gốc (dòng ~1607) là kiểu overlay dành cho nơi
 *    khác (chữ trắng trên dải nền đen mờ, position:absolute đè lên đáy ảnh) — không có nơi nào trong theme
 *    chủ động dùng overlay này, nó chỉ TÌNH CỜ áp luôn vào chú thích ảnh chèn trong nội dung trang/bài qua
 *    Classic Editor (chọn ảnh + "Chú thích"). Trả về chú thích dạng chữ thường nằm NGAY DƯỚI ảnh, không che.
 */
.rte .wp-caption-text {
	position: static;
	width: auto;
	padding: 8px 0 0;
	background: none;
	color: #767676;
	font-size: 13px;
	text-align: center;
	font-style: italic;
}

/*
 * 3) "bảng chưa chỉnh viền thì cũng phải có đường kẻ mờ, cái này không hiện luôn": bảng chèn bằng khối "Bảng"
 *    (wp-block-table) của WordPress không tự có viền trừ khi admin tự chọn màu viền trong khối — vendored CSS
 *    (`.entry-content table th`) chỉ có viền dưới MÀU TRẮNG (vô hình trên nền trắng) và không có viền nào cho
 *    ô thường/tbody. Thêm viền xám nhạt mặc định cho mọi bảng trong nội dung trang/bài.
 */
.rte table {
	border-collapse: collapse;
	/* Bảng nhiều cột (vd "Dự án tiêu biểu" dán từ demo, 6 cột) không vừa màn hình điện thoại và không có
	   khung bọc `overflow-x` nào (dán thẳng <table>, không qua khối "Bảng" của WordPress) → làm tràn ngang
	   cả trang ở ≤390px. `display:block` trên chính thẻ <table> (không phá bố cục cột — tbody/tr/td bên
	   trong vẫn giữ display mặc định của bảng) để tự cuộn ngang khi cần, không ảnh hưởng bảng vừa màn hình. */
	display: block;
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}
.rte table td,
.rte table th {
	border: 1px solid #e3e3e3;
	padding: 8px 10px;
}

/*
 * Phát hiện thêm khi quan sát lại UI sau đợt sửa 19/10 (không có trong ảnh khách gửi): phần lớn ảnh chèn
 * trong bài viết/trang (~102 bài, import gốc) dùng kiểu "ảnh + chú thích" cũ của Bizweb —
 * `<pre><em><img>…(xuống dòng)…chú thích</em></pre>` — tận dụng việc trình duyệt giữ nguyên dấu xuống dòng
 * trong thẻ `<pre>` để chú thích tự xuống hàng dưới ảnh, KHÔNG phải để hiển thị dạng code. Nhưng CSS gốc có
 * sẵn `pre{background:#f5f5f5;border:1px solid #ccc;padding:11.5px;word-break:break-all}` (kiểu khối mã
 * nguồn) lại biến mọi ảnh/chú thích này thành 1 khung xám viền mờ như đoạn code — rất rõ khi soi lại bài
 * blog (vd `/1-cay-sat-hop-dai-bao-nhieu-met`). Trả về đúng kiểu ảnh + chú thích thường (ảnh giữa, chú
 * thích chữ xám nghiêng dưới ảnh, không khung/không nền) — dùng `display:block` cho ảnh để tự xuống dòng
 * thay vì dựa vào `white-space:pre` (đổi `white-space:normal` để chú thích dài tự xuống dòng bình thường
 * thay vì chạy tràn 1 hàng ngang). Đã kiểm 102 bài: không bài nào dùng `<pre>` cho mục đích khác (code/văn
 * bản canh lề) — chỉ 6/443 khối `<pre>` không có ảnh, đều là 1 câu chữ ngắn tương tự chú thích, không phải
 * code — an toàn áp dụng cho mọi `<pre>` trong `.rte`.
 */
.rte pre {
	display: block;
	background: none;
	border: 0;
	padding: 0;
	margin: 0 0 15px;
	white-space: normal;
	word-break: normal;
	text-align: center;
	font-family: inherit;
	font-size: inherit;
	color: inherit;
}
.rte pre img {
	display: block;
	margin: 0 auto 8px;
	max-width: 100%;
	height: auto;
}
.rte pre em {
	display: block;
	color: #767676;
	font-size: 13px;
	font-style: italic;
}

/*
 * 19/10/2026 (Đồng bộ typography, khoảng cách thẻ & màu sắc bảng toàn site theo chuẩn bài viết Tin tức):
 * Khách hàng yêu cầu: "lấy cái style trong bài viết làm chuẩn và muốn áp dụng toàn site chứ ko riêng trang giới thiệu,
 * đồng bộ cả màu table nữa".
 * 
 * Áp dụng thống nhất cho toàn bộ vùng nội dung rich text (.rte, .entry-content) trên toàn site
 * (bao gồm trang bài viết Tin tức, trang tĩnh Giới thiệu, chi tiết sản phẩm, công trình tiêu biểu, danh mục, v.v.):
 * 
 * 1. Phân cấp đề mục & khoảng thở (Margins):
 *    - H2: 24px, bold 700, màu navy thương hiệu #233179, margin-top: 32px, margin-bottom: 14px (H2 đầu tiên: margin-top: 8px).
 *    - H3: 20px, bold 700, màu #333333, margin-top: 24px, margin-bottom: 12px.
 *    - Đề mục dạng block con (b, strong đứng riêng): 18px, bold 700, màu #333333, margin-top: 24px, margin-bottom: 10px.
 *    - Đoạn văn (p, span rời): 16px, line-height 1.6, màu #2c2c2c, margin-bottom: 14px.
 *    - Danh sách (ul, li): thụt lề 22px, bullet disc, line-height 1.6, khoảng cách giữa các bullet 8px, margin trên dưới 12px/18px.
 *    - Khung ảnh & chú thích: margin trên/dưới 22px thoáng đãng.
 * 
 * 2. Bảng biểu (Table):
 *    - Viền bảng sạch sẽ: 1px solid #dfe3ec, viền ô: 1px solid #e6e9f2.
 *    - Header (th, thead th, thead td, tr:first-child td): nền xám nhạt #f5f6fa, chữ navy #233179 in đậm (kể cả khi chứa thẻ b/p).
 *    - Ô bảng: đệm 8px 12px, chữ 14px, line-height 1.45, căn giữa theo chiều dọc.
 *    - Đoạn văn trong ô (table p): margin: 0 giúp ô gọn gàng, không bị giãn thừa.
 *    - Tự động cuộn ngang mượt mà trên mobile khi bảng nhiều cột.
 */
.rte,
.entry-content {
	font-size: 16px;
	line-height: 1.6;
	color: #2c2c2c;
}
.rte h2,
.entry-content h2 {
	font-size: 24px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: #233179 !important;
	margin-top: 32px !important;
	margin-bottom: 14px !important;
}
.rte h2:first-child,
.rte > h2:first-child,
.entry-content > h2:first-child {
	margin-top: 8px !important;
}
.rte h3,
.entry-content h3 {
	font-size: 20px !important;
	line-height: 1.35 !important;
	font-weight: 700 !important;
	color: #333333 !important;
	margin-top: 24px !important;
	margin-bottom: 12px !important;
}
.rte > b,
.rte > strong,
.entry-content > b,
.entry-content > strong {
	display: block;
	font-size: 18px;
	font-weight: 700;
	color: #333333;
	margin-top: 24px !important;
	margin-bottom: 10px !important;
}
.rte p,
.rte > span,
.entry-content p,
.entry-content > span {
	font-size: 16px;
	line-height: 1.6;
	color: #2c2c2c;
	margin-top: 0;
	margin-bottom: 14px !important;
}
.rte ul:not(.toc):not(.nav-tabs),
.entry-content ul:not(.toc):not(.nav-tabs) {
	margin: 12px 0 18px 22px !important;
	padding-left: 0 !important;
	list-style-type: disc !important;
}
.rte ul:not(.toc):not(.nav-tabs) li,
.entry-content ul:not(.toc):not(.nav-tabs) li {
	line-height: 1.6;
	margin-bottom: 8px !important;
	color: #2c2c2c;
}
.rte figure.wp-caption,
.entry-content figure.wp-caption {
	margin-top: 22px !important;
	margin-bottom: 22px !important;
}

/* Bảng biểu toàn site: Đồng bộ chuẩn bảng Tin tức */
.rte table,
.entry-content table {
	width: 100% !important;
	border-collapse: collapse !important;
	margin: 18px 0 22px !important;
	font-size: 14px;
	line-height: 1.45;
	border: 1px solid #dfe3ec !important;
	display: block;
	overflow-x: auto;
	max-width: 100%;
	-webkit-overflow-scrolling: touch;
}
.rte table tr,
.entry-content table tr {
	height: auto !important;
}
.rte table th,
.rte table td,
.entry-content table th,
.entry-content table td {
	padding: 8px 12px !important;
	border: 1px solid #e6e9f2 !important;
	vertical-align: middle !important;
	height: auto !important;
}
.rte table th,
.rte table thead th,
.rte table thead td,
.rte table tr:first-child td,
.entry-content table th,
.entry-content table thead th,
.entry-content table thead td,
.entry-content table tr:first-child td {
	background: #f5f6fa !important;
	font-weight: 700 !important;
	color: #233179 !important;
}
.rte table th *,
.rte table thead th *,
.rte table thead td *,
.rte table tr:first-child td *,
.entry-content table th *,
.entry-content table thead th *,
.entry-content table thead td *,
.entry-content table tr:first-child td * {
	color: #233179 !important;
	font-weight: 700 !important;
}
.rte table p,
.entry-content table p {
	margin: 0 !important;
}