/*
Theme Name: MiniApp
Description: This is a child theme for Flatsome Theme
Author: UX Themes
Template: flatsome
Version: 3.0
*/

/*************** ADD CUSTOM CSS HERE.   ***************/
p{
	margin-bottom: 10px !important;
}
.header .stuck{
	border-bottom: 1px solid rgb(0 0 0 / 9%);
    background: rgb(255 255 255 / 0%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
	box-shadow: unset !important;
}
.txt-bage{
	width: 43%;
    background: #e6e6e6;
    padding: 5px 20px;
	border-radius: 99px;
}
.txt-bage p{
	margin-bottom: 0 !important;
}
.wm-business-benefit .left .col-inner, .wm-business-benefit .right .child .col-inner, .wm-user-benefit .col-inner, .wm-expense .col-inner, .wm-learn-rsrc .left .col-inner, .wm-learn-rsrc .right .child .col-inner{
/* 	box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px, rgba(60, 64, 67, 0.15) 0px 1px 3px 1px; */
	box-shadow: rgba(67, 71, 85, 0.27) 0px 0px 0.25em, rgba(90, 125, 188, 0.05) 0px 0.25em 1em;
    border-radius: 10px;
	transition: all 0.3s ease;
}
.wm-business-benefit .left .col-inner:hover,
.wm-business-benefit .right .child .col-inner:hover,
.wm-user-benefit .col-inner:hover,
.wm-expense .col-inner:hover,
.wm-learn-rsrc .left .col-inner:hover,
.wm-learn-rsrc .right .child .col-inner:hover {
  transform: translateY(-6px); /* nhấc khối lên */
  box-shadow: rgba(0, 0, 0, 0.25) 0px 8px 16px,
              rgba(0, 0, 0, 0.1) 0px 4px 6px;
	background: #f3f3f3;
}
.wm-business-benefit .left .col-inner{
	height: 532px;
}
.wm-expense .col-inner{
	background: #fff;
}
.svg-icon{
	width: 45px;
    height: 45px;
    border-radius: 13px;
    padding: 10px;
    background: #e8e8e8;
    margin-bottom: 5px;
}
.wm-learn-rsrc .left .col-inner{
	height: 433px;	
}
.wm-user-benefit .bn-1 .svg-icon{
	background: #d5e6ff;
	color: #2b7fff;
}
.wm-user-benefit .bn-2 .svg-icon{
	background: #fdf2cf;
	color: #f0b100;
}
.wm-user-benefit .bn-3 .svg-icon{
	background: #ffd9ec;
	color: #f6339a;
}
.wm-user-benefit .bn-4 .svg-icon{
	background: #cff2f9;
	color: #00b8db;
}

.expense {
  position: relative;
  overflow: hidden;
}
.expense .bg-base {
  inset: 0;
  background: #f5f5f5;
  background-size: cover;
  z-index: 0;
}
.expense .bg-base,
.expense .bg-layer {
  position: absolute;
  inset: 0;
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  will-change: opacity, transform;
	object-fit: cover; 
}
.expense .bg-layer {
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.06);
  transition: opacity 420ms ease, transform 420ms ease;
  z-index: 1;
}

.wm-learn-rsrc .left .col-inner,
.wm-learn-rsrc .right .child .col-inner {
  animation: floatUpDown 3s ease-in-out infinite;
}
@keyframes floatUpDown {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}
.wm-learn-rsrc .left .col-inner {
  animation-delay: 0s;
}
.wm-learn-rsrc .right .child .col:nth-of-type(1) .col-inner {
  animation-delay: 0.6s;
}
.wm-learn-rsrc .right .child .col:nth-of-type(2) .col-inner {
  animation-delay: 1.2s;
}
.wm-learn-rsrc .right .child .col:nth-of-type(3) .col-inner {
  animation-delay: 1.8s;
}
.wm-learn-rsrc .right .child .col:nth-of-type(4) .col-inner {
  animation-delay: 2.4s;
}
.wm-learn-rsrc .right .child .col:nth-of-type(5) .col-inner {
  animation-delay: 3s;
}

.img-intro {
  position: relative;
  width: 300px;
  height: 300px;
  margin: auto;
  perspective: 1000px;
}

.img-intro img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  display: block;
}

/* Vành đai nghiêng */
.img-intro::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 180%;
  height: 50%;
  border: 2px solid rgba(255, 255, 255, 0.6);
  border-radius: 50%;
  transform: translate(-50%, -50%) rotateX(70deg) rotateZ(20deg);
  animation: spin-ring 12s linear infinite;
}

/* Sao chạy quanh vành đai */
.img-intro::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 12px;
  height: 12px;
  background: radial-gradient(white, rgba(255,255,255,0.3));
  border-radius: 50%;
  transform-origin: -150px 0;
  animation: orbit-star 6s linear infinite;
}

@keyframes spin-ring {
  0%   { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(0deg); }
  100% { transform: translate(-50%, -50%) rotateX(70deg) rotateZ(360deg); }
}

@keyframes orbit-star {
  0%   { transform: rotate(0deg) translateX(150px) rotate(0deg); }
  100% { transform: rotate(360deg) translateX(150px) rotate(-360deg); }
}
.absolute-footer {
    display: none !important;
}

@media only screen and (max-width: 48em) {
/*************** ADD MOBILE ONLY CSS HERE  ***************/


}