/** * 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-icon-size-xs: 0.75rem; --cokhi-icon-size-sm: 1rem; --cokhi-icon-size-md: 1.125rem; --cokhi-icon-size-lg: 1.5rem; /* Brand */ --cokhi-primary: #1d4ed8; --cokhi-primary-hover: #1e40af; --cokhi-primary-soft: #dbeafe; --cokhi-secondary: #0ea5e9; --cokhi-accent: #0d9488; --cokhi-accent-soft: #ccfbf1; /* Surface */ --cokhi-surface-page: #f1f5f9; --cokhi-surface-elevated: #ffffff; --cokhi-surface-muted: #f8fafc; --cokhi-surface-header: rgba(255, 255, 255, 0.9); --cokhi-bg-muted: var(--cokhi-surface-muted); /* Text */ --cokhi-text-dark: #0f172a; --cokhi-text-body: #475569; --cokhi-text-gray: #64748b; --cokhi-text-muted: #64748b; --cokhi-text-inverse: #ffffff; /* Border & elevation */ --cokhi-border: #e2e8f0; --cokhi-border-strong: #cbd5e1; --cokhi-success: #10b981; --cokhi-warning: #f59e0b; --cokhi-danger: #ef4444; --cokhi-radius-lg: 14px; --cokhi-radius-input: 10px; --cokhi-radius-pill: 999px; --cokhi-shadow-card: 0 1px 3px rgba(15, 23, 42, 0.06), 0 8px 24px rgba(15, 23, 42, 0.06); --cokhi-shadow-card-hover: 0 12px 32px rgba(15, 23, 42, 0.1); --cokhi-shadow-header: 0 4px 24px rgba(15, 23, 42, 0.06); --cokhi-focus-ring: 0 0 0 3px rgba(29, 78, 216, 0.22); /* Typography */ --cokhi-font-sans: "Be Vietnam Pro", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif; --cokhi-text-base: 15px; --cokhi-leading: 1.6; } /* Ẩn wp-admin bar trên portal my-villa (dự phòng khi WP vẫn inject) */ body.my-admin-root #wpadminbar, body.my-admin-root #wpadminbar * { display: none !important; visibility: hidden !important; } html.wp-toolbar body.my-admin-root, body.my-admin-root.admin-bar { margin-top: 0 !important; padding-top: 0 !important; } body.my-admin-root.admin-bar .main-header { top: 0 !important; } body.my-admin-root { font-family: var(--cokhi-font-sans) !important; font-size: var(--cokhi-text-base); background: var(--cokhi-surface-page); color: var(--cokhi-text-body) !important; line-height: var(--cokhi-leading); -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: var(--cokhi-surface-header); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--cokhi-border); box-shadow: none !important; transition: box-shadow 0.28s ease, border-color 0.28s ease, background 0.28s ease; } body.my-admin-root .main-header.is-scrolled { box-shadow: var(--cokhi-shadow-header) !important; border-bottom-color: var(--cokhi-border); background: rgba(255, 255, 255, 0.96); } 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: var(--cokhi-text-body) !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: var(--cokhi-primary-soft) !important; } body.my-admin-root .nav-link.active { color: var(--cokhi-primary) !important; background: var(--cokhi-primary-soft) !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: var(--cokhi-primary-soft) !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: var(--cokhi-surface-elevated) !important; } body.my-admin-root > section:nth-of-type(even) { background-color: var(--cokhi-surface-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, var(--cokhi-surface-elevated) 0%, var(--cokhi-primary-soft) 38%, var(--cokhi-accent-soft) 72%, var(--cokhi-surface-muted) 100% ) !important; } body.my-admin-root section.hero .request-hero-title, body.my-admin-root .home-head-banner h1, body.my-admin-root .home-head-banner .home-head-banner-text h1 { color: var(--cokhi-text-dark) !important; font-weight: 700 !important; text-transform: none !important; letter-spacing: -0.02em; } 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-body) !important; font-weight: 500 !important; text-transform: none !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 { background: var(--cokhi-surface-elevated) !important; border-radius: var(--cokhi-radius-lg) !important; border: 1px solid var(--cokhi-border) !important; box-shadow: var(--cokhi-shadow-card) !important; } body.my-admin-root .home-equal-card { background: var(--cokhi-surface-elevated) !important; border: 1px solid var(--cokhi-border) !important; border-radius: var(--cokhi-radius-lg) !important; box-shadow: var(--cokhi-shadow-card) !important; } /* Cards */ body.my-admin-root .card { background: var(--cokhi-surface-elevated) !important; 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 { align-items: center; justify-content: center; padding: 0 !important; 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.cokhi-meta-inline { display: none !important; align-items: center; justify-content: center; gap: 0; } @media (max-width: 767px) { body.my-admin-root .menu-toggle.cokhi-meta-inline { display: inline-flex !important; } } body.my-admin-root .menu-toggle:hover { border-color: var(--cokhi-primary) !important; background: var(--cokhi-primary-soft) !important; } /* Slider nút prev/next (trang chủ) */ body.my-admin-root .hot-villas-nav, body.my-admin-root .danang-top-villas-nav { background: var(--cokhi-primary) !important; color: var(--cokhi-text-inverse) !important; box-shadow: var(--cokhi-shadow-card); } @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; } } /* Bootstrap Icons — filled + màu semantic */ body.my-admin-root .cokhi-icon { display: inline-flex; align-items: center; justify-content: center; line-height: 1; flex-shrink: 0; vertical-align: -0.125em; font-style: normal; color: var(--cokhi-icon-tone-default, #475569); } body.my-admin-root .cokhi-icon--tone-location { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-map { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-calendar, body.my-admin-root .cokhi-icon--tone-dates { color: #7c3aed; } body.my-admin-root .cokhi-icon--tone-person, body.my-admin-root .cokhi-icon--tone-owner { color: #0891b2; } body.my-admin-root .cokhi-icon--tone-guests { color: #0d9488; } body.my-admin-root .cokhi-icon--tone-child { color: #db2777; } body.my-admin-root .cokhi-icon--tone-note, body.my-admin-root .cokhi-icon--tone-description { color: #b45309; } body.my-admin-root .cokhi-icon--tone-comment, body.my-admin-root .cokhi-icon--tone-chat { color: #16a34a; } body.my-admin-root .cokhi-icon--tone-zalo { color: #0068ff; } body.my-admin-root .cokhi-icon--tone-star, body.my-admin-root .cokhi-icon--tone-rating, body.my-admin-root .cokhi-icon--tone-review, body.my-admin-root .cokhi-icon--tone-award { color: #ca8a04; } body.my-admin-root .cokhi-icon--tone-eye, body.my-admin-root .cokhi-icon--tone-views, body.my-admin-root .cokhi-icon--tone-detail, body.my-admin-root .cokhi-icon--tone-view { color: #0284c7; } body.my-admin-root .cokhi-icon--tone-heart { color: #ef4444; } body.my-admin-root .cokhi-icon--tone-heart-outline { color: #94a3b8; } body.my-admin-root .cokhi-icon--tone-house, body.my-admin-root .cokhi-icon--tone-villa, body.my-admin-root .cokhi-icon--tone-property, body.my-admin-root .cokhi-icon--tone-similar { color: #4f46e5; } body.my-admin-root .cokhi-icon--tone-buildings { color: #4338ca; } body.my-admin-root .cokhi-icon--tone-bullseye, body.my-admin-root .cokhi-icon--tone-points { color: #dc2626; } body.my-admin-root .cokhi-icon--tone-fire { color: #ea580c; } body.my-admin-root .cokhi-icon--tone-price { color: #ea580c; } body.my-admin-root .cokhi-icon--tone-bedroom { color: #6366f1; } body.my-admin-root .cokhi-icon--tone-search { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-plus, body.my-admin-root .cokhi-icon--tone-create { color: #16a34a; } body.my-admin-root .cokhi-icon--tone-send, body.my-admin-root .cokhi-icon--tone-envelope, body.my-admin-root .cokhi-icon--tone-email { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-clipboard { color: #4f46e5; } body.my-admin-root .cokhi-icon--tone-grid { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-login { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-logout { color: #64748b; } body.my-admin-root .cokhi-icon--tone-register { color: #16a34a; } body.my-admin-root .cokhi-icon--tone-blog { color: #475569; } body.my-admin-root .cokhi-icon--tone-edit { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-delete { color: #dc2626; } body.my-admin-root .cokhi-icon--tone-hide, body.my-admin-root .cokhi-icon--tone-ban { color: #64748b; } body.my-admin-root .cokhi-icon--tone-show, body.my-admin-root .cokhi-icon--tone-check { color: #16a34a; } body.my-admin-root .cokhi-icon--tone-call { color: #16a34a; } body.my-admin-root .cokhi-icon--tone-messenger { color: #0084ff; } body.my-admin-root .cokhi-icon--tone-bathroom { color: #0284c7; } body.my-admin-root .cokhi-icon--tone-area { color: #64748b; } body.my-admin-root .cokhi-icon--tone-wifi { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-pool { color: #0ea5e9; } body.my-admin-root .cokhi-icon--tone-parking { color: #475569; } body.my-admin-root .cokhi-icon--tone-smoking { color: #94a3b8; } body.my-admin-root .cokhi-icon--tone-gallery { color: #7c3aed; } body.my-admin-root .cokhi-icon--tone-compass { color: #2563eb; } body.my-admin-root .cokhi-icon--tone-chevron-left, body.my-admin-root .cokhi-icon--tone-chevron-right, body.my-admin-root .cokhi-icon--tone-arrow-left { color: #64748b; } body.my-admin-root .cokhi-icon--tone-star-empty { color: #cbd5e1; } body.my-admin-root .cokhi-icon--tone-lock { color: #b45309; } body.my-admin-root .cokhi-icon--tone-close { color: #64748b; } body.my-admin-root .cokhi-icon--tone-facebook { color: #1877f2; } body.my-admin-root .cokhi-icon--tone-youtube { color: #ff0000; } /* Nút thao tác có nền màu — icon theo màu chữ nút */ body.my-admin-root .admin-req-action-btn .cokhi-icon, body.my-admin-root .admin-cmt-action-btn .cokhi-icon, body.my-admin-root .request-action-btn .cokhi-icon { color: inherit !important; } body.my-admin-root .btn-primary .cokhi-icon, body.my-admin-root a.btn-primary .cokhi-icon { color: #fff !important; } body.my-admin-root .nav-link .cokhi-icon { color: #64748b; } body.my-admin-root .nav-link:hover .cokhi-icon, body.my-admin-root .nav-link.active .cokhi-icon { color: var(--cokhi-primary, #2563eb); } body.my-admin-root .cokhi-icon--xs { font-size: var(--cokhi-icon-size-xs); width: var(--cokhi-icon-size-xs); height: var(--cokhi-icon-size-xs); } body.my-admin-root .cokhi-icon--sm { font-size: var(--cokhi-icon-size-sm); width: var(--cokhi-icon-size-sm); height: var(--cokhi-icon-size-sm); } body.my-admin-root .cokhi-meta-inline { display: inline-flex; align-items: center; gap: 0.25rem; } body.my-admin-root .cokhi-villa-stat-tag { display: inline-flex; align-items: center; gap: 0.2rem; font-size: 11px; } body.my-admin-root .cokhi-page-heading .cokhi-icon, body.my-admin-root .req-detail-lbl-ico .cokhi-icon, body.my-admin-root .request-card-note-ico .cokhi-icon { flex-shrink: 0; } body.my-admin-root .cokhi-icon--md { font-size: var(--cokhi-icon-size-md); width: var(--cokhi-icon-size-md); height: var(--cokhi-icon-size-md); } body.my-admin-root .cokhi-icon--lg { font-size: var(--cokhi-icon-size-lg); width: var(--cokhi-icon-size-lg); height: var(--cokhi-icon-size-lg); } body.my-admin-root .nav-link .cokhi-icon, body.my-admin-root .user-menu-dropdown a .cokhi-icon, body.my-admin-root .mobile-drawer .nav-link .cokhi-icon { margin-right: 0.35rem; } body.my-admin-root .auth-btn-icon .cokhi-icon, body.my-admin-root .btn-ico .cokhi-icon, body.my-admin-root .admin-dash-card-icon .cokhi-icon, body.my-admin-root .subs-req-page-title-ico .cokhi-icon, body.my-admin-root .contri-my-villas-hero-emoji .cokhi-icon, body.my-admin-root .request-hero-title-ico .cokhi-icon, body.my-admin-root .villa-hero-title-ico .cokhi-icon, body.my-admin-root .admin-req-search-title-icon .cokhi-icon { margin: 0; font-size: var(--cokhi-icon-size-md) !important; width: var(--cokhi-icon-size-md) !important; height: var(--cokhi-icon-size-md) !important; } body.my-admin-root .cokhi-footer-contact__icon .cokhi-icon, body.my-admin-root .cokhi-footer-social__link .cokhi-icon { margin: 0; } body.my-admin-root .admin-req-action-btn .cokhi-icon, body.my-admin-root .admin-cmt-action-btn .cokhi-icon, body.my-admin-root .request-action-btn .cokhi-icon { font-size: var(--cokhi-icon-size-md); width: var(--cokhi-icon-size-md); height: var(--cokhi-icon-size-md); } body.my-admin-root .admin-req-action-btn svg { width: var(--cokhi-icon-size-md); height: var(--cokhi-icon-size-md); } /* Tiêu đề section trang chủ — icon nhỏ, không theo cỡ emoji/cỡ h2 */ body.my-admin-home .cokhi-section-title { display: inline-flex; align-items: center; gap: 0.4rem; } body.my-admin-home .cokhi-section-title .cokhi-icon { font-size: var(--cokhi-icon-size-sm) !important; width: var(--cokhi-icon-size-sm) !important; height: var(--cokhi-icon-size-sm) !important; flex-shrink: 0; } body.my-admin-home .request-home-member-note .cokhi-icon { font-size: 0.95em !important; width: 0.95em !important; height: 0.95em !important; vertical-align: -0.1em; margin-right: 0.2rem; } /* HTML mô tả chi tiết (wp_editor) — không dùng Arial reset; giữ icon font */ body.my-admin-root .cokhi-rich-content { margin: 0; font-family: var(--cokhi-font-sans, "Be Vietnam Pro", system-ui, sans-serif) !important; font-size: 1rem; line-height: 1.65; color: var(--cokhi-text-body, #0f172a); word-wrap: break-word; } body.my-admin-root .cokhi-rich-content > :first-child { margin-top: 0; } body.my-admin-root .cokhi-rich-content > :last-child { margin-bottom: 0; } body.my-admin-root .cokhi-rich-content p, body.my-admin-root .cokhi-rich-content li, body.my-admin-root .cokhi-rich-content td, body.my-admin-root .cokhi-rich-content th, body.my-admin-root .cokhi-rich-content blockquote { font-family: inherit !important; color: inherit !important; } body.my-admin-root .cokhi-rich-content a { color: #2563eb !important; text-decoration: underline !important; text-underline-offset: 2px; } body.my-admin-root .cokhi-rich-content a:hover { color: #1d4ed8 !important; } body.my-admin-root .cokhi-rich-content ul, body.my-admin-root .cokhi-rich-content ol { margin: 0.5em 0 0.75em; padding-left: 1.35em; } body.my-admin-root .cokhi-rich-content img { max-width: 100%; height: auto; } body.my-admin-root .cokhi-rich-content img.emoji { width: 1.15em !important; height: 1.15em !important; max-width: none !important; vertical-align: -0.12em; margin: 0 0.05em; } body.my-admin-root .cokhi-rich-content .bi, body.my-admin-root .cokhi-rich-content [class^="bi-"], body.my-admin-root .cokhi-rich-content [class*=" bi-"], body.my-admin-root .cokhi-rich-content .cokhi-icon { display: inline-block; vertical-align: -0.125em; font-style: normal !important; font-weight: 400 !important; font-variant: normal; text-transform: none; line-height: 1; font-family: bootstrap-icons !important; color: inherit; } body.my-admin-root .cokhi-rich-content .cokhi-icon { display: inline-flex !important; align-items: center; justify-content: center; } body.my-admin-root .cokhi-rich-content .bi::before, body.my-admin-root .cokhi-rich-content [class^="bi-"]::before, body.my-admin-root .cokhi-rich-content [class*=" bi-"]::before, body.my-admin-root .cokhi-rich-content .cokhi-icon::before { font-family: bootstrap-icons !important; font-style: normal !important; font-weight: 400 !important; } body.my-admin-root .cokhi-rich-content .dashicons, body.my-admin-root .cokhi-rich-content [class*="dashicons"] { display: inline-block; width: 1.25em; height: 1.25em; font-size: 1.25em; line-height: 1; font-family: dashicons !important; font-style: normal !important; font-weight: 400 !important; vertical-align: middle; text-decoration: none; text-transform: none; speak: never; -webkit-font-smoothing: antialiased; } body.my-admin-root .cokhi-rich-content .dashicons::before, body.my-admin-root .cokhi-rich-content [class*="dashicons"]::before { font-family: dashicons !important; } @media (max-width: 767px) { body.my-admin-root .cokhi-rich-content img:not(.emoji) { max-width: 100% !important; height: auto; } }