/*
Theme Name: Flatsome
Theme URI: http://flatsome.uxthemes.com/
Author: UX-Themes
Author URI: http://www.uxthemes.com/
Description: Multi-Purpose Responsive WooCommerce Theme
Version: 3.10.0
Text Domain: flatsome
License: http://themeforest.net/licenses
License URI: http://themeforest.net/licenses
*/


/***************
All custom CSS should be added to Flatsome > Advanced > Custom CSS,
or in the style.css of a Child Theme.
***************/
/*  CUSTOM CSS BY VÕ QUÝ*/
/* ======= CÁC CÀI ĐẶT CHUNG ======= */
@font-face {
    font-family: 'MyCustomFont';
    src: url('https://huy-1.dev.scode.live/wp-content/themes/flatsome/fonts/CoconVUBold.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
:root {
    --bg-image: url('/wp-content/uploads/2025/03/bg-blue-gradient-triangle-e1741163608768.jpg');
	--bg-form-color: #BBDEFB;
	--bg-form-color-2: #f5b5d2;
}
body {
/* 	font-family: Farsan, sans-serif; */
    font-size: 16px;
    color: #222;
    margin: 0;
    padding: 0;
    background-color:#FDEDF4
}

/* ======= MENU ĐẦU TRANG ======= */
/* .menu {
    background-color: #032963;
    color: white;
    padding: 15px 20px;
    display: flex;
    justify-content: space-between;
    align-items: center;
} */
/* .menu a {
    color: white;
    text-decoration: none;
    padding: 10px 15px;
} */
/* .menu a:hover {
    color: #ec6a02;
} */

/* ======= NỘI DUNG TRANG CHỦ ======= */
h1 {
/* 	font-family: 'CoconVUBold', sans-serif; */
    color: #222;
    font-size: 32px;
    font-weight: bold;
}
h2 {
/* 	font-family: 'CoconVUBold', sans-serif; */
    color: #100249;
    font-size: 26px;
    font-weight: bold;
}
h3 {
/* 	font-family: 'CoconVUBold', sans-serif; */
    color: #100249;
    font-weight: bold;
}
p {
/* 	font-family: 'CoconVUBold', sans-serif; */
    font-size: 16px;
    color: #222222;
}
a {
    font-family: 'Arima Madurai', sans-serif;
	color: #666;}
}
/* ======= NÚT BẤM ======= */
.button-primary {
    background-color: #ec6a02;
    color: white;
    padding: 12px 24px;
    border: none;
    font-size: 18px;
    cursor: pointer;
    border-radius: 5px;
}
.button-primary:hover {
    background-color: #d65a00;
}

/* ======= LIST BÀI VIẾT ======= */
.post-list {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}
.post-item {
    background: #f9f9f9;
    padding: 15px;
    border-radius: 8px;
    width: calc(33.333% - 20px);
}
.post-item h3 {
    color: #032963;
    font-size: 20px;
    font-weight: bold;
}
.post-item a {
    color: #ec6a02;
}

/* ======= FORM ĐĂNG KÝ ======= */
.form-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    max-width: 500px;
    margin: auto;
}
.form-container label {
    display: block;
    font-size: 16px;
    color: #032963;
    margin-bottom: 5px;
}
.form-container input, .form-container textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 10px;
    border: 1px solid #ccc;
    border-radius: 5px;
}
.form-container button {
    width: 100%;
}

/* ======= FOOTER ======= */
.footer {
    background-color: #032963;
    color: white;
    padding: 20px;
    text-align: center;
}
.footer a {
    color: white;
    text-decoration: none;
}
.footer a:hover {
    color: #ec6a02;
}

/* ======= RESPONSIVE DESIGN ======= */
@media screen and (max-width: 1024px) {
    .menu {
        padding: 10px;
    }
}

@media screen and (max-width: 768px) {
    /* Menu đổi thành dạng icon ☰ */
    .menu {
        flex-direction: column;
        text-align: center;
        padding: 10px;
    }
    .menu a {
        display: block;
        padding: 10px;
        font-size: 14px;
    }

    /* Nút bấm nhỏ hơn trên mobile */
    .button-primary {
        font-size: 16px;
        padding: 10px 20px;
    }

    /* Tiêu đề nhỏ lại */
    h1 {
        font-size: 24px;
    }
    h2 {
        font-size: 20px;
    }

    /* Bài viết chuyển thành 1 cột */
    .post-list {
        flex-direction: column;
    }
    .post-item {
        width: 100%;
    }
}

@media screen and (max-width: 480px) {
    h1 {
        font-size: 20px;
    }
    .button-primary {
        font-size: 14px;
        padding: 8px 16px;
    }
}