/* ============================================================================================== */
/* ========================================== horizontal basic ================================== */
/* ============================================================================================== */

.project-card-row.is-horizontal-basic.wrap {
    display: grid;
    width: 100%;
    gap: 10px;
    grid-template-columns: repeat(2,1fr); 
    /* grid-template-columns: repeat(2, 1fr);     */
}
.project-card-row.is-horizontal-basic.wrap .project-card.is-horizontal-basic:only-child {
    grid-column: 1 / -1;
}

.project-card.is-horizontal-basic {    
    width: 100%;
    height: 150px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    color: rgba(var(--cpn-color-black),1);
    background-color: rgba(var(--cpn-color-white),1);
    box-shadow: 0 0 0 rgba(var(--cpn-color-black), 0.13);
    border-radius: var(--cpn-card-project-corner);
    overflow: hidden;
    top: 0;
    cursor: pointer;
    text-decoration: none !important;
    outline: none !important;
    -webkit-transition: top 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: top 0.2s ease, box-shadow 0.2s ease;
    -ms-transition: top 0.2s ease, box-shadow 0.2s ease;
    -o-transition: top 0.2s ease, box-shadow 0.2s ease;
    transition: top 0.2s ease, box-shadow 0.2s ease;
}
.project-card.is-horizontal-basic>.project-card-col {
    position: relative;
}
.project-card.is-horizontal-basic>.project-card-col.this-col-img {
    width: 150px;
    height: 150px;
    border-radius: var(--cpn-card-project-corner);
    overflow: hidden;
    padding: 5px;
}
.project-card.is-horizontal-basic>.project-card-col.this-col-img .img-sec {
    overflow: hidden;
    border-radius: calc(var(--cpn-card-border-radius) - 5px);
    width: 100%;
    height: 100%;
}
.project-card.is-horizontal-basic>.project-card-col.this-col-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 150px);
    padding: 20px 30px;
}

.project-card.is-horizontal-basic .title {
    font-size: var(--cpn-h3-font-size);
    line-height: var(--cpn-h3-line-height);
    font-weight: 600;
    max-height: var(--cpn-h3-line-height);
    /* max-height: calc(var(--cpn-h3-line-height) * 2); */
}
.project-card.is-horizontal-basic .description {
    font-size: var(--cpn-default-font-size);
    line-height: var(--cpn-default-line-height);
    max-height: calc(var(--cpn-default-line-height) * 2);
    color: rgba(var(--cpn-color-gray),1);
}


/* --------------------------------------------------------------- */
/* --------------------------- select ---------------------------- */
/* --------------------------------------------------------------- */

.project-card.is-horizontal-basic {
    position: relative;
}
.project-card.is-horizontal-basic.select {
    box-shadow: 0 0 0 2px inset rgba(var(--cpn-color-primary),0);
}
.project-card.is-horizontal-basic.select:before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    background-color: rgba(var(--cpn-color-primary),0.08);
    opacity: 0;
}
.project-card.is-horizontal-basic.select .title {
    padding-right: 30px;
}
.project-card.is-horizontal-basic.select .checkmark {
    position: absolute;
    top: 15px;
    right: 15px;
    width: 30px;
    height: 30px;
    font-size: 12px;
    line-height: 26px;
    text-align: center;
    padding: 0 5px;
    border-radius: 10px;
    color: rgba(var(--cpn-color-black),1);
    background-color: rgba(var(--cpn-color-black),0);
    border: 2px solid rgba(var(--cpn-color-black),0.2); 
}
.project-card.is-horizontal-basic.select .checkmark:before {
    height: 0;
    opacity: 0;
}
.project-card.is-horizontal-basic.select:hover .checkmark {
    color: rgba(var(--cpn-color-primary),1);
    border-color: rgba(var(--cpn-color-primary),1);
}
.project-card.is-horizontal-basic.select:hover .checkmark:before {
    opacity: 1;
}

/* selected */
.project-card.is-horizontal-basic.select.selected:before {
    opacity: 1;
}
.project-card.is-horizontal-basic.select.selected {
    box-shadow: 0 0 0 2px inset rgba(var(--cpn-color-primary),1);
}
.project-card.is-horizontal-basic.select.selected .checkmark {
    color: rgba(var(--cpn-color-on-primary),1) !important;
    background-color: rgba(var(--cpn-color-primary),1) !important;
    border-color: rgba(var(--cpn-color-primary),1) !important;
}
.project-card.is-horizontal-basic.select.selected .checkmark:before {
    opacity: 1 !important;
}

/* ============================================================================================== */
/* ============================================= รอลบ horizontal ===================================== */
/* ============================================================================================== */


/* .project-card-row.is-horizontal.wrap .project-card.is-horizontal {
    display: flex;
    flex-wrap: wrap;
    width: calc(100% / 2);
    padding: 0 10px;
    margin-bottom: 20px;
} */

.project-card.is-horizontal>.inner {
    position: relative;
    width: 100%;
    height: 160px;
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    background-color: rgba(var(--cpn-color-white),1);
    box-shadow: 0 0 0 rgba(var(--cpn-color-black), 0.13);
    border-radius: var(--cpn-card-project-corner);
    overflow: hidden;
    top: 0;
    -webkit-transition: top 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: top 0.2s ease, box-shadow 0.2s ease;
    -ms-transition: top 0.2s ease, box-shadow 0.2s ease;
    -o-transition: top 0.2s ease, box-shadow 0.2s ease;
    transition: top 0.2s ease, box-shadow 0.2s ease;
}
.project-card.is-horizontal>.inner:hover {
    box-shadow: 0 10px 15px rgba(var(--cpn-color-black), 0.15);
    top: -5px;
}
.project-card.is-horizontal>.inner>.inner-col {
    position: relative;
}
.project-card.is-horizontal>.inner>.inner-col.this-col-img {
    width: 160px;
    height: 160px;
    border-radius: var(--cpn-card-project-corner);
    overflow: hidden;
}
.project-card.is-horizontal>.inner>.inner-col.this-col-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: calc(100% - 160px);
    padding: 20px 30px;
}
.project-card.is-horizontal a {
    color: rgba(var(--cpn-color-black),1);    
}
/* .project-card.is-horizontal .project-name {
    font-size: 18px;
    line-height: 30px;
    font-weight: 600;
} */
.project-card.is-horizontal .project-price+.project-status {
    margin-top: 5px;
}

/* category */
.project-card.is-horizontal ul.item-inline-group.project-status>li.cate {
    display: none;
}
.project-card.is-horizontal ul.item-inline-group.project-status>li.cate+li {
    padding-left: 0;
}

/**/
.project-card.is-horizontal .highlight-group {
    margin-top: 10px;
}


/* ============================================================================================== */
/* =========================================== horizontal table ================================= */
/* ============================================================================================== */

.project-card-row.is-horizontal-table,
.project-card.is-horizontal-table {
    position: relative;    
}
.project-card.is-horizontal-table>.inner {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    overflow: hidden;
    border-radius: var(--cpn-card-project-corner);
    background-color: rgba(var(--cpn-color-white),1);
    box-shadow: 0 0 0 rgba(var(--cpn-color-black), 0.13);
    border-radius: var(--cpn-card-project-corner);
    overflow: hidden;
    top: 0;
    -webkit-transition: top 0.2s ease, box-shadow 0.2s ease;
    -moz-transition: top 0.2s ease, box-shadow 0.2s ease;
    -ms-transition: top 0.2s ease, box-shadow 0.2s ease;
    -o-transition: top 0.2s ease, box-shadow 0.2s ease;
    transition: top 0.2s ease, box-shadow 0.2s ease;
}
.project-card.is-horizontal-table>.inner:hover {
    box-shadow: 0 5px 10px rgba(var(--cpn-color-black), 0.15);
    top: -3px;
}
.project-card.is-horizontal-table:first-child .inner-row {
    /* border-top-left-radius: 20px;
    border-top-right-radius: 20px; */
}
.project-card.is-horizontal-table:last-child .inner-row {
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
}
/* .project-card.is-horizontal-table:nth-child(odd) .inner-row {
    background-color: rgba(var(--cpn-color-white),1);
}
.project-card.is-horizontal-table:nth-child(even) .inner-row {
    background-color: rgba(var(--cpn-color-white),0.5);
} */
.project-card.is-horizontal-table+.project-card.is-horizontal-table {
    margin-top: 10px;
}

/* head */
.project-card-row.is-horizontal-table .table-head {
    position: relative;
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    line-height: 20px;
    background-color: rgba(var(--cpn-color-primary),0.2);
    border-radius: 20px;
    /* border-top-left-radius: 20px;
    border-top-right-radius: 20px; */
    padding: 20px 0;
    margin-bottom: 10px;
    font-weight: 600;
}
.project-card-row.is-horizontal-table .table-head .text-smallest {
    font-weight: 400;
}
.project-card-row.is-horizontal-table .table-head>.h-project {
    width: 480px;
    padding-left: 30px;
}
.project-card-row.is-horizontal-table .table-head>.h-cate {
    width: 165px;
    padding-left: 25px;
}
.project-card-row.is-horizontal-table .table-head>.h-price {
    width: 160px;
}
.project-card-row.is-horizontal-table .table-head>.h-bedroom {
    width: 130px;
}
.project-card-row.is-horizontal-table .table-head>.h-area {
    flex: 1 0 0;
}

/* detail */
.project-card.is-horizontal-table .inner-col.this-col-img {
    width: 200px;
    height: 200px;
    border-radius: var(--cpn-card-project-corner);
}

.project-card.is-horizontal-table .inner-col.this-col-info {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    width: calc(100% - 200px);
    padding: 20px 0;
}
.project-card.is-horizontal-table .inner-col.this-col-info>[class*="info-"] {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}
.project-card.is-horizontal-table .inner-col.this-col-info>[class*="info-"]+[class*="info-"] {
    border-left: 1px dashed rgba(var(--cpn-color-black-dark),0.2);
}
.project-card.is-horizontal-table .inner-col.this-col-info>.info-head .project-status {
    display: none;        
}

/* detail - info head */
.project-card.is-horizontal-table .info-head {
    width: 280px;
    padding: 0 25px;
}
.project-card.is-horizontal-table .info-head .project-name {
    font-size: 20px;
    line-height: 35px;
    font-weight: 600;
    max-height: 70px;
}
.project-card.is-horizontal-table .info-head .project-status {
    font-size: 13px;
    line-height: 20px;
    font-weight: 400;
    margin-bottom: 5px;
}
.project-card.is-horizontal-table .info-head .project-price {
    /* font-size: 13px;
    line-height: 20px;
    font-weight: 400; */
    line-height: 25px;
    /* font-weight: 600; */
}
.project-card.is-horizontal-table .info-head .action-btn-group {
    position: relative;
    flex: none;
    /* margin-top: 5px; */
    margin: auto 0 0 0;
}
.project-card.is-horizontal-table .inner-row:hover .info-head .action-btn-group>.action-btn.project-detail-btn {
    color: rgba(var(--cpn-color-primary),1);
}
.project-card.is-horizontal-table .info-head .highlight-group {
    flex-wrap: wrap;
    margin-top: 10px;
}
.project-card.is-horizontal-table .info-head .highlight-group>.highlight-item+.highlight-item {
    margin: 3px 0 0 0;
}

/* detail - info detail */
.project-card.is-horizontal-table .info-detail {
    width: calc(100% - 440px);
    padding: 5px 25px 0 25px;
}
.project-card.is-horizontal-table .detail-row {
    display: flex;
    flex-wrap: nowrap;
    flex-direction: row;
    /* align-items: center; */
    width: 100%;
}
.project-card.is-horizontal-table .detail-row+.detail-row {
    border-top: 1px dashed rgba(var(--cpn-color-black-dark),0.1);
    padding-top: 5px;
    margin-top: 5px;
}
.project-card.is-horizontal-table .detail-col {
    text-align: left;
}
.project-card.is-horizontal-table .detail-col.this-col-cate {
    width: 140px;    
    text-align: left;
}
.project-card.is-horizontal-table .detail-col.this-col-cate .note {
    color: rgba(var(--cpn-color-gray),0.8);
}
.project-card.is-horizontal-table .detail-col.this-col-price {
    width: 160px;
}
.project-card.is-horizontal-table .detail-col.this-col-bedroom {
    width: 130px;
}
.project-card.is-horizontal-table .detail-col.this-col-area {
    width: calc(100% - 430px); /* cate + price + bedroom */
}

/* detail - info action */
.project-card.is-horizontal-table .info-action {
    width: 160px;
    padding: 5px 25px 0 10px;
    align-items: flex-end;
}
.project-card.is-horizontal-table .info-action .action-btn-group {
    flex-wrap: wrap;
    flex: none;
    justify-content: flex-end;
}
.project-card.is-horizontal-table .info-action .action-btn-group>.action-btn {
    align-items: flex-end;
}
.project-card.is-horizontal-table .info-action .action-btn-group>.action-btn+.action-btn {
    margin: 5px 0 0 0;
}
.project-card.is-horizontal-table>.inner:hover .action-btn.project-detail-btn {
    color: rgba(var(--cpn-color-primary), 1);
}

/* xxl */
@media (min-width: 1400px) {}

/* xxl - 1 */
@media (min-width:1500px) and (max-width: 1599.98px) {

    /* ============================================================================================== */
    /* =========================================== horizontal table ================================= */
    /* ============================================================================================== */

    /* --------------------------------------------------------------- */
    /* ------------------------ table result ------------------------- */
    /* --------------------------------------------------------------- */

    .project-card.is-horizontal-table .info-head .project-name {
        font-size: 18px;
        line-height: 30px;
        max-height: 60px;
    }

}

/* xxl - 2 */
@media (min-width: 1400px) and (max-width: 1499.98px) {

    /* ============================================================================================== */
    /* =========================================== horizontal table ================================= */
    /* ============================================================================================== */

    /* --------------------------------------------------------------- */
    /* ------------------------ table result ------------------------- */
    /* --------------------------------------------------------------- */

    .project-card.is-horizontal-table .info-head .project-name {
        font-size: 18px;
        line-height: 30px;
        max-height: 60px;
    }

}

/* xl */
@media (min-width: 1200px) and (max-width: 1399.98px) {

    /* ============================================================================================== */
    /* =========================================== horizontal table ================================= */
    /* ============================================================================================== */

    /* --------------------------------------------------------------- */
    /* -------------------------- table head ------------------------- */
    /* --------------------------------------------------------------- */

    .project-card-row.is-horizontal-table .table-head>.h-project {
        width: 410px;
        padding-left: 20px;
    }
    .project-card-row.is-horizontal-table .table-head>.h-cate {
        width: 135px;
        padding-left: 20px;
    }
    .project-card-row.is-horizontal-table .table-head>.h-price {
        width: 140px;
    }
    .project-card-row.is-horizontal-table .table-head>.h-bedroom {
        width: 105px;
    }

    /* --------------------------------------------------------------- */
    /* ------------------------ table result ------------------------- */
    /* --------------------------------------------------------------- */

    .project-card.is-horizontal-table .inner-col.this-col-img {
        width: 180px;
        height: 180px;
    }
    .project-card.is-horizontal-table .inner-col.this-col-info {
        width: calc(100% - 180px);
        padding: 15px 0;
        font-size: 13px;
    }

    /* info head */
    .project-card.is-horizontal-table .info-head .project-name {
        font-size: 16px;
        line-height: 25px;
        max-height: 50px;
    }
    .project-card.is-horizontal-table .info-head {
        width: 230px;
        padding: 0 20px;
    }
    .project-card.is-horizontal-table .info-head .highlight-group {
        margin-top: 5px;
    }

    /* info detail */
    .project-card.is-horizontal-table .info-detail {
        width: calc(100% - 370px);
        padding: 3px 20px 0 20px;
    }
    .project-card.is-horizontal-table .detail-col.this-col-cate {
        width: 115px;
    }
    .project-card.is-horizontal-table .detail-col.this-col-price {
        width: 140px;
    }
    .project-card.is-horizontal-table .detail-col.this-col-bedroom {
        width: 105px;
    }.project-card.is-horizontal-table .detail-col.this-col-area {
        width: calc(100% - 360px);
    }

    /* info action */
    .project-card.is-horizontal-table .info-action {
        width: 140px;
        padding: 3px 20px 0 10px;
    }
    

}

/* lg */
@media (min-width: 992px) and (max-width: 1199.98px) {

    /* ============================================================================================== */
    /* ============================================= horizontal ===================================== */
    /* ============================================================================================== */
    
    .project-card-row.is-horizontal.wrap {
        width: 100%;
        margin: 0;
    }
    .project-card-row.is-horizontal.wrap .project-card.is-horizontal {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .project-card-row.is-horizontal.wrap .project-card.is-horizontal+.project-card.is-horizontal {
        margin-top: 10px;
    }

    /* ============================================================================================== */
    /* =========================================== horizontal table ================================= */
    /* ============================================================================================== */

    .project-card-row.is-horizontal-table {
        display: none;
    }

}

/* md - sm - xs */
@media (max-width: 991.98px) {}

/* md */
@media (min-width: 768px) and (max-width: 991.98px) {

    /* ============================================================================================== */
    /* ============================================= horizontal ===================================== */
    /* ============================================================================================== */
    
    .project-card-row.is-horizontal.wrap {
        width: 100%;
        margin: 0;
    }
    .project-card-row.is-horizontal.wrap .project-card.is-horizontal {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .project-card-row.is-horizontal.wrap .project-card.is-horizontal+.project-card.is-horizontal {
        margin-top: 20px;
    }

    /* ============================================================================================== */
    /* ========================================== horizontal basic ================================== */
    /* ============================================================================================== */

    .project-card-row.is-horizontal-basic.wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .project-card.is-horizontal-basic {
        height: 120px;
    }
    .project-card.is-horizontal-basic>.project-card-col.this-col-img {
        width: 120px;
        height: 120px;
    }
    .project-card.is-horizontal-basic>.project-card-col.this-col-info {
        width: calc(100% - 120px);
        padding: 15px 20px;
    }

    /* ============================================================================================== */
    /* =========================================== horizontal table ================================= */
    /* ============================================================================================== */

    .project-card-row.is-horizontal-table {
        display: none;
    }

}

/* sm - xs */
@media (max-width: 767.98px) {

    /* ============================================================================================== */
    /* ============================================= horizontal ===================================== */
    /* ============================================================================================== */

    .project-card-row.is-horizontal.wrap {
        width: 100%;
        margin: 0;
    }
    .project-card-row.is-horizontal.wrap .project-card.is-horizontal {
        width: 100%;
        padding: 0;
        margin: 0;
    }
    .project-card.is-horizontal>.inner:hover {
        box-shadow: 0 5px 10px rgba(var(--cpn-color-black), 0.15);
        top: -3px;
    }

    /* ============================================================================================== */
    /* ========================================== horizontal basic ================================== */
    /* ============================================================================================== */

    .project-card-row.is-horizontal-basic.wrap {
        grid-template-columns: repeat(1, 1fr);
        gap: 10px;
    }
    .project-card.is-horizontal-basic {
        height: 100px;
    }
    .project-card.is-horizontal-basic>.project-card-col.this-col-img {
        width: 100px;
        height: 100px;
    }
    .project-card.is-horizontal-basic>.project-card-col.this-col-info {
        width: calc(100% - 100px);
        padding: 15px 15px 15px 10px;
    }
    .project-card.is-horizontal-basic .title {
        font-size: var(--cpn-h4-font-size);
        line-height: var(--cpn-h4-line-height);
        max-height: var(--cpn-h4-line-height);
    }
    .project-card.is-horizontal-basic .description {
        font-size: var(--cpn-small-font-size);
        line-height: var(--cpn-small-line-height);
        max-height: calc(var(--cpn-small-line-height) * 2);
    }
    .project-card.is-horizontal-basic.select .checkmark {
        top: 6px;
        right: 6px;
        width: 25px;
        height: 25px;
        font-size: 10px;
        line-height: 20px;
    }

    /* ============================================================================================== */
    /* =========================================== horizontal table ================================= */
    /* ============================================================================================== */

    .project-card-row.is-horizontal-table {
        display: none;
    }

}

/* sm */
@media (min-width: 576px) and (max-width: 767.98px) {

    /* ============================================================================================== */
    /* ============================================= horizontal ===================================== */
    /* ============================================================================================== */

    .project-card-row.is-horizontal.wrap .project-card.is-horizontal+.project-card.is-horizontal {
        margin-top: 10px;
    }
    
    .project-card.is-horizontal>.inner {
        height: 150px;
    }    
    .project-card.is-horizontal>.inner>.inner-col.this-col-img {
        width: 150px;
        height: 150px;
    }
    .project-card.is-horizontal>.inner>.inner-col.this-col-info {
        width: calc(100% - 150px);
        padding: 20px 30px;
    }

    .project-card.is-horizontal .project-name {
        font-size: 16px;
        line-height: 25px;
    }
    .project-card.is-horizontal .project-price+.project-status {
        margin-top: 0;
    }

    /* category */
    .project-card.is-horizontal ul.item-inline-group.project-name>li.cate {
        display: none;
    }
    .project-card.is-horizontal ul.item-inline-group.project-name>li.cate+li {
        padding-left: 0;
    }
    .project-card.is-horizontal ul.item-inline-group.project-status>li.cate {
        display: inline;
    }
    .project-card.is-horizontal ul.item-inline-group.project-status>li.cate+li {
        padding-left: 5px;
    }

    /* highlight */
    .project-card.is-horizontal .highlight-group {
        margin-top: 10px;
    }

    /* select */
    .project-card.is-horizontal.select .checkmark {
        top: 10px;
        right: 10px;
    }

}

/* xs */
@media (max-width: 575.98px) {

    /* ============================================================================================== */
    /* ============================================= horizontal ===================================== */
    /* ============================================================================================== */

    .project-card-row.is-horizontal.wrap .project-card.is-horizontal+.project-card.is-horizontal {
        margin-top: 10px;
    }
    
    .project-card.is-horizontal>.inner {
        height: 130px;
    }    
    .project-card.is-horizontal>.inner>.inner-col.this-col-img {
        width: 130px;
        height: 130px;
    }
    .project-card.is-horizontal>.inner>.inner-col.this-col-info {
        width: calc(100% - 130px);
        padding: 15px;
    }

    .project-card.is-horizontal .project-name {
        font-size: 16px;
        line-height: 25px;
    }
    .project-card.is-horizontal .project-price+.project-status {
        margin-top: 0;
    }

    /* category */
    .project-card.is-horizontal ul.item-inline-group.project-name>li.cate {
        display: none;
    }
    .project-card.is-horizontal ul.item-inline-group.project-name>li.cate+li {
        padding-left: 0;
    }
    .project-card.is-horizontal ul.item-inline-group.project-status>li.cate {
        display: inline;
    }
    .project-card.is-horizontal ul.item-inline-group.project-status>li.cate+li {
        padding-left: 5px;
    }

    /* highlight */
    .project-card.is-horizontal .highlight-group {
        margin-top: 5px;
    }

    /* select */
    .project-card.is-horizontal.select .checkmark {
        top: 10px;
        right: 10px;
    }

}

/* xs custom */
@media (max-width: 399.98px) {}