@import url('https://fonts.googleapis.com/css2?family=Amatic+SC:wght@400;700&family=Dancing+Script:wght@400..700&family=Lora:ital,wght@0,400..700;1,400..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&family=Varela+Round&display=swap');

* {
    box-sizing: border-box;
}

/* CK Editor */

.ck-media-embed {
    pointer-events: auto !important;
}

.ck-media-embed iframe {
    pointer-events: none;
    /* Tắt pointer events trên iframe, giữ con chuột luôn hiển thị */
}

.ck-media-embed:hover iframe {
    pointer-events: auto;
    /* Kích hoạt pointer events khi hover để có thể tương tác */
}

/*  */
html,
body {
    scroll-behavior: smooth;
    height: 100%;
    padding: 0px;
    margin: 0px;
    background-color: #f6f6f6;
    /* background-color: #121212; */
    font-family: 'Roboto', sans-serif;
}

::selection {
    background-color: rgb(178, 215, 254);
}

h1,
h2,
h3,
h4,
h5,
h6 {

    font-family: 'Roboto', sans-serif;
    color: #000000;
    margin: 5px;
}

a {
    text-decoration: none;
    color: inherit;
}

.clearfix::after {
    content: '';
    display: block;
    clear: both;
}

.btn {
    padding: .5rem 1rem;
    background: white;
    color: black;
    border: 2px solid black;
    border-radius: .25rem;
    font-size: 1.08em;
    /* font-family: 'Lora', serif; */
    font-family: Arial, sans-serif;
    cursor: pointer;
}

.btn-big {
    padding: .7rem 1.3rem;
    line-height: 1.3rem;
}

.btn:hover {
    color: white !important;
    background-color: black;
}

.text-input {
    padding: .7rem 1rem;
    display: block;
    width: 100%;
    border-radius: 5px;
    border: 1px solid #e0e0e0;
    outline: none;
    color: #444;
    line-height: 1.5rem;
    font-size: 1.2em;
    font-family: Arial, sans-serif;
}

.msg {
    width: 100%;
    margin: 5px auto;
    padding: 8px;
    border-radius: 5px;
    list-style: none;
}

.success {
    color: #3a6e3a;
    border: 1px solid #3a6e3a;
    background: #bcf5bc;
}

.error {
    color: #884b4b;
    border: 1px solid #884b4b;
    background: #f5bcbc;
}

/* NAVBAR */

header * {
    color: rgb(255, 255, 255);
}

header .logo {
    float: left;
    margin-left: 2em;
    height: inherit;
}

header .logo-text {
    margin: 9px;
    font-family: 'Candal', serif;
}

header a img {
    width: 36px;
    height: auto;
}

header .logo-text span {
    color: #ffff64;
}

header {
    height: 66px;
    background: #181414;
}

header .menu-toggle {
    display: none;
}

header .nav {
    float: right;
}

/* Các mục trong menu */
header .nav .nav-item {
    display: block;
    float: left;
    position: relative;
    font-size: 1.1em;
    padding: 20px 15px;
    color: #fff;
}

header .nav .nav-item a:hover {
    text-decoration: underline;
    transition: 0.5s;
}

/* Dropdown menu */
header .nav-item .dropdown-menu {
    display: none;
    position: absolute;
    top: 66px;
    right: 0px;
    width: inherit;
    background-color: #272727;
    z-index: 88888;
}

header .nav-item .dropdown-menu.active {
    display: block;
    position: absolute;
    border: 1px solid #ddd;
    border-radius: 5px;
    width: 100%;
}

/* Các mục trong dropdown */
header .nav-item .dropdown-menu.active a {
    display: block;
    padding: 8px 15px;
    text-align: left;
    border-bottom: 1px solid rgb(109, 103, 103);
}

/* img vi en */

header .nav .nav-item.language-toggle {

    display: flex;
    align-items: center;
    max-height: 66px;

}

header .nav .nav-item.language-toggle a button {
    padding: 5px 5px;
    font-size: 1em;
    background: inherit;
    color: white;
    border: none;
    /* border: 2px solid white; */
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 8px;
}

header .nav .nav-item.language-toggle i {
    color: inherit;
}

header .nav .nav-item.language-toggle a:hover {
    text-decoration: none;
}

header .nav .nav-item.language-toggle a button:hover {
    color: rgb(178, 215, 254);
}



/* PAGE WRAPPER */
.page-wrapper {
    min-height: 100%;
}

.page-wrapper a:hover {
    text-decoration: underline;
}

/* WELCOME SECTION */

.container {
    width: 80%;
    display: block;
    margin: auto;
    padding-top: 100px;
}

.content-section {
    float: left;
    width: 55%;
}

.image-section {
    float: right;
    width: 40%;
}

.image-section img {
    height: auto;
    width: 100%;
}

.content-section .title {
    text-transform: uppercase;
    font-size: 28px;
}

.content-section .title h1 {
    margin: 0 !important;
}

.content-section .welcome_content h3 {
    margin: 20px 0 0 0 !important;
    color: #5d5d5d;
    font-size: 21px;
}

.content-section .welcome_content p {
    margin-top: 10px;
    font-family: sans-serif;
    font-size: 18px;
    line-height: 1.5;
}

.content-section .random-post {
    margin: 20px 0;
    text-align: center;

}

.content-section .random-post .random-btn {
    background: #ffff64;
    border: none;
    padding: 12px 20px;
    border: 2px solid #222;
    border-radius: 25px;
    font-size: 18px;
    font-weight: bold;
    color: #222;
    cursor: pointer;
    transition: all 0.3s ease;
}

.content-section .random-post .random-btn a {
    text-decoration: none;
    /* color: #ffff64; */
}

.content-section .random-post .random-btn:hover {
    background: white;
    color: #222;
    /* border: 2px solid #ffff64; */
}

/* CONTENT */
.content {
    width: 90%;
    margin: 30px auto 30px;
}

.content .main-content {
    width: 70%;
    float: left;
}

.content .main-content .post {
    width: 97%;
    height: 270px;
    margin: 20px auto;
    border-radius: 5px;
    background: white;
    position: relative;
}


.content .main-content .post .read-more {
    position: absolute;
    bottom: 10px;
    right: 10px;
    border: 2px solid black;
    background: white;
    border-radius: 0px;

}

.content .main-content .post .read-more:hover {
    text-decoration: none;
    background: black;
    color: white !important;
    transition: .25s;
}

.content .main-content .post .post-image {
    width: 40%;
    height: 100%;
    float: left;
    object-fit: cover;  
    object-position: center;
}

.content .main-content .post .post-preview {
    padding: 10px;
    width: 60%;
    float: right;
}


.content .main-content .recent-post-title {
    margin: 20px;
}

.content .main-content .post .post-preview i span {
    font-family: 'Times New Roman', Times, serif;
}

/* Content - Single page */
.content .main-content .single {
    background: white;
    padding: 20px 50px;
    font-size: 1.1em;
    border-radius: 5px;
    margin-bottom: 20px;
}

.content .main-content .single .post-title {
    text-align: center;
    margin-bottom: 40px;
}

.content .main-content .single .post-content figure {
    max-width: 100%;
    text-align: center;
    margin: 10px auto;
}

.content .main-content .single .post-content img {
    max-width: 100%;
    width: 100%; /* Thêm dòng này */
    height: auto;
    display: block;
    margin: 10px auto;
}

/* video nhúng */
figure.media {
    max-width: 100%; 
    margin: 0 auto; 
}
  
figure.media iframe {
    width: 100%; 
    height: auto;
    
}
  
figure.media div {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; 
    height: 0;
}
  
figure.media iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
}

/* Share post */
.content .main-content .single .share-buttons a {
    display: inline-block;
    padding: 10px 10px;
    margin: 10px 0;
    text-decoration: none;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    transition: background-color 0.3s ease;
}

.facebook-share-button {
    background-color: #3b5998;
}

.share-buttons a:hover {
    opacity: 0.8;
}

/* Comment */
.content .main-content .comment-section {
    margin-top: 30px;
    padding: 20px;
    background-color: #ffffff;
    border-radius: 5px;
}

.content .main-content .comment-section .comment-form {
    margin-bottom: 10px;
    background-color: #f9f9f9;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.content .main-content .comment-section .comment-form textarea {
    width: 100%;
    height: 100px;
    padding: 10px;
    border-radius: 5px;
    border: 1px solid #ddd;
    resize: vertical;
    font-size: 16px;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
}

.content .main-content .comment-section .comment-form button {
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 16px;
}

.content .main-content .comment-section .comment-form button:hover {

    background-color: black;
}

/* Comment  of user */
.content .main-content .comment-section .comment {
    position: relative;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content .main-content .comment-section .comment p {
    margin: 5px 0;
    line-height: 1.6;
}

.content .main-content .comment-section .comment small {
    color: #999;
    font-size: 12px;
}


.content .main-content .comment-section .comment .comment-author {
    color: purple;
    font-weight: bold;
}

.content .main-content .comment-section .comment-son {
    background-color: #fff;
    border-left: 1px solid palevioletred;
    padding: 15px;
    border-radius: 5px;
    margin-bottom: 15px;
    margin-left: 70px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.content .main-content .comment-section .comment-son p {
    margin: 5px 0;
    line-height: 1.6;
}

.content .main-content .comment-section .comment-son small {
    color: #999;
    font-size: 12px;
}

.content .main-content .comment-section .comment-son .comment-son-author {
    color: palevioletred;
    font-weight: bold;
}

.content .main-content .comment-section .comment .reply-btn {
    float: right;
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 5px 10px;
    border-radius: 4px;
    font-size: 14px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.content .main-content .comment-section .comment .reply-btn:hover {
    background-color: black;
    color: white;
    border: 1px solid white;


}

.content .main-content .comment-section .comment .reply-form {
    margin-top: 10px;
    padding: 10px;
    border-radius: 5px;
}

.content .main-content .comment-section .comment .reply-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 16px;
    color: black;
    border: 1px solid #ddd;
    border-radius: 5px;
    resize: vertical;
    font-family: Arial, sans-serif;
    margin-bottom: 10px;
}

/* Nút Gửi Reply */
.content .main-content .comment-section .comment .reply-form button {
    background-color: white;
    color: black;
    border: 1px solid black;
    padding: 5px 10px;
    /* Khoảng cách bên trong */
    border-radius: 4px;
    /* Bo tròn góc */
    font-size: 14px;
    /* Kích thước chữ */
    cursor: pointer;
    /* Thay đổi con trỏ khi hover */
    transition: background-color 0.3s;
    /* Hiệu ứng hover */
}

/* Hover cho nút Gửi Reply */
.content .main-content .comment-section .comment .reply-form button:hover {
    background-color: black;
    color: white;
    border: 1px solid white;
}

/* Nút xổ xuống */
.toggle-reply-btn {
    position: absolute;
    /* Định vị tuyệt đối so với ô comment */
    top: 10px;
    /* Cách mép trên */
    right: 10px;
    /* Cách mép phải */
    display: flex;
    /* Sử dụng flexbox để căn giữa */
    align-items: center;
    /* Căn giữa theo trục dọc */
    justify-content: center;
    /* Căn giữa theo trục ngang */
    width: 30px;
    /* Kích thước chiều ngang của hình tròn */
    height: 30px;
    /* Kích thước chiều cao của hình tròn */
    background-color: transparent;
    /* Nền trong suốt mặc định */
    border: none;
    color: #000000;
    font-size: 18px;
    cursor: pointer;
    transition: color 0.3s, background-color 0.3s;
    border-radius: 50%;
    /* Làm nút tròn */

}

.toggle-reply-btn:hover {
    color: black;
    /* Thay đổi màu chữ */
    background-color: rgba(0, 0, 0, 0.1);
    /* Nền xám nhạt khi hover */
    padding: 0;
    /* Đảm bảo padding không làm lệch */
}

/* Mặc định nút không xoay */
.toggle-reply-btn i {
    transform: rotate(0deg);
    /* Góc ban đầu */
    transition: transform 0.3s ease-in-out;
    /* Hiệu ứng xoay mượt */
}

/* Khi click (xoay chữ V thành ^) */
.toggle-reply-btn.active i {
    transform: rotate(180deg);
    /* Xoay 180 độ */
    transition: transform 0.3s ease-in-out;
    /* Hiệu ứng xoay mượt */
}



/* // Comment */

.content .popular .post {
    border-top: 1px solid #e0e0e0;
    margin-top: 10px;
    padding-top: 10px;
}

.content .popular .post img {
    height: 60px;
    width: 75px;
    float: left;
    margin-right: 10px;
}

/* // Content - Single page */

/* Content - About page */
.content-about {
    width: 90%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    /* grid-template-columns: repeat(auto-fit,1fr); */
    grid-auto-rows: minmax(250px, auto);

}

.content-about .item {

    background-color: white;
    min-height: 50px;
    border-radius: 5px;

    display: flex;
    /* Sử dụng Flexbox để căn giữa */
    flex-direction: column;
    /* Đặt các phần tử con theo chiều dọc */

    justify-content: center;
    padding: 10px;

}

.content-about .item img {

    width: 100%;
    height: auto;
    object-fit: cover;
    transition: box-shadow 0.3s ease;
}

.content-about .item img:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transform: scale(1.02);
    transition: transform 0.4s ease;
}

.content-about .text-center {
    text-align: center;
    font-family: 'Dancing Script', cursive;
    color: palevioletred;
}

.content-about .item1 h1 {
    font-size: 3rem;
}

.content-about .item3 .about-text {
    margin-top: 20px;
    font-size: 1rem;
}

.content-about .about-text {
    margin: 10px 40px;
    line-height: 1.6;
}

.content-about .item5 h1 {
    font-size: 3rem;
}

.content-about .item6 img {
    height: 250px;
}

/* //Content - About page */

/*  SIDEBAR */
.content .sidebar {

    width: 30%;
    float: left;
    /* border: 1px dashed green; */
    /* height: 300px; */
}

.content .sidebar.single {
    padding: 0px 10px;
}

.content .sidebar .section {
    background: white;
    padding: 20px;
    border-radius: 5px;
    margin-bottom: 20px;
    /* border: 1px dashed green; */
}

.content .sidebar .section .section-title {
    margin: 10px 0px 10px 0px;
}

.content .sidebar .section.search {
    margin-top: 79px;
}

.content .sidebar .section.topics ul {
    margin: 0px;
    padding: 0px;
    list-style: none;
    border-top: 1px solid #e0e0e0;
}

.content .sidebar .section.topics ul li a {
    padding: 15px 0px 15px 0px;
    display: block;
    border-bottom: 1px solid #e0e0e0;
    transition: all 0.3s;
}

.content .sidebar .section.topics ul li a:hover {
    padding-left: 10px;
    transition: all 0.3s;
}

/* AUTH PAGES */

.auth-content {
    width: 30%;
    margin: 50px auto;
    padding: 20px;
    background: white;
    border-radius: 5px;
}


.auth-content form .form-title {
    text-align: center;
}

.auth-content form div {
    margin-bottom: 10px;
}

.auth-content form p {
    text-align: center;
}

.auth-content form p a {
    text-decoration: underline;
}

/* FOOTER */
.footer {
    /* background: rgba(255,250,190,255); */
    background: rgb(24, 20, 20);
    color: white;
    height: 440px;
    position: relative;
}

.footer .footer-content {
    /* border: 1px solid red; */
    height: 350px;
    display: flex;
}

.footer .footer-content .footer-section {
    padding: 25px;
    flex: 1;
}

.footer .footer-content h1,
.footer .footer-content h2 {
    color: white;
}

.footer .footer-content .about {
    display: flex;
    flex-direction: column;
}




.footer .footer-content .about a img {
    max-height: 80px;
    max-width: 8 0px;
}

.footer .footer-content .about h1 span {
    color: #05f7ff;
}

.footer .footer-content .about .contact span {
    display: block;
    font-size: 1.1em;
    margin-bottom: 8px;
}

.footer .footer-content .about .socials a {
    border: 1px solid gray;
    /* margin-top ->khoa add */
    margin-top: 10px;
    width: 45px;
    height: 41px;
    padding-top: 5px;
    margin-right: 5px;
    text-align: center;
    display: inline-block;
    font-size: 1.3em;
    border-radius: 5px;
    transition: all 0.3s;
}

.footer .footer-content .about .socials a:hover {
    color: white;
    border: 1px solid white;
    transition: all 0.3s;
}

.footer .footer-content .links ul a {
    display: block;
    list-style: none;
    margin-bottom: 10px;
    font-size: 1.2em;
    transition: all .3s;
}

.footer .footer-content .links ul a:hover {
    color: #ffff64;
    padding-left: 10px;
    transition: all .3s;
}

.footer .footer-content .contact-form .contact-input {
    background: #272727;
    color: #bebdbd;
    margin-bottom: 10px;
    line-height: 1.5rem;
    padding: .9rem 1.4rem;
    border: none;
    resize: none;

}

.footer .footer-content .contact-form .contact-input:focus {
    background: #1a1a1a;
}

.footer .footer-content .contact-form .contact-btn {
    float: right;
    font-size: 1.1em;
    font-family: 'Lora', serif;
    background: #272727;
    color: white;
    border: none;
}

.footer .footer-content .contact-form .contact-btn:hover {
    background: #303036;

}

.footer .footer-bottom {
    background: #272727;
    color: #686868;
    height: 50px;
    width: 100%;
    text-align: center;
    position: absolute;
    bottom: 0px;
    left: 0px;
    padding-top: 20px;
}

/* Terms and Conditions */
.content .term-container {
    max-width: 900px;
    margin: 30px auto;
    padding: 20px;
    background-color: #f8f8f8;
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
    color: #333;
}

.term-container h1 {
    font-size: 28px;
    font-weight: bold;
    text-align: center;
    color: #0056b3;
    margin-bottom: 20px;
    text-transform: uppercase;
}

.term-container h2 {
    font-size: 20px;
    color: #333;
    margin-top: 20px;
    border-bottom: 2px solid #0056b3;
    padding-bottom: 5px;
}

.term-container p {
    font-size: 16px;
    line-height: 1.8;
    margin-bottom: 15px;
    text-align: justify;
}

.term-container ul {
    margin-left: 20px;
    list-style: disc;
}

.term-container ul ul {
    list-style: circle;
    margin-left: 20px;
}

.term-container ul li {
    margin-bottom: 10px;
    font-size: 16px;
}

.term-container a {
    color: #0056b3;
    text-decoration: none;
}

.term-container a:hover {
    text-decoration: underline;
}

.term-container ul ul li {
    font-size: 15px;
}

.term-container:hover {
    transform: scale(1.02);
    transition: 0.3s ease-in-out;
}

/* MEDIA QUERIES - Reponsive */
@media only screen and (max-width:1200px) {
    .radio-wrapper {
        height: 300px;
    }

    .content {
        width: 100%;
    }

    .content .main-content .post {
        width: 100%;
    }

    .content .main-content .single {
        padding: 20px 20px;
    }


    .content .main-content {
        width: 100%;
        padding: 10px;
    }

    .content .sidebar {
        width: 100%;
        padding: 10px;
    }

    .content .sidebar .section.search {
        margin-top: -10px;
    }

    .content-about {
        grid-template-columns: repeat(1, 1fr);
        width: 100%;
    }

    .footer {
        height: auto;
    }

    .footer .footer-content {
        height: auto;
        flex-direction: column;

    }

    .footer .footer-content .contact-form {
        padding-bottom: 90px;
    }

    .footer .footer-content .contact-form .contact-btn {
        width: 100%;
    }

    .auth-content {
        width: 50%;
    }
}


@media only screen and (max-width:992px) {

    /* co dinh */
    header .logo {
        margin-left: .5em;
        font-size: .8em;
    }

    .auth-content {
        width: 60%;
    }

    .main-content-wrapper {
        padding: 10px;
    }

    /* co dinh */
    header {
        position: relative;
    }


    /* Hiển thị icon menu toggle */
    header .menu-toggle {
        display: block;
        position: absolute;
        right: 20px;
        top: 20px;
        font-size: 1.9em;
        cursor: pointer;
    }

    header .nav {

        left: 0;
        width: 100%;
        background: #303036;
        max-height: 0px;
        overflow: hidden;
        margin-bottom: 25px;
        position: relative;
        z-index: 1000;
        /* thêm positin để chọn click dc */
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    .showing {
        max-height: 100em !important;
        overflow: visible !important;
    }

    /* Menu sổ xuống theo chiều dọc */
    header .nav-item {
        padding: 10px !important;
        text-align: center;

    }

    /* Các mục trong dropdown menu */
    header .nav-item .dropdown-menu {
        width: 100%;
        display: block;
        position: static;
        padding: 0;
    }

    header .nav-item .dropdown-menu.active {
        display: none;
    }

    header .nav-item .dropdown-menu.active a {
        display: block;
        padding: 10px 15px;
        color: #fff;
        text-decoration: none;
    }

    header .nav-item .dropdown-menu.active a:hover {
        background-color: #fff;
        color: #000000;
        /* Màu khi hover */
        transition: 0.3s ease;
    }

    /* Điều chỉnh kích thước của các item trong menu khi thu nhỏ */
    .nav-item a {
        pointer-events: auto !important;
        z-index: 1;
        padding: 8px 15px;
        display: block;
        /* Đảm bảo mỗi item trong menu chiếm toàn bộ chiều rộng */
    }

    /* Điều chỉnh vị trí của các mục menu khi thu nhỏ màn hình */
    header .nav-item a:hover {
        background-color: #272727;
        /* Màu nền khi hover */
    }

    /* Content index */
    .container {
        width: 80%;
        display: block;
        margin: auto;
        padding-top: 50px;
    }

    .content-section {
        float: none;
        width: 100%;
        display: block;
        margin: auto;
    }

    .image-section {
        float: none;
        width: 100%;
    }

    .image-section img {
        width: 100%;
        display: block;
        height: auto;
        margin: auto;
    }

    .content-section .title {
        text-align: center;
        font-size: 19px;
    }



}

@media only screen and (max-width:600px) {
    .content .main-content .post {
        height: auto;
    }

    .content .main-content.single {

        padding: 20px 20px;

    }

    .content .main-content .post .post-image {
        width: 100%;
        height: 270px;
    }

    .content .main-content .post .post-preview {
        width: 100%;
    }

    .content .main-content .post .read-more {
        position: static;
        width: 100%;
        display: block;
        text-align: center;
    }

    .auth-content {
        width: 90%;
    }
}