/* ==========================================================================
   Sài Gòn Group — Giao diện 2026 (header + trang chủ + footer)
   CSS viết tay, không framework.
   ========================================================================== */

:root{
  --sgg-do:#D71920;
  --sgg-do-dam:#B3141A;
  --sgg-navy:#0B2A4A;
  --sgg-navy-2:#123A63;
  --sgg-navy-3:#0A2036;
  --sgg-chu:#1F2937;
  --sgg-chu-nhat:#6B7280;
  --sgg-vien:#E5E7EB;
  --sgg-nen:#F5F7FA;
  --sgg-khung:1320px;
  --sgg-r:14px;
  --sgg-r-lon:18px;
  --sgg-bong:0 10px 30px rgba(11,42,74,.08);
  --sgg-bong-cao:0 22px 50px rgba(11,42,74,.16);
  --sgg-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --sgg-cao-header:84px;
}

/* ==========================================================================
   HEADER
   ========================================================================== */
.sgg-hd{font-family:var(--sgg-font);position:relative;z-index:100}
.sgg-hd *,.sgg-hd *::before,.sgg-hd *::after{box-sizing:border-box}
.sgg-hd a{text-decoration:none;color:inherit}
.sgg-hd img{display:block;max-width:100%;height:auto}

.sgg-hd__top{background:var(--sgg-navy-3);color:rgba(255,255,255,.82);font-size:13px}
.sgg-hd__top .sgg-hd__khung{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:40px}
.sgg-hd__top-trai{display:flex;align-items:center;gap:22px;flex-wrap:wrap}
.sgg-hd__top-phai{display:flex;align-items:center;gap:18px}
.sgg-hd__top a:hover{color:#fff}

.sgg-hd__khung{width:100%;max-width:var(--sgg-khung);margin:0 auto;padding:0 24px}

.sgg-hd__chinh{background:#fff;border-bottom:1px solid var(--sgg-vien);transition:box-shadow .25s ease,padding .25s ease}
.sgg-hd__chinh .sgg-hd__khung{display:flex;align-items:center;justify-content:space-between;gap:28px;height:var(--sgg-cao-header);transition:height .25s ease}
.sgg-hd--dinh .sgg-hd__chinh{position:fixed;top:0;left:0;right:0;z-index:120;box-shadow:0 6px 24px rgba(11,42,74,.12)}
.sgg-hd--dinh .sgg-hd__chinh .sgg-hd__khung{height:68px}

.sgg-hd__logo{display:flex;align-items:center;gap:10px;flex:none}
.sgg-hd__logo img{max-height:54px;width:auto}
.sgg-hd__logo-chu{display:flex;flex-direction:column;line-height:1.1}
.sgg-hd__logo-chu b{font-size:17px;font-weight:800;letter-spacing:.02em;color:var(--sgg-navy)}
.sgg-hd__logo-chu span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--sgg-do)}

.sgg-hd__menu{display:flex;align-items:center;gap:6px;margin:0 auto;list-style:none;padding:0}
.sgg-hd__menu>li{position:relative}
.sgg-hd__menu>li>a{
  display:block;padding:10px 16px;font-size:15px;font-weight:600;color:var(--sgg-chu);
  border-radius:8px;transition:color .2s ease,background .2s ease;
}
.sgg-hd__menu>li>a::after{
  content:"";display:block;height:2px;width:0;background:var(--sgg-do);border-radius:2px;
  margin:6px auto 0;transition:width .25s ease;
}
.sgg-hd__menu>li>a:hover{color:var(--sgg-do)}
.sgg-hd__menu>li>a:hover::after,.sgg-hd__menu>li.dang-xem>a::after{width:70%}
.sgg-hd__menu>li.dang-xem>a{color:var(--sgg-do)}

/* Menu con (Dự án): mở khi rê chuột hoặc khi bấm Tab tới */
.sgg-hd__menu>li.co-con>a{padding-right:28px}
.sgg-hd__menu>li.co-con::after{
  content:"";position:absolute;right:12px;top:18px;width:7px;height:7px;pointer-events:none;
  border:solid var(--sgg-chu-nhat);border-width:0 1.8px 1.8px 0;transform:rotate(45deg);transition:transform .2s ease;
}
.sgg-hd__menu>li.co-con:hover::after{transform:translateY(3px) rotate(225deg)}
.sgg-hd__con{
  position:absolute;top:100%;left:0;z-index:140;min-width:250px;margin:0;padding:8px;list-style:none;
  background:#fff;border:1px solid var(--sgg-vien);border-radius:12px;box-shadow:var(--sgg-bong-cao);
  opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity .2s ease,transform .2s ease,visibility 0s linear .2s;
}
.sgg-hd__menu>li.co-con:hover>.sgg-hd__con,.sgg-hd__menu>li.co-con:focus-within>.sgg-hd__con{
  opacity:1;visibility:visible;transform:none;transition:opacity .2s ease,transform .2s ease,visibility 0s;
}
.sgg-hd__con a{display:block;padding:10px 14px;border-radius:8px;font-size:14.5px;font-weight:500;color:var(--sgg-chu);white-space:nowrap}
.sgg-hd__con a:hover{background:var(--sgg-nen);color:var(--sgg-do)}
.sgg-hd__con li:last-child{margin-top:4px;padding-top:4px;border-top:1px solid var(--sgg-vien)}
.sgg-hd__con li:last-child a{font-weight:700;color:var(--sgg-navy)}

.sgg-hd__phai{display:flex;align-items:center;gap:14px;flex:none}
.sgg-hd__tim{
  width:42px;min-width:42px;max-width:42px;height:42px;padding:0;margin:0;line-height:1;
  border-radius:50%;border:1px solid var(--sgg-vien);background:#fff;
  display:grid;place-items:center;color:var(--sgg-navy);cursor:pointer;transition:all .2s ease;
}
.sgg-hd__tim:hover{border-color:var(--sgg-do);color:var(--sgg-do)}
.sgg-hd__tim svg{width:18px;height:18px}
.sgg-hd__cta{
  display:inline-flex;align-items:center;gap:9px;background:var(--sgg-do);color:#fff;
  padding:13px 24px;border-radius:8px;font-size:14px;font-weight:700;letter-spacing:.04em;
  box-shadow:0 8px 20px rgba(215,25,32,.28);transition:transform .2s ease,background .2s ease;
}
.sgg-hd__cta:hover{background:var(--sgg-do-dam);transform:translateY(-2px);color:#fff}
.sgg-hd__cta svg{width:16px;height:16px}

.sgg-hd__hamburger{
  display:none;width:44px;min-width:44px;max-width:44px;height:44px;
  border:1px solid var(--sgg-vien);background:#fff;border-radius:10px;
  cursor:pointer;padding:0;margin:0;place-items:center;color:var(--sgg-navy);
}
.sgg-hd__hamburger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.sgg-hd__hamburger span::before,.sgg-hd__hamburger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;transition:transform .25s ease,top .25s ease;
}
.sgg-hd__hamburger span::before{top:-6px}
.sgg-hd__hamburger span::after{top:6px}
.sgg-hd--mo-menu .sgg-hd__hamburger span{background:transparent}
.sgg-hd--mo-menu .sgg-hd__hamburger span::before{top:0;transform:rotate(45deg)}
.sgg-hd--mo-menu .sgg-hd__hamburger span::after{top:0;transform:rotate(-45deg)}

/* Ô tìm kiếm trượt xuống */
.sgg-hd__o-tim{
  display:none;background:#fff;border-bottom:1px solid var(--sgg-vien);padding:16px 0;
}
.sgg-hd--mo-tim .sgg-hd__o-tim{display:block;animation:sgg-truot .25s ease}
.sgg-hd__o-tim form{display:flex;gap:10px;max-width:var(--sgg-khung);margin:0 auto;padding:0 24px}
.sgg-hd__o-tim input{
  flex:1;padding:13px 16px;border:1px solid var(--sgg-vien);border-radius:8px;font:inherit;font-size:15px;
}
.sgg-hd__o-tim input:focus{outline:none;border-color:var(--sgg-do);box-shadow:0 0 0 3px rgba(215,25,32,.12)}
.sgg-hd__o-tim button{
  background:var(--sgg-do);color:#fff;border:0;border-radius:8px;padding:0 26px;font:inherit;font-weight:700;cursor:pointer;
}
@keyframes sgg-truot{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

/* Menu điện thoại */
.sgg-hd__drawer{
  position:fixed;inset:0 0 0 auto;width:min(86vw,340px);background:#fff;z-index:130;
  transform:translateX(100%);display:flex;flex-direction:column;padding:20px;overflow-y:auto;
  /* Khi đóng: ẩn hẳn và không đổ bóng. Bóng -10px 0 40px trước đây hắt ngược vào
     mép phải màn hình thành một dải mờ trên mọi trang, kể cả lúc menu đang đóng. */
  visibility:hidden;box-shadow:none;
  transition:transform .3s ease,visibility 0s linear .3s;
}
.sgg-hd--mo-menu .sgg-hd__drawer{
  transform:none;visibility:visible;box-shadow:-10px 0 40px rgba(11,42,74,.2);
  transition:transform .3s ease,visibility 0s;
}
.sgg-hd__drawer ul{list-style:none;margin:16px 0 0;padding:0;display:flex;flex-direction:column}
.sgg-hd__drawer li a{display:block;padding:14px 4px;font-size:16px;font-weight:600;color:var(--sgg-chu);border-bottom:1px solid var(--sgg-vien)}
.sgg-hd__drawer li a:hover{color:var(--sgg-do)}
.sgg-hd__drawer .sgg-hd__drawer-con{margin:0;padding:0 0 0 14px}
.sgg-hd__drawer .sgg-hd__drawer-con a{font-size:15px;font-weight:500;padding:11px 4px;color:var(--sgg-chu-nhat)}
.sgg-hd__phu{
  position:fixed;inset:0;background:rgba(6,22,40,.5);z-index:125;opacity:0;visibility:hidden;transition:opacity .3s ease;
}
.sgg-hd--mo-menu .sgg-hd__phu{opacity:1;visibility:visible}
/* Menu điện thoại dài hơn màn hình (có danh sách dự án): không cho khung flex bóp dẹt nút đóng và nút hotline */
.sgg-hd__drawer>*{flex-shrink:0}

/* Chặn kiểu của theme Astra lấn vào header:
   - Astra gán màu chữ cho mọi thẻ a, còn ".sgg-hd a{color:inherit}" mạnh hơn ".sgg-hd__cta" nên nút hotline
     ra chữ xám rgb(47,59,64) trên nền đỏ (tương phản ~2,5:1)
   - Astra tô nền xanh cho button:hover / button:focus nên nút tìm kiếm, nút menu đổi màu sau khi bấm */
.sgg-hd a.sgg-hd__cta,.sgg-hd a.sgg-hd__cta:hover,.sgg-hd a.sgg-hd__cta:focus{color:#fff}
.sgg-hd button.sgg-hd__tim:hover,.sgg-hd button.sgg-hd__tim:focus{background:#fff}
.sgg-hd button.sgg-hd__tim:focus:not(:hover){border-color:var(--sgg-vien);color:var(--sgg-navy)}
.sgg-hd button.sgg-hd__hamburger:hover,.sgg-hd button.sgg-hd__hamburger:focus{background:#fff;color:var(--sgg-navy);border-color:var(--sgg-vien)}
.sgg-hd .sgg-hd__o-tim button:hover,.sgg-hd .sgg-hd__o-tim button:focus{background:var(--sgg-do-dam);color:#fff}
.sgg-hd a:focus-visible,.sgg-hd button:focus-visible{outline:2px solid var(--sgg-do);outline-offset:2px}

@media(max-width:1100px){
  .sgg-hd__menu{display:none}
  .sgg-hd__hamburger{display:grid}
  .sgg-hd__cta{padding:12px 18px;font-size:13.5px}
}
@media(max-width:560px){
  /* Chỉ còn icon điện thoại, nhường chỗ cho logo */
  .sgg-hd__cta .sgg-hd__so-dt{display:none}
  .sgg-hd__cta{padding:0;width:44px;min-width:44px;height:44px;justify-content:center;border-radius:12px}
  .sgg-hd__cta svg{width:19px;height:19px}
  .sgg-hd__phai{gap:10px}
  .sgg-hd__logo img{max-height:42px}
}
@media(max-width:768px){
  .sgg-hd__top{display:none}
  .sgg-hd__khung{padding:0 18px}
  .sgg-hd__chinh .sgg-hd__khung{height:68px}
  .sgg-hd__tim{display:none}
}

/* ==========================================================================
   THÂN TRANG
   ========================================================================== */
.sgg{
  font-family:var(--sgg-font);color:var(--sgg-chu);font-size:16px;line-height:1.7;
  -webkit-font-smoothing:antialiased;
  /* Phá khung container của theme để các khối tràn hết chiều ngang */
  margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  overflow-x:clip;
}
.sgg *,.sgg *::before,.sgg *::after{box-sizing:border-box}
.sgg img{max-width:100%;height:auto;display:block}
.sgg a{color:inherit;text-decoration:none}
.sgg p{margin:0 0 14px}
.sgg p:last-child{margin-bottom:0}
/* Gỡ kiểu chữ mặc định của theme, màu do từng khối quyết định */
.sgg :is(h1,h2,h3,h4,h5){margin:0;color:inherit;font-family:inherit}
.sgg :is(ul,ol){margin:0;padding:0}

.sgg-wrap{width:100%;max-width:var(--sgg-khung);margin:0 auto;padding:0 24px}
.sgg-sec{padding:86px 0}
.sgg-sec--nen{background:var(--sgg-nen)}

.sgg .sgg-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:13px;font-weight:700;letter-spacing:.16em;text-transform:uppercase;
  color:var(--sgg-do);margin-bottom:12px;
}
.sgg .sgg-eyebrow::before{content:"";width:18px;height:2px;background:currentColor;border-radius:2px}
.sgg .sgg-h2{
  font-size:clamp(26px,3.1vw,42px);line-height:1.18;font-weight:800;
  letter-spacing:-.01em;margin:0 0 10px;text-transform:uppercase;color:var(--sgg-navy);
}
.sgg .sgg-h2 .do{color:var(--sgg-do)}
.sgg .sgg-sub{font-size:14px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;color:var(--sgg-chu-nhat);margin:0 0 28px}
.sgg .sgg-giua{text-align:center}
.sgg .sgg-giua .sgg-eyebrow{justify-content:center}

.sgg .sgg-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  padding:14px 28px;border-radius:8px;border:1px solid transparent;
  font-size:14px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease,color .18s ease;
}
.sgg .sgg-btn--do{background:var(--sgg-do);color:#fff;box-shadow:0 8px 20px rgba(215,25,32,.26)}
.sgg .sgg-btn--do:hover{background:var(--sgg-do-dam);transform:translateY(-2px);box-shadow:0 12px 26px rgba(215,25,32,.34)}
.sgg .sgg-btn--vien{background:transparent;color:#fff;border-color:rgba(255,255,255,.65)}
.sgg .sgg-btn--vien:hover{background:#fff;color:var(--sgg-navy);transform:translateY(-2px)}
.sgg .sgg-btn--vien-toi{background:#fff;color:var(--sgg-navy);border-color:var(--sgg-vien)}
.sgg .sgg-btn--vien-toi:hover{border-color:var(--sgg-do);color:var(--sgg-do);transform:translateY(-2px)}

/* ---------- 1. HERO ---------- */
.sgg-hero{position:relative;height:min(90vh,820px);min-height:560px;overflow:hidden;background:var(--sgg-navy)}
.sgg-hero__slide{position:absolute;inset:0;opacity:0;transition:opacity .9s ease;background-size:cover;background-position:center}
.sgg-hero__slide.dang-hien{opacity:1;animation:sgg-zoom 9s ease-out forwards}
@keyframes sgg-zoom{from{transform:scale(1.06)}to{transform:scale(1)}}
.sgg-hero__slide::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(100deg,rgba(5,18,34,.94) 0%,rgba(5,18,34,.82) 30%,rgba(5,18,34,.38) 62%,rgba(5,18,34,.55) 100%);
}
.sgg-hero__noi-dung{
  position:relative;z-index:2;height:100%;display:flex;flex-direction:column;justify-content:center;
  max-width:var(--sgg-khung);margin:0 auto;padding:0 24px;color:#fff;
}
.sgg .sgg-hero__eyebrow{
  display:inline-flex;align-items:center;gap:10px;font-size:13px;font-weight:700;
  letter-spacing:.2em;text-transform:uppercase;color:#fff;margin-bottom:18px;
}
.sgg .sgg-hero__eyebrow::before{content:"";width:26px;height:2px;background:var(--sgg-do)}
.sgg .sgg-hero h1{
  font-size:clamp(30px,4.1vw,54px);line-height:1.12;font-weight:800;letter-spacing:-.015em;
  text-transform:uppercase;margin:0 0 20px;max-width:24ch;color:#fff;
  text-shadow:0 2px 30px rgba(0,0,0,.45);
}
.sgg-hero__mo-ta{font-size:clamp(15px,1.3vw,19px);line-height:1.6;color:rgba(255,255,255,.92);margin:0 0 30px;max-width:46ch}
.sgg-hero__mo-ta strong{font-weight:700;color:#fff}
.sgg-hero__nut{display:flex;gap:14px;flex-wrap:wrap}

.sgg-hero__mui{
  position:absolute;top:50%;transform:translateY(-50%);z-index:3;
  /* Ép kích thước vuông: theme Astra có padding riêng cho <button> làm méo hình */
  width:46px;min-width:46px;max-width:46px;height:46px;padding:0;margin:0;line-height:1;
  border-radius:50%;border:1px solid rgba(255,255,255,.45);
  background:rgba(255,255,255,.1);backdrop-filter:blur(4px);
  color:#fff;font-size:20px;display:grid;place-items:center;cursor:pointer;
  transition:background .2s ease,border-color .2s ease;
}
.sgg-hero__mui:hover{background:var(--sgg-do);border-color:var(--sgg-do)}
.sgg-hero__mui--trai{left:22px}
.sgg-hero__mui--phai{right:22px}
.sgg-hero__dem{
  position:absolute;left:0;right:0;bottom:30px;z-index:3;
  max-width:var(--sgg-khung);margin:0 auto;padding:0 24px;
  display:flex;justify-content:space-between;align-items:flex-end;color:#fff;pointer-events:none;
}
.sgg-hero__so{font-size:14px;letter-spacing:.14em;font-weight:600;opacity:.92;white-space:nowrap}
.sgg-hero__so b{font-size:20px;font-weight:800}
.sgg-hero__ten-da{text-align:right;line-height:1.25}
.sgg-hero__ten-da span{display:block;font-size:11px;letter-spacing:.32em;opacity:.72;text-transform:uppercase}
.sgg-hero__ten-da b{font-size:clamp(16px,2.1vw,30px);font-weight:300;letter-spacing:.2em;text-transform:uppercase;white-space:nowrap}

/* ---------- 2. GIỚI THIỆU + SỐ LIỆU ---------- */
.sgg-gt{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.sgg-gt__text p{color:var(--sgg-chu-nhat);font-size:16px}
.sgg-gt__video{position:relative;border-radius:var(--sgg-r-lon);overflow:hidden;box-shadow:var(--sgg-bong)}
.sgg-gt__video img{width:100%;aspect-ratio:16/10;object-fit:cover;transition:transform .6s ease}
.sgg-gt__video:hover img{transform:scale(1.04)}
.sgg-gt__play{position:absolute;inset:0;display:grid;place-items:center;border:0;background:transparent;cursor:pointer}
.sgg-gt__play i{
  width:74px;height:74px;border-radius:50%;background:var(--sgg-do);color:#fff;
  display:grid;place-items:center;font-style:normal;font-size:24px;padding-left:5px;
  box-shadow:0 10px 30px rgba(215,25,32,.45);transition:transform .25s ease;
}
.sgg-gt__play:hover i{transform:scale(1.1)}
.sgg-gt__video figcaption{
  position:absolute;left:0;right:0;bottom:0;padding:14px 18px;color:#fff;font-size:13px;
  background:linear-gradient(transparent,rgba(6,22,40,.82));
}

.sgg-so-lieu{
  margin-top:56px;background:#fff;border:1px solid var(--sgg-vien);border-radius:var(--sgg-r-lon);
  display:grid;grid-template-columns:repeat(4,1fr);box-shadow:var(--sgg-bong);overflow:hidden;
}
.sgg-so-lieu__o{display:flex;gap:16px;align-items:center;padding:28px 26px;border-right:1px solid var(--sgg-vien)}
.sgg-so-lieu__o:last-child{border-right:0}
.sgg-so-lieu__icon{
  width:48px;height:48px;flex:none;border-radius:12px;display:grid;place-items:center;
  background:rgba(215,25,32,.09);color:var(--sgg-do);
}
.sgg-so-lieu__icon svg{width:24px;height:24px}
.sgg-so-lieu__so{font-size:32px;font-weight:800;line-height:1.1;color:var(--sgg-navy)}
.sgg-so-lieu__nhan{font-size:12px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;color:var(--sgg-chu-nhat)}

/* ---------- 3. ĐỐI TÁC ---------- */
.sgg-dt__bang{position:relative;margin-top:26px}
.sgg-dt__track{display:flex;gap:26px;overflow-x:auto;scroll-behavior:smooth;scroll-snap-type:x mandatory;padding:8px 2px;scrollbar-width:none}
.sgg-dt__track::-webkit-scrollbar{display:none}
.sgg-dt__o{
  flex:0 0 calc((100% - 26px*5)/6);min-width:150px;height:86px;scroll-snap-align:start;
  display:grid;place-items:center;background:#fff;border:1px solid var(--sgg-vien);border-radius:12px;padding:14px;
}
.sgg-dt__o img{max-height:52px;width:auto;filter:grayscale(1);opacity:.6;transition:filter .3s ease,opacity .3s ease,transform .3s ease}
.sgg-dt__o:hover img{filter:grayscale(0);opacity:1;transform:scale(1.05)}
.sgg-dt__mui{
  position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%;
  background:#fff;border:1px solid var(--sgg-vien);color:var(--sgg-navy);display:grid;place-items:center;
  cursor:pointer;box-shadow:var(--sgg-bong);transition:background .2s ease,color .2s ease;z-index:2;
}
.sgg-dt__mui:hover{background:var(--sgg-do);color:#fff;border-color:var(--sgg-do)}
.sgg-dt__mui--trai{left:-16px}
.sgg-dt__mui--phai{right:-16px}

/* ---------- 4. VÌ SAO CHỌN ---------- */
.sgg-vs{position:relative;padding:96px 0;background-size:cover;background-position:center;background-attachment:scroll;color:#fff}
.sgg-vs::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,42,74,.86),rgba(11,42,74,.72))}
.sgg-vs>*{position:relative;z-index:1}
.sgg .sgg-vs .sgg-h2{color:#fff}
.sgg .sgg-vs .sgg-sub{color:rgba(255,255,255,.75)}
.sgg .sgg-vs .sgg-eyebrow{color:#fff}
.sgg-vs__luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:22px;margin-top:34px}
.sgg-vs__the{
  background:#fff;color:var(--sgg-chu);border-radius:var(--sgg-r);padding:28px 24px 22px;
  box-shadow:var(--sgg-bong-cao);transition:transform .3s ease;
}
.sgg-vs__the:hover{transform:translateY(-8px)}
.sgg-vs__icon{
  width:54px;height:54px;border-radius:12px;display:grid;place-items:center;margin-bottom:16px;
  background:linear-gradient(135deg,var(--sgg-do),#f0555b);color:#fff;box-shadow:0 8px 18px rgba(215,25,32,.3);
}
.sgg-vs__icon svg{width:26px;height:26px}
.sgg .sgg-vs__the h3{font-size:17px;font-weight:800;text-transform:uppercase;margin:0 0 8px;color:var(--sgg-navy)}
.sgg-vs__the p{font-size:14px;color:var(--sgg-chu-nhat);margin-bottom:14px}
.sgg-vs__link{font-size:13px;font-weight:700;color:var(--sgg-do);display:inline-flex;align-items:center;gap:6px}
.sgg-vs__link span{transition:transform .2s ease}
.sgg-vs__the:hover .sgg-vs__link span{transform:translateX(4px)}

/* ---------- 5. DỰ ÁN ---------- */
.sgg-da__luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px}
.sgg-da__the{
  background:#fff;border:1px solid var(--sgg-vien);border-radius:var(--sgg-r);overflow:hidden;
  display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.sgg-da__the:hover{transform:translateY(-6px);box-shadow:var(--sgg-bong-cao);border-color:transparent}
.sgg-da__anh{position:relative;overflow:hidden;aspect-ratio:4/3;background:var(--sgg-nen);display:block}
.sgg-da__anh img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sgg-da__the:hover .sgg-da__anh img{transform:scale(1.07)}
.sgg-da__nhan{
  position:absolute;top:12px;left:12px;background:var(--sgg-do);color:#fff;
  font-size:11px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:6px 11px;border-radius:6px;
}
.sgg-da__than{padding:18px 18px 16px;display:flex;flex-direction:column;gap:8px;flex:1}
.sgg .sgg-da__than h3,.sgg .sgg-da__ten{font-size:16px;font-weight:800;text-transform:uppercase;margin:0;color:var(--sgg-navy);line-height:1.35}
.sgg-da__meta{display:flex;align-items:center;gap:7px;font-size:13px;color:var(--sgg-chu-nhat);margin:0}
.sgg-da__meta svg{width:14px;height:14px;flex:none;color:var(--sgg-do);opacity:.85}
.sgg-da__chan{margin-top:auto;padding-top:14px;border-top:1px solid var(--sgg-vien);display:flex;align-items:center;justify-content:space-between;gap:10px}
.sgg-da__gia{font-size:15px;font-weight:800;color:var(--sgg-do)}
.sgg-da__gia small{display:block;font-size:12px;font-weight:600;color:var(--sgg-chu-nhat);text-transform:uppercase;letter-spacing:.06em}
.sgg-da__nut{
  width:36px;height:36px;flex:none;border-radius:50%;border:1px solid var(--sgg-vien);
  display:grid;place-items:center;color:var(--sgg-navy);transition:all .2s ease;
}
.sgg-da__nut svg{width:16px;height:16px}
.sgg-da__the:hover .sgg-da__nut{background:var(--sgg-do);color:#fff;border-color:var(--sgg-do)}
.sgg-canh-giua{display:flex;justify-content:center;margin-top:36px}
/* 05/10/2026: danh sách chữ bài mới + cẩm nang dưới 4 thẻ tin (liên kết nội bộ từ trang chủ) */
.sgg-tc-ds-boc{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px 40px;margin-top:34px;padding:26px 28px;background:#fff;border:1px solid var(--sgg-vien);border-radius:var(--sgg-r)}
.sgg-tc-ds-cot{min-width:0}
.sgg-tc-ds-tt{font-size:16px;font-weight:800;color:var(--sgg-navy);margin:0 0 6px;padding-bottom:8px;border-bottom:2px solid var(--sgg-do)}
.sgg-sec .sgg-tc-ds{list-style:none;margin:0;padding:0}
.sgg-tc-ds li{margin:0;padding:0;border-bottom:1px solid var(--sgg-vien)}
.sgg-tc-ds li:last-child{border-bottom:0}
.sgg-tc-ds a{display:flex;align-items:center;min-height:44px;padding:6px 0;font-size:14.5px;line-height:1.45;color:var(--sgg-chu);text-decoration:none}
.sgg-tc-ds a:hover,.sgg-tc-ds a:focus-visible{color:var(--sgg-do);text-decoration:underline}
@media(max-width:768px){.sgg-tc-ds-boc{grid-template-columns:1fr;padding:18px 16px}}

/* ---------- 6. TIMELINE ---------- */
.sgg-cc{position:relative;overflow:hidden}
.sgg-cc__anh{
  position:absolute;right:0;top:0;width:38%;height:100%;object-fit:cover;opacity:.15;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 40%);mask-image:linear-gradient(90deg,transparent,#000 40%);
}
.sgg-cc__moc{display:grid;grid-template-columns:repeat(4,1fr);gap:26px;margin-top:38px;position:relative}
.sgg-cc__moc::before{content:"";position:absolute;left:6px;right:6px;top:7px;height:2px;background:linear-gradient(90deg,var(--sgg-do),rgba(215,25,32,.2))}
.sgg-cc__o{position:relative;padding-top:34px}
.sgg-cc__o::before{
  content:"";position:absolute;top:0;left:0;width:16px;height:16px;border-radius:50%;
  background:#fff;border:3px solid var(--sgg-do);box-shadow:0 0 0 4px rgba(215,25,32,.12);
}
.sgg-cc__nam{font-size:28px;font-weight:800;color:var(--sgg-do);line-height:1;margin-bottom:6px}
.sgg .sgg-cc__o h3{font-size:14px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--sgg-navy);margin:0 0 6px}
.sgg-cc__o p{font-size:14px;color:var(--sgg-chu-nhat)}

/* ---------- 7. BAN LÃNH ĐẠO ---------- */
.sgg-ld__luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px}
.sgg-ld__the{background:#fff;border:1px solid var(--sgg-vien);border-radius:var(--sgg-r);overflow:hidden;transition:transform .3s ease,box-shadow .3s ease}
.sgg-ld__the:hover{transform:translateY(-6px);box-shadow:var(--sgg-bong-cao)}
.sgg-ld__anh{aspect-ratio:1/1;background:linear-gradient(160deg,#e8edf3,#f7f9fc);position:relative;overflow:hidden}
.sgg-ld__anh img{width:100%;height:100%;object-fit:cover;object-position:top center;transition:transform .5s ease}
.sgg-ld__the:hover .sgg-ld__anh img{transform:scale(1.05)}
.sgg-ld__trong{display:grid;place-items:center;height:100%;color:#9aa8b8;font-size:13px;text-align:center;padding:16px}
.sgg-ld__than{padding:18px}
.sgg .sgg-ld__than h3{font-size:15px;font-weight:800;text-transform:uppercase;margin:0 0 4px;color:var(--sgg-navy)}
.sgg-ld__cv{font-size:13px;color:var(--sgg-do);font-weight:600;margin:0 0 4px}
.sgg-ld__nam{font-size:12px;color:var(--sgg-chu-nhat)}
.sgg-ld__in{display:inline-grid;place-items:center;width:28px;height:28px;border-radius:6px;margin-top:12px;background:#0A66C2;color:#fff;transition:transform .2s ease}
.sgg-ld__in:hover{transform:translateY(-2px)}
.sgg-ld__in svg{width:15px;height:15px}

/* ---------- 8. THÀNH TỰU ---------- */
.sgg-tt__luoi{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:16px;margin-top:30px}
.sgg-tt__o{border-radius:var(--sgg-r);overflow:hidden;position:relative;background:var(--sgg-nen)}
.sgg-tt__o img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sgg-tt__o:hover img{transform:scale(1.06)}
.sgg-tt__o--lon{grid-column:span 2;grid-row:span 2}
.sgg-tt__chu{position:absolute;left:0;right:0;bottom:0;padding:14px 16px;color:#fff;font-size:13px;font-weight:600;background:linear-gradient(transparent,rgba(6,22,40,.85))}

/* ---------- 9. KHÁCH HÀNG ---------- */
.sgg-kh__khoi{display:grid;grid-template-columns:.85fr 1.15fr;margin-top:30px;border-radius:var(--sgg-r-lon);overflow:hidden;box-shadow:var(--sgg-bong);background:#fff}
.sgg-kh__anh{position:relative;min-height:330px;background:var(--sgg-nen)}
.sgg-kh__anh img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.sgg-kh__ten{position:absolute;left:0;right:0;bottom:0;padding:16px;color:#fff;background:linear-gradient(transparent,rgba(6,22,40,.85))}
.sgg-kh__ten b{display:block;font-size:14px}
.sgg-kh__ten span{font-size:12px;opacity:.85}
.sgg-kh__noi-dung{padding:40px 44px;display:flex;flex-direction:column;justify-content:center;gap:16px}
.sgg-kh__nhay{font-size:46px;line-height:1;color:var(--sgg-do);font-weight:800}
.sgg-kh__noi-dung blockquote{margin:0;font-size:17px;line-height:1.75;color:var(--sgg-chu)}
.sgg-kh__sao{display:flex;align-items:center;gap:8px;color:#F5A623;font-size:15px}
.sgg-kh__sao b{color:var(--sgg-chu);font-size:14px}

/* ---------- 10. TIN TỨC ---------- */
.sgg-tin__luoi{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;margin-top:30px}
.sgg-tin__the{background:#fff;border:1px solid var(--sgg-vien);border-radius:var(--sgg-r);overflow:hidden;display:flex;flex-direction:column;transition:transform .3s ease,box-shadow .3s ease}
.sgg-tin__the:hover{transform:translateY(-6px);box-shadow:var(--sgg-bong-cao)}
.sgg-tin__anh{aspect-ratio:16/10;overflow:hidden;background:var(--sgg-nen);display:block}
.sgg-tin__anh img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.sgg-tin__the:hover .sgg-tin__anh img{transform:scale(1.06)}
.sgg-tin__than{padding:16px 18px 18px;display:flex;flex-direction:column;gap:9px;flex:1}
.sgg-tin__cat{font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--sgg-do)}
.sgg .sgg-tin__than h3{font-size:15px;font-weight:700;line-height:1.5;margin:0;color:var(--sgg-navy)}
.sgg-tin__chan{margin-top:auto;padding-top:12px;border-top:1px solid var(--sgg-vien);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--sgg-chu-nhat)}

/* ---------- 11. FAQ ---------- */
.sgg-faq{position:relative;padding:92px 0;background-size:cover;background-position:center;color:#fff}
.sgg-faq::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,rgba(11,42,74,.92) 42%,rgba(11,42,74,.66))}
.sgg-faq>*{position:relative;z-index:1}
.sgg-faq__khoi{display:grid;grid-template-columns:.85fr 1.15fr;gap:48px;align-items:start}
.sgg .sgg-faq .sgg-h2{color:#fff}
.sgg .sgg-faq .sgg-sub{color:rgba(255,255,255,.72);margin-bottom:0}
.sgg .sgg-faq .sgg-eyebrow{color:#fff}
.sgg-faq__ds{display:flex;flex-direction:column;gap:12px}
.sgg-faq__o{background:rgba(255,255,255,.97);border-radius:10px;overflow:hidden;transition:box-shadow .25s ease}
.sgg-faq__o[open]{box-shadow:var(--sgg-bong-cao)}
.sgg-faq__o summary{
  list-style:none;cursor:pointer;padding:16px 20px;display:flex;align-items:center;justify-content:space-between;gap:16px;
  font-size:15px;font-weight:600;color:var(--sgg-navy);
}
.sgg-faq__o summary::-webkit-details-marker{display:none}
.sgg-faq__o summary::after{
  content:"→";flex:none;width:26px;height:26px;border-radius:50%;background:var(--sgg-do);color:#fff;
  display:grid;place-items:center;font-size:13px;transition:transform .25s ease;
}
.sgg-faq__o[open] summary::after{transform:rotate(90deg)}
.sgg-faq__tl{padding:0 20px 18px;font-size:14.5px;color:var(--sgg-chu-nhat);line-height:1.75}

/* ---------- 12. CTA ---------- */
.sgg-cta{position:relative;overflow:hidden;background:linear-gradient(115deg,var(--sgg-navy) 0%,var(--sgg-navy-2) 55%,#17508a 100%);color:#fff;padding:76px 0}
.sgg-cta::after{
  content:"";position:absolute;right:-8%;top:-30%;width:46%;height:180%;
  background:linear-gradient(180deg,#D71920,#9d1016);transform:skewX(-14deg);opacity:.92;
}
.sgg-cta__khoi{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:54px;align-items:center}
.sgg .sgg-cta .sgg-eyebrow{color:#fff}
.sgg .sgg-cta h2{font-size:clamp(26px,3vw,40px);line-height:1.2;font-weight:800;text-transform:uppercase;margin:0 0 14px;color:#fff}
.sgg-cta__mo-ta{color:rgba(255,255,255,.88);margin-bottom:22px}
.sgg-cta__lh{display:flex;flex-wrap:wrap;gap:22px;font-size:15px;font-weight:600}
.sgg-cta__lh a{display:inline-flex;align-items:center;gap:9px}
.sgg-cta__lh svg{width:18px;height:18px;opacity:.85}

.sgg-form{background:#fff;border-radius:var(--sgg-r-lon);padding:28px;box-shadow:var(--sgg-bong-cao)}
.sgg-form__hang{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:14px}
.sgg-form label{display:block;font-size:12.5px;font-weight:700;color:var(--sgg-navy);margin-bottom:6px}
.sgg-form label span{color:var(--sgg-do)}
.sgg-form input,.sgg-form select{
  width:100%;padding:12px 14px;border:1px solid var(--sgg-vien);border-radius:8px;
  font:inherit;font-size:14px;color:var(--sgg-chu);background:#fff;transition:border-color .2s ease,box-shadow .2s ease;
}
.sgg-form input:focus,.sgg-form select:focus{outline:none;border-color:var(--sgg-do);box-shadow:0 0 0 3px rgba(215,25,32,.12)}
.sgg-form .sgg-btn{width:100%;margin-top:4px}
.sgg-form__ghi-chu{font-size:13px;color:var(--sgg-chu-nhat);text-align:center;margin-top:10px}

/* ---------- Hiệu ứng cuộn ----------
   Mặc định nội dung LUÔN hiển thị. JS chỉ ẩn tạm những khối còn nằm dưới
   màn hình rồi cho hiện dần khi cuộn tới. Nhờ vậy trang vẫn đọc được
   đầy đủ khi JS bị hoãn hoặc tắt. */
.sgg-hien{opacity:1;transform:none;transition:opacity .6s ease,transform .6s ease}
.sgg-hien.sgg-cho{opacity:0;transform:translateY(22px)}
.sgg-hien.da-hien{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){
  .sgg *,.sgg-hd *{animation:none!important;transition:none!important}
  .sgg-hien,.sgg-hien.sgg-cho{opacity:1;transform:none}
  .sgg-hero__slide.dang-hien{animation:none}
}

/* ==========================================================================
   FOOTER
   ========================================================================== */
.sgg-ft{background:var(--sgg-navy-3);color:rgba(255,255,255,.72);font-family:var(--sgg-font);font-size:14.5px;line-height:1.8}
.sgg-ft *,.sgg-ft *::before,.sgg-ft *::after{box-sizing:border-box}
.sgg-ft a{color:inherit;text-decoration:none;transition:color .2s ease}
.sgg-ft a:hover{color:#fff}
.sgg-ft img{display:block;max-width:100%;height:auto}
.sgg-ft__khung{width:100%;max-width:var(--sgg-khung);margin:0 auto;padding:0 24px}
.sgg-ft__tren{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr 1.2fr;gap:40px;padding:62px 0 46px}
.sgg-ft__logo{display:flex;align-items:center;gap:10px;margin-bottom:18px}
.sgg-ft__logo img{max-height:48px;width:auto}
.sgg-ft__logo-chu b{display:block;font-size:17px;font-weight:800;color:#fff;letter-spacing:.02em}
.sgg-ft__logo-chu span{font-size:9.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--sgg-do)}
.sgg-ft__gt{margin:0 0 18px;font-size:14px}
.sgg-ft__lh{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;font-size:14px}
.sgg-ft__lh li{display:flex;gap:10px;align-items:flex-start}
.sgg-ft__lh svg{width:16px;height:16px;flex:none;margin-top:5px;color:var(--sgg-do)}
.sgg-ft h3{font-size:14px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff;margin:0 0 18px}
.sgg-ft__ds{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:11px;font-size:14px}
.sgg-ft__ds a{display:inline-flex;align-items:center;gap:8px}
.sgg-ft__ds a::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--sgg-do);flex:none;opacity:.7}
.sgg-ft__mxh{display:flex;gap:10px;margin-bottom:18px}
.sgg-ft__mxh a{
  width:38px;height:38px;border-radius:10px;display:grid;place-items:center;
  background:rgba(255,255,255,.08);color:#fff;transition:background .2s ease,transform .2s ease;
}
.sgg-ft__mxh a:hover{background:var(--sgg-do);transform:translateY(-2px)}
.sgg-ft__mxh svg{width:18px;height:18px}
.sgg-ft__ban-do{border-radius:12px;overflow:hidden;border:1px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05)}
.sgg-ft__ban-do iframe{display:block;width:100%;height:150px;border:0;filter:grayscale(.3)}
.sgg-ft__duoi{
  border-top:1px solid rgba(255,255,255,.1);padding:18px 0;font-size:13px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.sgg-ft__duoi-links{display:flex;gap:20px;flex-wrap:wrap}

/* Nút nổi góc phải */
.sgg-noi{position:fixed;right:18px;bottom:88px;z-index:90;display:flex;flex-direction:column;gap:10px}
.sgg-noi a{
  width:48px;height:48px;border-radius:50%;display:grid;place-items:center;color:#fff;
  box-shadow:0 8px 22px rgba(11,42,74,.28);transition:transform .2s ease;
}
.sgg-noi a:hover{transform:translateY(-3px)}
.sgg-noi svg{width:22px;height:22px}
.sgg-noi__phone{background:var(--sgg-do);animation:sgg-rung 2.4s ease-in-out infinite}
.sgg-noi__zalo{background:#0068FF;font-weight:800;font-size:13px}
@keyframes sgg-rung{0%,72%,100%{transform:rotate(0)}76%{transform:rotate(-12deg)}80%{transform:rotate(12deg)}84%{transform:rotate(-8deg)}88%{transform:rotate(8deg)}92%{transform:rotate(0)}}

/* Trang tự có cụm nút liên hệ riêng (The Privé dựng giao diện .pv-ui với thanh Gọi/Zalo/WhatsApp và nút nổi)
   thì ẩn nút nổi và thanh CTA của khung, để không hiện hai bộ nút chồng lên nhau */
body:has(.pv-ui) .sgg-noi,body:has(.pv-ui) .sgg-thanh{display:none}

/* Thanh CTA dưới cùng cho điện thoại */
.sgg-thanh{display:none}
@media(max-width:768px){
  .sgg-noi{bottom:82px;right:14px}
  .sgg-noi a{width:44px;height:44px}
  .sgg-thanh{
    display:grid;grid-template-columns:1fr 1fr 1fr;position:fixed;left:0;right:0;bottom:0;z-index:95;
    background:#fff;box-shadow:0 -4px 20px rgba(11,42,74,.16);border-top:1px solid var(--sgg-vien);
    font-family:var(--sgg-font);
  }
  .sgg-thanh a{
    display:flex;align-items:center;justify-content:center;gap:7px;padding:13px 6px;
    font-size:13.5px;font-weight:700;color:var(--sgg-navy);text-decoration:none;
  }
  .sgg-thanh a.sgg-thanh--do{background:var(--sgg-do);color:#fff}
  .sgg-thanh svg{width:17px;height:17px}
  body{padding-bottom:54px}
}
/* Màn rất hẹp: giữ chữ nút ("Nhận bảng giá" trên landing) trên 1 hàng */
@media(max-width:360px){
  .sgg-thanh a{font-size:12.5px;gap:5px;padding:13px 4px;white-space:nowrap}
  .sgg-thanh svg{width:15px;height:15px}
}

/* ==========================================================================
   Responsive thân trang
   ========================================================================== */
@media(max-width:1200px){
  .sgg-vs__luoi,.sgg-da__luoi,.sgg-ld__luoi,.sgg-tin__luoi{grid-template-columns:repeat(2,1fr)}
  .sgg-so-lieu{grid-template-columns:repeat(2,1fr)}
  .sgg-so-lieu__o:nth-child(2){border-right:0}
  .sgg-so-lieu__o:nth-child(1),.sgg-so-lieu__o:nth-child(2){border-bottom:1px solid var(--sgg-vien)}
  .sgg-cc__moc{grid-template-columns:repeat(2,1fr);row-gap:34px}
  .sgg-cc__moc::before{display:none}
  .sgg-dt__o{flex:0 0 calc((100% - 26px*2)/3)}
  .sgg-ft__tren{grid-template-columns:1fr 1fr 1fr;gap:34px}
}
@media(max-width:900px){
  .sgg-sec{padding:62px 0}
  .sgg-gt{grid-template-columns:1fr;gap:34px}
  .sgg-kh__khoi,.sgg-faq__khoi,.sgg-cta__khoi{grid-template-columns:1fr;gap:28px}
  .sgg-kh__noi-dung{padding:28px 24px}
  .sgg-tt__luoi{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}
  .sgg-cc__anh{display:none}
  .sgg-ft__tren{grid-template-columns:1fr 1fr;gap:30px;padding:48px 0 36px}
}
@media(max-width:640px){
  .sgg-wrap{padding:0 18px}
  .sgg-hero{height:auto;min-height:0;padding:72px 0 56px}
  .sgg-hero__slide::after{
    background:linear-gradient(180deg,rgba(5,18,34,.86) 0%,rgba(5,18,34,.72) 45%,rgba(5,18,34,.88) 100%);
  }
  .sgg-hero__noi-dung{height:auto}
  .sgg .sgg-hero h1{max-width:100%}
  .sgg-hero__nut .sgg-btn{flex:1 1 100%}
  .sgg-hero__mui{display:none}
  /* Màn hình hẹp: xếp dọc, nếu để ngang thì tên dự án bị cắt mất */
  /* Dùng relative chứ không phải static: z-index chỉ có tác dụng với phần tử
     đã định vị, để static thì lớp phủ của ảnh nền sẽ đè lên mất chữ */
  .sgg-hero__dem{position:relative;z-index:3;margin-top:26px;padding:0 18px;flex-direction:column;align-items:flex-start;gap:10px}
  .sgg-hero__ten-da{text-align:left}
  .sgg-hero__ten-da b{display:block;white-space:normal;font-size:17px;letter-spacing:.12em;line-height:1.3}
  .sgg-hero__ten-da span{font-size:11px;margin-bottom:2px}
  .sgg-vs__luoi,.sgg-da__luoi,.sgg-ld__luoi,.sgg-tin__luoi,.sgg-so-lieu{grid-template-columns:1fr}
  .sgg-so-lieu__o{border-right:0;border-bottom:1px solid var(--sgg-vien)}
  .sgg-so-lieu__o:last-child{border-bottom:0}
  .sgg-cc__moc{grid-template-columns:1fr}
  .sgg-tt__luoi{grid-template-columns:1fr;grid-auto-rows:190px}
  .sgg-tt__o--lon{grid-column:span 1;grid-row:span 1}
  .sgg-form__hang{grid-template-columns:1fr}
  .sgg-dt__o{flex:0 0 calc((100% - 26px)/2)}
  .sgg-dt__mui{display:none}
  .sgg-ft__tren{grid-template-columns:1fr}
  .sgg-ft__duoi{flex-direction:column;text-align:center}
}

/* ==========================================================================
   Tối ưu trải nghiệm điện thoại
   - Lưới 2 cột để trang không dài lê thê
   - Mọi vùng bấm tối thiểu 44px theo hướng dẫn của Google
   ========================================================================== */
@media(max-width:640px){
  .sgg-sec{padding:52px 0}
  .sgg-vs{padding:56px 0}
  .sgg-faq{padding:56px 0}
  .sgg-cta{padding:56px 0}

  /* Dự án, tin tức, ban lãnh đạo: 2 cột */
  .sgg-da__luoi,.sgg-tin__luoi,.sgg-ld__luoi{grid-template-columns:1fr 1fr;gap:14px}
  .sgg-da__than{padding:12px 12px 14px;gap:6px}
  .sgg .sgg-da__than h3,.sgg .sgg-da__ten{font-size:14px}
  .sgg-da__meta{font-size:12px;gap:5px}
  .sgg-da__chan{padding-top:10px}
  .sgg-da__gia{font-size:13px}
  .sgg-tin__than{padding:12px}
  .sgg .sgg-tin__than h3{font-size:13.5px;line-height:1.45}
  .sgg-ld__than{padding:12px}
  .sgg .sgg-ld__than h3{font-size:13px}
  .sgg-ld__cv{font-size:12px}

  /* Vì sao chọn: gọn lại chiều cao */
  .sgg-vs__luoi{gap:14px;margin-top:26px}
  .sgg-vs__the{padding:20px 18px 16px}
  .sgg-vs__icon{width:44px;height:44px;margin-bottom:12px}
  .sgg-vs__icon svg{width:22px;height:22px}
  .sgg .sgg-vs__the h3{font-size:15px}
  .sgg-vs__the p{font-size:13.5px;margin-bottom:10px}

  /* Vùng bấm đủ lớn */
  .sgg-vs__link{min-height:44px;display:inline-flex;align-items:center}
  .sgg .sgg-da__than h3 a,.sgg .sgg-da__ten a,.sgg .sgg-tin__than h3 a{display:inline-flex;align-items:center;min-height:44px}
  .sgg-da__nut{width:44px;height:44px}
  .sgg-da__nut svg{width:18px;height:18px}
  .sgg-ft__ds a,.sgg-ft__lh a{min-height:40px;display:inline-flex;align-items:center}
  .sgg-faq__o summary{min-height:52px}

  /* Nút nổi: bỏ nút gọi (thanh dưới đã có), chỉ giữ Zalo */
  .sgg-noi a.sgg-noi__phone{display:none} /* phải lồng .sgg-noi để thắng độ ưu tiên của .sgg-noi a */
  .sgg-noi{bottom:96px}

  /* Chân trang: vùng bấm và cỡ chữ đủ lớn */
  .sgg-ft{font-size:15px}
  .sgg-ft__lh{font-size:15px}
  .sgg-ft__lh li{min-height:40px;align-items:center}
  .sgg-ft__mxh a{width:46px;height:46px}
  .sgg-ft__duoi{font-size:14px;gap:12px}
  .sgg-ft__duoi-links a{min-height:40px;display:inline-flex;align-items:center}
  .sgg-ft__gt{font-size:15px}
  .sgg-ft__ds{font-size:15px}
  .sgg-tin__cat,.sgg-da__nhan{font-size:12px}
  .sgg-so-lieu__nhan{font-size:13px}
  .sgg .sgg-sub{font-size:13px}
}
@media(max-width:380px){
  .sgg-da__luoi,.sgg-tin__luoi,.sgg-ld__luoi{grid-template-columns:1fr}
}

/* ==========================================================================
   BĂNG LOGO CHẠY LIÊN TỤC (đối tác)
   ========================================================================== */
.sgg-dt__bang{position:relative;margin-top:30px;overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent)}
.sgg-dt__track{display:flex;gap:26px;width:max-content;will-change:transform;padding:8px 0;overflow:visible}
.sgg-dt__o{
  flex:0 0 auto;width:190px;height:96px;
  display:grid;place-items:center;background:#fff;border:1px solid var(--sgg-vien);
  border-radius:14px;padding:16px;transition:box-shadow .3s ease,transform .3s ease;
}
.sgg-dt__o:hover{box-shadow:var(--sgg-bong);transform:translateY(-3px)}
.sgg-dt__o img{max-height:54px;width:auto;filter:grayscale(1);opacity:.58;transition:filter .35s ease,opacity .35s ease}
.sgg-dt__o:hover img{filter:grayscale(0);opacity:1}

/* ==========================================================================
   SLIDER DÙNG CHUNG (thành tựu, đội ngũ)
   ========================================================================== */
.sgg-sl{position:relative;margin-top:32px}
.sgg-sl__khung{overflow:hidden;padding:6px 2px 10px}
.sgg-sl__track{display:flex;column-gap:24px;transition:transform .7s cubic-bezier(.22,.61,.36,1);will-change:transform}
.sgg-sl__track>*{flex:0 0 calc((100% - 24px*2)/3)}
.sgg-sl[data-hien="4"] .sgg-sl__track>*{flex:0 0 calc((100% - 24px*3)/4)}
.sgg-sl__mui{
  position:absolute;top:calc(50% - 22px);width:44px;height:44px;min-width:44px;padding:0;margin:0;
  border-radius:50%;background:#fff;border:1px solid var(--sgg-vien);color:var(--sgg-navy);
  display:grid;place-items:center;cursor:pointer;box-shadow:var(--sgg-bong);z-index:2;
  transition:background .2s ease,color .2s ease,border-color .2s ease;font-size:18px;line-height:1;
}
.sgg-sl__mui:hover{background:var(--sgg-do);color:#fff;border-color:var(--sgg-do)}
.sgg-sl__mui--trai{left:-18px}
.sgg-sl__mui--phai{right:-18px}
.sgg-sl__cham{display:flex;justify-content:center;gap:9px;margin-top:22px}
/* Chấm nhỏ nhưng vùng bấm rộng: dùng padding + background-clip để đủ 40px */
.sgg-sl__cham button{
  width:29px;height:29px;padding:10px;border:0;border-radius:50%;
  background-color:rgba(11,42,74,.22);background-clip:content-box;
  cursor:pointer;transition:width .3s ease,background-color .3s ease;
}
.sgg-sl__cham button.dang-xem{width:48px;border-radius:15px;background-color:var(--sgg-do)}
@media(max-width:640px){
  .sgg-sl__cham{gap:4px;margin-top:16px}
  .sgg-sl__cham button{width:40px;height:40px;padding:15px}
  .sgg-sl__cham button.dang-xem{width:56px;border-radius:20px}
}

/* ==========================================================================
   KHỐI THÀNH TỰU — nền tối sang trọng
   ========================================================================== */
.sgg-tt{position:relative;background:var(--sgg-navy-3);color:#fff;overflow:hidden}
/* Phải lồng .sgg để thắng quy tắc .sgg img{height:auto} ở trên */
.sgg .sgg-tt__nen{position:absolute;inset:0;object-fit:cover;width:100%;height:100%;opacity:.14;filter:saturate(.65)}
.sgg-tt::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(1200px 400px at 15% 0%,rgba(215,25,32,.22),transparent 60%),
             linear-gradient(180deg,rgba(10,32,54,.86),rgba(10,32,54,.95));
}
.sgg-tt>*{position:relative;z-index:1}
.sgg .sgg-tt .sgg-h2{color:#fff}
.sgg .sgg-tt .sgg-sub{color:rgba(255,255,255,.7)}
.sgg .sgg-tt .sgg-eyebrow{color:#fff}
.sgg-tt__the{
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:var(--sgg-r);
  overflow:hidden;backdrop-filter:blur(2px);transition:transform .35s ease,border-color .35s ease;
}
.sgg-tt__the:hover{transform:translateY(-6px);border-color:rgba(215,25,32,.6)}
.sgg-tt__anh{aspect-ratio:4/3;overflow:hidden;background:rgba(255,255,255,.04)}
.sgg-tt__anh img{width:100%;height:100%;object-fit:cover;transition:transform .7s ease}
.sgg-tt__the:hover .sgg-tt__anh img{transform:scale(1.07)}
.sgg-tt__noi-dung{padding:18px 20px 22px}
.sgg .sgg-tt__noi-dung h3,.sgg .sgg-tt__tt{font-size:16px;font-weight:700;color:#fff;margin:0 0 6px;line-height:1.45}
.sgg-tt__noi-dung p{font-size:13.5px;color:rgba(255,255,255,.68);margin:0}
.sgg-tt .sgg-sl__mui{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.25);color:#fff}
.sgg-tt .sgg-sl__mui:hover{background:var(--sgg-do);border-color:var(--sgg-do)}
.sgg-tt .sgg-sl__cham button{background:rgba(255,255,255,.3)}
.sgg-tt .sgg-sl__cham button.dang-xem{background:var(--sgg-do)}

@media(max-width:1000px){
  .sgg-sl__track>*,.sgg-sl[data-hien="4"] .sgg-sl__track>*{flex:0 0 calc((100% - 24px)/2)}
  .sgg-sl__mui--trai{left:-6px}
  .sgg-sl__mui--phai{right:-6px}
}
@media(max-width:600px){
  .sgg-sl__track{column-gap:14px}
  .sgg-sl__track>*,.sgg-sl[data-hien="4"] .sgg-sl__track>*{flex:0 0 86%}
  .sgg-sl__mui{display:none}
  .sgg-dt__o{width:150px;height:84px;padding:12px}
  .sgg-dt__o img{max-height:44px}
}

/* ==========================================================================
   KHỐI ĐỘI NGŨ (dùng khi chưa có ảnh chân dung lãnh đạo)
   ========================================================================== */
.sgg-dn{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:center;margin-top:30px}
.sgg-dn__anh{margin:0;border-radius:var(--sgg-r-lon);overflow:hidden;box-shadow:var(--sgg-bong-cao);position:relative}
.sgg-dn__anh img{width:100%;aspect-ratio:16/9;object-fit:cover;transition:transform .7s ease}
.sgg-dn__anh:hover img{transform:scale(1.04)}
.sgg-dn__anh::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(6,22,40,.35));pointer-events:none}
.sgg-dn__text p{color:var(--sgg-chu-nhat);font-size:16.5px}
.sgg-dn__nut{display:flex;gap:12px;flex-wrap:wrap;margin-top:22px}
@media(max-width:900px){
  .sgg-dn{grid-template-columns:1fr;gap:26px}
  .sgg-dn__nut .sgg-btn{flex:1 1 100%}
}

/* ==========================================================================
   THẺ CHÂN DUNG TÁCH NỀN (Ban lãnh đạo)
   Ảnh PNG nền trong suốt đặt trên nền gradient, canh đáy cho nhân vật
   đứng vững trong khung — kiểu ảnh doanh nghiệp.
   ========================================================================== */
.sgg-ld__anh{
  aspect-ratio:5/6;position:relative;overflow:hidden;
  background:linear-gradient(165deg,#EEF2F7 0%,#DFE7F0 55%,#D6E0EC 100%);
}
.sgg-ld__anh::after{
  content:"";position:absolute;left:50%;bottom:-32%;transform:translateX(-50%);
  width:150%;height:62%;border-radius:50%;
  background:radial-gradient(closest-side,rgba(215,25,32,.16),transparent 72%);
}
.sgg .sgg-ld__anh img{
  position:relative;z-index:1;
  /* Ảnh gốc 600x720 cùng tỷ lệ 5:6 với khung → lấp kín khung, không chừa lề (khách yêu cầu 10/10/2026) */
  width:100%;height:100%;object-fit:cover;object-position:bottom center;
  transform-origin:bottom center;
  transition:transform .5s cubic-bezier(.22,.61,.36,1);
  filter:drop-shadow(0 18px 26px rgba(11,42,74,.18));
}
.sgg-ld__the:hover .sgg-ld__anh img{transform:scale(1.04)}
.sgg-ld__nhan{
  position:absolute;top:10px;left:10px;z-index:2;
  background:rgba(11,42,74,.42);color:rgba(255,255,255,.92);font-size:10px;font-weight:600;
  letter-spacing:.06em;padding:4px 9px;border-radius:20px;backdrop-filter:blur(3px);
}
.sgg-ld__than{text-align:center;padding:20px 16px 22px}
.sgg-ld__cv{font-weight:700}

/* Dải ảnh đội ngũ thật đặt dưới các thẻ chân dung */
.sgg-dn--gon{margin-top:44px;grid-template-columns:1fr 1fr;gap:36px}
.sgg .sgg-dn__text h3{font-size:22px;font-weight:800;color:var(--sgg-navy);margin:0 0 12px;text-transform:uppercase}
@media(max-width:900px){.sgg-dn--gon{grid-template-columns:1fr;margin-top:32px}}

/* Vùng bấm hotline và email trong khối CTA đủ 44px trên điện thoại */
@media(max-width:640px){
  .sgg-cta__lh{gap:6px;flex-direction:column;align-items:flex-start}
  .sgg-cta__lh a{min-height:44px;display:inline-flex;align-items:center}
}

/* ==========================================================================
   01/10/2026 — Sửa theo ghi chú khách (trang chủ + khung)
   ========================================================================== */
/* Logo Zalo SVG trong nút nổi và thanh dưới */
.sgg-noi a.sgg-noi__zalo{background:#fff;padding:0;box-shadow:0 8px 22px rgba(0,104,255,.35)}
.sgg-noi .sgg-noi__zalo svg{width:40px;height:40px}
.sgg-thanh svg.sgg-zalo{width:22px;height:22px}
@media(max-width:768px){
  /* Điện thoại đã có thanh liên hệ dưới cùng: ẩn nút liên hệ nổi */
  .sgg-noi{display:none !important}
}
@media(max-width:640px){
  /* Dự án: 1 dự án mỗi hàng, ảnh → tên → thông tin nhanh, khoảng cách gọn */
  .sgg-da__luoi{grid-template-columns:1fr;gap:16px}
  .sgg-da__anh{aspect-ratio:16/9}
  .sgg-da__than{padding:14px 16px 14px;gap:6px}
  .sgg .sgg-da__than h3,.sgg .sgg-da__ten{font-size:16px}
  .sgg-da__meta{font-size:13.5px}
  .sgg-da__chan{padding-top:10px;margin-top:6px}
  /* Số liệu: 2 hàng × 2 cột */
  .sgg-so-lieu{grid-template-columns:1fr 1fr !important}
  .sgg-so-lieu__o{flex-direction:column;align-items:center;text-align:center;gap:8px;padding:18px 10px;
    border-right:1px solid var(--sgg-vien) !important;border-bottom:1px solid var(--sgg-vien) !important}
  .sgg-so-lieu__o:nth-child(2n){border-right:0 !important}
  .sgg-so-lieu__o:nth-child(n+3){border-bottom:0 !important}
  .sgg-so-lieu__so{font-size:26px}
  .sgg-so-lieu__nhan{font-size:11.5px;letter-spacing:.08em}
}

/* Thẻ dự án: bỏ lề đoạn văn của theme để các dòng thông tin sát nhau; slider thành tựu nhiều ảnh thì bỏ chấm */
.sgg .sgg-da__than p.sgg-da__meta{margin:0;line-height:1.45}
.sgg-tt .sgg-sl__cham{display:none}

/* Cảm nhận khách hàng — 3 thẻ trượt theo mẫu khách gửi 01/10/2026 */
.sgg-kh{position:relative;background:#eef0f3;overflow:hidden}
.sgg-kh::before{content:"";position:absolute;inset:0;background:var(--sgg-kh-nen) center/cover;filter:grayscale(1);opacity:.14}
.sgg-kh > *{position:relative}
.sgg .sgg-kh__tt{text-align:center;margin-bottom:34px}
.sgg-kh__sl .sgg-sl__track{align-items:stretch}
.sgg-kh__the{background:#fff;border-radius:10px;padding:34px 26px 30px;height:100%;box-sizing:border-box;
  color:var(--sgg-chu);transition:background .3s,color .3s;box-shadow:0 8px 24px rgba(11,42,74,.06)}
.sgg-kh__the:hover,.sgg-kh__sl .sgg-sl__track > .sgg-kh__the:first-child{background:var(--sgg-do);color:#fff}
.sgg-kh__dau{display:flex;align-items:center;gap:16px;margin-bottom:22px}
.sgg-kh__avt{width:88px;height:88px;flex:none;border-radius:50%;object-fit:cover;border:3px solid #fff;box-shadow:0 4px 12px rgba(0,0,0,.12)}
.sgg-kh__avt--chu{display:flex;align-items:center;justify-content:center;background:var(--sgg-navy);color:#fff;font-size:32px;font-weight:800}
.sgg-kh__ai{flex:1;min-width:0}
.sgg-kh__ai b{display:block;font-size:19px;font-weight:700;color:inherit;line-height:1.3}
.sgg-kh__ai span{display:block;font-size:14.5px;font-weight:700;opacity:.85;margin-top:6px}
.sgg-kh__nhay{align-self:flex-start;font:800 96px/0.75 Georgia,serif;color:var(--sgg-do);margin-top:-4px}
.sgg-kh__the:hover .sgg-kh__nhay,.sgg-kh__sl .sgg-sl__track > .sgg-kh__the:first-child .sgg-kh__nhay{color:#fff}
.sgg .sgg-kh__loi{margin:0;font-size:15.5px;line-height:1.65;color:inherit}
.sgg-kh__mui{display:flex;gap:12px;margin-top:28px}
.sgg-kh__mui .sgg-sl__mui{position:static;transform:none;width:46px;height:46px;border-radius:0;background:#fff;
  border:1px solid var(--sgg-do);color:var(--sgg-do);font-size:26px;box-shadow:none}
.sgg-kh__mui .sgg-sl__mui:hover{background:var(--sgg-do);color:#fff}
.sgg-kh .sgg-sl__cham{display:none}
@media(max-width:640px){
  .sgg-kh__the{padding:24px 20px}
  .sgg-kh__avt{width:68px;height:68px}
  .sgg-kh__nhay{font-size:72px}
  .sgg-kh__mui{justify-content:center}
}
.sgg .sgg-kh__nguon{margin:18px 0 0;font-size:14.5px}
.sgg .sgg-kh__nguon a{color:var(--sgg-navy);font-weight:700;text-decoration:underline;text-underline-offset:3px;display:inline-flex;min-height:40px;align-items:center}
.sgg-kh__ai span{white-space:nowrap;letter-spacing:.02em}
@media(max-width:640px){.sgg-kh__nhay{font-size:56px}.sgg-kh__dau{gap:12px}.sgg-kh__ai span{font-size:14px}}