/* =========================================================
   G8 OFFICE - bố cục theo ẢNH PHƯƠNG ÁN (nạp sau style.css + hieuung.css)
   header / menu điện thoại, trang chủ, thẻ không gian, liên hệ người phụ trách, trang dự án, footer
   Không sửa style.css: mọi thay đổi giao diện mới nằm ở file này
   ========================================================= */
:root {
	--xanh-la: #16a34a;
	--cam: #f59e0b;
	--gia: #e0312b;
	--zalo: #0068ff;
	--wa: #25d366;
	--fb: #0084ff;
	--navy: #0b2a52;
	--nen-xanh: #eef6fd;
	--cao-nav: 58px;
}
[hidden] { display: none !important; }

/* =========================================================
   HEADER (máy tính: chữ thường, Ưu đãi, kính lúp, hotline, Nhận báo giá)
   ========================================================= */
.dau__logo { flex: 0 0 auto; }
.dau.is-cuon .dau__logo img { height: 45px; width: auto; max-width: none; }
.dau .dau__logo img { height: 65px; width: auto; max-width: none; }
.dau__trong { gap: 18px; }
.menu__ic, .menu__dt-chu, .menu__nn { display: none; }
.menu__muc > a { text-transform: none; font-size: 14px; font-weight: 500; letter-spacing: 0; padding: 10px 10px; gap: 3px; }
.dau__trong { gap: 14px; }
.menu__mui { opacity: .6; }
.menu__muc--lh > a .menu__mui, .menu__muc--lh > .menu__con { display: none; }
.menu__nhom { display: grid; gap: 2px; align-content: start; }
.menu__con a.menu__tp { font-weight: 700; color: var(--muc); font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; justify-content: space-between; }
.menu__tp em { font-style: normal; font-size: 11.5px; min-width: 22px; padding: 1px 7px; border-radius: 999px; background: var(--mau-nhat); color: var(--mau); text-align: center; letter-spacing: 0; }
.menu__con a.menu__da { font-size: 14px; padding: 7px 12px; }
.menu__da .ic { color: var(--mau); }
.menu__con a.is-dang { background: var(--mau-nhat); color: var(--mau); font-weight: 600; }
.menu__phu { color: var(--mo); font-size: .92em; }
.menu__het--phu { margin-top: 0 !important; border-top: 0 !important; justify-content: flex-start !important; font-weight: 500 !important; }
.menu__con button { display: flex; align-items: center; gap: 8px; padding: 9px 12px; border: 0; border-radius: 10px; background: none; color: var(--chu); font-size: 14.5px; text-align: left; }
.menu__con button:hover { background: var(--nen); color: var(--mau); }
/* menu Ưu đãi: thẻ nhỏ không gian đang giảm giá */
.menu__con--ud { min-width: 360px; right: 0; left: auto; }
.menu__con a.menu__ud { gap: 10px; }
.menu__ud img { width: 56px; height: 42px; border-radius: 8px; object-fit: cover; flex: 0 0 auto; }
.menu__ud span { flex: 1; display: grid; min-width: 0; }
.menu__ud b { color: var(--muc); font-size: 13.5px; font-weight: 600; }
.menu__ud small { color: var(--gia); font-weight: 700; font-size: 12.5px; }
.menu__ud s { color: var(--mo); font-weight: 400; margin-left: 4px; }
.menu__ud em { font-style: normal; font-size: 11.5px; font-weight: 700; color: #fff; background: var(--gia); border-radius: 6px; padding: 2px 6px; }
.dau__phai { gap: 12px; }
.dau__hotline { display: inline-flex; align-items: center; gap: 6px; color: var(--muc); font-size: 15px; white-space: nowrap; }
.dau__hotline .ic { color: var(--mau); }
.dau__hotline:hover { color: var(--mau); }
.dau__cta { flex: 0 0 auto; border-radius: 10px; }
/* tìm kiếm */
.dau-tim { position: relative; }
.dau-tim__nut { width: 40px; height: 40px; border-radius: 50%; border: 0; background: transparent; color: var(--muc); display: grid; place-items: center; transition: background .2s, color .2s; }
.dau-tim__nut:hover, .dau-tim.is-mo .dau-tim__nut { background: var(--mau-nhat); color: var(--mau); }
.dau-tim__hop { position: absolute; right: 0; top: calc(100% + 12px); width: 380px; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 14px; background: #fff; border: 1px solid var(--vien); border-radius: 14px; box-shadow: var(--bong); opacity: 0; visibility: hidden; transform: translateY(6px); transition: .2s; z-index: 5; }
.dau-tim.is-mo .dau-tim__hop { opacity: 1; visibility: visible; transform: none; }
.dau-tim__hop > .ic { color: var(--mo); }
.dau-tim__hop input { flex: 1; min-width: 0; border: 0; outline: none; min-height: 40px; font-size: 14.5px; background: transparent; }

.dau__phai > .doi-nn { display: none; }
.nn-chon { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: #eef3f8; border: 1px solid #d9e4ef; }
.nn-chon a { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px 3px 3px; border-radius: 999px; color: #5b6b7d; font-size: 13.5px; line-height: 1; white-space: nowrap; transition: background .2s, color .2s, box-shadow .2s; }
.nn-chon a b { font-weight: 800; letter-spacing: .03em; font-size: 12px; }
.nn-chon a:hover { color: var(--muc); }
.nn-chon a.is-dang { background: #fff; color: var(--muc); box-shadow: 0 2px 8px -2px rgba(6, 45, 82, .28); }
.nn-chon .co { flex: 0 0 22px; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; display: block; box-shadow: 0 0 0 1px rgba(6, 45, 82, .08); }
.nn-chon .co svg { width: 100%; height: 100%; display: block; }
@media (max-width: 1400px) and (min-width: 1201px) { .menu__muc > a { padding: 10px 8px; } .dau__phai { gap: 10px; } }
@media (max-width: 1290px) and (min-width: 961px) { .dau__hotline b { display: none; } .dau__hotline { width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: var(--mau-nhat); } }
@media (max-width: 1200px) and (min-width: 961px) { .menu__muc > a { font-size: 13px; padding: 10px 7px; } .dau__phai { gap: 8px; } }
@media (max-width: 1100px) and (min-width: 961px) { .nn-chon a b { display: none; } .nn-chon a { padding: 3px; } } /* chật: chỉ còn cờ */
@media (max-width: 1100px) and (min-width: 961px) {
	.dau__hotline b { display: none; }
	.dau__hotline { width: 40px; height: 40px; justify-content: center; border-radius: 50%; background: var(--mau-nhat); }
	.menu__muc > a { font-size: 12.5px; padding: 10px 6px; gap: 2px; }
	.dau__trong { gap: 12px; }
	.dau__phai { gap: 6px; }
	.dau__cta { padding: 0 14px; }
}
@media (max-width: 1010px) and (min-width: 961px) { .menu__muc > a { font-size: 12px; padding: 10px 5px; } .dau__trong { gap: 8px; } .dau__cta { padding: 0 12px; font-size: 13px; } }
@media (min-width: 961px) and (max-width: 1024px) {
	.dau__burger, .menu-nen, .menu__dau, .menu__chan { display: none !important; }
	.menu { position: static; width: auto; z-index: auto; background: transparent; flex-direction: row; align-items: center; transform: none; transition: none; overflow: visible; padding: 0; box-shadow: none !important; }
	.menu__ds { flex-direction: row; margin: 0 auto; padding: 0; gap: 0; }
	.menu__muc > a { border-radius: 999px; justify-content: flex-start; }
	.menu__con { position: absolute; top: calc(100% + 10px); left: 0; min-width: 240px; padding: 10px; background: #fff; border: 1px solid var(--vien); border-radius: 18px; box-shadow: var(--bong); opacity: 0; visibility: hidden; transform: translateY(6px); display: grid; grid-template-columns: none; }
	.menu__con--rong { min-width: 520px; grid-template-columns: 1fr 1fr; column-gap: 12px; padding: 16px; }
	.menu__con--ud { left: auto; right: 0; }
	.co-con:hover > .menu__con, .co-con:focus-within > .menu__con { opacity: 1; visibility: visible; transform: none; }
	.co-con:hover > a .menu__mui { transform: rotate(180deg); }
	.menu__het { border-top: 1px solid var(--vien); margin-top: 6px; }
	.menu__muc--lh > .menu__con { display: none; }
}
@media (max-width: 960px) {
	.menu { padding-bottom: 0; }
	.menu__dau img { height: 45px; }
	.menu__pc, .menu__pc-chu { display: none !important; }
	.menu__dt-chu { display: inline; }
	.menu__muc--lh > a .menu__mui { display: block; }
	.menu__dau { padding: 10px 16px; }
	.menu__ds { padding: 4px 14px 0; gap: 0; }
	.menu__muc { padding: 4px 0; }
	.menu__muc:not(:last-child) { border-bottom: 1px solid #edf1f6; }
	.menu__muc > a { gap: 14px; justify-content: flex-start; padding: 11px 10px; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: .01em; color: var(--muc); border-radius: 10px; }
	.menu__muc > a > span { flex: 1; }
	.menu__ic { display: block; width: 22px; height: 22px; color: var(--mau); }
	.menu__mui { opacity: 1; color: var(--muc); width: 18px; height: 18px; }
	.co-con.is-mo > a .ic, .co-con:hover > a .ic { transform: none; } /* style.css xoay cả biểu tượng đầu dòng khi mở nhóm */
	.menu__muc > a:hover:not(.is-dang) { background: none; color: var(--muc); } /* chạm trên điện thoại không để lại nền xanh */
	.menu__muc > a.is-dang, .co-con.is-mo > a.is-dang { background: var(--mau-nhat); color: var(--mau); }
	/* menu con đóng sẵn, chạm nhóm cha mới xổ xuống (main.js đo chiều cao để trượt mượt);
	   nhóm đang mở = 1 khối nền nhạt, các mục con nằm trong khung trắng bên trong */
	.menu__muc { transition: background-color .25s, margin .25s, padding .25s; }
	.co-con.is-mo { margin: 6px 0; padding: 0 0 8px; background: #f4f7fb; border-radius: 14px; border-bottom-color: transparent !important; }
	.co-con > a .menu__mui { transition: transform .25s, color .25s; }
	.co-con.is-mo > a .menu__mui { transform: rotate(180deg); color: var(--mau); }
	.menu__ds .menu__con, .menu__ds .menu__con--rong { position: relative; top: auto; left: auto; right: auto; display: block; height: 0; overflow: hidden; visibility: hidden; opacity: 1; transform: none; margin: 0 8px; padding: 0 14px; min-width: 0; border-radius: 12px; background: #fff; box-shadow: 0 1px 3px rgba(15, 23, 42, .06); transition: height .3s ease, visibility 0s linear .3s; }
	.menu__ds .co-con.is-mo > .menu__con { height: auto; visibility: visible; transition: height .3s ease, visibility 0s; }
	.menu__con::before { display: none; }
	.menu__con a, .menu__con a.menu__tp, .menu__con button { position: relative; display: block; width: 100%; padding: 12px 24px 12px 0; border-radius: 0; border-top: 1px solid #edf1f6; background: none; line-height: 20px; font-size: 14.5px; font-weight: 500; letter-spacing: 0; text-transform: none; color: #334155; text-align: left; justify-content: flex-start; }
	.menu__con > a:first-child, .menu__con > button:first-child, .menu__con > .menu__nhom:first-child > a:first-child { border-top: 0; }
	.menu__con a::after, .menu__con button::after { content: ""; position: absolute; right: 0; top: 50%; margin-top: -7px; width: 14px; height: 14px; background: #a3b1c2; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center / contain no-repeat; }
	.menu__con a:hover, .menu__con button:hover, .menu__con a.is-dang { background: none; color: var(--mau); }
	.menu__con a.is-dang { font-weight: 700; }
	.menu__con a:hover::after, .menu__con button:hover::after, .menu__con a.is-dang::after { background: var(--mau); }
	.menu__con a .ic { display: none; }
	.menu__con a.menu__tp em, .menu__con a.menu__da { display: none; }
	.menu__phu { display: block; margin-top: 1px; color: #8a97a8; font-size: 12.5px; font-weight: 400; line-height: 18px; }
	.menu__nhom { display: block; }
	.menu__ds .menu__con .menu__het { color: #334155 !important; font-weight: 500 !important; justify-content: flex-start !important; margin: 0 !important; border-top: 1px solid #edf1f6 !important; border-radius: 0 !important; }
	.menu__ds .menu__con .menu__het:hover { color: var(--mau) !important; }
	.menu__het .ic { display: none; }
	.menu__chan { position: static; margin-top: 10px; padding: 0 20px calc(22px + env(safe-area-inset-bottom)); background: #fff; border-top: 0; gap: 12px; }
	.menu__chan .nut { min-height: 52px; font-size: 16px; justify-content: center; gap: 10px; }
	.menu__hotline { color: var(--muc); font-weight: 600; font-size: 16px; }
	.menu__hotline .ic { color: var(--mau); }
	.menu__hotline b { color: var(--mau); font-weight: 800; }
	.menu__nn { display: none !important; }
	/* header điện thoại như ảnh: logo + nút menu */
	.dau__phai > .doi-nn, .dau__hotline, .dau-tim, .dau__cta { display: none; }
}

/* =========================================================
   TRANG CHỦ
   ========================================================= */
.tc-dau { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.tc-tde { font-size: clamp(20px, 2vw, 24px); color: var(--muc); margin: 0; letter-spacing: -.01em; }
.tc-tde--nho { font-size: 17px; margin-bottom: 12px; }
.tc-gp, .tc-vs, .tc-kg, .tc-dd, .tc-ph, .tc-qt, .tc-dg, .tc-faq, .tc-tv-phan { padding: 30px 0; }
.tc-gp { padding-top: 40px; }

/* ---------- hero ---------- */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; background: var(--toi); }
.hero__nen { position: absolute; inset: 0; z-index: -1; }
.hero__nen::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(4, 22, 42, .82) 0%, rgba(4, 22, 42, .5) 45%, rgba(4, 22, 42, .05) 100%), linear-gradient(0deg, rgba(4, 22, 42, .35), transparent 40%); }
.hero__trong { position: relative; display: grid; grid-template-columns: minmax(0, 1fr); padding: 48px 20px 28px; min-height: 470px; align-content: end; gap: 24px; }
.hero__chu { max-width: none; }
.hero__chu .banner__tung { max-width: 620px; }
.hero__nhan { display: inline-block; padding: 5px 14px; border-radius: 8px; background: rgba(255, 255, 255, .14); border: 1px solid rgba(255, 255, 255, .3); font-size: 13px; font-weight: 700; letter-spacing: .1em; margin-bottom: 14px; }
.hero__tde { color: #fff; font-size: clamp(30px, 3.6vw, 44px); line-height: 1.15; letter-spacing: -.02em; margin: 0 0 12px; }
.hero__mota { color: #e3eef8; font-size: 16px; max-width: 520px; margin: 0 0 20px; }
.hero__loi { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 26px; }
.hero__loi li { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600; }
.hero__loi .ic { width: 32px; height: 32px; padding: 7px; border-radius: 50%; border: 1.5px solid rgba(255, 255, 255, .8); color: #fff; }
.hero__dk { display: none; }
.tim4 { color: var(--chu); }
.tim4__tab { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; }
.tim4__tab::-webkit-scrollbar { display: none; }
.tim4__tab button { flex: 0 0 auto; min-width: 150px; justify-content: center; display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border: 0; border-radius: 12px 12px 0 0; background: rgba(255, 255, 255, .78); color: var(--muc); font-weight: 600; font-size: 14px; transition: background .2s, color .2s; }
.tim4__tab button .ic { display: none; }
.tim4__tab button:hover { background: rgba(255, 255, 255, .92); }
.tim4__tab button.is-dang { background: #fff; color: var(--mau); }
.tim4__bang { display: none; grid-template-columns: repeat(3, minmax(0, 1fr)) 200px; gap: 10px; padding: 14px; background: #fff; border-radius: 0 14px 14px 14px; box-shadow: 0 24px 60px -24px rgba(0, 0, 0, .5); }
.tim4__bang.is-dang { display: grid; }
.tim4__o { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 6px 12px; border: 1px solid var(--vien); border-radius: 10px; background: #fff; cursor: pointer; transition: border-color .2s; }
.tim4__o:focus-within { border-color: var(--mau); }
.tim4__o > .ic { color: var(--mau); }
.tim4__o > span { flex: 1; min-width: 0; display: grid; }
.tim4__o small { font-size: 12px; font-weight: 500; color: var(--mo); }
.tim4__o select, .tim4__o input { width: 100%; border: 0; background-color: transparent; padding: 0; min-height: 24px; outline: none; font-weight: 600; color: var(--muc); font-size: 14px; }
.tim4__o select { padding-right: 24px !important; background-position: right 0 center; }
.tim4__o b { color: var(--muc); font-size: 14px; line-height: 24px; }
.tim4__o--chu { cursor: default; }
.tim4__bang .nut { min-height: 52px; border-radius: 10px; padding: 0 22px; }
.tim4__bang--ao { grid-template-columns: 1fr auto auto; align-items: center; }
.tim4__bang--ao p { display: flex; gap: 14px; align-items: center; margin: 0; font-size: 14.5px; color: var(--mo); }
.tim4__bang--ao p > .ic { width: 46px; height: 46px; padding: 11px; border-radius: 14px; background: var(--mau-nhat); color: var(--mau); }
.tim4__bang--ao b { display: block; color: var(--muc); font-size: 16px; }
.tc-tat { display: none; }

/* ---------- dải trượt ---------- */
.truot--4 { grid-auto-columns: calc((100% - 50px) / 4); gap: 16px; }
.truot > * { min-width: 0; }
/* dải trượt chỉ cuộn ngang: chặn cuộn dọc (lăn chuột ở dải trượt là cuộn trang), chừa 8px trên để thẻ nhấc lên khi rê chuột không bị cắt */
.truot { overflow-y: hidden; padding-top: 8px; margin-top: -8px; overscroll-behavior-x: contain; }
.truot-khung { position: relative; }
.truot-khung__nut { position: absolute; top: 34%; z-index: 4; width: 38px; height: 38px; border-radius: 50%; border: 1px solid var(--vien); background: #fff; color: var(--muc); display: grid; place-items: center; box-shadow: var(--bong-nho); transition: background .2s, color .2s; }
.truot-khung__nut:hover { background: var(--mau); color: #fff; border-color: var(--mau); }
.truot-khung__nut--lui { left: -19px; }
.truot-khung__nut--toi { right: -19px; }

/* ---------- 2. giải pháp ---------- */
.the-gp { display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; background: #fff; border: 1px solid var(--vien); box-shadow: 0 4px 14px -10px rgba(6, 45, 82, .25); transition: transform .25s, box-shadow .25s; }
.the-gp:hover { transform: translateY(-4px); box-shadow: var(--bong); }
.the-gp__anh { display: block; aspect-ratio: 16 / 10; overflow: hidden; }
.the-gp__anh img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.the-gp:hover .the-gp__anh img { transform: scale(1.05); }
.the-gp__than { display: flex; flex-direction: column; flex: 1; gap: 10px; padding: 14px; }
.the-gp__dau { display: flex; gap: 10px; align-items: flex-start; }
.the-gp__ic { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--mau-nhat); color: var(--mau); }
.the-gp__ic .ic { width: 19px; height: 19px; }
.the-gp h3 { font-size: 14.5px; margin: 0; line-height: 1.3; }
.the-gp h3 a { color: var(--muc); }
.the-gp h3 small { display: block; color: var(--mo); font-size: 12px; font-weight: 500; margin-top: 1px; }
.the-gp__y { list-style: none; margin: 0; padding: 0; display: grid; gap: 3px; font-size: 13px; color: var(--chu); }
.the-gp__y li { position: relative; padding-left: 13px; }
.the-gp__y li::before { content: ""; position: absolute; left: 0; top: .6em; width: 5px; height: 5px; border-radius: 50%; background: var(--mau); }
.the-gp__y li:nth-child(3) { color: var(--mau); font-weight: 700; }
.the-gp .nut { margin-top: auto; border-radius: 8px; min-height: 38px; }

/* ---------- 3. vì sao chọn G8: 1 dải, 5 mục + ảnh có chữ ---------- */
.tc-vs__khung { display: grid; grid-template-columns: minmax(0, 1fr) 380px; border-radius: 18px; overflow: hidden; background: linear-gradient(100deg, #f3f9fe 0%, #e8f3fc 100%); border: 1px solid var(--vien); }
.tc-vs__chu { padding: 26px 28px; }
.tc-vs__ds { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; text-align: center; }
.tc-vs__ds li { display: grid; justify-items: center; gap: 3px; }
.tc-vs__ic { width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--mau); border: 1.5px solid #bfe0f6; margin-bottom: 6px; }
.tc-vs__ic .ic { width: 24px; height: 24px; }
.tc-vs__ds b { color: var(--muc); font-size: 13.5px; line-height: 1.3; }
.tc-vs__ds small { color: var(--mo); font-size: 12.5px; line-height: 1.4; }
.tc-vs__anh { position: relative; margin: 0; min-height: 200px; }
.tc-vs__anh img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tc-vs__anh figcaption { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); max-width: 210px; padding: 14px 16px; border-radius: 12px; background: rgba(255, 255, 255, .95); color: var(--muc); font-size: 13.5px; font-weight: 600; line-height: 1.5; box-shadow: var(--bong-nho); }

/* ---------- 4. không gian đang cho thuê (thẻ trang chủ) ---------- */
.the-kg--tc { border-radius: 12px; }
.the-kg--tc .the-kg__anh { aspect-ratio: 16 / 11; }
.the-kg--tc .nhan, .the-kg--da .nhan { top: 10px; left: 10px; border-radius: 6px; font-size: 11.5px; padding: 4px 9px; }
.the-kg--tc .the-kg__than { padding: 12px 14px 14px; }
.the-kg--tc h3 { font-size: 15px; margin: 0 0 2px; }
.the-kg__dc, .the-kg__tt { margin: 0; color: var(--mo); font-size: 12.5px; line-height: 1.5; }
.the-kg--tc .the-kg__gia { border-top: 0; padding-top: 8px; margin-top: auto; }
.the-kg__gia b { color: var(--gia); font-size: 16px; }
.the-kg__gia b.is-lh { color: var(--mau); }
.the-kg__gia small { color: var(--gia); font-weight: 600; font-size: 12.5px; }
.the-kg__nut { margin-top: 12px; border-radius: 8px; min-height: 36px; }
.nhan--trong { background: var(--xanh-la); color: #fff; }
.nhan--sap { background: var(--cam); color: #fff; }
.nhan--do { background: var(--gia); }

/* ---------- 5. hệ thống địa điểm + bản đồ ---------- */
.tc-dd__luoi { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: 24px; align-items: start; }
.tc-dd__ds { grid-auto-columns: calc((100% - 42px) / 4); gap: 14px; }
.the-toa { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--vien); color: var(--chu); transition: box-shadow .2s, transform .2s, border-color .2s; }
.the-toa:hover, .the-toa.is-chon { border-color: var(--mau); box-shadow: var(--bong-nho); transform: translateY(-2px); color: var(--chu); }
.the-toa__anh { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; }
.the-toa__anh img { width: 100%; height: 100%; object-fit: cover; }
.the-toa__anh .nhan { top: 8px; left: 8px; font-size: 10.5px; padding: 3px 8px; border-radius: 6px; }
.the-toa__than { display: grid; gap: 2px; padding: 10px 12px 12px; }
.the-toa__than b { color: var(--muc); font-size: 14px; line-height: 1.3; }
.the-toa__than small { color: var(--mo); font-size: 12px; }
.the-toa__dv { display: grid; gap: 1px; margin-top: 4px; }
.the-toa__dv i { position: relative; font-style: normal; font-size: 12px; padding-left: 11px; color: var(--chu); }
.the-toa__dv i::before { content: ""; position: absolute; left: 0; top: .6em; width: 4px; height: 4px; border-radius: 50%; background: var(--mau); }
.tc-dd__bd .tc-tde { margin-bottom: 25px; }
.tc-dd__bd-khung { position: relative; }
.tc-dd__bd .bando { height: 307px; min-height: 0; border-radius: 14px; border: 1px solid var(--vien); }
.tc-dd__nut { position: absolute; right: 12px; bottom: 12px; z-index: 5; border-radius: 8px; }

/* ---------- 6. phòng họp & sự kiện: 2 khung nền sáng, ảnh phải ---------- */
.tc-ph__luoi { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.tc-ph__o { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); border-radius: 16px; overflow: hidden; background: linear-gradient(100deg, #f3f9fe, #e6f2fc); border: 1px solid var(--vien); }
.tc-ph__o > img { width: 100%; height: 100%; object-fit: cover; min-height: 210px; }
.tc-ph__chu { padding: 22px 22px; display: flex; flex-direction: column; gap: 4px; }
.tc-ph__chu h2 { font-size: 19px; margin: 0; color: var(--mau-dam); }
.tc-ph__chu p { color: var(--mo); font-size: 13.5px; margin: 0 0 12px; }
.tc-ph__y { list-style: none; margin: 0 0 16px; padding: 0; display: flex; gap: 12px; }
.tc-ph__y li { display: flex; align-items: center; gap: 6px; font-size: 11.5px; white-space: nowrap; line-height: 1.35; color: var(--chu); }
.tc-ph__y .ic { flex: 0 0 auto; width: 30px; height: 30px; padding: 6px; border-radius: 8px; background: #fff; color: var(--mau); border: 1px solid #cfe5f6; }
.tc-ph__chu .nut { margin-top: auto; align-self: flex-start; border-radius: 8px; }

/* ---------- 7. quy trình 3 bước: 1 dải trắng, mũi tên giữa các bước ---------- */
.tc-qt .tc-tde { text-align: center; margin-bottom: 18px; }
.tc-qt__ds { list-style: none; margin: 0; padding: 18px 24px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; border-radius: 16px; background: #fff; border: 1px solid var(--vien); box-shadow: 0 6px 20px -16px rgba(6, 45, 82, .4); }
.tc-qt__ds li { position: relative; display: flex; gap: 14px; align-items: center; }
.tc-qt__ds li:not(:last-child)::after { content: ""; position: absolute; right: -26px; top: 50%; width: 10px; height: 10px; border-top: 2px solid #9cc9ea; border-right: 2px solid #9cc9ea; transform: translateY(-50%) rotate(45deg); }
.tc-qt__ds span { flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center; background: var(--mau); color: #fff; font-size: 20px; font-weight: 800; box-shadow: 0 0 0 5px var(--mau-nhat); }
.tc-qt__ds div { display: grid; gap: 1px; }
.tc-qt__ds b { color: var(--muc); font-size: 15px; }
.tc-qt__ds small { color: var(--mo); font-size: 13px; line-height: 1.45; }

/* ---------- 8. đánh giá: hộp Google + 3 thẻ ---------- */
.tc-dg .tc-tde { margin-bottom: 18px; }
.tc-dg__luoi { display: grid; grid-template-columns: 210px minmax(0, 1fr); gap: 16px; align-items: stretch; }
.tc-dg__ds { grid-auto-columns: calc((100% - 32px) / 3); gap: 16px; }
.the-gg { display: flex; align-items: center; gap: 12px; padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--vien); color: var(--mo); transition: box-shadow .2s; }
a.the-gg[href]:hover { box-shadow: var(--bong-nho); color: var(--mo); }
.the-gg__g { flex: 0 0 auto; width: 40px; height: 40px; }
.the-gg__chu { display: grid; gap: 2px; justify-items: start; }
.the-gg__ten { color: var(--muc); font-weight: 600; font-size: 14px; }
.the-gg__diem { font-size: 28px; line-height: 1.05; color: var(--muc); font-weight: 800; }
.the-gg__diem small { font-size: 14px; color: var(--mo); font-weight: 600; }
.the-gg__sao { position: relative; display: inline-flex; gap: 1px; color: #fbbc05; }
.the-gg__sao .ic { width: 16px; height: 16px; fill: currentColor; stroke: none; }
.the-gg__sao::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--sao, 100%); right: 0; background: rgba(255, 255, 255, .72); }
.the-gg__chu > small { font-size: 12px; }
.the-dg2 { margin: 0; display: flex; gap: 12px; align-items: flex-start; padding: 16px; border-radius: 14px; background: #fff; border: 1px solid var(--vien); min-height: 100%; }
.the-dg2__av { flex: 0 0 auto; width: 48px; height: 48px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--chuyen); color: #fff; font-weight: 700; font-size: 15px; }
.the-dg2__av img { width: 100%; height: 100%; object-fit: cover; }
.the-dg2__chu { display: grid; gap: 8px; min-width: 0; }
.the-dg2 blockquote { margin: 0; color: var(--chu); font-size: 13.5px; line-height: 1.55; }
.the-dg2 figcaption b { display: block; color: var(--muc); font-size: 13.5px; }
.the-dg2 figcaption small { color: var(--mo); font-size: 12px; }

/* ---------- 9. FAQ 2 cột ---------- */
.tc-faq .tc-tde { margin-bottom: 16px; }
.faq--2 { grid-template-columns: 1fr 1fr; align-items: start; margin-bottom: 0; }
.faq--gon { gap: 8px; margin-bottom: 0; }
.faq--gon .faq__muc { border-radius: 10px; }
.faq--gon .faq__muc summary { padding: 12px 16px; font-size: 14px; font-weight: 500; }
.faq--gon .faq__muc .noi-dung { padding: 0 16px 14px; font-size: 14px; }
.faq--gon .faq__muc summary .ic { color: var(--mo); }
.faq--gon .faq__muc[open] summary .ic { transform: rotate(180deg); }

/* ---------- 10. tư vấn nhanh ---------- */
.tc-tv { display: grid; grid-template-columns: 170px minmax(0, 1fr) minmax(0, 1.7fr); gap: 22px; align-items: center; padding: 14px 20px 14px 14px; border-radius: 16px; background: linear-gradient(90deg, var(--nen-xanh), #fff); border: 1px solid var(--vien); box-shadow: var(--bong-nho); }
.tc-tv__anh { width: 170px; height: 100px; object-fit: cover; border-radius: 12px; }
.tc-tv__chu h2 { font-size: 18px; margin: 0 0 4px; color: var(--muc); }
.tc-tv__chu p { margin: 0; color: var(--mo); font-size: 13.5px; }
.tc-tv__form { display: grid; grid-template-columns: 1fr 1fr 1fr auto; gap: 8px; }
.tc-tv__form input, .tc-tv__form select { width: 100%; min-height: 46px; padding: 0 14px; border-radius: 8px !important; }
.tc-tv__form .nut { border-radius: 8px; min-height: 46px; }

/* =========================================================
   THẺ KHÔNG GIAN - kiểu trang dự án (nhãn phải, 24 m² | 6 chỗ | Tầng 5, 2 nút viền)
   ========================================================= */
.the-kg__so li { white-space: nowrap; } /* "40 m²", "14 chỗ", "Tầng 7" không bị tách 2 dòng (thẻ chỉ còn tối đa 3 mục) */
.the-kg--da { border-radius: 12px; }
.the-kg--da .nhan { left: auto; right: 10px; }
.the-kg--da .the-kg__anh { aspect-ratio: 16 / 10; }
.the-kg--da .the-kg__than { padding: 12px 14px 14px; }
.the-kg--da h3 { font-size: 15px; }
.the-kg--da .the-kg__dd { font-size: 12.5px; margin-bottom: 8px; }
.the-kg--da .the-kg__so { gap: 0; font-size: 12.5px; margin-bottom: 4px; flex-wrap: wrap; }
.the-kg--da .the-kg__so li + li { border-left: 1px solid var(--vien); margin-left: 10px; padding-left: 10px; }
.the-kg--da .the-kg__gia { border-top: 0; padding-top: 6px; }
.the-kg--da .the-kg__gia b.is-lh { color: var(--xanh-la); } /* như ảnh: Liên hệ báo giá màu xanh lá */
.the-kg__hai { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.the-kg__hai .nut { padding: 0 10px; border-radius: 8px; min-height: 36px; }

/* =========================================================
   LIÊN HỆ NGƯỜI PHỤ TRÁCH (Gọi / Zalo / WhatsApp / Messenger - thay email)
   ========================================================= */
.lh-pt { display: grid; gap: 10px; }
.lh-pt__nguoi { display: grid; justify-items: center; text-align: center; gap: 10px; }
.lh-pt__anh { width: 88px; height: 88px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--chuyen); color: #fff; font-size: 28px; font-weight: 800; letter-spacing: .02em; box-shadow: 0 0 0 4px #fff, 0 0 0 6px var(--mau-nhat); flex: 0 0 auto; }
.lh-pt__anh img { width: 100%; height: 100%; object-fit: cover; }
.lh-pt__ten { display: grid; gap: 1px; }
.lh-pt__ten b { color: var(--muc); font-size: 16px; }
.lh-pt__ten small { color: var(--mo); font-size: 13px; }
.lh-pt__ten em { font-style: normal; color: var(--mo); font-size: 13px; }
.lh-pt__goi { border-radius: 8px; }
.lh-pt__goi b { font-weight: 700; }
.lh-pt__kenh { display: grid; gap: 8px; }
.lh-pt__k { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 14px; border-radius: 8px; border: 1.5px solid #bcd9f2; background: #fff; color: var(--mau); font-weight: 600; font-size: 14.5px; transition: background .2s, color .2s, border-color .2s; }
.lh-pt__k .ic { width: 20px; height: 20px; }
.lh-pt__k--zalo:hover { background: var(--zalo); border-color: var(--zalo); color: #fff; }
.lh-pt__k--wa { border-color: rgba(37, 211, 102, .55); color: #128c4a; }
.lh-pt__k--wa:hover { background: var(--wa); border-color: var(--wa); color: #fff; }
.lh-pt__k--fb:hover { background: var(--fb); border-color: var(--fb); color: #fff; }
.lh-pt__gio { display: flex; gap: 10px; align-items: flex-start; padding: 6px 4px; font-size: 13px; }
.lh-pt__gio > .ic { color: var(--mau); width: 26px; height: 26px; margin-top: 2px; }
.lh-pt__gio > span { display: grid; }
.lh-pt__gio b { color: var(--muc); font-size: 13.5px; }
.lh-pt__gio small { color: var(--mo); font-size: 12.5px; }
/* bản gọn: hộp danh bạ + trang không gian */
.lh-pt--gon { padding: 14px; border-radius: 16px; border: 1px solid var(--vien); background: #fff; gap: 10px; }
.lh-pt--gon .lh-pt__nguoi { grid-template-columns: auto 1fr; justify-items: start; text-align: left; gap: 12px; align-items: center; }
.lh-pt--gon .lh-pt__anh { width: 56px; height: 56px; font-size: 19px; box-shadow: none; }
.lh-pt--gon .lh-pt__ten b { font-size: 15px; }
.lh-pt--gon .lh-pt__ten em { color: var(--mau); font-weight: 600; }
.lh-pt--gon .lh-pt__goi { min-height: 44px; font-size: 14px; }
.lh-pt--gon .lh-pt__kenh { grid-template-columns: repeat(auto-fit, minmax(0, 1fr)); gap: 6px; }
.lh-pt--gon .lh-pt__k { min-height: 40px; padding: 0 6px; font-size: 12.5px; gap: 4px; white-space: nowrap; }
.lh-pt--gon .lh-pt__k .ic { width: 16px; height: 16px; }
/* hộp "Đặt lịch tham quan" = danh bạ */
.hop__khung--lh { max-width: 760px; }
.lh-chon { display: flex; align-items: center; gap: 10px; padding: 0 14px; margin-bottom: 14px; border: 1.5px solid var(--vien); border-radius: var(--bo-nho); background: var(--kem); }
.lh-chon:focus-within { border-color: var(--mau); }
.lh-chon > .ic { color: var(--mau); }
.lh-chon select { flex: 1; min-height: 48px; border: 0; background-color: transparent; outline: none; font-weight: 600; color: var(--muc); }
.lh-ds { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.hop__khung--lh.is-mot { max-width: 520px; }
.hop__khung--lh.is-mot .lh-ds { grid-template-columns: 1fr; }

/* =========================================================
   TRANG DỰ ÁN (diadiem_chitiet) - như ảnh 1
   ========================================================= */
.da-dau { padding: 18px 0 30px; }
.da-dau .duong-dan { margin-bottom: 10px; font-size: 13px; }
.da-dau__hang { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; }
.da-tde { font-size: clamp(24px, 2.8vw, 32px); letter-spacing: -.02em; margin: 0 0 6px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; color: var(--muc); }
.da-nhan { font-style: normal; font-size: 13px; font-weight: 600; letter-spacing: 0; padding: 4px 12px; border-radius: 6px; background: var(--mau); color: #fff; }
.da-nhan--vang { background: var(--cam); }
.da-dc { display: flex; gap: 6px; align-items: center; margin: 0; color: var(--chu); font-size: 14.5px; }
.da-dc .ic { color: var(--mau); }
.da-tac { display: flex; gap: 8px; }
.da-tac__nut { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--vien); background: #fff; font-size: 13px; font-weight: 600; color: var(--muc); transition: border-color .2s, color .2s; }
.da-tac__nut:hover { border-color: var(--mau); color: var(--mau); }
.da-tac__nut--ic { width: 34px; padding: 0; justify-content: center; }
.da-tac__nut.is-luu { border-color: var(--mau); color: var(--mau); background: var(--mau-nhat); }
.da-tac__nut.is-luu .ic { fill: currentColor; }
.da-luoi { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 20px; align-items: start; }
.da-chinh { min-width: 0; display: grid; gap: 12px; }
.da-phu { position: sticky; top: calc(64px + 16px); }
/* cột ngắn hơn bám theo khi cuộn (cột ảnh trái / thẻ liên hệ phải; Tiện ích, Chi phí... cạnh Bảng giá)
   - hieuung.js gắn .hu-cha (overflow: hidden) cho khối có nền hiệu ứng -> sticky không chạy; overflow: clip vẫn cắt nền mà sticky chạy được */
.da-dau.hu-cha, .da-muc.hu-cha { overflow: clip; }
.da-chinh { position: sticky; top: calc(64px + 16px); }
/* bộ ảnh 1 lớn + 4 nhỏ */
.da-anh { position: relative; display: grid; gap: 8px; grid-template-columns: 2fr 1fr 1fr; grid-template-rows: 170px 170px; }
.da-anh__o { position: relative; padding: 0; border: 0; border-radius: 12px; overflow: hidden; background: var(--nen); cursor: zoom-in; }
.da-anh__o img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s; }
.da-anh__o:hover img { transform: scale(1.04); }
.da-anh__o:first-child { grid-row: span 2; }
.da-anh__nhan { position: absolute; left: 8px; bottom: 8px; padding: 3px 9px; border-radius: 6px; background: rgba(4, 22, 42, .62); color: #fff; font-size: 12px; font-weight: 600; }
.da-anh__them { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 2px; background: rgba(15, 23, 35, .7); color: #fff; font-size: 13px; }
.da-anh__them b { font-size: 26px; line-height: 1.1; }
.da-anh__them--dt { display: none; }
@media (max-width: 760px) { .da-anh__them--dt { display: grid; font-size: 11px; } .da-anh__them--dt b { font-size: 20px; } }
.da-anh__video { position: absolute; left: 12px; bottom: 12px; z-index: 2; display: inline-flex; align-items: center; gap: 8px; min-height: 38px; padding: 0 16px 0 6px; border-radius: 999px; border: 0; background: rgba(4, 22, 42, .72); color: #fff; font-weight: 600; font-size: 13.5px; transition: background .2s; }
.da-anh__video .ic { width: 26px; height: 26px; padding: 6px; border-radius: 50%; background: #fff; color: var(--muc); fill: currentColor; }
.da-anh__video:hover { background: var(--mau); }
.da-anh--1 { grid-template-columns: 1fr; grid-template-rows: 348px; }
.da-anh--2 { grid-template-columns: 2fr 1fr; }
.da-anh--2 .da-anh__o:nth-child(2) { grid-row: span 2; }
.da-anh--3 { grid-template-columns: 2fr 1fr; }
.da-anh--4 .da-anh__o:nth-child(4) { grid-column: span 2; }
/* thông tin nhanh 5 ô */
.da-nhanh { list-style: none; margin: 0; padding: 10px 12px; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; border-radius: 12px; background: #fff; border: 1px solid var(--vien); }
.da-nhanh li { display: flex; gap: 8px; align-items: center; min-width: 0; }
.da-nhanh li + li { border-left: 1px solid var(--vien); padding-left: 8px; }
.da-nhanh .ic { flex: 0 0 auto; width: 30px; height: 30px; padding: 5px; color: var(--mau); }
.da-nhanh span { display: grid; min-width: 0; }
.da-nhanh small { color: var(--mau-dam); font-size: 11.5px; line-height: 1.3; font-weight: 600; }
.da-nhanh b { color: var(--mo); font-size: 12px; line-height: 1.35; font-weight: 500; }
/* thẻ liên hệ bên phải */
.da-lh { padding: 18px; border-radius: 14px; background: #fff; border: 1px solid var(--vien); box-shadow: var(--bong-nho); display: grid; gap: 10px; }
.da-lh__tde { font-size: 16px; margin: 0; color: var(--muc); }
.da-lh .nut--vien { border-radius: 8px; border-color: #bcd9f2; min-height: 42px; }
.da-lh--kg { margin-bottom: 16px; box-shadow: none; }
/* thanh mục: chỉ điện thoại (như ảnh) */
.da-nav { display: none; }
.da-muc { scroll-margin-top: 80px; }
#matBang, #thongSo { scroll-margin-top: 80px; }
.da-h2 { font-size: clamp(19px, 1.9vw, 22px); margin: 0 0 12px; color: var(--muc); }
.da-h3 { font-size: 16px; margin: 0 0 12px; color: var(--muc); }
.da-dau-muc { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; flex-wrap: wrap; margin: 26px 0 0; }
.da-o .da-dau-muc { margin: 0 0 2px; flex-wrap: nowrap; }
.da-o .da-dau-muc .lien-ket { font-size: 12.5px; white-space: nowrap; }
.phan--gon.da-muc { padding: 22px 0; }
/* tổng quan: đoạn văn + 5 điểm nổi bật */
.da-tq { display: grid; gap: 16px; }
.da-tq__chu p { margin: 0; font-size: 14.5px; max-width: 900px; }
.da-tq__nb { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.da-tq__nb li { display: flex; gap: 10px; align-items: center; min-width: 0; }
.da-tq__nb .ic { flex: 0 0 auto; width: 34px; height: 34px; padding: 6px; color: var(--mau); }
.da-tq__nb span { display: grid; min-width: 0; }
.da-tq__nb b { color: var(--mau-dam); font-size: 13px; line-height: 1.3; }
.da-tq__nb small { color: var(--mo); font-size: 12px; line-height: 1.35; }
/* các không gian tại dự án */
.da-loai { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 16px; margin-top: 12px; }
.the-loai { display: flex; flex-direction: column; border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid var(--vien); transition: transform .25s, box-shadow .25s; }
.the-loai:hover { transform: translateY(-3px); box-shadow: var(--bong-nho); }
.the-loai > img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.the-loai__than { display: flex; flex-direction: column; flex: 1; gap: 4px; padding: 10px 12px 12px; }
.the-loai h3 { font-size: 14px; margin: 0; color: var(--muc); }
.the-loai p { margin: 0; font-size: 12px; color: var(--mo); line-height: 1.45; }
.the-loai__gia { color: var(--gia); font-size: 13px; margin-top: auto; padding-top: 4px; }
.the-loai__gia.is-lh { color: var(--mau); }
.the-loai .nut { margin-top: 6px; border-radius: 8px; min-height: 36px; }
/* danh sách văn phòng: tab chia đều + lọc */
.da-ds__tab { display: grid; grid-auto-flow: column; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.da-ds__tab::-webkit-scrollbar { display: none; }
.da-ds__tab button { padding: 10px 12px; border-radius: 8px; border: 0; background: #e9eef4; font-weight: 600; font-size: 13.5px; color: var(--chu); white-space: nowrap; transition: .2s; }
.da-ds__tab button:hover { color: var(--mau); }
.da-ds__tab button.is-dang { background: var(--mau); color: #fff; }
.da-ds__loc { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)) 180px; gap: 10px; align-items: end; margin-bottom: 16px; }
.da-ds__loc .o { gap: 4px; }
.da-ds__loc .o > span { font-size: 12.5px; font-weight: 600; color: var(--muc); }
.da-ds__loc select { width: 100%; min-height: 40px; padding: 0 12px; border-radius: 8px !important; }
.da-ds__loc .nut { min-height: 40px; border-radius: 8px; }
.da-ds__luoi { gap: 16px; }
.da-ds__trong { margin: 0; }
/* bảng giá | tiện ích | chi phí ngoài */
.da-ba { display: grid; grid-template-columns: minmax(0, 1.9fr) minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: start; }
.da-ba > .da-o, .da-hai > .da-o { position: sticky; top: calc(64px + 16px); } /* ô ít nội dung bám theo ô dài cùng hàng khi cuộn */
.da-ba--vt { grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.65fr) minmax(0, .8fr); }
.da-ba--dg { grid-template-columns: minmax(0, 2.1fr) minmax(0, 1.15fr) minmax(0, .8fr); }
.da-o { min-width: 0; padding: 16px 18px; border-radius: 14px; background: #fff; border: 1px solid var(--vien); }
.da-bang__cuon { overflow-x: auto; }
.da-bang { width: 100%; border-collapse: collapse; font-size: 13px; }
.da-bang th { text-align: left; font-size: 12.5px; font-weight: 700; color: var(--muc); background: var(--nen); padding: 9px 10px; white-space: nowrap; }
.da-bang td { padding: 9px 10px; border-bottom: 1px solid var(--vien); vertical-align: top; }
.da-bang tr:last-child td { border-bottom: 0; }
.da-bang td:first-child { color: var(--muc); }
.da-bang td b { color: var(--mau); font-weight: 600; }
.da-bang td b.is-lh { color: var(--gia); }
.da-bang__ghi { color: var(--mo); font-size: 12px; }
.da-ghi { margin: 10px 0 0; color: var(--mo); font-size: 12px; font-style: italic; }
.da-ti { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.da-ti li { display: flex; gap: 10px; align-items: center; font-size: 13.5px; }
.da-ti .ic { flex: 0 0 auto; width: 22px; height: 22px; color: var(--mau); }
.da-ti--ngoai .ic { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--gia); color: #fff; stroke-width: 2.6; }
/* mặt bằng | hình ảnh */
.da-hai { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.da-hai--1 { grid-template-columns: 1fr; }
.da-tab { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin-bottom: 12px; }
.da-tab::-webkit-scrollbar { display: none; }
.da-tab button { flex: 0 0 auto; padding: 5px 14px; border-radius: 6px; border: 1px solid var(--vien); background: #fff; font-size: 13px; font-weight: 500; color: var(--chu); transition: .2s; }
.da-tab button:hover { border-color: var(--mau); color: var(--mau); }
.da-tab button.is-dang { background: var(--mau); border-color: var(--mau); color: #fff; }
.da-mb__khung { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 14px; align-items: center; }
.da-mb { display: none; }
.da-mb.is-dang { display: block; }
.da-mb__anh { display: block; width: 100%; padding: 6px; border: 1px solid var(--vien); border-radius: 10px; background: #fff; cursor: zoom-in; }
.da-mb__anh img { width: 100%; max-height: 260px; object-fit: contain; }
.da-mb__chu { display: grid; gap: 10px; font-size: 13px; color: var(--chu); }
.da-mb__chu span { display: inline-flex; align-items: center; gap: 8px; }
.da-mb__chu i { width: 16px; height: 16px; border-radius: 3px; }
.da-mb__chu .is-trong { background: #bbf7d0; border: 1px solid var(--xanh-la); }
.da-mb__chu .is-sap { background: #fde68a; border: 1px solid var(--cam); }
.da-mb__chu .is-thue { background: #e5e7eb; border: 1px solid #9ca3af; }
.da-mb__chu .nut { margin-top: 10px; border-radius: 8px; min-height: 36px; padding: 0 10px; font-size: 11px; white-space: normal; }
.da-tv { display: grid; grid-template-columns: 1fr 1fr 1.5fr; grid-auto-rows: 104px; gap: 8px; }
.da-tv__o { padding: 0; border: 0; border-radius: 10px; overflow: hidden; background: var(--nen); cursor: zoom-in; }
.da-tv__o img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s; }
.da-tv__o:hover img { transform: scale(1.06); }
.da-tv:not(.is-loc) .da-tv__o:nth-child(5) { grid-column: 3; grid-row: 1 / span 2; }
.da-tv:not(.is-loc) [data-them] { display: none; }
.da-tv.is-loc { grid-template-columns: repeat(3, 1fr); }
.da-tv__het { display: flex; margin: 12px 0 0 auto; border-radius: 8px; }
/* thông số | vị trí | dự án khác */
.da-ts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 8px; }
.da-ts li { display: flex; gap: 5px; align-items: flex-start; min-width: 0; }
.da-ts .ic { flex: 0 0 auto; width: 20px; height: 20px; padding: 1px; color: var(--mau); }
.da-ts span { display: grid; min-width: 0; }
.da-ts small { color: var(--muc); font-size: 11.5px; line-height: 1.35; font-weight: 600; }
.da-ts b { color: var(--mo); font-size: 11.5px; line-height: 1.35; font-weight: 500; }
.da-vt { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 14px; }
.da-vt__bd { position: relative; border-radius: 10px; overflow: hidden; min-height: 200px; background: var(--nen); }
.da-vt__bd iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
.da-vt__nut { position: absolute; left: 8px; right: 8px; bottom: 8px; display: flex; gap: 6px; }
.da-vt__nut .nut { flex: 1 1 auto; min-width: 0; min-height: 32px; padding: 0 8px; border-radius: 8px; font-size: 12px; overflow: hidden; text-overflow: ellipsis; }
.da-vt__nut .nut--chinh { flex-grow: 1.6; }
.da-vt__nut .nut--vien { background: #fff; }
.da-kn__tde { display: block; color: var(--mau); font-size: 14px; margin-bottom: 8px; }
.da-kn { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; align-content: start; }
.da-kn li { display: flex; gap: 10px; align-items: center; }
.da-kn .ic { flex: 0 0 auto; width: 26px; height: 26px; padding: 4px; color: var(--mau); }
.da-kn span { display: grid; }
.da-kn b { color: var(--muc); font-size: 13.5px; }
.da-kn small { color: var(--mo); font-size: 12px; }
.da-khac { display: grid; gap: 10px; }
.da-khac__the { display: flex; gap: 12px; align-items: center; padding: 6px; border-radius: 10px; border: 1px solid var(--vien); color: var(--chu); transition: border-color .2s, box-shadow .2s; }
.da-khac__the:hover { border-color: var(--mau); box-shadow: var(--bong-nho); color: var(--chu); }
.da-khac__the img { flex: 0 0 auto; width: 76px; height: 58px; border-radius: 8px; object-fit: cover; }
.da-khac__the span { flex: 1; display: grid; min-width: 0; }
.da-khac__the b { color: var(--muc); font-size: 13.5px; }
.da-khac__the small { color: var(--mo); font-size: 12px; }
/* đánh giá | FAQ | tài liệu */
.da-dg { display: grid; grid-template-columns: 140px minmax(0, 1fr) minmax(0, 1fr); gap: 10px; align-items: stretch; }
.da-dg .the-gg { flex-direction: row; align-items: center; padding: 12px 10px; gap: 8px; } /* như ảnh: chữ G bên trái, điểm + sao + số lượt bên phải */
.da-dg .the-gg__g { width: 30px; height: 30px; }
.da-dg .the-gg__diem { font-size: 24px; }
.da-dg .the-gg__chu > small { font-size: 11px; line-height: 1.35; }
.da-dg .the-gg__ten { display: none; }
.da-dg .the-dg2 { padding: 12px 10px; flex-direction: row; gap: 8px; } /* như ảnh: ảnh đại diện trái, lời nhận xét phải */
.da-dg .the-dg2__av { width: 36px; height: 36px; font-size: 12px; }
.da-dg .the-dg2 blockquote { font-size: 12.5px; }
.da-tl { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 10px 12px; padding: 12px; border-radius: 12px; border: 1px solid var(--vien); color: var(--chu); }
a.da-tl:hover { border-color: var(--mau); color: var(--chu); }
.da-tl > span:nth-child(2) { display: grid; }
.da-tl b { color: var(--muc); font-size: 13.5px; }
.da-tl small { color: var(--mo); font-size: 12px; }
.da-tl .nut { grid-column: 2; justify-self: start; border-radius: 8px; min-height: 34px; }
.da-tl__ic { width: 42px; height: 50px; border-radius: 6px; display: grid; place-items: center; background: #fdecec; color: #dc2626; font-weight: 800; font-size: 12px; }
.da-tl--chua .da-tl__ic { background: var(--mau-nhat); color: var(--mau); }
/* phần bổ sung trang dự án: ảnh lớn điện thoại, xem thêm giới thiệu, điều kiện thuê, khối chưa có dữ liệu, người tư vấn ở Vị trí */
.chi-dt, .da-anh-dt { display: none; }
.da-tq__them { margin-top: 6px; }
.da-tq__them summary { display: inline-flex; align-items: center; gap: 4px; cursor: pointer; color: var(--mau); font-weight: 600; font-size: 13.5px; list-style: none; }
.da-tq__them summary::-webkit-details-marker { display: none; }
.da-tq__them[open] summary .ic { transform: rotate(180deg); }
.da-tq__them .noi-dung { margin-top: 10px; font-size: 14.5px; max-width: 900px; }
.da-h4 { font-size: 14px; color: var(--muc); margin: 14px 0 8px; }
.da-dk__tde { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--vien); }
.da-dk { margin: 0; display: grid; gap: 6px; }
.da-dk div { display: grid; gap: 1px; padding: 7px 10px; border-radius: 8px; background: var(--nen); }
.da-dk dt { color: var(--mo); font-size: 12px; }
.da-dk dd { margin: 0; color: var(--muc); font-size: 13px; font-weight: 600; }
.da-chua { display: grid; justify-items: start; gap: 6px; padding: 14px; border-radius: 10px; border: 1.5px dashed var(--vien); color: var(--mo); font-size: 13.5px; }
.da-chua > .ic { color: var(--mau); width: 24px; height: 24px; }
.da-chua p { margin: 0; }
.da-chua .lien-ket { border: 0; background: none; padding: 0; }
.da-vt__lh { grid-column: 1 / -1; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 10px; background: var(--nen-xanh); }
.da-vt__hen { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; border: 1px solid #bcd9f2; background: #fff; color: var(--mau); font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.da-vt__hen:hover { border-color: var(--mau); }
.da-vt__av { flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: var(--chuyen); color: #fff; font-size: 12px; font-weight: 700; }
.da-vt__av img { width: 100%; height: 100%; object-fit: cover; }
.da-vt__lh > span:nth-child(2) { flex: 1; display: grid; min-width: 0; }
.da-vt__lh small { color: var(--mo); font-size: 11.5px; }
.da-vt__lh b { color: var(--muc); font-size: 13px; }
.da-vt__goi { display: inline-flex; align-items: center; gap: 4px; padding: 6px 10px; border-radius: 8px; background: var(--xanh-la); color: #fff; font-size: 12.5px; font-weight: 700; white-space: nowrap; }
.da-vt__goi:hover { color: #fff; filter: brightness(1.08); }
.da-ds__them { display: flex; margin: 18px auto 0; border-radius: 8px; }
.da-khac__het { margin-top: 12px; }
.da-tl__ds { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.da-tl__ds .lien-ket { border: 0; background: none; padding: 0; }
.da-tl .nut { grid-column: 2; justify-self: start; }

/* hộp video */
.xem-video { position: relative; width: min(960px, 100%); aspect-ratio: 16 / 9; }
.xem-video iframe { width: 100%; height: 100%; border: 0; border-radius: 16px; background: #000; }
.xem-video .hop__dong { top: -54px; right: 0; background: rgba(255, 255, 255, .15); color: #fff; }
/* phòng họp / sảnh sự kiện: sảnh không có ô loại phòng */
.ph-loc--2 { grid-template-columns: 1fr 1.3fr; }

/* =========================================================
   Ô NHẬP & Ô CHỌN (mọi form): khoảng đệm + ô chọn giao diện riêng (bocuc.js)
   :where() giữ độ ưu tiên thấp -> các khung riêng (.tc-tv__form, .o-so...) vẫn tự chỉnh được
   ========================================================= */
.o-an { display: none !important; } /* ô bẫy bot (g8_bay): ẩn hẳn để trình duyệt / trình quản lý mật khẩu không tự điền vào */
.o :where(input:not([type=checkbox], [type=radio], [type=hidden], [type=file]), select) { min-height: 46px; padding: 0 14px; color: var(--muc); }
.o :where(textarea) { padding: 10px 14px; line-height: 1.5; }
/* select gốc (điện thoại): style.css đặt "background: #fff" làm mất mũi tên -> vẽ lại */
.o select:not(.chon__goc) { background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2366788c' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right 12px center / 18px; }
.o :where(input, textarea)::placeholder { color: #94a3b8; }
.o :where(input[type=date])::-webkit-calendar-picker-indicator { opacity: .55; cursor: pointer; }
.chon { position: relative; display: block; width: 100%; min-width: 0; }
select.chon__goc { position: absolute !important; left: 0; bottom: 0; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; border: 0 !important; opacity: 0; pointer-events: none; }
.chon__nut { display: flex; align-items: center; gap: 8px; width: 100%; min-height: 46px; margin: 0; padding: 0 12px 0 14px; border: 1.5px solid var(--vien); border-radius: var(--bo-nho); background: #fff; color: var(--muc); font: inherit; font-size: 15px; line-height: 1.3; text-align: left; cursor: pointer; transition: border-color .2s, box-shadow .2s, background .2s; }
.chon__nut:hover { border-color: #b7cde2; }
.chon__nut:focus-visible, .chon.is-mo .chon__nut { border-color: var(--mau); box-shadow: 0 0 0 4px var(--mau-nhat); outline: none; }
.chon__nut:disabled { opacity: .55; cursor: not-allowed; }
.chon__chu { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.chon__mui { flex: 0 0 18px; width: 18px; height: 18px; fill: none; stroke: var(--mo); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .2s, stroke .2s; }
.chon.is-mo .chon__mui { transform: rotate(180deg); stroke: var(--mau); }
.o.is-loi .chon__nut { border-color: var(--do); }
/* danh sách xổ xuống (gắn vào body, vị trí cố định theo nút) */
.chon__ds { position: fixed; z-index: 300; max-width: min(420px, calc(100vw - 16px)); overflow-y: auto; overscroll-behavior: contain; padding: 6px; background: #fff; border: 1px solid var(--vien); border-radius: 14px; box-shadow: 0 22px 44px -16px rgba(6, 45, 82, .32), 0 2px 8px rgba(6, 45, 82, .06); font-family: var(--font); animation: chon-xuong .14s ease-out; scrollbar-width: thin; scrollbar-color: #cbd8e4 transparent; }
.chon__ds.is-tren { animation-name: chon-len; }
@keyframes chon-xuong { from { opacity: 0; transform: translateY(-6px); } }
@keyframes chon-len { from { opacity: 0; transform: translateY(6px); } }
.chon__nhom { padding: 9px 10px 4px; font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--mo); }
.chon__nhom:not(:first-child) { margin-top: 4px; border-top: 1px solid var(--vien); padding-top: 10px; }
.chon__muc { display: flex; align-items: center; gap: 10px; padding: 9px 10px 9px 12px; border-radius: 9px; font-size: 14.5px; line-height: 1.35; color: var(--muc); cursor: pointer; white-space: nowrap; }
.chon__muc--nhom { padding-left: 18px; }
.chon__muc.is-dang { background: var(--nen); }
.chon__muc.is-chon { background: var(--mau-nhat); color: var(--mau); font-weight: 600; }
.chon__muc.is-tat { opacity: .45; cursor: not-allowed; }
.chon__tick { flex: 0 0 16px; width: 16px; height: 16px; margin-left: auto; fill: none; stroke: var(--mau); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; opacity: 0; }
.chon__muc.is-chon .chon__tick { opacity: 1; }
/* ô chọn nằm trong khung có viền sẵn: bỏ viền nút */
.tim4__o .chon__nut, .lh-chon .chon__nut { min-height: 24px; padding: 0; border: 0; background: transparent; box-shadow: none !important; font-weight: 600; font-size: 14px; }
.lh-chon .chon { flex: 1; }
.lh-chon .chon__nut { min-height: 48px; font-size: 15px; }
.tim4__o .chon__mui, .lh-chon .chon__mui { stroke: var(--muc); }
/* ô sắp xếp danh sách không gian (dạng viên thuốc) */
.bo-loc > .chon { width: auto; }
.bo-loc .chon__nut { min-height: 44px; padding: 0 12px 0 16px; border-radius: 999px; font-weight: 600; font-size: 14.5px; }
.da-ds__loc .chon__nut { min-height: 40px; border-radius: 8px; font-size: 14px; }
.tc-tv__form .chon__nut { min-height: 46px; border-radius: 8px; font-size: 14px; }
.tc-tv__form .chon__nut.is-trong .chon__chu, .td-tim .chon__nut.is-trong .chon__chu { color: #94a3b8; } /* "Nhu cầu của bạn", "Bộ phận"... là chữ gợi ý như placeholder của ô nhập bên cạnh */

/* thanh liên hệ cố định (chỉ điện thoại) */
.thanh-lh { display: none; }

/* =========================================================
   FOOTER (như ảnh: nền xanh đậm, thương hiệu + 5 cột)
   ========================================================= */
.chan--g8 { padding: 40px 0 0; background: var(--navy); color: #b9cde4; font-size: 13.5px; }
.chan--g8::before, .chan--g8::after { display: none; }
.chan--g8 .chan__luoi { display: grid; grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); gap: 15px; }
.chan__logo-g8 { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.chan__logo-g8 img { height: 46px; width: auto; }
.chan__logo-g8 b { color: #fff; font-size: 22px; font-weight: 800; letter-spacing: .02em; }
.chan--g8 .chan__tt { display: block; max-width: 260px; }
.chan--g8 .chan__tt p { margin: 0; color: #b9cde4; font-size: 13.5px; line-height: 1.6; }
.chan--g8 h3 { font-size: 14px; letter-spacing: 0; text-transform: none; color: #fff; margin: 0 0 12px; display: block; }
.chan--g8 h3::before { display: none; }
.chan--g8 .chan__cot > a { display: block; padding: 3px 0; color: #b9cde4; font-size: 13px; }
.chan--g8 .chan__cot > a:hover { color: #fff; transform: none; }
.chan--g8 .chan__lh { display: flex !important; align-items: center; gap: 8px; color: #fff !important; font-weight: 600; }
.chan--g8 .chan__lh .ic { width: 16px; height: 16px; padding: 0; background: none; color: #fff; }
.chan--g8 .chan__mxh { display: flex; gap: 8px; margin-top: 12px; }
.chan--g8 .chan__mxh a { width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center; background: rgba(255, 255, 255, .1); border: 0; color: #fff; }
.chan--g8 .chan__mxh a:hover { background: var(--sang); }
.chan--g8 .chan__mxh .ic { width: 17px; height: 17px; }
.chan--g8 .chan__cuoi { margin-top: 32px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, .1); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: #8fa9c6; }
.chan--g8 .chan__cuoi a { color: #8fa9c6; }
.chan__nn { display: inline-flex; align-items: center; gap: 4px; }
.chan__nn a { padding: 3px 9px; border-radius: 999px; border: 1px solid rgba(255, 255, 255, .15); }
.chan--g8 .chan__nn a.is-dang { background: rgba(255, 255, 255, .12); color: #fff; }

/* =========================================================
   VỀ G8 › LÀM VIỆC CÙNG CHÚNG TÔI: lời mời bên trái + khung kính "Vị trí đang tuyển" bên phải (ảnh nền lộ ra phía sau)
   ========================================================= */
.gt-tuyen > .hu-nen { max-width: none; } /* style.css giới hạn mọi div con 560px làm lớp nền trang trí bị cắt nửa */
.gt-tuyen--ds { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 440px); gap: 48px; align-items: center; background: linear-gradient(90deg, rgba(6, 45, 82, .96) 0%, rgba(6, 45, 82, .82) 50%, rgba(6, 45, 82, .45) 100%), var(--anh, none) center / cover, var(--mau); }
.gt-tuyen > .gt-tuyen__chu { position: relative; max-width: 560px; }
.gt-tuyen > .gt-tuyen__ds { position: relative; max-width: none; padding: 20px; border-radius: 22px; background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); box-shadow: 0 20px 40px -18px rgba(2, 16, 32, .6); }
.gt-tuyen__dau { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; font-size: 16px; color: #fff; }
.gt-tuyen__dau .ic { width: 20px; height: 20px; color: var(--vang); }
.gt-tuyen__dau b { flex: 1; font-weight: 700; }
.gt-tuyen__dau span { min-width: 28px; padding: 2px 9px; border-radius: 999px; background: var(--vang); color: #04213b; font-size: 13px; font-weight: 800; text-align: center; }
.gt-tuyen__vt { display: flex; align-items: center; gap: 12px; padding: 14px 14px 14px 16px; border-radius: 14px; background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .06); color: #fff; transition: background-color .2s, border-color .2s, transform .2s; }
.gt-tuyen__vt + .gt-tuyen__vt { margin-top: 8px; }
.gt-tuyen__vt:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .2); color: #fff; transform: translateX(3px); }
.gt-tuyen__vt-chu { flex: 1; min-width: 0; }
.gt-tuyen__vt b { display: block; font-size: 15.5px; line-height: 1.35; font-weight: 700; }
.gt-tuyen__vt small { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 6px; font-size: 13px; color: #bcd6ec; }
.gt-tuyen__vt small span { display: inline-flex; align-items: center; gap: 5px; }
.gt-tuyen__vt small .ic { width: 14px; height: 14px; color: var(--vang); }
.gt-tuyen__mui { flex: none; width: 18px; height: 18px; color: #cfe6f7; }
.gt-tuyen__het { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--vang); }
.gt-tuyen__het:hover { color: #fff; }
.gt-tuyen__het .ic { width: 16px; height: 16px; }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1180px) {
	.truot--4 { grid-auto-columns: calc((100% - 48px) / 4); }
	.tc-dd__ds { grid-auto-columns: calc((100% - 28px) / 3); }
	.tc-vs__khung { grid-template-columns: 1fr; }
	.tc-vs__anh { min-height: 220px; }
	.tc-ph__luoi { grid-template-columns: 1fr; }
	.tc-tv { grid-template-columns: 1fr 1.6fr; }
	.tc-tv__anh { display: none; }
	.da-ba, .da-ba--vt, .da-ba--dg { grid-template-columns: 1fr 1fr; }
	.da-ba > .da-o:first-child { grid-column: 1 / -1; }
	.da-nhanh { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.da-nhanh li + li { border-left: 0; padding-left: 0; }
	.da-tq__nb { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.chan--g8 .chan__luoi { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 960px) {
	.hero__trong { min-height: 0; padding-top: 48px; }
	.tim4__bang, .tim4__bang--ao { grid-template-columns: 1fr 1fr; }
	.tim4__bang .nut { grid-column: 1 / -1; }
	.tim4__bang--ao p { grid-column: 1 / -1; }
	.truot--4 { grid-auto-columns: calc((100% - 32px) / 3); }
	.tc-dd__luoi { grid-template-columns: 1fr; }
	.tc-dg__luoi { grid-template-columns: 1fr; }
	.tc-dg__ds { grid-auto-columns: calc((100% - 16px) / 2); }
	.faq--2 { grid-template-columns: 1fr; }
	.truot-khung__nut { display: none; }
	.da-luoi { grid-template-columns: 1fr; }
	.da-phu, .da-chinh, .da-ba > .da-o, .da-hai > .da-o { position: static; } /* xếp 1 cột thì không bám theo */
	.da-hai { grid-template-columns: 1fr; }
	.gt-tuyen--ds { grid-template-columns: 1fr; gap: 28px; background: linear-gradient(180deg, rgba(6, 45, 82, .95) 0%, rgba(6, 45, 82, .8) 60%, rgba(6, 45, 82, .6) 100%), var(--anh, none) center / cover, var(--mau); }
	.gt-tuyen > .gt-tuyen__ds { padding: 14px; border-radius: 18px; }
	.lh-ds { grid-template-columns: 1fr; }
	.hop__khung--lh { max-width: 520px; }
	.da-ds__loc { grid-template-columns: 1fr 1fr; }
	.da-ds__loc .nut { grid-column: 1 / -1; }
	/* thanh mục dự án (như ảnh điện thoại): 5 mục, biểu tượng trên chữ */
	.da-nav { display: block; position: sticky; top: 64px; z-index: 40; background: #fff; border-top: 1px solid var(--vien); border-bottom: 1px solid var(--vien); }
	.da-nav__ds { display: grid; grid-template-columns: repeat(5, 1fr); padding: 0; }
	.da-nav a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-height: var(--cao-nav); color: var(--mo); font-weight: 600; font-size: 11.5px; border-bottom: 2px solid transparent; }
	.da-nav a .ic { width: 20px; height: 20px; }
	.da-nav a.is-dang { color: var(--mau); border-color: var(--mau); }
	.da-muc, #matBang, #thongSo { scroll-margin-top: calc(64px + var(--cao-nav) + 10px); }

	/* thanh Gọi / Zalo / Báo giá ở đáy (như ảnh), ẩn nút liên hệ nổi */
	.thanh-lh { position: fixed; left: 0; right: 0; bottom: 0; z-index: 55; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 0; padding: 0 0 env(safe-area-inset-bottom); background: #fff; box-shadow: 0 -10px 30px -18px rgba(6, 45, 82, .4); }
	.thanh-lh__nut { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; border: 0; color: #fff; font-weight: 700; font-size: 13px; }
	.thanh-lh__nut:hover { color: #fff; }
	.thanh-lh__nut .ic { width: 22px; height: 22px; }
	.thanh-lh__nut--ngang { flex-direction: row; gap: 8px; font-size: 15px; }
	.thanh-lh__nut--goi { background: var(--xanh-la); }
	.thanh-lh__nut--zalo { background: var(--zalo); }
	.thanh-lh__nut--bg { background: var(--mau); }
	body:has(.thanh-lh) .lienhe-nhanh { display: none; }
	body:has(.thanh-lh) .chan { padding-bottom: 56px; }
	body:has(.thanh-lh) .thanh-dat { display: none; }
}
@media (max-width: 760px) {
	.tc-gp, .tc-vs, .tc-kg, .tc-dd, .tc-ph, .tc-qt, .tc-dg, .tc-faq, .tc-tv-phan { padding: 22px 0; }
	/* trang chủ điện thoại như ảnh: tiêu đề + ô tìm 3 ô + 4 lối tắt */
	.hero__trong { padding: 36px 16px 0; gap: 18px; }
	.hero__tde { font-size: 28px; }
	.hero__mota { font-size: 14.5px; margin-bottom: 0; }
	.hero__loi, .tim4__tab { display: none; }
	.tim4__bang, .tim4__bang--ao { grid-template-columns: 1fr; padding: 14px; border-radius: 14px; }
	.tim4 { margin: 0 -4px; }
	.tc-tat { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin: 0 -16px; padding: 14px 12px 16px; background: #fff; }
	.tc-tat a, .tc-tat button { display: grid; justify-items: center; gap: 6px; padding: 4px; border: 0; background: none; color: var(--muc); font-size: 12px; font-weight: 600; text-align: center; }
	.tc-tat .ic { width: 44px; height: 44px; padding: 11px; border-radius: 12px; background: var(--mau-nhat); color: var(--mau); }
	.truot--4 { grid-auto-columns: 70%; gap: 12px; }
	.tc-dd__ds { grid-auto-columns: 62%; }
	.tc-dg__ds { grid-auto-columns: 86%; }
	.tc-vs__chu { padding: 20px 16px; }
	.tc-vs__ds { grid-template-columns: repeat(3, 1fr); gap: 16px 8px; }
	.tc-ph__o { grid-template-columns: 1fr; }
	.tc-ph__o > img { height: auto; min-height: 0; aspect-ratio: 16 / 8; order: -1; } /* height:auto: Safari iPhone lấy height 100% theo cả thẻ -> ảnh phủ kín, đè lên chữ */
	.tc-qt__ds { grid-template-columns: 1fr; gap: 22px; padding: 16px; }
	.tc-qt__ds li:not(:last-child)::after { right: auto; left: 18px; top: auto; bottom: -17px; transform: rotate(135deg); }
	.tc-tv { grid-template-columns: 1fr; padding: 18px; }
	.tc-tv__form { grid-template-columns: 1fr; }

	/* trang dự án điện thoại như ảnh: ảnh lớn trên cùng -> tên -> 3 ảnh nhỏ -> thanh mục -> thông tin nhanh + người tư vấn */
	.chi-pc { display: none !important; }
	.chi-dt { display: block; }
	.da-dau .duong-dan { display: none; }
	.da-anh-dt { display: block; position: relative; margin: 0 -16px 14px; }
	.da-anh-dt .da-anh__o { display: block; width: 100%; aspect-ratio: 16 / 10; border-radius: 0; }
	.da-anh, .da-anh--2, .da-anh--3, .da-anh--4, .da-anh--5 { grid-template-columns: repeat(3, 1fr); grid-template-rows: 84px; }
	.da-anh > .da-anh__o:first-child, .da-anh > .da-anh__video, .da-anh__them--pc { display: none; }
	.da-dt-dau { display: grid; gap: 14px; padding-top: 16px; }
	.da-dk { grid-template-columns: 1fr; }
	.da-dau { padding: 0 0 14px; }
	.da-dau__hang { align-items: flex-start; }
	.da-anh { gap: 6px; }
	.da-anh .da-anh__o { grid-row: auto !important; grid-column: auto !important; border-radius: 10px; }
	.da-anh__o:nth-child(n+5) { display: none; }
	.da-anh__nhan { display: none; }
	.da-anh--1 { display: none; }
	.da-anh-dt .da-anh__video { top: auto; bottom: 12px; left: 12px; }
	.da-nhanh { grid-template-columns: 1fr 1fr; }
	.da-tq__nb { grid-template-columns: 1fr 1fr; }
	.da-loai { grid-template-columns: 1fr 1fr; gap: 10px; }
	.da-ds__tab { grid-auto-columns: max-content; }
	.da-ds__loc { grid-template-columns: 1fr 1fr; }
	.da-ba, .da-ba--vt, .da-ba--dg { grid-template-columns: 1fr; }
	.da-bang { min-width: 560px; }
	.da-mb__khung { grid-template-columns: 1fr; }
	.da-mb__chu { grid-template-columns: repeat(3, auto); justify-content: start; gap: 8px 16px; }
	.da-mb__chu .nut { grid-column: 1 / -1; margin-top: 0; }
	.da-tv { grid-auto-rows: 80px; }
	.da-ts { grid-template-columns: 1fr 1fr; }
	.da-vt { grid-template-columns: minmax(0, 1fr); }
	.da-vt__lh { flex-wrap: wrap; }
	.da-vt__lh > span:nth-child(2) { flex: 1 1 140px; }
	.da-vt__bd { min-height: 220px; }
	.da-dg { grid-template-columns: 1fr 1fr; }
	.da-dg .the-gg { grid-column: 1 / -1; flex-direction: row; align-items: center; }
	.lh-pt--gon .lh-pt__kenh { grid-template-columns: 1fr; }
	.ph-loc--2 { grid-template-columns: 1fr; }
	.chan--g8 .chan__luoi { grid-template-columns: 1fr 1fr; gap: 24px; }
	.chan--g8 .chan__tt { grid-column: 1 / -1; }
}
@media (max-width: 420px) {
	.da-loai { grid-template-columns: 1fr; }
	.da-dg { grid-template-columns: 1fr; }
}