.page-template-pickleball .container
{
    width:80rem;
}
.header-inner
{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:1.5rem 0;
}
.header-inner .logo
{
    width: 11rem;
}
.hidden-content {
	display: none;
}
body
{
	overflow:hidden
}
.header-btns
{
    display:flex;
    gap:1rem;
}
.page-template-pickleball {
    --e-global-color-primary: #11b6e3;
    --e-global-color-secondary: #000000;
    --e-global-color-text: #555555;
    --e-global-color-accent: #cdff00;
     --e-global-color-accent2: #cdff00bf;
    --e-global-color-border: #DFDFDF;
    --e-global-color-lighter: #999999;
    --e-global-color-dark: #000000;
    --e-global-color-highlight: #96FE81;
    --e-global-typography-primary-font-family: "Urbanist";
    --e-global-typography-primary-font-weight: 600;
    --e-global-typography-secondary-font-family: "Akshar";
    --e-global-typography-secondary-font-weight: 600;
    --e-global-typography-text-font-family: "Urbanist";
    --e-global-typography-text-font-weight: 500;
    --e-global-typography-accent-font-family: "Akshar";
    --e-global-typography-accent-font-weight: 600;
    background-color: #fff;
}
.page-template-pickleball .btn
{
    border-radius:3rem;
    position:relative;
    background-color: var(--e-global-color-primary);
    transition: color 0.5s ease-in-out, border-color 0.5s ease-in-out, background-color 0.5s ease-in-out;
    z-index: 1;
    color:#fff;
    font-weight:600;
}
.page-template-pickleball .btn:before
{
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(92.53deg, var(--e-global-color-primary) 0%, var(--e-global-color-accent2) 50%, var(--e-global-color-primary) 100%);
    background-size: 200% 100%;
    background-position: 100% center;
    background-repeat: no-repeat;
    transition: opacity 0.6s ease, background-position 0.6s ease;
    opacity: 0;
    z-index: -1;
    border-radius: inherit;
}
.page-template-pickleball .btn:hover:before
{
    opacity: 1;
    background-position: 0% center;
}
.page-template-pickleball .btn img
{
    filter:brightness(0) invert(1);
    margin-right:.5rem;
}
.page-template-pickleball .zalo-btn
{
	min-width:auto;
	padding: 0 1rem;
}
.page-template-pickleball .zalo-btn img
{
	width:2rem;
}
.page-template-pickleball section
{
    padding:2rem 0;
}
.page-template-pickleball .program-section
{
	padding: 5rem 0 0;
}
.prepare-section
{
	margin-top:3rem;
}
.page-template-pickleball .banner-section
{
    padding:0;
}
.time
{
    display:flex;
    justify-content:center;
    font-weight:900;
    font-size:2rem;
    color:var(--e-global-color-primary);
    gap:1rem;
    line-height: 1;
    align-items: center;
    letter-spacing:-1px;
}
.hour
{
	font-size: 1.875rem;
	color: #064dab;
}
.daymonth
{
    display:flex;
    flex-direction:column;
    align-items:center;
}
.daymonth .day
{
    font-size:7rem;
    line-height: 1;
}
.countdown-wrap
{
    text-align:center;
    margin:2rem 0;
    font-size:2rem;
}
.location-wrap
{
    display:flex;
    gap: 6rem;
    margin-top: 3rem;
}
.location
{
    flex:none;
    width:50%;
}
.location-gallery
{
    margin-top:1rem;
}
.address>b,
.clients>span
{
   font-size:1.5rem;
   font-weight:700;
   margin-bottom:1rem;
   display:block;
   text-align: center;
}
.address>b
{
	text-align:left;
}
.clients-tc,
.clients-bt
{
    margin-bottom: 3.5rem;
}
/* .clients
{
	padding-top:8rem;
} */
.clients>div
{
    display:flex;
    gap: 4rem;
    flex-wrap:wrap;
    margin-top: 2rem;
    justify-content: center;
    row-gap: 2rem;
}
.client-item img
{
    width: 15rem;
    max-height: 3rem;
    width: auto;
   
}
.clients-tc .client-item img
{
	max-width: 13.5rem;
	max-height: 5rem;
}
.clients-tc .client-item:first-child img
{
	max-height:6rem;
	max-width: 16rem;
}
.client-item
{
	display:flex;
	align-items:center;
	justify-content:center;
	
}
.clients-bt .client-item img,
.clients-tt .client-item img
{
	 max-height: 8.875rem;
	 max-width: 9.5rem;
}
.clients-bt .client-item img
{
	max-height: 7.75rem;
}
.clients-tt .client-item img
{
	max-height:8.875rem;
}
.clients-tt .client-item:nth-child(3) img
{
	max-height:5rem;
}
.category-list
{
    display:flex;
    gap:2rem;
}
.category-item
{
    background-image: linear-gradient(92.56deg, var(--e-global-color-primary) 48.04%, var(--e-global-color-accent) 100%);
    border-radius:1.5rem;
    width:calc((100% - 2rem)/2);
    padding:2.5rem;
    background-image: linear-gradient(180deg, var(--e-global-color-primary) 0%, var(--e-global-color-accent) 100%);
    position:relative;
    min-height:16rem;
    background: linear-gradient(90deg,rgba(131, 58, 180, 1) 0%, rgba(253, 29, 29, 1) 50%, rgba(252, 176, 69, 1) 100%);
     background-image:url(../images/h1-banner6_bg.jpg);
    background-size:cover;
    background-position:center;
    background-repeat:no-repeat;
    position:relative;
}
.category-item:before
{
    content:'';
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#00000033;
    z-index: 0;
    border-radius: 1.5rem;
}
.category-item:nth-child(2)
{
	  background-image:url(../images/f7850dad-5ec7-4b42-8acd-5481b99c0429.jpg);
 
   
}
.category-item-img
{
    position:absolute;
    right:0;
    width:60%;
    bottom:0;
    z-index: 22;
    transform: translateX(1rem);
    transition: 0.4s all ease;
}
.category-item:hover .category-item-img
{
    transform:translateX(0);
}
.category-item-content
{
    z-index:22;
    position:relative;
}
.category-item-img img
{
    width:100%;
}
.category-item-content *
{
    color:#fff;
}
.category-item-content h2,
.program-inner .section-title,
.prepare-inner > h2
{
    font-size:3rem;
    text-transform:uppercase;
}
.category-item-content p
{
    font-size:2rem;
    font-weight:700;
    text-transform:uppercase;
}
.category-item-content p span
{
    display:block;
    font-weight:400;
    font-size:1.25rem;
}
.location-gallery__thumbs
{
    display:flex;
    margin-top:1rem;
}
.location-gallery__thumbs .image-lightbox
{
    flex:none;
    width:calc((100% - 3rem)/4);
    margin-right:1rem;
    position:relative;
}
.location-gallery__thumbs .image-lightbox:nth-child(4)
{
    margin-right:0;
}
.location-gallery__thumbs .image-lightbox img
{
    height:8.125rem;
    object-fit:cover;
	aspect-ratio: 16/12;
	object-fit: cover;
	width: 100%;
	height:auto;
	
}
.location-gallery__thumbs .more span
{
    position:absolute;
    font-size:2rem;
    font-weight:600;
    color:#3ed6ff;
    top:50%;
    left:50%;
    transform:translate(-50%,-50%);
}
.location-gallery__thumbs .more:before
{
    content:'';
    position:absolute;
    width:100%;
    height:100%;
    background:#00000069;
    left:0;
    top:0;
}
.location-gallery__thumbs .hide
{
    display:none;
}
.countdown
{
  margin:1.75rem 0 1.25rem;
  text-align:center;
  display:flex;
  justify-content: center;
}
.countdown>span
{
  background-color: var(--e-global-color-primary);
  color:#fff;
  font-weight:700;
  text-align:center;
  border-radius:4px;
  padding:.5rem 1rem .75rem;
  margin-right:.5rem;
  font-size: 3rem;
  border-radius: 10px 10px 10px 10px;
    line-height:1.1;
}
.countdown>span small
{
  display:block;
  font-size: 1.25rem;
  margin-top:2px;
    text-transform:uppercase;
}
.page-template-pickleball .section-title
{
    text-align:center;
    margin-bottom:1.5rem;
    letter-spacing: normal;
}
.price
{
    font-size:1.5rem;
    font-weight:600;
}
.price span
{
	font-size:1.25rem;
	font-weight:400;
	display:block;
	text-transform:uppercase;
}
.category-item .cta__button
{
    margin-top:2rem;
    display: block;
    width: 14rem;
    text-align: center;
    text-transform:uppercase;
    /* letter-spacing:-1px; */
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .75rem 2rem;
    padding-right:.5rem;
    font-size: 1rem;
}
.category-item .cta__button span
{
	line-height:1;
}
.category-item .cta__button small
{
	font-size:65%;
	display:block;
	line-height:1;
	font-weight:400;
	font-style:italic;
	margin-top: .325rem;
}
/* .category-item .cta__button:after
{
	content:'';
	position:absolute;
	left:0;
	top:0;
	width:100%;
	height:100%;
	background:REd;
	z-index:2;
} */
.cta__button .btn-icon
{
    background-color: #FFFFFF;
    color: #FFFFFF;
    font-size: 10px;
    width: 2rem;
    height: 2rem;
   display:flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
}
.cta__button .btn-icon img
{
    filter: invert(76%) sepia(32%) saturate(6684%) hue-rotate(151deg) brightness(93%) contrast(91%);
        transform: rotate(-45deg);
    transition: 0.4s all ease;
}
.cta__button:hover .btn-icon img
{
        transform: rotate(0deg);
}

@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}

.gallery-carousel .owl-stage {
    animation: marquee 50s linear infinite;
    will-change: transform;
}

.gallery-carousel:hover .owl-stage {
    animation-play-state: paused; /* DÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚Â»Ãƒâ€šÃ‚Â«ng khi hover */
}
.program-inner
{
    background-image:url(../images/h1-banner6.jpg);
    background-size:100% 100%;
    background-position:center;
    background-repeat:no-repeat;
    min-height:18.75rem;
    padding:3.5rem;
    border-radius:1.5rem;
    text-align:left;
    color:#fff;
    padding-right:55%;
        transition: all 0.2s ease;
  
}
.program-inner:hover
{
      background-size:105% 105%;
}
.program-inner .section-title
{
    text-align:left;
    color:#fff;
    line-height:1.1;
}
.program-inner p
{
    font-size:1.3125rem;
}
.prepare-item-content *
{
    color:#000;
}
.prepare-item-content h2
{
        font-size: 1.75rem;
}
.prepare-inner > h2.section-title
{
    margin-bottom:3rem;
}
.prepare-popup .prepare-popup-close
{
    padding:0;
    right:.5rem;
    top:.5rem;
}
.cd-section
{
    background-color: transparent;
    background-image: linear-gradient(92.56deg, var(--e-global-color-primary) 48.04%, var(--e-global-color-accent) 100%);
}
.elementor-scrolling-icon
{
    color: var(--e-global-color-accent);
    width:2.25rem;
    display: block;
}
.marque-wrap
{
	display:flex;
	-webkit-animation: MarqueeLeft 24s linear infinite 0ms;
	animation: MarqueeLeft 24s linear infinite 0ms;
	animation-duration: 50s;
	/* --wdt-marque-width: 5372.91px;
    --wdt-marque-Margin-Width: -5372.91px; */
	justify-content: flex-start;
	gap: 1rem;
}

.marque-wrap .title
{
	display:flex;
	flex-wrap:nowrap;
	flex-direction: row;
	color:#fff;
	text-transform: uppercase;
    font-size: 2.375rem;
	font-weight:700;
	letter-spacing:-.5px;
}

@keyframes MarqueeLeft { 
    from { margin-left: 0; } 
    to { margin-left: -100%; } 
}

.marque-container {
    width: 100%;
    overflow: hidden;
    /* background: #f8f8f8; */ /* TÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â¹y chÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚Â»ÃƒÂ¢Ã¢â€šÂ¬Ã‚Â°nh mÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â u nÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚Â»Ãƒâ€šÃ‚Ân */
    padding: 0;
}

.marque-wrap {
    display: flex;
    width: fit-content;
    animation: marquee 30s linear infinite;
    will-change: transform;
}

.marque-wrap:hover {
    animation-play-state: paused; /* DÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚Â»Ãƒâ€šÃ‚Â«ng khi hover */
}

.marque-content {
    display: flex;
    align-items: center;
    gap: 2rem;
    white-space: nowrap;
    padding-right: 2rem; /* KhoÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚ÂºÃƒâ€šÃ‚Â£ng cÃƒÆ’Ã†â€™Ãƒâ€šÃ‚Â¡ch giÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚Â»Ãƒâ€šÃ‚Â¯a 2 set nÃƒÆ’Ã‚Â¡Ãƒâ€šÃ‚Â»ÃƒÂ¢Ã¢â‚¬Å¾Ã‚Â¢i dung */
}




/* Animation marquee */
@keyframes marquee {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-50%);
    }
}
footer
{
	background-color: var(--e-global-color-secondary);
	border-radius: 60px 60px 0px 0px;
	text-align:center;
	padding:2rem 0;
	margin-bottom: 0rem;
}
.footer-logo img
{
	width:10rem;
	filter: brightness(0) invert(1);
}
.footer-title
{
	color: #fff;
	font-size:1.5rem;
}
.large-title ,
.large-title a
{
	font-size:20rem;
	font-weight:900;
	line-height:.8;
	color: #FFFFFF1A;
	transition: all 0.6s ease;
	text-decoration: none;
	margin-bottom: -8rem;
}
.large-title:hover a
{
	color:#fff;
}
.form-section,
.rule-section
{
	background-image:url(../images/h4-background3.jpg);
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	padding:3rem 0;
}
.form-section
{
	margin-bottom:2rem;
}
.rule-section .section-title
{
	color:#fff;
}
.rule-content-wrap
{
	background:#fff;
	padding:2rem;
	padding-right:1rem;
	
}
.rule-content
{
	max-height:30rem;
	overflow-y: scroll;
}
.rule-content::-webkit-scrollbar {
     width: .5rem;
     height:1rem;
 }
.rule-contents::-webkit-scrollbar-track {
     background:transparent;
 }
.rule-content::-webkit-scrollbar-thumb {
   background:#11b6e3;

 }

.form-section *
{
	color:#333;
}
.form-section label
{
	color:#fff;
}
.form-inner
{
	display:flex;
	gap:2rem;
}
.form-main
{
	flex-grow:1;
}
.form-main .section-title
{
	color:#fff;
	text-transform:uppercase;
}
.page-template-pickleball .form-content__info
{
	max-width:unset;
}
.page-template-pickleball .form-row
{
	width:calc((100% - 2rem)/2);
}
.file-group *
{
	color:#fff;
}
.payment
{
	flex:none;
	width: 19.875rem;
	padding-top: 8rem;
}
.payment img
{
	width:100%;
}
.form-buttons .btn
{
	width: 9rem;
	gap: 1rem;
	padding-right: 0;
	text-transform: uppercase;
}
body .form-buttons .btn {
  min-width: 30rem;
  box-sizing: border-box;
  height: 4.5rem;
  box-sizing: border-box;
  font-size: 2.25rem;
}
.form-buttons .cta__button .btn-icon
{
    width:3rem;
    height:3rem;
}
.stickybox-trigger
{
	display:none !important;
}

/*--------------------------------------------------------------
>>> Loading
--------------------------------------------------------------*/
.loading,
.loading .overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1003;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

.loading .overlay {
  z-index: -1;
}

.loading {
  display: none;
}

.loading.show {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

.overlay {
  opacity: .2;
  background-color: #000;
}

.loader,
.loader:before,
.loader:after {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
          animation-fill-mode: both;
  -webkit-animation: dots-loading 1.8s infinite ease-in-out;
          animation: dots-loading 1.8s infinite ease-in-out;
}

.loader {
  color: #ffffff;
  font-size: .625rem;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
}

.loader:before,
.loader:after {
  content: '';
  position: absolute;
  top: 0;
}

.loader:before {
  left: -3.5em;
  -webkit-animation-delay: -0.32s;
  animation-delay: -0.32s;
}

.loader:after {
  left: 3.5em;
}
.thk
{
	color:#fdfdfd;
	font-weight:700;
	font-size:1.25rem;
}
.prepare-popup-body
{
	display:flex;
	gap:2rem;
	align-items:center;
}
.prepare-popup-img
{
	width:25rem;
	flex:none;
}
.prepare-popup-info h2
{
	margin:0;
}
.location-icon img
{
	width:1.5rem;
	filter: invert(34%) sepia(8%) saturate(6044%) hue-rotate(181deg) brightness(90%) contrast(82%);
}
.payment-content
{
	background:#fff;
	font-size: .85rem;
	padding: .875rem 1rem;
	line-height:1.95;
}
.form-inner .payment-content
{
	
}
.sticky-btns
{
	display:none;
}
.om
{
	display:none;
}
.qrfile
{
	margin-left:.5rem;
	position:relative;
	display:flex;
	align-items:center;
	justify-content:center;
	gap:.5rem;
}

label[for="files"]
{
	display:flex;
	align-items:center;
	
}
/* .qrfile:before
{
	content:' - ';
	position:absolute;
	left:-1rem;
} */
.qrfile img
{
	width:1.875rem;
	filter:invert(1);
}
.fancybox-content-wrapper .payment-img img
{
	width:22rem;
}
.banner-section img
{
	width:100%;
}
.menu-item:hover
{
    color:#064dab;
}
.header-btns .btn
{
    padding-left: .75rem;
    padding-right: .75rem;
    font-size: 1rem;
}
.header-btns .btn img
{
    width:1.25rem;
}
.menu-item
{
	font-size: 1.125rem;
}
.menu-wrap
{
	display:flex;
	gap: 1.25rem;
	justify-content:flex-end;
	flex-grow:1;
	padding: 0 1.25rem;
}
.offcanvas-menu,
.offcanvas-close
{
    display:none;
}

.sticky-menu #dt-header .dt-main-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1001;
  -webkit-transition: transform 0.3s ease;
  -webkit-transition: -webkit-transform 0.3s ease;
  transition: -webkit-transform 0.3s ease;
  transition: transform 0.3s ease;
  transition: transform 0.3s ease, -webkit-transform 0.3s ease;
  -webkit-animation: stuckMoveDown .6s;
  animation: stuckMoveDown .6s;
  opacity: 1;
  height: 5.625rem;
  background: #fff;
  border-bottom: thin solid #ddd;
}
.table-hm
{
	display:flex;
	gap:2rem;
	text-align:center;
	margin:2rem 0;
	justify-content:center;
}
.table-hm .title
{
	font-size:1.5rem;
	font-weight:600;
	margin-bottom: 2rem;
}
.table-hm .note
{
	font-style:italic;
	margin:.5rem 0;
}
.table-hm-box
{
	/* flex-grow:1; */
	padding: 2rem;
	box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
	border-radius:1rem;
	min-width:30rem;
}
.cd-item
{
	display:flex;
	align-items:center;
	gap:1rem;
	margin-bottom: .5rem;
}
.cd-item span
{
	color:#000;
	font-size:1.25rem;
	text-align: left;
    text-transform: uppercase;
}
.cd-item .img
{
	flex:none;
	width: 4rem;
}
.cd-list
{
	overflow-y:auto;
	max-height:30rem;
	margin: 1rem 0;
}
/* --- Cáº¥u trÃºc cÆ¡ báº£n --- */
.progress-bar {
    width: 100%; /* Äiá»u chá»‰nh chiá»u rá»™ng theo Ã½ muá»‘n */
    height: 3rem;
    background-color: #eee; /* MÃ u ná»n cá»§a thanh chÆ°a hoÃ n thÃ nh */
    border-radius: 1.75rem; /* Bo trÃ²n cÃ¡c gÃ³c */
    overflow: hidden; /* Quan trá»ng Ä‘á»ƒ che pháº§n thanh bÃªn trong */
    position: relative;
    font-family: Arial, sans-serif;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* ThÃªm bÃ³ng Ä‘á»• nháº¹ */
    transition: box-shadow 0.3s ease;
    margin:1rem 0;
}

/* --- Thanh hiá»ƒn thá»‹ tiáº¿n Ä‘á»™ --- */
.progress-bar::after {
    content: ""; /* Báº¯t buá»™c cho pseudo-element */
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0; /* Khá»Ÿi táº¡o 0, sáº½ Ä‘Æ°á»£c thay Ä‘á»•i báº±ng JS hoáº·c báº±ng calc/biáº¿n CSS */
    background: linear-gradient(to right, #4CAF50, #8BC34A); /* Gradient mÃ u xanh lÃ¡ cÃ¢y */
	background: linear-gradient(to right, #11b6e3, #008ab3);
    border-radius: 1.5rem;
    transition: width 0.8s ease-in-out; /* Hiá»‡u á»©ng chuyá»ƒn Ä‘á»™ng mÆ°á»£t mÃ  */
    z-index: 1; /* Äáº£m báº£o nÃ³ náº±m dÆ°á»›i chá»¯ */
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

/* --- Hiá»ƒn thá»‹ chá»¯/giÃ¡ trá»‹ --- */
.progress-bar .current-progress {
    position: relative; /* Äáº·t á»Ÿ lá»›p trÃªn cÃ¹ng */
    z-index: 2;
    font-weight: bold;
    color: #fff; /* MÃ u chá»¯ máº·c Ä‘á»‹nh */
    padding: 0 10px;
    display: flex;
    align-items: center;
    gap: .3125rem;
}
.progress-bar .current-progress span
{
	font-size:2rem;
	color:#fff !important;
	
}
/* --- Cáº­p nháº­t giÃ¡ trá»‹ Width (Giáº£ sá»­ báº¡n dÃ¹ng biáº¿n CSS hoáº·c JS) --- */
/*
  Náº¿u báº¡n dÃ¹ng JavaScript Ä‘á»ƒ tÃ­nh toÃ¡n vÃ  Ä‘áº·t style, báº¡n sáº½ Ä‘áº·t 'width' cho ::after
  VÃ­ dá»¥: progressElement.style.setProperty('--progress-width', '75%');
*/
/* Dá»±a trÃªn yÃªu cáº§u: 24/32 = 75% */
.progress-bar[data-number]::after {
    /* ÄÃ¢y lÃ  cÃ¡ch giáº£ láº­p: báº¡n pháº£i tÃ­nh 24/32 * 100 = 75% */
    /* Trong thá»±c táº¿, báº¡n nÃªn dÃ¹ng JS Ä‘á»ƒ Ä‘áº·t thuá»™c tÃ­nh 'width' hoáº·c dÃ¹ng biáº¿n CSS */
    width: 75%; /* Thay tháº¿ báº±ng giÃ¡ trá»‹ Ä‘Ã£ tÃ­nh toÃ¡n: (data-number / total) * 100 */
	width: var(--progress-width); 
}
.progress-bar.pulsing {
    animation: pulse-zoom 1.125s infinite alternate;
}

.progress-bar.pulsing span {
    color: #fff; /* Chá»¯ tráº¯ng khi Ä‘ang "há»“i há»™p" */
   
}
@keyframes pulse-zoom {
    0% {
        transform: scale(1);
        /* BÃ³ng Ä‘á»• mÃ u xanh dÆ°Æ¡ng nháº¡t */
        box-shadow: 0 0 5px #4ad4ff, 0 0 10px #4ad4ff; 
    }
    50% {
        transform: scale(1.02);
        /* BÃ³ng Ä‘á»• mÃ u xanh dÆ°Æ¡ng chÃ­nh */
        box-shadow: 0 0 15px #11b6e3, 0 0 20px #11b6e3;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px #4ad4ff, 0 0 10px #4ad4ff;
    }
}
@keyframes pulse-zoom2 {
    0% {
        transform: scale(1);
        /* BÃ³ng Ä‘á»• mÃ u xanh dÆ°Æ¡ng nháº¡t */
        box-shadow: 0 0 5px #0f418b, 0 0 10px #0f418b; 
    }
    50% {
        transform: scale(1.02);
        /* BÃ³ng Ä‘á»• mÃ u xanh dÆ°Æ¡ng chÃ­nh */
        box-shadow: 0 0 15px #0f418b, 0 0 20px #0f418b;
    }
    100% {
        transform: scale(1);
        box-shadow: 0 0 5px #0f418b, 0 0 10px #0f418b;
    }
}
.bcs_normal-list, .bcs_featured-list {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
}
.bcs_normal-list .bc-item,
.bcs_featured-list .bc-item
{
   width: calc((100vw - 3*1.85rem)/4);
   box-sizing: border-box;
}
.bcs_normal-list .bc-item
{
    width: calc((100% - 2*1.5rem)/3);
}
.allbc-section .bc-item:nth-child(n+4)
{
	 width: calc((100% - 3*1.5rem)/4);
}
.allbc-section .bc-item
{
    display:flex;
    align-items:center;
    gap:1rem;
    background:#f5f5f5;
    border:thin solid #ccc;
    padding:.5rem;
    box-sizing:border-box;
    border-radius:.5rem;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 128, 64, 0.08);
    transition: all 0.25s ease-in-out;
    border: 1px solid rgba(0, 0, 0, 0.08);
    overflow: hidden;
    box-sizing: border-box;
}
.allbc-section .bc-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 18px rgba(0, 128, 64, 0.15);
  border-color: rgba(0, 128, 64, 0.2);
}
.allbc-section .bc-item .bc-thumb
{
    flex:none;
    width:30%;
}
.allbc-section .bc-item .bc-content
{
    display:flex;
    flex-direction:column-reverse;
}
.allbc-section .bc-logo img
{
    height: 1.75rem;
    border-radius: 0;
    width:auto;
    aspect-ratio: unset;
    width: auto;
}
.allbc-section .bc-item:nth-child(1) .bc-logo img,
.allbc-section .bc-item:nth-child(4) .bc-logo img,
.allbc-section .bc-item:nth-child(7) .bc-logo img
{
	 height: 1.25rem;
}
.allbc-section .bc-item:nth-child(n+4) .bc-title
{
	font-size:1rem;
}
.bc-logo
{
	padding:.25rem;
}
/* .bc-item:first-child .bc-logo,
.bc-item:nth-child(3) .bc-logo
{
	width:max-content;
	background:#d61313;
	display:flex;
	align-items:center;
	justify-content:center;
	
}
.bc-item:nth-child(3) .bc-logo
{
	background:#66a763;
} */
.allbc-section .bc-date
{
    font-size:.875rem;
}
.allbc-section .bc-title
{
    font-weight:500;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 3;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    margin-bottom: .5rem;
    line-height: 1.4;
}
.allbc-section img
{
    border-radius:.5rem;
    width: 100%;
	aspect-ratio: 4/3;
	object-fit: cover;
	width: 100%;
	height:auto;
	
}
.bc-item .bc-thumb
{
    overflow:hidden;
}
.allbc-section .bc-item .bc-thumb
{
    border-radius:.5rem;
}
.bc-item .bc-thumb img
{
    transition:all .25s;
    object-fit: cover;
}
.bc-item:hover .bc-thumb  img
{
    transform:scale(1.075);
}
.page-template-pickleball .allbc-section
{
	padding-bottom:4rem;
}
@media screen and (max-width: 1023px)
{
	 .offcanvas-close {
    right: 1.25rem;
    top: 1.25rem;
    z-index: 99;
    overflow: visible;
    width: .875rem;
    height: .875rem;
    margin: 0;
    padding: .3125rem;
    cursor: pointer;
    opacity: 1;
    border: 0;
    outline: 0;
    background-color: transparent;
    display: inline-block;
    position: absolute;
    display: none;
  }
  .offcanvas-close > span,
  .search-close > span {
    display: block;
    width: 100%;
  }
  .offcanvas-close .bar,
  .search-close .bar {
    position: absolute;
    display: block;
    width: 1.125rem;
    height: .125rem;
    content: '';
    -webkit-transition: top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.2s, -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    background: #4F78A4;
    -webkit-transition: top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
    transition: top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s, top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1);
    transition: transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s, top 0.3s cubic-bezier(0.645, 0.045, 0.355, 1), -webkit-transform 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0.3s;
    -webkit-transform: rotate(0);
            transform: rotate(0);
    opacity: 0;
  }
  .offcanvas-close .bar:nth-child(1),
  .search-close .bar:nth-child(1) {
    top: .625rem;
  }
  .offcanvas-close .bar:nth-child(2),
  .search-close .bar:nth-child(2) {
    top: .625rem;
  }
  body.offcanvas-active .offcanvas-close .bar:nth-child(1),
  body.search-opened .search-close .bar:nth-child(1) {
    -webkit-transform: rotate(45deg);
            transform: rotate(45deg);
    opacity: 1;
  }
  body.offcanvas-active .offcanvas-close .bar:nth-child(2),
  body.search-opened .search-close .bar:nth-child(2) {
    -webkit-transform: rotate(-45deg);
            transform: rotate(-45deg);
    opacity: 1;
  }
	.offcanvas-menu svg {
    width: 2rem;
  }
  .offcanvas-menu {
    /* position: absolute; */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
  }
  .offcanvas-menu svg path {
    -webkit-transform: scaleX(1.5);
            transform: scaleX(1.5);
	  fill:#11b6e3;
  }
  .menu-wrap {
    display: flex;
    padding: 4.0625rem 1.25rem 1.25rem;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 120vh;
    width: 76vw;
    position: fixed;
    background: #fff;
    left: 0;
    top: 0;
    z-index: 9999999;
    -webkit-transform: translateX(-76vw);
    transform: translateX(-76vw);
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    -webkit-animation-fill-mode: none !important;
    animation-fill-mode: none !important;
    -webkit-animation: none !important;
    animation: none !important;
	  flex-direction:column;
	  align-items:flex-start;
	  justify-content:flex-start;
	  border-right:5px solid #11b6e3;
  }
  html.night-mode .menu-wrap,
  html.night-mode .search-section,
  html.night-mode .note-toolbar {
    background: #242f3d;
  }
  html.night-mode .offcanvas-close .bar, html.night-mode .search-close .bar {
    background: #fff;
  }
  .menu-wrap #primary {
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
        -ms-flex-direction: column;
            flex-direction: column;
    -webkit-box-align: start;
        -ms-flex-align: start;
            align-items: flex-start;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  .menu-wrap #primary > li > a {
    line-height: 3.125rem;
    font-weight: 500;
    font-size: 1em;
  }
  .menu-wrap #primary > li > a svg {
    display: none;
  }
  body.offcanvas-active .menu-wrap {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    -webkit-box-shadow: 0 0 1.5625rem rgba(0, 0, 0, 0.2);
            box-shadow: 0 0 1.5625rem rgba(0, 0, 0, 0.2);
  }
  body.offcanvas-active {
    height: 100%;
    overflow-y: hidden;
  }
  #dt-main-content:before {
    -webkit-transition: all 0.4s ease;
    transition: all 0.4s ease;
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0);
    z-index: -1;
  }
  body.offcanvas-active #dt-main-content:before {
    content: "";
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    z-index: 98;
    -webkit-transform: translateX(0%);
    transform: translateX(0%);
  }
  .sidebar-search {
    position: absolute;
    right: 1rem;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
	.page-template-pickleball .btn
	{
		font-size:.875rem;
	}
	.header-btns .btn
	{
		font-size:0;
		min-width: unset;
		width: 2.5rem;
		height: 2.5rem;
		flex: none;
		padding: .25rem;
	}
	.header-inner .logo
	{
		flex:none;
		width: 9rem;
	}
	.header-inner
	{
		padding:.5rem 0;
	}
	.header-btns .btn img
	{
		margin:0;
	}
	.location-wrap
	{
		flex-wrap:wrap;
	}
	.location-wrap>*
	{
		width:100%;
	}
	.client-item img
	{
		width: auto;
	}
	.clients>div
	{
		gap:3rem;
	}
	.clients-bt .client-item img, .clients-tt .client-item img
	{
		max-width: 9rem;
	}
	.clients-bt .client-item img
	{
		max-width:7rem;
	}
	.daymonth .day
	{
		font-size:5rem;
	}
	.time,
	.countdown-wrap,
	.category-item-content p
	{
		font-size:1.5rem;
	}
	.countdown>span,
	.category-item-content h2, .program-inner .section-title, .prepare-inner > h2
	{
		font-size: 2rem;
	}
	.countdown>span small,
	.category-item-content p span
	{
		font-size:1rem;
	}
	.category-list
	{
		flex-wrap:wrap;
	}
	.category-item
	{
		width:100%;
		padding: 1.5rem;
	}
	 label[for="files"]
    {
        flex-wrap:wrap;
    }
	.price
	{
		font-size:1.25rem;
	}
	.category-item .cta__button
	{
		width: 12.5rem;
		letter-spacing:0;
		padding: .55rem 1rem;
	}
	.category-item-img
	{
		width:70%;
	}
	.form-inner
	{
		flex-wrap:wrap;
	}
	.page-template-pickleball .form-group
	{
		margin:0;
	}
	.page-template-pickleball .form-group input
	{
		margin-bottom:0;
	}
	.form-buttons .btn
	{
		width:11rem;
		font-size:1rem;
	}
	.payment
	{
		padding:0;
		text-align:center;
		display: flex;
		justify-content: center;
		width: 100%;
	}
	.payment img
	{
		width:70%;
	}
	.program-inner
    {
        padding:2rem;
        background-size: cover;
        background-position-x: 5%;
        min-height: 14rem;
    }
	.program-inner p
	{
		font-size:1rem;
	}
	.marque-wrap .title
	{
		font-size: 1.5rem;
	}
	.prepare-inner > h2.section-title
	{
		/* white-space:nowrap; */
		font-size:1.875rem;
	}
	.footer-logo img
	{
		width: 6rem;
	}
	.footer-title
	{
		font-size:1.25rem;
	}
	.large-title, .large-title a
	{
		font-size:6rem;
	}
	.large-title
	{
		margin-bottom: -3.5rem;
	}
	.sticky-btns,
	.sticky-progress
	{
		display:block;
		position:fixed;
		bottom:0;
		width:100%;
		display:flex;
		z-index:99999;
	}
	.sticky-btns .btn
	{
		border-radius:0;
		flex-grow:1;
		flex-basis:0;
	}
	.sticky-progress
	{
		bottom:2.75rem;
	}
	.sticky-progress
	{
		gap:.5rem;
		background:#fff;
		padding:.5rem 0;
		border-top:thin solid #ddd;
	}
	.sticky-progress-box
	{
		flex-basis:0;
		flex-grow:1;
		text-align:center;
	}
	.sticky-progress-box .title
	{
		font-weight:500;
	}
	.sticky-progress-box .progress-bar
	{
		margin:.25rem 0 1rem;
		animation: pulse-zoom2 1.125s infinite alternate;
		padding-top: .375rem;
	}
	.sticky-progress-box  .progress-bar::after
	{
		background:#0f418b;
	}
	.sticky-progress .progress-bar .current-progress
	{
		font-size:.875rem;
		color:#c7f705;
		flex-wrap: wrap;
		row-gap: 0;
		align-items: center;
		justify-content: center;
	}
	.sticky-progress .progress-bar .current-progress .title
	{
		text-align:center;
		width:100%;
		margin: 0 0 -.3125rem;
		line-height: 1;
	}
	.sticky-progress .progress-bar .current-progress span
	{
		font-size:1.25rem;
		color:#c7f705 !important;
		line-height: 1;
	}
	.btn--tuvan
	{
		border-right:thin solid #bdeaff85;
	}
	body .form-buttons .btn
	{
		height: 3.875rem;
		font-size: 1.5rem;
		min-width: 19rem;
	}
	.payment
	{
		display:none;
	}
	.elementor-scrolling-icon
	{
		width:1.75rem;
	}
	.prepare-section
	{
		margin-top:1rem;
	}
	.prepare-popup-body
	{
		flex-wrap:wrap;
	}
	.prepare-popup-img
	{
		width:100%;
	}
	.om
	{
		display:block;
	}
	footer
	{
		margin-bottom:3rem;
	}
	.sticky-menu #dt-header .dt-main-header
	{
		height:4.25rem;
	}
	.clients-tt .client-item:nth-child(1)
	{
		/* width:100%; */
	}
	.clients>.clients-tt
	{
		row-gap:1rem;
	}
	.table-hm
	{
		flex-wrap:wrap;
	}
	.table-hm-box
	{
		width:100%;
		min-width:unset;
	}
	.progress-bar .current-progress 
	{
		font-size:1rem;
	}
	.progress-bar .current-progress span
	{
		font-size:1.5rem;
	}
	.current-progress[style] 
	{
		left:-4.75rem !important;
	}
	.allbc-section .bc-item:nth-child(n+4),
	 .bcs_normal-list .bc-item, .bcs_featured-list .bc-item
    {
        width:100vw
    }
	.page-template-pickleball .allbc-section .section-title
	{
		font-size:1.5rem;
	}
	.allbc-section .bc-item:nth-child(n+1) .bc-title
	{
		font-size:1.125rem;
	}
	.sticky-progress
	{
		display: none  !important;
	}
}

