/* Website Hải Đăng — tông đen–vàng đồng bộ logo, 30/09/2026 */
:root{--nen:#0c0c0e;--nen2:#141416;--vang:#c9a227;--vang2:#e6c860;--chu:#f4f2ec;--xam:#a7a49c;--line:rgba(201,162,39,.28);--ff:'Be Vietnam Pro','Mulish',system-ui,Arial,sans-serif;--serif:'Playfair Display',Georgia,serif;}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--nen);color:var(--chu);font-family:var(--ff);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
img{max-width:100%;display:block}
a{color:inherit;text-decoration:none}
.serif{font-family:var(--serif)}
.wrap{width:min(1160px,92vw);margin:0 auto}
.kicker{font-size:12px;letter-spacing:.28em;text-transform:uppercase;color:var(--vang);font-weight:600}
.title{font-family:var(--serif);font-weight:400;line-height:1.12;font-size:clamp(28px,4vw,46px)}
.title em{font-style:italic;color:var(--vang2)}
.btn{display:inline-flex;align-items:center;gap:.5em;padding:13px 26px;border-radius:2px;font-weight:600;font-size:14px;letter-spacing:.02em;transition:.2s;border:1px solid transparent;cursor:pointer}
.btn--vang{background:var(--vang);color:#1a1408}
.btn--vang:hover{background:var(--vang2)}
.btn--vien{border-color:rgba(255,255,255,.4);color:#fff}
.btn--vien:hover{background:#fff;color:#1a1408}
.muted{color:var(--xam)}
/* header */
header{position:sticky;top:0;z-index:50;background:rgba(12,12,14,.86);backdrop-filter:blur(10px);border-bottom:1px solid rgba(255,255,255,.06)}
.nav{display:flex;align-items:center;justify-content:space-between;height:70px}
.nav__logo{display:flex;align-items:center;gap:12px;font-family:var(--serif);font-size:19px;letter-spacing:.02em}
.nav__logo img{height:40px;width:auto}
.nav__menu{display:flex;gap:30px;align-items:center}
.nav__menu a{font-size:14px;color:var(--xam);letter-spacing:.02em;transition:.2s}
.nav__menu a:hover,.nav__menu a.on{color:var(--vang)}
.nav__toggle{display:none;background:none;border:0;color:var(--chu);font-size:26px;cursor:pointer}
/* hero */
.hero{position:relative;min-height:78vh;display:flex;align-items:center;overflow:hidden}
.hero__bg{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:.5}
.hero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,14,.55),rgba(12,12,14,.78) 60%,var(--nen))}
.hero .wrap{position:relative;z-index:2;padding:80px 0}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(34px,6vw,66px);line-height:1.06;margin:16px 0 20px;max-width:16ch}
.hero h1 em{font-style:italic;color:var(--vang2);display:block}
.hero p{max-width:52ch;color:rgba(244,242,236,.86);font-size:clamp(16px,2vw,19px)}
.hero__btns{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}
/* section */
.sec{padding:clamp(56px,8vw,100px) 0}
.sec--alt{background:var(--nen2)}
.sec__head{max-width:60ch;margin-bottom:44px}
.sec__head .title{margin-top:12px}
.sec__head p{margin-top:14px;color:var(--xam)}
/* chỉ số */
.chiso{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-top:10px}
.chiso div{border-left:2px solid var(--vang);padding-left:16px}
.chiso b{font-family:var(--serif);font-size:clamp(28px,4vw,40px);color:var(--vang2);font-weight:400;display:block}
.chiso span{font-size:13px;color:var(--xam);text-transform:uppercase;letter-spacing:.08em}
/* lưới thương hiệu */
.hst{display:grid;grid-template-columns:repeat(3,1fr);gap:26px}
.card{background:var(--nen2);border:1px solid #232326;border-radius:4px;overflow:hidden;display:flex;flex-direction:column;transition:.25s}
.card:hover{transform:translateY(-4px);border-color:var(--line)}
.card__img{aspect-ratio:4/3;position:relative;overflow:hidden}
.card__img img{width:100%;height:100%;object-fit:cover;transition:.4s}
.card:hover .card__img img{transform:scale(1.05)}
.card__img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 40%,rgba(12,12,14,.75))}
.card__badge{position:absolute;left:0;bottom:0;z-index:2;padding:14px 18px}
.card__badge b{font-family:var(--serif);font-size:21px;font-weight:400;display:block}
.card__badge span{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vang)}
.card__body{padding:20px;display:flex;flex-direction:column;flex:1}
.card__body p{font-size:14px;color:var(--xam);flex:1}
.card__link{margin-top:16px;font-size:13px;font-weight:600;color:var(--vang);letter-spacing:.02em}
/* năng lực */
.nlgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}
.nl{padding:26px;border:1px solid #232326;border-radius:4px;background:var(--nen2)}
.nl h3{font-family:var(--serif);font-weight:400;font-size:21px;color:var(--vang2);margin-bottom:8px}
.nl p{font-size:14.5px;color:var(--xam)}
/* CTA dải */
.cta{background:linear-gradient(120deg,#1a1408,#241a0a 60%,#1a1408);border-top:1px solid var(--vang);border-bottom:1px solid var(--vang)}
.cta .wrap{padding:clamp(44px,6vw,72px) 0;text-align:center}
.cta .title{margin:10px auto 8px}
.cta p{max-width:56ch;margin:0 auto 26px;color:rgba(244,242,236,.82)}
/* trang thương hiệu */
.th-hero{position:relative;min-height:52vh;display:flex;align-items:flex-end;overflow:hidden}
.th-hero__bg{position:absolute;inset:0;background:#000 center/cover no-repeat;opacity:.55}
.th-hero__ov{position:absolute;inset:0;background:linear-gradient(180deg,rgba(12,12,14,.4),rgba(12,12,14,.9))}
.th-hero .wrap{position:relative;z-index:2;padding:60px 0 46px}
.th-hero img.lg{height:64px;width:auto;margin-bottom:20px}
.th-body{display:grid;grid-template-columns:1.6fr 1fr;gap:48px;align-items:start}
.th-body h2{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--vang2);margin:0 0 14px}
.th-body p{color:#d8d5cd;margin-bottom:16px}
.th-dv{list-style:none}
.th-dv li{padding:12px 0;border-bottom:1px solid #232326;padding-left:24px;position:relative;color:#d8d5cd}
.th-dv li::before{content:"◆";position:absolute;left:0;color:var(--vang);font-size:11px;top:15px}
.th-side{background:var(--nen2);border:1px solid var(--line);border-radius:4px;padding:24px;position:sticky;top:90px}
.th-side h3{font-size:13px;letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:14px}
.th-side .btn{width:100%;justify-content:center;margin-bottom:10px}
/* sự kiện */
.sk{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
.sk-item{display:flex;gap:16px;background:var(--nen2);border:1px solid #232326;border-radius:4px;padding:20px}
.sk-item .venue{font-size:11.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--vang)}
.sk-item h3{font-family:var(--serif);font-weight:400;font-size:19px;margin:4px 0 6px}
.sk-item p{font-size:14px;color:var(--xam)}
.trong{text-align:center;padding:60px 0;color:var(--xam)}
/* liên hệ */
.lh{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:start}
.lh-info div{margin-bottom:22px}
.lh-info .k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:4px}
.lh-info .v{font-size:16px}
form.lh-form{background:var(--nen2);border:1px solid var(--line);border-radius:4px;padding:28px;display:grid;gap:14px}
.lh-form label{font-size:13px;color:var(--xam)}
.lh-form input,.lh-form textarea{width:100%;background:#0e0e10;border:1px solid #2a2a2e;border-radius:3px;color:var(--chu);padding:12px 14px;font-family:inherit;font-size:15px}
.lh-form input:focus,.lh-form textarea:focus{outline:0;border-color:var(--vang)}
.lh-form .hp{position:absolute;left:-9999px}
.lh-tb{font-size:14px;padding:10px 0;min-height:20px}
.lh-tb.ok{color:var(--vang2)}
.lh-tb.loi{color:#e07a6a}
/* footer */
footer{background:#08080a;border-top:1px solid rgba(255,255,255,.06);padding:56px 0 30px}
.ft{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:32px}
.ft__logo{display:flex;align-items:center;gap:12px;margin-bottom:16px}
.ft__logo img{height:44px}
.ft p{font-size:14px;color:var(--xam);max-width:40ch}
.ft h4{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--vang);margin-bottom:14px}
.ft a{display:block;font-size:14px;color:var(--xam);padding:5px 0;transition:.2s}
.ft a:hover{color:var(--vang)}
.ft__end{margin-top:40px;padding-top:20px;border-top:1px solid rgba(255,255,255,.06);display:flex;justify-content:space-between;gap:16px;font-size:12.5px;color:#6d6a63;flex-wrap:wrap}
.age{font-size:12px;color:#6d6a63}
@media(max-width:860px){
 .nav__menu{position:fixed;inset:70px 0 auto 0;flex-direction:column;background:var(--nen2);padding:20px;gap:8px;border-bottom:1px solid var(--line);display:none}
 .nav__menu.mo{display:flex}.nav__menu a{padding:10px 0;font-size:15px}
 .nav__toggle{display:block}
 .hst,.nlgrid,.sk,.lh,.ft{grid-template-columns:1fr}
 .chiso{grid-template-columns:1fr 1fr}
 .th-body{grid-template-columns:1fr}.th-side{position:static}
}
/* năng lực: lưới 3/4 cột responsive + ảnh lãnh đạo */
.nlgrid--3{grid-template-columns:repeat(3,1fr)}
.nlgrid--4{grid-template-columns:repeat(4,1fr)}
.nl .stt{font-family:var(--serif);font-size:26px;color:var(--vang);display:block}
@media(max-width:860px){.nlgrid--3,.nlgrid--4{grid-template-columns:1fr 1fr}}
@media(max-width:520px){.nlgrid--3,.nlgrid--4{grid-template-columns:1fr}}

/* Bỏ viền xanh (focus/tap) bao quanh thẻ khi bấm — chỉ hiện viền vàng mảnh khi điều hướng bằng bàn phím (30/09/2026) */
a{-webkit-tap-highlight-color:transparent}
.card{outline:none}
.card:focus{outline:none}
.card:focus-visible{outline:2px solid var(--vang);outline-offset:2px}
.card:active{transform:translateY(-2px)}
/* Logo trọn vẹn (đã gồm chữ HẢI ĐĂNG) — 30/09/2026 */
.nav__logo{gap:0}
.nav__logo img{height:46px;width:auto}
.ft__logo img{height:46px;width:auto}
@media(max-width:520px){.nav__logo img{height:34px}}
/* Lĩnh vực hoạt động (3 hình thức) — bố cục theo hồ sơ năng lực, 30/09/2026 */
.lv{display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,56px);align-items:center;padding:clamp(28px,4vw,52px) 0;border-top:1px solid #1e1e21}
.lv:first-of-type{border-top:0}
.lv--dao .lv__anh{order:2}
.lv__anh img{width:100%;height:auto}
.lv__so{font-family:var(--serif);font-size:34px;color:var(--vang);display:block;line-height:1}
.lv__chu h3{font-family:var(--serif);font-weight:400;font-size:clamp(22px,2.6vw,30px);color:var(--chu);margin:6px 0 12px}
.lv__chu p{color:var(--xam);font-size:15px}
.lv__ds{list-style:none;margin-top:16px;display:flex;flex-wrap:wrap;gap:8px}
.lv__ds li{font-size:12.5px;color:var(--vang2);border:1px solid var(--line);border-radius:2px;padding:6px 12px;background:rgba(201,162,39,.06)}
/* M.I.C.E + Dự án tiêu biểu */
.mice,.duan{display:grid;grid-template-columns:repeat(2,1fr);gap:22px}
.mice__o,.duan__o{margin:0;position:relative;border:1px solid #232326;border-radius:4px;overflow:hidden;background:var(--nen2)}
.mice__o img,.duan__o img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:.4s}
.duan__o img{aspect-ratio:16/10}
.mice__o:hover img,.duan__o:hover img{transform:scale(1.04)}
.mice__o figcaption,.duan__o figcaption{position:absolute;left:0;right:0;bottom:0;padding:16px 18px;background:linear-gradient(180deg,transparent,rgba(8,8,10,.88))}
.mice__o figcaption b,.duan__o figcaption b{display:block;font-family:var(--serif);font-weight:400;font-size:19px}
.mice__o figcaption span,.duan__o figcaption span{font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--vang)}
@media(max-width:860px){.lv,.lv--dao .lv__anh{grid-template-columns:1fr;order:0}.mice,.duan{grid-template-columns:1fr}}
/* Hero: cỡ chữ vừa ĐÚNG 2 DÒNG kể cả điện thoại nhỏ (30/09/2026, sếp) — 28 ký tự dòng 1 phải lọt 1 dòng */
.hero h1{font-size:clamp(19px,5.4vw,56px);max-width:none;letter-spacing:-.01em}
.hero h1 em{display:block}