/* ========================================================================== Golden Lodge — bản xem trước giao diện WordPress Giữ nguyên bố cục site cũ (goldenlodge.com.vn), làm nét và gọn lại. Một giao diện sáng duy nhất theo nhận diện thương hiệu — sơn nền rõ ràng. ========================================================================== */ :root{ --navy:#13283A; /* topbar, footer — từ #1a2e3c của site cũ */ --navy-2:#0C1C2A; --blue:#0E4274; /* dải tìm kiếm */ --blue-2:#1B5A96; --gold:#E9B90F; /* nút tìm kiếm, điểm nhấn logo */ --gold-2:#D4A600; --on-gold:#1A1404; --ink:#1C2733; --muted:#5D6B79; --line:#DFE5EB; --ground:#F3F5F7; --surface:#FFFFFF; --soft:#EBF0F5; --ok:#1E7B4F; --shadow:19 40 58; --r:6px; --wrap:1180px; --display:"Montserrat", "Segoe UI", Arial, sans-serif; --body:"Open Sans", "Segoe UI", Arial, sans-serif; color-scheme:light; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{margin:0; background:var(--ground); color:var(--ink); font:15px/1.6 var(--body); -webkit-font-smoothing:antialiased} img{max-width:100%; display:block} a{color:inherit; text-decoration:none} button,input,select,textarea{font:inherit; color:inherit} button{cursor:pointer} h1,h2,h3,h4{font-family:var(--display); line-height:1.25; margin:0; text-wrap:balance} :focus-visible{outline:2px solid var(--gold); outline-offset:2px} .wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:20px} .sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap} svg.i{width:1em; height:1em; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none} @media (prefers-reduced-motion:reduce){*{transition:none!important; animation:none!important; scroll-behavior:auto!important}} /* ---------- Topbar ---------- */ .topbar{background:var(--navy); color:#C8D3DD; font-size:12.5px} .topbar .wrap{display:flex; justify-content:space-between; align-items:center; gap:12px; min-height:36px; flex-wrap:wrap} .topbar .contact, .topbar .links{display:flex; align-items:center; gap:16px; flex-wrap:wrap} .topbar a{display:inline-flex; align-items:center; gap:6px} .topbar a:hover{color:#fff} .topbar .sl{background:rgb(255 255 255/.08); padding:3px 10px; border-radius:20px; color:#fff} .topbar .sl b{background:var(--gold); color:var(--on-gold); border-radius:10px; padding:0 7px; font-size:11px; min-width:20px; text-align:center} .lang{display:inline-flex; border:1px solid rgb(255 255 255/.18); border-radius:4px; overflow:hidden} .lang a{padding:2px 8px; font-weight:600; font-size:11.5px} .lang a[aria-current]{background:rgb(255 255 255/.14); color:#fff} /* ---------- Header / menu ---------- */ .header{background:var(--surface); border-bottom:1px solid var(--line); position:relative; z-index:40} .header .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:78px} .logo img{height:46px; width:auto; max-width:240px; object-fit:contain; object-position:left center} /* logo đổi trong admin: chặn logo quá dài đẩy lệch menu */ .menu{display:flex; align-items:stretch; list-style:none; margin:0; padding:0} .menu > li{position:relative} .menu > li > a{display:flex; align-items:center; gap:5px; height:78px; padding:0 10px; white-space:nowrap; font:600 12px/1 var(--display); letter-spacing:.03em; text-transform:uppercase; color:var(--ink); border-bottom:3px solid transparent; transition:color .15s, border-color .15s} .menu > li > a:hover, .menu > li:focus-within > a{color:var(--blue)} .menu > li > a.on{border-bottom-color:var(--gold); color:var(--blue)} .menu .chev{font-size:9px; opacity:.55} .sub{position:absolute; top:100%; left:0; min-width:250px; background:var(--surface); border:1px solid var(--line); border-top:3px solid var(--gold); box-shadow:0 14px 30px rgb(var(--shadow)/.16); list-style:none; margin:0; padding:6px 0; opacity:0; visibility:hidden; transform:translateY(6px); transition:.16s} .menu > li:hover .sub, .menu > li:focus-within .sub{opacity:1; visibility:visible; transform:none} .sub a{display:flex; justify-content:space-between; gap:14px; padding:8px 16px; font-size:13.5px} .sub a:hover{background:var(--soft); color:var(--blue)} .sub small{color:var(--muted); font-variant-numeric:tabular-nums} .burger{display:none; background:none; border:1px solid var(--line); border-radius:var(--r); padding:8px 10px; font-size:20px} /* ---------- Breadcrumb ---------- */ .crumb{background:var(--navy-2); color:#AFBDCA; font-size:13px} .crumb .wrap{padding-block:9px; display:flex; flex-wrap:wrap; gap:6px} .crumb a{color:#fff} .crumb a:hover{color:var(--gold)} .crumb span[aria-hidden]{opacity:.5} /* ---------- Banner ---------- */ .hero{position:relative; background:var(--navy) center/cover no-repeat; color:#fff; overflow:hidden} .hero::after{content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgb(12 28 42/.25), rgb(12 28 42/.05) 40%, rgb(14 66 116/.55))} .hero .wrap{position:relative; z-index:1; min-height:400px; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding-block:40px} .hero.short .wrap{min-height:210px} .hero .slogan{font:700 clamp(28px, 4.2vw, 46px)/1.15 var(--display); text-shadow:0 2px 18px rgb(0 0 0/.35); transition:opacity .45s} .hero .kicker{font:600 12px/1 var(--display); letter-spacing:.22em; text-transform:uppercase; color:#fff; background:rgb(12 28 42/.55); padding:7px 12px; border-radius:3px; margin-bottom:14px} .hero .dots{display:flex; gap:8px; margin-top:18px} .hero .dots button{width:9px; height:9px; border-radius:50%; border:0; padding:0; background:rgb(255 255 255/.45)} .hero .dots button[aria-current]{background:var(--gold); width:24px; border-radius:5px} /* ---------- Dải tìm kiếm ---------- */ .search{background:var(--blue); color:#fff} .search .wrap{padding-block:22px 26px} .search h2{font:600 13px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; margin-bottom:14px; display:flex; align-items:center; gap:8px} .sgrid{display:grid; grid-template-columns:repeat(4, 1fr); gap:12px} .sgrid .kw{grid-column:span 1} .field label{display:block; font-size:11.5px; font-weight:600; letter-spacing:.04em; color:#BFD3E6; margin-bottom:5px} .input{width:100%; height:42px; padding:0 12px; border-radius:var(--r); border:1px solid transparent; background:#fff; color:var(--ink); font-size:14px} .input::placeholder{color:#8C98A4} .input:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgb(233 185 15/.3)} .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; height:42px; padding:0 20px; border:0; border-radius:var(--r); font:700 13px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; transition:background .15s, transform .1s} .btn:active{transform:translateY(1px)} .btn-gold{background:var(--gold); color:var(--on-gold)} .btn-gold:hover{background:var(--gold-2)} .btn-blue{background:var(--blue); color:#fff} .btn-blue:hover{background:var(--blue-2)} .btn-line{background:var(--surface); border:1px solid var(--line); color:var(--ink)} .btn-line:hover{border-color:var(--blue); color:var(--blue)} .sgrid .btn{align-self:end; width:100%} /* ---------- Combo box ---------- */ .cbx{position:relative} .cbx > select{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .cbx-btn{width:100%; height:42px; text-align:left; padding:0 36px 0 12px; border-radius:var(--r); border:1px solid var(--line); background:var(--surface); color:var(--ink); font-size:14px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:border-color .16s, box-shadow .16s} .search .cbx-btn{border-color:transparent} .cbx-btn::after{content:""; position:absolute; right:15px; top:50%; width:7px; height:7px; margin-top:-5px; border-right:1.8px solid var(--muted); border-bottom:1.8px solid var(--muted); transform:rotate(45deg); transition:transform .18s, margin-top .18s} .cbx.is-open .cbx-btn::after{transform:rotate(225deg); margin-top:-1px} .cbx-btn.placeholder{color:#7D8995} .cbx.is-open .cbx-btn, .cbx-btn:focus-visible{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgb(233 185 15/.3)} .cbx-panel{position:absolute; z-index:60; left:0; right:0; top:calc(100% + 6px); min-width:230px; padding:8px; background:var(--surface); color:var(--ink); border:1px solid var(--line); border-radius:10px; box-shadow:0 18px 44px rgb(var(--shadow)/.24)} .cbx-panel[hidden]{display:none} .cbx-search{width:100%; padding:8px 11px; margin-bottom:6px; border-radius:7px; border:1px solid var(--line); background:var(--ground); font-size:13.5px} .cbx-search:focus{outline:none; border-color:var(--blue); background:#fff} .cbx-list{max-height:260px; overflow-y:auto; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--line) transparent} .cbx-group{font:700 10.5px/1 var(--display); letter-spacing:.1em; text-transform:uppercase; color:var(--muted); padding:10px 10px 6px} .cbx-group[hidden], .cbx-opt[hidden], .cbx-empty[hidden]{display:none} .cbx-opt{display:flex; justify-content:space-between; gap:10px; padding:8px 10px; border-radius:6px; font-size:14px; line-height:1.35; cursor:pointer} .cbx-opt .n{color:var(--muted); font-size:12.5px; font-variant-numeric:tabular-nums} .cbx-opt:hover, .cbx-opt.is-active{background:var(--soft)} .cbx-opt[aria-selected="true"]{background:var(--blue); color:#fff; font-weight:600} .cbx-opt[aria-selected="true"] .n{color:#CFE0F0} .cbx-empty{padding:12px; font-size:13.5px; color:var(--muted); text-align:center} /* ---------- Khối nội dung chung ---------- */ main{padding-block:34px 56px} .sec + .sec{margin-top:44px} .sec-head{display:flex; align-items:end; justify-content:space-between; gap:12px 20px; flex-wrap:wrap; padding-bottom:12px; margin-bottom:22px; border-bottom:1px solid var(--line)} .sec-head h1, .sec-head h2{font-size:22px; font-weight:600; color:var(--navy); position:relative} .sec-head h1::after, .sec-head h2::after{content:""; position:absolute; left:0; bottom:-13px; width:56px; height:3px; background:var(--gold)} .sec-head .meta{color:var(--muted); font-size:13.5px} .more{color:var(--blue); font-weight:600; font-size:13.5px; display:inline-flex; align-items:center; gap:4px} .more:hover{text-decoration:underline} .intro{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px 26px 14px} .intro h2{font-size:15px; letter-spacing:.06em; text-transform:uppercase; color:var(--blue); text-align:center; margin-bottom:12px} .intro .body{max-width:none; color:#3B4754; font-size:14.5px; overflow:hidden; position:relative; max-height:118px; transition:max-height .5s ease} .intro .body::after{content:""; position:absolute; left:0; right:0; bottom:0; height:56px; background:linear-gradient(rgb(255 255 255/0), #fff)} .intro.open .body{max-height:900px} .intro.open .body::after{display:none} .intro p{margin:0 0 10px} .intro a{color:var(--blue); font-weight:600} .readmore{display:flex; margin:8px auto 0; background:none; border:0; color:var(--blue); font-weight:600; font-size:13px; gap:6px; align-items:center; padding:6px} /* ---------- Thẻ bất động sản ---------- */ .grid{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px} .card{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:flex; flex-direction:column; transition:box-shadow .2s, transform .2s} .card:hover{box-shadow:0 14px 34px rgb(var(--shadow)/.14); transform:translateY(-2px)} /* Ảnh tin 3:2 như ảnh gốc (97% ảnh là 3:2) và contain: không cắt mất phần nào của ảnh */ .card .ph{position:relative; aspect-ratio:3/2; background:var(--soft); overflow:hidden} .card .ph img{width:100%; height:100%; object-fit:contain; transition:transform .5s} /* bỏ hiệu ứng phóng ảnh khi rê chuột — phóng lên là mép ảnh bị cắt */ .tag{position:absolute; left:12px; top:12px; background:rgb(19 40 58/.86); color:#fff; font:600 11px/1 var(--display); letter-spacing:.06em; text-transform:uppercase; padding:6px 9px; border-radius:3px} .tag.rented{background:#B3261E} .id{position:absolute; left:12px; bottom:12px; background:rgb(255 255 255/.92); color:var(--navy); font-size:11.5px; font-weight:700; padding:3px 8px; border-radius:3px; font-variant-numeric:tabular-nums} .fav{position:absolute; right:10px; top:10px; width:36px; height:36px; border-radius:50%; border:0; background:rgb(255 255 255/.94); color:var(--navy); display:grid; place-items:center; font-size:17px; box-shadow:0 2px 8px rgb(0 0 0/.15)} .fav:hover{color:#C62828} .fav[aria-pressed="true"]{background:#C62828; color:#fff} .fav[aria-pressed="true"] svg{fill:currentColor} .card .bd{padding:14px 16px 16px; display:flex; flex-direction:column; gap:8px; flex:1} .row1{display:flex; justify-content:space-between; align-items:center; gap:10px; flex-wrap:wrap} .price{font:700 19px/1 var(--display); color:var(--blue); font-variant-numeric:tabular-nums} .price small{font:400 12.5px/1 var(--body); color:var(--muted)} .specs{display:flex; gap:12px; color:var(--muted); font-size:13px; font-variant-numeric:tabular-nums} .specs span{display:inline-flex; align-items:center; gap:5px} .specs svg{font-size:16px; color:var(--navy)} .card h3{font:600 14.5px/1.45 var(--body); color:var(--ink); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .card:hover h3{color:var(--blue)} .card .loc{font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:5px; margin-top:auto; padding-top:8px; border-top:1px dashed var(--line)} /* Tin tức */ .news .card h3{font-size:15px} .news .date{font-size:12px; color:var(--muted); text-transform:uppercase; letter-spacing:.06em} /* Thanh công cụ danh mục */ .toolbar{display:flex; align-items:center; gap:10px} .toolbar label{font-size:13px; color:var(--muted); white-space:nowrap} .toolbar .cbx{width:210px} .toolbar .cbx-btn{height:36px; font-size:13.5px} .subcats{display:flex; flex-wrap:wrap; gap:8px; margin:-6px 0 22px} .chip{display:inline-flex; gap:6px; align-items:center; padding:6px 13px; border-radius:20px; background:var(--surface); border:1px solid var(--line); font-size:13px} .chip small{color:var(--muted); font-variant-numeric:tabular-nums} .chip:hover{border-color:var(--blue); color:var(--blue)} .chip[aria-current]{background:var(--navy); border-color:var(--navy); color:#fff} .chip[aria-current] small{color:#AFC0CF} .pager{display:flex; justify-content:center; gap:6px; margin-top:34px} .pager a{min-width:38px; height:38px; display:grid; place-items:center; padding:0 10px; border:1px solid var(--line); background:var(--surface); border-radius:var(--r); font-weight:600; font-size:14px} .pager a:hover{border-color:var(--blue); color:var(--blue)} .pager a[aria-current]{background:var(--blue); border-color:var(--blue); color:#fff} /* ---------- Trang chi tiết ---------- */ .dhead{background:var(--blue); color:#fff} .dhead .wrap{display:flex; justify-content:space-between; align-items:center; gap:14px 30px; flex-wrap:wrap; padding-block:18px} .dhead h1{font-size:clamp(20px, 2.4vw, 27px); font-weight:700} .dhead .sub1{display:flex; gap:14px; margin-top:6px; color:#BFD3E6; font-size:13.5px; flex-wrap:wrap} .dhead .sub1 span{display:inline-flex; align-items:center; gap:5px} .dprice{text-align:right} .dprice .lab{font-size:12px; color:#BFD3E6; text-transform:uppercase; letter-spacing:.08em} .dprice .v{font:700 30px/1.1 var(--display); color:var(--gold); font-variant-numeric:tabular-nums} .dprice .v small{font:400 14px var(--body); color:#fff} .dgrid{display:grid; grid-template-columns:minmax(0, 1fr) 330px; gap:28px; align-items:start} .panel{background:var(--surface); border:1px solid var(--line); border-radius:var(--r)} .dtabs{display:flex; justify-content:space-between; align-items:center; gap:10px; border-bottom:1px solid var(--line); padding:0 12px 0 0; flex-wrap:wrap} .dtabs [role=tablist]{display:flex} .dtabs [role=tab]{background:none; border:0; border-bottom:3px solid transparent; padding:14px 18px 11px; font:600 13px/1 var(--display); letter-spacing:.04em; text-transform:uppercase; color:var(--muted)} .dtabs [role=tab][aria-selected="true"]{color:var(--blue); border-bottom-color:var(--gold)} .shortbtn{height:34px; padding:0 14px; font-size:12px} .shortbtn[aria-pressed="true"]{background:#C62828; color:#fff} .gal{padding:12px} .gal .main{position:relative; aspect-ratio:3/2; background:var(--navy); border-radius:4px; overflow:hidden} .gal .main img{width:100%; height:100%; object-fit:contain} .gal .nav{position:absolute; top:50%; transform:translateY(-50%); width:42px; height:42px; border-radius:50%; border:0; background:rgb(255 255 255/.9); color:var(--navy); font-size:20px; display:grid; place-items:center} .gal .nav.p{left:12px} .gal .nav.n{right:12px} .gal .count{position:absolute; right:12px; bottom:12px; background:rgb(12 28 42/.78); color:#fff; font-size:12.5px; padding:4px 10px; border-radius:3px; font-variant-numeric:tabular-nums} .thumbs{display:grid; grid-template-columns:repeat(8, 1fr); gap:6px; margin-top:8px} .thumbs button{padding:0; border:2px solid transparent; border-radius:4px; overflow:hidden; aspect-ratio:3/2; background:var(--navy); opacity:.7} .thumbs button img{width:100%; height:100%; object-fit:contain} .thumbs button[aria-current]{border-color:var(--gold); opacity:1} .thumbs button:hover{opacity:1} .thumbs .plus{background:var(--navy); color:#fff; font-weight:700; font-size:13px; opacity:1} .mapph{aspect-ratio:3/2; border-radius:4px; background: linear-gradient(90deg, rgb(14 66 116/.06) 1px, transparent 1px) 0 0/34px 34px, linear-gradient(rgb(14 66 116/.06) 1px, transparent 1px) 0 0/34px 34px, #E4ECF2; display:grid; place-items:center; text-align:center; color:var(--muted); position:relative; overflow:hidden} .mapph::before{content:""; position:absolute; width:62%; height:40%; left:-8%; top:-6%; border-radius:50%; background:#BFD5E6} .mapph div{position:relative} .mapph .pin{font-size:40px; color:#C62828} .panel-bd{padding:20px 22px} .panel h2{font-size:17px; font-weight:600; color:var(--navy); margin-bottom:14px} .info{display:grid; grid-template-columns:1fr 1fr; margin:0; border-top:1px solid var(--line)} .info div{display:flex; justify-content:space-between; gap:10px; padding:10px 4px; border-bottom:1px solid var(--line); font-size:14px} .info div:nth-child(odd){padding-right:18px} .info div:nth-child(even){padding-left:18px; border-left:1px solid var(--line)} .info dt{color:var(--muted)} .info dd{margin:0; font-weight:600; text-align:right; font-variant-numeric:tabular-nums} .ams{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px 18px; list-style:none; padding:0; margin:0; font-size:14px} .ams li{display:flex; gap:8px; align-items:center} .ams li svg{color:var(--ok)} .ams li.no{color:#9BA5AF; text-decoration:line-through} .ams li.no svg{color:#B7C0C8} .desc p{margin:0 0 12px; color:#34404D; max-width:72ch} .stack{display:grid; gap:20px} .side{display:grid; gap:16px; position:sticky; top:16px} .agent{display:flex; gap:14px; align-items:center} .agent img{width:78px; height:78px; border-radius:50%; object-fit:cover; border:3px solid var(--soft)} .agent b{font:600 16px/1.2 var(--display); color:var(--navy)} .agent .role{font-size:12.5px; color:var(--muted); margin:2px 0 6px} .agent a{display:flex; align-items:center; gap:6px; font-size:13.5px; color:var(--blue); font-weight:600} .qc{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:14px} .qc .btn{height:38px; font-size:12px; padding:0 8px} .wa{background:#1FA855; color:#fff} .acc{border-top:1px solid var(--line)} .acc > button{width:100%; display:flex; justify-content:space-between; align-items:center; background:var(--navy); color:#fff; border:0; padding:12px 16px; font:600 13px/1 var(--display); letter-spacing:.04em; text-transform:uppercase} .acc > button[aria-expanded="true"]{background:var(--blue)} .acc > button .chev{transition:transform .2s} .acc > button[aria-expanded="true"] .chev{transform:rotate(180deg)} .form{display:grid; gap:11px; padding:16px} .form .input, .form textarea{border:1px solid var(--line); background:var(--surface)} .form textarea{width:100%; min-height:88px; padding:10px 12px; border-radius:var(--r); resize:vertical; font-size:14px} .form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgb(233 185 15/.3)} .form .two{display:grid; grid-template-columns:1fr 1fr; gap:10px} .form .lab{font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:4px; display:block} .form .req{color:#C62828} .seg{display:flex; border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .seg label{flex:1; text-align:center; font-size:13px; padding:8px 4px; cursor:pointer; border-left:1px solid var(--line)} .seg label:first-child{border-left:0} .seg input{position:absolute; opacity:0; pointer-events:none} .seg input:checked + span{color:var(--blue); font-weight:700} .seg label:has(input:checked){background:var(--soft)} .chk{display:flex; gap:8px; align-items:center; font-size:13px; color:var(--muted)} .note-ok{display:none; background:#E6F4EC; color:var(--ok); border-radius:var(--r); padding:10px 12px; font-size:13.5px} .form.sent .note-ok{display:block} .share{display:flex; gap:8px} .share a{width:36px; height:36px; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 13px/1 var(--display)} .guide{display:flex; gap:12px; align-items:center} .guide img{width:84px; height:64px; object-fit:cover; border-radius:4px} .guide b{font-size:14px; line-height:1.35; display:block} .guide:hover b{color:var(--blue)} /* ---------- Toà nhà ---------- */ .bcard .ph{aspect-ratio:16/10} .bcard .bd{gap:6px} .bcard .cnt{display:flex; justify-content:space-between; font-size:13px; color:var(--muted); padding-top:10px; margin-top:auto; border-top:1px dashed var(--line)} .bcard .cnt b{color:var(--blue)} /* ---------- Shortlist / gửi yêu cầu ---------- */ .eq{display:grid; grid-template-columns:minmax(0, 1fr) 400px; gap:28px; align-items:start} .slist{list-style:none; margin:0; padding:0} .slist li{display:grid; grid-template-columns:120px minmax(0, 1fr) auto; gap:16px; align-items:center; padding:14px 18px; border-bottom:1px solid var(--line)} .slist li:last-child{border-bottom:0} .slist img{width:120px; height:84px; object-fit:cover; border-radius:4px} .slist b{font-size:14.5px; line-height:1.4; display:block} .slist .specs{margin-top:6px} .slist .rm{background:none; border:1px solid var(--line); border-radius:var(--r); color:var(--muted); padding:6px 10px; font-size:12.5px} .slist .rm:hover{border-color:#C62828; color:#C62828} .empty{padding:40px 20px; text-align:center; color:var(--muted)} /* ---------- Footer ---------- */ .footer{background:var(--navy); color:#AFBDCA; font-size:13.5px} .footer .wrap{display:grid; grid-template-columns:1fr 1.5fr 1.3fr 1fr; gap:30px; padding-block:42px 30px} .footer h4{font:600 12.5px/1 var(--display); letter-spacing:.12em; text-transform:uppercase; color:#fff; margin-bottom:16px} .footer ul{list-style:none; margin:0; padding:0; display:grid; gap:9px} .footer a:hover{color:var(--gold)} .flatest li a{display:grid; grid-template-columns:64px 1fr; gap:10px; align-items:center; line-height:1.4} .flatest img{width:64px; height:46px; object-fit:cover; border-radius:3px} .fco li{display:flex; gap:9px} .fco svg{margin-top:4px; color:var(--gold)} .fsoc{display:flex; flex-wrap:wrap; gap:8px} .fsoc a{width:36px; height:36px; border-radius:50%; background:rgb(255 255 255/.08); display:grid; place-items:center; color:#fff; font:700 12px/1 var(--display)} .fsoc a:hover{background:var(--gold); color:var(--on-gold)} .copy{border-top:1px solid rgb(255 255 255/.08); text-align:center; padding:14px 16px; font-size:12.5px} /* Nút nổi */ .float{position:fixed; right:18px; bottom:18px; z-index:70; display:flex; flex-direction:column; align-items:flex-end; gap:12px} .float .up{width:40px; height:40px; margin-right:8px; border-radius:50%; border:0; display:grid; place-items:center; background:rgb(19 40 58/.85); color:#fff; font-size:18px; box-shadow:0 4px 12px rgb(0 0 0/.2)} .float .up[hidden]{display:none} .fab{width:58px; height:58px; border-radius:50%; border:0; display:grid; place-items:center; background:var(--gold); color:var(--on-gold); font-size:24px; box-shadow:0 8px 22px rgb(var(--shadow)/.35); position:relative; transition:background .15s, transform .2s} .fab::before{content:""; position:absolute; inset:0; border-radius:50%; box-shadow:0 0 0 0 rgb(233 185 15/.55); animation:ping 2.6s ease-out infinite} .fab[aria-expanded="true"]{background:var(--navy); color:#fff} .fab[aria-expanded="true"]::before{animation:none} .fab .ic-close{display:none} .fab[aria-expanded="true"] .ic-open{display:none} .fab[aria-expanded="true"] .ic-close{display:block} @keyframes ping{0%{box-shadow:0 0 0 0 rgb(233 185 15/.55)} 70%,100%{box-shadow:0 0 0 16px rgb(233 185 15/0)}} .dial{display:flex; flex-direction:column; align-items:flex-end; gap:10px; margin-right:5px} .dial[hidden]{display:none} .dial-item{display:flex; align-items:center; gap:10px; background:none; border:0; padding:0; animation:pop .18s ease-out both} .dial-item:nth-child(2){animation-delay:.03s} .dial-item:nth-child(3){animation-delay:.06s} .dial-item:nth-child(4){animation-delay:.09s} .dial-item span{background:var(--surface); color:var(--ink); font-size:13.5px; font-weight:600; padding:7px 12px; border-radius:6px; box-shadow:0 4px 14px rgb(var(--shadow)/.18); white-space:nowrap} .dial-item i{width:46px; height:46px; border-radius:50%; display:grid; place-items:center; color:#fff; font:700 17px/1 var(--display); font-style:normal; font-size:19px; box-shadow:0 4px 14px rgb(0 0 0/.2)} .dial-item.primary i{background:var(--blue)} .dial-item.primary span{background:var(--blue); color:#fff} .c-call{background:var(--navy)} .c-wa{background:#1FA855} .c-zalo{background:#0068FF} .dial-item:hover span{color:var(--blue)} .dial-item.primary:hover span{color:#fff; background:var(--blue-2)} @keyframes pop{from{opacity:0; transform:translateY(8px) scale(.96)} to{opacity:1; transform:none}} /* Popup gửi tin nhanh */ .qm{position:fixed; inset:0; z-index:90} .qm[hidden]{display:none} .qm-backdrop{position:absolute; inset:0; background:rgb(12 28 42/.45)} .qm-box{position:absolute; right:18px; bottom:18px; width:min(400px, calc(100vw - 32px)); max-height:calc(100vh - 36px); overflow:auto; background:var(--surface); border-radius:12px; box-shadow:0 24px 60px rgb(0 0 0/.35); animation:pop .2s ease-out} .qm-head{display:flex; align-items:center; gap:12px; background:var(--navy); color:#fff; padding:14px 14px 14px 16px; border-radius:12px 12px 0 0; position:sticky; top:0; z-index:1} .qm-head img{width:44px; height:44px; border-radius:50%; object-fit:cover; border:2px solid var(--gold)} .qm-head b{display:block; font:600 15px/1.3 var(--display)} .qm-head small{color:#AFBDCA; font-size:12px} .qm-x{margin-left:auto; background:rgb(255 255 255/.1); border:0; color:#fff; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-size:16px} .qm-x:hover{background:rgb(255 255 255/.2)} .qm-form{display:grid; gap:12px; padding:16px} .qm-form .input, .qm-form textarea{border:1px solid var(--line)} .qm-form textarea{width:100%; padding:10px 12px; border-radius:var(--r); resize:vertical; font-size:14px} .qm-form textarea:focus{outline:none; border-color:var(--gold); box-shadow:0 0 0 3px rgb(233 185 15/.3)} .qm-form .two{display:grid; grid-template-columns:1fr 1fr; gap:10px} .qm-form .lab{font-size:12.5px; color:var(--muted); font-weight:600; margin-bottom:4px; display:block} .qm-form .req{color:#C62828} .qm-about{display:grid; grid-template-columns:64px 1fr auto; gap:10px; align-items:center; background:var(--soft); border-radius:8px; padding:8px} .qm-about[hidden]{display:none} .qm-about img{width:64px; height:48px; object-fit:cover; border-radius:4px} .qm-about small{display:block; font-size:10.5px; text-transform:uppercase; letter-spacing:.08em; color:var(--muted)} .qm-about b{display:block; font-size:13px; line-height:1.3; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden} .qm-about span{font-size:12.5px; color:var(--blue); font-weight:600; font-variant-numeric:tabular-nums} .qm-about button{background:none; border:0; color:var(--muted); width:28px; height:28px; border-radius:50%; display:grid; place-items:center} .qm-about button:hover{background:#fff; color:#C62828} .qm-chips{display:flex; flex-wrap:wrap; gap:6px} .qchip{background:var(--surface); border:1px solid var(--line); border-radius:16px; padding:5px 11px; font-size:12.5px; color:var(--ink)} .qchip:hover, .qchip[aria-pressed="true"]{border-color:var(--blue); color:var(--blue); background:var(--soft)} .qm-fine{margin:0; text-align:center; font-size:12px; color:var(--muted)} .qm-done{padding:30px 22px 26px; text-align:center; display:grid; justify-items:center; gap:8px} .qm-done[hidden]{display:none} .qm-done b{font:600 18px/1.2 var(--display); color:var(--navy)} .qm-done p{margin:0 0 8px; color:var(--muted); font-size:14px} .qm-tick{width:56px; height:56px; border-radius:50%; background:#E6F4EC; color:var(--ok); display:grid; place-items:center; font-size:28px} @media (max-width:600px){ .qm-box{right:0; left:0; bottom:0; width:100%; border-radius:14px 14px 0 0; max-height:92vh} .qm-head{border-radius:14px 14px 0 0} .qm-form .two{grid-template-columns:1fr} .float{right:14px; bottom:14px} } /* ---------- Responsive ---------- */ @media (max-width:1080px){ .menu > li > a{padding:0 6px; font-size:11px; letter-spacing:0} .dgrid, .eq{grid-template-columns:1fr} .side{position:static; grid-template-columns:1fr 1fr} } @media (max-width:900px){ .burger{display:block} .menu{display:none; position:absolute; left:0; right:0; top:100%; background:var(--surface); flex-direction:column; border-top:1px solid var(--line); box-shadow:0 18px 30px rgb(var(--shadow)/.15); padding-block:6px} .menu.open{display:flex} .menu > li > a{height:auto; padding:12px 20px; font-size:13px; border-bottom:0} .sub{position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:0 0 6px 14px; display:none} .menu > li:focus-within .sub, .menu > li.open .sub{display:block} .sgrid{grid-template-columns:1fr 1fr} .grid{grid-template-columns:1fr 1fr; gap:16px} .footer .wrap{grid-template-columns:1fr 1fr} .ams{grid-template-columns:1fr 1fr} .topbar .email{display:none} } @media (max-width:600px){ .wrap{padding-inline:16px} .hero .wrap{min-height:250px} .hero.short .wrap{min-height:140px} .grid, .footer .wrap, .side{grid-template-columns:1fr} .info{grid-template-columns:1fr} .info div:nth-child(even){padding-left:4px; border-left:0} .info div:nth-child(odd){padding-right:4px} .thumbs{grid-template-columns:repeat(5, 1fr)} .thumbs button:nth-child(n+5):not(.plus){display:none} .dprice{text-align:left} .slist li{grid-template-columns:90px 1fr} .slist img{width:90px; height:66px} .slist .rm{grid-column:2; justify-self:start} .topbar .links .hide-s{display:none} .toolbar .cbx{width:170px} .form .two{grid-template-columns:1fr} } /* ========================================================================== Bổ sung cho bản WordPress (không có trong mockup) ========================================================================== */ /* Ô bẫy chống spam — ẩn với người thật, KHÔNG dùng display:none để bot vẫn thấy */ .gl-hp{position:absolute!important; left:-10000px; width:1px; height:1px; overflow:hidden} .noimg{position:absolute; inset:0; display:grid; place-items:center; color:var(--muted); font-size:13px; background:var(--soft)} /* Nội dung soạn từ hệ thống cũ: nhiều style inline (font-size 14px, màu chữ) — chuẩn hoá về cỡ chữ của site, giữ màu nhấn tiêu đề người soạn đã chọn. */ .prose{color:#34404D; font-size:15px; line-height:1.7; overflow-wrap:anywhere} .prose > *:first-child{margin-top:0} .prose p, .prose div{margin:0 0 12px} .prose span[style*="font-size"]{font-size:inherit!important} .prose h2, .prose h3, .prose h4{color:var(--navy); margin:22px 0 10px; font-size:18px} .prose h2 span, .prose h3 span{font-size:inherit!important} .prose a{color:var(--blue); font-weight:600} .prose a:hover{text-decoration:underline} .prose img{height:auto; border-radius:4px; margin:10px 0} .prose ul, .prose ol{padding-left:22px; margin:0 0 12px} .prose table{border-collapse:collapse; width:100%; margin:10px 0; display:block; overflow-x:auto} .prose td, .prose th{border:1px solid var(--line); padding:6px 10px} .prose iframe{max-width:100%} .intro .body.prose{font-size:14.5px} .intro.short .body{max-height:none} .intro.short .body::after, .intro.short .readmore{display:none} /* Thông báo sau khi gửi form (không JavaScript) */ .alert{border-radius:var(--r); padding:12px 14px; font-size:14px; margin-bottom:14px} .alert.ok{background:#E6F4EC; color:var(--ok)} .alert.err{background:#FDECEA; color:#B3261E} .form .note-ok{display:none} .form .msg{display:none; border-radius:var(--r); padding:10px 12px; font-size:13.5px} .form .msg.ok{display:block; background:#E6F4EC; color:var(--ok)} .form .msg.err{display:block; background:#FDECEA; color:#B3261E} .form button[disabled]{opacity:.6; cursor:progress} /* Trang nội dung hai cột: bài + khung liên hệ */ .page-grid{display:grid; grid-template-columns:minmax(0, 1fr) 340px; gap:28px; align-items:start} .page-grid .panel-bd{padding:24px 26px} .cinfo{list-style:none; margin:0; padding:0; display:grid; gap:12px; font-size:14.5px} .cinfo li{display:flex; gap:10px} .cinfo svg{color:var(--blue); font-size:18px; margin-top:2px} .cinfo a{color:var(--blue); font-weight:600} /* Đội ngũ */ .team{display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:24px} .tcard{background:var(--surface); border:1px solid var(--line); border-radius:var(--r); padding:22px; text-align:center; display:grid; gap:6px; justify-items:center} .tcard img, .tcard .ava{width:120px; height:120px; border-radius:50%; object-fit:cover; border:4px solid var(--soft)} .tcard .ava{display:grid; place-items:center; background:var(--navy); color:#fff; font:700 34px/1 var(--display)} .tcard h2, .tcard h3{font-size:17px; color:var(--navy)} .tcard .role{color:var(--muted); font-size:13px} .tcard .ct{display:flex; flex-direction:column; gap:4px; margin-top:6px; font-size:14px} .tcard .ct a{color:var(--blue); font-weight:600; display:inline-flex; gap:6px; align-items:center; justify-content:center} /* Tin tức */ .news-list{display:grid; gap:18px} .nrow{display:grid; grid-template-columns:260px minmax(0, 1fr); gap:20px; background:var(--surface); border:1px solid var(--line); border-radius:var(--r); overflow:hidden} .nrow .ph{aspect-ratio:4/3; background:var(--soft); position:relative} .nrow .ph img{width:100%; height:100%; object-fit:cover} .nrow .bd{padding:16px 18px 16px 0; display:grid; gap:8px; align-content:start} .nrow h2{font-size:17px; color:var(--navy); line-height:1.35} .nrow:hover h2{color:var(--blue)} .nrow p{margin:0; color:#48545F; font-size:14px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden} .meta-line{font-size:12.5px; color:var(--muted); display:flex; gap:12px; flex-wrap:wrap} .article h1{font-size:clamp(22px, 2.6vw, 30px); color:var(--navy); margin-bottom:10px} .side-list{list-style:none; margin:0; padding:0; display:grid; gap:12px} .side-list a{display:grid; grid-template-columns:84px 1fr; gap:10px; align-items:center; font-size:13.5px; font-weight:600; line-height:1.35} .side-list img, .side-list .ph{width:84px; height:64px; object-fit:cover; border-radius:4px; background:var(--soft)} .side-list a:hover{color:var(--blue)} /* Sơ đồ site */ .smap{columns:3 240px; column-gap:28px} .smap section{break-inside:avoid; margin-bottom:22px} .smap h2{font-size:15px; color:var(--navy); margin-bottom:8px} .smap ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:14px} .smap a:hover{color:var(--blue)} /* Tab chi tiết: bản đồ nhúng, mặt bằng, video */ .gal .embed{aspect-ratio:3/2; border-radius:4px; overflow:hidden; background:var(--soft)} .gal .embed iframe{width:100%; height:100%; border:0; display:block} .gal .plan img{margin-inline:auto; border-radius:4px} .gal .main button.zoom{position:absolute; inset:0; background:none; border:0; cursor:zoom-in} .gal .nav{z-index:2} /* Xem ảnh lớn */ .lb{position:fixed; inset:0; z-index:95; background:rgb(8 16 24/.94); display:grid; grid-template-rows:auto 1fr auto; color:#fff} .lb[hidden]{display:none} .lb-top{display:flex; justify-content:space-between; align-items:center; padding:12px 16px; font-size:14px} .lb-top button, .lb-nav{background:rgb(255 255 255/.12); border:0; color:#fff; width:42px; height:42px; border-radius:50%; display:grid; place-items:center; font-size:20px} .lb-stage{position:relative; display:grid; place-items:center; padding:0 64px; min-height:0} .lb-stage img{max-height:calc(100vh - 140px); width:auto; object-fit:contain} .lb-nav{position:absolute; top:50%; transform:translateY(-50%)} .lb-nav.p{left:12px} .lb-nav.n{right:12px} .lb-cap{text-align:center; padding:10px 16px 16px; font-size:13px; color:#C9D3DC} /* Bộ lọc đang áp dụng trên trang tìm kiếm */ .active-filters{display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:-8px 0 20px} .active-filters .chip{background:var(--soft); border-color:transparent} .empty-state{background:var(--surface); border:1px dashed var(--line); border-radius:var(--r); padding:40px 20px; text-align:center; color:var(--muted)} .empty-state b{display:block; color:var(--ink); font-size:16px; margin-bottom:6px} .empty-state .btn{margin-top:14px} .bmeta{display:flex; gap:16px; flex-wrap:wrap; color:#BFD3E6; font-size:13.5px; margin-top:6px} .nf{padding-block:70px; text-align:center} .nf b{display:block; font:700 64px/1 var(--display); color:var(--gold)} .nf h1{font-size:24px; color:var(--navy); margin:12px 0 8px} .nf p{color:var(--muted); margin:0 0 20px} @media (max-width:1080px){ .page-grid{grid-template-columns:1fr} } @media (max-width:900px){ .team{grid-template-columns:1fr 1fr} .nrow{grid-template-columns:200px 1fr} } @media (max-width:600px){ .team{grid-template-columns:1fr} .nrow{grid-template-columns:1fr} .nrow .bd{padding:0 16px 16px} .lb-stage{padding:0 8px} } .qm-form .msg{display:none; border-radius:var(--r); padding:10px 12px; font-size:13.5px} .qm-form .msg.err{display:block; background:#FDECEA; color:#B3261E} .flatest .ph{display:block; width:64px; height:46px; background:rgb(255 255 255/.08); border-radius:3px} .card h3 a{color:inherit} .slist a b:hover{color:var(--blue)} /* Sửa sau lần xem đầu trên WordPress */ .card{position:relative} /* nút ♥ bám theo từng thẻ */ .sgrid > *, .two > *, .dgrid > *, .eq > *, .page-grid > *{min-width:0} /* chữ dài trong ô chọn không làm tràn ngang */ .agent > div{min-width:0} .agent a{overflow-wrap:anywhere} .fav{z-index:2} @media (max-width:900px){ .burger{margin-left:auto} /* nút ☰ sát phải — thẻ