/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                    V A R I A B L E S                                           */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/


:root
{
 --color-light:          #faf7f2;        
 --color-medium:         #f1eae1;
 --color-dark:           #c4bcb2;
 
 --color-alt-1:          #f8f5f0;
 --color-alt-2:          #d9d3cb;
 
 --color-accented:       #C3E2FF;
 --color-accented-select:#3aa5fb;
 --color-accented-light: #f66f9f;
 
 --color-alert:          #ff0084;
 --color-alert-light:    #f66f9f;
 
 --color-good:           #06D6A0;
 --color-soso:           #FECA01; 
 --color-bad:            #FF4F4F;

 --color-right:          #74d17f;
 
 --color-text-light:     #fdfbfb;
 --color-text-dark:      #585556;
 
 --color-black:          black; 
 --color-gray:           #8b8b8b;
 --color-white:          white;
 --color-noted:          #4db8c1;
 
 --color-wheel-0:        #774F38;
 --color-wheel-1:        #E08E79;
 --color-wheel-2:        #A4DCA8;  
 --color-wheel-3:        #8B4FA7;
 --color-wheel-4:        #C5E0DC;
 --color-wheel-5:        #74A3B3;
 --color-wheel-6:        #3B5F6D;
 --color-wheel-7:        #253944;
 --color-wheel-8:        #F5C594;
 --color-wheel-9:        #AE7132;
 --color-wheel-10:       #FCD4CA;
 --color-wheel-11:       #F5C2BF;
 --color-wheel-12:       #EF9BAA;
 --color-wheel-13:       #AB8AE1;
 --color-wheel-14:       #ECE5CE;
 --color-wheel-15:       #F1D4AF;
 
 --shadow-sharp-bottom:  0px 5px  10px 0px rgba(50, 50, 50, 0.3);
 --shadow-sharp:         0px 0px 6px -1px rgba(0, 0, 0, 0.08);
 --shadow-sharp-top:     0px -5px 10px 0px rgba(50, 50, 50, 0.3);
 /* --shadow-sharp-right:   11px 4px 23px -8px rgba(0,0,0,0.76); */
 --shadow-sharp-right:   0px 4px 4px rgba(0, 0, 0, 0.8);
 --shadow-soft-bottom:   0px 0px 121px -3px rgba(0,0,0,0.47); 
 --shadow-soft-right:    12px -1px 50px -9px rgba(0,0,0,0.47);
 
 --shadow-sharp-text:    0px 5px 10px  rgba(50, 50, 50, 0.3);
 --shadow-soft-text:     0px 0px 121px rgba(0,0,0,0.47); 
}



@font-face 
{
 font-family: "main-light";
 src: url("../../resources/fonts/HelveticaNeueLTPro-Th.woff2") format("woff2");
 /*src: url("../../resources/fonts/HelveticaNeue-UltraLight.otf") format("opentype");*/
}

@font-face 
{
 font-family: "main-plain";
 src: url("../../resources/fonts/HelveticaNeueLTPro-Lt.woff2") format("woff2");
 /*src: url("../../resources/fonts/HelveticaNeue-Light.otf") format("opentype");*/
}

@font-face 
{
 font-family: "main-bold";
 src: url("../../resources/fonts/HelveticaNeueLTPro-Bd.woff2") format("woff2");
 /*src: url("../../resources/fonts/HelveticaWorld-Bold.woff2") format("woff2");*/
}


@font-face 
{
 font-family: "main-cursive";
 src: url("../../resources/fonts/Georgia-Italic.woff2") format("woff2");
}


@font-face 
{
 font-family: "cartoon";
 src: url("../../resources/fonts/cartoon.woff2") format("woff2");
}

@font-face 
{
 font-family: "comicbook";
 src: url("../../resources/fonts/comicbook.woff2") format("woff2");
}

@font-face 
{
 font-family: "fancy";
 src: url("../../resources/fonts/3d.woff2") format("woff2");
}

@font-face 
{
 font-family: "handwriting";
 src: url("../../resources/fonts/handwriting.woff2") format("woff2");
}


@font-face 
{
 font-family: "diacritics";
 src: url("../../resources/fonts/Andika-cyrillic-ext.woff2") format("woff2");
}

@font-face 
{
 font-family: "extra handwriting";
 src: url("../../resources/fonts/KgNeatlyPrinted-6Gwg.woff2") format("woff2");
}

@font-face 
{
 font-family: "extra handwriting spaced";
 src: url("../../resources/fonts/KgNeatlyPrintedSpaced-yxrm.woff2") format("woff2");
}

@font-face 
{
 font-family: "extra typography";
 src: url("../../resources/fonts/Plantin Infant MT Std.woff2") format("woff2");
}








/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                  C O L O R   S C H E M E S                                     */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/


.color-noted
{
 color:            var(--color-noted);   
}


.color-accented
{
 background-color: var(--color-accented);
 color:            var(--color-text-dark);   
}



.color-dark
{
 background-color: var(--color-dark);
 color:            var(--color-text-dark);   
}



.color-medium
{
 background-color: var(--color-medium);
 color:            var(--color-text-dark);   
}



.color-light
{
 background-color: var(--color-light);
 color:            var(--color-text-dark);   
}


.color-white
{
 background-color:  var(--color-white);
 color:             var(--color-black);
}


.color-input
{
 background-color: var(--color-white);
 color: #050505;
}



.gradient-shadow-vertical
{
 background:linear-gradient(0deg, rgba(0,0,0,0.67) 0%, rgba(255,255,255,0) 50%);
}



.gradient-dark-vertical
{
 background:linear-gradient(0deg, var(--color-dark) 0%, rgba(255,255,255,0) 50%);
}




/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                     S T R U C T U R E                                          */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/


.structure-fullscreen
{
 position: absolute;
 top:      0;
 bottom:   0;
 left:     0; 
 right:    0;
}



.structure-overlay
{
 position : absolute; 
 left     : 0; 
 top      : 0; 
 width    : 100%; 
 height   : 100%; 
}


.structure-seamless
{
 border: 0px                   !important;
 background-color: transparent           ; 
 outline: none                 !important;
 resize: none                  !important;
}


.structure-seamless-noted
{
 border-top: 0px                             !important;
 border-left: 0px                            !important;
 border-right: 0px                           !important;
 border-bottom: 1px solid var(--color-noted) !important;
 background-color: transparent               !important;
 outline: none                               !important;
 resize: none                                !important;
}


.structure-absolute-center
{
 position:  absolute;
 left:      50%;
 top:       50%;
 transform: translate(-50%,-50%);
}





/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                       S P A C I N G                                            */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

.padding-minimal
{
 padding:    4px;
 box-sizing: border-box;
}


.padding-small
{
 padding:    8px;
 box-sizing: border-box;
}


.padding-medium
{
 padding:    16px;
 box-sizing: border-box;
}


.padding-large
{
 padding:    32px;
 box-sizing: border-box;
}


.padding-vertical
{
 padding-left:  0px !important;
 padding-right: 0px !important;
}


.padding-horizontal
{
 padding-top:    0px !important;
 padding-bottom: 0px !important;
}


.padding-no-left
{
 padding-left: 0px !important;
}

.padding-no-right
{
 padding-right: 0px !important;
}

.padding-no-top
{
 padding-top: 0px !important;
}

.padding-no-bottom
{
 padding-left: 0px !important;
}


.margin-small
{
 margin: 8px;
}


.margin-medium
{
 margin: 16px;
}


.margin-large
{
 margin: 32px;
}




.gap-small
{
 gap: 8px;
}


.gap-medium
{
 gap: 16px;
}


.gap-large
{
 gap: 32px;
}








/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                       B O R D E R S                                            */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

.border-rounded
{
 border-radius : 6px;
}


.border-circle
{
 border-radius : 50%;
}




.border-dark
{
 border: 1px solid var(--color-dark); 
}



.border-noted-bottom
{
 border-bottom: 1px solid var(--color-noted); 
}



.border-medium
{
 border: 1px solid var(--color-medium); 
}



.border-3d-bottom
{
 border-top:    1px solid var(--color-medium); 
 border-left:   1px solid var(--color-medium); 
 border-right:  1px solid var(--color-medium); 
 border-bottom: 3px solid var(--color-dark); 
}



.border-grip-left
{
 border-left:   4px solid var(--color-accented); 
}











/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                        S T Y L E S                                             */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/


.style-clickable
{
 cursor:      pointer;
 user-select: none;
}


.style-smooth-normal
{
 transition: all 0.33s ease-in-out; 
}

.style-smooth-fast
{
 transition: all 0.25s ease-in-out; 
}

.style-smooth-slow
{
 transition: all 0.5s ease-in-out; 
}



.style-evanescent-partial
{
 transition:  all 0.33s ease-in-out; 
 opacity: 0.33;
}

.style-evanescent-partial:hover
{
 opacity: 0.75;
}


.style-evanescent-total
{
 transition:  all 0.33s ease-in-out; 
 opacity: 0;
}

.style-evanescent-total:hover
{
 opacity: 0.5;
}

.style-evanescent-appear
{
 transition:  all 0.33s ease-in-out; 
 visibility: hidden;
}

.style-evanescent-appear:hover
{
 visibility:visible;
}



.style-growing
{
 transition:  all 0.33s ease-in-out; 
 transform:none;
}

.style-growing:hover
{
 transform:scale(1.1);
}



.style-selectable
{
 cursor    :  pointer;
 transition:  all 0.25s ease-in-out; 
 user-select: none;
}

.style-selectable:hover
{
 box-shadow:       var(--shadow-sharp);
}



.style-pushable
{
 cursor    :  pointer;
 transition:  all 0.25s 0s ease-in-out; 
 user-select: none;
}

.style-pushable:hover
{
 box-shadow:       var(--shadow-sharp);
 background-color: var(--color-accented) !important;
 color: var(--color-blue-primary) !important;
}




.style-pushable-flat
{
 cursor    :  pointer;
 transition:  all 0.25s 0s ease-in-out; 
 user-select: none;
}

.style-pushable-flat:hover
{
 background-color: var(--color-accented) !important;
}




.effect-highlight-light
{
 cursor    :  pointer;
 transition:  all 0.25s ease-in-out; 
 user-select: none;
}

.effect-highlight-light:hover
{
 background-color: var(--color-light) !important;
}



.effect-highlight-accented
{
 cursor    :  pointer;
 transition:  all 0.25s ease-in-out; 
 user-select: none;
}

.effect-highlight-accented:hover
{
 background-color: var(--color-red-primary) !important;
 color:            var(--color-white);
}

/* .effect-highlight-click
{
 background-color: var(--color-red-primary) !important;
 color:            var(--color-white) !important;
 border-radius: 10px;
} */

/* .effect-highlight-submenu
{
 background-color: var(--color-yellow-primary) !important;
 color:            var(--color-blue-primary);
 border-radius: 40px;
 font-family: "nunito-bold";
 text-decoration: none !important;
 padding: 0px 8px;
 white-space: nowrap;
 transition:  all 0.25s ease-in-out;
} */

.effect-highlight-course {
    background-color: var(--color-white) !important;
    color:            var(--color-blue-primary);
    border-radius: 40px;
    border: 2px solid var(--color-blue-primary);
    font-family: "nunito-bold";
    text-decoration: none !important;
    padding: 8px 10px;
}

.effect-highlight-text
{
 cursor    :  pointer;
 transition:  all 0.25s ease-in-out; 
 user-select: none;
}

.effect-highlight-text:hover
{
 color: var(--color-accented) !important;
}





.effect-highlight-outline
{
 cursor    :  pointer;
 transition:  all; 
 user-select: none;
}

.effect-highlight-outline:hover
{
 outline: 3px solid var(--color-blue-primary);	
}



.effect-highlight-active
{
 cursor    :  pointer;
 transition:  all; 
 user-select: none;
}

.effect-highlight-active:hover
{
    outline: 3px solid var(--color-blue-primary);		
    background-color: var(--color-yellow-light-2);
    color: var(--color-blue-primary);
}








.style-disabled
{ 
 opacity :       0.7;
 cursor  :       default !important;
 user-select:    none;
 pointer-events: none;
}


.style-hidden
{
 display: none;
 pointer-events: none;
}


.style-blurred-light 
{ 
 filter:blur(2px);
}



.style-blurred-medium 
{ 
 filter:blur(4px);
}



.style-blurred-strong
{
 filter:blur(16px);
}


.style-blurred-heavy
{
 filter:blur(32px);
}



.style-glass-thin
{
 opacity:0.5; 
 background-color:var(--color-black);
 mix-blend-mode:multiply; 
}



.style-translucent-light
{
 opacity:0.33;
}



.style-translucent-medium
{
 opacity:0.5;
}



.style-drag-dragging
{
 opacity:        0.67;
 mix-blend-mode: multiply;
}





.style-highlight-accented
{
 background-color: var(--color-accented) !important;
}


.style-highlight-light
{
 background-color: var(--color-light) !important;
}




/* .style-outlined-bad
{
 outline: 6px solid var(--color-bad);
} */


.style-outlined-alert
{
 outline: 6px solid var(--color-alert);
}

.style-outlined-soso
{
 outline: 6px solid var(--color-soso);
}


/* .style-outlined-good
{
 outline: 6px solid var(--color-good);
} */


.style-outlined-accented
{
 outline: 4px solid var(--color-accented-select);
}

/* .style-outlined-default
{
 outline: 4px solid white;
} */

.outline-inner
{
 outline-offset: -3px;
}


.style-underlined
{
 text-decoration: solid underline 2px;
 text-underline-offset: 4px;
}



.style-row-hover:focus, .style-row-hover:hover {
    background-color: var(--color-blue-1-secondary);
    transition:  all 0.25s ease-in-out;
}






/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                        S H A D O W S                                           */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/


.shadow-sharp-bottom
{
 box-shadow: var(--shadow-sharp);
}




.shadow-sharp-top
{
 box-shadow: var(--shadow-sharp-top);
}

.shadow-sharp
{
 box-shadow: var(--shadow-sharp);
}

.shadow-sharp-right
{
 box-shadow: var(--shadow-sharp-right);
}

.shadow-sharp-text
{
 text-shadow: var(--shadow-sharp-text);
}



.shadow-soft-bottom
{
 box-shadow: var(--shadow-soft-bottom);
}


.shadow-soft-right
{
 box-shadow: var(--shadow-soft-right);
}


.shadow-soft-text
{
 text-shadow: var(--shadow-soft-text);
}







/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                     T R A N S I T I O N S                                      */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

/*------------------------------------------------------------------------------------------------*/
/*                                                                                                */
/*                                     ANIMATIONS                                                 */
/*                                                                                                */
/*------------------------------------------------------------------------------------------------*/

.result-animation-fullscreen {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  overflow: hidden;
  z-index: 9999;
}

/* --- Clap floating --- */
.clap-float {
  position: absolute;
  bottom: -30px;
  animation: floatClap linear forwards;
  text-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}

@keyframes floatClap {
  0% {
    transform: translateY(0) rotate(0deg) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-50vh) rotate(20deg) scale(1.2);
    opacity: 1;
  }

  100% {
    transform: translateY(-100vh) rotate(-10deg) scale(1.3);
    opacity: 0;
  }
}

/* --- Bong bóng bay --- */
.bubble {
  position: absolute;
  bottom: -50px;
  border-radius: 50%;
  animation: floatBubble linear forwards;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.4);
}

@keyframes floatBubble {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.7;
  }

  50% {
    transform: translateY(-50vh) scale(1.1);
    opacity: 0.9;
  }

  100% {
    transform: translateY(-100vh) scale(1.3);
    opacity: 0;
  }
}

.balloon {
  position: absolute;
  bottom: -10%;
  transform-origin: center;
  animation-name: balloonFlyUp;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  /* mượt */
  animation-fill-mode: forwards;
  animation-iteration-count: 1;
  z-index: 9999;
  pointer-events: none;
  box-shadow: inset -6px -12px rgba(0, 0, 0, 0.15);
  border-radius: 50% 50% 45% 45%;
}

.balloon::after {
  content: "";
  position: absolute;
  bottom: -55px;
  left: 50%;
  width: 2px;
  height: 80px;
  transform: translateX(-50%);
  background: linear-gradient(to bottom,
      rgba(120, 120, 120, 0.6) 0%,
      /* phần trên rõ hơn */
      rgba(150, 150, 150, 0.4) 50%,
      /* giữa mờ nhẹ */
      rgba(200, 200, 200, 0.2) 100%
      /* dưới nhạt dần */
    );
  border-radius: 1px;
  animation: balloonStringWave 2.5s ease-in-out infinite;
}

@keyframes balloonFlyUp {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }

  100% {
    transform: translateY(-130vh) scale(1.02);
    opacity: 0;
  }
}


@keyframes balloonStringWave {

  0%,
  100% {
    transform: translateX(-50%) rotate(4deg);
  }

  50% {
    transform: translateX(-50%) rotate(-4deg);
  }
}

/* ----------------------------- */

.floating-item {
  position: absolute;
  bottom: -10%;
  animation-name: floatUpStraight;
  animation-timing-function: cubic-bezier(0.25, 0.1, 0.25, 1);
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  text-shadow: 0 0 6px rgba(255, 255, 150, 0.8);
  filter: drop-shadow(0 0 8px rgba(255, 230, 0, 0.7));
}

@keyframes floatUpStraight {
  0% {
    transform: translateY(0) scale(1);
    opacity: 0.9;
  }
  100% {
    transform: translateY(-120vh) scale(1.05);
    opacity: 0;
  }
}