/*
Theme Name: Astra Child
Theme URI: https://tutor.hethongsms.vn
Description: Astra Child Theme - Piano Academy tùy chỉnh
Author: Phạm Huy Hoàng
Author URI: https://hethongsms.vn
Template: astra
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: astra-child
*/

/* =========================================================
   PIANO ACADEMY — Custom CSS
   (Tất cả tùy chỉnh giao diện đặt tại đây để tránh mất khi
    nâng cấp Astra parent theme)
   ========================================================= */

/* ---------- Màu sắc chủ đạo ---------- */
:root {
    --piano-primary:   #5b21b6;   /* tím đậm */
    --piano-secondary: #7c3aed;   /* tím sáng */
    --piano-dark:      #1e1b4b;   /* xanh đậm */
    --piano-accent:    #f59e0b;   /* vàng nhấn */
    --piano-light:     #f5f3ff;   /* nền tím nhạt */
    --piano-text:      #1f2937;
    --piano-muted:     #6b7280;
    --piano-radius:    10px;
}

/* ---------- Typography ---------- */
body,
.ast-single-post .entry-content,
.entry-content {
    font-family: 'Nunito', sans-serif;
}

h1, h2, h3, h4, h5, h6,
.ast-page-title,
.site-title {
    font-family: 'Nunito', sans-serif;
    font-weight: 700;
    color: var(--piano-dark);
}

/* ---------- Header ---------- */
.site-header,
#masthead,
.ast-masthead-custom-menu-items {
    border-bottom: 3px solid var(--piano-primary) !important;
}

.ast-site-identity .site-title a {
    color: var(--piano-primary) !important;
    font-weight: 800;
    letter-spacing: -0.5px;
}

/* Logo / Brand text */
.site-title {
    font-size: 1.5rem !important;
}

/* ---------- Primary Navigation ---------- */
.main-navigation .menu > li > a:hover,
.ast-primary-header-bar .main-header-bar-navigation .menu > li > a:hover {
    color: var(--piano-primary) !important;
}

.main-navigation .current-menu-item > a,
.main-navigation .current-menu-ancestor > a {
    color: var(--piano-primary) !important;
    border-bottom: 2px solid var(--piano-primary);
}

/* ---------- Buttons ---------- */
.ast-button,
.button,
button,
input[type="submit"],
.wp-block-button__link,
.tutor-btn-primary {
    background: var(--piano-primary) !important;
    color: #fff !important;
    border-radius: var(--piano-radius) !important;
    border: none !important;
    font-family: 'Nunito', sans-serif !important;
    font-weight: 700 !important;
    transition: background .2s ease, transform .1s ease !important;
}

.ast-button:hover,
.button:hover,
button:hover,
input[type="submit"]:hover,
.wp-block-button__link:hover,
.tutor-btn-primary:hover {
    background: var(--piano-secondary) !important;
    transform: translateY(-1px) !important;
}

/* ---------- Links ---------- */
a {
    color: var(--piano-primary);
}
a:hover {
    color: var(--piano-secondary);
}

/* ---------- Tutor LMS — Course Cards ---------- */
.tutor-course-list .tutor-course,
.tutor-courses-archive .tutor-course,
.tutor-card {
    border-radius: var(--piano-radius) !important;
    overflow: hidden;
    transition: box-shadow .25s ease, transform .25s ease !important;
    border: 1px solid #e5e7eb !important;
}

.tutor-course-list .tutor-course:hover,
.tutor-courses-archive .tutor-course:hover,
.tutor-card:hover {
    box-shadow: 0 8px 32px rgba(91,33,182,.15) !important;
    transform: translateY(-4px) !important;
}

/* Course thumbnail overlay */
.tutor-course-thumbnail,
.tutor-card-thumbnail {
    position: relative;
    overflow: hidden;
}

.tutor-course-thumbnail img,
.tutor-card-thumbnail img {
    transition: transform .4s ease !important;
}

.tutor-course-thumbnail:hover img,
.tutor-card-thumbnail:hover img {
    transform: scale(1.05) !important;
}

/* Course title */
.tutor-course-name a,
.tutor-card-name a {
    color: var(--piano-dark) !important;
    font-weight: 700 !important;
}

.tutor-course-name a:hover,
.tutor-card-name a:hover {
    color: var(--piano-primary) !important;
}

/* Course price */
.tutor-course-price .tutor-price,
.tutor-card-price,
.tutor-price {
    color: var(--piano-primary) !important;
    font-weight: 800 !important;
    font-size: 1.1rem !important;
}

/* Free badge */
.tutor-badge-free,
.tutor-course-badge {
    background: var(--piano-light) !important;
    color: var(--piano-primary) !important;
    border-radius: 6px !important;
    font-weight: 700 !important;
}

/* Enroll button on card */
.tutor-course-loop-btn,
.tutor-enroll-btn {
    background: var(--piano-primary) !important;
    border-radius: var(--piano-radius) !important;
    font-weight: 700 !important;
    color: #fff !important;
}

.tutor-course-loop-btn:hover,
.tutor-enroll-btn:hover {
    background: var(--piano-secondary) !important;
}

/* ---------- Tutor LMS — Single Course ---------- */
.tutor-single-course-header {
    background: linear-gradient(135deg, var(--piano-dark) 0%, var(--piano-primary) 100%) !important;
    color: #fff !important;
    padding: 3rem 2rem !important;
    border-radius: 0 0 20px 20px;
}

.tutor-single-course-header h1,
.tutor-single-course-header .tutor-course-title {
    color: #fff !important;
}

.tutor-enroll-box,
.tutor-course-enroll-box {
    border: 2px solid var(--piano-primary) !important;
    border-radius: var(--piano-radius) !important;
    overflow: hidden;
}

/* ---------- Tutor LMS — Checkout / Payment ---------- */
.tutor-checkout-container,
.tutor-payment-page {
    max-width: 600px;
    margin: 2rem auto;
}

.tck-payment-box {
    background: var(--piano-light) !important;
    border: 1px solid #ddd6fe !important;
    border-radius: var(--piano-radius) !important;
    padding: 1.5rem !important;
    margin-top: 1rem !important;
}

/* ---------- Sidebar Widgets ---------- */
.widget-title {
    color: var(--piano-dark) !important;
    border-left: 4px solid var(--piano-primary);
    padding-left: 10px;
}

/* ---------- Footer ---------- */
.site-footer,
#colophon {
    background: var(--piano-dark) !important;
    color: #c4b5fd !important;
    border-top: 3px solid var(--piano-primary) !important;
}

.site-footer a,
#colophon a {
    color: #c4b5fd !important;
}

.site-footer a:hover,
#colophon a:hover {
    color: #fff !important;
}

/* ---------- Hero / Banner (nếu dùng page builder) ---------- */
.piano-hero {
    background: linear-gradient(135deg, var(--piano-dark) 0%, var(--piano-primary) 60%, var(--piano-secondary) 100%);
    color: #fff;
    padding: 5rem 2rem;
    text-align: center;
    border-radius: 0 0 30px 30px;
}

.piano-hero h1 {
    color: #fff !important;
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.piano-hero p {
    font-size: 1.2rem;
    opacity: .9;
    max-width: 600px;
    margin: 0 auto 2rem;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px) {
    .piano-hero h1 { font-size: 1.8rem; }
    .piano-hero p  { font-size: 1rem; }
}