/* PC */
@media (min-width: 992px) {
  /*4. ẩn menu trên PC */
  .mobile-header {
    display: none;
  }
}
/* Tablet & mobile */
@media (max-width: 991.98px) {
  /* 1. ẩn navbar trên tablet và mobile */
  .navbar {
    display: none;
  }

  /* 2. chuyển logo vào giữa */
  .header-top {
    position: relative;
  }
  .header__logo {
    position: absolute;
    left: 50%;
    top: 50%;
    translate: -50% -50%;
  }

  /* 3. icon menu  */
  .toggle-menu__icon {
    position: absolute;
    left: 26px;
    top: 38px;
    width: 24px;
    color: #fff;
  }

  /* 5.overlay cho menubar */
  .menu-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
    /* bình thường ẩn overlay đi */
    opacity: 0;
    visibility: hidden;
    transition: 0.5s;
  }
  /* 6. code cho menu drawer */
  .menu-drawer {
    position: fixed;
    inset: 0 40% 0 0;
    background: #2e1919;
    z-index: 2;
    padding: 60px;
    transform: translateX(-100%);
    transition: 0.5s;
  }

  /* 7. kiểm tra nếu checkbox được check thì hiện overlay */
  .menu-checkbox:checked ~ .menu-overlay {
    opacity: 1;
    visibility: visible;
  }

  /* 8. kiểm tra nếu checkbox được check hiện menu */
  .menu-checkbox:checked ~ .menu-drawer {
    transform: translateX(0);
  }

  /* 9.sửa navbar list ngang sang dọc  */
  .navbar__list {
    margin-top: 25px;
    flex-direction: column;
  }

  /* 10.chuyển navbar link thành block để dễ click trên mobile */
  .navbar__link {
    display: block;
    font-size: 2rem;
  }
  /* 11. thêm hiệu ứng khi hover nhìn trên mobile cho rõ ràng  */

  .navbar__link:hover {
    background-color: #00ffff37;
  }

  /* 12. Thêm nút tắt menu */
  .menu-drawer__top {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .menu__close {
    width: 24px;
    color: #fff;
  }

  /* điều chỉnh margin top navbar list cách logo */
  #navbar__list--mobile {
    margin-top: 30px;
  }

  /* khối hero */
  .hero {
    flex-direction: column;
    gap: 50px;
  }
  .hero__media {
    order: 1;
  }

  .hero__content {
    order: 2;
    text-align: center;
    width: 80%;
    margin: 22px auto;
  }

  .hero__row {
    justify-content: center;
  }

  /* khối service */
  .service__row {
    flex-direction: column;
  }

  .service__img {
    width: 100%;
  }

  .service__list {
    margin-top: 20px;
    text-align: center;
  }

  .service-item {
    width: 90%;
    text-align: start;
  }

  /* work list  */
  .work__list {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  /* about  */
  .about-row {
    flex-direction: column;
    gap: 30px;
  }

  .about__media {
    width: 100%;
  }

  .about-content {
    width: 90%;
    text-align: center;
  }

  /* ẩn ảnh small */
  .about__img--small {
    display: none;
  }

  /* căn giữa ảnh lớn */
  .about__img--big {
    margin: 25px auto;
    border-radius: 15px;
    width: 100%;
  }

  /* team list */
  .team__list {
    grid-template-columns: repeat(2, 1fr);
    row-gap: 30px;
  }

  /* install */
  .install__img {
    display: none;
  }

  .install__content {
    max-width: 90%;
    margin: 0 auto;
  }

  .team-item__thumb {
    margin: 0 auto;
  }

  /* blog */
  .blog__inner {
    flex-direction: column;
  }
  .blog__list {
    order: 1;
  }

  .blog__content {
    order: 2;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .blog__heading {
    max-width: 90%;
    margin-top: 30px;
  }

  /* footer-top */
}

/* ===================================Tablet =========================================*/
@media (min-width: 768px) and (max-width: 991.98px) {
  /* ẩn nút đăng ký trên tablet */
  .show-on-mobile {
    display: none;
  }

  /* footer-top */
  /* ẩn bỏ 1 column */
  .footer__column:first-child {
    display: none;
  }

  .footer__top {
    grid-template-columns: 0.5fr 0.5fr 1fr;
  }
}

/* =================================== Mobile=========================================*/
@media (max-width: 767.98px) {
  /* ẩn bỏ cta group */
  .header__action {
    display: none;
  }
  .toggle-menu__icon {
    top: 18px;
  }
  /* set menu phủ cách lề phải 20% mobile */
  .menu-drawer {
    inset: 0 20% 0 0;
  }

  /* 13. thêm vạch kẻ ngăn cta group */
  .separate {
    border-top: 1.5px solid #8c8b8b;
    margin-top: 10px;
  }

  /* code lại cta group */
  .header__action--hide {
    color: #fff;
    margin-top: 20px;
  }
  /* Bỏ dot của thẻ li */
  .navbar__item {
    list-style-type: none;
  }

  /* chỉnh lại padding nhỏ lại  */
  .menu-drawer {
    padding: 40px;
  }

  .hero__img-small {
    display: none;
  }

  .hero__img-large {
    width: 100%;
    height: auto;
  }

  /* footer top */
  .footer__top {
    grid-template-columns: 1fr;
    row-gap: 30px;
    margin-bottom: 8px;
  }

  .hero__heading {
    font-size: 3rem;
  }

  .hero__row {
    flex-direction: column;
    row-gap: 20px;
  }

  .service {
    padding: 70px 0;
  }

  .service__desc {
    width: 272px;
  }

  .service__img {
    width: 100%;
    height: auto;
  }

  .service-item {
    width: 100%;
    padding: 6px;
  }

  .work__desc {
    width: auto;
  }

  .work-item {
    padding: 30px;
  }

  .about {
    margin-top: 0;
    padding: 40px 0 4px;
  }

  .section-heading {
    font-size: 3rem;
  }

  .team__list {
    grid-template-columns: 1fr;
  }

  .install__inner {
    margin: 40px 0;
    padding: 0 8px;
  }

  .install__content {
    min-width: 242px;
  }

  .blog__list {
    grid-template-columns: 1fr;
    row-gap: 30px;
  }

  .appointment__inner {
    padding: 30px 5px;
  }
}