/* ---- base.css ---- */
/* Khung chung site Mộc Đông Dương. Kích thước bám noithattugia.com (Roboto, container 1230, header 68/60,
   nút viên thuốc gradient, menu thả 268px). Màu lấy từ logo gỗ: xanh rêu đậm cho header, gradient vàng đồng → gỗ.
   Muốn đổi sang tông khác chỉ cần sửa các biến trong :root. */
:root {
  color-scheme: light;
  --dark: #0E2A27;          /* header, khối tối (Tứ Gia #03242E) */
  --dark-2: #0A201E;        /* menu thả, menu điện thoại (Tứ Gia #01202A) */
  --dark-line: #1D3B37;     /* kẻ giữa các dòng menu */
  --main: #8A5A2B;          /* màu chính: nút, viền, chữ nhấn (Tứ Gia #239964) */
  --main-2: #7A4E24;        /* chữ nhấn trên nền sáng */
  --accent: #DDAA68;        /* chữ nhấn trên nền tối, mục menu đang rê */
  --gold: #EDC77F;          /* cụm chữ tô trên hero (Tứ Gia #D6E805) */
  --yellow: #F6D995;        /* số hotline, nút trên dải CTA (Tứ Gia #FCEE21) */
  --grad: linear-gradient(90deg, #E9C27C -300%, #8A5A2B 100%);
  --grad-orange: linear-gradient(270deg, #F0A533 -6.88%, #FFC555 100%);
  --call: linear-gradient(92.83deg, #E8462B 0%, #A4161A 100%);
  --ink: #212121;
  --text: #333333;
  --muted: #888888;
  --muted-2: #565656;
  --bg: #FFFFFF;
  --bg-gray: #F7F7F7;
  --ph: #EDEDED;
  --line: #DDDDDD;
  --line-2: #E7E7E7;
  --line-foot: #DBDBDB;
  --copy-bg: #EEEEEE;
  --cream: #F4EFE4;
  --zalo: #0068FF;
  --fb: #1877F2;
  --red: #D93025;
  --wrap: 1230px;
  --gut: max(16px, env(safe-area-inset-left, 0px));
  --gut-r: max(16px, env(safe-area-inset-right, 0px));
  --head: 68px;
  --font: "Roboto", "Helvetica Neue", Helvetica, Arial, sans-serif;
}
@media (max-width: 1023px) { :root { --head: 60px; } }

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--head) + 16px); }
body { margin: 0; background: var(--bg); color: var(--text); font: 400 16px/1.5 var(--font); }
body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 300; background: var(--dark); }
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
h1, h2, h3, h4, p, ul, ol, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
h1, h2, h3, h4 { color: var(--ink); text-wrap: balance; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 400; background: var(--bg); color: var(--ink); padding: 8px 14px; border-radius: 8px; }
.skip:focus { top: calc(env(safe-area-inset-top, 0px) + 8px); }
:focus-visible { outline: 2px solid var(--main); outline-offset: 2px; }
.page { overflow-x: clip; }

/* ---------------------------------------------------------------- khung, lưới */
.container { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-left: var(--gut); padding-right: var(--gut-r); }
@media (min-width: 1024px) { .container { padding-left: max(15px, env(safe-area-inset-left, 0px)); padding-right: max(15px, env(safe-area-inset-right, 0px)); } }
.p40 { padding-block: 40px; }
.bg-gray { background: var(--bg-gray); }
.row-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: center; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px 24px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 24px; }
@media (max-width: 1023px) { .grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) {
  .p40 { padding-block: 20px; }
  .row-2, .grid-3, .grid-2 { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .grid-4 { gap: 16px; }
}

/* ---------------------------------------------------------------- tiêu đề khối (.tg_top) */
.sh { padding-bottom: 44px; }
.sh-label { font-size: 18px; line-height: 27px; color: var(--muted); }
.sh-title { font-size: 34px; line-height: 44px; font-weight: 700; color: var(--ink); }
.sh-desc { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--text); }
.sh-center { text-align: center; max-width: 800px; margin-inline: auto; }
@media (max-width: 767px) {
  .sh { padding-bottom: 24px; }
  .sh-label { font-size: 16px; line-height: 24px; }
  .sh-title { font-size: 24px; line-height: 36px; }
}
.hl { color: var(--gold); font-weight: 700; }

/* ---------------------------------------------------------------- nút */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 0 40px;
  border-radius: 30px; background: var(--grad); color: #fff; font-size: 16px; font-weight: 500; line-height: 1.25; text-align: center;
  overflow: hidden; isolation: isolate; border: 0; cursor: pointer; }
.btn::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .06); transform: scaleX(0); transform-origin: left; transition: transform .5s; z-index: -1; }
.btn:hover::after { transform: scaleX(1); }
.btn-i { padding-right: 70px; }
.btn-c { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); width: 36px; height: 36px; border-radius: 50%; background: #fff;
  color: var(--main); display: grid; place-items: center; font-size: 20px; }
.btn-lg { min-height: 68px; border-radius: 50px; font-weight: 700; padding-left: 34px; padding-right: 80px; }
.btn-lg .btn-c { right: 16px; }
.btn-orange { background: var(--grad-orange); }
.btn-orange .btn-c { color: #C9781A; }
.btn-zalo { background: var(--zalo); }
.btn-zalo .btn-c { color: var(--zalo); }
.btn-out { background: #fff; color: var(--main-2); border: 1px solid var(--main); min-height: 34px; padding: 0 34px 0 14px; font-size: 14px; }
.btn-out .btn-c { width: 20px; height: 20px; right: 6px; background: var(--grad); color: #fff; font-size: 12px; }
.btn-glass { background: rgba(255, 255, 255, .2); min-height: 68px; border-radius: 52px; font-size: 14px; padding: 0 30px; gap: 12px; backdrop-filter: blur(2px); }
.btn-glass .ic { font-size: 22px; }
.btn-ghost { background: #fff; color: var(--main-2); box-shadow: inset 0 0 0 1px var(--main); }
.cta-in { margin: 24px 0; text-align: center; }

/* ---------------------------------------------------------------- header */
.head { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 230; height: var(--head); background: var(--dark); box-shadow: 1px 2px 0 rgba(0, 0, 0, .1); color: #fff; transition: background .2s; }
.is-home .head { position: fixed; left: 0; right: 0; }
.head-trans { background: transparent; box-shadow: none; }
.head-trans.fix, .head-trans.menu-open, .head-trans:has(.menu-1 > li:hover), .head-trans:has(.menu-1 > li:focus-within) { background: var(--dark); box-shadow: 1px 2px 0 rgba(0, 0, 0, .1); }
.head-row { height: 100%; display: flex; align-items: center; gap: 16px; }
.logo { display: inline-flex; align-items: center; gap: 8px; flex: none; color: inherit; }
.logo img { width: auto; height: 48px; }
.logo-t { display: grid; line-height: 1.15; }
.logo-t b { font-size: 16px; font-weight: 700; letter-spacing: .01em; text-transform: uppercase; }
.logo-t small { font-size: 10.5px; color: var(--gold); text-transform: uppercase; letter-spacing: .06em; margin-top: 2px; }
.menu { flex: 1; display: flex; align-items: center; }
.menu-1 { display: flex; height: var(--head); margin-left: 24px; }
.menu-1 > li { position: static; display: flex; align-items: center; }
.menu-1 > li > a { position: relative; display: flex; align-items: center; gap: 4px; height: 100%; padding: 22px 10px; font-size: 16px; line-height: 24px; transition: color .2s ease-in-out; white-space: nowrap; }
.menu-1 > li > a::before { content: ""; position: absolute; left: 10px; right: 100%; bottom: 0; height: 2px; background: var(--accent); transition: right .3s; }
.menu-1 > li.is-on > a::before, .menu-1 > li:focus-within > a::before { right: 10px; }
.menu-1 > li.is-on > a, .menu-1 > li:focus-within > a { color: var(--accent); }
@media (hover: hover) {
  .menu-1 > li:hover > a::before { right: 10px; }
  .menu-1 > li:hover > a { color: var(--accent); }
}
.chev { font-size: 14px; display: inline-flex; }
.menu-1 > li > .sub-tg { display: none; }
.menu-1 > li.has-sub { position: relative; }
.menu-2 { position: absolute; top: var(--head); left: 0; width: 268px; background: var(--dark-2); box-shadow: 1px 2px 0 rgba(0, 0, 0, .1); display: none; }
.menu-1 > li:hover > .menu-2, .menu-1 > li:focus-within > .menu-2 { display: block; }
.menu-2 > li { position: static; display: flex; flex-wrap: wrap; align-items: center; border-bottom: 1px solid var(--dark-line); }
.menu-2 > li > a { flex: 1; padding: 8px 10px; min-height: 41px; display: flex; align-items: center; font-size: 16px; font-weight: 500; line-height: 24px; color: #fff; }
.menu-2 > li > a:focus-visible { color: var(--accent); }
@media (hover: hover) { .menu-2 > li:hover > a { color: var(--accent); } }
.menu-2 .sub-tg { display: none; }
.menu-3 { position: absolute; left: 100%; top: 0; width: 268px; min-height: 100%; padding: 10px; background: var(--dark-2); display: flex; align-content: start; flex-wrap: wrap; gap: 8px;
  visibility: hidden; opacity: 0; transition: visibility 0s linear .25s, opacity .12s linear .13s; }
.menu-2 > li:hover > .menu-3, .menu-2 > li:focus-within > .menu-3 { visibility: visible; opacity: 1; transition-delay: 0s; z-index: 2; }
.menu-2:hover > li:not(:hover) > .menu-3 { z-index: 1; }
@media (max-width: 1279px) { .menu-1 > li:nth-last-child(-n+3) .menu-3 { left: auto; right: 100%; } }
.chip { display: inline-flex; align-items: center; justify-content: center; min-width: calc(50% - 4px); padding: 5px 10px; border: 1px dashed var(--accent); border-radius: 8px; color: #fff; font-size: 16px; font-weight: 500; line-height: 24px; }
.chip:hover { background: rgba(221, 170, 104, .14); }
.menu-cta { display: none; }
.head-tools { display: flex; align-items: center; gap: 12px; margin-left: auto; position: relative; }
.search-tg { width: 36px; height: 36px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 18px; }
.head.fix .search-tg { display: none; }
.search { position: absolute; top: calc(100% + 16px); right: 205px; width: 260px; display: none; }
.search.open { display: block; }
.search input { width: 100%; height: 42px; border-radius: 30px; border: 0; background: #fff; color: var(--ink); padding: 0 56px 0 18px; font-size: 15px; box-shadow: 0 6px 18px rgba(0, 0, 0, .15); }
.search button[type=submit] { position: absolute; right: 0; top: 0; width: 50px; height: 42px; border-radius: 30px; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 18px; }
.search-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; background: #fff; border-radius: 12px; box-shadow: 2px 2px 15px rgba(0, 0, 0, .15); max-height: 60vh; overflow: auto; z-index: 5; color: var(--ink); }
.search-res a { display: block; padding: 10px 16px; border-bottom: 1px solid var(--line-2); font-size: 15px; line-height: 21px; }
.search-res a small { display: block; color: var(--muted); font-size: 12px; }
.search-res a:hover, .search-res a.is-on { background: var(--bg-gray); color: var(--main-2); }
.search-res .empty { padding: 12px 16px; color: var(--muted); font-size: 14px; }
.head-cta { min-height: 44px; padding: 0 40px; font-size: 16px; font-weight: 400; white-space: nowrap; }
.burger { display: none; width: 44px; height: 44px; margin-right: -5px; position: relative; z-index: 2; }
.burger span, .burger::before, .burger::after { content: ""; position: absolute; left: 9px; width: 26px; height: 2px; background: #fff; transition: transform .2s, opacity .2s; }
.burger span { top: 21px; } .burger::before { top: 13px; } .burger::after { top: 29px; }
.menu-open .burger span { opacity: 0; }
.menu-open .burger::before { transform: translateY(8px) rotate(45deg); }
.menu-open .burger::after { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 1199px) and (min-width: 1024px) {
  .menu-1 { margin-left: 8px; }
  .menu-1 > li > a { padding-inline: 7px; font-size: 15px; }
  .menu-1 > li > a::before { left: 7px; }
  .head-cta { padding: 0 20px; }
  .logo-t { display: none; }
  .search { right: 160px; }
}

/* header điện thoại */
@media (max-width: 1023px) {
  .head-row { gap: 10px; }
  .logo img { height: 36px; }
  .logo-t b { font-size: 12.5px; letter-spacing: 0; }
  .logo-t small { font-size: 8.5px; letter-spacing: .02em; }
  .head-tools { flex: 1; min-width: 0; justify-content: flex-end; gap: 8px; }
  .search-tg, .head-cta { display: none; }
  .search { position: relative; display: block; top: auto; right: auto; flex: 1; max-width: 220px; min-width: 0; }
  .head.fix .search { display: none; }
  .search input { box-shadow: none; padding: 0 42px 0 14px; height: 40px; font-size: 14px; }
  .search button[type=submit] { height: 40px; width: 40px; }
  .search-res { position: fixed; top: calc(var(--head) + env(safe-area-inset-top, 0px) + 6px); left: 12px; right: 12px; }
  .burger { display: block; }
  .menu { position: fixed; inset: 0; z-index: 1; display: none; flex-direction: column; align-items: stretch; overflow-y: auto; overscroll-behavior: contain;
    padding: calc(96px + env(safe-area-inset-top, 0px)) var(--gut-r) calc(40px + env(safe-area-inset-bottom, 0px)) var(--gut);
    background: radial-gradient(120% 60% at 0% 100%, rgba(138, 90, 43, .35), transparent 60%), var(--dark-2); }
  .menu-open .menu { display: flex; }
  .menu-open .logo { position: relative; z-index: 2; }
  .menu-1 { flex-direction: column; height: auto; margin: 0; }
  .menu-1 > li, .menu-1 > li.has-sub { display: flex; flex-wrap: wrap; align-items: center; }
  .menu-1 > li > a { flex: 1; height: auto; padding: 10px 0; font-size: 18px; line-height: 27px; font-weight: 500; }
  .menu-1 > li > a::before { display: none; }
  .menu-1 > li.is-on > a { color: var(--accent); }
  .chev { display: none; }
  .menu-1 .sub-tg { display: grid !important; place-items: center; width: 44px; height: 44px; margin-right: -7px; color: var(--accent); font-size: 20px; transition: transform .2s; }
  .sub-tg[aria-expanded="true"] { transform: rotate(-180deg); }
  .menu-2, .menu-3 { position: static; width: 100%; box-shadow: none; background: transparent; display: none; min-height: 0; padding: 0 0 6px 20px; visibility: visible; opacity: 1; transition: none; }
  .menu-1 > li:hover > .menu-2, .menu-1 > li:focus-within > .menu-2, .menu-2 > li:hover > .menu-3, .menu-2 > li:focus-within > .menu-3 { display: none; }
  .menu-1 > li.open > .menu-2 { display: block; }
  .menu-2 > li { border: 0; }
  .menu-2 > li > a { padding: 10px 10px 10px 0; min-height: 44px; }
  .menu-2 > li.open > .menu-3 { display: flex; padding: 4px 0 10px; }
  .chip { min-width: calc(50% - 4px); min-height: 44px; font-size: 15px; }
  .menu-cta { display: flex; margin-top: 24px; min-height: 44px; }
}
@media (max-width: 359px) { .logo-t { display: none; } }

/* ---------------------------------------------------------------- đường dẫn */
.crumb { background: var(--bg-gray); }
.crumb ol { display: flex; flex-wrap: wrap; gap: 4px 0; padding-block: 12px; font-size: 14px; line-height: 21px; color: var(--muted); }
.crumb li:not(:last-child)::after { content: "/"; margin: 0 8px; color: #bbb; }
.crumb a:hover { color: var(--main-2); }
.crumb [aria-current] { color: var(--ink); }

/* ---------------------------------------------------------------- thẻ dự án, thẻ bài */
.pcard-img { position: relative; display: block; aspect-ratio: 384 / 250; border-radius: 12px; overflow: hidden; background: var(--ph); }
.pcard-img img, .bcard-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.pcard:hover .pcard-img img, .bcard:hover .bcard-img img { transform: scale(1.1); }
.pcard-pin { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; gap: 6px; padding: 84px 18px 18px; color: #fff; font-size: 16px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .7)); }
/* Nhãn "Ảnh thật" trên thẻ dự án có ảnh chủ xưởng chụp tại công trình */
.pcard-real { position: absolute; top: 12px; left: 12px; padding: 4px 10px; border-radius: 999px; background: rgba(0, 0, 0, .62); color: #fff; font-size: 13px; line-height: 18px; font-weight: 500; }
.pcard-t { margin-top: 20px; font-size: 18px; line-height: 27px; font-weight: 600; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard-t a:hover { color: var(--main-2); }
.pcard { container-type: inline-size; }
.pmeta { display: flex; flex-wrap: nowrap; gap: 8px 24px; margin-top: 12px; font-size: 14px; color: var(--muted); }
.pmeta li { display: flex; align-items: center; gap: 8px; flex: none; white-space: nowrap; }
.pmeta li:last-child { flex: 0 1 auto; min-width: 0; }
.pmeta li:last-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@container (max-width: 380px) { .pmeta { column-gap: 16px; } .pmeta li { gap: 6px; } .pmeta .ic { font-size: 20px; } }
@container (max-width: 335px) { .pmeta { column-gap: 12px; font-size: 13px; } .pmeta li { gap: 5px; } .pmeta .ic { font-size: 18px; } }
.pmeta .ic { font-size: 22px; color: var(--main); }
.bcard-img { display: block; aspect-ratio: 242 / 157; border-radius: 12px; overflow: hidden; background: var(--ph); }
.bcard-t { margin-top: 16px; font-size: 16px; line-height: 27px; font-weight: 600; text-wrap: pretty; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.bcard-t a:hover { color: var(--main-2); }
.bmeta { display: flex; flex-wrap: wrap; gap: 4px 18px; margin-top: 8px; font-size: 14px; font-weight: 500; color: var(--muted); }
.bmeta li { display: flex; align-items: center; gap: 6px; }
.bmeta .ic { font-size: 16px; }
.bcard-ex { margin-top: 10px; font-size: 16px; line-height: 24px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }

/* ô giữ chỗ cho ảnh thật */
.cho { position: relative; display: grid; place-items: center; width: 100%; max-width: 100%; border-radius: 12px; overflow: hidden; color: var(--muted-2);
  background: repeating-linear-gradient(135deg, #F1EDE6 0 14px, #ECE6DC 14px 28px); border: 1px dashed #CDBFA9; }
.cho-in { display: grid; justify-items: center; gap: 6px; padding: 16px; text-align: center; }
.cho .ic { font-size: 34px; color: var(--main); stroke-width: 1.4; }
.cho-t { font-size: 15px; line-height: 21px; font-weight: 500; color: var(--ink); max-width: 26ch; }
.cho small { font-size: 12px; color: var(--muted-2); }
.blank { display: inline-block; max-width: 100%; line-height: 1.35; vertical-align: baseline; padding: 0 5px; border-radius: 4px; border: 1px dashed #C9A774; background: #FBF4E8; color: #8A5A2B; font-size: .92em; }
.blank-block { padding: 16px; border: 1px dashed var(--line); border-radius: 12px; color: var(--muted); }

/* ---------------------------------------------------------------- slider */
.sl { position: relative; --n: var(--d); }
.sl-track { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - (var(--n) - 1) * var(--gap)) / var(--n)); gap: var(--gap);
  overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.sl-track::-webkit-scrollbar { display: none; }
.sl-item { scroll-snap-align: start; min-width: 0; }
.sl-ctrl { display: flex; align-items: center; gap: 12px; margin-top: 24px; }
.sl-btn { width: 44px; height: 44px; border-radius: 8px; display: grid; place-items: center; font-size: 20px; flex: none; }
.sl-prev { background: var(--line-2); color: var(--ink); }
.sl-next { background: var(--grad); color: #fff; }
.sl-btn:disabled { opacity: .45; cursor: default; }
.sl-dots { display: flex; gap: 20px; flex: 1; margin-left: 52px; }
.sl-dots button { flex: 0 1 108px; height: 2px; background: var(--line); }
.sl-dots button.is-on { background: var(--main); }
.sl-dots button::before { content: ""; display: block; height: 20px; margin-top: -9px; }
.sl-br .sl-dots { order: -1; margin: 0 auto 0 0; padding-right: 40px; }
.sl-center { justify-content: center; }
.sl-center .sl-dots { display: none; }
.sl-none .sl-btn { display: none; }
@media (max-width: 1023px) { .sl { --n: var(--t); } }
@media (max-width: 767px) {
  .sl { --n: var(--m); }
  .sl-track { padding-right: var(--peek); scroll-padding-left: 0; }
  .sl-ctrl { justify-content: center; }
  .sl-dots { display: none; }
}

/* ---------------------------------------------------------------- form */
.pform { display: flex; flex-wrap: wrap; gap: 12px; }
.pform-f { position: relative; flex: 1; min-width: 200px; max-width: 400px; display: flex; align-items: center; }
.pform-f .ic { position: absolute; left: 20px; font-size: 20px; color: var(--main); }
.pform input { width: 100%; height: 52px; border: 0; border-radius: 52px; background: #fff; padding: 0 20px 0 50px; color: var(--ink); font-size: 16px; }
.pform .btn { min-height: 52px; }
.form-err { flex-basis: 100%; color: #FFD7D2; font-size: 14px; }
.pform-note { flex-basis: 100%; font-size: 14px; opacity: .85; }
.on-light .form-err, .pop .form-err { color: var(--red); }

/* ---------------------------------------------------------------- nội dung bài (entry) */
.entry { color: var(--text); font-size: 16px; line-height: 26px; }
.entry > * + * { margin-top: 16px; }
.entry h2 { margin-top: 36px; font-size: 26px; line-height: 36px; font-weight: 700; }
.entry h3 { margin-top: 28px; font-size: 20px; line-height: 30px; font-weight: 600; }
.entry h4 { margin-top: 20px; font-size: 18px; line-height: 27px; font-weight: 600; }
.entry a:not(.btn) { color: var(--main-2); text-decoration: underline; text-underline-offset: 3px; }
.entry ul, .entry ol { padding-left: 22px; }
.entry ul { list-style: disc; }
.entry ol { list-style: decimal; }
.entry li + li { margin-top: 6px; }
.entry li::marker { color: var(--main); }
.entry strong, .entry b { color: var(--ink); }
.entry blockquote { margin: 24px 0; padding: 16px 20px; border-left: 3px solid var(--main); background: var(--bg-gray); font-style: italic; }
.entry .tbl, .tbl { overflow-x: auto; }
.entry table { width: 100%; border-collapse: collapse; font-size: 15px; line-height: 22px; }
.entry th, .entry td { border: 1px solid var(--line); padding: 10px 12px; text-align: left; vertical-align: top; }
.entry th { background: var(--bg-gray); color: var(--ink); font-weight: 600; }
.fig img { width: 100%; border-radius: 8px; }
.entry .fig, .entry > figure.cho { max-width: 800px; margin-inline: auto; }
.entry .fig-doc { max-width: 480px; }
.entry td.n, .entry th.n { text-align: center; }
.nw { white-space: nowrap; }
.cta-in .btn span { text-wrap: balance; }
.fig figcaption { margin-top: 8px; text-align: center; font-size: 14px; line-height: 21px; font-style: italic; color: var(--muted-2); }
.entry figure.cho { margin-top: 20px; }
.entry-cards { margin-block: 24px; }
.hr { border: 0; border-top: 1px solid var(--line-2); margin: 32px 0; }

.toc { margin: 24px 0; border: 1px solid var(--line); border-radius: 4px; background: #F9F9F9; width: fit-content; min-width: min(100%, 220px); max-width: min(600px, 100%); }
.toc-head { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; font-size: 18px; font-weight: 600; color: var(--ink); }
.toc-head .ic { font-size: 22px; padding: 3px; border: 1px solid var(--line); border-radius: 4px; width: 30px; height: 30px; background: #fff; }
.toc-list { padding: 0 16px 14px !important; list-style: none !important; font-size: 15px; line-height: 22px; }
.toc-list ol { padding-left: 20px !important; list-style: none !important; margin-top: 0; }
.toc-list li, .entry .toc-list li + li { margin-top: 2px; }
.toc-list a { display: flex; gap: 4px; padding-block: 1px; color: var(--main-2) !important; text-decoration: none !important; }
.toc-list .toc-n { flex: none; }
@media (max-width: 767px) { .toc-list a { padding-block: 10px; } .toc-list li, .entry .toc-list li + li { margin-top: 0; } }
.toc-list a:hover { text-decoration: underline !important; }

.company { margin-top: 32px; padding: 20px 24px; background: var(--bg-gray); border-radius: 12px; }
.company-t { font-size: 18px; font-weight: 700; color: var(--ink); margin-bottom: 8px; }
.company ul { list-style: none !important; padding: 0 !important; }
.company li { font-size: 15px; line-height: 24px; }
.company li + li { margin-top: 4px; }

.share { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.share-t { font-weight: 600; color: var(--ink); margin-right: 4px; }
.share-b { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 20px; }
.share-fb { background: var(--fb); } .share-zalo { background: var(--zalo); } .share-copy { background: var(--muted-2); }
.share-ok { font-size: 14px; color: var(--main-2); }
.author { display: flex; gap: 20px; align-items: flex-start; }
.author-av { flex: none; width: 88px; height: 88px; border-radius: 50%; background: var(--cream); display: grid; place-items: center; font-size: 40px; color: var(--main); border: 1px dashed #CDBFA9; }
.author-n { font-size: 18px; font-weight: 700; color: var(--ink); }
.author-r { font-size: 14px; color: var(--muted); margin-top: 2px; }
.author-d { margin-top: 8px; font-size: 15px; line-height: 23px; }
.related-t { font-size: 26px; line-height: 36px; font-weight: 700; margin-bottom: 24px; }

/* trang nội dung mặc định (page.php của Tứ Gia): 1 cột 1200, H1 22px */
.page-entry { padding-block: 40px; }
.page-entry .entry-title { font-size: 22px; line-height: 33px; font-weight: 700; margin-bottom: 10px; }
.page-entry .entry { line-height: 24px; }
.page-entry .entry > * + * { margin-top: 10px; }
.page-entry .entry h2 { margin-top: 24px; font-size: 24px; line-height: 31px; }
.page-entry .entry h3 { margin-top: 20px; font-size: 18.67px; line-height: 24px; font-weight: 700; }
.page-entry .entry h2 + h3 { margin-top: 14px; }
.page-entry .entry li + li { margin-top: 4px; }
.page-entry .company { margin-top: 24px; }
@media (max-width: 767px) {
  .page-entry { padding-block: 20px; }
  .entry h2 { font-size: 22px; line-height: 32px; }
  .page-entry .entry-title { font-size: 24px; line-height: 36px; }
  .page-entry .entry h3 { font-size: 18px; line-height: 23.4px; }
  .share-b { width: 44px; height: 44px; }
  .author { flex-direction: column; gap: 12px; }
}

.pg { display: flex; justify-content: center; gap: 8px; margin-top: 40px; }
.pg-c { min-width: 40px; height: 40px; border-radius: 8px; display: grid; place-items: center; background: var(--line-2); font-weight: 500; color: var(--ink); }
.pg-c.is-on { background: var(--grad); color: #fff; }

/* ---------------------------------------------------------------- dải CTA hotline trước footer */
.cta-strip { background: var(--grad); color: #fff; padding-block: 55px; }
.cta-row { display: flex; align-items: center; justify-content: center; gap: 40px; }
.cta-hot { position: relative; padding-left: 78px; flex: none; }
.cta-hot p, .cta-num { white-space: nowrap; }
.cta-hot > .ic { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 54px; stroke-width: 1.3; }
.cta-hot p { font-size: 18px; line-height: 27px; }
.cta-num { display: block; font-size: 34px; line-height: 44px; font-weight: 700; color: var(--yellow); }
.cta-line { width: 1px; height: 60px; background: rgba(255, 255, 255, .8); }
.cta-t { font-size: 28px; line-height: 40px; font-weight: 600; max-width: 520px; text-wrap: balance; }
.cta-btn { border: 0; cursor: pointer; font: inherit; font-weight: 500; display: inline-flex; align-items: center; justify-content: center; min-width: 176px; height: 52px; padding: 0 28px; border-radius: 52px; background: var(--yellow); color: var(--ink); font-weight: 500; }
.cta-btn:hover { background: #fff; }
@media (min-width: 1024px) and (max-width: 1199px) {
  .cta-row { gap: 24px; }
  .cta-hot { padding-left: 64px; }
  .cta-hot > .ic { font-size: 44px; }
  .cta-num { font-size: 28px; line-height: 38px; }
  .cta-t { font-size: 22px; line-height: 32px; max-width: 380px; }
}
@media (max-width: 1023px) {
  .cta-row { flex-direction: column; gap: 16px; text-align: center; }
  .cta-hot { padding-left: 0; display: grid; justify-items: center; }
  .cta-hot > .ic { position: static; transform: none; font-size: 40px; margin-bottom: 6px; }
  .cta-num { font-size: 26px; line-height: 34px; min-height: 44px; display: inline-flex; align-items: center; }
  .cta-line { width: 60px; height: 1px; }
  .cta-t { font-size: 20px; line-height: 30px; }
  .cta-strip { padding-block: 32px; }
}

/* ---------------------------------------------------------------- footer */
.foot { background: var(--bg-gray); color: var(--ink); }
.foot-top { display: grid; grid-template-columns: 282px minmax(0, 1fr); gap: 24px; padding-top: 100px; }
.logo-foot { color: var(--ink); }
.logo-foot img { height: 64px; }
.logo-foot .logo-t b { font-size: 18px; color: var(--ink); }
.logo-foot .logo-t small { color: var(--main-2); }
.foot-name { padding: 20px 0; font-size: 16px; line-height: 24px; font-weight: 600; text-transform: uppercase; text-wrap: balance; }
.fcontact li { position: relative; padding-left: 60px; min-height: 45px; display: grid; align-content: center; font-size: 16px; line-height: 21px; }
.fcontact li + li { margin-top: 14px; }
.fcontact b { font-weight: 700; }
.fcontact a:hover { color: var(--main-2); }
.fic { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 45px; height: 45px; border-radius: 10px; background: var(--main); color: #fff; display: grid; place-items: center; font-size: 22px; }
.foot-mst { margin-top: 16px; font-size: 16px; }
.socs { display: flex; gap: 12px; margin-top: 16px; }
.soc { position: relative; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 19px; }
.soc::before { content: ""; position: absolute; inset: -6px; }
.soc-fb { background: var(--fb); } .soc-zalo { background: var(--zalo); } .soc-ms { background: linear-gradient(45deg, #0099FF, #A033FF 60%, #FF5280); }
.foot-links { display: flex; justify-content: space-between; gap: 24px; }
.fcol { max-width: 200px; }
.fcol-t { font-size: 20px; line-height: 30px; font-weight: 600; color: var(--text); margin-bottom: 8px; }
.fcol li a { font-size: 14px; line-height: 32px; font-weight: 500; color: var(--ink); }
.fcol li a:hover { color: var(--main-2); }
.fcol-map { max-width: 300px; width: 300px; }
.fmap { position: relative; display: block; border-radius: 8px; overflow: hidden; }
.fmap img { width: 100%; aspect-ratio: 276 / 200; object-fit: cover; }
.fmap span { position: absolute; left: 8px; bottom: 8px; display: flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 20px; background: #fff; font-size: 13px; font-weight: 500; box-shadow: 0 2px 8px rgba(0, 0, 0, .15); }
.fmap .ic { color: var(--red); }
.ffb { margin-top: 12px; display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 8px; background: #fff; border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
.ffb .ic { font-size: 22px; color: var(--fb); }
@media (min-width: 1024px) and (max-width: 1199px) {
  .foot-top { grid-template-columns: 240px minmax(0, 1fr); }
  .foot-links { gap: 20px; }
  .fcol { flex: 1 1 0; max-width: none; min-width: 0; }
  .fcol-map { display: none; }
  .fcol-t { font-size: 18px; line-height: 27px; }
  .fcol li a { display: inline-block; line-height: 22px; padding-block: 5px; }
}
.foot-local { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 15px; padding-block: 44px; border-top: 1px solid var(--line-foot); }
.floc p { font-size: 16px; font-weight: 700; padding-bottom: 12px; }
.floc span { font-size: 14px; line-height: 21px; }
.foot-bot { background: var(--copy-bg); }
.foot-bot p { padding-block: 24px; text-align: center; font-size: 14px; line-height: 21px; }
@media (max-width: 1023px) {
  .foot-top { grid-template-columns: minmax(0, 1fr); padding-top: 32px; }
  .foot-info { order: 2; border-top: 1px solid var(--line-foot); padding-top: 24px; }
  .foot-links { order: 1; flex-wrap: wrap; justify-content: flex-start; gap: 16px 0; }
  .fcol { flex: 0 0 50%; max-width: 50%; padding-right: 12px; }
  .fcol-map { display: none; }
  .fcol li a { line-height: 22px; display: inline-block; padding-block: 7px; text-wrap: balance; }
  .logo-foot { display: none; }
  .foot-name { padding-top: 0; }
  .fcontact li { padding-left: 44px; font-size: 14px; }
  .fic { width: 32px; height: 32px; font-size: 17px; border-radius: 8px; background: var(--ink); }
  .foot-local { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-block: 24px; }
  .foot-bot p { padding-block: 20px calc(20px + 78px + env(safe-area-inset-bottom, 0px)); }
}

/* ---------------------------------------------------------------- nút nổi, thanh đáy, lên đầu trang */
.side-btns { position: fixed; right: 0; top: 300px; z-index: 200; width: 60px; padding: 10px; display: flex; flex-direction: column; gap: 10px;
  background: var(--main); border-radius: 30px 0 0 30px; padding-right: max(10px, env(safe-area-inset-right, 0px)); }
.side-btns::before, .side-btns::after { content: ""; position: absolute; right: 0; width: 30px; height: 30px; }
.side-btns::before { top: -30px; background: radial-gradient(circle at 0 0, transparent 29.5px, var(--main) 30px); }
.side-btns::after { bottom: -30px; background: radial-gradient(circle at 0 100%, transparent 29.5px, var(--main) 30px); }
.side-btns { --zalo-t: var(--main); }
.side-btns a { width: 40px; height: 40px; display: grid; place-items: center; color: #fff; font-size: 30px; }
.side-btns .ic { stroke-width: 1.5; }
.shake .ic { animation: shake 1.5s infinite; }
@keyframes shake { 0%, 50%, 100% { transform: rotate(0); } 10%, 30% { transform: rotate(-25deg); } 20%, 40% { transform: rotate(25deg); } }
.mbar { display: none; }
.to-top { position: fixed; right: max(20px, env(safe-area-inset-right, 0px)); bottom: 40px; z-index: 190; width: 36px; height: 36px; border-radius: 50%;
  background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 20px; opacity: 0; pointer-events: none; transition: opacity .3s; }
.to-top.show { opacity: 1; pointer-events: auto; }
@media (max-width: 1365px) { .side-btns { display: none; } }
@media (max-width: 1023px) {
  .page { padding-bottom: 0; }
  .mbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 100; display: grid; grid-template-columns: repeat(5, 1fr); align-items: end;
    height: calc(78px + env(safe-area-inset-bottom, 0px)); padding: 0 env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
    background: #fff; filter: drop-shadow(0 -2px 6px rgba(0, 0, 0, .1)); }
  /* Phần nhô trắng sau nút gọi: cung tròn bán kính 33 đồng tâm với nút 52px (viền trắng đều 7px), hai góc nối bo 10px
     tiếp tuyến với mép thanh. Tâm nút nằm dưới mép thanh 2px. */
  .mbar::before { content: ""; position: absolute; left: 50%; top: -40px; width: 120px; height: 44px; transform: translateX(-50%); pointer-events: none;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 44'%3E%3Cpath fill='%23fff' d='M0 44V40H18.71A10 10 0 0 0 28.31 32.79A33 33 0 0 1 91.69 32.79A10 10 0 0 0 101.29 40H120V44Z'/%3E%3C/svg%3E") center / 120px 44px no-repeat; }
  .mbar a { display: grid; justify-items: center; gap: 4px; padding-bottom: 12px; font-size: 11px; font-weight: 700; color: #313131; line-height: 1.2; }
  .mbar-i { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 18px; }
  .mi-fb { background: var(--fb); } .mi-bg { background: var(--main); } .mi-zalo { background: var(--zalo); } .mi-ms { background: linear-gradient(45deg, #0099FF, #A033FF 60%, #FF5280); }
  /* Nút gọi canh theo .mbar (không theo cột) để luôn đồng tâm với phần nhô; nhãn cùng hàng chữ với 4 nút còn lại */
  .mi-call { position: absolute; left: 50%; top: -24px; transform: translateX(-50%); width: 52px; height: 52px; background: var(--call);
    box-shadow: 0 3px 8px rgba(164, 22, 26, .35); font-size: 24px; }
  .mi-call .ic { animation: shake 1.5s infinite; }
  .mbar-call { padding-top: 36px; }
  .mbar-call .mbar-pill { color: #B3261E; }
  .to-top { right: max(10px, env(safe-area-inset-right, 0px)); bottom: calc(88px + env(safe-area-inset-bottom, 0px)); width: 44px; height: 44px; }
  .menu-lock .mbar { display: none; }
}
@media (prefers-reduced-motion: reduce) { .shake .ic, .mi-call .ic { animation: none; } .sl-track { scroll-behavior: auto; } * { transition-duration: .01ms !important; } }

/* ---------------------------------------------------------------- popup tư vấn (#p-now) */
.pop { position: fixed; inset: 0; z-index: 500; overflow-y: auto; padding: calc(30px + env(safe-area-inset-top, 0px)) var(--gut-r) 30px var(--gut); }
.pop-bg { position: fixed; inset: 0; background: rgba(0, 0, 0, .5); }
.pop-box { position: relative; max-width: 600px; margin: 0 auto; padding: 32px 15px 40px; border-radius: 16px; text-align: center; overflow: hidden;
  background: url(img/phong-ngu-ban-ve.webp) center bottom / 100% auto no-repeat, linear-gradient(180deg, var(--cream) 55%, rgba(244, 239, 228, .82)), var(--cream);
  background-blend-mode: normal; animation: popIn .25s ease-out; }
.pop-box::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--cream) 0 52%, rgba(244, 239, 228, .55) 80%, rgba(244, 239, 228, .3)); pointer-events: none; }
.pop-box > * { position: relative; }
@keyframes popIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.pop-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 30px; height: 30px; border-radius: 8px; background: var(--main); color: #fff; display: grid; place-items: center; font-size: 20px; }
.logo-pop { color: var(--ink); justify-content: center; }
.logo-pop img { height: 72px; }
.logo-pop .logo-t b { font-size: 20px; color: var(--ink); }
.logo-pop .logo-t small { color: var(--main-2); text-align: left; }
.pop-t { padding: 15px 0 6px; font-size: 24px; line-height: 36px; font-weight: 700; color: var(--dark); }
.pop-s { font-size: 18px; line-height: 27px; color: var(--text); max-width: 470px; margin: 0 auto; }
.pop-f { display: grid; gap: 16px; margin-top: 24px; justify-items: center; }
.pop-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; width: 100%; }
.pop-f input, .pop-f textarea { width: 100%; border: 1px solid #E2C17F; border-radius: 20px; background: #fff; padding: 8px 24px; font-size: 15px; font-weight: 500; color: var(--ink); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .05); }
.pop-f input { height: 52px; }
.pop-f textarea { border-radius: 12px; min-height: 100px; resize: vertical; background: #FBFBFB; border-color: #D8D8D8; }
.pop-f .form-err { margin: 0; }
.pop-f .btn { font-size: 19px; padding-left: 28px; }
.pop-promise { margin-top: 16px; font-size: 16px; line-height: 24px; color: #101835; }
.pop-or { position: relative; margin: 20px auto; max-width: 420px; height: 1px; background: #CFC6B6; }
.pop-or span { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); padding: 2px 14px; background: #EDEDED; border-radius: 20px; font-size: 14px; color: var(--muted-2); }
.pop-zalo { display: inline-flex; align-items: center; gap: 14px; min-width: 270px; min-height: 74px; padding: 8px 28px 8px 8px; border-radius: 50px; background: var(--zalo); color: #fff; text-align: left; }
.pop-zalo-i { --zalo-t: #fff; width: 58px; height: 58px; border-radius: 50%; border: 2px solid #fff; background: #fff; color: var(--zalo); display: grid; place-items: center; font-size: 40px; }
.pop-zalo b { display: block; font-size: 20px; line-height: 26px; }
.pop-zalo small { font-size: 14px; }
.pop-open { overflow: hidden; }
@media (max-width: 767px) {
  .pop { padding: 0; }
  .pop-box { min-height: 100%; border-radius: 0; padding: calc(40px + env(safe-area-inset-top, 0px)) var(--gut-r) calc(32px + env(safe-area-inset-bottom, 0px)) var(--gut); }
  .pop-x { top: calc(12px + env(safe-area-inset-top, 0px)); }
  .pop-row { grid-template-columns: 1fr; }
  .pop-name { display: none; }
  .pop-s { font-size: 16px; line-height: 24px; }
}

/* xem ảnh lớn */
.lb { position: fixed; inset: 0; z-index: 600; background: rgba(0, 0, 0, .88); display: grid; place-items: center; padding: 48px 64px; }
.lb figure { max-width: 100%; max-height: 100%; display: grid; gap: 10px; justify-items: center; }
.lb-img { max-height: calc(100vh - 140px); width: auto; border-radius: 6px; }
.lb-cap { color: #eee; font-size: 14px; text-align: center; }
.lb-x, .lb-p, .lb-n { position: absolute; color: #fff; font-size: 34px; width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, .12); display: grid; place-items: center; line-height: 1; }
.lb-x { top: calc(14px + env(safe-area-inset-top, 0px)); right: 14px; }
.lb-p { left: 10px; top: 50%; transform: translateY(-50%); }
.lb-n { right: 10px; top: 50%; transform: translateY(-50%); }
@media (max-width: 767px) { .lb { padding: 56px 8px; } .lb-p, .lb-n { top: auto; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); transform: none; } }

/* bài dài thu gọn (trang dịch vụ) */
.more { position: relative; }
.more-in { max-height: 640px; overflow: hidden; position: relative; }
.more-in::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 160px; background: linear-gradient(180deg, rgba(255, 255, 255, 0), var(--more-bg, #fff)); pointer-events: none; }
.more.open .more-in { max-height: none; }
.more.open .more-in::after { display: none; }
.more-btn { display: flex; margin: 16px auto 0; min-height: 44px; }

/* ---- chi-tiet.css ---- */
/* Trang chi tiết dự án và bài viết (tiền tố .ct-). Số đo theo template chi tiết của noithattugia.com:
   dự án toàn khung 1200 không sidebar; bài viết 9/3 (cột 894, thân bài 858, sidebar 282 dính). */

/* ---------------------------------------------------------------- khung chung */
.ct-art { padding-block: 40px; }
.ct-crumb .crumb { background: var(--bg-gray); border-radius: 4px; margin-bottom: 20px; }
.ct-crumb .crumb .container { padding: 0 15px; }
.ct-crumb .crumb ol { padding-block: 8px; gap: 2px 0; font-size: 13px; line-height: 19.5px; color: var(--text); }
.ct-crumb .crumb a { font-weight: 700; color: var(--ink); }
.ct-crumb .crumb a:hover { color: var(--main-2); }
.ct-crumb .crumb li:not(:last-child)::after { margin: 0 5px; color: var(--ink); }
.ct-crumb .crumb [aria-current] { color: var(--text); }
.ct-h1 { font-size: 22px; line-height: 33px; font-weight: 700; color: var(--ink); margin-bottom: 10px; text-wrap: pretty; }

.ct-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 24px; min-height: 59px; padding-block: 10px;
  border-bottom: 1px solid var(--ph); font-size: 16px; line-height: 24px; font-weight: 500; color: var(--text); }
.ct-meta li { display: flex; align-items: center; gap: 8px; }
.ct-meta .ic { font-size: 20px; color: var(--muted); }
.ct-av { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--dark); display: grid; place-items: center; overflow: hidden; }
.ct-av img { width: 22px; height: auto; }
.ct-au a:hover { color: var(--main-2); }

.ct-entry { margin-top: 20px; }
/* thang chữ thân bài theo Tứ Gia: đoạn 16/24 cách 10, H2 24/31,2 cách trên 20 dưới 10, H3 18,67 đậm, danh sách cách sau 20 */
.ct-entry { line-height: 24px; }
.ct-entry > * + * { margin-top: 10px; }
.ct-entry h2 { margin-top: 20px; font-size: 24px; line-height: 31.2px; }
.ct-entry h3 { margin-top: 20px; font-size: 18.67px; line-height: 24.27px; font-weight: 700; }
.ct-entry h4 { margin-top: 20px; }
.ct-entry li + li { margin-top: 4px; }
.ct-entry > :is(ul, ol) + * { margin-top: 20px; }
.ct-entry > .fig, .ct-entry > .tbl { margin-block: 15px; }
.ct-entry > .toc, .ct-entry > .cta-in { margin-block: 20px; }
.ct-entry > .company { margin-top: 24px; }
/* ảnh trong bài không phóng quá cỡ gốc; ô chờ ảnh thật gọn lại cho đỡ trống */
.ct-da .ct-entry > .fig { max-width: 960px; margin-inline: auto; }
.ct-entry > figure.cho { max-width: 640px; margin-inline: auto; }
.ct-cta-t { text-align: center; color: var(--text); }
.ct-entry .ct-cta-t + .cta-in { margin-top: 12px; }

/* đuôi bài: tiêu đề 28/36,4 600, lưới liên quan, thẻ có kẻ đáy như Tứ Gia */
.ct-tail { margin-top: 32px; }
.ct-tail > .hr:first-child { margin-top: 0; }
.ct-tail .related-t { font-size: 28px; line-height: 36.4px; font-weight: 600; margin-bottom: 0; }
.ct-rel { margin-top: 40px; }
.ct-rel .pcard, .ct-rel .bcard { padding-bottom: 16px; border-bottom: 1px solid var(--ph); }
.ct-rel .pcard-t { margin-top: 24px; }
.ct-rel .pcard-t, .ct-rel .bcard-t, .ct-si-t { text-wrap: pretty; }
.ct-rel .bcard-t { margin-top: 24px; font-size: 18px; line-height: 27px; }
/* 3 thông số thẻ dự án liên quan luôn một dòng: thẻ hẹp (1024, 768) thì icon, khe, chữ nhỏ lại theo bề rộng thẻ */
.ct-rel .pcard { container-type: inline-size; }
.ct-rel .pmeta li { white-space: nowrap; }
@container (max-width: 380px) {
  .ct-rel .pmeta { column-gap: 16px; }
  .ct-rel .pmeta li { gap: 6px; }
  .ct-rel .pmeta .ic { font-size: 20px; }
}
@container (max-width: 335px) {
  .ct-rel .pmeta { column-gap: 12px; font-size: 13px; }
  .ct-rel .pmeta li { gap: 5px; }
  .ct-rel .pmeta .ic { font-size: 18px; }
}

/* ---------------------------------------------------------------- thư viện ảnh dự án */
.ct-gal { margin-top: 20px; }
.ct-gal-main { position: relative; background: var(--ph); }
.ct-gal-track { display: grid; grid-auto-flow: column; grid-auto-columns: 100%; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; overscroll-behavior-x: contain; scroll-behavior: smooth; }
.ct-gal-track::-webkit-scrollbar, .ct-th-track::-webkit-scrollbar { display: none; }
.ct-gal-slide { display: block; aspect-ratio: 100 / 65; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; cursor: zoom-in; }
.ct-gal-slide img { width: 100%; height: 100%; object-fit: cover; }
.ct-gal-slide.is-tall { background: var(--cream); }
.ct-gal-slide.is-tall img { object-fit: contain; }
.ct-gal-slide:focus-visible { outline-offset: -4px; }
/* mũi tên trong vòng tròn tối 44px: ảnh phối cảnh tông trắng và nền kem của ảnh dọc vẫn thấy rõ (nét trắng trần thì không) */
.ct-gal-btn { position: absolute; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; font-size: 26px; background: rgba(0, 0, 0, .45); transition: background-color .2s; }
.ct-gal-btn .ic { stroke-width: 1.8; }
.ct-gal-btn:hover { background: rgba(0, 0, 0, .65); }
.ct-gal-prev { left: 16px; }
.ct-gal-prev .ic { margin-left: -2px; }
.ct-gal-next { right: 16px; }
.ct-gal-next .ic { margin-right: -2px; }

.ct-th-wrap { position: relative; padding: 10px; background: var(--ph); }
.ct-th-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 50px) / 6); gap: 10px;
  overflow-x: auto; scrollbar-width: none; scroll-snap-type: x proximity; scroll-behavior: smooth; overscroll-behavior-x: contain; }
.ct-th { position: relative; display: block; aspect-ratio: 100 / 65; overflow: hidden; scroll-snap-align: start; background: var(--line-2); }
.ct-th img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ct-th:hover img { transform: scale(1.06); }
.ct-th::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 0 var(--main); transition: box-shadow .2s; }
.ct-th.is-on::after { box-shadow: inset 0 0 0 3px var(--main); }
.ct-th-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 1; width: 36px; height: 48px; display: grid; place-items: center;
  font-size: 30px; color: var(--main); background: color-mix(in srgb, var(--ph) 88%, transparent); }
.ct-th-btn:disabled { opacity: 0; pointer-events: none; }
.ct-th-prev { left: 10px; border-radius: 0 8px 8px 0; }
.ct-th-next { right: 10px; border-radius: 8px 0 0 8px; }

/* hộp 4 thông số (box_oj_kh): nền xám nối liền dải ảnh nhỏ */
.ct-specs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px 24px; padding: 15px; margin-bottom: 15px; background: var(--ph); }
.ct-specs li { display: grid; align-content: start; font-size: 16px; line-height: 24px; color: var(--text); }
.ct-sp-l { display: flex; align-items: center; gap: 6px; font-weight: 700; }
.ct-sp-l .ic { font-size: 18px; color: var(--ink); stroke-width: 2; }
.ct-note { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 21px; color: var(--muted-2); }
.ct-note .ic { font-size: 18px; margin-top: 1px; color: var(--main); }

/* ---------------------------------------------------------------- mặt bằng bố trí (SVG) */
.ct-mb-list { display: grid; gap: 16px; justify-items: center; }
.ct-mb-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; width: 100%; max-width: 1000px; margin-inline: auto; }
.ct-mb { width: 100%; max-width: 500px; }
.ct-mb-2 .ct-mb { max-width: none; }
.ct-mb-svg { display: block; width: 100%; height: auto; }
.ct-mb-bg { fill: var(--cream); }
.ct-mb-r { fill: none; stroke: var(--ink); stroke-width: .9; }
.ct-mb-w { fill: none; stroke: var(--ink); stroke-width: 2.6; }
.ct-mb-f { fill: none; stroke: var(--muted); stroke-width: .8; stroke-dasharray: 2 1.5; }
.ct-mb-n { fill: var(--ink); font-family: var(--font); font-weight: 500; text-anchor: middle; }
.ct-mb-a { fill: var(--muted-2); font-family: var(--font); text-anchor: middle; }
.ct-mb figcaption { margin-top: 8px; font-size: 14px; line-height: 21px; font-style: italic; color: var(--muted-2); }
.ct-mb figcaption b { font-style: normal; color: var(--ink); font-weight: 600; }

/* ---------------------------------------------------------------- bài viết 9/3 + sidebar dính */
.ct-bv { display: grid; grid-template-columns: minmax(0, 1fr) 282px; gap: 24px; }
/* 1024–1339: cụm nút liên hệ dính mép phải (rộng 60) đè lên sidebar dính, chừa chỗ để sidebar kết thúc trước nó 10px */
.ct-bv-main { min-width: 0; }
.ct-w858 { max-width: 858px; }
.ct-cover { margin-top: 20px; margin-bottom: 0; }
.ct-cover img { width: 100%; }
.ct-side { padding-block: 40px; min-width: 0; }
.ct-side-in { position: sticky; top: calc(var(--head) + env(safe-area-inset-top, 0px) + 20px); }
.ct-side-tab { display: inline-block; padding: 0 12px; font-size: 16px; line-height: 36px; font-weight: 700; color: #fff; background: var(--grad); border-radius: 12px 16px 0 0; }
.ct-side-box { padding: 20px; background: var(--ph); border-top: 1px solid var(--main); border-radius: 0 8px 8px 8px; }
.ct-si-img { display: block; aspect-ratio: 100 / 65; border-radius: 8px; overflow: hidden; background: var(--bg-gray); }
.ct-si-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ct-si:hover .ct-si-img img { transform: scale(1.1); }
.ct-si-meta { display: flex; flex-wrap: wrap; gap: 4px 20px; margin-top: 16px; font-size: 16px; line-height: 24px; color: var(--muted); }
.ct-si-meta li { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ct-si-meta .ic { font-size: 20px; color: var(--main); }
.ct-si-t { margin: 8px 0 28px; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.ct-si-post .ct-si-t { margin-top: 14px; }
.ct-si-t a:hover { color: var(--main-2); }
.ct-side-more { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; border-radius: 30px;
  background: var(--grad); color: #fff; font-size: 16px; font-weight: 700; }
.ct-side-more .ic { font-size: 18px; }
.ct-side-more:hover { filter: brightness(1.08); }

/* ---------------------------------------------------------------- màn hình nhỏ */
@media (max-width: 1023px) {
  .ct-bv { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .ct-w858 { max-width: none; }
  .ct-side { padding-block: 0 40px; }
  .ct-side-in { position: static; }
}
@media (min-width: 600px) and (max-width: 1023px) {
  .ct-side-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; }
}
@media (max-width: 767px) {
  .ct-art { padding-block: 20px; }
  .ct-crumb .crumb { margin-bottom: 16px; }
  .ct-h1 { font-size: 24px; line-height: 36px; }
  .ct-meta { gap: 4px 12px; min-height: 0; padding-block: 12px; font-size: 13px; line-height: 20px; }
  .ct-meta li { gap: 6px; }
  .ct-meta .ic { font-size: 17px; }
  /* vùng bấm 44px mà không đổi bố cục: link breadcrumb, tên tác giả nở dọc bằng padding, bù lại bằng margin âm */
  .ct-crumb .crumb a { display: inline-block; padding-block: 12.25px; margin-block: -12.25px; }
  .ct-au a { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; }
  .ct-av { width: 28px; height: 28px; }
  .ct-av img { width: 19px; }
  .ct-gal-btn { font-size: 24px; }
  .ct-gal-prev { left: 10px; }
  .ct-gal-next { right: 10px; }
  .ct-th-track { grid-auto-columns: calc((100% - 30px) / 4); }
  /* nút cuộn dải ảnh nhỏ: vùng bấm 44×44, phần nền nhìn thấy vẫn là tab 28px sát mép để không che ảnh nhỏ */
  .ct-th-btn { width: 44px; height: 44px; font-size: 24px; background: none; }
  .ct-th-btn::before { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; width: 28px; background: color-mix(in srgb, var(--ph) 88%, transparent); }
  .ct-th-prev { justify-items: start; padding-left: 2px; }
  .ct-th-prev::before { left: 0; border-radius: 0 8px 8px 0; }
  .ct-th-next { justify-items: end; padding-right: 2px; }
  .ct-th-next::before { right: 0; border-radius: 8px 0 0 8px; }
  .ct-specs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; }
  .ct-specs li { font-size: 15px; line-height: 22px; }
  .ct-mb-2 { grid-template-columns: minmax(0, 1fr); }
  .ct-tail .related-t { font-size: 24px; line-height: 32px; }
  .ct-rel { margin-top: 20px; }
  .ct-rel .pcard-t { margin-top: 16px; -webkit-line-clamp: 2; }
  .ct-entry h3 { font-size: 18px; line-height: 23.4px; }
  .ct-art .author { flex-direction: column; gap: 12px; }
  .ct-side { padding-bottom: 32px; }
  .ct-side-box { padding: 16px; }
  .ct-si-t { margin-bottom: 20px; }
}

/* ---- danh-sach.css ---- */
/* Trang danh sách: dự án (mẫu A), chuyên mục bài viết toàn chiều rộng (mẫu B), có sidebar (mẫu C).
   Số đo theo noithattugia.com: lưới 1200 (thẻ 384, khe 24, hàng cách 40), ảnh 65% bo 12, hộp trắng bo 8. */

/* ---------------------------------------------------------------- mẫu A: banner ảnh + form */
.ds-ban { position: relative; overflow: hidden; isolation: isolate; padding-block: 50px; background: var(--dark); color: #fff; text-align: center; }
.ds-ban-img { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; object-position: center 42%; }
.ds-ban::before, .ds-ban::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
.ds-ban::before { z-index: -2; background: rgba(0, 0, 0, .4); }
.ds-ban::after { z-index: -1; background: linear-gradient(270deg, rgba(0, 0, 0, 0) 31.45%, rgba(0, 0, 0, .9) 99.42%); }
.ds-ban-in { max-width: 1030px; }
.ds-ban-t { color: #fff; font-size: 44px; line-height: 54px; font-weight: 700; text-wrap: balance; }
.ds-ban-t .blank { font-size: .6em; vertical-align: middle; }
.ds-ban-s { padding: 20px 0 10px; font-size: 16px; line-height: 24px; text-wrap: balance; }
.ds-ban-f { justify-content: center; gap: 12px; max-width: 800px; margin: 10px auto 0; }
.ds-ban-f .pform-f { flex: 0 1 380px; max-width: 380px; }
.ds-ban-f input { border: 1px solid var(--line); }
.ds-ban-f input::placeholder { color: var(--muted-2); font-size: 15px; font-weight: 500; }
.ds-ban-f .btn { min-width: 195px; padding-left: 24px; justify-content: flex-start; }
.ds-ban-f .form-err { text-align: center; }
@media (min-width: 1568px) { .ds-ban { padding-block: 120px; } }
@media (max-width: 1023px) { .ds-ban-t { font-size: 36px; line-height: 46px; } }
@media (max-width: 767px) {
  .ds-ban { padding-block: 20px; }
  .ds-ban::before { background: rgba(0, 0, 0, .7); }
  .ds-ban::after { display: none; }
  .ds-ban-t { font-size: 28px; line-height: 34px; }
  .ds-ban-s { padding: 16px 0 8px; }
  .ds-ban-f { gap: 10px; margin-top: 8px; }
  .ds-ban-f .pform-f, .ds-ban-f .btn { flex: 0 0 calc(50% - 5px); max-width: calc(50% - 5px); min-width: 0; }
  .ds-ban-f .pform-f .ic { left: 16px; }
  .ds-ban-f input { padding: 0 10px 0 44px; }
  .ds-ban-f .btn { padding: 0 50px 0 16px; font-size: 15px; }
}
@media (max-width: 374px) { .ds-ban-f .pform-f, .ds-ban-f .btn { flex-basis: 100%; max-width: 100%; } .ds-ban-f .btn { justify-content: center; } }

/* đoạn giới thiệu chuyên mục */
.ds-intro { max-width: 688px; margin: 0 auto 36px; text-align: center; font-size: 16px; line-height: 24px; color: var(--text); text-wrap: pretty; }
.ds-intro strong { color: var(--ink); }
@media (max-width: 767px) { .ds-intro { margin-bottom: 10px; } }

/* ---------------------------------------------------------------- lưới thẻ (3 cột / 2 cột) */
.ds-g3, .ds-g2 { display: grid; gap: 40px 24px; padding-top: 40px; }
.ds-g3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.ds-g2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 991px) { .ds-g3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ds-g3, .ds-g2 { row-gap: 24px; padding-top: 20px; } }
@media (max-width: 599px) { .ds-g3, .ds-g2 { grid-template-columns: minmax(0, 1fr); } }

/* thẻ dự án trong lưới: ảnh 384×250, tên 18/27 cách ảnh 24, 2 dòng cả trên điện thoại */
.ds-pgrid { container-type: inline-size; }
.ds-pgrid .pcard-t { margin-top: 24px; }
.ds-page .pcard-t, .ds-page .bcard-t, .ds-si-t { text-wrap: pretty; }
@media (max-width: 767px) { .ds-pgrid .pcard-t { margin-top: 20px; -webkit-line-clamp: 2; } }

/* 3 thông số luôn một dòng như Tứ Gia: thẻ hẹp (1024, 768) thì icon, khe và chữ nhỏ lại theo bề rộng thẻ */
.ds-pgrid .pcard { container-type: inline-size; }
.ds-pgrid .pmeta li { white-space: nowrap; }
@container (max-width: 380px) {
  .ds-pgrid .pmeta { column-gap: 16px; }
  .ds-pgrid .pmeta li { gap: 6px; }
  .ds-pgrid .pmeta .ic { font-size: 20px; }
}
@container (max-width: 335px) {
  .ds-pgrid .pmeta { column-gap: 12px; font-size: 13px; }
  .ds-pgrid .pmeta li { gap: 5px; }
  .ds-pgrid .pmeta .ic { font-size: 18px; }
}

/* ô cuối lưới khi hàng chưa đủ 3 dự án: cao bằng ảnh thẻ bên cạnh, nền kem viền đứt như ô chờ ảnh thật */
.ds-fill { align-self: start; display: grid; place-items: center; height: calc((100cqw - 48px) / 3 * 250 / 384);
  border: 1px dashed var(--line); border-radius: 12px; background: var(--cream); text-align: center; }
.ds-fill.s3-1 { grid-column: span 1; }
.ds-fill.s3-2 { grid-column: span 2; }
.ds-fill-in { display: grid; justify-items: center; gap: 12px; padding: 20px; }
.ds-fill-in > .ic { font-size: 34px; color: var(--main); stroke-width: 1.4; }
.ds-fill-t { max-width: 34ch; font-size: 18px; line-height: 27px; font-weight: 600; color: var(--ink); text-wrap: balance; }
.ds-fill-b { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.ds-fill .btn-out { min-height: 44px; padding: 0 44px 0 18px; font-size: 15px; }
.ds-fill .btn-out .btn-c { width: 26px; height: 26px; right: 9px; font-size: 14px; }
@media (max-width: 991px) {
  .ds-fill { height: calc((100cqw - 24px) / 2 * 250 / 384); }
  .ds-fill.s2-1 { grid-column: span 1; }
  .ds-fill.s2-2 { grid-column: span 2; }
}
@media (max-width: 599px) { .ds-fill.ds-fill { grid-column: auto; height: auto; } .ds-fill-in { padding: 24px 16px; } }

/* thẻ bài trong lưới: tiêu đề 18/27, hàng ngày + phút đọc có kẻ dưới, trích đoạn 3 dòng */
.ds-bgrid .bcard-t, .ds-sub .bcard-t { margin-top: 24px; font-size: 18px; line-height: 27px; }
.ds-page .bmeta { margin-top: 8px; padding-bottom: 8px; border-bottom: 1px solid var(--line-2); color: var(--text); line-height: 22px; }
.ds-page .bmeta .ic { font-size: 18px; color: var(--muted); }
.ds-bgrid .bcard-ex { margin-top: 10px; }
@media (max-width: 767px) { .ds-bgrid .bcard-t, .ds-sub .bcard-t { margin-top: 20px; } }

/* ---------------------------------------------------------------- bài nổi bật (mẫu B, C) */
.ds-feat { position: relative; }
.ds-feat-img { display: block; aspect-ratio: 1200 / 780; border-radius: 12px; overflow: hidden; background: var(--ph); }
.ds-feat-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ds-feat:hover .ds-feat-img img { transform: scale(1.1); }
/* hộp trắng như Tứ Gia: 1160×120 trên ảnh 1200×780, tiêu đề 28px một dòng cắt "…", chỉ ngày + phút đọc;
   điện thoại vẫn đè đáy ảnh (cách 20), padding 10, tiêu đề 18/27 tối đa 2 dòng */
.ds-feat-box { position: absolute; left: 20px; right: 20px; bottom: 20px; padding: 20px; border-radius: 8px; background: var(--bg); }
.ds-feat-t { font-size: 28px; line-height: 36px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ds-feat-t a { transition: color .2s ease-in-out; }
.ds-feat-t a:hover { color: var(--main-2); }
.ds-feat .bmeta { margin-top: 10px; }
@media (max-width: 767px) {
  .ds-feat-box { padding: 10px; }
  .ds-feat-t { font-size: 18px; line-height: 27px; white-space: normal; text-wrap: pretty;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  .ds-feat .bmeta { margin-top: 6px; }
}

/* khoảng banner chuyên mục, kẻ, phân trang (căn trái, ô 36px viền mảnh) */
.ds-gap { height: 48px; }
/* mẫu C trên điện thoại: 3 bài phụ và lưới đều là thẻ 1 cột, nối liền với khe 24 như giữa các thẻ */
@media (max-width: 767px) { .ds-sub + .ds-gap { display: none; } .ds-sub + .ds-gap + .ds-bgrid { padding-top: 24px; } }
.ds-hr { border: 0; border-top: 1px solid var(--line-2); margin: 20px 0 0; }
.ds-pg { padding-top: 40px; }
.ds-pg .pg { justify-content: flex-start; flex-wrap: wrap; gap: 4px 12px; margin-top: 0; }
.ds-pg .pg-c { min-width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); font-size: 16px; font-weight: 400; }
.ds-pg .pg-c.is-on { background: var(--grad); border-color: transparent; color: #fff; font-weight: 700; }
@media (max-width: 767px) { .ds-pg { padding-top: 32px; } }

.ds-empty { margin-top: 40px; padding: 32px 20px; border: 1px dashed var(--line); border-radius: 12px; text-align: center; color: var(--muted-2); }
.ds-empty p + p { margin-top: 8px; }
.ds-empty a { color: var(--main-2); font-weight: 500; }

/* ---------------------------------------------------------------- mẫu C: cột 9 + sidebar 3 dính */
.ds-cols { display: grid; grid-template-columns: minmax(0, 1fr) 282px; column-gap: 24px; }
/* 1024–1339: cụm nút liên hệ dính mép phải (rộng 60) đè lên sidebar dính, chừa chỗ để sidebar kết thúc trước nó 10px */
.ds-main { padding-block: 40px; min-width: 0; }
.ds-side { padding-block: 40px; }
.ds-side-in { position: sticky; top: calc(var(--head) + env(safe-area-inset-top, 0px) + 10px); }
.ds-side-t { margin: 20px 0 10px; font-size: 30px; line-height: 39px; font-weight: 700; }
.ds-side-box { padding: 20px 20px 0; border-top: 1px solid var(--main); border-radius: 0 8px 8px 8px; background: var(--copy-bg); overflow: hidden; }
.ds-side-list li { padding-bottom: 20px; border-bottom: 1px solid var(--line); }
.ds-side-list li + li { padding-top: 20px; }
.ds-si { display: flex; align-items: flex-start; gap: 12px; }
.ds-si-img { flex: none; width: 86px; height: 56px; border-radius: 8px; overflow: hidden; background: var(--ph); }
.ds-si-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ds-si:hover .ds-si-img img { transform: scale(1.1); }
.ds-si-t { min-width: 0; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; transition: color .2s ease-in-out; }
.ds-si:hover .ds-si-t { color: var(--main-2); }
.ds-side-more { display: flex; align-items: center; justify-content: center; min-height: 44px; margin: 0 -20px; background: var(--grad); color: #fff; font-size: 16px; font-weight: 700; }
.ds-side-more:hover { filter: brightness(.95); }
@media (max-width: 991px) {
  .ds-cols { grid-template-columns: minmax(0, 1fr); }
  .ds-main { padding-bottom: 8px; }
  .ds-side { padding: 24px 0 40px; }
  .ds-side-in { position: static; }
  .ds-si-t { -webkit-line-clamp: 3; }
}
@media (max-width: 767px) {
  .ds-main { padding-top: 20px; }
  .ds-side-t { font-size: 26px; line-height: 36px; }
}

/* ---- gioi-thieu.css ---- */
/* Nhóm Giới thiệu (site/pages/gioi_thieu.py). Mọi lớp có tiền tố .gt-. Số đo theo các trang giới thiệu của
   noithattugia.com (khảo sát 10/2026): trang giới thiệu, đội ngũ, bài một cột, bài blog 9/3. */
.gt { --gt-grad: linear-gradient(90deg, var(--main) 0%, var(--main-2) 100%); --gt-deep: linear-gradient(90deg, var(--main) 0%, var(--dark) 100%);
  --gt-shadow: 1px 2px 0 rgba(0, 0, 0, .1); }
.gt-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; }
.gt-h2 { font-size: 34px; line-height: 44px; font-weight: 700; color: var(--ink); }
@media (max-width: 1023px) { .gt-row { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 767px) { .gt-h2 { font-size: 22px; line-height: 29px; } }
/* ô "chờ điền": inline-block nên nhãn ngắn không bao giờ bị bẻ đôi (khung viền đứt); nhãn dài hơn một dòng thì xuống dòng
   bên trong khung. line-height thấp để khung (viền + đệm) không làm dòng chữ cao lên. */
.gt .blank { display: inline-block; max-width: 100%; line-height: 1.35; }

/* khung chờ video (nền tối, nút phát) */
.gt-vf { position: relative; display: grid; place-content: center; justify-items: center; gap: 8px; width: 100%; padding: 16px; border-radius: 12px; overflow: hidden;
  text-align: center; color: #fff; background: radial-gradient(120% 90% at 30% 20%, var(--dark-line), var(--dark-2) 70%); }
.gt-vf-play { font-size: 84px; line-height: 0; opacity: .9; }
.gt-vf-play .ic { stroke-width: 1; }
.gt-vf-t { max-width: 30ch; font-size: 15px; line-height: 21px; font-weight: 500; }
.gt-vf small { font-size: 12px; color: var(--accent); }

/* ================================================================ trang Giới thiệu */
/* hero ảnh toàn khổ: 1440 × 598 (mobile 390 × 245) */
.gt-hero { position: relative; background: var(--ph); }
.gt-hero-img { width: 100%; height: 598px; object-fit: cover; object-position: 50% 60%; }
.gt-hero-note { position: absolute; left: max(16px, calc((100% - 1200px) / 2)); bottom: 16px; display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px;
  border-radius: 20px; background: color-mix(in srgb, var(--bg) 88%, transparent); color: var(--muted-2); font-size: 13px; line-height: 20px; }
.gt-hero-note .ic { font-size: 16px; color: var(--main); }
@media (max-width: 767px) { .gt-hero-img { height: 245px; } .gt-hero-note { bottom: 10px; font-size: 12px; } }

/* giới thiệu + 2 dịch vụ: 2 cột 6/6, trái bản đồ */
.gt-map { position: relative; max-width: 588px; }
.gt-map img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 16px; }
.gt-map-cap { position: absolute; right: 10px; bottom: 8px; font-size: 11px; color: var(--muted-2); }
.gt-pins { position: absolute; inset: 0; }
.gt-pin { position: absolute; width: 0; height: 0; }
.gt-pin-dot { position: absolute; left: -8px; top: -8px; width: 16px; height: 16px; border-radius: 50%; background: var(--main); border: 3px solid var(--bg);
  box-shadow: 0 0 0 5px color-mix(in srgb, var(--main) 28%, transparent); }
.gt-pin-t { position: absolute; left: 16px; top: -20px; display: grid; padding: 4px 10px; border-radius: 8px; background: var(--bg); white-space: nowrap;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14); font-size: 12px; line-height: 17px; color: var(--muted-2); }
.gt-pin-t b { font-size: 13px; font-weight: 700; color: var(--ink); }
.gt-pin-l .gt-pin-t { left: auto; right: 16px; }
.gt-pin-big .gt-pin-dot { left: -26px; top: -66px; width: 52px; height: 52px; border: 0; border-radius: 50% 50% 50% 0; transform: rotate(-45deg);
  background: var(--gt-deep); box-shadow: 0 4px 10px rgba(0, 0, 0, .2); display: grid; place-items: center; }
.gt-pin-big .gt-pin-dot .ic { transform: rotate(45deg); color: #fff; font-size: 24px; }
.gt-pin-big .gt-pin-t { left: 34px; top: -62px; }
.gt-intro-t .gt-h2 { padding-bottom: 50px; }
.gt-intro-t > p { font-size: 16px; line-height: 24px; }
.gt-intro-t > .gt-h4 { padding: 50px 0 28px; font-size: 22px; line-height: 30px; font-weight: 700; color: var(--ink); }
.gt-svc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.gt-svc-b { position: relative; display: flex; align-items: center; min-height: 66px; padding: 18px 56px 18px 24px; border: 1px solid var(--line-2); border-radius: 12px;
  background: var(--bg); color: var(--ink); box-shadow: var(--gt-shadow); transition: background .25s, color .25s, border-color .25s; }
.gt-svc-b h3 { font-size: 18px; line-height: 26px; font-weight: 600; color: inherit; }
.gt-svc-b .ic { position: absolute; right: 20px; top: 50%; transform: translateY(-50%); font-size: 24px; color: var(--main); transition: transform .25s; }
.gt-svc-b:hover { background: var(--gt-deep); border-color: transparent; color: #fff; }
.gt-svc-b:hover .ic { color: #fff; transform: translate(4px, -50%); }
@media (min-width: 768px) and (max-width: 1023px) {
  /* bản đồ rộng hết khung như chữ bên dưới; ảnh 4:5 cắt giữa còn 16:10, lớp ghim giữ khung ảnh gốc
     (cao gấp đôi khung, lùi lên 50%) nên ghim vẫn đúng toạ độ */
  .gt-map { max-width: none; overflow: hidden; border-radius: 16px; }
  .gt-map img { aspect-ratio: 16 / 10; }
  .gt-pins { inset: -50% 0; }
}
@media (max-width: 767px) { .gt-map { margin-inline: auto; } }
@media (max-width: 767px) {
  .gt-intro-t .gt-h2 { padding-bottom: 20px; }
  .gt-intro-t > .gt-h4 { padding: 28px 0 16px; font-size: 20px; line-height: 28px; }
  .gt-svc { gap: 12px; }
  .gt-svc-b { min-height: 56px; padding: 14px 40px 14px 16px; }
  .gt-svc-b h3 { font-size: 16px; line-height: 22px; }
  .gt-svc-b .ic { right: 12px; font-size: 20px; }
}

/* 4 điểm mạnh: 4 cột, 2 cột khi khung hẹp hơn 1200, ẩn trên điện thoại như Tứ Gia (hide_mobile) */
.gt-why-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.gt-why-grid h3 { padding-bottom: 20px; font-size: 18px; line-height: 27px; font-weight: 700; }
.gt-why-grid p { font-size: 16px; line-height: 24px; }
@media (max-width: 1199px) { .gt-why-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 24px; } }
@media (max-width: 767px) { .gt-why { display: none; } }

/* tầm nhìn + giá trị cốt lõi + ảnh */
.gt-eyebrow { font-size: 18px; line-height: 27px; font-weight: 700; color: var(--muted); padding-bottom: 6px; }
.gt-vision-t .gt-h2 { padding-bottom: 20px; }
.gt-vcards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin: 28px 0 44px; }
.gt-vcard { padding: 24px; border: 1px solid var(--line-2); border-radius: 24px; background: var(--bg); color: var(--text); box-shadow: var(--gt-shadow);
  transition: background .25s, color .25s; }
.gt-vcard h3 { padding-bottom: 12px; font-size: 18px; line-height: 27px; font-weight: 700; color: inherit; }
.gt-vcard p { font-size: 14px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.gt-vcard:hover { background: var(--gt-deep); color: #fff; }
.gt-q h3 { padding-bottom: 10px; font-size: 24px; line-height: 32px; font-weight: 700; }
.gt-q blockquote { margin: 0 0 30px; padding: 2px 0 2px 24px; border-left: 3px solid var(--main); font-size: 17.5px; line-height: 26px; color: var(--text); }
.gt-q blockquote:last-child { margin-bottom: 0; }
.gt-vision-img img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 16px; }
@media (max-width: 1023px) { .gt-vision-img { order: -1; } .gt-vision-img img { aspect-ratio: 16 / 10; } }
@media (max-width: 767px) {
  .gt-vcards { grid-template-columns: minmax(0, 1fr); gap: 16px; margin: 16px 0 28px; }
  .gt-vcard { padding: 20px; border-radius: 20px; }
  .gt-q h3 { font-size: 22px; line-height: 30px; }
  .gt-q blockquote { margin-bottom: 24px; font-size: 17px; }
}

/* đội ngũ: slider 1 người mỗi lần, tiêu đề đặt nửa phải phía trên (từ 1200, khi khung đã cố định 1200 nên tiêu đề
   luôn cao như nhau). Tiêu đề, chức danh, tên và nút cùng mép trái x = 50% + 62px như Tứ Gia. Cột chữ chừa 92px
   dưới cho hàng nút (24 + 44 + 24), nên mô tả dài đến mấy cũng không chạm nút: slide tự cao lên. */
.gt-team-in { position: relative; }
.gt-team-head { position: absolute; z-index: 1; top: 20px; right: 0; width: 50%; padding-left: 62px; }
.gt-team-head h2 { font-size: 30px; line-height: 39px; font-weight: 700; }
.gt-team-head p { margin-top: 10px; font-size: 16px; line-height: 24px; text-wrap: pretty; }
.gt-tm { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: start; }
.gt-tm-media { position: relative; padding: 0 0 28px 62px; }
.gt-tm-vid { border-radius: 12px; padding-left: 190px; }
.gt-tm-face { position: absolute; left: 0; bottom: 0; width: 240px; }
.gt-tm-face .cho { border-radius: 16px; box-shadow: 0 0 0 4px var(--bg); }
.gt-tm-badge { position: absolute; top: 12px; right: 12px; width: 160px; padding: 14px 10px 12px; display: grid; justify-items: center; gap: 8px; border-radius: 12px;
  background: color-mix(in srgb, var(--dark) 78%, transparent); color: #fff; font-size: 15px; line-height: 20px; }
.gt-tm-badge .ic { width: 34px; height: 34px; padding: 7px; border-radius: 50%; background: var(--grad); stroke-width: 2.6; }
.gt-tm-t { padding: 170px 0 92px 50px; }
.gt-tm-r { font-size: 16px; line-height: 24px; color: var(--muted); }
.gt-tm-n { padding: 4px 0 20px; font-size: 24px; line-height: 32px; font-weight: 700; color: var(--main-2); }
.gt-tm-d { font-size: 16px; line-height: 24px; max-width: 520px; }
.gt-tm-sl .sl-ctrl { position: absolute; left: calc(50% + 62px); right: 0; bottom: 24px; margin: 0; }
.gt-tm-sl .sl-dots { flex: 1; min-width: 0; gap: 12px; margin-left: 28px; }
.gt-tm-sl .sl-dots button { flex: 0 1 38px; min-width: 10px; }
.gt-team-more { margin-top: 20px; text-align: right; }
.gt-team-more a { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; color: var(--main-2); font-weight: 500; }
.gt-team-more a:hover { text-decoration: underline; text-underline-offset: 3px; }
@media (min-width: 1024px) and (max-width: 1199px) {
  /* khung co theo màn hình nên tiêu đề có thể xuống 2–3 dòng: đưa tiêu đề lên trên, slide vẫn 2 cột */
  .gt-team-head { position: static; width: auto; max-width: 760px; padding: 0 0 28px; }
  .gt-tm-t { align-self: end; padding: 0 0 92px 26px; } /* chữ dồn xuống sát hàng nút, nút ngang đáy video */
  .gt-tm-sl .sl-ctrl { left: calc(50% + 38px); }
}
@media (max-width: 1023px) {
  .gt-team-head { position: static; width: auto; padding: 0 0 24px; }
  .gt-tm { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gt-tm-media { padding: 0 0 28px; }
  .gt-tm-vid { aspect-ratio: 16 / 9 !important; }
  .gt-tm-face { width: min(52%, 300px); }
  .gt-tm-vid { padding: 76px 10px 14px calc(min(52%, 300px) + 6px); }
  .gt-tm-t { padding: 0; }
  .gt-tm-sl .sl-ctrl { position: static; margin-top: 24px; justify-content: center; }
  .gt-tm-sl .sl-dots { display: none; }
  .gt-team-more { text-align: center; margin-top: 16px; }
}
@media (max-width: 767px) {
  .gt-team-head h2 { font-size: 26px; line-height: 34px; }
  .gt-tm-vid { aspect-ratio: 360 / 245 !important; }
  .gt-tm-badge { width: 120px; padding: 10px 8px; font-size: 13px; gap: 6px; }
  .gt-tm-badge .ic { width: 28px; height: 28px; padding: 5px; }
  .gt-tm-vid .gt-vf-play { font-size: 56px; }
  .gt-tm-vid .gt-vf-t { max-width: 18ch; font-size: 13px; line-height: 18px; }
  .gt-tm-vid small { display: none; }
  .gt-tm-face .cho-t { font-size: 13px; }
  .gt-tm-face small { display: none; }
  .gt-tm-n { font-size: 22px; line-height: 30px; padding-bottom: 12px; }
}

/* 3 hàng ảnh xưởng / văn phòng / đội ngũ */
.gt-pics { padding-top: 50px; }
.gt-pics-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: center; padding-bottom: 100px; }
.gt-pics-t h3 { padding-bottom: 12px; font-size: 28px; line-height: 36px; font-weight: 700; }
.gt-pics-t p { font-size: 16px; line-height: 24px; }
.gt-pics-sl .cho { border-radius: 16px; }
.gt-pics-map, .gt-pics-real { position: relative; aspect-ratio: 588 / 382; border-radius: 16px; overflow: hidden; background: var(--ph); }
.gt-pics-map img, .gt-pics-real img { width: 100%; height: 100%; object-fit: cover; }
.gt-pics-map figcaption, .gt-pics-real figcaption { position: absolute; left: 12px; top: 12px; right: 12px; display: inline-flex; align-items: center; gap: 6px; width: fit-content; max-width: calc(100% - 24px);
  padding: 5px 10px; border-radius: 20px; background: var(--bg); box-shadow: 0 2px 8px rgba(0, 0, 0, .15); font-size: 13px; line-height: 18px; }
.gt-pics-map figcaption .ic { flex: none; color: var(--red); }
.gt-pics-real figcaption .ic { flex: none; color: var(--main); }
.gt-pics-sl .sl-ctrl { position: absolute; z-index: 2; left: 12px; bottom: 16px; margin: 0; }
@media (max-width: 1023px) {
  .gt-pics-row { grid-template-columns: minmax(0, 1fr); gap: 16px; padding-bottom: 48px; }
  .gt-pics-sl .sl-ctrl { position: static; margin-top: 12px; justify-content: center; }
}
@media (max-width: 767px) { .gt-pics { padding-top: 20px; } .gt-pics-row { padding-bottom: 30px; } .gt-pics-t h3 { font-size: 24px; line-height: 32px; } }

/* video + nhận xét khách */
.gt-fb { padding: 40px 0 80px; }
.gt-fb-row { align-items: start; }
.gt-fb-vid { margin-top: 30px; border-radius: 20px; }
.gt-fb-t { padding-bottom: 12px; font-size: 28px; line-height: 36px; font-weight: 700; }
.gt-fb-card { display: flex; align-items: center; gap: 15px; min-height: 110px; margin-bottom: 15px; padding: 15px 28px 15px 15px; border-radius: 50px;
  background: var(--gt-deep); color: #fff; }
.gt-fb-av { flex: none; display: grid; place-items: center; width: 80px; height: 80px; border-radius: 50%; border: 1px dashed color-mix(in srgb, var(--bg) 60%, transparent);
  background: color-mix(in srgb, var(--bg) 14%, transparent); font-size: 34px; }
.gt-fb-n { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--yellow); }
.gt-fb-x { font-size: 15px; line-height: 22px; }
.gt-fb-sl .sl-ctrl { margin-top: 6px; }
@media (max-width: 1023px) { .gt-fb-vid { margin-top: 0; } }
@media (max-width: 767px) {
  .gt-fb { padding: 20px 0 40px; }
  .gt-fb-t { font-size: 24px; line-height: 32px; }
  .gt-fb-card { align-items: flex-start; padding: 14px 18px 14px 12px; border-radius: 36px; gap: 12px; }
  .gt-fb-av { width: 56px; height: 56px; font-size: 26px; }
}

/* ================================================================ trang Đội ngũ */
.gt-dn-hero { padding: 52px 0 220px; text-align: center; color: #fff;
  background: linear-gradient(180deg, color-mix(in srgb, var(--dark-2) 82%, transparent), color-mix(in srgb, var(--dark-2) 92%, transparent)), url(img/hero.webp) center / cover, var(--dark-2); }
.gt-dn-big { max-width: 1000px; margin: 0 auto; padding-bottom: 56px; font-size: 44px; line-height: 54px; font-weight: 700; letter-spacing: -.44px; color: #fff; }
.gt-dn-photo { position: relative; margin-top: -140px; margin-bottom: 86px; }
.gt-dn-photo .cho { border-radius: 16px; box-shadow: var(--gt-shadow); }
.gt-dn-usp { padding: 40px 0 80px; background: linear-gradient(90deg, var(--bg) 0%, var(--cream) 50%, var(--bg) 100%); }
.gt-dn-usp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
.gt-usp { position: relative; min-height: 160px; padding: 24px 24px 24px 148px; border-radius: 16px; background: var(--bg); box-shadow: var(--gt-shadow); }
.gt-usp-i { position: absolute; left: 24px; top: 24px; display: grid; place-items: center; width: 100px; height: 100px; border-radius: 20px; background: var(--bg);
  box-shadow: var(--gt-shadow), 0 0 0 1px var(--line-2); font-size: 52px; color: var(--main); }
.gt-usp-i .ic { stroke-width: 1.3; }
.gt-usp h3 { padding-bottom: 12px; font-size: 22px; line-height: 28.6px; font-weight: 700; }
.gt-usp p { font-size: 16px; line-height: 24px; }
.gt-dn-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.gt-dn-head h2 { font-size: 24px; line-height: 36px; font-weight: 700; }
.gt-dn-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 44px 40px; padding-top: 44px; }
.gt-mem-img { margin-bottom: 20px; }
.gt-mem-img .cho { border-radius: 16px; background-color: var(--ph); }
.gt-mem-n { font-size: 18px; line-height: 27px; font-weight: 700; }
.gt-mem-r { padding-bottom: 8px; font-size: 14px; line-height: 21px; color: var(--main-2); text-wrap: balance; }
.gt-mem-d { font-size: 14px; line-height: 21px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-dn-note { margin-top: 40px; font-size: 14px; color: var(--muted-2); }
@media (max-width: 1023px) {
  .gt-dn-big { font-size: 32px; line-height: 42px; }
  .gt-dn-usp-grid { gap: 24px; }
  .gt-usp { display: grid; grid-template-columns: 45px minmax(0, 1fr); column-gap: 14px; align-content: start; min-height: 126px; padding: 16px; }
  .gt-usp-i { position: static; width: 45px; height: 45px; border-radius: 12px; font-size: 28px; }
  .gt-usp h3 { align-self: center; padding: 0; font-size: 20px; line-height: 26px; }
  .gt-usp p { grid-column: 1 / -1; margin-top: 12px; }
  .gt-dn-grid { gap: 32px 24px; }
  .gt-mem-r { min-height: 50px; } /* chức danh 1 hay 2 dòng thì mô tả vẫn thẳng hàng giữa các cột */
}
@media (max-width: 767px) {
  .gt-dn-hero { padding: 40px 0 32px; }
  .gt-dn-big { padding-bottom: 28px; font-size: 24px; line-height: 36px; letter-spacing: 0; }
  .gt-dn-photo { margin: 20px auto; }
  .gt-dn-usp { padding: 20px 0 32px; }
  .gt-dn-usp-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .gt-dn-head { flex-direction: column; text-align: center; gap: 16px; }
  .gt-dn-head h2 { font-size: 22px; line-height: 33px; }
  .gt-dn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px 16px; padding-top: 28px; }
  .gt-mem-img { margin-bottom: 14px; }
  .gt-mem-img .cho-t { font-size: 13px; line-height: 18px; }
  .gt-mem-img small { display: none; }
  .gt-mem-n { font-size: 17px; line-height: 24px; }
  .gt-dn-note { margin-top: 28px; text-align: center; }
}

/* ================================================================ trang bài một cột + mã riêng */
.gt-art .entry > figure.cho, .gt-art .entry > .fig { max-width: none; margin-inline: 0; }
.gt-art .entry > .fig-doc { max-width: 480px; }
.gt-post-entry > figure.cho, .gt-post-entry > .fig { max-width: 800px; margin-inline: auto; }
.gt-art .entry > figure.cho, .gt-post-entry > figure.cho { margin-top: 20px; }
.gt-art .entry > figure.gt-portrait { max-width: 560px; }
.gt-art .entry blockquote p + p { margin-top: 8px; font-style: normal; font-size: 14px; color: var(--muted-2); }
.gt-grid-cho { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.gt-post-entry > .gt-grid-cho { max-width: 800px; margin-inline: auto; }
.entry > .gt-grid-cho { margin-top: 20px; }
.entry .gt-grid-cho > figure.cho { margin-top: 0; }
.gt-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* lưới 2 ảnh thật (mã data-gt-anh): ảnh giữ đúng tỉ lệ gốc, hai ảnh dọc thì thu cột lại cho khỏi quá cao */
.gt-grid-anh { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; align-items: start; }
.entry > .gt-grid-anh { margin-top: 20px; }
.gt-grid-anh .fig img { height: auto; }
.gt-grid-anh figcaption { text-wrap: balance; }
.gt-grid-anh-doc { max-width: 800px; }
.gt-post-entry > .gt-grid-anh { max-width: 800px; margin-inline: auto; }
.gt-vid-in { max-width: 500px; margin-top: 20px; }
.entry > .gt-vid-in { margin-top: 20px; }
.gt-post-entry > .gt-vid-in { max-width: 800px; margin-inline: auto; aspect-ratio: 16 / 9; }
.entry > .gt-cards { margin-block: 24px; }
.entry .gt-cards a { color: inherit; text-decoration: none; }
.entry .gt-cards .pcard-t { margin-top: 20px; font-size: 18px; line-height: 27px; font-weight: 600; color: var(--ink); }
.entry .gt-cards .pcard-t a:hover { color: var(--main-2); }
.entry .gt-cards ul { padding-left: 0; list-style: none; }
.entry .gt-cards li + li { margin-top: 0; }
/* 3 thông số luôn một hàng: thẻ hẹp (cột 858 của trang xưởng, màn 1024, điện thoại 360) bỏ số phòng, còn diện tích, phong cách */
.gt-cards .pcard { container-type: inline-size; }
.gt-cards .pmeta { flex-wrap: nowrap; gap: 16px; }
.gt-cards .pmeta li { white-space: nowrap; }
@container (max-width: 349px) { .gt-cards .pmeta li:nth-child(2) { display: none; } }
@media (max-width: 767px) {
  .gt-grid-cho { grid-template-columns: minmax(0, 1fr); }
  .gt-grid-cho .cho { aspect-ratio: 16 / 10 !important; }
  .gt-grid-anh { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .gt-grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  .gt-grid-3 .cho { aspect-ratio: 1 / 1 !important; }
  .gt-grid-3 .cho-t { font-size: 13px; line-height: 18px; }
  .gt-grid-3 small { display: none; }
}

.gt-p-quy-trinh-lam-viec .entry > p:has(> strong:only-child) { margin-top: 30px; }

/* ================================================================ trang Xưởng: bài blog 9/3 + sidebar dính */
.gt-post-wrap { padding: 40px 0; }
.gt-post { display: grid; grid-template-columns: minmax(0, 9fr) minmax(0, 3fr); gap: 24px; align-items: start; }
.gt-post-main { min-width: 0; }
.gt-post .crumb { margin-bottom: 24px; border-radius: 4px; background: var(--bg-gray); }
.gt-post .crumb .container { max-width: none; padding: 0 15px; }
.gt-post .crumb ol { padding-block: 8px; font-size: 13px; line-height: 20px; }
.gt-post .crumb a { font-weight: 700; color: var(--ink); }
.gt-post .crumb a:hover { color: var(--main-2); }
.gt-post .crumb [aria-current] { color: var(--muted-2); }
.gt-post-in { max-width: 858px; }
.gt-post-h1 { font-size: 22px; line-height: 33px; font-weight: 700; }
.gt-pmeta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 20px; margin: 24px 0 16px; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.gt-pmeta li { display: flex; align-items: center; gap: 8px; }
.gt-pmeta .ic { font-size: 20px; color: var(--muted); }
.gt-pmeta-au img { width: 32px; height: 32px; padding: 5px; border-radius: 50%; object-fit: contain; background: var(--cream); border: 1px solid var(--line-2); }
.gt-post-thumb { margin-bottom: 20px; }
.gt-post-thumb .cho { border-radius: 8px; }
.gt-post-entry > p:first-child { color: var(--text); }
.gt-related { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 24px; }
.gt-related .bcard { padding-bottom: 16px; border-bottom: 1px solid var(--line-2); }
.gt-related .bcard-t { font-size: 18px; line-height: 27px; padding-top: 8px; }
.gt-side { align-self: stretch; padding-top: 30px; }
/* chỉ dính khi màn đủ cao cho cả khối (khoảng 665px + header): màn thấp hơn thì khối cuộn theo bài, không bị cắt đáy */
@media (min-width: 1024px) and (min-height: 760px) { .gt-side-in { position: sticky; top: calc(var(--head) + 16px); } }
.gt-side-tab { position: relative; display: inline-flex; align-items: center; height: 36px; padding: 0 14px; border-radius: 12px 16px 0 0; background: var(--gt-deep);
  color: #fff; font-size: 16px; font-weight: 700; }
.gt-side-tab::after { content: ""; position: absolute; right: -14px; bottom: 0; width: 14px; height: 14px; background: radial-gradient(circle at 100% 0, transparent 13.5px, var(--dark) 14px); }
.gt-side-box { display: grid; gap: 16px; padding: 16px; border-top: 1px solid var(--main); border-radius: 0 8px 8px 8px; background: var(--copy-bg); }
/* thẻ dự án ở sidebar như Tứ Gia: ảnh 65%, một hàng 2 thông số màu xám, tên 18/27 500 */
.gt-sc-img { display: block; aspect-ratio: 100 / 65; border-radius: 8px; overflow: hidden; background: var(--ph); }
.gt-sc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.gt-sc:hover .gt-sc-img img { transform: scale(1.1); }
.gt-sc-m { display: flex; flex-wrap: wrap; gap: 4px 16px; margin-top: 10px; font-size: 14px; line-height: 20px; color: var(--muted); }
.gt-sc-m li { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.gt-sc-m .ic { font-size: 18px; color: var(--main); }
.gt-sc-t { margin-top: 6px; font-size: 18px; line-height: 27px; font-weight: 500; color: var(--ink);
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.gt-sc-t a:hover { color: var(--main-2); }
.gt-side-more { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; border-radius: 30px; background: var(--gt-deep); color: #fff; font-weight: 700; }
.gt-side-more:hover { filter: brightness(1.1); }
@media (max-width: 1023px) {
  .gt-post { grid-template-columns: minmax(0, 1fr); }
  .gt-post-in { max-width: none; }
  .gt-side { padding-top: 16px; }
  .gt-side-box { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .gt-side-more { grid-column: 1 / -1; }
}
@media (max-width: 767px) {
  .gt-post-wrap { padding: 20px 0; }
  .gt-post .crumb { margin-bottom: 16px; }
  /* vùng bấm của link đường dẫn cao 44px */
  .gt-post .crumb ol { padding-block: 0; }
  .gt-post .crumb li { display: flex; align-items: center; }
  .gt-post .crumb a { display: inline-flex; align-items: center; min-height: 44px; }
  .gt-post-h1 { font-size: 24px; line-height: 36px; }
  /* dòng meta một hàng như Tứ Gia: ngày, phút đọc, tác giả */
  .gt-pmeta { flex-wrap: nowrap; gap: 10px; margin: 14px 0 12px; font-size: 14px; line-height: 20px; }
  .gt-pmeta li { gap: 5px; white-space: nowrap; }
  .gt-pmeta .ic { font-size: 16px; }
  .gt-pmeta-au img { width: 24px; height: 24px; padding: 3px; }
  .gt-pmeta-au { min-width: 0; }
  .gt-pmeta-au span { overflow: hidden; text-overflow: ellipsis; }
  .gt-related { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
  .gt-related .bcard-t { font-size: 15px; line-height: 23px; }
  .gt-related .bmeta { font-size: 12px; }
  .gt-side-box { grid-template-columns: minmax(0, 1fr); padding: 16px; }
}
@media (max-width: 379px) { .gt-pmeta { font-size: 13px; gap: 8px; } }

/* ---- home.css ---- */
/* Trang chủ (index.html). Mọi lớp có tiền tố .hm-. Số đo theo trang chủ noithattugia.com (khảo sát 10/2026):
   máy tính 1440, nội dung 1200 (2 cột 588 + 24), điện thoại 390 (nội dung 358). Chỉ dùng biến màu của base.css. */

.hm-hide-m { display: inline; }
/* chữ thân: tránh dòng cuối chỉ còn 1 chữ; tên thẻ dự án không bị chia đôi kiểu cân dòng */
.hm-hero-p, .hm-prj .sh-desc, .hm-fac-d, .hm-bl p, .hm-tab-d, .hm-mem-d, .hm-team-d, .hm-rev-p, .hm-mc-n, .hm-nc-ex { text-wrap: pretty; }
/* ngắt dòng chủ động: .hm-br chỉ ở máy tính + máy tính bảng, .hm-br-t chỉ ở máy tính bảng, .hm-br-k ở mọi bề rộng */
.hm-br-t { display: none; }
.hm-prj .pcard-t { text-wrap: pretty; }
/* tên bài 2 dòng: cân 2 dòng để cụm cuối không bị treo ("gọn / mà đủ") */
.hm-nc-t { text-wrap: balance; }

/* ---------------------------------------------------------------- 2. hero 800px (điện thoại 430px) */
.hm-hero { position: relative; height: 800px; overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; }
.hm-hero-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; }
.hm-hero::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .4); z-index: -1; }
.hm-hero-in { height: 100%; display: flex; flex-direction: column; justify-content: flex-end; padding-top: calc(var(--head) + 24px); padding-bottom: 80px; }
.hm-h1 { max-width: 788px; padding-bottom: 32px; color: #fff; font-size: 54px; line-height: 64px; font-weight: 700; text-wrap: initial; }
.hm-hero-p { max-width: 920px; font-size: 16px; line-height: 24px; }
.hm-hero-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 0; margin-top: 70px; }
.hm-hero-row .btn-lg { padding-left: 34px; }
/* lề phải tự động nằm ở dòng phụ: cùng hàng thì nút kính mờ dạt mép phải, xuống hàng thì nút thẳng mép trái nút chính */
.hm-hero-exp { margin-right: auto; padding: 0 16px; font-size: 16px; line-height: 24px; }
.hm-hero-exp strong { display: block; font-weight: 700; }
.hm-hero-play { padding: 0 30px 0 26px; font-weight: 400; }
.hm-hero-play .ic { font-size: 24px; stroke-width: 1.5; }
.hm-hero-play:hover { background: rgba(255, 255, 255, .28); }

/* ---------------------------------------------------------------- 3. dịch vụ + bản đồ */
.hm-svc { padding-block: 40px; }
.hm-svc-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.hm-svc-head { padding-bottom: 52px; }
.hm-svc-head .sh-title { line-height: 44.2px; }
.hm-grp + .hm-grp { margin-top: 40px; }
.hm-pill { display: inline-flex; align-items: center; min-height: 52px; margin-bottom: 10px; padding: 0 40px; border-radius: 30px; background: var(--grad);
  color: #fff; font-size: 16px; line-height: 20px; font-weight: 700; text-transform: uppercase; }
.hm-svc-card { display: block; border-radius: 24px; background: #fff; }
.hm-svc-img { display: block; aspect-ratio: 284 / 185; border-radius: 8px; overflow: hidden; background: var(--ph); }
.hm-svc-img img { width: 100%; height: 100%; object-fit: cover; }
.hm-svc-n { display: block; padding: 16px 0; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--main-2); }
.hm-svc-card:hover .hm-svc-n { text-decoration: underline; text-underline-offset: 3px; }
.hm-svc .sl-ctrl { margin-top: 10px; }
.hm-svc .sl-dots { margin-left: 0; gap: 12px; }
.hm-svc .sl-dots button { flex: 0 1 180px; }

/* bản đồ vùng: 588×735, 3 chấm theo site.ban_do, bấm chấm hiện thẻ địa chỉ */
.hm-map { position: relative; max-width: 588px; margin-left: auto; }
.hm-map-img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover;
  -webkit-mask-image: radial-gradient(closest-side, #000 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 60%, transparent 100%); }
.hm-dot { position: absolute; left: var(--x); top: var(--y); z-index: 2; display: flex; align-items: center; gap: 6px; min-height: 32px;
  transform: translate(-16px, -50%); text-align: left; }
.hm-dot-c { position: relative; flex: none; width: 32px; height: 32px; display: grid; place-items: center; }
.hm-dot-c::before { content: ""; width: 16px; height: 16px; border-radius: 50%; background: var(--grad); border: 1px solid #fff;
  box-shadow: 0 0 5px 3px rgba(0, 0, 0, .12); transition: transform .2s; }
.hm-dot-c::after { content: ""; position: absolute; inset: 4px; border-radius: 50%; border: 2px solid var(--main); opacity: 0; animation: hmPulse 2.2s ease-out infinite; }
@keyframes hmPulse { 0% { transform: scale(.5); opacity: .9; } 100% { transform: scale(1.5); opacity: 0; } }
.hm-dot-l { padding: 3px 10px; border-radius: 20px; background: #fff; color: var(--ink); font-size: 13px; line-height: 18px; font-weight: 600;
  white-space: nowrap; box-shadow: 0 2px 8px rgba(0, 0, 0, .12); }
.hm-dot:hover .hm-dot-c::before, .hm-dot:focus-visible .hm-dot-c::before, .hm-dot.is-on .hm-dot-c::before { transform: scale(2); }
.hm-dot.is-on .hm-dot-l { background: var(--dark); color: #fff; }
.hm-dot-left { flex-direction: row-reverse; transform: translate(calc(-100% + 16px), -50%); }
.hm-map-p { position: absolute; top: 16px; right: 0; z-index: 3; width: 275px; max-height: 510px; overflow-y: auto; scrollbar-width: thin; }
.hm-mc { position: relative; padding: 16px 12px 12px; border-radius: 10px; background: #fff; box-shadow: 0 0 6px 4px rgba(0, 0, 0, .05); }
.hm-mc-x { position: absolute; top: 8px; right: 8px; width: 28px; height: 28px; border-radius: 8px; display: grid; place-items: center; font-size: 18px; color: var(--muted-2); }
.hm-mc-x:hover { background: var(--bg-gray); color: var(--ink); }
.hm-mc-t { padding-right: 30px; font-size: 16px; line-height: 24px; font-weight: 600; }
.hm-mc-a { display: flex; gap: 6px; margin-top: 8px; font-size: 14px; line-height: 21px; color: var(--muted-2); }
.hm-mc-a .ic { flex: none; margin-top: 2px; font-size: 16px; color: var(--main); }
.hm-mc-n { margin-top: 6px; font-size: 14px; line-height: 21px; color: var(--muted-2); }
.hm-mc-img { display: block; width: 100%; aspect-ratio: 214 / 106; margin-top: 12px; object-fit: cover; border-radius: 8px 8px 0 0; background: var(--ph); }
.hm-mc-zoom { object-fit: none; }
.hm-mc-go { display: flex; align-items: center; justify-content: center; min-height: 36px; border-radius: 0 0 8px 8px; background: var(--grad);
  color: #fff; font-size: 15px; font-weight: 700; }
.hm-mc-go:hover { filter: brightness(1.08); }
.hm-map-cap { margin-top: 4px; text-align: center; font-size: 13px; line-height: 20px; color: var(--muted); }

/* ---------------------------------------------------------------- 4. lưới dự án + bộ lọc */
.hm-prj { padding-block: 40px; background: var(--bg-gray); }
.hm-prj .sh { padding-bottom: 24px; }
.hm-prj .sh-title { line-height: 44.2px; }
.hm-flt { position: relative; z-index: 5; width: 300px; max-width: 100%; margin: 0 auto 40px; }
.hm-flt-b { width: 100%; height: 60px; display: flex; align-items: center; justify-content: center; gap: 14px; padding: 0 24px;
  border-radius: 50px; background: #fff; box-shadow: 2px 2px 15px rgba(0, 0, 0, .15); font-size: 18px; font-weight: 600; }
.hm-flt-v { background: var(--grad); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hm-flt-b .ic { font-size: 26px; color: var(--ink); transition: transform .2s; }
.hm-flt-b[aria-expanded="true"] .ic { transform: rotate(180deg); }
.hm-flt-l { position: absolute; top: calc(100% + 2px); left: 0; right: 0; overflow: hidden; border-radius: 20px; background: #fff;
  border: 1px solid color-mix(in srgb, var(--main) 30%, transparent); box-shadow: 2px 6px 15px rgba(0, 0, 0, .1); }
.hm-flt-l li + li { border-top: 1px solid var(--line-2); }
.hm-flt-l button { display: block; width: 100%; padding: 16px 24px; text-align: left; font-size: 16px; line-height: 24px; font-weight: 500; color: var(--ink); }
.hm-flt-l button:hover, .hm-flt-l button:focus-visible { background: var(--main); color: #fff; }
.hm-flt-l button[aria-pressed="true"] { color: var(--main-2); }
.hm-flt-l button[aria-pressed="true"]:hover { color: #fff; }
.hm-prj .pmeta { flex-wrap: nowrap; gap: 16px; }
.hm-prj .pmeta li { flex: none; gap: 6px; white-space: nowrap; }
.hm-prj .pmeta li:last-child { flex: 0 1 auto; min-width: 0; }
.hm-prj .pmeta li:last-child span { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.hm-prj-more { margin-top: 50px; text-align: center; }
.hm-prj-more .btn { min-width: 474px; }

/* ---------------------------------------------------------------- nền xám chung: ảnh xưởng + 3 khối lý do */
.hm-gray { background: var(--bg-gray); }
.hm-fac, .hm-r1, .hm-r2, .hm-r3 { padding-block: 40px; }
.hm-bl { padding-left: 32px; border-left: 3px solid var(--main); font-size: 16px; line-height: 24px; color: var(--text); }
.hm-bl p + p { margin-top: 8px; }

/* 5. ảnh xưởng: nhãn, H2, mô tả, nút bên phải; 3 ảnh mỗi khung */
.hm-fac { padding-bottom: 60px; }
.hm-fac-head { position: relative; padding-right: 300px; padding-bottom: 48px; }
.hm-fac-head .sh-title { padding-bottom: 8px; }
.hm-fac-d { font-size: 14px; line-height: 21px; color: var(--ink); max-width: 900px; }
.hm-fac-cta { position: absolute; right: 0; top: 48px; }
.hm-fac-sl { position: relative; }
.hm-fac-cta-m { display: none; }
.hm-fac .sl-dots button { flex: 0 1 335px; }
.hm-fac .cho { border-radius: 12px; }
/* ảnh thật công trình đang lắp trong slider: cùng khung 384/255 với ô chờ (không làm slider cao thêm),
   bấm xem ảnh lớn, chú thích phủ đáy ảnh trên nền tối mờ như nhãn ghim của thẻ dự án */
.hm-fac-real { position: relative; margin: 0; aspect-ratio: 384 / 255; border-radius: 12px; overflow: hidden; background: var(--ph); }
.hm-fac-img { display: block; height: 100%; cursor: zoom-in; }
.hm-fac-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hm-fac-img:hover img { transform: scale(1.05); }
.hm-fac-real figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 40px 16px 12px; pointer-events: none;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .72)); color: #fff; font-size: 14px; line-height: 20px; font-weight: 500; text-wrap: pretty; }

/* 6. lý do 1: ảnh vuông trái + 3 khối viền trái đổi ảnh */
.hm-r1-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 24px;
  grid-template-areas: "img ." "img head" "img tabs" "img ."; }
.hm-r1-img { grid-area: img; align-self: center; position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; background: var(--ph); }
.hm-r1-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .35s; }
.hm-r1-img img.is-on { opacity: 1; }
.hm-r1-head { grid-area: head; padding-bottom: 44px; }
.hm-tabs { grid-area: tabs; display: grid; gap: 48px; margin-top: 48px; }
.hm-tab { display: block; width: 100%; padding: 0 0 0 32px; border-left: 3px solid var(--main); text-align: left; transition: border-color .2s; }
.hm-tab-t { display: block; padding-bottom: 16px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.hm-tab-d { display: block; font-size: 16px; line-height: 24px; color: var(--text); }
.hm-tab.is-on { border-left-color: var(--gold); }
.hm-tab.is-on .hm-tab-t, .hm-tab.is-on .hm-tab-d { color: var(--main-2); }
.hm-r1-cta { display: none; }

/* 7. lý do 2: chữ trái + ảnh phải, nút viền nhỏ */
.hm-r2-in, .hm-r3-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; }
.hm-r2-text .sh-title, .hm-r3-text .sh-title { padding-bottom: 44px; }
.hm-r2 .hm-bl, .hm-r3 .hm-bl { margin-top: 48px; padding-bottom: 8px; }
.hm-r2-cta { margin-top: 36px; }
.hm-r2-img img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; }

/* 8. lý do 3: ô video trái + chữ phải */
.hm-r3-media .cho { border-radius: 0; }
.hm-r3-media .cho .ic { font-size: 84px; stroke-width: 1; }

/* ---------------------------------------------------------------- 9. đội ngũ: tiêu đề nằm trên cột trái, 1 người mỗi khung */
.hm-team { padding-block: 40px; }
.hm-team-in { position: relative; }
.hm-team-head { position: absolute; top: 20px; z-index: 2; width: calc(50% - 42px); max-width: 590px; }
.hm-team-t { font-size: 30px; line-height: 39px; font-weight: 700; }
.hm-team-d { margin-top: 12px; font-size: 16px; line-height: 24px; color: var(--text); }
.hm-mem { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: start; min-height: 400px; }
.hm-mem-text { padding: 190px 30px 90px 0; }
.hm-mem-r { font-size: 16px; line-height: 24px; color: var(--muted); }
.hm-mem-n { padding-bottom: 24px; font-size: 24px; line-height: 36px; font-weight: 700; color: var(--main-2); }
.hm-mem-n .blank { font-size: 18px; line-height: 30px; font-weight: 500; }
.hm-mem-d { font-size: 16px; line-height: 24px; color: var(--text); }
.hm-mem-m { position: relative; width: 100%; max-width: 526px; margin-left: auto; }
.hm-mem-m .cho { border-radius: 12px; }
.hm-badge { position: absolute; top: 12px; right: 12px; width: 160px; min-height: 87px; display: grid; justify-items: center; align-content: center; gap: 6px;
  padding: 10px; border-radius: 12px; background: color-mix(in srgb, var(--dark) 82%, transparent); color: #fff; font-size: 14px; line-height: 18px; text-align: center; }
.hm-badge .ic { width: 32px; height: 32px; padding: 6px; border-radius: 50%; background: var(--grad); stroke-width: 2.4; }
.hm-team .sl-ctrl { position: absolute; left: 0; top: 362px; width: calc(50% - 12px); margin: 0; }
.hm-team .sl-dots { flex: none; gap: 12px; margin-left: 32px; }
.hm-team .sl-dots button { flex: none; width: 21px; }
/* 1024–1199: cột chữ hẹp nên mô tả dài hơn, đặt hàng nút theo đáy slide để không chạm chữ */
@media (min-width: 1024px) and (max-width: 1199px) {
  .hm-mem-text { padding-bottom: 110px; }
  .hm-team .sl-ctrl { top: auto; bottom: 30px; }
}

/* ---------------------------------------------------------------- 10. dải form tư vấn */
.hm-form { position: relative; padding-block: 40px; background: var(--grad); color: #fff; overflow: hidden; isolation: isolate; }
.hm-form::before { content: ""; position: absolute; inset: 0; z-index: -1; background: url(img/phong-ngu-toan-canh.webp) center / cover no-repeat;
  opacity: .16; mix-blend-mode: luminosity; }
.hm-form-t { text-align: center; color: #fff; font-size: 28px; line-height: 40px; font-weight: 600; text-wrap: initial; }
.hm-form-t span { display: block; color: var(--yellow); }
.hm-pform { justify-content: center; padding-top: 30px; }
.hm-pform .pform-f { flex: 0 1 400px; }
.hm-pform .btn { min-width: 157px; padding-left: 24px; }
.hm-pform .form-err { order: 3; flex: 0 1 auto; margin: -4px auto 0; padding: 6px 14px; border-radius: 8px; background: var(--dark); color: #fff; text-align: center; }
.hm-pform:has(.form-err:not([hidden]))::after { content: ""; order: 2; flex-basis: 100%; height: 0; }

/* ---------------------------------------------------------------- 11. khách hàng kể lại: nền chéo, khung video dọc 313×556 */
.hm-rev { position: relative; margin-bottom: 50px; padding-block: 50px; overflow: hidden; isolation: isolate;
  background: linear-gradient(181deg, var(--bg) 3%, var(--cream) 99%); }
.hm-rev::before, .hm-rev::after { content: ""; position: absolute; top: 0; bottom: 0; z-index: -1; transform: skewX(-42deg); transform-origin: bottom left; }
.hm-rev::before { left: 50%; width: 80%; background: linear-gradient(90deg, color-mix(in srgb, var(--accent) 35%, transparent), color-mix(in srgb, var(--main) 18%, transparent)); }
.hm-rev::after { left: 62%; width: 70%; background: var(--grad); opacity: .85; }
.hm-rev-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: 1fr auto auto 1fr; column-gap: 24px;
  grid-template-areas: ". video" "text video" "cta video" ". video"; }
.hm-rev-text { grid-area: text; }
.hm-rev-text .sh-title { padding-bottom: 44px; }
.hm-rev-p { font-size: 16px; line-height: 24px; color: var(--text); max-width: 560px; }
.hm-rev-cta { grid-area: cta; margin-top: 20px; }
.hm-rev-v { grid-area: video; width: 313px; max-width: 100%; justify-self: center; }
.hm-rev-v .cho { border-radius: 30px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }

/* ---------------------------------------------------------------- 12. kiến thức: 4 thẻ nền xám bo 20 */
.hm-news { padding-block: 40px; }
.hm-nc { display: flex; flex-direction: column; height: 100%; padding: 40px 20px 0; border-radius: 20px; background: var(--bg-gray); }
.hm-nc-img { display: block; aspect-ratio: 242 / 157; border-radius: 12px; overflow: hidden; background: var(--ph); }
.hm-nc-img img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.hm-nc:hover .hm-nc-img img { transform: scale(1.1); }
.hm-nc-t { margin-top: 12px; padding-bottom: 4px; font-size: 16px; line-height: 27px; font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hm-nc-t a:hover { color: var(--main-2); }
.hm-nc .bmeta { margin-top: 0; padding-bottom: 10px; border-bottom: 1px solid var(--line-2); line-height: 25px; color: var(--text); }
.hm-nc-ex { margin-top: 4px; font-size: 16px; line-height: 24px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; }
.hm-nc-more { display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-top: auto; padding: 12px 0;
  font-size: 14px; line-height: 21px; color: var(--muted); }
.hm-nc-more:hover { color: var(--main-2); }
.hm-news .sl-ctrl { display: none; }

/* ---------------------------------------------------------------- 13. dải vật liệu chạy ngang (thay dải logo báo chí) */
.hm-mat { padding-block: 40px; }
.hm-mat-in { display: flex; align-items: center; gap: 32px; }
.hm-mat-t { flex: none; font-size: 18px; line-height: 27px; font-weight: 400; color: var(--muted); }
.hm-mq { flex: 1; min-width: 0; overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.hm-mq-track { display: flex; width: max-content; animation: hmMq 36s linear infinite; }
.hm-mq:hover .hm-mq-track { animation-play-state: paused; }
.hm-mq ul { display: flex; }
.hm-mq li { display: flex; align-items: center; gap: 28px; height: 40px; padding-right: 28px; font-size: 22px; line-height: 1; font-weight: 700; color: var(--main-2); white-space: nowrap; }
.hm-mq li::after { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }
@keyframes hmMq { to { transform: translateX(-50%); } }

/* ---------------------------------------------------------------- máy tính bảng */
@media (max-width: 1199px) and (min-width: 1024px) {
  .hm-mem-text { padding-top: 210px; }
}
/* dưới 1024: các khối 2 cột xếp 1 cột như Tứ Gia (col-md-6), điện thoại chỉ đổi cỡ chữ và khoảng cách */
@media (max-width: 1023px) {
  .hm-svc-row { grid-template-columns: minmax(0, 1fr); }
  .hm-svc-r { display: none; }
  .hm-fac-head { padding-right: 0; }
  .hm-fac-cta { position: static; margin-top: 20px; }

  .hm-r1-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "head" "img" "tabs" "cta"; }
  .hm-r1-head { padding-bottom: 24px; }
  .hm-r1-img { align-self: auto; aspect-ratio: 3 / 2; }
  .hm-tabs { gap: 32px; margin-top: 32px; }
  .hm-r1-cta { display: block; grid-area: cta; margin-top: 32px; text-align: center; }

  /* lý do 2: nhãn, H2, ảnh, đoạn viền trái, nút (như lý do 1); lý do 3: chữ trước, video sau */
  .hm-r2-in, .hm-r3-in { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .hm-r2-text { display: contents; }
  .hm-r2-text .sh-label { order: 1; }
  .hm-r2-text .sh-title { order: 2; }
  .hm-r2-img { order: 3; }
  .hm-r2 .hm-bl { order: 4; }
  .hm-r2-cta { order: 5; }
  .hm-r2-text .sh-title, .hm-r3-text .sh-title { padding-bottom: 24px; }
  .hm-r2 .hm-bl, .hm-r3 .hm-bl { padding-bottom: 0; }
  .hm-r2 .hm-bl { margin-top: 32px; }
  .hm-r3 .hm-bl { margin-top: 0; }
  .hm-r2-cta { margin-top: 32px; text-align: center; }
  .hm-r3-media { order: 2; margin-top: 32px; }

  .hm-team-head { position: static; width: auto; max-width: none; margin-bottom: 24px; }
  .hm-mem { grid-template-columns: minmax(0, 1fr); gap: 24px; min-height: 0; }
  .hm-mem-text { padding: 0; }
  .hm-mem-m { max-width: none; }
  .hm-mem-m .cho { aspect-ratio: 3 / 2 !important; }
  .hm-team .sl-ctrl { position: static; width: auto; margin-top: 20px; }

  .hm-pform .pform-f { flex: 1 1 0; min-width: 0; }

  .hm-rev-in { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: "text" "video" "cta"; row-gap: 24px; text-align: center; }
  .hm-rev-text .sh-title { padding-bottom: 16px; }
  .hm-rev-p { margin-inline: auto; }
  .hm-rev-cta { margin-top: 0; }
  .hm-rev::before { left: 0; top: 52%; width: 100%; transform: skewY(-24deg); transform-origin: top left; }
  .hm-rev::after { left: 0; top: 64%; width: 120%; transform: skewY(-30deg); transform-origin: top left; }
}
@media (max-width: 1023px) and (min-width: 768px) {
  .hm-br-t { display: inline; }
}

/* ---------------------------------------------------------------- điện thoại */
@media (max-width: 767px) {
  .hm-hide-m { display: none; }

  .hm-hero { height: 430px; }
  .hm-hero-in { justify-content: center; align-items: center; text-align: center;
    padding-top: calc(var(--head) + env(safe-area-inset-top, 0px) + 12px); padding-bottom: 24px; }
  .hm-h1 { max-width: none; padding-bottom: 16px; font-size: 24px; line-height: 28.8px; text-wrap: balance; }
  .hm-br { display: none; }
  .hm-hero-row { flex-direction: column; gap: 20px; margin-top: 22px; }
  .hm-hero-row .btn-lg { min-height: 60px; padding: 0 58px 0 22px; font-size: 16px; }
  .hm-hero-row .btn-lg .btn-c { right: 10px; }
  .hm-hero-exp { margin-right: 0; padding: 0; }
  .hm-hero-exp strong { display: inline; color: var(--gold); }
  .hm-hero-play { display: none; }

  .hm-svc { padding-block: 20px; }
  .hm-svc-head { padding-bottom: 20px; text-align: center; }
  .hm-svc-head .sh-title { color: var(--main-2); line-height: 31.2px; }
  .hm-grp + .hm-grp { margin-top: 24px; }
  .hm-svc .sl-ctrl { margin-top: 0; }

  .hm-prj { padding-block: 20px; }
  .hm-prj .sh-title { line-height: 31.2px; }
  .hm-flt { margin-bottom: 24px; }
  .hm-prj .pcard-t { -webkit-line-clamp: 2; }
  .hm-prj-more { margin-top: 32px; }
  .hm-prj-more .btn { min-width: 0; width: 100%; max-width: 303px; }

  .hm-fac, .hm-r1, .hm-r2, .hm-r3 { padding-block: 20px; }
  .hm-fac-head { padding-bottom: 20px; text-align: center; }
  .hm-fac-head .sh-label, .hm-fac-d, .hm-fac-cta { display: none; }
  .hm-fac .sl-ctrl { justify-content: space-between; margin-top: 16px; min-height: 52px; }
  .hm-fac-cta-m { display: block; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); }
  .hm-fac-cta-m .btn { min-height: 52px; padding-left: 20px; padding-right: 62px; white-space: nowrap; }
  .hm-fac .cho-in { gap: 2px; padding: 8px; }
  .hm-fac .cho .ic { font-size: 22px; }
  .hm-fac .cho-t { font-size: 12px; line-height: 16px; }
  .hm-fac .cho small { display: none; }
  .hm-fac-real figcaption { padding: 22px 8px 6px; font-size: 11px; line-height: 15px; }

  .hm-r1-head { padding-bottom: 20px; }
  .hm-r1-img { aspect-ratio: 1; }
  .hm-tabs { gap: 18px; margin-top: 20px; }
  .hm-tab { padding-left: 15px; }
  .hm-tab-t { padding-bottom: 8px; }
  .hm-r1-cta { margin-top: 24px; }

  .hm-r2-text .sh-title, .hm-r3-text .sh-title { padding-bottom: 20px; }
  .hm-r2 .hm-bl { margin-top: 20px; }
  .hm-bl { padding-left: 15px; }
  .hm-r2-cta { margin-top: 24px; }
  .hm-r2-cta .btn-out { min-height: 52px; padding: 0 70px 0 28px; border: 0; background: var(--grad); color: #fff; font-size: 16px; }
  .hm-r2-cta .btn-out .btn-c { right: 8px; width: 36px; height: 36px; background: #fff; color: var(--main); font-size: 20px; }
  .hm-r3-media { margin-top: 20px; margin-bottom: 12px; }
  .hm-r3-media .cho .ic { font-size: 56px; }

  .hm-team { padding-block: 20px; }
  .hm-team-head { margin-bottom: 20px; }
  .hm-mem { gap: 20px; }
  .hm-badge { width: 120px; min-height: 0; padding: 8px; font-size: 13px; }
  .hm-badge .ic { width: 26px; height: 26px; padding: 5px; }

  .hm-form { padding-block: 20px; }
  .hm-form-t { font-size: 24px; line-height: 36px; }
  .hm-pform { gap: 10px; padding-top: 16px; }
  .hm-pform .pform-f { flex: 1 1 0; min-width: 0; }
  .hm-pform .pform-f input { padding-left: 44px; padding-right: 10px; font-size: 15px; }
  .hm-pform .pform-f .ic { left: 16px; }
  .hm-pform-nd { display: none !important; }
  .hm-pform .btn { flex: none; min-width: 0; padding-left: 18px; padding-right: 58px; }
  .hm-pform .btn .btn-c { right: 8px; }

  .hm-rev { padding-block: 30px; margin-bottom: 20px; }
  .hm-rev-in { row-gap: 20px; }
  .hm-rev-v { width: 260px; }
  .hm-rev-cta { margin-top: 4px; }

  .hm-news { padding-block: 20px; }
  .hm-nc { padding: 20px 20px 0; }
  .hm-nc-ex { display: none; }
  .hm-news .sl-ctrl { display: flex; }

  .hm-mat { padding-block: 24px; }
  .hm-mat-in { flex-direction: column; align-items: stretch; gap: 8px; }
  .hm-mat-t { text-align: center; font-size: 16px; line-height: 24px; }
  .hm-mq li { font-size: 18px; gap: 20px; padding-right: 20px; }
}
@media (max-width: 359px) {
  .hm-fac-cta-m { display: none !important; }
  .hm-fac .sl-ctrl { justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .hm-mq-track { animation: none; }
  .hm-mq { overflow-x: auto; }
  .hm-dot-c::after { animation: none; }
}

/* ---- thi-cong.css ---- */
/* Nhóm Thi công (8 trang dịch vụ). Bố cục và số đo theo landing thi công của noithattugia.com.
   Tiền tố .tc- cho trang, .dt- cho phiếu dự toán. Chỉ dùng biến màu của base.css. */

/* ---------------------------------------------------------------- hero chung */
.tc-hero { position: relative; overflow: hidden; background: var(--dark); color: #fff; isolation: isolate; }
.tc-bg { position: absolute; inset: 0; z-index: -1; }
.tc-bg img { width: 100%; height: 100%; object-fit: cover; }
.tc-bg-draw img { filter: invert(1); opacity: .08; }
.tc-bg-photo::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .58); }
.tc-hero::after { content: ""; position: absolute; inset: auto 0 0; height: 40%; z-index: -1; pointer-events: none;
  background: radial-gradient(80% 100% at 15% 100%, color-mix(in srgb, var(--main) 30%, transparent), transparent 70%); }
.tc-hero-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 24px; align-items: center; padding-block: 80px; }
.tc-h1 { font-size: 44px; line-height: 54px; font-weight: 700; color: #fff; }
.tc-h1-l { display: block; }
.tc-tag { padding: 20px 0 20px; font-size: 24px; line-height: 36px; font-weight: 700; }
.tc-sub { padding: 12px 0 20px; font-size: 16px; line-height: 24px; }
.tc-tag, .tc-sub, .tc-cta-t, .tc-pack-c p, .tc-why-c p { text-wrap: balance; }
.tc-hnote { margin-top: 14px; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .78); }
.tc-hero .pform { gap: 12px; }
.tc-hero .pform-f { max-width: 380px; }
.tc-hero .pform .btn { white-space: nowrap; }

/* khung video bên phải hero thi công: ô chờ tối, không sọc sáng */
.tc-hero .cho { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .28); border-radius: 8px; color: #fff; }
.tc-hero .cho .ic { color: var(--gold); font-size: 56px; stroke-width: 1.2; }
.tc-hero .cho-t { color: #fff; font-size: 18px; line-height: 27px; }
.tc-hero .cho small { color: rgba(255, 255, 255, .7); }

/* B và B rút gọn: Tứ Gia cao 900 gồm dải xám 45 do video lệch (lỗi gốc, không chép).
   Ở đây 832 = màn 900 trừ header 68: hero vừa đúng màn hình đầu, nội dung căn giữa dọc. */
.tc-hero-b .tc-hero-row, .tc-hero-p .tc-hero-row { min-height: 832px; }

/* B rút gọn: chữ căn giữa cột trái, lưới 2×2 ảnh vuông 282 bên phải */
.tc-hero-p .tc-hero-row { padding-block: 90px; }
.tc-hero-p .tc-hero-txt { text-align: center; }
.tc-hero-p .pform { justify-content: center; }
.tc-hero-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 15px 24px; }
.tc-sq { aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: var(--dark-2); }
.tc-sq img { width: 100%; height: 100%; object-fit: cover; }
.tc-sq .cho { height: 100%; border-radius: 8px; background: rgba(255, 255, 255, .07); }
.tc-sq .cho .ic { font-size: 34px; }
.tc-sq .cho-t { font-size: 15px; line-height: 21px; }

/* A': hero thấp căn giữa (Tứ Gia cao 500) */
.tc-hero-c { display: flex; align-items: center; min-height: 500px; }
.tc-hero-c-in { max-width: 1030px; padding-block: 60px; text-align: center; }
.tc-hero-c .tc-tag { padding: 25px 0 12px; }
.tc-hero-c .pform { justify-content: center; max-width: 800px; margin-inline: auto; }
.tc-hero-c .pform-f { max-width: 430px; }

/* 1024–1199: cột chữ còn 485, H1 44 xuống 3 dòng; 36/46 giữ đúng 2 dòng như bản 1440 */
@media (max-width: 1199px) and (min-width: 1024px) {
  .tc-hero-b .tc-h1, .tc-hero-p .tc-h1 { font-size: 36px; line-height: 46px; }
}
/* máy tính bảng: 1 cột như Tứ Gia (col-md-6 xếp chồng dưới 992), bỏ khung video và lưới ảnh, form 1 hàng căn giữa */
@media (max-width: 1023px) {
  .tc-h1 { font-size: 34px; line-height: 44px; }
  .tc-tag { font-size: 20px; line-height: 30px; }
  .tc-hero-row { grid-template-columns: minmax(0, 1fr); text-align: center; }
  .tc-hero-b .tc-hero-row, .tc-hero-p .tc-hero-row { min-height: 0; padding-block: 64px; }
  .tc-hero-txt { max-width: 640px; margin-inline: auto; }
  .tc-hero-media, .tc-hero-grid { display: none; }
  .tc-hero .pform { justify-content: center; max-width: 600px; margin-inline: auto; }
  .tc-hero .pform-f { flex: 1 1 0; min-width: 0; max-width: none; }
  .tc-hero .pform .btn { flex: none; }
}
@media (max-width: 767px) {
  .tc-hero-row { padding-block: 36px 40px; }
  .tc-hero-b .tc-hero-row, .tc-hero-p .tc-hero-row { padding-block: 36px 40px; }
  .tc-h1 { font-size: 24px; line-height: 31.2px; }
  .tc-tag { padding: 14px 0 18px; font-size: 18px; line-height: 23.4px; }
  .tc-sub { padding: 10px 0 18px; font-size: 15px; line-height: 22px; }
  .tc-hero .pform { gap: 10px; }
  .tc-hero .pform input { padding-left: 44px; padding-right: 12px; }
  .tc-hero .pform-f .ic { left: 16px; }
  .tc-hero .pform .btn { flex: none; padding-left: 20px; padding-right: 56px; }
  .tc-hero .pform .btn-c { right: 8px; }
  .tc-hnote { margin-top: 12px; font-size: 13px; }
  .tc-hero-c { min-height: 263px; }
  .tc-hero-c-in { padding-block: 28px 32px; }
  .tc-hero-c .tc-tag { padding: 14px 0 18px; }
}

/* ---------------------------------------------------------------- 5 ô ảnh xưởng (box_tc_1) */
.tc-fac .cho { border-radius: 8px; }
@media (min-width: 768px) {
  .tc-fac .sl-track { grid-auto-flow: row; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-auto-columns: auto; overflow: visible; row-gap: 24px; }
  .tc-fac .sl-item:nth-child(-n+2) { grid-column: span 3; }
  .tc-fac .sl-item:nth-child(n+3) { grid-column: span 2; }
  .tc-fac .sl-ctrl { display: none; }
}
@media (max-width: 767px) {
  .tc-fac .sl-ctrl { margin-top: 20px; }
  .tc-fac .cho-in { padding: 12px; }
  .tc-fac .cho-t { font-size: 14px; line-height: 20px; }
}

/* ---------------------------------------------------------------- dải nhận báo giá (top_4_xn) */
.tc-cta { padding-block: 40px; background: linear-gradient(281deg, var(--bg) 0%, var(--cream) 49%, color-mix(in srgb, var(--cream) 55%, var(--bg)) 75%, var(--bg) 100%); }
.tc-cta-in { max-width: 830px; text-align: center; }
.tc-cta-t { padding-bottom: 12px; font-size: 32px; line-height: 48px; font-weight: 700; color: var(--text); }
.tc-cta .pform { justify-content: center; }
.tc-cta .pform-f { max-width: 380px; }
.tc-cta .pform input { border: 1px solid var(--line); }
.tc-cta .pform .btn { white-space: nowrap; }
@media (max-width: 767px) {
  .tc-cta-t { font-size: 18px; line-height: 27px; }
  .tc-cta .pform { gap: 10px; }
  .tc-cta .pform-f { flex: 1 1 0; min-width: 0; max-width: none; }
  .tc-cta .pform input { padding-left: 44px; padding-right: 12px; }
  .tc-cta .pform-f .ic { left: 16px; }
  .tc-cta .pform .btn { flex: none; padding-left: 20px; padding-right: 56px; }
}

/* ---------------------------------------------------------------- video khách (box_tc_3 / tg_h_8) */
.tc-rv { padding-block: 40px; }
.tc-rv-head { position: relative; padding-right: 300px; }
.tc-rv-head .sh { padding-bottom: 36px; }
.tc-rv-head .sh-title { font-size: 30px; line-height: 39px; }
.tc-rv-head .sh-desc { margin-top: 10px; }
.tc-rv-btn { position: absolute; right: 0; top: 0; }
.tc-rv-card .cho { border-radius: 8px; background: linear-gradient(0deg, rgba(0, 0, 0, .04), rgba(0, 0, 0, .04)), repeating-linear-gradient(135deg, var(--cream) 0 14px, var(--bg-gray) 14px 28px); }
.tc-rv-card .cho .ic { font-size: 48px; }
.tc-rv-card figcaption { padding: 12px 8px 0; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.tc-rv-m { display: none; }
@media (max-width: 767px) {
  .tc-rv { background: linear-gradient(181deg, var(--bg) 0%, var(--cream) 100%); }
  .tc-rv-head { padding-right: 0; text-align: center; }
  .tc-rv-head .sh-title { font-size: 24px; line-height: 32px; }
  .tc-rv-btn, .tc-rv-d { display: none; }
  .tc-rv-m { display: grid; justify-items: center; gap: 24px; }
  .tc-rv-m .cho { max-width: 313px; border-radius: 12px; }
}

/* ---------------------------------------------------------------- dự án (category_du_an) */
.tc-proj .sh-center { max-width: 688px; }
.tc-proj .sh-title { font-size: 30px; line-height: 39px; }
.tc-proj .sh { padding-bottom: 36px; }
.tc-more { margin-top: 40px; text-align: center; }
/* 768–1023: khối 3 thẻ vẫn 3 cột (base còn 2 cột, thẻ thứ ba đứng một mình) */
@media (min-width: 768px) and (max-width: 1023px) {
  .tc-proj .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .tc-proj .pcard-t { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .tc-proj .pmeta { gap: 6px 14px; font-size: 13px; }
  .tc-proj .pmeta .ic { font-size: 18px; }
}
@media (max-width: 767px) {
  .tc-proj .sh-title { font-size: 24px; line-height: 32px; }
  .tc-more { margin-top: 28px; }
}

/* ---------------------------------------------------------------- bài viết SEO */
.tc-seo { --more-bg: var(--bg-gray); }
/* khối Thông tin liên hệ: base để nền xám, trùng nền bài nên hộp biến mất; ở đây hộp trắng có viền */
.tc-seo .company { background: var(--bg); border: 1px solid var(--line-2); }
.tc-entry h2 { font-size: 24px; line-height: 31.2px; }
.tc-entry p, .tc-entry li, .tc-seo .company li { text-wrap: pretty; }  /* tránh dòng cuối một chữ */
.tc-entry h3 { font-size: 19px; line-height: 26px; font-weight: 700; }
.tc-entry h2:first-child, .tc-entry .toc + h2 { margin-top: 28px; }
.tc-entry table { background: var(--bg); }
.tc-entry td, .tc-entry th { padding: 8px 12px; }
.tc-entry .tbl { -webkit-overflow-scrolling: touch; }
.tc-entry thead th { vertical-align: middle; }
.tc-entry th.n { text-align: center; }
.tc-entry td.n { text-align: center; white-space: nowrap; }
.tc-entry figure.cho, .tc-entry .fig { max-width: 800px; margin-inline: auto; }
.tc-entry figure.cho { margin-top: 24px; }
.tc-entry .fig-doc { max-width: 480px; }  /* ảnh dọc: giữ khổ hẹp của base, không kéo lên 800px */
.tc-entry .fig + p:has(> a:only-child) { margin-top: 8px; text-align: center; }  /* link "Xem thêm ảnh thật" ngay dưới chú thích */
.tc-entry .tc-note { font-size: 14px; line-height: 21px; color: var(--muted-2); font-style: italic; }
.tc-entry .toc { background: var(--bg); }
.tc-seo .more-in::after { height: 200px; }
@media (max-width: 767px) {
  .tc-entry h2 { font-size: 22px; line-height: 30px; }
  .tc-entry h3 { font-size: 18px; line-height: 25px; }
  .tc-entry td, .tc-entry th { padding: 8px 10px; }
}

/* ---------------------------------------------------------------- 4 điểm mạnh có số (top4_v3) */
.tc-usp-g { text-align: center; }
.tc-usp-i .cho { border-radius: 8px; }
.tc-usp-i .cho-in { padding: 10px; gap: 4px; }
.tc-usp-i .cho .ic { font-size: 28px; }
.tc-usp-i .cho-t { font-size: 14px; line-height: 20px; }
/* ảnh thật thay ô chờ: cùng khung 282/183 để lưới không xô lệch */
.tc-usp-ph { position: relative; aspect-ratio: 282/183; border-radius: 8px; overflow: hidden; background: var(--ph); }
.tc-usp-ph img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, center); }
.tc-num { display: grid; place-items: center; width: 80px; height: 80px; margin: 25px auto 10px; border-radius: 50%; background: var(--main); color: #fff; font-size: 50px; line-height: 1; font-weight: 700; }
.tc-usp-t { font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
@media (max-width: 767px) {
  .tc-usp-g { gap: 28px 16px; }
  .tc-usp-i .cho small { display: none; }
  .tc-usp-i .cho .ic { font-size: 22px; }
  .tc-usp-i .cho-t { font-size: 12px; line-height: 16px; }
  .tc-usp-ph .pcard-real { top: 8px; left: 8px; padding: 2px 8px; font-size: 12px; }
  .tc-num { width: 60px; height: 60px; margin: 20px auto 10px; font-size: 36px; }
}

/* ---------------------------------------------------------------- 4 gói (b88_b1) */
.tc-pack { position: relative; overflow: hidden; isolation: isolate; padding-block: 40px; background: var(--dark); color: #fff; }
.tc-pack .tc-bg-draw img { opacity: .1; }
.tc-pack-h { margin-bottom: 20px; text-align: center; font-size: 30px; line-height: 39px; font-weight: 700; color: #fff; }
.tc-pack-g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
.tc-pack-c { display: flex; flex-direction: column; align-items: center; padding: 20px 28px; border-radius: 12px; background: var(--main); text-align: center; }
.tc-pack-c h3 { font-size: 24px; line-height: 31.2px; font-weight: 700; color: #fff; }
.tc-pack-c p { margin-top: 10px; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .92); max-width: 480px; }
.tc-pack-a { display: inline-flex; align-items: center; gap: 4px; margin-top: auto; padding-top: 12px; min-height: 44px; font-size: 14px; font-weight: 500; color: var(--yellow); }
.tc-pack-a:hover { color: #fff; }
.tc-pack-a .ic { font-size: 16px; }
@media (max-width: 767px) {
  .tc-pack { padding-block: 32px; }
  .tc-pack-h { font-size: 24px; line-height: 32px; }
  .tc-pack-g { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tc-pack-c { padding: 20px 16px 8px; }
  .tc-pack-c h3 { font-size: 22px; line-height: 29px; }
}

/* ---------------------------------------------------------------- 4 lý do (b88_b2) */
.tc-why-h { margin-bottom: 20px; text-align: center; font-size: 30px; line-height: 39px; font-weight: 700; }
.tc-why-c { padding: 20px; border-radius: 12px; background: var(--main); color: #fff; text-align: center; }
.tc-why-c h3 { font-size: 18px; line-height: 27px; font-weight: 700; color: #fff; }
.tc-why-c p { margin-top: 10px; font-size: 14px; line-height: 21px; color: rgba(255, 255, 255, .92); }
@media (max-width: 767px) {
  .tc-why-h { font-size: 24px; line-height: 32px; }
  .tc-why-g { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tc-why-c { padding: 20px 16px; }
}

/* ---------------------------------------------------------------- phiếu dự toán */
.dt { padding-block: 56px; background: var(--cream); }
.dt .sh { padding-bottom: 36px; }
.dt-grid { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); gap: 24px; align-items: start; }
.dt-form { min-width: 0; padding: 28px 32px; border-radius: 16px; background: var(--bg); border: 1px solid var(--line-2); }
.dt-q { margin: 0 0 26px; padding: 0; border: 0; min-width: 0; }
.dt-q-last { margin-bottom: 0; }
.dt-lb { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; width: 100%; padding: 0; margin-bottom: 10px; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.dt-lb output { font-size: 24px; line-height: 30px; font-weight: 700; color: var(--main-2); font-variant-numeric: tabular-nums; }
.dt-opts { display: flex; flex-wrap: wrap; gap: 8px; }
.dt-pill, .dt-tier, .dt-chk { position: relative; cursor: pointer; }
.dt-pill input, .dt-tier input, .dt-chk input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.dt-pill span { display: inline-flex; align-items: center; min-height: 44px; padding: 0 22px; border-radius: 30px; border: 1px solid var(--line); background: var(--bg); font-size: 15px; font-weight: 500; color: var(--text); transition: background .2s, color .2s, border-color .2s; }
.dt-pill:hover span { border-color: var(--main); }
.dt-pill input:checked + span { background: var(--grad); border-color: transparent; color: #fff; }
.dt-pill input:focus-visible + span, .dt-tier input:focus-visible + .dt-tier-in, .dt-chk input:focus-visible + .dt-chk-in { outline: 2px solid var(--main); outline-offset: 2px; }
.dt-range { width: 100%; height: 32px; margin: 0; accent-color: var(--main); cursor: pointer; }
.dt-scale { display: flex; justify-content: space-between; font-size: 13px; color: var(--muted); }
.dt-tiers { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.dt-tier-in { display: grid; align-content: start; gap: 2px; height: 100%; padding: 12px 14px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); transition: background .2s, border-color .2s; }
.dt-tier-in b { font-size: 15px; line-height: 22px; color: var(--ink); }
.dt-tier-in small { font-size: 13px; line-height: 18px; color: var(--muted-2); }
.dt-tier:hover .dt-tier-in { border-color: var(--main); }
.dt-tier input:checked + .dt-tier-in { border-color: var(--main); background: var(--cream); box-shadow: inset 0 0 0 1px var(--main); }
.dt-items { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.dt-chk-in { display: flex; align-items: flex-start; gap: 10px; height: 100%; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); font-size: 15px; line-height: 21px; color: var(--ink); transition: background .2s, border-color .2s; }
.dt-chk-in small { display: block; margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted); }
.dt-box { flex: none; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px; border: 1.5px solid var(--line); color: transparent; font-size: 14px; }
.dt-box .ic { stroke-width: 2.6; }
.dt-chk:hover .dt-chk-in { border-color: var(--main); }
.dt-chk input:checked + .dt-chk-in { border-color: var(--main); background: var(--cream); }
.dt-chk input:checked + .dt-chk-in .dt-box { border-color: var(--main); background: var(--main); color: #fff; }
.dt-group { grid-column: 1 / -1; margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--muted-2); }
.dt-mini { display: none; }
.dt-noscript { margin-top: 16px; color: var(--red); }

.dt-sheet { position: sticky; top: calc(var(--head) + env(safe-area-inset-top, 0px) + 16px); min-width: 0; padding: 28px 32px; border-radius: 16px; background: var(--bg);
  border-top: 4px solid var(--main); box-shadow: 0 12px 32px rgba(0, 0, 0, .07); }
.dt-sheet-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid var(--ink); }
.dt-sheet-head h3 { font-size: 24px; line-height: 32px; font-weight: 700; }
.dt-cap { font-size: 13px; line-height: 18px; color: var(--muted); text-align: right; }
.dt-for { margin-top: 12px; font-size: 15px; line-height: 22px; color: var(--muted-2); }
.dt-tb { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 14px; line-height: 20px; font-variant-numeric: tabular-nums; }
.dt-tb th { padding: 8px 8px 8px 0; border-bottom: 1px solid var(--line); text-align: left; font-size: 13px; font-weight: 600; color: var(--muted-2); }
.dt-tb td { padding: 10px 8px 10px 0; border-bottom: 1px solid var(--line-2); vertical-align: top; color: var(--ink); }
.dt-tb .n { text-align: right; white-space: nowrap; }
.dt-tb th:last-child, .dt-tb td:last-child { padding-right: 0; }
.dt-tb td.dt-none { color: var(--muted); }
.dt-total { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; margin-top: 18px; }
.dt-total > span:first-child { font-size: 16px; font-weight: 700; color: var(--ink); }
.dt-sum { font-size: 40px; line-height: 1.1; font-weight: 700; color: var(--main-2); font-variant-numeric: tabular-nums; text-align: right; }
.dt-sum small { margin-left: 6px; font-size: 15px; font-weight: 500; color: var(--muted-2); }
.dt-empty { margin-top: 6px; font-size: 14px; color: var(--red); }
.dt-notes { display: grid; gap: 4px; margin-top: 14px; font-size: 14px; line-height: 21px; color: var(--muted-2); }
.dt-sign { margin-top: 18px; padding-top: 12px; border-top: 1px dashed var(--line); font-size: 14px; font-weight: 600; color: var(--ink); }
.dt-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
.dt-acts .btn { padding-left: 28px; }
.dt-acts .btn-zalo .btn-c { --zalo-t: #fff; font-size: 26px; }
.dt-ok { min-height: 21px; margin-top: 10px; font-size: 14px; line-height: 21px; color: var(--main-2); }
.dt-ok:empty { min-height: 0; margin-top: 0; }
.dt-hint { margin-top: 8px; font-size: 13px; line-height: 19px; color: var(--muted); }

@media (max-width: 1023px) {
  .dt-grid { grid-template-columns: minmax(0, 1fr); }
  .dt-sheet { position: static; }
  .dt-mini { position: sticky; top: calc(var(--head) + env(safe-area-inset-top, 0px)); z-index: 5; display: flex; justify-content: space-between; align-items: center; gap: 12px;
    margin: -28px -32px 20px; padding: 10px 32px; border-radius: 16px 16px 0 0; background: var(--cream); border-bottom: 1px solid var(--line); font-size: 14px; }
  .dt-mini b { font-size: 18px; color: var(--main-2); }
  .dt-mini { padding-block: 2px; }
  .dt-mini a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 8px; margin-right: -8px; color: var(--main-2); font-weight: 600; text-decoration: underline; text-underline-offset: 3px; }
}
/* 1024–1199: cột phiếu còn khoảng 444, 4 nút số phòng chia đều 4 cột thay vì rơi nút cuối xuống hàng 2 */
@media (max-width: 1199px) and (min-width: 1024px) {
  .dt-opts-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dt-opts-4 .dt-pill span { display: flex; justify-content: center; padding: 0 6px; white-space: nowrap; }
}
@media (max-width: 767px) {
  .dt { padding-block: 32px; }
  .dt-form, .dt-sheet { padding: 20px 16px; }
  .dt-mini { margin: -20px -16px 16px; padding: 2px 16px; }
  .dt-pill span { padding: 0 16px; }
  .dt-opts-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .dt-opts-4 .dt-pill span { display: flex; justify-content: center; padding: 0 6px; white-space: nowrap; }
  .dt-tier-in { padding: 10px; }
  .dt-tier-in b { font-size: 14px; }
  .dt-tier-in small { font-size: 12px; line-height: 16px; }
  .dt-items { grid-template-columns: minmax(0, 1fr); }
  .dt-sheet-head h3 { font-size: 20px; line-height: 28px; }
  .dt-sum { font-size: 30px; }
  .dt-tb { font-size: 13px; }
  .dt-tb th, .dt-tb td { padding-right: 6px; }
  .dt-acts .btn { flex: 1 1 100%; }
}

/* ---------------------------------------------------------------- điện thoại: một mức khoảng cách cho mọi khối
   32px trên và dưới: hai khối cùng nền cạnh nhau cách 64, đổi nền thì mỗi bên 32. Hero giữ khoảng riêng. */
@media (max-width: 767px) {
  .tc-fac, .tc-cta, .tc-rv, .tc-proj, .tc-seo, .tc-usp, .tc-pack, .tc-why, .dt { padding-block: 32px; }
}

/* ---- thiet-ke.css ---- */
/* Nhóm thiết kế: 5 trang dịch vụ thiết kế nội thất (bố cục A, A rút gọn và C của noithattugia.com).
   Mọi lớp có tiền tố .tk-. Số đo lấy theo spec-dich-vu.json (máy tính 1440, điện thoại 390). */

/* ---------------------------------------------------------------- hero bố cục A (box_reg_top_4) */
.tk-hero, .tk-ban { position: relative; isolation: isolate; overflow: hidden; color: #fff; text-align: center; background: var(--dark); }
.tk-hero-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tk-hero::before, .tk-ban::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, .38), rgba(0, 0, 0, .38)), color-mix(in srgb, var(--dark) 42%, transparent); }
.tk-hero { display: flex; flex-direction: column; justify-content: center; min-height: 800px; padding: 50px 0 110px; }
.tk-hero-in { max-width: 1000px; margin-inline: auto; }
.tk-hero-t, .tk-ban-t { color: #fff; font-size: 44px; line-height: 54px; font-weight: 700; }
.tk-hero-s { padding: 25px 0 12px; font-size: 24px; line-height: 36px; font-weight: 700; }
.tk-form { justify-content: center; max-width: 800px; margin: 12px auto 0; text-align: left; }
.tk-form .pform-f { flex: 0 1 430px; max-width: 430px; min-width: 0; }
.tk-form input { border: 1px solid var(--line); font-weight: 500; }
.tk-form input::placeholder { color: var(--muted-2); }
.tk-form .btn { flex: none; }
.tk-form .form-err { text-align: center; }

/* hero 100vh có 4 thẻ danh mục ở đáy (trang thiết kế nội thất) */
.tk-hero-cats { justify-content: flex-start; min-height: min(800px, calc(100svh - var(--head))); padding: 50px 0 calc(183px + 40px); }
.tk-cats { position: absolute; left: 0; right: 0; bottom: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.tk-cat { position: relative; display: block; height: 183px; border-radius: 12px 12px 0 0; overflow: hidden; background: var(--dark-2); }
.tk-cat img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.tk-cat:hover img { transform: scale(1.1); }
.tk-cat span { position: absolute; left: 0; right: 0; bottom: 0; padding: 45px 20px 20px; text-align: left; font-size: 16px; line-height: 22px; font-weight: 700;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .75)); }

/* ---------------------------------------------------------------- hero bố cục C (văn phòng, box_reg_top_3) */
.tk-ban { display: flex; align-items: center; min-height: 443px; padding: 80px 0; }
.tk-ban::before { background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), color-mix(in srgb, var(--dark) 45%, transparent); }
.tk-ban .container { width: 100%; }
.tk-ban-t { font-size: 40px; line-height: 54px; }
.tk-ban-s { padding: 20px 0 10px; font-size: 18px; line-height: 27px; }
.tk-form-c { margin-top: 20px; }
.tk-form-c .pform-f { flex-basis: 380px; max-width: 380px; }

/* ---------------------------------------------------------------- đầu khối 30/39 (category_du_an, box_tc_4, box_tc_3) */
@media (min-width: 768px) { .tk-sh30 .sh-title { font-size: 30px; line-height: 39px; } }

/* ---------------------------------------------------------------- dự án đã thực hiện */
.tk-du-an .sh-center { max-width: 688px; }
.tk-du-an .sh-desc { text-wrap: balance; }
.tk-du-an .sh { padding-bottom: 76px; }
.tk-more { margin-top: 40px; text-align: center; }
.tk-more .btn { min-width: 270px; }
.tk-pcard-cho .pcard-img { background: none; }
.tk-pcard-cho .cho { height: 100%; }
.tk-pcard-cho .pcard-t { color: var(--muted-2); }
.tk-pcard-note { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--muted); }

/* ---------------------------------------------------------------- 2 gói đơn giá (box_tc_4) */
.tk-goi .sh { max-width: 800px; padding-bottom: 32px; }
.tk-goi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tk-pk { --pk: var(--grad-orange); display: flex; flex-direction: column; }
.tk-pk-2 { --pk: var(--grad); }
.tk-pk-tab { align-self: flex-start; position: relative; padding: 0 72px 0 20px; font-size: 16px; line-height: 44px; font-weight: 700; color: #fff;
  background: var(--pk); border-radius: 16px 16px 0 0;
  -webkit-mask: linear-gradient(#000 0 0) left top / calc(100% - 52px) 100% no-repeat, radial-gradient(52px 44px at 100% 0, transparent 98%, #000 100%) right top / 52px 100% no-repeat;
  mask: linear-gradient(#000 0 0) left top / calc(100% - 52px) 100% no-repeat, radial-gradient(52px 44px at 100% 0, transparent 98%, #000 100%) right top / 52px 100% no-repeat; }
.tk-pk-body { position: relative; flex: 1; padding: 32px 32px 116px; background: var(--bg-gray); border-radius: 0 16px 16px 16px; }
.tk-pk-body::before { content: ""; position: absolute; inset: 0; padding-top: 2px; border-radius: inherit; background: var(--pk); pointer-events: none;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); }
.tk-pk-price { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 6px; }
.tk-pk-price b { font-size: 34px; line-height: 44px; font-weight: 700; color: var(--ink); }
.tk-pk-price span { font-size: 16px; font-weight: 500; color: var(--muted); }
.tk-pk hr { border: 0; border-top: 1px solid var(--line-2); margin: 20px 0; }
.tk-pk-list li { position: relative; padding: 0 0 14px 36px; font-size: 16px; line-height: 24px; }
.tk-pk-list .ic { position: absolute; left: 0; top: 0; width: 24px; height: 24px; padding: 4px; border-radius: 6px; background: var(--main); color: #fff; stroke-width: 2.6; }
.tk-pk .btn { position: absolute; left: 32px; bottom: 32px; }
.tk-goi-note { margin-top: 20px; font-size: 14px; line-height: 21px; color: var(--muted-2); }

/* ---------------------------------------------------------------- quy trình 5 bước (top_5_xn) */
.tk-quy { background: var(--bg-gray); padding: 40px 0 88px; }
.tk-quy-head { position: relative; }
.tk-quy-t { position: relative; z-index: 1; display: table; margin: 0 auto; padding: 0 20px; background: var(--bg-gray); text-align: center;
  font-size: 46px; line-height: 56px; font-weight: 700; }
.tk-quy-br { position: absolute; top: 28px; left: 10%; right: 10%; height: 116px; display: flex; }
.tk-quy-br::before, .tk-quy-br::after { content: ""; flex: 1; border-top: 2px dashed; }
.tk-quy-br::before { border-left: 2px dashed; border-color: var(--accent); border-radius: 10px 0 0 0; }
.tk-quy-br::after { border-right: 2px dashed; border-color: var(--main); border-radius: 0 10px 0 0; }
.tk-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin-top: 88px; text-align: center; }
.tk-step { --c: var(--accent); position: relative; padding: 44px 12px 0; }
.tk-step:nth-child(2) { --c: color-mix(in srgb, var(--accent) 75%, var(--main)); }
.tk-step:nth-child(3) { --c: color-mix(in srgb, var(--accent) 50%, var(--main)); }
.tk-step:nth-child(4) { --c: color-mix(in srgb, var(--accent) 25%, var(--main)); }
.tk-step:nth-child(5) { --c: var(--main); }
.tk-step::after { content: ""; position: absolute; top: 0; left: 50%; width: 20px; height: 20px; margin-left: -10px; border-radius: 50%;
  border: 2px solid var(--c); background: var(--c); box-shadow: inset 0 0 0 4px var(--bg); }
.tk-step:not(:first-child):not(:last-child)::before { content: ""; position: absolute; top: -34px; left: 50%; height: 28px; margin-left: -1px; border-left: 2px dashed var(--c); }
.tk-step h3 { font-size: 18px; line-height: 23.4px; font-weight: 700; }
.tk-step p { margin-top: 12px; font-size: 14px; line-height: 21px; color: var(--text); text-wrap: pretty; }
@media (min-width: 1024px) { .tk-step p { text-wrap: balance; } }  /* 5 cột căn giữa: các dòng dài đều nhau */

/* ---------------------------------------------------------------- bài SEO (top_5_xn > .content-post) */
.tk-art { --more-bg: var(--bg-gray); background: var(--bg-gray); padding-bottom: 40px; }
.tk-art-in { border-top: 1px solid var(--line-2); padding-top: 32px; }
.tk-art-c { --more-bg: var(--bg); background: var(--bg); padding: 50px 0; }
/* khối Thông tin liên hệ trên nền xám của bài: hộp trắng có viền (base để nền xám, trùng nền nên hộp biến mất) */
.tk-art:not(.tk-art-c) .company { background: var(--bg); border: 1px solid var(--line-2); }
.tk-entry .fig, .tk-entry figure.cho { max-width: 800px; margin-inline: auto; }
.tk-entry .fig { margin-top: 24px; margin-bottom: 8px; }
.tk-entry .fig-doc { max-width: 480px; }  /* ảnh dọc 3:4 (ảnh thật chụp điện thoại): không phóng tới 800 px */
.tk-entry .fig figcaption { text-wrap: balance; }  /* chú thích ảnh thật dài: không để một chữ rơi xuống dòng cuối */
@media (min-width: 1024px) { .tk-entry > p:not([class]) { text-align: justify; } }
.tk-entry p, .tk-entry li, .tk-loi-card p, .tk-qa-a p, .tk-pcard-note, .tk-art .company li { text-wrap: pretty; }  /* tránh dòng cuối một chữ */

/* ---------------------------------------------------------------- lợi ích (top_6_xn) */
.tk-loi-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; align-items: end; }
.tk-loi-img .cho { max-width: 588px; }
.tk-loi-t { font-size: 34px; line-height: 44px; font-weight: 700; margin-bottom: 36px; }
.tk-loi-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.tk-loi-card { position: relative; overflow: hidden; min-height: 238px; padding: 20px; border: 1px solid var(--line-2); border-radius: 20px;
  background: linear-gradient(123deg, var(--bg) 0%, color-mix(in srgb, var(--cream) 60%, var(--bg)) 50%, var(--bg) 100%); transition: background .3s, color .3s, border-color .3s; }
.tk-loi-card::before { content: ""; position: absolute; right: 0; bottom: 0; width: 140px; height: 100%; pointer-events: none;
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--main) 8%, transparent) 0 12px, transparent 12px 26px);
  -webkit-mask: linear-gradient(180deg, transparent 30%, #000); mask: linear-gradient(180deg, transparent 30%, #000); }
.tk-loi-card h3 { position: relative; padding-bottom: 16px; font-size: 18px; line-height: 23.4px; font-weight: 700; transition: color .3s; }
.tk-loi-card p { position: relative; font-size: 14px; line-height: 21px; }
.tk-loi-card:hover { background: linear-gradient(135deg, var(--main), var(--dark)); border-color: var(--main); color: #fff; }
.tk-loi-card:hover h3 { color: #fff; }

/* ---------------------------------------------------------------- video khách (box_tc_3) */
.tk-vid { padding: 40px 0; }
.tk-vid-head { position: relative; padding-right: 290px; }
.tk-vid-btn { position: absolute; right: 0; top: 0; }
.tk-v .cho { border-radius: 8px; }
.tk-v figcaption { padding: 12px; text-align: center; font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }

/* ---------------------------------------------------------------- FAQ trên nền ảnh (top_8_xn) */
.tk-faq { position: relative; isolation: isolate; overflow: hidden; padding: 40px 0; background: var(--dark); }
.tk-faq-bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.tk-faq::before { content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(rgba(0, 0, 0, .5), rgba(0, 0, 0, .5)), color-mix(in srgb, var(--dark) 55%, transparent); }
.tk-faq-t { max-width: 688px; margin: 0 auto; color: #fff; text-align: center; font-size: 48px; line-height: 62.4px; font-weight: 700; }
.tk-faq-box { interpolate-size: allow-keywords; margin: 44px 0; padding: 20px; border-radius: 16px; background: var(--bg); box-shadow: 4px 4px 4px rgba(0, 0, 0, .1); }
.tk-qa { border-bottom: 1px solid var(--line-2); }
.tk-qa summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 44px; padding: 16px 0; list-style: none; cursor: pointer;
  font-size: 16px; line-height: 24px; font-weight: 700; color: var(--ink); }
.tk-qa summary::-webkit-details-marker { display: none; }
.tk-qa summary span { text-wrap: pretty; }
.tk-qa summary:hover { color: var(--main-2); }
.tk-qa summary .ic { font-size: 18px; stroke-width: 2.2; transition: transform .2s; }
.tk-qa[open] summary .ic { transform: rotate(180deg); }
.tk-qa-a { margin: -6px 0 16px; padding: 20px; background: var(--bg-gray); font-size: 16px; line-height: 24px; color: var(--text); }
.tk-qa::details-content { block-size: 0; overflow: hidden; transition: block-size .2s, content-visibility .2s allow-discrete; }
.tk-qa[open]::details-content { block-size: auto; }

/* ---------------------------------------------------------------- 4 ô cam kết có số (page_tkntcc) */
.tk-usp { padding: 70px 0 30px; }
.tk-usp-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; text-align: center; }
.tk-usp-n { display: grid; place-items: center; width: 100px; height: 100px; margin: 0 auto 15px; border-radius: 50%; background: var(--grad);
  color: #fff; font-size: 30px; line-height: 1; font-weight: 700; }
.tk-usp p { font-size: 16px; line-height: 24px; color: var(--text); text-wrap: balance; }

/* ---------------------------------------------------------------- 1024–1199 */
@media (max-width: 1199px) and (min-width: 1024px) {
  /* thẻ danh mục rộng khoảng 230: nhãn dài nhất ("… văn phòng") vẫn nằm 1 dòng như 3 thẻ kia */
  .tk-cat span { padding-inline: 16px; font-size: 15px; }
}

/* ---------------------------------------------------------------- máy tính bảng */
@media (min-width: 768px) and (max-width: 1023px) {
  /* khối 3 thẻ vẫn 3 cột (base còn 2 cột, thẻ thứ ba đứng một mình ở hàng 2) */
  .tk-du-an .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 16px; }
  .tk-du-an .pcard-t { margin-top: 16px; font-size: 16px; line-height: 24px; }
  .tk-du-an .pmeta { gap: 6px 14px; font-size: 13px; }
  .tk-du-an .pmeta .ic { font-size: 18px; }
  .tk-pcard-note { font-size: 13px; line-height: 19px; }
  .tk-cat span { padding: 28px 12px 14px; font-size: 15px; line-height: 20px; }
}
@media (max-width: 1023px) {
  .tk-hero { min-height: 600px; padding-bottom: 80px; }
  .tk-hero-cats { min-height: 0; padding-bottom: calc(140px + 40px); }
  .tk-cats { gap: 12px; }
  .tk-cat { height: 140px; }
  .tk-hero-t { font-size: 36px; line-height: 46px; }
  .tk-hero-s { font-size: 20px; line-height: 30px; }
  .tk-quy { padding: 40px 0; }
  .tk-quy-t { display: block; padding: 0; font-size: 34px; line-height: 44px; }
  /* quy trình: danh sách dọc như bản điện thoại (5 cột 147px quá chật) */
  .tk-quy-br, .tk-step::before { display: none; }
  .tk-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; max-width: 640px; margin: 36px auto 0; text-align: left; }
  .tk-step { padding: 0 0 0 34px; }
  .tk-step::after { left: 0; top: 2px; margin-left: 0; }
  .tk-step p { margin-top: 8px; }
  .tk-loi-row { grid-template-columns: minmax(0, 1fr); }
  .tk-loi-img { width: 100%; max-width: 588px; margin-inline: auto; }
  .tk-faq-t { font-size: 36px; line-height: 48px; }
}

/* ---------------------------------------------------------------- điện thoại */
@media (max-width: 767px) {
  .tk-hero { min-height: 0; padding: 24px 0; }
  .tk-hero-t, .tk-ban-t { font-size: 24px; line-height: 31.2px; }
  .tk-hero-s { padding: 12px 0 4px; font-size: 18px; line-height: 23.4px; }
  .tk-form { gap: 10px; }
  .tk-form .pform-f, .tk-form-c .pform-f { flex: 1 1 140px; max-width: none; }
  .tk-form .btn { padding: 0 54px 0 20px; }
  .tk-form .btn .btn-c { right: 8px; }
  .tk-hero-cats { padding: 24px 0 0; }
  .tk-cats { position: static; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin-top: 20px; padding-bottom: 16px; }
  .tk-cat { height: 109px; border-radius: 8px; }
  .tk-cat span { padding: 28px 12px 10px; font-size: 15px; line-height: 20px; }

  .tk-ban { min-height: 0; padding: 48px 0; }
  .tk-ban-s { padding: 12px 0 4px; font-size: 16px; line-height: 24px; }

  .tk-du-an .sh { padding-bottom: 32px; }
  .pcard:not(.tk-pcard-cho) ~ .tk-pcard-cho { display: none; }
  .tk-more { margin-top: 32px; }

  .tk-goi .sh { padding-bottom: 24px; }
  .tk-goi-row { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .tk-pk-body { padding: 24px 20px 100px; }
  .tk-pk-price b { font-size: 30px; line-height: 40px; }
  .tk-pk .btn { left: 20px; bottom: 24px; }

  .tk-quy-t { font-size: 24px; line-height: 32px; }
  .tk-steps { margin-top: 28px; }

  .tk-art-in { padding-top: 32px; }
  .tk-entry table { font-size: 14px; line-height: 20px; }
  .tk-entry th, .tk-entry td { padding: 8px; }

  .tk-loi-t { font-size: 22px; line-height: 30px; margin: 4px 0 20px; }
  .tk-loi-grid { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .tk-loi-card, .tk-loi-card:hover { min-height: 0; border-radius: 24px; border-color: var(--main); color: #fff;
    background: linear-gradient(135deg, var(--main), var(--dark)); box-shadow: 1px 2px 0 rgba(0, 0, 0, .1); }
  .tk-loi-card h3 { color: #fff; padding-bottom: 10px; }
  .tk-loi-card::before { display: none; }

  .tk-vid { background: linear-gradient(181deg, var(--bg), color-mix(in srgb, var(--cream) 70%, var(--bg))); }
  .tk-vid-head { padding-right: 0; text-align: center; }
  .tk-vid-btn { display: none; }
  .tk-v .cho { aspect-ratio: 9 / 16 !important; max-width: 313px; margin-inline: auto; border-radius: 24px; }


  .tk-faq-t { font-size: 22px; line-height: 30px; }
  .tk-faq-box { margin: 24px 0 0; padding: 4px 16px; }
  .tk-qa-a { padding: 16px; }


  .tk-usp-row { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 16px; }
}
@media (prefers-reduced-motion: reduce) { .tk-qa::details-content { transition: none; } }

/* ---------------------------------------------------------------- điện thoại: một mức khoảng cách cho mọi khối
   32px trên và dưới (hero giữ khoảng riêng): hai khối cùng nền cạnh nhau cách 64, đổi nền thì mỗi bên 32.
   Bài SEO nối tiếp khối xám phía trên nên chỉ có 32 dưới, phần trên là vạch kẻ + 32 (.tk-art-in). */
@media (max-width: 767px) {
  .tk-du-an, .tk-goi, .tk-quy, .tk-loi, .tk-vid, .tk-faq, .tk-usp, .tk-art-c { padding-block: 32px; }
  .tk-art { padding-bottom: 32px; }
}

/* ---- tien-ich.css ---- */
/* Nhóm tiện ích: Liên hệ, Câu hỏi thường gặp, chính sách, Đăng ký thành công, 404 (tiền tố .ti-).
   Số đo theo noithattugia.com: trang nội dung H1 22/33 (điện thoại 24/36), H2 24px, H3 18.67px, đoạn 16/24 căn đều (từ 768),
   cách đoạn 10px; trang liên hệ bản đồ cao 450px, tên công ty 30/39 in hoa, thẻ xám bo 8 padding 20; 404 số 80/104. */

/* ---------------------------------------------------------------- trang nội dung, chính sách */
.ti-doc .entry-title { margin-bottom: 10px; }
.ti-doc .entry { line-height: 24px; }
.ti-doc .entry > * + * { margin-top: 10px; }
/* đoạn và gạch đầu dòng căn đều hai bên như Tứ Gia từ 768 trở lên; điện thoại giữ căn trái vì dòng chỉ khoảng 45 chữ,
   các cụm không tách (đơn vị, số điện thoại, tên riêng) làm dòng căn đều giãn lỗ. p có lớp (nút giữa bài...) giữ căn riêng */
@media (min-width: 768px) {
  .ti-doc .entry p:not([class]), .ti-doc .entry > ul li, .ti-doc .entry > ol li { text-align: justify; }
}
.ti-doc .toc li { text-align: left; }
.ti-doc .entry h2 { margin-top: 24px; font-size: 24px; line-height: 31px; }
.ti-doc .entry h3 { margin-top: 20px; font-size: 18.67px; line-height: 24px; font-weight: 700; }
.ti-doc .entry h2 + h3 { margin-top: 14px; }
.ti-doc .entry ul, .ti-doc .entry ol { padding-left: 20px; }
.ti-doc .entry li + li { margin-top: 4px; }
.ti-doc .entry .tbl { margin-block: 14px; }
.ti-doc .entry td:nth-child(-n+2), .ti-doc .entry th:nth-child(-n+2) { width: 1%; white-space: nowrap; }
/* ô "chờ điền" xuống dòng được như chữ thường, tránh dòng căn đều bị giãn rộng khi cả ô nhảy xuống dòng dưới */
.ti-doc .entry .blank { display: inline; padding: 1px 4px; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
/* Hộp mục lục kiểu Easy TOC: chỉ rộng vừa chữ khi thu gọn, mở ra tối đa 600px */
.ti-doc .toc { width: fit-content; min-width: 176px; max-width: min(600px, 100%); margin: 14px 0 16px; border-radius: 4px;
  border-color: color-mix(in srgb, var(--muted) 70%, var(--bg)); box-shadow: 0 1px 1px rgba(0, 0, 0, .05); }
.ti-doc .toc-head { gap: 32px; padding: 6px 10px 6px 12px; min-height: 46px; font-size: 19.2px; font-weight: 500; }
.ti-doc .toc-list { font-size: 14px; font-weight: 500; line-height: 22px; }
/* mục lục mở: dòng cách 22px như Easy TOC, cấp 1 thẳng mép chữ "Mục lục" (cùng lề 12px), dòng xuống thụt theo chữ sau số */
.ti-doc .toc .toc-list { padding: 0 12px 10px !important; }
.ti-doc .toc .toc-list ol { margin-top: 0; padding-left: 22px !important; }
.ti-doc .toc .toc-list li { margin-top: 0; }
.ti-doc .toc-list a { display: flex; gap: 4px; padding-block: 0; }
.ti-doc .toc-list .toc-n { flex: none; }
.ti-doc .company { margin-top: 24px; }
.ti-doc .company li { text-wrap: pretty; }
@media (max-width: 767px) {
  .ti-doc .entry-title { font-size: 24px; line-height: 36px; }
  .ti-doc .entry h3 { font-size: 18px; line-height: 23.4px; }
  .ti-doc .company { padding: 16px; }
  /* điện thoại: mỗi dòng mục lục là vùng bấm 44px */
  .ti-doc .toc-list a { padding-block: 11px; }
}

/* ---------------------------------------------------------------- liên hệ: bản đồ rộng hết màn hình */
.ti-map { position: relative; height: 450px; overflow: hidden; background: var(--ph); }
.ti-map-img { position: absolute; inset: 0; display: block; }
.ti-map-img img { width: 100%; height: 100%; object-fit: cover; }
/* Ghim đỏ: đầu nhọn chạm đúng tâm ảnh (ảnh bản đồ lấy tâm tại toạ độ văn phòng/xưởng) */
.ti-pin { position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -36px 0 0 -15px; border-radius: 50% 50% 50% 0;
  background: var(--red); transform: rotate(-45deg); box-shadow: -2px 2px 5px rgba(0, 0, 0, .3); }
.ti-pin::after { content: ""; position: absolute; inset: 9px; border-radius: 50%; background: var(--bg); }
/* nhãn cạnh ghim: viên trắng có bóng như thẻ địa điểm của Google, che hẳn chữ có sẵn trong ảnh bản đồ bên dưới */
.ti-pin-t { position: absolute; left: calc(50% + 22px); top: calc(50% - 21px); transform: translateY(-50%); white-space: nowrap;
  padding: 3px 8px; border-radius: 4px; background: var(--bg); box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
  font-size: 14px; line-height: 20px; font-weight: 700; color: var(--red); }
.ti-osm { position: absolute; right: 0; bottom: 0; padding: 2px 8px; font-size: 11px; line-height: 16px; color: var(--muted-2); background: rgba(255, 255, 255, .8); }
.ti-place { position: absolute; left: 10px; top: 10px; z-index: 2; width: 356px; max-width: calc(100% - 20px); padding: 12px 14px 14px;
  background: var(--bg); border-radius: 4px; box-shadow: 0 1px 4px rgba(0, 0, 0, .3); }
.ti-place-t { font-size: 16px; line-height: 22px; font-weight: 500; color: var(--ink); }
.ti-place-a { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--muted-2); }
.ti-place-b { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ti-mbtn { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; white-space: nowrap; border-radius: 20px;
  background: var(--main); color: #fff; font-size: 14px; font-weight: 500; }
.ti-mbtn .ic { font-size: 16px; }
.ti-mbtn:hover { background: var(--main-2); }
.ti-mbtn-2 { background: var(--bg); color: var(--main-2); box-shadow: inset 0 0 0 1px var(--main); }
.ti-mbtn-2:hover { background: var(--cream); }

/* khối tên công ty căn giữa */
.ti-contact { padding-top: 40px; padding-bottom: 40px; }
.ti-co { margin: 20px 0 10px; text-align: center; font-size: 30px; line-height: 39px; font-weight: 700; color: var(--ink); text-transform: uppercase; }
.ti-co-d { max-width: 980px; margin-inline: auto; text-align: center; font-size: 16px; line-height: 24px; text-wrap: balance; }
.ti-co-b { margin-top: 14px; text-align: center; }

/* hai cột thẻ xám như Tứ Gia: trái Thông tin liên hệ, phải Giờ làm việc + thẻ xưởng gọn. Hai cột kéo bằng nhau (stretch)
   để không còn lỗ trắng bị đóng khung; từ 1023 trở xuống xếp một cột như col-md-6 của Tứ Gia */
.ti-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 24px; }
.ti-col { display: flex; flex-direction: column; gap: 24px; }
.ti-col > .ti-xcard { flex: 1; }
.ti-card { padding: 20px; border-radius: 8px; background: var(--bg-gray); overflow-wrap: anywhere; }
.ti-card-t { font-size: 24px; line-height: 36px; font-weight: 700; color: var(--ink); }
.ti-card li { margin-top: 10px; padding: 8px; border-radius: 8px; font-size: 16px; line-height: 24px; text-wrap: pretty; }
.ti-card li b, .ti-hours strong { font-weight: 700; color: var(--ink); }
/* một kiểu link cho cả thẻ: màu gỗ, đậm 500, gạch chân khi rê chuột */
.ti-card li a { color: var(--main-2); font-weight: 500; }
.ti-card li a:hover { text-decoration: underline; text-underline-offset: 3px; }
.ti-card a[href^="tel:"], .ti-doc a[href^="tel:"] { white-space: nowrap; }
.ti-lk { white-space: nowrap; }
/* nút chép số cao 30px nhưng margin âm giữ dòng Hotline cao 40px như các dòng khác; ::before nới vùng bấm */
.ti-copy { position: relative; display: inline-flex; align-items: center; min-height: 30px; margin: -3px 0 -3px 10px; padding: 0 12px; border-radius: 30px;
  background: var(--bg); color: var(--main-2); box-shadow: inset 0 0 0 1px var(--main); font-size: 14px; font-weight: 500; vertical-align: top; }
.ti-copy::before { content: ""; position: absolute; inset: -7px -4px; }
.ti-copy:hover { background: var(--cream); }
.ti-card .copy-ok { display: block; margin-top: 4px; font-size: 14px; line-height: 20px; color: var(--main-2); }
.ti-card .copy-ok:empty { display: none; }

/* thẻ xưởng gọn: bản đồ nhỏ + một câu, hai nút như thẻ địa điểm trên bản đồ lớn */
.ti-xrow { display: grid; grid-template-columns: 128px minmax(0, 1fr); gap: 16px; align-items: center; margin-top: 10px; }
.ti-xrow p { font-size: 16px; line-height: 24px; text-wrap: pretty; }
.ti-xmap { position: relative; display: block; aspect-ratio: 16 / 10; border-radius: 8px; overflow: hidden; background: var(--ph); }
.ti-xmap img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.ti-xmap:hover img { transform: scale(1.04); }
.ti-xmap .ti-pin { width: 22px; height: 22px; margin: -27px 0 0 -11px; }
.ti-xmap .ti-pin::after { inset: 6px; }
.ti-xmap .ti-osm { padding: 0 4px; font-size: 9px; line-height: 13px; }
.ti-xbtns { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
@media (max-width: 1023px) {
  .ti-cards { grid-template-columns: minmax(0, 1fr); }
  .ti-xrow { grid-template-columns: 200px minmax(0, 1fr); }
}

@media (max-width: 767px) {
  /* điện thoại: thẻ địa điểm xuống đáy bản đồ để không che ghim ở giữa */
  .ti-place { top: auto; bottom: 10px; right: 10px; width: auto; max-width: none; padding: 10px 12px 12px; }
  .ti-place-a { font-size: 13px; }
  .ti-place-b { flex-wrap: nowrap; }
  .ti-mbtn { min-height: 44px; padding: 0 12px; }
  .ti-mbtn:first-child { flex: 1; justify-content: center; }
  .ti-map .ti-osm { top: 0; bottom: auto; }
  .ti-contact { padding-top: 20px; }
  .ti-co { font-size: 26px; line-height: 36px; text-wrap: balance; }
  .ti-co-b .btn { padding: 0 20px; }
  .ti-card li { padding-inline: 0; }
  .ti-card-t { font-size: 22px; line-height: 33px; }
  /* link trong thẻ: đệm dọc 13px (chữ inline nên không đổi nhịp dòng) cho vùng bấm 44px */
  .ti-card li a { padding-block: 13px; }
  .ti-copy { min-height: 36px; margin-block: -6px; }
  .ti-copy::before { inset: -4px; }
  .ti-xrow { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .ti-xmap .ti-pin { width: 30px; height: 30px; margin: -36px 0 0 -15px; }
  .ti-xmap .ti-pin::after { inset: 9px; }
  .ti-xmap .ti-osm { padding: 2px 8px; font-size: 11px; line-height: 16px; }
  .ti-xbtns .ti-mbtn { flex: 1 1 auto; justify-content: center; }
}

/* ---------------------------------------------------------------- đăng ký thành công */
.ti-sent { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; width: fit-content; max-width: 100%; padding: 12px 16px 12px 12px;
  border-radius: 8px; background: var(--bg-gray); }
.ti-doc .entry .ti-sent { margin-block: 16px; }
.ti-sent-i { flex: none; width: 44px; height: 44px; border-radius: 50%; background: var(--grad); color: #fff; display: grid; place-items: center; font-size: 22px; }
.ti-doc .entry .ti-sent p { display: grid; text-align: left; font-size: 14px; line-height: 20px; color: var(--muted-2); }
.ti-sent b { font-size: 20px; line-height: 28px; font-weight: 700; color: var(--ink); white-space: nowrap; }
.ti-sent-x { min-height: 44px; padding: 0 16px; border-radius: 30px; box-shadow: inset 0 0 0 1px var(--main); color: var(--main-2); font-size: 14px; font-weight: 500; }
.ti-sent-x:hover { background: var(--cream); }
.ti-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 24px; }
@media (max-width: 767px) {
  .ti-acts .btn { flex: 1 1 100%; }
  .ti-acts .btn-i { padding-inline: 70px; }
}

/* ---------------------------------------------------------------- 404 */
.ti-404 { padding-block: 40px; text-align: center; }
.ti-404-box { max-width: 1000px; margin-inline: auto; }
.ti-404-art { position: relative; max-width: 970px; height: 400px; margin-inline: auto; overflow: hidden; }
/* ảnh hạ xuống để số 404 nằm trên mảng tường trống, khung tranh bắt đầu thấp hơn chân chữ; đáy ảnh trắng đặc từ 88%
   nên tiêu đề phụ (kéo lên 24px như .contant_box_404 của Tứ Gia) nằm trên nền trắng, không đè nét giường */
.ti-404-art img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 44%; }
.ti-404-art::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, var(--bg) 0, var(--bg) 14%, transparent 46%, transparent 60%, var(--bg) 88%, var(--bg) 100%),
              linear-gradient(90deg, var(--bg) 0, transparent 14%, transparent 86%, var(--bg) 100%); }
.ti-404-n { position: relative; z-index: 1; padding-top: 16px; font-size: 80px; line-height: 104px; font-weight: 700; color: var(--ink);
  text-shadow: 0 0 12px var(--bg), 0 0 24px var(--bg); }
.ti-404-c { position: relative; z-index: 1; margin-top: -24px; }
.ti-404-c h2 { font-size: 30px; line-height: 33px; font-weight: 500; color: var(--text); }
.ti-404-c > p { max-width: 560px; margin: 12px auto 0; font-size: 16px; line-height: 24px; text-wrap: balance; }
.ti-404-c > .ti-404-b { margin-top: 20px; }
.ti-search { position: relative; max-width: 480px; margin: 24px auto 0; }
.ti-search input { width: 100%; height: 52px; border: 1px solid var(--line); border-radius: 30px; background: var(--bg); padding: 0 66px 0 22px;
  color: var(--ink); font-size: 16px; }
.ti-search input::-webkit-search-cancel-button, .ti-search input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.ti-search input:focus { border-color: var(--main); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--main) 20%, transparent); }
.ti-search button { position: absolute; right: 4px; top: 4px; width: 58px; height: 44px; border-radius: 30px; background: var(--grad); color: #fff;
  display: grid; place-items: center; font-size: 20px; }
.ti-search .search-res { position: absolute; top: calc(100% + 6px); left: 0; right: 0; text-align: left; }
.ti-quick { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px; margin-top: 20px; }
.ti-quick span { width: 100%; font-size: 14px; color: var(--muted-2); }
.ti-quick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 18px; border: 1px dashed var(--main); border-radius: 30px;
  color: var(--ink); font-weight: 500; }
.ti-quick a:hover { background: var(--cream); color: var(--main-2); }
@media (max-width: 767px) {
  .ti-404 { padding-block: 20px 32px; }
  .ti-404-art { height: 330px; }
  .ti-404-art img { object-position: 42% 62%; }
  .ti-404-c h2 { font-size: 26px; line-height: 33px; }
  .ti-quick a { flex: 1 1 calc(50% - 5px); justify-content: center; padding: 0 10px; }
}