/* mht.css — MỘT hệ CSS duy nhất cho cả site. Site cũ có 38 hệ chồng nhau và 522 !important; ở đây mọi thứ dùng tiền tố m- và không dùng !important. Thêm kiểu mới thì thêm vào file này, đừng nhét vào bài. */ :root{ /* Màu lấy TỪ CHÍNH LOGO MH Travel (#E84038) — đo bằng cách đếm điểm ảnh, không phỏng đoán. Đây là màu chủ đạo, dùng cho nút và điểm nhấn. */ --do:#e84038; --do-dam:#c9312a; /* khi rê chuột */ --do-nhat:#fdeceb; /* nền nhạt cho nhãn, khối nhấn */ --do-chu:#b02e26; /* chữ đỏ trên nền sáng — đậm hơn để đọc rõ */ /* Xanh biển giữ vai phụ: gợi biển, làm nền dịu cho ảnh và khối thông tin */ --xanh:#0f766e; --xanh-nhat:#ccfbf1; --cat:#d9a441; --muc:#1f2937; --xam:#6b7280; --vien:#e5e7eb; --nen:#f8fafc; --trang:#fff; --xanh-la:#16a34a; --bo-goc:14px; --bong:0 1px 3px rgba(0,0,0,.06), 0 8px 24px rgba(0,0,0,.04); } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%} body{ margin:0;background:var(--nen);color:var(--muc); font:16px/1.7 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif; } img{max-width:100%;height:auto;display:block} a{color:var(--do-chu);text-decoration:none} a:hover{text-decoration:underline} .m-bao{max-width:1180px;margin:0 auto;padding:0 16px} /* ── đầu trang ── */ .m-dau{background:var(--trang);border-bottom:1px solid var(--vien);position:sticky;top:0;z-index:20} .m-dau-trong{display:flex;align-items:center;gap:20px;height:64px} /* Logo: biểu tượng đỏ cắt từ file gốc + chữ dựng bằng CSS. Không dùng nguyên file logo ở đầu trang vì chữ trong đó màu TRẮNG, đặt lên nền sáng sẽ mất hút. */ .m-logo{display:flex;align-items:center;gap:9px;color:var(--muc)} .m-logo:hover{text-decoration:none} .m-logo img{height:35px;width:auto} .m-logo-chu{font-weight:600;font-size:19px;letter-spacing:1.5px;line-height:1} .m-logo-chu b{font-weight:800;color:var(--do)} .m-menu{display:flex;gap:22px;margin-left:auto;font-size:15px;font-weight:600;align-items:center} .m-menu a{color:var(--muc)} .m-menu a:hover{color:var(--do);text-decoration:none} .m-menu a.on{color:var(--do);position:relative} .m-menu a.on::after{content:"";position:absolute;left:0;right:0;bottom:-21px;height:3px;background:var(--do)} .m-menu-goi{display:none} /* số gọi trong menu chỉ dùng ở màn hẹp */ /* Nút ba gạch — ẩn trên máy tính, hiện khi màn hẹp */ .m-nut-menu{display:none;margin-left:auto;width:42px;height:38px;border:1px solid var(--vien); border-radius:10px;cursor:pointer;flex-direction:column;justify-content:center; align-items:center;gap:5px;background:#fff;flex-shrink:0} .m-nut-menu span{display:block;width:19px;height:2px;background:var(--muc);border-radius:2px; transition:transform .2s,opacity .2s} .m-goi{background:var(--do);color:#fff;padding:9px 18px;border-radius:10px;font-weight:700;font-size:14.5px} .m-goi:hover{background:var(--do-dam);text-decoration:none} /* ── khối mở đầu ── */ .m-hero{background:linear-gradient(160deg,#0f766e,#134e4a);color:#fff;padding:52px 0 46px} .m-hero h1{margin:0 0 12px;font-size:33px;line-height:1.25;letter-spacing:-.5px} .m-hero p{margin:0;font-size:17px;color:#c9f0ea;max-width:640px} /* ── lưới phòng ── */ .m-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(288px,1fr));gap:22px;margin:26px 0} .m-the{background:var(--trang);border-radius:var(--bo-goc);overflow:hidden;box-shadow:var(--bong); display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s} .m-the:hover{transform:translateY(-3px);box-shadow:0 4px 8px rgba(0,0,0,.08),0 14px 34px rgba(0,0,0,.07)} .m-the-anh{position:relative;aspect-ratio:4/3;background:#e8eef0;overflow:hidden} .m-the-anh img{width:100%;height:100%;object-fit:cover} .m-nhan{position:absolute;top:11px;left:11px;background:rgba(232,64,56,.94);color:#fff; padding:4px 11px;border-radius:20px;font-size:12px;font-weight:700} .m-the-than{padding:15px 16px 17px;display:flex;flex-direction:column;flex:1} .m-the-ten{font-weight:700;font-size:16px;line-height:1.4;margin:0 0 7px} .m-the-ten a{color:var(--muc)} .m-thong-so{display:flex;flex-wrap:wrap;gap:5px 13px;font-size:13.5px;color:var(--xam);margin-bottom:12px} .m-gia{margin-top:auto;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap} .m-gia b{font-size:21px;color:var(--do-chu);letter-spacing:-.3px} .m-gia span{font-size:13px;color:var(--xam)} /* ── thẻ nhỏ tiện ích ── */ .m-tien-ich{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px} .m-ti{background:var(--xanh-nhat);color:#115e56;padding:3px 10px;border-radius:20px;font-size:12px;font-weight:600} /* ── chú ý ── */ .m-luu-y{background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:14px 17px; font-size:14.5px;color:#78500f;margin:18px 0} .m-loi{background:#fef2f2;border:1px solid #fecaca;color:#991b1b} /* ── chân trang ── */ .m-chan{background:#0b3b37;color:#a7d3ce;margin-top:52px;padding:34px 0 26px;font-size:14.5px} .m-chan a{color:#e2f5f2} .m-chan-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:26px} .m-chan h4{color:#fff;margin:0 0 10px;font-size:15px} .m-chan-logo{height:56px;width:auto;margin-bottom:12px} /* ── điện thoại ── */ @media(max-width:860px){ /* Màn hẹp: giấu số gọi to ở đầu, thay bằng nút ba gạch mở menu */ .m-goi{display:none} .m-nut-menu{display:flex} /* Thanh đầu trang phải CAO LÊN khi menu xổ ra. Bản cũ để nguyên height:64px của bản màn rộng, mà menu lại flex-wrap xuống dòng thứ hai — nên nó tràn ra NGOÀI hộp nền trắng của thẻ header: chữ menu nằm chồng lên form đặt phòng phía dưới, nhìn như menu bị trong suốt. Đổi sang min-height để hộp tự giãn theo nội dung. */ .m-dau-trong{position:relative;flex-wrap:wrap;height:auto;min-height:64px} /* Menu xổ xuống dưới thanh đầu trang, chiếm trọn bề ngang */ /* Nền trắng đặt luôn ở đây làm lớp chắn thứ hai: lỡ có trang nào đổi bố cục thanh đầu khiến menu lại tràn ra ngoài, chữ vẫn đọc được chứ không lẫn vào ảnh nền phía dưới. */ .m-menu{display:none;order:3;width:100%;flex-direction:column;align-items:stretch; gap:0;margin:0 0 10px;border-top:1px solid var(--vien);padding-top:6px; background:var(--trang);position:relative;z-index:2} .m-mo-menu:checked ~ .m-menu{display:flex} .m-menu a{padding:13px 4px;border-bottom:1px solid var(--vien);font-size:16px} .m-menu a:last-child{border-bottom:0} .m-menu a.on{color:var(--do)} .m-menu a.on::after{display:none} /* gạch chân ngang không hợp khi xếp dọc */ .m-menu-goi{display:block;color:var(--do);font-weight:800} /* Nút ba gạch biến thành dấu X khi menu đang mở */ .m-mo-menu:checked ~ .m-nut-menu span:nth-child(1){transform:translateY(7px) rotate(45deg)} .m-mo-menu:checked ~ .m-nut-menu span:nth-child(2){opacity:0} .m-mo-menu:checked ~ .m-nut-menu span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} } @media(max-width:700px){ .m-hero{padding:36px 0 32px} .m-hero h1{font-size:25px} .m-luoi{grid-template-columns:1fr;gap:18px} } /* ══════════════════════════════════════════════════════════ TRANG CHI TIẾT PHÒNG — ảnh là nhân vật chính ══════════════════════════════════════════════════════════ */ /* ── dải ảnh đầu trang ── */ .m-anh-dai{display:grid;grid-template-columns:2fr 1fr 1fr;grid-template-rows:1fr 1fr; gap:7px;height:400px;margin:20px 0;border-radius:var(--bo-goc);overflow:hidden} .m-anh-dai>a{position:relative;overflow:hidden;background:#e8eef0;display:block} .m-anh-dai>a:first-child{grid-row:span 2} .m-anh-dai img{width:100%;height:100%;object-fit:cover;transition:transform .35s} .m-anh-dai>a:hover img{transform:scale(1.04)} .m-anh-them{position:absolute;inset:0;background:rgba(15,23,42,.55);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px} /* Nút mở cả bộ ảnh. Trên điện thoại dải ảnh chỉ hiện 3 tấm đầu (luật nth-child(n+4) bên dưới), nên KHÔNG có nút này thì mấy tấm sau không có đường nào bấm tới — đúng chỗ khách hay hỏi "còn ảnh nào nữa không". */ .m-anh-tatca{position:absolute;right:14px;bottom:14px;z-index:2;display:inline-flex; align-items:center;gap:7px;padding:9px 15px;border:0;border-radius:999px;cursor:pointer; background:rgba(255,255,255,.94);color:#0f172a;font-size:14px;font-weight:700; font-family:inherit;box-shadow:0 3px 12px rgba(15,23,42,.22)} .m-anh-tatca:hover{background:#fff} .m-anh-boc{position:relative} /* ── khung xem ảnh (bấm vào ảnh mở ra, lật tới lui) ── */ .xa{position:fixed;inset:0;z-index:9600;background:rgba(12,16,22,.95);display:none; align-items:center;justify-content:center} .xa.mo{display:flex} .xa-anh{max-width:min(1280px,94vw);max-height:82vh;width:auto;height:auto; border-radius:4px;object-fit:contain} .xa-ct{position:absolute;bottom:22px;left:0;right:0;text-align:center;color:#e6ecf2; font-size:14px;padding:0 20px;line-height:1.6} .xa-ct a{color:#e6ecf2;text-decoration:underline;opacity:.8} .xa-x{position:absolute;top:16px;right:20px;width:44px;height:44px;border:0;border-radius:50%; background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer} .xa-x:hover{background:rgba(255,255,255,.24)} .xa-nut{position:absolute;top:50%;transform:translateY(-50%);width:48px;height:48px;border:0; border-radius:50%;background:rgba(255,255,255,.14);color:#fff;font-size:26px;line-height:1;cursor:pointer} .xa-nut:hover{background:rgba(255,255,255,.24)} .xa-tr{left:20px}.xa-sa{right:20px} @media(max-width:700px){ .xa-anh{max-width:96vw;max-height:74vh} .xa-nut{width:40px;height:40px;font-size:21px}.xa-tr{left:8px}.xa-sa{right:8px} /* Giữ nút đủ cao để ngón tay bấm trúng — 8px trên dưới ra vừa 34px, hụt */ .m-anh-tatca{right:10px;bottom:10px;padding:11px 15px;font-size:13.5px} } /* ── bố cục hai cột: nội dung + khung đặt phòng ── */ .m-hai-cot{display:grid;grid-template-columns:1fr 372px;gap:38px;align-items:start;margin-bottom:44px} .m-ten-phong{font-size:29px;line-height:1.25;margin:0 0 8px;letter-spacing:-.5px} .m-vi-tri{color:var(--xam);font-size:15px;margin:0 0 20px} .m-so-nhanh{display:flex;flex-wrap:wrap;gap:10px;margin:20px 0 24px} .m-sn{background:var(--trang);border:1px solid var(--vien);border-radius:11px; padding:11px 15px;min-width:96px;box-shadow:var(--bong)} .m-sn b{display:block;font-size:19px;line-height:1.2} .m-sn span{font-size:12.5px;color:var(--xam)} .m-muc{margin:30px 0} .m-muc h2{font-size:20px;margin:0 0 12px;padding-bottom:9px;border-bottom:2px solid var(--xanh-nhat)} .m-muc p{margin:0 0 12px} /* ── khung đặt phòng dính bên phải ── */ .m-dat{background:var(--trang);border:1px solid var(--vien);border-radius:16px; padding:20px;box-shadow:0 4px 6px rgba(0,0,0,.04),0 12px 34px rgba(0,0,0,.07); position:sticky;top:82px} .m-dat-gia{display:flex;align-items:baseline;gap:7px;margin-bottom:16px; padding-bottom:15px;border-bottom:1px solid var(--vien)} .m-dat-gia b{font-size:26px;color:var(--do-chu);letter-spacing:-.5px} .m-dat-gia span{font-size:14px;color:var(--xam)} .m-o{margin-bottom:13px} .m-o label{display:block;font-size:12.5px;font-weight:700;color:var(--xam); text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px} .m-o input,.m-o select{width:100%;font:inherit;font-size:15px;padding:11px 12px; border:1px solid var(--vien);border-radius:10px;background:#fff;color:var(--muc)} .m-o input:focus,.m-o select:focus{outline:2px solid var(--do);outline-offset:-1px;border-color:var(--do)} .m-o-doi{display:grid;grid-template-columns:1fr 1fr;gap:10px} .m-tinh{background:var(--nen);border-radius:11px;padding:13px 15px;margin:14px 0;font-size:14.5px} .m-tinh-dong{display:flex;justify-content:space-between;gap:12px;margin-bottom:7px} .m-tinh-dong:last-child{margin:0;padding-top:9px;border-top:1px solid var(--vien); font-weight:800;font-size:16.5px} .m-tinh-dong span:last-child{white-space:nowrap} .m-nut{width:100%;font:inherit;font-size:16px;font-weight:800;padding:14px; border:0;border-radius:11px;background:var(--do);color:#fff;cursor:pointer;transition:background .15s} .m-nut:hover{background:var(--do-dam)} .m-nut:disabled{background:#9ca3af;cursor:not-allowed} .m-nut-phu{background:var(--cat);color:#3d2c05} .m-nut-phu:hover{background:#c79436} .m-ghi-nho{font-size:12.5px;color:var(--xam);text-align:center;margin-top:11px;line-height:1.6} /* ── lịch trống ── */ .m-lich{display:grid;grid-template-columns:repeat(7,1fr);gap:3px;margin-top:9px} .m-lich-thu{text-align:center;font-size:11.5px;font-weight:700;color:var(--xam);padding:5px 0} .m-ngay{aspect-ratio:1;display:flex;align-items:center;justify-content:center; font-size:13px;border-radius:8px;background:var(--xanh-nhat);color:#115e56;font-weight:600} .m-ngay.trong-rong{background:transparent} .m-ngay.ban{background:#fee2e2;color:#b91c1c;text-decoration:line-through} .m-ngay.qua{background:#f3f4f6;color:#c3c8cf} .m-lich-chu{display:flex;gap:16px;font-size:12.5px;color:var(--xam);margin-top:11px;flex-wrap:wrap} .m-lich-chu i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:5px;vertical-align:-1px} /* ── tiện ích ── */ .m-ti-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px} .m-ti-o{display:flex;align-items:center;gap:9px;background:var(--trang); border:1px solid var(--vien);border-radius:10px;padding:11px 13px;font-size:14.5px} /* ── Lưới TIỆN ÍCH ── Khoanh riêng bằng .m-ti-ic chứ không sửa thẳng .m-ti-o: lớp đó dùng chung với bảng Giá thuê ngay bên dưới, đổi ở gốc là bảng giá cũng đổi theo — mà hàng giá không có biểu tượng nên cao thấp so le với hàng tiện ích. */ .m-ti-luoi.m-ti-ic{grid-template-columns:repeat(auto-fill,minmax(205px,1fr))} .m-ti-ic .m-ti-o{gap:11px;border-radius:11px;line-height:1.4; transition:border-color .18s,box-shadow .18s} .m-ti-ic .m-ti-o:hover{border-color:#a7d8e8;box-shadow:0 2px 10px rgba(13,143,184,.10)} /* Biểu tượng đặt trong ô bo nền nhạt: nét mảnh 1.7 đứng trần trên nền trắng trông lỏng lẻo và chìm, còn cái nền cho mỗi hàng một điểm neo đều nhau nên cả lưới đọc thành CỘT chứ không thành mớ chữ rời. */ .m-ti-ic .ti-ic{flex:none;width:34px;height:34px;padding:7px;border-radius:9px; background:var(--do-nhat,#fdeceb);color:var(--do-chu);box-sizing:border-box} .m-ti-ic .m-ti-o span{min-width:0} /* Thẻ tiện ích nhỏ, dùng ở thẻ villa ngoài trang danh sách */ .ti-nho{display:inline-flex;align-items:center;gap:5px} .ti-nho .ti-ic{flex:none;color:var(--xam)} /* ── thông báo trong trang ── */ .m-bao-tin{padding:13px 16px;border-radius:11px;margin:13px 0;font-size:14.5px;font-weight:600} .m-bao-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46} .m-bao-loi{background:#fef2f2;border:1px solid #fecaca;color:#991b1b} @media(max-width:960px){ .m-hai-cot{grid-template-columns:1fr;gap:26px} .m-dat{position:static} } @media(max-width:700px){ .m-anh-dai{grid-template-columns:1fr 1fr;grid-template-rows:190px 110px;height:auto;gap:5px} .m-anh-dai>a:first-child{grid-column:span 2;grid-row:auto} .m-anh-dai>a:nth-child(n+4){display:none} .m-ten-phong{font-size:23px} } /* ══════════════════════════════════════════════════════════ TRANG CHỦ ══════════════════════════════════════════════════════════ */ /* ── ảnh lớn mở đầu ── */ .m-bia{position:relative;min-height:520px;display:flex;align-items:center; background:#0b3b37 center/cover no-repeat;color:#fff;overflow:hidden} /* Ảnh bìa hai cỡ. Ảnh nền không dùng được srcset nên chọn bằng media query: điện thoại lấy --bia-dt (bản 1236 điểm, ~150 KB), máy tính lấy --bia-pc (ảnh gốc). Đo được bản nhỏ giảm 64% dung lượng mà SSIM 0,987 — mắt thường không phân biệt ở cỡ màn hình điện thoại. PHP in hai biến này vào thuộc tính style của khối; trang nào không in thì cả hai rỗng và luật dưới đây không đổi gì. */ .m-bia[style*="--bia-dt"]{background-image:var(--bia-dt)} @media (min-width:900px){.m-bia[style*="--bia-pc"]{background-image:var(--bia-pc)}} .m-bia::after{content:"";position:absolute;inset:0; background:linear-gradient(105deg,rgba(8,32,30,.86) 0%,rgba(8,32,30,.62) 48%,rgba(8,32,30,.28) 100%)} .m-bia .m-bao{position:relative;z-index:2;padding-top:56px;padding-bottom:56px} .m-bia-nhan{display:inline-block;background:rgba(232,64,56,.95);padding:6px 14px; border-radius:20px;font-size:13px;font-weight:700;letter-spacing:.3px;margin-bottom:16px} .m-bia h1{margin:0 0 14px;font-size:42px;line-height:1.18;letter-spacing:-1px;max-width:660px} .m-bia p{margin:0 0 26px;font-size:18px;color:#dbeae7;max-width:560px} /* ── ô tìm phòng nổi trên ảnh ── */ .m-tim{background:rgba(255,255,255,.97);border-radius:16px;padding:16px; box-shadow:0 12px 40px rgba(0,0,0,.22);display:grid; grid-template-columns:1fr 1fr 150px auto;gap:12px;align-items:end;max-width:820px} .m-tim label{display:block;font-size:11.5px;font-weight:800;color:var(--xam); text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .m-tim input,.m-tim select{width:100%;font:inherit;font-size:15px;padding:11px 12px; border:1px solid var(--vien);border-radius:10px;color:var(--muc);background:#fff} .m-tim button{font:inherit;font-size:15.5px;font-weight:800;padding:12px 26px;border:0; border-radius:10px;background:var(--do);color:#fff;cursor:pointer;white-space:nowrap} .m-tim button:hover{background:var(--do-dam)} /* ── thanh tìm trên trang danh sách (điền sẵn điều đã nhập ở trang chủ) ── */ .tk-thanh{background:#fff;border:1px solid var(--vien);border-radius:14px;padding:14px; display:grid;grid-template-columns:1fr 1fr 150px auto;gap:12px;align-items:end; margin:0 0 16px;box-shadow:0 2px 10px rgba(0,0,0,.05)} .tk-thanh label{display:block;font-size:11.5px;font-weight:800;color:var(--xam); text-transform:uppercase;letter-spacing:.5px;margin-bottom:5px} .tk-thanh input,.tk-thanh select{width:100%;font:inherit;font-size:15px;padding:10px 12px; border:1px solid var(--vien);border-radius:10px;color:var(--muc);background:#fff} .tk-o{min-width:0} .tk-nut{font:inherit;font-size:15px;font-weight:800;padding:11px 24px;border:0; border-radius:10px;background:var(--do);color:#fff;cursor:pointer;white-space:nowrap} .tk-nut:hover{background:var(--do-dam)} .tk-ketqua{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:0 0 18px; padding:11px 14px;border-radius:10px;background:#f1f5f9;font-size:14.5px;color:var(--muc)} .tk-ketqua b{font-weight:800} .tk-phu{color:var(--xam);font-size:13px} .tk-xoa{margin-left:auto;font-size:13.5px;font-weight:700;color:var(--do);text-decoration:underline} @media(max-width:820px){ .tk-thanh{grid-template-columns:1fr 1fr;gap:10px} .tk-nut{grid-column:span 2} .tk-xoa{margin-left:0} } @media(max-width:480px){ .tk-thanh{grid-template-columns:1fr} .tk-nut{grid-column:auto} } /* ── dải số liệu tin cậy ── */ .m-so-dai{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:1px; background:var(--vien);border-radius:14px;overflow:hidden;margin:-38px auto 0; position:relative;z-index:3;box-shadow:var(--bong);max-width:940px} .m-so-o{background:var(--trang);padding:20px 16px;text-align:center} .m-so-o b{display:block;font-size:27px;color:var(--do-chu);letter-spacing:-.5px;line-height:1.2} .m-so-o span{font-size:13px;color:var(--xam)} /* ── tiêu đề từng phần ── */ .m-phan{margin:56px 0} .m-phan-dau{display:flex;align-items:flex-end;gap:16px;margin-bottom:22px;flex-wrap:wrap} .m-phan-dau h2{margin:0;font-size:27px;letter-spacing:-.5px;line-height:1.25} .m-phan-dau p{margin:5px 0 0;color:var(--xam);font-size:15.5px} .m-phan-dau a{margin-left:auto;font-weight:700;font-size:15px;white-space:nowrap} /* ── lý do chọn ── */ .m-ly-do{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px} .m-ld{background:var(--trang);border:1px solid var(--vien);border-radius:14px;padding:22px 20px} .m-ld-ic{width:44px;height:44px;border-radius:12px;background:var(--do-nhat);color:var(--do-chu); display:flex;align-items:center;justify-content:center;font-size:21px;margin-bottom:13px} .m-ld h3{margin:0 0 7px;font-size:17px} .m-ld p{margin:0;font-size:14.5px;color:var(--xam);line-height:1.65} /* ── điểm đến ── */ .m-diem{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px} .m-dd{position:relative;aspect-ratio:3/4;border-radius:14px;overflow:hidden;background:#dbe4e6; display:flex;align-items:flex-end;color:#fff} .m-dd img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .4s} .m-dd:hover img{transform:scale(1.06)} .m-dd-chu{position:relative;z-index:2;padding:16px;width:100%; background:linear-gradient(transparent,rgba(8,32,30,.88))} .m-dd-chu b{display:block;font-size:17px;margin-bottom:3px} .m-dd-chu span{font-size:13px;color:#cfe3e0} /* ── dải hai mảng phụ ── */ .m-phu{display:grid;grid-template-columns:1fr 1fr;gap:20px} .m-phu-o{border-radius:16px;padding:28px 26px;color:#fff;position:relative;overflow:hidden} .m-phu-o h3{margin:0 0 9px;font-size:21px} .m-phu-o p{margin:0 0 18px;font-size:15px;opacity:.92;line-height:1.65} .m-phu-nut{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.32); color:#fff;padding:10px 20px;border-radius:10px;font-weight:700;font-size:14.5px} .m-phu-nut:hover{background:rgba(255,255,255,.26);text-decoration:none} .m-phu-bds{background:linear-gradient(135deg,#1f2937,#374151)} .m-phu-nt{background:linear-gradient(135deg,#b02e26,#e84038)} /* ── tin tức ── */ .m-tin{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px} .m-tin-o{background:var(--trang);border-radius:14px;overflow:hidden;box-shadow:var(--bong)} .m-tin-anh{aspect-ratio:16/9;background:#e8eef0;overflow:hidden} .m-tin-anh img{width:100%;height:100%;object-fit:cover} .m-tin-than{padding:15px 17px 18px} .m-tin-than h3{margin:0 0 7px;font-size:16.5px;line-height:1.45} .m-tin-than h3 a{color:var(--muc)} .m-tin-than p{margin:0;font-size:14px;color:var(--xam);line-height:1.6} .m-tin-ngay{font-size:12.5px;color:var(--xam);margin-bottom:6px} .m-ghim{display:inline-block;background:var(--do-nhat);color:var(--do-chu);padding:2px 9px; border-radius:20px;font-size:11.5px;font-weight:800;margin-bottom:7px} @media(max-width:900px){ .m-tim{grid-template-columns:1fr 1fr;max-width:none} .m-tim button{grid-column:span 2} .m-phu{grid-template-columns:1fr} } @media(max-width:700px){ /* Bìa trang chủ đo được 758px trên máy 375px — gần một màn rưỡi chỉ để chào. min-height:auto vẫn cao vì đệm trên dưới 56px mỗi bên cộng chữ lớn. Hạ đệm và giãn dòng thì bìa còn ~470px mà vẫn ra chất: ảnh nền nguyên, chữ nguyên, chỉ bớt chỗ trống. */ .m-bia{min-height:auto} .m-bia .m-bao{padding-top:30px;padding-bottom:30px} .m-bia h1{font-size:28px;margin-bottom:10px} .m-bia p{font-size:15.5px;margin-bottom:18px} .m-tim{grid-template-columns:1fr;padding:14px} .m-tim button{grid-column:auto} .m-so-dai{margin-top:22px;grid-template-columns:1fr 1fr} .m-phan{margin:40px 0} .m-phan-dau h2{font-size:22px} .m-phan-dau a{margin-left:0} } /* ══════════════════════════════════════════════════════════ TRANG TIỆN ÍCH — "Một ngày ở NovaWorld chơi gì" Khác hẳn trang tiện ích bên site bán bất động sản: bên đó liệt kê hạng mục để chứng minh giá trị dự án, có cả phần "theo quy hoạch". Ở đây khách đang đi chơi, nên chỉ lấy chỗ chơi được NGAY và sắp theo BUỔI TRONG NGÀY — thứ khách thật sự cần biết. Lọc chạy bằng radio + CSS, không cần JavaScript. Hai bộ lọc (buổi × nhóm người) là hai luật ẩn độc lập, phần còn hiện chính là giao của hai điều kiện. ══════════════════════════════════════════════════════════ */ .ti-trang{--ti-mau:#0f766e;--ti-mau2:#134e4a} .ti-radio{position:absolute;opacity:0;pointer-events:none;width:0;height:0} /* ── bìa đổi màu theo buổi đang chọn ── */ .ti-bia{background:linear-gradient(150deg,var(--ti-mau),var(--ti-mau2));color:#fff; padding:46px 0 40px;transition:background .5s ease;position:relative;overflow:hidden} .ti-bia::after{content:"";position:absolute;right:-90px;top:-90px;width:340px;height:340px; border-radius:50%;background:rgba(255,255,255,.07)} .ti-bia .m-bao{position:relative;z-index:2} .ti-nhan{display:inline-block;background:rgba(255,255,255,.18);border:1px solid rgba(255,255,255,.28); padding:5px 14px;border-radius:20px;font-size:12.5px;font-weight:700;letter-spacing:.4px;margin-bottom:14px} .ti-bia h1{margin:0 0 12px;font-size:35px;line-height:1.2;letter-spacing:-.8px;max-width:680px} .ti-bia-mo{margin:0;font-size:16.5px;color:rgba(255,255,255,.86);max-width:620px;line-height:1.7} /* Mỗi buổi một bộ màu. Trưa nắng gắt thì đỏ, tối thì tím đêm — nhìn màu là đoán được cảm giác của giờ đó. */ #ti-b-binhminh:checked ~ .ti-than{--ti-mau:#f59e0b;--ti-mau2:#b45309} #ti-b-sang:checked ~ .ti-than{--ti-mau:#0284c7;--ti-mau2:#075985} #ti-b-trua:checked ~ .ti-than{--ti-mau:#dc2626;--ti-mau2:#7f1d1d} #ti-b-chieu:checked ~ .ti-than{--ti-mau:#0d9488;--ti-mau2:#115e59} #ti-b-hoanghon:checked ~ .ti-than{--ti-mau:#ea580c;--ti-mau2:#9a3412} #ti-b-toi:checked ~ .ti-than{--ti-mau:#4f46e5;--ti-mau2:#312e81} /* ── dải chọn buổi: một ngày trải từ bình minh tới đêm ── */ .ti-dong-ho{background:var(--trang);border-bottom:1px solid var(--vien); position:sticky;top:64px;z-index:15;box-shadow:0 2px 10px rgba(0,0,0,.04)} .ti-dh-cuon{display:flex;gap:8px;overflow-x:auto;padding:12px 0;scrollbar-width:thin} .ti-dh-o{flex:0 0 auto;display:flex;flex-direction:column;align-items:center;gap:2px; min-width:96px;padding:9px 13px;border-radius:12px;border:1.5px solid var(--vien); background:#fff;cursor:pointer;transition:border-color .15s,background .15s,transform .15s; text-align:center;user-select:none} .ti-dh-o:hover{border-color:var(--ti-mau);transform:translateY(-2px)} .ti-dh-ic{font-size:21px;line-height:1.1} .ti-dh-ten{font-size:13.5px;font-weight:700;color:var(--muc);white-space:nowrap} .ti-dh-gio{font-size:11.5px;color:var(--xam);white-space:nowrap} /* Buổi đang chọn: tô nền bằng chính màu của buổi đó */ #ti-b-tatca:checked ~ .ti-than label[for="ti-b-tatca"], #ti-b-binhminh:checked ~ .ti-than label[for="ti-b-binhminh"], #ti-b-sang:checked ~ .ti-than label[for="ti-b-sang"], #ti-b-trua:checked ~ .ti-than label[for="ti-b-trua"], #ti-b-chieu:checked ~ .ti-than label[for="ti-b-chieu"], #ti-b-hoanghon:checked ~ .ti-than label[for="ti-b-hoanghon"], #ti-b-toi:checked ~ .ti-than label[for="ti-b-toi"]{ background:var(--ti-mau);border-color:var(--ti-mau);transform:translateY(-2px); box-shadow:0 4px 14px rgba(0,0,0,.16)} #ti-b-tatca:checked ~ .ti-than label[for="ti-b-tatca"] .ti-dh-ten, #ti-b-binhminh:checked ~ .ti-than label[for="ti-b-binhminh"] .ti-dh-ten, #ti-b-sang:checked ~ .ti-than label[for="ti-b-sang"] .ti-dh-ten, #ti-b-trua:checked ~ .ti-than label[for="ti-b-trua"] .ti-dh-ten, #ti-b-chieu:checked ~ .ti-than label[for="ti-b-chieu"] .ti-dh-ten, #ti-b-hoanghon:checked ~ .ti-than label[for="ti-b-hoanghon"] .ti-dh-ten, #ti-b-toi:checked ~ .ti-than label[for="ti-b-toi"] .ti-dh-ten{color:#fff} #ti-b-tatca:checked ~ .ti-than label[for="ti-b-tatca"] .ti-dh-gio, #ti-b-binhminh:checked ~ .ti-than label[for="ti-b-binhminh"] .ti-dh-gio, #ti-b-sang:checked ~ .ti-than label[for="ti-b-sang"] .ti-dh-gio, #ti-b-trua:checked ~ .ti-than label[for="ti-b-trua"] .ti-dh-gio, #ti-b-chieu:checked ~ .ti-than label[for="ti-b-chieu"] .ti-dh-gio, #ti-b-hoanghon:checked ~ .ti-than label[for="ti-b-hoanghon"] .ti-dh-gio, #ti-b-toi:checked ~ .ti-than label[for="ti-b-toi"] .ti-dh-gio{color:rgba(255,255,255,.85)} /* ── lời mô tả của buổi đang chọn ── */ .ti-loi-buoi{display:none;background:var(--do-nhat);border-left:4px solid var(--ti-mau); border-radius:0 11px 11px 0;padding:13px 17px;margin:22px 0 6px;font-size:15px;color:#4b3a2a} #ti-b-binhminh:checked ~ .ti-than .ti-loi-binhminh, #ti-b-sang:checked ~ .ti-than .ti-loi-sang, #ti-b-trua:checked ~ .ti-than .ti-loi-trua, #ti-b-chieu:checked ~ .ti-than .ti-loi-chieu, #ti-b-hoanghon:checked ~ .ti-than .ti-loi-hoanghon, #ti-b-toi:checked ~ .ti-than .ti-loi-toi{display:block} /* ── lọc theo nhóm người đi ── */ .ti-ai{display:flex;gap:9px;flex-wrap:wrap;margin:20px 0 6px;align-items:center} .ti-ai-nhan{font-size:13px;font-weight:800;color:var(--xam);text-transform:uppercase; letter-spacing:.5px;margin-right:4px} .ti-ai-o{display:inline-flex;align-items:center;gap:7px;padding:8px 15px;border-radius:22px; border:1.5px solid var(--vien);background:#fff;cursor:pointer;font-size:14px; font-weight:600;color:var(--muc);transition:all .15s;user-select:none} .ti-ai-o:hover{border-color:var(--ti-mau)} #ti-a-tatca:checked ~ .ti-than label[for="ti-a-tatca"], #ti-a-giadinh:checked ~ .ti-than label[for="ti-a-giadinh"], #ti-a-capdoi:checked ~ .ti-than label[for="ti-a-capdoi"], #ti-a-nhomban:checked ~ .ti-than label[for="ti-a-nhomban"], #ti-a-nguoilon:checked ~ .ti-than label[for="ti-a-nguoilon"]{ background:var(--muc);border-color:var(--muc);color:#fff} /* ── LỌC: hai luật độc lập, phần còn hiện là giao của cả hai ── */ #ti-b-binhminh:checked ~ .ti-than .ti-the:not(.b-binhminh), #ti-b-sang:checked ~ .ti-than .ti-the:not(.b-sang), #ti-b-trua:checked ~ .ti-than .ti-the:not(.b-trua), #ti-b-chieu:checked ~ .ti-than .ti-the:not(.b-chieu), #ti-b-hoanghon:checked ~ .ti-than .ti-the:not(.b-hoanghon), #ti-b-toi:checked ~ .ti-than .ti-the:not(.b-toi), #ti-a-giadinh:checked ~ .ti-than .ti-the:not(.a-giadinh), #ti-a-capdoi:checked ~ .ti-than .ti-the:not(.a-capdoi), #ti-a-nhomban:checked ~ .ti-than .ti-the:not(.a-nhomban), #ti-a-nguoilon:checked ~ .ti-than .ti-the:not(.a-nguoilon){display:none} /* ── lưới thẻ ── */ .ti-luoi{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:22px;margin:18px 0 46px} .ti-the{background:var(--trang);border-radius:16px;overflow:hidden;box-shadow:var(--bong); display:flex;flex-direction:column;transition:transform .15s,box-shadow .15s} .ti-the:hover{transform:translateY(-3px);box-shadow:0 6px 12px rgba(0,0,0,.07),0 18px 40px rgba(0,0,0,.08)} .ti-anh{position:relative;aspect-ratio:16/10;overflow:hidden; background:linear-gradient(140deg,var(--ti-nen1,#0f766e),var(--ti-nen2,#134e4a)); display:flex;align-items:center;justify-content:center} .ti-anh img{width:100%;height:100%;object-fit:cover} /* Chưa có ảnh thì vẫn ra hình: khối màu + biểu tượng lớn, không để ô trắng trơ */ .ti-anh-trong{font-size:62px;filter:drop-shadow(0 4px 12px rgba(0,0,0,.28))} .ti-anh-ten{position:absolute;left:0;right:0;bottom:0;padding:26px 16px 13px;color:#fff; background:linear-gradient(transparent,rgba(8,25,24,.9))} .ti-anh-ten b{display:block;font-size:18.5px;line-height:1.3;letter-spacing:-.3px} .ti-anh-ten span{font-size:12.5px;color:rgba(255,255,255,.82)} /* ── dải ảnh phụ dưới ảnh chính ───────────────────────────────────────── Cuộn ngang trong lòng nó, không đẩy thẻ rộng ra. Ô 56×42 đủ nhận ra cảnh mà không chiếm chỗ của phần chữ bên dưới. */ .ti-dai-anh{display:flex;gap:6px;padding:8px 10px 0;overflow-x:auto; scrollbar-width:none;-webkit-overflow-scrolling:touch} .ti-dai-anh::-webkit-scrollbar{display:none} .ti-dai-o{flex:0 0 auto;width:56px;height:42px;padding:0;border-radius:6px; overflow:hidden;cursor:pointer;background:#e9eef3; border:2px solid transparent;transition:border-color .18s,opacity .18s;opacity:.72} .ti-dai-o img{width:100%;height:100%;object-fit:cover;display:block} .ti-dai-o:hover{opacity:1} .ti-dai-o.on{border-color:var(--do,#e84038);opacity:1} /* Bàn phím: viền nét đứt cho thấy đang ở ô nào, khác hẳn viền đỏ của ô đang chọn */ .ti-dai-o:focus-visible{outline:2px dashed var(--muc,#132a47);outline-offset:2px} @media(max-width:700px){ /* Ngón tay cần vùng chạm cao hơn con trỏ chuột */ .ti-dai-o{width:62px;height:46px} } /* ── đồng hồ nhỏ trên thẻ: 6 vạch = 6 buổi, vạch sáng là buổi nên đi ── Nhìn một cái là biết chỗ này chơi lúc nào, khỏi phải đọc chữ. */ .ti-cham-dai{display:flex;gap:4px;padding:12px 16px 0;align-items:center} .ti-cham{width:100%;height:5px;border-radius:3px;background:var(--vien)} .ti-cham.on{background:var(--cham-mau,#0f766e)} .ti-cham-chu{font-size:11px;color:var(--xam);white-space:nowrap;margin-left:5px;font-weight:600} .ti-than-the{padding:12px 16px 17px;display:flex;flex-direction:column;flex:1} .ti-tom{margin:0 0 12px;font-size:14.5px;color:var(--xam);line-height:1.68} .ti-so{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:12px} .ti-so span{background:var(--nen);border:1px solid var(--vien);border-radius:8px; padding:5px 10px;font-size:12.5px;color:var(--muc)} .ti-meo{background:#fffbeb;border:1px solid #fde68a;border-radius:11px;padding:11px 14px; font-size:13.8px;color:#78500f;line-height:1.62;margin-top:auto} .ti-meo b{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.5px; color:#a16207;margin-bottom:3px} .ti-mo{margin-top:11px;border-top:1px solid var(--vien);padding-top:11px} .ti-mo summary{cursor:pointer;font-size:13.5px;font-weight:700;color:var(--do-chu);list-style:none} .ti-mo summary::-webkit-details-marker{display:none} .ti-mo summary::before{content:"+ ";font-weight:800} .ti-mo[open] summary::before{content:"− "} .ti-mo ul{margin:10px 0 0;padding-left:19px;font-size:13.8px;color:var(--xam);line-height:1.72} .ti-mo li{margin-bottom:5px} .ti-nguon{font-size:11.5px;color:#9ca3af;margin-top:9px;font-style:italic} /* ── khi bộ lọc không còn chỗ nào ── */ .ti-trong{display:none;background:var(--trang);border:1px dashed var(--vien);border-radius:14px; padding:34px 24px;text-align:center;margin:18px 0 46px} .ti-trong.hien{display:block} .ti-trong b{display:block;font-size:18px;margin-bottom:7px} .ti-trong p{margin:0;color:var(--xam);font-size:15px;line-height:1.7} /* ── lịch trình gợi ý ── */ .ti-lt{background:var(--trang);border-radius:18px;padding:26px 26px 30px;box-shadow:var(--bong);margin-bottom:46px} .ti-lt-tab{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:22px} .ti-lt-tab label{display:inline-flex;align-items:center;gap:8px;padding:11px 19px;border-radius:12px; border:1.5px solid var(--vien);cursor:pointer;font-weight:700;font-size:14.5px; color:var(--muc);transition:all .15s;user-select:none} .ti-lt-tab label:hover{border-color:var(--xanh)} .ti-lt-tab label span{font-weight:400;font-size:12.5px;color:var(--xam)} #ti-l-2n1d:checked ~ .ti-than label[for="ti-l-2n1d"], #ti-l-3n2d:checked ~ .ti-than label[for="ti-l-3n2d"]{background:var(--xanh);border-color:var(--xanh);color:#fff} #ti-l-2n1d:checked ~ .ti-than label[for="ti-l-2n1d"] span, #ti-l-3n2d:checked ~ .ti-than label[for="ti-l-3n2d"] span{color:rgba(255,255,255,.8)} .ti-lt-noi{display:none;grid-template-columns:repeat(auto-fit,minmax(270px,1fr));gap:26px} #ti-l-2n1d:checked ~ .ti-than .ti-lt-2n1d, #ti-l-3n2d:checked ~ .ti-than .ti-lt-3n2d{display:grid} .ti-ngay h3{margin:0 0 14px;font-size:16px;color:var(--xanh); padding-bottom:8px;border-bottom:2px solid var(--xanh-nhat)} .ti-moc{display:flex;gap:14px;padding-bottom:16px;position:relative} /* Đường dọc nối các mốc giờ — nhìn ra ngay đây là một dòng thời gian */ .ti-moc::before{content:"";position:absolute;left:31px;top:26px;bottom:0;width:2px;background:var(--vien)} .ti-moc:last-child::before{display:none} .ti-moc-gio{flex:0 0 auto;width:64px;font-size:13px;font-weight:800;color:var(--muc); background:var(--nen);border-radius:8px;padding:4px 0;text-align:center;height:fit-content; position:relative;z-index:2;border:1px solid var(--vien)} .ti-moc-viec{font-size:14.3px;line-height:1.6;padding-top:3px} .ti-moc-viec a{font-weight:600} /* ── dải mời đặt phòng ── */ .ti-moi{background:linear-gradient(135deg,#0b3b37,#0f766e);color:#fff;border-radius:18px; padding:34px 30px;margin-bottom:50px;display:flex;gap:26px;align-items:center;flex-wrap:wrap} .ti-moi-chu{flex:1;min-width:250px} .ti-moi h3{margin:0 0 8px;font-size:23px;letter-spacing:-.4px} .ti-moi p{margin:0;font-size:15.5px;color:#c9e6e2;line-height:1.7} .ti-moi-nut{display:flex;gap:11px;flex-wrap:wrap} .ti-moi-nut a{background:var(--do);color:#fff;padding:13px 26px;border-radius:11px; font-weight:800;font-size:15px;white-space:nowrap} .ti-moi-nut a:hover{background:var(--do-dam);text-decoration:none} .ti-moi-nut a.phu{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.3)} .ti-moi-nut a.phu:hover{background:rgba(255,255,255,.24)} @media(max-width:860px){ .ti-dong-ho{top:56px} .ti-bia h1{font-size:26px} .ti-bia{padding:34px 0 30px} .ti-luoi{grid-template-columns:1fr} .ti-lt{padding:20px 17px 24px} .ti-ai-nhan{width:100%;margin-bottom:2px} /* Dải buổi cuộn ngang, chừa lề để thấy còn nội dung bên phải */ .ti-dh-cuon{margin:0 -16px;padding:12px 16px} .ti-moi{padding:24px 20px} .ti-moi h3{font-size:19px} } /* ── trang chủ: ba bước đặt phòng ── Số to đặt trong vòng tròn, có đường nối ngang để đọc ra ngay đây là một trình tự chứ không phải ba ô rời rạc. */ .m-buoc{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:22px;position:relative} .m-buoc-o{background:var(--trang);border:1px solid var(--vien);border-radius:14px; padding:24px 20px;position:relative} .m-buoc-so{width:40px;height:40px;border-radius:50%;background:var(--do);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:800;font-size:18px; margin-bottom:13px} .m-buoc-o h3{margin:0 0 7px;font-size:17px} .m-buoc-o p{margin:0;font-size:14.5px;color:var(--xam);line-height:1.65} /* đường nối giữa các bước, chỉ vẽ khi xếp ngang */ @media(min-width:761px){ .m-buoc-o:not(:last-child)::after{content:"";position:absolute;top:44px;right:-22px; width:22px;height:2px;background:var(--vien)} } /* ── vị trí ── */ .m-vt{display:grid;grid-template-columns:1fr 1fr;gap:34px;align-items:center; background:var(--trang);border:1px solid var(--vien);border-radius:18px; padding:32px;overflow:hidden} .m-vt-chu h2{margin:0 0 11px;font-size:25px;letter-spacing:-.5px;line-height:1.3} .m-vt-chu>p{margin:0 0 17px;font-size:15.5px;color:var(--xam);line-height:1.75} .m-vt-y{margin:0 0 20px;padding:0;list-style:none} .m-vt-y li{position:relative;padding-left:26px;margin-bottom:9px;font-size:15px;line-height:1.6} .m-vt-y li::before{content:"📍";position:absolute;left:0;top:0;font-size:14px} .m-vt-chu .m-phu-nut{background:var(--xanh-nhat);border:1px solid #99f6e4;color:#115e56} .m-vt-chu .m-phu-nut:hover{background:#b9f8ee} /* Chưa lấy được ảnh thì phần chữ chiếm trọn hàng, không để trống nửa khung */ .m-vt-chu:only-child{grid-column:1/-1} .m-vt-anh{border-radius:14px;overflow:hidden;aspect-ratio:4/3;background:#e8eef0} .m-vt-anh img{width:100%;height:100%;object-fit:cover} /* ── câu hỏi thường gặp ── */ .m-faq{display:grid;gap:11px} .m-faq-o{background:var(--trang);border:1px solid var(--vien);border-radius:13px; padding:0 18px;transition:border-color .15s} .m-faq-o[open]{border-color:var(--xanh)} .m-faq-o summary{cursor:pointer;list-style:none;padding:16px 30px 16px 0;position:relative; font-weight:700;font-size:15.8px;line-height:1.5} .m-faq-o summary::-webkit-details-marker{display:none} /* dấu + xoay thành × khi mở — không dùng chữ để khỏi lệch khi đổi cỡ chữ */ .m-faq-o summary::after{content:"";position:absolute;right:2px;top:23px;width:13px;height:2px; background:var(--xam);transition:transform .2s} .m-faq-o summary::before{content:"";position:absolute;right:7.5px;top:18px;width:2px;height:13px; background:var(--xam);transition:transform .2s,opacity .2s} .m-faq-o[open] summary::before{opacity:0;transform:rotate(90deg)} .m-faq-o[open] summary::after{background:var(--xanh)} .m-faq-o p{margin:0;padding:0 0 17px;font-size:15px;color:var(--xam);line-height:1.75} @media(max-width:760px){ .m-vt{grid-template-columns:1fr;padding:22px 20px;gap:22px} .m-vt-chu h2{font-size:21px} .m-vt-anh{order:-1} /* ảnh lên trên cho có hình trước khi đọc chữ */ .m-buoc{gap:14px} .m-buoc-o{padding:18px 17px} .m-faq-o summary{font-size:15px;padding-right:26px} } /* ── banner đầu trang (dùng chung mọi trang) ── Không ảnh thì nền xanh chuyển sắc; có ảnh thì phủ lớp tối để chữ luôn đọc được dù ảnh sáng hay tối. Bên site cũ chữ hay chìm vào ảnh vì thiếu lớp phủ này. */ .m-bn{background:linear-gradient(160deg,#0f766e,#134e4a);color:#fff;position:relative; background-size:cover;background-position:center;overflow:hidden} /* Phần đồng bộ với bìa trang chủ nằm ở css/bien.css — cả .m-bia lẫn .m-bn dùng chung một bộ luật ở đó, không viết hai bản dễ lệch nhau. */ .m-bn-trong{position:relative;z-index:2;padding:52px 16px 46px} .m-bn-nhan{display:inline-block;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.28); padding:5px 14px;border-radius:20px;font-size:12.5px;font-weight:700;letter-spacing:.4px;margin-bottom:14px} .m-bn h1{margin:0 0 12px;font-size:33px;line-height:1.24;letter-spacing:-.6px;max-width:760px} .m-bn p{margin:0;font-size:16.5px;color:rgba(255,255,255,.88);max-width:640px;line-height:1.7} .m-bn-nut{display:flex;gap:11px;flex-wrap:wrap;margin-top:22px} .m-bn-nut a{padding:12px 24px;border-radius:11px;font-weight:800;font-size:15px;white-space:nowrap} .m-bn-n1{background:var(--do);color:#fff} .m-bn-n1:hover{background:var(--do-dam);text-decoration:none} .m-bn-n2{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.32);color:#fff} .m-bn-n2:hover{background:rgba(255,255,255,.26);text-decoration:none} @media(max-width:700px){ .m-bn-trong{padding:34px 16px 30px} .m-bn h1{font-size:25px} .m-bn p{font-size:15.5px} .m-bn-nut a{flex:1;text-align:center} } /* ══ THẺ VILLA ═══════════════════════════════════════════════════════════ Anh Vân duyệt bố cục: tên → diện tích và điểm bán → thông số → tiện ích → GIÁ THẬT LỚN → hai nút. Khách nhìn ba giây phải biết loại căn, diện tích, số phòng, giá, điểm khác biệt. ══ VÌ SAO BỎ CHỮ CÓ CHÂN ══ Bản trước tôi để tên villa bằng Georgia cho ra vẻ sang. SAI, và sai nặng: Georgia KHÔNG có chữ Việt (khoảng U+1EA0–U+1EF9). Trình duyệt phải mượn phông khác cho từng chữ có dấu, mà mượn kiểu đó thì dấu rời hẳn ra — "Nội Thất Cao Cấp" hiện thành "Nội Thâ ́t Cao Câ ́p". Chọn phông cho trang tiếng Việt thì phải thử bằng chữ có dấu, không thử bằng chữ Anh. Dùng lại đúng bộ chữ của cả site. Vẻ sang lấy từ khoảng thở, nét chữ và màu — không lấy từ một phông vỡ dấu. ══ VÌ SAO KHUNG ẢNH VUÔNG ══ Đo cả kho: 18 căn đang bán thì ẢNH ĐẦU có 8 căn là ảnh dọc (960×1280, chụp bằng điện thoại), 7 căn ngang 4:3, 3 căn ngang rộng. Chọn theo TRƯỜNG HỢP TỆ NHẤT chứ không theo mức mất trung bình: 3/2 mất TB 27% · 8 ảnh mất trên 35% ← cắt cụt hết ảnh dọc 4/3 mất TB 22% · 8 ảnh mất trên 35% 1/1 mất TB 27% · 1 ảnh mất trên 35% ← chọn cái này Ảnh dọc vào khung 3/2 mất đúng một nửa: mất cả mái lẫn sân, còn khúc giữa. */ .m-luoi{grid-template-columns:repeat(auto-fill,minmax(316px,1fr));gap:24px} .v-the{background:var(--trang);border:1px solid var(--vien);border-radius:16px; overflow:hidden;display:flex;flex-direction:column; box-shadow:0 1px 2px rgba(16,24,40,.04); transition:transform .35s cubic-bezier(.2,.7,.3,1), box-shadow .35s, border-color .35s} .v-the:hover{transform:translateY(-6px);border-color:#dcdfe4; box-shadow:0 2px 6px rgba(16,24,40,.06), 0 22px 46px rgba(16,24,40,.13)} /* ── ảnh ── */ .v-anh{position:relative;display:block;aspect-ratio:1/1;background:#e9edf0;overflow:hidden} .v-anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; object-position:center 42%; /* lệch lên: villa thì mái và mặt tiền mới đáng nhìn */ transition:transform .8s cubic-bezier(.2,.7,.3,1), opacity .5s} /* rê chuột hé ảnh thứ hai — thường là ảnh trong nhà */ .v-anh-2{opacity:0} .v-the:hover .v-anh-1{transform:scale(1.07)} .v-the:hover .v-anh-2{opacity:1;transform:scale(1.07)} .v-mo{position:absolute;inset:auto 0 0;height:52%;pointer-events:none; background:linear-gradient(to top,rgba(12,18,28,.6),rgba(12,18,28,.12) 46%,transparent)} /* ── cờ: nhiều nhất hai cái, mỗi loại một màu để phân biệt được từ xa ── */ .v-co-hang{position:absolute;top:12px;left:12px;z-index:2;display:flex;flex-wrap:wrap;gap:6px; max-width:calc(100% - 24px)} .v-co{display:inline-flex;align-items:center;gap:5px;padding:5px 11px;border-radius:999px; font-size:11.5px;font-weight:700;letter-spacing:.2px;color:#fff; background:rgba(15,22,32,.5);border:1px solid rgba(255,255,255,.3); backdrop-filter:blur(8px);white-space:nowrap} .v-co i{font-style:normal;font-size:11px} .v-co-bien{background:rgba(13,110,150,.72)} .v-co-re{background:rgba(176,46,38,.74)} .v-co-sao{background:rgba(180,128,20,.74)} .v-co-boi{background:rgba(15,118,110,.72)} .v-khu{position:absolute;left:14px;bottom:11px;z-index:2;color:#fff; font-size:12px;font-weight:600;letter-spacing:.3px;text-shadow:0 1px 6px rgba(0,0,0,.5)} .v-khu::before{content:"◈";margin-right:6px;color:var(--cat);font-size:10px} /* ── thân ── */ .v-than{padding:15px 17px 17px;display:flex;flex-direction:column;flex:1} /* Tên: tên riêng đậm, phần loại căn nhạt hơn để mắt bám vào tên riêng trước. Cắt hai dòng VÀ giữ chỗ đủ hai dòng — không có chốt này thì thẻ tên dài cao hơn thẻ tên ngắn, cả lưới so le (đo thật: lệch 67px). */ .v-ten{margin:0 0 5px;font-size:17px;line-height:1.35;font-weight:700;letter-spacing:-.2px; min-height:calc(17px * 1.35 * 2); display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden} .v-ten a{color:var(--muc);text-decoration:none} .v-the:hover .v-ten a{color:var(--do-chu)} .v-ten-loai{font-weight:500;color:var(--xam)} /* Dòng điểm bán — chỗ ba căn khác nhau, nên cho nó đứng riêng một dòng */ .v-phu{font-size:13px;color:#52606d;line-height:1.5;margin-bottom:10px;min-height:20px; display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden} .v-phu b{color:var(--muc);font-weight:700} .v-so{display:flex;flex-wrap:nowrap;gap:14px;font-size:13px;color:#4b5563;margin-bottom:10px} .v-so span{display:inline-flex;align-items:center;gap:5px;white-space:nowrap} .v-so i{font-style:normal;font-size:12.5px;opacity:.62} .v-tien{display:flex;flex-wrap:nowrap;gap:6px;margin-bottom:14px;overflow:hidden;min-height:23px} .v-tien span{font-size:11.5px;color:#52606d;background:var(--nen); border:1px solid var(--vien);border-radius:999px;padding:3px 10px; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} /* ══ GIÁ — nhân vật chính của thẻ ══ Bản trước để giá 22px nằm chung hàng với nút, chìm nghỉm ở chân thẻ. Khách thuê villa nhìn giá TRƯỚC rồi mới đọc chi tiết, nên giá phải đứng riêng một khối và to hẳn lên. 30px là cỡ đọc được từ khoảng cách lướt trang. */ /* Chữ đỏ 30px trên nền trắng vẫn CHÌM, vì cả thẻ đã dày chữ và ngay dưới là nút "Đặt ngay" đỏ đặc — hai thứ cùng màu thì mắt bám vào cái đậm hơn, tức cái nút, chứ không phải con số. Nên tách hẳn giá ra một KHỐI CÓ NỀN: nền chỉ hơi phớt hồng nên không đấu màu với nút, nhưng đủ để mắt lướt trang dừng lại đúng chỗ. Kèm một vạch đỏ bên trái làm mốc neo. */ .v-gia{margin-top:auto;background:#fff5f4;border:1px solid #fbdedb; border-left:4px solid var(--do);border-radius:10px;padding:10px 13px 11px} /* "từ" đứng cùng hàng với con số, không xuống dòng riêng: khối giá chỉ nên chiếm HAI dòng — một dòng giá, một dòng giá cuối tuần. Bản trước để nó display:block nên thành ba dòng, mà dòng thứ nhất chỉ có đúng hai ký tự. */ .v-gia-tu{font-size:12px;color:var(--xam);align-self:baseline;font-weight:600} .v-gia-so{display:flex;align-items:baseline;gap:5px;flex-wrap:wrap} /* 36px và weight 900: con số phải là thứ TO NHẤT trên thẻ, hơn cả tên căn (17px). Chữ phụ quanh nó cố tình nhỏ và nhạt đi — chênh lệch mới làm nổi, chứ phóng to đều cả cụm thì vẫn thành một mảng chữ. */ .v-gia-so b{font-size:36px;font-weight:900;color:var(--do-chu);letter-spacing:-1.2px; line-height:1.1;font-variant-numeric:tabular-nums} .v-gia-so span{font-size:13px;color:#6b7280;font-weight:600} .v-gia-ct{font-size:12.5px;color:#8a6a17;margin-top:2px;font-weight:600} /* căn chưa khai giá: nói thẳng là liên hệ, đừng hiện "0đ" */ .v-gia-hoi b{font-size:21px;letter-spacing:-.3px;color:var(--muc)} .v-gia:has(.v-gia-hoi){background:var(--nen);border-color:var(--vien); border-left-color:var(--xam)} /* ── hai nút: xem chi tiết là phụ, đặt ngay là chính ── */ .v-nut{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-top:14px} .v-nut a{display:flex;align-items:center;justify-content:center;height:42px; border-radius:10px;font-size:14px;font-weight:700;text-decoration:none; transition:background .2s,border-color .2s,transform .2s} .v-nut a:hover{text-decoration:none;transform:translateY(-1px)} .v-nut-phu{color:var(--muc);background:var(--trang);border:1px solid var(--vien)} .v-nut-phu:hover{border-color:var(--muc);background:var(--nen)} .v-nut-chinh{color:#fff;background:var(--do);border:1px solid var(--do); box-shadow:0 2px 8px rgba(232,64,56,.28)} .v-nut-chinh:hover{background:var(--do-dam);border-color:var(--do-dam);color:#fff; box-shadow:0 4px 14px rgba(232,64,56,.34)} /* Máy cảm ứng không rê chuột được nên không bao giờ thấy ảnh thứ hai — bỏ hẳn cho đỡ tải, và mọi thứ vốn hiện khi rê chuột thì cho hiện sẵn. */ @media(hover:none){ .v-anh-2{display:none} } /* ══ ĐIỆN THOẠI: HAI CĂN MỘT HÀNG ═════════════════════════════════════════ Bản cũ mỗi hàng một căn, thẻ cao 585px — nghĩa là mỗi màn 812px chỉ thấy được hơn một căn. Khách muốn so vài căn phải vuốt cả chục lần, mà so sánh mới là việc người thuê villa thật sự làm. Hai cột thì thẻ còn 166px bề ngang, nên mọi thứ trong thẻ phải nhỏ theo: ảnh về khung vuông, chữ nhỏ lại, hai nút xếp chồng. Đổi lại một màn thấy được bốn căn. */ @media(max-width:640px){ .m-luoi{grid-template-columns:1fr 1fr;gap:11px} .v-the{border-radius:13px} .v-anh{aspect-ratio:1/1} .v-co-hang{top:7px;left:7px;gap:4px;max-width:calc(100% - 14px)} .v-co{padding:3px 7px;font-size:9.5px;gap:3px;backdrop-filter:none} .v-co i{font-size:9.5px} .v-than{padding:10px 9px 11px} .v-ten{font-size:13px;min-height:calc(13px * 1.35 * 2);margin-bottom:3px} .v-phu{font-size:10.5px} .v-so{font-size:10.5px;gap:7px} .v-tien{display:none} /* 166px không đủ chỗ, ba thẻ tiện ích xuống dòng lộn xộn */ .v-gia-so b{font-size:20px} .v-gia{margin:7px 0;padding:8px 9px} .v-gia-phu{font-size:10.5px} /* .v-nut là GRID hai cột, không phải flex — đặt flex-direction ở đây vô nghĩa, hai nút vẫn nằm cạnh nhau và mỗi nút chỉ còn 70px. */ .v-nut{grid-template-columns:1fr;gap:6px;margin-top:9px} .v-nut a{height:36px;font-size:12px} } /* Khổ rất hẹp (màn 320px) thì hai cột thành chật — quay về một cột */ @media(max-width:340px){ .m-luoi{grid-template-columns:1fr;gap:14px} .v-anh{aspect-ratio:4/3} .v-ten{font-size:16.5px;min-height:calc(16.5px * 1.35 * 2)} .v-gia-so b{font-size:33px} .v-tien{display:flex} .v-nut{grid-template-columns:1fr 1fr} .v-nut a{height:44px;font-size:inherit} /* ngón tay cần chỗ bấm rộng hơn con trỏ */ } /* ══ LỊCH CÒN TRỐNG ══════════════════════════════════════════════════════ Bản cũ: ô ngày aspect-ratio:1 trong cột hẹp nên mỗi ô to bằng ngón tay cái, ba tháng xếp chồng kéo dài hơn hai màn hình. Khách phải cuộn mãi mới thấy hết, mà thứ cần thấy chỉ là "tháng này còn mấy ngày trống". Bản này: ba tháng nằm CẠNH NHAU, ô cao cố định 34px, và mỗi tháng có sẵn con số "N ngày trống" ngay trên đầu — đọc một cái là biết, không cần đếm. */ .lc-nhac{font-size:12.5px;font-weight:400;color:var(--xam);margin-left:8px} .lc-thang-luoi{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:18px;margin-top:12px} .lc-thang-ten{display:flex;align-items:baseline;gap:8px;font-weight:700;font-size:14px; margin-bottom:7px} .lc-thang-ten b{margin-left:auto;font-size:11.5px;font-weight:700;color:#0f766e; background:var(--xanh-nhat);border-radius:999px;padding:2px 9px} .lc-luoi{display:grid;grid-template-columns:repeat(7,1fr);gap:3px} .lc-thu{text-align:center;font-size:10.5px;font-weight:700;color:var(--xam);padding:2px 0 4px} /* Ô là