/* Kiểu landing "lc" — Làm chìa khóa ô tô: xưởng kỹ thuật (nền tối, đường lưới mảnh, thẻ loại chìa vẽ bằng CSS). */
.thk-lc { --lc-ink: #0f1115; --lc-grid: rgba(255, 255, 255, .05); }
.thk-lc-wrap > * + * { margin-top: clamp(28px, 3vw, 44px) !important; }
.thk-lc-head { max-width: 1000px; } /* 760 làm gãy tiêu đề dài (27/10) */
.thk-lc-head > * { margin: 0 !important; }
.thk-lc-head > * + * { margin-top: 10px !important; }
.thk-lc-label { font: 700 .8125rem/1 var(--hf); letter-spacing: .1em; text-transform: uppercase; color: var(--rd); display: inline-flex; align-items: center; gap: 12px; }
.thk-lc-label::before { content: ""; width: 28px; height: 3px; border-radius: 2px; background: var(--r); }
.thk-lc-lead { color: var(--muted); }

/* Hero */
.thk-lc-hero {
	padding-block: clamp(40px, 5vw, 80px); color: rgba(255, 255, 255, .85);
	background: linear-gradient(var(--lc-grid) 1px, transparent 1px) 0 0 / 40px 40px, linear-gradient(90deg, var(--lc-grid) 1px, transparent 1px) 0 0 / 40px 40px, radial-gradient(circle at 80% 30%, rgba(225, 20, 28, .25), transparent 55%), var(--lc-ink);
}
.thk-lc-hero__in { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(28px, 4vw, 72px); align-items: center; }
.thk-lc-hero__text > * { margin: 0 !important; }
.thk-lc-hero__text > * + * { margin-top: 20px !important; }
.thk-lc-hero__title { color: #fff; font-size: clamp(2rem, 1.4rem + 2.4vw, 3.4rem); line-height: 1.15; }
.thk-lc-hero__title span { display: block; color: #ff4d55; font-size: .62em; margin-top: 8px; }
.thk-lc-hero__lead { font-size: 1.1rem; max-width: 60ch; }
.thk-lc-specs { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.thk-lc-specs li { padding: 8px 14px; border: 1px solid rgba(255, 255, 255, .18); border-radius: 999px; font-size: .9rem; color: #fff; background: rgba(255, 255, 255, .04); }
.thk-lc-specs li::before { content: "✓"; color: #4ade80; margin-right: 8px; font-weight: 700; }
.thk-lc-hero__img { margin: 0 !important; position: relative; }
.thk-lc-hero__img img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 20px; box-shadow: 0 30px 60px rgba(0, 0, 0, .45), 0 0 0 1px rgba(255, 255, 255, .08); }
@media (max-width: 900px) { .thk-lc-hero__in { grid-template-columns: 1fr; } .thk-lc-hero__img { max-width: 520px; } }

/* Tình huống */
.thk-lc-grid4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); }
.thk-lc-case { position: relative; margin: 0 !important; padding: 84px 24px 26px; border: 1px solid var(--line); border-radius: var(--rad); background: #fff; transition: box-shadow .25s, transform .25s; }
.thk-lc-case:hover { box-shadow: var(--shadow-h); transform: translateY(-3px); }
.thk-lc-case > * { margin: 0 !important; }
.thk-lc-case h3 { font-size: 1.1rem; margin-bottom: 8px !important; }
.thk-lc-case p { color: var(--muted); font-size: .95rem; }
.thk-lc-case::before { content: ""; position: absolute; left: 24px; top: 24px; width: 44px; height: 44px; border-radius: 12px; background: var(--ink); }
.thk-lc-case::after { content: ""; position: absolute; left: 34px; top: 34px; width: 24px; height: 24px; background: #fff; -webkit-mask: var(--ico) center / contain no-repeat; mask: var(--ico) center / contain no-repeat; }
@media (max-width: 1100px) { .thk-lc-grid4 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .thk-lc-grid4 { grid-template-columns: 1fr; } }

/* 3 loại chìa: hình chìa vẽ bằng CSS */
.thk-lc-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap); }
.thk-lc-type { margin: 0 !important; padding: 28px; background: #fff; border-radius: var(--rad); border: 1px solid var(--line); }
.thk-lc-type > * { margin: 0 !important; }
.thk-lc-type h3 { margin: 18px 0 8px !important; font-size: 1.15rem; }
.thk-lc-type p { color: var(--muted); }
.thk-lc-keyart { display: block; position: relative; height: 70px; }
.thk-lc-keyart::before { content: ""; position: absolute; left: 0; top: 12px; width: 46px; height: 46px; border-radius: 12px; background: linear-gradient(145deg, #2a2d34, #0f1115); box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .06); }
.thk-lc-keyart::after { content: ""; position: absolute; left: 46px; top: 30px; width: 70px; height: 10px; border-radius: 0 3px 3px 0; background: linear-gradient(90deg, #c9ccd2, #f1f2f4); clip-path: polygon(0 0, 100% 0, 100% 100%, 85% 60%, 70% 100%, 55% 55%, 40% 100%, 0 100%); }
.thk-lc-type--2 .thk-lc-keyart::before { width: 40px; height: 62px; top: 4px; border-radius: 12px 12px 18px 18px; background: linear-gradient(160deg, #2a2d34, #0f1115); }
.thk-lc-type--2 .thk-lc-keyart::after { left: 40px; top: 12px; transform: rotate(-20deg); transform-origin: left center; }
.thk-lc-type--3 .thk-lc-keyart::before { width: 44px; height: 66px; top: 2px; border-radius: 14px; background: radial-gradient(circle at 50% 30%, #e1141c 0 5px, transparent 6px), radial-gradient(circle at 50% 55%, #3a3d45 0 5px, transparent 6px), radial-gradient(circle at 50% 78%, #3a3d45 0 5px, transparent 6px), linear-gradient(160deg, #2a2d34, #0f1115); }
.thk-lc-type--3 .thk-lc-keyart::after { display: none; }
@media (max-width: 900px) { .thk-lc-grid3 { grid-template-columns: 1fr; } }

/* Quy trình: dòng thời gian ngang */
.thk-lc-steps { list-style: none; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap); counter-reset: lc; }
.thk-lc-steps li { counter-increment: lc; position: relative; padding: 64px 22px 22px; background: #fff; border-radius: var(--rad); border: 1px solid var(--line); color: var(--muted); }
.thk-lc-steps li strong { display: block; color: var(--ink); font-family: var(--hf); margin-bottom: 6px; }
.thk-lc-steps li::before { content: "0" counter(lc); position: absolute; left: 22px; top: 18px; font: 700 1.6rem/1 var(--hf); color: var(--r); }
@media (max-width: 1100px) { .thk-lc-steps { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 560px) { .thk-lc-steps { grid-template-columns: 1fr; } }

/* Hộp giá */
.thk-lc-pricebox { margin: 0 !important; padding: clamp(28px, 3vw, 44px); border-radius: 20px; background: #fff5f5; border: 1px solid #fbd5d7; max-width: 980px; }
.thk-lc-pricebox > * { margin: 0 !important; }
.thk-lc-pricebox > * + * { margin-top: 16px !important; }
.thk-lc-checks { list-style: none; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 24px; }
.thk-lc-checks li { position: relative; padding-left: 28px; }
.thk-lc-checks li::before { content: ""; position: absolute; left: 0; top: .3em; width: 18px; height: 18px; border-radius: 50%; background: var(--r) 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.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12l4 4 8-8'/%3E%3C/svg%3E") center / 11px no-repeat; }
@media (max-width: 640px) { .thk-lc-checks { grid-template-columns: 1fr; } }
.thk-lc-more { color: var(--muted); }
.thk-lc-pricebox { margin-inline: auto !important; } /* 27/10: khung giá ra giữa */
@media (max-width: 420px) { .thk-lc-hero__title { font-size: 1.8rem; } } /* "Làm chìa khóa ô tô," vừa một dòng, không tách "ô ⏎ tô" (27/10) */
