@media only screen and (max-width: 800px) {
  .about-us {
    margin-top: 0px;
  }
}
/* ==========================================================================
   Banner "Ve chung toi" - thiet ke lai 8/9/2026 (theo mau anh nguoi dung gui:
   anh toan canh cong ty YEP 2025 lam nen full-width, khung trang chua tieu
   de/mo ta de len tren) - THAY THE ban cu (anh ghep collage trai + tieu de/
   mo ta phai). Xem ghi chu day du trong page-about.php.

   SUA LAN 2 (8/9/2026, theo phan hoi nguoi dung kem link doi chieu 1 site
   khac cung he thong - propertyplus.com.vn/vi/ve-chung-toi - dang dung DUNG
   1 class ".a-u-banner"/".a-u-banner-t" nay, tu Angular goc): ban dau ep
   ".a-u-banner" 1 chieu cao CO DINH (min-height:560px) + "object-fit:cover"
   cho anh - CAT MAT phan lon buc anh tap the (chi thay 1 doan nho o giua),
   dung y nguoi dung: "cứ ép khung thấp thế này có nhìn thấy gì đâu". Doi
   sang dung y HE THONG GOC: anh KHONG cat - "height:auto" giu nguyen TY LE
   that cua anh (chieu cao ca banner = chieu cao anh, co the toi 900-1000px
   o man rong, chu KHONG gioi han) tu day toan bo anh tap the hien du; khung
   trang chuyen sang "position:absolute" DE LEN TREN (khong chiem cho rieng
   nhu flex/padding truoc), gan phia TREN cua anh (top:50px), CHU KHONG CAN
   GIUA THEO CHIEU DOC anh (anh rat cao, can giua se day khung xuong giua
   khoang trong, khac han thiet ke goc). Tren mobile, doi ke sang STACK BINH
   THUONG (khung nam DUOI anh, khong de len) - dung y hanh vi thuc te da
   kiem tra tren chinh site doi chieu (mobile KHONG de card len anh). */
.about-us .a-u-banner {
  position: relative;
}
.about-us .a-u-banner-photo-img {
  display: block;
  width: 100%;
  height: auto;
}
.about-us .a-u-banner .container {
  /* KHONG dat "position" o day (bug da gap: dat position:relative bien ".container" thanh
     "containing block" cho ".a-u-banner-card" position:absolute BEN TRONG no, thay vi
     ".a-u-banner" - card bi day xuong DUOI anh, nam trong luong tai lieu binh thuong cua
     ".container" thay vi de len anh nhu mong muon). Khong can z-index nua vi anh gio KHONG con
     absolute lam nen (chi la 1 the <img> binh thuong o dau ".a-u-banner"), nen khong co gi de
     ".container" phai "de len tren" ca. */
  width: 100%;
}
@media only screen and (min-width: 801px) {
  .about-us .a-u-banner-card {
    position: absolute;
    top: 50px;
    left: 50%;
    transform: translateX(-50%);
    width: min(900px, 92%);
  }
}
.about-us .a-u-banner-card {
  background: #fff;
  border-radius: 10px;
  max-width: 900px;
  margin: 0 auto;
  padding: 25px 40px 30px;
  text-align: center;
  box-sizing: border-box;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-banner-card {
    padding: 26px 20px;
    border-radius: 0;
  }
}
.about-us .a-u-banner-card h1 {
  font-family: 'SF Pro Display';
  font-size: 32px;
  font-weight: 700;
  color: #1B3A6B;
  margin: 0;
  line-height: 1.2;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-banner-card h1 {
    font-size: 24px;
  }
}
.about-us .a-u-banner-card-subtitle {
  font-family: 'SF Pro Display';
  font-size: 16px;
  font-weight: 400;
  color: #667085;
  margin: 6px 0 0;
}
.about-us .a-u-banner-card-divider {
  width: 60px;
  height: 2px;
  background: #D9B45D;
  border: none;
  margin: 20px auto;
}
.about-us .a-u-banner-card-content p {
  font-family: 'SF Pro Display';
  font-size: 15px;
  font-weight: 400;
  line-height: 24px;
  text-align: center;
  color: #4B5563;
  margin: 0 0 12px;
}
.about-us .a-u-banner-card-content p:last-child {
  margin-bottom: 0;
}
.about-us .a-u-c-1 {
  padding: 78px 0px 121px 0px;
  background-color: #F3F3F3;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-c-1 {
    padding: 20px 0px 20px 0px;
  }
}
.about-us .a-u-c-1 hr {
  border: 1px solid #CECECE !important;
  width: 62px !important;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-c-1 .a-u-c-1-item {
    margin-bottom: 10px;
  }
}
.about-us .a-u-c-1 .a-u-c-1-item .icon-c-1 {
  width: 78px;
  height: 78px;
  background: #DFE8F4;
  box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.23);
  border-radius: 15px;
  margin: auto;
  padding: 15px;
}
.about-us .a-u-c-1 .a-u-c-1-item .icon-c-1 img {
  margin: auto;
  width: 100%;
  display: block;
}
.about-us .a-u-c-1 .a-u-c-1-item .a-u-cus-t3 {
  margin: 30px 0px 12px 0px;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-c-1 .a-u-c-1-item .a-u-cus-t3 {
    margin: 15px 0px 12px 0px;
    min-height: auto;
  }
}
/* Thiet ke lai (8/9/2026, theo mau anh nguoi dung gui) - bo nen hoa tiet cheo (about-us-5.jpg) +
   the anh stock, chuyen sang the trang bo bong + badge so thu tu, GIU NGUYEN toan bo noi dung
   chu (xem ghi chu day du trong page-about.php). */
.about-us .a-u-c-2 {
  background: #fff;
  padding: 78px 0px 80px 0px;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-c-2 {
    padding: 20px 0px 70px 0px;
  }
}
.about-us .a-u-c-2 .a-u-c-2-items {
  grid-template-columns: repeat(3, minmax(0, 1fr));
  column-gap: 40px;
  display: grid;
}
@media only screen and (max-width: 800px) {
  .about-us .a-u-c-2 .a-u-c-2-items {
    grid-template-columns: repeat(1, minmax(0, 1fr));
    row-gap: 20px;
    padding: 0px;
  }
}
.about-us .a-u-c-2 .a-u-c-2-item {
  box-sizing: border-box;
  border-radius: 12px;
  margin-top: 10px;
  padding: 36px 28px 32px;
  background: #fff;
  border: 1px solid #EEF0F2;
  box-shadow: 0 10px 30px rgba(16, 24, 40, 0.06);
  text-align: center;
}
@media only screen and (min-width: 801px) {
  /* Tang dem 2 ben (28px -> 68px, theo yeu cau nguoi dung: "giảm 25% độ dài của dòng chữ") de
     dong chu ngan lai ~25% (vung chu ~326px -> ~244px o do rong the mau ~384px, da do thuc te
     truoc khi chinh) - khung the tu nhien CAO hon vi doan mo ta xuong nhieu dong hon, dung y "làm
     cho khung này dài hơn". CHI ap dung tu 801px (desktop) - giu nguyen 28px tren mobile vi the
     da hep san, tang dem se lam chu vo dong/tran khung. */
  .about-us .a-u-c-2 .a-u-c-2-item {
    padding-left: 68px;
    padding-right: 68px;
  }
}
.about-us .a-u-c-2 .a-u-c-2-item .a-u-step {
  width: 48px;
  height: 48px;
  margin: 0 auto;
  border-radius: 50%;
  background: #2D5185;
  color: #fff;
  font-family: 'SF Pro Display';
  font-size: 18px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.about-us .a-u-c-2 .a-u-c-2-item .a-u-cus-t3 {
  margin-bottom: 15px;
  margin-top: 24px;
  text-align: center;
  color: #2D5185;
}
.about-us .a-u-c-2 .a-u-c-2-item .a-u-cus-t4 {
  text-align: center;
  color: #667085;
}
.sale-nhanvien {
  background-image: url(../officebase/Common/Images/Home/story-project-client.jpg);
  background-position: unset;
  background-size: cover;
  padding: 100px 0px;
}
@media only screen and (max-width: 800px) {
  .sale-nhanvien {
    margin-bottom: 30px;
  }
}
.sale-nhanvien h2 {
  font-style: normal;
  font-weight: bold;
  font-size: 36px;
  color: #000000;
  opacity: 0.8;
  margin-bottom: 70px;
  text-align: center;
  margin-top: -20px;
}
@media only screen and (max-width: 800px) {
  .sale-nhanvien h2 {
    font-size: 25px;
  }
}
@media only screen and (max-width: 800px) {
  .sale-nhanvien .list-nhanvien .col-sm-6 {
    flex: 0 0 auto;
    width: 50%;
  }
}
.sale-nhanvien .list-nhanvien .item {
  border-radius: 8px;
  position: relative;
  margin-bottom: 15px;
}
.sale-nhanvien .list-nhanvien .item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.sale-nhanvien .list-nhanvien .item .item-content {
  position: absolute;
  bottom: 0px;
  padding: 15px;
  width: 100%;
}
.sale-nhanvien .list-nhanvien .item .item-content .text-1 {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
}
.sale-nhanvien .list-nhanvien .item .item-content .text-2 {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  color: #FFFFFF;
  opacity: 0.8;
}
.about-img {
  padding: 100px 0px;
}
@media only screen and (max-width: 800px) {
  .about-img {
    margin-bottom: 30px;
  }
}
.about-img .list-about:not(.slick-slider) {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  column-gap: 20px;
  display: grid;
}
@media (min-width: 0px) and (max-width: 880px) {
  .about-img .list-about:not(.slick-slider) {
    grid-template-columns: repeat(1, minmax(0, 1fr));
  }
}
.about-img .list-about .slick-track .slick-slide {
  margin-right: 15px;
}
.about-img .list-about .item {
  border-radius: 8px;
  position: relative;
  margin-bottom: 15px;
}
.about-img .list-about .item img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}
.about-img .list-about .item .item-content {
  position: absolute;
  bottom: 0px;
  padding: 15px;
  width: 100%;
  background-image: linear-gradient(#00000017, #000000ad);
}
.about-img .list-about .item .item-content .text-1 {
  font-style: normal;
  font-weight: bold;
  font-size: 16px;
  color: #FFFFFF;
}
.about-img .list-about .item .item-content .text-2 {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  color: #FFFFFF;
  opacity: 0.8;
}
.story-project-client {
  background-image: linear-gradient(to bottom, rgba(255, 255, 255, 0.2) 0%, rgba(183, 183, 183, 0.4) 100%), url(../Content/Img/about-us-6.jpg); /* doi tu .png (1.36MB) sang .jpg (39K, nen tren nen trang vi anh nay von la texture kinh mo/trong suot dung lam overlay nhat, khong co canh net can giu trong suot that su). Sua duong dan tuong doi tu ../../../../assets/ (sai, 404) thanh ../ */
  background-repeat: no-repeat;
  background-size: cover;
  padding: 78px 0px 80px 0px;
}
@media (min-width: 0px) and (max-width: 880px) {
  .story-project-client {
    padding: 30px 15px;
  }
}
.story-project-client .client-slider {
  margin-top: 50px;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  column-gap: 30px;
  display: grid;
}
@media (min-width: 0px) and (max-width: 880px) {
  .story-project-client .client-slider {
    grid-template-columns: repeat(5, minmax(0, 1fr));
  }
}
.story-project-client .client-slider .client-logo {
  margin-bottom: 40px;
}
.story-project-client .client-slider .client-logo img {
  width: 100%;
  height: auto;
}
.a-u-cus-t1 {
  font-style: normal;
  font-weight: 500;
  font-size: 24px;
  line-height: 39px;
  color: #2D5185;
  text-align: center;
}
.a-u-cus-hr {
  border: 1px solid #6C6C6C;
  width: 190px;
  margin: 25px auto;
}
@media only screen and (max-width: 800px) {
  .a-u-cus-hr {
    margin: 15px auto;
  }
}
.a-u-cus-t3 {
  font-size: 18px;
  font-weight: 500;
  line-height: 27px;
}
.a-u-cus-t4 {
  font-size: 16px;
  font-weight: 400;
  line-height: 24px;
}
.stick-custom-css.oflowX {
  overflow: visible;
}
.stick-custom-css .slick-prev {
  display: block;
  position: absolute;
  left: -100px;
  top: 45%;
  z-index: 150;
  opacity: 1;
  width: 88px;
  height: 44px;
  background: #DAD6DD;
  border: 1px solid #DAD6DD;
  box-sizing: border-box;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
  border-radius: 42px !important;
  font-size: 22px;
  padding-bottom: 6px;
  padding-left: 9px;
}
@media (min-width: 0px) and (max-width: 880px) {
  .stick-custom-css .slick-prev {
    display: none !important;
  }
}
.stick-custom-css .slick-prev:before {
  display: none;
}
.stick-custom-css .slick-prev i {
  font-size: 25px;
  color: #000000;
  margin: auto;
  position: relative;
  top: 2px;
  right: 7px;
}
.stick-custom-css .slick-prev:hover {
  background-color: #beb7c3;
}
.stick-custom-css .slick-next {
  display: block;
  position: absolute;
  right: -90px;
  top: 45%;
  z-index: 150;
  opacity: 1;
  width: 88px;
  height: 44px;
  background: #DAD6DD;
  border: 1px solid #DAD6DD;
  box-sizing: border-box;
  box-shadow: 0px 6px 15px rgba(0, 0, 0, 0.15);
  border-radius: 42px !important;
  font-size: 22px;
  padding-bottom: 6px;
  padding-left: 12px;
}
@media (min-width: 0px) and (max-width: 880px) {
  .stick-custom-css .slick-next {
    display: none !important;
  }
}
.stick-custom-css .slick-next:before {
  display: none;
}
.stick-custom-css .slick-next i {
  font-size: 25px;
  color: #000000;
  margin: auto;
  position: relative;
  top: 2px;
  right: 4px;
}
.stick-custom-css .slick-next:hover {
  background-color: #beb7c3;
}
.group-title-style-1 {
  margin-bottom: 80px;
  border-left: 5px solid #dfb54c;
  padding-left: 40px;
}
.group-title-style-1 .title {
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 20px;
  color: #2D5185;
}
@media (min-width: 0px) and (max-width: 880px) {
  .group-title-style-1 .title {
    font-size: 26px;
    line-height: 30px;
  }
}
.group-title-style-1 .sub-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #545455;
}
.tite-box {
  margin-bottom: 42px;
  text-align: center;
}
@media (min-width: 0px) and (max-width: 880px) {
  .tite-box {
    margin-bottom: 0px;
  }
}
.tite-box .title {
  font-size: 36px;
  font-style: normal;
  font-weight: 700;
  line-height: 50px;
  margin-bottom: 20px;
  color: #2D5185;
}
@media (min-width: 0px) and (max-width: 880px) {
  .tite-box .title {
    font-size: 26px;
    line-height: 30px;
  }
}
.tite-box .sub-title {
  font-size: 18px;
  font-weight: 400;
  line-height: 26px;
  color: #545455;
}
.tite-box hr {
  height: 5px;
  width: 150px;
  background-color: #dfb54c;
  margin: auto;
  margin-top: 30px;
}
.isMobile {
  display: none;
}
@media (min-width: 0px) and (max-width: 880px) {
  .isMobile {
    display: block;
  }
}
@media (min-width: 0px) and (max-width: 880px) {
  .isWebPC {
    display: none;
  }
}