/** * Design system — my-villa (palette, typography, header, hero, forms, cards, mobile drawer). * Load after common.css + site-footer.css. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Be+Vietnam+Pro:wght@400;500;600;700&display=swap"); :root { --cokhi-primary: #2563eb; --cokhi-primary-hover: #1d4ed8; --cokhi-secondary: #0ea5e9; --cokhi-accent: #14b8a6; --cokhi-bg-muted: #f8fafc; --cokhi-text-dark: #111827; --cokhi-text-body: #4b5563; --cokhi-text-gray: #6b7280; --cokhi-border: #e5e7eb; --cokhi-success: #10b981; --cokhi-warning: #f59e0b; --cokhi-danger: #ef4444; --cokhi-radius-lg: 16px; --cokhi-radius-input: 14px; --cokhi-shadow-card: 0 4px 20px rgba(15, 23, 42, 0.06); --cokhi-shadow-card-hover: 0 14px 32px rgba(15, 23, 42, 0.12); --cokhi-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.22); } body.my-admin-root { font-family: "Inter", "Be Vietnam Pro", system-ui, -apple-system, "Segoe UI", sans-serif !important; background: aliceblue; color: var(--cokhi-text-body) !important; line-height: 1.6; -webkit-font-smoothing: antialiased; } body.my-admin-root h1, body.my-admin-root h2, body.my-admin-root h3, body.my-admin-root h4, body.my-admin-root .request-hero-title, body.my-admin-root .subs-req-page-title-text, body.my-admin-root .section-head h2 { color: var(--cokhi-text-dark) !important; } body.my-admin-root .main-header { position: sticky; top: 0; z-index: 1000; background: aliceblue; border-bottom: 1px solid var(--cokhi-border); box-shadow: none !important; transition: box-shadow 0.28s ease, border-color 0.28s ease; } body.my-admin-root .main-header.is-scrolled { box-shadow: 0 8px 28px rgba(15, 23, 42, 0.09) !important; border-bottom-color: rgba(229, 231, 235, 0.75); } body.my-admin-root .main-header .logo img { filter: drop-shadow(0 1px 2px rgba(15, 23, 42, 0.08)); } body.my-admin-root .nav-link { color: #374151 !important; transition: color 0.2s ease, background 0.2s ease; } body.my-admin-root .nav-link:hover, body.my-admin-root .nav-link:focus-visible { color: var(--cokhi-primary) !important; background: rgba(37, 99, 235, 0.08) !important; } body.my-admin-root .nav-link.active { color: var(--cokhi-primary) !important; background: rgba(37, 99, 235, 0.08) !important; padding: 12px !important; } /* Bootstrap CDN tải sau trong — tăng specificity để giữ padding */ html body.my-admin-root header.main-header .nav-menu a.nav-link.active, html body.my-admin-root aside#mobileMenu.mobile-menu a.nav-link.active { padding: 12px !important; } body.my-admin-root .btn.btn-primary, body.my-admin-root a.btn.btn-primary { background: var(--cokhi-primary) !important; color: #fff !important; border-radius: 12px !important; transition: background 0.2s ease, box-shadow 0.2s ease, transform 0.18s ease !important; } body.my-admin-root .btn.btn-primary:hover, body.my-admin-root a.btn.btn-primary:hover { background: var(--cokhi-primary-hover) !important; } body.my-admin-root .btn.btn-outline, body.my-admin-root a.btn.btn-outline { background: #fff !important; color: var(--cokhi-text-dark) !important; border: 1px solid var(--cokhi-primary) !important; border-radius: 12px !important; transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease !important; } body.my-admin-root .btn.btn-outline:hover, body.my-admin-root a.btn.btn-outline:hover { background: rgba(37, 99, 235, 0.08) !important; color: var(--cokhi-primary-hover) !important; border-color: var(--cokhi-primary-hover) !important; } body.my-admin-root .btn.btn-danger, body.my-admin-root a.btn.btn-danger { background: var(--cokhi-danger) !important; color: #fff !important; border: 1px solid #dc2626 !important; border-radius: 12px !important; } body.my-admin-root .btn.btn-danger:hover, body.my-admin-root a.btn.btn-danger:hover { background: #dc2626 !important; } body.my-admin-root .btn.btn-success, body.my-admin-root a.btn.btn-success { background: var(--cokhi-success) !important; color: #fff !important; border: 1px solid #059669 !important; border-radius: 12px !important; } body.my-admin-root .btn.btn-success:hover, body.my-admin-root a.btn.btn-success:hover { background: #059669 !important; } body.my-admin-root .btn.btn-warning, body.my-admin-root a.btn.btn-warning { background: var(--cokhi-warning) !important; color: #111827 !important; border: 1px solid #d97706 !important; border-radius: 12px !important; } /* Xen kẽ nền section; gradient hero/banner ghi đè (đặt sau). */ body.my-admin-root > section:nth-of-type(odd) { background-color: #ffffff !important; } body.my-admin-root > section:nth-of-type(even) { background-color: var(--cokhi-bg-muted) !important; } body.my-admin-root > section.hero, body.my-admin-root > section.home-head-banner, body.my-admin-root > section.subscriber-requests-hero, body.my-admin-root > section.subs-portal-title-hero, body.my-admin-root > section.section.subscriber-requests-hero, body.my-admin-root > section.section.subs-portal-title-hero { background: linear-gradient(165deg, #ffffff 0%, #ecfdf5 42%, #f0fdfa 72%, #eff6ff 100%) !important; } body.my-admin-root section.hero .request-hero-title, body.my-admin-root .home-head-banner h1 { color: var(--cokhi-text-dark) !important; } body.my-admin-root section.hero .request-hero-title-text, body.my-admin-root .home-head-banner p, body.my-admin-root .home-head-banner .home-head-banner-text p { color: var(--cokhi-text-gray) !important; } /* Search / filter controls */ body.my-admin-root .input, body.my-admin-root .select, body.my-admin-root textarea { border-radius: var(--cokhi-radius-input) !important; border: 1px solid var(--cokhi-border) !important; box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04); transition: border-color 0.2s ease, box-shadow 0.2s ease; } body.my-admin-root .input:focus, body.my-admin-root .select:focus, body.my-admin-root textarea:focus { outline: none !important; border-color: var(--cokhi-primary) !important; box-shadow: var(--cokhi-focus-ring) !important; } body.my-admin-root .input::placeholder, body.my-admin-root textarea::placeholder { color: #9ca3af !important; opacity: 1; } body.my-admin-root .hero-card, body.my-admin-root .home-head-banner-card { border-radius: var(--cokhi-radius-lg) !important; border: 1px solid var(--cokhi-border) !important; box-shadow: var(--cokhi-shadow-card) !important; } /* Cards */ body.my-admin-root .card { border-radius: var(--cokhi-radius-lg) !important; border: 1px solid var(--cokhi-border) !important; box-shadow: var(--cokhi-shadow-card) !important; transition: transform 0.22s ease, box-shadow 0.22s ease; } body.my-admin-root .card:hover { transform: translateY(-3px); box-shadow: var(--cokhi-shadow-card-hover) !important; } body.my-admin-root .card > img:first-child, body.my-admin-root .card a > img:first-child { border-radius: 12px 12px 0 0; } body.my-admin-root .meta { color: var(--cokhi-text-gray) !important; } /* Mobile drawer + overlay */ body.my-admin-root .mobile-menu { width: min(300px, 92vw); left: -320px; padding: 20px 18px; border-radius: 0 18px 18px 0; box-shadow: 8px 0 40px rgba(15, 23, 42, 0.18); background: #fff; border-right: 1px solid var(--cokhi-border); transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1); } body.my-admin-root .mobile-menu.open { left: 0; } body.my-admin-root .overlay.show { backdrop-filter: blur(5px); -webkit-backdrop-filter: blur(5px); background: rgba(15, 23, 42, 0.42); } body.my-admin-root .menu-toggle { border-color: var(--cokhi-border) !important; border-radius: 12px !important; transition: border-color 0.2s ease, background 0.2s ease; } body.my-admin-root .menu-toggle:hover { border-color: var(--cokhi-primary) !important; background: rgba(37, 99, 235, 0.06) !important; } @media (max-width: 991.98px) { body.my-admin-root .header-inner { min-height: 56px; } body.my-admin-root .main-header .logo img { height: 44px !important; } body.my-admin-root .main-header .container { padding-left: 16px !important; padding-right: 16px !important; } }