/* BinhDesign website – CSS chung. Bộ màu 15/11/2026: vàng #FFBC00, đen thật #0A0A0A, xám trung tính. Chữ SVN-Avo regular, không in đậm. */
@font-face { font-family:"SVN-Avo"; src:url("font/SVN-Avo.ttf"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"SVN-Avo"; src:url("font/SVN-Avo%20italic.ttf"); font-weight:400; font-style:italic; font-display:swap; }
:root { --den:#0A0A0A; --den-2:#000; --xam:#4A4A4A; --xam-chu:#8C8C8C; --nhat:#EEEEEE; --cam:#FFBC00; --trang:#fff;
  --tieu-de:"SVN-Avo","Segoe UI",Arial,sans-serif; --chu:"SVN-Avo","Segoe UI",Arial,sans-serif; }
* { box-sizing:border-box; margin:0; padding:0; }
*, *::before, *::after { font-weight:400 !important; }
html { scroll-behavior:smooth; }
body { font-family:var(--chu); color:var(--den); background:#fff; -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { display:block; max-width:100%; } a { color:inherit; text-decoration:none; }
/* Cụm logo như đầu phiếu: khối vuông đen chứa logo trắng, khối vàng và xám so le (100px = cụm 220×200 của phiếu) */
.cum { position:relative; display:block; width:2.2em; height:2em; flex:none; }
.cum .c { position:absolute; left:.52em; top:0; width:1.36em; height:1.68em; background:var(--cam); }
.cum .x { position:absolute; left:0; top:.7em; width:.8em; height:1.3em; background:var(--xam); }
.cum .v { position:absolute; left:.22em; top:.24em; width:1.5em; height:1.5em; background:var(--den); display:grid; place-items:center; }
.cum .v img { width:.87em; }
/* ---------- Bố cục chung (hướng anh Bình duyệt 15/11/2026, học bố cục samsung.com) ---------- */



.ss { --x:#F4F4F4; font-family:var(--chu); color:#0A0A0A; }
.ss-w { max-width:1440px; margin:0 auto; padding:0 40px; }
.ss-nav { background:#fff; border-bottom:1px solid #EAEAEA; position:sticky; top:0; z-index:30; }
.ss-nav .ss-w { height:64px; display:flex; align-items:center; gap:46px; }
.ss-nav .logo { display:flex; align-items:center; gap:10px; letter-spacing:.28em; font-size:14px; } .ss-nav .cum { font-size:17px; }
.ss-nav nav { display:flex; gap:30px; font-size:15px; } .ss-nav nav a:hover { text-decoration:underline; text-underline-offset:6px; }
.ss-nav .phai { margin-left:auto; display:flex; align-items:center; gap:8px; font-size:14px; } .ss-nav .phai i { width:6px; height:6px; background:var(--cam); }
.ss-hero { position:relative; height:min(46vw,680px); min-height:460px; overflow:hidden; background:#0A0A0A; }
.ss-slide { position:absolute; inset:0; opacity:0; transition:opacity .8s; }
.ss-slide.on { opacity:1; }
.ss-slide img { width:100%; height:100%; object-fit:cover; }
.ss-slide::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(0,0,0,.62),rgba(0,0,0,.18) 45%,rgba(0,0,0,0) 70%); }
.ss-slide .chu { position:absolute; z-index:2; left:max(40px,calc((100vw - 1360px)/2)); top:50%; transform:translateY(-50%); color:#fff; max-width:520px; }
.ss-slide .chu small { font-size:14px; letter-spacing:.2em; opacity:.85; }
.ss-slide .chu h2 { font-family:var(--tieu-de); font-size:clamp(40px,4.6vw,68px); line-height:1.05; margin:12px 0 10px; }
.ss-slide .chu p { font-size:19px; opacity:.9; }
.ss-nut { display:inline-flex; align-items:center; justify-content:center; padding:12px 26px; border-radius:999px; font-size:15px; border:1px solid currentColor; }
.ss-nut.dac { background:#0A0A0A; color:#fff; border-color:#0A0A0A; } .ss-nut.trang { background:#fff; color:#0A0A0A; border-color:#fff; }
.ss-slide .chu .ss-nut { margin-top:26px; margin-right:10px; }
.ss-dk { position:absolute; z-index:5; left:50%; bottom:26px; transform:translateX(-50%); display:flex; align-items:center; gap:12px; }
.ss-dk button { border:0; cursor:pointer; background:rgba(255,255,255,.5); width:9px; height:9px; border-radius:999px; transition:width .3s, background .3s; padding:0; }
.ss-dk button.on { width:30px; background:var(--cam); }
.ss-dk .dung { width:28px; height:28px; border-radius:50%; background:rgba(0,0,0,.45); color:#fff; font-size:11px; margin-left:8px; }
.ss-muc { padding:84px 0 20px; text-align:center; }
.ss-muc h2 { font-family:var(--tieu-de); font-size:clamp(32px,3vw,44px); }
.ss-tab { display:flex; justify-content:center; gap:38px; margin-top:26px; font-size:17px; }
.ss-tab button { background:none; border:0; font:inherit; color:#777; padding:8px 0; cursor:pointer; border-bottom:2px solid transparent; }
.ss-tab button.on { color:#0A0A0A; border-bottom-color:var(--cam); }
.ss-the-luoi { display:flex; flex-wrap:wrap; justify-content:center; gap:20px; padding:28px 0 0; }
.ss-the-luoi .ss-the { width:calc((100% - 60px) / 4); }
.ss-the { background:var(--x); border-radius:26px; padding:26px 22px 28px; display:flex; flex-direction:column; align-items:center; text-align:center; }
.ss-the.an { display:none; }
.ss-the .anh { width:100%; aspect-ratio:4/3; border-radius:16px; overflow:hidden; }
.ss-the .anh img { width:100%; height:100%; object-fit:cover; transition:transform .6s; } .ss-the:hover .anh img { transform:scale(1.05); }
.ss-the h3 { font-family:var(--tieu-de); font-size:22px; margin-top:22px; }
.ss-the p { font-size:15px; color:#666; margin-top:6px; min-height:2.6em; }
.ss-the .ss-nut { margin-top:14px; padding:9px 22px; font-size:14px; }
.ss-banner { margin-top:84px; border-radius:30px; overflow:hidden; background:var(--x); display:grid; grid-template-columns:1fr 1.15fr; min-height:380px; }
.ss-banner .chu { padding:60px 64px; display:flex; flex-direction:column; justify-content:center; }
.ss-banner small { font-size:14px; letter-spacing:.2em; color:#777; }
.ss-banner h2 { font-family:var(--tieu-de); font-size:clamp(32px,3.2vw,50px); line-height:1.1; margin:12px 0; }
.ss-banner p { font-size:17px; color:#555; }
.ss-banner .nut { margin-top:26px; display:flex; gap:10px; }
.ss-banner { height:420px; } .ss-banner .anh { position:relative; overflow:hidden; } .ss-banner .anh img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.ss-bon { display:grid; grid-template-columns:repeat(4,1fr); grid-template-rows:repeat(2,250px); gap:20px; margin-top:20px; }
.ss-bon > div { border-radius:26px; overflow:hidden; position:relative; background:var(--x); padding:34px; }
.ss-bon .a { grid-column:1/3; grid-row:1/3; background:#0A0A0A; color:#fff; display:grid; grid-template-columns:1fr 1fr; gap:30px; align-items:end; }
.ss-bon .a img { width:100%; height:100%; object-fit:cover; border-radius:16px; }
.ss-bon .a h3 { font-family:var(--tieu-de); font-size:34px; line-height:1.1; } .ss-bon .a p { font-size:15px; color:#BDBDBD; margin:12px 0 22px; line-height:1.55; }
.ss-bon .b { grid-column:3/5; display:flex; flex-direction:column; justify-content:center; }
.ss-bon .b q { font-family:var(--tieu-de); font-size:26px; line-height:1.35; quotes:"\201C" "\201D"; } .ss-bon .b span { margin-top:14px; font-size:13px; letter-spacing:.16em; color:#777; }
.ss-bon .so b { font-family:var(--tieu-de); font-size:76px; line-height:1; display:block; } .ss-bon .so b em { font-style:normal; color:var(--cam); } .ss-bon .so span { font-size:15px; color:#666; }
.ss-chan { margin-top:90px; background:var(--x); font-size:13px; color:#555; line-height:2; }
.ss-chan .cot { display:grid; grid-template-columns:1.3fr repeat(4,1fr); gap:30px; padding:56px 0 36px; }
.ss-chan b { display:block; color:#0A0A0A; font-size:14px; margin-bottom:8px; } .ss-chan a { display:block; } .ss-chan a:hover { text-decoration:underline; }
.ss-chan .cum { font-size:40px; margin-bottom:16px; }
.ss-chan .duoi { border-top:1px solid #DDD; padding:18px 0 26px; display:flex; justify-content:space-between; flex-wrap:wrap; gap:16px; }
@media (max-width:900px) {
  .ss-w { padding:0 18px; } .ss-nav nav { display:none; }
  .ss-the-luoi { gap:12px; } .ss-the-luoi .ss-the { width:calc((100% - 12px) / 2); } .ss-the { border-radius:20px; padding:16px 14px 20px; }
  .ss-banner { grid-template-columns:1fr; height:auto; } .ss-banner .chu { padding:36px 26px; } .ss-banner .anh { height:240px; }
  .ss-bon { grid-template-columns:1fr 1fr; grid-template-rows:auto; } .ss-bon .a, .ss-bon .b { grid-column:1/3; grid-row:auto; } .ss-bon .a { grid-template-columns:1fr; }
  .ss-chan .cot { grid-template-columns:1fr 1fr; }
}


/* ---------- Trang con ---------- */
.ss-nav nav a.on { text-decoration:underline; text-decoration-color:var(--cam); text-decoration-thickness:2px; text-underline-offset:8px; }
.ss-dau { padding:72px 0 8px; text-align:center; }
.ss-dau small { font-size:13px; letter-spacing:.24em; color:#888; }
.ss-dau h1 { font-family:var(--tieu-de); font-size:clamp(40px,4.4vw,64px); line-height:1.08; margin-top:10px; }
.ss-dau p { font-size:18px; color:#666; margin-top:12px; }
.ss-tab { flex-wrap:wrap; }
/* Chi tiết dự án */
.ct-anh { margin-top:36px; border-radius:30px; overflow:hidden; height:min(52vw,640px); }
.ct-anh img { width:100%; height:100%; object-fit:cover; }
.ct-tt { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }
.ct-tt div { background:var(--x); border-radius:22px; padding:24px 26px; }
.ct-tt small { font-size:12px; letter-spacing:.2em; color:#888; display:block; }
.ct-tt b { font-family:var(--tieu-de); font-size:22px; display:block; margin-top:8px; }
.ct-tt b.cho { color:#9E9E9E; font-size:18px; }
.ct-mo { max-width:760px; margin:70px auto 0; text-align:center; font-size:20px; line-height:1.7; color:#444; }
.ct-mo h2 { font-family:var(--tieu-de); font-size:34px; color:#0A0A0A; margin-bottom:14px; }
.ct-bst { display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:300px; gap:16px; margin-top:44px; }
.ct-bst figure { border-radius:22px; overflow:hidden; position:relative; } .ct-bst figure.rong { grid-column:span 2; } .ct-bst figure.cao { grid-row:span 2; }
.ct-bst img { width:100%; height:100%; object-fit:cover; transition:transform .6s; } .ct-bst figure:hover img { transform:scale(1.04); }
.ct-bst figcaption { position:absolute; left:16px; bottom:14px; background:rgba(10,10,10,.6); color:#fff; font-size:12px; letter-spacing:.1em; padding:6px 12px; border-radius:999px; }
.ct-dieu-huong { display:flex; justify-content:space-between; margin-top:44px; font-size:15px; }
.ct-dieu-huong a { display:inline-flex; align-items:center; gap:10px; } .ct-dieu-huong a:hover { text-decoration:underline; }
/* Về chúng tôi */
.ve-dau { display:grid; grid-template-columns:1fr 1fr; gap:20px; margin-top:36px; }
.ve-dau .anh { border-radius:30px; overflow:hidden; height:560px; } .ve-dau .anh img { width:100%; height:100%; object-fit:cover; }
.ve-dau .chu { background:#0A0A0A; color:#fff; border-radius:30px; padding:56px; display:flex; flex-direction:column; justify-content:flex-end; }
.ve-dau .chu small { font-size:13px; letter-spacing:.24em; color:var(--cam); }
.ve-dau .chu h2 { font-family:var(--tieu-de); font-size:clamp(32px,3vw,46px); line-height:1.15; margin:14px 0 18px; }
.ve-dau .chu p { font-size:17px; line-height:1.7; color:#BDBDBD; }
.qt { display:grid; grid-template-columns:repeat(5,1fr); gap:16px; margin-top:36px; }
.qt div { background:var(--x); border-radius:22px; padding:28px 24px 30px; }
.qt i { font-style:normal; font-family:var(--tieu-de); font-size:40px; display:block; } .qt i em { font-style:normal; color:var(--cam); }
.qt b { font-family:var(--tieu-de); font-size:20px; display:block; margin-top:18px; } .qt p { font-size:14px; color:#666; margin-top:8px; line-height:1.6; }
.so4 { display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:20px; }
.so4 div { background:var(--x); border-radius:22px; padding:34px; }
.so4 b { font-family:var(--tieu-de); font-size:72px; line-height:1; display:block; } .so4 b em { font-style:normal; color:var(--cam); } .so4 span { font-size:15px; color:#666; }
/* Liên hệ */
.lh3 { display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:36px; }
.lh3 a, .lh3 div { background:var(--x); border-radius:26px; padding:38px 34px; display:block; transition:transform .25s; }
.lh3 a:hover { transform:translateY(-4px); }
.lh3 small { font-size:12px; letter-spacing:.2em; color:#888; } .lh3 b { font-family:var(--tieu-de); font-size:28px; display:block; margin:12px 0 18px; word-break:break-word; }
.lh3 .toi { background:#0A0A0A; color:#fff; } .lh3 .toi small { color:var(--cam); }
.ban-do { margin-top:20px; display:grid; grid-template-columns:1fr 2fr; gap:20px; }
.ban-do .chu { background:var(--x); border-radius:26px; padding:40px; font-size:16px; line-height:1.8; color:#444; }
.ban-do .chu h3 { font-family:var(--tieu-de); font-size:28px; color:#0A0A0A; margin-bottom:14px; }
.ban-do iframe { width:100%; height:440px; border:0; border-radius:26px; background:var(--x); }
@media (max-width:900px) {
  .ct-tt, .so4 { grid-template-columns:1fr 1fr; } .ct-bst { grid-template-columns:1fr 1fr; grid-auto-rows:200px; } .ct-bst figure.rong { grid-column:span 2; }
  .ve-dau, .ban-do { grid-template-columns:1fr; } .ve-dau .anh { height:420px; } .ve-dau .chu { padding:34px; }
  .qt { grid-template-columns:1fr 1fr; } .lh3 { grid-template-columns:1fr; }
}.ss-the a.anh { display:block; }
.ct-bst { grid-auto-flow:dense; }
.khung-bd { position:relative; border-radius:26px; overflow:hidden; background:var(--x); }
.khung-bd::before { content:"Bản đồ Google · Long Thành – Nhơn Trạch (hiện khi có mạng)"; position:absolute; inset:0; display:grid; place-items:center; color:#999; font-size:15px; }
.khung-bd iframe { position:relative; background:transparent; }
/* Không bao giờ kéo dãn ảnh: ảnh nào bị ép khung đều cắt khung, giữ tỉ lệ gốc */
img { object-fit:cover; } .ct-bst figure img { position:absolute; inset:0; }