/* ───── TD Construction · Project Detail pages ───── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --navy:#1A2B4A;--navy-deep:#0F1B33;--navy-mid:#243560;--navy-light:#2E4A7A;
  --amber:#E8A020;--amber-light:#F5C060;--teal:#0D7A70;--teal-light:#16A99B;
  --white:#fff;--text-light:#8898AA;--green:#1D9E75;
}
html{scroll-behavior:smooth}
body{font-family:'Be Vietnam Pro',sans-serif;background:var(--navy-deep);color:var(--white);
  line-height:1.7;overflow-x:hidden;-webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
.disp{font-family:'Oswald',sans-serif}

#progress{position:fixed;top:0;left:0;height:3px;width:0;z-index:200;
  background:linear-gradient(90deg,var(--amber),var(--amber-light));box-shadow:0 0 12px rgba(232,160,32,.6)}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:150;display:flex;align-items:center;justify-content:space-between;
  padding:0 clamp(1.2rem,4vw,3rem);height:62px;background:rgba(15,27,51,.92);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(232,160,32,.25)}
.nav-logo{display:flex;align-items:center;gap:11px}
.nav-logo img{width:40px;height:40px;border-radius:8px;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.nav-brand{font-family:'Oswald';font-weight:700;font-size:1rem;letter-spacing:.04em;line-height:1}
.nav-sub{font-size:.6rem;color:var(--amber);margin-top:3px;letter-spacing:.18em;text-transform:uppercase}
.nav-right{display:flex;align-items:center;gap:1.4rem}
.nav-back{font-size:.78rem;color:rgba(255,255,255,.8);letter-spacing:.04em;transition:color .2s}
.nav-back:hover{color:var(--amber)}
.nav-cta{background:var(--amber);color:var(--navy-deep);padding:.5rem 1.2rem;border-radius:6px;
  font-weight:600;font-size:.76rem;letter-spacing:.03em;text-transform:uppercase;transition:.2s}
.nav-cta:hover{background:var(--amber-light)}
@media(max-width:680px){.nav-back{display:none}}

/* hero */
.dhero{position:relative;min-height:78vh;display:flex;align-items:flex-end;overflow:hidden;background:var(--navy)}
.dhero-bg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0;will-change:transform}
.dhero-ov{position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(15,27,51,.45),rgba(15,27,51,.55) 45%,rgba(15,27,51,.96)),
             linear-gradient(90deg,rgba(15,27,51,.6),transparent 70%)}
.dhero-inner{position:relative;z-index:2;max-width:1180px;margin:0 auto;width:100%;
  padding:7rem clamp(1.2rem,4vw,3rem) clamp(2.5rem,5vw,4rem)}
.dhero .eyebrow{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--amber);margin-bottom:1rem}
.dhero .eyebrow::before{content:'';width:26px;height:2px;background:var(--amber)}
.dhero h1{font-family:'Oswald';font-weight:700;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(2.2rem,6vw,4.4rem);line-height:1.1;margin-bottom:.8rem}
.dhero .loc{font-size:1.02rem;color:var(--amber-light);margin-bottom:1.4rem}
.dhero .tags{display:flex;flex-wrap:wrap;gap:.5rem}
.dhero .tags .t{font-size:.74rem;padding:.4rem .9rem;border-radius:100px;
  border:1px solid rgba(255,255,255,.25);background:rgba(15,27,51,.4);backdrop-filter:blur(4px);color:#fff}
.dhero .tags .t.edge{color:var(--green);border-color:rgba(29,158,117,.5);background:rgba(29,158,117,.15)}

/* stats bar */
.dstats{background:var(--navy);border-bottom:1px solid rgba(255,255,255,.07)}
.dstats-in{max-width:1180px;margin:0 auto;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:rgba(255,255,255,.07)}
.dstat{background:var(--navy);padding:1.6rem clamp(1rem,2.5vw,2rem);text-align:center}
.dstat .v{font-family:'Oswald';font-weight:600;font-size:clamp(1.4rem,2.6vw,2rem);color:var(--amber)}
.dstat .k{font-size:.74rem;color:var(--text-light);margin-top:.2rem;letter-spacing:.04em}
@media(max-width:720px){.dstats-in{grid-template-columns:1fr 1fr}}

/* content */
.dwrap{max-width:1180px;margin:0 auto;padding:clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,3rem)}
.dsec{margin-bottom:clamp(2.6rem,5vw,4rem)}
.dlabel{display:inline-flex;align-items:center;gap:9px;font-size:.7rem;font-weight:600;letter-spacing:.2em;
  text-transform:uppercase;color:var(--amber);margin-bottom:.7rem}
.dlabel::before{content:'';width:24px;height:2px;background:var(--amber)}
.dsec h2{font-family:'Oswald';font-weight:600;text-transform:uppercase;letter-spacing:.005em;
  font-size:clamp(1.5rem,3.2vw,2.3rem);line-height:1.18;margin-bottom:1.1rem}
.dsec h2 span{color:var(--amber)}
.dsec p{color:rgba(255,255,255,.76);margin-bottom:1rem;font-size:1.02rem}
.dsec p b{color:#fff;font-weight:600}
.dgrid{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(1.5rem,4vw,3rem);align-items:center}
.dgrid img{border-radius:14px;border:1px solid rgba(255,255,255,.1);box-shadow:0 20px 50px rgba(0,0,0,.4)}
.dgrid.rev{grid-template-columns:1fr 1.3fr}.dgrid.rev .gtext{order:2}
@media(max-width:820px){.dgrid,.dgrid.rev{grid-template-columns:1fr}.dgrid.rev .gtext{order:0}}

/* utilities list */
.ulist{display:grid;grid-template-columns:repeat(2,1fr);gap:.7rem 1.4rem;margin-top:.4rem}
.ulist li{list-style:none;display:flex;gap:.7rem;align-items:flex-start;font-size:.95rem;color:rgba(255,255,255,.82)}
.ulist li::before{content:'▸';color:var(--amber);flex-shrink:0}
@media(max-width:600px){.ulist{grid-template-columns:1fr}}

/* TD scope box */
.scope{background:linear-gradient(160deg,rgba(232,160,32,.08),rgba(13,122,112,.08));
  border:1px solid rgba(232,160,32,.28);border-radius:18px;padding:clamp(1.6rem,3.5vw,2.6rem)}
.scope .chips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.scope .chips .c{font-size:.78rem;padding:.4rem .9rem;border-radius:100px;background:rgba(232,160,32,.14);
  border:1px solid rgba(232,160,32,.35);color:var(--amber-light)}
.gallery{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:1.5rem}
.gallery figure{border-radius:14px;overflow:hidden;border:1px solid rgba(255,255,255,.1);background:var(--navy)}
.gallery img{width:100%;height:240px;object-fit:cover}
.gallery figcaption{font-size:.76rem;color:var(--text-light);padding:.6rem .8rem;background:var(--navy)}
@media(max-width:600px){.gallery{grid-template-columns:1fr}}

/* info table */
.info{display:grid;grid-template-columns:1fr 1fr;gap:.2rem 2rem}
.info .row{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(255,255,255,.08)}
.info .row .k{color:var(--text-light);font-size:.9rem}
.info .row .v{color:#fff;font-weight:500;font-size:.92rem;text-align:right}
@media(max-width:680px){.info{grid-template-columns:1fr}}

/* cta */
.dcta{position:relative;overflow:hidden;background:var(--navy);border-top:1px solid rgba(255,255,255,.08)}
.dcta-bg{position:absolute;inset:0;z-index:0;
  background:radial-gradient(circle at 25% 30%,rgba(232,160,32,.16),transparent 40%),
             radial-gradient(circle at 80% 70%,rgba(13,122,112,.2),transparent 45%)}
.dcta-in{position:relative;z-index:2;max-width:1180px;margin:0 auto;text-align:center;
  padding:clamp(3rem,6vw,5rem) clamp(1.2rem,4vw,3rem)}
.dcta h2{font-family:'Oswald';font-weight:700;text-transform:uppercase;font-size:clamp(1.6rem,4vw,2.8rem);
  line-height:1.15;margin-bottom:1rem}
.dcta h2 span{color:var(--amber)}
.dcta p{color:rgba(255,255,255,.72);max-width:560px;margin:0 auto 2rem}
.dbtns{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap}
.btn{padding:.9rem 1.8rem;border-radius:8px;font-weight:600;font-size:.9rem;cursor:pointer;transition:.25s;
  display:inline-flex;align-items:center;gap:.5rem;border:1px solid transparent}
.btn-primary{background:var(--amber);color:var(--navy-deep)}
.btn-primary:hover{background:var(--amber-light);transform:translateY(-3px);box-shadow:0 12px 28px rgba(232,160,32,.4)}
.btn-ghost{border-color:rgba(255,255,255,.25);color:#fff}
.btn-ghost:hover{border-color:var(--amber);color:var(--amber);transform:translateY(-3px)}

/* other projects */
.more{max-width:1180px;margin:0 auto;padding:0 clamp(1.2rem,4vw,3rem) clamp(3rem,6vw,5rem)}
.more h3{font-family:'Oswald';text-transform:uppercase;font-size:1.2rem;margin-bottom:1.2rem;color:var(--text-light)}
.more-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.more-card{position:relative;border-radius:14px;overflow:hidden;min-height:150px;border:1px solid rgba(255,255,255,.1);
  display:flex;align-items:flex-end;transition:.3s}
.more-card:hover{transform:translateY(-4px);border-color:rgba(232,160,32,.4)}
.more-card .mbg{position:absolute;inset:0;background-size:cover;background-position:center;z-index:0}
.more-card .mov{position:absolute;inset:0;z-index:1;background:linear-gradient(180deg,rgba(15,27,51,.2),rgba(15,27,51,.9))}
.more-card .mt{position:relative;z-index:2;padding:1rem;font-family:'Oswald';font-weight:600;font-size:1rem}
.more-card .mt small{display:block;font-family:'Be Vietnam Pro';font-weight:400;color:var(--amber-light);font-size:.74rem}
@media(max-width:760px){.more-grid{grid-template-columns:1fr 1fr}}
@media(max-width:480px){.more-grid{grid-template-columns:1fr}}

/* footer */
footer{background:var(--navy-deep);border-top:1px solid rgba(255,255,255,.08);
  padding:2rem clamp(1.2rem,4vw,3rem);text-align:center}
footer img{width:50px;height:50px;border-radius:10px;margin:0 auto .8rem}
footer .fb{font-family:'Oswald';font-weight:700;letter-spacing:.04em;margin-bottom:.4rem}
footer .ft{font-size:.78rem;color:var(--text-light)}
footer .fc{font-size:.72rem;color:rgba(255,255,255,.35);margin-top:.9rem}

.reveal{opacity:0;transform:translateY(34px);transition:opacity .7s cubic-bezier(.2,.7,.2,1),transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important}.dhero-bg{transform:none!important}}

/* ───── Bỏ ảnh trùng lặp trên trang chi tiết — chỉ giữ ảnh hero ───── */
.gallery{display:none}                          /* bỏ ảnh BIM trùng giữa các trang */
.dgrid,.dgrid.rev{display:block}                /* mục có ảnh render lặp lại hero → 1 cột */
.dgrid img{display:none}
.more-card{min-height:auto;align-items:stretch;background:rgba(255,255,255,.05);padding:1.05rem 1.2rem}
.more-card .mbg,.more-card .mov{display:none}   /* bỏ ảnh nền thẻ "Dự án khác" */
.more-card .mt{position:static;padding:0}
.more-card .mt small{color:var(--amber-light)}

/* ───────── LOGO DUAL-TONE BALANCE · amber + teal (khớp màu logo) ───────── */
#progress{background:linear-gradient(90deg,var(--amber),var(--teal-light))}
.dstat:nth-child(even) .v{color:var(--teal-light)}
.dhero .tags .t.edge{color:var(--teal-light);border-color:rgba(22,169,155,.5);background:rgba(22,169,155,.14)}