/*
Theme Name: Quay Thu Theme
Theme URI: 
Author: Minh Vu
Description: Theme cơ bản sử dụng TailwindCSS cho Quay Thu
Version: 1.0.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: quaythutheme
*/

/* Quay Thu Sidebar Widget Styles - Modern UI */
.sidebar-qt-widget .widget-content ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.6rem;
}
.sidebar-qt-widget .widget-content ul li {
    margin: 0;
    padding: 0;
    list-style: none;
}
.sidebar-qt-widget .widget-content ul li a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: #f9fafb; /* gray-50 */
    border-radius: 0.75rem; /* rounded-xl */
    padding: 0.75rem 1rem;
    font-size: 14.5px;
    font-weight: 500;
    color: #374151; /* gray-700 */
    text-decoration: none;
    transition: all 0.2s ease;
    height: 100%;
}
.sidebar-qt-widget .widget-content ul li a:hover {
    background-color: #f3f4f6; /* gray-100 */
    color: #111827;
}

/* Active Region Item */
.sidebar-qt-widget .widget-content ul li.current-menu-item a {
    background-color: #fef2f2; /* red-50 */
    color: #e1251b;
}
.sidebar-qt-widget .widget-content ul li.current-menu-item a::after {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23e1251b' stroke-width='2'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M9 5l7 7-7 7'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

/* Sidebar Widget Titles default override */
.sidebar-qt-widget .widget-title {
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

/* =========================================
   Desktop & Mobile Menu Custom Styles
========================================= */

/* CSS cho Primary Menu Desktop */
#primary-menu {
    display: flex;
    gap: 2rem;
    align-items: center;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}
#primary-menu > li {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
}
#primary-menu li a {
    color: #ffffff;
    font-weight: 700;
    font-size: 1.125rem;
    text-decoration: none;
    transition: color 0.2s;
    white-space: nowrap;
}
#primary-menu li a:hover {
    color: #ffdd33;
}

/* Dropdown Sub-menu styling */
#primary-menu ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 50;
    display: none;
    min-width: 240px;
    background-color: #ffffff;
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
    border-radius: 0.25rem;
    padding: 0.5rem 0;
    margin: 0;
    list-style: none;
    border: 1px solid #e5e7eb;
}
/* Hiển thị Sub-menu khi hover */
#primary-menu li:hover > ul.sub-menu {
    display: block;
}
#primary-menu ul.sub-menu li {
    position: relative;
    display: block;
    height: auto;
}
#primary-menu ul.sub-menu li a {
    color: #374151; /* Đen nhạt */
    font-size: 1rem;
    font-weight: 500;
    padding: 0.75rem 1.25rem;
    display: block;
    white-space: normal;
}
#primary-menu ul.sub-menu li a:hover {
    background-color: #f9fafb;
    color: #cc0000; /* Màu brand */
}

/* 3rd-level dropdown (Sub-menu cấp 3) */
#primary-menu ul.sub-menu ul.sub-menu {
    top: 0;
    left: 100%;
}

/* CSS cho Custom Logo nếu người dùng tải lên */
.custom-logo-link img {
    max-height: 60px;
    width: auto;
    object-fit: contain;
}

/* Mobile Menu Styling */
#mobile-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
}
#mobile-menu li {
    display: block;
}
#mobile-menu > li > a {
    color: white;
    font-weight: 700;
    display: block;
    padding: 0.75rem 0;
    text-decoration: none;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}
#mobile-menu > li:last-child > a {
    border-bottom: none;
}
#mobile-menu li a:hover {
    color: #ffdd33;
}

/* Mobile Sub-menu styling */
#mobile-menu ul.sub-menu {
    list-style: none;
    padding-left: 1.5rem;
    margin: 0;
    display: block;
    background: rgba(0,0,0,0.1); /* Màu nền phân biệt menu con */
}
#mobile-menu ul.sub-menu li a {
    color: rgba(255,255,255,0.9);
    font-weight: 500;
    font-size: 0.95rem;
    display: block;
    padding: 0.6rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.05);
    text-decoration: none;
    text-transform: none; /* Bỏ in hoa submenu */
}
#mobile-menu ul.sub-menu li:last-child > a {
    border-bottom: none;
}

/* =========================================
   Footer Animations & Custom Styles
========================================= */

/* CSS Animation cho hiệu ứng đổ bóng chạy qua footer */
@keyframes shineSweep {
    0% { left: -50%; opacity: 0; }
    50% { opacity: 0.12; }
    100% { left: 150%; opacity: 0; }
}
.animate-shine-sweep {
    position: absolute;
    top: 0;
    width: 30%;
    height: 100%;
    transform: skewX(-20deg);
    background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.7) 50%, rgba(255,255,255,0) 100%);
    animation: shineSweep 4s infinite linear;
    pointer-events: none;
}

/* CSS tuỳ chỉnh cho nội dung nhập từ Editor */
.footer-content-area a { color: #facc15; transition: color 0.2s; font-weight: 500; text-decoration: none; }
.footer-content-area a:hover { color: #ffffff; text-decoration: underline; }
.footer-content-area p { margin-bottom: 0.85rem; line-height: 1.7; }
.footer-content-area strong, .footer-content-area b { color: #ffffff; font-weight: 700; }
.footer-content-area ul { list-style: disc; padding-left: 1.25rem; margin-bottom: 1rem; }

/* Footer Navigation */
.footer-navigation ul {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-navigation a {
    color: #ffffff;
    text-decoration: none;
    transition: color 0.2s;
}
.footer-navigation a:hover { color: #facc15; }

/* =========================================
   WYSIWYG Editor Content Styling (.prose-custom)
========================================= */
.prose-custom p { margin-bottom: 1.25rem; }
.prose-custom h2 { font-size: 1.5rem; font-weight: 700; margin-top: 2rem; margin-bottom: 1rem; color: #111827; line-height: 1.3; }
.prose-custom h3 { font-size: 1.25rem; font-weight: 700; margin-top: 1.5rem; margin-bottom: 0.75rem; color: #111827; line-height: 1.4; }
.prose-custom ul { list-style-type: disc; margin-left: 1.5rem; margin-bottom: 1.25rem; padding-left: 0.5rem; }
.prose-custom ol { list-style-type: decimal; margin-left: 1.5rem; margin-bottom: 1.25rem; padding-left: 0.5rem; }
.prose-custom li { margin-bottom: 0.5rem; }
.prose-custom blockquote { border-left: 4px solid #e5e7eb; padding-left: 1.25rem; color: #4b5563; font-style: italic; margin-bottom: 1.25rem; background: #f9fafb; padding: 1rem 1.25rem; border-radius: 0 0.5rem 0.5rem 0; }
.prose-custom a { color: #2563eb; text-decoration: none; font-weight: 500; }
.prose-custom a:hover { text-decoration: underline; color: #1d4ed8; }
.prose-custom strong, .prose-custom b { font-weight: 700; color: #111827; }
.prose-custom img { max-width: 100%; height: auto; border-radius: 0.5rem; margin-bottom: 1.25rem; }
.prose-custom .aligncenter { display: block; margin: 1.5rem auto; text-align: center; }
.prose-custom .alignleft { float: left; margin: 0 1.5rem 1rem 0; }
.prose-custom .alignright { float: right; margin: 0 0 1rem 1.5rem; }
.prose-custom .wp-caption { max-width: 100% !important; margin-bottom: 1.5rem; text-align: center; background: #f9fafb; padding: 0.75rem; border-radius: 0.5rem; border: 1px solid #f3f4f6; clear: both; box-sizing: border-box; }
.prose-custom .wp-caption img { margin: 0 auto; display: block; border-radius: 0.25rem; margin-bottom: 0.5rem; max-width: 100%; height: auto; }
.prose-custom .wp-caption-text { font-size: 0.875rem; color: #6b7280; padding-top: 0.25rem; margin-bottom: 0; font-style: italic; }
.prose-custom iframe, .prose-custom embed, .prose-custom video { max-width: 100%; margin-bottom: 1.25rem; }
.prose-custom table { width: 100%; border-collapse: collapse; margin-bottom: 1.5rem; }
.prose-custom table th, .prose-custom table td { border: 1px solid #e5e7eb; padding: 0.75rem; text-align: left; }
.prose-custom table th { background-color: #f9fafb; font-weight: 600; color: #111827; }