/* Môi trường cô lập */ .ros-tech-root { all: initial; display: block; width: 100%; max-width: 100%; overflow: hidden; position: relative; isolation: isolate; /* Technical Palette */ --bg-main: #0B0C10; /* Đen than */ --bg-panel: #15171E; /* Panel tối */ --border-dim: #272A36; /* Viền mờ */ --border-bright: #3E4252; /* Viền sáng */ --text-main: #E2E4E9; --text-mute: #8E95A3; --text-mono: #A3AAB8; --accent-primary: #38BDF8; /* Cyan */ --accent-success: #34D399; /* Green */ --accent-warn: #FBBF24; /* Amber */ /* Font System */ font-family: 'Inter', system-ui, -apple-system, sans-serif; font-size: 16px; line-height: 1.6; color: var(--text-main); background-color: var(--bg-main); box-sizing: border-box; -webkit-font-smoothing: antialiased; }/* Reset nội bộ */ .ros-tech-root *, .ros-tech-root *::before, .ros-tech-root *::after { box-sizing: border-box !important; margin: 0; padding: 0; border-width: 0; border-style: solid; border-color: var(--border-dim); }/* Typography */ .ros-tech-root h1, .ros-tech-root h2, .ros-tech-root h3 { color: var(--text-main); font-weight: 600; line-height: 1.3; margin-bottom: 0.5em; letter-spacing: -0.01em; } .ros-tech-root h1 { font-size: 2.5rem; letter-spacing: -0.03em; } .ros-tech-root h2 { font-size: 1.75rem; } .ros-tech-root h3 { font-size: 1.25rem; font-weight: 500; } .ros-tech-root p { color: var(--text-mute); margin-bottom: 1.5rem; font-size: 1rem; } .ros-tech-root a { text-decoration: none; color: inherit; cursor: pointer; } .ros-tech-root ul { list-style: none; } .ros-tech-root .font-mono { font-family: 'JetBrains Mono', monospace; font-size: 0.85em; }/* --- COMPONENTS --- *//* 1. Grid Background */ .ros-grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, var(--border-dim) 1px, transparent 1px), linear-gradient(to bottom, var(--border-dim) 1px, transparent 1px); background-size: 60px 60px; opacity: 0.15; mask-image: linear-gradient(to bottom, black 40%, transparent 100%); }/* 2. Technical Card */ .ros-tech-card { background-color: var(--bg-panel); border: 1px solid var(--border-dim); border-radius: 12px; padding: 24px; transition: all 0.2s ease; position: relative; height: 100%; display: flex; flex-direction: column; } .ros-tech-card:hover { border-color: var(--border-bright); transform: translateY(-2px); box-shadow: 0 10px 30px rgba(0,0,0,0.3); } /* Header Card Decoration */ .ros-card-header { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; padding-bottom: 16px; border-bottom: 1px solid var(--border-dim); }/* 3. Search Bar Simulation */ .ros-search-bar { display: flex; align-items: center; gap: 12px; background: rgba(0,0,0,0.3); border: 1px solid var(--border-dim); border-radius: 8px; padding: 12px 20px; width: 100%; max-width: 600px; margin: 0 auto 40px auto; color: var(--text-mute); font-size: 0.9rem; transition: border-color 0.2s; } .ros-search-bar:hover { border-color: var(--border-bright); color: var(--text-main); } .ros-kbd { background: var(--border-dim); padding: 2px 6px; border-radius: 4px; font-size: 0.75em; border: 1px solid var(--border-bright); }/* 4. Tags & Badges */ .ros-tag { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 100px; font-size: 0.75rem; font-weight: 500; background: rgba(255,255,255,0.05); border: 1px solid var(--border-dim); color: var(--text-mono); } .ros-tag.cyan { color: var(--accent-primary); background: rgba(56, 189, 248, 0.1); border-color: rgba(56, 189, 248, 0.2); } .ros-tag.green { color: var(--accent-success); background: rgba(52, 211, 153, 0.1); border-color: rgba(52, 211, 153, 0.2); }/* 5. Buttons */ .ros-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 20px; border-radius: 8px; font-weight: 500; font-size: 0.9rem; transition: all 0.2s; cursor: pointer; } .ros-btn-primary { background: var(--text-main); color: var(--bg-main) !important; } .ros-btn-primary:hover { background: #fff; transform: translateY(-1px); } .ros-btn-ghost { background: transparent; color: var(--text-mute) !important; border: 1px solid var(--border-dim); } .ros-btn-ghost:hover { border-color: var(--text-main); color: var(--text-main) !important; }/* 6. Layout Utils */ .ros-container { max-width: 1200px; margin: 0 auto; padding: 60px 24px; position: relative; z-index: 10; } .ros-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .ros-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; } .ros-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } /* List Item with Icon */ .ros-list-item { display: flex; gap: 12px; margin-bottom: 12px; font-size: 0.95rem; color: var(--text-mute); } .ros-list-item i { color: var(--accent-primary); margin-top: 4px; }/* Responsive */ @media (max-width: 1024px) { .ros-grid-3 { grid-template-columns: repeat(2, 1fr); } .ros-grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .ros-grid-3, .ros-grid-2, .ros-grid-4 { grid-template-columns: 1fr; } .ros-tech-root h1 { font-size: 2rem; } } /* Animation */ .ros-fade-in { animation: fadeIn 0.8s ease forwards; opacity: 0; transform: translateY(10px); } @keyframes fadeIn { to { opacity: 1; transform: translateY(0); } } tailwind.config = { prefix: 'ros-', corePlugins: { preflight: false }, theme: { extend: {} } }