/* WONDIRECT68 CUSTOM CSS ISOLATION */
/* Colors: Navy (#1f4695), Green (#2c9f48) */

/* 1. Header & Menu */
.line-header {
    background-color: #1f4695;
}

/* Giảm height của line-header và căn giữa nội dung */
.line-header .container {
    height: 40px;
    display: flex;
    align-items: center;
}

.line-header .flex-row {
    width: 100%;
}

.narbar-main {
    background: #2c9f48;
    padding: 12px 0px; /* Giảm chiều cao từ 30px xuống 12px */
}

.sologan h2 {
    color: #2c9f48;
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 800; /* Đậm hơn một chút để chuyên nghiệp */
    font-size: 24px; /* Giảm nhẹ để vừa vặn hơn */
    text-transform: uppercase;
    line-height: 1.2;
    margin: 0;
}
.sologan {
    min-width: 550px; 
}
@media (max-width: 1199px) {
    .sologan { min-width: auto; }
    .sologan h2 { font-size: 20px; }
}

.sologan p {
    color: #1f4695;
}

.email-support, .email-support a {
    color: #1f4695;
}

@media (max-width: 991px) {
    .email-support .ico-email span {
        background: #2c9f48;
    }
}

.ico-email {
    border-color: #2c9f48;
}
.ico-email span {
    background: #2c9f48;
}

/* 2. Content Sections */
.sub-title h2:after {
    background: #2c9f48;
}

/* Tiêu đề mục trang chủ */
.title-standard h2 span {
    color: #2c9f48;
}

/* Tiêu đề mục UI: xanh lá + in hoa */
h1.title-detail-project,
.sub-title h2,
.sub-title-inblog h2,
.sub-title-inblog h2 span,
.relate-product h2,
.title-standard h2 {
    font-family: 'Roboto', Arial, sans-serif;
    color: #2c9f48 !important;
    text-transform: uppercase;
}

/* Heading trong nội dung bài viết: chỉ đổi font, giữ màu gốc */
.ctn h2,
.ctn h3,
.content-project-detail h2,
.content-project-detail h3,
.content-standard-ck h2,
.content-standard-ck h3 {
    font-family: 'Roboto', Arial, sans-serif;
}

/* Software product (Dịch vụ) */
.software-product-index .item-count .img-count {
    background: #2c9f48 !important;
}

.software-product-index .item-count .img-count a {
    background: #ffffff !important;
}

.software-product-index .item-count .img-count img {
    height: 60px;
    width: 60px;
    mix-blend-mode: multiply;
}

.software-product-index .item-count p {
    color: #ffffff !important;
}

/* Links & Buttons */
a:hover {
    color: #2c9f48;
}

.btn-style-1 a,
.content-page-services .our-services .item-services .btn-link a {
    background: #2c9f48;
}

.btn-style-1 a:hover,
.content-page-services .our-services .item-services .btn-link a:hover {
    background: #1f4695;
}

/* Footer */
#footer {
    background-color: #2c9f48;
}

.line-footer {
    border-top-color: #4dc069;
}

/* Project detail titles */
.box-right-detail .title h2,
.title-services-detail h1,
.infor-detail-page h1 {
    color: #2c9f48;
    font-family: 'Roboto', Arial, sans-serif;
    text-transform: uppercase;
}

/* Nhãn ngày tháng tin tức */
.recent-news .img-news .date-time {
    background: #2c9f48;
}

/* Footer: bullet trắng, thụt lề */
.info-address ul {
    padding-left: 15px;
}
.info-address ul li::marker {
    color: #fff;
}

/* Footer: Logo + tên công ty kiểu Won Homes */
.info-address img.footer-logo {
    width: 90px;
    display: block;
    margin-bottom: 12px;
}
.info-address .footer-company-name {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    color: #fff;
    margin: 0 0 4px;
}
.info-address .footer-slogan {
    font-family: 'Roboto', Arial, sans-serif;
    font-weight: 400;
    font-size: 12px;
    color: rgba(255,255,255,0.75);
    text-transform: uppercase;
    margin: 0 0 18px;
}
.info-address ul li p strong {
    color: #fff;
    font-weight: 700;
}
.info-address ul li p {
    color: rgba(255,255,255,0.85);
    font-size: 14px;
    margin: 0;
}

/* 3. Layout Fixes (WONDIRECT68) */

/* Slogan rớt dòng: Gỡ bỏ giới hạn chiều rộng để chữ trải dài 100% */
.sologan p {
    max-width: 100%;
}

/* Căn chỉnh ảnh About Us: Dùng Flexbox để ảnh và nội dung luôn căn giữa theo chiều dọc */
.who-we-are .row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

/* Fix Logo Đại lý & Chủ đầu tư: Tăng kích thước lên 120px cho rõ nét hơn */
.slider-partner .item-partner img {
    height: 120px;
    object-fit: contain;
    width: auto;
    margin: 0 auto;
}

/* Responsive cho Flexbox About Us trên Mobile */
@media (max-width: 767px) {
    .who-we-are .row {
        display: block;
    }
}

/* 4. Loai bo mau Cam (Mobile Menu & Sub-menus) */
@media (max-width: 991px) {
    .open-navbar .narbar-main {
        background-color: #2c9f48; /* Màu Xanh lá đồng nhất */
    }
    /* Menu con các cấp cũng dùng chung một màu Xanh lá */
    .main-menu > ul > li ul.open,
    .main-menu > ul > li ul.open > li > ul.open {
        background: #2c9f48;
        border-left: none; /* Bỏ vạch ngăn cách để đồng bộ hoàn toàn */
    }
}

.btn-primary,
.btn-submit-form,
.item-form-full,
#newsletter-form .submit-form {
    background-color: #1f4695;
    border-color: #1f4695;
}

.btn-primary:hover,
.btn-submit-form:hover,
#newsletter-form .submit-form:hover {
    background-color: #1f4695;
    border-color: #1f4695;
}

/* 5. Tăng font-size lên 16px cho nội dung chính */

/* Trang chủ - Phần "Về chúng tôi" */
.who-we-are p {
    font-size: 16px;
}

/* Các trang Giới thiệu + Lĩnh vực hoạt động */
.content-project-detail p {
    font-size: 16px;
}

/* Trang Tin tức - Chi tiết */
.content-standard-ck p {
    font-size: 16px;
}

/* Mô tả ngắn trong trang chi tiết tin tức */
.infor-detail-page p {
    font-size: 16px;
}

/* Mô tả ngắn trong danh sách tin tức (trang chủ) */
.ctn-news p {
    font-size: 16px;
}

/* 6. Điều chỉnh màu theo Won Group (Navy chủ đạo) */

/* Nút "Xem thêm" - đổi sang Xanh lá */
.btn-standard-1 a {
    border-color: #2c9f48 !important;
}
.btn-standard-1 a:after,
.btn-standard-1 a:before {
    background: #2c9f48 !important;
}
.btn-standard-1 a span {
    background: #2c9f48 !important;
    color: #fff !important;
}
.btn-standard-1 a:hover span {
    background: #1f4695 !important;
}

/* Nút "Xem thêm" kiểu khác (.btn-view-more) - đổi sang Xanh lá */
.btn-view-more a {
    background-color: #2c9f48 !important;
    color: #fff !important;
}
.btn-view-more a:hover {
    background-color: #1f4695 !important;
}

/* Footer - đổi sang Xanh lá */
#footer {
    font-family: 'Roboto', Arial, sans-serif;
    background-color: #2c9f48;
}
.line-footer {
    border-top-color: #2c5fa8;
}

/* Fix dotted line alignment khi text dài xuống dòng 2 */
.software-product-index .item-count {
    display: flex;
    flex-direction: column;
    align-items: center;
}
.software-product-index .item-count:after {
    top: 72px !important; /* Fixed position thay vì 36% */
}
.software-product-index .item-count h3 {
    min-height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.software-product-index .item-count h3 a {
    color: #ffffff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,0.6);
}

.activity-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 3em; /* 2 dòng, mỗi dòng 1.5em */
  line-height: 1.5em;
}

/* Nội dung: luôn 3 dòng, dư ẩn, thiếu vẫn chiếm 3 dòng */
.activity-desc {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 4.5em; /* 3 dòng, mỗi dòng 1.5em */
  line-height: 1.5em;
}

/* Clamp tiêu đề dịch vụ đúng 2 dòng */
.item-services h3.center a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
    line-height: 1.5em;
    text-overflow: ellipsis;
    word-break: break-word;
    color: #2c9f48 !important;
}

/* Clamp mô tả dịch vụ đúng 3 dòng, luôn hiện nút */
.item-services .desc-text {
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 6.0em; /* 4 dòng, mỗi dòng 1.5em */
    line-height: 1.5em;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Clamp tiêu đề và mô tả item-news-big */
.item-news-big h3 a {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
    line-height: 1.5em;
    text-overflow: ellipsis;
    word-break: break-word;
}

.item-news-big .ctn-news p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 4.5em;
    line-height: 1.5em;
    text-overflow: ellipsis;
    word-break: break-word;
}

/* Clamp tên developer/investor trong card dự án luôn đúng 2 dòng */
.item-services .sort-desc p,
.item-services > p.center {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 3em;
    line-height: 1.5em;
    text-overflow: ellipsis;
    word-break: break-word;
}

.title-item-news h2,
.title-item-news h2 a {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.8em;
  line-height: 1.4em;
  text-overflow: ellipsis;
  word-break: break-word;
  color: #2c9f48 !important;
}
.item-blog-news:hover .title-item-news h2 a {
  color: #ffffff !important;
}

/* 8. Additional Fixes */

/* Ẩn nút Đăng ký / Đăng nhập */
.line-header .btn-login,
.line-header .btn-register,
a[href*="dang-ky"],
a[href*="dang-nhap"] {
    display: none !important;
}

.narbar-main .main-menu > ul > li > ul > li:hover {
    background: #ebebeb !important; /* Bỏ opacity 80, dùng solid color */
}

/* Video: Tăng chiều cao video giữa (center slide) để nổi bật hơn */
.wondirect-video-section .slick-center .video-thumbnail img {
    height: 550px !important;
    transition: height 0.3s ease; /* Smooth transition khi slide */
}

/* Video: Căn giữa các slide theo chiều dọc - Cách 2 */
.wondirect-video-section .slick-list {
    display: flex !important;
    align-items: center !important;
}

.wondirect-video-section .slick-track {
    display: flex !important;
    align-items: center !important;
}

.wondirect-video-section .slick-slide {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: auto !important;
}

.wondirect-video-section .slick-slide > div {
    width: 100%;
    display: flex !important;
    align-items: center !important;
}

.wondirect-video-section .item-video {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Slider dự án/news liên quan: fix ảnh cao 0px do chain height:100% sụp trên mobile */
@media (max-width: 767px) {
    .slider-product-relation .img-services.fix-height,
    .slider-news-relation .img-services.fix-height {
        height: 40vw !important;
        min-height: 0 !important;
        overflow: hidden;
    }
    .slider-product-relation .img-services.fix-height a,
    .slider-news-relation .img-services.fix-height a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .slider-product-relation .img-services.fix-height a img,
    .slider-news-relation .img-services.fix-height a img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
}

/* Trang liên hệ: Giảm padding để bullet gần text hơn */
@media (max-width: 767px) {
    .infor-contact ul {
        padding-left: 15px; /* Giảm padding để bullet gần text hơn */
    }
}

/* Card listing: giới hạn max-width bằng ảnh (300px) để không có khoảng trắng thừa */
@media (min-width: 647px) and (max-width: 767px) {
    .item-blog-news {
        max-width: 300px;
    }
}

/* Ảnh dự án mobile: chiều cao co theo viewport để card đều nhau */
@media (max-width: 575px) {
    .img-item-news.fix-height {
        height: 30vw !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden;
    }
    .img-item-news.fix-height a {
        display: block;
        width: 100%;
        height: 100%;
    }
    .img-item-news.fix-height img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block !important;
    }
}