/**
 * K-Tech – Port 1:1 từ giao diện thật vesinhluxclean.com (.lux-vsnp-*).
 * Giữ nguyên cấu trúc "mỗi section là 1 thẻ bo góc trong khung 1200px",
 * navy #0b3558 và toàn bộ spacing/shadow gốc.
 * Màu nhấn của mẫu là xanh lá #0aa15f -> ĐỔI thành ĐỎ #9e1620 theo yêu cầu.
 * Toàn bộ giới hạn trong .ktech-page để không ảnh hưởng phần khác.
 */

.ktech-page {
	--kt-brand: #9e1620;     /* thay cho xanh lá #0aa15f của mẫu */
	--kt-brand-d: #7b1119;
	--kt-navy: #0b3558;
	--kt-navy-2: #0a2f50;
	--kt-navy-3: #0f3f65;
	--kt-text: #172b3a;
	--kt-muted: #46607a;
	--kt-line: #d8e6f1;
	--kt-line-2: #d7e6f1;
	--kt-card: #f8fcff;
	--kt-soft: linear-gradient(145deg, #fdf4f4 0%, #f5f8fc 100%);
	--kt-shadow: 0 12px 30px rgba(11, 53, 88, .1);
	font-family: "Segoe UI", Arial, sans-serif;
	color: var(--kt-text);
	line-height: 1.7;
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
}
.ktech-page * { box-sizing: border-box; }
.ktech-page img { max-width: 100%; height: auto; display: block; }

/* Khung 1200px + vô hiệu hoá container cũ (vì section giờ là thẻ tự padding) */
.ktech-wrap { display: block; }
.ktech-container, .ktech-container--narrow { max-width: none; width: 100%; margin: 0; padding: 0; }

/* ---------- HERO (thẻ gradient + kicker) ---------- */
.ktech-hero { margin: 0; }
.ktech-hero__inner {
	display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 18px; align-items: center;
	background: var(--kt-soft); border: 1px solid #ecd9da; border-radius: 22px;
	padding: 22px; box-shadow: var(--kt-shadow); width: 100%;
}
.ktech-hero__inner--solo { grid-template-columns: 1fr; }
.ktech-kicker {
	display: inline-flex; align-items: center; padding: 5px 11px; border-radius: 999px;
	border: 1px solid #e6cfd1; background: #fff; color: var(--kt-brand);
	font-size: 12px; font-weight: 700; letter-spacing: .2px; text-transform: uppercase;
}
.ktech-hero__title { margin: 10px 0; font-size: 28px; line-height: 1.22; color: var(--kt-navy-2); font-weight: 700; }
.ktech-hero__desc { font-size: 16px; color: #2f4f6b; margin: 0; }
/* Hero gộp toàn bộ vào 1 editor (.ktech-hero__content) */
.ktech-hero__content h1, .ktech-hero__content h2 { margin: 0 0 10px; font-size: 28px; line-height: 1.22; color: var(--kt-navy-2); font-weight: 700; }
.ktech-hero__content p { font-size: 16px; color: #2f4f6b; margin: 0 0 12px; }
.ktech-hero__content ul { list-style: none; margin: 14px 0 0; padding: 0; }
.ktech-hero__content ul li { position: relative; padding: 6px 0 6px 28px; color: var(--kt-text); }
.ktech-hero__content ul li::before { content: "\2713"; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--kt-brand); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.ktech-hero__content > :last-child { margin-bottom: 0; }
.ktech-hero__media { margin: 0; border-radius: 16px; overflow: hidden; border: 1px solid #e3d3d4; background: #fff; min-height: 260px; }
.ktech-hero__media img { width: 100%; height: 100%; object-fit: cover; }

/* ---------- Nút (viên thuốc) ---------- */
.ktech-btns { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 10px; }
.ktech-btn {
	display: inline-flex; align-items: center; justify-content: center;
	border-radius: 999px; padding: 10px 16px; font-size: 14px; font-weight: 700;
	text-decoration: none; border: 1px solid transparent; transition: all .2s ease;
}
.ktech-btn--primary { background: var(--kt-brand); color: #fff; }
.ktech-btn--primary:hover { background: var(--kt-brand-d); color: #fff; transform: translateY(-1px); }
.ktech-btn--ghost { background: #fff; color: #0a4a7f; border-color: #bfd5e6; }
.ktech-btn--ghost:hover { border-color: #98bfd8; transform: translateY(-1px); }

/* ---------- Thanh liên kết nhanh (sticky pill) ---------- */
.ktech-jump {
	position: sticky; top: 47px; z-index: 100; margin-top: 14px;
	background: rgb(255 255 255 / .96); border: 1px solid var(--kt-line); border-radius: 999px;
	box-shadow: 0 2px 12px rgb(11 53 88 / .08);
}
.ktech-jump__inner { display: flex; gap: 6px; overflow-x: auto; padding: 8px 12px; scrollbar-width: none; }
.ktech-jump__inner::-webkit-scrollbar { display: none; }
.ktech-jump a {
	white-space: nowrap; text-decoration: none; color: #15476a; border: 1px solid #c8dcec;
	background: #fff; border-radius: 999px; padding: 6px 12px; font-size: 13px; font-weight: 600; flex-shrink: 0;
}
.ktech-jump a:hover { background: var(--kt-brand); color: #fff; border-color: var(--kt-brand); }

/* ---------- Section = thẻ bo góc ---------- */
.ktech-sec {
	margin-top: 16px; border: 1px solid var(--kt-line); border-radius: 18px;
	background: #fff; box-shadow: 0 8px 22px rgb(11 53 88 / .06); padding: 18px;
}
.ktech-sec--alt { background: #fff; }
.ktech-h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; color: var(--kt-navy); font-weight: 700; }
.ktech-lead { font-size: 15px; color: #2d4a63; margin: 0 0 12px; }
.ktech-note { color: var(--kt-muted); font-size: 13px; font-style: italic; margin: 12px 0 0; }

/* ---------- Điểm khác biệt = danh sách bullet ---------- */
.ktech-diff-list { margin: 0; padding-left: 22px; }
.ktech-diff-list li { margin: 0 0 10px; line-height: 1.55; font-size: 15px; color: #2d4a63; }
.ktech-diff-list li strong { color: #1c2b38; font-weight: 800; }

/* ---------- Lưới ---------- */
.ktech-grid { display: grid; gap: 12px; margin-top: 10px; }
.ktech-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ktech-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ktech-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ---------- Lợi ích (thẻ nhỏ) ---------- */
.ktech-benefit__item { border: 1px solid var(--kt-line-2); border-radius: 14px; padding: 14px; background: var(--kt-card); }
.ktech-benefit__item h3 { margin: 0 0 8px; font-size: 17px; color: var(--kt-navy-3); line-height: 1.35; }
.ktech-benefit__item p { margin: 0; color: #2d4a63; font-size: 14px; }

/* ---------- Thẻ dịch vụ (ảnh trên) ---------- */
.ktech-card {
	border: 1px solid var(--kt-line-2); border-radius: 14px; background: var(--kt-card); overflow: hidden;
	box-shadow: 0 8px 20px rgb(11 53 88 / .08); display: flex; flex-direction: column;
}
.ktech-card__img { border-bottom: 1px solid #dbe8f3; }
.ktech-card__img img { width: 100%; height: 200px; object-fit: cover; }
.ktech-card__img a { display: block; }
.ktech-card__body { padding: 12px; display: flex; flex-direction: column; flex-grow: 1; }
.ktech-card__body h3 { margin: 0 0 8px; color: var(--kt-navy-3); font-size: 17px; line-height: 1.35; }
.ktech-card__body h3 a { color: inherit; text-decoration: none; }
.ktech-card__body h3 a:hover { color: var(--kt-brand); }
.ktech-card__body p { margin: 0; font-size: 14px; color: #2d4a63; flex-grow: 1; }
.ktech-card__link { margin-top: 10px; display: inline-flex; align-items: center; color: #0b6ccf; font-size: 13px; font-weight: 700; text-decoration: none; }
.ktech-card__link:hover { text-decoration: underline; }

/* ---------- Quy trình ---------- */
.ktech-process__wrap { display: grid; grid-template-columns: 1.25fr 0.75fr; gap: 12px; align-items: start; margin-top: 10px; }
.ktech-process__wrap--nomedia { grid-template-columns: 1fr; }
.ktech-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.ktech-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 10px; border: 1px solid var(--kt-line-2); border-radius: 12px; background: var(--kt-card); padding: 10px; }
.ktech-steps__num { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; color: #fff; background: linear-gradient(145deg, #9e1620 0%, #0b3558 100%); }
.ktech-steps h3 { margin: 0 0 4px; font-size: 15px; line-height: 1.35; color: var(--kt-navy-3); }
.ktech-steps p { margin: 0; font-size: 14px; color: #2d4a63; }
.ktech-process__media { margin: 0; border: 1px solid var(--kt-line-2); border-radius: 12px; overflow: hidden; box-shadow: 0 8px 20px rgb(11 53 88 / .08); background: #fff; position: sticky; top: 100px; }
.ktech-process__media img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; }
.ktech-process__media figcaption { padding: 8px 10px; font-size: 12px; color: #45627b; background: var(--kt-card); border-top: 1px solid #e1ebf3; }

/* ---------- Bảng giá (header xanh nhạt) ---------- */
.ktech-table-wrap { overflow-x: auto; margin-top: 8px; }
.ktech-table { width: 100%; border-collapse: collapse; overflow: hidden; border-radius: 12px; border: 1px solid #cfe0ed; }
.ktech-table th, .ktech-table td { border-bottom: 1px solid #dbe8f3; padding: 10px; text-align: left; font-size: 14px; }
.ktech-table thead th { background: #eef6fc; color: var(--kt-navy); font-weight: 700; }
.ktech-table tbody tr:nth-child(even) { background: #fbfdff; }
.ktech-price__cap { margin: 14px 0 6px; font-size: 16px; color: var(--kt-navy); font-weight: 700; }
/* Bảng giá soạn bằng editor (wp_editor) */
.ktech-richtable table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; border: 1px solid #cfe0ed; }
.ktech-richtable th, .ktech-richtable td { border-bottom: 1px solid #dbe8f3; padding: 10px; text-align: left; font-size: 14px; vertical-align: top; }
.ktech-richtable thead th { background: #eef6fc; color: var(--kt-navy); font-weight: 700; }
.ktech-richtable tbody tr:nth-child(even) { background: #fbfdff; }
.ktech-richtable td p, .ktech-richtable th p { margin: 0; }
/* Bảng giá gộp toàn bộ vào 1 editor (.ktech-richtext) */
.ktech-richtext > :first-child { margin-top: 0; }
.ktech-richtext > :last-child { margin-bottom: 0; }
.ktech-richtext h2 { margin: 0 0 10px; font-size: 20px; line-height: 1.3; color: var(--kt-navy); font-weight: 700; }
.ktech-richtext h3 { margin: 16px 0 6px; font-size: 16px; color: var(--kt-navy); font-weight: 700; }
.ktech-richtext p { font-size: 15px; color: #2d4a63; margin: 0 0 12px; }
.ktech-richtext em { color: var(--kt-muted); font-style: italic; }
.ktech-richtext table { width: 100%; border-collapse: collapse; border-radius: 12px; overflow: hidden; border: 1px solid #cfe0ed; margin: 8px 0 14px; }
.ktech-richtext th, .ktech-richtext td { border-bottom: 1px solid #dbe8f3; padding: 10px; text-align: left; font-size: 14px; vertical-align: top; }
.ktech-richtext thead th { background: #eef6fc; color: var(--kt-navy); font-weight: 700; }
.ktech-richtext tbody tr:nth-child(even) { background: #fbfdff; }
.ktech-richtext td p, .ktech-richtext th p { margin: 0; }
.ktech-richtext { color: #2d4a63; font-size: 15px; }
/* danh sách ● -> dấu tích đỏ */
.ktech-richtext ul { list-style: none; margin: 8px 0 12px; padding: 0; }
.ktech-richtext ul li { position: relative; padding: 6px 0 6px 28px; }
.ktech-richtext ul li::before { content: "\2713"; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--kt-brand); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
/* danh sách số -> số tròn gradient (dùng cho Quy trình) */
.ktech-richtext ol { list-style: none; counter-reset: kt; margin: 8px 0 12px; padding: 0; }
.ktech-richtext ol li { position: relative; counter-increment: kt; padding: 5px 0 5px 46px; margin-bottom: 8px; min-height: 34px; }
.ktech-richtext ol li::before { content: counter(kt); position: absolute; left: 0; top: 0; width: 34px; height: 34px; border-radius: 50%; background: linear-gradient(145deg, var(--kt-brand) 0%, var(--kt-navy) 100%); color: #fff; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; }
.ktech-richtext ol li strong { color: var(--kt-navy); }

/* ---------- FAQ (toggle hình tròn +/-) ---------- */
.ktech-acc__item { border-top: 1px solid #d9e7f1; padding: 8px 0; }
.ktech-acc__item summary { list-style: none; cursor: pointer; color: #0d3d63; font-weight: 700; font-size: 15px; line-height: 1.4; padding: 6px 28px 6px 0; position: relative; }
.ktech-acc__item summary::-webkit-details-marker { display: none; }
.ktech-acc__item summary::after { content: "+"; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; border-radius: 999px; border: 1px solid #b9cfdf; color: #0d3d63; display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 800; background: #f7fbff; }
.ktech-acc__item[open] summary::after { content: "\2212"; }
.ktech-acc__a { color: #2d4a63; font-size: 14px; padding-right: 8px; margin-top: 6px; }

/* ---------- Phản hồi (thẻ testimonial) ---------- */
.ktech-reviews .ktech-grid { gap: 14px; }
.ktech-review { display: grid; grid-template-columns: 1fr; gap: 8px; background: #fff; border: 1px solid #e1e5ea; border-radius: 14px; padding: 14px; box-shadow: 0 5px 16px rgb(16 24 32 / .08); margin: 0; }
.ktech-stars { color: #f5a623; letter-spacing: 1px; font-size: 18px; line-height: 1; margin-bottom: 2px; }
.ktech-review p { margin: 0 0 8px; color: #2b2f33; font-style: italic; font-size: 16px; line-height: 1.5; }
.ktech-review footer { display: flex; flex-direction: column; }
.ktech-review footer strong { color: #20262b; font-weight: 800; }
.ktech-review footer span { color: #56606a; font-size: 14px; }

/* ---------- CTA (gradient navy + hộp liên hệ) ---------- */
.ktech-cta { margin-top: 16px; border-radius: 18px; padding: 20px; background: linear-gradient(120deg, #1e537f 0%, #083353 100%); color: #fff; }
.ktech-cta__inner { max-width: none; padding: 0; }
.ktech-cta .ktech-h2 { color: #fff; margin-bottom: 8px; font-size: 28px; }
.ktech-cta p { color: #eaf8ff; margin: 0 0 10px; font-size: 16px; }
.ktech-cta .ktech-btns { margin: 0 0 12px; }
.ktech-cta .ktech-btn--primary { background: var(--kt-brand); color: #fff; }
.ktech-cta .ktech-btn--ghost { background: #fff; color: var(--kt-navy); border-color: #fff; }
.ktech-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; padding: 0; }
.ktech-badges li { display: inline-flex; align-items: center; padding: 4px 10px; border-radius: 999px; background: rgb(255 255 255 / .16); border: 1px solid rgb(255 255 255 / .26); color: #eefcff; font-size: 15px; font-weight: 700; }
.ktech-cta__contact { border: 1px solid rgb(255 255 255 / .35); border-radius: 12px; padding: 12px; margin-top: 8px; background: rgb(255 255 255 / .1); }
.ktech-cta__cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; }
.ktech-cta__contact p { margin: 0; font-size: 15px; line-height: 1.45; color: #eaf8ff; }
.ktech-cta__contact strong { color: #fff; }
.ktech-cta__contact a { color: #e8fff4; text-decoration: none; word-break: break-word; }
.ktech-cta__addr { grid-column: 1 / -1; }

/* ---------- 2 cột (Phạm vi / Khử mùi) ---------- */
.ktech-split__inner { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: center; margin-top: 10px; }
.ktech-split--rev .ktech-split__media { order: -1; }
.ktech-split__media img { border-radius: 12px; border: 1px solid var(--kt-line-2); width: 100%; }
.ktech-ticks { list-style: none; margin: 12px 0 0; padding: 0; }
.ktech-ticks li { position: relative; padding: 6px 0 6px 26px; color: #2d4a63; font-size: 15px; }
.ktech-ticks li::before { content: "\2713"; position: absolute; left: 0; top: 7px; width: 18px; height: 18px; border-radius: 50%; background: var(--kt-brand); color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- Chất liệu ---------- */
.ktech-type { border: 1px solid var(--kt-line-2); border-radius: 14px; padding: 14px; background: var(--kt-card); border-top: 3px solid var(--kt-brand); }
.ktech-type h3 { margin: 0 0 6px; font-size: 16px; color: var(--kt-navy-3); }
.ktech-type p { margin: 0 0 8px; color: #2d4a63; font-size: 14px; }
.ktech-type__mat { font-size: 13px; }
.ktech-type__mat strong { color: var(--kt-navy); }

/* ---------- Chips / Tần suất ---------- */
.ktech-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }
.ktech-chip { background: #fff; border: 1px solid var(--kt-brand); color: var(--kt-brand); padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; }
.ktech-freq__list { list-style: none; margin: 10px 0 0; padding: 0; }
.ktech-freq__list li { display: flex; justify-content: space-between; align-items: center; gap: 16px; border: 1px solid var(--kt-line-2); border-radius: 12px; background: var(--kt-card); padding: 12px 14px; margin-bottom: 9px; }
.ktech-freq__case { font-weight: 600; color: var(--kt-navy); }
.ktech-freq__val { color: var(--kt-brand); font-weight: 800; white-space: nowrap; }

/* ---------- Gallery ---------- */
.ktech-gallery { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 10px; }
.ktech-gallery__item { margin: 0; border: 1px solid var(--kt-line-2); border-radius: 12px; overflow: hidden; background: #fff; box-shadow: 0 8px 20px rgb(11 53 88 / .08); }
.ktech-gallery__item img { width: 100%; height: 200px; object-fit: cover; }
.ktech-gallery__item figcaption { padding: 8px 10px; font-size: 12px; color: #45627b; background: var(--kt-card); }

/* ---------- Hạng mục dạng danh sách (văn phòng) ---------- */
.ktech-itemlist { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ktech-itemlist li { display: flex; gap: 10px; align-items: flex-start; border: 1px solid var(--kt-line-2); border-radius: 12px; background: var(--kt-card); padding: 12px; }
.ktech-itemlist .ktech-check { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; background: var(--kt-brand); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; margin-top: 1px; }
.ktech-itemlist h3 { margin: 0 0 3px; font-size: 15px; color: var(--kt-navy-3); }
.ktech-itemlist p { margin: 0; color: #2d4a63; font-size: 14px; }

.ktech-map { text-align: center; }

/* ---------- Responsive ---------- */
@media (max-width: 960px) {
	.ktech-wrap { padding: 12px; }
	.ktech-hero__inner { grid-template-columns: 1fr; padding: 16px; }
	.ktech-hero__media { min-height: 210px; }
	.ktech-grid--2, .ktech-grid--3, .ktech-grid--4 { grid-template-columns: 1fr; }
	.ktech-process__wrap { grid-template-columns: 1fr; }
	.ktech-process__media { position: static; }
	.ktech-process__media img { min-height: 220px; }
	.ktech-split__inner { grid-template-columns: 1fr; }
	.ktech-split--rev .ktech-split__media { order: 0; }
	.ktech-itemlist { grid-template-columns: 1fr; }
	.ktech-gallery { grid-template-columns: 1fr; }
	.ktech-cta__cgrid { grid-template-columns: 1fr; }
	.ktech-cta .ktech-h2 { font-size: 20px; }
}
