/*
Theme Name: Art Laser Core
Description: Giao diện thuần HTML/CSS siêu nhẹ chuẩn Apple dành riêng cho Art Laser.
Author: Giám Đốc Kỹ Thuật
Version: 1.0
*/

/* =========================================
   1. BIẾN TOÀN CỤC (HỆ THỐNG MÀU & FONT CHUẨN APPLE)
   ========================================= */
:root {
    --al-bg: #F5F5F7;           /* Nền xám nhạt sang trọng */
    --al-text-main: #1D1D1F;    /* Đen xám tiêu đề */
    --al-text-sub: #86868B;     /* Xám phụ */
    --al-accent: #C5A47E;       /* Vàng đồng thương hiệu */
    --al-font-main: 'Inter', sans-serif;
}

/* =========================================
   2. CSS RESET (DỌN SẠCH MÃ RÁC TRÌNH DUYỆT)
   ========================================= */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: var(--al-font-main);
    color: var(--al-text-main);
    background-color: var(--al-bg);
    line-height: 1.6;
    -webkit-font-smoothing: antialiased; /* Chìa khóa để chữ sắc nét tuyệt đối */
}

/* =========================================
   3. TYPOGRAPHY BÀI VIẾT (TỐI ƯU ĐỌC SEO)
   ========================================= */
.entry-content {
    max-width: 800px; /* Độ rộng hoàn hảo không mỏi mắt */
    margin: 0 auto;
    padding: 20px;
}
.entry-content h2, .entry-content h3 {
    margin-top: 2.5em;
    margin-bottom: 1em;
    color: var(--al-text-main);
}
/* =========================================
   4. LAYOUT CƠ BẢN & HEADER / FOOTER
   ========================================= */
.al-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 5%;
}

/* Header mượt mà bám đỉnh (Sticky) */
.al-site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    background: rgba(245, 245, 247, 0.8); /* Xám nhạt trong suốt chuẩn Apple */
    backdrop-filter: blur(20px); /* Hiệu ứng kính mờ (Glassmorphism) */
    -webkit-backdrop-filter: blur(20px);
    z-index: 999;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}

.al-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 80px;
}

.al-logo a {
    font-size: 1.5rem; font-weight: 800; color: var(--al-text-main); text-decoration: none; letter-spacing: -1px;
}

.al-main-nav ul {
    list-style: none; display: flex; gap: 30px;
}

.al-main-nav a {
    text-decoration: none; color: var(--al-text-main); font-weight: 500; font-size: 0.95rem; transition: color 0.3s;
}

.al-main-nav a:hover { color: var(--al-accent); }

.al-btn-outline {
    border: 1px solid var(--al-text-main); color: var(--al-text-main); padding: 8px 20px; border-radius: 20px; text-decoration: none; font-weight: 600; font-size: 0.9rem; transition: all 0.3s;
}
.al-btn-outline:hover { background: var(--al-text-main); color: #fff; }

.al-site-footer {
    background: var(--al-text-main); color: #fff; text-align: center; padding: 40px 0; margin-top: 80px;
}