/*
Theme Name: Moban 8-10-9
Theme URI: https://example.com/moban-8-10-9
Author: Moban Team
Author URI: https://example.com
Description: Giao diện Bento v2 với thanh điều hướng icon dọc bên trái, lưới thẻ Bento hiện đại, tông màu lavender và xám đá phiến, hiệu ứng fade-in khi cuộn trang.
Version: 1.0.0
Requires at least: 5.0
Tested up to: 6.5
Requires PHP: 7.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: moban-8-10-9
Tags: bento, grid-layout, entertainment
*/

/* ===== Base reset & tokens ===== */
:root {
    --lavender: #7C6BAE;
    --lavender-dark: #5E4F90;
    --lavender-light: #C9BFE8;
    --slate: #4A5568;
    --slate-deep: #353D4C;
    --bg-soft: #F5F3FA;
    --card-bg: #FFFFFF;
    --grad-main: linear-gradient(135deg, #7C6BAE 0%, #9F8FD4 55%, #C9BFE8 100%);
    --grad-accent: linear-gradient(135deg, #6A5AA0 0%, #7C6BAE 60%, #8E7CC3 100%);
    --radius-card: 14px;
    --rail-w: 64px;
    --shadow-card: 0 6px 24px rgba(124, 107, 174, 0.12);
    --shadow-hover: 0 14px 34px rgba(76, 61, 122, 0.22);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body { overflow-x: hidden; }

html { scroll-behavior: smooth; }

body {
    font-family: 'Be Vietnam Pro', 'Roboto', sans-serif;
    background: var(--bg-soft);
    color: var(--slate);
    font-size: 15px;
    line-height: 1.65;
    min-height: 100vh;
}

img { max-width: 100%; height: auto; display: block; }

a { text-decoration: none; color: inherit; transition: color .2s ease, opacity .2s ease; }

ul, ol { list-style: none; }

h1, h2, h3, h4, h5 {
    font-family: 'Bricolage Grotesque', 'Be Vietnam Pro', sans-serif;
    color: var(--slate-deep);
    line-height: 1.25;
    font-weight: 700;
}

.container { max-width: 1240px; margin: 0 auto; padding: 0 20px; min-width: 0; }

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 22px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    border: 0;
    transition: transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.btn:hover { transform: translateY(-2px); }
.btn-primary { background: var(--grad-accent); color: #fff; box-shadow: 0 6px 16px rgba(124,107,174,.35); }
.btn-primary:hover { box-shadow: 0 10px 22px rgba(124,107,174,.5); }
.btn-ghost { background: rgba(255,255,255,.16); color: #fff; border: 1px solid rgba(255,255,255,.5); backdrop-filter: blur(4px); }
.btn-outline { background: transparent; color: var(--lavender); border: 2px solid var(--lavender-light); }
.btn-outline:hover { background: var(--lavender); color: #fff; }
.btn-sm { padding: 8px 16px; font-size: 13px; }

/* WordPress core */
.wp-caption { max-width: 100%; }
.screen-reader-text {
    border: 0; clip: rect(1px,1px,1px,1px); clip-path: inset(50%);
    height: 1px; width: 1px; overflow: hidden; position: absolute;
    word-wrap: normal;
}
.sticky { display: block; }