/*
Theme Name: Theme HTSM
Description: Child theme for Flatsome - Hanh Trinh So Menh (Gosinga)
Author: UX Themes
Template: flatsome
Version: 1.0
Text Domain: theme-htsm
*/

/*************** ADD CUSTOM CSS HERE.   ***************/

/* =============================================
   GOSINGA THEME - CUSTOM STYLES
   ============================================= */

/* Box hover effects for course cards */
.box.has-hover:hover .box-image img {
    transform: scale(1.03);
    transition: transform 0.4s ease;
}
.box .box-image {
    overflow: hidden;
}
.box .box-image img {
    transition: transform 0.4s ease;
}

/* Shine effect on images */
.box .box-image::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}
.box .box-image:hover::before {
    animation: shine .75s;
}
@keyframes shine {
    100% { left: 125%; }
}

/* Post item shine */
.post-item .box-image::before {
    position: absolute;
    top: 0;
    left: -75%;
    z-index: 2;
    display: block;
    content: '';
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255,255,255,0) 0, rgba(255,255,255,.3) 100%);
    transform: skewX(-25deg);
}
.post-item .box-image:hover::before {
    animation: shine .75s;
}

/* Banner hover overlay */
.banner.has-hover:hover .overlay {
    opacity: 1.2;
    transition: opacity 0.3s;
}

/* Primary button */
.button.primary {
    background-color: #5aad20;
    color: white;
    border-radius: 5px;
}
.button.primary:hover {
    background-color: #4ea000;
}

/* Outline white button */
.button.white.is-outline {
    border: 2px solid white;
    color: white;
    background: transparent;
}
.button.white.is-outline:hover {
    background: white;
    color: #333;
}

/* Social icons */
.social-icons a.facebook { background-color: #3b5998 !important; }
.social-icons a.instagram { background-color: #e1306c !important; }
.social-icons a.youtube { background-color: #ff0000 !important; }
.social-icons a.tiktok { background-color: #000 !important; }
.social-icons a.email { background-color: #5aad20 !important; }
.social-icons a.phone { background-color: #f99b1c !important; }
.social-icons a.primary { background-color: #5aad20 !important; }

/* Video responsive */
.video-fit {
    position: relative;
    overflow: hidden;
}
.video-fit iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.video.mb {
    margin-bottom: 20px;
}

/* Row dashed (separator between items) */
.row-dashed {
    border-top: 1px dashed #e0e0e0;
    padding-top: 20px;
}
.row-dashed > .col {
    border-right: 1px dashed #e0e0e0;
    padding-bottom: 20px;
}
.row-dashed > .col:last-child {
    border-right: none;
}

/* Section padding */
.section-title-container {
    margin: 20px auto 10px;
    text-align: center;
}
.section-title {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 10px;
}

/* Flatsome-like col-inner padding */
.col-inner {
    padding: 15px;
}

/* Breadcrumbs */
#breadcrumbs {
    font-size: 15px;
    margin-bottom: 10px;
    padding: 8px 0;
    color: #666;
}
#breadcrumbs a {
    color: #5aad20;
}

/* Entry header */
.entry-header {
    margin-bottom: 15px;
}

/* Archive category title */
.archive .category-page-title h1 {
    margin-bottom: 5px;
    font-size: 25px;
    font-weight: normal;
    text-shadow: none;
}

/* Pagination */
.pagination {
    text-align: center;
    padding: 20px 0;
}
.pagination .page-numbers {
    display: inline-block;
    padding: 5px 12px;
    margin: 2px;
    border: 1px solid #ddd;
    color: #333;
    border-radius: 3px;
    text-decoration: none;
}
.pagination .page-numbers.current,
.pagination .page-numbers:hover {
    background: #5aad20;
    color: white;
    border-color: #5aad20;
}

/* Search results */
.search-results .hentry {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #eee;
}

/* Comments */
#comments {
    margin-top: 30px;
}
#comments a.btn-reviews-now {
    background-color: #5aad20;
}
button#devvn_cmt_submit,
button#devvn_cmt_replysubmit {
    background: #5aad20;
    color: white;
}

/* Img has-hover */
.img.has-hover {
    overflow: hidden;
    position: relative;
}
.img.has-hover img {
    transition: transform 0.3s ease;
}
.img.has-hover:hover img {
    transform: scale(1.02);
}

/* Banner */
.banner {
    position: relative;
    overflow: hidden;
}
.banner .banner-inner {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}
.banner .banner-bg img.bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.banner .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
.banner .banner-layers {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
}

/* Form */
.searchform {
    width: 100%;
}
.search-field {
    width: 100%;
    height: 45px;
    padding: 0 15px;
    border: 1px solid #5aad20;
    border-right: none;
    outline: none;
    font-size: 15px;
}
.ux-search-submit {
    height: 45px;
    background: #5aad20;
    color: white;
    border: none;
    padding: 0 15px;
    cursor: pointer;
}

/* flex row/col helpers */
.flex-row {
    display: flex;
    align-items: center;
}
.flex-col { display: flex; flex-direction: column; }
.flex-grow { flex: 1; }
.flex-left { justify-content: flex-start; }
.flex-right { justify-content: flex-end; }
.flex-center { justify-content: center; }

/* Page sidebar layout */
.page-right-sidebar .row {
    display: flex;
    flex-wrap: wrap;
}
.page-right-sidebar .large-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-right: 30px;
}
.page-right-sidebar .large-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

/* Blog archive layout */
.blog-archive .row {
    display: flex;
    flex-wrap: wrap;
}
.blog-archive .large-9 {
    flex: 0 0 75%;
    max-width: 75%;
    padding-right: 30px;
}
.blog-archive .large-3 {
    flex: 0 0 25%;
    max-width: 25%;
}

/* Col grid */
.large-12 { flex: 0 0 100%; max-width: 100%; }
.large-9  { flex: 0 0 75%; max-width: 75%; }
.large-8  { flex: 0 0 66.666%; max-width: 66.666%; }
.large-6  { flex: 0 0 50%; max-width: 50%; }
.large-4  { flex: 0 0 33.333%; max-width: 33.333%; }
.large-3  { flex: 0 0 25%; max-width: 25%; }
.large-2  { flex: 0 0 16.666%; max-width: 16.666%; }

.row { display: flex; flex-wrap: wrap; max-width: 1230px; margin: 0 auto; }
.container { max-width: 1230px; margin: 0 auto; padding: 0 15px; }

@media only screen and (max-width: 48em) {
    /*************** ADD MOBILE ONLY CSS HERE  ***************/
    .large-9, .large-3, .large-4, .large-6, .large-8 {
        flex: 0 0 100%;
        max-width: 100%;
    }
    .page-right-sidebar .large-9,
    .page-right-sidebar .large-3,
    .blog-archive .large-9,
    .blog-archive .large-3 {
        flex: 0 0 100%;
        max-width: 100%;
        padding-right: 0;
    }
    .hide-for-medium { display: none !important; }
    .show-for-medium { display: block !important; }
    .col-inner { padding: 10px; }
    #wide-nav { display: none; }
    .medium-6 { flex: 0 0 100%; max-width: 100%; }
    .medium-4 { flex: 0 0 100%; max-width: 100%; }
}

@media only screen and (min-width: 48em) {
    .hide-for-medium { display: block !important; }
    .show-for-medium { display: none !important; }
}