:root{
--navy:#0f2a5c;--navy2:#163a7d;--gold:#d4a017;--gold2:#b8860b;
--ink:#1f2937;--muted:#6b7280;--bg:#f4f6f9;--line:#e5e7eb;--white:#fff;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;color:var(--ink);background:var(--bg);overflow-x:hidden}
a{color:var(--navy2);text-decoration:none}
a:hover{text-decoration:underline}
img{max-width:100%}
.wrap{max-width:1180px;margin:0 auto;padding:0 16px}
.section{padding:48px 0}
.center{text-align:center;margin-top:24px}
.sec-kicker{color:var(--gold2);letter-spacing:2px;font-weight:700;text-align:center;margin:0 0 6px}
.sec-title{font-size:30px;color:var(--navy);margin:0 0 24px;text-align:center}
.sec-title.left{text-align:left}

/* preloader */
#preloader{position:fixed;inset:0;background:#fff;z-index:9999;display:flex;flex-direction:column;gap:10px;align-items:center;justify-content:center;transition:opacity .5s}
#preloader.hide{opacity:0;pointer-events:none}
#preloader img{width:90px;height:90px;object-fit:contain}
#preloader span{font-weight:800;letter-spacing:3px;color:var(--navy)}
#scroll-progress{position:fixed;top:0;left:0;height:3px;background:var(--gold);width:0;z-index:10000}

/* topbar + header */
.topbar{background:var(--navy);color:#dbe4ff;font-size:13px}
.topbar-in{display:flex;gap:24px;justify-content:space-between;padding:7px 16px;flex-wrap:wrap}
.topbar-hotline{color:#ffd970;font-weight:700}
#site-header{background:#fff;position:sticky;top:0;z-index:100;box-shadow:0 1px 0 var(--line);transition:box-shadow .3s}
#site-header.shrink{box-shadow:0 6px 20px rgba(15,42,92,.15)}
.header-in{display:flex;align-items:center;gap:20px;padding:12px 16px;transition:padding .3s}
#site-header.shrink .header-in{padding:6px 16px}
.brand{display:flex;align-items:center;gap:10px}
.brand:hover{text-decoration:none}
.brand img{width:52px;height:52px;object-fit:contain;transition:width .3s,height .3s}
#site-header.shrink .brand img{width:40px;height:40px}
.brand-text{display:flex;flex-direction:column;line-height:1.1}
.brand-text b{font-size:22px;color:var(--navy);letter-spacing:1px}
.brand-text small{font-size:11px;color:var(--gold2);letter-spacing:1px}
.main-nav{display:flex;gap:6px;margin-left:auto;flex-wrap:wrap}
.main-nav a{padding:9px 16px;border-radius:999px;color:var(--ink);font-weight:600}
.main-nav a:hover,.main-nav a.active{background:var(--navy);color:#fff;text-decoration:none}
.btn-hotline{background:var(--gold);color:#fff;font-weight:800;padding:10px 18px;border-radius:999px;white-space:nowrap}
.btn-hotline:hover{background:var(--gold2);text-decoration:none;animation:tremble .4s}
@keyframes tremble{0%,100%{transform:translateX(0)}25%{transform:translateX(-2px)}75%{transform:translateX(2px)}}
.nav-toggle{display:none;background:none;border:1px solid var(--line);border-radius:8px;font-size:22px;padding:4px 10px;cursor:pointer}

/* hero */
.hero{position:relative}
.hero-slides{position:relative;height:520px;overflow:hidden;background:var(--navy)}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity 1s}
.hero-slide.active{opacity:1}
.hero-slide img{width:100%;height:100%;object-fit:cover;transform:scale(1);transition:transform 8s ease}
.hero-slide.active img{transform:scale(1.08)}
.hero-text{position:absolute;left:50%;top:44%;transform:translate(-50%,-50%);text-align:center;color:#fff;text-shadow:0 2px 12px rgba(0,0,0,.5);width:min(900px,90%)}
.hero-text h1{font-size:44px;margin:0 0 12px;line-height:1.2}
.hero-text p{font-size:18px;margin:0 0 20px}
.btn-gold{display:inline-block;background:var(--gold);color:#fff;font-weight:800;padding:12px 26px;border-radius:999px}
.btn-gold:hover{background:var(--gold2);text-decoration:none}
.btn-navy{display:inline-block;background:var(--navy);color:#fff;font-weight:700;padding:12px 26px;border-radius:999px}
.btn-navy:hover{background:var(--navy2);text-decoration:none}
.hero-dots{position:absolute;left:50%;bottom:96px;transform:translateX(-50%);display:flex;gap:8px;z-index:3}
.hero-dots button{width:12px;height:12px;border-radius:50%;border:2px solid #fff;background:transparent;cursor:pointer;padding:0}
.hero-dots button.on{background:var(--gold);border-color:var(--gold)}
.search-bar{position:relative;z-index:4;max-width:980px;margin:-64px auto 0;background:#fff;border-radius:14px;box-shadow:0 12px 30px rgba(15,42,92,.18);display:flex;gap:10px;padding:14px;flex-wrap:wrap}
.search-bar input,.search-bar select{flex:1;min-width:160px;padding:11px 12px;border:1px solid var(--line);border-radius:8px;font-size:15px}
.search-bar button{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:11px 22px;font-weight:700;cursor:pointer}
.search-bar button:hover{background:var(--navy2)}

/* intro + stats */
.intro{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:center}
.intro .sec-title{text-align:left}
.intro-img img{width:100%;border-radius:14px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.stats{background:var(--navy);color:#fff}
.stats-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center;padding:28px 16px}
.stats-grid b{font-size:36px;color:#ffd970;display:block}
.stats-grid span{font-size:14px;color:#dbe4ff}

/* tabs */
.tabs{position:relative;display:flex;gap:8px;justify-content:center;margin-bottom:26px;flex-wrap:wrap}
.tabs button{background:#fff;border:1px solid var(--line);border-radius:999px;padding:10px 20px;font-weight:700;cursor:pointer;transition:all .3s}
.tabs button.on{background:var(--navy);color:#fff;border-color:var(--navy)}
.tab-indicator{position:absolute;bottom:-8px;height:3px;background:var(--gold);border-radius:3px;transition:left .4s ease,width .4s ease}
.tab-panel{display:none;animation:tabIn .45s ease}
.tab-panel.on{display:block}
@keyframes tabIn{from{opacity:0;transform:translateX(24px)}to{opacity:1;transform:translateX(0)}}

/* cards */
.card-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card-grid.list-view{grid-template-columns:1fr}
.card-grid.list-view .card{flex-direction:row}
.card-grid.list-view .card-img{width:320px;flex-shrink:0}
.card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07);display:flex;flex-direction:column;height:100%;transition:transform .35s,box-shadow .35s}
.card:hover{transform:translateY(-6px);box-shadow:0 18px 36px rgba(15,42,92,.22)}
.card-img{position:relative;display:block;aspect-ratio:16/9;overflow:hidden}
.card-img img{width:100%;height:100%;object-fit:cover;transition:transform .5s}
.card:hover .card-img img{transform:scale(1.08)}
.card-badge{position:absolute;top:12px;left:12px;background:#16a34a;color:#fff;font-size:13px;font-weight:700;padding:5px 10px;border-radius:6px}
.card-body{padding:18px;display:flex;flex-direction:column;flex:1}
.card-body h3{margin:0 0 8px;font-size:19px}
.card-body h3 a{color:var(--navy)}
.card-loc{color:var(--muted);font-size:14px;margin:0 0 10px}
.card-price{color:var(--gold2);font-weight:800;font-size:18px;margin:0 0 10px}
.card-chips{display:flex;gap:8px;flex-wrap:wrap;height:30px;overflow:hidden;margin-bottom:10px}
.card-chips span{background:#eef2ff;border:1px solid #dbe4ff;color:var(--navy);font-size:13px;padding:4px 9px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.card-desc{color:#374151;font-size:14px;line-height:1.55;margin:0 0 14px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.btn-card{margin-top:auto;background:var(--navy);color:#fff;text-align:center;font-weight:700;padding:12px;border-radius:10px;transition:background .3s}
.btn-card:hover{background:var(--gold);text-decoration:none}

/* reveal + stagger */
.reveal{opacity:0;transform:translateY(18px);transition:opacity .6s,transform .6s}
.reveal.in{opacity:1;transform:none}
.sec-title .w{display:inline-block;opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s}
.sec-title.in .w{opacity:1;transform:none}
/* blur-up */
.card-img img,.news-card img,.lib-item img{filter:blur(8px);transition:filter .6s}
.card-img img.loaded,.news-card img.loaded,.lib-item img.loaded{filter:none}
/* dropdown menus */
.has-drop{position:relative}
.has-drop>a{display:inline-block;padding:9px 16px;border-radius:999px;font-weight:600;color:var(--ink)}
.has-drop>a.active{background:var(--navy);color:#fff}
.has-drop .drop{position:absolute;top:100%;left:0;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.15);min-width:210px;opacity:0;transform:translateY(8px);pointer-events:none;transition:opacity .3s,transform .3s;z-index:50;padding:8px}
.has-drop:hover .drop,.has-drop:focus-within .drop{opacity:1;transform:none;pointer-events:auto}
.has-drop .drop a{display:block;padding:9px 12px;border-radius:8px}
.has-drop .drop a:hover{background:#eef2ff;text-decoration:none}

/* news */
.news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.news-card{background:#fff;border-radius:14px;overflow:hidden;box-shadow:0 2px 12px rgba(0,0,0,.07)}
.news-card img{width:100%;aspect-ratio:16/9;object-fit:cover}
.news-card>div{padding:16px}
.news-cat{display:inline-block;background:#fef3c7;color:#92400e;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;margin-bottom:8px}
.news-card h3{margin:0 0 8px;font-size:17px}
.news-card p{color:var(--muted);font-size:14px;line-height:1.55;margin:0;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.article-img{width:100%;border-radius:14px;margin:0 0 20px}
.article-body{line-height:1.8}
.article-body img{max-width:100%}

/* detail */
.detail-loc{color:var(--muted);text-align:center;margin:-12px 0 24px}
.detail-grid{display:grid;grid-template-columns:1fr 360px;gap:28px}
.gallery-main img{width:100%;aspect-ratio:16/9;object-fit:cover;border-radius:14px;cursor:zoom-in}
.gallery-thumbs{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.gallery-thumbs button{border:2px solid transparent;padding:0;border-radius:8px;overflow:hidden;cursor:pointer;background:none}
.gallery-thumbs button.on{border-color:var(--gold)}
.gallery-thumbs img{width:96px;height:64px;object-fit:cover;display:block}
.gallery-nav{display:flex;align-items:center;gap:10px;margin-top:10px}
.gallery-nav button{background:var(--navy);color:#fff;border:0;border-radius:50%;width:34px;height:34px;cursor:pointer;font-size:20px;line-height:1}
#gal-dots button{background:#cbd5e1;width:10px;height:10px;border-radius:50%;padding:0}
#gal-dots button.on{background:var(--gold)}
.gallery-cap{color:var(--muted);font-size:14px}
.info-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:18px}
.info-box h3{margin:0 0 10px;color:var(--navy)}
.info-box ul{margin:0;padding-left:18px;line-height:1.7}
.price-big{color:var(--gold2);font-weight:800;font-size:22px}
.lib-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.lib-item{margin:0;background:#fff;border-radius:12px;overflow:hidden;box-shadow:0 2px 10px rgba(0,0,0,.07)}
.lib-item img{width:100%;aspect-ratio:16/10;object-fit:cover;cursor:zoom-in}
.lib-item figcaption{padding:10px 12px;font-size:14px;color:#374151}
.detail-desc{margin-top:28px;background:#fff;border-radius:14px;padding:22px;line-height:1.8}

/* lightbox */
.lightbox{position:fixed;inset:0;background:rgba(0,0,0,.88);z-index:2000;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:10px}
.lightbox[hidden]{display:none}
.lightbox img{max-width:92vw;max-height:80vh;object-fit:contain;border-radius:8px}
.lightbox p{color:#fff;margin:0}
.lb-close,.lb-prev,.lb-next{position:absolute;background:rgba(255,255,255,.15);color:#fff;border:0;border-radius:50%;width:46px;height:46px;font-size:28px;cursor:pointer}
.lb-close{top:16px;right:16px}
.lb-prev{left:16px;top:50%}
.lb-next{right:16px;top:50%}

/* filters */
.filter-bar{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:14px}
.filter-bar input,.filter-bar select{padding:10px 12px;border:1px solid var(--line);border-radius:8px;flex:1;min-width:150px}
.filter-bar button{background:var(--navy);color:#fff;border:0;border-radius:8px;padding:10px 20px;font-weight:700;cursor:pointer}
.view-toggle{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden}
.view-toggle a{padding:10px 14px;background:#fff}
.view-toggle a.on{background:var(--navy);color:#fff;text-decoration:none}
.result-count{color:var(--muted)}
.cat-bar{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.cat-bar a{background:#fff;border:1px solid var(--line);border-radius:999px;padding:8px 16px;font-weight:600}
.cat-bar a.on{background:var(--navy);color:#fff;text-decoration:none}

/* forms */
.lead-form,.hold-form{background:#fff;border:2px solid var(--gold);border-radius:14px;padding:22px}
.lead-form h3,.hold-form h3{margin:0 0 16px;color:var(--navy)}
.float-field{position:relative;margin-bottom:14px}
.float-field input,.float-field textarea,.float-field select{width:100%;padding:14px 12px 10px;border:1px solid var(--line);border-radius:8px;font-size:15px;outline:none;transition:border-color .3s,box-shadow .3s}
.float-field input:focus,.float-field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(212,160,23,.25)}
.float-field label{position:absolute;left:12px;top:13px;color:var(--muted);pointer-events:none;transition:all .2s;background:#fff;padding:0 4px}
.float-field input:focus+label,.float-field input:not(:placeholder-shown)+label,
.float-field textarea:focus+label,.float-field textarea:not(:placeholder-shown)+label{top:-9px;font-size:12px;color:var(--gold2)}
.float-field textarea{min-height:90px;resize:vertical}
.form-note{color:var(--muted);font-size:13px}
.form-ok{color:#16a34a;font-weight:700}
.form-err{color:#dc2626;font-weight:700}
button[type=submit]:disabled{opacity:.6;cursor:wait}

/* contact */
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:28px}
.contact-map{width:100%;height:300px;border:0;border-radius:14px;margin-top:14px}

/* footer */
.footer-map iframe{width:100%;height:260px;border:0;filter:grayscale(.3)}
.footer-body{background:var(--navy);color:#dbe4ff}
.footer-grid{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.2fr;gap:28px;padding:36px 16px}
.f-col h4{color:#fff;margin:0 0 14px;letter-spacing:1px}
.f-col a{display:block;color:#dbe4ff;margin-bottom:9px}
.f-col p{margin:0 0 9px;line-height:1.6}
.f-logo{width:64px;height:64px;object-fit:contain}
.f-slogan{color:#ffd970;font-weight:800}
.fb-box iframe{max-width:100%}
.btn-fb{display:inline-block!important;background:#1877f2;color:#fff!important;padding:8px 16px;border-radius:8px;font-weight:700;margin-top:10px}
.footer-bottom{background:#0a1e45;color:#9fb0d8;text-align:center;padding:14px 16px;font-size:13px}

/* floating */
.floating-call{position:fixed;right:18px;bottom:84px;width:56px;height:56px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:26px;z-index:900;box-shadow:0 8px 20px rgba(0,0,0,.25);animation:pulse 2s infinite}
.floating-call:hover{text-decoration:none}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(22,163,74,.5)}70%{box-shadow:0 0 0 14px rgba(22,163,74,0)}100%{box-shadow:0 0 0 0 rgba(22,163,74,0)}}
#back-to-top{position:fixed;right:18px;bottom:18px;width:48px;height:48px;border-radius:50%;background:var(--navy);color:#fff;border:0;font-size:20px;cursor:pointer;display:none;z-index:900}
#back-to-top.show{display:block}
#toast-wrap{position:fixed;right:18px;top:84px;z-index:3000;display:flex;flex-direction:column;gap:10px}
.toast{background:#111827;color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 24px rgba(0,0,0,.25);animation:toastIn .35s ease}
.toast.ok{border-left:4px solid #16a34a}
.toast.err{border-left:4px solid #dc2626}
@keyframes toastIn{from{opacity:0;transform:translateX(40px)}to{opacity:1;transform:none}}

/* video */
.video-main iframe{width:100%;height:480px;border:0;border-radius:14px}
.video-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:16px}
.video-item{background:#fff;border-radius:12px;padding:16px}

@media(max-width:900px){
.has-drop .drop{position:static;opacity:1;transform:none;pointer-events:auto;box-shadow:none;border:0;padding:0 0 0 12px}
.hero-slides{height:420px}
.hero-text h1{font-size:30px}
.card-grid,.news-grid{grid-template-columns:repeat(2,1fr)}
.intro,.detail-grid,.contact-grid{grid-template-columns:1fr}
.stats-grid{grid-template-columns:repeat(2,1fr)}
.footer-grid{grid-template-columns:1fr 1fr}
.main-nav{display:none;position:absolute;top:100%;left:0;right:0;background:#fff;flex-direction:column;padding:12px;box-shadow:0 10px 24px rgba(0,0,0,.15)}
.main-nav.open{display:flex}
.nav-toggle{display:block}
.btn-hotline{display:none}
.header-in{position:relative}
}
@media(max-width:600px){
.card-grid,.news-grid,.lib-grid{grid-template-columns:1fr}
.footer-grid{grid-template-columns:1fr}
.search-bar{margin:-40px 12px 0}
.hero-dots{bottom:120px}
}
@media(prefers-reduced-motion:reduce){
*{animation:none!important;transition:none!important}
html{scroll-behavior:auto}
}

/* Thư viện ảnh: lưới 10 cột, mỗi đợt 10 dòng (100 ảnh), nút Xem thêm tải tiếp */
.lib-grid{grid-template-columns:repeat(10,1fr);gap:10px}
.lib-grid .lib-item img{aspect-ratio:1/1}
.lib-grid .lib-item figcaption{font-size:12px;padding:8px 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
/* Liên hệ nhanh trên trang chủ: chia 2 cột (thông tin | form) */
.quick-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:28px;align-items:start}
.quick-info p{margin:0 0 14px;font-size:16px;line-height:1.6}
.quick-info .hotline-big{font-size:22px;font-weight:800;color:var(--navy)}
@media(max-width:1100px){.lib-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:800px){.quick-grid{grid-template-columns:1fr}}
@media(max-width:600px){.lib-grid{grid-template-columns:repeat(3,1fr)}}

/* Trang Tin tức + Chi tiết bài viết: bố cục chính + sidebar (như mẫu phuquyland) */
.news-layout{display:grid;grid-template-columns:1fr 320px;gap:28px;align-items:start}
.news-layout .news-grid{grid-template-columns:repeat(2,1fr)}
.news-side .side-box{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;margin-bottom:20px}
.news-side .side-box h3{margin:0 0 14px;font-size:17px;color:var(--navy);padding-bottom:10px;border-bottom:2px solid var(--gold)}
.side-search{display:flex;gap:8px}
.side-search input{flex:1;min-width:0;padding:10px 12px;border:1px solid var(--line);border-radius:8px;font-size:14px}
.side-search button{padding:10px 16px;border:0;border-radius:8px;background:var(--navy);color:#fff;cursor:pointer}
.side-post{display:flex;gap:12px;margin-bottom:14px}
.side-post:last-child{margin-bottom:0}
.side-post img{width:72px;height:54px;object-fit:cover;border-radius:8px;flex-shrink:0}
.side-post h4{margin:0 0 4px;font-size:14px;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.side-post h4 a{color:inherit;text-decoration:none}
.side-post time{font-size:12px;color:var(--muted)}
.side-cats a{display:flex;justify-content:space-between;text-decoration:none;color:#334155;padding:8px 0;border-bottom:1px dashed var(--line)}
.side-cats a:last-child{border-bottom:0}
.side-tags a,.article-tags a{display:inline-block;margin:0 6px 6px 0;padding:5px 12px;background:#f1f5f9;border-radius:999px;font-size:13px;color:#334155;text-decoration:none}
.side-contact p{margin:0 0 12px;font-size:14px;line-height:1.6}
.side-contact .hotline-big{font-size:22px;font-weight:800;color:var(--navy);text-decoration:none}
.side-lead input{width:100%;box-sizing:border-box;padding:10px 12px;border:1px solid var(--line);border-radius:8px;margin-bottom:10px;font-size:14px}
.side-lead .btn-gold{width:100%}
.breadcrumb{font-size:14px;color:var(--muted);margin:0 0 12px}
.breadcrumb a{color:var(--muted);text-decoration:none}
.article-meta{color:var(--muted);font-size:14px;margin:8px 0 16px}
.article-tags{margin-top:24px}
.related-title{font-size:20px;color:var(--navy);margin:32px 0 16px}
@media(max-width:900px){.news-layout{grid-template-columns:1fr}}
@media(max-width:600px){.news-layout .news-grid{grid-template-columns:1fr}}