.owl-carousel-news .owl-stage {
    display: flex;
}
.owl-carousel-news .owl-item {
    display: grid;
    height: auto !important;
}

.owl-carousel-real-estate .owl-stage {
    display: flex;
}
.owl-carousel-real-estate .owl-item {
    display: grid;
    height: auto !important;
}





.accommodation-suggestion-section .section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    margin-top: 10px;
}
.accommodation-suggestion-section .section-title {
    color: #0b1f40;
    font-size: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    text-transform: uppercase;
}
.accommodation-suggestion-section .title-decor {
    margin-left: 10px;
}
.accommodation-suggestion-section .btn-view-all {
    color: #1a66ff;
    border: 1px solid #1a66ff;
    border-radius: 6px;
    padding: 6px 16px;
    font-size: 14px;
    font-weight: 600;
    background: transparent;
    text-decoration: none;
    transition: 0.2s ease-in-out;
}
.accommodation-suggestion-section .btn-view-all:hover {
    background: #1a66ff;
    color: #ffffff;
}
.accommodation-suggestion-section .stay-card {
    border: 1px solid #f0f2f5;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    transition: all 0.3s ease;
    margin-bottom: 10px;
    display: flex;
    flex-direction: column;
    height: 100%;
}

.accommodation-suggestion-section .stay-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.accommodation-suggestion-section .stay-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}

.accommodation-suggestion-section .stay-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}

.accommodation-suggestion-section .stay-title {
    font-size: 16px;
    font-weight: 700;
    color: #0b1f40;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 44px;
}

.accommodation-suggestion-section .stay-location {
    font-size: 13px;
    color: #555;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    flex-grow: 1;
}

.accommodation-suggestion-section .stay-location svg {
    margin-right: 6px;
    flex-shrink: 0;
}

.accommodation-suggestion-section .stay-price-box {
    background-color: #f7f9fc;
    border-radius: 12px;
    padding: 6px 6px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: auto;
}

.accommodation-suggestion-section .stay-price-label {
    font-size: 12px;
    color: #666;
    margin-bottom: 2px;
}

.accommodation-suggestion-section .stay-price-value {
    font-size: 15px;
    font-weight: 700;
    color: #d32f2f;
    margin: 0;
}

.accommodation-suggestion-section .stay-btn-arrow {
    width: 32px;
    height: 32px;
    background: #ffffff;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    box-shadow: 0 2px 6px rgba(0,0,0,0.06);
    color: #1a66ff;
    text-decoration: none;
    flex-shrink: 0;
}
.accommodation-suggestion-section .features-banner {
    background-color: #f7f9fc;
    border-radius: 12px;
    padding: 20px 0;
    margin-top: 10px;
    margin-bottom: 10px;
}

.accommodation-suggestion-section .feature-item {
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: center;
}

.accommodation-suggestion-section .feature-icon {
    margin-right: 12px;
    display: flex;
}
.accommodation-suggestion-section .feature-text h5 {
    font-size: 14px;
    font-weight: 700;
    color: #0b1f40;
    margin: 0 0 2px 0;
}
.accommodation-suggestion-section .feature-text p {
    font-size: 12px;
    color: #666;
    margin: 0;
}
.accommodation-suggestion-section .feature-col:not(:last-child) {
    border-right: 1px solid #e1e5eb;
}
@media (max-width: 768px) {
    .accommodation-suggestion-section .feature-col:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e1e5eb;
        margin-bottom: 12px;
        padding-bottom: 12px;
    }
    .accommodation-suggestion-section .feature-item {
        justify-content: flex-start;
    }
}






.sightseeing-section-wrapper .sightseeing-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 10px;
    margin-bottom: 10px;
    padding-bottom: 8px;
}
.sightseeing-section-wrapper .sightseeing-title {
    color: #0b1f40;
    font-size: 20px;
    margin: 0;
    display: flex;
    align-items: center;
    text-transform: uppercase;
    position: relative;
}
.sightseeing-section-wrapper .sightseeing-title::after {
    content: '';
    position: absolute;
    bottom: -8px;
    left: 0;
    width: 40px;
    height: 3px;
    background-color: #f27024;
    border-radius: 2px;
}
.sightseeing-section-wrapper .title-decor {
    margin-left: 8px;
    margin-bottom: 8px;
}
.sightseeing-section-wrapper .btn-view-all {
    color: #1a66ff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    background: transparent;
    transition: all 0.2s;
}
.sightseeing-section-wrapper .btn-view-all:hover {
    color: #0044cc;
}
.sightseeing-section-wrapper .sightseeing-card {
    border: 1px solid #f0f2f5;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.sightseeing-section-wrapper .sightseeing-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}
.sightseeing-section-wrapper .sightseeing-card-img {
    width: 100%;
    height: 190px;
    object-fit: cover;
}
.sightseeing-section-wrapper .sightseeing-card-body {
    padding: 16px;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
}
.sightseeing-section-wrapper .sightseeing-card-title {
    font-size: 16px;
    font-weight: 700;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.sightseeing-section-wrapper .sightseeing-card-title a {
    color: #0b1f40;
    text-decoration: none;
}
.sightseeing-section-wrapper .sightseeing-card-title a:hover {
    color: #1a66ff;
}
.sightseeing-section-wrapper .sightseeing-card-location {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: flex-start;
    margin-bottom: 16px;
}

.sightseeing-section-wrapper .sightseeing-card-location svg {
    margin-right: 6px;
    margin-top: 2px;
    flex-shrink: 0;
}
.sightseeing-section-wrapper .sightseeing-card-footer {
    padding: 12px 16px;
    border-top: 1px solid #f4f6f8;
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
}
.sightseeing-section-wrapper .sightseeing-card-footer svg {
    margin-right: 6px;
    flex-shrink: 0;
}
.sightseeing-section-wrapper .sightseeing-card-footer .view-count {
    color: #1a66ff;
    font-weight: 700;
    margin-left: 4px;
}




.discover-section-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}
.discover-section-wrapper .banner-left {
    display: block;
    border-radius: 12px;
    overflow: hidden;
    height: 100%;
}
.discover-section-wrapper .banner-left img {
    width: 100%;
    height: 100%;
    border-radius: 12px;
}
.discover-section-wrapper .discover-right-panel {
    background: #ffffff;
    border: 1px solid #eef2f7;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    height: 100%;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}
.discover-section-wrapper .discover-header {
    background-color: #0b3d7a;
    color: #ffffff;
    padding: 14px 16px;
    display: flex;
    align-items: center;
}
.discover-section-wrapper .discover-header svg {
    margin-right: 10px;
    flex-shrink: 0;
}
.discover-section-wrapper .discover-header-title {
    font-size: 16px;
    font-weight: 700;
    text-transform: uppercase;
    color: #ffffff;
    text-decoration: none;
    margin: 0;
}
.discover-section-wrapper .discover-header-title:hover {
    color: #f0f0f0;
}
.discover-section-wrapper .discover-list {
    display: flex;
    flex-direction: column;
    padding: 0 16px;
}
.discover-section-wrapper .discover-item {
    display: flex;
    padding: 16px 0;
    border-bottom: 1px solid #f0f2f5;
    text-decoration: none !important;
    transition: background-color 0.2s ease;
}
.discover-section-wrapper .discover-item:last-child {
    border-bottom: none;
}
.discover-section-wrapper .discover-img-wrap {
    width: 85px;
    height: 85px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    margin-right: 14px;
}
.discover-section-wrapper .discover-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

.discover-section-wrapper .discover-item:hover .discover-img-wrap img {
    transform: scale(1.05);
}
.discover-section-wrapper .discover-content {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    flex-grow: 1;
}
.discover-section-wrapper .discover-category {
    color: #1a66ff;
    font-size: 13px;
    margin-bottom: 4px;
    font-weight: 600;
}
.discover-section-wrapper .discover-title {
    font-size: 15px;
    font-weight: 700;
    color: #0b1f40;
    margin-bottom: 8px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}
.discover-section-wrapper .discover-item:hover .discover-title {
    color: #1a66ff;
}
.discover-section-wrapper .discover-meta {
    font-size: 13px;
    color: #777;
    display: flex;
    align-items: center;
    margin-top: auto;
}
.discover-section-wrapper .discover-meta svg {
    margin-right: 6px;
}





.investment-section-wrapper {
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    background-color: #ffffff;
}
.investment-section-wrapper .inv-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-top: 10px;
    margin-bottom: 10px;
}
.investment-section-wrapper .inv-title-row {
    display: flex;
    align-items: center;
    margin-bottom: 4px;
}
.investment-section-wrapper .inv-title {
    font-size: 20px;
    font-weight: 600;
    color: #0b1f40;
    margin: 0;
}

.investment-section-wrapper .inv-badge {
    background-color: #ff2b2b;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-left: 10px;
}

.investment-section-wrapper .inv-subtitle {
    font-size: 14px;
    color: #555;
    margin: 0;
}

.investment-section-wrapper .inv-view-all {
    color: #1a66ff;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
}

/* Tabs (Bộ lọc) */
.investment-section-wrapper .inv-tabs-container {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    overflow-x: auto; /* Cuộn ngang trên mobile */
    padding-bottom: 5px;
}

/* Ẩn thanh cuộn ngang */
.investment-section-wrapper .inv-tabs-container::-webkit-scrollbar {
    display: none;
}

.investment-section-wrapper .inv-tab-link {
    display: flex;
    align-items: center;
    padding: 8px 16px;
    border-radius: 50px;
    border: 1px solid #e1e5eb;
    background-color: #ffffff;
    color: #333;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none !important;
    white-space: nowrap;
    transition: all 0.2s;
    cursor: pointer;
}

.investment-section-wrapper .inv-tab-link svg {
    margin-right: 8px;
    fill: currentColor;
}

.investment-section-wrapper .inv-tab-link.active {
    background-color: #f0f5ff;
    border-color: #1a66ff;
    color: #1a66ff;
}

/* Thẻ Card Bất động sản */
.investment-section-wrapper .inv-card {
    border: 1px solid #f0f2f5;
    border-radius: 12px;
    overflow: hidden;
    background: #ffffff;
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: all 0.3s ease;
    margin-bottom: 15px;
}

.investment-section-wrapper .inv-card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
    transform: translateY(-2px);
}

.investment-section-wrapper .inv-card-img {
    width: 100%;
    height: 180px;
    object-fit: cover;
}
.investment-section-wrapper .inv-card-body {
    padding: 16px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.investment-section-wrapper .inv-location {
    font-size: 13px;
    color: #666;
    display: flex;
    align-items: center;
    margin-bottom: 8px;
}
.investment-section-wrapper .inv-location svg {
    margin-right: 6px;
}
.investment-section-wrapper .inv-card-title {
    font-size: 15px;
    font-weight: 700;
    color: #0b1f40;
    margin-bottom: 12px;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 42px;
}

.investment-section-wrapper .inv-area {
    font-size: 13px;
    color: #555;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 16px;
    border-bottom: 1px dashed #e1e5eb;
}

.investment-section-wrapper .inv-area svg {
    margin-right: 6px;
}

.investment-section-wrapper .inv-price-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
}

.investment-section-wrapper .inv-price-total {
    font-size: 18px;
    font-weight: 700;
    color: #d32f2f; /* Màu đỏ */
}

.investment-section-wrapper .inv-price-sqm {
    font-size: 13px;
    color: #777;
}

/* Banner Footer (Cam kết) */
.investment-section-wrapper .inv-footer-banner {
    background-color: #f8fafe;
    border-radius: 12px;
    padding: 24px 0;
    margin-top: 10px;
}

.investment-section-wrapper .inv-feature-item {
    display: flex;
    align-items: center;
    padding: 0 15px;
    justify-content: center;
}

.investment-section-wrapper .inv-feature-icon {
    margin-right: 12px;
    display: flex;
}

.investment-section-wrapper .inv-feature-text h5 {
    font-size: 14px;
    font-weight: 700;
    color: #0b1f40;
    margin: 0 0 2px 0;
}

.investment-section-wrapper .inv-feature-text p {
    font-size: 12px;
    color: #666;
    margin: 0;
}

.investment-section-wrapper .inv-feature-col:not(:last-child) {
    border-right: 1px solid #e1e5eb;
}

@media (max-width: 768px) {
    .investment-section-wrapper .inv-feature-col:not(:last-child) {
        border-right: none;
        border-bottom: 1px solid #e1e5eb;
        margin-bottom: 16px;
        padding-bottom: 16px;
    }
    .investment-section-wrapper .inv-feature-item {
        justify-content: flex-start;
    }
    .investment-section-wrapper .inv-header {
        flex-direction: column;
    }
    .investment-section-wrapper .inv-view-all {
        margin-top: 10px;
    }
}





.proser-image-main{height: 500px}
.text-title-1{overflow:hidden;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical}
.text-title-2{overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;line-height:1.2}
.text-title-3{overflow:hidden;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;line-height:1.2}

.real-estate-box{
    border-radius:14px;
}
.real-title{
    font-size:20px;
    font-weight:600;
    color:#1f2937;
}
.badge-new{
    background:#ff2d2d;
    color:#fff;
    font-size:13px;
    padding:4px 10px;
    border-radius:8px;
    margin-left:10px;
}
.view-all{
    font-weight:600;
    color:#2979ff;
    text-decoration:none;
}
.filter-tabs{
    display:flex;
    flex-wrap:wrap;
    margin-top:25px;
    margin-bottom:25px;
    gap:30px;
}
.filter-tabs a{
    color:#222;
    font-weight:600;
    position:relative;
    text-decoration:none;
}
.filter-tabs a.active{
    color:#2979ff;
}
.filter-tabs a.active:after{
    content:'';
    position:absolute;
    left:0;
    bottom:-12px;
    width:100%;
    height:3px;
    background:#2979ff;
    border-radius:10px;
}
.property-card{
    border:1px solid #edf0f3;
    border-radius:14px;
    overflow:hidden;
    background:#fff;
    transition:.3s;
    height:100%;
}
.property-card:hover{
    transform:translateY(-4px);
    box-shadow:0 8px 20px rgba(0,0,0,.08);
}
.property-img{
    position:relative;
    height:180px;
    overflow:hidden;
}
.property-img img{
    width:100%;
    height:100%;
    object-fit:cover;
}
.top-badge{
    position:absolute;
    top:12px;
    left:12px;
    padding:5px 12px;
    color:#fff;
    font-size:13px;
    font-weight:600;
    border-radius:8px;
}
.badge-green{background:#00c58e;}
.badge-red{background:#ff3d3d;}
.badge-blue{background:#1e88ff;}

.heart-btn{
    position:absolute;
    top:12px;
    right:12px;
    width:34px;
    height:34px;
    background:rgba(255,255,255,.9);
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#666;
}
.property-body{
    padding:8px;
}
.property-name{
    font-size:16px;
    font-weight:600;
    margin-bottom:6px;
}
.property-location{
    color:#7a7a7a;
    font-size:15px;
    margin-bottom:8px;
}
.property-meta{
    font-size:15px;
    color:#555;
    margin-bottom:10px;
}
.price{
    font-size:16px;
    font-weight:600;
}
.old-price{
    color:#999;
    text-decoration:line-through;
    margin-left:10px;
    font-size:16px;
}
.bottom-feature{
    margin-top:15px;
    border-top:1px solid #f1f1f1;
    padding-top:25px;
}
.feature-item{
    display:flex;
    align-items:flex-start;
    gap:14px;
}
.feature-icon{
    width:46px;
    height:46px;
    border:1px solid #dbeafe;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#2979ff;
    font-size:20px;
}
.feature-title{
    font-weight:600;
    margin-bottom:4px;
}
.feature-desc{
    color:#666;
    font-size:14px;
}
.tab-item{
    display:none;
}
.tab-item.active{
    display:block;
}
.filter-tabs a{
    margin-right:20px;
    font-weight:600;
    color:#222;
    cursor:pointer;
}
.filter-tabs a.active{
    color:#007bff;
}
.filter-tabs{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    white-space:nowrap;
    gap:12px;
    padding-bottom:8px;
    scrollbar-width:thin;
    scroll-behavior:smooth;
}
.filter-tabs::-webkit-scrollbar{
    height:6px;
}
.filter-tabs::-webkit-scrollbar-track{
    background:#f1f1f1;
    border-radius:20px;
}
.filter-tabs::-webkit-scrollbar-thumb{
    background:#c7c7c7;
    border-radius:20px;
}
.filter-tabs .tab-link{
    flex:0 0 auto;
    padding:5px 18px;
    border-radius:30px;
    background:#f8f9fa;
    color:#222;
    font-weight:600;
    text-decoration:none;
    transition:.25s;
}
.filter-tabs .tab-link:hover{
    background:#e9ecef;
}
.filter-tabs .tab-link.active{
    background:#007bff;
    color:#fff;
}
@media(max-width:768px){
    .filter-tabs .tab-link{
        padding:5px 14px;
        font-size:14px;
    }
}
@media(min-width:992px){
    .col-lg-2-4{
        flex:0 0 20%;
        max-width:20%;
    }
}
.feature-item-mobile{
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
}
.feature-item-mobile .feature-icon{
    font-size:22px;
}
.feature-item-mobile .feature-title{
    font-size:13px;
    font-weight:600;
    line-height:1.3;
}

.custom-card {
    border-radius: 12px;
    overflow: hidden;
    transition: 0.3s;
}
.custom-card:hover {
    transform: translateY(-5px);
}
.heart-icon {
    position: absolute;
    top: 10px;
    right: 10px;
    padding:5px;
    height: 23px;
    background: #f5f2f2;
    border-radius: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: .6;
}
.heart-icon i {
    color: #999;
}
.card-body h6 {
    font-size: 17px;
    line-height: 1.4;
}

.img-fixed {
    aspect-ratio: 4/3;
    object-fit: cover;
}
.border-bottom:last-child{
    border-bottom: none !important;
}

/*Box catogory*/
.category-card {
    background: #fff;
    border-radius: 12px;
    padding: 12px 8px;
    transition: all .25s ease;
    height: 100%;
}
.category-card:hover {
    box-shadow: 0 6px 18px rgba(0,0,0,.08);
    transform: translateY(-3px);
    border-color: #ddd;
}
.category-thumb img {
    object-fit: contain;
    border-radius: 50%;
    border: 1px solid #f1f1f1;
    padding: 6px;
    background: #fafafa;
    transition: all .25s ease;
}
.category-card:hover .category-thumb img {
    transform: scale(1.05);
    border-color: #ddd;
}
.category-title {
    font-size: 0.9rem;
    color: #333;
    line-height: 1.3;
}
.category-title:hover {
    color: #007bff;
    text-decoration: none;
}


.font-amazon {
    font-family: 'Amazon Ember', Arial, sans-serif;
}

@media only screen
  and (min-width: 768px)
  and (max-width: 1024px)
  and (orientation: portrait) {
    .custon-padding-none {
        padding: 5px;
    }
}
.hover-background{position:absolute;width:100%;height:500px;background-color:black;z-index:999;opacity:0.7;display:none;}
.w-5{width:5%}
.w-10{width:10%}
.w-15{width:15%}
.w-20{width:20%}
.w-25{width:25%}
.w-30{width:30%}
.w-35{width:35%}
.w-40{width:40%}
.w-45{width:45%}
.w-50{width:50%}
.w-55{width:55%}
.w-60{width:60%}
.w-65{width:65%}
.w-70{width:70%}
.w-75{width:75%}
.w-80{width:80%}
.w-85{width:85%}
.w-90{width:90%}
.w-95{width:95%}
.size-08{font-size:.8rem}
.size-09{font-size:.9rem}
.size-10{font-size:1rem}
.size-11{font-size:1.1rem}
.size-12{font-size:1.2rem}
.size-13{font-size:1.3rem}
.size-14{font-size:1.4rem}
.size-15{font-size:1.5rem}
.width_custom_30{width:30%}
.width_custom_70{width:65%}
.object-fit-cover{object-fit: cover}
.object-fit-contain{object-fit: contain}
body{background-color:#e9edf0}
a{color: #000;font-size: 1rem}
p{font-size:.9rem}
strong{font-weight:600}
label{font-weight:600}
.custom-width-menu{width:100% !important}
.container{max-width: 1220px}
.container-color-white{background-color:#fff;padding:1rem}
.title_indust {float: left;height: 32px;background-color: #b5b8ba;text-align: center;line-height: 30px;color: #FFF;font-weight: bold;}
.box-info-footer{line-height:1}
.box-four-home:last-child{border-bottom:0px !important}
.box-detail img{max-width:100% !important;max-height:100%}
.box-detail table{width:100% !important}
.content-detail img{max-width:100% !important}
.box-scroll-desktop{overflow-y: scroll;max-height: 380px}

.form-text {
    display: block;
    margin-top: 0.25rem;
    font-size: 14px;
    color: #dc3545 !important;
}
.btn-xs {
    padding: .125rem .25rem;
    font-size: .75rem;
    line-height: 1.5;
    border-radius: .15rem;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu {
    margin: 0;
    padding: 0;
    border: 0;
    list-style: none;
    display: block;
    position: relative;
    z-index: 999; 
}
#cssmenu:after,
#cssmenu > ul:after {
    content: ".";
    display: block;
    clear: both;
    visibility: hidden;
    line-height: 0;
    height: 0;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
    color: #fff;
    width:180px;
}
#cssmenu > ul > li.has-sub > a::after {
    position: absolute;  
    top: 10px;
    right: 0px;
    width: 7px;
    height: 7px;
    border-bottom: 2px solid #000;
    border-right: 2px solid #000;
}
#cssmenu > ul > li.has-sub:hover > a::after {
    border-color: #e43d1c;
}
#cssmenu ul ul {
    position: absolute;
    left: -9999px;
}
#cssmenu li:hover > ul {
    left:-1rem;
}
#cssmenu.align-right li:hover > ul {
    right: 0;
}
#cssmenu ul ul ul {
    margin-left: 105.7%;
    top: 0;
}
#cssmenu.align-right ul ul ul {
    margin-left: 0;
    margin-right: 100%;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
    color: #e43d1c; 
}
#cssmenu ul ul li.has-sub > a::after {
    position: absolute;
    top: 20px;
    right: 10px;
    width: 4px;
    height: 4px;
}
#cssmenu .child {width:337% !important}
#cssmenu .child img{width:100%;height:88px;object-fit:contain}
/*------------Edn custom menu desktop------------*/

#bars{position:absolute;z-index:999}
#bars{margin-top:2rem}
#bars ul{background-color:#f5f5f5;list-style:none}
#bars ul li a i{font-size:20px;margin-right:5px}
#bars ul li a strong{margin-left:5px}
.logo{max-width:100%;object-fit:contain}
.logo-mobi{max-width:70%;object-fit:contain}
.cart-quantity{border:1px solid #000;padding:0px 4px;border-radius:39%;font-size:.8rem}
.border-bottom-dotted{border-bottom:1px dotted #ddd;}

/*-------------Custom select2-----------------*/
.select2-container--default .select2-selection--single {
    border: 1px solid #ced4da;
    padding: .46875rem .75rem;
    height: calc(2.25rem + 2px);
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    color: #444;
    line-height:20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    top:60%;
}
.line-clamp-1 {
   white-space: nowrap;      /* Không xuống dòng */
   overflow: hidden;         /* Ẩn phần dư */
   text-overflow: ellipsis;  /* Hiện ... */
}
.line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.3em;
    min-height: calc(1.3em * 2);
}
.cateId>.select2-search{width:100% !important;background-color:#fff}
#select2-cateId-results{width: 100%;background-color:#fff;max-height:500px;border:1px solid #ccc}
#select2-cateId-results li{border-bottom:1px dotted #ccc}
#select2-cateId-results.select2-dropdown{border:0px !important}

.cateSerId>.select2-search{width:100% !important;background-color:#fff}
#select2-cateSerId-results{width: 100%;background-color:#fff;max-height:500px;border:1px solid #ccc}
#select2-cateSerId-results li{border-bottom:1px dotted #ccc}
#select2-cateSerId-results.select2-dropdown{border:0px !important}

.provinceId>.select2-search{width:150% !important;background-color:#fff}
#select2-provinceId-results{width: 150%;background-color:#fff;max-height:500px;border:1px solid #ccc}
#select2-provinceId-results li{border-bottom:1px dotted #ccc}
#select2-provinceId-results.select2-dropdown{border:0px !important}

.wardId>.select2-search{width:150% !important;background-color:#fff}
#select2-wardId-results{width: 150%;background-color:#fff;max-height:500px;border:1px solid #ccc}
#select2-wardId-results li{border-bottom:1px dotted #ccc}
#select2-wardId-results.select2-dropdown{border:0px !important}

.streetId>.select2-search{width:150% !important;background-color:#fff}
#select2-streetId-results{width: 150%;background-color:#fff;max-height:500px;border:1px solid #ccc}
#select2-streetId-results li{border-bottom:1px dotted #ccc}
#select2-streetId-results.select2-dropdown{border:0px !important}

/*Province*/
.ProvinceIDM>.select2-search{width:200% !important;background-color:#fff}
#select2-ProvinceIDM-results{width: 200%;background-color:#fff;max-height:300px;border:1px solid #ccc}
#select2-ProvinceIDM-results li{border-bottom:1px dotted #ccc}
#select2-ProvinceIDM-results > .select2-dropdown{border:0px !important}

/*Ward*/
.WardIDM>.select2-search{width:200% !important;background-color:#fff;margin-left:-100%}
#select2-WardIDM-results{width: 200%;background-color:#fff;max-height:300px;border:1px solid #ccc;margin-left: -100%}
#select2-WardIDM-results li{border-bottom:1px dotted #ccc}
#select2-WardIDM-results.select2-dropdown{border:0px !important}

/*Street*/
.StreetIDM>.select2-search{width:300% !important;background-color:#fff;margin-left:-200%}
#select2-StreetIDM-results{width: 300%;background-color:#fff;max-height:300px;border:1px solid #ccc;margin-left: -200%}
#select2-StreetIDM-results li{border-bottom:1px dotted #ccc}
#select2-StreetIDM-results.select2-dropdown{border:0px !important}

/*Cate*/
.CateIDM>.select2-search{width:200% !important;background-color:#fff}
#select2-CateIDM-results{width: 200%;background-color:#fff;max-height:500px;border:1px solid #ccc}
#select2-CateIDM-results li{border-bottom:1px dotted #ccc}
#select2-CateIDM-results.select2-dropdown{border:0px !important}

.CateSerIDM>.select2-search{width:200% !important;background-color:#fff;margin-left:-100% !important}
#select2-CateSerIDM-results{width: 200%;background-color:#fff;max-height:500px;border:1px solid #ccc;margin-left:-100%}
#select2-CateSerIDM-results li{border-bottom:1px dotted #ccc}
#select2-CateSerIDM-results.select2-dropdown{border:0px !important}


/*-------------End custom select2-----------------*/

#proviceR .select2{width: 100% !important}
#wardR .select2{width: 100% !important}
#streetR .select2{width: 100% !important}

.inputTypeaheadDesk .twitter-typeahead{width:100% !important}
.inputTypeaheadDesk .tt-menu{
    width:100%;
    border:1px solid #ddd;
    background:#fff;
    max-height: 480px;
    overflow-y: scroll;
    overflow-x: hidden;
    /*margin-left: -50%;*/
}
.inputTypeaheadDesk .tt-menu .header-title-search{padding: .5rem 1rem;background-color: #f8f9fa}
.inputTypeaheadDesk .tt-menu .list-result-search{padding: .5rem 1rem;width:100%;border-bottom:1px dotted #ccc}
.inputTypeaheadDesk .tt-menu .list-result-search-construct{padding: .3rem .5rem;width:100%;border-bottom:1px dotted #ccc}
.inputTypeaheadDesk .tt-menu .list-result-search-construct img{width:100%;height:40px;object-fit:cover}
.inputTypeaheadDesk .tt-menu .list-result-search-construct .image-result{width:10%}
.inputTypeaheadDesk .tt-menu .list-result-search-construct .title-result{width:87%;line-height: 1.3 !important;margin-left:3%}

.inputTypeaheadMobi >.twitter-typeahead{width:100% !important}
.inputTypeaheadMobi .tt-menu{
    width:100%;
    border:1px solid #ddd;
    background:#fff;
    max-height: 480px;
    overflow-y: scroll;
    overflow-x: hidden;
}
.inputTypeaheadMobi .tt-menu .header-title-search{padding: .5rem 1rem;background-color: #f8f9fa}
.inputTypeaheadMobi .tt-menu .list-result-search{padding: .5rem 1rem;width:100%;border-bottom:1px dotted #ccc}
.inputTypeaheadMobi .tt-menu .list-result-search-construct{padding: .3rem .5rem;width:100%;border-bottom:1px dotted #ccc}
.inputTypeaheadMobi .tt-menu .list-result-search-construct img{width:100%;height:40px;object-fit:cover}
.inputTypeaheadMobi .tt-menu .list-result-search-construct .image-result{width:15%}
.inputTypeaheadMobi .tt-menu .list-result-search-construct .title-result{width:82%;line-height: 1.3 !important;margin-left:3%}

.inputTypeaheadMobiModal >.twitter-typeahead{width:100% !important}
.inputTypeaheadMobiModal .tt-menu{
    width:100%;
    border:1px solid #ddd;
    background:#fff;
    max-height: 480px;
    overflow-y: scroll;
    overflow-x: hidden;
    top: 125% !important;
    margin-left: -18%;
    width: 135%;
}
.inputTypeaheadMobiModal .tt-menu .header-title-search{padding: .5rem 1rem;background-color: #f8f9fa}
.inputTypeaheadMobiModal .tt-menu .list-result-search{padding: .5rem 1rem;width:100%;border-bottom:1px dotted #ccc}
.inputTypeaheadMobiModal .tt-menu .list-result-search-construct{padding: .3rem .5rem;width:100%;border-bottom:1px dotted #ccc}
.inputTypeaheadMobiModal .tt-menu .list-result-search-construct img{width:100%;height:40px;object-fit:cover}
.inputTypeaheadMobiModal .tt-menu .list-result-search-construct .image-result{width:15%}
.inputTypeaheadMobiModal .tt-menu .list-result-search-construct .title-result{width:82%;line-height: 1.2 !important;margin-left:3%}
/*------------End custom search auto-------------*/

/*-------------See more-----------------*/
#seeMore p.collapse:not(.show) {overflow: hidden;display:-webkit-box;-webkit-line-clamp:10;-webkit-box-orient:vertical}
#seeMore p.collapsing {min-height: 100px !important;}
#seeMore span.collapsed:after  {content: '+ Xem thêm';}
#seeMore span:not(.collapsed):after {content: '- Thu gọn';}
#seeMore span{color:blue;cursor:pointer}


@media only screen and (max-width: 1080px) {
    .list-group{width:200% !important}
}
@media only screen and (max-width: 767px) {
	.box-detail img{width:100% !important;height: auto !important;}
	.box-detail table{width:100% !important !important}
	.custon-padding-none 
	{
		padding: 0px;
	}
    .list-group{width:100% !important}
    .width_custom_30{width:30% !important}
    .width_custom_70{width:70% !important}
    .content-detail img{max-width:100% !important;height:auto !important}
    .custom-width-menu{width:150% !important}
    .custom-width-li{width: 100% !important}
    .box-scroll-desktop{overflow-y: none;max-height: 1000px}
    .proser-image-main{height: 300px}
}