/*
 * Thân trang dạng landing cân đối trái–phải — 4 trang giải pháp con + 6 trang nhóm sản phẩm (13/10/2026).
 * Markup: inc/sections.php → dlp_split_sections(). Nạp sau skin-xanh.css (chỉ ở 2 template trên), dùng biến :root của giao diện.
 * Mobile-first: điện thoại xếp ảnh trên, chữ dưới; ≥ 900px chia 5/12 ảnh + 7/12 chữ, xen kẽ trái/phải.
 */

:root {
	--lp-gap: clamp(44px, 3rem + 2.5vw, 88px);
	--lp-card-pad: clamp(20px, 1rem + 2.2vw, 44px);
	--lp-radius: 28px;
	--lp-surface: #fff;
	--lp-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 12.5 4 4 8-9'/%3E%3C/svg%3E");
}

.entry--lp { max-width: none; margin: 0; }
.lp { display: grid; gap: var(--lp-gap); }
.lp > * { min-width: 0; }

/* ---------- Tiêu đề, số thứ tự ---------- */
.entry--lp .lp-row h2,
.section .entry--lp .lp-row h2 {
	margin: 0 0 0.55em;
	font-size: clamp(1.4rem, 1.1rem + 1.1vw, 1.95rem);
	line-height: 1.25;
	letter-spacing: -0.02em;
	text-transform: none;
}
.lp-row__num {
	display: inline-flex; align-items: center; justify-content: center;
	min-width: 46px; height: 30px; margin-bottom: 14px; padding: 0 12px;
	border-radius: var(--radius-pill);
	background: var(--grad-brand, var(--c-primary)); color: #fff;
	font-size: 0.82rem; font-weight: 800; letter-spacing: 0.08em;
	box-shadow: 0 8px 18px rgba(0, 84, 166, 0.22);
}

/* ---------- Dải "Trên trang này" ---------- */
.lp-toc {
	padding: 16px 18px; border-radius: 22px; background: var(--lp-surface);
	box-shadow: var(--shadow-sm);
}
.lp-toc__label {
	margin: 0 0 10px; font-size: 0.74rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
	color: var(--c-royal, var(--c-primary)); text-align: left !important;
}
.lp-toc__list {
	display: flex; gap: 10px; margin: 0; padding: 2px 2px 8px; list-style: none;
	overflow-x: auto; scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch; scrollbar-width: thin;
}
.lp-toc__list li { flex: none; scroll-snap-align: start; margin: 0; }
.lp-toc__list a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 40px; padding: 6px 14px 6px 6px;
	border-radius: var(--radius-pill); background: var(--c-cream); color: var(--c-text);
	font-size: 0.9rem; font-weight: 600; line-height: 1.3; text-decoration: none; white-space: nowrap;
	transition: box-shadow 0.2s, color 0.2s;
}
.lp-toc__list a:hover, .lp-toc__list a:focus-visible { color: var(--c-royal, var(--c-primary)); box-shadow: var(--neu-in, inset 0 0 0 2px var(--c-border)); }
.lp-toc__text { overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 899px) {
	.lp-toc__list a { max-width: min(300px, 78vw); }
}
.lp-toc__num {
	flex: none; display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: #fff; color: var(--c-royal, var(--c-primary)); font-size: 0.72rem; font-weight: 800;
	box-shadow: var(--shadow-sm);
}

/* ---------- Khối mở đầu "Trả lời nhanh" ---------- */
.lp-lead {
	position: relative; display: grid; gap: 24px; align-items: center; overflow: hidden;
	padding: var(--lp-card-pad); border-radius: 32px;
	background: var(--grad-light, #fff); box-shadow: var(--shadow);
}
.lp-lead::before {
	content: ""; position: absolute; left: 0; top: 28px; bottom: 28px; width: 5px;
	border-radius: 0 6px 6px 0; background: var(--grad-brand, var(--c-primary));
}
.lp-lead::after {
	content: ""; position: absolute; right: -140px; top: -140px; width: 360px; height: 360px; border-radius: 50%;
	background: radial-gradient(circle, rgba(42, 171, 225, 0.16), transparent 70%); pointer-events: none;
}
.lp-lead > * { position: relative; z-index: 1; min-width: 0; }
.lp-lead__eyebrow {
	display: inline-flex; align-items: center; gap: 8px; margin-bottom: 12px; padding: 6px 14px;
	border-radius: var(--radius-pill); background: #fff; box-shadow: var(--shadow-sm);
	color: var(--c-royal, var(--c-primary)); font-size: 0.74rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase;
}
.lp-lead__eyebrow::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--grad-brand, var(--c-accent)); }
.lp-lead .lp-row__body > p:first-of-type { font-size: 1.06rem; color: var(--c-text); }
.lp-lead__icon {
	display: none; place-items: center; width: 168px; height: 168px; margin-inline: auto; border-radius: 44px;
	background: #fff; color: var(--c-royal, var(--c-primary)); box-shadow: var(--shadow);
}
.lp-lead__icon .icon { width: 84px; height: 84px; stroke-width: 1.4; }
.lp-lead--media .lp-media { order: -1; }

/* ---------- Hàng split ảnh + chữ ---------- */
.lp-row--split { display: grid; gap: 22px; align-items: center; }
.lp-row__body > :last-child { margin-bottom: 0; }
/* Mục đặt hàng: điện thoại đọc chữ trước, thẻ văn phòng sau. */
.lp-row--contact .lp-row__media { order: 2; }

.lp-media { margin: 0; padding: 8px; border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--shadow); }
.lp-media img, .entry .lp-media img {
	display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover;
	border-radius: calc(var(--lp-radius) - 8px);
}

/* Danh sách trong cột chữ: dấu tích tròn; danh sách số: số tròn. */
.entry--lp .lp-row__body ul, .entry--lp .lp-row__body ol { margin: 0 0 1.1em; padding: 0; list-style: none; }
.entry--lp .lp-row__body li { position: relative; margin: 0 0 0.7em; padding-left: 36px; }
.entry--lp .lp-row__body ul > li::before {
	content: ""; position: absolute; left: 0; top: 0.2em; width: 24px; height: 24px; border-radius: 50%;
	background: var(--lp-check) center / 15px no-repeat, var(--grad-brand, var(--c-primary));
	box-shadow: 0 4px 10px rgba(0, 84, 166, 0.2);
}
.entry--lp .lp-row__body ol { counter-reset: lp; }
.entry--lp .lp-row__body ol > li { counter-increment: lp; }
.entry--lp .lp-row__body ol > li::before {
	content: counter(lp); position: absolute; left: 0; top: 0.1em; display: grid; place-items: center;
	width: 26px; height: 26px; border-radius: 50%; background: #fff; color: var(--c-royal, var(--c-primary));
	font-size: 0.8rem; font-weight: 800; box-shadow: var(--shadow-sm);
}
.entry--lp .box { margin: 1.25em 0; padding: 18px 20px; border-radius: 20px; }

/* ---------- Hàng toàn chiều rộng (bảng / không ảnh) ---------- */
.lp-row--wide { padding: var(--lp-card-pad); border-radius: 32px; background: var(--lp-surface); box-shadow: var(--shadow); }
.lp-row__head { max-width: 860px; }
.lp-row--wide .lp-row__body > p { max-width: 920px; }
.entry--lp .lp-row--wide table { margin: 1.25em 0; background: #fff; box-shadow: 0 0 0 1px var(--c-border); }
.entry--lp .lp-row--wide th { padding: 14px 16px; font-size: 0.9rem; letter-spacing: 0.01em; }
.entry--lp .lp-row--wide td { padding: 12px 16px; }
@media (min-width: 768px) {
	.entry--lp .lp-row--wide tbody tr:nth-child(even) td { background: #f7fafe; }
	.entry--lp .lp-row--wide td:first-child { font-weight: 600; color: var(--c-primary); }
}

/* ---------- Thẻ văn phòng ---------- */
.lp-contact { overflow: hidden; border-radius: var(--lp-radius); background: var(--lp-surface); box-shadow: var(--shadow); }
.lp-contact__media img, .entry .lp-contact__media img {
	display: block; width: 100%; height: auto; aspect-ratio: 16 / 7; object-fit: cover; object-position: center 62%; border-radius: 0;
}
.lp-contact__body { padding: 20px 22px 24px; }
.entry .lp-contact__title { margin: 0 0 12px; font-size: 1.15rem; font-weight: 800; color: var(--c-primary); text-align: left; }
.entry--lp .lp-contact__list { margin: 0 0 18px; padding: 0; list-style: none; }
.entry--lp .lp-contact__list li { display: flex; gap: 10px; align-items: flex-start; margin: 0 0 10px; padding: 0; text-align: left; font-size: 0.95rem; }
.entry--lp .lp-contact__list li::before { content: none; }
.lp-contact__list .icon { width: 20px; height: 20px; margin-top: 3px; color: var(--c-accent); }
.lp-contact .btn-group { gap: 10px; }
.lp-contact .btn { min-height: 44px; padding: 9px 20px; }

/* ---------- Điện thoại nhỏ ---------- */
@media (max-width: 599px) {
	.lp-toc { padding: 14px 12px 10px; border-radius: 18px; }
	.lp-lead, .lp-row--wide { border-radius: 24px; }
	.lp-lead::before { top: 20px; bottom: 20px; width: 4px; }
	.lp-row--wide { padding: 20px 16px; }
	.lp-media { padding: 6px; border-radius: 22px; }
	.lp-media img, .entry .lp-media img { border-radius: 17px; }
	.lp-contact .btn { flex: 1 1 auto; }
	/* bảng kiểu thẻ trong khung trắng: bỏ bớt lề để thẻ rộng hơn */
	.entry--lp .lp-row--wide table.bang-the { box-shadow: none; }
}

/* ---------- Máy tính bảng / máy tính ---------- */
@media (min-width: 900px) {
	.lp-toc { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 18px; padding: 14px 18px 14px 24px; }
	.lp-toc__label { margin: 0; }
	.lp-toc__list { flex-wrap: wrap; overflow: visible; padding: 0; }

	.lp-row--split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(36px, 2rem + 2.5vw, 76px); }
	.lp-row--rev { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
	.lp-row--rev .lp-row__media { order: 2; }
	.lp-row--contact:not(.lp-row--rev) .lp-row__media { order: 0; }
	.lp-row--split .lp-row__body { padding-block: 8px; }

	.lp-lead--media { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(32px, 2rem + 2vw, 64px); }
	.lp-lead--media .lp-media { order: 0; }
	.lp-lead--icon { grid-template-columns: minmax(0, 1fr) auto; gap: 48px; }
	.lp-lead__icon { display: grid; margin-right: 12px; }
}

/* ---------- Khung đầu trang nhóm sản phẩm: chữ trái – ảnh phải (template-san-pham.php) ---------- */
.page-hero--group .chips--nav { margin-top: 28px; }
.page-hero--group .btn-group { margin-top: 6px; }
@media (max-width: 899px) {
	.page-hero--group .page-hero__media { margin-top: 4px; }
}