/* ===== SHADOWS & TRANSITIONS ===== */
.box-shadow,
.row-box-shadow-2 .col-inner,
.row-box-shadow-2-hover .col-inner:hover,
.box-shadow-2,
.box-shadow-2-hover:hover {
    box-shadow: 0 3px 6px -4px rgba(0, 0, 0, .16), 0 3px 6px rgba(0, 0, 0, .23);
}

.row-box-shadow-1 .col-inner,
.row-box-shadow-2 .col-inner,
.row-box-shadow-3 .col-inner,
.row-box-shadow-4 .col-inner,
.row-box-shadow-5 .col-inner,
.row-box-shadow-1-hover .col-inner,
.row-box-shadow-2-hover .col-inner,
.row-box-shadow-3-hover .col-inner,
.row-box-shadow-4-hover .col-inner,
.row-box-shadow-5-hover .col-inner,
.box-shadow-1,
.box-shadow-2,
.box-shadow-3,
.box-shadow-4,
.box-shadow-5,
.box-shadow-1-hover,
.box-shadow-2-hover,
.box-shadow-3-hover,
.box-shadow-4-hover,
.box-shadow-5-hover {
    transition: background-color .3s, color .3s, opacity .3s, transform .3s, box-shadow .3s;
}

.box, .box-image, .box-text {
    transition: opacity .3s, transform .3s, background-color .3s;
}

a.plain {
    color: currentColor;
    transition: color .3s, opacity .3s, transform .3s;
}

.has-hover .bg,
.has-hover [class*="image-"] img {
    transition: opacity .6s, filter .6s, transform .6s, box-shadow .3s;
}

/* ===== BOX STRUCTURE ===== */
.box {
    width: 100%;
    position: relative;
    margin: 0 auto;
}
.box-image {
    position: relative;
    height: auto;
    margin: 0 auto;
    overflow: hidden;
}
.box-image img {
    max-width: 100%;
    width: 100%;
    margin: 0 auto;
}
.box-text {
    padding: 0.7em 0 1.4em;
    position: relative;
    width: 100%;
    font-size: .9em;
}
.box-text h1,
.box-text h2,
.box-text h3,
.box-text h4,
.box-text h5,
.box-text h6,
.box-text a:not(.button),
.box-text p {
    line-height: 1.3;
    margin: .1em 0;
}

/* ===== BOX ENHANCEMENTS ===== */
.has-shadow > .col > .col-inner,
.has-shadow.box:not(.box-overlay):not(.box-shade),
.has-shadow .box:not(.box-overlay):not(.box-shade) {
    background-color: #fff;
}
.has-shadow .box-text {
    padding-left: 1.2em;
    padding-right: 1.2em;
}
.is-large {
    font-size: 1.15em;
}

/* ===== MEDIA QUERIES: BOX LIST LAYOUT ===== */
@media screen and (min-width: 550px) {
    .box-list-view .box,
    .box-vertical {
        display: table;
        width: 100%;
    }
    .box-list-view .box .box-image,
    .box-vertical .box-image {
        width: 50%;
    }
    .box-list-view .box .box-image,
    .box-list-view .box .box-text,
    .box-vertical .box-image,
    .box-vertical .box-text {
        direction: ltr;
        display: table-cell;
        vertical-align: middle;
    }
    .box-list-view .box .box-text,
    .box-vertical .box-text {
        padding: 0 1.5em;
    }
}

/* ===== RESPONSIVE: COLUMN WIDTH ===== */
@media screen and (min-width: 850px) {
    .gallery-columns-1 .gallery-item,
    .large-columns-1 > .col,
    .large-columns-1 .flickity-slider > .col {
        max-width: 100%;
        flex-basis: 100%;
    }
    .col:first-child .col-inner {
        margin-left: auto;
        margin-right: 0;
    }
}

/* ===== IMAGE FIT / VIDEO ===== */
.has-format,
.video-fit,
.image-cover {
    position: relative;
    height: auto;
    overflow: hidden;
    padding-top: 100%;
    background-position: 50% 50%;
    background-size: cover;
}
.video-fit video,
.video-fit iframe,
.image-cover img,
.has-format img,
.has-equal-box-heights .box-image img,
img.back-image {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: 50% 50%;
    font-family: "object-fit: cover;";
}

/* ===== BADGES ===== */
.badge {
    display: table;
    z-index: 20;
    pointer-events: none;
    height: 2.8em;
    width: 2.8em;
    backface-visibility: hidden;
}
.badge.top {
    top: 0;
}
.badge.post-date {
    top: 7%;
}
.badge-outline,
.badge-circle {
    margin-left: -0.4em;
}
.badge-frame .badge-inner,
.badge-outline .badge-inner {
    color: #446084;
    background-color: #fff !important;
    border: 2px solid currentColor;
}

/* ===== DIVIDER / ALIGNMENT ===== */
.box-blog-post .is-divider {
    margin: .5em 0;
    height: 2px;
}
.is-divider {
    display: block;
    height: 3px;
    width: 100%;
    max-width: 30px;
    background-color: rgba(0, 0, 0, .1);
    margin: 1em 0;
}
.text-left {
    text-align: left;
}
.text-left .is-divider,
.text-left .star-rating,
.text-left .is-star-rating {
    margin-right: auto;
    margin-left: 0;
}

/* ===== POSITION UTILITY ===== */
.absolute {
    position: absolute !important;
}

/* ===== THEME COLOR UTILITIES ===== */
.accordion-title.active,
.has-icon-bg .icon .icon-inner,
.logo a,
.primary.is-underline,
.primary.is-link,
.badge-outline .badge-inner,
.nav-outline > li.active > a,
.cart-icon strong,
[data-color='primary'],
.is-outline.primary {
    color: #187c46;
}

/* ===== IMAGE TRANSITION ===== */
img {
    opacity: 1;
    transition: opacity 1s;
}

@media screen and (min-width: 550px) {
    .box-list-view .box, .box-vertical {
        display: table;
        width: 100%;
    }
}
.badge.top {
    left: 0;
}
.badge-inner {
    display: table-cell;
    vertical-align: middle;
    text-align: center;
    width: 100%;
    height: 100%;
    background-color: #446084;
    line-height: .85;
    color: #fff;
    font-weight: bolder;
    padding: 2px;
    white-space: nowrap;
    -webkit-transition: background-color .3s, color .3s, border .3s;
    -o-transition: background-color .3s,color .3s,border .3s;
    transition: background-color .3s, color .3s, border .3s;
}
.has-hover:hover .badge-outline .badge-inner {
    color: #fff !important;
}
.widget .is-divider {
    margin-top: .66em;
}
.recent-blog-posts {
    padding: 10px 0 10px;
}
.pt-half {
    padding-top: 15px;
}
.pb-half {
    padding-bottom: 15px;
}
.mr-half {
    margin-right: 15px;
}
.flex-col {
    max-height: 100%;
}
.flex-grow {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    -ms-flex-negative: 1;
    -ms-flex-preferred-size: auto !important;
}
.flex-col {
    max-height: 100%;
}
.align-top {
    -webkit-box-pack: start !important;
    -ms-flex-pack: start !important;
    justify-content: flex-start !important;
    -webkit-box-align: start !important;
    -ms-flex-align: start !important;
    align-items: flex-start !important;
    -ms-flex-item-align: start !important;
    align-self: flex-start !important;
    vertical-align: top !important;
}
.op-7 {
    display: none;
}
.op-7 {
    opacity: .7;
}


/*tôi code thêm*/
.col-inner>.img:not(:last-child), .col>.img:not(:last-child) {
    margin-bottom: 1em;
}
.text-center>div, .text-center>div>div, .text-center .is-divider, .text-center .star-rating, .text-center .is-star-rating {
    margin-left: auto;
    margin-right: auto;
    margin-bottom:10px;
}