/* Trang dịch vụ /dich-vu-cung-cap/ve-sinh-cong-nghiep/ — chỉ phần riêng của trang; thành phần chung ở site.css.
   Chỉ 5 màu thương hiệu. Thanh chọn hạng mục (.dv-nav) dính dưới đầu trang: desktop 88px, điện thoại 72px. */
@media (min-width:850px){html{scroll-padding-top:168px}}
@media (max-width:849px){html{scroll-padding-top:140px}}
.trang-dich-vu .dv{scroll-margin-top:0}

/* ——— Đầu trang ——— */
.trang-dich-vu .hero-con{border-bottom:0;padding-bottom:48px}
.dv-hero__phai{display:flex;flex-direction:column;align-items:flex-start;gap:22px}
.dv-hero__nut{display:flex;flex-wrap:wrap;gap:12px}
.dv-hero__nut .nut svg{width:18px;height:18px}
.dv-hero__phai .dau-iso{margin-top:0}

/* ——— Ảnh bìa + con số ——— */
.bia__anh{position:relative;margin:0;border-radius:var(--bo);overflow:hidden;aspect-ratio:8/3;background:var(--den)}
.bia__anh img{width:100%;height:100%;object-fit:cover}
.bia__anh figcaption{position:absolute;top:14px;right:14px;padding:7px 12px;border-radius:8px;background:var(--trang);color:var(--den);font-size:12px;font-weight:700;line-height:1.35}
.bia__anh figcaption span{color:var(--ghi)}
.bia .khung{position:relative}
.bia__so{position:absolute;left:calc(var(--le) + 28px);bottom:28px;z-index:1;display:grid;grid-template-columns:repeat(3,auto);background:var(--trang);border-radius:var(--bo);box-shadow:0 18px 44px rgba(0,0,0,.22)}
.bia__so li{position:relative;padding:22px 30px 20px;min-width:150px}
.bia__so li+li{border-left:1px solid var(--ghi-nhat)}
.bia__so li::before{content:"";position:absolute;left:30px;top:0;width:28px;height:3px;background:var(--cam)}
.bia__so b{display:block;font-size:40px;line-height:1.05;font-weight:800;letter-spacing:-.04em}
.bia__so span{display:block;margin-top:6px;font-size:13px;font-weight:600;color:var(--ghi);white-space:nowrap}

/* ——— Thanh chọn nhanh 4 hạng mục (dính khi cuộn) ——— */
.hm-sec{padding:64px 0 var(--khoang)}
.dv-nav{position:sticky;top:88px;z-index:90;background:var(--trang);border-top:1px solid var(--ghi-nhat);border-bottom:1px solid var(--ghi-nhat)}
.dv-nav__trong{display:flex;align-items:center;gap:24px;min-height:64px}
.dv-nav ol{display:flex;gap:2px;flex:1;min-width:0;margin-left:-14px}
.dv-nav a[data-muc]{position:relative;display:inline-flex;align-items:center;gap:10px;height:64px;padding:0 14px;font-size:15px;font-weight:700;color:var(--ghi);text-decoration:none;white-space:nowrap;transition:color .2s}
.dv-nav a[data-muc] b{font-size:12px;font-weight:800;letter-spacing:.1em;color:var(--ghi)}
.dv-nav a[data-muc]::after{content:"";position:absolute;left:14px;right:14px;bottom:-1px;height:3px;border-radius:2px;background:var(--cam);transform:scaleX(0);transform-origin:0 50%;transition:transform .4s var(--em)}
.dv-nav a[data-muc]:hover,.dv-nav a[data-muc].dang-xem{color:var(--den)}
.dv-nav a[data-muc].dang-xem b{color:var(--den)}
.dv-nav a[data-muc].dang-xem::after{transform:scaleX(1)}

/* ——— Bốn hạng mục, bản chi tiết ——— */
.hm-dau{margin-top:88px}
.hm{align-items:start}
.hm .dv__anh{position:sticky;top:176px}
.hm h3{margin-top:14px}
.hm-ct{display:grid;grid-template-columns:1fr 1fr;gap:26px 28px;margin-top:28px;padding-top:24px;border-top:1px solid var(--ghi-nhat)}
.hm-ct__rong{grid-column:1/-1}
.hm-ct h4{font-size:12px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:var(--ghi);margin-bottom:12px}
.hm-ds li{position:relative;padding-left:18px;font-size:15px;line-height:1.5;font-weight:600}
.hm-ds li+li{margin-top:8px}
.hm-ds li::before{content:"";position:absolute;left:0;top:.55em;width:7px;height:7px;border-radius:2px;background:var(--cam)}
.hm-qt{display:flex;flex-wrap:wrap;gap:6px}
.hm-qt li{font-size:13px;font-weight:700;line-height:1.3;padding:7px 12px;border:1.5px solid var(--ghi-nhat);border-radius:999px}
.hm-hc{border-top:1px solid var(--ghi-nhat)}
.hm-hc li{display:flex;justify-content:space-between;align-items:baseline;gap:6px 16px;flex-wrap:wrap;padding:10px 0;border-bottom:1px solid var(--ghi-nhat);font-size:15px}
.hm-hc b{font-weight:800}
.hm-hc span{font-size:14px;color:var(--ghi);font-weight:600}
.hm .dv__lk{margin-top:30px}
.hm .dv__lk .nut{min-height:50px;padding:0 22px;font-size:15px}

/* ——— Loại công trình (nền đen) ——— */
.lv-sec .dan{color:var(--ghi-nhat)}
.lv-luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:56px}   /* 7 khối công trình (TGĐ 03/10/2026): 4 + 3 */
.lv-luoi>li{display:flex}
.lv-the{flex:1;display:flex;flex-direction:column;padding:30px 28px 26px;border:1.5px solid var(--ghi);border-radius:var(--bo);color:var(--trang);text-decoration:none;transition:border-color .25s,transform .35s var(--em),background-color .25s}
.lv-the:hover{border-color:var(--trang);transform:translateY(-4px)}
.lv-the h3{margin-top:0;font-size:22px;line-height:1.25;font-weight:800;letter-spacing:-.02em}
.lv-the p{margin-top:10px;font-size:14px;line-height:1.6;color:var(--ghi-nhat)}
.lv-the__ds{margin:18px 0 22px;padding-top:16px;border-top:1px solid var(--ghi)}
.lv-the__ds li{position:relative;padding-left:18px;font-size:15px;line-height:1.45;font-weight:700}
.lv-the__ds li+li{margin-top:8px}
.lv-the__ds li::before{content:"";position:absolute;left:0;top:.5em;width:7px;height:7px;border-radius:2px;background:var(--cam)}
.lv-the__lk{margin-top:auto;display:inline-flex;align-items:center;gap:8px;align-self:flex-start;font-size:15px;font-weight:800;color:var(--cam);background:linear-gradient(var(--cam),var(--cam)) left bottom/0 2px no-repeat;padding-bottom:4px;transition:background-size .35s var(--em)}
.lv-the__lk svg{width:16px;height:16px;transition:transform .3s var(--em)}
.lv-the:hover .lv-the__lk{background-size:100% 2px}
.lv-the:hover .lv-the__lk svg{transform:translateX(4px)}

/* ——— Quy trình hợp tác ——— */
.qt-luoi{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.qt-trai{position:sticky;top:120px}
.qt-dan{margin-top:20px}
.qt-anh{position:relative;margin:36px 0 0;border-radius:var(--bo);overflow:hidden;aspect-ratio:16/10;background:var(--den)}
.qt-anh img{width:100%;height:100%;object-fit:cover;object-position:50% 45%}
.qt-anh figcaption{position:absolute;left:12px;bottom:12px;padding:6px 11px;border-radius:8px;background:var(--trang);color:var(--den);font-size:12px;font-weight:700}
.qt-buoc{border-top:1.5px solid var(--den)}
.qt-buoc li{display:grid;grid-template-columns:104px 1fr;gap:24px;padding:40px 0 38px;border-bottom:1px solid var(--ghi-nhat)}
.qt-so{font-size:56px;line-height:1;font-weight:800;letter-spacing:-.045em}
.qt-so::after{content:"";display:block;width:32px;height:3px;border-radius:2px;background:var(--cam);margin-top:16px}
.qt-buoc h3{font-size:clamp(24px,2.2vw,32px);line-height:1.2;font-weight:800;letter-spacing:-.025em}
.qt-buoc p{margin-top:10px;font-size:17px;line-height:1.6;color:var(--ghi);max-width:34em}

/* ——— Hỏi đáp ——— */
.hd-sec{border-top:1px solid var(--ghi-nhat)}
.hd-luoi{display:grid;grid-template-columns:5fr 7fr;gap:72px;align-items:start}
.hd-trai{position:sticky;top:120px}
.hd-trai .dan{margin-top:20px}
.hd-nut{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.hd-nut .nut svg{width:18px;height:18px}
.hd-ds{border-top:1.5px solid var(--den)}
.hd{border-bottom:1px solid var(--ghi-nhat)}
.hd summary{display:flex;justify-content:space-between;align-items:center;gap:24px;padding:26px 0;font-size:20px;line-height:1.35;font-weight:800;letter-spacing:-.015em;cursor:pointer;list-style:none}
.hd summary::-webkit-details-marker{display:none}
.hd summary:hover span{text-decoration:underline;text-decoration-color:var(--cam);text-decoration-thickness:2px;text-underline-offset:5px}
.hd summary i{position:relative;flex:none;width:36px;height:36px;border:1.5px solid var(--ghi-nhat);border-radius:50%;transition:background-color .25s,border-color .25s}
.hd summary i::before,.hd summary i::after{content:"";position:absolute;left:50%;top:50%;width:12px;height:2px;margin:-1px 0 0 -6px;background:var(--den);transition:transform .35s var(--em),background-color .25s}
.hd summary i::after{transform:rotate(90deg)}
.hd[open] summary i{background:var(--den);border-color:var(--den)}
.hd[open] summary i::before,.hd[open] summary i::after{background:var(--trang)}
.hd[open] summary i::after{transform:rotate(0deg)}
.hd__tl{padding:0 60px 28px 0}
.hd__tl p{font-size:17px;line-height:1.65;color:var(--ghi)}
.hd__tl .lk{margin-top:14px;font-size:15px}

/* ——— Kích thước màn hình ——— */
@media (max-width:1180px){
  .dv-nav a[data-muc]{padding:0 10px;font-size:14px}
  .dv-nav a[data-muc]::after{left:10px;right:10px}
  .dv-nav ol{margin-left:-10px}
  .lv-luoi{grid-template-columns:repeat(2,1fr)}
  .lv-luoi>li:last-child:nth-child(odd){grid-column:1/-1}   /* khối lẻ cuối trải hết hàng */
}
@media (max-width:980px){
  .bia__so{position:static;margin-top:16px;grid-template-columns:repeat(3,1fr);box-shadow:none;border:1.5px solid var(--ghi-nhat)}
  .bia__so li{min-width:0;padding:20px 18px 18px}
  .bia__so li::before{left:18px}
  .hm .dv__anh{position:static}
  .qt-luoi,.hd-luoi{grid-template-columns:1fr;gap:48px}
  .qt-trai,.hd-trai{position:static}
}
@media (max-width:849px){
  .trang-dich-vu .hero-con{padding-bottom:36px}
  .dv-hero__phai,.dv-hero__nut{width:100%}
  .dv-hero__nut .nut{flex:1 1 100%}
  .bia__anh{aspect-ratio:4/3}
  .bia__anh figcaption{top:10px;right:10px;font-size:11px;padding:5px 9px}
  .bia__so b{font-size:30px}
  .bia__so span{white-space:normal;font-size:12px}
  .bia__so li{padding:18px 12px 16px}
  .bia__so li::before{left:12px}
  .hm-sec{padding-top:40px}
  .dv-nav{top:72px}
  .dv-nav__trong{min-height:54px;padding:0}
  .dv-nav ol{margin:0;overflow-x:auto;scrollbar-width:none;padding:0 var(--le);scroll-padding:0 var(--le)}
  .dv-nav ol::-webkit-scrollbar{display:none}
  .dv-nav li{flex:none}
  .dv-nav a[data-muc]{height:54px;padding:0 12px;font-size:14px}
  .dv-nav a[data-muc]::after{left:12px;right:12px}
  .dv-nav li:first-child a[data-muc]{padding-left:0}
  .dv-nav li:first-child a[data-muc]::after{left:0}
  .hm-dau{margin-top:56px}
  .hm-ct{gap:22px}
  .lv-luoi{grid-template-columns:1fr;margin-top:36px}
  .lv-the{padding:26px 22px 22px}
  .qt-buoc li{grid-template-columns:64px 1fr;gap:16px;padding:30px 0 28px}
  .qt-so{font-size:40px}
  .qt-anh{margin-top:28px}
  .hd summary{font-size:18px;padding:22px 0;gap:16px}
  .hd summary i{width:32px;height:32px}
  .hd__tl{padding:0 0 24px}
  .hd__tl p{font-size:16px}
  .hd-nut .nut{flex:1 1 100%}
}
@media (max-width:560px){
  .hm-ct{grid-template-columns:1fr}
}