/**
 * timestamp: Monday, June 16, 2025 8:07:28 AM - quyen modify
 * Styles for Fong Flashpage template
 * 2025-05-16 15:04:49
 * @package Astra-child-deutschfuns
 * @since 1.0.0
 *
 * @related_files
 * - wp-content/themes/astra-child-deutschfuns/templates/fong-flashpage.php
 */

/* ==========================================================================
   SECTION: FONT DECLARATIONS
   Description: Khai báo các font Montserrat với các weight khác nhau
   ========================================================================== */

/* impport quyen css */
@import url("quyen-flashpage-base.css");
@import url("quyen-flashpage-responsive.css");

@font-face {
    font-family: "Montserrat";
    src: url("../fonts/static/Montserrat-Regular.ttf") format("truetype");
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-bold";
    src: url("../fonts/static/Montserrat-Bold.ttf") format("truetype");
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-medium";
    src: url("../fonts/static/Montserrat-Medium.ttf") format("truetype");
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-semibold";
    src: url("../fonts/static/Montserrat-SemiBold.ttf") format("truetype");
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: "Montserrat-Extrabold";
    src: url("../fonts/static/Montserrat-ExtraBold.ttf") format("truetype");
    font-weight: 800;
    font-style: normal;
}

/* ==========================================================================
   SECTION: BASE STYLES
   Description: Styles cơ bản cho toàn bộ trang
   ========================================================================== */
.fong-flashpage {
    margin: auto;
    font-family: "Montserrat", sans-serif;
}

.fong-flashpage a {
    text-decoration: none;
}

/* ==========================================================================
   SECTION: FLASHPAGE CONTAINER
   Description: Container chính với background image
   ========================================================================== */
.container_flashpage {
    background-image: url("../images/flashpage-desktop-no-text-1.svg");
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    background-repeat: no-repeat;
    background-size: cover;
}

/* ==========================================================================
   SECTION: CONTENT GROUP
   Description: Container cho nội dung chính
   ========================================================================== */
.group_content {
    /* max-width: 560px; */
    max-width: 507px;
    width: 100%;
    margin-bottom: 50px;
    padding: 0 26.5px;
}

.group_content_txt {
    text-align: center;
    margin-bottom: 30px;
}

/* ==========================================================================
   SECTION: TYPOGRAPHY
   Description: Styles cho tiêu đề và mô tả
   ========================================================================== */
.title {
    color: #fff;
    font-family: "Montserrat-Bold", sans-serif;
    font-size: 32px;
    line-height: 26px;
    margin-bottom: 15px;
}

.description {
    color: #fff;
    /* font-family: "Montserrat-Medium", sans-serif; */
    font-size: 16px;
    font-family: "Montserrat", sans-serif;
    line-height: 20px;
    margin-bottom: 15px;
}

/* ==========================================================================
   SECTION: BUTTON CONTAINER
   Description: Layout cho nhóm nút
   ========================================================================== */
.group_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.btn_signin,
.btn_register {
    width: calc((100% - 25px) / 2);
}

/* ==========================================================================
   SECTION: BUTTON STYLES
   Description: Styles cho các nút đăng nhập và đăng ký
   ========================================================================== */
.btn_register_txt,
.btn_signin_txt {
    display: flex;
    justify-content: center;
    padding: 16px 0;
    color: #fff;
    text-transform: uppercase;
    border-radius: 36px;
    font-size: 16px;
    font-family: "Montserrat-Bold", sans-serif;
}

/* Nút đăng ký - Gradient background */
.btn_register_txt {
    background: linear-gradient(90deg, #00bdbe 0%, #00e8ea 50%, #00bdbe 100%);
    border: none;
}

/* Nút đăng nhập - Solid background với border */
.btn_signin_txt {
    background-color: #025066;
    border: solid 2px #fff;
}

.btn_register_txt {
    background: linear-gradient(90deg, #00bdbe 0%, #00e8ea 50%, #00bdbe 100%);
    border: none;
}

.btn_register {
    background-color: rgba(0, 195, 197, 0.2);
    border: 4px solid rgba(0, 195, 197, 0.2);
    border-radius: 36px;
}

/* Hover effects */
a.btn_signin_txt:hover {
    background-color: #fff;
    color: #00bdbe;
}

/* Hover effect cho nút đăng ký */
a.btn_register_txt:hover {
    background: linear-gradient(90deg, #02aaaa 20%, #04e0e4 100%, #04bdbd 50%);
    color: #fff;
}

/* ==========================================================================
   SECTION: RESPONSIVE STYLES
   Description: Media queries cho các kích thước màn hình khác nhau
   ========================================================================== */
/* Tablet và desktop nhỏ */
@media screen and (max-width: 1025px) and (min-width: 461px) {
    .container_flashpage {
        background-position: center center;
    }
}

/* Mobile */
@media screen and (max-width: 460px) {
    /* Thay đổi background cho mobile */
    .container_flashpage {
        background-image: url("../images/flaspage_mobile.jpg");
        background-position: center center;
    }

    /* Điều chỉnh typography cho mobile */
    .title {
        font-size: 20px;
    }

    .description {
        font-size: 15px;
    }

    /* Điều chỉnh spacing cho mobile */
    .group_content_txt {
        margin-bottom: 44px;
    }

    .group_content {
        padding: 0 40px;
        margin-bottom: 82px;
    }

    /* Thay đổi layout nút cho mobile */
    .group_btn {
        flex-direction: column;
    }

    .btn_signin {
        margin-bottom: 20px;
    }

    .btn_signin,
    .btn_register {
        width: 100%;
    }
}

/* ================================
   Link "Dành cho giáo viên" - Style
   ================================ */

/* Container căn giữa link, tạo khoảng cách phía trên */
.teacher-login-link {
    text-align: center; /* Căn giữa nội dung theo chiều ngang */
    margin-top: 18px; /* Tạo khoảng cách phía trên với phần trên */
}

/* Style cho thẻ <a> bên trong .teacher-login-link */
.teacher-login-link a {
    color: #fff; /* Màu chữ trắng */
    font-family: "Montserrat", sans-serif; /* Font chữ đồng bộ UI */
    font-size: 15px; /* Cỡ chữ vừa phải */
    font-weight: 500; /* Độ đậm trung bình */
    text-decoration: underline; /* Gạch chân để giống link */
    background: none; /* Không có nền */
    border: none; /* Không viền */
    box-shadow: none; /* Không đổ bóng */
    padding: 0; /* Không padding */
    transition: color 0.2s; /* Hiệu ứng chuyển màu khi hover */
}

/* Hiệu ứng hover cho link: đổi màu sang xanh */
.teacher-login-link a:hover {
    color: #00c3c5; /* Màu xanh khi hover */
    text-decoration: underline; /* Giữ gạch chân */
}

/* Style cho icon Font Awesome (nếu có) bên trong link */
.teacher-login-link i {
    color: #fff; /* Màu trắng đồng bộ với chữ */
    font-size: 15px; /* Cỡ icon bằng chữ */
    vertical-align: middle; /* Căn giữa icon với chữ */
    transition: color 0.2s; /* Hiệu ứng chuyển màu khi hover */
}

/* Khi hover vào <a> hoặc <i>, cả hai đều đổi màu xanh */
.teacher-login-link a:hover,
.teacher-login-link i:hover {
    color: #00c3c5; /* Màu xanh khi hover */
}