/*
Theme Name: Quang Minh
Theme URI: https://suachiakhoa.com/
Author: Két Sắt Quang Minh
Description: Theme riêng cho suachiakhoa.com — dịch vụ sửa két sắt tại nhà TP.HCM. Tông navy + vàng, dựng cho tốc độ và chuyển đổi cuộc gọi.
Version: 1.0.0
Requires at least: 6.0
Requires PHP: 8.0
License: GPLv2 or later
Text Domain: quangminh
*/

/* =============================================================================
   THEME QUANG MINH — suachiakhoa.com
   Dựng 23/10/2026, thay GeneratePress + lớp vá mu-plugin.
   =============================================================================
   BỐ CỤC TỆP
     1. Nền tảng (reset, chữ nghĩa)
     2. Khung trang
     3. Thanh thông báo · Header · Menu
     4. Chân trang · Nút nổi
     5. Thành phần dùng chung của theme (.qm-)
     — rồi tới HỆ THỐNG KHỐI .sck- (nối từ tệp design.css cũ)

   TẠI SAO CÒN TIỀN TỐ .sck- : nội dung trang chủ đã được viết lại bằng hệ class
   đó. Đổi tên là phải sửa lại toàn bộ nội dung, không đáng. Tiền tố .qm- dành
   cho phần KHUNG do theme in ra; .sck- dành cho phần NỘI DUNG trong bài.
   ========================================================================== */

/* ============================ 1. NỀN TẢNG =============================== */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
	margin: 0;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	font-size: 17px;
	line-height: 1.75;
	color: var(--sck-muc);
	background: #fff;
	overflow-x: hidden;           /* chặn kéo ngang do ảnh/bảng rộng */
	-webkit-font-smoothing: antialiased;
}

img, svg, video { max-width: 100%; }
img { height: auto; }            /* bắt buộc khi ảnh có width/height trong HTML */

a { color: var(--sck-navy); }

/* KHÔNG đặt color ở đây.
   Nhiều khối trong nội dung có nền tối và truyền color:#fff xuống cho tiêu đề.
   Nếu ép màu navy ở tầng này thì H1 trong hero navy thành navy-trên-navy, gần
   như vô hình — đã gặp thật trên /sua-ket-sat/sua-ket-sat-dien-tu/.
   Màu được đặt riêng ở từng chỗ bên dưới, nơi biết chắc nền sáng. */
h1, h2, h3, h4 { margin: 0 0 .5em; line-height: 1.25; font-weight: 800; color: inherit; }

/* Bỏ qua để tới nội dung — cho người dùng bàn phím và đọc màn hình */
.qm-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100000;
	background: var(--sck-navy); color: #fff; padding: 12px 20px;
	border-radius: 0 0 var(--sck-r-sm) 0; text-decoration: none; font-weight: 700;
}
.qm-skip:focus { left: 0; }

/* Viền focus rõ ràng — mặc định của trình duyệt bị nhiều theme xoá mất */
a:focus-visible, button:focus-visible, summary:focus-visible {
	outline: 3px solid var(--sck-vang);
	outline-offset: 2px;
	border-radius: 4px;
}

/* ============================ 2. KHUNG TRANG ============================ */

.qm-main { display: block; }

.qm-page { max-width: var(--qm-rong); margin-inline: auto; padding: 26px var(--qm-le) 64px; }
.qm-page--narrow { max-width: 860px; }

.qm-page__head { margin-bottom: 26px; }
.qm-page__head h1 { font-size: clamp(23px, 3.1vw, 33px); letter-spacing: -.4px; line-height: 1.25; }
.qm-page__head p { color: var(--sck-mo); margin: 0; }

.qm-meta { font-size: 14px; color: var(--sck-mo-2); }

/* Đường dẫn (breadcrumb Yoast) */
.qm-crumbs {
	font-size: 13.5px; color: var(--sck-mo); margin-bottom: 18px;
	padding-bottom: 12px; border-bottom: 1px solid var(--sck-vien);
}
.qm-crumbs a { color: var(--sck-mo); text-decoration: none; }
.qm-crumbs a:hover { color: var(--sck-navy); text-decoration: underline; }

.qm-center { text-align: center; }

/* ================ 3. THANH THÔNG BÁO · HEADER · MENU ==================== */

.qm-topbar {
	background: var(--sck-navy);
	color: rgba(255,255,255,.88);
	font-size: 13px;
}
.qm-topbar__in {
	max-width: var(--qm-rong); margin-inline: auto; padding: 9px var(--qm-le);
	display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 22px;
}
.qm-topbar__in span { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.qm-topbar__in span + span::before { content: "·"; color: var(--sck-vang); margin-right: 22px; font-weight: 800; }
.qm-topbar b { color: var(--sck-vang); font-weight: 700; }

@media (max-width: 680px) {
	/* 4 mục xuống 3 dòng là chiếm quá nhiều phần đầu màn hình. Giữ 2 mục quan
	   trọng nhất; hai mục kia vẫn có trong thẻ ở hero. */
	.qm-topbar { font-size: 11.5px; }
	.qm-topbar__in { gap: 2px 14px; padding: 7px 14px; }
	.qm-topbar__in span + span::before { margin-right: 14px; }
	.qm-topbar__in span:nth-child(n+3) { display: none; }
}

.qm-header {
	background: #fff;
	border-bottom: 1px solid var(--sck-vien);
	position: sticky; top: 0; z-index: 900;
	box-shadow: 0 1px 14px rgba(0,31,84,.06);
}
.qm-header__in {
	max-width: var(--qm-rong); margin-inline: auto; padding: 12px var(--qm-le);
	display: flex; align-items: center; gap: 18px;
}

/* --- Thương hiệu --- */
.qm-brand { flex: 0 0 auto; }
.qm-brand__link { display: flex; align-items: center; gap: 11px; text-decoration: none; }
.qm-brand__badge {
	display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
	border-radius: 11px; background: var(--sck-navy); color: var(--sck-vang);
}
.qm-brand__badge svg { width: 21px; height: 21px; }
.qm-brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.qm-brand__text strong { font-size: 18px; font-weight: 800; color: var(--sck-navy); letter-spacing: -.3px; }
.qm-brand__text small { font-size: 11.5px; color: var(--sck-mo); }

/* --- Menu --- */
.qm-nav { margin-left: auto; }
.qm-nav__list { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; gap: 2px; }
.qm-nav__list > li { position: relative; }
.qm-nav__list > li > a {
	display: block; padding: 10px 13px; border-radius: var(--sck-r-sm);
	font-size: 15px; font-weight: 600; color: var(--sck-muc);
	text-decoration: none; white-space: nowrap;
}
.qm-nav__list > li > a:hover { background: var(--sck-nen-nhe); color: var(--sck-navy); }
.qm-nav__list > li.is-current > a,
.qm-nav__list > li.current-menu-item > a { color: var(--sck-navy); box-shadow: inset 0 -3px 0 var(--sck-vang); }

/* Mũi tên cho mục có menu con */
.qm-nav__item--has > a::after,
.qm-nav__list .menu-item-has-children > a::after {
	content: ""; display: inline-block; margin-left: 7px; vertical-align: 2px;
	width: 6px; height: 6px;
	border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
	transform: rotate(45deg); opacity: .55;
}

/* Menu con */
.qm-nav__sub, .qm-nav__list .sub-menu {
	position: absolute; top: calc(100% + 6px); left: 0; z-index: 10;
	min-width: 252px; max-height: 70vh; overflow-y: auto;
	list-style: none; margin: 0; padding: 7px;
	background: #fff; border: 1px solid var(--sck-vien);
	border-radius: var(--sck-r); box-shadow: var(--sck-bong-2);
	opacity: 0; visibility: hidden; transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
}
.qm-nav__list > li:hover > .qm-nav__sub,
.qm-nav__list > li:focus-within > .qm-nav__sub,
.qm-nav__list > li:hover > .sub-menu,
.qm-nav__list > li:focus-within > .sub-menu {
	opacity: 1; visibility: visible; transform: translateY(0);
}
.qm-nav__sub a, .qm-nav__list .sub-menu a {
	display: block; padding: 9px 13px; border-radius: 8px;
	font-size: 14.5px; color: var(--sck-muc); text-decoration: none; line-height: 1.45;
}
.qm-nav__sub a:hover, .qm-nav__list .sub-menu a:hover { background: var(--sck-nen-nhe); color: var(--sck-navy); }

/* --- Bên phải header --- */
.qm-header__right { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; }

.qm-callbtn {
	display: inline-flex; align-items: center; gap: 9px;
	padding: 8px 16px 8px 9px; border-radius: 999px;
	background: var(--sck-vang); color: var(--sck-navy);
	text-decoration: none; font-weight: 800; line-height: 1.15; white-space: nowrap;
	box-shadow: 0 3px 10px rgba(0,31,84,.16);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.qm-callbtn:hover { background: var(--sck-vang-2); transform: translateY(-1px); box-shadow: 0 7px 18px rgba(0,31,84,.24); }
.qm-callbtn__ic {
	display: grid; place-items: center; flex: 0 0 28px; width: 28px; height: 28px;
	border-radius: 50%; background: var(--sck-navy); color: #fff;
}
.qm-callbtn__text { display: flex; flex-direction: column; }
.qm-callbtn__text small { font-size: 10.5px; font-weight: 600; opacity: .8; }
.qm-callbtn__text strong { font-size: 15.5px; letter-spacing: .2px; }

/* Nút hamburger */
.qm-burger {
	display: none; width: 44px; height: 44px; padding: 0;
	background: var(--sck-nen-nhe); border: 1px solid var(--sck-vien);
	border-radius: var(--sck-r-sm); cursor: pointer;
	flex-direction: column; justify-content: center; align-items: center; gap: 5px;
}
.qm-burger span { display: block; width: 19px; height: 2px; background: var(--sck-navy); border-radius: 2px; transition: transform .2s ease, opacity .2s ease; }
.qm-nav-mo .qm-burger span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.qm-nav-mo .qm-burger span:nth-child(2) { opacity: 0; }
.qm-nav-mo .qm-burger span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Màn hình vừa: thu gọn nút gọi còn biểu tượng + số */
@media (max-width: 1240px) {
	.qm-header__in { gap: 12px; }
	.qm-brand__text small { display: none; }
	.qm-callbtn__text small { display: none; }
	.qm-nav__list > li > a { padding: 10px 10px; font-size: 14.5px; }
}

/* --- Điện thoại / máy tính bảng: menu trượt --- */
@media (max-width: 1024px) {
	.qm-burger { display: flex; }
	.qm-nav {
		position: fixed; inset: 0 0 0 auto; width: min(340px, 86vw); z-index: 950;
		background: #fff; padding: 76px 18px 28px; margin: 0;
		overflow-y: auto; box-shadow: -14px 0 40px rgba(0,31,84,.2);
		transform: translateX(100%); transition: transform .26s ease;
	}
	.qm-nav-mo .qm-nav { transform: translateX(0); }
	.qm-nav-mo { overflow: hidden; }          /* khoá cuộn nền khi menu mở */

	/* Lớp phủ mờ phía sau menu */
	.qm-nav-mo::after {
		content: ""; position: fixed; inset: 0; z-index: 940;
		background: rgba(0,31,84,.45);
	}

	.qm-nav__list { flex-direction: column; align-items: stretch; gap: 0; }
	.qm-nav__list > li { border-bottom: 1px solid var(--sck-vien); }
	.qm-nav__list > li > a { padding: 14px 10px; font-size: 16px; border-radius: 0; }

	/* Menu con: mặc định đóng, bấm vào mục cha mới mở (xử lý trong footer.php) */
	.qm-nav__sub, .qm-nav__list .sub-menu {
		position: static; opacity: 1; visibility: visible; transform: none;
		border: 0; box-shadow: none; padding: 0 0 10px 12px;
		max-height: 0; overflow: hidden; transition: max-height .25s ease;
		min-width: 0; background: transparent;
	}
	.qm-nav__list > li.is-open > .qm-nav__sub,
	.qm-nav__list > li.is-open > .sub-menu { max-height: 60vh; overflow-y: auto; }
	.qm-nav__item--has.is-open > a::after,
	.qm-nav__list .menu-item-has-children.is-open > a::after { transform: rotate(-135deg); }
}

@media (max-width: 480px) {
	.qm-brand__text strong { font-size: 15.5px; }
	.qm-callbtn { padding: 8px 13px 8px 8px; }
	.qm-callbtn__text strong { font-size: 14px; }
}

/* ===================== 4. CHÂN TRANG · NÚT NỔI ========================== */

.qm-footer { background: var(--sck-navy); color: rgba(255,255,255,.76); margin-top: 48px; }
.qm-footer__in {
	max-width: var(--qm-rong); margin-inline: auto; padding: clamp(36px, 5vw, 56px) var(--qm-le);
	display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.2fr; gap: clamp(22px, 3vw, 40px);
}
@media (max-width: 980px) { .qm-footer__in { grid-template-columns: 1fr 1fr; } }
@media (max-width: 580px) { .qm-footer__in { grid-template-columns: 1fr; } }

.qm-footer__col h2 {
	font-size: 14px; font-weight: 800; color: var(--sck-vang);
	text-transform: uppercase; letter-spacing: 1.2px; margin-bottom: 14px;
}
.qm-footer__col ul { list-style: none; margin: 0; padding: 0; }
.qm-footer__col li { margin-bottom: 9px; font-size: 14.5px; line-height: 1.5; }
.qm-footer__col a { color: rgba(255,255,255,.8); text-decoration: none; }
.qm-footer__col a:hover { color: var(--sck-vang); text-decoration: underline; }

.qm-footer__col--brand .qm-brand__badge { background: rgba(255,255,255,.1); margin-bottom: 12px; }
.qm-footer__col--brand strong { display: block; font-size: 18px; color: #fff; margin-bottom: 10px; }
.qm-footer__col--brand p { font-size: 14.5px; line-height: 1.65; margin: 0 0 12px; }
.qm-footer__note { font-size: 12.5px !important; color: rgba(255,255,255,.5); font-style: italic; }

.qm-footer__phone {
	display: inline-flex; align-items: center; gap: 9px; margin-bottom: 14px;
	font-size: 22px; font-weight: 800; color: var(--sck-vang) !important; text-decoration: none !important;
}
.qm-footer__meta { margin-bottom: 16px !important; }
.qm-footer__meta li { font-size: 13.5px; }
.qm-footer__meta b { color: #fff; font-weight: 700; }

.qm-footer__bar { border-top: 1px solid rgba(255,255,255,.12); }
.qm-footer__barin {
	max-width: var(--qm-rong); margin-inline: auto; padding: 16px var(--qm-le);
	display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
	font-size: 13px; color: rgba(255,255,255,.55);
}
.qm-footer__barin a { color: rgba(255,255,255,.72); text-decoration: none; }
.qm-footer__barin a:hover { color: var(--sck-vang); }

/* --- Nút liên hệ nổi --- */
.qm-float {
	position: fixed; z-index: 980;
	right: max(16px, env(safe-area-inset-right));
	bottom: calc(16px + env(safe-area-inset-bottom));
	display: flex; flex-direction: column; align-items: flex-end; gap: 11px;
}
.qm-float__call {
	display: flex; align-items: center; gap: 11px;
	padding: 9px 18px 9px 9px; border-radius: 999px;
	background: var(--sck-vang); color: var(--sck-navy) !important;
	text-decoration: none !important; font-weight: 800; line-height: 1.15;
	box-shadow: 0 8px 24px rgba(0,31,84,.3);
	transition: transform .2s ease, box-shadow .2s ease;
}
.qm-float__call:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,31,84,.38); }
.qm-float__dot {
	display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px;
	border-radius: 50%; background: var(--sck-navy); color: #fff;
}
.qm-float__label { display: flex; flex-direction: column; }
.qm-float__label small { font-size: 10.5px; letter-spacing: .4px; opacity: .85; }
.qm-float__label strong { font-size: 17px; }

.qm-float__zalo {
	display: inline-flex; align-items: center; gap: 7px;
	padding: 10px 16px; border-radius: 999px;
	background: var(--sck-zalo); color: #fff !important;
	text-decoration: none !important; font-weight: 800; font-size: 14px;
	box-shadow: 0 8px 22px rgba(0,104,255,.34);
	transition: transform .2s ease;
}
.qm-float__zalo:hover { transform: translateY(-2px); }

@media (max-width: 600px) {
	.qm-float__call { padding: 8px 15px 8px 8px; }
	.qm-float__dot { flex-basis: 34px; width: 34px; height: 34px; }
	.qm-float__label strong { font-size: 15.5px; }
	.qm-float__zalo { padding: 9px 14px; font-size: 13px; }
	body { padding-bottom: 100px; }   /* chừa chỗ, không che nội dung cuối trang */
}

/* ================ 5. THÀNH PHẦN DÙNG CHUNG CỦA THEME ==================== */

.qm-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 9px;
	padding: 13px 26px; border-radius: 999px;
	font-weight: 800; font-size: 15.5px; line-height: 1;
	text-decoration: none !important; white-space: nowrap; border: 0; cursor: pointer;
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.qm-btn--lg { padding: 16px 34px; font-size: 17px; }
.qm-btn--gold { background: var(--sck-vang); color: var(--sck-navy) !important; box-shadow: 0 7px 20px rgba(246,195,68,.3); }
.qm-btn--gold:hover { background: var(--sck-vang-2); transform: translateY(-2px); }
.qm-btn .qm-i { flex: 0 0 auto; }

/* Danh sách bài viết */
.qm-list { display: grid; gap: 18px; }
.qm-listitem {
	display: grid; grid-template-columns: 220px 1fr; gap: 18px;
	background: #fff; border: 1px solid var(--sck-vien); border-left: 4px solid var(--sck-vang);
	border-radius: var(--sck-r); overflow: hidden;
	transition: transform .18s ease, box-shadow .18s ease;
}
.qm-listitem:hover { transform: translateY(-3px); box-shadow: var(--sck-bong-2); }
.qm-listitem__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.qm-listitem__body { padding: 18px 20px; }
.qm-listitem h2 { font-size: 18.5px; margin-bottom: 7px; }
.qm-listitem h2 a { color: var(--sck-navy); text-decoration: none; }
.qm-listitem h2 a:hover { text-decoration: underline; }
.qm-listitem p { margin: 0 0 10px; font-size: 14.5px; color: var(--sck-mo); line-height: 1.65; }
.qm-more { font-size: 14px; font-weight: 700; color: var(--sck-navy); text-decoration: none; }
.qm-more::after { content: " ›"; color: var(--sck-vang); font-weight: 800; }
@media (max-width: 700px) { .qm-listitem { grid-template-columns: 1fr; } .qm-listitem__media img { aspect-ratio: 16/9; } }

.qm-pager { margin-top: 28px; text-align: center; }
.qm-pager .page-numbers {
	display: inline-grid; place-items: center; min-width: 40px; height: 40px; padding: 0 12px;
	margin: 0 3px; border-radius: var(--sck-r-sm); border: 1px solid var(--sck-vien);
	color: var(--sck-navy); text-decoration: none; font-weight: 700;
}
.qm-pager .page-numbers.current { background: var(--sck-navy); color: #fff; border-color: var(--sck-navy); }
.qm-pager .page-numbers:hover { background: var(--sck-nen-nhe); }


/* =============================================================================
   PHẦN DƯỚI ĐÂY LẤY TỪ LỚP VÁ CŨ (mu-plugins/sck-giao-dien/design.css)
   -----------------------------------------------------------------------------
   Đã BỎ hai phần B và C của tệp cũ: chúng nhắm vào class của GeneratePress
   (.site-header, .main-navigation, .sck-nav-call, .sck-trust, .hot-contact).
   Theme mới không còn những class đó — phần khung giờ dùng tiền tố .qm-.

   Nhiều chỗ dưới đây còn !important. Trước kia bắt buộc phải có vì phải thắng
   Additional CSS của Customizer (luật .entry-content a:not(...) độ ưu tiên
   (0,3,1) áp cho MỌI link). Additional CSS đó gắn với slug "generatepress" nên
   KHÔNG còn hiệu lực với theme này. Có thể dọn dần, nhưng để nguyên thì vẫn
   chạy đúng — ưu tiên không làm vỡ 94 trang đang sống.
   ========================================================================== */
/* ============================== A. BIẾN ================================== */
:root {
	--sck-navy:      #001F54;
	--sck-navy-2:    #0a3170;   /* nhạt hơn, dùng cho dải chuyển màu */
	--sck-navy-3:    #15438f;   /* nhạt nhất, dùng cho điểm nhấn trên nền tối */
	--sck-vang:      #F6C344;
	--sck-vang-2:    #ffd45e;
	--sck-vang-dam:  #e0ad28;

	--sck-muc:       #16213a;
	--sck-mo:        #5a6478;
	--sck-mo-2:      #8089a0;
	--sck-vien:      #e4e8f0;
	--sck-nen:       #ffffff;
	--sck-nen-nhe:   #f4f7fc;
	--sck-zalo:      #0068FF;

	--sck-r-sm: 10px;
	--sck-r:    16px;
	--sck-r-lg: 24px;

	--sck-bong:    0 2px 10px rgba(0, 31, 84, .06);
	--sck-bong-2:  0 8px 26px rgba(0, 31, 84, .10);
	--sck-bong-3:  0 18px 44px rgba(0, 31, 84, .18);

	--sck-khoang:  clamp(40px, 4.5vw, 62px);  /* khoảng cách dọc — siết lại cho dày dặn như bản mẫu */

	/* Chiều rộng khung. Trước đây ghi cứng 1180px ở 5 chỗ, lệch nhau là vỡ
	   hàng giữa thanh trên, header, thân trang và chân trang. 23/10/2026 chủ
	   web yêu cầu bố cục FULL, nên nới rộng và dồn về một biến duy nhất. */
	--qm-rong: min(1600px, 100%);
	/* Lề hai bên. Khung full nên nếu giữ 20px cố định thì trên màn rộng chữ
	   chạy sát mép, nhìn như trang chưa dựng xong. */
	--qm-le: clamp(18px, 3.4vw, 52px);
}

/* ==================== D. HỆ THỐNG KHỐI MỚI (.sck-) ======================= */

/* --- Khung chứa --- */
.sck-wrap { max-width: 100%; margin-inline: auto; }
.sck-wrap--narrow { max-width: 820px; }

/* --- Khối --- */
.sck-sec { padding-block: var(--sck-khoang); }
.sck-sec--soft {
	background: var(--sck-nen-nhe);
	border-radius: var(--sck-r-lg);
	padding-inline: clamp(18px, 3vw, 40px);
	margin-block: 10px;
}

/* --- Tiêu đề khối --- */
.sck-head { text-align: center; margin-bottom: clamp(24px, 3vw, 36px); }
.entry-content .sck-head h2, .sck-head h2 {
	font-size: clamp(23px, 2.9vw, 32px);
	line-height: 1.2; font-weight: 800; letter-spacing: -.5px;
	color: var(--sck-navy); margin: 0 0 12px;
	text-wrap: balance;
}
.entry-content .sck-head p, .sck-head p {
	max-width: 760px; margin-inline: auto;
	color: var(--sck-mo); font-size: 16.5px; line-height: 1.7;
}
.entry-content .sck-head--light h2, .sck-head--light h2 { color: #fff; }
.entry-content .sck-head--light p, .sck-head--light p { color: rgba(255,255,255,.76); }
.sck-head--left { text-align: left; }
.sck-head--left p { margin-inline: 0; }

/* --- Nút ---
   ⚠ PHẢI DÙNG !important Ở ĐÂY. Additional CSS trong Customizer có luật:
       .entry-content a:not(.button):not(.cta-btn) { background: linear-gradient(...) }
   tô nền vàng nhạt cho MỌI link trong nội dung. Độ ưu tiên của nó là (0,3,1),
   cao hơn hẳn .sck-btn--gold (0,1,0), nên nếu không ép thì nút bị phủ nền
   gradient vàng nhạt và trông như hộp trắng vỡ. Đã gặp thật khi chụp kiểm tra.
   Không sửa Additional CSS vì nó còn phục vụ 94 trang chưa viết lại. */
.entry-content a.sck-btn,
.sck-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	/* Mọi thuộc tính dưới đây phải !important. Luật của Additional CSS
	   .entry-content a:not(.button):not(.cta-btn) có độ ưu tiên (0,3,1), cao hơn
	   .entry-content a.sck-btn (0,2,1), và nó đặt cả background lẫn padding:0 2px.
	   Không ép thì nút mất padding, thành chữ gạch chân có nền vàng nhạt. */
	padding: 14px 28px !important; border-radius: 999px !important;
	font-weight: 800; font-size: 16px; line-height: 1;
	text-decoration: none !important; white-space: nowrap;
	background-image: none !important;
	border-bottom: 0 !important;
	transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease;
}
.entry-content a.sck-btn--lg, .sck-btn--lg { padding: 17px 36px !important; font-size: 17.5px; min-height: 54px; }
.sck-btn .sck-i { width: 19px; height: 19px; fill: currentColor; flex: 0 0 19px; }

.entry-content a.sck-btn--gold, .sck-btn--gold {
	background-color: var(--sck-vang) !important; color: var(--sck-navy) !important;
	box-shadow: 0 8px 22px rgba(246,195,68,.32);
}
.entry-content a.sck-btn--gold:hover, .sck-btn--gold:hover {
	background-color: var(--sck-vang-2) !important; color: var(--sck-navy) !important;
	transform: translateY(-2px); box-shadow: 0 13px 30px rgba(246,195,68,.44);
}

.entry-content a.sck-btn--navy, .sck-btn--navy {
	background-color: var(--sck-navy) !important; color: #fff !important;
	box-shadow: 0 8px 22px rgba(0,31,84,.26);
}
.entry-content a.sck-btn--navy:hover, .sck-btn--navy:hover {
	background-color: var(--sck-navy-2) !important; color: #fff !important; transform: translateY(-2px);
}

/* Nút viền, dùng trên nền tối */
.entry-content a.sck-btn--ghost, .sck-btn--ghost {
	background-color: rgba(255,255,255,.08) !important; color: #fff !important;
	border: 1.5px solid rgba(255,255,255,.34);
}
.entry-content a.sck-btn--ghost:hover, .sck-btn--ghost:hover {
	background-color: rgba(255,255,255,.18) !important; color: #fff !important;
	border-color: rgba(255,255,255,.6); transform: translateY(-2px);
}

/* Gỡ nền highlight kế thừa cho MỌI link trong hệ thống khối mới.
   Các khối này tự lo kiểu dáng link riêng, không cần highlight vàng. */
.entry-content .sck-hero a,
.entry-content .sck-band a,
.entry-content .sck-contact a,
.entry-content .sck-card a,
.entry-content .sck-silo a,
.entry-content .sck-areas a,
.entry-content .sck-faq a,
.entry-content .sck-head a {
	background-image: none !important;
	padding: 0;
}

.sck-center { text-align: center; }

/* --- HERO --- */
.sck-hero {
	background:
		radial-gradient(1100px 440px at 12% -10%, var(--sck-navy-3) 0%, transparent 62%),
		linear-gradient(152deg, var(--sck-navy) 0%, var(--sck-navy-2) 100%);
	border-radius: var(--sck-r-lg);
	padding: clamp(40px, 6vw, 76px) clamp(20px, 4vw, 56px);
	color: #fff;
	box-shadow: var(--sck-bong-3);
	position: relative; overflow: hidden;
}
.sck-hero__in { max-width: 900px; margin-inline: auto; text-align: center; }

.sck-hero__eyebrow {
	display: inline-block; margin: 0 0 16px;
	padding: 7px 16px; border-radius: 999px;
	background: rgba(246,195,68,.16);
	border: 1px solid rgba(246,195,68,.4);
	color: var(--sck-vang);
	font-size: 13.5px; font-weight: 700; letter-spacing: .4px;
}

.entry-content .sck-hero__title, .sck-hero__title {
	/* Hạ từ clamp(27,5vw,50) xuống. 50px trên máy tính quá to, chiếm gần hết
	   màn hình đầu và đẩy nút gọi xuống dưới tầm nhìn. Cỡ này vẫn nổi bật mà
	   còn chỗ cho đoạn mô tả, thẻ tin cậy và nút bấm cùng lọt một màn hình. */
	font-size: clamp(23px, 3.3vw, 36px) !important;
	line-height: 1.18; font-weight: 800; letter-spacing: -.6px;
	margin: 0 0 16px; color: #fff; text-wrap: balance;
}

/* Căn TRÁI dù cả khối căn giữa: đoạn này dài 5 dòng trên máy tính và 14 dòng
   trên điện thoại. Chữ căn giữa nhiều dòng khiến đầu mỗi dòng nằm một chỗ
   khác nhau, mắt phải dò lại từ đầu sau mỗi lần xuống dòng. */
.sck-hero__lead {
	text-align: left;
	max-width: 720px; margin: 0 auto 26px;
	font-size: clamp(15.5px, 1.75vw, 17.5px);
	line-height: 1.78; color: rgba(255,255,255,.88);
}
.sck-hero__lead strong { color: #fff; }
.sck-hero__lead a { color: var(--sck-vang) !important; font-weight: 700; text-decoration: none; border-bottom: 1.5px solid rgba(246,195,68,.45); }
.sck-hero__lead a:hover { border-bottom-color: var(--sck-vang); }

.sck-hero__actions { display: flex; flex-wrap: wrap; gap: 14px; justify-content: center; margin-bottom: 28px; }

.sck-hero__chips {
	list-style: none; padding: 0; margin: 0 0 32px;
	display: flex; flex-wrap: wrap; gap: 10px; justify-content: center;
}
.sck-hero__chips li {
	padding: 8px 16px; border-radius: 999px;
	background: rgba(255,255,255,.08);
	border: 1px solid rgba(255,255,255,.16);
	font-size: 13.5px; font-weight: 600; color: rgba(255,255,255,.9);
}
.sck-hero__chips li::before { content: "✓"; color: var(--sck-vang); font-weight: 800; margin-right: 7px; }

.sck-hero__media { margin: 0; }
.sck-hero__media img {
	width: 100%; max-height: 420px; object-fit: cover;
	border-radius: var(--sck-r);
	box-shadow: 0 20px 48px rgba(0,0,0,.36);
	/* height:auto khi có width/height trong HTML — thiếu là ảnh méo.
	   Bài học vỡ bố cục 20–21/09. object-fit lo phần cắt ảnh. */
	height: auto;
}
.sck-hero__media figcaption { margin-top: 10px; font-size: 12.5px; color: rgba(255,255,255,.5); font-style: italic; }

@media (max-width: 768px) {
	.sck-hero__media img { max-height: 240px; }
	.sck-hero__actions .sck-btn { width: 100%; }

	/* Thẻ tin cậy để nguyên cỡ thì mỗi thẻ chiếm trọn một hàng -> 4 hàng, đẩy
	   ảnh và nội dung xuống quá sâu. Thu nhỏ để vừa 2 thẻ một hàng. */
	.sck-hero__chips { gap: 8px; margin-bottom: 26px; }
	.sck-hero__chips li { padding: 7px 12px; font-size: 12.5px; }
	.sck-hero__chips li::before { margin-right: 5px; }
}

/* --- Bố cục 2 cột --- */
.sck-split { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(24px, 4vw, 52px); align-items: start; }
.sck-split--rev .sck-split__text { order: 2; }
.sck-split--rev .sck-split__media { order: 1; }
.sck-split--mid { align-items: center; }
.sck-split__media { margin: 0; }
.sck-split__media img { width: 100%; height: auto; border-radius: var(--sck-r); box-shadow: var(--sck-bong-2); }
.sck-split__media figcaption { margin-top: 9px; font-size: 12.5px; color: var(--sck-mo-2); font-style: italic; }

@media (max-width: 860px) {
	.sck-split { grid-template-columns: 1fr; }
	.sck-split--rev .sck-split__text,
	.sck-split--rev .sck-split__media { order: 0; }
}

/* --- Ảnh nhỏ xếp hàng --- */
.sck-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 26px; }
.sck-thumbs--4 { grid-template-columns: repeat(4, 1fr); }
.sck-thumbs img { width: 100%; height: 100%; aspect-ratio: 3/2; object-fit: cover; border-radius: var(--sck-r-sm); box-shadow: var(--sck-bong); }
@media (max-width: 700px) { .sck-thumbs, .sck-thumbs--4 { grid-template-columns: repeat(2, 1fr); } }

.sck-cap { margin-top: 12px; font-size: 12.5px; color: var(--sck-mo-2); font-style: italic; text-align: center; }
.sck-note { padding: 16px 18px; background: var(--sck-nen-nhe); border-left: 4px solid var(--sck-vang); border-radius: 0 var(--sck-r-sm) var(--sck-r-sm) 0; }

/* --- Thẻ dịch vụ --- */
.sck-cards { display: grid; gap: clamp(16px, 2.2vw, 26px); }
.sck-cards--4 { grid-template-columns: repeat(4, 1fr); }
.sck-cards--3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 1000px) { .sck-cards--4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 760px)  { .sck-cards--4, .sck-cards--3 { grid-template-columns: 1fr; } }

.sck-card {
	background: var(--sck-nen); border: 1px solid var(--sck-vien);
	border-radius: var(--sck-r); overflow: hidden;
	display: flex; flex-direction: column;
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.sck-card:hover { transform: translateY(-4px); box-shadow: var(--sck-bong-2); border-color: transparent; }
.sck-card__media { aspect-ratio: 3/2; overflow: hidden; background: var(--sck-nen-nhe); }
.sck-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .35s ease; }
.sck-card:hover .sck-card__media img { transform: scale(1.04); }
.sck-card__body { padding: 20px 20px 24px; }
.entry-content .sck-card__body h3, .sck-card__body h3 { margin: 0 0 9px; font-size: 18px; line-height: 1.35; font-weight: 800; }
.entry-content .sck-card__body h3 a,
.sck-card__body h3 a {
	color: var(--sck-navy) !important;
	text-decoration: none !important;
	background: none !important; background-image: none !important;
	border-bottom: 0 !important; padding: 0 !important;
}
.sck-card__body h3 a:hover { color: var(--sck-navy-2); text-decoration: underline; }
.entry-content .sck-card__body p, .sck-card__body p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--sck-mo); }

/* --- Dải navy (khối nhấn) --- */
.sck-band {
	background:
		radial-gradient(900px 400px at 85% 0%, var(--sck-navy-3) 0%, transparent 60%),
		linear-gradient(145deg, var(--sck-navy) 0%, var(--sck-navy-2) 100%);
	color: #fff;
	border-radius: var(--sck-r-lg);
	padding: var(--sck-khoang) clamp(20px, 4vw, 52px);
	margin-block: 10px;
	box-shadow: var(--sck-bong-3);
}
.sck-band a { color: var(--sck-vang) !important; }

/* --- Ô đặc điểm --- */
.sck-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 1000px) { .sck-feats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .sck-feats { grid-template-columns: 1fr; } }

.sck-feat {
	background: rgba(255,255,255,.06);
	border: 1px solid rgba(255,255,255,.12);
	border-radius: var(--sck-r); padding: 24px 20px;
	transition: background .2s ease, transform .2s ease;
}
.sck-feat:hover { background: rgba(255,255,255,.1); transform: translateY(-3px); }
.sck-feat__ic {
	display: grid; place-items: center; width: 46px; height: 46px;
	border-radius: 13px; background: var(--sck-vang); margin-bottom: 15px;
}
.sck-feat__ic svg { width: 24px; height: 24px; fill: var(--sck-navy); }
.entry-content .sck-feat h3, .sck-feat h3 { margin: 0 0 9px; font-size: 17.5px; font-weight: 800; color: #fff; }
.entry-content .sck-feat p, .sck-feat p { margin: 0; font-size: 14.5px; line-height: 1.7; color: rgba(255,255,255,.75); }

/* --- Bảng giá --- */
.sck-table-wrap { overflow-x: auto; border-radius: var(--sck-r); box-shadow: var(--sck-bong-2); }
/* display:table PHẢI ép lại: phần E có .entry-content table { display:block }
   (để bảng cũ kéo ngang được trên điện thoại). Luật đó độ ưu tiên (0,1,1) thắng
   .sck-table (0,1,0) nên bảng mới co lại chỉ còn ~2/3 chiều rộng. */
.entry-content table.sck-table,
.sck-table {
	display: table !important; width: 100%; border-collapse: collapse;
	background: #fff; font-size: 15.5px;
}
.entry-content table.sck-table td,
.entry-content table.sck-table th { border: 0; }
.sck-table thead th {
	background: var(--sck-navy); color: #fff; text-align: left;
	padding: 16px 18px; font-weight: 700; font-size: 15px; letter-spacing: .2px;
}
.sck-table td { padding: 15px 18px; border-bottom: 1px solid var(--sck-vien); vertical-align: top; }
.sck-table tbody tr:nth-child(even) { background: var(--sck-nen-nhe); }
.sck-table tbody tr:last-child td { border-bottom: 0; }
.sck-table tbody tr:hover { background: #eef3fb; }
.sck-price { font-weight: 800; color: var(--sck-navy); white-space: nowrap; }

/* Điện thoại: bảng 3 cột không vừa màn hình. Chuyển mỗi dòng thành một thẻ,
   nhãn cột lấy từ thuộc tính data-th. Dễ đọc hơn hẳn việc kéo ngang. */
@media (max-width: 680px) {
	.sck-table thead { display: none; }
	.entry-content table.sck-table,
	.sck-table, .sck-table tbody, .sck-table tr, .sck-table td { display: block !important; width: 100%; }
	.sck-table tr { border: 1px solid var(--sck-vien); border-radius: var(--sck-r-sm); margin-bottom: 12px; padding: 6px 0; }
	.sck-table td { border: 0; padding: 9px 16px; }
	.sck-table td::before {
		content: attr(data-th); display: block;
		font-size: 11.5px; font-weight: 700; text-transform: uppercase;
		letter-spacing: .5px; color: var(--sck-mo-2); margin-bottom: 3px;
	}
}

.sck-figure { margin: 28px 0 0; }
.sck-figure img { width: 100%; height: auto; border-radius: var(--sck-r); box-shadow: var(--sck-bong-2); }
.sck-figure--plain img { box-shadow: none; background: #fff; padding: 18px; border: 1px solid var(--sck-vien); }
.sck-figure figcaption { margin-top: 10px; font-size: 12.5px; color: var(--sck-mo-2); font-style: italic; text-align: center; }

/* --- Quy trình 4 bước --- */
.sck-steps { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 24px); counter-reset: none; }
@media (max-width: 1000px) { .sck-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px)  { .sck-steps { grid-template-columns: 1fr; } }

.sck-step { background: #fff; border: 1px solid var(--sck-vien); border-radius: var(--sck-r); padding: 24px 20px; position: relative; }
.sck-step__n {
	display: grid; place-items: center; width: 42px; height: 42px;
	border-radius: 50%; background: var(--sck-navy); color: var(--sck-vang);
	font-weight: 800; font-size: 19px; margin-bottom: 14px;
}
.entry-content .sck-step h3, .sck-step h3 { margin: 0 0 8px; font-size: 17px; font-weight: 800; color: var(--sck-navy); }
.entry-content .sck-step p, .sck-step p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--sck-mo); }

.sck-callout {
	margin-top: 28px; padding: 20px 22px;
	background: #fff; border: 1px solid var(--sck-vien);
	border-left: 5px solid var(--sck-vang);
	border-radius: 0 var(--sck-r-sm) var(--sck-r-sm) 0;
	font-size: 15px; line-height: 1.75; color: var(--sck-mo);
}
.sck-callout strong { color: var(--sck-navy); }

/* --- Khu vực phục vụ --- */
.sck-areas { list-style: none; padding: 0; margin: 18px 0 0; display: flex; flex-wrap: wrap; gap: 9px; }
.sck-areas a {
	display: inline-block; padding: 9px 17px; border-radius: 999px;
	background: #fff; border: 1px solid var(--sck-vien);
	color: var(--sck-navy) !important; font-size: 14.5px; font-weight: 600;
	text-decoration: none !important; background-image: none !important;
	transition: all .18s ease;
}
.sck-areas a:hover { background: var(--sck-navy) !important; color: #fff !important; border-color: var(--sck-navy); transform: translateY(-2px); }

/* --- Ca thực tế --- */
.sck-case { background: #fff; border: 1px solid var(--sck-vien); border-radius: var(--sck-r); padding: 24px 22px; transition: transform .2s ease, box-shadow .2s ease; }
.sck-case:hover { transform: translateY(-4px); box-shadow: var(--sck-bong-2); }
.sck-case__tag {
	display: inline-block; margin-bottom: 12px; padding: 5px 13px;
	border-radius: 999px; background: rgba(0,31,84,.07);
	color: var(--sck-navy); font-size: 12.5px; font-weight: 800; letter-spacing: .3px;
}
.entry-content .sck-case h3, .sck-case h3 { margin: 0 0 10px; font-size: 17.5px; font-weight: 800; color: var(--sck-navy); }
.entry-content .sck-case p, .sck-case p { margin: 0; font-size: 14.5px; line-height: 1.72; color: var(--sck-mo); }

/* --- Danh sách cam kết --- */
.sck-checks { list-style: none; padding: 0; margin: 0 0 26px; }
.sck-checks li { position: relative; padding: 11px 0 11px 36px; font-size: 16px; line-height: 1.65; color: rgba(255,255,255,.86); border-bottom: 1px solid rgba(255,255,255,.1); }
.sck-checks li:last-child { border-bottom: 0; }
.sck-checks li strong { color: #fff; }
.sck-checks li::before {
	content: "✓"; position: absolute; left: 0; top: 11px;
	width: 24px; height: 24px; border-radius: 50%;
	background: var(--sck-vang); color: var(--sck-navy);
	display: grid; place-items: center; font-size: 14px; font-weight: 800;
}

/* --- FAQ dạng gập --- */
.sck-faq { border: 1px solid var(--sck-vien); border-radius: var(--sck-r); overflow: hidden; background: #fff; }
.sck-faq details { border-bottom: 1px solid var(--sck-vien); }
.sck-faq details:last-child { border-bottom: 0; }
.sck-faq summary {
	list-style: none; cursor: pointer; padding: 19px 54px 19px 22px;
	position: relative; transition: background .18s ease;
}
.sck-faq summary::-webkit-details-marker { display: none; }
.sck-faq summary:hover { background: var(--sck-nen-nhe); }
.entry-content .sck-faq summary h3, .sck-faq summary h3 { margin: 0; font-size: 16.5px; font-weight: 700; color: var(--sck-navy); display: inline; line-height: 1.5; }
.sck-faq summary::after {
	content: ""; position: absolute; right: 22px; top: 50%;
	width: 11px; height: 11px; margin-top: -6px;
	border-right: 2.5px solid var(--sck-navy); border-bottom: 2.5px solid var(--sck-navy);
	transform: rotate(45deg); transition: transform .22s ease;
}
.sck-faq details[open] summary { background: var(--sck-nen-nhe); }
.sck-faq details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; }
.sck-faq details p { margin: 0; padding: 2px 22px 22px; font-size: 15.5px; line-height: 1.78; color: var(--sck-mo); }

/* --- Liên hệ --- */
.sck-contact {
	background: linear-gradient(145deg, var(--sck-navy) 0%, var(--sck-navy-2) 100%);
	color: #fff; border-radius: var(--sck-r-lg);
	padding: clamp(28px, 4vw, 44px); box-shadow: var(--sck-bong-3);
}
.sck-contact__list { margin: 0 0 26px; display: grid; grid-template-columns: auto 1fr; gap: 10px 22px; align-items: baseline; }
.sck-contact__list dt { font-size: 13.5px; font-weight: 700; color: var(--sck-vang); letter-spacing: .3px; }
.sck-contact__list dd { margin: 0; font-size: 16.5px; color: rgba(255,255,255,.92); }
.sck-contact__list dd a { color: #fff !important; text-decoration: none; border-bottom: 1.5px solid rgba(246,195,68,.5); word-break: break-all; }
.sck-contact__list dd a:hover { border-bottom-color: var(--sck-vang); }

/* --- Cụm liên kết silo --- */
.sck-silo { background: #fff; border: 1px solid var(--sck-vien); border-radius: var(--sck-r); padding: 22px 20px; }
.entry-content .sck-silo h3, .sck-silo h3 { margin: 0 0 14px; font-size: 16px; font-weight: 800; color: var(--sck-navy); padding-bottom: 11px; border-bottom: 2px solid var(--sck-vang); }
.sck-silo ul { list-style: none; padding: 0; margin: 0; }
.sck-silo li { margin-bottom: 9px; }
.sck-silo li:last-child { margin-bottom: 0; }
.sck-silo a {
	color: var(--sck-muc) !important; font-size: 14.5px; line-height: 1.5;
	text-decoration: none !important; background-image: none !important;
	display: block; padding-left: 15px; position: relative; transition: color .16s ease, padding .16s ease;
}
.sck-silo a::before { content: "›"; position: absolute; left: 0; color: var(--sck-vang); font-weight: 800; font-size: 17px; line-height: 1.3; }
.sck-silo a:hover { color: var(--sck-navy) !important; padding-left: 19px; background: none !important; }

/* ============ E. LỚP VÁ CHO 94 TRANG CHƯA VIẾT LẠI ======================= */
/* Các trang này vẫn là HTML viết tay, style nội tuyến. Nhắm qua chính style đó
   nên sửa được toàn bộ mà không phải động vào nội dung. XOÁ PHẦN NÀY LÀ 94
   TRANG XẤU NGAY — chỉ bỏ khi đã viết lại hết bằng hệ thống phần D.          */

/* 23/10/2026: BỎ giới hạn 68ch. Nó ép đoạn văn vào nửa trái màn hình
   trong khi tiêu đề vẫn chạy hết chiều ngang, để trống hẳn một cột bên phải.
   Xem ảnh chụp truocbai.png. Chủ web yêu cầu bài viết chạy full. */
.entry-content > p, .entry-content > ul, .entry-content > ol { max-width: none; }

.entry-content h2 { font-size: clamp(22px, 3.2vw, 30px); line-height: 1.3; font-weight: 800; color: var(--sck-navy); margin-top: 2.2em; margin-bottom: .6em; letter-spacing: -.2px; }
.entry-content h3 { font-size: clamp(19px, 2.4vw, 23px); line-height: 1.35; font-weight: 700; color: var(--sck-navy); margin-top: 1.8em; margin-bottom: .5em; }

/* Khối hero navy của các trang chưa viết lại */
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]),
.entry-content section[style*="#001f54"]:not([style*="#F6C344"]) {
	border-radius: var(--sck-r-lg);
	background: linear-gradient(152deg, var(--sck-navy) 0%, var(--sck-navy-2) 100%) !important;
	padding: clamp(32px, 5vw, 56px) clamp(20px, 4vw, 48px) !important;
	box-shadow: var(--sck-bong-3);
	overflow: hidden;
}
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) h1 {
	/* Hạ từ clamp(26,4.6vw,40). H1 các trang dịch vụ thường là câu RẤT dài
	   ("SỬA KÉT SẮT ĐIỆN TỬ TẠI TPHCM – XỬ LÝ ĐÚNG LỖI, NÓI THẲNG KHÔNG VÒNG
	   VO") nên ở 40px nó chiếm 3 dòng, trông nặng nề và đè mất phần nội dung. */
	font-size: clamp(21px, 2.9vw, 31px) !important; line-height: 1.26 !important;
	letter-spacing: -.3px !important; margin-bottom: 14px !important; text-wrap: balance;
	max-width: 880px; margin-inline: auto;
}
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) p,
.entry-content section[style*="#001f54"]:not([style*="#F6C344"]) p {
	font-size: clamp(15.5px, 1.9vw, 17.5px) !important; line-height: 1.75 !important;
	max-width: 700px; margin-left: auto !important; margin-right: auto !important;
	text-align: left !important;
}
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) figcaption,
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) p[style*="font-size:13px"],
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) p[style*="font-size: 13px"] {
	text-align: center !important; font-size: 12.5px !important;
	color: rgba(255,255,255,.55) !important; font-style: italic;
}
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) img { max-height: 420px; width: auto; max-width: 100%; object-fit: cover; margin-inline: auto; display: block; box-shadow: 0 10px 30px rgba(0,0,0,.3); }
@media (max-width: 768px) { .entry-content section[style*="#001F54"]:not([style*="#F6C344"]) img { max-height: 260px; } }

/* Link tel: trong khối navy -> thành nút. Trước đó chỉ là chữ gạch chân. */
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) a[href^="tel:"],
.entry-content section[style*="#001f54"]:not([style*="#F6C344"]) a[href^="tel:"] {
	display: inline-flex !important; align-items: center; gap: 10px; margin-top: 10px;
	padding: 16px 34px !important; background: var(--sck-vang) !important;
	color: var(--sck-navy) !important; border-radius: 999px !important;
	font-size: clamp(17px, 2.2vw, 20px) !important; font-weight: 800 !important;
	text-decoration: none !important; box-shadow: 0 8px 22px rgba(246,195,68,.3);
	transition: transform .18s ease, box-shadow .18s ease, background .18s ease;
}
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) a[href^="tel:"]:hover { background: var(--sck-vang-2) !important; transform: translateY(-2px); }

/* Thẻ .svc-card có sẵn trong nội dung vài trang */
.entry-content .svc-card { border: 1px solid var(--sck-vien); border-radius: var(--sck-r) !important; box-shadow: none !important; transition: transform .2s ease, box-shadow .2s ease; }
.entry-content .svc-card:hover { transform: translateY(-4px); box-shadow: var(--sck-bong-2) !important; }
.entry-content .svc-card h3 a { background: none !important; text-decoration: none; }

.entry-content img { border-radius: var(--sck-r-sm); height: auto; }

.entry-content table { display: block; overflow-x: auto; max-width: 100%; border-collapse: collapse; }
.entry-content table td, .entry-content table th { border: 1px solid var(--sck-vien); padding: 10px 12px; }

.entry-content a.cta-btn, .entry-content a.button {
	display: inline-flex; align-items: center; gap: 8px;
	padding: 15px 32px !important; border-radius: 999px !important; font-size: 17px;
	box-shadow: 0 6px 18px rgba(246,195,68,.3); transition: transform .18s ease, box-shadow .18s ease;
}
.entry-content a.cta-btn:hover, .entry-content a.button:hover { transform: translateY(-2px); box-shadow: 0 10px 26px rgba(246,195,68,.42); }

@media (max-width: 768px) {
	.entry-content a[href^="tel:"], .entry-content a.cta-btn, .entry-content a.button { min-height: 48px; }
}

/* Tôn trọng người tắt hiệu ứng chuyển động trong cài đặt hệ thống */
@media (prefers-reduced-motion: reduce) {
	* { transition: none !important; animation: none !important; }
}

/* =============================================================================
   F. THÀNH PHẦN THEO NGÔN NGỮ THIẾT KẾ CỦA thokhoahcm.vn
   -----------------------------------------------------------------------------
   Chủ máy chỉ trang thokhoahcm.vn (cũng của anh) làm mẫu. Ngôn ngữ thiết kế ở
   đó rõ hơn hẳn bản đầu tôi làm, khác biệt nằm ở mấy điểm:
     · thanh thông báo navy mảnh trên cùng, nhồi 4 thông tin chốt
     · hero CHIA 2 CỘT: chữ trái, ảnh thợ bên phải trong khung vàng có dải chú thích
     · dải số liệu lớn (10+ / 22 / ~30 / 24-7) đè lên ranh giới hero
     · thẻ có VIỀN VÀNG TRÊN ĐẦU hoặc bên trái, không phải viền xám đều
     · nhãn vàng chữ hoa nhỏ đặt trên tiêu đề khối
     · ảnh thật xếp lưới, chú thích đè lên đáy ảnh
     · khoảng cách dọc dày dặn hơn, ít khoảng trắng thừa
   Vàng ở đây là ĐIỂM NHẤN SẮC chứ không chỉ dùng cho nút.
   ========================================================================== */

/* --- Thanh thông báo trên cùng --- */
.sck-topbar {
	background: var(--sck-navy);
	color: rgba(255,255,255,.88);
	font-size: 13px;
	border-bottom: 1px solid rgba(255,255,255,.1);
}
.sck-topbar__in {
	max-width: 1200px; margin-inline: auto; padding: 9px 20px;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: 6px 22px; text-align: center;
}
.sck-topbar__in span { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
.sck-topbar__in span + span::before {
	content: "·"; color: var(--sck-vang); margin-right: 7px; font-weight: 800;
}
.sck-topbar b { color: var(--sck-vang); font-weight: 700; }

@media (max-width: 860px) {
	.sck-topbar { font-size: 11.5px; }
	.sck-topbar__in { gap: 4px 14px; padding: 8px 14px; }
	.sck-topbar__in span + span::before { margin-right: 5px; }
}

/* --- Huy hiệu cho tên trang (thay vì chữ trơn) --- */
.site-branding .main-title::before {
	content: "";
	display: inline-block; vertical-align: -7px;
	width: 30px; height: 30px; margin-right: 10px;
	border-radius: 9px;
	background: var(--sck-navy) url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23F6C344'>\
<path d='M12 1 3 5v6c0 5.6 3.8 10.7 9 12 5.2-1.3 9-6.4 9-12V5l-9-4zm0 6a2.5 2.5 0 0 1 2.5 2.5V11h.5a1 1 0 0 1 1 1v4a1 1 0 0 1-1 1H9a1 1 0 0 1-1-1v-4a1 1 0 0 1 1-1h.5V9.5A2.5 2.5 0 0 1 12 7zm0 1.5a1 1 0 0 0-1 1V11h2V9.5a1 1 0 0 0-1-1z'/></svg>") center/18px no-repeat;
}

/* --- Nhãn vàng chữ hoa trên tiêu đề khối --- */
.sck-eyebrow {
	display: block; margin-bottom: 9px;
	color: var(--sck-vang-dam); font-size: 12.5px; font-weight: 800;
	letter-spacing: 1.6px; text-transform: uppercase;
}
.sck-head--light .sck-eyebrow { color: var(--sck-vang); }

/* --- HERO 2 CỘT --- */
.sck-hero--split .sck-hero__in { max-width: 1160px; text-align: left; }
.sck-hero__grid {
	display: grid; grid-template-columns: 1.08fr .92fr;
	gap: clamp(26px, 3.5vw, 52px); align-items: center;
}
@media (max-width: 900px) { .sck-hero__grid { grid-template-columns: 1fr; } }

.sck-hero--split .sck-hero__title { text-align: left; }
.sck-hero--split .sck-hero__lead { margin-left: 0; margin-right: 0; max-width: none; }
.sck-hero--split .sck-hero__actions { justify-content: flex-start; }
.sck-hero--split .sck-hero__chips { justify-content: flex-start; margin-bottom: 24px; }

/* Từ khoá nhấn trong tiêu đề — bản mẫu tô vàng một cụm từ cho tiêu đề bớt phẳng */
.sck-hl { color: var(--sck-vang); }

/* --- Khung ảnh viền vàng có dải chú thích --- */
.sck-frame { margin: 0; position: relative; }
.sck-frame img {
	width: 100%; height: auto; display: block;
	border-radius: var(--sck-r);
	border: 3px solid var(--sck-vang);
	box-shadow: 0 18px 44px rgba(0,0,0,.42);
}
.sck-frame figcaption {
	position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%);
	background: var(--sck-vang); color: var(--sck-navy);
	padding: 7px 18px; border-radius: 999px;
	font-size: 12.5px; font-weight: 700; white-space: nowrap;
	box-shadow: 0 6px 16px rgba(0,0,0,.26);
	max-width: 94%; overflow: hidden; text-overflow: ellipsis;
}

/* --- Dải số liệu --- */
.sck-stats {
	background: #fff; border-radius: var(--sck-r);
	box-shadow: var(--sck-bong-2); border: 1px solid var(--sck-vien);
	display: grid; grid-template-columns: repeat(4, 1fr);
	margin: -34px auto 0; position: relative; z-index: 3;
	max-width: 1060px; overflow: hidden;
}
.sck-stat { padding: 22px 18px; text-align: center; border-right: 1px solid var(--sck-vien); }
.sck-stat:last-child { border-right: 0; }
.sck-stat b {
	display: block; font-size: clamp(26px, 3.4vw, 38px); font-weight: 800;
	color: var(--sck-navy); line-height: 1.05; letter-spacing: -1px;
}
.sck-stat b sup { color: var(--sck-vang-dam); font-size: .5em; top: -.6em; }
.sck-stat span { display: block; margin-top: 5px; font-size: 13px; color: var(--sck-mo); line-height: 1.35; }

@media (max-width: 760px) {
	.sck-stats { grid-template-columns: repeat(2, 1fr); margin-top: -22px; }
	.sck-stat:nth-child(2) { border-right: 0; }
	.sck-stat:nth-child(-n+2) { border-bottom: 1px solid var(--sck-vien); }
	.sck-stat { padding: 16px 12px; }
}

/* --- Thẻ có viền vàng trên đầu + ô biểu tượng --- */
.sck-card { border-top: 3px solid var(--sck-vang); }
.sck-card__ic {
	display: grid; place-items: center; width: 44px; height: 44px;
	border-radius: 12px; background: rgba(246,195,68,.18); margin-bottom: 13px;
}
.sck-card__ic svg { width: 22px; height: 22px; fill: var(--sck-navy); }

/* Thẻ liên kết kiểu bản mẫu: viền vàng BÊN TRÁI, chữ gọn */
.sck-linkcard {
	background: #fff; border: 1px solid var(--sck-vien);
	border-left: 4px solid var(--sck-vang);
	border-radius: var(--sck-r-sm); padding: 17px 19px;
	font-size: 14.5px; line-height: 1.65; color: var(--sck-mo);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sck-linkcard:hover { transform: translateY(-3px); box-shadow: var(--sck-bong-2); }
.entry-content .sck-linkcard a,
.sck-linkcard a {
	color: var(--sck-navy) !important; font-weight: 800;
	text-decoration: none !important; background-image: none !important;
	border-bottom: 0 !important; padding: 0 !important;
}
.entry-content .sck-linkcard a:hover { text-decoration: underline !important; }

/* --- Lưới ảnh thật có dải chú thích đè lên --- */
.sck-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .sck-photos { grid-template-columns: repeat(2, 1fr); gap: 10px; } }

.sck-photo { position: relative; margin: 0; border-radius: var(--sck-r-sm); overflow: hidden; box-shadow: var(--sck-bong); }
.sck-photo img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.sck-photo figcaption {
	position: absolute; inset: auto 0 0 0;
	background: linear-gradient(transparent, rgba(0,31,84,.92) 42%);
	color: #fff; padding: 22px 12px 10px;
	font-size: 12.5px; font-weight: 600; line-height: 1.35;
}
.sck-photo figcaption::before {
	content: ""; display: inline-block; width: 13px; height: 2px;
	background: var(--sck-vang); vertical-align: 4px; margin-right: 7px;
}

/* --- Dải navy: ô con nhạt hơn như bản mẫu --- */
.sck-band .sck-linkcard {
	background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.14);
	border-left-color: var(--sck-vang); color: rgba(255,255,255,.78);
}
.entry-content .sck-band .sck-linkcard a { color: #fff !important; }

/* Thanh trên cùng: trên điện thoại 4 mục xuống thành 3 dòng, chiếm quá nhiều
   chiều cao ngay phần quý giá nhất của màn hình. Giữ 2 mục quan trọng nhất
   (tới nhanh + làm 24/7); hai mục còn lại vẫn có trong thẻ ở hero. */
@media (max-width: 680px) {
	.sck-topbar__in span:nth-child(n+3) { display: none; }
	.sck-topbar__in { padding: 7px 14px; }
}

/* Mục "Xem tất cả" ở cuối menu con — cần vì menu con bị cắt ở 10 mục */
.qm-nav__all { margin-top: 5px; padding-top: 7px; border-top: 1px solid var(--sck-vien); }
.qm-nav__all a { font-weight: 800; color: var(--sck-navy) !important; font-size: 13.5px !important; }


/* =============================================================================
   TIÊU ĐỀ TRONG KHỐI NỀN TỐI
   -----------------------------------------------------------------------------
   Phần "lớp vá" đặt .entry-content h2/h3 { color: navy } cho 94 trang chưa viết
   lại. Nhưng vài trang có section nền navy chứa h2/h3 — ở đó màu navy làm chữ
   biến mất. Buộc kế thừa màu của khối cha (các khối đó đặt color:#fff).
   ========================================================================== */
.entry-content section[style*="#001F54"]:not([style*="#F6C344"]) :is(h1, h2, h3, h4),
.entry-content section[style*="#001f54"]:not([style*="#F6C344"]) :is(h1, h2, h3, h4),
.entry-content section[style*="background:#001F54"] :is(h1, h2, h3, h4),
.sck-hero :is(h1, h2, h3),
.sck-band :is(h2, h3),
.sck-contact :is(h2, h3),
.qm-footer :is(h2, h3) {
	color: inherit;
}

/* Nền sáng: đặt màu rõ ràng ở đúng nơi cần */
.qm-page__head h1,
.qm-page__head h2 { color: var(--sck-navy); }

/* =============================================================================
   MÀN HÌNH HẸP: header phải vừa một hàng
   -----------------------------------------------------------------------------
   Ở 390px, ba thứ (thương hiệu + nút gọi + hamburger) cộng lại rộng hơn màn
   hình nên hamburger bị đẩy tràn ra ngoài mép phải — khách không bấm được menu.
   ========================================================================== */
@media (max-width: 560px) {
	.qm-header__in { padding: 10px 14px; gap: 8px; }
	.qm-brand__link { gap: 8px; }
	.qm-brand__badge { flex-basis: 32px; width: 32px; height: 32px; border-radius: 9px; }
	.qm-brand__badge svg { width: 18px; height: 18px; }
	.qm-brand__text strong { font-size: 14px; line-height: 1.15; }

	/* Nút gọi rút còn biểu tượng + số, bỏ dòng "Gọi thợ 24/7" */
	.qm-callbtn { padding: 7px 12px 7px 7px; gap: 7px; }
	.qm-callbtn__ic { flex-basis: 26px; width: 26px; height: 26px; }
	.qm-callbtn__text strong { font-size: 13.5px; }
	.qm-burger { width: 40px; height: 40px; flex: 0 0 40px; }
}

/* Rất hẹp: tên trang xuống còn 2 dòng thay vì đẩy nút ra ngoài */
@media (max-width: 400px) {
	.qm-brand__text strong { font-size: 13px; max-width: 108px; }
	.qm-callbtn__text strong { font-size: 12.5px; }
}

/* =============================================================================
   BANNER TRANG CHỦ
   -----------------------------------------------------------------------------
   Vẽ hoàn toàn bằng CSS + SVG, KHÔNG dùng ảnh. Lý do: banner ảnh ở cỡ này
   thường 150–400KB, lại mờ trên màn hình retina và phải làm lại mỗi lần đổi chữ.
   Bản vẽ thì ~2KB, sắc nét ở mọi độ phân giải, sửa chữ chỉ là sửa HTML.
   ========================================================================== */
.sck-banner {
	position: relative; overflow: hidden;
	border-radius: var(--sck-r-lg);
	background: linear-gradient(118deg, #001538 0%, var(--sck-navy) 44%, #0b3a86 100%);
	padding: clamp(26px, 3.6vw, 44px) clamp(20px, 3.4vw, 46px);
	margin-bottom: 18px;
	box-shadow: var(--sck-bong-3);
	display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px;
}

/* Mảng vàng chéo góc phải — lấy ý từ banner của thokhoahcm.vn */
.sck-banner::after {
	content: ""; position: absolute; top: 0; right: 0; bottom: 0;
	width: 34%; background: var(--sck-vang);
	clip-path: polygon(26% 0, 100% 0, 100% 100%, 0 100%);
	opacity: .96;
}
.sck-banner__in { position: relative; z-index: 2; }

.sck-banner__kicker {
	color: var(--sck-vang); font-size: clamp(11px, 1.2vw, 13px); font-weight: 800;
	letter-spacing: 3px; text-transform: uppercase; margin: 0 0 8px;
}
.sck-banner__name {
	display: flex; align-items: center; flex-wrap: wrap; gap: 12px; margin: 0 0 10px;
	font-size: clamp(30px, 5.4vw, 60px); font-weight: 800; color: #fff;
	letter-spacing: -1.5px; line-height: 1;
}
.sck-banner__name em {
	font-style: normal; background: var(--sck-vang); color: var(--sck-navy);
	padding: 4px 14px; border-radius: 10px; font-size: .62em; letter-spacing: -.5px;
}
.sck-banner__sub {
	margin: 0 0 14px; color: rgba(255,255,255,.9);
	font-size: clamp(13.5px, 1.7vw, 18px); font-weight: 600;
}
.sck-banner__sub b { color: var(--sck-vang); }
.sck-banner__tags { display: flex; flex-wrap: wrap; gap: 9px; }
.sck-banner__tags span {
	border: 1.5px solid rgba(255,255,255,.34); border-radius: 7px;
	padding: 6px 13px; font-size: clamp(10.5px, 1.1vw, 12.5px);
	font-weight: 700; color: rgba(255,255,255,.92); letter-spacing: .6px;
	text-transform: uppercase;
}

.sck-banner__art { position: relative; z-index: 2; }
.sck-banner__art svg {
	width: clamp(88px, 13vw, 168px); height: auto; display: block;
	fill: var(--sck-navy);
}

@media (max-width: 780px) {
	.sck-banner { grid-template-columns: 1fr; gap: 14px; }
	.sck-banner::after { width: 100%; height: 42%; top: auto; clip-path: polygon(0 58%, 100% 22%, 100% 100%, 0 100%); opacity: .14; }
	.sck-banner__art { justify-self: end; margin-top: -8px; }
	.sck-banner__art svg { fill: var(--sck-vang); opacity: .85; }
}

/* =============================================================================
   LƯỚI LIÊN KẾT GỌN (lỗi thường gặp · hãng két)
   -----------------------------------------------------------------------------
   Vừa cho khách bấm thẳng vào đúng triệu chứng của mình, vừa dẫn sức mạnh liên
   kết từ trang chủ xuống các trang con — hai việc một công.
   ========================================================================== */
.sck-grid-link { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
@media (max-width: 1000px) { .sck-grid-link { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 720px)  { .sck-grid-link { grid-template-columns: repeat(2, 1fr); } }

.entry-content .sck-tile,
.sck-tile {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 15px; border-radius: var(--sck-r-sm);
	background: #fff; border: 1px solid var(--sck-vien);
	border-left: 3px solid var(--sck-vang);
	color: var(--sck-muc) !important; font-size: 14.5px; font-weight: 600;
	line-height: 1.35; text-decoration: none !important;
	background-image: none !important; border-bottom-width: 1px !important;
	transition: transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.entry-content .sck-tile:hover {
	transform: translateY(-3px); box-shadow: var(--sck-bong-2);
	border-left-color: var(--sck-navy); color: var(--sck-navy) !important;
}
.sck-tile::before {
	content: ""; flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%;
	background: var(--sck-vang);
}

/* ============ F. BỐ CỤC FULL CHO 94 TRANG CHƯA VIẾT LẠI ================== */
/* Ngày 23/10/2026 chủ web yêu cầu bố cục trang và bài viết chạy full.
   Nội dung cũ tự khóa chiều rộng bằng style nội tuyến ở hàng trăm chỗ
   (980px, 1100px, 900px…), nên nới --qm-rong thôi là chưa đủ: khối trong bài
   vẫn co lại giữa trang.

   CHỈ mở khóa thẻ BỐ CỤC. Không đụng <img> và <span>:
     - 78 thẻ <img> mang max-width: 800px — bỏ ra là ảnh phình to vỡ bố cục.
     - 26 thẻ <span> mang max-width: 430px — đó là các nhãn tròn trong hero.
   Một thẻ bố cục duy nhất dùng 360px là cột hẹp cố ý, nên chừa lại.          */

.entry-content :is(div, section, main, nav, p)[style*="max-width"]:not(
	[style*="max-width:360px"]):not([style*="max-width: 360px"]) {
	max-width: none !important;
}

/* Khối có nền (hero navy, hộp nhấn) sau khi nới cần thở hai bên, nếu không
   chữ chạy sát mép khung trên màn hình rộng. */
.entry-content > section[style*="max-width"],
.entry-content > div[style*="max-width"] { margin-inline: 0 !important; }

/* ===== G. KHỐI CTA CUỐI BÀI — nền VÀNG, chữ navy ======================== */
/* 93/95 trang kết bài bằng <section style="background:#F6C344;color:#001F54">.
   Phần E nhắm khối hero bằng section[style*="#001F54"] — viết lỏng, nên khớp
   luôn vào chuỗi color:#001F54 của khối vàng: nó bị sơn đè nền navy, đồng thời
   luật "tiêu đề kế thừa màu khối cha" bắt tiêu đề lấy chính màu navy đó.
   Thành CHỮ NAVY TRÊN NỀN NAVY trên 93 trang.

   Cách sửa: thêm :not([style*="#F6C344"]) vào các bộ chọn của phần E. Đã kiểm
   95 khối nền navy, KHÔNG khối nào mang mã vàng trong style, nên loại trừ này
   không cắt nhầm cái nào. (Lần đầu tôi định viết lại cả danh sách bộ chọn —
   hỏng, vì có luật chứa :is(h1, h2, h3, h4) và regex cắt ngay dấu phẩy trong
   ngoặc, làm sập 25 luật phía sau.)

   Khối vàng nay trở về đúng màu, và lộ ra là nó chưa từng có kiểu riêng.     */

.entry-content section[style*="background:#F6C344"],
.entry-content section[style*="background:#f6c344"] {
	border-radius: var(--sck-r-lg);
	background: linear-gradient(152deg, var(--sck-vang) 0%, var(--sck-vang-2) 100%) !important;
	padding: clamp(32px, 5vw, 52px) clamp(20px, 4vw, 48px) !important;
	box-shadow: var(--sck-bong-2);
	overflow: hidden;
}
.entry-content section[style*="background:#F6C344"] :is(h1, h2, h3),
.entry-content section[style*="background:#f6c344"] :is(h1, h2, h3) {
	font-size: clamp(20px, 2.7vw, 28px) !important; line-height: 1.3 !important;
	color: var(--sck-navy) !important; letter-spacing: -.3px;
	margin: 0 auto 12px !important; max-width: 900px; text-wrap: balance;
}
.entry-content section[style*="background:#F6C344"] p,
.entry-content section[style*="background:#f6c344"] p {
	color: var(--sck-navy) !important; max-width: 760px;
	margin-left: auto !important; margin-right: auto !important;
}
.entry-content section[style*="background:#F6C344"] a[href^="tel:"],
.entry-content section[style*="background:#f6c344"] a[href^="tel:"] {
	background: var(--sck-navy) !important; color: #fff !important;
	box-shadow: 0 8px 22px rgba(0, 31, 84, .25);
	transition: transform .18s ease, box-shadow .18s ease;
}
.entry-content section[style*="background:#F6C344"] a[href^="tel:"]:hover,
.entry-content section[style*="background:#f6c344"] a[href^="tel:"]:hover {
	transform: translateY(-2px);
}

/* Cụm ảnh 2–4 ảnh trong bài (24/10/2026). Dùng:
   <div class="sck-gallery sck-gallery--3"><figure class="sck-figure">…</figure>…</div> */
.sck-gallery { display: grid; gap: 14px; margin: 28px 0 0; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sck-gallery--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.sck-gallery--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sck-gallery .sck-figure { margin: 0; display: flex; flex-direction: column; }
.sck-gallery .sck-figure img { aspect-ratio: 4 / 3; object-fit: cover; height: auto; }
.sck-gallery .sck-figure figcaption { font-size: 12px; margin-top: 8px; }
@media (max-width: 720px) {
  .sck-gallery--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .sck-gallery--3 .sck-figure:first-child { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
  .sck-gallery, .sck-gallery--3, .sck-gallery--4 { grid-template-columns: minmax(0, 1fr); }
  .sck-gallery--3 .sck-figure:first-child { grid-column: auto; }
}

/* Ảnh đơn dọc không chiếm cả màn hình (24/10/2026): giới hạn chiều cao, căn giữa.
   Cụm ảnh giữ khung 4:3 phủ kín ô. */
.sck-figure img { max-height: 560px; width: auto; max-width: 100%; margin-inline: auto; display: block; }
.sck-gallery .sck-figure img { width: 100%; max-height: none; }
@media (max-width: 720px) { .sck-figure img { max-height: 440px; } }

/* =============================================================================
   G. GIAO DIỆN 24/10/2026 (chủ site: "sửa theo ý bạn thấy đẹp nhất")
   ========================================================================== */

/* Cột chữ hẹp đặt giữa trong khối rộng */
.sck-mx { margin-left: auto; margin-right: auto; }
.sck-wrap--narrow.sck-mx { margin-top: clamp(22px, 3vw, 34px); }
.sck-nho { font-size: 13.5px; opacity: .78; }

/* Thẻ 2 cột, thẻ chỉ có chữ (Tự làm / Gọi thợ) */
.sck-cards--2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
@media (max-width: 760px) { .sck-cards--2 { grid-template-columns: 1fr; } }
.sck-card--chu .sck-card__body { padding: clamp(22px, 2.6vw, 30px); }
.sck-card--chu h3 { font-size: 19px; margin-bottom: 12px; }
.sck-card--chu p { font-size: 15.5px; line-height: 1.75; color: var(--sck-mo); }
.sck-card--canh { border-top-color: var(--sck-navy); }

/* Lưới ảnh 2 cột cạnh đoạn chữ, ảnh dọc */
.sck-photos--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.sck-photos--2 .sck-photo img { aspect-ratio: 3 / 4; }
@media (max-width: 760px) { .sck-photos--2 .sck-photo img { aspect-ratio: 4 / 3; } }

/* Ảnh dọc trong khối 2 cột không cao quá màn hình */
.sck-split__media img { max-height: 520px; object-fit: cover; }

/* Lưới hãng nằm dưới đoạn chữ */
.sck-grid-link--hang { margin-top: clamp(24px, 3vw, 34px); }

/* Bước quy trình trên nền navy: số tròn vàng nổi */
.sck-band .sck-steps { margin-top: 6px; }
.sck-band .sck-step { box-shadow: 0 14px 34px rgba(0,0,0,.22); border-color: transparent; }
.sck-band .sck-step h3 { color: var(--sck-navy); }
.sck-band .sck-step p { color: var(--sck-mo); }

/* Trang chủ: khoảng thở giữa hero và dải số, nhịp khối đều hơn */
.home .sck-hero--split { padding-bottom: clamp(56px, 7vw, 92px); }
.home .sck-frame { margin-bottom: 14px; }
.home .sck-sec { padding-block: clamp(44px, 5.5vw, 72px); }
.home .sck-head h2 { font-size: clamp(25px, 3.1vw, 35px); }
@media (max-width: 900px) { .home .sck-frame { max-width: 560px; margin-inline: auto; } }

/* Bảng trong bài: class sck-table nằm trên <figure> bọc ngoài, không phải trên
   <table>. Luật cũ ép display:table vào figure, còn <table> bên trong ăn
   ".entry-content table { display:block }" nên co lại ~60%. Trên điện thoại
   luật "mỗi dòng thành thẻ" cũng áp nhầm mà không có data-th → ô rời không nhãn.
   Sửa: figure là khung cuộn ngang, table luôn là bảng thật, giữ tiêu đề cột. */
.entry-content figure.sck-table {
	display: block !important; width: 100%; margin: 26px 0 0;
	overflow-x: auto; -webkit-overflow-scrolling: touch;
	border-radius: var(--sck-r); box-shadow: var(--sck-bong-2); background: #fff;
}
.entry-content figure.sck-table > table {
	display: table !important; width: 100%; min-width: 560px; border-collapse: collapse; margin: 0;
}
.entry-content figure.sck-table thead { display: table-header-group !important; }
.entry-content figure.sck-table tbody { display: table-row-group !important; }
.entry-content figure.sck-table tr { display: table-row !important; border: 0; margin: 0; padding: 0; }
.entry-content figure.sck-table :is(td, th) { display: table-cell !important; width: auto; border: 0; }
.entry-content figure.sck-table th { background: var(--sck-navy); color: #fff; text-align: left; padding: 14px 18px; font-size: 14px; font-weight: 700; }
.entry-content figure.sck-table td { padding: 14px 18px; border-bottom: 1px solid var(--sck-vien); font-size: 15px; vertical-align: top; }
.entry-content figure.sck-table td::before { content: none; }
.entry-content figure.sck-table td:first-child { font-weight: 600; color: var(--sck-navy); }
.entry-content figure.sck-table figcaption { padding: 12px 18px; font-size: 13px; color: var(--sck-mo-2); font-style: italic; background: var(--sck-nen-nhe); }
@media (max-width: 680px) {
	.entry-content figure.sck-table th, .entry-content figure.sck-table td { padding: 11px 13px; font-size: 14px; }
	.entry-content figure.sck-table figcaption { position: sticky; left: 0; }
}

/* Nút khu vực: ".entry-content .sck-areas a { padding:0 }" (0,2,1) đè padding nút */
.entry-content .sck-areas a { padding: 9px 17px !important; display: inline-block; }

/* Thẻ chữ Tự làm / Gọi thợ: đoạn văn có khoảng cách, cỡ chữ đọc được */
.entry-content .sck-card.sck-card--chu p { font-size: 15.5px; line-height: 1.75; margin: 0 0 12px; color: var(--sck-mo); }
.entry-content .sck-card.sck-card--chu p:last-child { margin-bottom: 0; }

/* Trang chủ: đoạn dưới bảng giá gọn trong cột giữa */
.home #gia .sck-wrap > p.sck-center { max-width: 760px; margin: 22px auto 0; }

/* =============================================================================
   H. TRANG CON DẠNG HỘP (24/10/2026, chủ site: "khung bài viết dạng box nhưng
   đừng bóp quá, không sai lệch hình và chữ")
   - Cả trang con rộng 1120px: breadcrumb, hero, hộp bài, khung CTA cùng mép.
   - Hộp trắng trên nền xám nhạt. Mọi thứ trong hộp (chữ, ảnh, bảng, cụm ảnh,
     mục lục, FAQ) chung MỘT bề rộng, nên mép trái phải luôn thẳng.
   ========================================================================== */
body.page { background: var(--sck-nen-nhe); }
.page .qm-page { max-width: 1120px; }
.page .entry-content > section { max-width: none; }
.page .entry-content > .sck-sec {
	background: #fff;
	border: 1px solid var(--sck-vien);
	border-radius: var(--sck-r-lg);
	box-shadow: 0 10px 34px rgba(0, 31, 84, .07);
	padding: clamp(22px, 4.2vw, 56px);
	margin-block: clamp(18px, 2.4vw, 28px);
}
.page .entry-content > .sck-band { margin-block: clamp(18px, 2.4vw, 28px); }
.page .entry-content > .sck-sec > .sck-wrap { max-width: none; }

/* Trong hộp: mọi khối chiếm trọn bề rộng hộp, không khối nào thò ra hay thụt vào */
.page .sck-sec > .sck-wrap > * { max-width: 100%; margin-left: 0; margin-right: 0; }
.page .sck-sec > .sck-wrap > :is(p, li, ul, ol) { font-size: 16.5px; line-height: 1.8; }
.page .sck-sec > .sck-wrap > h2 {
	margin-top: clamp(38px, 4vw, 54px); padding-top: clamp(22px, 2.4vw, 30px);
	border-top: 1px solid var(--sck-vien);
}
.page .sck-sec > .sck-wrap > h2:first-of-type { border-top: 0; padding-top: 0; }
.page .sck-sec > .sck-wrap > :first-child { margin-top: 0; }

/* Ảnh đơn: rộng bằng hộp, ảnh ngang hiện trọn; ảnh dọc không cao quá màn hình */
.page .sck-sec > .sck-wrap > :is(figure.wp-block-image, figure.sck-figure) { margin-block: 26px; }
.page .sck-sec > .sck-wrap > :is(figure.wp-block-image, figure.sck-figure) img {
	display: block; width: 100%; height: auto; max-height: 600px; object-fit: cover;
	border-radius: var(--sck-r); box-shadow: none; margin: 0;
}
.page .sck-sec > .sck-wrap > :is(figure.wp-block-image, figure.sck-figure) figcaption {
	margin-top: 10px; font-size: 13px; color: var(--sck-mo-2); font-style: italic; text-align: center;
}
/* Cụm ảnh trong hộp: bỏ bóng đổ (hộp đã có), giữ bo góc */
.page .sck-sec .sck-gallery { margin-block: 26px; }
.page .sck-sec .sck-gallery .sck-figure img { box-shadow: none; }
/* Bảng trong hộp: viền mảnh thay bóng đổ */
.page .sck-sec figure.sck-table { box-shadow: none; border: 1px solid var(--sck-vien); }
/* Mục lục: nền nhạt, 2 cột trên máy tính cho đỡ dài */
.page .sck-sec .sck-callout { background: var(--sck-nen-nhe); border-radius: var(--sck-r-sm); }
@media (min-width: 900px) {
	.page .sck-sec nav.sck-callout ul, .page .sck-sec nav.sck-callout ol { columns: 2; column-gap: 36px; }
	.page .sck-sec nav.sck-callout li { break-inside: avoid; }
}
/* Hero và CTA của trang con cùng mép với hộp */
.page .entry-content > .sck-band:first-child { margin-top: 0; }
.page .qm-crumbs { margin-bottom: 14px; }

@media (max-width: 680px) {
	.page .qm-page { padding-inline: 12px; }
	.page .entry-content > .sck-sec { padding: 20px 16px; border-radius: var(--sck-r); }
	.page .sck-sec > .sck-wrap > :is(p, li, ul, ol) { font-size: 16px; line-height: 1.75; }
	.page .sck-sec > .sck-wrap > :is(figure.wp-block-image, figure.sck-figure) img { max-height: 420px; }
}

/* Nút viền (ghost) vốn cho nền navy; nằm trên nền sáng (trong hộp bài, khung gợi ý)
   thì chữ trắng biến mất. Đổi sang viền navy. */
.entry-content .sck-sec a.sck-btn--ghost {
	color: var(--sck-navy) !important; background: transparent !important;
	border: 1.5px solid rgba(0, 31, 84, .35) !important;
}
.entry-content .sck-sec a.sck-btn--ghost:hover { background: var(--sck-navy) !important; color: #fff !important; }