/* ==========================================================================
   CASA — SERVICE UNIFIED STYLESHEET (casa-service.css)
   Sử dụng chung cho toàn bộ các trang dịch vụ thi công nội thất CASA:
   1. Thi công nội thất phòng khách (/thi-cong-noi-that/phong-khach)
   2. Thi công nội thất phòng bếp (/thi-cong-noi-that/phong-bep)
   3. Thi công nội thất phòng ngủ (/thi-cong-noi-that/phong-ngu)
   Tối ưu chuyển đổi (CRO) · Báo giá minh bạch 2026 · Chuẩn nhận diện CASA
   ========================================================================== */

/* ==========================================================================
   0. ASTRA THEME FULL-WIDTH BREAKOUT & SYSTEM RESETS
   Xóa bỏ mọi giới hạn đóng khung của Theme Astra / WordPress Gutenberg
   để tất cả các trang dịch vụ thi công nội thất hiển thị Full Width 100vw.
   ========================================================================== */
html,
body {
  overflow-x: hidden !important;
}

/* Reset khoảng trắng các wrapper cha của Astra */
.site-content:has(.casa-turnkey),
.ast-container:has(.casa-turnkey),
#primary:has(.casa-turnkey),
.site-main:has(.casa-turnkey),
article:has(.casa-turnkey),
.entry-content:has(.casa-turnkey),
.site-content:has(.casa-service-lr),
.ast-container:has(.casa-service-lr),
#primary:has(.casa-service-lr),
.site-main:has(.casa-service-lr),
article:has(.casa-service-lr),
.entry-content:has(.casa-service-lr),
.site-content:has(.casa-service-kit),
.ast-container:has(.casa-service-kit),
#primary:has(.casa-service-kit),
.site-main:has(.casa-service-kit),
article:has(.casa-service-kit),
.entry-content:has(.casa-service-kit),
.site-content:has(.casa-service-bed),
.ast-container:has(.casa-service-bed),
#primary:has(.casa-service-bed),
.site-main:has(.casa-service-bed),
article:has(.casa-service-bed),
.entry-content:has(.casa-service-bed),
.site-content:has(.casa-service),
.ast-container:has(.casa-service),
#primary:has(.casa-service),
.site-main:has(.casa-service),
article:has(.casa-service),
.entry-content:has(.casa-service) {
  max-width: 100% !important;
  width: 100% !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
}

.ast-page-builder-template .site-main > article:has(.casa-turnkey),
.ast-page-builder-template .site-main > article:has(.casa-service-lr),
.ast-page-builder-template .site-main > article:has(.casa-service-kit),
.ast-page-builder-template .site-main > article:has(.casa-service-bed),
.ast-page-builder-template .site-main > article:has(.casa-service),
.ast-separate-container .ast-article-single:has(.casa-turnkey),
.ast-separate-container .ast-article-single:has(.casa-service-lr),
.ast-separate-container .ast-article-single:has(.casa-service-kit),
.ast-separate-container .ast-article-single:has(.casa-service-bed),
.ast-separate-container .ast-article-single:has(.casa-service) {
  padding: 0 !important;
  margin: 0 !important;
}

/* Breakout 100vw toàn màn hình cho tất cả landing page dịch vụ */
.entry-content > .casa-turnkey,
.entry-content > .casa-service-lr,
.entry-content > .casa-service-kit,
.entry-content > .casa-service-bed,
.entry-content > .casa-service,
.casa-turnkey.alignfull,
.casa-service-lr.alignfull,
.casa-service-kit.alignfull,
.casa-service-bed.alignfull,
.casa-service.alignfull,
.casa-turnkey,
.casa-service-lr,
.casa-service-kit,
.casa-service-bed,
.casa-service {
  width: 100vw !important;
  max-width: 100vw !important;
  margin-left: calc(-50vw + 50%) !important;
  margin-right: calc(-50vw + 50%) !important;
  position: relative;
  left: 0;
  right: 0;
  box-sizing: border-box;
}

/* Chống can thiệp danh sách của Theme Astra */
.entry-content .casa-turnkey ul,
.entry-content .casa-turnkey ol,
.entry-content .casa-service-lr ul,
.entry-content .casa-service-lr ol,
.entry-content .casa-service-kit ul,
.entry-content .casa-service-kit ol,
.entry-content .casa-service-bed ul,
.entry-content .casa-service-bed ol,
.entry-content .casa-service ul,
.entry-content .casa-service ol {
  padding-left: 0 !important;
  margin-left: 0 !important;
  list-style: none !important;
}

/* Ẩn entry-header mặc định nếu theme chèn tiêu đề trùng */
.entry-header:has(+ .entry-content .casa-turnkey),
.entry-header:has(+ .entry-content .casa-service-lr),
.entry-header:has(+ .entry-content .casa-service-kit),
.entry-header:has(+ .entry-content .casa-service-bed),
.entry-header:has(+ .entry-content .casa-service) {
  display: none !important;
}

/* 1. KHỞI TẠO BIẾN THIẾT KẾ VÀ KHỐI CHÍNH */
.casa-turnkey,
.casa-service-lr,
.casa-service-kit,
.casa-service-bed,
.casa-service {
  --orange: #ff9e22;
  --orange-hover: #ea8a10;
  --orange-light: #fff5e8;
  --ink: #171714;
  --dark: #1f1c18;
  --stone: #e8e3da;
  --cream: #fbf9f5;
  --warm: #fcfaf6;
  --muted: #66625b;
  --line: #e8e3da;
  --font-body: "Arimo", Arial, sans-serif;
  --font-head: "Quicksand", Arial, sans-serif;
  --container: 1200px;
  --radius: 12px;
  --radius-btn: 999px;
  --shadow: 0 16px 40px rgba(23, 23, 20, 0.08);
  --shadow-card: 0 24px 60px rgba(0, 0, 0, 0.35);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

.casa-turnkey *,
.casa-service-lr *,
.casa-service-kit *,
.casa-service-bed *,
.casa-service * {
  box-sizing: border-box;
}

.casa-turnkey img,
.casa-service-lr img,
.casa-service-kit img,
.casa-service-bed img,
.casa-service img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ==========================================================================
   LOẠI BỎ TOÀN BỘ UNDERLINE CỦA LINK TRÊN CÁC TRANG DỊCH VỤ THI CÔNG
   Ghi đè triệt để thiết lập Astra theme (.ast-single-post .entry-content a)
   ========================================================================== */
.ast-single-post .entry-content a,
.ast-single-post .entry-content a:hover,
.ast-single-post .entry-content a:focus,
.ast-single-post .entry-content a:active,
.entry-content a,
.entry-content a:hover,
.entry-content a:focus,
.entry-content a:active,
.casa-turnkey a,
.casa-turnkey a:hover,
.casa-turnkey a:focus,
.casa-turnkey a:active,
.casa-turnkey a *,
.casa-service a,
.casa-service a:hover,
.casa-service a:focus,
.casa-service a:active,
.casa-service a *,
.casa-service-lr a,
.casa-service-lr a:hover,
.casa-service-lr a:focus,
.casa-service-lr a:active,
.casa-service-lr a *,
.casa-service-kit a,
.casa-service-kit a:hover,
.casa-service-kit a:focus,
.casa-service-kit a:active,
.casa-service-kit a *,
.casa-service-bed a,
.casa-service-bed a:hover,
.casa-service-bed a:focus,
.casa-service-bed a:active,
.casa-service-bed a *,
.tk-subservice-link,
.tk-subservice-link:hover,
.tk-subservice-link:focus,
.tk-subservice-link *,
.tk-btn,
.tk-btn:hover,
.tk-btn:focus,
.tk-btn *,
.tk-mobile-cta a,
.tk-mobile-cta a:hover,
.tk-mobile-cta a:focus,
.tk-mobile-cta a *,
.lr-sticky-btn,
.lr-sticky-btn:hover,
.kit-sticky-btn,
.kit-sticky-btn:hover,
.bed-sticky-btn,
.bed-sticky-btn:hover,
.svc-sticky-btn,
.svc-sticky-btn:hover {
  text-decoration: none !important;
  text-decoration-line: none !important;
  text-decoration-color: transparent !important;
}


/* Container căn giữa */
.tk-shell,
.lr-shell,
.kit-shell,
.bed-shell,
.svc-shell {
  width: min(var(--container), calc(100% - 40px));
  margin: 0 auto;
}

/* Nhãn phụ (Eyebrow text) */
.tk-eyebrow,
.lr-eyebrow,
.kit-eyebrow,
.bed-eyebrow,
.svc-eyebrow {
  display: inline-block;
  font: 700 12px/1 var(--font-head);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--orange);
  margin-bottom: 12px;
}

/* ================= 2. HERO BANNER & FORM TƯ VẤN (CRO ABOVE THE FOLD) ================= */
.tk-hero,
.lr-hero,
.kit-hero,
.bed-hero,
.svc-hero {
  position: relative;
  background: #191612;
  color: #fff;
  overflow: hidden;
  min-height: 680px;
  display: flex;
  align-items: center;
  padding: 105px 0 75px;
}

.tk-hero > img,
.lr-hero-bg,
.kit-hero-bg,
.bed-hero-bg,
.svc-hero-bg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.4;
}

.tk-hero:after,
.lr-hero:after,
.kit-hero:after,
.bed-hero:after,
.svc-hero:after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(23, 20, 16, 0.95) 0%, rgba(23, 20, 16, 0.78) 55%, rgba(23, 20, 16, 0.4) 100%);
}

.tk-hero-grid,
.lr-hero-grid,
.kit-hero-grid,
.bed-hero-grid,
.svc-hero-grid {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 50px;
  align-items: center;
}

.tk-hero-copy h1,
.lr-hero-copy h1,
.kit-hero-copy h1,
.bed-hero-copy h1,
.svc-hero-copy h1 {
  font: 700 clamp(36px, 5.2vw, 64px)/1.08 var(--font-head);
  letter-spacing: -0.035em;
  margin: 0 0 18px;
  color: #fff;
}

.tk-hero-copy h1 em,
.lr-hero-copy h1 em,
.kit-hero-copy h1 em,
.bed-hero-copy h1 em,
.svc-hero-copy h1 em {
  font-style: normal;
  color: var(--orange);
}

.tk-hero-copy p.lead,
.lr-hero-copy p.lead,
.kit-hero-copy p.lead,
.bed-hero-copy p.lead,
.svc-hero-copy p.lead {
  font-size: clamp(16px, 1.8vw, 19px);
  line-height: 1.65;
  color: #dcd8d0;
  margin: 0 0 24px;
  max-width: 620px;
}

.tk-hero-points,
.lr-hero-points,
.kit-hero-points,
.bed-hero-points,
.svc-hero-points {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: grid;
  gap: 12px;
}

.tk-hero-points li,
.lr-hero-points li,
.kit-hero-points li,
.bed-hero-points li,
.svc-hero-points li {
  position: relative;
  padding-left: 30px;
  font-size: 15.5px;
  font-weight: 600;
  color: #f7f5f0;
}

.tk-hero-points li:before,
.lr-hero-points li:before,
.kit-hero-points li:before,
.bed-hero-points li:before,
.svc-hero-points li:before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--orange);
  color: #171714;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 900;
}

.tk-actions,
.lr-hero-actions,
.kit-hero-actions,
.bed-hero-actions,
.svc-hero-actions {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
}

/* Nút bấm chuyển đổi chuẩn */
.tk-btn,
.lr-btn,
.kit-btn,
.bed-btn,
.svc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 28px;
  border-radius: var(--radius-btn);
  font: 700 15px var(--font-head);
  text-decoration: none !important;
  text-decoration-line: none !important;
  background: var(--orange);
  color: #171714 !important;
  border: 0;
  cursor: pointer;
  transition: transform 0.2s, filter 0.2s, box-shadow 0.2s;
}

.tk-btn:hover,
.lr-btn:hover,
.kit-btn:hover,
.bed-btn:hover,
.svc-btn:hover {
  filter: brightness(0.95);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(255, 158, 34, 0.35);
}

.tk-btn--ghost,
.lr-btn--ghost,
.kit-btn--ghost,
.bed-btn--ghost,
.svc-btn--ghost {
  background: transparent;
  color: #fff !important;
  border: 1.5px solid rgba(255, 255, 255, 0.6);
}

.tk-btn--ghost:hover,
.lr-btn--ghost:hover,
.kit-btn--ghost:hover,
.bed-btn--ghost:hover,
.svc-btn--ghost:hover {
  border-color: var(--orange);
  color: var(--orange) !important;
  background: rgba(255, 158, 34, 0.1);
}

/* ================= 3. KHỐI LEAD CAPTURE FORM TRÊN HERO ================= */
.tk-lead-form,
.lr-lead-card,
.kit-lead-card,
.bed-lead-card,
.svc-lead-card {
  background: #ffffff;
  color: var(--ink);
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: var(--shadow-card);
}

.tk-form-kicker,
.card-kicker {
  font: 700 11px var(--font-head);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #c46400;
  margin-bottom: 6px;
}

.tk-lead-form h2,
.lr-lead-card h2,
.kit-lead-card h2,
.bed-lead-card h2,
.svc-lead-card h2 {
  font: 700 24px/1.2 var(--font-head);
  margin: 0 0 8px;
  color: var(--ink);
}

.tk-form-sub,
.card-sub {
  font-size: 13.5px;
  color: var(--muted);
  margin: 0 0 20px;
}

.tk-form-group,
.lr-form-group,
.kit-form-group,
.bed-form-group,
.svc-form-group {
  margin-bottom: 14px;
}

.tk-form-group label,
.lr-form-group label,
.kit-form-group label,
.bed-form-group label,
.svc-form-group label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  margin-bottom: 6px;
  color: #2b2823;
}

.tk-form-group label span,
.lr-form-group label span,
.kit-form-group label span,
.bed-form-group label span,
.svc-form-group label span {
  color: #c93d14;
}

.tk-form-group input,
.tk-form-group select,
.tk-form-group textarea,
.lr-form-group input,
.lr-form-group select,
.lr-form-group textarea,
.kit-form-group input,
.kit-form-group select,
.kit-form-group textarea,
.bed-form-group input,
.bed-form-group select,
.bed-form-group textarea,
.svc-form-group input,
.svc-form-group select,
.svc-form-group textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid #dfd8cc;
  border-radius: 8px;
  font-family: inherit;
  font-size: 14px;
  color: var(--ink);
  background: #fff;
  transition: border-color 0.2s, box-shadow 0.2s;
}

.tk-form-group input:focus,
.tk-form-group select:focus,
.tk-form-group textarea:focus,
.lr-form-group input:focus,
.lr-form-group select:focus,
.lr-form-group textarea:focus,
.kit-form-group input:focus,
.kit-form-group select:focus,
.kit-form-group textarea:focus,
.bed-form-group input:focus,
.bed-form-group select:focus,
.bed-form-group textarea:focus,
.svc-form-group input:focus,
.svc-form-group select:focus,
.svc-form-group textarea:focus {
  outline: none;
  border-color: var(--orange);
  box-shadow: 0 0 0 3px rgba(255, 158, 34, 0.2);
}

.tk-form-row,
.lr-form-row,
.kit-form-row,
.bed-form-row,
.svc-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.tk-consent,
.lr-consent,
.kit-consent,
.bed-consent,
.svc-consent {
  display: flex !important;
  align-items: flex-start;
  gap: 10px;
  font-size: 12.5px !important;
  color: var(--muted);
  font-weight: 400 !important;
  margin: 12px 0 16px;
}

.tk-consent input,
.lr-consent input,
.kit-consent input,
.bed-consent input,
.svc-consent input {
  width: 17px !important;
  height: 17px !important;
  margin-top: 2px;
  flex-shrink: 0;
}

.tk-submit-btn,
.lr-submit-btn,
.kit-submit-btn,
.bed-submit-btn,
.svc-submit-btn {
  width: 100%;
  padding: 15px;
  border-radius: var(--radius-btn);
  background: var(--orange);
  color: #171714;
  font: 700 16px var(--font-head);
  border: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  transition: all 0.2s;
}

.tk-submit-btn:hover,
.lr-submit-btn:hover,
.kit-submit-btn:hover,
.bed-submit-btn:hover,
.svc-submit-btn:hover {
  background: var(--orange-hover);
  transform: translateY(-1px);
}

.tk-form-badge,
.lr-form-badge,
.kit-form-badge,
.bed-form-badge,
.svc-form-badge {
  text-align: center;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 10px;
}

.tk-form-status,
.lr-form-status,
.kit-form-status,
.bed-form-status,
.svc-form-status {
  font-size: 13px;
  margin-top: 10px;
  text-align: center;
  font-weight: 600;
  display: none;
}

.tk-form-status.active,
.lr-form-status.active,
.kit-form-status.active,
.bed-form-status.active,
.svc-form-status.active {
  display: block;
}

.tk-form-status.success,
.lr-form-status.success,
.kit-form-status.success,
.bed-form-status.success,
.svc-form-status.success {
  color: #1e7e34;
}

.tk-form-status.error,
.lr-form-status.error,
.kit-form-status.error,
.bed-form-status.error,
.svc-form-status.error {
  color: #b02a37;
}

/* ================= 4. THANH TRUST BAR (CAM KẾT MINH BẠCH) ================= */
.tk-trust,
.lr-trust-bar,
.kit-trust-bar,
.bed-trust-bar,
.svc-trust-bar {
  background: #ffffff;
  border-bottom: 1px solid var(--stone);
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.03);
}

.tk-trust .tk-shell,
.lr-trust-grid,
.kit-trust-grid,
.bed-trust-grid,
.svc-trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}

.tk-trust-item,
.lr-trust-item,
.kit-trust-item,
.bed-trust-item,
.svc-trust-item {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 20px;
  border-right: 1px solid var(--stone);
}

.tk-trust-item:last-child,
.lr-trust-item:last-child,
.kit-trust-item:last-child,
.bed-trust-item:last-child,
.svc-trust-item:last-child {
  border-right: 0;
}

.tk-trust-item .num,
.lr-trust-item .num,
.kit-trust-item .num,
.bed-trust-item .num,
.svc-trust-item .num {
  font: 800 24px var(--font-head);
  color: var(--orange);
  line-height: 1;
}

.tk-trust-item .info strong,
.lr-trust-item .info strong,
.kit-trust-item .info strong,
.bed-trust-item .info strong,
.svc-trust-item .info strong {
  display: block;
  font: 700 14.5px var(--font-head);
  color: var(--ink);
  margin-bottom: 3px;
}

.tk-trust-item .info span,
.lr-trust-item .info span,
.kit-trust-item .info span,
.bed-trust-item .info span,
.svc-trust-item .info span {
  font-size: 12.5px;
  color: var(--muted);
}

/* ================= 5. KHỐI SECTION TIÊU CHUẨN ================= */
.tk-section,
.lr-section,
.kit-section,
.bed-section,
.svc-section {
  padding: 85px 0;
}

.tk-section--warm,
.lr-section--warm,
.kit-section--warm,
.bed-section--warm,
.svc-section--warm {
  background: var(--cream);
}

.tk-section--dark,
.lr-section--dark,
.kit-section--dark,
.bed-section--dark,
.svc-section--dark {
  background: var(--dark);
  color: #fff;
}

.tk-section-head,
.lr-section-head,
.kit-section-head,
.bed-section-head,
.svc-section-head {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 54px;
}

.tk-section-head h2,
.lr-section-head h2,
.kit-section-head h2,
.bed-section-head h2,
.svc-section-head h2 {
  font: 700 clamp(28px, 3.8vw, 46px)/1.15 var(--font-head);
  letter-spacing: -0.03em;
  margin: 0 0 14px;
}

/* Tiêu đề h2 trong section nền tối: Màu chữ trắng (#ffffff) */
.tk-section--dark .tk-section-head h2,
.lr-section--dark .lr-section-head h2,
.kit-section--dark .kit-section-head h2,
.bed-section--dark .bed-section-head h2,
.svc-section--dark .svc-section-head h2,
.np-section--dark .svc-section-head h2,
.ch-section--dark .svc-section-head h2,
.tk-section--dark h2,
.lr-section--dark h2,
.kit-section--dark h2,
.bed-section--dark h2,
.svc-section--dark h2,
.entry-content .tk-section--dark h2,
.entry-content .lr-section--dark h2,
.entry-content .kit-section--dark h2,
.entry-content .bed-section--dark h2,
.entry-content .svc-section--dark h2 {
  color: #ffffff !important;
}

.tk-section-head h2 em,
.lr-section-head h2 em,
.kit-section-head h2 em,
.bed-section-head h2 em,
.svc-section-head h2 em {
  font-style: normal;
  color: var(--orange) !important;
}

.tk-section-head p,
.lr-section-head p,
.kit-section-head p,
.bed-section-head p,
.svc-section-head p {
  font-size: 16px;
  color: var(--muted);
  margin: 0;
}

.tk-section--dark .tk-section-head p,
.lr-section--dark .lr-section-head p,
.kit-section--dark .kit-section-head p,
.bed-section--dark .bed-section-head p,
.svc-section--dark .svc-section-head p {
  color: #b3aea6;
}

/* ================= 6. BỘ TÍNH DỰ TOÁN TƯƠNG TÁC (ESTIMATOR) ================= */
.tk-calculator,
.lr-calculator,
.kit-calculator,
.bed-calculator,
.svc-calculator {
  background: #ffffff;
  border-radius: 18px;
  border: 1px solid var(--stone);
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.06);
  padding: 40px;
  margin-top: 30px;
}

.tk-calc-grid,
.lr-calc-grid,
.kit-calc-grid,
.bed-calc-grid,
.svc-calc-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 45px;
  align-items: start;
}

.tk-calc-group,
.lr-calc-group,
.kit-calc-group,
.bed-calc-group,
.svc-calc-group {
  margin-bottom: 24px;
}

.tk-calc-label,
.lr-calc-label,
.kit-calc-label,
.bed-calc-label,
.svc-calc-label {
  font: 700 14px var(--font-head);
  margin-bottom: 10px;
  display: block;
  color: #2c2824;
}

.tk-range-wrap,
.lr-range-wrap,
.kit-range-wrap,
.bed-range-wrap,
.svc-range-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
}

.tk-range-slider,
.lr-range-slider,
.kit-range-slider,
.bed-range-slider,
.svc-range-slider {
  flex: 1;
  accent-color: var(--orange);
  height: 8px;
  cursor: pointer;
}

.tk-range-val,
.lr-range-val,
.kit-range-val,
.bed-range-val,
.svc-range-val {
  min-width: 90px;
  text-align: right;
  font: 700 20px var(--font-head);
  color: var(--orange);
}

.tk-radio-tiles,
.lr-radio-tiles,
.kit-radio-tiles,
.bed-radio-tiles,
.svc-radio-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}

.tk-tile,
.lr-tile,
.kit-tile,
.bed-tile,
.svc-tile {
  cursor: pointer;
  border: 1.5px solid var(--stone);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
  transition: all 0.2s;
  background: #fff;
}

.tk-tile input,
.lr-tile input,
.kit-tile input,
.bed-tile input,
.svc-tile input {
  display: none;
}

.tk-tile strong,
.lr-tile strong,
.kit-tile strong,
.bed-tile strong,
.svc-tile strong {
  display: block;
  font: 700 14px var(--font-head);
  margin-bottom: 4px;
  color: var(--ink);
}

.tk-tile small,
.lr-tile small,
.kit-tile small,
.bed-tile small,
.svc-tile small {
  font-size: 11.5px;
  color: var(--muted);
  display: block;
}

.tk-tile:hover,
.lr-tile:hover,
.kit-tile:hover,
.bed-tile:hover,
.svc-tile:hover {
  border-color: var(--orange);
}

.tk-tile.active,
.lr-tile.active,
.kit-tile.active,
.bed-tile.active,
.svc-tile.active {
  border-color: var(--orange);
  background: var(--orange-light);
  box-shadow: 0 0 0 2px var(--orange);
}

.tk-addon-list,
.lr-addon-list,
.kit-addon-list,
.bed-addon-list,
.svc-addon-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.tk-addon-card,
.lr-addon-card,
.kit-addon-card,
.bed-addon-card,
.svc-addon-card {
  border: 1px solid var(--stone);
  border-radius: 8px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.2s;
}

.tk-addon-card:hover,
.lr-addon-card:hover,
.kit-addon-card:hover,
.bed-addon-card:hover,
.svc-addon-card:hover {
  border-color: var(--orange);
}

.tk-addon-card input,
.lr-addon-card input,
.kit-addon-card input,
.bed-addon-card input,
.svc-addon-card input {
  accent-color: var(--orange);
  width: 18px;
  height: 18px;
}

.tk-addon-card span,
.lr-addon-card span,
.kit-addon-card span,
.bed-addon-card span,
.svc-addon-card span {
  font-size: 13px;
  font-weight: 600;
  color: #333;
}

.tk-addon-card small,
.lr-addon-card small,
.kit-addon-card small,
.bed-addon-card small,
.svc-addon-card small {
  display: block;
  color: var(--muted);
  font-size: 11px;
}

/* Khối hiển thị kết quả tính */
.tk-calc-summary,
.lr-calc-summary,
.kit-calc-summary,
.bed-calc-summary,
.svc-calc-summary {
  background: var(--dark);
  color: #fff;
  border-radius: 14px;
  padding: 32px 28px;
  position: sticky;
  top: 90px;
}

.tk-calc-summary h4,
.lr-calc-summary h4,
.kit-calc-summary h4,
.bed-calc-summary h4,
.svc-calc-summary h4 {
  font: 700 13px var(--font-head);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--orange);
  margin: 0 0 8px;
}

.tk-calc-price,
.lr-calc-price,
.kit-calc-price,
.bed-calc-price,
.svc-calc-price {
  font: 700 clamp(32px, 3.5vw, 44px) var(--font-head);
  color: #ffffff;
  margin: 0 0 4px;
  line-height: 1.1;
}

.tk-calc-price em,
.lr-calc-price em,
.kit-calc-price em,
.bed-calc-price em,
.svc-calc-price em {
  font-style: normal;
  color: var(--orange);
}

.tk-calc-range,
.lr-calc-range,
.kit-calc-range,
.bed-calc-range,
.svc-calc-range {
  font-size: 12.5px;
  color: #aaa59c;
  margin-bottom: 22px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  padding-bottom: 16px;
}

.tk-calc-items,
.lr-calc-items,
.kit-calc-items,
.bed-calc-items,
.svc-calc-items {
  list-style: none;
  padding: 0;
  margin: 0 0 24px;
  font-size: 13.5px;
  display: grid;
  gap: 9px;
  color: #dcd7cf;
}

.tk-calc-items li,
.lr-calc-items li,
.kit-calc-items li,
.bed-calc-items li,
.svc-calc-items li {
  display: flex;
  justify-content: space-between;
  gap: 12px;
}

.tk-calc-items li b,
.lr-calc-items li b,
.kit-calc-items li b,
.bed-calc-items li b,
.svc-calc-items li b {
  color: #fff;
}

.tk-calc-summary .tk-btn,
.lr-calc-summary .lr-btn,
.kit-calc-summary .kit-btn,
.bed-calc-summary .bed-btn,
.svc-calc-summary .svc-btn {
  width: 100%;
}

.tk-calc-note,
.lr-calc-note,
.kit-calc-note,
.bed-calc-note,
.svc-calc-note {
  font-size: 11.5px;
  color: #928e85;
  text-align: center;
  margin-top: 12px;
}

/* ================= 7. SUB-SERVICES CARDS (DẪN TỚI 3 DỊCH VỤ CON) ================= */
.tk-subservices-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tk-subservice-card {
  background: #ffffff;
  border: 1px solid var(--stone);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  transition: transform 0.25s, border-color 0.25s, box-shadow 0.25s;
  display: flex;
  flex-direction: column;
}

.tk-subservice-card:hover {
  transform: translateY(-5px);
  border-color: var(--orange);
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.1);
}

.tk-subservice-img {
  position: relative;
  height: 220px;
  overflow: hidden;
}

.tk-subservice-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.tk-subservice-card:hover .tk-subservice-img img {
  transform: scale(1.06);
}

.tk-subservice-tag {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(23, 23, 20, 0.85);
  color: var(--orange);
  font: 700 11px var(--font-head);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.tk-subservice-body {
  padding: 26px 22px;
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tk-subservice-body h3 {
  font: 700 20px var(--font-head);
  margin: 0 0 8px;
  color: var(--ink);
}

.tk-subservice-body p {
  font-size: 14px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 16px;
  flex: 1;
}

.tk-subservice-footer {
  border-top: 1px dashed var(--stone);
  padding-top: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.tk-subservice-price {
  font: 700 13.5px var(--font-head);
  color: #b86200;
}

.tk-subservice-link {
  font: 700 13px var(--font-head);
  color: var(--ink);
  text-decoration: none !important;
  text-decoration-line: none !important;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  transition: color 0.2s;
}

.tk-subservice-card:hover .tk-subservice-link {
  color: var(--orange);
}

/* ================= 8. HẠNG MỤC THI CÔNG & CARD SCOPES ================= */
.lr-scope-grid,
.kit-scope-grid,
.bed-scope-grid,
.svc-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.lr-scope-card,
.kit-scope-card,
.bed-scope-card,
.svc-scope-card {
  background: #ffffff;
  border: 1px solid var(--stone);
  border-radius: 12px;
  overflow: hidden;
  transition: transform 0.25s, box-shadow 0.25s;
}

.lr-scope-card:hover,
.kit-scope-card:hover,
.bed-scope-card:hover,
.svc-scope-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.08);
  border-color: var(--orange);
}

.lr-scope-img,
.kit-scope-img,
.bed-scope-img,
.svc-scope-img {
  position: relative;
  height: 210px;
  overflow: hidden;
}

.lr-scope-img img,
.kit-scope-img img,
.bed-scope-img img,
.svc-scope-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.lr-scope-card:hover .lr-scope-img img,
.kit-scope-card:hover .kit-scope-img img,
.bed-scope-card:hover .bed-scope-img img,
.svc-scope-card:hover .svc-scope-img img {
  transform: scale(1.05);
}

.lr-scope-badge,
.kit-scope-badge,
.bed-scope-badge,
.svc-scope-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  background: rgba(23, 23, 20, 0.85);
  color: var(--orange);
  font: 700 11px var(--font-head);
  padding: 4px 10px;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

.lr-scope-body,
.kit-scope-body,
.bed-scope-body,
.svc-scope-body {
  padding: 24px 20px;
}

.lr-scope-body h3,
.kit-scope-body h3,
.bed-scope-body h3,
.svc-scope-body h3 {
  font: 700 18px var(--font-head);
  margin: 0 0 8px;
  color: var(--ink);
}

.lr-scope-body p,
.kit-scope-body p,
.bed-scope-body p,
.svc-scope-body p {
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.6;
  margin: 0 0 14px;
}

.lr-scope-price,
.kit-scope-price,
.bed-scope-price,
.svc-scope-price {
  font: 700 13px var(--font-head);
  color: #b86200;
  border-top: 1px dashed var(--stone);
  padding-top: 12px;
}

/* Lưới 12 không gian thi công của trang trọn gói */
.tk-scope-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
  margin-top: 42px;
}

.tk-scope-grid article {
  min-height: 140px;
  padding: 22px;
  border: 1px solid var(--line);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background: #fff;
  transition: 0.2s;
}

.tk-scope-grid article:hover {
  border-color: var(--orange);
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.05);
}

.tk-scope-grid span {
  font: 700 12px var(--font-head);
  color: var(--orange);
}

.tk-scope-grid h3 {
  font: 700 17px/1.35 var(--font-head);
  margin: 12px 0 0;
}

/* Benefit Grid - 5 Cam Kết Vàng */
.tk-benefits {
  background: var(--cream, #fbf9f5);
}

.tk-benefit-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  margin-top: 44px;
}

.tk-benefit-grid article {
  padding: 28px 22px;
  min-height: 220px;
  border: 1px solid var(--stone, #e8e3da);
  border-radius: 12px;
  background: #ffffff;
  transition: all 0.25s ease;
  display: flex;
  flex-direction: column;
}

.tk-benefit-grid article:hover {
  transform: translateY(-3px);
  border-color: var(--orange);
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.06);
}

.tk-benefit-grid b {
  display: block;
  color: var(--orange);
  font: 700 13px var(--font-head);
}

.tk-benefit-grid h3 {
  font: 700 20px/1.35 var(--font-head);
  margin: 38px 0 12px;
}

.tk-benefit-grid p {
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

/* ================= 9. QUY TRÌNH THI CÔNG ================= */
.tk-process,
.tk-section.tk-process {
  background: var(--dark, #1f1c18) !important;
  color: #ffffff !important;
  position: relative;
}

.tk-process .tk-section-head h2,
.lr-section--dark .lr-section-head h2,
.kit-section--dark .kit-section-head h2,
.bed-section--dark .bed-section-head h2,
.svc-section--dark .svc-section-head h2,
.np-section--dark .svc-section-head h2,
.ch-section--dark .svc-section-head h2 {
  color: #ffffff !important;
}

.tk-process .tk-section-head h2 em,
.lr-section--dark .lr-section-head h2 em,
.kit-section--dark .kit-section-head h2 em,
.bed-section--dark .bed-section-head h2 em,
.svc-section--dark .svc-section-head h2 em,
.np-section--dark .svc-section-head h2 em,
.ch-section--dark .svc-section-head h2 em {
  color: var(--orange) !important;
}

.tk-process .tk-section-head p,
.lr-section--dark .lr-section-head p,
.kit-section--dark .kit-section-head p,
.bed-section--dark .bed-section-head p,
.svc-section--dark .svc-section-head p {
  color: #b3aea6 !important;
}

/* Danh sách 8 bước quy trình thi công - Dạng 8 Card hiện đại chống lỗi viền */
.tk-process-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 48px 0 0 !important;
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 20px !important;
  border: 0 !important;
}

.tk-process-list li {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-radius: 12px;
  padding: 26px 22px;
  position: relative;
  transition: all 0.28s ease;
  display: flex;
  flex-direction: column;
}

.tk-process-list li:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--orange) !important;
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.35);
}

.tk-process-list b {
  display: inline-block;
  color: var(--orange);
  font: 800 24px/1 var(--font-head);
  letter-spacing: 0.04em;
  margin-bottom: 14px;
}

.tk-process-list h3 {
  font: 700 18px/1.35 var(--font-head);
  color: #ffffff;
  margin: 0 0 10px;
}

.tk-process-list p {
  color: #c8c3bc;
  font-size: 14px;
  line-height: 1.65;
  margin: 0;
  flex-grow: 1;
}

/* Fallback bảo vệ tương phản cao trong trường hợp section nền sáng */
.tk-section:not(.tk-process):not(.tk-section--dark) .tk-process-list li {
  background: #ffffff;
  border: 1px solid var(--stone, #e8e3da) !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.tk-section:not(.tk-process):not(.tk-section--dark) .tk-process-list h3 {
  color: var(--ink, #171714);
}
.tk-section:not(.tk-process):not(.tk-section--dark) .tk-process-list p {
  color: var(--muted, #66625b);
}

/* Lưới quy trình 6 bước của các trang con */
.lr-process-grid,
.kit-process-grid,
.bed-process-grid,
.svc-process-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.lr-process-card,
.kit-process-card,
.bed-process-card,
.svc-process-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 28px 24px;
  transition: all 0.25s;
}

.lr-process-card:hover,
.kit-process-card:hover,
.bed-process-card:hover,
.svc-process-card:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: var(--orange);
  transform: translateY(-3px);
}

.lr-process-card .step-num,
.kit-process-card .step-num,
.bed-process-card .step-num,
.svc-process-card .step-num {
  font: 800 28px var(--font-head);
  color: var(--orange);
  margin-bottom: 14px;
}

.lr-process-card h3,
.kit-process-card h3,
.bed-process-card h3,
.svc-process-card h3 {
  font: 700 18px var(--font-head);
  margin: 0 0 10px;
  color: #fff;
}

.lr-process-card p,
.kit-process-card p,
.bed-process-card p,
.svc-process-card p {
  font-size: 14px;
  color: #c4beb4;
  line-height: 1.6;
  margin: 0;
}

/* ================= 10. BẢNG GIÁ EMBED ================= */
.tk-price-head {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 70px;
  align-items: end;
}

.tk-price-note {
  padding: 18px 20px;
  background: #fff7eb;
  border-left: 4px solid var(--orange);
  line-height: 1.65;
  border-radius: 4px;
}

.tk-price-frame,
.lr-pricing-frame,
.kit-pricing-frame,
.bed-pricing-frame,
.svc-pricing-frame {
  width: 100%;
  height: 680px;
  border: 1px solid var(--line);
  margin-top: 38px;
  background: #fff;
  border-radius: 8px;
  display: block;
}

.lr-pricing-frame-wrap,
.kit-pricing-frame-wrap,
.bed-pricing-frame-wrap,
.svc-pricing-frame-wrap {
  background: #ffffff;
  border: 1px solid var(--stone);
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 14px 40px rgba(0, 0, 0, 0.05);
}

.tk-price-links,
.lr-pricing-actions,
.kit-pricing-actions,
.bed-pricing-actions,
.svc-pricing-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 24px;
}

.tk-price-links .tk-btn--ghost {
  color: var(--ink) !important;
  border-color: var(--line);
}

/* ================= 11. THƯ VIỆN ẢNH DỰ ÁN THỰC TẾ ================= */
.lr-gallery-grid,
.kit-gallery-grid,
.bed-gallery-grid,
.svc-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.lr-gallery-item,
.kit-gallery-item,
.bed-gallery-item,
.svc-gallery-item {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 320px;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.lr-gallery-item img,
.kit-gallery-item img,
.bed-gallery-item img,
.svc-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s;
}

.lr-gallery-item:hover img,
.kit-gallery-item:hover img,
.bed-gallery-item:hover img,
.svc-gallery-item:hover img {
  transform: scale(1.08);
}

.lr-gallery-overlay,
.kit-gallery-overlay,
.bed-gallery-overlay,
.svc-gallery-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(23, 20, 16, 0.9) 0%, rgba(23, 20, 16, 0.2) 60%, transparent 100%);
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 24px;
  color: #fff;
}

.lr-gallery-overlay span,
.kit-gallery-overlay span,
.bed-gallery-overlay span,
.svc-gallery-overlay span {
  font: 700 11px var(--font-head);
  letter-spacing: 0.12em;
  color: var(--orange);
  text-transform: uppercase;
}

.lr-gallery-overlay h3,
.kit-gallery-overlay h3,
.bed-gallery-overlay h3,
.svc-gallery-overlay h3 {
  font: 700 19px var(--font-head);
  margin: 4px 0 6px;
}

.lr-gallery-overlay p,
.kit-gallery-overlay p,
.bed-gallery-overlay p,
.svc-gallery-overlay p {
  font-size: 13px;
  color: #ddd;
  margin: 0;
}

/* ================= 12. FAQ ACCORDION ================= */
.tk-faq details,
.lr-faq-item,
.kit-faq-item,
.bed-faq-item,
.svc-faq-item {
  border-bottom: 1px solid var(--line);
  padding: 22px 0;
}

.lr-faq-wrap,
.kit-faq-wrap,
.bed-faq-wrap,
.svc-faq-wrap {
  max-width: 860px;
  margin: 0 auto;
}

.lr-faq-item:first-child,
.kit-faq-item:first-child,
.bed-faq-item:first-child,
.svc-faq-item:first-child {
  border-top: 1px solid var(--line);
}

.tk-faq summary,
.lr-faq-item summary,
.kit-faq-item summary,
.bed-faq-item summary,
.svc-faq-item summary {
  cursor: pointer;
  list-style: none;
  font: 700 18px var(--font-head);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 20px;
}

.tk-faq summary::-webkit-details-marker,
.lr-faq-item summary::-webkit-details-marker,
.kit-faq-item summary::-webkit-details-marker,
.bed-faq-item summary::-webkit-details-marker,
.svc-faq-item summary::-webkit-details-marker {
  display: none;
}

.lr-faq-item summary:after,
.kit-faq-item summary:after,
.bed-faq-item summary:after,
.svc-faq-item summary:after {
  content: "+";
  font: 700 22px var(--font-head);
  color: var(--orange);
}

.lr-faq-item[open] summary:after,
.kit-faq-item[open] summary:after,
.bed-faq-item[open] summary:after,
.svc-faq-item[open] summary:after {
  content: "−";
}

.tk-faq details p,
.lr-faq-item p,
.kit-faq-item p,
.bed-faq-item p,
.svc-faq-item p {
  max-width: 850px;
  color: var(--muted);
  line-height: 1.75;
  margin: 12px 0 0;
}

/* ================= 13. BOTTOM CONVERSION CTA BANNER ================= */
.tk-cta,
.lr-cta-banner,
.kit-cta-banner,
.bed-cta-banner,
.svc-cta-banner {
  background: var(--orange);
  padding: 85px 0;
}

.tk-cta-grid,
.lr-cta-grid,
.kit-cta-grid,
.bed-cta-grid,
.svc-cta-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.75fr;
  gap: 60px;
  align-items: center;
}

.tk-cta-grid h2,
.lr-cta-copy h2,
.kit-cta-copy h2,
.bed-cta-copy h2,
.svc-cta-copy h2 {
  font: 700 clamp(32px, 4.5vw, 54px)/1.12 var(--font-head);
  color: #171714;
  margin: 0 0 16px;
  letter-spacing: -0.03em;
}

.tk-cta-grid p,
.lr-cta-copy p,
.kit-cta-copy p,
.bed-cta-copy p,
.svc-cta-copy p {
  font-size: 17px;
  color: #3b2a14;
  line-height: 1.65;
  margin: 0 0 24px;
}

.tk-quick-form,
.lr-cta-box,
.kit-cta-box,
.bed-cta-box,
.svc-cta-box {
  background: #fff;
  padding: 32px 28px;
  border-radius: 16px;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12);
}

.tk-quick-form h3,
.lr-cta-box h3,
.kit-cta-box h3,
.bed-cta-box h3,
.svc-cta-box h3 {
  font: 700 20px var(--font-head);
  margin: 0 0 8px;
  color: var(--ink);
}

/* ================= 14. STICKY CTA (DESKTOP RIGHT RAIL + MOBILE BOTTOM BAR) ================= */
.tk-mobile-cta,
.lr-sticky-cta,
.kit-sticky-cta,
.bed-sticky-cta,
.svc-sticky-cta {
  position: fixed;
  z-index: 90;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tk-mobile-cta a,
.lr-sticky-btn,
.kit-sticky-btn,
.bed-sticky-btn,
.svc-sticky-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 155px;
  min-height: 52px;
  padding: 10px 14px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none !important;
  text-decoration-line: none !important;
  font: 800 13px/1.25 var(--font-head);
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.15);
  transition: transform 0.2s, box-shadow 0.2s;
}

.tk-mobile-cta a:first-child,
.lr-sticky-btn.price,
.kit-sticky-btn.price,
.bed-sticky-btn.price,
.svc-sticky-btn.price {
  background: #ffffff;
  color: #171714 !important;
  border: 1px solid #e1d7c9;
}

.tk-mobile-cta a:last-child,
.lr-sticky-btn.quote,
.kit-sticky-btn.quote,
.bed-sticky-btn.quote,
.svc-sticky-btn.quote {
  background: var(--orange);
  color: #17120c !important;
  animation: aro-pulse 2.2s ease-out infinite;
}

.tk-mobile-cta a:hover,
.lr-sticky-btn:hover,
.kit-sticky-btn:hover,
.bed-sticky-btn:hover,
.svc-sticky-btn:hover {
  transform: translateX(-4px);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.22);
}

@keyframes aro-pulse {
  0%, 60%, 100% { box-shadow: 0 0 0 0 rgba(255, 158, 34, 0.5); }
  75% { box-shadow: 0 0 0 14px rgba(255, 158, 34, 0); }
}

/* ================= 15. RESPONSIVE MEDIA QUERIES ================= */
@media (max-width: 1024px) {
  .tk-hero-grid,
  .lr-hero-grid,
  .kit-hero-grid,
  .bed-hero-grid,
  .svc-hero-grid,
  .tk-calc-grid,
  .lr-calc-grid,
  .kit-calc-grid,
  .bed-calc-grid,
  .svc-calc-grid,
  .tk-cta-grid,
  .lr-cta-grid,
  .kit-cta-grid,
  .bed-cta-grid,
  .svc-cta-grid,
  .tk-price-head {
    grid-template-columns: 1fr;
    gap: 36px;
  }
  .tk-trust .tk-shell,
  .lr-trust-grid,
  .kit-trust-grid,
  .bed-trust-grid,
  .svc-trust-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tk-subservices-grid {
    grid-template-columns: 1fr;
  }
  .tk-benefit-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tk-scope-grid,
  .lr-scope-grid,
  .kit-scope-grid,
  .bed-scope-grid,
  .svc-scope-grid,
  .tk-process-list,
  .lr-process-grid,
  .kit-process-grid,
  .bed-process-grid,
  .svc-process-grid,
  .lr-gallery-grid,
  .kit-gallery-grid,
  .bed-gallery-grid,
  .svc-gallery-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  body {
    padding-bottom: 68px;
  }
  .tk-shell,
  .lr-shell,
  .kit-shell,
  .bed-shell,
  .svc-shell {
    width: min(100% - 28px, var(--container));
  }
  .tk-hero,
  .lr-hero,
  .kit-hero,
  .bed-hero,
  .svc-hero {
    padding: 70px 0 50px;
    min-height: auto;
  }
  .tk-trust .tk-shell,
  .lr-trust-grid,
  .kit-trust-grid,
  .bed-trust-grid,
  .svc-trust-grid {
    grid-template-columns: 1fr;
  }
  .tk-trust-item,
  .lr-trust-item,
  .kit-trust-item,
  .bed-trust-item,
  .svc-trust-item {
    border-right: 0;
    border-bottom: 1px solid var(--stone);
    padding: 16px 14px;
  }
  .tk-trust-item:last-child,
  .lr-trust-item:last-child,
  .kit-trust-item:last-child,
  .bed-trust-item:last-child,
  .svc-trust-item:last-child {
    border-bottom: 0;
  }
  .tk-calculator,
  .lr-calculator,
  .kit-calculator,
  .bed-calculator,
  .svc-calculator {
    padding: 24px 18px;
  }
  .tk-radio-tiles,
  .lr-radio-tiles,
  .kit-radio-tiles,
  .bed-radio-tiles,
  .svc-radio-tiles {
    grid-template-columns: 1fr;
  }
  .tk-addon-list,
  .lr-addon-list,
  .kit-addon-list,
  .bed-addon-list,
  .svc-addon-list {
    grid-template-columns: 1fr;
  }
  .tk-form-row,
  .lr-form-row,
  .kit-form-row,
  .bed-form-row,
  .svc-form-row {
    grid-template-columns: 1fr;
  }
  .tk-scope-grid,
  .lr-scope-grid,
  .kit-scope-grid,
  .bed-scope-grid,
  .svc-scope-grid,
  .lr-gallery-grid,
  .kit-gallery-grid,
  .bed-gallery-grid,
  .svc-gallery-grid,
  .tk-benefit-grid {
    grid-template-columns: 1fr;
  }
  .tk-process-list,
  .lr-process-grid,
  .kit-process-grid,
  .bed-process-grid,
  .svc-process-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .tk-price-frame,
  .lr-pricing-frame,
  .kit-pricing-frame,
  .bed-pricing-frame,
  .svc-pricing-frame {
    height: 520px;
  }
  .tk-price-links,
  .lr-pricing-actions,
  .kit-pricing-actions,
  .bed-pricing-actions,
  .svc-pricing-actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tk-price-links .tk-btn,
  .lr-pricing-actions .lr-btn,
  .kit-pricing-actions .kit-btn,
  .bed-pricing-actions .bed-btn,
  .svc-pricing-actions .svc-btn {
    width: 100%;
  }

  /* Mobile Sticky Bottom Bar */
  .tk-mobile-cta,
  .lr-sticky-cta,
  .kit-sticky-cta,
  .bed-sticky-cta,
  .svc-sticky-cta {
    top: auto;
    bottom: 0;
    left: 0;
    right: 0;
    transform: none;
    flex-direction: row;
    background: #ffffff;
    padding: 8px 12px;
    box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.12);
    border-top: 1px solid var(--stone);
    gap: 8px;
  }
  .tk-mobile-cta a,
  .lr-sticky-btn,
  .kit-sticky-btn,
  .bed-sticky-btn,
  .svc-sticky-btn {
    flex: 1;
    width: auto;
    min-height: 46px;
    box-shadow: none;
    border-radius: 8px;
    font-size: 13px;
  }
  .tk-mobile-cta a:hover,
  .lr-sticky-btn:hover,
  .kit-sticky-btn:hover,
  .bed-sticky-btn:hover,
  .svc-sticky-btn:hover {
    transform: none;
  }
}
