/*
Theme Name: Alo Ve Sinh
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 5.0
*/

/* ==========================================================================
   1. CSS RESET & LAYOUT CƠ BẢN
   ========================================================================== */

body .page-wrapper {
    padding-top: 0;
}

.container .section,
.row .section {
    padding-left: 10px;
    padding-right: 10px;
}


/* ==========================================================================
   2. TYPOGRAPHY & CONTENT
   ========================================================================== */

.entry-content p {
    line-height: 32px;
    margin-bottom: 24px
}

.entry-content>p {
    font-size: 18px;
    text-align: justify
}

.entry-content ul,
.entry-content ol {
    margin-bottom: 24px
}

.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content h4,
.entry-content h5,
.entry-content h6 {
    margin-top: 32px;
    margin-bottom: 16px;
    line-height: 1.4;
    clear: both
}

.entry-content h3 {
    color: #333;
    font-size: 18px;
    padding-top: 5px
}

body .entry-content h1 {
    border-bottom: none;
}

.entry-content h1+p,
.entry-content h2+p,
.entry-content h3+p,
.entry-content h4+p,
.entry-content h5+p,
.entry-content h6+p,
.entry-content p+p {
    margin-top: 0
}

.entry-content ul li,
.entry-content ol li {
    font-size: 18px;
    line-height: 32px;
    text-align: justify;
    margin-bottom: 8px
}

body .entry-title::after {
    display: none
}

body .entry-content h1::after,
body .entry-content h1::before {
    display: none;
}

.wp-caption .wp-caption-text {
    background: 0 0;
    font-size: 17px;
    font-style: normal;
    margin-bottom: 24px;
    padding: 3px;
    box-sizing: border-box;
    max-width: 100%;
}

body .post-item .is-divider {
    display: none
}

.entry-content p:empty {
    display: none
}

.entry-content p.video-h4p {
    font-size: 17px;
    margin-bottom: 0;
    margin-top: 0;
    padding-bottom: 15px;
    padding-top: 20px;
    text-align: center
}

body .post-item .box-text-inner p {
    display: none
}

.entry-content ul li:last-child,
.entry-content ol li:last-child {
    margin-bottom: 0
}


/* ==========================================================================
   3. HEADER & NAVIGATION
   ========================================================================== */

body .entry-header-text {
    padding: 0;
}

.main-header {
    color: #dc1313;
    font-size: 22px;
    padding-top: 12px;
    text-align: center
}

.main-header1 {
    color: #000;
    font-size: 20px;
    margin-bottom: 10px;
    margin-right: 35px;
    margin-top: 15px;
    text-align: center;
    box-sizing: border-box;
    max-width: 100%;
}

@media (width <=480px) {
    .main-header1 {
        margin-right: 10px
    }
}

.main-header::after {
    background: url("https://alovesinh.net/wp-content/uploads/2023/05/line-1001.webp") no-repeat center bottom;
    background-size: auto 9px;
    content: "";
    display: block;
    height: 9px;
    margin-bottom: 30px;
    margin-top: 5px
}

.main-header1::after {
    background: #dc1313;
    content: "";
    display: block;
    height: 3px;
    margin: 2px auto 0;
    width: 30px
}

body .entry-header .is-divider {
    display: none
}

.nav-dropdown {
    margin-top: 9px
}

.nav.nav-sidebar a {
    color: #131313
}

.header-nav-main>li>a.nav-top-link {
    font-size: 15px;
    font-weight: 600
}

.header-nav-main.nav-outline>li>a {
    padding: 0 8px
}

.nav.nav-sidebar .button {
    color: #f1f1f1
}

body .nav-dropdown-has-arrow li.has-dropdown::after,
body .nav-dropdown-has-arrow li.has-dropdown::before {
    bottom: -10px
}


/* ==========================================================================
   4. IMAGES & MEDIA
   ========================================================================== */

body article figure img {
    border-radius: 12px
}

body .entry-content figure img {
    border-radius: 12px
}


/* ==========================================================================
   5. BẢNG GIÁ (TABLES)
   ========================================================================== */

.gop-bang {
    color: #dc1313;
    text-align: center
}

.table-container {
    border: 1px solid #005a9c;
    border-bottom: 2px solid #005a9c;
    border-radius: 12px;
    margin-bottom: 24px;
    overflow: hidden
}

.gop-bang td {
    color: #dc1313
}

.table-container table {
    border-collapse: separate;
    border-spacing: 0;
    margin: 0;
    width: 100%
}

.table-container td {
    border-bottom: 1px solid #005a9c;
    border-right: 1px solid #005a9c;
    color: #000;
    font-size: 17px;
    text-align: left;
    vertical-align: middle
}

.table-container th {
    background-color: #093a6b;
    border-bottom: 1px solid #005a9c;
    border-right: 1px solid #005a9c;
    color: #fff;
    font-size: 14px;
    font-weight: 700;
    height: 45px;
    line-height: 1.4;
    text-align: center;
    vertical-align: middle
}

.table-container tbody tr {
    transition: background-color .3s ease
}

@media (width <=600px) {
    .table-container {
        overflow-x: auto
    }

    .table-container td,
    .table-container th {
        box-sizing: border-box;
        font-size: 12px
    }
}

.table-container td:first-child {
    padding-left: 5px;
    text-align: center;
    vertical-align: middle
}

.table-container td:last-child {
    border-right: none
}

.table-container th:first-child {
    padding-left: 5px;
    text-align: center;
    vertical-align: middle
}

.table-container th:last-child {
    border-right: none;
    padding-right: 12px
}

.table-container tbody tr:nth-child(odd) {
    background-color: rgb(3 109 25 / 5%)
}

.table-container tbody tr:nth-child(even) {
    background-color: #fff
}

.table-container tbody tr:hover {
    background-color: rgb(0 149 111 / 15%)
}

.table-container tbody tr:active {
    background-color: rgb(191 155 48 / 20%)
}

.table-container tbody tr:last-child td {
    border-bottom: none
}


/* ==========================================================================
   6. FOOTER
   ========================================================================== */

.footer-secondary {
    padding: 0
}

.footer1,
.footer1 a,
.footer1 p,
.footer1 li,
.footer1 span,
.footer1 h4 {
    color: #000;
}

.footer2 a,
.footer2 p,
.footer2 li,
.footer2 span {
    color: #fff;
}

.footer2 ul {
    margin-bottom: 0
}

body .footer2 h4 {
    color: #fff;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 10px;
    text-align: left;
    text-transform: uppercase
}

.footer2 ul li {
    list-style: none;
    margin-bottom: 6px;
    margin-left: 0
}

.absolute-footer.dark {
    background-color: #111;
    border-top: 1px solid #3f3f3f;
    color: #fff;
    font-size: 13px;
    padding: 20px 0;
    box-sizing: border-box;
    max-width: 100%;
}

.footer2 .is-divider {
    margin: 5px 0 15px
}

.footer2 .social-icons a {
    display: inline-block
}

@media (width <=767px) {
    body .absolute-footer.dark {
        padding-bottom: 70px
    }
}

.footer2 .cot2 ul li a,
.footer2 .cot3 ul li a {
    font-size: 14px;
    color: #fff;
}

.footer2 ul li a:hover {
    text-decoration: underline
}

.footer2 .cot2 .icon-box {
    background: #4d4d4d;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 25px;
    padding: 10px;
    width: 240px;
    box-sizing: border-box;
    max-width: 100%;
}

.footer2 .cot4 .icon-box {
    border: 1px solid gray;
    border-radius: 8px;
    font-size: 13px;
    margin-top: 20px;
    padding: 10px;
    box-sizing: border-box;
    max-width: 100%;
}


/* ==========================================================================
   7. MẠNG XÃ HỘI (ZALO, FACEBOOK)
   ========================================================================== */

.nut-facebook,
.nut-zalo {
    position: fixed;
    z-index: 100;
    background-repeat: no-repeat
}

.nut-zalo {
    bottom: 260px;
    right: 6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-size: 48px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCA4MDAgODAwIj48Y2lyY2xlIGN4PSI0MDAiIGN5PSI0MDAiIHI9IjQwMCIgZmlsbD0iIzAwNjhmZiIvPjxnIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE3MCwgMTgyKSI+PHBhdGggZmlsbD0iI2ZmZmZmZiIgZD0iTTgyLjYgMzgwLjljLTEuOC0uOC0zLjEtMS43LTEtMy41IDEuMy0xIDIuNy0xLjkgNC4xLTIuOCAxMy4xLTguNSAyNS40LTE3LjggMzMuNS0zMS41IDYuOC0xMS40IDUuNy0xOC4xLTIuOC0yNi41QzY5IDI2OS4yIDQ4LjIgMjEyLjUgNTguNiAxNDUuNSA2NC41IDEwNy43IDgxLjggNzUgMTA3IDQ2LjZjMTUuMi0xNy4yIDMzLjMtMzEuMSA1My4xLTQyLjcgMS4yLS43IDIuOS0uOSAzLjEtMi43LS40LTEtMS4xLS43LTEuNy0uNy0zMy43IDAtNjcuNC0uNy0xMDEgLjJDMjguMyAxLjcuNSAyNi42LjYgNjIuM2MuMiAxMDQuMyAwIDIwOC42IDAgMzEzIDAgMzIuNCAyNC43IDU5LjUgNTcgNjAuNyAyNy4zIDEuMSA1NC42LjIgODIgLjEgMiAuMSA0IC4yIDYgLjJIMjkwYzM2IDAgNzIgLjIgMTA4IDAgMzMuNCAwIDYwLjUtMjcgNjAuNS02MC4zdi0uNi01OC41YzAtMS40LjUtMi45LS40LTQuNC0xLjguMS0yLjUgMS42LTMuNSAyLjYtMTkuNCAxOS41LTQyLjMgMzUuMi02Ny40IDQ2LjMtNjEuNSAyNy4xLTEyNC4xIDI5LTE4Ny42IDcuMi01LjUtMi0xMS41LTIuMi0xNy4yLS44LTguNCAyLjEtMTYuNyA0LjYtMjUgNy4xLTI0LjQgNy42LTQ5LjMgMTEtNzQuOCA2em03Mi41LTE2OC41YzEuNy0yLjIgMi42LTMuNSAzLjYtNC44IDEzLjEtMTYuNiAyNi4yLTMzLjIgMzkuMy00OS45IDMuOC00LjggNy42LTkuNyAxMC0xNS41IDIuOC02LjYtLjItMTIuOC03LTE1LjItMy0uOS02LjItMS4zLTkuNC0xLjEtMTcuOC0uMS0zNS43LS4xLTUzLjUgMC0yLjUgMC01IC4zLTcuNC45LTUuNiAxLjQtOSA3LjEtNy42IDEyLjggMSAzLjggNCA2LjggNy44IDcuNyAyLjQuNiA0LjkuOSA3LjQuOCAxMC44LjEgMjEuNyAwIDMyLjUuMSAxLjIgMCAyLjctLjggMy42IDEtLjkgMS4yLTEuOCAyLjQtMi43IDMuNS0xNS41IDE5LjYtMzAuOSAzOS4zLTQ2LjQgNTguOS0zLjggNC45LTUuOCAxMC4zLTMgMTYuM3M4LjUgNy4xIDE0LjMgNy41YzQuNi4zIDkuMy4xIDE0IC4xIDE2LjIgMCAzMi4zLjEgNDguNS0uMSA4LjYtLjEgMTMuMi01LjMgMTIuMy0xMy4zLS43LTYuMy01LTkuNi0xMy05LjctMTQuMS0uMS0yOC4yIDAtNDMuMyAwem0xMTYtNTIuNmMtMTIuNS0xMC45LTI2LjMtMTEuNi0zOS44LTMuNi0xNi40IDkuNi0yMi40IDI1LjMtMjAuNCA0My41IDEuOSAxNyA5LjMgMzAuOSAyNy4xIDM2LjYgMTEuMSAzLjYgMjEuNCAyLjMgMzAuNS01LjEgMi40LTEuOSAzLjEtMS41IDQuOC42IDMuMyA0LjIgOSA1LjggMTQgMy45IDUtMS41IDguMy02LjEgOC4zLTExLjMuMS0yMCAuMi00MCAwLTYwLS4xLTgtNy42LTEzLjEtMTUuNC0xMS41LTQuMy45LTYuNyAzLjgtOS4xIDYuOXptNjkuMyAzNy4xYy0uNCAyNSAyMC4zIDQzLjkgNDYuMyA0MS4zIDIzLjktMi40IDM5LjQtMjAuMyAzOC42LTQ1LjYtLjgtMjUtMTkuNC00Mi4xLTQ0LjktNDEuMy0yMy45LjctNDAuOCAxOS45LTQwIDQ1LjZ6bS04LjgtMTkuOWMwLTE1LjcuMS0zMS4zIDAtNDcgMC04LTUuMS0xMy0xMi43LTEyLjktNy40LjEtMTIuMyA1LjEtMTIuNCAxMi44LS4xIDQuNyAwIDkuMyAwIDE0djc5LjVjMCA2LjIgMy44IDExLjYgOC44IDEyLjkgNi45IDEuOSAxNC0yLjIgMTUuOC05LjEuMy0xLjIuNS0yLjQuNC0zLjcuMi0xNS41LjEtMzEgLjEtNDYuNXoiLz48L2c+PC9zdmc+");
}

.nut-facebook {
    bottom: 170px;
    right: 6px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background-color: #0084ff;
    background-size: 48px;
    background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iODAiIGhlaWdodD0iODAiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CiAgPHBhdGggZmlsbC1ydWxlPSJldmVub2RkIiBjbGlwLXJ1bGU9ImV2ZW5vZGQiIGQ9Ik00MCAuOTE0QzE3Ljk5NS45MTQuOTM3IDE3LjAzMy45MzcgMzguODA0YzAgMTEuMzg5IDQuNjY4IDIxLjIzIDEyLjI2OCAyOC4wMjZhMy4xMiAzLjEyIDAgMDExLjA1IDIuMjI3bC4yMTIgNi45NWMuMDY4IDIuMjE1IDIuMzU4IDMuNjU4IDQuMzg2IDIuNzYzbDcuNzUzLTMuNDIzYTMuMTE1IDMuMTE1IDAgMDEyLjA4Ny0uMTUzQTQyLjYwMiA0Mi42MDIgMCAwMDQwIDc2LjY5NWMyMi4wMDUgMCAzOS4wNjMtMTYuMTE4IDM5LjA2My0zNy44OUM3OS4wNjMgMTcuMDMzIDYyLjAwNS45MTUgNDAgLjkxNXoiIGZpbGw9InVybCgjcGFpbnQwX3JhZGlhbCkiLz4KICA8cGF0aCBmaWxsLXJ1bGU9ImV2ZW5vZGQiIGNsaXAtcnVsZT0iZXZlbm9kZCIgZD0iTTE2LjU0MyA0OS44ODZMMjguMDE4IDMxLjY4YTUuODYgNS44NiAwIDAxOC40NzItMS41NjNsOS4xMjcgNi44NDRjLjgzNy42MjggMS45ODkuNjI1IDIuODIzLS4wMDhMNjAuNzY1IDI3LjZjMS42NDUtMS4yNDggMy43OTMuNzIgMi42OTIgMi40NjdMNTEuOTgyIDQ4LjI3MmE1Ljg2IDUuODYgMCAwMS04LjQ3MiAxLjU2M2wtOS4xMjctNi44NDVBMi4zNDQgMi4zNDQgMCAwMDMxLjU2IDQzbC0xMi4zMjUgOS4zNTRjLTEuNjQ2IDEuMjQ4LTMuNzkzLS43Mi0yLjY5Mi0yLjQ2N3oiIGZpbGw9IiNmZmYiLz4KICA8ZGVmcz4KICAgIDxyYWRpYWxHcmFkaWVudCBpZD0icGFpbnQwX3JhZGlhbCIgY3g9IjAiIGN5PSIwIiByPSIxIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgZ3JhZGllbnRUcmFuc2Zvcm09InJvdGF0ZSgtNTcuMDkyIDgwLjI1IDI0LjYyOCkgc2NhbGUoODUuMTI0NikiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjMDlGIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjYxIiBzdG9wLWNvbG9yPSIjQTAzM0ZGIi8+CiAgICAgIDxzdG9wIG9mZnNldD0iLjkzNSIgc3RvcC1jb2xvcj0iI0ZGNTI4MCIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiNGRjcwNjEiLz4KICAgIDwvcmFkaWFsR3JhZGllbnQ+CiAgPC9kZWZzPgo8L3N2Zz4=")
}

.nut-facebook a,
.nut-zalo a {
    text-decoration: none;
    display: block;
    width: 100%;
    height: 100%;
    overflow: hidden;
    white-space: nowrap;
    font-size: 0;
    color: transparent;
}

.nut-facebook:hover,
.nut-zalo:hover {
    animation: pulse 1s infinite
}

@keyframes pulse {
    0% {
        transform: scale(1)
    }

    50% {
        transform: scale(1.15)
    }

    100% {
        transform: scale(1)
    }
}


/* ==========================================================================
   8. BOX CALL (KHỐI GỌI ĐIỆN VÀNG)
   ========================================================================== */

.box-call-mau-vang {
    text-align: center;
    padding: 12px 0;
}

.box-call-mau-vang .call-mobi-mau-vang {
    color: #ffea00;
    font-size: 16px;
    display: block;
}


/* ==========================================================================
   9. THANH GỌI ĐIỆN DƯỚI ĐÁY (MOBILE)
   ========================================================================== */

@media (width <=767px) {
    body .tel,
    body .phone {
        display: none;
    }

    div.phone_mobi {
        background: #035e16 none repeat scroll 0 0;
        bottom: 0;
        color: #fff;
        height: 50px;
        left: 0;
        line-height: 50px;
        position: fixed;
        width: 100%;
        z-index: 999;
        box-sizing: border-box;
        max-width: 100%;
    }

    div.phone_mobi ul {
        list-style: none;
        margin: 0;
        padding: 0
    }

    div.phone_mobi ul li {
        display: inline-block;
        text-align: center;
        width: 32%
    }

    div.phone_mobi ul li a {
        color: #fff;
        font-size: 18px;
        text-decoration: none
    }

    .phone_mobi .icon-phone::before {
        font-size: 22px;
        margin-right: 5px
    }

    .phone_mobi .icon-star::before {
        font-size: 16px;
        margin-right: 5px
    }

    .phone_mobi .blink_me {
        animation: none
    }

    .phone_mobi .icon-phone {
        animation: anim3 1s ease-in-out infinite
    }
}

@media (width >=768px) {
    div.phone_mobi {
        display: none
    }
}


/* ==========================================================================
   10. NÚT GỌI RUNG (DESKTOP)
   ========================================================================== */

@media (width >=768px) {
    .circle1 {
        animation: anim1 1.2s ease-in-out infinite paused;
        background-color: transparent;
        border: 2px solid rgb(30 30 30 / 40%);
        border-radius: 100%;
        height: 80px;
        left: 10px;
        position: absolute;
        top: 10px;
        transform-origin: center;
        width: 80px
    }

    .circle2 {
        animation: anim2 1.2s ease-out infinite paused;
        background: radial-gradient(circle, rgb(3 94 22 / 90%) 0, rgb(3 94 22 / 70%) 30%, rgb(3 94 22 / 40%) 60%, transparent 85%);
        border-radius: 100%;
        height: 60px;
        left: 20px;
        opacity: 0;
        position: absolute;
        top: 20px;
        transform-origin: center;
        width: 60px
    }

    .circle3 {
        animation: anim3 1.2s ease-in-out infinite paused;
        background: #035e16;
        border: 2px solid transparent;
        border-radius: 100%;
        height: 40px;
        left: 30px;
        position: absolute;
        top: 30px;
        transform-origin: center;
        width: 40px;
        z-index: 2
    }

    .circle3 .icon-phone {
        align-items: center;
        color: #fff;
        display: flex;
        font-size: 18px;
        height: 100%;
        justify-content: center;
        width: 100%;
        z-index: 3
    }

    .num {
        color: #dc1313;
        font-size: 18px;
        font-weight: 700;
        line-height: 40px;
        margin: 0;
        padding-left: 50px
    }

    .phone {
        background-color: transparent;
        bottom: -22px;
        cursor: pointer;
        height: 100px;
        opacity: 0;
        overflow: visible;
        position: absolute;
        right: 105px;
        transition: opacity .5s ease, visibility 0s linear .5s;
        visibility: hidden;
        width: 100px;
        z-index: 999
    }

    .phone.green .circle1 {
        border-color: #035e16;
        opacity: .5
    }

    .phone:hover .circle2 {
        background: radial-gradient(circle, rgb(2 138 21 / 95%) 0, rgb(2 138 21 / 80%) 30%, rgb(2 138 21 / 50%) 60%, transparent 85%)
    }

    .phone:hover .circle3 {
        background: #028a15
    }

    .phone.show {
        opacity: 1;
        transition: opacity .5s ease, visibility 0s linear 0s;
        visibility: visible
    }

    .phone.show .circle1 {
        animation-play-state: running
    }

    .phone.show .circle2 {
        animation-play-state: running
    }

    .phone.show .circle3 {
        animation-play-state: running
    }

    .tbox {
        background: #eee;
        background-size: 40px;
        border: none;
        border-radius: 28px;
        height: 38px;
        margin-bottom: 9px;
        max-width: 100%;
        overflow: hidden;
        position: relative;
        width: 175px
    }

    .tel {
        bottom: 75px;
        left: 24px;
        position: fixed;
        z-index: 101
    }
}

@keyframes anim1 {
    0% {
        opacity: .1;
        transform: rotate(0) scale(.5) skew(1deg)
    }

    30% {
        opacity: .5;
        transform: rotate(0) scale(.7) skew(1deg)
    }

    100% {
        opacity: .6;
        transform: rotate(0) scale(1) skew(1deg)
    }
}

@keyframes anim2 {
    0% {
        opacity: .2;
        transform: rotate(0) scale(.7) skew(1deg)
    }

    50% {
        opacity: .2;
        transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        opacity: .2;
        transform: rotate(0) scale(.7) skew(1deg)
    }
}

@keyframes anim3 {
    0% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    10% {
        transform: rotate(-17.5deg) scale(1) skew(1deg)
    }

    20% {
        transform: rotate(17.5deg) scale(1) skew(1deg)
    }

    30% {
        transform: rotate(-17.5deg) scale(1) skew(1deg)
    }

    40% {
        transform: rotate(17.5deg) scale(1) skew(1deg)
    }

    50% {
        transform: rotate(0) scale(1) skew(1deg)
    }

    100% {
        transform: rotate(0) scale(1) skew(1deg)
    }
}