/* ==========================================================================
   duan.css — PHẦN GIAO NHAU của CSS sáu trang trụ dự án, bóc ra bằng
   tools/xuong-du-an/boc.mjs. Trước đây 17 KB này bị chép vào từng tệp HTML
   (6 bản), nên sửa một chỗ là phải nhớ sửa sáu chỗ — và không ai nhớ nổi.
   ⚠️ ĐỪNG sửa tay tệp này: chạy lại boc.mjs là mất. Sửa vào
   tools/xuong-du-an/noi-dung/<MÃ>/rieng.css hoặc vào bộ khuôn.
   Sinh lúc: 2026-08-12 · 162 quy tắc
   ========================================================================== */
/* ============ Trang chi tiết dự án dạng TAB (portal) ============ */
:root{ --xanh:#0d5c73; --xanh-dam:#0a4757; --vang:#c9a24b; --nen:#f4f6f7; --vien:#e3e8ea; }
/* Thu nhỏ toàn trang còn 80% trên desktop (mobile giữ nguyên cho dễ đọc) */
@media (min-width:761px){ body{ zoom:.8; } }
/* Khung nội dung rộng, bám bố cục ảnh salepro (lề hai bên) */
.duan-top .wrap, .duan-tit .wrap, .tabbar .wrap, .hero-hold{ max-width:1640px; }
.duan-top{ background:#fff; border-bottom:none; }
.duan-top .wrap{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:18px 24px 6px; }
.crumb{ font-size:14px; color:#8a979d; }
.crumb a{ color:#8a979d; text-decoration:none; }
.crumb a:hover{ color:var(--xanh); }
.crumb b{ color:#8a979d; font-weight:500; }
.btn-share{ display:inline-flex; align-items:center; gap:7px; border:1px solid var(--vien);
  background:#fff; color:#16333c; border-radius:999px; padding:8px 17px; font-size:14px; font-weight:700; cursor:pointer; }
.btn-share:hover{ border-color:var(--xanh); color:var(--xanh); }
/* Tiêu đề dự án = THẺ bo góc nền xám */
.duan-tit{ background:transparent; border-bottom:none; }
.duan-tit .wrap{ padding:0 24px; margin:0 auto; }
.duan-tit .card{ background:#f4f6f7; border-radius:16px; padding:26px 34px; }
.duan-tit h1{ margin:0 0 8px; font-size:clamp(22px,2.4vw,30px); letter-spacing:.5px; color:#16333c; font-weight:800; }
.duan-tit p{ margin:0; color:#7a878d; font-size:15px; max-width:900px; }
/* Thanh tab dính — canh giữa, gạch phân cách */
.tabbar{ position:sticky; top:0; z-index:40; background:#fff; border-bottom:1px solid var(--vien); margin-top:14px; }
.tabbar .wrap{ display:flex; overflow-x:auto; padding:13px 24px; margin:0 auto;
  gap:9px; scrollbar-width:thin; -webkit-overflow-scrolling:touch; }
.tabbar button:first-child{ margin-left:auto; } .tabbar button:last-child{ margin-right:auto; }
.tabbar button{ flex:0 0 auto; display:inline-flex; align-items:center; gap:8px; white-space:nowrap;
  background:#f4f8f9; border:1px solid #e3ecee; border-radius:13px; color:#5a6b71;
  padding:11px 16px; font-size:15px; font-weight:600; cursor:pointer; font-family:inherit; transition:all .2s ease; }
.tabbar button svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round; flex:0 0 auto; opacity:.9; }
.tabbar button:hover{ background:#e9f2f4; color:var(--xanh); border-color:#c9dee2; }
.tabbar button.on{ background:linear-gradient(135deg,var(--xanh),var(--xanh-dam)); color:#fff;
  border-color:transparent; box-shadow:0 8px 18px rgba(13,92,115,.3); }
.tabbar button.on svg{ stroke:#f3e7c4; opacity:1; }
/* Hero bo góc nằm trong khung */
.hero-hold{ margin:0 auto; padding:22px 24px 0; }
.hero-hold .slider{ border-radius:16px; }
@media(max-width:820px){
  .tabbar .wrap{ justify-content:flex-start; }
  .duan-tit .card{ padding:20px 20px; }
  .hero-hold{ padding:14px 14px 0; }
  .hero-hold .slider{ border-radius:12px; }
  .solieu .wrap{ padding:16px 14px 0; }
  .solieu .o{ padding:18px 8px; }
  .solieu .o b{ font-size:19px; }
  .solieu .o span{ font-size:11.5px; line-height:1.3; }
}
.panel.on{ display:block; animation:hien .35s ease; }
@keyframes hien{ from{opacity:0; transform:translateY(6px);} to{opacity:1; transform:none;} }
/* Hero slider tab Tổng quan */
.slider{ position:relative; overflow:hidden; background:#08363f; }
.slider .slide{ display:none; position:relative; }
.slider .slide.on{ display:block; }
.slider .slide img{ width:100%; height:min(78vh,760px); object-fit:cover; display:block; }
.slider .cap{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center;
  justify-content:center; text-align:center; color:#fff; padding:24px;
  background:linear-gradient(180deg,rgba(6,42,50,.28) 0%,rgba(6,42,50,.12) 40%,rgba(6,42,50,.55) 100%); }
.slider .cap .bst{ font-family:Georgia,'Times New Roman',serif; font-style:italic; font-size:clamp(22px,3.4vw,40px);
  color:#f3e7c4; margin:0 0 4px; font-weight:400; text-shadow:0 2px 14px rgba(0,0,0,.35); }
.slider .cap h2{ font-size:clamp(28px,5.4vw,62px); font-weight:800; letter-spacing:1px; line-height:1.06;
  margin:0 0 20px; text-shadow:0 3px 22px rgba(0,0,0,.45); text-transform:uppercase; }
.slider .cap .sub{ max-width:760px; font-size:clamp(14px,1.7vw,18px); line-height:1.7; margin:0;
  color:#eaf2f2; text-shadow:0 2px 12px rgba(0,0,0,.5); }
.slider .cap .sub.mt{ margin-top:18px; font-style:italic; color:#f3e7c4; }
.slider .arw{ position:absolute; top:50%; transform:translateY(-50%); z-index:3; width:52px; height:52px;
  border-radius:50%; border:1px solid rgba(255,255,255,.5); background:rgba(8,54,63,.28); color:#fff;
  font-size:26px; cursor:pointer; display:flex; align-items:center; justify-content:center; backdrop-filter:blur(2px); }
.slider .arw:hover{ background:rgba(8,54,63,.6); }
.slider .arw.prev{ left:16px; }
.slider .arw.next{ right:16px; }
.slider .dots{ position:absolute; bottom:18px; left:50%; transform:translateX(-50%); z-index:3; display:flex; gap:8px; }
.slider .dots i{ width:9px; height:9px; border-radius:50%; background:rgba(255,255,255,.45); cursor:pointer; }
.slider .dots i.on{ background:var(--vang); width:24px; border-radius:6px; }
/* Dải số liệu — contain, bo góc, thẳng hàng với hero */
.solieu{ background:transparent; color:#fff; }
.solieu .wrap{ max-width:1640px; margin:0 auto; padding:22px 24px 0; }
.solieu .grid{ display:grid; grid-template-columns:repeat(3,1fr); background:var(--xanh);
  border-radius:16px; overflow:hidden; }
.solieu .o{ padding:26px 18px; text-align:center; }
.solieu .o + .o{ border-left:1px solid rgba(255,255,255,.14); }
.solieu .o b{ display:block; font-size:clamp(22px,2.6vw,30px); font-weight:800; color:#f3e7c4; }
.solieu .o span{ font-size:14px; color:#dbeaea; }
/* Khối trong panel */
.khoi{ padding:44px 0; }
.khoi .wrap{ max-width:1000px; }
.khoi h3{ font-size:23px; color:#16333c; margin:0 0 14px; }
.khoi p{ color:#455a60; line-height:1.75; margin:0 0 14px; }
.pk-grid{ display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:10px; }
.pk-card{ border:1px solid var(--vien); border-radius:14px; overflow:hidden; background:#fff; }
.pk-card img{ width:100%; height:180px; object-fit:cover; display:block; }
.pk-card .b{ padding:16px 18px; }
.pk-card h4{ margin:0 0 6px; color:var(--xanh); font-size:18px; }
.pk-card p{ margin:0; font-size:14px; color:#5a6b71; line-height:1.6; }
/* Trạng thái ô để lại số */
.capnhat{ padding:60px 0; }
.capnhat .box{ max-width:640px; margin:0 auto; text-align:center; border:1px dashed var(--vien);
  border-radius:16px; padding:44px 26px; background:#fff; }
.capnhat .ic{ font-size:42px; }
.capnhat h3{ font-size:22px; color:#16333c; margin:12px 0 8px; }
.capnhat p{ color:#5a6b71; line-height:1.7; margin:0 auto 20px; max-width:480px; }
.capnhat form{ display:flex; gap:8px; max-width:440px; margin:0 auto; flex-wrap:wrap; }
.capnhat form input{ flex:1 1 150px; min-width:0; padding:12px 14px; border:1px solid var(--vien);
  border-radius:10px; font-size:15px; font-family:inherit; }
.capnhat form button{ flex:0 0 auto; }
/* Bảng thông số dự án — phối xanh ngọc + ánh kim, chuyên nghiệp */
.thongso{ margin:0; border:1px solid #dfeaed; border-radius:16px 16px 18px 18px;
  overflow:hidden; background:#fff; box-shadow:0 16px 40px rgba(13,92,115,.12); height:100%;
  /* Bảng này sống trong cột hẹp của .ov2 nên phải tự đo CHÍNH MÌNH, không đo khung nhìn:
     ở khổ 1024 cột chỉ còn ~220px trong khi cột nhãn khai cứng 225px. Xem luật dưới. */
  container-type:inline-size; }
/* ⚠ CỘT NHÃN PHẢI CO ĐƯỢC — đã trả giá 19/08/2026.
   Bản cũ khai cứng `225px 1fr`. Trong .ov2 (lưới 2 cột, KHÔNG có luật xếp dọc) ở dải
   820–1280px thì cột chứa bảng chỉ còn ~220px ⇒ track 225px đã nuốt hết chỗ, `1fr` tụt
   về ~38px và TOÀN BỘ giá trị rớt dọc từng chữ cái một, không đọc nổi. Cổng quet-bo-cuc
   CÓ bắt (VERTICAL_TEXT) nhưng nằm lẫn trong log dài nên chưa ai đọc.
   minmax(0,225px) cho phép co; đây là lưới an toàn cho trình duyệt chưa hiểu @container. */
.thongso .r{ display:grid; grid-template-columns:minmax(0,225px) minmax(0,1fr); align-items:stretch; }
/* Hẹp thật thì XẾP DỌC hẳn: nhãn một dòng, giá trị một dòng. Đo bằng @container nên đúng
   ở mọi khổ màn — bảng nằm trong cột hẹp hay trải hết bề ngang đều tự xử. */
@container (max-width:430px){
  .thongso .r{ grid-template-columns:1fr; }
  .thongso dt{ border-right:0; border-bottom:1px solid #dceaed; padding-bottom:9px; }
  .thongso dd{ padding-top:11px; }
}
.thongso .r:not(:last-child){ border-bottom:1px solid #eaf1f2; }
.thongso dt{ padding:15px 20px; font-weight:700; color:var(--xanh); font-size:13.5px; line-height:1.4;
  letter-spacing:.2px; background:linear-gradient(180deg,#eef6f8,#e6f1f4); border-right:1px solid #dceaed;
  display:flex; align-items:center; position:relative; transition:background .25s,color .25s; }
.thongso dt::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--vang); opacity:0; transition:opacity .25s; }
.thongso dd{ padding:15px 22px; margin:0; color:#153b46; font-weight:600; font-size:15px; line-height:1.55;
  background:#fff; display:flex; align-items:center; transition:background .25s,color .25s; }
.thongso .r:nth-child(even) dd{ background:#f8fcfc; }
/* Khối bắt khách */
.batkhach{ display:flex; flex-wrap:wrap; gap:28px; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,var(--xanh),var(--xanh-dam)); border:1.5px solid var(--vang);
  border-radius:20px; padding:34px 40px; box-shadow:0 20px 50px rgba(13,92,115,.22); position:relative; overflow:hidden; }
.batkhach::before{ content:""; position:absolute; right:-60px; top:-60px; width:220px; height:220px;
  background:radial-gradient(circle,rgba(201,162,75,.28),transparent 70%); pointer-events:none; }
.bk-text{ flex:1 1 340px; min-width:280px; position:relative; z-index:1; }
.bk-nhan{ display:inline-block; color:var(--vang); font-weight:700; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:10px; }
.bk-text h3{ color:#fff; font-size:clamp(21px,2.6vw,28px); line-height:1.25; margin:0 0 10px; }
.bk-text p{ color:rgba(255,255,255,.9); font-size:15.5px; line-height:1.6; margin:0; max-width:56ch; }
.bk-form{ flex:0 0 auto; width:340px; max-width:100%; gap:12px; margin:0; position:relative; z-index:1; }
.bk-form .btn-gold{ width:100%; padding:14px; font-size:16px; }
@media (max-width:760px){ .batkhach{ padding:26px 22px; } .bk-form{ width:100%; } }
.thongso .r:hover dt{ background:linear-gradient(180deg,var(--xanh),var(--xanh-dam)); color:#fff; }
.thongso .r:hover dt::before{ opacity:1; }
.thongso .r:hover dd{ background:#f1f9fa; color:var(--xanh-dam); }
/* Hệ thống tiện ích */
.tienich{ display:grid; grid-template-columns:repeat(4,1fr); gap:12px; margin-top:8px; }
.tienich .t{ display:flex; align-items:center; gap:10px; border:1px solid var(--vien); border-radius:12px;
  padding:14px 15px; background:#fff; font-size:14px; color:#33454b; font-weight:600; line-height:1.35; }
.tienich .t .i{ font-size:20px; flex:0 0 auto; }
/* Tiêu đề khối kiểu salepro: nhãn nhỏ + tít lớn, canh giữa */
.kdau{ text-align:center; margin-bottom:26px; }
.kdau .nhan{ display:inline-block; color:var(--vang); font-weight:700; font-size:13px; letter-spacing:2px;
  text-transform:uppercase; margin-bottom:8px; }
.kdau h3{ font-size:clamp(22px,3vw,30px); color:#16333c; margin:0; }
.kdau h3::after{ content:""; display:block; width:56px; height:3px; background:var(--vang); border-radius:2px; margin:12px auto 0; }
.tq-bg::after{ content:""; position:absolute; inset:0; z-index:0; background:linear-gradient(180deg,
  rgba(238,243,245,.99) 0%, rgba(238,243,245,.86) 20%, rgba(232,239,241,.86) 80%, rgba(238,243,245,.99) 100%); }
.tq-bg > .wrap{ position:relative; z-index:1; }
.ov2{ display:grid; grid-template-columns:minmax(0,0.88fr) minmax(0,1.12fr); gap:30px; align-items:stretch; }
.ov2 .ov-img{ position:relative; border-radius:18px; overflow:hidden; min-height:440px;
  box-shadow:0 16px 42px rgba(13,92,115,.18); }
.ov2 .ov-img img{ width:100%; height:100%; object-fit:cover; display:block; }
.ov2 .ov-img .cap{ position:absolute; left:0; right:0; bottom:0; padding:30px 22px 16px; color:#fff;
  font-size:14px; font-weight:600; letter-spacing:.3px; background:linear-gradient(transparent, rgba(6,40,48,.85)); }
/* Thẻ ảnh (sản phẩm + tiện ích): ảnh + tít overlay */
.imgcards{ display:grid; grid-template-columns:repeat(4,1fr); gap:16px; }
.imgcards.p3{ grid-template-columns:repeat(3,1fr); }
.imgcard{ position:relative; border-radius:14px; overflow:hidden; aspect-ratio:4/3; box-shadow:0 8px 22px rgba(13,92,115,.1); }
.imgcard img{ width:100%; height:100%; object-fit:cover; display:block; transition:transform .5s ease; }
/* .lo = thẻ MẶT BẰNG/LAYOUT: ảnh bản vẽ có chữ nung sẵn ở góc, khung 4/3 + cover xén
   mất ~11% bề ngang là cụt chữ tiêu đề. Đổi sang 3/2 + contain, nền trắng cho khớp
   nền bản vẽ. Chỉ dùng cho bản vẽ, KHÔNG dùng cho ảnh phối cảnh (contain sẽ để lộ
   hai dải trắng hai bên). */
.imgcard.lo{ aspect-ratio:3/2; background:#fff; }
.imgcard.lo img{ object-fit:contain; }
.imgcard:hover img{ transform:scale(1.06); }
.imgcard .t{ position:absolute; inset:auto 0 0 0; padding:34px 14px 14px; color:#fff; font-weight:700;
  font-size:14.5px; line-height:1.3; letter-spacing:.4px; text-transform:uppercase;
  background:linear-gradient(transparent, rgba(6,40,48,.86)); }
/* Banner CTA cuối */
.bannercta{ position:relative; border-radius:20px; overflow:hidden; min-height:340px; display:flex;
  align-items:center; justify-content:center; text-align:center; }
.bannercta img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.bannercta .in{ position:relative; z-index:2; color:#fff; padding:40px 26px; max-width:760px; }
.bannercta::before{ content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg,rgba(6,40,48,.62),rgba(6,40,48,.82)); }
.bannercta .in .eye::before, .bannercta .in .eye::after{ content:"—"; margin:0 10px; opacity:.7; }
.bannercta .in .btn{ margin-top:6px; }
footer.ft-dark .ftg{ display:grid; grid-template-columns:1.7fr 1fr 1fr 1.1fr; gap:38px;
  max-width:1640px; margin:0 auto; padding:56px 24px 34px; }
footer.ft-dark .brand{ display:flex; align-items:center; gap:12px; }
footer.ft-dark .brand .mark{ width:38px; height:38px; border-radius:9px; background:var(--vang); color:#07222c;
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:15px; flex:0 0 auto; }
footer.ft-dark .brand > span:last-child{ color:#fff; font-weight:700; font-size:16px; line-height:1.3; }
footer.ft-dark .ft-tag{ color:#9db5bb; font-size:14px; line-height:1.7; margin:16px 0 18px; max-width:360px; }
footer.ft-dark .ft-info{ list-style:none; margin:0; padding:0; }
footer.ft-dark .ft-info li{ display:flex; gap:10px; align-items:flex-start; margin-bottom:12px; font-size:14px; color:#cfe0e4; }
footer.ft-dark .ft-info svg{ flex:0 0 auto; margin-top:3px; color:var(--vang); }
footer.ft-dark h4{ color:#fff; font-size:15px; letter-spacing:1.2px; margin:2px 0 18px; padding-bottom:10px;
  position:relative; text-transform:uppercase; }
footer.ft-dark h4::after{ content:""; position:absolute; left:0; bottom:0; width:34px; height:2px; background:var(--vang); }
footer.ft-dark ul{ list-style:none; margin:0; padding:0; }
footer.ft-dark .ft-col li{ margin-bottom:13px; font-size:14.5px; }
footer.ft-dark a{ color:#cfe0e4; text-decoration:none; transition:color .2s; }
footer.ft-dark a:hover{ color:#f3e7c4; }
footer.ft-dark .ft-social{ display:flex; gap:12px; flex-wrap:wrap; }
footer.ft-dark .ft-social .s{ width:46px; height:46px; border-radius:50%; background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.18); display:flex; align-items:center; justify-content:center;
  color:#e6f0f2; transition:all .25s ease; }
footer.ft-dark .ft-social .s:hover{ background:var(--vang); color:#07222c; border-color:var(--vang); transform:translateY(-3px); }
footer.ft-dark .ft-copy{ border-top:1px solid rgba(255,255,255,.12); max-width:1640px; margin:0 auto;
  padding:22px 24px 42px; color:#8aa2a8; font-size:12.5px; line-height:1.75; }
@media(max-width:900px){ footer.ft-dark .ftg{ grid-template-columns:1fr 1fr; gap:28px; } }
@media(max-width:560px){ footer.ft-dark .ftg{ grid-template-columns:1fr; } }
/* Thẻ tiêu đề dự án — nền xanh ngọc gradient, nhấn ánh kim */
.duan-tit .card{ background:linear-gradient(120deg,#0d5c73 0%,#0a4a5b 58%,#08373f 100%);
  border-radius:20px; padding:38px 44px; position:relative; overflow:hidden;
  box-shadow:0 18px 46px rgba(10,55,68,.28); }
.duan-tit .card::after{ content:""; position:absolute; right:-70px; top:-70px; width:280px; height:280px;
  border-radius:50%; background:radial-gradient(circle, rgba(243,231,196,.22), transparent 68%); pointer-events:none; }
.duan-tit .card .eye{ display:inline-flex; align-items:center; gap:9px; color:#f3e7c4; font-weight:700;
  font-size:13px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:14px; }
.duan-tit .card .eye::before{ content:""; width:22px; height:2px; background:var(--vang); border-radius:2px; }
.duan-tit .card h1{ color:#fff; font-size:clamp(28px,3.2vw,42px); margin:0 0 12px; letter-spacing:1px;
  font-weight:800; line-height:1.1; text-shadow:0 2px 16px rgba(0,0,0,.22); }
.duan-tit .card p{ color:#d3e6ea; font-size:16.5px; line-height:1.75; max-width:920px; margin:0 0 20px; }
.duan-tit .card .facts{ display:flex; flex-wrap:wrap; gap:11px; }
.duan-tit .card .facts span{ display:inline-flex; align-items:center; gap:8px; background:rgba(255,255,255,.1);
  border:1px solid rgba(255,255,255,.2); border-radius:999px; padding:9px 17px; font-size:14px; color:#eaf5f6; }
.duan-tit .card .facts b{ color:#f3e7c4; font-weight:800; }
.duan-tit .card .facts svg{ color:#f3e7c4; flex:0 0 auto; }
@media(max-width:560px){ .duan-tit .card{ padding:26px 22px; } }
.duan-tit h1{ font-size:clamp(24px,2.6vw,32px); }
.duan-tit p{ font-size:16.5px; }
.tabbar button{ font-size:15.5px; }
.kdau .nhan{ font-size:15px; letter-spacing:2.5px; }
.kdau h3{ font-size:clamp(28px,3.8vw,42px); }
.thongso dt{ font-size:14.5px; }
.thongso dd{ font-size:16.5px; }
.khoi h3{ font-size:28px; }
.khoi p{ font-size:17px; line-height:1.8; }
.solieu .o b{ font-size:clamp(24px,2.8vw,33px); }
.solieu .o span{ font-size:15px; }
.pk-card h4{ font-size:19px; }
.pk-card p{ font-size:15px; }
.imgcard .t{ font-size:15.5px; }
.ov2 .ov-img .cap{ font-size:15px; }
.capnhat h3{ font-size:23px; }
.capnhat p{ font-size:16.5px; }
.capnhat form input{ font-size:16px; }