.text-pink-50 {
    color: rgb(253, 242, 248);
}

.text-pink-100 {
    color: rgb(252, 231, 243);
}

.text-pink-200 {
    color: rgb(251, 207, 232);
}

.text-pink-300 {
    color: rgb(249, 168, 212);
}

.text-pink-400 {
    color: rgb(244, 114, 182);
}

.text-pink-500 {
    color: rgb(236, 72, 153);
}

.text-pink-600 {
    color: rgb(219, 39, 119);
}

.text-pink-700 {
    color: rgb(190, 24, 93);
}

.text-pink-800 {
    color: rgb(157, 23, 77);
}

.text-pink-900 {
    color: rgb(131, 24, 67);
}

.text-pink-950 {
    color: rgb(80, 7, 36);
}

.text-indigo-50 {
    color: rgb(238, 242, 255);
}

.text-indigo-100 {
    color: rgb(224, 231, 255);
}

.text-indigo-200 {
    color: rgb(199, 210, 254);
}

.text-indigo-300 {
    color: rgb(165, 180, 252);
}

.text-indigo-400 {
    color: rgb(129, 140, 248);
}

.text-indigo-500 {
    color: rgb(99, 102, 241);
}

.text-indigo-600 {
    color: rgb(79, 70, 229);
}

.text-indigo-700 {
    color: rgb(67, 56, 202);
}

.text-indigo-800 {
    color: rgb(55, 48, 163);
}

.text-indigo-900 {
    color: rgb(49, 46, 129);
}

.text-indigo-950 {
    color: rgb(30 27 75);
}

.text-yellow-50 {
    color: rgb(254, 252, 232);
}

.text-yellow-100 {
    color: rgb(254, 249, 195);
}

.text-yellow-200 {
    color: rgb(254, 240, 138);
}

.text-yellow-300 {
    color: rgb(253, 224, 71);
}

.text-yellow-400 {
    color: rgb(250, 204, 21);
}

.text-yellow-500 {
    color: rgb(234, 179, 8);
}

.text-yellow-600 {
    color: rgb(202, 138, 4);
}

.text-yellow-700 {
    color: rgb(161, 98, 7);
}

.text-yellow-800 {
    color: rgb(133, 77, 14);
}

.text-yellow-900 {
    color: rgb(113, 63, 18);
}

.text-yellow-950 {
    color: rgb(66, 32, 6);
}
.text-red-50 {
    color: rgb(254, 242, 242);
}

.text-red-100 {
    color: rgb(254, 226, 226);
}

.text-red-200 {
    color: rgb(254, 202, 202);
}

.text-red-300 {
    color: rgb(252, 165, 165);
}

.text-red-400 {
    color: rgb(248, 113, 113);
}

.text-red-500 {
    color: rgb(239, 68, 68);
}

.text-red-600 {
    color: rgb(220, 38, 38);
}

.text-red-700 {
    color: rgb(185, 28, 28);
}

.text-red-800 {
    color: rgb(153, 27, 27);
}

.text-red-900 {
    color: rgb(127, 29, 29);
}

.text-red-950 {
    color: rgb(69, 10, 10);
}
/* Tailwind CSS - Blue Background Colors */

.bg-blue-100 {
    background-color: rgb(219, 234, 254);
}

.bg-blue-200 {
    background-color: rgb(191, 219, 254);
}

.bg-blue-300 {
    background-color: rgb(147, 197, 253);
}

.bg-blue-400 {
    background-color: rgb(96, 165, 250);
}

.bg-blue-500 {
    background-color: rgb(59, 130, 246);
}

.bg-blue-600 {
    background-color: rgb(37, 99, 235);
}

.bg-blue-700 {
    background-color: rgb(29, 78, 216);
}

.bg-blue-800 {
    background-color: rgb(30, 64, 175);
}

.bg-blue-900 {
    background-color: rgb(30, 58, 138);
}

.bg-blue-950 {
    background-color: rgb(23, 37, 84);
}
.right-1 {
    right: 0.25rem;
}
.bg-lime-50 {
    background-color: rgb(247 254 231);
}
.bg-lime-100 {
    background-color: rgb(236 252 203);
}
.bg-lime-200 {
    background-color: rgb(217 249 157);
}
.bg-lime-300 {
    background-color: rgb(190 242 100);
}
.bg-lime-400 {
    background-color: rgb(163 230 53);
}
.bg-lime-500 {
    background-color: rgb(132 204 22);
}
.bg-lime-600 {
    background-color: rgb(101 163 13);
}
.bg-lime-700 {
    background-color: rgb(77 124 15);
}
.bg-lime-800 {
    background-color: rgb(63 98 18);
}
.bg-lime-900 {
    background-color: rgb(54 83 20);
}
.bg-lime-950 {
    background-color: rgb(26 46 5);
}
.bg-indigo-50 {
    background-color: rgb(238 242 255);
}
.bg-indigo-100 {
    background-color: rgb(224 231 255);
}
.bg-indigo-200 {
    background-color: rgb(199 210 254);
}
.bg-indigo-300 {
    background-color: rgb(165 180 252);
}
.bg-indigo-400 {
    background-color: rgb(129 140 248);
}
.bg-indigo-500 {
    background-color: rgb(99 102 241);
}
.bg-indigo-600 {
    background-color: rgb(79 70 229);
}
.bg-indigo-700 {
    background-color: rgb(67 56 202);
}
.bg-indigo-800 {
    background-color: rgb(55 48 163);
}
.bg-indigo-900 {
    background-color: rgb(49 46 129);
}
.bg-indigo-950 {
    background-color: rgb(30 27 75);
}
.bg-violet-50 {
    background-color: rgb(245 243 255);
}
.bg-violet-100 {
    background-color: rgb(237 233 254);
}
.bg-violet-200 {
    background-color: rgb(221 214 254);
}
.bg-violet-300 {
    background-color: rgb(196 181 253);
}
.bg-violet-400 {
    background-color: rgb(167 139 250);
}
.bg-violet-500 {
    background-color: rgb(139 92 246);
}
.bg-violet-600 {
    background-color: rgb(124 58 237);
}
.bg-violet-700 {
    background-color: rgb(109 40 217);
}
.bg-violet-800 {
    background-color: rgb(91 33 182);
}
.bg-violet-900 {
    background-color: rgb(76 29 149);
}
.bg-violet-950 {
    background-color: rgb(46 16 101);
}
.bg-purple-50 {
    background-color: rgb(250 245 255);
}
.bg-purple-100 {
    background-color: rgb(243 232 255);
}
.bg-purple-200 {
    background-color: rgb(233 213 255);
}
.bg-purple-300 {
    background-color: rgb(216 180 254);
}
.bg-purple-400 {
    background-color: rgb(192 132 252);
}
.bg-purple-500 {
    background-color: rgb(168 85 247);
}
.bg-purple-600 {
    background-color: rgb(147 51 234);
}
.bg-purple-700 {
    background-color: rgb(126 34 206);
}
.bg-purple-800 {
    background-color: rgb(107 33 168);
}
.bg-purple-900 {
    background-color: rgb(88 28 135);
}
.bg-purple-950 {
    background-color: rgb(59 7 100);
}
.bg-fuchsia-50 {
    background-color: rgb(253 244 255);
}
.bg-fuchsia-100 {
    background-color: rgb(250 232 255);
}
.bg-fuchsia-200 {
    background-color: rgb(245 208 254);
}
.bg-fuchsia-300 {
    background-color: rgb(240 171 252);
}
.bg-fuchsia-400 {
    background-color: rgb(232 121 249);
}
.bg-fuchsia-500 {
    background-color: rgb(217 70 239);
}
.bg-fuchsia-600 {
    background-color: rgb(192 38 211);
}
.bg-fuchsia-700 {
    background-color: rgb(162 28 175);
}
.bg-fuchsia-800 {
    background-color: rgb(134 25 143);
}
.bg-fuchsia-900 {
    background-color: rgb(112 26 117);
}
.bg-fuchsia-950 {
    background-color: rgb(74 4 78);
}
.bg-pink-50 {
    background-color: rgb(253 242 248);
}
.bg-pink-100 {
    background-color: rgb(252 231 243);
}
.bg-pink-200 {
    background-color: rgb(251 207 232);
}
.bg-pink-300 {
    background-color: rgb(249 168 212);
}
.bg-pink-400 {
    background-color: rgb(244 114 182);
}
.bg-pink-500 {
    background-color: rgb(236 72 153);
}
.bg-pink-600 {
    background-color: rgb(219 39 119);
}
.bg-pink-700 {
    background-color: rgb(190 24 93);
}
.bg-pink-800 {
    background-color: rgb(157 23 77);
}
.bg-pink-900 {
    background-color: rgb(131 24 67);
}
.bg-pink-950 {
    background-color: rgb(80 7 36);
}
.bg-rose-50 {
    background-color: rgb(255 241 242);
}
.bg-rose-100 {
    background-color: rgb(255 228 230);
}
.bg-rose-200 {
    background-color: rgb(254 205 211);
}
.bg-rose-300 {
    background-color: rgb(253 164 175);
}
.bg-rose-400 {
    background-color: rgb(251 113 133);
}
.bg-rose-500 {
    background-color: rgb(244 63 94);
}
.bg-rose-600 {
    background-color: rgb(225 29 72);
}
.bg-rose-700 {
    background-color: rgb(190 18 60);
}
.bg-rose-800 {
    background-color: rgb(159 18 57);
}
.bg-rose-900 {
    background-color: rgb(136 19 55);
}
.bg-rose-950 {
    background-color: rgb(76 5 25);
}
.bg-cyan-50 {
    background-color: rgb(236 254 255);
}
.bg-cyan-100 {
    background-color: rgb(207 250 254);
}
.bg-cyan-200 {
    background-color: rgb(165 243 252);
}
.bg-cyan-300 {
    background-color: rgb(103 232 249);
}
.bg-cyan-400 {
    background-color: rgb(34 211 238);
}
.bg-cyan-500 {
    background-color: rgb(6 182 212);
}
.bg-cyan-600 {
    background-color: rgb(8 145 178);
}
.bg-cyan-700 {
    background-color: rgb(14 116 144);
}
.bg-cyan-800 {
    background-color: rgb(21 94 117);
}
.bg-cyan-900 {
    background-color: rgb(22 78 99);
}
.bg-cyan-950 {
    background-color: rgb(8 51 68);
}
.bg-amber-50 {
    background-color: rgb(255 251 235);
}
.bg-amber-100 {
    background-color: rgb(254 243 199);
}
.bg-amber-200 {
    background-color: rgb(253 230 138);
}
.bg-amber-300 {
    background-color: rgb(252 211 77);
}
.bg-amber-400 {
    background-color: rgb(251 191 36);
}
.bg-amber-500 {
    background-color: rgb(245 158 11);
}
.bg-amber-600 {
    background-color: rgb(217 119 6);
}
.bg-amber-700 {
    background-color: rgb(180 83 9);
}
.bg-amber-800 {
    background-color: rgb(146 64 14);
}
.bg-amber-900 {
    background-color: rgb(120 53 15);
}
.bg-amber-950 {
    background-color: rgb(69 26 3);
}
.container-xl {
    max-width: 1280px;
}
.bg-section-2 {
    background: #fff;

    /* background-image: url("../img/bg-2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    position: relative; */
}
.bg-hl-match{
    /* background-image: url("../img/bg-luage.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    position: relative; */
    background: #fff;

}

.bg-section-3 {
    background: #fff;
    /* background-image: url("../img/feature-img2.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    position: relative; */
}

.bg-style {
    background-image: url("../img/bg-section1.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    padding: 280px 0px 180px 0px;
    transition: background 0.3s, border 0.3s, border-radius 0.3s,
        box-shadow 0.3s;
    position: relative;
}
.bg-items-card {
    background-image: url("../img/old-black-background.jpg");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    opacity: 0.7;
}
.elementor-background-overlay {
    background-color: transparent;
    background-image: linear-gradient(90deg, #000000 30%, #00000094 14%);
    opacity: 1;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.background-overlay {
    /* background-color: #000000;
    opacity: 0.75;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute; */
}
.background-overlay-2 {
    background-color: #000000;
    opacity: 0.3;
    transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    position: absolute;
}

.elementor-spacer {
    right: 40px;
    bottom: -20px;
    z-index: 1;
}

.elementor-spacer-2 {
    left: 40px;
    top: -14px;
    z-index: 1;
}
.hover-style-2 img {
    filter: grayscale(100%);
}
.hover-style-2:hover img {
    filter: grayscale(0%);
    
}
.items-hover{
    transition: filter 0.3s ease, box-shadow 0.3s ease;
}
.items-hover:hover{
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    
}
.card-logo-2 {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% + 50px);
    left: calc(50% - 50px);
    border-radius: 1rem;
}
.img-style {
    filter: grayscale(100%);
}

.img-style:hover {
    filter: grayscale(0%);
}

.card-logo {
    width: 100px;
    height: 100px;
    position: absolute;
    top: calc(50% + 30px);
    left: calc(50% - 50px);
    border-radius: 1rem;
}

.rounded-tl-xl {
    border-top-right-radius: 50px;
    border-bottom-left-radius: 50px;
}
.leading-12 {
    line-height: 2.5rem !important;
}
.bg-scroll-header {
    transition: background-color 0.3s ease;
}
.count-noti {
    min-width: 16px;
    padding: 1px 2.5px;
}

.arrow-pss-1 {
    position: absolute;
    left: 15px;
    top: 46px;
}
.arrow-pss-2 {
    position: absolute;
    left: 15px;
    top: 132px;
}
.arrow-step {
    width: 3px;
    height: 38px;
    background-color: #000;
    position: relative;
}
.btn-style-2 {
    fill: #ffffff;
    color: #ffffff;
    background-color: transparent;
    background-image: linear-gradient(130deg, #dd1111 93%, #ffffff00 90%);
    border-radius: 0px 0px 0px 0px;
    /* padding: 18px 32px 18px 32px; */
}

.btn-style-2:hover {
    background-image: linear-gradient(130deg, #fff 93%, #ffffff00 90%);
}
.btn-style-3 {
    fill: #ffffff;
    color: #000;
    background-color: transparent;
    background-image: linear-gradient(310deg, #fff 93%, #ffffff00 90%);
    border-radius: 0px 0px 0px 0px;
    /* padding: 18px 32px 18px 32px; */
}
.btn-style-3:hover {
    /* background-image: linear-gradient(310deg, #2222 93%, #ffffff00 90%); */
    /* bg red */
    background-image: linear-gradient(310deg, #dd1111 93%, #ffffff00 90%);
    color: #fff;
}
.arrow-step:after {
    content: "";
    position: absolute;
    top: 100%; /* Đặt mũi tên ở cuối đường kẻ */
    left: -4px; /* Căn giữa mũi tên */
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 10px solid #000; /* Màu của mũi tên */
}
.hover-slide-up {
    transform: translateY(0);
    transition: transform 0.3s ease; /* Thêm transition để tạo hiệu ứng mượt mà */
}

.hover-slide-up:hover {
    transform: translateY(-7px); /* Trượt lên khi hover */
}

@keyframes slide-up {
    0% {
        transform: translateY(0); /* Vị trí ban đầu */
    }
    100% {
        transform: translateY(-7px); /* Vị trí trượt lên */
    }
}
.leading-12 {
    line-height: 3rem !important;
}
.round.active {
    background-image: linear-gradient(
        to right top,
        #45af2a,
        #3ba023,
        #30901c,
        #268215,
        #1b730d,
        #1b730d,
        #1b730d,
        #1b730d,
        #268215,
        #30901c,
        #3ba023,
        #45af2a
    );
    color: #fff;
}
.team-flag {
    background-position: 50%;
    background-size: cover;
    display: inline-block;
    height: 25px;
    line-height: normal;
    width: 25px;
}
.team-logo {
    background-position: 50%;
    background-size: cover;
    display: inline-block;
    height: 70px;
    line-height: normal;
    width: 70px;
}
.bg-section-4{
    /* background-image: url(/assets/img/bg-section-3.jpg); */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    transition: background 0.3s, border 0.3s, border-radius 0.3s;
    box-shadow: 0.3s;
    position: relative;
}
.zoom-effect {
    transition: transform 0.6s ease-in-out, background-color 0.6s ease-in-out, border-color 0.6s ease-in-out; /* Tăng thời gian và làm mượt hiệu ứng */
    background-color: #fff;
    border: 2px solid #ddd; /* Border mặc định */
}

.zoom-effect:hover {
    transform: scale(1.15); /* Phóng to 15% */
    background: #dd1111 !important;
    border-color: #dd1111; /* Chuyển đổi màu border khi hover */
}
.zoom-effect:hover .text-dark h1,
.zoom-effect:hover .text-dark p  {
   color: white; /* Đảm bảo chữ con trong thẻ text-dark cũng chuyển sang trắng */
}
.zoom-effect:hover .icon  {
   color: white; /* Đảm bảo chữ con trong thẻ text-dark cũng chuyển sang trắng */
}
.custom-shadow {
    box-shadow: 0 14px 20px rgba(0, 0, 0, 0.2);
}
@media (max-width: 440px) {
    .bg-section-4{
        background-position: top -180px right 50%;
    }
}

@media (min-width: 441px) and (max-width: 764px) {
    .bg-section-4{
        background-position: top -130px right 50%;
    }
}
@media (min-width: 765px) and (max-width: 992px) {
    .bg-section-4{
        background-position: top -160px right 50%;
    }
}

@media (min-width: 1280px) {
    .leading-12 {
        line-height: 4rem !important;
    }
    .xl\:line-clamp-8 {

    }
}

@media (max-width: 768px) {
    .card-logo {
        width: 100px;
        height: 100px;
        position: absolute;
        top: calc(50% + 20px);
        left: calc(50% - 50px);
        border-radius: 1rem;
    }
}
@media (max-width: 576px) {
    .card-logo {
        width: 100px;
        height: 100px;
        position: absolute;
        top: calc(50% + 10px);
        left: calc(50% - 50px);
        border-radius: 1rem;
    }
    .h-80{
        height: 23rem !important;
    }
}

@media (min-width: 576px){
    .blog .main-blog{
        height: 520px;
    }
}

@media (min-width: 640px) {
    .sm\:line-clamp-8{
        overflow: hidden;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 8;
    }
}

@media screen and (min-width: 1024px){
    .sidebar-fixed, .sidebar-fixed-left {
        flex: 1;
        position: relative;
    }
    
    #banner1, #banner2, #banner3, #banner4 {
        position: absolute;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        transition: all 0.3s ease;
    }
}

.pl-1, .px-1{
    padding-left: 0.25rem;
}

.pr-1, .px-1{
    padding-right: 0.25rem;
}

.bg-dust{
    background-image: url(/assets/img/shop-bg.jpg);
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
}

.lg\:py-32{
    padding-top: 6rem;
        padding-bottom: 6rem;
}