.offcanvas-backdrop {position: fixed;top: 0;left: 0;z-index: 1040;width: 100vw;height: 100vh;background-color: #000;}
.offcanvas-backdrop.show{opacity: .5;}
svg:not(:host).svg-inline--fa, svg:not(:root).svg-inline--fa { overflow: visible; box-sizing: content-box; } .svg-inline--fa { display: var(--fa-display, inline-block); height: 1em; overflow: visible; vertical-align: -.125em; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } *, :after, :before { border: 0 solid #e5e7eb; box-sizing: border-box; } :after, :before { --tw-content: ""; } a { color: inherit; text-decoration: inherit; } button { color: inherit; font-family: inherit; font-size: 100%; font-weight: inherit; line-height: inherit; margin: 0; padding: 0; } button { text-transform: none; } button { -webkit-appearance: button; background-color: transparent; background-image: none; } p { margin: 0; } ul { list-style: none; margin: 0; padding: 0; } button { cursor: pointer; } :disabled { cursor: default; } svg { display: block; vertical-align: middle; } *, :after, :before { --tw-border-spacing-x: 0; --tw-border-spacing-y: 0; --tw-translate-x: 0; --tw-translate-y: 0; --tw-rotate: 0; --tw-skew-x: 0; --tw-skew-y: 0; --tw-scale-x: 1; --tw-scale-y: 1; --tw-scroll-snap-strictness: proximity; --tw-ring-offset-width: 0px; --tw-ring-offset-color: #fff; --tw-ring-color: rgba(59, 130, 246, .5); --tw-ring-offset-shadow: 0 0 #0000; --tw-ring-shadow: 0 0 #0000; --tw-shadow: 0 0 #0000; --tw-shadow-colored: 0 0 #0000; } .sr-only { height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; clip: rect(0, 0, 0, 0); border-width: 0; white-space: nowrap; } .relative { position: relative; } .z-20 { z-index: 20; } .block { display: block; } .ease-out { transition-timing-function: cubic-bezier(0, 0, .2, 1); } a, li, p { font-family: Rajdhani, sans-serif; } .mobile-menu { z-index: 1043; background-color: #141414cc; background-color: rgb(20 20 20/var(--tw-bg-opacity)); display: flex; height: 100vh; position: fixed; right: 0; top: 0; width: 100vw; z-index: 50; --tw-bg-opacity: .8; } @media (min-width:1024px) { .mobile-menu { display: none; } } .mobile-menu { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mobile-menu .close-btn .lines { align-items: center; display: flex; flex-direction: column; gap: .375rem; justify-content: center; } .mobile-menu .close-btn .lines .line { display: block; overflow: hidden; position: absolute; transform-origin: center; width: 1.5rem; --tw-bg-opacity: 1; background-color: #ffffff; height: 6px; top: 50%; will-change: transform; } .mobile-menu .close-btn .lines .line:first-child { --tw-rotate: -45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(-45deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .mobile-menu .close-btn .lines .line:nth-child(2) { --tw-rotate: 45deg; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(45deg) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); } .flex { display: flex; } .w-full { width: 100%; } .flex-col { flex-direction: column; } .items-end { align-items: flex-end; } .items-center { align-items: center; } .justify-end { justify-content: flex-end; } .justify-between { justify-content: space-between; } .gap-10 { gap: 2.5rem; } .gap-3 { gap: .75rem; } .gap-6 { gap: 1.5rem; } .border-b-2 { border-bottom-width: 2px; } .border-white { --tw-border-opacity: 1; border-color: #fff; border-color: rgb(255 255 255/var(--tw-border-opacity)); } .border-opacity-10 { --tw-border-opacity: .1; } .p-10 { padding: 2.5rem; } .pb-6 { padding-bottom: 1.5rem; } .pt-20 { padding-top: 5rem; } .text-right { text-align: right; } .font-primary { font-family: Rajdhani, sans-serif; } .text-3xl { font-size: 1.75rem; line-height: 1; } .text-xl { font-size: 1.25rem; line-height: 1.75rem; } .font-black { font-weight: 900; } .uppercase { text-transform: uppercase; } .hover\:text-primary:hover { --tw-text-opacity: 1; color: #25aae1; color: rgb(37 170 225/var(--tw-text-opacity)); } .hover\:text-white:hover { --tw-text-opacity: 1; color: #fff; color: rgb(255 255 255/var(--tw-text-opacity)); } .menu-item[data-v-8bf9fb94] { position: relative; } .social-account[data-v-046309ec] { transition-duration: .2s; } .menu-item .active-indicator[data-v-8bf9fb94] { bottom: -.5rem; height: .25rem; left: 0; pointer-events: none; position: absolute; transform-origin: left; width: 100%; --tw-scale-x: 0; transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(0) scaleY(var(--tw-scale-y)); transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skew(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y)); --tw-bg-opacity: 1; background-color: #25aae1; background-color: rgb(37 170 225/var(--tw-bg-opacity)); transition-duration: .1s; } #offcanvasmenu { background-color: #f7cc4b !important; /* M� u v� ng chủ đạo của web */ border-left: 5px solid #000; box-shadow: -10px 0 0 rgba(0,0,0,0.1); width: 320px !important; } .menu-item { font-family: 'Varela Round', sans-serif; font-weight: 900 !important; color: #000 !important; transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275) !important; position: relative; display: inline-block; } .menu-item:hover { color: #ff4757 !important; transform: translateX(-10px) scale(1.1); text-shadow: 3px 3px 0px #000; } .border-white.border-opacity-10 { border-bottom: 3px dashed rgba(0,0,0,0.15) !important; } .text-primary.font-black { color: #ff4757 !important; background: #000; display: inline-block; padding: 2px 15px; border-radius: 50px; font-size: 14px !important; text-transform: uppercase; margin-bottom: 15px; } .social-account { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: #fff; border: 2px solid #000; border-radius: 10px; color: #000 !important; box-shadow: 3px 3px 0px #000; transition: all 0.2s; } .social-account:hover { background: #ff4757 !important; color: #fff !important; transform: translate(-2px, -2px); box-shadow: 5px 5px 0px #000; } .close-btn.btn-close { background: #ff4757 !important; border: 3px solid #000 !important; opacity: 1 !important; border-radius: 50%; width: 45px; height: 45px; position: absolute; top: 20px; right: 20px; box-shadow: 3px 3px 0px #000; display: flex; align-items: center; justify-content: center; } .close-btn:hover { transform: rotate(90deg) scale(1.1); } .btn-close::before { filter: brightness(0) invert(1); } .offcanvas.show .menu-item { animation: slideInRight 0.4s ease forwards; opacity: 0; } @keyframes slideInRight { from { transform: translateX(50px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } .main-menu li:nth-child(1) .menu-item { animation-delay: 0.1s; } .main-menu li:nth-child(2) .menu-item { animation-delay: 0.15s; } .main-menu li:nth-child(3) .menu-item { animation-delay: 0.2s; } .main-menu li:nth-child(4) .menu-item { animation-delay: 0.25s; } .main-menu li:nth-child(5) .menu-item { animation-delay: 0.3s; } #offcanvasmenu { background-color: #000 !important; border-left: 6px solid #fff; font-family: 'Press Start 2P', cursive !important; image-rendering: pixelated; z-index: 1050 !important; box-shadow: -10px 0 0 rgba(0,0,0,0.5); } #offcanvasmenu .menu-item { font-family: 'Press Start 2P', cursive !important; font-size: 14px !important; color: #fff !important; text-transform: uppercase; text-decoration: none; line-height: 1.8; transition: none !important; position: relative; padding-right: 0; } #offcanvasmenu .menu-item:hover { color: #f1c40f !important; padding-right: 25px; } #offcanvasmenu .menu-item:hover::after { content: "◄"; position: absolute; right: 0; top: 0; color: #fff; animation: blink 0.4s infinite; } #offcanvasmenu .border-b-2 { border-bottom: 2px dashed #444 !important; border-color: #444 !important; margin-bottom: 15px !important; padding-bottom: 15px !important; } #offcanvasmenu p.text-primary { font-family: 'Press Start 2P', cursive !important; color: #EA0404 !important; font-size: 12px !important; text-shadow: 2px 2px 0 #000; margin-bottom: 20px; letter-spacing: 2px; } #offcanvasmenu .social-menu .social-account { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background-color: #f1c40f; border: 4px solid #fff; color: #000 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 #333; transition: transform 0.1s; } #offcanvasmenu .social-menu .social-account:hover { background-color: #3498db; color: #fff !important; transform: translateY(-4px); box-shadow: 4px 8px 0 #333; } #offcanvasmenu .close-btn { position: absolute !important; top: 25px; left: 25px; width: 44px; height: 44px; background-color: #EA0404 !important; border: 4px solid #fff !important; opacity: 1 !important; border-radius: 0 !important; box-shadow: 4px 4px 0 rgba(0,0,0,0.5); display: flex; align-items: center; justify-content: center; } #offcanvasmenu .close-btn .lines { position: relative; width: 24px; height: 24px; } #offcanvasmenu .close-btn .line { position: absolute; width: 100%; height: 4px; background-color: #fff !important; top: 50%; left: 0; margin-top: -2px; } #offcanvasmenu .close-btn .line:first-child { transform: rotate(45deg); } #offcanvasmenu .close-btn .line:last-child { transform: rotate(-45deg); } #offcanvasmenu .close-btn:active { transform: translateY(4px); box-shadow: none; } @keyframes blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .active-indicator { display: none !important; }