/*!
Theme Name: Kadence
Theme URI: https://www.kadencewp.com/kadence-theme/
Author: Kadence WP
Author URI: https://www.kadencewp.com/
Description: Kadence Theme is a lightweight yet full featured WordPress theme for creating beautiful fast loading and accessible websites, easier than ever. It features an easy to use drag and drop header and footer builder to build any type of header in minutes. It features a full library of gorgeous starter templates that are easy to modify with our intelligent global font and color controls. With extensive integration with the most popular 3rd party plugins, you can quickly build impressive ecommerce websites, course websites, business websites, and more.
Version: 1.4.2
License: GNU General Public License v3.0 (or later)
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: kadence
Requires at least: 6.3
Tested up to: 6.8.3
Tags: translation-ready, accessibility-ready, two-columns, right-sidebar, left-sidebar, footer-widgets, blog, custom-logo, custom-background, custom-menu, rtl-language-support, editor-style, threaded-comments, custom-colors, featured-images, wide-blocks, full-width-template, theme-options, e-commerce
Requires PHP: 7.4

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share
what you've learned with others.

Suy nghĩ trong 10sHTML<!-- Bắt đầu content cho trang WordPress - Dán vào editor (Code mode) -->

<!-- CSS inline để làm đẹp toàn trang (dán vào Custom CSS hoặc style.css nếu có) -->
<style>
/* High School GPA Calculator - Modern, Responsive Design */

.site-header {
    background: #ffffff;
    padding: 1.2rem 0;
    top: 0;
    z-index: 9999;
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
    border-bottom: 4px solid #3b82f6; /* Đường viền xanh dương nổi bật */
    transition: all 0.3s ease;
}

.site-header .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.site-header .site-logo {
    text-align: center;
}

.site-header .custom-logo-link {
    display: inline-block;
    transition: transform 0.4s ease;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 8px 25px rgba(59,130,246,0.2);
}

.site-header .custom-logo {
    max-height: 90px;
    width: auto;
    border-radius: 16px;
    transition: all 0.4s ease;
}

.site-header .custom-logo-link:hover {
    transform: translateY(-5px) scale(1.05);
}

.site-header .custom-logo-link:hover .custom-logo {
    box-shadow: 0 15px 40px rgba(59,130,246,0.4);
}

/* Khi scroll xuống một chút, header thu nhỏ nhẹ cho gọn */
.site-header.scrolled {
    padding: 0.8rem 0;
    box-shadow: 0 8px 30px rgba(0,0,0,0.12);
}

.site-header.scrolled .custom-logo {
    max-height: 70px;
}

/* FOOTER - Gradient đẹp, hiện đại */
.site-footer {
    background: linear-gradient(135deg, #1e40af 0%, #1e3a8a 100%);
    color: #ffffff;
    padding: 3rem 0 2rem;
    margin-top: 6rem;
    position: relative;
    overflow: hidden;
}

.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 20" preserveAspectRatio="none"><path d="M0,0 L100,10 L0,20 Z" fill="rgba(255,255,255,0.05)"/></svg>') repeat-x top;
    background-size: 100px 20px;
    pointer-events: none;
}

.site-footer .container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 2rem;
    text-align: center;
    position: relative;
    z-index: 1;
}

.site-footer p {
    margin: &nbsp;0;
    font-size: 1.1rem;
    font-weight: 500;
    opacity: 0.95;
    letter-spacing: 0.5px;
}

.site-footer a {
    color: #93c5fd;
    text-decoration: none;
    font-weight: 600;
}

.site-footer a:hover {
    color: #ffffff;
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 768px) {
    .site-header { padding: 1rem 0; }
    .site-header .custom-logo { max-height: 70px; }
    .site-header.scrolled .custom-logo { max-height: 60px; }
    .site-footer { padding: 2.5rem 0 1.5rem; }
    .site-footer p { font-size: 1rem; }
}

:root {
    --primary: #1d4ed8;     /* Blue-700 - Main color */
    --primary-light: #3b82f6; /* Blue-500 */
    --secondary: #eab308;   /* Yellow-500 - Accent */
    --success: #22c55e;     /* Green-500 */
    --danger: #ef4444;      /* Red-500 */
    --gray-50: #f9fafb;
    --gray-100: #f3f4f6;
    --gray-200: #e5e7eb;
    --gray-400: #9ca3af;
    --gray-600: #4b5563;
    --gray-800: #1f2937;
    --white: #ffffff;
    --radius: 16px;
    --shadow-sm: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-md: 0 10px 15px -3px rgba(0,0,0,0.1);
    --transition: all 0.3s ease-in-out;
}
h1 {
    text-align: center;
    align-items: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    background: linear-gradient(90deg, #6600a5, #1c3db7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
}
.entry-content {
    /*max-width: 1200px;
margin: 0 auto !important;
padding: 3rem 1.5rem;
background: var(--white);
border-radius: var(--radius);
box-shadow: var(--shadow-md);
font-size: 1.1rem;
line-height: 1.8;
color: var(--gray-600);*/
}

.entry-content h2 {
    color: var(--primary);
    margin: 1rem 0 0.5rem;
    border-bottom: 3px solid var(--primary);
    padding-bottom: 0.5rem;
}

.entry-content h3 {
    font-size: 1.8rem;
    color: var(--primary-dark);
    margin: 2rem 0 1rem;
}

.entry-content ul {
    list-style-type: disc;
    padding-left: 1.5rem;
    margin: 1.5rem 0;
}

.entry-content li {
    margin-bottom: 1rem;
}

/* Calculator Styles - Beautiful Form */
.gpa-calculator {
    background: var(--gray-50);
    border-radius: var(--radius);
    padding: 2.5rem;
    box-shadow: var(--shadow-sm);
    margin: 3rem 0;
}

.gpa-calculator form {
    display: grid;
    gap: 1.5rem;
}

.input-group {
    display: flex;
    gap: 1rem;
    align-items: center;
}
.bigtitle { font-size: 1.7rem; }
.input-group label {
    font-weight: 600;
    color: var(--gray-800);
    flex: 0 0 120px;
}

.input-group input, .input-group select {
    flex: 1;
    padding: 1rem;
    border: 2px solid var(--gray-200);
    border-radius: 12px;
    font-size: 1rem;
    transition: var(--transition);
}

.input-group input:focus, .input-group select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 4px rgba(59,130,246,0.1);
}

.btn-add-course, .btn-calculate {
    background: var(--primary);
    color: var(--white);
    padding: 1.2rem 2rem;
    border-radius: 50px;
    font-weight: 700;
    border: none;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: var(--shadow-sm);
}

.btn-add-course:hover, .btn-calculate:hover {
    background: var(--primary-light);
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
}

#course-list {
    margin: 2rem 0;
    display: grid;
    gap: 1rem;
}

.course-row {
    background: var(--white);
    padding: 1.5rem;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    display: flex;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}

.course-row .btn-remove {
    background: var(--danger);
    color: var(--white);
    padding: 0.8rem 1.5rem;
    border-radius: 50px;
    cursor: pointer;
}

.course-row .btn-remove:hover {
    background: #dc2626;
}

#result {
    margin-top: 3rem;
    padding: 2.5rem;
    background: linear-gradient(135deg, var(--success), #34d399);
    color: var(--white);
    border-radius: var(--radius);
    text-align: center;
    box-shadow: var(--shadow-md);
    font-size: 1.2rem;
}

#result h3 {
    font-size: 2rem;
    margin-bottom: 1rem;
    color: var(--white);
}

/* Responsive */
@media (max-width: 768px) {
	.p-6 { padding: 0.5rem; }
    .ctmobile { padding: 5px !important }
    .gpa-calculator { padding: 2rem 1.5rem; }
    .input-group { flex-direction: column; align-items: flex-start; }
    .input-group label { flex: none; margin-bottom: 0.5rem; }
    .course-row { flex-direction: column; align-items: flex-start; gap: 1rem; }
}