/* ============================================================================
 * FosWooPopup - popup.css
 * ============================================================================
 * Lastupdate: 2025-06-29
 * @version 1.2.0
 */

/* ============= Popup Variables ============= */
:root {
	/* ======== Color======== */
	--fosPopup--black-1: hsla(0, 0%, 0%, 1);
	--fosPopup--black-02: hsla(0, 0%, 0%, .2);
	--fosPopup--black-04: hsla(0, 0%, 0%, .4);
	--fosPopup--black-06: hsla(0, 0%, 0%, .6);
	--fosPopup--black-08: hsla(0, 0%, 0%, .8);

	--fosPopup--white-1:hsla(0, 100%, 100%, 1);
	--fosPopup--white-01:hsla(0, 100%, 100%, .1);
	--fosPopup--white-02:hsla(0, 100%, 100%, .2);
	--fosPopup--white-04:hsla(0, 100%, 100%, .4);
	--fosPopup--white-06:hsla(0, 100%, 100%, .6);
	--fosPopup--white-08:hsla(0, 100%, 100%, .8); 

	--fosPopup--red-1:hsla(0, 100%, 50%, 1);
	--fosPopup--red-02:hsla(0, 100%, 50%, .2);
	--fosPopup--red-04:hsla(0, 100%, 50%, .4);
	--fosPopup--red-06:hsla(0, 100%, 50%, .6);


	--lavender: #8F87F1;
	--lavender--light-1: #A9A1FF;
	--lavender--light-2: #C2BAFF;

	--lavender--dark-1: hsla(245, 47%, 44%, 1);
	--lavender--dark-6: hsla(245, 47%, 44%, .6);


	--popup-clr--White: hsla(0, 100%, 100%, 1);
	--popup-clr--White-1: hsla(0, 100%, 100%, .1);
	--popup-clr--White-2: hsla(0, 100%, 100%, .2);
	--popup-clr--White-8: hsla(0, 100%, 100%, .8);

	/*CTA DIV BG CLR*/
	--cta-div-bg-clr--style-1: transparent;
	--cta-div-bg-clr--style-2: var(--lavender);
	--cta-div-bg-clr--style-3: var(--fosPopup--black-02);
	--cta-div-bg-clr--style-4: var(var(--fosPopup--black-1));
	--cta-div-bg-clr: var(--cta-div-bg-clr--style-2);

	/*CTA DIV SHADOW*/
	--cta-div-bshadow: var(--lavender--dark-6) 0px 10px 20px -10px;

	/*CTA BTN > BG*/
	--cta-btn--bg-clr--style-1: var(--fosPopup--white-1);
	--cta-btn--bg-clr--style-2: var(--fosPopup--white-01);
	--cta-btn--bg-clr: var(--cta-btn--bg-clr--style-1);

	--cta-btn--bg-bshadow: 
		rgba(132, 132, 223, 0.25) 0px 50px 100px -20px,
		rgba(8, 51, 87, 0.3) 0px 30px 60px -30px,
		rgba(39, 61, 83, 0.25) 0px -2px 6px 0px inset;

	/*CTA BTN > BG > Content */
	--cta-btn--content-clr:  var(--cta-div-bg-clr);

	/*
	PAGINATION
	*/
	--normal-pagination-bullet-bg-clr: var(--fosPopup--black-04);
	--active-pagination-bullet-bg-clr: var(--cta-div-bg-clr);
	--active-pagination-bullet-border-clr: var(--fosPopup--white-04);


	/* ======== RADIUS ======== */
	--fosPopup--rad-1: 1rem;
	--fosPopup--rad-125: 1.25rem;
	--fosPopup--rad-2: 2rem;

	/* ======== PADDING ======== */
	--fosPopup--pad-025: .25rem;
	--fosPopup--pad-05: .5rem;
	--fosPopup--pad-1: 1rem;
	--fosPopup--pad-2: 2rem;
}

/*
========================================================================================================
                                   .fos-popup--style-1 | XỦ LÝ VARIABLE CHO STYLE 1
========================================================================================================
*/
.fos-popup--style-1 {
	/*
	=========================================================
	Class: fospopup
	=========================================================
	*/
	--fosPopup--pad: 0;
	--fosPopup--vertical-pad: 0 .5rem 1rem;
	--fospopup--bg-clr: transparent; 
	--fospopup--z-index: 9999;

	/*P2.overlay*/
	--fosPopup--overlay--bg-clr: var(--fosPopup--black-06);
	--fospopup--overlay--z-index: 1;

	/*P3: INNER DIV | ⚠️ HAVE TO USE MEDIA ENQUIERY*/
	--fospopup--inner--w: 90vw;
	--fospopup--inner--max-w: 420px;
	--fospopup--inner--h: 120vw;
	--fospopup--inner--max-h: 550px;

	--fospopup--inner--mar: auto;
	--fospopup--inner--pad: 0;
	--fospopup--inner--rad: var(--fosPopup--rad-2);

	--fospopup--inner--bg-clr: var(--lavender--light-1);
	--fospopup--inner--bshadow:
			rgba(132, 132, 223, 0.25) 0px 50px 100px -20px,
			rgba(8, 51, 87, 0.3) 0px 30px 60px -30px,
			rgba(39, 61, 83, 0.35) 0px -2px 6px 0px inset;
	
	--fospopup--inner--overflow: unset;
	--fospopup--inner--z-index: 2;

	/*
	=========================================================
	Class: P4: SWIPER-CONTAINER
	=========================================================
	*/
	--fospopup--swiper-container--w: calc( var(--fospopup--inner--max-w) - 3rem);
	--fospopup--swiper-container--h: calc(var(--fospopup--swiper-container--w) * 5 / 4);
	--fospopup--swiper-container--max-w: var(--fospopup--swiper-container--w);
	--fospopup--swiper-container--max-h: var(--fospopup--swiper-container--h);

	--fospopup--swiper-container--mar: -3rem auto 0;
	--fospopup--swiper-container--pad: 0;
	--fospopup--swiper-container--rad: var(--fosPopup--rad-2);


	--fospopup--swiper-container--bg-clr: var(--lavender--light-1); /* not use*/
	--fospopup--swiper-container--bshadow:
			rgba(132, 132, 223, 0.25) 0px 50px 100px -20px,
			rgba(8, 51, 87, 0.3) 0px 30px 60px -30px,
			rgba(39, 61, 83, 0.35) 0px -2px 6px 0px inset; /* not use*/

		
	--fospopup--swiper-container--overflow: unset; /* not use*/
	--fospopup--swiper-container--z-index: 2; /* not use*/


	/*
	=========================================================
	Class: P6: SWIPER-SLIDE
	=========================================================
	*/
	--fospopup--swiper-slide--w: var(--fospopup--swiper-container--w);
	--fospopup--swiper-slide--max-w: var(--fospopup--swiper-container--max-w);
	--fospopup--swiper-slide--h: var(--fospopup--swiper-container--h);
	--fospopup--swiper-slide--max-h: var(--fospopup--swiper-container--max-h);


	--fospopup--swiper-slide--mar: 0 auto;
	--fospopup--swiper-slide--pad: 0;
	--fospopup--swiper-slide--rad: var(--fosPopup--rad-2);

	--fospopup--swiper-slide--bg-clr: var(--fosPopup--red-04);

	--fospopup--swiper-slide--overflow: unset;
	--fospopup--swiper-slide--z-index: 2; /* not use*/

	/*
	=========================================================
	Class: P7: SWIPER-SLIDE-INNER-PADDING | TRICK
	=========================================================
	*/
	--fospopup--swiper-slide-inner--w: 100%;
	--fospopup--swiper-slide-inner--h: 100%;
	
	--fospopup--swiper-slide-inner--mar: 0 auto;
	--fospopup--swiper-slide-inner--pad: 0 .5rem;
	--fospopup--swiper-slide-inner--rad: var(--fosPopup--rad-2);

	--fospopup--swiper-slide-inner--bg-clr: transparent;
	--fospopup--swiper-slide-inner--overflow: unset;
	--fospopup--swiper-slide-inner--z-index: 2; /* not use*/

	/*
	=========================================================
	Class: P8: SWIPER-SLIDE-IMAGE | OBJECT FIT COVER
	=========================================================
	*/
	--fospopup--slide-image--w: 100%;
	--fospopup--slide-image--max-w: var(--fospopup--swiper-slide--max-w);
	--fospopup--slide-image--h: 100%;
	--fospopup--slide-image--max-h: var(--fospopup--swiper-slide--max-h);
	
	--fospopup--slide-image--mar: -1rem auto 0;
	--fospopup--slide-image--pad: 0;
	--fospopup--slide-image--rad: var(--fosPopup--rad-2);
	
	--fospopup--slide-image--bg-clr: transparent;
	--fospopup--slide-image--overflow: hidden;
	--fospopup--slide-image--z-index: 2; /* not use*/
}

@media screen and (max-width: 468px) {
	.fos-popup--style-1
	{

		/*required for vertical direction*/
		--fospopup--inner--w: 420px;
		--fospopup--inner--max-w: 90vw;
		--fospopup--inner--h: 525px;
		--fospopup--inner--max-h: calc( var(--fospopup--inner--max-w) * 5 /4)
	}
}



/*
========================================================================================================
									#Utility-Classes
========================================================================================================
*/

.has-bg-gradient--1
{
	--color-1: #f6a9ca;
	--color-1-hex: #F6A9CA;
	--color-2: rgba(255, 238, 163, 1);
	--color-2-hex: #FFEEA3;

	background-color: #f6a9ca;
	background:-moz-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	background:-webkit-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	background:-o-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEA3', endColorstr='#F6A9CA', GradientType=0 );
	background:-ms-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	background:linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
}

.has-text-gradient--1
{
	--color-1: #f6a9ca;
	--color-1-hex: #F6A9CA;
	--color-2: rgba(255, 238, 163, 1);
	--color-2-hex: #FFEEA3;

	background-color: var(--color-1-hex);
	background:-moz-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	background:-webkit-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	background:-o-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#FFEEA3', endColorstr='#F6A9CA', GradientType=0 );
	background:-ms-linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%); 
	background:linear-gradient(90deg, var(--color-1) 0%, var(--color-2) 100%);

	/* Gradient chỉ áp dụng lên chữ */
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;

	/* Các trình duyệt khác (fallback nhẹ) */
	background-clip: text;
	color: transparent!important;
}


.has-gradient-bg--2
{
	background-color: var(--fosPopup--white-06);
	background:-moz-linear-gradient(90deg, var(--fosPopup--white-06) 0%, var(--lavender--light-2) 100%); 
	background:-webkit-linear-gradient(90deg, var(--fosPopup--white-06) 0%, var(--lavender--light-2) 100%); 
	background:-o-linear-gradient(90deg, var(--fosPopup--white-06) 0%, var(--lavender--light-2) 100%); 
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#A9A1FF', endColorstr='rgba(255, 255, 255, 0.6)', GradientType=0 );
	background:-ms-linear-gradient(90deg, var(--fosPopup--white-06) 0%, var(--lavender--light-2) 100%); 
	background:linear-gradient(90deg, var(--fosPopup--white-06) 0%, var(--lavender--light-2) 100%); 
}
.has-animate-gradient-bg
{
	background-size: 600% 600%;
}


/*use for all*/
.has-animate-gradient-bg
{
	animation:
		gradientMove 1s ease infinite 5s;
}



.has-blur-bg--1 {
  background-color: var(--fosPopup--black-04); /* fallback */
  position: fixed;
  z-index: 1;
}

/* Chỉ apply blur nếu trình duyệt hỗ trợ */
@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
  .has-blur-bg--1{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Màu nền nhẹ hơn khi có blur thật */
    background-color: var(--fosPopup--black-02);
  }
}

.has-flex--center-btn
{
	/*mostly usr for button, content*/
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-content: center;
	align-items: center;
}

/*
========================================================================================================
									LOCK-SCROLL
========================================================================================================
*/
body.js-lock-scroll {
	overflow: hidden;
	height: 100vh;
	position: fixed;
	width: 100%;
}

/*
========================================================================================================
									POPUP CONTAINER DIV
========================================================================================================
*/
.fospopup {
	display: none;
	position: fixed;
	inset: 0;
	align-items: center;
	justify-content: center;

	z-index: var(--fospopup--z-index);
}


/* Khi hiện (qua JS) */
.fospopup.popup-visible {
	display: flex;
	padding: var(--fosPopup--pad, 0);
	background: var(--fospopup--bg-clr);
	background-color: var(--fospopup--bg-clr);
}

@supports ((-webkit-backdrop-filter: blur(5px)) or (backdrop-filter: blur(5px))) {
  .fospopup.popup-visible{
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    /* Màu nền nhẹ hơn khi có blur thật */
    background-color: var(--fosPopup--black-02);
  }
}

/* HORIZONTAIL DIRECTION */
.fospopup.popup-visible.direction-horizontal {
	align-items: center;
}
/* VERTICAL DIRECTION */
.fospopup.popup-visible.direction-vertical {
	align-items: flex-end;
	padding: var(--fosPopup--vertical-pad);
}

/*
========================================================================================================
									POPUP OVERLAY
========================================================================================================
*/
.fospopup .overlay {
	position: absolute;
	inset: 0;
	background-color: var(--fosPopup--overlay--bg-clr);
	z-index: var(--fospopup--overlay--z-index);
}

/*
========================================================================================================
									POPUP INNER
========================================================================================================
*/
/* #BASE #INNER */
.fospopup .popup__inner {
	position: relative;
	margin: 0 auto; 
	padding: var(--fospopup--inner--pad, 0)!important;
	border-radius: var(--fospopup--inner--rad, 2rem);
	overflow: var(--fospopup--inner--overflow, unset);

	/**inner layout content */
	display: flex;
	flex-wrap: wrap;
	flex-direction: row; /*do not use column*/
	justify-content: center;
	align-content: flex-start;
	align-items: flex-start;

	z-index: var(--fospopup--inner--z-index, 2);
}

.fospopup.direction-horizontal .popup__inner,
.fospopup.direction-vertical .popup__inner
{
	/* same as aspect-ratio: 4/5 */
	width: var(--fospopup--inner--w);
	height: var(--fospopup--inner--h);
	max-width: var(--fospopup--inner--max-w);
	max-height: var(--fospopup--inner--max-h);

	background-color: var(--fospopup--inner--bg-clr);
	box-shadow: var(--fospopup--inner--bshadow);
}

/*
========================================================================================================
									SWIPER-CONTAINER
========================================================================================================
*/
/* #BASE #SWIPER-CONTAINER */
.popup--swiper .swiper-container
{
	position: relative;
	margin: var(--fospopup--swiper-container--mar, -3rem auto 0)!important;
	padding: var(--fospopup--swiper-container--pad);
}

.popup--swiper.direction-horizontal .swiper-container,
.popup--swiper.direction-vertical .swiper-container
{
	/* same as aspect-ratio: 4/5 */
	width: var(--fospopup--swiper-container--w);
	max-width: var(--fospopup--swiper-container--max-w);
	height: var(--fospopup--swiper-container--h);
	max-height: var(--fospopup--swiper-container--max-h);
}
/*
========================================================================================================
									SWIPER-WRAPER
========================================================================================================
*/
.popup--swiper .swiper-wrapper
{
	position: relative;
	margin: 0!important;
	padding: 0!important;
	width: 100%!important;
	height: 100%!important;
}

/*
========================================================================================================
									#SWIPER-SLIDE
========================================================================================================
*/
/* #BASE #SWIPER-SLIDE */
.popup--swiper
.swiper-wrapper > .swiper-slide {
  position: relative;
  margin: var(--fospopup--swiper-slide--mar, 0 auto);
  padding: var(--fospopup--swiper-slide--pad, 0);
  border-radius: var(--fospopup--swiper-slide--rad, 2);
  overflow: var(--fospopup--swiper-slide--overflow, unset);

  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 2em;
  text-align: center;
}

.popup--swiper.direction-horizontal .swiper-slide,
.popup--swiper.direction-vertical .swiper-slide
{
	/* same as aspect-ratio: 4/5 */
	width: var(--fospopup--swiper-slide--w);
	max-width: var(--fospopup--swiper-slide--max-w);
	height: var(--fospopup--swiper-slide--h);
	max-height: var(--fospopup--swiper-slide--max-h);
	margin: var(--fospopup--swiper-slide--mar);
	padding: var(--fospopup--swiper-slide--pad);
	overflow: var(--fospopup--swiper-slide--overflow);

	background-color: var(--fospopup--swiper-slide--bg-clr);
}

.popup--swiper
.swiper-wrapper > .swiper-slide 
{
    transition: transform 0.4s ease, opacity 0.4s ease;
    transform: scale(0.5);
    opacity: 0; /*opacity: 0.6;*/
	filter: blur(2px);
}
.popup--swiper
.swiper-wrapper > .swiper-slide.swiper-slide-active
{
    transform: scale(1.05)!important;
    opacity: 1;
    z-index: 2;
	filter: blur(0px);
}

/*
========================================================================================================
									SWIPER-SLIDE-PADDING | TRICK
========================================================================================================
*/
.popup--swiper .swiper-slide__inner-padding
{
	position: relative;
	width: var(--fospopup--swiper-slide-inner--w, 100%);
	height: var(--fospopup--swiper-slide-inner--h, 100%);
	margin: var(--fospopup--swiper-slide-inner--mar, 0 auto);
	padding: var(--fospopup--swiper-slide-inner--pad, 0 .5rem .25rem);
	border-radius: var(--fospopup--swiper-slide-inner--rad, 2rem);
	overflow: var(--fospopup--swiper-slide-inner--overflow, unset);

	background-color: var(--fospopup--swiper-slide-inner--bg-clr, transparent);
}
/*
========================================================================================================
									#SLIDE-IMAGE 
========================================================================================================
*/
/* #BASE DIRECTION #SLIDE-IMAGE*/
.popup--swiper .popup__slide-image
{
	/*require for padding*/
	position: relative;
	/* for using object fit */
    display: block;
	overflow: var(--fospopup--slide-image--overflow, hidden)!important;
	object-fit: cover;
	object-position: center;
	background-color: var(--fospopup--slide-image--bg-clr);
}

.popup--swiper.direction-horizontal .popup__slide-image,
.popup--swiper.direction-vertical .popup__slide-image
{
	/* ⚠️ belong to SWIPER-SLIDE-INNER */
	width: var(--fospopup--slide-image--w, 100%);
	max-width: var(--fospopup--slide-image--max-w);
	height: var(--fospopup--slide-image--h, 100%);
	max-height: var(--fospopup--slide-image--max-h);
	margin: var(--fospopup--slide-image--mar, 0 auto);
	padding: var(--fospopup--slide-image--pad, 0);
	border-radius: var(--fospopup--slide-image--rad, 2rem);
}
/*
=========================================================
[] #SLIDE-IMAGE > IMG
=========================================================
*/
.popup--swiper .popup__slide-image img
{
	/* use object fit cover */
	display: block; /*required*/
    position: absolute;
	inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}


/*
========================================================================================================
									USER ACTIONS
========================================================================================================
*/

:root {
	
	/* user actions ruller*/
	--user-actions--Bottom-r: -4.5rem;
	/*
	P1 FLEX DIV
	*/
	--user-actionsFlex--Width: 100%;
	--user-actionsFlex--maxWidth: var(--swipper-slide--maxWidth);
	--user-actionsFlex--Height: 4rem;
	--user-actionsFlex--maxHeight: 4rem;
	--user-actionsFlex--Gap: .5rem;
	--user-actionsFlex--Gap-r: .25rem;
	--user-actionsFlex--Margin: unset;
	--user-actionsFlex--Padding: 0;
	--user-actionsFlex--Radius: 0;
	
	--user-actionsFlex--bgClr: transparent;
	

	/*
	P2 USER-ACTIONS-RULER
	*/
	--user-actions--Width-r: 2.6rem;
	--user-actions--Height-r: 3rem;
	--user-actions--Radius-r: 3rem;
	--user-actions--bgPadding-r: .25rem;

	--gray:  #20252D; 
	--gray-dark-1: #20252D;
	--gray-light-1: #B8BDC5;


	/*
	P3 & 4 | COUNDOWN-VARIABLE & CLOSE-BTN
	*/
	--countdown--Width-r: 80%; /* 80% of .countdown-n-close col*/
	--countdown--maxWidth-r: 2rem;
	--countdown--Height-r: var(--user-actions--Width-r);
	--countdown--maxHeight-r: var(--user-actions--Height-r);

	--countdown--Padding-r: var(--user-actions--bgPadding-r, .25rem);
	--countdown--Radius-r: var(--user-actions--Radius-r);

	--countdown--bg-clr: transparent; /*div*/
	--countdown--bg--bg-clr: var(--fosPopup--black-08); /*.bg*/
	--countdown--bshadow:  0 10px 30px var(--fosPopup--black-02);
	--countdown--btn-content-clr:   var(--gray-light-1);
	
	/*
	P5 | CTA
	*/
	--cta--Width-r: calc(100% - var(--user-actions--Width-r) - .75rem); /* 80% of .countdown-n-close col*/
	--cta--maxWidth-r: 2rem; /*not use*/
	--cta--Height-r: var(--user-actions--Height-r);
	--cta--maxHeight-r: var(--user-actions--Height-r);

	--cta--Padding-r: var(--user-actions--bgPadding-r, .25rem);
	--cta--Radius-r: var(--user-actions--Radius-r);
	--cta--bShadow:  0 10px 30px rgba(0, 0, 0, 0.3);

	--cta-content--Radius-r: var(--user-actions--Radius-r);
}

@media screen and (max-width: 500px) {
	:root {
		--user-actions--bgPadding-r: .125rem;
	}
}

@media screen and (max-width: 380px) {
	:root {
		
		/* user actions ruller*/
		--user-actions--Width-r: 2rem;
		--user-actions--Height-r: 2.3rem;
	}
}

/*
=========================================================
[#USER ACTIONS] RESET ORTHER BUTTON CSS
(!) !important for make sure
=========================================================
*/
.fospopup button,
.fospopup button:hover,
.fospopup button:active,
.fospopup button:focus
{
	margin: unset!important;
	padding: unset!important;
	border: none!important;
	padding: unset!important;

	border: none!important;
	border-radius: unset!important;
	box-shadow: unset!important;

	outline-style: solid;
    outline-color: transparent;
	outline: none!important;

	background: transparent!important;
	background-color: transparent!important;
}


/*
=========================================================
[#USER ACTIONS] USER-ACTIONS FLEX
=========================================================
*/
.popup--swiper.direction-horizontal .user-actions.flex,
.popup--swiper.direction-vertical .user-actions.flex 
{
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	bottom: var(--user-actions--Bottom-r);

	width: 100%;
	max-width: var(--user-actionsFlex--maxWidth);
	height: var(--user-actionsFlex--Height, 4rem);
	max-height: var(--user-actionsFlex--maxHeight, 4rem);
	
	/* margin: 0 auto; | useless ? absolute */
	padding: var(--user-actionsFlex--Padding);
	border-radius: var(--user-actionsFlex--Radius);

	display: flex;
	flex-wrap: wrap;
	gap: var(--user-actionsFlex--Gap);
	flex-direction: row;
	justify-content: space-between;
	align-content: center;
	align-items: center;

	background: var(--user-actionsFlex--bgClr);
	background-color: var(--user-actionsFlex--bgClr);
}

/*
=========================================================
[#USER ACTIONS] LEFT COL
=========================================================
*/

/*
COL: 
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close,

.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close
{
	position: relative;
	width: calc(var(--user-actions--Width-r) - var(--user-actionsFlex--Gap-r));

	/*for centering: .has-flex--center-btn */

	background: transparent!important;
	background-color: transparent!important;
	z-index: 10;
}

/*
.countdown-btn & close-btn DIV
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close > .countdown-btn,
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close> .close-btn,

.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close > .countdown-btn,
.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close> .close-btn
{
	width: var(--countdown--Width-r);
	max-width: var(--countdown--maxWidth-r, 2rem);
	height: var(--countdown--Height-r, 2.6rem);
	max-height:var(--countdown--maxHeight-r, 3rem);
	
	padding: var(--countdown--Padding-r, .25rem); /*orangered need to review*/
	border-radius: var(--countdown--Radius-r, 3rem);
	
	background-color: var(--countdown--bg-clr);
	box-shadow: var(--countdown--bshadow);
}

/*
BG
*/

.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close > .countdown-btn .bg,
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close> .close-btn .bg,

.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close > .countdown-btn .bg,
.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close> .close-btn .bg
{
	width: 100%;
	height: 100%;
	border-radius: var(--countdown--Radius-r, 3rem);
	background-color: var(--countdown--bg--bg-clr);
} 

/*
BTN-CONTENT
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close > .countdown-btn .btn-content,
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close> .close-btn .btn-content,

.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close > .countdown-btn .btn-content,
.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close> .close-btn .btn-content
{
	width: 100%;
	height: 100%;

	/* styling*/
	font-family: var(--main-font);
	font-size: 1.25rem;
	font-weight: 400;
	line-height: 1rem;

	color: var(--countdown--btn-content-clr);

	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;

	background-color: transparent!important;
	border-radius: var(--countdown--Radius-r, 3rem);
	border: none!important;

	cursor: pointer;
	z-index: 3;
}
/*HIDDEN / CHANGE BY JS */
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close > .countdown-btn.hidden,
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close> .close-btn.hidden,

.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close > .countdown-btn.hidden,
.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close> .close-btn.hidden
{
	opacity: 0;
	display: none;
	visibility: hidden;
}

/*
#ANIMATION Scale & Fade in
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .countdown-n-close> .close-btn,

.popup--swiper.direction-vertical
.user-actions.flex > .countdown-n-close> .close-btn
{
	opacity: 0;
	animation:
		scaleUp .2s ease forwards .5s,
		fadeInUserAction .2s ease forwards .5s;
}


/*
=========================================================
[#USER ACTIONS] RIGHT COL
=========================================================
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .cta-div,

.popup--swiper.direction-vertical
.user-actions.flex > .cta-div
{
	position: relative;
	width: var(--cta--Width-r);
	height: var(--cta--Height-r);
	max-height: var(--cta--maxHeight-r);

	/*for centering: .has-flex--center-btn */
	
	padding: var(--cta--Padding-r, .25rem); /*KHOẢNG TRỐNG ĐỂ THẤY HIỆU ỨNG*/
	border-radius: var(--cta--Radius-r, 3rem);

	overflow: hidden!important;
	background-color: var(--cta-div-bg-clr);
	box-shadow: var(--cta--bShadow);
	z-index: 10;
}

/*
CTA-BTN
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .cta-div > .cta-btn,

.popup--swiper.direction-vertical
.user-actions.flex > .cta-div > .cta-btn
{
	position: relative; /*phu thuoc vao cta-div*/
	margin: 0!important;
	padding: 0!important;
	width: 100%;
	height: 100%;
	border-radius: var(--cta-content--Radius-r);

	/*for centering: .has-flex--center-btn */
}

/*
BG
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .cta-div > .cta-btn > .bg,

.popup--swiper.direction-vertical
.user-actions.flex > .cta-div > .cta-btn > .bg 
{
	/*required for .btn-content clicking*/
	margin: 0!important;
	padding: 0!important;
	border-radius: var(--cta-content--Radius-r);
	width: 100%;
	height: 100%;

	/*for centering: .has-flex--center-btn */

	/*bg-black | required*/
	background-color: hsla(0, 100%, 100%, 1);
	/* background-color: var(--popup-clr--White-1); */

	background-color: var(--cta-btn--bg-clr);
	box-shadow: var(--cta-btn--bg-bshadow);
	z-index: 1!important;
}
/*
Rotate-DIV
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .cta-div > .rotate-animation-div,

.popup--swiper.direction-vertical
.user-actions.flex > .cta-div > .rotate-animation-div
{
	background-color: hsla(0, 100%, 100%, 1);
	position: absolute;
    inset: 0;
	animation: rotateGradient ease infinite 3s;
	z-index: 0;
	filter: blur(1.5rem);
}

/* Keyframes quay vòng */
@keyframes rotateGradient {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}


.popup--swiper.direction-horizontal
.user-actions.flex > .cta-div > .cta-btn .btn-content,

.popup--swiper.direction-vertical
.user-actions.flex > .cta-div > .cta-btn .btn-content
{

	/*required for .btn-content clicking*/
	margin: 0!important;
	padding: 0!important;
	border-radius: var(--cta-content--Radius-r);
	width: 100%;
	height: 100%;

	/*for centering: .has-flex--center-btn */

	/* styling*/
	font-family: var(--main-font);
	font-size: 1.35rem;
	font-weight: 400;
	line-height: 1rem;

	text-align: center;
	text-decoration: none;
	text-transform: capitalize;
	white-space: nowrap;
	z-index: 3;
	color: var(--cta-btn--content-clr);
}
/*
#ANIMATION BG (!) Apply on Text
*/
.popup--swiper.direction-horizontal
.user-actions.flex > .cta-div > .cta-btn .btn-content,

.popup--swiper.direction-vertical
.user-actions.flex > .cta-div > .cta-btn .btn-content
{
	/* ANIMATION CTA: BG + FADEIN*/ 
	/* opacity: 0; */
	animation:
		/* fadeInUserAction .6s ease forwards 1s, */
		gradientMove 1s ease infinite 1s;
}


/*
========================================================================================================
									Swiper Action> .swiper-pagination-bullet
========================================================================================================
*/

/* [1/3] .Swiper-Pagination Layout */
.popup--swiper .swiper-pagination {
	display: flex!important;
	background-color: transparent;
	
}
.popup--swiper.direction-vertical .swiper-pagination {
	position: absolute;
	right: -.125rem!important;
	flex-direction: column!important;
	align-content: center!important;
	align-items: center!important;
}

.popup--swiper.direction-horizontal .swiper-pagination {	
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	display: flex!important;
	
	justify-content: center;
	align-items: center;
	width: 50vw !important;
	max-width: 20rem;
	background-color: transparent;
}

/* [2/3] Kích thước và màu mặc định của dấu chấm */
.popup--swiper.direction-horizontal
.swiper-pagination-bullet, 
.popup--swiper.direction-vertical
.swiper-pagination-bullet {
	width: 1rem;
	height: 1rem;
	background-color: var(--normal-pagination-bullet-bg-clr); /* màu chấm thường */
	opacity: .8;
	margin: .75rem 0!important;
	transition: background-color 0.3s ease, transform 0.3s ease;
	border-radius: 50%;
}
.popup--swiper.direction-horizontal .swiper-pagination-bullet {
	margin:  0 .75rem!important;
}
.popup--swiper.direction-vertical .swiper-pagination-bullet {
	margin: .75rem 0 !important;
}

/* [3/3] Dấu chấm đang active */
.popup--swiper .swiper-pagination-bullet.swiper-pagination-bullet-active {
	background-color:  var(--active-pagination-bullet-bg-clr);  /*active color */
	width: 1.25rem!important;
	height: 1.25rem!important;
	border: 4px solid var(--active-pagination-bullet-border-clr)!important;
	padding: 0!important;
}

/*
========================================================================================================
									STACK EFFECT > .swiper-button-prev,
========================================================================================================
*/

.popup--swiper .swiper-button-prev,
.popup--swiper .swiper-button-next {
	color: #f80000;
}

/*
========================================================================================================
									ANIMATION MANAGER
========================================================================================================
*/

/* Loop gradient movement */
@keyframes gradientMove {
	0%   { background-position: 0% 50%; }
	50%  { background-position: 100% 50%; }
	100% { background-position: 0% 50%; }
}

/* Keyframes quay vòng */
@keyframes rotateGradient {
	from {transform: rotate(0deg);}
	to {transform: rotate(360deg);}
}

/* Fade in */
@keyframes fadeInUserAction {
	from { opacity: 0; }
	to { opacity: 1; }
}

/* scaleUp */
@keyframes scaleUp {
	from { transform: scale(.2); }
	to { transform: scale(1); }
}


/* ============= Animation FadeIn/Out ============= */
@keyframes fadeIn {
	from { opacity: 0; transform: scale(0.95); }
	to   { opacity: 1; transform: scale(1); }
}

@keyframes fadeOut {
	from { opacity: 1; transform: scale(1); }
	to   { opacity: 0; transform: scale(0.95); }
}

.fadeIn  { animation: fadeIn  0.6s ease-out forwards; }
.fadeOut { animation: fadeOut 0.6s ease-in  forwards; }