1 line
9.8 KiB
HTML
1 line
9.8 KiB
HTML
<section class="relative xl:py-12 md:py-8 py-4 bg-white"><div class="container"><h2 class="display-7 text-primary-600 text-center mb-4">Thành tích và thành tựu</h2><div class="relative md:flex md:items-center"><button class="btn-navigation flex-shrink-0 mr-4 !relative top-1/2 -translate-y-1/2 z-10 md:size-[42px] size-[32px] items-center justify-center rounded-full btn-navigation-award-prev md:flex hidden"><svg class="lucide lucide-chevron-up size-4 -rotate-90" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m18 15-6-6-6 6"></path></svg></button><div class="swiper swiper-initialized swiper-horizontal"><div class="swiper-wrapper"><div class="swiper-slide swiper-slide-active p-4 !h-auto max-w-[362px]" data-swiper-slide-index="0" style="width: 361.333px;"><div class="group h-full relative rounded-lg bg-white lg:hover:bg-primary-600 lg:duration-150 group xl:p-6 md:p-5 p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)] md:shadow-[0_4px_14px_rgba(0,0,0,0.1)] transition-all duration-150 overflow-hidden"><div class="relative flex flex-col items-center justify-between h-full text-center gap-4"><div class="flex items-center gap-2 flex-col"><div class="p-3 rounded-full bg-blue-100 group-hover:bg-blue-200"><svg class="lucide lucide-award w-8 h-8 text-blue-600" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div class="title-2 text-gray-800 lg:group-hover:text-blue-600 lg:group-hover:text-white">Bằng khen Bộ trưởng Bộ Y tế</div></div><div class="title-5 text-gray-600 lg:group-hover:text-white">2022</div></div></div></div><div class="swiper-slide swiper-slide-next p-4 !h-auto max-w-[362px]" data-swiper-slide-index="1" style="width: 361.333px;"><div class="group h-full relative rounded-lg bg-white lg:hover:bg-primary-600 lg:duration-150 group xl:p-6 md:p-5 p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)] md:shadow-[0_4px_14px_rgba(0,0,0,0.1)] transition-all duration-150 overflow-hidden"><div class="relative flex flex-col items-center justify-between h-full text-center gap-4"><div class="flex items-center gap-2 flex-col"><div class="p-3 rounded-full bg-blue-100 group-hover:bg-blue-200"><svg class="lucide lucide-award w-8 h-8 text-blue-600" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div class="title-2 text-gray-800 lg:group-hover:text-blue-600 lg:group-hover:text-white">Bằng khen Bộ trưởng Bộ Y tế</div></div><div class="title-5 text-gray-600 lg:group-hover:text-white">2023</div></div></div></div><div class="swiper-slide p-4 !h-auto max-w-[362px]" data-swiper-slide-index="2" style="width: 361.333px;"><div class="group h-full relative rounded-lg bg-white lg:hover:bg-primary-600 lg:duration-150 group xl:p-6 md:p-5 p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)] md:shadow-[0_4px_14px_rgba(0,0,0,0.1)] transition-all duration-150 overflow-hidden"><div class="relative flex flex-col items-center justify-between h-full text-center gap-4"><div class="flex items-center gap-2 flex-col"><div class="p-3 rounded-full bg-blue-100 group-hover:bg-blue-200"><svg class="lucide lucide-award w-8 h-8 text-blue-600" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div class="title-2 text-gray-800 lg:group-hover:text-blue-600 lg:group-hover:text-white">Tập thể lao động xuất sắc</div></div><div class="title-5 text-gray-600 lg:group-hover:text-white">2020 - 2023</div></div></div></div><div class="swiper-slide p-4 !h-auto max-w-[362px]" data-swiper-slide-index="3" style="width: 361.333px;"><div class="group h-full relative rounded-lg bg-white lg:hover:bg-primary-600 lg:duration-150 group xl:p-6 md:p-5 p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)] md:shadow-[0_4px_14px_rgba(0,0,0,0.1)] transition-all duration-150 overflow-hidden"><div class="relative flex flex-col items-center justify-between h-full text-center gap-4"><div class="flex items-center gap-2 flex-col"><div class="p-3 rounded-full bg-blue-100 group-hover:bg-blue-200"><svg class="lucide lucide-award w-8 h-8 text-blue-600" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div class="title-2 text-gray-800 lg:group-hover:text-blue-600 lg:group-hover:text-white">Bằng khen Bộ trưởng Bộ Y tế</div></div><div class="title-5 text-gray-600 lg:group-hover:text-white">2022</div></div></div></div><div class="swiper-slide p-4 !h-auto max-w-[362px]" data-swiper-slide-index="4" style="width: 361.333px;"><div class="group h-full relative rounded-lg bg-white lg:hover:bg-primary-600 lg:duration-150 group xl:p-6 md:p-5 p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)] md:shadow-[0_4px_14px_rgba(0,0,0,0.1)] transition-all duration-150 overflow-hidden"><div class="relative flex flex-col items-center justify-between h-full text-center gap-4"><div class="flex items-center gap-2 flex-col"><div class="p-3 rounded-full bg-blue-100 group-hover:bg-blue-200"><svg class="lucide lucide-award w-8 h-8 text-blue-600" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div class="title-2 text-gray-800 lg:group-hover:text-blue-600 lg:group-hover:text-white">Bằng khen Bộ trưởng Bộ Y tế</div></div><div class="title-5 text-gray-600 lg:group-hover:text-white">2023</div></div></div></div><div class="swiper-slide p-4 !h-auto max-w-[362px]" data-swiper-slide-index="5" style="width: 361.333px;"><div class="group h-full relative rounded-lg bg-white lg:hover:bg-primary-600 lg:duration-150 group xl:p-6 md:p-5 p-4 shadow-[0_2px_8px_rgba(0,0,0,0.1)] md:shadow-[0_4px_14px_rgba(0,0,0,0.1)] transition-all duration-150 overflow-hidden"><div class="relative flex flex-col items-center justify-between h-full text-center gap-4"><div class="flex items-center gap-2 flex-col"><div class="p-3 rounded-full bg-blue-100 group-hover:bg-blue-200"><svg class="lucide lucide-award w-8 h-8 text-blue-600" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m15.477 12.89 1.515 8.526a.5.5 0 0 1-.81.47l-3.58-2.687a1 1 0 0 0-1.197 0l-3.586 2.686a.5.5 0 0 1-.81-.469l1.514-8.526"></path><circle cx="12" cy="8" r="6"></circle></svg></div><div class="title-2 text-gray-800 lg:group-hover:text-blue-600 lg:group-hover:text-white">Tập thể lao động xuất sắc</div></div><div class="title-5 text-gray-600 lg:group-hover:text-white">2020 - 2023</div></div></div></div></div></div><button class="btn-navigation flex-shrink-0 ml-4 !relative top-1/2 -translate-y-1/2 z-10 md:size-[42px] size-[32px] items-center justify-center rounded-full btn-navigation-award-next md:flex hidden"><svg class="lucide lucide-chevron-down size-4 -rotate-90" fill="none" height="24" stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewbox="0 0 24 24" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m6 9 6 6 6-6"></path></svg></button><div class="swiper-pagination swiper-pagination-award space-x-[13px] !relative [&_.swiper-pagination-bullet-active]:!bg-primary-600 [&_.swiper-pagination-bullet-active]:!opacity-100 [&_.swiper-pagination-bullet-active]:before:opacity-100 mt-4 flex justify-center md:hidden [&_.swiper-pagination-bullet]:!relative [&_.swiper-pagination-bullet]:!bottom-[-8px] [&_.swiper-pagination-bullet]:before:content-[''] [&_.swiper-pagination-bullet]:before:size-[14px] [&_.swiper-pagination-bullet]:before:bg-transparent [&_.swiper-pagination-bullet]:before:rounded-full [&_.swiper-pagination-bullet]:before:border [&_.swiper-pagination-bullet]:before:border-primary-600 [&_.swiper-pagination-bullet]:before:top-[-2.7px] [&_.swiper-pagination-bullet]:before:left-[-2.7px] [&_.swiper-pagination-bullet]:before:absolute [&_.swiper-pagination-bullet]:before:block [&_.swiper-pagination-bullet]:before:opacity-0 [&_.swiper-pagination-bullet]:!size-[8px] [&_.swiper-pagination-bullet]:!bg-black [&_.swiper-pagination-bullet]:!opacity-[5%] [&_.swiper-pagination-bullet]:!opacity-100 swiper-pagination-clickable swiper-pagination-bullets swiper-pagination-horizontal"><span class="swiper-pagination-bullet swiper-pagination-bullet-active"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span><span class="swiper-pagination-bullet"></span></div></div></div></section> |