/*
Theme Name: gavang
Author: gavang
Description: Theme blog Wordpress.
Version: 1.0
*/

@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&family=Roboto:wght@400;500;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans&display=swap');
@import url(https://fonts.googleapis.com/css2?family=Oswald:wght@400;600&display=swap);
@import url(https://fonts.googleapis.com/css2?family=Lora:wght@400;700&display=swap);
body {
    font-family: 'Roboto', sans-serif;
    line-height: 1.4;
    padding: 0;
    color: #777777;
    background-color: #5b5b5b;
    width: 100%;
    max-width: 1170px;
    margin: auto;
}

* {
    scroll-behavior: smooth;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
}

a {
    color: #334862;
}

a:link {
    text-decoration: none;
}

a:visited {
    text-decoration: none;
}

a:hover {
    text-decoration: none;
    font-weight: bold;
}

a:active {
    text-decoration: none;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    /* font-family: 'Merriweather', serif; */
    font-family: 'Open Sans', sans-serif;
}

.ndw {
    background-color: white;
}


/* Header */

.tophead {
    background-color: #446084;
    color: white;
    padding: 10px;
    font-size: 13px;
}

.tophead a {
    color: white;
}

.tophead .mainw {
    display: flex;
    justify-content: space-between;
    gap: 10px;
}

.tophead .b {
    display: flex;
    gap: 8px;
}

@media (max-width: 850px) {
    .tophead .b {
        display: none;
    }
    .tophead .mainw {
        justify-content: center;
    }
}

.mainw {
    width: 90%;
    margin: auto;
}

.mainw iframe {
    border: 0;
}

header .mainw {
    width: 90%;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid #eee;
}

header {
    color: #383838;
    text-align: center;
    /* box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px; */
}

header h1 {
    margin: 0;
    font-size: 2em;
}

header a {
    color: #383838;
}


/* footer */

.footer {
    border-top: 1px solid #eee;
    padding: 30px 0;
    color: #6c6966;
    font-weight: 15px;
}

.footer .mainw {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 10px;
}

.footer .mainw .a {
    flex: 1 0 500px;
}

@media (max-width: 600px) {
    .footer .mainw .a {
        flex: 100%;
    }
}

.footer .mainw .a.lgf {
    display: flex;
    align-items: center;
}

.footer .mainw .a.lgf img {
    width: 90%;
    height: auto;
}

.footer .mainw .a .bv {
    padding: 7px 0;
}

.footer .mainw .a .bv:nth-of-type(n+2) {
    border-top: 1px solid #eee;
}

.foot2 {
    background-color: #777777;
    color: white;
}

.foot2 a {
    color: white !important;
}

.foot2 .mainw {
    padding: 30px 0;
}

.foot2 .l {
    padding: 7px 0;
}

.foot2 .l:nth-of-type(n+2) {
    border-top: 1px solid #828282;
}


/* copyright */

.copyright {
    background-color: #5b5b5b;
    color: #a6adad;
}

.copyright a {
    color: #a6adad;
}

.copyright .mainw {
    padding: 15px 0;
    text-align: center;
    font-size: 14px;
}


/* bài viết */

.headbaiviet {
    margin: 30px auto;
    text-align: center;
}

.headbaiviet .cm {
    text-transform: uppercase;
    font-size: 13px;
    font-weight: bold;
    color: #5c6d81;
}

.headbaiviet .cm a {
    color: #5c6d81;
}

.headbaiviet .tenbv h1 {
    margin: 7px 0;
    font-size: 24px;
    color: #555555;
    position: relative;
    text-align: center;
}

.headbaiviet .tenbv h1::after {
    content: '';
    display: block;
    width: 34px;
    height: 3px;
    background-color: #e5e5e5;
    position: absolute;
    bottom: -14px;
    left: 50%;
    transform: translateX(-50%);
}

.headbaiviet .tenbv a {
    color: #555555;
}

.headbaiviet .tenbv {
    margin-bottom: 25px;
}

.tukhoabv {
    border-top: 1px solid #eee;
    margin: 20px 0;
    font-size: 12px;
    padding: 15px 0;
    text-align: center;
}

.imgbaiviet {
    text-align: center;
}

.ndbv {
    margin: 30px 0 0 0;
}

.ndbv h1 {
    font-size: 23px;
}

.archive-header {
    margin: 20px 0;
    text-align: center;
}

.archive-header h1 {
    font-size: 20px;
    text-transform: uppercase;
}

.baiviet img {
    max-width: 100%;
    height: auto;
}


/* Menu chính */

header nav ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

header nav ul li {
    display: inline-block;
    position: relative;
}

header nav ul li a {
    color: #383838;
    padding: 10px 20px;
    text-decoration: none;
    display: block;
}

header nav ul li a:hover {
    background: #eee;
}

.ndbvcm {
    border-bottom: 2px solid #eee;
}

.ndbvcm .tukhoabv {
    margin: 20px 0 0 0;
}

.ndbvcm .doctiep {
    margin: 25px 0 20px 0;
    text-align: center;
}

.ndbvcm .doctiep a {
    border: 2px solid #446084;
    transition: .3s;
    padding: 4px 12px;
    color: #446084;
}

.ndbvcm .doctiep a:hover {
    background-color: #446084;
    color: white;
}


/* Responsive styles */

.menu-toggle {
    display: none;
    background: none;
    border: none;
    font-size: 1.5em;
    cursor: pointer;
}

@media (max-width: 1080px) {
    nav {
        display: none;
    }
    .menu-toggle {
        display: inline-block;
    }
    nav.active {
        display: block;
        position: absolute;
        top: 60px;
        /* adjust based on your header height */
        left: 0;
        width: 100%;
        background: white;
        box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
        z-index: 1;
    }
    nav ul {
        display: block;
    }
    nav ul li {
        display: block;
    }
    nav ul li a {
        padding: 10px;
        text-align: left;
    }
}


/* Sub-menu */

header nav ul li ul {
    display: none;
    position: absolute;
    /* background: #eee; */
    /* background: rgb(210, 234, 210); */
    background-color: white;
    border-radius: 3px;
    top: 100%;
    left: 0;
    padding: 0;
    list-style: none;
    z-index: 1000;
}

header nav ul li:hover>ul {
    display: block;
    box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px;
}

header nav ul li ul li {
    display: block;
    text-align: left;
}

header nav ul li ul li a {
    padding: 10px;
    min-width: 200px;
}

header nav ul li ul li a:hover {
    background: rgb(210, 234, 210);
}

header nav img {
    max-width: 20px;
    height: auto;
    margin-bottom: -4px;
}

header .logo {
    display: flex;
    align-items: center;
    padding: 10px 0;
    text-align: left;
}

header .logo img {
    width: 70%;
    max-width: 300px;
    height: auto;
}

@media (max-width:1080px) {
    header .menuhead {
        order: 1;
    }
    header .menuhead button.menu-toggle {
        font-size: 20px;
    }
    header .logo {
        order: 2;
        text-align: center;
    }
    header .timkiem {
        order: 3;
        font-size: 20px;
    }
    .p1200 {
        width: 90%;
    }
    .fancybox-content {
        padding: 20px !important;
    }
    header nav ul {
        padding: 20px 0;
    }
}


/* Main content */


/* #main-content {
    margin: 1% auto;
}

#main-content a {
    color: #333;
    text-decoration: none;
} */


/* nội dung */

.noidungbaiviet h1 {
    margin: 10px 0;
    font-size: 20px;
    line-height: 1.3;
}

.noidungbaiviet h2,
.noidungbaiviet h3,
.noidungbaiviet h4,
.noidungbaiviet h5,
.noidungbaiviet h6 {
    margin: 15px 0 10px 0;
    font-size: 18px;
    line-height: 1.3;
}

.chia {
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    max-width: 1200px;
    margin: auto;
}

.chia .noidungbaiviet {
    width: 70%;
    padding: 1% 2% 2% 2%;
    border-right: 1px solid #eee;
    /* border-radius: 10px; */
    /* box-shadow: rgba(149, 157, 165, 0.2) 8px 0px 24px 0px; */
    /* background-color: white; */
    /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    /* box-shadow: rgba(149, 157, 165, 0.2) 8px 0px 24px; */
}

.chia .noidungbaiviet ul,
.chia .noidungbaiviet ol {
    margin: 20px 0 20px -20px;
    list-style-type: circle;
}


/* .chia .noidungbaiviet ol {
    margin: 20px 0 20px -20px;
    list-style-type: square;
} */

.chia .noidungbaiviet ul li,
.chia .noidungbaiviet ol li {
    margin: 7px 0;
}

.chia .wget {
    width: 28%;
}

.chia .noidungbaiviet img,
.chia .wget img {
    max-width: 100%;
    width: auto;
    height: auto;
    border-radius: 10px;
}

.chia .noidungbaiviet img {
    padding: 5px;
    background: #eeeeee6b;
}

.sticky {
    position: -webkit-sticky;
    position: sticky;
    top: 4%;
    font-size: 16px;
    /* z-index: 1000; */
}

.luotxem {
    font-size: 12px;
    color: gray;
    margin: 10px 0;
}

.luotxem .fa-solid {
    padding-right: 5px;
}

.luotxem .fa-solid:nth-child(n+2),
.luotxem .fa-regular {
    padding: 0 5px 0 15px;
}

.wp-block-button a {
    color: white !important;
}

.wp-block-image {
    margin: 30px 0;
}

.wp-block-image figcaption {
    margin: 10px 0 !important;
    font-size: 14px;
    color: gray;
}


/* bài viết ngẩu nhiên */

.random-posts {
    font-size: 16px;
    line-height: 1.4;
    padding: 10px 0;
}

.random-posts h2 {
    margin: 0;
    line-height: 1.3;
    font-size: 20px;
}

.random-posts ul {
    list-style-type: none;
    padding: 0;
    margin: 20px 0 0 0;
}

.random-posts li {
    margin: 5px 0;
}

.random-posts li:nth-child(n+2) {
    border-top: 2px dashed #fafafa;
    padding: 8px 0;
    margin: 0;
}

.random-posts a {
    text-decoration: none;
    color: #000;
}

.random-posts a:hover {
    text-decoration: underline;
}


/* seri bài viết */

.seribaiviet {
    margin-top: 30px;
}

.seribaiviet ul {
    margin: 0 0 0 -20px !important;
}

.seribaiviet h3 {
    color: gray;
}


/* từ khóa */

.tukhoa {
    margin: 40px 0 20px 0;
}

.tukhoa a {
    font-size: 12px;
    padding: 3px 6px;
    border-radius: 2px;
    line-height: 2;
    background-color: #fafafa;
    color: #808080b8 !important;
}

.tukhoa a:nth-child(n+2) {
    margin: 2px;
}


/* width 1250px */

@media (max-width: 1300px) {
    .chia {
        margin: 1% !important;
    }
}


/* bài viết chuyên mục, tag */

.bv1 {
    width: 100%;
}

.bv1 .bvngang {
    display: flex;
    align-items: center;
    gap: 30px;
}

.bv1 .bvngang .hinh {
    order: 2;
    width: 65%;
}

.bv1 .bvngang .hinh img {
    width: 100%;
    height: 450px;
    object-fit: cover;
    border-radius: 10px;
}

.bv1 .bvngang .noidung {
    order: 1;
    width: 35%;
}

.bv .bvngang2 {
    display: flex;
    align-items: center;
    gap: 30px;
}

.bv .bvngang2:nth-child(n+2) {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
}

.bv .bvngang2 .hinh {
    order: 1;
    width: 40%;
}

.bv .bvngang2 .hinh img {
    width: 100%;
    height: 200px;
    object-fit: cover;
    border-radius: 10px;
}

.bv .bvngang2 .noidung {
    order: 2;
    width: 60%;
}

.bv2-4 {
    width: 100%;
    display: flex;
    gap: 15px;
    border-top: 1px solid #eee;
    margin-top: 15px;
    padding-top: 15px;
}

.bv2-4 .bvdoc {
    width: 33.33%;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
}

.bv2-4 .bvdoc:nth-child(n+2) {
    border-left: 1px solid #eee;
    padding-left: 15px;
}

.bv2-4 .bvdoc .hinh img {
    width: 100%;
    height: 230px;
    object-fit: cover;
    border-radius: 10px;
}

.bv .chuyenmuc,
.bv .thongtinthem {
    font-family: "Oswald", sans-serif;
    margin: 10px 0;
    color: gray;
}

.bv .thongtinthem {
    font-size: 12px;
}

.bv .mota {
    color: #383838;
}

.bv .tieude {
    font-family: "Lora", serif;
    margin: 10px 0;
    font-size: 20px;
    font-weight: bold;
    line-height: 1.4;
}

.bv .bv1 .tieude {
    font-size: 25px;
    line-height: 1.4;
}

.bv .bvtu5 {
    margin-top: 20px;
    display: flex;
    flex-wrap: wrap;
    gap: 2%;
    border-top: 1px solid #eee;
    padding-top: 20px;
}

.bv .bvtu5 .bv5 {
    width: 65%;
}

.bv .trending {
    width: 33%;
}

.bv .trending img {
    border-radius: 10px;
}

.iconxoay i {
    /* font-size: 24px; */
    animation: shake 1s infinite;
}

@keyframes shake {
    0% {
        transform: rotate(0deg);
        /* Ban đầu không xoay */
    }
    25% {
        transform: rotate(10deg);
        /* Xoay 10 độ */
    }
    50% {
        transform: rotate(-10deg);
        /* Xoay -10 độ */
    }
    75% {
        transform: rotate(5deg);
        /* Xoay 5 độ */
    }
    100% {
        transform: rotate(0deg);
        /* Quay về ban đầu */
    }
}

.phantrang {
    margin: 40px auto;
    text-align: center;
    font-size: 14px;
}

.phantrang .page-numbers {
    border: 1px solid #eee;
    padding: 5px 10px;
    border-radius: 6px;
    margin: 0 1px;
}

.phantrang .current {
    color: #383838;
    background: #eee;
    font-weight: bold;
}

.popuptimkiem input#search-input {
    box-shadow: rgba(0, 0, 0, 0.05) 0px 6px 24px 0px, rgba(0, 0, 0, 0.08) 0px 0px 0px 1px;
    padding: 10px;
    border: 0;
    border-radius: 10px;
    width: 100%;
}

.popuptimkiem #search-results p {
    margin: 10px 0;
    font-size: 15px;
    line-height: 1.4;
    padding: 10px 0;
    transition: .3s;
}

.popuptimkiem #search-results p:nth-child(n+2) {
    border-top: 1px dashed #eee;
    padding: 7px 0 0 0;
    margin: 7px 0;
}

.popuptimkiem #search-results p a {
    color: #444;
    transition: .3s;
}

.popuptimkiem #search-results p:hover a {
    color: green;
    font-weight: bold;
}

.p1200 {
    margin: auto;
    max-width: 1200px;
    width: 95%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

.titbannerads {
    font-size: 12px;
    text-align: center;
}

.titbannerads span img {}

.titbannerads span {
    background: #eee;
    color: gray;
    padding: 5px 20px;
    border-radius: 10px 10px 0 0;
}

.banner-api-baiviet {
    margin-top: -10px;
}

hr.wp-block-separator.has-alpha-channel-opacity {
    margin: 30px 0;
    border: 1px dashed #eee;
}

.main-link {
    display: flex;
    justify-content: center;
    gap: 20px;
    position: relative;
    z-index: 11;
}

.group-link {
    padding: 36px 15px;
    border-radius: 12px;
    border: 1px solid #ffbf00;
    background: rgba(23, 22, 28, 0.10);
    backdrop-filter: blur(2.75px);
    text-align: center;
    width: 315px;
    max-width: 100%;
    transition: .2s;
    position: relative;
}

.ref-link {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 999;
}

.btn-gavang {
    background: #ffbf00;
    border-radius: 12px;
    box-shadow: 0px 2px 6.3px 0px rgba(255, 138, 0, 0.30), 0px -3px 4px 0px rgba(255, 138, 0, 0.30), 0px 4px 8.3px 0px rgba(255, 255, 255, 0.25) inset;
    color: #ffffff;
    line-height: 20px;
    padding: 12px 10px;
    width: 195px;
    border: 0;
    font-size: 16px;
    transition: .2s;
    text-transform: capitalize;
    font-weight: 700;
	display: block;
}


/*
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
width 900px
 */

@media (max-width: 1080px) {
    .bv1 .bvngang .hinh img {
        height: 330px;
    }
    .bv2-4 .bvdoc .hinh img {
        height: 200px;
    }
    .bv .bv1 .tieude,
    .bv .tieude {
        font-size: 17px;
    }
}

@media (max-width: 900px) {
    .chia {
        margin: 2%;
    }
    .chia .noidungbaiviet {
        border-right: 0;
        border-bottom: 1px solid #eee;
        /* box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; */
    }
    .chia .noidungbaiviet h1 {
        margin: 0 0 10px 0;
    }
    .tukhoa {
        margin: 40px 0 0 0;
    }
    .chia .noidungbaiviet {
        /* margin: 2%; */
        width: 100%;
        border-radius: 10px;
        /* padding: 2%; */
    }
    .chia .wget {
        /* margin: 0 2%; */
        width: 100%;
        padding: 0%;
    }
}

@media (max-width: 800px) {
    .bv1 .bvngang .hinh img {
        height: 280px;
    }
    .bv2-4 .bvdoc .hinh img {
        height: 170px;
    }
    .bv .bvtu5 {
        display: flex;
        flex-wrap: nowrap;
        flex-direction: column;
        gap: 2%;
    }
    .bv .bvtu5 .bv5 {
        width: 100%;
    }
    .bv .trending {
        width: 100%;
        max-width: 400px;
        margin: 30px auto;
    }
}

@media (max-width:650px) {
    .bv1 .bvngang {
        display: flex;
        align-items: center;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }
    .bv1 .bvngang .hinh,
    .bv .bvngang2 .hinh {
        order: 1;
        width: 100%;
    }
    .bv1 .bvngang .noidung,
    .bv .bvngang2 .noidung {
        order: 2;
        width: 100%;
    }
    .bv2-4,
    .bv .bvngang2 {
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
        gap: 0;
    }
    .bv2-4 .bvdoc {
        width: 100%;
        display: flex;
        flex-direction: column;
        flex-wrap: nowrap;
    }
    .bv2-4 .bvdoc:nth-child(n+2) {
        border-top: 1px solid #eee;
        border-left: 0;
        padding-left: 0;
        padding-top: 15px;
    }
    .bv1 .noidung,
    .bv2-4 .noidung {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
    }
    .bv1 .noidung .chuyenmuc,
    .bv2-4 .noidung .chuyenmuc {
        order: 1;
        flex: 1 0 auto;
        text-align: right;
        font-size: 14px;
        padding-right: 15px;
    }
    .bv1 .noidung .thongtinthem,
    .bv2-4 .noidung .thongtinthem {
        order: 2;
        flex: 1 0 auto;
        text-align: left;
        font-size: 14px;
    }
    .bv1 .noidung .tieude,
    .bv2-4 .noidung .tieude {
        order: 3;
        width: 100%;
    }
    .bv1 .noidung .mota,
    .bv2-4 .noidung .mota {
        order: 4;
        width: 100%;
        padding-bottom: 10px;
    }
    .bv1 .bvngang .hinh img,
    .bv2-4 .bvdoc .hinh img,
    .bv .bvngang2 .hinh img {
        height: 250px;
    }
    .chia {
        margin: 2% !important;
    }
}

@media (max-width: 450px) {
    .bv1 .bvngang .hinh img,
    .bv2-4 .bvdoc .hinh img,
    .bv .bvngang2 .hinh img {
        height: 200px;
    }
}