@media only screen and (max-width: 2600px) {
  #header:before {
    background-size: contain;
  }

  .hd1 {
    width: 33%;
  }

  .logo {
    width: 29.3333%;
  }

  #hh1 .logo img {
    margin-left: 54px;
    width: 280px;
  }

  .tx-hd:after {
    right: 10px;
  }

  .tx-hd:before {
    left: 15px;
  }

  .dv span {
    line-height: 1.2;
  }

  .hd3 {
    margin-left: 80px;
  }
}

@media only screen and (max-width: 1902px) {
  #hh1 .logo img {
    margin-left: 70px;
    margin-top: -23px;
    width: 280px;
  }
}

@media only screen and (max-width: 1602px) {
  #hh1 .logo img {
    margin-left: 63px;
    margin-top: -31px;
    width: 278px;
  }
}

@media only screen and (max-width: 1402px) {
  #hh1 .logo img {
    margin-left: 74px;
    margin-top: -45px;
    width: 246px;
  }
}
@media only screen and (max-width: 1366px) {
  #hh1 .logo img {
    margin-left: 74px;
    margin-top: -45px;
    width: 246px;
  }
}
@media (max-width: 1024px) {
  #header {
    display: none;
  }
}
@media (max-width: 990px) {
  .header-bar {
    display: none;
  }
  .header-1 {
    display: flex;
  }
  .menu-nav {
    display: none;
  }
  .navbar-toggler {
    display: block !important;
  }
  .footer-menu {
    display: block;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #ffffff;
    padding: 10px 0;
    display: flex;
    justify-content: center;
    z-index: 9999;
  }
  
  .footer-menu .btn {
    border-radius: 15px;
    border: 3px solid #FFD700;
    color: white;
    font-weight: bold;
    padding: 15px 25px;
    margin: 0 5px;
    font-size: 16px;
    text-align: center;
    margin: 0 20px;
  }
}

@media (max-width: 768px) {
  .ctn-2 ul li {
    width: 25%;
  }
  .footer-menu {
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: space-around;
    padding: 5px;
  }
  
  .footer-menu .btn {
    flex: 1;
    margin: 6px;
    padding: 10px 5px;
    font-size: 14px;
    white-space: nowrap;
  }
}

@media (max-width: 430px) {
  
  .ctn-2 ul li {
    text-align: center;
    position: relative;
    padding-top: 80px;
    /* width: 23%; */
  }

  .icon-wrapper-2 {
    width: 70px;
    height: 70px;
    background-color: #fff;
    border-radius: 50%;
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
    font-size: 40px;
    color: #007bff;
  }
  .ctn-2 ul li a {
    font-family: "Roboto", sans-serif;
    font-size: 15px;
  }

  #l2 .boxl2 {
    display: block; /* Stack elements vertically */
  }

  .imgl2 {
    width: 100%; /* Make image take full width */
    margin-right: 0; /* Remove right margin */
    margin-bottom: 20px; /* Add some space below the image */
  }

  .rl2 {
    width: 100%; /* Make text content take full width */
  }

  #l2 h3 {
    width: 100%; /* Make heading take full width */
    text-align: center; /* Ensure heading is centered */
  }

  #l2 h4 {
    text-align: center; /* Ensure sub-heading is centered */
  }

  #l2 ul {
    display: block; /* Stack list items vertically */
    margin-top: 15px;
  }

  #l2 ul li {
    width: 100%; /* Make list items take full width */
    margin: 10px 0; /* Add vertical margin to list items */
    text-align: center; /* Center text within list items */
  }

  #l2 h3 {
    font-family: "utm-he";
    color: #006760;
    font-size: 25px;
    line-height: 1.1;
    text-align: center;
    font-weight: 600;
    width: 80%;
    margin: 0 auto 10px;
  }
  #l2 h4 {
    font-family: "tdk";
    color: #fb4848;
    font-size: 25px;
    text-align: center;
    font-weight: 600;
    margin-bottom: 10px;
    margin-top: 30px;
  }

  #l5 {
    padding: 20px 0; /* Adjust padding for smaller screens */
    background-size: cover; /* Ensure background image covers the area */
    background-position: center; /* Center the background image */
  }

  #l5 h3 {
    font-size: 20px; /* Reduce font size for better readability */
    line-height: 1.3;
    margin-bottom: 5px;
  }

  #l5 h5 {
    font-size: 26px; /* Reduce font size */
    margin-bottom: 15px;
  }

  #l5 .desbs h4 {
    font-size: 10px;
    padding: 4px 0 10px;
    min-width: auto;
    width: 100%;
    margin: 0 auto;
  }

  .desbs p {
    font-size: 9px;
    max-width: 100%;
    margin: -6px auto 0;
    padding: 5px 8px;
  }

  #l5 .slick-slide {
    margin: 0 10px !important; /* Adjust slide margin */
  }

  #l5 .slick-dots {
    margin-top: 10px; /* Adjust dot margin */
  }

  #l5 .slick-dots li {
    width: 10px; /* Reduce dot size */
    height: 5px;
    margin: 0 2px;
  }

  #l5 li.slick-active {
    width: 15px; /* Reduce active dot size */
  }

  #l5 .desbs a img {
    max-width: 100%;
    height: 25px;
  }

  #l6 {
    padding: 30px 0 20px;
    background-size: cover;
    background-position: top center; /* Adjust background position if needed */
  }

  #l6 .boxph {
    display: block; /* Stack image and content vertically */
  }

  #l6 .tit-l6 {
    margin-bottom: 40px;
  }

  #l6 h3 span {
    font-size: 20px;
    padding: 10px 25px;
  }

  #l6 h3 span:before {
    width: 90px;
    height: 64px;
    background-size: contain;
    top: -15px;
    left: 0%;
    transform: translateX(-50%);
  }

  #l6 h5 {
    font-size: 32px;
    top: 51px;
    right: auto;
    bottom: -30px; /* Adjust position relative to the title */
    left: 50%;
    transform: translateX(-50%);
  }

  #l6 .boxph .imgph {
    width: 100%;
  }

  #l6 .boxph .ctph {
    width: 100%;
  }

  .bx-ctph {
    height: auto; /* Adjust height to content */
    padding: 20px;
    background-size: contain; /* Adjust background size */
    background-position: top center; /* Adjust background position */
  }

  .bx-ctph h4 {
    font-size: 16px;
  }

  .bx-ctph h6 {
    font-size: 14px;
  }

  .bx-ctph p {
    font-size: 14px;
  }

  #l6 .slick-slide img {
    width: 80%; /* Make slider images responsive */
    height: auto;
    margin: 0 auto; /* Center the image */
    display: block; /* Ensure centering works */
  }

  #l6 .slick-dots {
    margin-top: 10px;
  }

  #l6 .slick-dots li {
    width: 10px;
    height: 5px;
    margin: 0 2px;
  }

  #l6 li.slick-active {
    width: 15px;
  }

  #l6 .boxph .imgph:before {
    content: "";
    display: inline-block;
    width: 80px; /* Giảm kích thước */
    height: 160px; /* Giảm kích thước */
    background: url(../img/icon/love-like.png) no-repeat;
    background-size: contain; /* Đảm bảo ảnh không bị cắt */
    position: absolute;
    top: 5px; /* Điều chỉnh vị trí */
    left: -10px; /* Điều chỉnh vị trí */
    opacity: 0.7; /* Giảm độ mờ nếu cần */
  }

  #l6 .boxph .imgph:after {
    content: "";
    display: inline-block;
    width: 60px; /* Giảm kích thước */
    height: 80px; /* Giảm kích thước */
    background: url(../img/icon/icontask.png) no-repeat;
    background-size: contain; /* Đảm bảo ảnh không bị cắt */
    position: absolute;
    bottom: -10px; /* Điều chỉnh vị trí */
    right: -15px; /* Điều chỉnh vị trí */
    opacity: 0.7; /* Giảm độ mờ nếu cần */
  }
  #l6 .boxph .ctph:before {
    content: "";
    display: inline-block;
    width: 40px; /* Giảm kích thước */
    height: 40px; /* Giảm kích thước */
    background: url(../img/icon/iconlove.png) no-repeat;
    background-size: contain; /* Đảm bảo ảnh không bị cắt */
    position: absolute;
    top: 10px; /* Điều chỉnh vị trí */
    left: -15px; /* Điều chỉnh vị trí */
    opacity: 0.7; /* Giảm độ mờ nếu cần */
  }

  #l6 .boxph .ctph:after {
    content: "";
    display: inline-block;
    width: 60px; /* Giảm kích thước */
    height: 50px; /* Giảm kích thước */
    background: url(../img/icon/iconstart.png) no-repeat;
    background-size: contain; /* Đảm bảo ảnh không bị cắt */
    position: absolute;
    bottom: 10px; /* Điều chỉnh vị trí */
    right: -10px; /* Điều chỉnh vị trí */
    opacity: 0.7; /* Giảm độ mờ nếu cần */
  }

  .bx-ctph {
    background: url(../img/icon/iconcomment.png) no-repeat top center; /* Điều chỉnh vị trí background */
    background-size: contain; /* Điều chỉnh kích thước background */
    height: auto; /* Điều chỉnh chiều cao tự động theo nội dung */
    padding: 20px; /* Giảm padding */
    text-align: center;
  }

  #tt {
    padding: 20px 10px; /* Adjust padding for smaller screens */
  }

  #tt .ctn {
    padding: 0; /* Remove default container padding if needed */
  }

  #tt h3 {
    text-align: center;
    margin-bottom: 10px;
  }

  #tt h3 span {
    font-size: 22px; /* Reduce font size */
    padding: 10px 20px;
    border-radius: 20px;
  }

  #tt h4 {
    text-align: center;
    margin-bottom: 20px;
  }

  #tt h4 span {
    font-size: 20px; /* Reduce font size */
  }

  #tt .post {
    display: block; /* Stack the news boxes vertically */
    padding: 0;
  }

  #tt .post .box {
    width: 100%; /* Make each box take full width */
    margin-bottom: 20px; /* Add spacing between boxes */
    border: 1px solid #eee; /* Optional: Add a border for separation */
    border-radius: 5px; /* Optional: Add rounded corners */
    overflow: hidden; /* Ensure content stays within the border */
  }

  #tt .post .box .img-pt {
    width: 100%;
    height: auto; /* Maintain aspect ratio */
  }

/*   
  #tt .post .box .img-pt a img {
    width: 100%;
    height: auto;
    display: block; 
  } */

  #tt .post .box .img-pt .date {
    /* You might need to adjust date styling if it exists */
  }

  #tt .post .box .des-tt {
    padding: 15px;
  }

  #tt .post .box .des-tt h4 {
    margin-bottom: 10px;
    text-align: left; /* Align title to the left */
  }

  #tt .post .box .des-tt h4 a {
    font-size: 18px; /* Reduce title font size */
    line-height: 1.3;
  }

  #tt .post .box .des-tt p {
    font-size: 14px; /* Reduce paragraph font size */
    line-height: 1.5;
    margin-bottom: 10px;
  }

  #tt .post .box .des-tt a.view-all {
    display: inline-block;
    padding: 8px 22px;
    font-size: 14px;
    background-color: #007bff;
    color: #c52222;
    text-decoration: none;
    border-radius: 5px;
  }

  .img-map {
    width: 100%;
    height: 200px;
  }

  footer {
    padding: 20px 10px 0; /* Adjust footer padding */
  }

  .box-ft {
    display: block; /* Stack footer sections vertically */
    padding-bottom: 20px;
  }

  .menu_f_1 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
  }

  .menu_f_1 h3 {
    font-size: 16px; /* Reduce heading font size */
    padding-right: 0;
    text-align: center; /* Center heading */
  }

  .menu_f_1 h3:after {
    width: 40px;
    height: 40px;
    background-size: contain;
    top: -10px;
    right: 50%;
    transform: translateX(50%);
  }

  .menu_f_1 p {
    font-size: 16px; /* Reduce paragraph font size */
    line-height: 20px;
    text-align: center;
  }

  .menu_f_1 p b {
    font-size: 20px;
  }

  footer .dh-ft {
    display: block; /* Stack input and button */
    height: auto;
    background: none;
    border-radius: 0;
    margin-bottom: 10px;
  }

  footer .dh-ft input {
    width: calc(100% - 20px);
    padding: 10px;
    height: auto;
    border-radius: 30px;
    margin-bottom: 10px;
    font-size: 18px;
  }

  footer .dh-ft input::placeholder {
    font-size: 14px;
  }

  footer .dh-ft .d-send {
    width: 100%;
    height: 45px;
    text-indent: -9999px;
    background-size: contain;
    background-position: center;
    color: #fff; /* Example text color */
    font-size: 16px;
    font-family: "Montserrat-SemiBold";
    border-radius: 30px;
  }

  .menu_f_1 .mxh-ft {
    display: block; /* Stack social media */
    text-align: center;
  }

  .menu_f_1 .mxh-ft h5 {
    font-size: 14px;
    text-align: center;
    margin-bottom: 5px;
  }

  .menu_f_1 .mxh-ft div {
    display: flex;
    justify-content: center;
    gap: 10px;
  }

  .menu_f_1 .mxh-ft div a {
    width: 45px; /* Tăng chiều rộng icon */
    height: 45px; /* Tăng chiều cao icon */
    background: url(../img/icon/mxh.png) no-repeat;
    margin-left: 10px; /* Tăng khoảng cách giữa các icon */
    display: inline-block;
  }

  .menu_f_2 {
    width: 100%;
    margin-right: 0;
    margin-bottom: 20px;
    text-align: center;
  }

  .menu_f_2 h4 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .menu_f_2 ul {
    padding: 0;
    list-style: none;
  }

  .menu_f_2 ul li {
    margin-bottom: 8px;
    padding-left: 0;
  }

  .menu_f_2 ul li:before {
    display: none;
  }

  .menu_f_2 ul li a {
    font-size: 17px;
  }

  .menu_f_3 {
    width: 100%;
    padding-left: 0;
    text-align: center;
  }

  .menu_f_3 h4 {
    font-size: 16px;
    margin-bottom: 10px;
  }

  .menu_f_3 ul {
    padding: 0;
    list-style: none;
  }

  .menu_f_3 ul li {
    margin-bottom: 8px;
    padding-left: 0;
  }

  .menu_f_3 ul li:before {
    display: none;
  }

  .menu_f_3 ul li a {
    font-size: 17px;
  }

  .menu_f_3 .mxh-ft {
    display: flex;
    justify-content: center;
    margin-top: 15px;
  }

  .box-qr {
    /* display: block; */
    text-align: center;
    padding: 8px;
    margin-top: 1px;
    height: 165px;
}

  .box-qr b {
    font-size: 14px;
  }

  .text-qr {
    width: 100%;
    font-size: 15px;
    margin-right: 0;
    text-align: center;
    margin-bottom: 10px;
  }

  .img-qr {
    display: flex;
    justify-content: center;
  }

  .bottom-ft {
    padding: 20px 0;
  }

  .bottom-ft .ctn {
    display: block;
    text-align: center;
  }

  .box-ft-phone {
    width: 100%;
    margin-right: 0;
    margin-bottom: 10px;
    justify-content: center;
  }

  .box-ft-phone:before {
    width: 30px;
    height: 40px;
    background-size: contain;
    top: 0px;
    left: 48%;
    transform: translateX(-50%);
  }

  .box-ft-phone a {
    font-size: 24px;
    margin-right: 12px;
  }

  .phone-left {
    margin-left: 33px;
  }

  .zltv {
    width: 100%;
    height: 40px;
    background-size: contain;
    background-position: center;
  }

  /* content */

  #l1,
  .s1-2 {
    padding: 10px 30px;
  }

  .ctn-2 ul li a {
    font-size: 14px;
  }

  .icon-2 {
    width: 60px;
    height: 65px;
    background-size: auto 65px;
  }

  .ctn-2 ul li:nth-child(2) .icon-2 {
    width: 70px;
  }

  .menu_f_1 h3:after {
    content: "";
    display: inline-block;
    width: 40px; /* Giảm kích thước icon */
    height: 40px;
    background: url(../img/icon/icon-chuong.png) no-repeat;
    background-size: contain; /* Đảm bảo icon không bị cắt */
    position: absolute;
    top: 20px; /* Đưa icon lên trên tiêu đề */
    right: 8%; /* Căn giữa theo chiều ngang */
    transform: translateX(50%); /* Điều chỉnh để căn giữa chính xác */
    bottom: auto; /* Loại bỏ thuộc tính bottom */
  }
  .img-banner {
    height: 240px;
  }
  .map {
    width: 398px;
    height: 350px;
  }
  .imgbs img {
    height: 120px;
  }
  .section-title h2 {
    font-size: 1.5rem;
    color: #129447;
    margin-bottom: 10px;
  }
  .post-card {
    font-family: "Times New Roman", Times, serif;
  }
  .post-title {
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 3px;
    color: #333;
  }
  .breadcrumb-item a {
    color: #666;
    font-size: 10px;
    margin: 0 0px;
    font-weight: 900;
  }
  #breadcrumbItem {
    font-size: 11px;
    font-weight: 500;
  }
  .content-viewpost{
    font-size: 22px;
    text-align: start;
  }
  .post-title-1{
    text-align: left;
  }

  .footer-menu {
    padding: 3px;
  }
  
  .footer-menu .btn {
    font-size: 13px;
    padding: 10px 2px;
  }
  #notificationContainer-1{
    width: 280px;
  }
  #tt .img-post img {
    height: 280px;
}

.rl2 p{
  font-size: 20px;
}
  .img-1 {
        display: block;
        /* margin: 10px auto; */
        max-width: 100%;
        height: 347px !important;
        border-radius: 5px;
        transition: transform 0.3s ease;
    }
.content-introduce{
  font-size: 18px;
}

.article ul li{
  font-size: 18px;
}
.section-title p {
  font-size: 18px;
  color: #666;
}

 .img-2 {
            display: block;
            margin: 0 auto;
            max-width: 80%;
            height: 300px !important;
            border-radius: 5px;
            transition: transform 0.3s ease;
        }

}

@media (max-width: 414px) {
  .map {
    width: 382px;
    height: 299px;
  }
}

@media (max-width: 375px) {
  #l1,
  .s1-2 {
    padding: 10px 5px;
  }
  .map {
    width: 345px;
    height: 301px;
  }
  .imgbs img {
    height: 100px;
  }
  .post-title {
    font-size: 14px;
    font-weight: bold;
    color: #333;
  }
  .post-image img {
    width: 100%;
    height: 140px;
    object-fit: cover;
    border-radius: 8px;
  }
  .post-card {
    font-family: "Times New Roman", Times, serif;
    height: 180px;
  }
  .post-excerpt {
    font-size: 0.6rem;
    color: #666;
    margin-bottom: 10px;
  }
  .content-viewpost{
    font-size:20px;
    text-align: start;
  }
  .post-title-1{
    text-align: left;
  }
}