/*
Theme Name: Flatsome Child
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/


@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}

.product-main {
   padding: 0;
}

.product-info {
    padding-bottom: 0px;
}

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

.entry-content a {
	font-weight: 700;
}
.entry-content a:hover {
	color: #800000;
}

a:link{
	text-decoration: none;
	color: #0645ad;
}

a:hover {
	color: #800000; /* Màu đỏ đô khi hover */
}

.nav > li > a, .links > li > a {
    color: #000;
}

.secondary, .checkout-button, .button.checkout, .button.alt {
    background-color: #d0011b;
	color: #fff;
}

:root :where(.wp-element-button, .wp-block-button__link) {
    background-color: #f3b33e;
}

.absolute-footer {
    color: #000;
}

/* Đổi màu nền và màu chữ để đảm bảo tương phản cho nút riêng */
.button.my-custom-btn {
    background-color: #cbebed !important;
    color: #0645ad !important; /* Chuyển chữ sang màu tối để dễ đọc trên nền nhạt */
}

/* Hiệu ứng khi rê chuột vào nút */
.button.my-custom-btn:hover {
    background-color: #b0e2e5 !important;
	color: #800000 !important;
}

/* Mở rộng khung content và sidebar bằng cách giảm padding gốc từ 30px về 10px */
.row-large>.flickity-viewport>.flickity-slider>.col, .row-large>.col {
	padding: 0 10px;
}

/* Thay hiệu ứng boder của theme gốc flatsome cho text ở các nút button để text nét không bị nhòe*/
.button, button, input[type='submit'], input[type='reset'], input[type='button'] {
	font-weight: 500;
}

/* Thay đổi màu nền của badge */
.product .badge-inner {
    background-color: #d0011b !important;
}

/* 1. Thêm gạch chân và chỉnh màu tối hơn cho thẻ link trong đoạn đăng nhập bình luận */
.must-log-in a {
    text-decoration: underline !important;
    color: #0645ad !important; /* Dùng màu xanh đậm có độ tương phản cao */
    font-weight: 600;
}
/* 2. Tạo độ tương phản tốt hơn cho toàn bộ đoạn văn bản thông báo này */
.must-log-in {
    color: #222222 !important;
}

/* 1. Giữ nguyên kích thước hiển thị ban đầu, mở rộng vùng cảm ứng bằng Padding */
.flickity-prev-next-button {
    padding: 9px !important; /* Tự động mở rộng vùng chạm từ 30px lên 48px chuẩn WCAG */
    box-sizing: content-box !important;
}
/* 2. Giữ nguyên icon mũi tên bên trong cân đối */
.flickity-prev-next-button svg {
    width: 100% !important;
    height: 100% !important;
}
/* 3. Căn chỉnh vị trí lề để nút nằm chính xác ở tâm giữa chiều cao như mặc định */
.flickity-prev-next-button.previous {
    left: -10px !important;
}
.flickity-prev-next-button.next {
    right: -10px !important;
}

/* Open code Tạo thẻ lật dạng lưới*/
/* Khung chứa toàn bộ các thẻ từ vựng dạng lưới */
.danh-sach-the-lat {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    padding: 10px 0;
}
/* Cấu trúc của từng thẻ đơn lẻ */
.the-flashcard {
    perspective: 1000px;
    height: 150px;
    cursor: pointer;
}
.the-flashcard-inner {
    position: relative;
    width: 100%;
    height: 100%;
    text-align: center;
    transition: transform 0.6s;
    transform-style: preserve-3d;
}
/* Hiệu ứng lật khi click chuột hoặc chạm tay trên điện thoại */
/* CHỈ GIỮ LẠI ĐOẠN NÀY: Thẻ chỉ lật khi có class .flipped */
.the-flashcard.flipped .the-flashcard-inner {
    transform: rotateY(180deg);
}

.the-flashcard-front, .the-flashcard-back {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    padding: 15px;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
}
/* Định dạng màu sắc mặt trước (Tiếng Đức) */
.the-flashcard-front {
    background-color: #ffffff;
    color: #1a202c;
}
/* Định dạng màu sắc mặt sau (Tiếng Việt) */
.the-flashcard-back {
    background-color: #f7fafc;
    color: #e53e3e;
    transform: rotateY(180deg);
}

/* Tùy chỉnh sắp xếp chữ và nút loa ở mặt trước */
.the-flashcard-front {
    flex-direction: column; /* Đặt chữ và nút loa theo hàng dọc, hoặc bỏ dòng này nếu muốn hàng ngang */
    gap: 5px; /* Khoảng cách giữa chữ và nút loa */
}
/* Định dạng nút bấm loa */
.btn-speak {
    background: none;
    border: none;
    font-size: 18px;
    cursor: pointer;
    padding: 5px 10px;
    border-radius: 50%;
    transition: transform 0.2s, background-color 0.2s;
    z-index: 10; /* Đảm bảo nút loa nằm trên cùng để click được */
}
/* Hiệu ứng khi rê chuột vào nút loa */
.btn-speak:hover {
    transform: scale(1.2);
    background-color: #edf2f7;
}
/* Close code Tạo thẻ lật dạng lưới*/