/* ===================================================== ToolTiny — Global CSS Dùng chung cho tất cả trang con (không phải index.html) Thêm vào : ===================================================== */ :root { --bg: #f8fafc; --surface: rgba(255,255,255,0.75); --surface-solid: #ffffff; --border: rgba(255,255,255,0.55); --border-solid: #e2e8f0; --accent: #2563eb; --accent2: #ea580c; --text: #0f172a; --text-dim: #475569; --text-dimmer: #94a3b8; --success: #10b981; --danger: #ef4444; --radius: 18px; --radius-sm: 10px; --shadow: 0 8px 30px rgba(0,0,0,0.07); --shadow-hover: 0 20px 50px rgba(0,0,0,0.12); } /* ── RESET ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0 } html { scroll-behavior: smooth } body { font-family: 'Plus Jakarta Sans', sans-serif; background: var(--bg); color: var(--text); min-height: 100vh; overflow-x: hidden; line-height: 1.6; } /* ── BACKGROUND ── */ .bg-wrap { position: fixed; inset: 0; z-index: -1; background: url('/img/background.jpg') center/cover no-repeat } .bg-wrap::after { content:''; position:absolute; inset:0; background: rgba(248,250,252,0.15) } /* ===================================================== HEADER ===================================================== */ header { position: sticky; top: 0; z-index: 200; height: 70px; display: flex; align-items: center; justify-content: space-between; padding: 0 40px; background: rgba(255,255,255,0.8); backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255,255,255,0.6); box-shadow: 0 1px 20px rgba(0,0,0,0.06); } /* ── LOGO ── */ .logo { display: flex; align-items: center; gap: 12px; text-decoration: none; transition: transform 0.2s ease } .logo:hover { transform: translateY(-1px) } .logo-icon { position: relative; width: 42px; height: 42px; background: #2563eb; border-radius: 12px; box-shadow: 0 4px 15px rgba(37,99,235,0.35); } .logo-icon::before { content:""; position:absolute; top:11px; left:9px; width:24px; height:5px; background:#fff; border-radius:3px; } .logo-icon::after { content:""; position:absolute; top:11px; left:18px; width:6px; height:20px; background:#fff; border-radius:3px; } .logo-spark { position:absolute; bottom:9px; right:9px; width:8px; height:8px; background:#ea580c; border-radius:50%; box-shadow:0 0 10px rgba(234,88,12,0.8); animation: pulse-spark 2s infinite ease-in-out; } @keyframes pulse-spark { 0% { transform:scale(0.9); opacity:0.8 } 50% { transform:scale(1.2); opacity:1 } 100%{ transform:scale(0.9); opacity:0.8 } } .logo-text { display:flex; align-items:center } .logo-text .tool { font-size:1.65rem; font-weight:900; color:#ea580c; letter-spacing:-0.5px; line-height:1 } .tiny-img { height:45px; width:auto; object-fit:contain; transform:translateY(1px); padding-bottom:9.5px } /* ── NAV BASE ── */ nav { display:flex; gap:6px; align-items:center } nav > a { color:var(--text-dim); text-decoration:none; font-size:.9rem; font-weight:600; padding:7px 14px; border-radius:8px; transition:all .2s; } nav > a:hover { background:rgba(37,99,235,0.08); color:var(--accent) } .nav-cta { background:var(--accent)!important; color:#fff!important; padding:8px 18px!important; border-radius:8px } .nav-cta:hover { background:#1d4ed8!important } /* ── DROPDOWN ── */ .nav-dropdown { position: relative; display: inline-block } .nav-dropdown > a { display: flex; align-items: center; gap: 5px; color:#1e293b; text-decoration:none; font-size:.9rem; font-weight:600; padding:7px 14px; border-radius:8px; transition:all .2s; } .nav-dropdown > a:hover { background:rgba(37,99,235,0.08); color:var(--accent) } .dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(15px); background: rgba(255,255,255,0.97); backdrop-filter: blur(16px); border: 1px solid var(--border-solid); border-radius: var(--radius-sm); min-width: 260px; box-shadow: 0 10px 40px rgba(0,0,0,0.12); opacity: 0; visibility: hidden; transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1); z-index: 1000; padding: 10px 0; display: flex; flex-direction: column; } .nav-dropdown:hover .dropdown-menu, .nav-dropdown.active .dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-menu a { display: flex; align-items: center; padding: 9px 18px; color: var(--text-dim); text-decoration: none; font-size: .88rem; font-weight: 600; transition: all .18s; gap: 10px; } .dropdown-menu a:hover { background: rgba(37,99,235,0.06); color: var(--accent) } .dropdown-menu a i { width: 20px; text-align: center; font-size: 1rem; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); flex-shrink: 0; } .dropdown-menu a:hover i { transform: scale(1.2) translateY(-1px) } /* Arrow tip */ .dropdown-menu::before { content: ''; position: absolute; top: -6px; left: 50%; transform: translateX(-50%) rotate(45deg); width: 12px; height: 12px; background: #fff; border-top: 1px solid var(--border-solid); border-left: 1px solid var(--border-solid); } /* Last dropdown (Converters) — prevent overflow right */ .nav-dropdown:nth-last-child(2) .dropdown-menu { left: auto; right: -20px; transform: translateX(0) translateY(15px); } .nav-dropdown:nth-last-child(2):hover .dropdown-menu, .nav-dropdown:nth-last-child(2).active .dropdown-menu { transform: translateX(0) translateY(0); } .nav-dropdown:nth-last-child(2) .dropdown-menu::before { left: auto; right: 40px; transform: rotate(45deg); } /* ── DROPDOWN ICON COLORS ── */ /* Documents */ .dropdown-menu .fa-language { color: #2563eb } .dropdown-menu .fa-file-pdf { color: #ef4444 } .dropdown-menu .fa-file-excel { color: #10b981 } .dropdown-menu .fa-object-group { color: #f59e0b } .dropdown-menu .fa-scissors { color: #ec4899 } .dropdown-menu .fa-compress { color: #8b5cf6 } .dropdown-menu .fa-layer-group { color: #06b6d4 } .dropdown-menu .fa-file-image { color: #6366f1 } .dropdown-menu .fa-stamp { color: #0d9488 } .dropdown-menu .fa-file-circle-minus { color: #e11d48 } .dropdown-menu .fa-arrows-rotate { color: #2563eb } /* Text */ .dropdown-menu .fa-calculator { color: #3b82f6 } .dropdown-menu .fa-spell-check { color: #10b981 } .dropdown-menu .fa-font { color: #f97316 } .dropdown-menu .fa-align-left { color: #64748b } .dropdown-menu .fa-pen-nib { color: #8b5cf6 } /* Images */ .dropdown-menu .fa-compress-arrows-alt { color: #8b5cf6 } .dropdown-menu .fa-eraser { color: #ec4899 } .dropdown-menu .fa-face-laugh-squint { color: #f59e0b } .dropdown-menu .fa-qrcode { color: #10b981 } /* Developer */ .dropdown-menu .fa-palette { color: #db2777 } .dropdown-menu .fa-lock { color: #f08350 } .dropdown-menu .fa-key { color: #ef4444 } .dropdown-menu .fa-code { color: #3b82f6 } .dropdown-menu .fa-network-wired { color: #059669 } .dropdown-menu .fa-minimize { color: #6366f1 } /* Converters */ .dropdown-menu .fa-weight-scale { color: #f97316 } .dropdown-menu .fa-money-bill-transfer { color: #10b981 } .dropdown-menu .fa-music { color: #ea580c } .dropdown-menu .fa-chart-line { color: #2563eb } /* ===================================================== FOOTER ===================================================== */ footer { border-top: 1px solid var(--border-solid); padding: 56px 40px 24px; background: rgba(255,255,255,0.6); backdrop-filter: blur(16px); position: relative; z-index: 1; } .footer-grid { max-width: 1100px; margin: 0 auto; display: grid; grid-template-columns: 2.2fr 1fr 1fr 1fr; gap: 40px; } .footer-brand p { font-size:.9rem; color:var(--text-dim); line-height:1.7; margin-top:14px; max-width:300px } .footer-col h4 { font-size:.78rem; font-weight:800; color:var(--accent2); margin-bottom:18px; text-transform:uppercase; letter-spacing:.1em; } .footer-col ul { list-style:none } .footer-col ul li { margin-bottom:10px } .footer-col ul li a { text-decoration:none; color:var(--text-dim); font-size:.9rem; font-weight:500; transition:all .2s; } .footer-col ul li a:hover { color:var(--accent); padding-left:4px } .footer-bottom { max-width:1100px; margin:40px auto 0; padding-top:20px; border-top:1px solid var(--border-solid); display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; } .footer-bottom p { font-size:.85rem; color:#475569; } .footer-links { display:flex; gap:20px } .footer-links a { font-size:.85rem; color:#475569; text-decoration:none; transition:color .2s } .footer-links a:hover { color:var(--accent) } /* ===================================================== RESPONSIVE ===================================================== */ @media (max-width: 768px) { header { padding: 0 20px } nav > a:not(.nav-cta) { display: none } .nav-dropdown { display: none } .footer-grid { grid-template-columns: 1fr 1fr } .footer-brand { grid-column: 1 / -1 } }